/* ============================================================
   irobot-th-2026 — assets/css/plp.css
   ------------------------------------------------------------
   CSS เฉพาะหน้ารายการสินค้า (shop / product category / product tag / ผลค้นหาสินค้า)
   ที่มา: <style> ใน /irobot-web/plp/preview.html
   + เพิ่ม pagination ที่ prototype ไม่มี (prototype ไม่มีหน้า 2)

   โหลดหลัง design-system.css เสมอ (handle: irb-plp, deps: irb-design-system)
   คอมโพเนนต์ร่วม (.section, .section-head, .vp-grid, .robot-ph, breadcrumb,
   .ptile*) อยู่ใน design-system.css แล้ว — ห้ามประกาศซ้ำที่นี่

   🔴 filter/sort/pagination = query จริงฝั่ง server (WC_Query)
      CSS ชุดนี้ห้ามมี rule ที่ "ซ่อนการ์ด" ตามตัวกรอง (เช่น [hidden] ตาม data-cat)
   ทุกสีอ้างอิงจาก var(--brand-color-*) เท่านั้น ห้าม hex/rgb ฝังตรง
   ============================================================ */

/* ------------------------------------------------------------
   1) หัวหน้า category — H1 สองสี + copy SEO
   ------------------------------------------------------------ */
.plp-head {
  text-align: center; max-width: 760px; margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.plp-head h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; line-height: 1.2; }
.plp-head h1 .navy { color: var(--brand-color-navy); }
.plp-head h1 .jade { color: var(--brand-color-jade); }
.plp-head p { font-size: 16px; line-height: 1.65; color: rgba(var(--brand-color-black-rgb), .75); max-width: 64ch; }

/* ------------------------------------------------------------
   2) แถบเครื่องมือ: จำนวนสินค้า + filter chips + sort
   markup ประกอบจาก hook ของ Woo (woocommerce_before_shop_loop)
   .plp-count มาจาก loop/result-count.php ที่ override
   .plp-sort   มาจาก loop/orderby.php ที่ override (ยังเป็น <form> ของ Woo)
   ------------------------------------------------------------ */
.plp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 28px;
}
.plp-count,
.woocommerce .plp-count,
.woocommerce .woocommerce-result-count {
  font-size: 15px; font-weight: 600; color: var(--brand-color-gray); margin: 0; float: none;
}
.plp-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-left: auto; max-width: 100%;
}

/* -- filter chips: เป็น <a> ที่ยิง query arg จริง (filter_*) ไม่ใช่ปุ่มซ่อน DOM -- */
/* หมายเหตุ: การพับเก็บใช้ attribute [hidden] — กฎ [hidden]{display:none!important}
   อยู่ในชั้น SHARED ของ design-system.css แล้ว (ไม่ต้องประกาศซ้ำที่นี่) */
.plp-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--irb-font); font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--irb-radius-pill);
  border: 1.5px solid var(--brand-color-border);
  background: var(--brand-color-white); color: var(--brand-color-black);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--brand-color-black); }
/* chip ที่ถูกเลือกอยู่ = aria-current="true" (ไม่ใช่ aria-pressed — มันเป็นลิงก์ ไม่ใช่ปุ่ม toggle) */
.chip.is-active,
.chip[aria-current="true"] {
  background: var(--brand-color-black);
  border-color: var(--brand-color-black);
  color: var(--brand-color-white);
}

/* ปุ่มเปิด/ปิดแถบตัวกรองบนมือถือ (progressive enhancement — assets/js/plp.js) */
.plp-filter-toggle { display: none; }

/* -- sort: <form class="woocommerce-ordering"> ของ Woo (มี hidden field ที่ preserve filter_*) -- */
.plp-sort { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; }
.plp-sort select,
.woocommerce .plp-sort select,
.woocommerce .woocommerce-ordering select.orderby {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--irb-font); font-size: 14px; font-weight: 600;
  color: var(--brand-color-black); background: var(--brand-color-white);
  border: 1.5px solid var(--brand-color-border); border-radius: var(--irb-radius-pill);
  padding: 9px 40px 9px 18px; cursor: pointer;
}
.plp-sort select:hover { border-color: var(--brand-color-black); }
.plp-sort svg { position: absolute; right: 16px; pointer-events: none; }
/* ล้างสไตล์ของ woocommerce-general.css ที่ยังโหลดอยู่ (float: right + margin ก้อนใหญ่) */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { margin: 0; float: none; display: inline-flex; align-items: center; }
/* ปุ่มสำรองสำหรับกรณีไม่มี JS — plp.js จะซ่อนให้เมื่อ auto-submit ทำงานได้ */
.plp-sort-submit { margin-left: 10px; font-size: 14px; padding: 9px 18px; }
/* 🔴 `.btn` เป็น inline-flex ซึ่งชนะ attribute hidden — ต้องประกาศเองเหมือน .hero-dot[hidden] */
.plp-sort-submit[hidden] { display: none; }

/* ------------------------------------------------------------
   3) กริดสินค้า + แบนเนอร์ merchandising
   .plp-banner เป็น <li> ลูกของ <ul class="ptile-row"> (ไม่ใช่ <div>)
   ------------------------------------------------------------ */
.plp-products { padding-top: 0; }
.plp-banner {
  grid-column: 1 / -1;
  background: var(--brand-color-mint);
  border-radius: var(--irb-radius-card);
  padding: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.plp-banner h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; }
.plp-banner p { font-size: 15px; color: rgba(var(--brand-color-black-rgb), .75); max-width: 56ch; }

/* ระหว่างรอหน้าใหม่โหลด (คลิก chip / เปลี่ยน sort) — ตั้งโดย assets/js/plp.js */
.ptile-row.is-loading { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------
   4) Pagination — markup ของ Woo (woocommerce_pagination)
   <nav class="woocommerce-pagination"><ul class="page-numbers">…
   prototype ไม่มีส่วนนี้ (มีสินค้าหน้าเดียว) — ออกแบบตามชิป/ปุ่มของ design system
   ------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination {
  margin: clamp(32px, 5vw, 56px) 0 0;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; list-style: none; margin: 0; padding: 0;
  border: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li {
  display: block; float: none; margin: 0; padding: 0;
  border: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border-radius: var(--irb-radius-pill);
  border: 1.5px solid var(--brand-color-border);
  background: var(--brand-color-white); color: var(--brand-color-black);
  font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li a:focus {
  border-color: var(--brand-color-black);
  background: var(--brand-color-white);
  color: var(--brand-color-black);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li a.current {
  background: var(--brand-color-black);
  border-color: var(--brand-color-black);
  color: var(--brand-color-white);
}
.woocommerce nav.woocommerce-pagination ul li span.dots,
nav.woocommerce-pagination ul li span.dots {
  border-color: transparent; background: transparent;
  color: var(--brand-color-gray); min-width: 24px; padding: 0;
}

/* ------------------------------------------------------------
   5) อุปกรณ์เสริมแนะนำ (การ์ดเล็ก — ไม่ใช่ .ptile)
   ------------------------------------------------------------ */
.access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.access-card {
  border: 1px solid rgba(var(--brand-color-border-rgb), .3);
  border-radius: var(--irb-radius-card);
  padding: 18px; background: var(--brand-color-white);
  display: flex; flex-direction: column; gap: 10px;
}
.access-icon-wrap {
  aspect-ratio: 1 / .82; background: var(--brand-color-sand);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.access-icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.access-icon { width: 52px; height: 52px; }
.access-icon path, .access-icon rect, .access-icon circle {
  fill: none; stroke: var(--brand-color-hunter); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.access-name { font-size: 15px; font-weight: 600; line-height: 1.4; }
.access-price { font-size: 16px; font-weight: 700; }
.access-card .btn { font-size: 14px; padding: 10px 18px; }

/* ------------------------------------------------------------
   6) Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .access-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .plp-toolbar { flex-direction: column; align-items: flex-start; }
  .plp-controls { width: 100%; margin-left: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
  .plp-filters { width: 100%; min-width: 0; }
}
/* ------------------------------------------------------------
   empty state ของกริด (woocommerce/loop/no-products-found.php)
   โครงเดียวกับ .pdp-review-empty เพื่อให้กล่องว่างทั้งเว็บหน้าตาเหมือนกัน
   ------------------------------------------------------------ */
.plp-empty {
  background: var(--brand-color-sand);
  border-radius: var(--irb-radius-card);
  padding: clamp(28px, 5vw, 44px);
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; text-align: center;
}
.plp-empty p { font-size: 15px; line-height: 1.65; color: rgba(var(--brand-color-black-rgb), .78); }
.plp-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------
   การ์ด "เหตุผลที่ควรซื้อ" — ไอคอนที่เจ้าของอัปโหลดเอง
   (template-parts/home/why-buy.php · .vp-* อยู่ใน design-system.css B5 ซึ่งตั้ง
    width และ height ของ .vp-icon ไว้ 64px · 40px บนมือถือ — แบบหน้าแรก 06.10.2026)
   ------------------------------------------------------------ */
.vp-icon-wrap img.vp-icon { object-fit: contain; }

@media (max-width: 600px) {
  /* ptile-row ยุบเป็น scroll แนวนอน — แบนเนอร์กลายเป็นการ์ดหนึ่งใบในแถว */
  .plp-banner { grid-column: auto; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .access-grid { grid-template-columns: 1fr; }
  .plp-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--irb-pad) * -1); padding: 0 var(--irb-pad) 4px;
  }
  /* ตัวกรองพับเก็บได้บนมือถือ (เปิด/ปิดด้วย plp.js — ไม่มี JS = เปิดค้างไว้) */
  .plp-filter-toggle { display: inline-flex; }
  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span,
  nav.woocommerce-pagination ul li a,
  nav.woocommerce-pagination ul li span { min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; }
}

/* ------------------------------------------------------------
   7) หน้า /shop/: "รู้จักหุ่นยนต์ดูดฝุ่น" + คำถามที่พบบ่อย (template-parts/plp/shop-seo.php · 30.09.2026)
   ต้นแบบ irobot-web/plp/preview.html §6b (สไตล์ชุดเดียวกันใน <style> ของหน้านั้น)
   ลูกศร/เส้นคั่นของ FAQ ลอกจาก .pdp-faq-item ใน pdp.css — FAQ ทั้งเว็บหน้าตาเดียวกัน
   (pdp.css ไม่โหลดบน PLP จึงต้องมีชุดของตัวเอง)
   ------------------------------------------------------------ */
.plp-seo-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
  border-top: 1px solid rgba(var(--brand-color-border-rgb), .3);
  padding-top: clamp(40px, 5vw, 56px);
}
.plp-seo-grid h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.3; margin: 0 0 18px; }
.plp-seo-intro p { font-size: 15px; line-height: 1.7; color: rgba(var(--brand-color-black-rgb), .78); max-width: 60ch; margin: 0; }
.plp-seo-intro p + p { margin-top: 14px; }
.plp-seo-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; font-size: 15px; }
.plp-faq { border-top: 1px solid rgba(var(--brand-color-border-rgb), .3); }
.plp-faq-item { border-bottom: 1px solid rgba(var(--brand-color-border-rgb), .3); padding: 18px 0; }
.plp-faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--brand-color-black);
}
.plp-faq-item summary::-webkit-details-marker { display: none; }
.plp-faq-item summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--brand-color-clover); border-bottom: 2px solid var(--brand-color-clover);
  transform: rotate(45deg); transition: transform .2s ease;
}
.plp-faq-item[open] summary::after { transform: rotate(-135deg); }
.plp-faq-item summary:focus-visible { outline: 2px solid var(--brand-color-clover); outline-offset: 4px; border-radius: 4px; }
.plp-faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: rgba(var(--brand-color-black-rgb), .78); max-width: 68ch; }
.plp-faq-more { margin: 18px 0 0; font-size: 15px; }
@media (max-width: 900px) {
  .plp-seo-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plp-faq-item summary::after { transition: none; }
}

/* ------------------------------------------------------------
   8) การ์ดสินค้ายังไม่วางขาย — "เปิดตัวเร็ว ๆ นี้" เป็นบรรทัดเล็กสีเทาใต้ชื่อ (ต้นแบบใช้ .ptile-installment)
   markup = .ptile-price.ptile-soon > .now (inc/woocommerce.php › irb_woo_the_price_block)
   ------------------------------------------------------------ */
.ptile-price.ptile-soon .now { font-size: 13px; font-weight: 400; color: var(--brand-color-gray); }

/* ลิงก์ในการ์ด (inc/woocommerce.php › irb_loop_title / irb_loop_media_link — CSS ที่ค้างจาก TODO 2.4)
   ชื่อสินค้าเป็นลิงก์จริงแต่หน้าตาเหมือนต้นแบบ (ตัวดำ ไม่ขีดเส้นใต้) · รูปทั้งกล่องกดไปหน้าสินค้าได้ */
.ptile-name a { color: inherit; text-decoration: none; }
.ptile-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ptile-name a:focus-visible { outline: 2px solid var(--brand-color-clover); outline-offset: 2px; border-radius: 4px; }
.ptile-media-link { position: absolute; inset: 0; z-index: 1; }

/* section ท้ายกริดเรียงต่อกันโดยไม่เว้นช่องซ้อนสองชั้น (ต้นแบบ: style="padding-top:0" ทุก section หลังกริด) */
.plp-products ~ .section { padding-top: 0; }

/* ------------------------------------------------------------
   9) /shop/: แถบลิงก์ไปหน้าอะไหล่ (template-parts/plp/parts-band.php · ต้นแบบ plp/preview.html §8)
   ------------------------------------------------------------ */
.plp-access-band {
  background: var(--brand-color-sand);
  border-radius: var(--irb-radius-card);
  padding: clamp(24px, 3.5vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.plp-access-band h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.3; margin: 0; }
.plp-access-band p {
  font-size: 15px; line-height: 1.6; margin: 8px 0 0; max-width: 56ch;
  color: rgba(var(--brand-color-black-rgb), .75);
}
.plp-access-band .btn { flex-shrink: 0; }

/* ------------------------------------------------------------
   10) หน้าอะไหล่: "เลือกรุ่นของคุณ" (template-parts/plp/model-picker.php · ต้นแบบ plp/accessories.html §5)
   ไทล์เป็น <a> ไปหน้าหมวดของรุ่น — .is-active = รุ่นที่กำลังดู (หรือรุ่นแม่ของหมวดที่ดู)
   ------------------------------------------------------------ */
.mp {
  border-top: 1px solid rgba(var(--brand-color-border-rgb), .35);
  padding-top: 26px; margin-bottom: clamp(36px, 5vw, 56px);
}
.mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.mp-head h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.25; margin: 0; }
.mp-head p { font-size: 15px; line-height: 1.55; color: var(--brand-color-gray); max-width: 60ch; margin: 4px 0 0; }
.mp-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mp-head-side .mp-serial { font-size: 14px; margin: 0; max-width: none; color: var(--brand-color-black); }
.mp-group { padding: 18px 0 8px; }
.mp-group + .mp-group { border-top: 1px solid rgba(var(--brand-color-border-rgb), .25); }
.mp-group h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.mp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mp-tile {
  position: relative; font-family: var(--irb-font); text-align: center; text-decoration: none;
  background: var(--brand-color-white); color: var(--brand-color-black);
  border: 1.5px solid rgba(var(--brand-color-border-rgb), .55); border-radius: 16px;
  padding: 8px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mp-tile:hover { border-color: var(--brand-color-black); transform: translateY(-2px); }
.mp-tile:focus-visible { outline: 2px solid var(--brand-color-clover); outline-offset: 2px; }
.mp-tile.is-active { border-color: var(--brand-color-black); box-shadow: inset 0 0 0 1.5px var(--brand-color-black); }
.mp-img { width: 100%; aspect-ratio: 1 / 1; background: var(--brand-color-sand); border-radius: 12px; overflow: hidden; display: block; }
.mp-img img { width: 100%; height: 100%; object-fit: contain; padding: 5%; mix-blend-mode: multiply; display: block; }
.mp-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.mp-check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-color-black); color: var(--brand-color-white);
  display: none; align-items: center; justify-content: center;
}
.mp-tile.is-active .mp-check { display: flex; }

/* ------------------------------------------------------------
   11) หน้าอะไหล่: แถบผ่อน 0% + การ์ดช่วยเลือก (template-parts/plp/parts-help.php · ต้นแบบ §7–8)
   ------------------------------------------------------------ */
.acc-installment {
  background: var(--brand-color-hunter); color: var(--brand-color-white);
  border-radius: var(--irb-radius-card); padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: center;
}
.acc-installment-num { display: flex; flex-direction: column; line-height: 1; }
.acc-installment-num .big { font-size: clamp(44px, 6vw, 72px); font-weight: 700; letter-spacing: -.03em; color: var(--brand-color-irb-green); }
.acc-installment-num .sub { font-size: 14px; font-weight: 600; margin-top: 8px; opacity: .85; }
.acc-installment h2 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: inherit; }
.acc-installment p { font-size: 15px; line-height: 1.6; opacity: .88; max-width: 60ch; margin: 0; }
.acc-installment .btn { white-space: nowrap; }
.acc-help { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.acc-help-card {
  border: 1px solid rgba(var(--brand-color-border-rgb), .35); border-radius: var(--irb-radius-card);
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--brand-color-white);
}
.acc-help-card.sand { background: var(--brand-color-sand); border-color: transparent; }
.acc-help-card h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.3; margin: 0; }
.acc-help-card p { font-size: 15px; line-height: 1.6; color: rgba(var(--brand-color-black-rgb), .75); max-width: 56ch; margin: 0; }
.acc-help-card .btn, .acc-help-card .textlink { margin-top: 6px; }
.acc-help-card .btn svg { flex-shrink: 0; }

@media (max-width: 1100px) {
  .mp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .acc-help { grid-template-columns: 1fr; }
  .acc-installment { grid-template-columns: auto 1fr; }
  .acc-installment .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 700px) {
  .mp-head-side { align-items: flex-start; }
  /* แถวรูปหุ่นเลื่อนแนวนอน (กลุ่ม Roomba รุ่นก่อนหน้ามี 9 ใบ) — โครงเดียวกับต้นแบบ */
  .mp-row {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    margin: 0 calc(var(--irb-pad) * -1); padding: 2px var(--irb-pad) 8px; scrollbar-width: none;
    scroll-padding-inline: var(--irb-pad);
    -webkit-mask-image: linear-gradient(to right, var(--brand-color-black) 90%, transparent 100%);
    mask-image: linear-gradient(to right, var(--brand-color-black) 90%, transparent 100%);
  }
  .mp-row::-webkit-scrollbar { display: none; }
  .mp-tile { flex: 0 0 128px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  /* กริดอะไหล่บนมือถือ = 2 คอลัมน์ (ต้นแบบ .acc-grid) แทนแถวเลื่อนของ .ptile-row ใน design-system.css */
  .ptile-row.ptile-row--parts {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto;
    overflow-x: visible; scroll-snap-type: none; gap: 14px;
    margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  }
  .ptile-row--parts .ptile-body { padding: 14px 14px 16px; gap: 6px; }
  .ptile-row--parts .ptile-name { font-size: 15px; }
  .ptile-row--parts .ptile-price .now { font-size: 17px; }
  .ptile-row--parts .ptile-price .was { font-size: 13px; }
  .ptile-row--parts .ptile-cta .btn { font-size: 14px; padding: 11px 14px; }
  .ptile-row--parts .ptile-media .flag { top: 10px; left: 10px; }
}
@media (max-width: 560px) {
  .acc-installment { grid-template-columns: 1fr; }
  .acc-installment-num { flex-direction: row; align-items: baseline; gap: 12px; }
  .acc-installment-num .sub { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-tile { transition: none; }
  .mp-tile:hover { transform: none; }
}