/* ============================================================
   irobot-th-2026 — assets/css/design-system.css
   ------------------------------------------------------------
   🔴 ห้ามแก้ "ส่วนที่คัดลอกมา" ในไฟล์นี้

   ที่มา (source of truth):
     /irobot-web/design-system.css
   ไฟล์นี้ = สำเนาแบบไม่ดัดแปลง (verbatim) ของไฟล์ต้นทาง
   ต้องการแก้ token/คอมโพเนนต์ร่วม → แก้ที่ต้นทางก่อน แล้ว copy ทับใหม่

   โครงไฟล์นี้มี 2 ส่วน:
     [A] สำเนาต้นทาง — ตั้งแต่บรรทัดถัดจากคอมเมนต์นี้ ถึงเส้นคั่น "END OF VERBATIM COPY"
     [B] THEME SHARED LAYER — ชั้นเสริมของธีม (คอมโพเนนต์ที่ใช้ซ้ำข้ามหน้า
         + สะพานเชื่อม markup ของ WooCommerce) อยู่ *ใต้* เส้นคั่นเท่านั้น

   วิธี re-sync: แทนที่ทุกบรรทัด "เหนือ" เส้นคั่นด้วยไฟล์ต้นทางฉบับใหม่
   (คอมเมนต์หัวไฟล์นี้ + ชั้น [B] คงไว้เหมือนเดิม)

   กฎที่ยังบังคับ: ห้าม hard-code สี/ฟอนต์ในธีม ใช้ token จากไฟล์นี้เท่านั้น
   ============================================================ */

/* ============================================================
   iRobot Thailand — Design System
   ------------------------------------------------------------
   ที่มา: แยกจาก style-guide.html (v1.0, อนุมัติแล้ว)
   ชื่อ token ตรงกับ CSS variables ของ irobot.com (HQ) เป๊ะ ๆ
   ตรวจทานกับ iRobot Brand Guidelines 2026 ครบทุกค่า

   ไฟล์นี้ = แหล่งความจริงเดียว (single source of truth) สำหรับ
   ทุกหน้าในเว็บ (home / plp / pdp / ฯลฯ) — import ด้วย:
   <link rel="stylesheet" href="../design-system.css">

   มีเฉพาะ: design tokens, base styles, และคอมโพเนนต์ที่ใช้ร่วมกัน
   ทุกหน้าจริง (header/nav/search, announcement bar, buttons, flags,
   text link, product tile, footer) — ไม่มี CSS ที่ใช้เฉพาะหน้า
   style guide (เช่น .sw-grid, .type-row, .check-card, .btn-board)
   ============================================================ */

/* ------------------------------------------------------------
   1) Design tokens
   ------------------------------------------------------------ */
:root {
  /* General usage — greens */
  --brand-color-hunter-rgb: 27, 66, 41;             /* #1B4229 · Pantone 349U */
  --brand-color-jade-rgb: 81, 138, 112;             /* #518A70 · Pantone 3415U */
  --brand-color-sage-rgb: 135, 162, 142;            /* #87A28E · Pantone 556U */
  --brand-color-mint-rgb: 220, 233, 213;            /* #DCE9D5 · Pantone 7485U */
  --brand-color-clover-rgb: 0, 167, 122;            /* #00A77A · Pantone 2251U */
  /* Backgrounds only */
  --brand-color-sand-rgb: 245, 240, 237;            /* #F5F0ED · Pantone 9080U */
  --brand-color-mushroom-rgb: 222, 209, 199;        /* #DED1C7 · Pantone 9081U */
  --brand-color-background-hunter-rgb: 16, 40, 24;  /* #102818 · footer */
  /* Copy colors */
  --brand-color-navy-rgb: 60, 68, 83;               /* #3C4453 · Pantone 2378U */
  --brand-color-black-rgb: 30, 30, 30;              /* #1E1E1E · Pantone Black 6U */
  --brand-color-gray-rgb: 118, 118, 118;            /* #767676 · Cool Gray 9U */
  /* Web/app accents */
  --brand-color-irb-green-rgb: 108, 184, 106;       /* #6CB86A · โลโก้ · Pantone 360U */
  --brand-color-marigold-rgb: 235, 193, 114;        /* #EBC172 · flag เท่านั้น */
  --brand-color-periwinkle-rgb: 110, 137, 248;      /* #6E89F8 · flag เท่านั้น */
  --brand-color-border-rgb: 159, 156, 147;          /* #9F9C93 */
  --brand-color-white-rgb: 255, 255, 255;

  --brand-color-hunter: rgb(var(--brand-color-hunter-rgb));
  --brand-color-jade: rgb(var(--brand-color-jade-rgb));
  --brand-color-sage: rgb(var(--brand-color-sage-rgb));
  --brand-color-mint: rgb(var(--brand-color-mint-rgb));
  --brand-color-clover: rgb(var(--brand-color-clover-rgb));
  --brand-color-sand: rgb(var(--brand-color-sand-rgb));
  --brand-color-mushroom: rgb(var(--brand-color-mushroom-rgb));
  --brand-color-background-hunter: rgb(var(--brand-color-background-hunter-rgb));
  --brand-color-navy: rgb(var(--brand-color-navy-rgb));
  --brand-color-black: rgb(var(--brand-color-black-rgb));
  --brand-color-gray: rgb(var(--brand-color-gray-rgb));
  --brand-color-irb-green: rgb(var(--brand-color-irb-green-rgb));
  --brand-color-marigold: rgb(var(--brand-color-marigold-rgb));
  --brand-color-periwinkle: rgb(var(--brand-color-periwinkle-rgb));
  --brand-color-border: rgb(var(--brand-color-border-rgb));
  --brand-color-white: rgb(var(--brand-color-white-rgb));

  /* Typography — Harmonia จับอักษรละติน, Helvetica Thai จับอักษรไทย (per-glyph fallback) */
  --irb-font: "Harmonia Sans Pro", "Harmonia Sans Pro Cyr", "Helvetica Thai", "Neue Helvetica Thai", Tahoma, Arial, sans-serif;

  /* Layout */
  --irb-shell: 1440px;
  --irb-pad: clamp(20px, 4vw, 56px);
  --irb-radius-card: 20px;
  --irb-radius-pill: 999px;
}

/* ------------------------------------------------------------
   2) Base styles
   ------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
body {
  font-family: var(--irb-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--brand-color-black);
  background: var(--brand-color-white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { max-width: var(--irb-shell); margin: 0 auto; padding: 0 var(--irb-pad); }

/* utility: ซ่อนด้วยตา แต่ยังอ่านได้ด้วย screen reader */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   3) Buttons — ทรง pill เต็ม, ชุดสีตาม Brand Guidelines หน้า 10
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--irb-font);
  font-size: 16px; font-weight: 600; line-height: 1;
  padding: 13px 26px;
  border-radius: var(--irb-radius-pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 24px 48px; font-size: 18px; min-width: 320px; }
.btn-block { width: 100%; }

/* ชุดบนพื้นอ่อน (5 สี) */
.btn-green-hunter { background: var(--brand-color-irb-green); color: var(--brand-color-hunter); }
.btn-white-hunter { background: var(--brand-color-white); color: var(--brand-color-hunter); border-color: rgba(var(--brand-color-hunter-rgb), .18); }
.btn-white-green  { background: var(--brand-color-white); color: var(--brand-color-irb-green); border-color: rgba(var(--brand-color-irb-green-rgb), .35); }
.btn-black        { background: var(--brand-color-black); color: var(--brand-color-white); }
.btn-black-outline{ background: transparent; color: var(--brand-color-black); border-color: var(--brand-color-black); }
/* ชุดบนพื้นเข้ม (4 สี) */
.btn-black-white  { background: var(--brand-color-white); color: var(--brand-color-black); }
.btn-white-outline{ background: transparent; color: var(--brand-color-white); border-color: var(--brand-color-white); }
.btn-green-outline{ background: transparent; color: var(--brand-color-irb-green); border-color: var(--brand-color-irb-green); }
.btn-black-mint   { background: var(--brand-color-mint); color: var(--brand-color-black); }

/* ============================================================
   4) Badge / Flag / Text link
   ============================================================ */
.flag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; line-height: 1;
}
.flag-hunter { background: var(--brand-color-hunter); color: var(--brand-color-white); }
.flag-green  { background: var(--brand-color-irb-green); color: var(--brand-color-hunter); }
.flag-peri   { background: var(--brand-color-periwinkle); color: var(--brand-color-white); }
.flag-mari   { background: var(--brand-color-marigold); color: var(--brand-color-black); }
.flag-black  { background: var(--brand-color-white); color: var(--brand-color-black); border: 1.5px solid var(--brand-color-black); }

.textlink { color: var(--brand-color-clover); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   5) Announcement bar — พื้น sage, ข้อความหมุนได้ + ลูกศรซ้ายขวา
   ============================================================ */
.irb-announce {
  background: var(--brand-color-sage);
  color: var(--brand-color-white);
  font-size: 14px; font-weight: 600;
  padding: 10px var(--irb-pad);
}
/* โครง: [ช่องว่าง 1fr] [กลุ่มข้อความ .irb-announce-msgs] [ลิงก์ช่วยเหลือ .irb-utility ชิดขวา 1fr]
   1fr สองข้างเท่ากัน → ข้อความอยู่กึ่งกลางเมื่อลิงก์ขวาพอดีช่อง (≥ ~1300px)
   จอแคบกว่านั้นข้อความขยับซ้ายเล็กน้อยแทนที่จะทับกัน (1fr = minmax(auto,1fr) ไม่เล็กกว่าเนื้อหา)
   markup: .shell › .irb-announce-msgs (ปุ่มก่อนหน้า · .irb-announce-track · ปุ่มถัดไป) + nav.irb-utility */
.irb-announce .shell {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
  padding: 0;
}
.irb-announce a { color: var(--brand-color-white); }
.irb-announce-msgs { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
/* 🔴 ต้องมี width ชัดเจน — ข้อความข้างในเป็น position:absolute จึงไม่มีความกว้างของตัวเอง
   ถ้าใช้ flex-basis/flex-grow อย่างเดียว คอลัมน์ auto ของ grid จะวัด max-content ได้ 0 แล้ว track ยุบเหลือ 0px
   (min-width:0 + max-width:100% ให้หดได้เมื่อจอแคบ) */
.irb-announce-track {
  position: relative; flex: 1 1 auto; width: 520px; min-width: 0; max-width: 100%;
  height: 20px; overflow: hidden; text-align: center;
}
.irb-announce-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.irb-announce-msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.irb-announce-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(var(--brand-color-white-rgb), .18); color: var(--brand-color-white);
  transition: background .15s ease;
}
.irb-announce-btn:hover { background: rgba(var(--brand-color-white-rgb), .32); }
/* ลิงก์ช่วยเหลือ + บัญชี + สลับภาษา (ตาม blueprint HQ: Support / Order Status / Login / ภาษา อยู่ในแถบประกาศด้านขวา)
   ชุดเดียวกันถูก render อีกครั้งท้าย drawer มือถือเป็น .irb-nav-utility — แต่ละ breakpoint โชว์แค่ชุดเดียว (สลับที่ 1080px) */
.irb-utility {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.irb-utility a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.irb-utility a:hover { text-decoration: underline; text-underline-offset: 3px; }
.irb-utility svg { flex-shrink: 0; }
.irb-lang { display: inline-flex; align-items: center; gap: 6px; }
.irb-lang a { opacity: .72; }
.irb-lang a:hover,
.irb-lang a[aria-current] { opacity: 1; }
.irb-lang a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.irb-lang-sep { opacity: .5; }
/* ลิงก์รอง (เช่น ติดตามคำสั่งซื้อ) หลบให้ข้อความประกาศยังอยู่กึ่งกลางบนจอแล็ปท็อป — ยังมีครบใน drawer/ฟุตเตอร์ */
@media (max-width: 1299px) {
  .irb-utility .irb-utility-secondary { display: none; }
}
.irb-nav-utility { display: none; }

/* จอแคบ: ข้อความห่อได้ 2 บรรทัด — ลดฟอนต์ + ขยาย track ให้พอดี ไม่ให้ตัวหนังสือซ้อน */
@media (max-width: 600px) {
  .irb-announce { font-size: 12px; }
  .irb-announce-msg { line-height: 1.3; }
  .irb-announce-track { height: 32px; }
}

/* ============================================================
   6) Header — announcement ด้านบน + main nav + search + cart
   ============================================================ */
.irb-header {
  border-bottom: 2px solid rgba(var(--brand-color-hunter-rgb), .25);
  background: var(--brand-color-white);
  position: relative;
}
.irb-header .shell {
  display: flex; align-items: center; gap: 28px;
  padding-top: 18px; padding-bottom: 18px;
}
/* โลโก้ — ห้ามหด/ห้ามขึ้นบรรทัดใหม่ตอนเฮดเดอร์แคบ (เจ้าของเห็นโลโก้ "เบี้ยว" 07.09.2026)
   flex-shrink:0 กันกล่องถูกบีบ · max-width:none ปลดกฎ img{max-width:100%} ที่จะบีบรูปตามกล่อง */
.irb-logo {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; text-decoration: none;
}
.irb-logo .i { color: var(--brand-color-black); }
.irb-logo sup { font-size: .5em; }
.irb-logo-img { display: block; height: 28px; width: auto; max-width: none; }

/* ---- เมนูหลัก + mega nav ----
   โครง markup ที่ทั้ง prototype และ walker ของธีม (IRB_Nav_Walker) ต้องพ่นให้ตรงกัน:
   .irb-nav[data-irb-nav]
   ├── a                                        รายการที่ไม่มีเมนูย่อย = ลิงก์แบน
   └── .irb-nav-item.has-mega[data-irb-mega]
       ├── a                                    ลิงก์หลัก (คลิกแล้วไปหน้าหมวด)
       ├── button.irb-nav-toggle                เปิด/ปิดแผง — aria-expanded + aria-controls
       └── .irb-mega[data-irb-mega-panel]       แผงเต็มความกว้าง ยึดกับ .irb-header (position:relative)
           └── .shell.irb-mega-inner
               ├── .irb-mega-links              คอลัมน์ลิงก์: p.irb-mega-heading · a · a.irb-mega-all
               └── .irb-mega-featured           การ์ดสินค้าแนะนำ: a.irb-mega-card
   สถานะเปิด = class .is-open บน .irb-nav-item (JS ใส่ให้จาก hover / คลิกปุ่ม / คีย์บอร์ด)
   🔴 selector ของลิงก์ระดับบนต้องเป็น `.irb-nav > a` / `.irb-nav-item > a` เท่านั้น
      ห้ามใช้ `.irb-nav a` เพราะจะไปจับลิงก์ในแผง mega ด้วย */
.irb-nav { display: flex; gap: 26px; flex-wrap: nowrap; min-width: 0; } /* ห้ามขึ้น 2 บรรทัด — จอแคบใช้ compaction ด้านล่างแล้วสลับเป็นเบอร์เกอร์ที่ ≤1080 */
.irb-nav-item { display: flex; align-items: center; flex-wrap: wrap; }
.irb-nav > a,
.irb-nav-item > a {
  color: var(--brand-color-black); text-decoration: none;
  font-size: 16px; font-weight: 600; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.irb-nav > a:hover,
.irb-nav-item > a:hover,
.irb-nav-item.is-open > a { border-bottom-color: var(--brand-color-clover); }

.irb-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--brand-color-black);
}
.irb-nav-toggle:hover { background: rgba(var(--brand-color-hunter-rgb), .08); }
.irb-nav-toggle svg { transition: transform .2s ease; }
.irb-nav-item.is-open > .irb-nav-toggle svg { transform: rotate(180deg); }

/* แผง mega — เดสก์ท็อป: ลอยเต็มความกว้างใต้เฮดเดอร์ (ซ่อนด้วย visibility เพื่อให้ Tab ข้ามลิงก์ข้างในไปเลย) */
.irb-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 50;
  background: var(--brand-color-white);
  border-bottom: 2px solid rgba(var(--brand-color-hunter-rgb), .25);
  box-shadow: 0 28px 44px -28px rgba(var(--brand-color-black-rgb), .35);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.irb-nav-item.is-open > .irb-mega {
  visibility: visible; opacity: 1; transform: none;
  transition-delay: 0s;
}
/* 🔴 ต้องเขียน `.irb-mega .irb-mega-inner` (0,2,0) — แผงอยู่ใน .irb-header จึงโดน `.irb-header .shell`
   (display:flex · align-items:center · gap:28px · padding 18px) ทับถ้าใช้ class เดี่ยว */
.irb-mega .irb-mega-inner { display: flex; align-items: flex-start; gap: 56px; padding-top: 32px; padding-bottom: 36px; }
.irb-mega-links { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 220px; max-width: 300px; }
.irb-mega-heading { font-size: 18px; font-weight: 600; color: var(--brand-color-hunter); margin-bottom: 8px; } /* เจ้าของ 04.10.2026: เดิม 13px สีเทา อ่านไม่ชัด · จอคอม 18px (ลิงก์ 15px) · มือถือ 15px ในบล็อก ≤1080 */
.irb-mega-links > * + .irb-mega-heading { margin-top: 24px; } /* หัวข้อที่สองในคอลัมน์เดียวกัน (เช่น Braava® → ช่วยเหลือ) */
/* หัวข้อคอลัมน์ลิงก์บนจอคอม — ตามเมนูของ iRobot.com ("Explore more": ใหญ่ สีเขียว มีเส้นบางคั่น · เจ้าของ 04.10.2026)
   หัวข้อแถวรูปในแผงอะไหล่ (.irb-mega-picker) คง 18px ให้ .irb-mega-title ใหญ่สุดในแผงนั้น · มือถือคืนค่าในบล็อก ≤1080 */
.irb-mega-links > .irb-mega-heading {
  font-size: 22px; line-height: 1.3;
  padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(var(--brand-color-border-rgb), .45);
}
.irb-mega-links a {
  color: var(--brand-color-black); text-decoration: none;
  font-size: 17px; font-weight: 600; line-height: 1.4; /* 600 = ไฟล์ตัวหนาทั้งไทย/อังกฤษ · 500 ไทยไม่มีไฟล์กลาง → ออกมาเป็นตัวปกติ บางกว่าชื่อรุ่นอังกฤษ (เจ้าของเลือก "หนาทั้งหมด" 04.10.2026) */
  padding: 10px 0;
}
.irb-mega-links a:hover { color: var(--brand-color-clover); }
.irb-mega-links a.irb-mega-all {
  margin-top: 10px; color: var(--brand-color-clover); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
/* "ดูทั้งหมด" วางบนสุดของคอลัมน์ได้ (แผงอะไหล่ — เจ้าของ 09.09.2026): ไม่ต้องเว้นด้านบน */
.irb-mega-links > a.irb-mega-all:first-child { margin-top: 0; }
/* ลิงก์ "ดูทั้งหมด" ซ้อนกันหลายบรรทัดน้ำหนักเท่ากัน (แผงอะไหล่: ดูอะไหล่ทุกรุ่น / ดูวิธีหาเลขรุ่นใต้เครื่อง — เจ้าของ 09.09.2026) */
.irb-mega-links > a.irb-mega-all + a.irb-mega-all { margin-top: 6px; }
.irb-mega-links > a.irb-mega-all + .irb-mega-note { margin-top: 16px; }
/* ข้อความเฉย ๆ ในคอลัมน์ (เช่น "อะไหล่รุ่นใหม่ปี 2026 เร็ว ๆ นี้") — ธีม: รายการเมนูที่มี class irb-note */
.irb-mega-note { font-size: 13px; line-height: 1.4; color: var(--brand-color-gray); margin-top: 10px; }
/* คอลัมน์ยาว (เช่น รุ่นก่อนหน้า 14 รุ่น) แตกเป็น 2 คอลัมน์ย่อยใต้หัวข้อเดียว — ธีม: หัวข้อที่มี class irb-2col */
.irb-mega-links--2col {
  display: grid; grid-template-columns: repeat(2, max-content); column-gap: 28px; align-content: start;
  max-width: none;
}
.irb-mega-links--2col > .irb-mega-heading,
.irb-mega-links--2col > .irb-mega-note,
.irb-mega-links--2col > a.irb-mega-all { grid-column: 1 / -1; }

/* ---- แผงแบบ "เลือกจากรูปหุ่น" (แผงอะไหล่ — เจ้าของ 09.09.2026: ลูกค้าจำหน้าตาเครื่องได้ ไม่จำชื่อรุ่น
   และให้เน้น "ดูวิธีหาเลขรุ่นใต้เครื่อง") ----
   .irb-mega-help    กล่องเน้นในคอลัมน์ลิงก์: หัวข้อ + คำอธิบาย + ปุ่มดำ (ธีม: รายการเมนู class irb-help)
   .irb-mega-picker  บล็อกรูปหุ่น (ธีม: หัวข้อ class irb-tiles = แถวรูป · ลิงก์ในแถวใช้รูปหมวด/สินค้าที่ลิงก์ไป)
     › .irb-mega-title · .irb-mega-heading · .irb-mega-tiles › a.irb-mega-tile › .irb-mega-tile-img + .irb-mega-tile-name
     › .irb-mega-picker-foot (ลิงก์ดูทุกรุ่น) · .irb-mega-inline (หัวข้อ + ลิงก์เรียงแนวนอน — ธีม: หัวข้อ class irb-inline) */
.irb-mega-help {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--brand-color-mint); border-radius: 14px; padding: 16px;
  margin: 14px 0 4px;
}
.irb-mega-help-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--brand-color-hunter); }
.irb-mega-help-title svg { flex-shrink: 0; }
.irb-mega-help-text { font-size: 13px; line-height: 1.45; }
/* 🔴 ต้อง 3 ชั้น: `.irb-mega-links a` (0,2,0) จะทับสีขาวของ .btn-black → ดำบนดำ ตัวหนังสือหาย (เจอตอน render 09.09.2026) */
.irb-mega-links .irb-mega-help .btn {
  align-self: flex-start; margin-top: 4px; padding: 10px 16px; font-size: 14px;
  color: var(--brand-color-white);
}
.irb-mega-links .irb-mega-help .btn:hover { color: var(--brand-color-white); }
.irb-mega-picker { flex: 1 1 auto; min-width: 0; }
.irb-mega-title { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.irb-mega-picker .irb-mega-heading { margin: 0 0 8px; }
.irb-mega-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.irb-mega-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--brand-color-black); text-decoration: none; }
.irb-mega-tile-img {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--brand-color-sand); border-radius: 12px; border: 1.5px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.irb-mega-tile:hover .irb-mega-tile-img { border-color: var(--brand-color-black); transform: translateY(-2px); }
.irb-mega-tile-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; display: block; }
.irb-mega-tile-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.irb-mega-picker-foot { display: flex; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; font-size: 14px; }
.irb-mega-picker-foot .irb-mega-all { margin-top: 0; }
.irb-mega-inline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.irb-mega-inline .irb-mega-heading { margin: 0; }
.irb-mega-inline a { color: var(--brand-color-black); text-decoration: none; font-weight: 600; } /* หนาเท่าลิงก์เมนูอื่น */
.irb-mega-inline a:hover { color: var(--brand-color-clover); }

/* การ์ดสินค้าแนะนำในแผง — ย่อจาก .ptile (รูป + ป้าย + ชื่อ + ราคา ไม่มีปุ่ม) */
.irb-mega-featured {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  flex: 1 1 auto; align-content: start;
}
.irb-mega-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--brand-color-black); text-decoration: none; }
.irb-mega-card-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / .82; border-radius: 14px; overflow: hidden;
  background: var(--brand-color-sand);
  transition: transform .2s ease;
}
.irb-mega-card-media.mint { background: var(--brand-color-mint); }
.irb-mega-card-media.mushroom { background: var(--brand-color-mushroom); }
.irb-mega-card-media img { width: 100%; height: 100%; object-fit: cover; }
.irb-mega-card-media .flag { position: absolute; top: 10px; left: 10px; }
.irb-mega-card:hover .irb-mega-card-media { transform: translateY(-2px); }
.irb-mega-card:hover .irb-mega-card-name { text-decoration: underline; text-underline-offset: 3px; }
.irb-mega-card-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.irb-mega-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.irb-mega-card-price .now { font-weight: 700; }
.irb-mega-card-price .was { font-size: 13px; color: var(--brand-color-gray); text-decoration: line-through; }
.irb-mega-card-price .soon { color: var(--brand-color-gray); }

.irb-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.irb-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--brand-color-sand);
  border: 0;
  border-radius: var(--irb-radius-pill);
  padding: 10px 20px; min-width: 220px;
  color: var(--brand-color-gray); font-size: 15px;
  font-family: var(--irb-font);
  cursor: pointer;
}
.irb-search svg { flex-shrink: 0; }
.irb-search input {
  border: 0; background: transparent; outline: none; flex: 1; min-width: 0;
  font-family: var(--irb-font); font-size: 15px; color: var(--brand-color-black);
}
.irb-search input::placeholder { color: var(--brand-color-gray); }

.irb-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 0; color: var(--brand-color-black); cursor: pointer;
  flex-shrink: 0;
}
.irb-cart:hover { background: rgba(var(--brand-color-hunter-rgb), .08); }
.irb-cart-count {
  position: absolute; top: -1px; right: -1px;
  min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 999px; background: var(--brand-color-clover); color: var(--brand-color-white);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* Hamburger — ซ่อนบนจอกว้าง */
.irb-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 0; cursor: pointer; flex-shrink: 0;
}
.irb-burger:hover { background: rgba(var(--brand-color-hunter-rgb), .08); }
.irb-burger span { display: block; width: 20px; height: 2px; background: var(--brand-color-black); transition: transform .2s ease, opacity .2s ease; }
.irb-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.irb-burger.is-open span:nth-child(2) { opacity: 0; }
.irb-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* จอแล็ปท็อปแคบ (1081–1200px): บีบระยะให้เมนู 4 หมวด + ช่องค้นหา + ตะกร้า อยู่บรรทัดเดียว */
@media (max-width: 1200px) and (min-width: 1081px) {
  .irb-header .shell { gap: 20px; }
  .irb-nav { gap: 18px; }
  .irb-nav > a,
  .irb-nav-item > a { font-size: 15px; }
  .irb-search { min-width: 170px; }
}

/* ≤1080px = เฮดเดอร์แบบมือถือ/แท็บเล็ต (เบอร์เกอร์ + drawer)
   🔴 ตัวเลขนี้ต้องตรงกับ JS: mega-nav.js / theme.js ใช้ (min-width: 1081px) เป็น "เดสก์ท็อป" */
@media (max-width: 1080px) {
  .irb-burger { display: flex; }
  /* โลโก้กึ่งกลางจอ (เจ้าของ 04.10.2026: เดิมเกาะติดเบอร์เกอร์ เอียงไปซ้าย)
     grid 3 ช่อง [เบอร์เกอร์ | โลโก้ | ค้นหา+ตะกร้า] — ช่องซ้าย/ขวา 1fr เท่ากัน → โลโก้อยู่กลางจอพอดี
     ฝั่งขวากว้างกว่า (96 vs 40px): จอแคบกว่า ~380 ที่สองฝั่งเท่ากันไม่ได้ ช่องขวากว้างตามไอคอน (1fr = minmax(auto,1fr))
     โลโก้จึงเยื้องซ้ายไม่กี่ px แทนการทับไอคอน · .irb-nav ช่วงนี้เป็น position:absolute ไม่กินช่อง grid */
  .irb-header .shell { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .irb-burger { justify-self: start; }
  .irb-logo { justify-self: center; }
  .irb-actions { justify-self: end; margin-left: 0; }
  /* จอ 360–389: ย่อโลโก้ตามความกว้างจอ (28 → ไม่ต่ำกว่า 24px) ให้ช่องซ้าย/ขวายังเท่ากัน = กลางพอดี
     โลโก้กว้าง = 100vw − 256 (padding 40 + ไอคอนขวา 96 × 2 + ระยะ 12 × 2) · สูง = กว้าง × 28/123 */
  .irb-logo-img { height: clamp(24px, calc((100vw - 256px) * .228), 28px); }
  .irb-search input, .irb-search label { display: none; }
  .irb-search { min-width: 0; padding: 10px; }
  .irb-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    background: var(--brand-color-white);
    border-bottom: 1px solid rgba(var(--brand-color-border-rgb), .3);
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
    z-index: 40;
  }
  /* drawer สูงได้เท่าที่จอเหลือ แล้ว scroll ข้างใน (แผง mega เปิดซ้อนกันได้หลายอัน) */
  .irb-nav.is-open { max-height: min(78vh, 720px); overflow-y: auto; }
  /* 🔴 ห้ามทำให้ดูเป็นตาราง (เจ้าของ 07.09.2026): ไม่มีเส้นแนวตั้งคั่นคอลัมน์ลูกศร
     เส้นคั่นแถวมีเฉพาะ "ระหว่าง" แถวและบางมาก · แถวที่กางออกกลายเป็นก้อนสีทรายก้อนเดียวกับแผง */
  .irb-nav > a {
    width: 100%; padding: 16px var(--irb-pad);
    border-bottom: 0;
  }
  .irb-nav > a:hover { border-bottom-color: transparent; }
  .irb-nav > * + * { border-top: 1px solid rgba(var(--brand-color-border-rgb), .12); }

  /* รายการที่มีเมนูย่อย = แถว [ลิงก์ … ลูกศร] แล้วแผงกางลงใต้แถว (accordion) */
  .irb-nav-item { align-items: stretch; border-bottom: 0; }
  .irb-nav-item > a { flex: 1 1 auto; padding: 16px 8px 16px var(--irb-pad); border-bottom: 0; }
  .irb-nav-item > a:hover,
  .irb-nav-item.is-open > a { border-bottom: 0; }
  .irb-nav-item.is-open { background: var(--brand-color-sand); }
  .irb-nav-item.is-open + * { border-top-color: transparent; }
  .irb-nav-toggle {
    width: 64px; height: auto; margin: 0; padding: 0 var(--irb-pad) 0 0;
    border: 0; border-radius: 0; background: none;
    justify-content: flex-end;
    color: var(--brand-color-gray);
  }
  .irb-nav-toggle:hover { background: none; }
  .irb-nav-item.is-open > .irb-nav-toggle { color: var(--brand-color-black); }
  .irb-mega {
    position: static; flex-basis: 100%; width: 100%;
    display: none;
    visibility: visible; opacity: 1; transform: none; transition: none;
    box-shadow: none; border-bottom: 0;
    background: transparent;
  }
  .irb-nav-item.is-open > .irb-mega { display: block; }
  .irb-mega .irb-mega-inner { display: block; padding: 6px var(--irb-pad) 20px; }
  /* แถบประกาศกลับเป็น flex กึ่งกลาง · ลิงก์ช่วยเหลือย้ายไปท้าย drawer */
  .irb-announce .shell { display: flex; justify-content: center; }
  .irb-announce-msgs { flex: 1 1 auto; }
  .irb-announce-track { flex: 1 1 auto; max-width: 640px; }
  .irb-utility { display: none; }
  .irb-nav-utility {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
    padding: 14px var(--irb-pad) 18px;
    background: var(--brand-color-sand);
    font-size: 14px; font-weight: 600;
  }
  .irb-nav-utility a {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
    color: var(--brand-color-black); text-decoration: none;
  }
  .irb-nav-utility svg { flex-shrink: 0; }
  .irb-nav-utility .irb-lang { margin-left: auto; }
  .irb-nav-utility .irb-lang a { opacity: .6; }
  .irb-nav-utility .irb-lang a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
  .irb-mega-links { min-width: 0; max-width: none; }
  .irb-mega-links--2col { display: flex; } /* จอแคบกลับเป็นคอลัมน์เดียว */
  .irb-mega-help { margin: 10px 0 4px; }
  .irb-mega-picker { margin-top: 16px; }
  .irb-mega-title { font-size: 17px; }
  .irb-mega-heading,
  .irb-mega-links > .irb-mega-heading { font-size: 15px; padding-bottom: 0; margin-bottom: 8px; border-bottom: 0; }
  .irb-mega-tiles {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .irb-mega-tile { flex: 0 0 118px; scroll-snap-align: start; }
  .irb-mega-picker-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .irb-mega-links + .irb-mega-links { margin-top: 12px; }
  .irb-mega-links a { font-size: 15px; padding: 10px 0; border-bottom: 1px solid rgba(var(--brand-color-border-rgb), .12); }
  .irb-mega-links a:last-child { border-bottom: 0; }
  .irb-mega-links a.irb-mega-all { margin-top: 4px; }
  /* การ์ดแนะนำเลื่อนแนวนอน (ทรงเดียวกับ .ptile-row บนมือถือ) */
  .irb-mega-featured {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 14px 0 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .irb-mega-card { flex: 0 0 156px; scroll-snap-align: start; }
  /* แถวเลื่อนแนวนอน (รูปหุ่น + การ์ดแนะนำ) ต้องดูออกว่าปัดได้ (เจ้าของ 04.10.2026: เดิม 3 ใบพอดีจอ ดูเหมือนแถวจบแค่นั้น)
     ① แถวชนขอบจอ — ใบที่ถูกตัดไหลออกนอกจอ ไม่ใช่โดนตัดตรงขอบ padding
     ② ความกว้างใบคิดจากความกว้างแถว → เห็นใบถัดไปราวครึ่งใบทุกขนาดมือถือ
     ③ ขอบขวาจาง แล้วหายเมื่อเลื่อนจนสุด (เบราว์เซอร์ที่มี scroll-driven animation · ที่ไม่มีก็จางคงที่) */
  .irb-mega-tiles,
  .irb-mega-featured {
    --irb-row-fade: 40px;
    margin-inline: calc(-1 * var(--irb-pad)); padding-inline: var(--irb-pad);
    scroll-padding-inline: var(--irb-pad);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--irb-row-fade)), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--irb-row-fade)), transparent);
  }
  .irb-mega-tile { flex-basis: clamp(112px, calc((100% + var(--irb-pad) - 20px) / 2.45), 168px); }
  .irb-mega-card { flex-basis: clamp(140px, calc((100% + var(--irb-pad) - 24px) / 2.35), 200px); }
  @supports (animation-timeline: scroll()) {
    .irb-mega-tiles,
    .irb-mega-featured { animation: irb-row-fade linear both; animation-timeline: scroll(self inline); animation-range: 70% 100%; }
  }
}
@property --irb-row-fade { syntax: '<length>'; inherits: false; initial-value: 40px; }
@keyframes irb-row-fade { to { --irb-row-fade: 0px; } }

/* ============================================================
   7) Product tile (ptile) — การ์ดสินค้า
   ============================================================ */
.ptile {
  border: 1px solid rgba(var(--brand-color-border-rgb), .3);
  border-radius: var(--irb-radius-card);
  overflow: hidden; background: var(--brand-color-white);
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
  text-decoration: none; color: inherit;
}
.ptile:hover { box-shadow: 0 16px 40px rgba(var(--brand-color-hunter-rgb), .14); transform: translateY(-3px); }
.ptile-media {
  position: relative; aspect-ratio: 1 / .82;
  background: var(--brand-color-sand);
  display: flex; align-items: center; justify-content: center;
}
.ptile-media.mint { background: var(--brand-color-mint); }
.ptile-media.mushroom { background: var(--brand-color-mushroom); }
.ptile-media .flag { position: absolute; top: 14px; left: 14px; }
.ptile-media img { width: 100%; height: 100%; object-fit: cover; }
.ptile-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ptile-promo { font-size: 13px; font-weight: 600; color: var(--brand-color-clover); }
.ptile-name { font-size: 18px; font-weight: 600; line-height: 1.35; }
.ptile-price { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.ptile-price .now { font-size: 20px; font-weight: 700; }
.ptile-price .was { font-size: 15px; color: var(--brand-color-gray); text-decoration: line-through; }
.ptile-price .save { font-size: 13px; font-weight: 600; color: var(--brand-color-clover); }
.ptile-installment { font-size: 13px; color: var(--brand-color-gray); }
.ptile-cta { margin-top: auto; padding-top: 14px; }

/* แถวการ์ดสินค้า — ปรับจำนวนคอลัมน์ตาม modifier, ยุบเป็น scroll แนวนอนบนมือถือ */
.ptile-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ptile-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .ptile-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ptile-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* ถ้าไม่มี scroll-padding, mandatory snap จะดูดการ์ดแรกชิดขอบ scrollport ตั้งแต่โหลด (ข้าม padding 20px) */
    scroll-padding-inline: var(--irb-pad);
    padding-bottom: 8px;
    margin-left: calc(var(--irb-pad) * -1);
    margin-right: calc(var(--irb-pad) * -1);
    padding-left: var(--irb-pad);
    padding-right: var(--irb-pad);
  }
  .ptile-row .ptile { scroll-snap-align: start; }
}

/* รูป/ภาพ lifestyle placeholder ทั่วไป (ใช้กับ banner, hotspot image ฯลฯ) */
.media-ph {
  position: relative; overflow: hidden;
  background: var(--brand-color-sand);
  display: flex; align-items: center; justify-content: center;
}
.media-ph.mint { background: var(--brand-color-mint); }
.media-ph.mushroom { background: var(--brand-color-mushroom); }
.media-ph img { width: 100%; height: 100%; object-fit: cover; }

/* Hotspot tag — ป้ายขาว pill ลอยบนภาพ lifestyle */
.hotspot {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-color-white);
  color: var(--brand-color-black);
  font-size: 14px; font-weight: 600;
  padding: 10px 16px 10px 14px;
  border-radius: var(--irb-radius-pill);
  box-shadow: 0 10px 30px rgba(var(--brand-color-black-rgb), .18);
  text-decoration: none;
}
.hotspot .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-color-clover);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(var(--brand-color-clover-rgb), .25);
}

/* ============================================================
   8) Footer
   ============================================================ */
.irb-footer {
  background: var(--brand-color-background-hunter);
  color: var(--brand-color-white);
  border-radius: var(--irb-radius-card) var(--irb-radius-card) 0 0;
  margin-top: 64px;
}
.irb-footer .shell { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.irb-footer-logo { display: block; height: 32px; width: auto; max-width: none; margin-bottom: 20px; }
.foot-news h3 { font-size: 26px; font-weight: 600; line-height: 1.3; margin-bottom: 18px; }
/* ไม่มีฟอร์มอีเมลใน footer — ใช้ปุ่ม LINE Official แทน (ตัดสินใจ 12.08.2026) */
.foot-col h4 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.foot-col a { display: block; color: rgba(var(--brand-color-white-rgb), .72); text-decoration: none; font-size: 14px; padding: 5px 0; }
.foot-col a:hover { color: var(--brand-color-white); }
/* ไอคอนโซเชียล — กลิฟทึบทรงแบรนด์ (LINE ฟองแชท · Facebook f · Instagram กล้อง) ในวงกลม 44px
   hover = วงกลมขาว ไอคอนเขียว hunter (เจ้าของ 09.09.2026) */
.foot-social { display: flex; gap: 12px; margin-top: 20px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(var(--brand-color-white-rgb), .12);
  color: var(--brand-color-white);
  padding: 0;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.foot-social a svg { width: 18px; height: 18px; }
.foot-social a:hover { background: var(--brand-color-white); color: var(--brand-color-hunter); transform: translateY(-2px); }
/* ปุ่ม LINE ในกล่องข่าวสาร: กลิฟฟองแชท 20px */
.foot-news .btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.foot-legal {
  border-top: 1px solid rgba(var(--brand-color-white-rgb), .14);
  padding: 22px var(--irb-pad); font-size: 12px; color: rgba(var(--brand-color-white-rgb), .55); text-align: center;
}
@media (max-width: 960px) {
  .irb-footer .shell { grid-template-columns: 1fr 1fr; }
  /* 10.09.2026 เจ้าของ: "Font ใหญ่ไป" — ที่ 2 คอลัมน์ บล็อก LINE แคบจนหัวข้อ 26px ขึ้น 4 บรรทัด → ให้กินเต็มแถว + ลดเป็น 22px (มือถือด้วย) */
  .foot-news { grid-column: 1 / -1; }
  .foot-news h3 { font-size: 22px; }
}
@media (max-width: 560px) {
  .irb-footer .shell { grid-template-columns: 1fr; padding-top: 48px; }
}

/* ════════════════════════════════════════════════════════════
   END OF VERBATIM COPY — เหนือเส้นนี้คือสำเนาจาก irobot-web/design-system.css
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   [B] THEME SHARED LAYER — irobot-th-2026
   ------------------------------------------------------------
   เก็บเฉพาะสิ่งที่ "ใช้ซ้ำมากกว่า 1 หน้า" ตามที่สกัดจาก prototype
   (home/plp/pdp ต่างก็ประกาศซ้ำกันเองใน <style> เดิม — รวมมาไว้ที่เดียว)
   + สะพานเชื่อม markup มาตรฐานของ WooCommerce เข้ากับคลาสของ design system

   ห้าม hard-code สี/ฟอนต์ — ใช้ var(--brand-color-*) / var(--irb-*) เท่านั้น
   ============================================================ */

/* ------------------------------------------------------------
   B0) [hidden] ต้องชนะเสมอ
   คอมโพเนนต์หลายตัวตั้ง display ผ่าน class (.btn = inline-flex,
   .plp-filters = flex, .pdp-topfeat-grid = grid) ซึ่ง specificity สูงกว่า
   UA style ของ [hidden] ⇒ ตั้ง hidden จาก JS แล้วของยังโผล่อยู่
   (เจอจริงตอนเทส: ปุ่มสำรอง .plp-sort-submit ไม่ยอมหายหลัง JS ซ่อน)
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   B1) โครงจังหวะ section — ใช้ทั้ง home / plp / pdp
   ------------------------------------------------------------ */
.section { padding: clamp(56px, 8vw, 96px) 0; }
/* section ที่ต่อกันในหน้าเดียว: ตัด padding บนเพื่อไม่ให้ระยะห่างซ้อนกันสองเท่า
   (prototype ใช้ style="padding-top:0" inline — ธีมใช้ modifier แทน) */
.section--tight { padding-top: 0; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 32px;
}
.section-head h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.25; }

/* หัวข้อ section ที่มีเส้นใต้หนา (home: "สินค้าใหม่") */
.tab-heading {
  display: inline-block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600;
  padding-bottom: 12px; border-bottom: 4px solid var(--brand-color-black);
}

/* ลิงก์ "ดูทั้งหมด" ท้ายหัวข้อ section */
.cat-link { flex-shrink: 0; align-self: flex-end; margin-bottom: 4px; }

/* Desktop: หัวข้อทุก section จัดกึ่งกลาง (คำสั่งเจ้าของ 12.08.2026) — มือถือคงชิดซ้าย */
@media (min-width: 768px) {
  .section-head { justify-content: center; text-align: center; }
}
@media (max-width: 860px) {
  .section-head { align-items: flex-start; }
}

/* เชิงอรรถท้าย section — ใช้กับ claim ที่มีเครื่องหมาย * */
.t-fine { font-size: 12px; line-height: 1.5; color: var(--brand-color-gray); max-width: 46ch; }

/* ------------------------------------------------------------
   B2) โลโก้ทางการ (header / footer) — ย้ายขึ้นไปอยู่ในสำเนาต้นทางแล้ว (07.09.2026)
   .irb-logo-img อยู่ §6 header · .irb-footer-logo อยู่ §8 footer ของ design-system.css
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   B3) placeholder รูปหุ่นวงกลม — ใช้ตอนสินค้ายังไม่มีรูปจริงจาก DAM
   (การ์ดสินค้า / gallery PDP)
   ------------------------------------------------------------ */
.robot-ph .body { fill: var(--brand-color-black); }
.robot-ph .body-outline { fill: none; stroke: var(--brand-color-gray); stroke-width: 1.5; opacity: .4; }
.robot-ph .top { fill: var(--brand-color-gray); opacity: .55; }
.robot-ph .bin { fill: var(--brand-color-gray); opacity: .32; }
.robot-ph .bin-outline { fill: none; stroke: var(--brand-color-border); stroke-width: 1.5; }

/* ------------------------------------------------------------
   B4) Breadcrumb — โครงเดียวใช้ทั้ง PLP และ PDP
   markup: .breadcrumb-wrap > .shell > nav.irb-breadcrumb > ol > li
   delimiter มาจาก CSS (::after) ไม่ใช่จาก DOM — screen reader ไม่ต้องอ่าน "/"
   ------------------------------------------------------------ */
.breadcrumb-wrap { padding: 22px 0 0; }
.irb-breadcrumb ol {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  list-style: none; font-size: 14px; margin: 0; padding: 0;
}
.irb-breadcrumb li { display: flex; align-items: center; }
.irb-breadcrumb li:not(:last-child)::after {
  content: "/"; margin: 0 8px; color: var(--brand-color-border);
}
.irb-breadcrumb a { color: var(--brand-color-gray); text-decoration: none; }
.irb-breadcrumb a:hover { color: var(--brand-color-black); text-decoration: underline; }
.irb-breadcrumb li[aria-current],
.irb-breadcrumb [aria-current="page"] { color: var(--brand-color-black); font-weight: 600; }

/* ------------------------------------------------------------
   B5) Value props (why buy) — การ์ดแบบหน้าแรก Home 2026 ใน carousel (template-parts/home/why-buy.php)
   06.10.2026 เจ้าของ: PLP ให้เหมือนหน้าแรก → ลอกจาก irobot-web/home/preview.html (.h26-vp · .h26-car-why)
   การ์ดพื้นเทา · ไอคอนเส้น navy 64px · หัวข้อเขียว irbtext · โชว์ 4 ใบ (≤1024 = 2 · ≤700 = 2.1 ใบ ล้นขอบให้รู้ว่าเลื่อนได้)
   JS: initVpCarousel() ใน assets/js/theme.js (ปุ่ม/จุด) · ไม่มี JS = เลื่อนด้วยนิ้ว/trackpad ได้
   ------------------------------------------------------------ */
/* สีเฉพาะการ์ดชุดนี้ = ค่าเดียวกับหน้าแรก (Home ตั้งเป็น --card / --irbtext ในบล็อก .h26) — ไม่มีใน brand token */
.vp-car { position: relative; --vp-n: 4; --vp-gap: 24px; --vp-card-rgb: 245, 245, 245; --vp-title-rgb: 68, 115, 85; }
/* หัวข้อ section ขนาดเท่าหน้าแรก (.h26-section-head h2) — ใหญ่กว่าหัวข้อ section ทั่วไปของธีม (32px) ตั้งใจ */
.irb-plp-whybuy .section-head h2,
.irb-home-whybuy .section-head h2 { font-size: clamp(26px, 3.3vw, 44px); line-height: 1.2; }
.vp-car-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--vp-n) - 1) * var(--vp-gap)) / var(--vp-n));
  gap: var(--vp-gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px;
}
.vp-car-track::-webkit-scrollbar { display: none; }
.vp-car-track > * { scroll-snap-align: start; min-width: 0; }
.vp-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%;
  background: rgb(var(--vp-card-rgb)); border-radius: 27px;
  padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(30px, 2.6vw, 40px);
}
.vp-icon-wrap { display: block; width: 64px; height: 64px; margin-bottom: 14px; }
.vp-icon { display: block; width: 64px; height: 64px; }
.vp-icon .ic, .vp-icon .ic2 { fill: none; stroke: var(--brand-color-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vp-icon .badge { fill: rgb(var(--vp-card-rgb)); stroke: var(--brand-color-navy); stroke-width: 1.6; }
.vp-icon .dot { fill: var(--brand-color-navy); stroke: none; }
.vp-card h3 { font-size: clamp(19px, 1.55vw, 22px); font-weight: 600; line-height: 1.3; color: rgb(var(--vp-title-rgb)); }
.vp-card p { font-size: 15px; line-height: 1.55; color: var(--brand-color-navy); }
.vp-link { padding-top: 4px; }
.vp-card .textlink { color: rgb(var(--vp-title-rgb)); font-weight: 500; }
.vp-car-btn {
  all: unset; position: absolute; top: calc(50% - 44px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand-color-white);
  box-shadow: 0 4px 18px rgba(var(--brand-color-black-rgb), .2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--brand-color-hunter);
}
.vp-car-btn[hidden] { display: none; }
.vp-car-btn:focus-visible { outline: 2px solid var(--brand-color-hunter); outline-offset: 3px; }
.vp-car-prev { left: -14px; }
.vp-car-next { right: -14px; }
.vp-car-dots { display: flex; justify-content: center; gap: 9px; padding-top: 20px; }
.vp-car-dots[hidden] { display: none; }
.vp-car-dot { all: unset; width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--brand-color-gray-rgb), .35); cursor: pointer; }
.vp-car-dot.is-active { background: var(--brand-color-hunter); }
.vp-car-dot:focus-visible { outline: 2px solid var(--brand-color-hunter); outline-offset: 3px; }

@media (max-width: 1024px) {
  .vp-car { --vp-n: 2; }
}
@media (max-width: 900px) {
  .vp-car-prev { left: -6px; }
  .vp-car-next { right: -6px; }
}
@media (max-width: 700px) {
  .vp-car { --vp-n: 2.1; --vp-gap: 10px; }
  .vp-car-track { margin: 0 calc(-1 * var(--irb-pad)); padding: 2px var(--irb-pad) 6px; scroll-padding-inline: var(--irb-pad); }
  .vp-car-btn { display: none; }
  .vp-card { padding: 16px 13px 18px; border-radius: 18px; gap: 6px; }
  .vp-icon-wrap, .vp-icon { width: 40px; height: 40px; }
  .vp-icon-wrap { margin-bottom: 6px; }
  .vp-card h3 { font-size: 15px; line-height: 1.35; text-wrap: balance; } /* balance เฉพาะมือถือ = หน้าแรก */
  .vp-card p { font-size: 12.5px; line-height: 1.5; }
  .vp-link { padding-top: 2px; }
  .vp-card .textlink { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-car-track { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   B6) การ์ดรีวิว — ใช้ทั้ง home และ PDP
   🔴 ห้ามใส่รีวิวประดิษฐ์: การ์ดชุดนี้ต้อง render จากรีวิวจริงเท่านั้น
      (comment_type=review, approved) ถ้าไม่มี → ใช้ empty state ของแต่ละหน้า
   ------------------------------------------------------------ */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  background: var(--brand-color-sand);
  border-radius: var(--irb-radius-card);
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.review-stars { display: flex; gap: 4px; }
.review-stars svg { width: 16px; height: 16px; }
.review-stars path { fill: var(--brand-color-clover); }
.review-card p { font-size: 15px; line-height: 1.6; color: var(--brand-color-black); }
.review-name { font-size: 14px; font-weight: 600; color: var(--brand-color-gray); }

@media (max-width: 860px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   B7) สะพานเชื่อม WooCommerce → design system
   ------------------------------------------------------------
   2.2 ยัง "ไม่" dequeue woocommerce-general/layout/smallscreen
   (cart/checkout + ปลั๊กอิน iqair-checkout-ux พึ่ง CSS ชุดนั้นอยู่)
   ⇒ CSS ธีมโหลดทีหลังและต้องชนะด้วย specificity ที่เท่ากันหรือมากกว่า
   ตัดชุดนี้ทิ้งได้เมื่อเปิดฟิลเตอร์ irb_dequeue_woocommerce_styles หลัง QA
   ============================================================ */

/* B7.1 การ์ดสินค้าเป็น <li> ใน <ul class="ptile-row">
   (จำเป็นเพื่อให้ปลั๊กอิน irobot-image-badges จับคู่การ์ดจาก class post-<ID>
   ที่มาจาก wc_product_class() — ดู readme ของธีม) */
.ptile-row { list-style: none; margin: 0; padding: 0; }
/* การ์ดต้องเป็น containing block — Woo แปะ <span class="screen-reader-text"> (position:absolute)
   ต่อท้ายปุ่มหยิบใส่ตะกร้า ถ้าการ์ดเป็น static span จะไปยึด div.product (relative) ที่อยู่นอกแถวเลื่อน
   .ptile-row บนมือถือ → overflow-x ของแถวตัดไม่ได้ หน้า PDP กว้างเกินจอ (320px: scrollWidth 459) */
.ptile { position: relative; }

/* ล้าง float/width/margin ของ woocommerce-layout.css ที่ตีกับ grid ของเรา */
.woocommerce ul.products.ptile-row,
.woocommerce-page ul.products.ptile-row { margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products.ptile-row li.product,
.woocommerce-page ul.products.ptile-row li.product {
  float: none; clear: none; width: auto; margin: 0; padding: 0;
}
.woocommerce ul.products.ptile-row li.product::before,
.woocommerce ul.products.ptile-row li.product::after,
.woocommerce-page ul.products.ptile-row li.product::before,
.woocommerce-page ul.products.ptile-row li.product::after { content: none; }
/* Woo ใส่ margin-bottom ให้ <img> ในลูป — กล่องรูปของเราคุมสัดส่วนเอง */
.ptile-media img { margin: 0; }

/* B7.2 ปุ่ม .btn ต้องชนะ .woocommerce a.button (0,2,1)
   ⇒ ยกระดับ specificity ด้วย :is() + ชื่อ element (ห้ามใส่ #id ใน :is()) */
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--irb-font);
  font-size: 16px; font-weight: 600; line-height: 1;
  padding: 13px 26px;
  border-radius: var(--irb-radius-pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  text-transform: none; letter-spacing: normal;
  transition: transform .15s ease, opacity .15s ease;
}
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-lg { padding: 24px 48px; font-size: 18px; min-width: 320px; }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-block { width: 100%; }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-green-hunter { background: var(--brand-color-irb-green); color: var(--brand-color-hunter); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-white-hunter { background: var(--brand-color-white); color: var(--brand-color-hunter); border-color: rgba(var(--brand-color-hunter-rgb), .18); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-white-green { background: var(--brand-color-white); color: var(--brand-color-irb-green); border-color: rgba(var(--brand-color-irb-green-rgb), .35); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-black { background: var(--brand-color-black); color: var(--brand-color-white); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-black-outline { background: transparent; color: var(--brand-color-black); border-color: var(--brand-color-black); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-black-white { background: var(--brand-color-white); color: var(--brand-color-black); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-white-outline { background: transparent; color: var(--brand-color-white); border-color: var(--brand-color-white); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-green-outline { background: transparent; color: var(--brand-color-irb-green); border-color: var(--brand-color-irb-green); }
:is(.woocommerce, .woocommerce-page) :is(a, button, input).btn-black-mint { background: var(--brand-color-mint); color: var(--brand-color-black); }

/* สถานะปิดใช้งานของปุ่ม — ใช้กับปุ่ม "แจ้งเตือนเมื่อวางขาย" ตอนยังไม่ได้ตั้ง URL LINE OA
   (ต้อง render เป็น <button disabled aria-disabled="true"> ไม่ใช่ <a href="#">) */
.btn[aria-disabled="true"],
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[aria-disabled="true"]:hover,
.btn:disabled:hover { transform: none; opacity: .45; }

/* ปุ่ม "ดูตะกร้า" ที่ Woo แปะต่อท้ายหลัง ajax add-to-cart สำเร็จ */
.ptile-cta .added_to_cart {
  display: inline-block; margin-top: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--brand-color-clover);
  text-decoration: underline; text-underline-offset: 3px;
}
/* ปุ่มลูปที่กำลังยิง ajax */
.ptile-cta .btn.loading { opacity: .6; pointer-events: none; }

/* B7.3 ตะกร้าใน header เป็น <a> (ไม่ใช่ <button>) เพื่อให้คลิกได้แม้ JS ไม่ทำงาน
   และตัวเลขอัปเดตผ่าน fragment span.irb-cart-count */
a.irb-cart { text-decoration: none; }
.irb-cart-count > span { display: block; }

/* B7.4 WordPress/WooCommerce ใช้ .screen-reader-text — map เข้ากับ .visually-hidden ของ design system */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static; width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* B7.5 skip link — a11y ของ header (2.3 จะ render ตัวจริง) */
.irb-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-color-hunter); color: var(--brand-color-white);
  padding: 12px 20px; border-radius: 0 0 var(--irb-radius-card) 0;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.irb-skip-link:focus { left: 0; }

/* B7.6 focus ที่มองเห็นได้ทั่วทั้งเว็บ (design system เดิมไม่ได้ประกาศไว้) */
:focus-visible { outline: 2px solid var(--brand-color-clover); outline-offset: 2px; }

/* B7.7 เคารพ prefers-reduced-motion — slider/carousel ทุกตัวอ่านค่านี้ใน JS ด้วย */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   B8) เฮดเดอร์มือถือ — ต้องพอดีจอ 320px (19.09.2026)
   ------------------------------------------------------------
   วัดบน Playground ที่ 320px: document.scrollWidth = 484 (โลโก้ตัวหนังสือ 287px ดันไอคอนออกนอกจอ)
   ต้นทาง §6 เขียนไว้สำหรับ markup ของ prototype จึงแก้ที่ชั้นนี้ ไม่แตะส่วนสำเนา
   ============================================================ */

/* B8.1 ปุ่มแว่นขยายของ searchform.php — prototype ไม่มีปุ่มนี้ (ทั้งก้อนเป็น <button class="irb-search">)
   ไม่ล้างสไตล์ปุ่มแล้วได้ขอบ/พื้นของเบราว์เซอร์ + ปุ่มหดเหลือ 4px เพราะ svg{max-width:100%}
   อิงความกว้างปุ่มที่ยังไม่รู้ค่า → ไอคอนล้นออกนอกปุ่ม */
.irb-search-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer;
}
.irb-search-btn svg { max-width: none; }

/* หน้า Woo ทุกหน้า (body.woocommerce-page): woocommerce-layout.css มี
   `.woocommerce-page img { height:auto; max-width:100% }` (0,1,1) ชนะ §6 `.irb-logo-img` (0,1,0)
   → โลโก้ไม่ได้สูง 28px แต่ยืดตามความกว้างกล่อง · กฎโลโก้ทั้งหมดในธีมจึงใช้ `.irb-header .irb-logo-img` (0,2,0) */
.irb-header .irb-logo-img { height: 28px; width: auto; max-width: none; }

@media (max-width: 1080px) {
  /* ช่องค้นหาเหลือแค่วงกลม → ให้ปุ่มเต็มวง กดได้ทั้งวง 40px (เท่าเบอร์เกอร์) ไม่ใช่แค่ไอคอน 16px */
  .irb-search { padding: 0; }
  .irb-search-btn { width: 40px; height: 40px; }

  /* B8.2 โลโก้หดได้เมื่อที่ไม่พอ แต่ "ไม่เบี้ยว" (เจ้าของ 07.09.2026)
     รูป: ความสูงคงที่ + object-fit:contain → กล่องแคบลงแล้วรูปย่อทั้งรูป อยู่กลางกล่อง ไม่บีบสัดส่วน (โลโก้กลางจอ 04.10.2026)
     ตัวหนังสือ (ไม่มีรูปโลโก้): ตัดเป็น … แทนการดันไอคอนออกนอกจอ
     เดสก์ท็อป (≥1081) ยังเป็น flex-shrink:0 ตาม §6 เพราะเมนูอยู่บรรทัดเดียวกับโลโก้ */
  .irb-logo {
    display: block; flex-shrink: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
  }
  .irb-header .irb-logo-img { max-width: 100%; object-fit: contain; object-position: center; height: clamp(24px, calc((100vw - 256px) * .228), 28px); } /* = [A] ≤1080 (กฎ B8 28px ตายตัวทับ [A]) */
}

/* B8.3 มือถือจอแคบ (≤359 เช่น 320) — บีบระยะก่อน แล้วค่อยย่อโลโก้ตามความสูง
   320: 40 เบอร์เกอร์ + 16 + 105 โลโก้ + 16 + 88 ไอคอน = 265 ≤ 280 ที่เหลือหลังหัก padding
   02.10.2026 เดิม ≤400 → ที่ 375/390 (iPhone) ระยะ 16px ทำให้โลโก้เยื้องจากต้นแบบ 12px
   360 ขึ้นไปใช้ระยะ 28px ของต้นแบบได้พอดี: 40 + 28 + 123 + 28 + 96 (ค้นหา 40 · 14 · ตะกร้า 42) = 315 ≤ 320 */
@media (max-width: 359px) {
  .irb-header .shell { gap: 8px; } /* 04.10.2026 grid โลโก้กลางจอ: ระยะแคบลง = ช่องซ้ายกว้างขึ้น โลโก้เยื้องน้อยลง (320: 17 → 8px) */
  .irb-actions { gap: 6px; }
  .irb-logo { font-size: 22px; }
  .irb-header .irb-logo-img { height: clamp(24px, 7.5vw, 28px); }
}

/* B8.4 ช่องค้นหาบนมือถือ/แท็บเล็ต (เจ้าของ 04.10.2026: "กดปุ่มค้นหาแล้วเหมือนไม่ทำงาน")
   §6 ซ่อนช่องพิมพ์ทุกฟอร์มที่ ≤1080 เหลือวงกลมแว่นขยาย ซึ่งกดแล้วส่งคำค้นว่างทันที
   → เฮดเดอร์: theme.js (initSearch) ใส่ .is-open แล้วฟอร์มกางเป็นแคปซูลทับแถวเฮดเดอร์ (.irb-header เป็น position:relative)
   → ฟอร์มในเนื้อหา (index.php หน้า "ไม่พบเนื้อหา"): คืนช่องพิมพ์ปกติ
   ช่องพิมพ์ 16px — iOS ซูมทั้งหน้าเมื่อโฟกัสช่องที่ตัวหนังสือเล็กกว่า 16px */
.irb-search-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--brand-color-black); cursor: pointer;
}
.irb-search-close svg { max-width: none; }
@media (max-width: 1080px) {
  .irb-header .irb-search.is-open {
    position: absolute; z-index: 45;
    top: 50%; left: var(--irb-pad); right: var(--irb-pad);
    transform: translateY(-50%);
    height: 48px; padding: 0 4px; gap: 2px;
    color: var(--brand-color-black); cursor: default;
    animation: irb-search-open .18s cubic-bezier(.23, 1, .32, 1);
  }
  .irb-header .irb-search.is-open input { display: block; height: 100%; font-size: 16px; }
  /* ของในแถวเฮดเดอร์ใต้แคปซูล (จุดจำนวนชิ้นของตะกร้าโผล่ตรงมุมโค้ง) → ซ่อนระหว่างเปิด · visibility = ไม่ขยับ layout */
  .irb-header:has(.irb-search.is-open) :is(.irb-burger, .irb-logo, .irb-cart) { visibility: hidden; }
  .irb-search:not(.irb-header .irb-search) { width: 100%; max-width: 420px; padding: 0 4px; }
  .irb-search:not(.irb-header .irb-search) input { display: block; height: 44px; font-size: 16px; }
}
@keyframes irb-search-open { from { opacity: 0; transform: translateY(-50%) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .irb-header .irb-search.is-open { animation: none; }
}

/* ============================================================
   B9) เปลือกเว็บบนหน้า WooCommerce + จอแล็ปท็อปแคบ (02.10.2026 — ตรวจเทียบต้นแบบ 1440/375)
   ============================================================ */

/* B9.1 โลโก้ฟุตเตอร์บนหน้า Woo ทุกหน้า (shop · หมวด · สินค้า · ตะกร้า · บัญชี)
   กับดักเดียวกับโลโก้เฮดเดอร์ (B8): `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }` (0,1,1)
   ชนะ §8 `.irb-footer-logo` (0,1,0) → โลโก้ขาวยืดเต็มคอลัมน์ 286×55 (เดสก์ท็อป) / 335×65 (มือถือ)
   หรือหายเป็น 0×0 ตอนรูป lazy ยังไม่โหลด — ต้นแบบสูง 32px เสมอ → ยกเป็น (0,2,0) */
.irb-footer .irb-footer-logo { height: 32px; width: auto; max-width: none; }

/* B9.2 เมนูหลักห้ามขึ้นสองบรรทัดบนเดสก์ท็อป
   §6 `.irb-nav-item { flex-wrap: wrap }` มีไว้ให้แผง accordion ลงบรรทัดใหม่ในมือถือ — บนจอกว้าง
   พอเมนูแคบ ลูกศรตกไปอยู่ใต้ชื่อหมวด เฮดเดอร์สูง 80 → 99px (ไทย 1081–1110 · EN 1081–1150 และ 1201–1230
   ต้นแบบเป็นเหมือนกัน) · แผงเดสก์ท็อปเป็น position:absolute จึงไม่ต้องใช้ wrap */
@media (min-width: 1081px) {
  .irb-nav-item { flex-wrap: nowrap; }
  .irb-nav > a,
  .irb-nav-item > a { white-space: nowrap; }
}
/* ช่วงบีบ (1081–1200) ตาม README §6: ช่องค้นหา 170px — `min-width:170px` ของ §6 ไม่มีผลกับฟอร์มจริงของธีม
   เพราะ <input> มีความกว้างตั้งต้นของมันเอง (ฟอร์มกว้าง 219px) → กำหนด width ตรง ๆ
   ชื่อเมนูอังกฤษยาวกว่าไทย ~50px (Robot vacuums and mops · Parts and accessories) → ลดระยะเมนูเฉพาะหน้า /en/ */
@media (min-width: 1081px) and (max-width: 1200px) {
  .irb-search { min-width: 0; width: 170px; }
  :root:lang(en) .irb-nav { gap: 16px; }
}
@media (min-width: 1201px) and (max-width: 1279px) {
  :root:lang(en) .irb-nav { gap: 20px; }
}

/* ============================================================
   B10) โทนตาม irobot.com (เจ้าของ 03.10.2026 — ต่างจากต้นแบบโดยตั้งใจ)
   ============================================================ */

/* B10.1 แถบประกาศบนสุด: sage #87A28E (ต้นแบบ) → jade #518A70 ตามแถบของ irobot.com
   ขาวบน jade คอนทราสต์ ~4.2:1 (ขาวบน sage เดิม ~2.6:1) — ลิงก์/ลูกศร/ไอคอนในแถบใช้ currentColor ขาวตามเดิม */
.irb-announce { background: var(--brand-color-jade); }

/* B10.2 ฟุตเตอร์เขียวเข้ม: ไม่มีมุมโค้งด้านบน (เดิม --irb-radius-card ตามต้นแบบ) */
.irb-footer { border-radius: 0; }

/* ============================================================
   B11) token เสริมของธีม (03.10.2026 — เข้าสู่ระบบแบบใหม่ LINE / OTP)
   ============================================================ */
:root {
  /* ปุ่ม "เข้าสู่ระบบด้วย LINE" — สีตามแนวทางแบรนด์ของ LINE (ห้ามใช้สีอื่นกับโลโก้ LINE) */
  --brand-color-line-rgb: 6, 199, 85;              /* #06C755 */
  --brand-color-line: rgb(var(--brand-color-line-rgb));
  /* ข้อความ/กรอบผิดพลาดของฟอร์ม — ต้นแบบไม่มี token สีแดง · คอนทราสต์บนขาว 6.6:1 */
  --irb-color-error-rgb: 179, 38, 30;              /* #B3261E */
  --irb-color-error: rgb(var(--irb-color-error-rgb));
}