/* ============================================================
   GON Shop v1.0 — สไตล์ของธีม
   โหลดที่ priority 99 เพราะปลั๊กอิน Woo หลายตัว enqueue หลังธีม
   แล้วชนะเมื่อ specificity เท่ากัน
   ⚠️ แก้ไฟล์นี้แล้วต้องขยับ Version ใน style.css ทุกครั้ง
   ============================================================ */

/* ---------- 1. Token ของดีไซน์ที่ theme.json ไม่ได้ครอบคลุม ---------- */
:root {
  --gon-gutter: 40px;
  --gon-page-max: 1440px;
  --gon-content: 1360px;

  --gon-header-h: 88px;
  --gon-header-h-shrunk: 64px;
  --gon-logo: 63px;
  --gon-logo-shrunk: 44px;
  --gon-announce-h: 42px;

  --gon-grid-gap: 12px;
  --gon-grid-gap-tight: 6px;
  --gon-section-gap: 128px;
  --gon-band-gap: 96px;

  --gon-radius-xs: 2px;
  --gon-radius-sm: 4px;
  --gon-radius-pill: 999px;

  --gon-dur-fast: 120ms;
  --gon-dur-base: 200ms;
  --gon-dur-image: 700ms;

  /* จังหวะเลื่อนของแผงตะกร้าย่อยโดยเฉพาะ (วิทย์เคาะ 24 ส.ค. 2026)
     ตั้งไว้ 300ms ซึ่ง **ไม่อยู่ในสเกลของดีไซน์** (120 · 200 · 400 · 700)
     เพราะ 200 รู้สึกกระชากเกินไปสำหรับแผงที่เลื่อนจากขอบจอ ซึ่งเป็นระยะทางไกลกว่า transition ทั่วไป
     แยกเป็นตัวแปรของตัวเองเพื่อไม่ให้ไปกระทบจังหวะของส่วนอื่นทั้งเว็บ */
  --gon-drawer-dur: 300ms;
  --gon-ease: cubic-bezier(.2, 0, .2, 1);
  --gon-ease-out: cubic-bezier(.16, 1, .3, 1);
  --gon-transition-color: color var(--gon-dur-fast) var(--gon-ease),
                          background-color var(--gon-dur-fast) var(--gon-ease),
                          border-color var(--gon-dur-fast) var(--gon-ease);

  --gon-ls-overline: 0.18em;
  --gon-ls-label: 0.02em;
  --gon-ls-announce: 0.08em;

  --gon-hover-tint: rgba(46, 107, 53, .08);
  --gon-line-on-inverse: rgba(235, 227, 205, .28);
}

@media (max-width: 781px) {
  :root {
    --gon-gutter: 16px;
    --gon-header-h: 64px;
    --gon-header-h-shrunk: 52px;
    --gon-logo: 34px;
    --gon-logo-shrunk: 28px;
    --gon-announce-h: 37px;
    --gon-section-gap: 80px;
  }
  /* WordPress อ่านค่านี้ทั้งตอนใส่ padding ให้ .wp-site-blocks
     และตอนคำนวณ margin ติดลบของ alignfull จึงเปลี่ยนที่เดียวพอ */
  body {
    --wp--style--root--padding-left: var(--gon-gutter);
    --wp--style--root--padding-right: var(--gon-gutter);
  }
}

/* ---------- 2. พอร์ตจาก tokens/base.css ของดีไซน์ ----------
   สามค่าล่างไม่มีเครื่องมือไหนวัดได้ แต่เห็นด้วยตาชัดมาก
   ถ้าไม่ใส่ ตัวอักษรทั้งเว็บจะดูหนากว่าดีไซน์ */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

img { display: block; max-width: 100%; }

/* ⚠️ การตั้ง `display` ให้ element selector **ทับกฎ `[hidden] { display: none }` ของเบราว์เซอร์**
   เพราะกฎของธีมมีน้ำหนักมากกว่ากฎของเบราว์เซอร์เสมอ
   ผลคือของที่ WooCommerce สั่งซ่อนด้วยแอตทริบิวต์ `hidden` จะยังโผล่ให้เห็น
   ที่เจอจริงคือ **รูปสินค้าในแผงตะกร้าย่อยขึ้นสองใบ** เพราะแม่แบบของ WooCommerce
   วางรูปไว้สองใบ คือใบที่มีลิงก์กับใบที่ไม่มี แล้วซ่อนใบที่ไม่ใช้ด้วย `hidden`
   บรรทัดนี้จึงเป็นกันชนของทั้งเว็บ ไม่ใช่แค่ของแผงตะกร้า */
[hidden] { display: none !important; }

/* 🚨 เบราว์เซอร์ไม่ส่งฟอนต์ต่อเข้าไปในช่องกรอกและปุ่มเอง ค่าเริ่มต้นคือฟอนต์ระบบ
   ตั้งขนาดอย่างเดียวจึงไม่พอ ต้องสั่งตระกูลฟอนต์ด้วย ไม่งั้นได้ Arial
   อาการที่เจอ (24 ส.ค. 2026) คือช่องค้นหาบน header เป็น Arial ทั้งที่ทั้งเว็บเป็น Noto Sans Thai
   กฎนี้ครอบทุกช่องกรอกในเว็บ จึงกันปัญหาเดียวกันบนตะกร้าและหน้าชำระเงินไปด้วย */
input, select, textarea, button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ดีไซน์ตั้งเส้นใต้ลิงก์ไว้ใน base.css แต่ไฟล์หน้าจริงทุกใบสั่งปิดทิ้ง
   ธีมจึงไม่ใส่เส้นใต้เป็นค่าเริ่มต้น ให้ใส่เฉพาะจุดที่ดีไซน์วาดไว้ */
a { text-decoration: none; border-bottom: 0; transition: var(--gon-transition-color); }

/* ---------- 3. กติกาคอนเทนเนอร์ ----------
   รากของ layout ทั้งเว็บ ถ้าตรงนี้ผิดทุก section ผิดตามกันหมด */

/* blockGap ระดับ root คั่น header/main/footer ออกจากกันโดยที่เราไม่ได้สั่ง */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* 🚨 .wp-site-blocks ต้องไม่มี padding ซ้ายขวาเด็ดขาด
   WordPress ไม่ได้ใส่ให้ตรงนี้ แต่ไปใส่ที่คอนเทนเนอร์ที่มีคลาส has-global-padding แทน
   ถ้าเราใส่เองจะเกิดสองอย่างพร้อมกัน คือ gutter คูณสอง เพราะ main ก็มี padding ของมันอยู่แล้ว
   และ alignfull จะบานออกเต็มจอไม่ได้ เพราะ margin ติดลบของมันคิดจาก has-global-padding ไม่ใช่จากตรงนี้
   กฎนี้จึงทำสองหน้าที่ คือกันไม่ให้เราเผลอใส่เอง และกัน padding ชดเชย scrollbar ที่ mini-cart แอบใส่ */
body:not(.has-modal-open) .wp-site-blocks {
  padding-inline: 0 !important;
}

/* .alignwide ที่อยู่ใน parent แบบ flow ไม่ถูกจัดกึ่งกลางให้เอง */
.alignwide { margin-inline: auto !important; }

/* 🚨 guard ที่แพงที่สุดของรอบก่อน — alignwide ซ้อน alignwide ทำ gutter คูณสอง
   จนการ์ดสินค้าหด 27px โดยไม่มีอะไรฟ้อง */
.alignwide .alignwide,
.alignfull .alignwide .alignwide {
  padding-inline: 0;
  max-width: none;
}

/* Cover ที่ตั้ง contentPosition จะย่อ inner container ให้พอดีข้อความ
   ทำให้ hero หลุดจากกริดของหน้า */
.wp-block-cover > .wp-block-cover__inner-container { width: 100% !important; }

/* 🚨 WordPress ใส่ padding 2.375em ให้ทุก group ที่มีสีพื้น ผ่านกฎ
   `:where(.wp-block-group.has-background){padding:2.375em}` ของ block library
   ซึ่งคูณกับ body 15px ได้ 35.625px ไม่ใช่ 38px อย่างที่จะเดาจาก 16px
   ผลคือแถบสีทุกแถบถูกบีบเข้ามาข้างละ 35.6 แล้วเนื้อหาไม่ตรงเลนกับ section อื่น
   สถาปัตยกรรมของธีมนี้ให้ตัวในเป็นคนถือ gutter แถบนอกจึงต้องไม่มี padding เลย */
.wp-block-group.has-background.alignfull { padding: 0; }

/* เส้นคั่นของ WordPress กว้าง 100px จัดกึ่งกลางเป็นค่าเริ่มต้น ไม่ใช่เต็มความกว้าง
   กฎของ core คือ `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`
   ซึ่ง specificity สูงกว่าคลาสเดียว จึงต้องใส่ is-style-wide ในบล็อกด้วย
   แล้วเขียน CSS ให้ specificity เท่ากันไว้กันพลาด */
.wp-block-separator:not(.is-style-dots):not(.is-style-default) { width: 100%; max-width: none; }

/* ---------- 4. header ---------- */

/* <header class="wp-block-template-part"> สูงเท่าเนื้อใน ทำให้ sticky ไม่เกาะ */
header.wp-block-template-part { display: contents; }

.gon-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--gon-header-h);
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.gon-header__logo {
  height: var(--gon-logo);
  width: var(--gon-logo);
  object-fit: contain;
  flex: 0 0 auto;
}
/* ⚠️ คลาสนี้อยู่ที่ **กล่องครอบ** ของบล็อกโลโก้ ไม่ใช่ที่ตัว `<img>`
   ตอน header ย่อ อนิเมชันย่อกล่องครอบลงเหลือ 44 แต่ `<img>` ยังสูง 63 ตาม attribute ของบล็อก
   เพราะ `height` ของ core เป็น auto และไม่มีใครไปคุมความสูงของภาพเลย
   **ผลคือโลโก้ทะลุเส้นขอบล่างของ header ลงไป 9 พิกเซล** ซึ่งมองเหมือนโลโก้ชิดขอบจนเกินไป
   จึงต้องบังคับให้ภาพเดินตามกล่องครอบทั้งกว้างและสูง (วิทย์ทักจากภาพหน้าจอ 25 ส.ค. 2026) */
.gon-header__logo a { display: block; width: 100%; height: 100%; }

/* header ย่อความสูงตอนเลื่อน — ทำด้วย CSS ล้วน ไม่ต้องเขียนสคริปต์
   ⚠️ ห้ามเขียนย่อเป็น `animation: shrinkHeader linear both;`
   เพราะ animation-duration จะถูกรีเซ็ตเป็น 0s แล้วอนิเมชันจะไม่ขยับเลย
   ทั้งที่ CSS.supports ตอบว่ารองรับ ต้องเขียน longhand พร้อม duration: auto */
/* header ย่อความสูงตอนเลื่อน — ทำด้วย CSS ล้วน ไม่ต้องเขียนสคริปต์

   กับดักสามข้อที่พิสูจน์มาแล้วด้วยการวัดจริง ห้ามลืมทั้งสามข้อ

   1. ห้ามเขียนย่อเป็น `animation: name linear both;` เพราะ animation-duration
      จะถูกรีเซ็ตเป็น 0s แล้วอนิเมชันไม่ขยับเลย ทั้งที่ CSS.supports ตอบว่ารองรับ
      ต้องเขียน longhand พร้อม `animation-duration: auto` เสมอ
   2. ค่าใน keyframes ต้องเป็นตัวเลขตรงๆ ห้ามใช้ var() เพราะเบราว์เซอร์
      ไม่ interpolate ค่าที่มาจากตัวแปร ผลคืออนิเมชันรันจริง ผูก ScrollTimeline ถูก
      แต่ความสูงไม่ขยับสักพิกเซล (วัดแล้ว 24 ส.ค. 2026)
   3. ห้ามประกาศ @keyframes ชื่อเดียวกันซ้ำในมีเดียคิวรีเพื่อหวังให้ทับกัน
      เพราะตัวข้างนอกยังชนะ ทำให้ header มือถือค้างที่ 88 ทั้งที่ต้องเป็น 64
      ต้องแยกชื่อ keyframes คนละชุดแล้วผูกในมีเดียคิวรีของตัวเอง

   หมายเหตุเรื่องพฤติกรรมสำรอง เพราะใช้ animation-fill-mode: both
   ถ้าเบราว์เซอร์ไม่รองรับ animation-timeline หรือ timeline ไม่ขยับ
   header จะค้างอยู่ที่เฟรม from ซึ่งคือความสูงเต็มพอดี จึงเป็นสถานะที่ถูกต้องอยู่แล้ว */

@keyframes gonShrinkHeaderDesktop { from { height: 88px; } to { height: 64px; } }
@keyframes gonShrinkLogoDesktop   { from { height: 63px; width: 63px; } to { height: 44px; width: 44px; } }
@keyframes gonShrinkHeaderMobile  { from { height: 64px; } to { height: 52px; } }
@keyframes gonShrinkLogoMobile    { from { height: 34px; width: 34px; } to { height: 28px; width: 28px; } }

@supports (animation-timeline: scroll()) {
  .gon-header,
  .gon-header__logo {
    animation-duration: auto;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
    animation-range: 0px 200px;
  }

  @media (min-width: 782px) {
    .gon-header       { animation-name: gonShrinkHeaderDesktop; }
    .gon-header__logo { animation-name: gonShrinkLogoDesktop; }
  }

  @media (max-width: 781px) {
    .gon-header       { animation-name: gonShrinkHeaderMobile; }
    .gon-header__logo { animation-name: gonShrinkLogoMobile; }
  }
}

/* เบราว์เซอร์ที่ไม่รองรับ animation-timeline จะข้ามบล็อกข้างบนไป
   ผลคือ header ยังติดขอบบนแต่คงความสูงเต็ม ซึ่งยอมรับได้ ไม่ใช่หน้าพัง */

/* แถบประกาศเลื่อนหายไปตามเนื้อหา ไม่ติดขอบบน */
.gon-announce {
  height: var(--gon-announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gon-gutter);
  background: var(--wp--preset--color--primary-deep);
  color: var(--wp--preset--color--cream);
  font-size: 12px;
  letter-spacing: var(--gon-ls-announce);
  text-align: center;
}

/* ---------- 5. ชิ้นส่วนตัวอักษรที่ใช้ซ้ำทั้งเว็บ ---------- */
.gon-overline {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--overline);
  line-height: 1.2;
  letter-spacing: var(--gon-ls-overline);
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- 6. Platform defaults ที่ต้องกดตั้งแต่ระดับราก ---------- */

/* คอลัมน์ของ WordPress ใช้ content-box ทำให้ flex-basis บวก padding ล้นแถว
   ข้อ 2 ข้างบนคุมไว้แล้ว แถวนี้กันกรณีปลั๊กอินตั้งทับ */
.wp-block-columns, .wp-block-column { box-sizing: border-box; }

/* woocommerce-blocktheme.css บีบตะกร้าและหน้าชำระเงินเหลือ 1000px
   ถ้าไม่ปลด กริด 1360 ของดีไซน์จะหด 360px */
.woocommerce-checkout main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-account main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-account .wp-block-post-title { max-width: none !important; }

/* WooCommerce บังคับตัวหนาไว้สามจุด ต้องเขียน specificity ให้สูงกว่า */
.woocommerce table.shop_table th { font-weight: 500; }
.woocommerce .required { font-weight: inherit; }
#order_review .woocommerce-Price-amount { font-weight: 500; }

/* ============================================================
   โครงร่วม — header และแถบท้ายเว็บ (แผ่น 00)
   ค่าทุกตัวมาจาก SPEC.md หัวข้อ 1.1 ซึ่งแกะจาก 00 Shell.dc.html
   ============================================================ */

/* ---------- header ---------- */

/* ทั้ง header และแถบท้ายเว็บใช้เลนเดียวกับเนื้อหา คือกว้างสุด 1440 โดยมีขอบ 40
   ผลคือเนื้อหาจริง 1360 เท่ากับเลนของหน้า ไม่ใช่กางเต็มจอ */
.gon-header__inner,
.gon-footer__inner {
  max-width: var(--gon-page-max);
  margin-inline: auto;
  padding-inline: var(--gon-gutter);
}

.gon-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.gon-header__logo { order: 1; }
.gon-nav          { order: 2; }
/* ⚠️ WordPress flex layout พิมพ์กฎ `<container> > * { margin: 0 }` เป็น inline ในหัวเอกสาร
   ซึ่งออกทีหลังไฟล์ธีมและ specificity เท่ากับคลาสเดียว ผลคือ `margin-left:auto` ถูกล้าง
   กลุ่มค้นหากับไอคอนจึงไม่ถูกดันไปชิดขวา ทุกอย่างกองอยู่ซ้ายและเหลือที่ว่างขวา 365px
   ต้องเขียนให้ลึกกว่าโดยนำหน้าด้วยตัวครอบ (พบ 24 ส.ค. 2026 จาก feedback ของวิทย์) */
.gon-header__actions { order: 3; }
.gon-header__inner > .gon-header__actions { margin-left: auto; }

/* ⚠️ กล่องครอบของบล็อกบัญชีและตะกร้าเป็น display:block สูง 28px ตาม line-height ของมัน
   แต่ตัวไอคอนข้างในสูง 20px และเกาะขอบบน ผลคือไอคอนเยื้องขึ้น 4px
   ไม่ตรงแนวกึ่งกลางกับช่องค้นหาที่สูง 36px ซึ่งเห็นชัดมากเมื่อซูมดู
   บังคับให้ลูกทุกตัวของแถบเป็น flex กึ่งกลาง กล่องครอบจะยุบเท่าเนื้อในเอง
   แล้ว align-items ของแถบจึงจัดทั้งสามชิ้นให้อยู่แนวเดียวกันจริง */
.gon-header__actions > * {
  display: flex;
  align-items: center;
}
.gon-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ⚠️ **ความสูงของภาพต้องเป็น 100% ห้ามผูกกับ `--gon-logo`**
   เพราะตอน header ย่อ อนิเมชันย่อ**กล่องครอบ**ลงเหลือ 44 แต่ไม่ได้แตะค่าตัวแปร
   ถ้าภาพถูกตรึงไว้ที่ 63 ตามตัวแปร มันจะ**ทะลุเส้นขอบล่างของ header ลงไป 9 พิกเซล**
   ซึ่งมองเหมือนโลโก้ชิดขอบจนเกินไป (วิทย์ทักจากภาพหน้าจอ 25 ส.ค. 2026)
   ขนาดจริงของโลโก้มาจากกล่องครอบที่บรรทัด `.gon-header__logo` ข้างบนอยู่แล้ว */
.gon-header__logo .wp-block-site-logo,
.gon-header__logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* เมนูหลัก ระยะ 28 ตามอาร์ตบอร์ด · ตัวอักษรเป็นสีเนื้อความ ไม่ใช่สีหัวข้อ */
.gon-nav .wp-block-navigation__container { gap: 28px; }
.gon-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.gon-nav .wp-block-navigation__submenu-icon { margin-left: 6px; }

/* ช่องค้นหา 220 คูณ 36 คงที่ทั้งตอน header เต็มและตอนย่อ */
.gon-search .wc-block-product-search__fields {
  width: 220px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
}
.gon-search .wc-block-product-search__field {
  border: 0;
  background: none;
  padding: 0;
  height: 100%;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--ink);
}
.gon-search .wc-block-product-search__field::placeholder { color: var(--wp--preset--color--muted); }
.gon-search .wc-block-product-search__button {
  order: -1;
  padding: 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--muted);
  min-height: 0;
}
/* ⚠️ มี CSS ตั้ง `fill: currentColor` ให้ svg ในปุ่มนี้ ซึ่งชนะ attribute `fill="none"` ที่เราใส่ใน markup
   เพราะ CSS ชนะ presentation attribute เสมอ ผลคือวงกลมของแว่นขยายถูกถมทึบจนดูเป็นก้อนกลม
   ต้องสั่ง fill กับ stroke ที่ CSS ด้วย ไม่ใช่ใส่แค่ใน markup */
.gon-search .wc-block-product-search__button svg,
.gon-search .gon-search__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.gon-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ไอคอนบัญชีและตะกร้า ขนาด 20 ตามอาร์ตบอร์ด */
/* ⚠️ **ไอคอนบัญชีถูกถอดออกจาก `parts/header.html` แล้ว** (วิทย์สั่ง 25 ส.ค. 2026 เพราะยังไม่เปิดให้ลูกค้าสมัครสมาชิก)
   กฎชุดนี้เก็บไว้เฉยๆ เผื่อวันที่เปิดสมัครสมาชิกแล้วเอาบล็อกกลับเข้า header
   ตัวหน้า `/my-account/` ยังอยู่ตามเดิม ถอดแค่ทางเข้าจาก header เท่านั้น */
.gon-account a,
.gon-cart .wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--ink);
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}
.gon-account svg,
.gon-cart .wc-block-mini-cart__icon { width: 20px; height: 20px; }
/* ⚠️ WooCommerce วางตัวเลขเป็นป้ายวงกลมทับมุมไอคอนด้วย position:absolute
   แต่ดีไซน์ให้ตัวเลขอยู่ **ข้าง** ไอคอน ห่าง 6px เป็นตัวหนังสือธรรมดาสีเดียวกับเนื้อความ
   ต้องปลด absolute ที่กล่องครอบด้วย ไม่ใช่แก้แค่ตัวป้าย และต้องเขียนให้ specificity สูงพอ */
.gon-header__actions .gon-cart .wc-block-mini-cart__quantity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ⚠️ สีพื้นกับสีตัวอักษรของป้ายนี้ WooCommerce เขียนเป็น inline style ใส่ตัวอิลิเมนต์เอง
   (`style="background-color:...;color:..."`) ซึ่ง CSS ปกติสู้ไม่ได้ไม่ว่าจะ specificity เท่าไหร่
   จึงเป็นกรณีที่ใช้ !important ถูกต้อง ไม่ใช่การมักง่าย
   ส่วนอื่นของกฎนี้ไม่ต้องใช้ เพราะไม่ได้ถูกตั้งเป็น inline */
.gon-header__actions .gon-cart .wc-block-mini-cart__badge {
  position: static;
  background: none !important;
  background-color: transparent !important;
  border: 0;
  color: var(--wp--preset--color--ink) !important;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-s);
  font-weight: 600;
  line-height: 1;
  padding: 0;
  margin: 0;
  min-width: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  /* ปลดของที่เหลือจากการเป็นป้ายลอย คือระยะติดลบ ตำแหน่งเยื้อง และการเลื่อนด้วย transform
     ถ้าไม่ปลด ตัวเลขจะลอยสูงกว่าไอคอน 7px แม้จะเปลี่ยนเป็น static แล้ว */
  align-self: center;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
}

/* ---------- header บนมือถือ ----------
   ลำดับเปลี่ยนเป็นปุ่มเมนูซ้าย โลโก้กลาง ตะกร้าขวา
   และตัดช่องค้นหากับไอคอนบัญชีออกจากแถบ ตามอาร์ตบอร์ด C
   ช่องค้นหาไปอยู่ในเมนูเต็มจอแทน (วิทย์เคาะ 24 ส.ค. 2026 ให้ยึดอาร์ตบอร์ด) */
@media (max-width: 781px) {
  .gon-header__inner { gap: 0; justify-content: space-between; }
  .gon-nav           { order: 1; }
  .gon-header__logo  { order: 2; }
  .gon-header__actions { order: 3; margin-left: 0; }

  .gon-search,
  .gon-account { display: none; }

  /* ปุ่มริมเลื่อนออกนอก 10px เพื่อให้ตัวไอคอนตรงแนวขอบ ทั้งที่พื้นที่กดยังเป็น 44 */
  .gon-nav .wp-block-navigation__responsive-container-open {
    width: 44px;
    height: 44px;
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gon-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

  .gon-cart .wc-block-mini-cart__button {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    justify-content: center;
    gap: 2px;
  }
}

/* ---------- แถบท้ายเว็บ ---------- */
.gon-footer__inner { padding-block: 80px 32px; }

.gon-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.gon-footer__col { display: flex; flex-direction: column; gap: 16px; }

.gon-footer__head { color: var(--wp--preset--color--on-inverse-muted); margin: 0; }

.gon-footer__links,
.gon-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-footer__links a,
.gon-footer__social a,
.gon-footer__lede { color: var(--wp--preset--color--cream); }

.gon-footer__lede { margin: 0; font-size: var(--wp--preset--font-size--body-m); }

/* ฟอร์มรับข่าวสาร */
.gon-news { display: flex; flex-direction: column; gap: 12px; }
.gon-news__field {
  height: 46px;
  padding-inline: 14px;
  border: 1px solid var(--gon-line-on-inverse);
  border-radius: var(--gon-radius-xs);
  background: transparent;
  color: var(--wp--preset--color--cream);
  font-size: var(--wp--preset--font-size--body-m);
  font-family: inherit;
}
.gon-news__field::placeholder { color: var(--wp--preset--color--on-inverse-muted); }

.gon-news__consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.gon-news__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gon-news__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--gon-line-on-inverse);
  border-radius: var(--gon-radius-xs);
}
.gon-news__consent input:checked + .gon-news__box {
  background: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--cream);
}
.gon-news__consent-text {
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.5;
  color: var(--wp--preset--color--on-inverse-muted);
}
.gon-news__consent-text a { color: var(--wp--preset--color--cream); text-decoration: underline; }

.gon-news__submit {
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--primary-deep);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  cursor: pointer;
  transition: var(--gon-transition-color);
}
.gon-news__submit:hover { background: var(--wp--preset--color--cream-soft); }

.gon-footer__follow { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; }
.gon-footer__social { flex-direction: row; gap: 32px; }

.gon-footer__rule {
  margin: 48px 0 0;
  border: 0;
  height: 1px;
  background: var(--gon-line-on-inverse);
}

.gon-footer__bottom {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-size: var(--wp--preset--font-size--body-s);
}
.gon-footer__bottom p { margin: 0; color: var(--wp--preset--color--on-inverse-muted); }
.gon-footer__bottom a { color: var(--wp--preset--color--on-inverse-muted); }

/* ---------- แถบท้ายเว็บบนมือถือ ----------
   เรียงคอลัมน์เดียว FOLLOW กลายเป็นคอลัมน์ที่ห้า
   ลิงก์ทุกตัวสูงอย่างน้อย 44 โดยไม่มี gap เพิ่ม เพราะความสูงทำหน้าที่เว้นเอง */
@media (max-width: 781px) {
  .gon-footer__inner { padding-block: 56px 32px; }

  .gon-footer__cols { grid-template-columns: 1fr; gap: 40px; }

  .gon-footer__links {
    gap: 0;
  }
  .gon-footer__links li a,
  .gon-footer__social li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .gon-news__field { height: 48px; }

  .gon-footer__follow { margin-top: 40px; }
  .gon-footer__social { flex-direction: column; gap: 0; }

  .gon-footer__rule { margin-top: 40px; }

  .gon-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
}

/* ============================================================
   การ์ดสินค้าและหน้ารายการสินค้า
   ค่าจาก SPEC.md หัวข้อ 6 หัวข้อย่อย ProductCard ซึ่งยึดไฟล์หน้าจริง
   ⚠️ การ์ดที่ใช้จริงไม่เหมือน component กลางในบันเดิล — ของจริงมีกรอบล้อมทั้งใบ
   ============================================================ */

/* ---------- ภาพเปิดหมวด ----------
   เต็มความกว้าง สัดส่วน 16 ต่อ 9 ตามดีไซน์ · จุดโฟกัสอยู่กลางค่อนบนเพราะภาพเป็นแนวนอนกว้าง */
/* ⚠️ บล็อก core/shortcode ครอบผลลัพธ์ไว้ใน <p> อีกชั้น ทำให้ div ของเรากลายเป็นหลาน
   กฎ `.has-global-padding > .alignfull` ของ WordPress จึงไม่ match แล้วภาพไม่บานเต็มจอ
   ต้องดันออกเองด้วยตัวแปร root padding ซึ่งได้ผลเหมือนกันและไม่พึ่งโครง DOM */
.gon-cat-hero {
  margin-inline: calc(var(--wp--style--root--padding-left) * -1);
  width: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wp--preset--color--cream-deep);
}
.gon-cat-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* บล็อก shortcode ครอบ <p> มาให้ ต้องปลดระยะออกไม่ให้ดันภาพ */
.gon-plp > .wp-block-shortcode { margin: 0; }

/* ---------- หัวหน้าหมวด ----------
   ดีไซน์ให้ระยะ 64 บน แล้ว gap 20 ระหว่าง breadcrumb หัวข้อ และคำอธิบาย */
.gon-plp__head {
  padding-block: 64px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* ⚠️ บล็อก breadcrumbs ของ WooCommerce จัดกึ่งกลางตัวเองมาเป็นค่าเริ่มต้น
   ต้องสั่งชิดซ้ายทั้งที่ตัวบล็อกและกล่องใน ไม่ใช่แค่ตัวนอก */
.gon-crumbs, .gon-crumbs a {
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
  margin: 0;
}
.gon-crumbs,
.gon-crumbs .wc-block-breadcrumbs {
  text-align: left;
  justify-content: flex-start;
  margin-inline: 0;
  width: 100%;
}
.gon-crumbs .wc-block-breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gon-plp__title { margin: 0; }
.gon-plp__desc {
  margin: 0;
  max-width: 660px;
  font-size: var(--wp--preset--font-size--body-l);
  line-height: 1.65;
  color: var(--wp--preset--color--ink);
}

/* ---------- แถบกรอง ----------
   มีเส้นคาดบนล่าง ระยะใน 20 บนล่าง และ 24 ระหว่างสามกลุ่ม */
.gon-filter {
  margin-top: 48px;
  padding-block: 20px;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  display: flex;
  align-items: center;
  gap: 24px;
}
.gon-filter__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-filter__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ปุ่มกรองเป็นเม็ดยา สูงต่ำสุด 36 ระยะใน 16 */
.gon-chip { margin: 0; }
.gon-chip a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-pill);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body-s);
  transition: var(--gon-transition-color);
}
.gon-chip a:hover { background: var(--gon-hover-tint); border-color: var(--wp--preset--color--primary); }
.gon-chip.is-active a {
  background: var(--wp--preset--color--primary);
  border-color: transparent;
  color: var(--wp--preset--color--cream);
  font-weight: 600;
}

/* ตัวเลือกการเรียง — WooCommerce ส่ง <select> มา ซึ่ง select2 อาจเข้ามาแทนตอนรัน
   แต่งทั้งสองแบบให้ได้หน้าตาเดียวกันคือกล่องสูง 36 ขอบบาง มุม 2 */
.gon-filter__sort { margin-left: auto; }
.gon-filter__sort select,
.gon-filter__sort .select2-selection--single {
  min-height: 36px;
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--ink);
}
.gon-filter__sort form { margin: 0; }

/* ---------- บรรทัดจำนวนผลลัพธ์ ---------- */
.gon-plp__count {
  padding-block: 24px 0;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-plp__count p { margin: 0; }

/* กริด 3 คอลัมน์บนจอคอม 2 คอลัมน์บนมือถือ ระยะ 12 ทั้งสองแกน
   บังคับที่ .wc-block-product-template เพราะบล็อกมี grid กับ gap ของตัวเอง */
.gon-grid { padding-block: 24px 0; }

.gon-grid .wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gon-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ⚠️ ห้ามใส่ display:contents ให้ `.wc-block-product-template__responsive`
   เพราะ WooCommerce ใส่คลาสนั้นไว้บน <ul> ตัวเดียวกับ `.wc-block-product-template`
   การสั่ง contents จึงไปล้มกริดของตัวเอง แล้วการ์ดกลายเป็นเรียงลงมาทีละใบเต็มความกว้าง
   (พบ 24 ส.ค. 2026 จากการเปิดหน้าเว็บจริง) */
/* ⚠️ WooCommerce ตั้งความกว้างให้ <li> ของการ์ดเอง โดยเฉพาะเมื่อ shrinkColumns เป็น false
   ซึ่งจะชนะการยืดเต็มช่องของกริด ผลคือการ์ดหดเหลือ 69px ในช่องกว้าง 331px
   บังคับให้เต็มช่องเสมอ เพราะความกว้างของช่องถูกกำหนดโดยกริดของเราอยู่แล้ว */
.gon-grid .wc-block-product-template > li {
  margin: 0;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

/* ---------- ตัวการ์ด ---------- */
.gon-card {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
  overflow: hidden;
  transition: border-color var(--gon-dur-fast) var(--gon-ease);
  height: 100%;
}
.gon-card:hover { border-color: var(--wp--preset--color--primary); }

.gon-card__media { position: relative; margin: 0; }
.gon-card__media img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--wp--preset--color--cream-deep);
  border-radius: 0;
  transition: transform var(--gon-dur-image) var(--gon-ease-out);
}
.gon-card:hover .gon-card__media img { transform: scale(1.03); }

/* ป้าย SALE — WooCommerce วางไว้มุมขวาและใช้คำแปลของตัวเอง
   ย้ายมาซ้ายบนระยะ 16 และเปลี่ยนคำเป็น SALE ที่ฝั่ง PHP แล้ว */
.gon-card__media .wc-block-components-product-sale-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--sale);
  color: var(--wp--preset--color--cream-soft);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--overline);
  font-weight: 600;
  letter-spacing: var(--gon-ls-overline);
  line-height: 1;
  text-transform: uppercase;
  border: 0;
}

.gon-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--wp--preset--color--line);
}

.gon-card__title { margin: 0; }
.gon-card__title a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  border-bottom: 0;
}

/* ราคา — WooCommerce ส่ง <del> มาก่อน <ins> ต้องสลับให้ราคาปัจจุบันมาก่อน */
/* ⚠️ คลาสของเราไปอยู่ที่กล่องนอก ส่วน <del> กับ <ins> อยู่ในกล่องในของ Woo อีกชั้น
   การสลับลำดับราคาจึงต้องสั่งที่กล่องใน ไม่ใช่กล่องนอก */
.gon-card__price .wc-block-components-product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* 🔸 เบี่ยงจากดีไซน์โดยเจตนา (วิทย์เคาะ 24 ส.ค. 2026)
   ดันกลุ่มราคากับปุ่มลงชิดล่างการ์ดด้วย margin-top:auto เพื่อให้ปุ่มของทุกการ์ดในแถวเรียงระดับเดียวกัน
   เพราะชื่อสินค้าจริงยาวไม่เท่ากัน ตั้งแต่หนึ่งถึงสามบรรทัด
   ผลที่แลกไปคือระยะจากชื่อถึงราคาไม่คงที่ 4px จะได้ 4px เฉพาะการ์ดที่ชื่อยาวสุดในแถว
   ในดีไซน์ไม่เจอปัญหานี้เพราะชื่อ Dad Cap ยาวสองบรรทัดเท่ากันทุกใบ */
.gon-card__price {
  align-items: baseline;
  gap: 8px;
  margin: auto 0 0;
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
  font-weight: 500;
}
.gon-card__price del { order: 2; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--body-s); }
.gon-card__price ins { order: 1; text-decoration: none; color: var(--wp--preset--color--sale); font-weight: 600; }

/* ปุ่ม — WooCommerce จัดกึ่งกลางให้เอง ต้องบังคับที่กล่องครอบ ไม่ใช่แค่ตัวลิงก์ */
.gon-card__btn { margin: 12px 0 0; display: flex; }
/* ⚠️ WooCommerce ตั้ง `.wp-block-button.wc-block-components-product-button .wp-block-button__link{width:auto}`
   ซึ่ง specificity เป็น 0,3,0 ชนะกฎที่เขียนด้วยสองคลาส ผลคือปุ่มกว้างเท่าข้อความแล้วลอยกลางการ์ด
   ต้องเขียนให้ลึกกว่าเขา ไม่ใช่เติม !important (พบ 24 ส.ค. 2026 จากการไล่ rule ที่ match จริง) */
.gon-card .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.gon-card .gon-card__btn a.button {
  width: 100%;
  flex: 1 1 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  line-height: 1.2;
  transition: var(--gon-transition-color);
}
.gon-card__btn .wp-block-button__link:hover,
.gon-card__btn a.button:hover { background: var(--wp--preset--color--primary-deep); }

/* สินค้าที่มีตัวเลือกใช้ปุ่มแบบ secondary เพราะพาไปหน้าสินค้า ไม่ได้เพิ่มลงตะกร้าทันที */
.gon-card__btn a.button.product_type_variable,
.gon-card__btn a.button.product_type_grouped,
.gon-card__btn a.button.product_type_external {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}
.gon-card__btn a.button.product_type_variable:hover,
.gon-card__btn a.button.product_type_grouped:hover,
.gon-card__btn a.button.product_type_external:hover { background: var(--gon-hover-tint); }

/* ---------- แบ่งหน้า ----------
   ดีไซน์ให้มีเส้นคาดบน ระยะ 64 จากกริด แล้วเว้น 32 ก่อนแถวตัวเลข */
.gon-pagination {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--line);
  gap: 8px;
}
.gon-pagination .page-numbers,
.gon-pagination .wp-block-query-pagination-previous,
.gon-pagination .wp-block-query-pagination-next {
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body-m);
  transition: var(--gon-transition-color);
}
.gon-pagination a:hover { background: var(--gon-hover-tint); }
.gon-pagination .page-numbers.current {
  background: var(--wp--preset--color--primary);
  border-color: transparent;
  color: var(--wp--preset--color--cream);
  font-weight: 600;
}
.gon-pagination .page-numbers.dots { border-color: transparent; }

@media (max-width: 781px) {
  .gon-grid .wc-block-product-template { grid-template-columns: repeat(2, 1fr); }
  .gon-card__body { padding: 12px 14px 16px; }

  .gon-plp__head { padding-block: 32px 0; gap: 16px; }

  /* แถบกรองบนมือถือเรียงลงมา และแถวปุ่มเลื่อนแนวนอนได้ด้วย CSS ล้วน
     ไม่ใช้สคริปต์ตามกติกาที่เคาะไว้ */
  .gon-filter { flex-direction: column; align-items: stretch; gap: 12px; }
  .gon-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gon-filter__chips::-webkit-scrollbar { display: none; }
  .gon-chip a { white-space: nowrap; }
  .gon-filter__sort { margin-left: 0; }
  .gon-filter__sort select { width: 100%; }
}

/* ============================================================
   หน้าแรก — เจ็ด section ตามลำดับที่ล็อกไว้ใน DECISIONS หัวข้อ 2
   ค่าทุกตัวแกะจาก 01 Home Page.html
   ============================================================ */

/* ---------- ปุ่มที่ไม่ได้มาจาก WooCommerce ----------
   ใช้ซ้ำหลายหน้า จึงทำเป็นคลาสกลาง ค่าตรงกับ Button ใน SPEC หัวข้อ 6 */
.gon-btn { margin: 0; display: flex; }
.gon-btn a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--gon-radius-xs);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  line-height: 1.2;
  transition: var(--gon-transition-color);
}
.gon-btn--lg a {
  min-height: 52px;
  padding: 16px 36px;
  font-size: var(--wp--preset--font-size--body-l);
}
.gon-btn--secondary a {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
.gon-btn--secondary a:hover { background: var(--gon-hover-tint); }
.gon-btn a:active { transform: translateY(1px); }

/* ลิงก์ลูกศร — ลูกศรเลื่อนขวา 4px ตอนเอาเมาส์ชี้ */
.gon-arrowlink { margin: 0; }
.gon-arrowlink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-arrowlink span {
  display: inline-block;
  transition: transform var(--gon-dur-base) var(--gon-ease);
}
.gon-arrowlink a:hover span { transform: translateX(4px); }

/* ---------- 1. hero ----------
   ภาพเต็มความกว้างสูง 560 แล้ววางคำไว้ใต้ภาพจัดกึ่งกลาง ไม่ใช่คำทับบนภาพ */
/* ⚠️ WordPress พิมพ์ `.wp-block-image img{height:auto}` เป็นสไตล์ inline ในหัวเอกสาร
   ซึ่งออกทีหลัง stylesheet ของธีมแม้ธีมจะ enqueue ที่ priority 99
   ผลคือความสูงที่เราตั้งไม่มีผล ภาพยืดเต็มสัดส่วนจริงกลายเป็นสูง 2160
   ต้องเขียน specificity ให้สูงกว่าเขา ไม่ใช่พึ่งลำดับการโหลด */
.gon-hero__media { margin: 0; }
/* 🔸 เบี่ยงจากดีไซน์โดยเจตนา (วิทย์เคาะ 24 ส.ค. 2026)
   ดีไซน์กำหนดสูง 560 คงที่ แต่วิทย์ขอให้ภาพเปิดสูงพอดีจอตอนเปิดหน้าขึ้นมา
   จึงคิดจากความสูงจอจริงลบแถบประกาศและ header ออก
   ใช้ svh เพื่อให้บนมือถือคิดจากจอตอนแถบเบราว์เซอร์ย่อแล้ว ไม่กระโดดตอนเลื่อน
   ตกลง fallback เป็น vh สำหรับเบราว์เซอร์ที่ยังไม่รองรับ svh */
.gon-home .gon-hero__media img {
  width: 100%;
  height: calc(100vh - var(--gon-announce-h) - var(--gon-header-h));
  height: calc(100svh - var(--gon-announce-h) - var(--gon-header-h));
  object-fit: cover;
  object-position: 50% 42%;
}
.gon-hero__text {
  padding-block: 64px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.gon-hero__eyebrow { margin: 0; color: var(--wp--preset--color--muted); }
/* กันไม่ให้วลีถูกตัดกลางคำ ซึ่งทำให้อ่านสะดุดและผิดจากดีไซน์ที่ตั้งใจให้ขึ้นบรรทัดใหม่ตรง <br> เท่านั้น */
.gon-hero__title { margin: 0; max-width: 900px; text-wrap: balance; }
.gon-nowrap { white-space: nowrap; }
.gon-hero__lede { margin: 0; max-width: 620px; color: var(--wp--preset--color--ink); }
.gon-hero__cta { margin-top: 8px; }

/* ---------- 2. แถบรายละเอียดงานฝีมือสามช่อง ---------- */
.gon-craft {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gon-grid-gap);
}
.gon-craft__item { display: flex; flex-direction: column; gap: 12px; }
.gon-craft__img { margin: 0; }
.gon-craft__img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-deep);
}
.gon-craft__cap { margin: 0; color: var(--wp--preset--color--muted); }

/* ---------- 3. section สินค้า ---------- */
.gon-section {
  padding-block: var(--gon-section-gap);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.gon-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wp--preset--color--primary);
}
.gon-sechead__left { display: flex; align-items: baseline; gap: 24px; }
.gon-sechead__over { margin: 0; color: var(--wp--preset--color--muted); }
.gon-sechead__title { margin: 0; }
/* กริดในหน้าแรกไม่ต้องเว้นระยะบนเหมือนหน้าหมวด เพราะ section คุมระยะให้แล้ว */
.gon-home .gon-grid { padding-block: 0; }

/* ---------- 4. แถบ GON Sauce ----------
   ครึ่งซ้ายเป็นคำ ครึ่งขวาเป็นภาพชิดขอบขวาเต็มความสูงแถบ
   ตั้งใจไม่มีการเคลื่อนไหวเลย เพื่อเป็นจุดพักสายตา */
.gon-sauce {
  border-top: 1px solid var(--wp--preset--color--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  align-items: stretch;
}
.gon-sauce__copy {
  padding: 96px 80px 96px var(--gon-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.gon-sauce__over { margin: 0; color: var(--wp--preset--color--clay-deep); }
.gon-sauce__title, .gon-sauce__lede { margin: 0; }
.gon-sauce__lede { max-width: 520px; }

.gon-spec { display: flex; flex-direction: column; }
.gon-spec__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding-block: 16px;
  border-top: 1px solid var(--wp--preset--color--clay);
}
.gon-spec__row--last { border-bottom: 1px solid var(--wp--preset--color--clay); }
.gon-spec__label { flex: 1; font-size: var(--wp--preset--font-size--body-m); color: var(--wp--preset--color--muted); }
.gon-spec__value {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1;
  font-weight: 600;
  color: var(--wp--preset--color--clay-deep);
}

/* ช่องภาพชิดขอบขวาเต็มความสูงแถบ · ภาพครอบเต็มช่องไม่ว่าไฟล์ต้นทางจะสัดส่วนไหน
   ⚠️ ของเดิมตรงนี้เคยเป็น **ข้อความโจทย์ถ่ายภาพที่หลุดขึ้นหน้าเว็บให้ลูกค้าเห็น**
   เพราะยกมาจากคำอธิบายในไฟล์ดีไซน์ตรงๆ · เปลี่ยนเป็นภาพจริงแล้ว 25 ส.ค. 2026
   **ห้ามเอาข้อความบรรยายโจทย์ถ่ายภาพจากไฟล์ดีไซน์มาใส่ในธีมอีก** */
.gon-sauce__shot {
  background: var(--wp--preset--color--clay);
  min-height: 520px;
  display: block;
  overflow: hidden;
}

/* ---------- 6. GON Goodie ย่อ ---------- */
.gon-goodie {
  padding-block: var(--gon-section-gap);
  display: grid;
  grid-template-columns: minmax(0, 536px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.gon-goodie__copy { display: flex; flex-direction: column; gap: 20px; }
.gon-goodie__copy h2, .gon-goodie__copy p { margin: 0; }
.gon-goodie__copy > p:not(.gon-overline):not(.gon-arrowlink) { max-width: 560px; }
.gon-goodie__tiles {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: var(--gon-grid-gap);
  justify-content: end;
}
.gon-tile {
  width: 240px;
  height: 240px;
  margin: 0;
  padding: 16px;
  background: var(--wp--preset--color--cream-deep);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gon-tile__cap { font-size: var(--wp--preset--font-size--caption); line-height: 1.45; color: var(--wp--preset--color--muted); }
/* ช่องที่ใส่ภาพจริงแล้ว — ภาพเต็มช่อง ไม่มีระยะใน และตัดส่วนเกินด้วย object-fit
   `figure` เขียนไว้เพื่อให้ชนะกฎของ core ที่ผูกกับ `.wp-block-image` โดยไม่ต้องใช้ !important */
figure.gon-tile { padding: 0; overflow: hidden; }
figure.gon-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 7. แถบรับข่าวสาร ----------
   ⚠️ กฎ `.wp-block-group.has-background.alignfull{padding:0}` ที่เราเขียนไว้เองข้างบน
   มี specificity 0,3,0 จึงทับ padding ของแถบนี้จนเป็นศูนย์
   ต้องเขียนให้ลึกเท่ากันขึ้นไป ไม่ใช่แก้กฎข้างบนซึ่งมีไว้กัน padding 2.375em ของ core */
.wp-block-group.gon-news-band.has-background { padding-block: var(--gon-band-gap); }
.gon-news-band__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gon-news-band__inner h2, .gon-news-band__inner p { margin: 0; }
.gon-news--band { gap: 12px; margin-top: 8px; }
.gon-news--band .gon-news__row { display: flex; gap: 12px; align-items: stretch; }
.gon-news--band .gon-news__field { flex: 1; min-height: 52px; }
.gon-news--band .gon-news__submit { min-height: 52px; padding: 16px 36px; font-size: var(--wp--preset--font-size--body-l); }
.gon-news--band .gon-news__consent { min-height: 44px; align-items: center; }

/* ---------- หน้าแรกบนมือถือ ---------- */
@media (max-width: 781px) {
  /* มือถือใช้สูตรเดียวกัน ตัวแปรความสูง header กับแถบประกาศเปลี่ยนค่าเองแล้ว */
  .gon-hero__text { padding-block: 40px 0; gap: 20px; }

  .gon-craft { margin-top: 48px; grid-template-columns: 1fr; gap: 24px; }

  .gon-sechead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gon-sechead__left { flex-direction: column; gap: 8px; }

  .gon-sauce { grid-template-columns: 1fr; }
  .gon-sauce__copy { padding: 56px var(--gon-gutter); gap: 20px; }
  .gon-sauce__shot { min-height: 360px; }

  .gon-goodie { grid-template-columns: 1fr; gap: 32px; }
  .gon-goodie__tiles {
    grid-template-columns: repeat(3, 200px);
    justify-content: start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gon-goodie__tiles::-webkit-scrollbar { display: none; }
  .gon-tile { width: 200px; height: 200px; }

  .wp-block-group.gon-news-band.has-background { padding-block: 56px; }
  .gon-news--band .gon-news__row { flex-direction: column; }
}

/* ============================================================
   Drop Landing — เจ็ดส่วนตามที่เคาะใน DECISIONS หัวข้อ 2
   รายการสินค้าอยู่ก่อนจุดเด่น เพื่อให้คนที่ตัดสินใจแล้วซื้อได้
   โดยไม่ต้องเลื่อนผ่านเรื่องเล่าทั้งหมด
   ค่าทุกตัวแกะจาก 03 Drop Landing Page.html
   ============================================================ */

.gon-drop__crumbs { padding-block: 20px; }

/* ---------- ภาพเปิด สัดส่วน 16 ต่อ 7 ---------- */
.gon-drop__hero { margin: 0; }
.gon-drop__heroimg { margin: 0; }
.gon-drop .gon-drop__heroimg img {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--wp--preset--color--cream-deep);
}

/* ---------- แถบเปิดเรื่อง ----------
   พื้นครีมอ่อน มีเส้นคาดล่าง และเป็นที่อยู่ของ h1 ขนาดใหญ่สุดของเว็บ */
.wp-block-group.gon-drop__intro.has-background {
  padding-block: 56px 64px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
/* ⚠️ แถบสีถูกปลด padding ทิ้งด้วยกฎแก้ข้อ 33 ตัวในจึงต้องถือ gutter เอง
   ไม่งั้นเนื้อหาจะชิดขอบจอและไม่ตรงเลนกับ section อื่น */
.gon-drop__introinner,
.gon-mat__inner {
  max-width: var(--gon-page-max);
  margin-inline: auto;
  padding-inline: var(--gon-gutter);
}
.gon-drop__introinner { display: flex; flex-direction: column; gap: 20px; }
.gon-drop__over { margin: 0; color: var(--wp--preset--color--muted); }
.gon-drop__title { margin: 0; }
.gon-drop__lede { margin: 0; max-width: 720px; }
.gon-drop__cta { margin-top: 12px; align-self: flex-start; }

/* ปุ่มหลัก ใช้ร่วมกับคลาสกลาง gon-btn */
.gon-btn--primary a {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  gap: 12px;
}
.gon-btn--primary a:hover { background: var(--wp--preset--color--primary-deep); }

/* ลูกศรชี้ลงของปุ่มที่พาไปยังรายการสินค้า และชี้ขึ้นของปุ่มท้ายหน้า */
.gon-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.gon-drop__cta--up .gon-caret {
  border-bottom: 0;
  border-top: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-2px, 2px);
}

/* ---------- บล็อกแนวคิด ---------- */
.gon-concept {
  padding-block: var(--gon-section-gap) 0;
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 64px;
  align-items: center;
}
.gon-concept__copy { display: flex; flex-direction: column; gap: 24px; }
.gon-concept__copy > p, .gon-concept__title { margin: 0; }
.gon-concept__img { margin: 0; }
.gon-concept__img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  background: var(--wp--preset--color--cream-deep);
}

/* ---------- รายการสินค้าของดรอป ----------
   scroll-margin เผื่อความสูง header ที่ติดขอบบน ไม่งั้นหัวข้อจะถูก header ทับ */
.gon-drop__products { scroll-margin-top: 112px; padding-block: var(--gon-section-gap) 0; }
.gon-drop__prodhead { display: flex; flex-direction: column; gap: 20px; }
.gon-drop__prodhead h2, .gon-drop__prodhead p { margin: 0; }
.gon-drop__prodlede { max-width: 660px; }

/* ---------- สามเรื่องที่ตั้งใจทำ ---------- */
.gon-hl { padding-block: var(--gon-section-gap) 0; }
.gon-hl__head { margin: 0 0 40px; }
.gon-hl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gon-grid-gap); }
.gon-hl__item { display: flex; flex-direction: column; gap: 16px; }
.gon-hl__img { margin: 0; }
.gon-hl__img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  background: var(--wp--preset--color--cream-deep);
}
.gon-hl__title, .gon-hl__body { margin: 0; }

/* ---------- lookbook ----------
   ภาพทุกใบเป็นแนวตั้ง 2 ต่อ 3 ไม่ครอบใบไหน และไม่มีข้อความใดๆ ปล่อยภาพเล่าเอง */
.gon-lb { padding-block: var(--gon-section-gap) 0; }
.gon-lb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gon-grid-gap); }
.gon-lb__cell { margin: 0; overflow: hidden; }
.gon-lb__cell img {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--wp--preset--color--cream-deep);
  transition: transform var(--gon-dur-image) var(--gon-ease-out);
}
.gon-lb__cell:hover img { transform: scale(1.02); }

/* ---------- แถบรายละเอียดวัสดุ ---------- */
.wp-block-group.gon-mat.has-background {
  margin-top: var(--gon-section-gap);
  padding-block: 64px;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-mat__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gon-matcol { display: flex; flex-direction: column; gap: 12px; }
.gon-matcol--divided {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 40px;
  border-left: 1px solid var(--wp--preset--color--line);
}
.gon-matcol__label { margin: 0; color: var(--wp--preset--color--primary); }
.gon-matcol__text { margin: 0; }

/* ---------- ปุ่มซ้ำท้ายหน้า ----------
   ต้องมี เพราะหน้าจบด้วย lookbook กับรายละเอียด
   คนที่อ่านจนจบจึงต้องมีทางกลับไปซื้อโดยไม่ต้องเลื่อนขึ้น */
.gon-drop__ctafoot { padding-block: 96px var(--gon-section-gap); display: flex; }

/* ---------- Drop Landing บนมือถือ ---------- */
@media (max-width: 781px) {
  .wp-block-group.gon-drop__intro.has-background { padding-block: 40px 48px; }
  .gon-concept { grid-template-columns: 1fr; gap: 32px; padding-block: 64px 0; }
  .gon-drop__products, .gon-hl, .gon-lb { padding-block: 64px 0; }
  .gon-hl__grid { grid-template-columns: 1fr; gap: 32px; }

  /* lookbook บนมือถือเป็นแถบเลื่อนแนวนอนที่ทำด้วย CSS ล้วน
     กติกาห้ามแถบสไลด์ยังอยู่สำหรับสไลด์ที่ต้องใช้ JavaScript
     การเลื่อนด้วย CSS ล้วนไม่นับว่าผิดกฎ เพราะเหตุผลเบื้องหลังกฎคือห้ามพึ่งสคริปต์ */
  .gon-lb__grid {
    grid-template-columns: repeat(6, 70%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .gon-lb__cell { scroll-snap-align: start; }

  .wp-block-group.gon-mat.has-background { margin-top: 64px; padding-block: 40px; }
  .gon-mat__inner { grid-template-columns: 1fr; gap: 24px; }
  .gon-matcol--divided { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }

  .gon-drop__ctafoot { padding-block: 56px 64px; }
  .gon-drop__cta a { width: 100%; }
}

/* ============================================================
   สถานะสินค้าหมดบนการ์ด — แผ่น 00 อาร์ตบอร์ด K
   WooCommerce ใส่คลาส outofstock ให้ <li> ของการ์ดอยู่แล้ว จึงเกาะคลาสนั้นได้เลย
   ============================================================ */

/* ⚠️ ป้ายนี้ทำด้วย CSS ไม่ใช่ markup โดยตั้งใจ
   ลองใส่ผ่านตัวกรอง `render_block_woocommerce/product-image` แล้วไม่เข้า
   และการพึ่ง context ของบล็อกทำให้เปราะเกินไปสำหรับป้ายใบเดียว
   ผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอยังได้ข้อมูลครบ เพราะปุ่มบนการ์ดเขียนว่าสินค้าหมดอยู่แล้ว */
li.outofstock .gon-card__media::after {
  content: "สินค้าหมด";
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-dim);
  color: #6B6350;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--overline);
  font-weight: 600;
  letter-spacing: var(--gon-ls-overline);
  line-height: 1;
}

.gon-soldout-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-dim);
  color: #6B6350;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--overline);
  font-weight: 600;
  letter-spacing: var(--gon-ls-overline);
  line-height: 1;
  text-transform: uppercase;
}

/* รูปเป็นขาวดำและจางลง เพื่อให้เห็นแต่ไกลว่าซื้อไม่ได้ */
li.outofstock .gon-card__media img {
  filter: grayscale(1);
  opacity: 0.55;
}
li.outofstock:hover .gon-card__media img { transform: none; }
li.outofstock .gon-card:hover { border-color: var(--wp--preset--color--line); }

/* ราคาเปลี่ยนเป็นสีรอง ไม่ใช่สีเน้นเหมือนสินค้าที่ซื้อได้ */
li.outofstock .gon-card__price,
li.outofstock .gon-card__price .wc-block-components-product-price {
  color: var(--wp--preset--color--muted);
}

/* ปุ่มเป็นสถานะกดไม่ได้ ทั้งหน้าตาและการใช้งานจริง
   ของเดิม WooCommerce ให้ลิงก์ "อ่านเพิ่ม" ซึ่งชวนให้กดทั้งที่ซื้อไม่ได้ */
li.outofstock .gon-card .wp-block-button.wc-block-components-product-button .wp-block-button__link,
li.outofstock .gon-card .gon-card__btn a.button {
  background: var(--wp--preset--color--cream-dim);
  border-color: transparent;
  color: var(--wp--preset--color--disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* ⚠️ WooCommerce เติมลิงก์ "ดูตะกร้าสินค้า" เป็นอิลิเมนต์แยกต่อท้ายปุ่ม
   ซึ่งจะโผล่ขึ้นมาใต้ปุ่มหลังกดเพิ่มสินค้า ทำให้การ์ดยืดและมีปุ่มซ้อนสองชั้น
   วิทย์เคาะ 24 ส.ค. 2026 ว่าไม่เอา ให้แผงตะกร้าย่อยเปิดเองแทน
   ซึ่งตรงกับที่เคยเคาะไว้ใน DECISIONS หัวข้อ 5 ว่าไม่มีแถบแจ้งเตือนซ้ำอีกชั้น */
.gon-card__btn .added_to_cart,
.gon-card__btn + span:has(.added_to_cart) { display: none !important; }
.wc-block-components-product-button > span:has(> .added_to_cart) { display: none !important; }

/* ---------- รายการที่ยังไม่เปิดให้กด ----------
   Special Collaboration ยังไม่มีสินค้า จึงแสดงเป็นข้อความว่า (Soon) และกดไม่ได้
   ใช้สีรองเพื่อให้เห็นว่าต่างจากรายการที่กดได้ (วิทย์เคาะ 24 ส.ค. 2026) */
.gon-chip--soon span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border: 1px dashed var(--wp--preset--color--line);
  border-radius: var(--gon-radius-pill);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--body-s);
  cursor: default;
}
/* รายการในเมนูหลักที่ยังไม่เปิดให้กด — WordPress ไม่ใส่ href ให้อยู่แล้วเมื่อไม่มี url
   จึงเหลือแค่ทำให้หน้าตาบอกว่ากดไม่ได้ */
.gon-nav .gon-nav-soon .wp-block-navigation-item__content {
  color: var(--wp--preset--color--muted);
  cursor: default;
  pointer-events: none;
}

.gon-footer__links .gon-soon {
  color: var(--wp--preset--color--on-inverse-muted);
  cursor: default;
}

/* ---------- ความเร็วของแผงตะกร้าย่อย ----------
   WooCommerce ตั้งอนิเมชันเปิดแผงไว้ 0.3 วินาที ซึ่งเมื่อบวกเวลารอเซิร์ฟเวอร์แล้วรู้สึกช้า
   ย่อลงเหลือ 0.2 วินาทีเท่าค่า --dur-base ของดีไซน์ ซึ่งเป็นจังหวะเดียวกับ transition อื่นทั้งเว็บ
   ส่วนการเปิดทันทีโดยไม่รอเซิร์ฟเวอร์อยู่ที่ assets/js/gon-shop.js */
.wc-block-components-drawer__screen-overlay,
.wc-block-components-drawer__screen-overlay--with-slide-out,
.wc-block-components-drawer__screen-overlay--with-slide-in { transition-duration: var(--gon-drawer-dur); }
.wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer { transition-duration: var(--gon-drawer-dur); }
.wc-block-components-drawer__screen-overlay--with-slide-in,
.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer { animation-duration: var(--gon-drawer-dur); }

/* เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
  .wc-block-components-drawer__screen-overlay,
  .wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
    transition-duration: 1ms;
    animation-duration: 1ms;
  }
}

/* ============================================================
   หน้าสินค้า — ค่าจาก 04 Product Page.html
   ============================================================ */

.gon-pdp__crumbs { padding-block: 20px; }

/* สองคอลัมน์ ซ้ายเป็นแกลเลอรีที่ติดหนึบ ขวาเป็นข้อมูลสินค้า */
.gon-pdp__top {
  padding-block: 20px 0;
  display: grid;
  grid-template-columns: 744px 1fr;
  gap: 64px;
  align-items: start;
}

/* ⚠️ คอลัมน์ sticky ต้องมี align-self: flex-start และห้ามมี overflow clip ที่ตัวครอบ
   ไม่งั้นจะไม่เกาะ ซึ่งเป็นบทเรียนจากรอบทดลอง */
.gon-pdp__gallery {
  position: sticky;
  top: 112px;
  align-self: flex-start;
}

/* ---------- แกลเลอรี ----------
   ⚠️ ห้ามปลด height กับ overflow ของ `.flex-viewport` ในรอบนี้
   SPEC ข้อ 20 และ 21 ที่บอกให้แบนสไลด์เป็นคอลัมน์ **เป็นของดีไซน์รอบทดลอง**
   ซึ่งวาดแกลเลอรีเป็นรูปเรียงลงมา · ดีไซน์รอบจริง (04 Product Page) ใช้
   **รูปหลักหนึ่งใบกับแถวรูปย่อ** ซึ่งตรงกับสิ่งที่ flexslider ทำอยู่แล้ว
   ถ้าเผลอปลดสองค่านั้น สไลด์จะคลี่ออกเป็นรูปเรียงลงมาทั้งหมด (พลาดมาแล้ว 24 ส.ค. 2026) */
/* ⚠️ WooCommerce ตั้ง `opacity: 0` ให้แกลเลอรีไว้ก่อน แล้วให้สคริปต์เปลี่ยนเป็น 1 ตอนพร้อม
   ถ้าสคริปต์ไม่ทำงานด้วยเหตุใดก็ตาม รูปสินค้าจะหายทั้งหมดโดยไม่มีอะไรฟ้อง
   บังคับให้เห็นไว้ก่อน เพราะรูปสินค้าหายคือความเสียหายที่หนักกว่าการเห็นตอนยังจัดไม่เสร็จ */
.gon-pdp__gallery .woocommerce-product-gallery { opacity: 1 !important; }
/* ⚠️ flexslider กับสไตล์ของ Woo ตั้งความกว้างของตัวแกลเลอรีเอง ทำให้แคบกว่าคอลัมน์ที่เราจัดไว้
   ต้องบังคับให้เต็มคอลัมน์ทุกชั้น ตั้งแต่ตัวบล็อกลงไปถึงตัวสไลด์ */
/* 🚨 บังคับความกว้างได้เฉพาะสามชั้นนี้เท่านั้น
   ห้ามรวม `.woocommerce-product-gallery__wrapper` เพราะนั่นคือ **รางสไลด์**
   ซึ่งต้องกว้างเท่าจำนวนรูปคูณความกว้างช่องมอง ถ้าบีบเหลือ 100% รูปทุกใบจะซ้อนทับกัน
   แล้วพอเลื่อนไปใบที่สองเป็นต้นไปจะเห็นเป็นช่องว่างเปล่า
   (พบ 24 ส.ค. 2026 จาก feedback ของวิทย์ · แก้รอบแรกยังไม่ถูกจุด เพราะไปโทษตัวสไลด์แทนราง) */
.gon-pdp__gallery .wp-block-woocommerce-product-image-gallery,
.gon-pdp__gallery .woocommerce-product-gallery,
.gon-pdp__gallery .flex-viewport { width: 100% !important; max-width: none !important; }

/* 🚨 ห้ามบังคับความกว้างให้ `.woocommerce-product-gallery__image` เด็ดขาด
   flexslider ตั้งความกว้างของสไลด์แต่ละใบเป็น inline ให้เท่ากับช่องมอง แล้วเลื่อนรางด้วย transform
   ถ้าเราสั่ง width:100% ทับ สไลด์จะกลายเป็นกว้างเท่ารางทั้งราง ทำให้ใบที่สองเป็นต้นไปเลื่อนมาแล้วว่างเปล่า
   (พบ 24 ส.ค. 2026 จาก feedback ของวิทย์ · อาการคือกดรูปย่อใบอื่นแล้วรูปใหญ่หายไป) */

.gon-pdp__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--wp--preset--color--cream-deep);
}

/* แถวรูปย่อ หกช่องต่อแถว ระยะ 12 · ช่องที่เลือกอยู่ใช้เส้นขอบเขียว */
/* ⚠️ WooCommerce ตั้ง margin ของแถวรูปย่อเป็น 0 ด้วย selector ที่ลึกกว่า
   ทำให้แถวรูปย่อไปติดขอบล่างของรูปหลักพอดีโดยไม่มีช่องว่างเลย
   ดีไซน์ให้ห่าง 12px เท่าระยะกริดอื่นในหน้า */
.gon-pdp__gallery .flex-control-thumbs {
  margin: 12px 0 0 !important;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
/* ⚠️ flexslider ตั้ง float:left ให้ <li> และไม่กำหนดความกว้าง
   พอเปลี่ยนแถวเป็นกริด ตัว li จึงหดเท่าเนื้อในจนรูปย่อเหลือ 19px
   ต้องสั่งความกว้างเต็มช่องและปลด float ทิ้ง */
/* ⚠️ WooCommerce ตั้ง `width: 25%` ให้ <li> ของรูปย่อด้วย selector ที่ลึกกว่าที่เราเขียนได้
   (ราว 4 คลาส 3 อิลิเมนต์) ผลคือรูปย่อเหลือหนึ่งในสี่ของช่องกริด คือ 28.5px แทนที่จะเป็น 114px
   ไล่เพิ่ม specificity แล้วยังไม่ชนะ จึงเป็นกรณีที่ใช้ !important ถูกต้อง
   เขียนไว้เฉพาะสองค่าที่จำเป็น ไม่เหวี่ยงทั้งบล็อก */
.gon-pdp__gallery .woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0;
  width: 100% !important;
  max-width: none !important;
  float: none;
  display: block;
}
.gon-pdp__gallery .woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-deep);
  cursor: pointer;
  opacity: 1;
  transition: border-color var(--gon-dur-fast) var(--gon-ease);
}
.gon-pdp__gallery .woocommerce-product-gallery .flex-control-thumbs img:hover,
.gon-pdp__gallery .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border-color: var(--wp--preset--color--primary);
}
/* ปุ่มขยายรูปของ WooCommerce ไม่มีในดีไซน์ */
.gon-pdp__gallery .woocommerce-product-gallery__trigger { display: none; }

/* ---------- คอลัมน์ข้อมูลสินค้า ---------- */
.gon-pdp__summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 8px;
}
.gon-pdp__over { margin: 0; color: var(--wp--preset--color--muted); }
.gon-pdp__over a { color: inherit; }
.gon-pdp__title { margin: 0; }

.gon-pdp__price {
  margin: 0;
  font-size: 22px;
  color: var(--wp--preset--color--ink);
  font-weight: 500;
}
.gon-pdp__price del { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--body-m); }
.gon-pdp__price ins { text-decoration: none; color: var(--wp--preset--color--sale); font-weight: 600; }

/* บรรทัดสถานะสต๊อก มีจุดกลมนำหน้า 6px */
.gon-pdp__stock {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--primary);
  font-weight: 500;
}
.gon-pdp__stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}
.gon-pdp__stock.wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--muted); }
.gon-pdp__stock.wc-block-components-product-stock-indicator--out-of-stock::before { background: var(--wp--preset--color--cream-dim); }

.gon-pdp__lede { margin: 0; color: var(--wp--preset--color--ink); }
.gon-pdp__lede p { margin: 0; }

/* ---------- ปุ่มซื้อบนหน้าสินค้า ----------
   ⚠️ ใช้บล็อก `woocommerce/product-button` ตัวเดียวกับการ์ดสินค้า **ไม่ใช่ฟอร์มซื้อ**
   เพราะ WooCommerce 11.0.1 ตั้งใจให้ฟอร์มบนหน้าสินค้าส่งแบบโหลดหน้าใหม่
   ทดสอบยืนยันแล้วว่าไม่มีอะไรดักการส่งฟอร์มและไม่มีอะไร preventDefault ตอนคลิก
   ส่วนบล็อกนี้เรนเดอร์เป็น `type="button"` พร้อมตัวเพิ่มลงตะกร้า จึงไม่รีเฟรช
   **ผลที่แลกไปคือหน้าสินค้าไม่มีช่องเลือกจำนวน** วิทย์เคาะรับ 24 ส.ค. 2026
   เพราะเส้นทางซื้อหลักของ launch คือ Drop Landing ซึ่งใช้การ์ดที่ไม่มีช่องจำนวนอยู่แล้ว */
/* ⚠️ ต้องเขียนให้ลึกกว่ากฎ `.wp-block-button.wc-block-components-product-button .wp-block-button__link{width:auto}`
   ของ WooCommerce ซึ่งเป็น 0,3,0 · เป็นกฎตัวเดียวกับที่เคยทำให้ปุ่มบนการ์ดหดเมื่อ 24 ส.ค. (SPEC ข้อ 36) */
.gon-pdp__buy { margin: 0; display: flex; }
.gon-pdp__summary .wp-block-button.wc-block-components-product-button .wp-block-button__link {
  width: 100%;
  flex: 1 1 100%;
  min-height: 52px;
  padding: 16px 36px;
  border: 1px solid transparent;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-l);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--gon-transition-color);
}
.gon-pdp__buy .wp-block-button__link:hover { background: var(--wp--preset--color--primary-deep); }

/* สินค้าหมดหรือซื้อไม่ได้ ปุ่มเป็นสถานะกดไม่ได้เหมือนบนการ์ด */
.gon-pdp__buy .wp-block-button__link.disabled,
.gon-pdp__buy .wp-block-button__link:disabled {
  background: var(--wp--preset--color--cream-dim);
  color: var(--wp--preset--color--disabled-text);
  cursor: not-allowed;
}

/* ลิงก์ดูตะกร้าที่โผล่ใต้ปุ่มหลังกด ซ่อนเหมือนบนการ์ด เพราะแผงตะกร้าเปิดเองอยู่แล้ว */
.gon-pdp__buy .added_to_cart { display: none !important; }

/* ---------- บล็อกคำอธิบายและข้อมูลเพิ่มเติม ----------
   ⚠️ สินค้าที่ไม่มี attribute เลย บล็อกข้อมูลเพิ่มเติมจะไม่คืนอะไรมา
   เหลือแต่หัวข้อลอยอยู่โดยไม่มีเนื้อหา · ซ่อนทั้งบล็อกเมื่อมีแต่หัวข้อ
   (Dad Cap ทั้งสามตัวยังไม่มี attribute เลย ซึ่งเป็นงานฝั่งข้อมูล) */
.gon-pdp__block:has(> .gon-pdp__blocktitle:only-child) { display: none; }

.gon-pdp__block {
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gon-pdp__blocktitle { margin: 0; }
.gon-pdp__desc p { margin: 0 0 12px; }
.gon-pdp__desc p:last-child { margin-bottom: 0; }

/* ตารางข้อมูลเพิ่มเติม — ดีไซน์วางเป็นกริดสองคอลัมน์ `minmax(120px,200px) 1fr` ระยะระหว่างคอลัมน์ 24
   บล็อก `woocommerce/product-specifications` พิมพ์ออกมาเป็น `<table>` จริง จึงต้องแปลงค่าของกริดเป็นค่าของตาราง
   ⚠️ **สามจุดที่ตารางไม่เหมือนกริดโดยปริยาย และทำให้รอบแรกไม่ตรงดีไซน์**
   1. `<p>` ที่บล็อกครอบค่าไว้มี margin 15px ของธีม ดันค่าให้ต่ำกว่าป้ายและทำให้แถวสูง 79 แทนที่จะเป็น 48
   2. เส้นคั่นของกริดขาดตรงช่องว่างระหว่างคอลัมน์ แต่ของตารางแบบ collapse เชื่อมกันเป็นเส้นเดียว
      จึงใช้ `separate` กับ `border-spacing` 24 แล้วถอนระยะขอบซ้ายขวาที่งอกออกมาด้วย margin ติดลบ */
.gon-pdp__specs { margin: 4px 0 0; overflow: visible; }
.gon-pdp__specs table {
  width: calc(100% + 48px);
  margin-inline: -24px;
  border-collapse: separate;
  border-spacing: 24px 0;
}
.gon-pdp__specs th,
.gon-pdp__specs td {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}
.gon-pdp__specs tbody tr:first-child th,
.gon-pdp__specs tbody tr:first-child td { border-top: 0; }
/* ⚠️ **ห้ามใส่ `table-layout: fixed`** ที่ตารางนี้ ทดลองแล้วได้คอลัมน์ 264 เท่ากันสองช่องแทนที่จะเป็น 200
   เพราะแถวแรกของตารางคือแถวหัวตารางที่ซ่อนไว้ให้โปรแกรมอ่านหน้าจอ ซึ่งถูกจัดวางแบบ absolute
   จึงไม่มีความกว้างให้อัลกอริทึมใช้ แล้วมันแบ่งพื้นที่เท่ากันแทน · ตารางแบบ auto ให้ 200 ตรงตามที่สั่ง
   (พิสูจน์ด้วยการถอด thead ออกในเบราว์เซอร์จริงแล้วค่าเด้งกลับเป็น 200 ทันที) */
.gon-pdp__specs th {
  width: 200px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}
.gon-pdp__specs td { font-size: var(--wp--preset--font-size--body-m); }
.gon-pdp__specs td p { margin: 0; }
.gon-pdp__specs td p + p { margin-top: 4px; }

/* ---------- แถบเงื่อนไขการซื้อ ----------
   เป็นบล็อกกลางในเทมเพลต ไม่ใช่ข้อความที่พิมพ์ซ้ำในสินค้าแต่ละชิ้น */
.wp-block-group.gon-terms.has-background {
  margin-top: var(--gon-section-gap);
  padding-block: 64px;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-terms__inner {
  max-width: var(--gon-page-max);
  margin-inline: auto;
  padding-inline: var(--gon-gutter);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: start;
}
.gon-terms__title { margin: 0; }
.gon-terms__body { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.gon-terms__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-terms__list li + li {
  padding-top: 12px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-terms__link a { color: var(--wp--preset--color--primary); }

/* ---------- สินค้าที่เกี่ยวข้อง สี่คอลัมน์ ---------- */
.gon-grid--4 .wc-block-product-template { grid-template-columns: repeat(4, 1fr); }
.gon-related .gon-grid { padding-block: 0; }

/* ---------- หน้าสินค้าบนมือถือ ---------- */
@media (max-width: 781px) {
  .gon-pdp__top { grid-template-columns: 1fr; gap: 32px; }
  .gon-pdp__gallery { position: static; }
  .gon-pdp__gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
  .gon-pdp__summary { gap: 20px; }

  .gon-pdp__form .variations { grid-template-columns: 1fr; }
  .gon-pdp__form form.cart { flex-wrap: nowrap; }

  .wp-block-group.gon-terms.has-background { margin-top: 64px; padding-block: 40px; }
  .gon-terms__inner { grid-template-columns: 1fr; gap: 24px; }

  /* สินค้าที่เกี่ยวข้องบนมือถือเป็นกริดสองคูณสอง ไม่ใช้การเลื่อนแนวนอน
     เพราะการเลื่อนแบบนั้นต้องเขียน JavaScript (เคาะไว้ 22 ส.ค. 2026) */
  .gon-grid--4 .wc-block-product-template { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- แถบภาพบรรณาธิการบนหน้าสินค้า ----------
   ภาพเต็มความกว้างสัดส่วน 3 ต่อ 1.2 มีไล่เฉดจากล่างขึ้นบนเพื่อให้ข้อความอ่านออก
   แสดงเฉพาะสินค้าในดรอปที่มีภาพชุดนี้ ดูเงื่อนไขใน functions.php */
/* ⚠️ ใช้คลาส alignfull ให้ WordPress จัดการการบานเต็มจอ ไม่ใช่ margin ติดลบของเราเอง
   เพราะคอนเทนเนอร์แบบจำกัดความกว้างใส่ `margin: auto !important` ให้ลูกทุกตัว ซึ่งทับกฎเรา
   **และห้ามตั้ง `width: 100%`** เพราะจะกลายเป็น 100% ของเลนเนื้อหา 1360 แทนที่จะเต็มจอ 1440
   ต้องปล่อยเป็น auto แล้ว margin ติดลบของ alignfull จะดันขอบออกเอง */
.gon-editorial {
  position: relative;
  width: auto;
  aspect-ratio: 3 / 1.2;
  overflow: hidden;
  background: var(--wp--preset--color--cream-deep);
  display: flex;
  align-items: flex-end;
}
.gon-editorial__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.gon-editorial__caption {
  position: relative;
  width: 100%;
  padding: 48px var(--gon-gutter);
  background: linear-gradient(to top, rgba(18, 42, 23, .62), rgba(18, 42, 23, 0));
}
.gon-editorial__caption p {
  margin: 0;
  max-width: 900px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--display-m);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--wp--preset--color--cream);
  text-wrap: pretty;
}

@media (max-width: 781px) {
  .gon-editorial { aspect-ratio: 3 / 2; }
  .gon-editorial__caption { padding: 24px var(--gon-gutter); }
  .gon-editorial__caption p { font-size: var(--wp--preset--font-size--heading-l); }
}

/* ============================================================
   หน้าตะกร้า — แผ่น 05
   ============================================================

   ⚠️ **คลาสของหน้านี้คือ `gon-cartpage` ไม่ใช่ `gon-cart`**
   เพราะ `gon-cart` ถูกใช้ไปแล้วกับบล็อกตะกร้าย่อยบน header ตั้งแต่รอบก่อน
   ตอนที่เผลอตั้งชื่อซ้ำ กฎของหน้านี้ทั้งชุดไหลเข้าไปทำงานในไอคอนตะกร้าบน header ด้วย
   ผลคือ `padding-top: 64px` ของหน้าตะกร้าไปดันไอคอนตะกร้าตกลงมาใต้ไอคอนบัญชี
   **ห้ามตั้งชื่อคลาสของหน้าใหม่ซ้ำกับคลาสที่ติดอยู่บนบล็อกในโครงร่วมเด็ดขาด**

   ⚠️ อ่านก่อนแก้ · ตะกร้าเป็น **ฟอร์มคลาสสิกของ WooCommerce**
   โครงที่ได้มาคือ `<table>` จริงที่มี thead หนึ่งแถวและ tbody หนึ่งแถวต่อสินค้า
   แต่ดีไซน์ต้องการกริดสี่คอลัมน์ที่ลิงก์ลบอยู่ **ใต้ชื่อสินค้า** ไม่ใช่คอลัมน์แรก
   จึงเปลี่ยน table ทั้งชุดเป็น grid แล้ววางเซลล์ด้วย `grid-template-areas`
   ซึ่งอิสระจากลำดับใน DOM · **ห้ามแก้ลำดับ td ใน template ของ WooCommerce**
   ============================================================ */

/* ---------- ปลดสไตล์ของ WooCommerce ที่ชนกับดีไซน์ ----------
   ⚠️ อ่านก่อนแก้ · WooCommerce แต่งตะกร้าจากไฟล์สองใบพร้อมกัน คือ `woocommerce.css`
   กับ `woocommerce-blocktheme.css` ซึ่งใบหลังมี selector ที่ใช้ **id** อย่าง `#coupon_code`
   และมี `!important` อยู่ที่สีของลิงก์ลบ · การเขียนทับด้วย class เดียวจึงแพ้เงียบๆ
   บล็อกนี้จึงปลดค่าที่ชนทั้งชุดก่อน แล้วค่อยใส่ค่าของดีไซน์ในกฎถัดๆ ไป
   **ห้ามลดความยาวของ selector ในบล็อกนี้** เพราะความยาวคือสิ่งที่ทำให้มันชนะ */
.gon-cartpage table.shop_table,
.gon-cartpage table.shop_table thead,
.gon-cartpage table.shop_table tbody,
.gon-cartpage table.shop_table tr,
.gon-cartpage table.shop_table th,
.gon-cartpage table.shop_table td {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  width: auto;
  line-height: inherit;
  font-weight: inherit;
  text-align: inherit;
  vertical-align: middle;
}
.gon-cartpage .cart-collaterals .cart_totals table th,
.gon-cartpage .cart-collaterals .cart_totals table td { width: auto; border: 0; }
.gon-cartpage .woocommerce .cart-collaterals,
.gon-cartpage .woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }
.gon-cartpage .woocommerce-cart-form .product-thumbnail,
.gon-cartpage .woocommerce-cart-form .product-thumbnail a img,
.gon-cartpage .woocommerce-cart-form .product-remove { width: auto; min-width: 0; }
.gon-cartpage .woocommerce a.remove,
.gon-cartpage .woocommerce a.remove:hover { color: var(--wp--preset--color--muted) !important; background: none; }
.gon-cartpage .woocommerce a.remove:hover { color: var(--wp--preset--color--sale) !important; }

.gon-cartpage { padding-top: 64px; padding-bottom: 0; }
.gon-cartpage__title { margin: 0 0 40px; }

/* สองคอลัมน์ ตารางซ้าย กล่องยอดรวมขวา 420 ระยะห่าง 64 */
.gon-cartpage__body > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
}
.gon-cartpage__body > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.gon-cartpage__body .woocommerce-cart-form { margin: 0; }

/* ---------- ตารางสินค้า ---------- */
.gon-cartpage .woocommerce-cart-form__contents { display: block; width: 100%; margin: 0; border: 0; }
.gon-cartpage .woocommerce-cart-form__contents thead,
.gon-cartpage .woocommerce-cart-form__contents tbody { display: block; }

/* หัวตารางเหลือสี่ช่อง คอลัมน์ลบกับรูปย่อยุบเข้าไปในช่องสินค้า */
.gon-cartpage .woocommerce-cart-form__contents thead tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 156px 120px;
  gap: 24px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-cartpage .woocommerce-cart-form__contents thead th {
  padding: 0;
  border: 0;
  font-size: var(--wp--preset--font-size--overline);
  letter-spacing: var(--gon-ls-overline);
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  text-transform: none;
}
.gon-cartpage .woocommerce-cart-form__contents thead th.product-remove,
.gon-cartpage .woocommerce-cart-form__contents thead th.product-thumbnail { display: none; }
.gon-cartpage .woocommerce-cart-form__contents thead th.product-name { text-align: left; }
.gon-cartpage .woocommerce-cart-form__contents thead th.product-price,
.gon-cartpage .woocommerce-cart-form__contents thead th.product-subtotal { text-align: right; }
.gon-cartpage .woocommerce-cart-form__contents thead th.product-quantity { text-align: center; }

/* แถวสินค้า — รูป 96 กับข้อความอยู่คอลัมน์เดียวกัน ลิงก์ลบอยู่แถวล่างของช่องชื่อ
   ช่องราคา จำนวน และรวม กินสองแถวเพื่อให้ยังอยู่กลางแนวตั้ง */
.gon-cartpage .woocommerce-cart-form__contents tbody tr.cart_item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 120px 156px 120px;
  grid-template-areas:
    "thumb name  price qty subtotal"
    "thumb rm    price qty subtotal";
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 6px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-cartpage .woocommerce-cart-form__contents tbody tr.cart_item > td {
  padding: 0;
  border: 0;
}
.gon-cartpage .cart_item .product-thumbnail {
  grid-area: thumb;
  align-self: start;
}
.gon-cartpage .cart_item .product-thumbnail img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
  background: var(--wp--preset--color--cream-deep);
}
.gon-cartpage .cart_item .product-name {
  grid-area: name;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* ระยะรูปถึงข้อความในดีไซน์คือ 20 แต่ระยะระหว่างคอลัมน์ทั้งตารางคือ 24
     ซึ่งต้องคงไว้เพื่อให้คอลัมน์ราคา จำนวน และรวม ตรงกับหัวตาราง
     จึงดึงเฉพาะกล่องข้อความเข้ามา 4 แทน ผลคือข้อความเริ่มที่ 156 ตามดีไซน์
     ⚠️ margin ติดลบบนช่องกริดไม่ขยับเส้นคอลัมน์ ขยับแค่กล่องของตัวเอง
     จึงต้องใส่ที่ช่องข้อความ ไม่ใช่ที่ช่องรูป */
  margin-left: -4px;
}
.gon-cartpage .cart_item .product-name > a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  line-height: 1.3;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
}
.gon-cartpage .cart_item .product-name .variation {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-cartpage .cart_item .product-name .variation dt,
.gon-cartpage .cart_item .product-name .variation dd { margin: 0; font-weight: 400; }
.gon-cartpage .cart_item .product-name .variation dd p { margin: 0; }
.gon-cartpage .cart_item .product-remove {
  grid-area: rm;
  align-self: start;
}
.gon-cartpage .cart_item .product-remove a.remove {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gon-cartpage .cart_item .product-remove a.remove:hover {
  background: transparent;
  color: var(--wp--preset--color--sale);
}
.gon-cartpage .cart_item .product-price {
  grid-area: price;
  text-align: right;
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
}
.gon-cartpage .cart_item .product-quantity { grid-area: qty; display: flex; justify-content: center; }
.gon-cartpage .cart_item .product-subtotal {
  grid-area: subtotal;
  text-align: right;
  font-size: var(--wp--preset--font-size--price);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

/* ---------- ช่องจำนวนพร้อมปุ่มลบบวก ----------
   ปุ่มสองตัวเติมด้วย assets/js/qty.js ตอนหน้าโหลดเสร็จ
   สไตล์เขียนให้ทนกรณีสคริปต์ไม่ทำงานด้วย คือเหลือกล่องกับช่องตัวเลขที่ยังใช้ได้ */
.gon-cartpage .woocommerce-cart-form .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  overflow: hidden;
}
.gon-cartpage .woocommerce-cart-form .quantity .gon-qty__btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--muted);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: var(--gon-transition-color);
}
.gon-cartpage .woocommerce-cart-form .quantity .gon-qty__btn:hover {
  background: var(--gon-hover-tint);
  color: var(--wp--preset--color--primary);
}
.gon-cartpage .woocommerce-cart-form .quantity input.qty {
  width: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
  -moz-appearance: textfield;
}
.gon-cartpage .woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button,
.gon-cartpage .woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* ถ้าสคริปต์ยังไม่ทำงาน ช่องตัวเลขต้องไม่ติดขอบจนอ่านยาก */
.gon-cartpage .woocommerce-cart-form .quantity:not([data-gon-qty]) input.qty { border-left: 0; border-right: 0; width: 72px; }

/* ---------- แถวคูปองและแถวปุ่มจัดการตะกร้า ----------
   ทั้งสองแถวอยู่ใน td.actions เดียวกันตามโครงของ WooCommerce
   จัดตำแหน่งด้วย grid โดยระบุแถวและคอลัมน์ตรงๆ จึงไม่ต้องพึ่งลำดับใน DOM
   ซึ่งสำคัญเพราะ hook `woocommerce_cart_actions` ยิง **หลัง** ปุ่มอัปเดตตะกร้า */
.gon-cartpage .woocommerce-cart-form__contents tbody tr:has(> td.actions) { display: block; }
/* แถวคูปองถูกซ่อน เพราะรหัสส่วนลดย้ายไปอยู่หน้าชำระเงินที่เดียว (วิทย์เคาะ 25 ส.ค. 2026)
   เส้นคั่นที่เคยอยู่ใต้แถวคูปองจึงย้ายมาอยู่ขอบบนของแถวปุ่มแทน */
.gon-cartpage .woocommerce-cart-form__contents td.actions .coupon { display: none; }
.gon-cartpage .woocommerce-cart-form__contents td.actions {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 32px 0 0;
  /* ⚠️ ต้องเขียน border แบบย่อก่อน แล้วค่อยเขียน border-top ทับ
     ถ้าสลับลำดับ ตัวย่อจะล้างเส้นบนที่เพิ่งตั้งไปทิ้งทั้งหมด */
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-cartpage .woocommerce-cart-form__contents td.actions button[name="update_cart"] {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 0;
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  cursor: pointer;
  transition: var(--gon-transition-color);
}
/* WooCommerce ปิดปุ่มนี้ด้วยสคริปต์ของตัวเองจนกว่าจะมีการแก้จำนวน ซึ่งตรงกับดีไซน์อยู่แล้ว */
.gon-cartpage .woocommerce-cart-form__contents td.actions button[name="update_cart"]:disabled {
  background: var(--wp--preset--color--cream-dim);
  color: var(--wp--preset--color--disabled-text);
  cursor: default;
}
.gon-cartpage__note {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  text-align: left;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}
.gon-cartpage__continue {
  grid-column: 2;
  grid-row: 2 / span 2;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 0;
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-cartpage__continue::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- กล่องยอดรวม ---------- */
.gon-cartpage__body .cart-collaterals {
  width: auto;
  margin: 0;
  float: none;
}
.gon-cartpage__body .cart_totals {
  width: auto;
  float: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
  position: sticky;
  top: calc(var(--gon-header-h) + 24px);
}
.gon-cartpage__body .cart_totals h2 {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-cartpage__body .cart_totals table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}
.gon-cartpage__body .cart_totals table tbody { display: flex; flex-direction: column; gap: 12px; }
.gon-cartpage__body .cart_totals table tr {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-cartpage__body .cart_totals table th,
.gon-cartpage__body .cart_totals table td {
  padding: 0;
  border: 0;
  font-weight: 400;
  text-align: right;
}
.gon-cartpage__body .cart_totals table th { text-align: left; color: var(--wp--preset--color--muted); }
.gon-cartpage__body .cart_totals table td { color: var(--wp--preset--color--ink); }
.gon-cartpage__body .cart_totals .cart-discount td { color: var(--wp--preset--color--sale); }
/* แถวรวมทั้งหมดมีเส้นคาดบนและตัวใหญ่กว่าแถวอื่น */
.gon-cartpage__body .cart_totals table tr.order-total {
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-cartpage__body .cart_totals table tr.order-total th {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-cartpage__body .cart_totals table tr.order-total td { font-size: 22px; font-weight: 500; }
.gon-cartpage__body .cart_totals table tr.order-total td .includes_tax { display: none; }
/* ช่องเลือกวิธีจัดส่งกับข้อความปลายทางไม่มีความหมายเพราะค่าส่งราคาเดียวทั้งประเทศ */
.gon-cartpage__body .cart_totals .woocommerce-shipping-methods,
.gon-cartpage__body .cart_totals .woocommerce-shipping-destination,
.gon-cartpage__body .cart_totals .shipping-calculator-button { margin: 0; padding: 0; list-style: none; }
.gon-cartpage__body .cart_totals .woocommerce-shipping-destination,
.gon-cartpage__body .cart_totals .shipping-calculator-button { display: none; }
.gon-cartpage__body .cart_totals .woocommerce-shipping-methods li { margin: 0; }
.gon-cartpage__body .cart_totals .woocommerce-shipping-methods label { color: inherit; }

.gon-cartpage__body .wc-proceed-to-checkout { padding: 0; display: flex; flex-direction: column; gap: 20px; }
.gon-cartpage__body .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 16px 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  transition: var(--gon-transition-color);
}
.gon-cartpage__body .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--wp--preset--color--primary-deep);
  color: var(--wp--preset--color--cream);
}
.gon-cartpage__ship-note {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}

/* ---------- ตะกร้าว่าง ----------
   ตรวจสถานะจากลูก `.cart-empty` ที่ WooCommerce พิมพ์ออกมาเฉพาะตอนไม่มีของ
   `:has()` ทำให้เปลี่ยนโครงทั้งหน้าได้โดยไม่ต้องเขียน PHP เพิ่มสักบรรทัด */
.gon-cartpage:has(.wc-empty-cart-message) { padding-top: 128px; text-align: center; }
.gon-cartpage:has(.wc-empty-cart-message) .gon-cartpage__title { margin-bottom: 32px; }
.gon-cartpage:has(.wc-empty-cart-message) .gon-cartpage__body > .woocommerce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
/* ⚠️ WooCommerce 11 ไม่ได้พิมพ์ `<p class="cart-empty">` แบบรุ่นเก่าแล้ว
   แต่พิมพ์ `<div class="wc-empty-cart-message">` ที่ห่อ notice banner ของบล็อกไว้ข้างใน
   ซึ่งมาพร้อมพื้น เส้นขอบ และไอคอน · ดีไซน์ต้องการแค่ข้อความกลางหน้า จึงปลดทิ้งทั้งชุด
   **การเดาชื่อคลาสจากเอกสารรุ่นเก่าคือสาเหตุที่รอบแรกไม่ทำงาน** ต้องดู HTML จริงเสมอ */
.gon-cartpage .wc-empty-cart-message {
  margin: 0;
  max-width: 520px;
}
.gon-cartpage .wc-empty-cart-message .wc-block-components-notice-banner {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body-l);
  line-height: 1.6;
  justify-content: center;
  min-height: 0;
  align-items: center;
}
.gon-cartpage .wc-empty-cart-message .wc-block-components-notice-banner > svg { display: none; }
.gon-cartpage .wc-empty-cart-message .wc-block-components-notice-banner__content {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: inherit;
}
.gon-cartpage .return-to-shop { margin: 0; }
.gon-cartpage .return-to-shop a.button {
  min-height: 52px;
  padding: 16px 36px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
}
.gon-cartpage .return-to-shop a.button:hover { background: var(--wp--preset--color--primary-deep); }

/* ชิปลัดไปหมวด — โผล่เฉพาะตอนตะกร้าว่าง เพราะเป็นทางออกของหน้าที่ไม่มีอะไรให้ทำต่อ
   ⚠️ ต้องมี `.gon-cartpage` นำหน้า เพราะบล็อกกลุ่มของ WordPress พิมพ์ `display:flex`
   ลงมาเป็น inline style ใน head ซึ่งอยู่ **หลัง** ไฟล์ของธีม การเขียนคลาสเดียวจึงแพ้ */
.gon-cartpage .gon-cartpage__chips { display: none; }
.gon-cartpage:has(.wc-empty-cart-message) .gon-cartpage__chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
  margin-block: 0;
}
.gon-cartpage__chips .gon-chip a,
.gon-cartpage__chips .gon-chip span {
  min-height: 44px;
  padding-inline: 24px;
  font-size: var(--wp--preset--font-size--body-m);
  background: var(--wp--preset--color--card);
}
.gon-cartpage__chips .gon-chip.is-soon {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 24px;
  border: 1px dashed var(--wp--preset--color--line);
  border-radius: var(--gon-radius-pill);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--body-m);
  cursor: default;
}

/* ---------- สินค้าที่คุณน่าจะชอบ ---------- */
.gon-cartpage__suggest {
  margin-top: var(--gon-section-gap);
  padding-bottom: var(--gon-section-gap);
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left;
}
.gon-cartpage:has(.wc-empty-cart-message) .gon-cartpage__suggest {
  padding-top: var(--gon-section-gap);
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-cartpage__suggest h2 { margin: 0; }

/* ---------- หน้าตะกร้าบนมือถือ ----------
   ตารางเลิกเป็นตาราง กลายเป็นการ์ดต่อสินค้าหนึ่งใบ ไม่มีการเลื่อนแนวนอนเลย

   ⚠️ อ่านก่อนแก้ · WooCommerce โหลดไฟล์ `woocommerce-smallscreen.css` เพิ่มอีกใบ
   ที่ **จอแคบกว่า 768** ซึ่งทำสามอย่างที่ขวางดีไซน์นี้ตรงๆ คือ
   ซ่อนรูปย่อของสินค้าทิ้ง · บังคับทุกเซลล์ชิดขวาด้วย `!important` ·
   และเอา `data-title` มาพิมพ์นำหน้าค่าในเซลล์ ทำให้เห็นคำว่า ราคา จำนวน ซ้ำ
   ทั้งสามข้อจึงต้องปลดที่นี่ · **จุดตัดของเราคือ 781 ส่วนของ WooCommerce คือ 768**
   ช่วง 769 ถึง 781 จึงเป็นดีไซน์มือถือของเราโดยที่ไฟล์ของ WooCommerce ยังไม่ทำงาน
   ซึ่งไม่เป็นไร เพราะกฎที่เขียนที่นี่ครอบคลุมทั้งสองช่วงอยู่แล้ว */
@media (max-width: 781px) {
  .gon-cartpage { padding-top: 32px; }
  /* คลาส preset ของ WordPress ใส่ !important มาเอง จึงต้องสู้ด้วย !important */
  .gon-cartpage .gon-cartpage__title {
    margin-bottom: 24px;
    font-size: var(--wp--preset--font-size--heading-l) !important;
  }

  .gon-cartpage__body > .woocommerce { display: flex; flex-direction: column; gap: 32px; }

  /* ปลดของ smallscreen ทั้งสามข้อ */
  .gon-cartpage table.shop_table_responsive tr td::before,
  .gon-cartpage table.shop_table_responsive tbody th::before { content: none !important; display: none !important; }
  .gon-cartpage table.shop_table_responsive tr td { text-align: left !important; background: none !important; }
  .gon-cartpage .woocommerce table.cart .product-thumbnail { display: block; }

  .gon-cartpage .woocommerce-cart-form__contents thead { display: none; }
  .gon-cartpage .woocommerce-cart-form__contents tbody { display: flex; flex-direction: column; gap: 12px; }

  /* การ์ดหนึ่งใบต่อสินค้าหนึ่งชิ้น รูปซ้าย ข้อมูลขวา
     ช่องรูปกินสองแถวเพื่อให้ชื่อกับราคาต่อชิ้นเรียงลงมาในคอลัมน์เดียวกัน */
  .gon-cartpage .woocommerce-cart-form__contents tbody tr.cart_item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty   qty"
      "rm    rm";
    grid-template-rows: auto auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
    background: var(--wp--preset--color--card);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: var(--gon-radius-sm);
  }
  .gon-cartpage .cart_item .product-thumbnail { grid-row: thumb-start / span 2; }
  .gon-cartpage .cart_item .product-thumbnail img { width: 88px; height: 88px; }
  .gon-cartpage .cart_item .product-name { align-self: start; gap: 4px; margin-left: 0; }
  .gon-cartpage .cart_item .product-name .variation { font-size: var(--wp--preset--font-size--caption); }
  /* ราคาต่อชิ้นย้ายมาอยู่ใต้ชื่อ ส่วนยอดรวมของแถวไปอยู่บรรทัดเดียวกับช่องจำนวน */
  .gon-cartpage .cart_item .product-price {
    grid-area: price;
    align-self: start;
    text-align: left !important;
    font-size: var(--wp--preset--font-size--body-s);
    color: var(--wp--preset--color--muted);
  }
  .gon-cartpage .cart_item .product-quantity {
    grid-area: qty;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--wp--preset--color--line);
  }
  .gon-cartpage .cart_item .product-subtotal {
    grid-area: qty;
    justify-self: end;
    align-self: center;
    margin-top: 12px;
    padding-top: 16px;
    text-align: right !important;
  }
  .gon-cartpage .cart_item .product-remove { grid-area: rm; margin-top: 4px; }

  .gon-cartpage .woocommerce-cart-form__contents td.actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 24px;
  }
  .gon-cartpage .woocommerce-cart-form__contents td.actions button[name="update_cart"] { width: 100%; }
  .gon-cartpage__note { margin-top: 8px; }
  .gon-cartpage__continue { justify-self: start; align-self: flex-start; margin-top: 16px; }

  /* กล่องยอดรวมไหลลงมาเต็มความกว้าง และเลิกเกาะขอบบน */
  .gon-cartpage .woocommerce .cart-collaterals { width: 100%; }
  .gon-cartpage .woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    position: static;
    padding: 24px;
  }
  /* ⚠️ WooCommerce smallscreen ซ่อน `tbody th` ทิ้งทั้งหมด ซึ่งในกล่องยอดรวม
     `th` คือ **ป้ายของแถว** เช่น ยอดรวมย่อย และ การจัดส่ง
     ถ้าไม่ปลด กล่องยอดรวมบนมือถือจะเหลือแต่ตัวเลขลอยๆ ไม่มีคำบอกว่าเลขไหนคืออะไร */
  .gon-cartpage .woocommerce .cart-collaterals .cart_totals table th {
    display: block !important;
    text-align: left;
  }
  .gon-cartpage .woocommerce .cart-collaterals .cart_totals table td { text-align: right; }

  .gon-cartpage:has(.wc-empty-cart-message) { padding-top: 64px; }
  .gon-cartpage__chips { gap: 8px; }
  .gon-cartpage__suggest { gap: 24px; }
}

/* ============================================================
   หน้าชำระเงิน — แผ่น 06
   ============================================================

   ⚠️ อ่านก่อนแก้ · หน้านี้เป็นฟอร์มคลาสสิกของ WooCommerce ที่มี **ปลั๊กอินสามตัว**
   ยุ่งกับมันพร้อมกัน คือ Checkout Field Editor ที่กำหนดฟิลด์ทั้งหมด
   Omise ที่ฝังฟอร์มบัตรของตัวเองเข้ามา และปลั๊กอินที่อยู่ไทยที่เปลี่ยนช่องจังหวัด
   เป็น select2 ตอนหน้าเว็บทำงานจริง · สไตล์ที่นี่จึงต้องเผื่อทั้งช่องปกติและ select2
   ============================================================ */

.gon-checkout { padding-top: 64px; padding-bottom: var(--gon-section-gap); }
.gon-checkout__title { margin: 0 0 40px; }

/* ---------- กล่องรหัสส่วนลด ----------
   **วิทย์เคาะ 25 ส.ค. 2026 ให้ย้ายมาอยู่หน้าชำระเงินที่เดียว และอยู่ในคอลัมน์ขวา**
   เพราะลูกค้าที่กดชำระเงินจากแผงตะกร้าย่อยจะข้ามหน้าตะกร้าไปเลย

   ⚠️ **ห้ามย้าย DOM ของฟอร์มนี้เข้าไปใน `#order_review` เด็ดขาด**
   เพราะ `#order_review` อยู่ข้างใน `<form class="checkout">` อยู่แล้ว
   และ HTML **ไม่อนุญาตให้มีฟอร์มซ้อนฟอร์ม** เบราว์เซอร์จะทิ้งแท็ก `<form>` ชั้นใน
   ทำให้ `form.checkout_coupon` หายไป สคริปต์ของ WooCommerce จะผูกไม่ติด
   แล้วปุ่มใช้รหัสจะกลายเป็นปุ่มส่งฟอร์มสั่งซื้อแทน ซึ่งอันตรายมาก

   วิธีที่ใช้จริงคือ **ยก `form.checkout` เป็น `display: contents`**
   ลูกทั้งสองของมันจึงกลายเป็นช่องของกริดเดียวกับกล่องรหัสส่วนลด
   แล้วเราวางตำแหน่งทุกชิ้นด้วย grid-column กับ grid-row ตรงๆ
   ผลคือกล่องรหัสส่วนลด **ย้ายที่ด้วยสายตาโดยที่ DOM ยังอยู่นอกฟอร์มสั่งซื้อเหมือนเดิม** */
.gon-checkout__body > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  /* ⚠️ ต้องกำหนดความสูงของแถวเอง เพราะช่องซ้ายกินสามแถวรวด
     ถ้าปล่อยให้ทุกแถวเป็น auto เบราว์เซอร์จะเฉลี่ยความสูงของช่องซ้ายลงไปในทุกแถว
     แล้วกล่องรหัสส่วนลดกับกล่องสรุปจะถูกดันห่างกันเป็นร้อยพิกเซล
     การให้แถวสุดท้ายเป็น 1fr ทำให้ที่ว่างที่เหลือไปกองอยู่แถวล่างแถวเดียว */
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
  gap: 0 64px;
  align-items: start;
}
/* ⚠️ **ทุกชิ้นที่เป็นช่องของกริดนี้ต้องระบุแถวและคอลัมน์ให้ครบ**
   เพราะ `form.checkout` เป็น `display: contents` ลูกของมันทุกตัวจึงกลายเป็นช่องของกริด
   ชิ้นที่ไม่ได้ระบุจะถูกกริดโยนไปสร้างแถวใหม่ล่างสุดของคอลัมน์ซ้าย
   ซึ่งเคยทำให้หัวข้อ "วิธีชำระเงิน" ไปโผล่ใต้การ์ดหมายเหตุฝั่งซ้ายมาแล้ว
   **เพิ่มของใหม่เข้าคอลัมน์ขวาเมื่อไร ต้องเพิ่มบรรทัดวางตำแหน่งที่นี่ด้วยเสมอ** */
.gon-checkout__body > .woocommerce > .woocommerce-notices-wrapper,
.gon-checkout__body > .woocommerce .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
.gon-checkout form.checkout { display: contents; }
/* คอลัมน์ขวาเรียงห้าชั้น คือ รายการสินค้า · หัวกล่องรหัสส่วนลด · ช่องกรอก · ยอดรวม · วิธีชำระเงิน
   ⚠️ `#order_review` กับ `.gon-sum` ต้องเป็น `display: contents` ทั้งคู่
   ลูกของมันจึงกลายเป็นช่องของกริดเดียวกับกล่องรหัสส่วนลดที่อยู่นอกฟอร์มสั่งซื้อ
   นี่คือกลไกที่ทำให้ช่องรหัสส่วนลดแทรกกลางกล่องสรุปได้โดยไม่ต้องย้าย DOM */
.gon-checkout #customer_details { grid-column: 1; grid-row: 2 / span 7; }
.gon-checkout #order_review,
.gon-checkout .gon-sum { display: contents; }
.gon-checkout .gon-sum__items { grid-column: 2; grid-row: 2; }
.gon-checkout .woocommerce-form-coupon-toggle { grid-column: 2; grid-row: 3; }
.gon-checkout form.checkout_coupon { grid-column: 2; grid-row: 4; }
/* ⚠️ แถวที่ 4 เว้นไว้ให้ข้อความยืนยันตอนใช้รหัสสำเร็จ
   WooCommerce แทรกข้อความนั้นเข้ามาเป็นพี่น้องก่อนฟอร์มคูปองตอนรัน
   **ถ้าไม่จองแถวไว้ มันจะถูกกริดโยนไปอยู่แถวล่างสุดของหน้า** ซึ่งไกลจากช่องกรอกมาก */
.gon-checkout__body > .woocommerce > .woocommerce-message,
.gon-checkout__body > .woocommerce > .woocommerce-error,
.gon-checkout__body > .woocommerce > .woocommerce-info,
.gon-checkout__body > .woocommerce > .wc-block-components-notice-banner { grid-column: 2; grid-row: 5; }
.gon-checkout .gon-sum__totals { grid-column: 2; grid-row: 6; }
.gon-checkout .gon-pay__title { grid-column: 2; grid-row: 7; }
.gon-checkout #payment { grid-column: 2; grid-row: 8; }

/* หัวกล่องกับตัวฟอร์มต่อกันเป็นการ์ดใบเดียว จึงตัดขอบด้านที่ชนกันออก */
/* ⚠️ **เส้นที่ 1 ต้องอยู่ที่กล่องข้างใน ไม่ใช่ที่ตัวชิ้นส่วน**
   เพราะชิ้นส่วนนี้กว้างเต็มการ์ดรวมขอบใน ถ้าวางเส้นไว้ที่ตัวมันเอง
   เส้นจะลากชนขอบซ้ายขวาของการ์ด ซึ่งต่างจากดีไซน์ที่เส้นเว้นระยะ 32
   เท่ากับขอบในของการ์ด เหมือนเส้นที่ 2 ที่อยู่เหนือแถวรวมทั้งหมด */
.gon-checkout .woocommerce-form-coupon-toggle {
  margin: 0;
  padding: 0 32px 10px;
  background: var(--wp--preset--color--cream-soft);
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  border-top: 0;
}
/* ป้ายนี้ลดจากหัวข้อระดับเดียวกับหัวการ์ด มาเป็นป้ายขนาดคำบรรยาย
   น้ำหนักเท่ากับป้ายในกลุ่มยอดรวม ซึ่งตรงกับเนื้อหาข้างในที่มีแค่ช่องกรอกกับปุ่ม */
.gon-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
  align-items: center;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: var(--gon-ls-overline);
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  /* เส้นที่ 1 ของการ์ด · ปิดรายการสินค้าและเปิดโซนตัวเงิน */
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg { display: none; }
.gon-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content { margin: 0; padding: 0; font-size: inherit; line-height: 1.4; }
.gon-checkout .showcoupon { display: none; }
.gon-checkout__body > .woocommerce > .woocommerce-message,
.gon-checkout__body > .woocommerce > .woocommerce-error,
.gon-checkout__body > .woocommerce > .woocommerce-info,
.gon-checkout__body > .woocommerce > .wc-block-components-notice-banner {
  margin: 0;
  padding: 0 32px 24px;
  min-height: 0;
  background: var(--wp--preset--color--cream-soft);
  border: 0;
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}
.gon-checkout__body > .woocommerce > .wc-block-components-notice-banner > svg { display: none; }
.gon-checkout__body > .woocommerce > .wc-block-components-notice-banner .wc-block-components-notice-banner__content { margin: 0; font-size: inherit; }
.gon-checkout__body > .woocommerce > .woocommerce-error { color: var(--wp--preset--color--sale); }
/* ⚠️ **ช่องกรอกต้องเปิดค้างไว้ตลอด** ซึ่งเป็นหัวใจของการกันลูกค้าลืมใช้โค้ด
   WooCommerce ซ่อนฟอร์มนี้ด้วย inline style และสคริปต์ยังสั่ง `.hide()` ซ้ำตอนโหลด
   กับสั่ง `.slideUp()` อีกครั้งหลังใช้รหัสสำเร็จ · **จึงต้องใช้ !important ทั้งสามค่า**
   คือ display, height และ overflow ไม่งั้นฟอร์มจะยุบหายหลังกดใช้รหัสหนึ่งครั้ง */
.gon-checkout form.checkout_coupon {
  display: flex !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0;
  padding: 0 32px 24px;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--wp--preset--color--cream-soft);
  /* ⚠️ WooCommerce ตั้ง `border: 1px` รอบฟอร์มคูปองไว้เอง ต้องล้างบนล่างทิ้ง
     ไม่งั้นจะมีเส้นเพิ่มมาสองเส้นคร่อมช่องกรอก ซึ่งเป็นเส้นที่ REV1 สั่งตัดออก */
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
}
.gon-checkout form.checkout_coupon .form-row { margin: 0; padding: 0; flex: 1 1 auto; width: auto; }
.gon-checkout form.checkout_coupon .form-row-last { flex: 0 0 auto; }
.gon-checkout form.checkout_coupon .clear { display: none; }
/* พื้นช่องกรอกเป็นครีมไม่ใช่ขาว จึงจมลงไปในการ์ดแทนที่จะลอยขึ้นมาแข่งกับปุ่มสั่งซื้อ
   กลับเป็นขาวเฉพาะตอนโฟกัส ซึ่งเป็นจังหวะที่ควรเด่นจริงๆ */
.gon-checkout form.checkout_coupon input#coupon_code {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--raised);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
  transition: border-color var(--gon-dur-fast) var(--gon-ease), background-color var(--gon-dur-fast) var(--gon-ease);
}
.gon-checkout form.checkout_coupon input#coupon_code:focus {
  background: var(--wp--preset--color--card);
  border-color: var(--wp--preset--color--primary);
  outline: none;
}
/* สถานะรหัสผิด สีเตือนอยู่แค่สองที่ คือขอบช่องกรอกกับข้อความใต้ช่อง
   ไม่แตะกลุ่มยอดรวมและไม่แตะขอบการ์ด เพราะยอดยังไม่มีอะไรเปลี่ยน */
.gon-checkout form.checkout_coupon input#coupon_code.has-error { border-color: var(--wp--preset--color--sale); }
.gon-checkout form.checkout_coupon .coupon-error-notice {
  display: block;
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.5;
  color: var(--wp--preset--color--sale);
}
.gon-checkout form.checkout_coupon button[name="apply_coupon"] {
  min-height: 44px;
  padding: 12px 20px;
  white-space: nowrap;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: var(--gon-radius-xs);
  background: transparent;
  color: var(--wp--preset--color--primary-deep);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  cursor: pointer;
  transition: var(--gon-transition-color);
}
.gon-checkout form.checkout_coupon button[name="apply_coupon"]:hover { background: var(--gon-hover-tint); }

/* ---------- โครงสองคอลัมน์ ----------
   ฟอร์มอยู่ซ้าย 1fr กล่องสรุปกับวิธีชำระเงินอยู่ขวา 420 ระยะห่าง 64
   ⚠️ WooCommerce วางหัวข้อ `#order_review_heading` ไว้นอก `#order_review`
   เราซ่อนหัวข้อนั้นแล้วขึ้นหัวข้อใหม่ข้างในกล่องด้วย hook ดู functions.php */
.gon-checkout #customer_details {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* ⚠️ WooCommerce ใส่ `::before` กับ `::after` แบบ `display: table` ไว้กับ `.col2-set`
   ซึ่งเป็นท่าล้าง float สมัยเก่า · **พอกล่องเป็น flex สองอันนั้นกลายเป็นช่องของ flex ทันที**
   แล้ว gap 32 ก็ดันการ์ดใบแรกลงมา 32 ทำให้หัวคอลัมน์ซ้ายไม่ตรงกับหัวคอลัมน์ขวา
   ทั้งที่ตัวคอนเทนเนอร์เริ่มที่ y เดียวกัน · เป็นบั๊กที่วัดตัวคอนเทนเนอร์แล้วไม่เห็น
   ต้องวัดลูกใบแรกถึงจะเจอ */
.gon-checkout #customer_details::before,
.gon-checkout #customer_details::after,
.gon-checkout .col-1::before,
.gon-checkout .col-1::after,
.gon-checkout .col-2::before,
.gon-checkout .col-2::after { display: none; }
.gon-checkout #customer_details .col-1,
.gon-checkout #customer_details .col-2 {
  width: auto;
  float: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gon-checkout #order_review_heading { display: none; }
/* ⚠️ `#order_review` ต้องเป็น `display: contents` เท่านั้น (ตั้งไว้ในบล็อกรหัสส่วนลดด้านบน)
   ห้ามตั้งเป็น flex หรือ grid ที่นี่อีก ไม่งั้นลูกของมันจะเลิกเป็นช่องของกริดคอลัมน์ขวา
   แล้วกล่องรายการสินค้ากับกล่องยอดรวมจะตกไปอยู่คอลัมน์ซ้ายใต้ฟอร์มที่อยู่ */
.gon-checkout wc-order-attribution-inputs { display: none; }

/* ---------- การ์ดของแต่ละกลุ่มฟิลด์ ---------- */
.gon-checkout .woocommerce-billing-fields,
.gon-checkout .woocommerce-shipping-fields .shipping_address,
.gon-checkout .woocommerce-additional-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
}
.gon-checkout .woocommerce-billing-fields > h3,
.gon-checkout .woocommerce-additional-fields > h3,
.gon-checkout .gon-notes__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
/* ช่องติ๊กจัดส่งไปที่อยู่อื่น อยู่นอกกรอบการ์ดตามดีไซน์ */
.gon-checkout .woocommerce-shipping-fields { display: flex; flex-direction: column; gap: 20px; }
.gon-checkout #ship-to-different-address {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
}
.gon-checkout .woocommerce-shipping-fields .shipping_address { margin: 0; }

/* ---------- ช่องกรอก ---------- */
.gon-checkout .woocommerce-billing-fields__field-wrapper,
.gon-checkout .woocommerce-shipping-fields__field-wrapper,
.gon-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* ⚠️ WooCommerce จัดสองคอลัมน์ด้วย float กับ width 47% ซึ่งชนกับกริดของเรา
   ต้องปลดทั้งคู่ก่อน ไม่งั้นช่องชื่อกับนามสกุลจะกว้างแค่ครึ่งเดียวของช่องกริด */
.gon-checkout form.checkout .form-row,
.gon-checkout form.checkout_coupon .form-row {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
}
/* ต้องมี `form.checkout` เหมือนกฎ .form-row ข้างบน ไม่งั้นแพ้ `grid-column: 1 / -1` ของมันเอง */
.gon-checkout form.checkout .form-row.form-row-first { grid-column: 1; }
.gon-checkout form.checkout .form-row.form-row-last { grid-column: 2; }
.gon-checkout form.checkout .form-row > label {
  margin: 0;
  line-height: 1.5;
  font-size: var(--wp--preset--font-size--body-s);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}
.gon-checkout .form-row .required { color: var(--wp--preset--color--muted); text-decoration: none; }
.gon-checkout .form-row .optional { color: var(--wp--preset--color--muted); }
.gon-checkout .woocommerce-input-wrapper { display: block; width: 100%; }
/* ⚠️ `woocommerce-blocktheme.css` ตั้งขนาดตัวอักษรกับระยะในของช่องกรอกไว้ที่
   `.woocommerce-page form .form-row input.input-text` ซึ่งนับได้ 3 คลาส 2 อิลิเมนต์
   selector ของเราจึงต้องมี `form.checkout` เพิ่มเข้ามาถึงจะชนะ */
.gon-checkout form.checkout .form-row input.input-text,
.gon-checkout form.checkout .form-row select,
.gon-checkout form.checkout .form-row textarea.input-text,
.gon-checkout form.checkout .form-row textarea,
.gon-checkout form.checkout_coupon .form-row input.input-text {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
  transition: border-color var(--gon-dur-fast) var(--gon-ease);
}
.gon-checkout form.checkout .form-row textarea { min-height: 100px; resize: vertical; }
.gon-checkout form.checkout .form-row input.input-text:focus,
.gon-checkout form.checkout .form-row select:focus,
.gon-checkout form.checkout .form-row textarea:focus { border-color: var(--wp--preset--color--primary); outline: none; }
.gon-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
.gon-checkout form.checkout .form-row.woocommerce-invalid select { border-color: var(--wp--preset--color--sale); }
/* ปลั๊กอินที่อยู่ไทยเปลี่ยนช่องจังหวัดเป็น select2 ตอนหน้าเว็บทำงาน
   กล่องที่เห็นจริงจึงเป็น div ของ select2 ไม่ใช่ <select> ต้องแต่งคู่กันทั้งสองแบบ */
/* ---------- ช่องเลือกแบบ select2 ----------
   ⚠️ ปลั๊กอินที่อยู่ไทยกับ Checkout Field Editor เปลี่ยน `<select>` เป็น select2 ตอนหน้าเว็บทำงาน
   ของที่เห็นจริงจึงเป็น `<span>` ของ select2 ไม่ใช่ `<select>` **ต้องแต่งทั้งสองแบบ**

   ⚠️ `woocommerce-blocktheme.css` ตั้งระยะในของกล่องข้อความไว้ที่
   `.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered`
   ซึ่งนับได้ **5 คลาส 1 อิลิเมนต์** · selector ที่สั้นกว่านั้นจะแพ้แล้วกล่องข้อความ
   จะสูง 71 ทั้งที่กรอบสูง 44 **ผลคือตัวหนังสือล้นออกมาซ้อนกับกรอบ** ซึ่งเป็นอาการที่วิทย์เจอ */
.gon-checkout .select2-container .select2-selection--single {
  height: 44px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
}
.gon-checkout form.checkout .form-row .select2-container .select2-selection--single .select2-selection__rendered,
.gon-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  height: 42px;
  line-height: 42px;
  padding: 0 40px 0 16px;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
}
.gon-checkout .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--wp--preset--color--muted); }
.gon-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; right: 12px; }
/* ปุ่มกากบาทล้างค่าซ้อนอยู่ตรงลูกศรพอดี และไม่มีประโยชน์กับช่องที่ต้องเลือกอยู่แล้ว */
.gon-checkout .select2-container .select2-selection__clear { display: none; }
.gon-checkout .select2-container--open .select2-selection--single { border-color: var(--wp--preset--color--primary); }

/* ---------- การ์ดใบกำกับภาษี — แผ่น 06 อาร์ตบอร์ด 1B ----------
   ดีไซน์ให้เป็น **การ์ดของตัวเองแยกจากการ์ดที่อยู่** ข้างในมีช่องเลือกว่าต้องการไหม
   แล้วตามด้วยบล็อกพื้นครีมที่มีขอบ ซึ่งรวมสามช่องที่กรอกก็ได้ไม่กรอกก็ได้

   ⚠️ สี่ช่องนี้ส่งต่อ SAP โดยตรง **ห้ามตัด ห้ามเปลี่ยนชื่อฟิลด์ ห้ามยุบรวม**
   การย้ายมาอยู่การ์ดนี้เป็นการย้ายตำแหน่งที่วาดเท่านั้น ดู functions.php */
.gon-checkout .gon-tax {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
}
.gon-checkout .gon-tax__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-checkout .gon-tax__ask { display: block; }

/* บล็อกพื้นครีมของสามช่องที่กรอกก็ได้ไม่กรอกก็ได้
   หมายเลขผู้เสียภาษีเต็มความกว้าง ส่วนชื่อบริษัทกับรหัสสาขาอยู่บรรทัดเดียวกัน */
.gon-checkout .gon-tax__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
}
.gon-checkout .gon-tax__box > .form-row { grid-column: 1 / -1; }
.gon-checkout .gon-tax__box > #billing_company_field { grid-column: 1; }
.gon-checkout .gon-tax__box > #billing_company_branchcode_field { grid-column: 2; }
.gon-checkout .gon-tax__over {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--wp--preset--font-size--overline);
  letter-spacing: var(--gon-ls-overline);
  font-weight: 600;
  color: var(--wp--preset--color--muted);
}
.gon-checkout .gon-tax__hint {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.6;
  color: var(--wp--preset--color--ink);
}

/* ---------- ช่องติ๊กทั้งหน้า ---------- */
.gon-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 2px 0;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}
/* ⚠️ WooCommerce ตั้ง `display:inline` ให้ `.input-checkbox` ซึ่งทำให้ width กับ height
   ไม่มีผลเลย เพราะกล่องแบบ inline ที่ไม่ใช่ replaced element ไม่รับขนาด
   จึงต้องเปลี่ยนเป็น inline-block ก่อน แล้วขนาดที่ตั้งไว้ถึงจะทำงาน */
.gon-checkout form.checkout .woocommerce-form__label-for-checkbox input[type="checkbox"],
.gon-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  cursor: pointer;
}
.gon-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}
.gon-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px 0 0 6px;
  border-right: 2px solid var(--wp--preset--color--cream);
  border-bottom: 2px solid var(--wp--preset--color--cream);
  transform: rotate(40deg);
}
.gon-checkout .woocommerce-form__label-for-checkbox > span { line-height: 1.5; }

/* ---------- กล่องสรุปออเดอร์ ---------- */
/* ---------- การ์ดสรุปออเดอร์ (แผ่น 06 REV1) ----------
   ดีไซน์ให้เป็นการ์ดใบเดียว แต่ DOM แยกเป็นสามชิ้นเพราะช่องรหัสส่วนลด
   ต้องอยู่นอกฟอร์มสั่งซื้อ · ทั้งสามชิ้นจึงใช้พื้นเดียวกันและมีขอบเฉพาะด้านนอก
   ตัดขอบด้านที่ชนกันออกทั้งหมด สายตาจึงเห็นเป็นใบเดียวต่อเนื่อง

   **เหลือเส้นในการ์ดสองเส้นเท่านั้น ตามที่ REV1 เคาะ**
   เส้นที่ 1 เหนือป้ายรหัสส่วนลด ทำหน้าที่ปิดรายการสินค้าและเปิดโซนตัวเงิน
   เส้นที่ 2 เหนือแถวรวมทั้งหมด ทำหน้าที่แยกแถวย่อยออกจากผลลัพธ์
   **เส้นอื่นห้ามเพิ่มกลับเข้ามา** โดยเฉพาะเส้นคั่นระหว่างแถวสินค้า
   เส้นใต้ป้ายรหัสส่วนลด และเส้นเปิดกลุ่มยอดรวม ซึ่งถูกตัดออกเพราะซ้ำหน้าที่กัน */
.gon-sum__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 32px 24px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--line);
  border-bottom: 0;
  border-radius: var(--gon-radius-sm) var(--gon-radius-sm) 0 0;
}
.gon-sum__totals {
  margin-bottom: 32px;
  padding: 0 32px 32px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 0;
  border-radius: 0 0 var(--gon-radius-sm) var(--gon-radius-sm);
}
.gon-sum__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-checkout .gon-sum__table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.gon-checkout .gon-sum__table thead { display: none; }
.gon-checkout .gon-sum__table tbody { display: flex; flex-direction: column; gap: 20px; }
.gon-checkout .gon-sum__table tbody tr.cart_item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
/* ⚠️ **ห้ามใส่เส้นคั่นระหว่างแถวสินค้า** REV1 ตัดออกเพราะตอบไม่ได้ว่ามันแบ่งอะไร
   ที่รูป 72 กับระยะ 20 ไม่ได้แบ่งอยู่แล้ว · ระยะมาจาก gap ของ tbody */
/* ⚠️ ต้องเขียนเป็น `table.gon-sum__table` ไม่ใช่คลาสเปล่า
   เพราะ WooCommerce ตั้งเส้นขอบไว้ที่ `.woocommerce table.shop_table td` ซึ่งนับได้
   2 คลาส 2 อิลิเมนต์ · คลาสเปล่าของเราได้ 2 คลาส 1 อิลิเมนต์ จึงแพ้แล้วเส้นยังอยู่
   อาการที่เห็นคือ **เส้นสั้นๆ โผล่เป็นท่อนๆ ไม่เต็มความกว้าง** เพราะแถวถูกทำเป็น flex
   เส้นขอบบนจึงไปเกาะที่ช่องแต่ละช่องแยกกัน ไม่ใช่เกาะที่แถว */
.gon-checkout table.gon-sum__table,
.gon-checkout table.gon-sum__table tbody,
.gon-checkout table.gon-sum__table tfoot,
.gon-checkout table.gon-sum__table tr,
.gon-checkout table.gon-sum__table td,
.gon-checkout table.gon-sum__table th,
.gon-checkout table.gon-sum__table tbody td,
.gon-checkout table.gon-sum__table tbody th,
.gon-checkout .gon-sum__totals table.gon-sum__table td,
.gon-checkout .gon-sum__totals table.gon-sum__table th {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: inherit;
  vertical-align: top;
}
.gon-checkout table.gon-sum__table td.product-name {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  grid-template-areas:
    "thumb name"
    "thumb var"
    "thumb qty";
  align-items: start;
}
.gon-sum__thumb { grid-area: thumb; display: block; }
.gon-sum__thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-deep);
}
.gon-sum__name {
  grid-area: name;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  line-height: 1.3;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
}
.gon-sum__qty {
  grid-area: qty;
  font-size: var(--wp--preset--font-size--body-s);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}
.gon-checkout .gon-sum__table td.product-name .variation {
  grid-area: var;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-checkout .gon-sum__table td.product-name .variation dt,
.gon-checkout .gon-sum__table td.product-name .variation dd { margin: 0; }
.gon-checkout .gon-sum__table td.product-name .variation dd p { margin: 0; }
.gon-checkout table.gon-sum__table td.product-total {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
}
/* ยอดรวมสามแถวล่าง */
.gon-checkout .gon-sum__totals table.gon-sum__table tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gon-checkout .gon-sum__totals table.gon-sum__table tr {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-checkout .gon-sum__totals table.gon-sum__table th { color: var(--wp--preset--color--muted); text-align: left; }
.gon-checkout .gon-sum__totals table.gon-sum__table td { color: var(--wp--preset--color--ink); text-align: right; }
/* แถวส่วนลดเป็นจุดเดียวในการ์ดที่ไม่ใช่สีหมึก จึงอ่านออกว่าเป็นแถวที่ทำให้ยอดลด
   โดยไม่ต้องเพิ่มไอคอนหรือป้าย · ปุ่มลบออกเป็นลิงก์เล็ก ไม่ใช่ปุ่มมีขอบ
   เพราะปุ่มมีขอบในแถวนี้จะเด่นกว่ายอดรวมทั้งหมด */
.gon-checkout .gon-sum__totals tr.cart-discount td { color: var(--wp--preset--color--sale); }
.gon-checkout .gon-sum__totals .woocommerce-remove-coupon {
  margin-left: 8px;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gon-checkout .gon-sum__totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
/* gap ของกลุ่มคือ 12 บวก margin อีก 12 จึงได้ระยะ 24 เหนือเส้นที่ 2 ตามดีไซน์ */
.gon-checkout .gon-sum__totals table.gon-sum__table tr.order-total {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--line);
  align-items: baseline;
}
.gon-checkout .gon-sum__totals table.gon-sum__table tr.order-total th {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-checkout .gon-sum__totals table.gon-sum__table tr.order-total td {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-checkout .gon-sum__totals tr.order-total td strong { font-weight: inherit; }
.gon-checkout .gon-sum__totals .includes_tax { display: none; }
.gon-checkout .gon-sum__totals tr.gon-sum__shipnote { display: block; margin-top: -6px; }
.gon-checkout .gon-sum__totals tr.gon-sum__shipnote td {
  display: block;
  text-align: left;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}

/* ---------- วิธีชำระเงิน ---------- */
.gon-pay__title {
  margin: 0 0 16px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-checkout #payment { background: none; border-radius: 0; }
.gon-checkout #payment ul.payment_methods {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gon-checkout #payment ul.payment_methods li.wc_payment_method {
  margin: 0;
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
  background: var(--wp--preset--color--card);
  overflow: hidden;
  transition: border-color var(--gon-dur-fast) var(--gon-ease);
}
.gon-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--wp--preset--color--primary);
}
/* ปุ่มวงกลมวาดเอง เพราะ input จริงเป็นพี่น้องของ label ไม่ได้อยู่ข้างใน
   จึงซ่อน input แล้ววาดวงกลมไว้ที่ label แทน */
.gon-checkout #payment ul.payment_methods li input.input-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gon-checkout #payment ul.payment_methods li > label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 16px 24px;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}
.gon-checkout #payment ul.payment_methods li > label::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--gon-radius-pill);
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--card);
}
.gon-checkout #payment ul.payment_methods li:has(input:checked) > label { font-weight: 600; }
.gon-checkout #payment ul.payment_methods li:has(input:checked) > label::before {
  border-color: var(--wp--preset--color--primary);
  box-shadow: inset 0 0 0 4px var(--wp--preset--color--card), inset 0 0 0 10px var(--wp--preset--color--primary);
}
.gon-checkout #payment ul.payment_methods li img { display: none; }
.gon-checkout #payment div.payment_box {
  margin: 0;
  padding: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: var(--wp--preset--color--card);
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
}
.gon-checkout #payment div.payment_box::before { display: none; }

/* ---------- แถวยอมรับเงื่อนไขและปุ่มสั่งซื้อ ---------- */
.gon-checkout #payment .form-row.place-order {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gon-checkout .woocommerce-terms-and-conditions-wrapper { display: flex; flex-direction: column; gap: 12px; }
.gon-checkout .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}
.gon-checkout .woocommerce-terms-and-conditions-checkbox-text a,
.gon-checkout .woocommerce-privacy-policy-link { text-decoration: underline; text-underline-offset: 3px; }
.gon-checkout #place_order {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 16px 36px;
  border: 0;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  cursor: pointer;
  transition: var(--gon-transition-color);
}
.gon-checkout #place_order:hover { background: var(--wp--preset--color--primary-deep); }
.gon-pay__trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-pay__trust p { margin: 0; font-size: var(--wp--preset--font-size--body-s); line-height: 1.6; color: var(--wp--preset--color--ink); }
.gon-pay__trust .gon-pay__help { color: var(--wp--preset--color--muted); }

/* ---------- หน้าชำระเงินบนมือถือ ---------- */
@media (max-width: 781px) {
  .gon-checkout { padding-top: 32px; }
  .gon-checkout .gon-checkout__title {
    margin-bottom: 24px;
    font-size: var(--wp--preset--font-size--heading-l) !important;
  }
  /* คอลัมน์เดียว · `display: contents` ยังอยู่ จึงต้องเรียงลำดับด้วย `order`
     ไม่งั้นกล่องรหัสส่วนลดจะไปโผล่บนสุดก่อนฟอร์มที่อยู่ ซึ่งไม่ใช่ลำดับที่คนกรอกจริง */
  .gon-checkout__body > .woocommerce { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .gon-checkout__body > .woocommerce > .woocommerce-notices-wrapper,
  .gon-checkout__body > .woocommerce .woocommerce-NoticeGroup { order: 0; }
  .gon-checkout #customer_details { order: 1; margin-bottom: 32px; }
  .gon-checkout .gon-sum__items { order: 2; padding: 20px 20px 16px; }
  .gon-checkout .woocommerce-form-coupon-toggle { order: 3; padding: 0 20px 10px; }
  .gon-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { padding-top: 16px; }
  .gon-checkout form.checkout_coupon { order: 4; padding: 0 20px 16px; }
  .gon-checkout__body > .woocommerce > .woocommerce-message,
  .gon-checkout__body > .woocommerce > .woocommerce-error,
  .gon-checkout__body > .woocommerce > .woocommerce-info,
  .gon-checkout__body > .woocommerce > .wc-block-components-notice-banner { order: 5; padding: 0 20px 16px; }
  .gon-checkout .gon-sum__totals { order: 6; padding: 0 20px 20px; }
  .gon-checkout .gon-pay__title { order: 7; }
  .gon-checkout #payment { order: 8; }
  .gon-checkout form.checkout_coupon .form-row,
  .gon-checkout form.checkout_coupon .form-row-last { flex: 1 1 100%; }
  .gon-checkout form.checkout_coupon button[name="apply_coupon"] { width: 100%; }
  .gon-checkout .woocommerce-billing-fields,
  .gon-checkout .woocommerce-shipping-fields .shipping_address,
  .gon-checkout .woocommerce-additional-fields { padding: 20px; }
  .gon-checkout .woocommerce-billing-fields__field-wrapper,
  .gon-checkout .woocommerce-shipping-fields__field-wrapper,
  .gon-checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gon-checkout form.checkout .form-row.form-row-first,
  .gon-checkout form.checkout .form-row.form-row-last { grid-column: 1; }
  .gon-checkout .gon-tax { padding: 20px; }
  .gon-checkout .gon-tax__box { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .gon-checkout .gon-tax__box > #billing_company_field,
  .gon-checkout .gon-tax__box > #billing_company_branchcode_field { grid-column: 1; }
  .gon-checkout table.gon-sum__table td.product-name {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
  }
  .gon-sum__thumb img { width: 56px; height: 56px; }
  .gon-checkout #payment ul.payment_methods li > label { padding: 16px; }
  .gon-checkout #payment div.payment_box { padding: 16px; }
}

/* ============================================================
   หน้าขอบคุณ — แผ่น 07
   ============================================================

   หน้านี้ใช้เทมเพลตบล็อก `order-confirmation` ของ WooCommerce ซึ่งธีมเขียนทับได้
   เราจึงเรียงบล็อกใหม่เองทั้งหน้าใน `templates/order-confirmation.html`
   **ไม่ได้ใส่บล็อกที่อยู่จัดส่งลงไป** เพราะดีไซน์ให้การ์ดที่อยู่ใบเดียว
   ที่อยู่จัดส่งจะโผล่จาก shortcode `[gon_order_extra]` เฉพาะตอนที่ต่างจริงเท่านั้น
   ============================================================ */

.gon-thanks { padding-bottom: 0; }

/* ---------- หัวข้อยืนยัน ---------- */
/* ⚠️ เลย์เอาต์ constrained ของ WordPress ใส่ `margin-left:auto` กับ `margin-right:auto`
   ให้ลูกทุกตัว **พร้อม !important** ผ่าน inline style ใน head
   การเพิ่ม specificity เฉยๆ จึงไม่พอ ต้องใช้ !important สู้กลับที่ระยะขอบสองข้างเท่านั้น
   (วัดแล้วว่า margin-left ถูกคำนวณเป็น 230px คือ auto จริง ไม่ใช่ 0 ที่เราตั้ง) */
.gon-thanks .gon-thanks__hero {
  max-width: 900px;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 96px 0 80px;
}
.gon-thanks .wc-block-order-confirmation-status h1 {
  margin: 0 0 20px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--display-l);
  line-height: 1.08;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-thanks .wc-block-order-confirmation-status p {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-l);
  line-height: 1.6;
  color: var(--wp--preset--color--ink);
}

/* ---------- แถบข้อมูลออเดอร์ห้าช่อง ---------- */
/* ⚠️ กลุ่ม alignfull ที่ซ้อนอยู่ในกลุ่มที่มีระยะขอบรวมอยู่แล้ว จะถูก WordPress
   ตัดระยะขอบของตัวเองทิ้งด้วยกฎ `.has-global-padding :where(.has-global-padding)`
   แถบเต็มความกว้างของเราจึงต้องใส่ระยะขอบเองตรงๆ ไม่งั้นเนื้อหาจะชิดขอบจอ */
.gon-thanks__bar {
  padding: 32px var(--gon-gutter);
  background: var(--wp--preset--color--cream-soft);
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-thanks .wc-block-order-confirmation-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.gon-thanks .wc-block-order-confirmation-summary-list-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ช่องที่สองถึงห้ามีเส้นคั่นซ้ายและเว้นระยะเข้ามา ตามดีไซน์ */
.gon-thanks .wc-block-order-confirmation-summary-list-item + .wc-block-order-confirmation-summary-list-item {
  padding-left: 32px;
  border-left: 1px solid var(--wp--preset--color--line);
}
/* ลำดับที่ WooCommerce ส่งมาคือ เลขที่ วันที่ รวมทั้งหมด อีเมล วิธีจ่าย
   ดีไซน์เอาอีเมลมาก่อนยอดรวม จึงสลับสองช่องกลาง
   ⚠️ ต้องกำหนด order ให้ **ครบทุกช่อง** ไม่ใช่เฉพาะสองช่องที่สลับ
   เพราะช่องที่ไม่ได้กำหนดจะมีค่า 0 แล้วถูกดันไปอยู่หน้าสุดทั้งหมด
   ⚠️ สลับด้วย CSS ไม่ได้สลับใน DOM ลำดับที่โปรแกรมอ่านหน้าจอไล่จึงยังเป็นลำดับเดิม
   ซึ่งยอมรับได้เพราะทั้งห้าช่องเป็นข้อมูลชุดเดียวกันและมีป้ายกำกับครบทุกช่อง */
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(1) { order: 1; }
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(2) { order: 2; }
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(3) { order: 4; }
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(4) { order: 3; }
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(5) { order: 5; }
/* เส้นคั่นต้องอยู่กับช่องที่ **แสดงผล** เป็นช่องที่สองถึงห้า ไม่ใช่ช่องที่สองถึงห้าใน DOM */
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(1) { padding-left: 0; border-left: 0; }
.gon-thanks .wc-block-order-confirmation-summary-list-item__key {
  font-size: var(--wp--preset--font-size--overline);
  letter-spacing: var(--gon-ls-overline);
  font-weight: 600;
  color: var(--wp--preset--color--muted);
}
.gon-thanks .wc-block-order-confirmation-summary-list-item__value {
  font-size: var(--wp--preset--font-size--body-l);
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  user-select: all;
}
.gon-thanks .wc-block-order-confirmation-summary-list-item:nth-child(3) .wc-block-order-confirmation-summary-list-item__value {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* ---------- แถบเขียว จากนี้จะเกิดอะไรขึ้นบ้าง ---------- */
.gon-thanks__steps {
  padding: 96px var(--gon-gutter);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
}
.gon-thanks__steps > * { max-width: none; }
.gon-thanks__stepstitle { margin: 0 0 56px; color: var(--wp--preset--color--cream); line-height: 1.08; }
.gon-thanks__steplist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gon-step { display: flex; flex-direction: column; gap: 12px; }
.gon-step + .gon-step { padding-left: 40px; border-left: 1px solid var(--gon-line-on-inverse); }
.gon-step__num {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  color: var(--wp--preset--color--on-inverse-muted);
}
.gon-step__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--cream);
}
.gon-step__body {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.6;
  color: var(--wp--preset--color--on-inverse-muted);
}
.gon-thanks__help {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--gon-line-on-inverse);
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.6;
  color: var(--wp--preset--color--on-inverse-muted);
}
.gon-thanks__help a { color: var(--wp--preset--color--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- รายละเอียดออเดอร์ กับ การ์ดที่อยู่ ---------- */
.gon-thanks__detail {
  padding: 96px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
}
.gon-thanks__order { display: flex; flex-direction: column; gap: 24px; }
.gon-thanks__ordertitle { margin: 0; line-height: 1.25; color: var(--wp--preset--color--primary); }
/* ⚠️ บล็อกยอดรวมมีคลาส `alignwide` ติดมาจาก WooCommerce ซึ่งทำให้ WordPress
   ใส่ margin ซ้ายขวาเป็น auto ผลคือกล่องหดลงมาเท่าความกว้างเนื้อหาแล้วลอยอยู่กลางคอลัมน์
   ต้องปลด margin นั้นก่อน ตารางถึงจะเต็มคอลัมน์ตามดีไซน์ */
.gon-thanks__order > .wc-block-order-confirmation-totals { width: 100%; margin-inline: 0; max-width: none; }
.gon-thanks .wc-block-order-confirmation-totals__table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}
.gon-thanks .wc-block-order-confirmation-totals__table thead { display: none; }
.gon-thanks .wc-block-order-confirmation-totals__table tbody { display: block; }
.gon-thanks .wc-block-order-confirmation-totals__table tbody tr {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.gon-thanks .wc-block-order-confirmation-totals__table td,
.gon-thanks .wc-block-order-confirmation-totals__table th {
  padding: 0;
  border: 0;
  background: none;
  font-weight: inherit;
  text-align: left;
}
.gon-thanks .wc-block-order-confirmation-totals__table tbody td.wc-block-order-confirmation-totals__product {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
  grid-template-areas:
    "thumb name"
    "thumb qty";
}
.gon-od__thumb { grid-area: thumb; display: block; }
.gon-od__thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-deep);
}
.gon-od__name { grid-area: name; }
.gon-od__name a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  line-height: 1.3;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
}
.gon-thanks .wc-block-order-confirmation-totals__table .product-quantity {
  grid-area: qty;
  font-size: var(--wp--preset--font-size--body-s);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}
.gon-thanks .wc-block-order-confirmation-totals__table td.wc-block-order-confirmation-totals__total {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot { display: block; padding-top: 12px; }
.gon-thanks .wc-block-order-confirmation-totals__table tfoot tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 12px;
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot th {
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--muted);
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot td {
  text-align: right;
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot tr:last-child {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot tr:last-child th {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-thanks .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* การ์ดที่อยู่ ซึ่งรวมข้อมูลใบกำกับภาษีไว้ในใบเดียวกันตามที่เคาะเมื่อ 21 ส.ค. 2026 */
.gon-addr {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-sm);
}
.gon-addr__title { margin: 0; line-height: 1.25; color: var(--wp--preset--color--primary); }
.gon-addr address {
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  font-style: normal;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
}
.gon-addr .woocommerce-customer-details--phone { margin: 8px 0 0; font-size: var(--wp--preset--font-size--body-m); color: var(--wp--preset--color--ink); }
.gon-addr .woocommerce-customer-details--phone::before { display: none; }
.gon-addr__meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--body-m);
}
.gon-addr__meta dt { margin: 0; color: var(--wp--preset--color--muted); }
.gon-addr__meta dd { margin: 0; color: var(--wp--preset--color--ink); }
.gon-addr__ship { padding-top: 24px; border-top: 1px solid var(--wp--preset--color--line); }
.gon-addr__ship h3 {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* ---------- ปุ่มปิดท้าย ---------- */
.gon-thanks__cta { padding-bottom: var(--gon-section-gap); }

/* ---------- หน้าขอบคุณบนมือถือ ---------- */
@media (max-width: 781px) {
  .gon-thanks__hero { padding: 48px 0 40px; }
  .gon-thanks .wc-block-order-confirmation-status h1 { font-size: var(--wp--preset--font-size--display-m); }
  .gon-thanks .wc-block-order-confirmation-summary-list { grid-template-columns: 1fr 1fr; gap: 20px; }
  .gon-thanks .wc-block-order-confirmation-summary-list-item + .wc-block-order-confirmation-summary-list-item {
    padding-left: 0;
    border-left: 0;
  }
  .gon-thanks__steps { padding: 56px var(--gon-gutter); }
  .gon-thanks__stepstitle { margin-bottom: 32px; }
  .gon-thanks__steplist { grid-template-columns: 1fr; gap: 32px; }
  .gon-step + .gon-step { padding-left: 0; padding-top: 32px; border-left: 0; border-top: 1px solid var(--gon-line-on-inverse); }
  .gon-thanks__help { margin-top: 32px; }
  .gon-thanks__detail { padding: 56px 0; grid-template-columns: 1fr; gap: 40px; }
  .gon-addr { padding: 20px; }
  .gon-thanks .wc-block-order-confirmation-totals__table tbody td.wc-block-order-confirmation-totals__product {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
  }
  .gon-od__thumb img { width: 56px; height: 56px; }
}

/* ---------- สถานะยืนยันอีเมลก่อนดูออเดอร์ ----------
   เป็นสถานะที่ WooCommerce สลับมาแสดงเมื่อเปิดลิงก์หลังผ่านไปเกินสิบนาที
   ส่วนที่เหลือของหน้าไม่มีข้อมูลให้แสดง จึงซ่อนทั้งหมดแล้วเหลือแค่ฟอร์ม
   น้ำเสียงของสถานะนี้เป็นโหมดธุรกรรม ไม่ใช่โหมดข่าวดีเหมือนหน้าปกติ */
.gon-thanks:has(.woocommerce-verify-email) .gon-thanks__bar,
.gon-thanks:has(.woocommerce-verify-email) .gon-thanks__steps,
.gon-thanks:has(.woocommerce-verify-email) .gon-thanks__detail,
.gon-thanks:has(.woocommerce-verify-email) .gon-thanks__cta { display: none; }
.gon-thanks:has(.woocommerce-verify-email) .gon-thanks__hero { padding-bottom: var(--gon-section-gap); }
.gon-thanks .wc-block-order-confirmation-status-description { margin-top: 32px; max-width: 520px; }
.gon-thanks .woocommerce-verify-email .form-row {
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gon-thanks .woocommerce-verify-email label {
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-thanks .woocommerce-verify-email input.input-text {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
}
.gon-thanks .woocommerce-verify-email #verify-email-submit {
  min-height: 52px;
  padding: 16px 36px;
  border: 0;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.gon-thanks .woocommerce-verify-email #verify-email-submit:hover { background: var(--wp--preset--color--primary-deep); }

/* ============================================================
   หน้าเนื้อหายาว — นโยบายและคำถามที่พบบ่อย (แผ่น 11)
   ============================================================

   หน้ากลุ่มนี้ **ไม่ได้อยู่ในกลุ่มที่ต้องเป๊ะตามดีไซน์** เกณฑ์คือต้องอ่านได้จริง
   สิ่งที่สำคัญที่สุดคือความกว้างของบรรทัด ซึ่งจำกัดไว้ที่ 760 เพราะเกินกว่านั้น
   สายตาจะหาจุดขึ้นบรรทัดใหม่ไม่เจอ · ก่อนหน้านี้หน้าเหล่านี้ตกไปใช้ index.html
   ซึ่งวาดรายการบทความแทนเนื้อหาของหน้า จึงต้องมี page.html เป็นของตัวเอง
   ============================================================ */

.gon-page { padding-top: 24px; padding-bottom: var(--gon-section-gap); }
.gon-page__crumbs { margin-bottom: 40px; }
.gon-page .gon-page__title {
  max-width: 900px;
  margin: 0 0 40px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.gon-page .gon-page__body {
  max-width: 760px;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.75;
  color: var(--wp--preset--color--ink);
}
.gon-page__body > * + * { margin-top: 20px; }
.gon-page__body h2 {
  margin: 48px 0 12px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-page__body h2:first-child { margin-top: 0; }
.gon-page__body h3 {
  margin: 32px 0 8px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.gon-page__body p { margin: 0 0 16px; }
.gon-page__body ul,
.gon-page__body ol { margin: 0 0 16px; padding-left: 24px; }
.gon-page__body li { margin: 0 0 8px; }
.gon-page__body li > ul,
.gon-page__body li > ol { margin-top: 8px; }
.gon-page__body a { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 3px; }
.gon-page__body strong { font-weight: 600; }
.gon-page__body table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--body-s);
}
.gon-page__body th,
.gon-page__body td {
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}
.gon-page__body th { background: var(--wp--preset--color--cream-soft); font-weight: 600; color: var(--wp--preset--color--primary); }

@media (max-width: 781px) {
  .gon-page { padding-top: 16px; }
  .gon-page__crumbs { margin-bottom: 24px; }
  .gon-page .gon-page__title {
    margin-bottom: 24px !important;
    font-size: var(--wp--preset--font-size--heading-l) !important;
  }
  .gon-page__body h2 { margin-top: 32px; }
}

/* ============================================================
   แผงตะกร้าย่อย — แผ่น 00 อาร์ตบอร์ด F
   ============================================================

   ⚠️ อ่านก่อนแก้ · แถวสินค้าในแผงนี้วาดด้วย Interactivity API จาก template
   ที่อยู่ใน `MiniCartProductsTableBlock.php` ของ WooCommerce **ไม่ใช่ HTML ปกติ**
   จึงดูโครงจากไฟล์นั้น ไม่ใช่จากการ view source ของหน้าเว็บ

   ⚠️ แม่แบบวาง `<img>` ไว้ **สองใบ** คือใบที่มีลิงก์ห่อกับใบที่ไม่มี
   แล้วซ่อนใบที่ไม่ใช้ด้วยแอตทริบิวต์ `hidden` · กฎกัน `[hidden]` อยู่ที่หัวไฟล์
   ============================================================ */

/* ⚠️ WooCommerce วางระยะขอบซ้ายขวาของหัวข้อไว้ที่ `margin` ไม่ใช่ที่ `padding`
   การเขียน `margin: 0` ทับจึงทำให้หัวข้อไหลไปชิดขอบจอจนตัวอักษรตัวแรกโดนตัด
   ระยะ 24 ตรงนี้เท่ากับระยะในของรายการสินค้ากับท้ายแผง เพื่อให้ขอบซ้ายตรงกันทั้งแผง */
/* ⚠️ **ห้ามลืม `mask-image: none`** WooCommerce ตั้งหน้ากากไล่จางไว้ที่หัวข้อ
   `mask-image: linear-gradient(#000 calc(100% - 24px), transparent)` **ซึ่งจางที่ 24 พิกเซลล่างสุดของกล่อง**
   ของเดิมเขาชดเชยด้วย `padding-bottom: 32px` คู่กับ `margin-bottom: -32px`
   ช่วงที่จางจึงตกอยู่ในระยะในที่ว่างเปล่า ไม่โดนตัวอักษร และใช้เป็นเอฟเฟกต์ให้รายการสินค้าเลื่อนลอดใต้หัวข้อแล้วค่อยๆ จาง
   **พอเราเขียน `padding: 0` ทับ ช่วงที่จางเลื่อนขึ้นมาทับตัวอักษรทั้งบรรทัด**
   ผลคือหัวข้อจางลงจากบนลงล่าง ซึ่งมองเหมือนมีฝ้าขาวคลุมอยู่ และเห็นชัดที่สุดบนจอ Retina
   (วิทย์ทัก 25 ส.ค. 2026 · เป็นผลข้างเคียงจากรอบที่แก้ระยะขอบซ้ายของหัวข้อ) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  margin: 24px 24px 8px;
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-m);
  line-height: 1.25;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block {
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}

/* หัวตารางเป็นของโปรแกรมอ่านหน้าจอเท่านั้น ดีไซน์ไม่มีแถวหัวตาราง */
.wc-block-mini-cart__drawer .wc-block-cart-items__header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__items { padding: 0 24px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { padding: 0 24px 24px; }
/* ตารางมี border-spacing ของตัวเองมาแต่เดิม ทำให้รูปเยื้องจากหัวข้อ 2px */
.wc-block-mini-cart__drawer .wc-block-cart-items { border: 0; border-collapse: collapse; border-spacing: 0; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.wc-block-mini-cart__drawer .wc-block-cart-items__row td { border: 0; padding: 0; }
/* ⚠️ ความกว้างของช่องต้องเผื่อระยะขอบขวาด้วย ไม่งั้น `max-width: 100%` ของรูป
   จะบีบรูปให้แคบกว่าที่ตั้งไว้ แล้วรูปจัตุรัสจะกลายเป็นสี่เหลี่ยมผืนผ้า */
.wc-block-mini-cart__drawer .wc-block-cart-item__image { width: 88px; padding-right: 16px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--cream-deep);
}
.wc-block-mini-cart__drawer .wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  line-height: 1.3;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

/* ---------- คำโปรยสินค้า ----------
   **วิทย์เคาะ 25 ส.ค. 2026 ว่าแผงตะกร้าย่อยแสดงแค่ชื่อสินค้ากับตัวเลือกที่ลูกค้าเลือก**
   คำโปรยของสินค้าเป็นข้อความขายที่อ่านไปแล้วตอนอยู่หน้าสินค้า
   การเอามาแปะซ้ำในตะกร้าทำให้แถวยาวจนมองไม่เห็นว่าซื้ออะไรไว้บ้าง
   ส่วนตัวเลือกสีและไซซ์ยังอยู่ เพราะเป็นสิ่งที่ต้องตรวจก่อนจ่ายเงิน */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description { display: none; }
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.wc-block-mini-cart__drawer .wc-block-components-product-details {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.wc-block-mini-cart__drawer .wc-block-components-product-details__name { font-weight: 400; }

.wc-block-mini-cart__drawer .wc-block-cart-item__prices {
  margin: 2px 0 0;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
  font-size: var(--wp--preset--font-size--price);
  color: var(--wp--preset--color--ink);
  text-align: right;
  vertical-align: top;
}

/* ช่องจำนวนหน้าตาเดียวกับหน้าตะกร้า เพื่อให้เป็นของชิ้นเดียวกันทั้งเว็บ */
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity { margin-top: 12px; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  overflow: hidden;
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after { display: none; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--muted);
  font-family: inherit;
  font-size: 18px;
  opacity: 1;
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover {
  background: var(--gon-hover-tint);
  color: var(--wp--preset--color--primary);
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
  width: 44px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--wp--preset--color--line);
  border-right: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--muted);
  cursor: pointer;
  text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--sale); }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; }

/* ---------- ท้ายแผง ---------- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
  padding: 20px 0 0;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--body-m);
}
.wc-block-mini-cart__drawer .wc-block-components-totals-item__label {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.wc-block-mini-cart__drawer .wc-block-components-totals-item__value {
  font-size: 22px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}
.wc-block-mini-cart__drawer .wc-block-components-totals-item__description {
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--muted);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions { gap: 12px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
  min-height: 52px;
  border-radius: var(--gon-radius-xs);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
  border: 1px solid var(--wp--preset--color--primary);
  background: transparent;
  color: var(--wp--preset--color--primary);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
  border: 0;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover { background: var(--wp--preset--color--primary-deep); }

/* คำอธิบายใต้ช่องกรอก เช่น บรรทัดใต้ช่องอีเมล */
.gon-checkout form.checkout .form-row .description {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
}
.gon-checkout form.checkout .form-row .description::before { display: none; }

/* ---------- ป้าย "เรียงตาม" หน้ากล่องเลือกการเรียง ----------
   ดีไซน์หน้าหมวดมีคำนี้อยู่หน้ากล่อง ของ WooCommerce มีแต่ป้ายสำหรับโปรแกรมอ่านหน้าจอ */
.gon-filter__sortlabel {
  margin-right: 8px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}
.gon-filter__sort form { display: flex; align-items: center; }

/* ภาพจริงของ GON Sauce แทนที่ข้อความโจทย์ถ่ายภาพที่เคยหลุดขึ้นหน้าเว็บ */
.gon-sauce__img { margin: 0; height: 100%; }
.gon-sauce__img img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }


/* ============================================================
   แผงตัวเลือกของ select2
   ============================================================
   ⚠️ **แผงนี้ถูกวาดไว้ท้าย `<body>` ไม่ได้อยู่ในหน้าที่กดเปิดมัน**
   กฎที่ผูกกับ `.gon-checkout` จึงไปไม่ถึง และแผงจะใช้หน้าตามาตรฐานของ select2
   คือแถบเลือกสีฟ้าซึ่งไม่ใช่สีของเว็บนี้เลย · กฎชุดนี้จึงต้องไม่ผูกกับหน้าไหน
   ============================================================ */
.select2-dropdown {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  box-shadow: 0 8px 24px rgba(27, 58, 33, .10);
  font-family: var(--wp--preset--font-family--sans);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--raised);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  color: var(--wp--preset--color--ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--card);
  outline: none;
}
.select2-results__options { max-height: 280px; }
/* ⚠️ `woocommerce-blocktheme.css` ตั้งระยะในของตัวเลือกไว้ที่
   `.woocommerce-page .select2-container .select2-results__option` ซึ่งนับได้ 3 คลาส
   ถ้าเขียนสั้นกว่านั้นจะแพ้ แล้วข้อความในแผงจะเยื้องจากข้อความในกรอบที่ปิดอยู่ 1.6px
   ซึ่งเห็นได้ชัดตอนกดเปิดเพราะตัวอักษรจะขยับ */
.woocommerce-page .select2-container .select2-results__option,
.select2-container--default .select2-results__option {
  padding: 10px 16px;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}

/* ช่องค้นหาในแผงมีประโยชน์เฉพาะรายการยาวอย่างจังหวัด 77 จังหวัด
   รายการสั้นอย่างช่องใบกำกับภาษีที่มีสองตัวเลือก การมีช่องค้นหาคือขั้นตอนส่วนเกิน
   `:has()` ตรวจว่าลูกตัวสุดท้ายอยู่ใน 8 ตัวแรกหรือไม่ ซึ่งแปลว่ามีตัวเลือกไม่เกิน 8 */
.select2-dropdown:has(.select2-results__options > *:nth-child(-n+8):last-child) .select2-search--dropdown { display: none; }
/* แถบที่เมาส์ชี้อยู่ ใช้สีเขียวจางของเว็บแทนสีฟ้ามาตรฐานของ select2 */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--gon-hover-tint);
  color: var(--wp--preset--color--ink);
}
/* ตัวที่เลือกอยู่ตอนนี้ */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--wp--preset--color--cream-soft);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.select2-container--default .select2-results__message { padding: 10px 16px; color: var(--wp--preset--color--muted); }

/* ---------- แผงคำแนะนำที่อยู่ไทยของปลั๊กอิน WPDT ----------
   ⚠️ **แผงนี้ถูกวาดไว้ท้าย `<body>` ไม่ได้อยู่ในฟอร์ม** เหมือนแผงของ select2
   กฎที่ผูกกับคลาสของหน้าจึงไปไม่ถึง ต้องเขียนแบบไม่ผูกกับหน้าไหน (กับดักข้อ 71 ใน SPEC)

   ปลั๊กอินแถมธีมสำเร็จรูปของ jQuery UI 1.9.2 มาทั้งชุด ซึ่งกำหนด **ฟอนต์ Arial ที่ไม่มีตัวไทย**
   ทำให้ตัวหนังสือไทยในแผงหน้าตาคนละแบบกับทุกช่องในฟอร์ม · ระยะในของรายการ 5/10
   ซึ่งเยื้องจากข้อความในช่องกรอก 6 พิกเซล · และตอนเอาเมาส์ชี้ ธีมเก่าใส่ขอบ 1 พิกเซล
   แล้วชดเชยด้วย `margin: -1px` **ทำให้รายการขยับตอนเลื่อนเมาส์ผ่าน**

   ห้ามแก้ในโฟลเดอร์ปลั๊กอิน เพราะงานจะหายตอนปลั๊กอินอัปเดตเวอร์ชัน
   ค่าทั้งหมดตรงกับแผงของ select2 ข้างบน เพราะช่องแขวงกับช่องจังหวัดอยู่ติดกันในฟอร์มเดียวกัน */
ul.ui-autocomplete.ui-menu {
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--card);
  box-shadow: 0 8px 24px rgba(27, 58, 33, .10);
  font-family: var(--wp--preset--font-family--sans);
  max-height: 280px;
  overflow: hidden auto;
}
/* 4 คลาส เพื่อให้ชนะ `.ui-menu .ui-menu-item .ui-menu-item-wrapper` ของธีมเก่าซึ่งนับได้ 3 */
.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper,
.ui-autocomplete.ui-menu .ui-menu-item a {
  margin: 0;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}
/* แถบที่เมาส์ชี้อยู่ · `margin: 0` คือตัวกันไม่ให้รายการขยับ 1 พิกเซลตอนชี้ */
.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-focus {
  margin: 0;
  border: 0;
  background: var(--gon-hover-tint);
  color: var(--wp--preset--color--ink);
}

/* กรอบโฟกัสของปุ่มปิดแผงตะกร้าย่อย
   ⚠️ WooCommerce ยัดพื้นที่กดของปุ่มด้วย `padding: 1em !important` คู่กับ `margin: -1em`
   กล่องจริงของปุ่มจึงกว้างกว่าไอคอนข้างละ 16 พิกเซล **กรอบโฟกัสมาตรฐานของเบราว์เซอร์
   จึงวาดเลยขอบแผงออกไปแล้วโดนตัดขาดตรงมุมขวาบน** และเป็นสีฟ้าซึ่งไม่ใช่สีของเว็บ
   (วิทย์ทักจากภาพหน้าจอ 25 ส.ค. 2026)
   ห้ามซ่อนกรอบทิ้งเฉยๆ เพราะคนที่ใช้คีย์บอร์ดจะไม่รู้ว่าตอนนี้อยู่ที่ปุ่มไหน
   ใช้ระยะติดลบดึงกรอบเข้ามาล้อมเฉพาะไอคอนแทน */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: -14px;
  border-radius: var(--gon-radius-xs);
  opacity: 1;
}
/* ⚠️ WooCommerce ย้ายเคอร์เซอร์ไปที่กล่องเนื้อหาของแผงตอนเปิด โดยกล่องนั้นตั้ง `tabindex="-1"` ไว้
   เบราว์เซอร์จึงวาดกรอบโฟกัสสีฟ้ารอบกล่องทั้งใบ ซึ่งกว้างเท่าแผงและถูกตัดขาดตรงขอบ
   กล่องพวกนี้**ไม่ได้อยู่ในลำดับการกด Tab** เป็นแค่จุดพักเคอร์เซอร์ จึงไม่ต้องมีกรอบให้เห็น
   ส่วนปุ่มปิดซึ่งกดด้วย Tab ได้จริงยังมีกรอบเขียวของเราตามกฎข้างบน */
.wc-block-mini-cart__drawer [tabindex="-1"]:focus,
.wc-block-mini-cart__drawer [tabindex="-1"]:focus-visible,
.wc-block-components-drawer:focus,
.wc-block-components-drawer:focus-visible,
.wc-block-components-drawer__screen-overlay:focus,
.wc-block-mini-cart__template-part:focus { outline: none; }

/* ---------- เมนูมือถือเต็มจอ · อาร์ตบอร์ด D ----------
   เขียน 26 ส.ค. 2026 · ก่อนหน้านี้แผงที่เปิดออกมาไม่มี CSS เลยสักบรรทัด
   จึงเป็นหน้าตามาตรฐานของ WordPress ล้วน ไม่ตรงดีไซน์

   ค่าที่ยึดมาจาก design-exports/00-shell "D · เมนูเต็มจอ · 390 × 720"
   แถวหัว 64px · ช่องค้นหาสูง 48px ห่างจากหัว 12px · รายการเมนูสูง 56px
   เว้นจากช่องค้นหา 28px · ทุกแถวมีเส้นคั่นล่าง 1px

   กลไกเปิดปิดยังเป็นของบล็อก core/navigation ทั้งหมด ไม่มี JavaScript เพิ่ม
   ตามกติกาในแผ่นสั่งงาน 00 Shell หัวข้อ 3 ส่วน D                          */
@media (max-width: 781px) {

  .gon-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 0 16px;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--ink);
  }

  /* กล่องในสุดของบล็อก จัดเป็นคอลัมน์เดียวเต็มความกว้าง */
  .gon-nav .is-menu-open .wp-block-navigation__responsive-close {
    max-width: none;
    width: 100%;
  }

  .gon-nav .is-menu-open .wp-block-navigation__responsive-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* แถวหัวเรื่อง คำว่า เมนู เป็น serif 22px สีเขียวแบรนด์ ตามอาร์ตบอร์ด
     ใช้ pseudo-element เพราะบล็อกไม่มีที่ให้ใส่หัวข้อ และการเติม HTML
     เข้าไปในเมนูจะไปโผล่บนจอคอมด้วย */
  .gon-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
    content: "เมนู";
    display: flex;
    align-items: center;
    height: 64px;
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--heading-m);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary);
  }

  /* ปุ่มปิดวางทับมุมขวาของแถวหัว พื้นที่กด 44 และเลื่อนออกนอก 10px
     ให้ตัวกากบาทตรงแนวขอบเดียวกับปุ่มเปิดเมนูบน header */
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 10px;
    right: -10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--wp--preset--color--ink);
  }
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 22px;
    height: 22px;
  }

  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    display: block;
    width: 100%;
  }

  /* รายการเมนู แถวละ 56px มีเส้นคั่นล่าง ตัวอักษร 17px */
  .gon-nav .is-menu-open .wp-block-navigation__container {
    display: block;
    width: 100%;
    gap: 0;
    margin-top: 28px;
  }

  .gon-nav .is-menu-open .wp-block-navigation-item {
    display: block;
    width: 100%;
  }

  .gon-nav .is-menu-open .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    min-height: 56px;
    width: 100%;
    padding: 0;
    font-size: var(--wp--preset--font-size--body-l);
    color: var(--wp--preset--color--ink);
    border-bottom: 1px solid var(--wp--preset--color--line);
  }

  /* เมนูย่อย Dad Cap เยื้องเข้าไปหนึ่งขั้นและตัวเล็กลงหนึ่งระดับ
     อาร์ตบอร์ดไม่มีเมนูย่อย แต่ของจริงมี Dad Cap ซึ่งเป็นดรอปที่กำลัง launch
     จึงคงไว้แล้วจัดให้อ่านเป็นลำดับชั้นแทนการตัดทิ้ง */
  .gon-nav .is-menu-open .wp-block-navigation__submenu-container {
    position: static;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }
  .gon-nav .is-menu-open .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    padding-left: 20px;
    font-size: var(--wp--preset--font-size--body-m);
    color: var(--wp--preset--color--muted);
  }

  /* Special Collaboration (Soon) กดไม่ได้ ใช้สีจางเหมือนบนจอคอม */
  .gon-nav .is-menu-open .gon-nav-soon .wp-block-navigation-item__content {
    color: var(--wp--preset--color--disabled-text);
  }
}

/* ---------- ช่องค้นหาและลิงก์บัญชีที่อยู่ในเมนูเต็มจอ ----------
   ทั้งสองชิ้นถูกใส่ไว้ในเมนู `wp_navigation` เพราะบล็อก navigation
   ดึงเนื้อในของแผงเต็มจอมาจากเมนูอย่างเดียว วางไว้ที่อื่นไม่เข้าไปในแผง
   ผลข้างเคียงคือมันจะโผล่บนแถบ header ของจอคอมด้วย จึงต้องซ่อนทิ้ง
   ตามอาร์ตบอร์ด B ซึ่งจอคอมมีช่องค้นหาของตัวเองอยู่แล้วบนแถบ            */
@media (min-width: 782px) {
  .gon-nav .gon-nav__search,
  .gon-nav .gon-nav__account { display: none; }
}

@media (max-width: 781px) {
  /* ช่องค้นหาในแผง สูง 48 เต็มความกว้าง ห่างจากแถวหัว 12px ตามอาร์ตบอร์ด D */
  .gon-nav .is-menu-open .gon-nav__search { width: 100%; margin: 12px 0 0; }

  .gon-nav .is-menu-open .gon-nav__search .wc-block-product-search__fields {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: var(--gon-radius-xs);
    background: var(--wp--preset--color--raised);
  }
  .gon-nav .is-menu-open .gon-nav__search .wc-block-product-search__field {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    height: 100%;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--body-m);
    color: var(--wp--preset--color--ink);
  }
  .gon-nav .is-menu-open .gon-nav__search .wc-block-product-search__field::placeholder {
    color: var(--wp--preset--color--muted);
  }
  .gon-nav .is-menu-open .gon-nav__search .wc-block-product-search__button {
    order: -1;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    min-height: 0;
    color: var(--wp--preset--color--muted);
  }
  /* ต้องสั่ง fill กับ stroke ที่ CSS เหมือนช่องค้นหาบนแถบ ไม่งั้นแว่นขยายถูกถมทึบ */
  .gon-nav .is-menu-open .gon-nav__search .wc-block-product-search__button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
  }
  .gon-nav .is-menu-open .gon-nav__search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---------- คุมกล่องภายในแผงเมนูเต็มจอ ----------
   บล็อก navigation ตั้ง padding และ max-width ของตัวเองไว้หลายชั้น
   ซึ่งทำให้เนื้อหาล้นออกนอกขอบขวาและดันช่องค้นหาลงต่ำกว่าอาร์ตบอร์ด
   จึงต้องรีเซ็ตทีละชั้นให้เหลือคอลัมน์เดียวกว้างเท่ากล่องเนื้อหาจริง 358px */
@media (max-width: 781px) {
  .gon-nav .is-menu-open,
  .gon-nav .is-menu-open *,
  .gon-nav .is-menu-open *::before {
    box-sizing: border-box;
  }

  .gon-nav .is-menu-open .wp-block-navigation__responsive-close,
  .gon-nav .is-menu-open .wp-block-navigation__responsive-dialog,
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-content,
  .gon-nav .is-menu-open .wp-block-navigation__container,
  .gon-nav .is-menu-open .gon-nav__search,
  .gon-nav .is-menu-open .gon-nav__search form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin-inline: 0;
  }

  /* ปุ่มปิดกลับมาอยู่ในกรอบที่มองเห็น และย้ำสีเส้นของไอคอน
     เพราะบล็อกวาด svg ด้วย fill ไม่ใช่ stroke */
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    right: 0;
    margin-right: -10px;
    color: var(--wp--preset--color--ink);
  }
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
    fill: currentColor;
  }

  /* ระยะตามอาร์ตบอร์ด คือช่องค้นหาห่างจากแถวหัว 12px
     และรายการเมนูห่างจากช่องค้นหา 28px */
  .gon-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    margin-top: 12px;
  }
  .gon-nav .is-menu-open .gon-nav__search { margin-top: 0; }
  .gon-nav .is-menu-open .wp-block-navigation__container { margin-top: 28px; }
}

/* ---------- แก้ระยะบนของกล่องเนื้อหาในแผงเมนู ----------
   บล็อก navigation ตั้ง padding-top 56px ให้ `responsive-container-content`
   เพื่อเว้นที่ให้ปุ่มปิดที่ลอยอยู่ ซึ่งของเราไม่ต้องการเพราะจัดแถวหัวเอง
   ต้องเขียนตัวเลือกให้มีสี่คลาสเพื่อชนะกฎของบล็อกที่มีสามคลาส
   ใช้น้ำหนักแทน !important เพราะบล็อกพิมพ์ CSS ทีหลังกว่าธีมเสมอ

   ผลที่ได้ตรงอาร์ตบอร์ด D คือแถวหัว 64 แล้วช่องค้นหาเริ่มที่ 76        */
@media (max-width: 781px) {
  .gon-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 0;
    margin-top: 12px;
  }

  /* เมนูย่อยให้เต็มความกว้างเท่าแถวอื่น เส้นคั่นจะได้ยาวเสมอกัน */
  .gon-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }
  .gon-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
  }
}

/* เมนูย่อยในแผงเต็มจอ ต้องกว้างเท่าแถวอื่นเพื่อให้เส้นคั่นยาวเสมอกัน
   บล็อกตั้ง min-width 200px กับ width max-content ไว้ในไฟล์ CSS ของตัวเอง
   ซึ่งอยู่นอก inline style จึงชนด้วยน้ำหนักตัวเลือกไม่ไหว ต้องใช้ !important
   เฉพาะสามคุณสมบัติที่เกี่ยวกับความกว้างเท่านั้น ไม่เหวี่ยงทั้งบล็อก */
@media (max-width: 781px) {
  .gon-nav .is-menu-open .wp-block-navigation__submenu-container,
  .gon-nav .is-menu-open .wp-block-navigation__submenu-container > li,
  .gon-nav .is-menu-open .wp-block-navigation__submenu-container > li > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- กล่อง QR พร้อมเพย์บนหน้าขอบคุณ ----------
   โครง HTML ทั้งหมดมาจากปลั๊กอิน Omise จัดสไตล์ได้อย่างเดียว ย้ายชิ้นส่วนไม่ได้
   เขียน 26 ส.ค. 2026 วัน launch หลังเพิ่มบล็อกที่ยิง hook เก่าเข้าแม่แบบ
   ก่อนหน้านี้กล่องนี้ไม่เคยแสดงเลย จึงไม่เคยมีสไตล์                          */
.gon-thanks__payinfo { padding-block: 48px; }

.omise-promptpay-details {
  max-width: 460px;
  margin-inline: auto;
  padding: 32px 24px;
  text-align: center;
  background: var(--wp--preset--color--raised);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--gon-radius-xs);
}

/* หัวข้อ สแกน QR เพื่อชำระเงิน ใช้ serif เขียวเหมือนหัวข้ออื่นของหน้า */
.omise-promptpay-details > p:first-child strong {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

/* ตัว QR ที่ Omise ฝังมาเป็น svg สัดส่วน 740 ต่อ 1050 จึงคุมด้วยความกว้าง */
.omise-promptpay-qrcode { margin: 20px auto 0; max-width: 300px; }
.omise-promptpay-qrcode svg,
.omise-promptpay-qrcode img { width: 100%; height: auto; display: block; }

/* ปุ่มดาวน์โหลดใช้หน้าตาเดียวกับปุ่มหลักของธีม */
a.omise-download-promptpay-qr {
  margin: 20px auto 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--gon-radius-xs);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  letter-spacing: var(--gon-ls-label);
  line-height: 1.2;
  text-decoration: none;
  transition: var(--gon-transition-color);
}
a.omise-download-promptpay-qr:hover { background: var(--wp--preset--color--primary-deep); }

/* บรรทัดนับถอยหลัง ตัวเลขเน้นเพราะเป็นข้อมูลที่ลูกค้าต้องเห็นชัด */
.omise-promptpay-details #countdown {
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}
.omise-promptpay-details > div:not(.omise-promptpay-qrcode):not(.qr-alert-box) {
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--muted);
}

/* กล่องวิธีชำระเงิน แยกด้วยเส้นคั่นและจัดชิดซ้ายเพราะเป็นขั้นตอนที่ต้องอ่านตามลำดับ */
.omise-promptpay-details .qr-alert-box {
  margin-top: 24px;
  padding: 20px 0 0;
  /* ปลั๊กอินใส่เส้นขอบครบสี่ด้านมาเอง ซึ่งซ้อนกับการ์ดชั้นนอกจนดูเป็นกล่องในกล่อง
     จึงล้างทิ้งแล้วเหลือเฉพาะเส้นคั่นบนเพื่อแบ่งส่วน */
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.omise-promptpay-details .qr-alert-box p strong {
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}
.omise-promptpay-details .qr-alert-box ol {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: var(--wp--preset--font-size--body-m);
  line-height: 1.6;
  color: var(--wp--preset--color--ink);
}
.omise-promptpay-details .qr-alert-box ol li + li { margin-top: 8px; }

/* ปุ่มตรวจสถานะใช้แบบรอง เพราะเป็นทางเลือกไม่ใช่ทางหลัก */
#omise-offline-payment-refresh-status {
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: var(--gon-radius-xs);
  background: transparent;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-m);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 781px) {
  .gon-thanks__payinfo { padding-block: 32px; }
  .omise-promptpay-details { padding: 24px 16px; max-width: 100%; }
  .omise-promptpay-qrcode { max-width: 260px; }
}

/* ---------- ซ่อนช่องประเทศบนหน้าชำระเงิน ----------
   เขียน 26 ส.ค. 2026 หลังเจอว่าออเดอร์ทุกใบไม่มีค่าประเทศ
   ทำให้ WooCommerce แปลรหัสจังหวัด TH-10 เป็นชื่อจังหวัดไม่ได้ แล้วพิมพ์รหัสดิบให้ลูกค้าเห็น

   ต้นเหตุคือช่องประเทศถูกปิดไว้ในปลั๊กอินแก้ฟอร์ม · เปิดกลับแล้วและตั้งให้ร้าน
   ขายเฉพาะไทย แต่ปลั๊กอินวาดช่องนี้เป็น dropdown เองไม่ได้ใช้ท่ามาตรฐาน
   ของ WooCommerce ที่จะซ่อนให้เมื่อมีประเทศเดียว จึงต้องซ่อนที่หน้าจอเอง

   ⚠️ ห้ามถอด select ออกจากหน้า เพราะช่องจังหวัดใช้มันเป็นตัวอ้างอิง
   ในการเปลี่ยนรายการจังหวัด ถ้าถอดออกช่องจังหวัดจะว่าง                       */
#billing_country_field,
#shipping_country_field { display: none !important; }