/*
 * pf-cart.css — styling for everything add_to_cart_ui adds on top of the
 * WordPress render (config/customizations.json → add_to_cart_ui):
 *
 *   .pf-buyable        the buy box on a purchasable product page
 *   .pf-toast          "added to cart" notice
 *   .header-cart-link  floating cart pill, only while the cart has items
 *
 * Every selector is scoped to a pf-* class (or to .header-cart-link, which
 * only customize.py emits), so loading this file on a page with an empty
 * cart and no buy box changes nothing — that is what keeps the visual
 * baseline of the 2,500+ non-sale pages at 0.000%.
 *
 * Colours/typography follow the theme as rendered on the site: brand red
 * #c10e0e (--primary-color), Kanit, Flatsome's flat 2px-outline buttons.
 * Loaded by pf-cart.js (ensureCss) and by the buy-box block itself.
 */

/* ------------------------------------------------------------ design tokens
 * ค่าเดียวกับที่ theme เดิมใช้จริง (ดึงจาก storage/templates/*-shell.html
 * <style id="custom-css"> --primary-color: #c10e0e, ฟอนต์ Kanit) — ไม่ใช่ค่า
 * ใหม่ที่คิดเอง เพื่อให้ทุกอย่างที่เราเพิ่ม "กลืน" กับสีเดิมของเว็บ
 * ตัวแปรพวกนี้ scope ไว้ที่ :root เพราะไฟล์นี้โหลดเฉพาะหน้า dynamic
 * (cart/checkout/account/order + buy box) ไม่กระทบพิกเซลของหน้า static */
:root {
  --pf-brand: #c10e0e;
  --pf-brand-dark: #a30c0c;
  --pf-brand-tint: #fff5f5;
  --pf-ok: #1d7a34;
  --pf-ok-bg: #eef9f0;
  --pf-warn: #a66b00;
  --pf-warn-bg: #fff8e6;
  --pf-danger: #a61212;
  --pf-danger-bg: #fdecec;
  --pf-text: #383838;
  --pf-text-muted: #666;
  --pf-border: #e3e3e3;
  --pf-border-soft: #ececec;
  --pf-surface: #fff;
  --pf-surface-soft: #f9f9f9;
  --pf-radius: 8px;
  --pf-radius-sm: 6px;
  --pf-font: "Kanit", sans-serif;
  --pf-gap: 1em;
  /* touch target ขั้นต่ำ 44px ตามกฎ mobile-first ของโปรเจค */
  --pf-tap: 44px;
}

/* ------------------------------------------------------------ buy box */
.pf-buyable {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .65em .75em;
  margin: 1.1em 0 .4em;
  font-family: "Kanit", sans-serif;
}

/* quantity stepper: [ − | 1 | + ] as one control */
.pf-qty {
  display: inline-flex;
  align-items: stretch;
  height: 3em;
  margin: 0;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  opacity: 1;
}
.pf-qty .pf-qty-btn {
  width: 2.6em;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f6f6f6;
  color: #333;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pf-qty .pf-qty-btn:hover {
  background: #e9e9e9;
  color: #000;
  box-shadow: none;
  opacity: 1;
}
.pf-qty .pf-qty-btn:disabled,
.pf-qty .pf-qty-btn[disabled] {
  background: #f6f6f6;
  color: #bbb;
  cursor: not-allowed;
  opacity: 1;
}
.pf-qty .qty {
  width: 3.4em;
  max-width: 3.4em;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  color: #222;
  text-align: center;
  font-size: 1.05em;
  font-weight: 600;
  -moz-appearance: textfield;
}
.pf-qty .qty:focus {
  outline: none;
  background: #fff8f8;
}
.pf-qty .qty::-webkit-outer-spin-button,
.pf-qty .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* the two actions */
.pf-buyable .button {
  margin: 0;
  height: 3em;
  min-height: 0;
  line-height: 3em;
  padding: 0 1.4em;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  transition: background .2s, color .2s, box-shadow .2s, opacity .2s;
}
.pf-buyable .single_add_to_cart_button {
  flex: 1 1 11em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .6em;
  background-color: #c10e0e !important;
  border-color: #c10e0e;
  color: #fff;
}
.pf-buyable .single_add_to_cart_button:hover {
  color: #fff;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .14);
}
.pf-buyable .pf-buy-now {
  flex: 1 1 7.5em;
  background: transparent;
  border: 2px solid #c10e0e;
  color: #c10e0e;
  line-height: calc(3em - 4px);
}
.pf-buyable .pf-buy-now:hover {
  background: #c10e0e;
  color: #fff;
  box-shadow: none;
}
.pf-buyable .button:disabled,
.pf-buyable .button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.pf-buyable .pf-buy-now:disabled:hover,
.pf-buyable .pf-buy-now[disabled]:hover {
  background: transparent;
  color: #c10e0e;
}
.pf-buyable .pf-cart-ico {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  margin-top: -.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* stock / availability line — a coloured dot + short text */
.pf-buyable .pf-buybox-status {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  min-height: 1.5em;
  font-size: .92em;
  color: #666;
}
.pf-buyable .pf-buybox-status:empty {
  display: none;
}
.pf-buyable .pf-buybox-status::before {
  content: "";
  flex: none;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #c4c4c4;
}
.pf-buyable[data-pf-state="in"] .pf-buybox-status { color: #1d7a34; }
.pf-buyable[data-pf-state="in"] .pf-buybox-status::before { background: #2eae4f; }
.pf-buyable[data-pf-state="out"] .pf-buybox-status,
.pf-buyable[data-pf-state="down"] .pf-buybox-status { color: #a61212; }
.pf-buyable[data-pf-state="out"] .pf-buybox-status::before,
.pf-buyable[data-pf-state="down"] .pf-buybox-status::before { background: #c10e0e; }
.pf-buyable[data-pf-state="loading"] .pf-buybox-status::before {
  background: #ddd;
  animation: pf-pulse 1s ease-in-out infinite;
}
@keyframes pf-pulse { 50% { opacity: .25; } }

/* narrow screens: stepper + main button on one row, "buy now" full width */
@media (max-width: 549px) {
  .pf-buyable .single_add_to_cart_button { flex: 1 1 calc(100% - 9.5em); }
  .pf-buyable .pf-buy-now { flex: 0 0 100%; }
}

/* ------------------------------------------------------------ toast */
.pf-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 1em;
  max-width: min(92vw, 34em);
  padding: .85em 1.15em;
  border-radius: 10px;
  background: #1f1f1f;
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-size: .95em;
  line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  animation: pf-toast-in .22s ease-out;
}
.pf-toast-message { flex: 1 1 auto; }
.pf-toast-link {
  flex: none;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: .35em .8em;
  border-radius: 6px;
  background: #c10e0e;
}
.pf-toast-link:hover { color: #fff; background: #a30c0c; }
@keyframes pf-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ------------------------------------------------------------ cart pill */
/* customize.py emits <a class="header-cart-link"><span class="pf-cart-count" hidden></span></a>
   on every page. Invisible until pf-cart.js confirms the cart has items and
   sets data-pf-has-items — so an empty-cart page is pixel-identical to the
   WordPress render. */
.header-cart-link { display: none; }

/* ไอคอนตะกร้าบนแถบเมนู (desktop + mobile) — ซ่อนไว้ก่อนเสมอ แล้วให้ JS
   เปิดเมื่อรู้ว่าร้านเปิดขายอยู่ (pf-cart.js ตั้ง data-pf-shop="open")

   เดิมมาร์กอัปนี้ถูกส่งมาแบบมองเห็นได้เลย และ JS จะซ่อนก็ต่อเมื่อ
   /api/cart/summary ตอบว่าร้านปิด — วัดบนเน็ตช้าแล้วไอคอนโผล่ราว 800ms
   ก่อนหายไป (เจ้าของเห็น 15 ก.ย. 2026) ตอนนี้ค่าเริ่มต้นคือซ่อน จึงไม่มี
   ช่วงกะพริบไม่ว่าร้านจะเปิดหรือปิด

   ใช้ display:none ไม่ใช่ attribute hidden เพราะธีมกำหนด display ให้ <li>
   เหล่านี้เอง ซึ่งชนะกฎ [hidden] ของเบราว์เซอร์ — เหตุผลเดียวกับ
   .header-cart-link ด้านบน */
/* ต้องเจาะจงกว่า `.nav > li{display:inline-block}` ของธีม ซึ่งถูกโหลด
   ทีหลัง pf-cart.css จึงชนะถ้าน้ำหนักเท่ากัน — วัดแล้วด้วย DevTools
   protocol ว่ากฎธีมนี้เองที่ทำให้ไอคอนยังโผล่ */
.nav > li.pf-hdr-cart-item,
li.pf-hdr-cart-item { display: none; }
html[data-pf-shop="open"] .nav > li.pf-hdr-cart-item,
html[data-pf-shop="open"] li.pf-hdr-cart-item { display: inline-block; }
/* เส้นคั่นหน้าไอคอนตะกร้า ต้องซ่อน/แสดงไปพร้อมกัน ไม่งั้นจะเหลือเส้นลอย */
html:not([data-pf-shop="open"]) .pf-hdr-cart-item + .header-divider,
html:not([data-pf-shop="open"]) .header-divider.pf-hdr-cart-divider { display: none; }
/* ปุ่มตะกร้าลอย: เป็น "ภาพตะกร้า" (วงกลม + ไอคอน) ไม่ใช่ตัวเลขลอย ๆ
 * เจ้าของสั่ง 27 ส.ค. 2026 — เดิมเห็นเป็นเลข "2" เฉย ๆ เพราะไอคอนถูกเพิ่ม
 * ด้วย JS หลัง API ตอบ และคำว่า "ตะกร้า" แย่งพื้นที่กับไอคอน
 * ตอนนี้: วงกลมขนาด 56px มีไอคอนตะกร้ากลางวง + เลขจำนวนเป็น badge มุมขวาบน */
.header-cart-link[data-pf-has-items] {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border-radius: 50%;
  background: var(--pf-brand, #c10e0e);
  color: #fff !important;
  font-family: "Kanit", sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(193, 14, 14, .35);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.header-cart-link[data-pf-has-items]:hover,
.header-cart-link[data-pf-has-items]:focus-visible {
  transform: translateY(-2px);
  background: var(--pf-brand-dark, #a30c0c);
  box-shadow: 0 10px 26px rgba(193, 14, 14, .45);
}
/* คำว่า "ตะกร้า" ไม่แสดงเป็นข้อความอีก — ไอคอนสื่อความหมายแล้ว และ
 * <a> มี aria-label ให้โปรแกรมอ่านหน้าจอ (ไม่ได้สื่อด้วยภาพอย่างเดียวโดยไม่มี
 * ข้อความกำกับสำหรับ assistive tech) */
.header-cart-link .pf-cart-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.header-cart-link .pf-cart-ico {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* เลขจำนวน: badge วงกลมเล็กมุมขวาบนของปุ่ม (แพทเทิร์นที่คนคุ้นจากแอปช้อปปิ้ง) */
.header-cart-link .pf-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .35em;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
}

/* ==============================================================
 * หน้าขายที่ไม่มี baseline WordPress: /cart/, /checkout/, /account/*,
 * /order/* (docs สั่งงาน 26 ส.ค. 2026 กลุ่ม 🟠 ข้อ 2) — ทุก selector ในส่วนนี้
 * เจาะจงอยู่ใต้ body.account-page เท่านั้น (ShopPageRenderer::render() ใส่
 * คลาสนี้ให้ทุกหน้าที่ render ผ่านมันเสมอ) จึงไม่แตะพิกเซลของหน้า static ใด ๆ
 * ทั้ง 434 หน้าที่มี baseline — ยืนยันด้วย grep: ไม่มีหน้า publish ไหนมีคลาส
 * account-page ใน body
 * ============================================================== */

/* เนื้อหาอยู่คอลัมน์เดียวเต็มความกว้าง — ซ่อน sidebar "หมวดหมู่/บทความ
 * ล่าสุด" ของ post-shell เดิม (ใช้ปนกับหน้า blog) เพราะไม่เกี่ยวกับธุรกรรม
 * ซื้อขายและไม่มีที่ให้ลิงก์ไปหน้าจริง (ตัดเนื้อหาออกที่ CSS แทนการรื้อ shell
 * เพื่อคง marker/โครง HTML เดิมที่ ShopPageRenderer พึ่งพา — ดู docs คำสั่งงาน) */
body.account-page .post-sidebar {
  display: none;
}
body.account-page .large-9.col {
  /* Flatsome ใช้ float+width % ไม่ใช่ grid จริง เปลี่ยนแค่ width ของคอลัมน์
   * เดิมพอ ไม่ต้องรื้อ .row เพราะโครง CSS เดิมของธีมยังทำงานถูกต้อง
   * max-width ต้องปลดด้วย — ธีมตั้ง .large-9 { max-width: 75% } แยกไว้อีกกฎ
   * (ก่อนหน้านี้ปลดแค่ width เนื้อหาเลยยังโดนกดที่ 75% แล้วเหลือแถบว่าง
   * ด้านขวาทั้งแถบตรงที่ sidebar เคยอยู่) */
  width: 100%;
  max-width: 100%;
  /* ธีมจัดคอลัมน์ด้วย flexbox: .large-9 { flex-basis: 75% } คือกฎที่คุม
   * ความกว้างจริง (width/max-width เป็นแค่เพดาน) — ต้องปลดตัวนี้ด้วย
   * คอลัมน์ถึงจะกินเต็มแถวจริง หลัง sidebar ถูกซ่อนไป */
  flex-basis: 100%;
}

/* พื้นหลังเทาอ่อนทั้งผืนระหว่าง header กับ footer (design token: canvas
 * #f4f4f5) — การ์ดขาวถึงจะ "ลอย" ขึ้นมามีมิติ ไม่ใช่ขาวจมขาว · scope ที่
 * body.account-page เท่านั้น หน้า static ไม่มีคลาสนี้จึงไม่กระทบ baseline */
body.account-page #content.page-wrapper {
  background: #f4f4f5;
  padding-top: 1.6em;
  padding-bottom: 3em;
}

body.account-page .account-content {
  font-family: var(--pf-font);
  color: var(--pf-text);
  line-height: 1.6;
  /* 60em เป็นความกว้างอ่านสบายของหน้า "ข้อความ" แบบเก่า (login, ฟอร์ม,
   * รายละเอียดคำสั่งซื้อ) — คงไว้เป็นค่าตั้งต้น และจัดกึ่งกลางให้ด้วย
   * (เดิมชิดซ้าย เหลือที่ว่างขวาโล่งทั้งแถบ) */
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}
/* หน้าที่เป็นการ์ดกริด (ตะกร้า/สั่งซื้อ/ชำระเงิน) ต้องการความกว้างเต็ม
 * container แบบเดียวกับ frame 1180px ของ design pack — ปล่อยเต็มคอลัมน์
 * แล้วให้ .row ของธีมเป็นคนคุมขอบ */
body.account-page .account-content:has(.pf-ct-grid),
body.account-page .account-content:has(.pf-co-grid),
body.account-page .account-content:has(.pf-pay-grid) {
  /* เต็มความกว้างคอลัมน์ (เจ้าของสั่ง 28 ส.ค. 2026: "พื้นที่ทางขวาเหลือเยอะ
   * ขยายให้เต็ม") — ขอบซ้าย/ขวาให้ .row ของธีม (max 1440px + padding 30px)
   * เป็นคนคุมเหมือนหน้าอื่นของเว็บ ไม่ตั้งเพดานซ้อนอีกชั้น */
  max-width: none;
}
body.account-page .account-content h1 {
  margin-bottom: .7em;
}

/* -------------------------------------------------- notices (ผลลัพธ์ action) */
body.account-page .woocommerce-info,
body.account-page .woocommerce-message,
body.account-page .woocommerce-error {
  display: block;
  margin: 0 0 1.1em;
  padding: .9em 1.1em;
  border-radius: var(--pf-radius-sm);
  font-size: .95em;
  line-height: 1.6;
  list-style: none;
}
body.account-page .woocommerce-info,
body.account-page .woocommerce-message {
  background: var(--pf-ok-bg);
  color: var(--pf-ok);
  border: 1px solid #c8ebd0;
}
body.account-page .woocommerce-error {
  background: var(--pf-danger-bg);
  color: var(--pf-danger);
  border: 1px solid #f3c8c8;
}

/* -------------------------------------------------- ฟอร์มทั่วไป (login/
 * register/address/profile/checkout/slip) — ทุกฟอร์มใช้ p.form-row +
 * label/input ธรรมดา ให้ styling รวมจุดเดียว */
body.account-page .form-row {
  margin: 0 0 1.1em;
}
body.account-page .form-row label {
  display: block;
  margin-bottom: .4em;
  font-weight: 500;
  font-size: .95em;
}
body.account-page .form-row .required {
  color: var(--pf-brand);
}
body.account-page input[type="text"],
body.account-page input[type="email"],
body.account-page input[type="tel"],
body.account-page input[type="password"],
body.account-page input[type="number"],
body.account-page input[type="date"],
body.account-page input[type="datetime-local"],
body.account-page input[type="file"],
body.account-page select,
body.account-page textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--pf-tap);
  padding: .55em .8em;
  border: 1px solid #d9d9d9;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-family: var(--pf-font);
  font-size: 1em;
  line-height: 1.5;
}
body.account-page input:focus,
body.account-page select:focus,
body.account-page textarea:focus {
  outline: none;
  border-color: var(--pf-brand);
  box-shadow: 0 0 0 3px rgba(193, 14, 14, .12);
}
/* .pf-quiet-btn = ปุ่มที่ตั้งใจให้เงียบ (ลบสินค้า, ยกเลิกคำสั่งซื้อ) ปุ่มพวกนี้
 * เป็น <button type=submit> จึงโดนกฎปุ่มแบรนด์ด้านล่างเต็ม ๆ ถ้าไม่ยกเว้นไว้
 * ใช้คลาสเดียวร่วมกันแทนการไล่ใส่ชื่อทีละอันใน :not() — ปุ่มเงียบอันต่อไป
 * แค่ติดคลาสนี้ก็พอ ไม่ต้องกลับมาแก้ selector นี้อีก */
body.account-page button[type="submit"]:not(.pf-quiet-btn),
body.account-page .woocommerce-button,
body.account-page a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pf-tap);
  padding: 0 1.4em;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-brand) !important; /* override ธีมเดิม input.button.alt ที่ผูก !important ของตัวเองไว้ (catalog-mode legacy) */
  color: #fff !important;
  font-family: var(--pf-font);
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
body.account-page button[type="submit"]:not(.pf-quiet-btn):hover,
body.account-page .woocommerce-button:hover,
body.account-page a.button:hover {
  background: var(--pf-brand-dark) !important;
  color: #fff !important;
}
body.account-page button[type="submit"]:disabled,
body.account-page button[type="submit"][aria-busy="true"] {
  opacity: .6;
  cursor: not-allowed;
}
/* ปุ่มลิงก์รอง (เช่น "ตั้งเป็นที่อยู่หลัก", "ลบ") ไม่ใช่ action หลักของหน้า
 * ให้เบากว่าปุ่ม submit หลักเสมอ กันผู้ใช้กดผิดปุ่ม (ลบที่อยู่โดยไม่ตั้งใจ) */
body.account-page button.link {
  min-height: var(--pf-tap);
  padding: 0 .3em;
  border: 0;
  background: none !important;
  color: #4c738e !important;
  font-family: var(--pf-font);
  font-size: .95em;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------- ตะกร้า (.shop_table ของ
 * WooCommerce/Flatsome มีสไตล์พื้นฐานอยู่แล้วจาก flatsome-shop.css รวม
 * responsive breakpoint 549px/849px — ตรงนี้เสริมเฉพาะจุดที่ต้องดีไซน์เพิ่ม
 * ไม่ override โครง table ทั้งหมด) */
body.account-page .shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
}
body.account-page .shop_table.cart th,
body.account-page .shop_table.cart td {
  padding: .9em .6em;
  border-bottom: 1px solid var(--pf-border-soft);
  vertical-align: middle;
}
/* คอลัมน์รูปกับปุ่มลบไม่มีหัวข้อข้อความ — บีบให้แคบพอดีเนื้อหา ไม่ให้กิน
 * ความกว้างของคอลัมน์ที่มีข้อมูลจริง
 * สินค้าที่ไม่มีรูปปก: ช่องยังถูก render อยู่ (โครงคอลัมน์ต้องตรงกัน) แต่ต้อง
 * ไม่กินความกว้าง ไม่งั้นตารางทั้งตารางดูเยื้องเข้ามาโดยไม่มีเหตุผล */
body.account-page .shop_table.cart .pf-col-thumb,
body.account-page .shop_table.cart .product-thumbnail {
  width: 1px;
  padding-left: 0;
  padding-right: 0;
}
body.account-page .shop_table.cart .product-thumbnail:not(:empty) {
  width: 4.5em;
  padding-right: .75em;
}
body.account-page .shop_table.cart .pf-col-remove,
body.account-page .shop_table.cart .product-remove {
  width: 3.5em;
  text-align: center;
}
/* ข้อความที่มีเฉพาะสำหรับโปรแกรมอ่านหน้าจอ (หัวคอลัมน์ปุ่มลบ) */
.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ตัวเลขเงินชิดขวาอ่านง่ายกว่า และหัวข้อต้องชิดทางเดียวกับข้อมูลใต้มัน */
body.account-page .shop_table.cart th:nth-child(3),
body.account-page .shop_table.cart th:nth-child(5),
body.account-page .shop_table.cart .product-price,
body.account-page .shop_table.cart .product-subtotal {
  text-align: right;
}
body.account-page .shop_table.cart th:nth-child(4),
body.account-page .shop_table.cart .product-quantity {
  text-align: center;
}

body.account-page .shop_table.cart .product-name {
  font-weight: 500;
}
body.account-page .shop_table.cart img {
  border-radius: var(--pf-radius-sm);
  object-fit: cover;
}

/* stepper บนแถวตะกร้า — คลาสเดียวกับ buy box (.pf-qty/.pf-qty-btn) จึงได้
 * สไตล์เดียวกันฟรีจากกฎด้านบนของไฟล์นี้ ไม่ต้องเขียนซ้ำ */
body.account-page .product-quantity form {
  margin: 0;
}
body.account-page .product-quantity .pf-qty {
  /* เตี้ยกว่าใน buy box เล็กน้อยเพราะอยู่ในแถวตาราง แต่ยังสูงพอเป็น touch
   * target (2.6em ≈ 45px ที่ font-size ของธีม) */
  height: 2.6em;
}
body.account-page .product-quantity .pf-qty .pf-qty-btn {
  width: 2.4em;
  font-size: 1.15em;
}

body.account-page .product-remove button.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-tap);
  height: var(--pf-tap);
  border: 0;
  border-radius: 50%;
  background: var(--pf-surface-soft);
  color: var(--pf-text-muted);
  font-size: 1.25em;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
body.account-page .product-remove button.remove:hover,
body.account-page .product-remove button.remove:focus-visible {
  background: var(--pf-brand);
  color: #fff;
}

body.account-page .cart-collaterals {
  max-width: 26em;
  /* ชิดขวาให้ตรงกับขอบขวาของตารางสินค้า (ไม่ใช่ขอบขวาของจอ) เพราะสองตาราง
   * อยู่ในคอลัมน์เนื้อหาเดียวกัน — ตอน sidebar ยังอยู่ margin-left:auto พอ
   * แต่เมื่อเนื้อหาเต็มความกว้างแล้ว ต้องจำกัดคอลัมน์ด้วย (ดู .account-content
   * ด้านล่าง) ไม่งั้นสรุปยอดจะลอยไปไกลจากตารางที่มันสรุป */
  margin-left: auto;
}
/* จำกัดความกว้างของเนื้อหาหน้าตะกร้า/สั่งซื้อ: ตารางเงินที่กว้างเกิน ~70em
 * อ่านยากเพราะตาต้องกวาดไกลระหว่างชื่อสินค้ากับตัวเลข */
body.account-page .account-content {
  max-width: 70em;
}
body.account-page .cart-collaterals .shop_table {
  width: 100%;
  border-collapse: collapse;
}
body.account-page .cart-collaterals th,
body.account-page .cart-collaterals td {
  padding: .6em;
  border-bottom: 1px solid var(--pf-border-soft);
  text-align: left;
}
body.account-page .cart-collaterals td {
  text-align: right;
  font-weight: 600;
}

body.account-page .cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  margin-top: 1.3em;
}
body.account-page .cart-actions .checkout-button {
  flex: 1 1 14em;
  background: var(--pf-brand) !important;
}

/* มือถือ 360px: ตารางตะกร้าต้องไม่ overflow แนวนอน — flatsome-shop.css ซ่อน
 * คอลัมน์ price/subtotal ไปแล้วที่ ≤549px แต่ thumbnail 90px + คอลัมน์ที่
 * เหลือยังกว้างเกิน 360px ได้ในบางเบราว์เซอร์ จึงใส่ overflow-x: auto กันชน
 * เป็นทางสำรอง (progressive: ตารางไม่ถูกบีบจนอ่านไม่ออก) */
@media (max-width: 549px) {
  /* .cart-wrap คือ <div> ที่ห่อ <table> ไว้ (ไม่ใช่คลาสบนตัว table เอง) —
   * ต้อง scroll แนวนอนได้เฉพาะกล่องห่อ ไม่ใช่บีบ table เข้าไปเอง */
  body.account-page .cart-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.account-page .cart-wrap table {
    width: 100%;
  }
  body.account-page .cart-collaterals {
    max-width: none;
  }
}

/* -------------------------------------------------- upload สลิป: progress bar */
.pf-upload-progress {
  margin: .6em 0 1.1em;
}
.pf-upload-progress[hidden] { display: none; }
.pf-upload-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--pf-border-soft);
  overflow: hidden;
}
.pf-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--pf-brand);
  transition: width .15s ease-out;
}
.pf-upload-progress-label {
  display: block;
  margin-top: .4em;
  font-size: .85em;
  color: var(--pf-text-muted);
}

/* ตาราง /account/orders — คอลัมน์เลขที่ออเดอร์/ปุ่มต้องไม่ตัดคำครึ่งคำ (พบจริง
 * ตอนทดสอบด้วย Playwright ที่ 360px: "ชำระเงิน" ตัดเป็น "ชำระ/เงิน" เพราะไม่มี
 * white-space กำกับ) ห่อด้วย .cart-wrap (กฎ overflow-x ด้านล่าง) เป็นทางสำรอง
 * ถ้าเนื้อหายังกว้างกว่าจออยู่ดี */
.pf-orders-table td, .pf-orders-table th { white-space: nowrap; }
.pf-orders-table .pf-status-badge { white-space: nowrap; }
.pf-orders-table a.button {
  display: inline-flex;
  min-height: var(--pf-tap);
  align-items: center;
  padding: 0 1em;
  white-space: nowrap;
  background: var(--pf-brand) !important; /* override ธีมเดิม .button ที่ไม่ได้ตั้งสีไว้บนตาราง woocommerce ปกติ */
  color: #fff !important;
  border-radius: var(--pf-radius-sm);
  text-decoration: none;
}

/* status badge บนตาราง /account/orders — คลาสสีจาก OrderStatusLabels::
 * statusClass() (draft/warn/ok/danger) ใช้ชุดสีเดียวกับหน้า admin เพื่อให้
 * ลูกค้ากับแอดมินอ่านสีตรงกัน (ok=เขียว, warn=เหลือง, danger=แดง, draft=เทา)
 * ทุกอันมีข้อความไทยกำกับเสมอ ไม่ใช่จุดสีเปล่า ๆ (กฎ accessibility ข้อ 9) */
.pf-status-badge {
  display: inline-block;
  padding: .3em .7em;
  border-radius: 999px;
  font-size: .82em;
  font-weight: 600;
  white-space: nowrap;
}
.pf-status-badge.pf-status-draft { background: #eee; color: #555; }
.pf-status-badge.pf-status-warn { background: var(--pf-warn-bg); color: var(--pf-warn); }
.pf-status-badge.pf-status-ok { background: var(--pf-ok-bg); color: var(--pf-ok); }
.pf-status-badge.pf-status-danger { background: var(--pf-danger-bg); color: var(--pf-danger); }

/* -------------------------------------------------- order timeline (stepper
 * แนวนอนบนจอกว้าง, แนวตั้งบนมือถือ) ใช้ทั้ง /order/{no} และ
 * /account/orders — สถานะสื่อด้วยข้อความ + ไอคอนเสมอ ไม่ใช่สีอย่างเดียว
 * (กฎ accessibility ข้อ 9) */
.pf-order-timeline {
  display: flex;
  margin: 1.4em 0 1.8em;
  padding: 0;
  list-style: none;
  font-family: var(--pf-font);
}
.pf-order-timeline li {
  flex: 1 1 0;
  position: relative;
  padding: 0 .6em .5em 0;
  text-align: center;
  font-size: .82em;
  color: var(--pf-text-muted);
}
.pf-order-timeline li::before {
  content: "";
  display: block;
  width: 1.7em;
  height: 1.7em;
  margin: 0 auto .5em;
  border-radius: 50%;
  background: var(--pf-surface);
  border: 2px solid var(--pf-border);
}
.pf-order-timeline li::after {
  content: "";
  position: absolute;
  top: .85em;
  left: calc(50% + 1.1em);
  right: calc(-50% + 1.1em);
  height: 2px;
  background: var(--pf-border);
}
.pf-order-timeline li:last-child::after { display: none; }
.pf-order-timeline li.is-done { color: var(--pf-ok); }
.pf-order-timeline li.is-done::before { background: var(--pf-ok); border-color: var(--pf-ok); }
.pf-order-timeline li.is-done::after { background: var(--pf-ok); }
.pf-order-timeline li.is-current { color: var(--pf-brand); font-weight: 600; }
.pf-order-timeline li.is-current::before {
  background: var(--pf-brand);
  border-color: var(--pf-brand);
  box-shadow: 0 0 0 4px rgba(193, 14, 14, .15);
}
.pf-order-timeline li.is-cancelled { color: var(--pf-danger); }
.pf-order-timeline li.is-cancelled::before { background: var(--pf-danger); border-color: var(--pf-danger); }
.pf-order-timeline .pf-step-label {
  display: block;
}

@media (max-width: 549px) {
  /* จอแคบ: เรียงเป็นคอลัมน์แนวตั้งแทน กันข้อความไทยยาวชนกัน */
  .pf-order-timeline {
    flex-direction: column;
    gap: .9em;
  }
  .pf-order-timeline li {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0;
  }
  .pf-order-timeline li::before {
    margin: 0 .8em 0 0;
    flex: none;
  }
  .pf-order-timeline li::after {
    left: .85em;
    top: 1.7em;
    bottom: -0.9em;
    right: auto;
    width: 2px;
    height: auto;
  }
}

/* -------------------------------------------------- ค่าส่งบนหน้าสินค้า
 * (buy box) — ข้อความประมาณการ ต้องไม่ทำให้เข้าใจผิดว่าคือราคาสุดท้าย */
.pf-buyable .pf-shipping-hint {
  flex: 0 0 100%;
  margin: -.2em 0 0;
  font-size: .85em;
  color: var(--pf-text-muted);
}

/* -------------------------------------------------- โค้ดส่วนลด (/checkout/,
 * docs/12 §S11e) — กล่องอยู่เหนือตารางสรุปยอดที่มันมีผล, ปุ่ม/ช่องกรอกสูง
 * ≥44px ผ่านกฎ input[type=text]/button[type=submit] ทั่วไปของ
 * body.account-page ด้านบนอยู่แล้ว ที่นี่เสริมเฉพาะ layout ของกล่องนี้เอง */
body.account-page .pf-coupon-box {
  max-width: 26em;
  margin: 0 auto 1.3em;
}
body.account-page .pf-coupon-label {
  display: block;
  margin-bottom: .4em;
  font-weight: 500;
  font-size: .95em;
}
body.account-page .pf-coupon-row {
  display: flex;
  gap: .6em;
}
body.account-page .pf-coupon-input {
  flex: 1 1 auto;
  min-width: 0;
  /* ตัวพิมพ์ใหญ่เสมอเพื่อให้ตรงกับ CouponService::normalizeCode() ที่ฝั่ง
     server ก็แปลงเป็นตัวพิมพ์ใหญ่เหมือนกัน — แค่ช่วยสายตา ไม่ใช่ validation */
  text-transform: uppercase;
}
body.account-page .pf-coupon-apply-btn {
  flex: 0 0 auto;
  padding: 0 1.1em;
}
body.account-page .pf-coupon-hint {
  margin: .5em 0 0;
  font-size: .88em;
  color: var(--pf-text-muted);
}
body.account-page .pf-coupon-hint.is-ok {
  color: var(--pf-ok);
}
body.account-page .pf-coupon-hint.is-err {
  color: var(--pf-danger);
}
body.account-page .pf-coupon-applied {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .3em;
  padding: .7em .9em;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-ok-bg);
  color: var(--pf-ok);
  font-size: .95em;
}
body.account-page .pf-coupon-ok-icon {
  flex: none;
  font-weight: 700;
}
body.account-page .pf-coupon-remove {
  display: inline-block;
  color: var(--pf-text-muted);
  font-size: .88em;
  text-decoration: underline;
}
/* แถวส่วนลดในตารางสรุปยอด (/checkout/ และ /order/{no}/pay) — ต้องอ่านออก
 * ทันทีว่าเป็นตัวลด ไม่ใช่แค่สีแดงเฉย ๆ (กฎ accessibility: ห้ามสื่อความหมาย
 * ด้วยสีอย่างเดียว) เครื่องหมาย "-" หน้าตัวเลขอยู่ใน markup แล้ว สีเป็นแค่
 * ตัวช่วยเสริม */
body.account-page .pf-discount-row th,
body.account-page .pf-discount-row td {
  color: var(--pf-ok);
}
/* ยอดที่ต้องโอนบนหน้า /order/{no}/pay — ต้องเด่นที่สุดในหน้า (docs/12 §S11e
 * item 3: ลูกค้าจำนวนไม่น้อยโอนยอดเต็มโดยไม่หักส่วนลด) */
.pf-pay-total {
  padding: .8em 1em;
  border-radius: var(--pf-radius);
  background: var(--pf-brand-tint);
  font-size: 1.25em;
}
.pf-pay-total strong {
  color: var(--pf-brand-dark);
}

@media (max-width: 549px) {
  /* จอแคบ: ปุ่ม "ใช้โค้ด" ตกลงมาอยู่แถวใหม่แทนที่จะบีบช่องกรอกจนพิมพ์ยาก */
  body.account-page .pf-coupon-row {
    flex-wrap: wrap;
  }
  body.account-page .pf-coupon-input {
    flex-basis: 100%;
  }
  body.account-page .pf-coupon-apply-btn {
    flex: 1 1 auto;
  }
}

/* ============================================================ checkout การ์ด
 * (design pack "UI สั่งซื้อสินค้าทันสมัย" 27 ส.ค. 69 — ต้นแบบ "หน้าเดียวจบ")
 *
 * โครง /checkout/ เดิมเป็น <h2> + <table> เรียงลงมา ถูกต้องเชิงข้อมูลแต่ไม่มี
 * ลำดับสายตา ลูกค้าไม่รู้ว่าเหลืออีกกี่ขั้น การ์ดพวกนี้เปลี่ยนแค่ "หน้าตา"
 * ของหน้าที่ flow เดิมอยู่แล้ว (docs/12 §4.1 "หน้าเดียว 4 ส่วน") ไม่ได้เปลี่ยน
 * ลำดับขั้นตอนหรือ endpoint ใด ๆ — address_id/coupon ยังเดินทางผ่าน GET
 * เหมือนเดิม ปุ่มยืนยันยัง POST /checkout/place พร้อม confirmed_* ครบชุด
 *
 * ทุก selector อยู่ใต้ .pf-co-* หรือ body.account-page เท่านั้น หน้า static
 * 2,500+ หน้าจึงไม่ขยับแม้แต่พิกเซลเดียว
 */
body.account-page .pf-co {
  display: flex;
  flex-direction: column;
  gap: .9em;
}

/* กริดสองคอลัมน์: ซ้าย = ขั้นตอน, ขวา = สรุปยอดที่ sticky ตามจอ
 * มือถือ (ลูกค้าส่วนใหญ่) ได้คอลัมน์เดียวเป็นค่าตั้งต้น — mobile-first */
body.account-page .pf-co-grid {
  display: flex;
  flex-direction: column;
  gap: .9em;
}

/* การ์ดหนึ่งใบ = หนึ่งขั้นตอน */
body.account-page .pf-co-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: 1em 1.1em;
}

/* หัวการ์ด: [เลขขั้น] ชื่อขั้น .... ลิงก์ช่วยเหลือ */
body.account-page .pf-co-head {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .75em;
}
body.account-page .pf-co-step {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--pf-brand);
  color: #fff;
  font-size: .82em;
  line-height: 26px;
  text-align: center;
}
body.account-page .pf-co-title {
  font-size: .95em;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
body.account-page .pf-co-head-link {
  margin-left: auto;
  font-size: .82em;
}

/* ---- ที่อยู่: การ์ดเลือกได้ (radio ซ่อน ใช้ label ทั้งใบเป็นพื้นที่กด) ---- */
body.account-page .pf-co-addr {
  display: flex;
  gap: .65em;
  align-items: flex-start;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  padding: .75em .85em;
  margin: 0 0 .5em;
  cursor: pointer;
  font-size: .87em;
  line-height: 1.6;
}
body.account-page .pf-co-addr:last-of-type {
  margin-bottom: 0;
}
body.account-page .pf-co-addr.is-on {
  border: 1.5px solid var(--pf-brand);
  background: var(--pf-brand-tint);
}
/* radio จริงยังอยู่ใน DOM (ไม่ใช้ display:none) เพื่อให้ยัง focus ด้วยคีย์บอร์ด
 * และ screen reader ยังอ่านเจอ — ซ่อนเชิงสายตาอย่างเดียว */
body.account-page .pf-co-addr input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.account-page .pf-co-dot {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #c7c7cc;
  background: #fff;
  margin-top: .2em;
}
body.account-page .pf-co-addr.is-on .pf-co-dot {
  border: 5px solid var(--pf-brand);
}
/* วงแหวน focus ต้องเห็นชัดเพราะ radio ถูกซ่อนเชิงสายตา */
body.account-page .pf-co-addr input[type="radio"]:focus-visible + .pf-co-dot {
  outline: 2px solid var(--pf-brand);
  outline-offset: 2px;
}
body.account-page .pf-co-addr-name {
  font-weight: 500;
}
body.account-page .pf-co-addr-line {
  color: #555;
}
body.account-page .pf-co-addr-tag {
  font-size: .85em;
  color: var(--pf-brand);
}

/* ---- รายการสินค้าในการ์ด ---- */
body.account-page .pf-co-item {
  display: flex;
  gap: .8em;
  padding: .85em 0;
  border-bottom: 1px solid var(--pf-border-soft);
  align-items: flex-start;
}
body.account-page .pf-co-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
body.account-page .pf-co-thumb {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 10px;
  background: #f2f2f2;
  border: 1px solid var(--pf-border);
  object-fit: cover;
}
body.account-page .pf-co-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .3em;
}
body.account-page .pf-co-item-name {
  font-size: .9em;
  font-weight: 500;
  line-height: 1.45;
}
body.account-page .pf-co-item-meta {
  font-size: .8em;
  color: var(--pf-text-muted);
}
body.account-page .pf-co-item-foot {
  display: flex;
  align-items: baseline;
  gap: .6em;
  flex-wrap: wrap;
  margin-top: .15em;
}
body.account-page .pf-co-item-qty {
  font-size: .82em;
  color: var(--pf-text-muted);
}
body.account-page .pf-co-item-line {
  margin-left: auto;
  font-size: 1.02em;
  font-weight: 600;
}

/* ---- แถวข้อมูล (วิธีส่ง/น้ำหนัก) ---- */
body.account-page .pf-co-row {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: .87em;
  padding: .28em 0;
}
body.account-page .pf-co-row-label {
  color: var(--pf-text-muted);
}
body.account-page .pf-co-note {
  font-size: .78em;
  color: #8e8e93;
  margin: .5em 0 0;
  line-height: 1.6;
}

/* ---- สรุปยอด ---- */
body.account-page .pf-co-sum {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: .9em 1em;
}
body.account-page .pf-co-sum-title {
  font-size: .92em;
  font-weight: 600;
  margin: 0 0 .55em;
}
body.account-page .pf-co-sum-row {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: .87em;
  padding: .26em 0;
}
body.account-page .pf-co-sum-row span:first-child {
  color: var(--pf-text-muted);
}
body.account-page .pf-co-sum-row.is-discount,
body.account-page .pf-co-sum-row.is-discount span:first-child {
  color: var(--pf-ok);
}
body.account-page .pf-co-sum-sep {
  height: 1px;
  background: var(--pf-border-soft);
  margin: .45em 0;
}
body.account-page .pf-co-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8em;
}
body.account-page .pf-co-sum-total-label {
  font-size: .92em;
  font-weight: 600;
}
body.account-page .pf-co-sum-total-value {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--pf-brand);
}
body.account-page .pf-co-vat {
  font-size: .78em;
  color: #8e8e93;
  margin: .4em 0 0;
}

/* ปุ่มยืนยัน: เต็มความกว้าง สูงเกิน 44px ตามกฎ touch target */
body.account-page .pf-co-confirm {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: .7em;
  border: 0;
  border-radius: 12px;
  background: var(--pf-brand);
  color: #fff;
  font-family: var(--pf-font);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
}
body.account-page .pf-co-confirm:hover,
body.account-page .pf-co-confirm:focus {
  background: var(--pf-brand-dark);
  color: #fff;
}

/* ยืนยันด้วย checkbox ตามเดิม (ยังบังคับ required) แต่จัดวางให้กดง่ายบนมือถือ */
body.account-page .pf-co-agree {
  display: flex;
  align-items: flex-start;
  gap: .55em;
  font-size: .84em;
  line-height: 1.55;
  margin: .7em 0 0;
  cursor: pointer;
}
body.account-page .pf-co-agree input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: .1em 0 0;
  accent-color: var(--pf-brand);
}

/* กล่องเตือน 24 ชม. */
body.account-page .pf-co-warn {
  font-size: .8em;
  color: var(--pf-warn);
  background: var(--pf-warn-bg);
  border: 1px solid #f0e0b8;
  border-radius: 8px;
  padding: .6em .75em;
  margin: .6em 0 0;
  line-height: 1.6;
}

/* ---- desktop: สองคอลัมน์ + สรุปยอดลอยตาม ---- */
@media (min-width: 900px) {
  body.account-page .pf-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
    gap: 1em;
  }
  body.account-page .pf-co-main {
    display: flex;
    flex-direction: column;
    gap: .9em;
  }
  body.account-page .pf-co-side {
    position: sticky;
    top: 1em;
  }
}

/* กล่องคูปองตอนอยู่ในการ์ดขั้นที่ 4: การ์ดคุมความกว้าง/ระยะห่างเองแล้ว
 * `max-width:26em;margin:0 auto` เดิมจึงทำให้ช่องกรอกลอยไปกลางการ์ดไม่ตรงกับ
 * หัวข้ออื่น — ในบริบทการ์ดให้กินเต็มความกว้างและไม่ต้องมี margin ล่าง */
body.account-page .pf-co-card .pf-coupon-box {
  max-width: none;
  margin: 0;
}

/* checkbox ยืนยัน: กล่องจริง 20px แต่ <label> ทั้งแถวเป็นพื้นที่กดได้ จึงบังคับ
 * ให้แถวสูงอย่างน้อย 44px ตามกฎ touch target ของโปรเจค */
body.account-page .pf-co-agree {
  min-height: var(--pf-tap);
  align-items: center;
}

/* ลิงก์รองในหัวการ์ด ("แก้ไขตะกร้า"): ตัวอักษรเล็กแต่ยังต้องกดง่ายบนมือถือ
 * จึงขยายพื้นที่กดด้วย padding + inline-flex ให้สูงครบ 44px โดยที่ขนาด
 * ตัวหนังสือไม่เปลี่ยน (padding แนวตั้งไม่ดันความสูงการ์ดเพราะหัวการ์ดเป็น
 * flex align-items:center อยู่แล้ว) */
body.account-page .pf-co-head-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pf-tap);
  padding: 0 .2em;
  white-space: nowrap;
}

/* ============================================================ ตะกร้า (การ์ด)
 * (design pack "UI สั่งซื้อสินค้าทันสมัย" — จอ "ตะกร้าสินค้า")
 *
 * เดิม /cart/ เป็น <table class="shop_table cart"> 6 คอลัมน์ ซึ่งบนมือถือต้อง
 * ซ่อนคอลัมน์ทิ้งถึงจะพอดีจอ ตอนนี้เป็นการ์ดเรียงกัน + สรุปยอด sticky แบบเดียว
 * กับ /checkout/ เพื่อให้สองหน้าที่ต่อกันหน้าตาเป็นชุดเดียวกัน
 *
 * ทุก data-pf-* ที่ pf-cart.js ผูกไว้ยังอยู่ครบ (cart-row, line-total,
 * update-form, remove-form, qty, cart-subtotal, cart-grand-total) — เปลี่ยนแค่
 * โครง HTML รอบ ๆ ไม่ได้เปลี่ยนสัญญากับ JS
 */
body.account-page .pf-ct-grid {
  display: flex;
  flex-direction: column;
  gap: .9em;
}
body.account-page .pf-ct-list {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: 0 1.1em;
}

/* หนึ่งแถว = หนึ่งสินค้า */
body.account-page .pf-ct-row {
  display: flex;
  gap: .85em;
  padding: 1em 0;
  border-bottom: 1px solid var(--pf-border-soft);
  align-items: flex-start;
}
body.account-page .pf-ct-row:last-child {
  border-bottom: 0;
}
body.account-page .pf-ct-row[aria-busy="true"] {
  opacity: .5;
}
body.account-page .pf-ct-thumb {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: 10px;
  background: #f2f2f2;
  border: 1px solid var(--pf-border);
  object-fit: cover;
}
body.account-page .pf-ct-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .35em;
}
body.account-page .pf-ct-name {
  font-size: .97em;
  font-weight: 500;
  line-height: 1.45;
}
body.account-page .pf-ct-name a {
  color: inherit;
}
body.account-page .pf-ct-opt {
  font-size: .8em;
  color: var(--pf-text-muted);
}
body.account-page .pf-ct-unit {
  font-size: .82em;
  color: var(--pf-text-muted);
}

/* แถวล่างของการ์ด: [− 1 +]  ลบ ......... ราคารวมบรรทัด */
body.account-page .pf-ct-foot {
  display: flex;
  align-items: center;
  gap: .6em;
  flex-wrap: wrap;
  margin-top: .3em;
}
body.account-page .pf-ct-foot form {
  margin: 0;
}
body.account-page .pf-ct-line {
  margin-left: auto;
  font-size: 1.05em;
  font-weight: 600;
  white-space: nowrap;
}

/* ปุ่มลบเป็นข้อความเล็ก ๆ ไม่ใช่กากบาทมุมขวา — พื้นที่กดยังครบ 44px */
/* ปุ่ม "ลบ" เป็น <button type=submit> จึงโดนกฎปุ่มแบรนด์ด้านบนเต็ม ๆ (กฎนั้นมี
 * !important เพื่อชนะธีมเดิม) — ต้อง :not() ออกจากกฎนั้น *และ* ประกาศ
 * background/color ทับด้วย !important ตรงนี้ ไม่งั้นจะได้ปุ่มแดงเต็มใบแทนลิงก์เล็ก ๆ */
body.account-page .pf-quiet-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--pf-tap);
  padding: 0 .5em;
  border: 0;
  border-radius: 0;
  /* กฎปุ่มแบรนด์ใช้ !important (ต้องชนะธีมเดิม) การ :not() ออกอย่างเดียว
     จึงยังไม่พอ ต้องประกาศทับด้วย !important ตรงนี้ด้วย */
  background: transparent !important;
  color: var(--pf-text-muted) !important;
  font-family: var(--pf-font);
  font-weight: 400;
  font-size: .8em;
  text-decoration: underline;
  cursor: pointer;
}
body.account-page .pf-quiet-btn:hover,
body.account-page .pf-quiet-btn:focus {
  background: transparent !important;
  color: var(--pf-danger) !important;
}


/* กล่องสรุปยอด — ใช้ token ชุดเดียวกับ .pf-co-sum ของหน้า checkout */
body.account-page .pf-ct-sum {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: .9em 1em;
}
body.account-page .pf-ct-sum-title {
  font-size: .92em;
  font-weight: 600;
  margin: 0 0 .55em;
}
body.account-page .pf-ct-sum-row {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: .87em;
  padding: .26em 0;
}
body.account-page .pf-ct-sum-row span:first-child {
  color: var(--pf-text-muted);
}
body.account-page .pf-ct-sum-sep {
  height: 1px;
  background: var(--pf-border-soft);
  margin: .45em 0;
}
body.account-page .pf-ct-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8em;
}
body.account-page .pf-ct-sum-total-label {
  font-size: .92em;
  font-weight: 600;
}
body.account-page .pf-ct-sum-total-value {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--pf-brand);
}
body.account-page .pf-ct-note {
  font-size: .78em;
  color: #8e8e93;
  margin: .4em 0 0;
  line-height: 1.6;
}

/* ปุ่มไป checkout: เต็มความกว้าง เด่นที่สุดในหน้า */
body.account-page .pf-ct-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: .7em;
  border: 0;
  border-radius: 12px;
  background: var(--pf-brand);
  color: #fff !important;
  font-family: var(--pf-font);
  font-size: 1em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
body.account-page .pf-ct-checkout:hover,
body.account-page .pf-ct-checkout:focus {
  background: var(--pf-brand-dark);
  color: #fff !important;
  text-decoration: none;
}
body.account-page .pf-ct-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pf-tap);
  margin-top: .5em;
  border-radius: 10px;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  color: var(--pf-text) !important;
  font-size: .87em;
  text-decoration: none;
}
body.account-page .pf-ct-continue:hover,
body.account-page .pf-ct-continue:focus {
  border-color: var(--pf-brand);
  color: var(--pf-brand) !important;
  text-decoration: none;
}

/* ตะกร้าว่าง */
body.account-page .pf-ct-empty {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: 2.4em 1.2em;
  text-align: center;
  max-width: 30em;
  margin: 0 auto;
}
body.account-page .pf-ct-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto .7em;
  color: #c7c7cc;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.account-page .pf-ct-empty-title {
  font-size: 1.02em;
  font-weight: 500;
  margin: 0 0 .3em;
}
body.account-page .pf-ct-empty-note {
  font-size: .85em;
  color: var(--pf-text-muted);
  margin: 0 0 1.1em;
}
body.account-page .pf-ct-empty .pf-ct-checkout {
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}

/* desktop: รายการซ้าย + สรุปยอดลอยตามขวา (สัดส่วนเดียวกับ /checkout/) */
@media (min-width: 900px) {
  body.account-page .pf-ct-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
    gap: 1em;
  }
  body.account-page .pf-ct-side {
    position: sticky;
    top: 1em;
  }
}

/* ========================================================= ชำระเงิน (การ์ด)
 * (design pack "UI สั่งซื้อสินค้าทันสมัย" จอ "ชำระเงิน")
 *
 * README ของชุดออกแบบระบุว่านี่คือหน้าที่สำคัญที่สุดของร้าน — ลูกค้าต้องรู้ว่า
 * "โอนเท่าไร โอนที่ไหน แล้วทำอะไรต่อ" ภายในหน้าจอเดียว และชี้ปัญหาไว้ 2 ข้อ:
 *   ข้อ 3 ไม่มีตัวนับถอยหลัง 24 ชม. ที่ลูกค้าเห็นชัด
 *   ข้อ 4 timeline สถานะยังเรียบมาก (เป็น <ol> ข้อความล้วน)
 * ทั้งสองข้อแก้ในไฟล์นี้ + ShopApp::showOrderPay()/orderTimelineHtml()
 */

/* ---- แถบนับถอยหลัง ---- */
body.account-page .pf-pay-deadline {
  display: flex;
  align-items: baseline;
  gap: .55em;
  flex-wrap: wrap;
  background: var(--pf-warn-bg);
  border: 1px solid #f0e0b8;
  border-radius: 12px;
  padding: .85em 1em;
  margin: 0 0 .9em;
  color: var(--pf-warn);
  font-size: .87em;
  line-height: 1.5;
}
body.account-page .pf-pay-clock {
  font-size: 1.55em;
  font-weight: 600;
  /* ตัวเลขความกว้างเท่ากันทุกตัว ไม่งั้นนาฬิกาจะกระตุกซ้าย-ขวาทุกวินาที */
  font-variant-numeric: tabular-nums;
}
/* เลยกำหนดแล้ว: เปลี่ยนเป็นโทนอันตราย ไม่ใช่แค่ข้อความเปลี่ยน */
body.account-page .pf-pay-deadline.is-overdue {
  background: var(--pf-danger-bg);
  border-color: #f3cccc;
  color: var(--pf-danger);
}

/* ---- กริดหลัก: QR ซ้าย · ยอด/สลิป/สถานะ ขวา ---- */
body.account-page .pf-pay-grid {
  display: flex;
  flex-direction: column;
  gap: .9em;
}
body.account-page .pf-pay-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 14px;
  padding: 1.1em 1.2em;
}
body.account-page .pf-pay-card-title {
  font-size: .95em;
  font-weight: 600;
  margin: 0 0 .7em;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
body.account-page .pf-pay-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: .45em;
  border-radius: 50%;
  background: var(--pf-brand);
  color: #fff;
  font-size: .75em;
  vertical-align: middle;
}

/* ---- การ์ด QR ---- */
body.account-page .pf-pay-qr-card {
  text-align: center;
}
body.account-page .pf-pay-qr-card .pf-pay-card-title {
  text-align: left;
}
body.account-page .pf-pay-qr {
  width: 212px;
  height: 212px;
  max-width: 100%;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: #fff;
}
body.account-page .pf-pay-amount-label {
  font-size: .84em;
  color: var(--pf-text-muted);
  margin: .8em 0 .1em;
}
/* ยอดที่ต้องโอน = ตัวเลขที่ต้องเด่นที่สุดในหน้า (docs/12 §S11e item 3:
 * ลูกค้าจำนวนไม่น้อยโอนยอดเต็มโดยไม่หักส่วนลด) */
body.account-page .pf-pay-amount {
  font-size: 2em;
  font-weight: 600;
  color: var(--pf-brand);
  line-height: 1.2;
  margin: 0;
}

/* ---- ตารางยอด ---- */
body.account-page .pf-pay-row {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: .87em;
  padding: .28em 0;
}
body.account-page .pf-pay-row span:first-child {
  color: var(--pf-text-muted);
}
body.account-page .pf-pay-row.is-discount,
body.account-page .pf-pay-row.is-discount span:first-child {
  color: var(--pf-ok);
}
body.account-page .pf-pay-sep {
  height: 1px;
  background: var(--pf-border-soft);
  margin: .5em 0;
}
body.account-page .pf-pay-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8em;
}
body.account-page .pf-pay-grand-label {
  font-size: .95em;
  font-weight: 600;
}
body.account-page .pf-pay-grand-value {
  font-size: 1.5em;
  font-weight: 600;
  color: var(--pf-brand);
}

/* ---- เลขบัญชี ---- */
body.account-page .pf-pay-bank {
  background: var(--pf-surface-soft);
  border: 1px solid var(--pf-border-soft);
  border-radius: 10px;
  padding: .8em .95em;
  font-size: .87em;
  line-height: 1.75;
}
body.account-page .pf-pay-acct {
  display: block;
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: 1px;
  /* เลขบัญชีต้องเลือกลากได้ง่ายเพื่อก๊อป */
  user-select: all;
}

/* ---- ปุ่มรอง (แนบสลิป / บันทึก QR) ---- */
body.account-page a.pf-pay-btn,
body.account-page .pf-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: .7em;
  border: 1px solid var(--pf-brand);
  border-radius: 12px;
  background: var(--pf-brand-tint);
  color: var(--pf-brand) !important;
  font-family: var(--pf-font);
  font-size: .95em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
body.account-page a.pf-pay-btn:hover,
body.account-page a.pf-pay-btn:focus {
  background: var(--pf-brand);
  color: #fff !important;
  text-decoration: none;
}

/* ---- timeline แนวตั้งแบบมีจุด+เส้น (แทน <ol> ข้อความล้วน) ---- */
/* .pf-order-timeline เดิมเป็น stepper "แนวนอน" (display:flex + ::before/::after
 * วาดจุดกับเส้น) และยังใช้อยู่ที่ /account/orders — ตัวแปร .pf-tl นี้จึงต้อง
 * รีเซ็ต display/flex ที่ <ol> ด้วย ไม่ใช่แค่ที่ <li> ไม่งั้นขั้นตอนจะเรียง
 * แนวนอนทับกัน */
body.account-page .pf-order-timeline.pf-tl {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.account-page .pf-tl li {
  display: flex;
  flex: none;
  position: static;
  gap: .85em;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 1em;
  color: var(--pf-text);
}
/* จุด/เส้นของ stepper เดิมวาดด้วย ::before/::after — ตัวแปรนี้ใช้ element จริง
 * (.pf-tl-dot/.pf-tl-line) เพื่อให้คุมความสูงเส้นต่อขั้นได้ จึงต้องปิดของเดิม */
body.account-page .pf-tl li::before,
body.account-page .pf-tl li::after {
  content: none;
  display: none;
}
/* คอลัมน์ซ้าย = จุด + เส้นต่อลงไปยังขั้นถัดไป */
body.account-page .pf-tl-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex: none;
}
body.account-page .pf-tl-dot {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pf-border);
  margin-top: .25em;
}
body.account-page .pf-tl-line {
  flex: 1;
  width: 2px;
  min-height: 26px;
  background: var(--pf-border);
}
body.account-page .pf-tl li:last-child .pf-tl-line {
  display: none;
}
body.account-page .pf-tl-body {
  padding-bottom: 1.1em;
  min-width: 0;
}
body.account-page .pf-tl li:last-child .pf-tl-body {
  padding-bottom: 0;
}
body.account-page .pf-tl-label {
  font-size: .9em;
  font-weight: 500;
  line-height: 1.4;
}
body.account-page .pf-tl-hint {
  font-size: .78em;
  color: #8e8e93;
  line-height: 1.55;
}
/* ผ่านมาแล้ว = เขียวทึบ */
body.account-page .pf-tl li.is-done .pf-tl-dot {
  background: var(--pf-ok);
  border-color: var(--pf-ok);
}
body.account-page .pf-tl li.is-done .pf-tl-line {
  background: var(--pf-ok);
}
/* ขั้นปัจจุบัน = วงแหวนแดง ตัวหนังสือแดง */
body.account-page .pf-tl li.is-current .pf-tl-dot {
  background: #fff;
  border: 3px solid var(--pf-brand);
}
body.account-page .pf-tl li.is-current .pf-tl-label {
  color: var(--pf-brand);
  font-weight: 600;
}
/* ยังไม่ถึง = จาง */
body.account-page .pf-tl li.is-pending .pf-tl-label {
  color: #8e8e93;
  font-weight: 400;
}
/* ยกเลิก/คืนเงิน */
body.account-page .pf-tl li.is-cancelled .pf-tl-dot {
  background: var(--pf-danger);
  border-color: var(--pf-danger);
}
body.account-page .pf-tl li.is-cancelled .pf-tl-label {
  color: var(--pf-danger);
  font-weight: 600;
}

/* ปุ่มยกเลิกคำสั่งซื้อ: ทำลายข้อมูล ต้องไม่เด่นเท่าปุ่มหลัก จึงเป็นลิงก์เงียบ ๆ
 * (กฎปุ่มแบรนด์ body.account-page button[type=submit] มี !important จึงต้อง
 * :not() ที่กฎนั้น + ประกาศทับด้วย !important ตรงนี้ ทำอย่างเดียวไม่พอ) */
body.account-page .pf-pay-cancel-btn {
  margin-top: .3em;
  font-size: .82em;
}


@media (min-width: 900px) {
  body.account-page .pf-pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
    gap: 1em;
  }
  body.account-page .pf-pay-left {
    position: sticky;
    top: 1em;
  }
  body.account-page .pf-pay-right {
    display: flex;
    flex-direction: column;
    gap: .9em;
  }
}

/* หัวการ์ดรายการสินค้าใน /cart/: ชื่อส่วน + ลิงก์ "เลือกซื้อสินค้าต่อ"
 * (ย้ายออกจากกล่องสรุปยอด — ปุ่มถอยหลังไม่ควรนั่งชิดปุ่มเดินหน้า
 * ในกล่องเดียวกัน คนละทิศทางกัน) */
body.account-page .pf-ct-head {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 1em 0 .4em;
  border-bottom: 1px solid var(--pf-border-soft);
}
body.account-page .pf-ct-head-title {
  font-size: .95em;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
body.account-page .pf-ct-head-count {
  font-size: .8em;
  color: var(--pf-text-muted);
  white-space: nowrap;
}
body.account-page .pf-ct-head-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--pf-tap);
  padding: 0 .2em;
  font-size: .82em;
  white-space: nowrap;
}

/* รูปสินค้าที่ไม่มีรูป: ไอคอนกล่องสินค้ากลางพื้นเทา แทนสี่เหลี่ยมว่างเปล่า
 * ที่ดูเหมือนรูปโหลดไม่ขึ้น */
body.account-page span.pf-ct-thumb,
body.account-page span.pf-co-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7c7cc;
}
body.account-page .pf-thumb-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================ ไอคอนตะกร้าใน header
 * (เจ้าของสั่ง 28 ส.ค. 2026: "ซ้ายของ เข้าสู่ระบบ / ลงทะเบียน เพิ่มตะกร้า แสดงจำนวน")
 * แสดงตลอดแม้ตะกร้าว่าง — เกณฑ์ pixel-parity กับ WordPress เดิมถูกยกเลิกวันเดียวกัน
 * markup ฝังโดย bin/customize.py (markers pf-hdrcart / pf-hdrcart-m) ทั้ง 2,590 หน้า
 * และ pf-cart.css โหลดจาก <head> เสมอ (pf-cartcss) ไอคอนจึงมีสไตล์ตั้งแต่ paint แรก */
.pf-hdr-cart {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  /* สืบสี/ฟอนต์จาก .nav-top-link ของธีม (ขาวบนแถบเข้ม) */
  color: inherit;
  line-height: 1;
}
.pf-hdr-cart-ico {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ตัวเลขจำนวน: badge แดงมุมขวาบนของไอคอน — ซ่อน (hidden) จนกว่า pf-cart.js
 * จะได้จำนวน > 0 จาก /api/cart/summary */
.pf-hdr-cart-count {
  position: absolute;
  top: -4px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pf-brand);
  color: #fff;
  font-family: var(--pf-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.pf-hdr-cart-count[hidden] {
  display: none;
}
/* desktop top bar: ธีมให้ .nav-top-link มี padding แนวนอนอยู่แล้ว เพิ่มพื้นที่กด
 * ให้สูงเต็มแถบ (≥44px) */
.nav-right .pf-hdr-cart-item > .pf-hdr-cart {
  min-height: 44px;
  padding: 0 12px;
}
/* mobile-nav (ขวาบน ข้างธง): ไอคอนใหญ่ขึ้นนิดให้กดง่าย */
.mobile-nav .pf-hdr-cart {
  min-height: 44px;
  padding: 0 10px;
}
.mobile-nav .pf-hdr-cart-ico {
  width: 24px;
  height: 24px;
}
/* ปุ่มตะกร้าลอยมุมล่างขวา: เหลือเฉพาะจอมือถือ/แท็บเล็ตเล็ก (≤849px = ช่วงที่ธีม
 * โชว์ mobile header) — desktop มีไอคอนใน header แล้ว สองอันซ้ำกัน */
@media (min-width: 850px) {
  .header-cart-link[data-pf-has-items] {
    display: none !important;
  }
}

/* ---- ขั้น 5 วิธีชำระเงิน: การ์ดเลือกได้ทุกช่องทางที่เปิด (29 ส.ค. 2026) ----
 * radio ในการ์ดผูกกับฟอร์มยืนยันด้วย attribute form= — ไฮไลต์ตามตัวที่ติ๊ก
 * ด้วย :has() ไม่ต้องพึ่ง JS (is-on จากเซิร์ฟเวอร์ใช้กับค่าตั้งต้นครั้งแรก) */
body.account-page .pf-co-pay:has(> input[type="radio"]:checked) {
  border: 1.5px solid var(--pf-brand);
  background: var(--pf-brand-tint);
}
body.account-page .pf-co-pay:has(> input[type="radio"]:checked) .pf-co-dot {
  border: 5px solid var(--pf-brand);
}
/* พอมี :has() แล้ว การ์ดที่ไม่ได้ติ๊กต้องกลับเป็นปกติแม้เซิร์ฟเวอร์ใส่ is-on ไว้ */
body.account-page .pf-co-pay.is-on:has(> input[type="radio"]:not(:checked)) {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
}
body.account-page .pf-co-pay.is-on:has(> input[type="radio"]:not(:checked)) .pf-co-dot {
  border: 2px solid #c7c7cc;
}
/* ปุ่มลัด "ตั้งค่าช่องทาง" (เฉพาะแอดมิน/เครื่อง dev) */
body.account-page .pf-co-settings {
  gap: .35em;
  padding: 0 .7em;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: var(--pf-surface);
  color: var(--pf-text-muted);
  font-size: .8em;
  text-decoration: none;
}
body.account-page .pf-co-settings:hover,
body.account-page .pf-co-settings:focus {
  border-color: var(--pf-brand);
  color: var(--pf-brand);
  text-decoration: none;
}
/* ป้าย "ช่องทางที่คุณเลือก" บนหัวการ์ดหน้าชำระเงิน */
body.account-page .pf-pay-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4em;
  padding: .15em .6em;
  border-radius: 999px;
  background: var(--pf-ok-bg);
  color: var(--pf-ok);
  font-size: .72em;
  font-weight: 500;
}

/* ============================================================ ปุ่มแชตลอย (Chatwoot)
 * มุมล่างขวา ไอคอนอย่างเดียว (เจ้าของสั่ง 29 ส.ค. 2026 — เดิมอยู่ซ้ายและมีคำว่า "แชต")
 * บนมือถือปุ่มตะกร้าลอยอยู่มุมเดียวกัน จึงยกปุ่มแชตขึ้นไปซ้อนด้านบน · สร้างโดย
 * pf-cart.js เฉพาะเมื่อร้านตั้งค่า chatwoot ไว้ หน้า static ไม่มี markup นี้ */
.pf-chat-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  /* ธีม Flatsome ใส่ margin ให้ <button> ทุกตัว (~1em) ทำให้ปุ่ม fixed เยื้องจากมุม
   * 17px ไม่ตรงแนวกับปุ่มตะกร้าลอย (<a>) — ล้างทิ้ง */
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #1f1f1f;
  color: #fff;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pf-chat-btn:hover,
.pf-chat-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--pf-brand, #c10e0e);
  box-shadow: 0 10px 26px rgba(193, 14, 14, .35);
}
.pf-chat-btn.is-loading {
  opacity: .7;
  cursor: progress;
}
.pf-chat-ico {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ป้ายข้อความเหลือไว้ให้ screen reader เท่านั้น ไม่แสดง */
.pf-chat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* มือถือ/แท็บเล็ตเล็ก: ปุ่มตะกร้าลอย (3.5em) อยู่มุมล่างขวาแล้ว → แชตอยู่เหนือมัน */
@media (max-width: 849px) {
  .pf-chat-btn {
    bottom: calc(18px + 3.5em + 12px);
  }
}
/* กล่องแชตของ Chatwoot เปิดทับปุ่มเรา — pf-cart.js ใส่ .is-hidden ตอนกล่องเปิด
 * (เฝ้า .woot--hide ของ holder ด้วย MutationObserver) และถอดตอนปิด */
.pf-chat-btn.is-hidden {
  display: none;
}

/* ---------------------------------------------------------------- pagination
 * หน้าที่มีหลายสิบหน้า (/shop/ = 38) เคยพิมพ์ปุ่มทุกเลขจนล้นเป็นสองแถว
 * ตอนนี้ย่อเป็น 1 … 8 9 10 [11] 12 13 14 … 38 ตามรูปแบบเดิมของ WordPress
 *
 * ธีม flatsome ให้ .nav-pagination > li > span มีขอบวงกลม 2px และ span:hover
 * เปลี่ยนเป็นพื้นทึบ — กฎนั้นเขียนไว้สำหรับเลขหน้าปัจจุบัน แต่ "…" ก็เป็น span
 * เหมือนกัน จึงกลายเป็นวงกลมที่ดูกดได้และ hover ติดสี ทั้งที่กดไม่ได้จริง
 */
.nav-pagination > li > .page-number.dots {
  border-color: transparent;
  background: none;
  cursor: default;
  padding: 0 2px;
  min-width: 1.5em;
  opacity: 0.6;
}
/* จอแคบ (≤480px): 11 ปุ่มยังยาวเกินจนตกเป็นสองแถว — ซ่อนเลขที่ห่างจากหน้า
 * ปัจจุบันเกิน 1 ช่อง (publisher ติด .pf-far-li ไว้ให้) เหลือ
 * ก่อนหน้า · 1 … 18 [19] 20 … 38 · ถัดไป
 * ลิงก์ยังอยู่ใน HTML ครบ crawler และผู้ใช้ที่ปิด CSS เห็นทุกหน้าเหมือนเดิม
 */
@media (max-width: 480px) {
  .nav-pagination > li.pf-far-li {
    display: none;
  }
}
/* จอแคบและอยู่หน้ากลาง ๆ: แถวมี ก่อนหน้า·1·…·18·19·20·…·38·ถัดไป = 9 ช่อง
 * กว้างรวมเกิน 390px อยู่ราว 50px ทำให้ "ถัดไป" ตกลงแถวสอง
 * "…" เป็นเพียงเครื่องหมายบอกว่ามีหน้าที่ถูกข้าม กดไม่ได้ จึงซ่อนได้โดยไม่เสีย
 * การใช้งาน — คืนความกว้างได้ ~46px พอให้ทุกอย่างอยู่แถวเดียว
 * (ทดสอบแล้วว่าไม่ทำให้ปุ่มเตี้ยลงหรือหายเกินจำเป็น)
 */
@media (max-width: 480px) {
  .nav-pagination > li.pf-dots-li {
    display: none;
  }
}
/* จอ ≤400px: เหลือ 7 ช่อง (ก่อนหน้า·1·18·19·20·38·ถัดไป) ยังกว้างเกินอยู่ ~7px
 * และหุบช่องไฟไม่พอ (font-size ทำให้ปุ่มโตหรือเตี้ย, letter-spacing ไม่มีผล)
 * จึงตัด "เลขข้างเคียง" (18, 20) ออก — ปุ่มก่อนหน้า/ถัดไปทำหน้าที่เดียวกัน
 * อยู่แล้ว ส่วนหน้าแรก/หน้าสุดท้ายคงไว้เพราะไม่มีปุ่มอื่นแทนได้
 * เหลือ ก่อนหน้า·1·[19]·38·ถัดไป = 5 ช่อง พอตั้งแต่ 320px ขึ้นไป
 */
@media (max-width: 400px) {
  .nav-pagination > li.pf-near-li {
    display: none;
  }
}
/* แถบสั้นที่อยู่หน้ากลางมี 7 ช่อง (ก่อนหน้า·1·2·3·4·5·ถัดไป) วัดได้ว่าต้องการ
 * 335px — 375px ขึ้นไปพอดี แต่ 360px ขาดไป 5px จึงซ่อนเลขข้างเคียงต่ำกว่านั้น
 * (ปุ่มก่อนหน้า/ถัดไปทำหน้าที่เดียวกันอยู่แล้ว จึงไม่มีหน้าไหนเข้าไม่ถึง)
 */
@media (max-width: 374px) {
  .nav-pagination > li.pf-side-li {
    display: none;
  }
}