/**
 * kl-shop.css — หน้าร้านและการ์ดสินค้า
 *
 * ยึดดีไซน์ .dp-root ตามมาตรฐานเดียวกับ formular-archive / plant-hub / crop-hub
 * ใส่ hex จริงเป็น fallback ทุกตัว — ห้ามพึ่ง var(--kl-*) ของธีมเปล่า ๆ (golden rule)
 *
 * ── สอง scope คนละหน้าที่ อย่าสลับกัน ───────────────────────────────────────
 * `.dp-root.klshop`      = หัวหน้า + ความกว้างหน้า — **มีเฉพาะหน้า /shop/**
 * `ul.products.klshop-grid` = การ์ดสินค้า — **มีทุกลูป** (หน้าหมวด, สินค้าที่เกี่ยวข้อง)
 *
 * token ต้องประกาศบน **ทั้งสองตัว** เพราะการ์ดโผล่นอกหน้า /shop/ ได้
 * เคยประกาศแต่ตัวแรกแล้วปุ่มบนหน้าหมวดกลายเป็นพื้นใส (var(--sig) ไม่มีค่า = invalid)
 */

.dp-root.klshop,
ul.products.klshop-grid {
  --ink1: var(--kl-blue, #0B4D8C);
  --ink2: var(--kl-text, #222222);
  --ink3: var(--kl-text-soft, #666666);
  --ink4: #97a4b1;
  --sig:  var(--kl-gold, #F4B400);
  --grn:  var(--kl-green, #4F772D);
  --grn-soft: var(--kl-green-soft, #eef7e8);
  --pp:   var(--kl-blue-soft, #F4F8FC);
  --pn:   #eaf1f8;
  --bd:   var(--kl-border, #e6edf3);
  --wh:   var(--kl-bg, #FAFAF7);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Sarabun', 'Noto Sans Thai', sans-serif;
  --shadow-sm: 0 4px 14px rgba(4, 80, 147, .05);
  /* ความกว้างหน้าร้าน — กว้างกว่าหน้าอื่นในเว็บโดยตั้งใจ (witt อนุมัติ 2 ก.ย. 2026)
   * เพราะต้องวางแถบกรองซ้าย + กริดหลายคอลัมน์ให้อยู่ในบรรทัดเดียวกัน */
  --klshop-max: 1320px;
}

.dp-root.klshop {
  box-sizing: border-box;
  font-family: var(--sans);
  color: var(--ink2);
  line-height: 1.8;
  font-size: 15px;
}

:where(.dp-root.klshop) *,
:where(.dp-root.klshop) *::before,
:where(.dp-root.klshop) *::after { box-sizing: border-box; }

/* ── แถบหัวเขียวของ parent ─────────────────────────────────────────────────
 * `plant/woocommerce.php` เรียก seed_banner_title() วาดแบนเนอร์เขียวทึบคำว่า "Shop"
 * (ชื่อเพจภาษาอังกฤษ) ไว้เหนือเนื้อหา · พอเราวาดหัว dp-root เองก็กลายเป็นหัวซ้อนสองชั้น
 * และแบนเนอร์เขียวเต็มแผ่นขัดมาตรฐานดีไซน์ที่เลิกใช้ hero เขียวไปแล้ว
 *
 * ซ่อนด้วย CSS ไม่ใช่ remove_action เพราะ parent **เรียกฟังก์ชันตรง ๆ ใน template**
 * ไม่ได้ผ่าน hook จึงถอดไม่ได้ · จำกัดขอบเขตด้วย body.woocommerce-shop = เฉพาะหน้าร้าน
 * P3 จะมาวาง hero ตัวจริงแทนที่ตรงนี้
 */
body.woocommerce-shop .main-header.-banner { display: none; }

/* ── ปลดเพดานความกว้างของ parent เฉพาะหน้าร้าน ──────────────────────────────
 * `.s-container.main-body` ของ parent จำกัด 1170px (เหลือเนื้อที่ใช้ได้ 1110px)
 * หน้านี้ต้องวางแถบกรอง 232px + กริด 4 คอลัมน์ในบรรทัดเดียวกัน จึงต้องกว้างกว่า
 * (witt อนุมัติ 2 ก.ย. 2026 ว่าหน้านี้กว้างกว่าหน้าอื่นในเว็บได้)
 * 1380 = เนื้อหา 1320 + padding ซ้ายขวาข้างละ 30 ของ parent
 */
body.woocommerce-shop .s-container.main-body { max-width: 1380px; }

/* ══ Hero ═══════════════════════════════════════════════════════════════════
 * รูปพื้นหลังมาจากกล่องกรอกบนเพจ Shop (KL_Shop_Hero_Fields) ส่งเข้ามาเป็น
 * custom property `--klshop-hero-bg` ทาง inline style — ไม่ยัด <style> ต่อหน้า
 * ไม่ใส่รูปก็ได้ จะตกลงมาเป็นพื้นเรียบสีฟ้าอ่อนเอง (คลาส has-bg ไม่ติด)
 */

/* พื้นหลังเต็มความกว้างจอ แต่ **ตัวหนังสือยังตรงแนวกับกริดสินค้า**
 *
 * ยืดตัว <header> เองด้วย margin ติดลบไม่ได้ เพราะเนื้อในจะไปจัดกึ่งกลางบน
 * "จอ" ขณะที่กริดสินค้าจัดกึ่งกลางบน "คอลัมน์เนื้อหา" — ต่างกันครึ่งความกว้าง
 * scrollbar (~7px) หัวเรื่องกับการ์ดใบแรกจะเยื้องกันแบบเห็นได้
 *
 * จึงยืดเฉพาะ "พื้นหลัง" ออกไปด้วย ::before ส่วนกล่องยังอยู่ใน flow ปกติ
 * ล้นออกนอกจอเล็กน้อยจาก scrollbar แต่ #page.site มี overflow-x:hidden รับไว้แล้ว
 * และมันเป็นแค่พื้นหลัง ไม่มีอะไรให้เห็นว่าถูกตัด
 */
.dp-root.klshop .klshop-hero {
  position: relative;
  border-bottom: 1px solid var(--bd);
}

.dp-root.klshop .klshop-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  background: var(--pp);
}

.dp-root.klshop .klshop-hero.has-bg::before {
  /* ไล่เฉดขาวทับฝั่งซ้ายให้ตัวหนังสืออ่านออกไม่ว่ารูปจะสว่างหรือมืด
   * ถ้าปล่อยรูปเปล่า ๆ พาดหัว navy จะจมกับภาพสวนที่เขียวเข้ม */
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 38%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.10) 100%),
    var(--klshop-hero-bg);
  background-size: cover;
  background-position: center;
}

.dp-root.klshop .klshop-hero-in {
  position: relative;   /* ต้องมี ไม่งั้นจมใต้ ::before */
  z-index: 1;
  max-width: var(--klshop-max, 1320px);
  margin: 0 auto;
  padding: 34px 16px 26px;
}

/* kicker: mono + ตัวเล็ก + เส้นใต้ทอง — ลายเซ็นของ dp-root */
.dp-root.klshop .klshop-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink1);
  border-bottom: 1.5px solid var(--sig);
  padding-bottom: 3px;
  margin: 0 0 10px;
}

.dp-root.klshop .klshop-h1 {
  font-size: clamp(1.5rem, 3vw + .3rem, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink1);
  line-height: 1.15;
  margin: 0;
}

/* บรรทัดที่ 2 ของพาดหัว — ขึ้นบรรทัดใหม่เสมอ ไม่ให้ไปห้อยท้ายบรรทัดแรก */
.dp-root.klshop .klshop-h1-b {
  display: block;
  color: var(--grn);
}

.dp-root.klshop .klshop-sub {
  font-size: 13.5px;
  color: var(--ink3);
  margin: 10px 0 0;
  max-width: 560px;
}

/* ── การ์ดทางลัดใน hero ─────────────────────────────────────────────────── */

.dp-root.klshop .klshop-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}

.dp-root.klshop .klshop-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink1);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease;
}

a.klshop-tile:hover {
  border-color: var(--sig);
  transform: translateY(-2px);
}

/* ── การ์ดแบบเน้น (ติ๊ก "เน้น" ในหลังบ้าน) ─────────────────────────────────
 * พื้นทองแบรนด์ ตัวหนังสือ navy ไอคอน "?" + ลูกศร — ใบชวนให้ทักมาถาม
 * กว้าง 2 ช่องตามภาพต้นแบบ จึงเด่นกว่าการ์ดทางลัดอื่นชัดเจน
 *
 * ทอง+navy คือชุดปุ่มหลักของเว็บอยู่แล้ว (ปุ่ม "ดูรายละเอียด" บนการ์ด /
 * ปุ่ม "ปรึกษาฟรีทางไลน์") — ใบนี้จึงอ่านเป็น "ปุ่ม" ทันที ต่างจากเขียวที่กลืน
 * กับปุ่มตะกร้าซึ่งเป็นคนละหน้าที่ · คอนทราสต์ navy บนทองก็สูงกว่าขาวบนเขียว
 */
.dp-root.klshop .klshop-tiles > li.is-cta { grid-column: span 2; }

.dp-root.klshop .klshop-tile.is-cta {
  background: var(--sig);
  border-color: var(--sig);
  color: var(--ink1);
  gap: 12px;
}

a.klshop-tile.is-cta:hover {
  border-color: var(--sig);
  filter: brightness(.94);   /* ทองสว่างอยู่แล้ว เพิ่มความสว่างจะซีดจนอ่านยาก */
  transform: translateY(-2px);
}

/* "?" ในวงกลมเส้นขอบ — วาดด้วย CSS ไม่ต้องมีไฟล์ภาพ */
.dp-root.klshop .klshop-tile-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--ink1);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink1);
}

.dp-root.klshop .klshop-tile.is-cta .klshop-tile-label { color: var(--ink1); }
.dp-root.klshop .klshop-tile.is-cta .klshop-tile-sub { color: rgba(11, 77, 140, .8); }

.dp-root.klshop .klshop-tile-go {
  width: 18px;
  height: 18px;
  flex: none;
  margin-left: auto;   /* ดันไปชิดขวาเสมอ ไม่ว่าข้อความจะสั้นยาว */
  color: var(--ink1);
}

.dp-root.klshop .klshop-tile-ic {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.dp-root.klshop .klshop-tile-tx {
  min-width: 0;
  overflow-wrap: anywhere;   /* ไทยไม่เว้นวรรค คำยาวดันการ์ดล้นจอได้ */
}

.dp-root.klshop .klshop-tile-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.dp-root.klshop .klshop-tile-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink3);
  line-height: 1.35;
}

/* ══ แถบโปรโมชั่น ═══════════════════════════════════════════════════════════
 * **ภาพเป็นพื้นหลังของทั้งบล็อก** ข้อความ+ปุ่มวางทับอยู่ข้างบน
 * (ไม่ใช่ภาพอยู่คอลัมน์ขวา — เคยทำแบบนั้นแล้วไม่ตรงกับที่ต้องการ)
 *
 * ข้อความจึงต้องมีฉากบังอ่าน: ไล่เฉดสีขาวทับฝั่งซ้ายด้วย ::after ของ .fig
 * เทคนิคเดียวกับ hero · ทึบซ้าย → ใสขวา ภาพจึงยังเห็นชัดฝั่งขวา
 * ⇒ **องค์ประกอบสำคัญของภาพควรอยู่ครึ่งขวา**
 *
 * มือถือใช้คนละโครง (ดู media query ท้ายไฟล์) — witt ยืนยันว่าแบบเรียงลง
 * ข้อความ → ภาพ → ปุ่ม ใช้ได้ดีแล้ว การเอาข้อความทับภาพบนจอแคบจะอ่านยาก
 */
.dp-root.klshop .klshop-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 60%);
  grid-template-areas:
    "tx"
    "cta";
  align-content: center;
  min-height: 300px;
  max-width: var(--klshop-max, 1320px);
  margin: 20px auto 0;
  padding: 0;
  overflow: hidden;              /* ตัดมุมภาพตามรัศมีแถบ */
  background: #fff;              /* พื้นสำรองตอนยังไม่ใส่ภาพ */
  border: 1px solid var(--bd);   /* เทาจาง — ชุดเดียวกับขอบการ์ดสินค้า */
  border-radius: 16px;
}

/* ภาพ + ฉากบังอ่าน — อยู่ใต้ข้อความทั้งหมด */
.dp-root.klshop .klshop-promo-fig {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dp-root.klshop .klshop-promo-fig picture {
  position: absolute;
  inset: 0;
  display: block;
}

.dp-root.klshop .klshop-promo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dp-root.klshop .klshop-promo-fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .93) 38%,
    rgba(255, 255, 255, .55) 62%,
    rgba(255, 255, 255, .08) 100%
  );
}

/* เนื้อหาต้องลอยเหนือภาพ */
.dp-root.klshop .klshop-promo-tx {
  grid-area: tx;
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 26px;
}

.dp-root.klshop .klshop-promo-kick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #a32d2d;
  margin: 0 0 7px;
}

.dp-root.klshop .klshop-promo-ic {
  width: 16px;
  height: 16px;
  flex: none;
}

.dp-root.klshop .klshop-promo-h {
  font-size: clamp(1.15rem, 1.8vw + .3rem, 1.7rem);
  font-weight: 800;
  color: var(--ink1);
  margin: 0;
  line-height: 1.25;
}

.dp-root.klshop .klshop-promo-sub {
  font-size: 13.5px;
  color: var(--ink3);
  margin: 8px 0 0;
}

/* ปุ่มทอง ตัวหนังสือ navy — ชุดเดียวกับปุ่ม "ดูรายละเอียด" และแถบวินิจฉัย */
.dp-root.klshop .klshop-promo-cta {
  grid-area: cta;
  position: relative;
  z-index: 1;
  justify-self: start;
  margin: 18px 26px 0;
  padding: 11px 24px;
  border-radius: 10px;
  background: var(--sig);
  color: var(--ink1);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease;
}

.dp-root.klshop .klshop-promo-cta:hover { filter: brightness(.94); }

@media (max-width: 560px) {
  .dp-root.klshop .klshop-hero-in { padding: 24px 16px 20px; }
  /* จอแคบ: เลิกซ้อนข้อความบนภาพ — เรียงลงเป็น ข้อความ → ภาพ → ปุ่ม
   * ทับกันบนจอแคบแล้วอ่านไม่ออก และภาพก็โดนข้อความบังจนไม่เหลืออะไรให้ดู */
  .dp-root.klshop .klshop-promo {
    grid-template-columns: 1fr;
    grid-template-areas: "tx" "fig" "cta";
    align-content: start;
    min-height: 0;
    margin-top: 16px;
    padding-top: 18px;
  }
  .dp-root.klshop .klshop-promo-tx { padding: 0 18px; }
  .dp-root.klshop .klshop-promo-fig {
    grid-area: fig;
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    margin-top: 16px;
  }
  .dp-root.klshop .klshop-promo-fig::after { content: none; }  /* ไม่มีข้อความทับ = ไม่ต้องมีฉากบัง */
  .dp-root.klshop .klshop-promo-cta {
    justify-self: stretch;
    text-align: center;
    margin: 16px 18px 18px;
  }
}

/* ── กริดสินค้า ────────────────────────────────────────────────────────────
 * ของเดิม (woocommerce-custom.css) เป็น auto-fit minmax(250px,1fr) ไม่มีเพดาน
 * → จอ 1920px ยืดสินค้า 4 ชิ้นเป็นแถวเดียวเต็มจอ การ์ดบานจนดูโล่ง
 * ตรึงความกว้างและล็อกจำนวนคอลัมน์แทน (P3 จะมาจัดการ์ดต่อ)
 */

/* selector เดียวพอ และ **ต้องเดียว** — เคยเขียนเผื่อไว้ 3 ตัวรวม
 * `.woocommerce .dp-root.klshop ul.products` ซึ่งแมตช์จริง (body มี class `woocommerce`)
 * ด้วยน้ำหนัก (0,4,1) แล้วไปทับ media query ข้างล่างที่เป็น (0,3,1) → มือถือค้าง 3 คอลัมน์
 * ให้ base กับ media query ใช้ selector เดียวกันเป๊ะเสมอ */
.dp-root.klshop ul.products {
  /* ⚠️ ต้องประกาศ display + width ด้วย — parent theme `woo.css` ตั้ง
   *    `.products{ display:flex; width:calc(100% + 2 * var(--s-space)) }` ไว้
   *    **แบบไม่มี media query** · ตอนแรกไม่ได้ override `width` กล่องจึงกว้างเกิน
   *    พ่อแม่ 32px แล้ว `margin:0 auto` ถูกเบราว์เซอร์บีบเป็น margin-right:-32px
   *    (over-constrained) → กริดล้นขอบเฉพาะมือถือ
   *    desktop รอดเพราะ parent มีกฎ width:100% ทับอีกชั้นเฉพาะ min-width:992px */
  display: grid;
  width: auto;
  max-width: var(--klshop-max, 1320px);
  margin: 0 auto;
  padding: 8px 16px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .dp-root.klshop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dp-root.klshop ul.products { grid-template-columns: 1fr; gap: 1rem; }
}

/* แถบผลลัพธ์ + ตัวเรียงลำดับ ให้อยู่ในกรอบเดียวกับกริด */
.dp-root.klshop .woocommerce-result-count,
.dp-root.klshop .woocommerce-ordering {
  max-width: var(--klshop-max, 1320px);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ══ การ์ดสินค้า (P2) ═══════════════════════════════════════════════════════
 *
 * ⚠️ บล็อกนี้ **ห้ามผูกกับ `.klshop`** — `content-product.php` ถูกใช้ร่วมกัน
 * ทุกลูปสินค้า (หน้าหมวด · สินค้าที่เกี่ยวข้องท้ายหน้าสินค้าเดี่ยว · shortcode)
 * แต่ `.klshop` มีเฉพาะหน้า /shop/ · ตอนแรกเขียนผูกไว้ แล้วหน้าหมวดได้ markup ใหม่
 * มาแบบไม่มี CSS เลย — การ์ด 12 ใบเรียงเปล่า
 *
 * จึงผูกกับ `ul.products.klshop-grid` แทน ซึ่ง KL_Shop_Archive::loop_start()
 * ติดให้ทุกลูป · น้ำหนัก (0,3,2) เท่าเดิม พอชนะทั้ง woocommerce-custom.css
 * (`.woocommerce ul.products li.product` = 0,2,2) และ kirki ของ parent
 * (`.products .product` = 0,2,0)
 */

ul.products.klshop-grid li.product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 0;                 /* เดิม 1.5rem — ทำให้รูปลอยไม่ชนขอบการ์ด */
  margin: 0;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}

ul.products.klshop-grid li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(4, 80, 147, .10);
}

/* ลิงก์ที่ Woo ครอบรูป+ชื่อ+ราคา — ให้ยืดเต็มความสูงการ์ด ปุ่มท้ายจะได้เรียงตรงกัน */
ul.products.klshop-grid li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

/* ── รูป ─────────────────────────────────────────────────────────────────── */

ul.products.klshop-grid .klshop-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f5f7f9;
  overflow: hidden;
  /* flex item ย่อได้เป็นค่าเริ่มต้น → การ์ดที่เนื้อหายาวจะบีบรูปให้เตี้ยลง
   * (วัดได้ 338×328 แทนที่จะเป็นจัตุรัส) ทำให้รูปแต่ละใบสูงไม่เท่ากันทั้งแถว */
  flex: 0 0 auto;
}

ul.products.klshop-grid .klshop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
}

/* ── ป้าย ────────────────────────────────────────────────────────────────────
 * ซ้ายบน = สถานะสินค้าของเรา · ขวาบน = ส่วนลดของ Woo · อย่างละใบเท่านั้น
 */

ul.products.klshop-grid .klshop-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

ul.products.klshop-grid .klshop-badge.is-oos  { background: #8a94a0; }
ul.products.klshop-grid .klshop-badge.is-low  { background: #d98324; }
ul.products.klshop-grid .klshop-badge.is-hot  { background: #c0392b; }
ul.products.klshop-grid .klshop-badge.is-pick { background: var(--sig); color: var(--ink1); }
ul.products.klshop-grid .klshop-badge.is-new  { background: var(--grn); }

/* ป้ายส่วนลดของ Woo — ย้ายมาขวาบน ทรงเดียวกับป้ายซ้าย */
ul.products.klshop-grid li.product .onsale {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
}

/* ซ้ำกับ .onsale ที่บอกเปอร์เซ็นต์เดียวกัน — ของเดิมขึ้นซ้อนกันสองใบมุมขวาบน
 * (ตัว handler ยังต้องทำงานอยู่ เพราะเขียน meta ให้ตัวเลือกเรียง "ส่วนลดมากที่สุด") */
ul.products.klshop-grid .discount-badge { display: none; }

/* ── เนื้อการ์ด ──────────────────────────────────────────────────────────── */

ul.products.klshop-grid .klshop-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 14px 14px 10px;
}

ul.products.klshop-grid li.product h2.woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink1);
  margin: 0;
  padding: 0;
  min-height: 0;              /* เดิมล็อก 3.6rem ไว้ ทำให้การ์ดชื่อสั้นมีรูโหว่ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* บรรทัดบรรยาย — แอดมินกรอกที่ตัวสินค้า (afsh_card_tagline) */
ul.products.klshop-grid .klshop-tag {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── ชิป "เหมาะกับ" (afsh_card_benefits) ─────────────────────────────────────
 * ในบล็อกชุดโปรแกรมของปลั๊กอินเป็นลิสต์แนวตั้ง แต่ในกริด 3 คอลัมน์แคบเกินไป
 * จึงทำเป็นชิปแนวนอนตัดบรรทัดแทน · ไม่ reuse CSS ของปลั๊กอินเพราะกฎที่นั่น
 * scope ใต้ `.kl-brandsys.kl-brandsys` ซึ่งการ์ดนี้ไม่ได้อยู่ข้างใน
 */

ul.products.klshop-grid .klshop-bens {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
}

ul.products.klshop-grid .klshop-ben {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pn);
  color: var(--ink1);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 100%;
}

ul.products.klshop-grid .klshop-ben .kl-brandsys-bi {
  display: block;
  width: 13px;
  height: 13px;
  flex: none;
}

ul.products.klshop-grid .klshop-ben-tx { min-width: 0; }

/* ── ราคา + ดาว ─────────────────────────────────────────────────────────── */

ul.products.klshop-grid .klshop-meta { margin-top: auto; padding-top: 6px; }

/* !important จำเป็นจริง — woocommerce-custom.css:38 ประกาศ
 * `.woocommerce ul.products li.product .price { color:#265902 !important }`
 * ไว้ก่อน · specificity ของเราสูงกว่าอยู่แล้ว (0,5,2 vs 0,4,2) แต่แพ้ !important
 * ไม่ไปถอด !important ที่ไฟล์นั้นเพราะมันคุมหน้าหมวดสินค้า/หน้าสินค้าเดี่ยวด้วย
 * ซึ่งยังไม่อยู่ในขอบเขตรอบนี้ — ถอดทีเดียวตอนจบ P3 */
ul.products.klshop-grid li.product .price {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--grn) !important;
  margin: 0;
}

ul.products.klshop-grid li.product .price del {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink4);
  margin-right: 6px;
}

ul.products.klshop-grid li.product .price ins {
  text-decoration: none;
  color: var(--grn);
}

/* ดาวจะโผล่ก็ต่อเมื่อมีรีวิวจริง — loop/rating.php ของ Woo เงียบเองเมื่อยังไม่มี */
ul.products.klshop-grid li.product .star-rating {
  font-size: 12px;
  margin: 0 0 4px;
  color: var(--sig);
}

/* ── ปุ่ม ────────────────────────────────────────────────────────────────────
 * ปุ่มหยิบใส่ตะกร้าบนหน้า archive **ซ่อนโดยตั้งใจ** (witt ยืนยัน 1 ก.ย. 2026)
 * ของเดิมซ่อนด้วย Customizer ซึ่งมีเฉพาะ prod → docker เห็นไม่ตรงกับของจริง
 * ย้ายมาซ่อนที่นี่ให้ทั้งสองที่เหมือนกัน · ครอบ .button ด้วยเพราะสินค้า variable
 * ขึ้นเป็น "เลือกรูปแบบ" ที่ใช้คลาสต่างกัน
 */
ul.products.klshop-grid li.product .add_to_cart_button,
ul.products.klshop-grid li.product a.button {
  display: none !important;
}

ul.products.klshop-grid .klshop-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;                /* ระยะขอบย้ายไปอยู่ที่ .klshop-foot ที่ครอบอยู่ */
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--sig);
  color: var(--ink1);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .2s ease;
}

ul.products.klshop-grid .klshop-cta:hover { filter: brightness(.94); }

/* ══ ส่วนท้ายหน้าร้าน (P3) ═══════════════════════════════════════════════════
 * แถบ "เลือกตามสิ่งที่ต้องการดูแล" ของ mockup ถูกตัดออกโดยตั้งใจ — หมวดสินค้าจริง
 * มีของแค่ 2 จาก 6 หมวด แถบนั้นจะได้ช่องที่กดแล้วเจอหน้าว่าง 4 ช่อง
 * แทนด้วยเนื้อหาที่เรามีจริง: คู่มือพืช 12 ต้น + ทางเข้าตัววินิจฉัย
 */

.dp-root.klshop .klshop-sec {
  max-width: var(--klshop-max, 1320px);
  margin: 0 auto;
  padding: 0 16px 28px;
}

.dp-root.klshop .klshop-sec-h {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink1);
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd);
}

.dp-root.klshop .klshop-sec-sub {
  font-size: 13px;
  color: var(--ink3);
  margin: 8px 0 14px;
  max-width: 620px;
}

/* ── เลือกตามพืชที่ปลูก ───────────────────────────────────────────────────
 * การ์ดรูปภาพแนวตั้ง ยกโครงจากการ์ด "คู่มือพืช" หน้าแรก (.wb-plant) ให้สองหน้า
 * หน้าตาเดียวกัน · เดิมเป็นชิปแนวนอนวงกลม 36px — witt สั่งให้ภาพใหญ่ขึ้นและ
 * ใช้พื้นที่เต็มบนมือถือ (3 ก.ย. 2569)
 *
 * คอลัมน์ตายตัว ไม่ใช่ auto-fill: หน้าร้านกว้างได้ถึง 1320px ถ้าใช้ auto-fill
 * minmax(160px) จะได้ 8 คอลัมน์ การ์ดผอมจนภาพ 4:3 เล็กกว่าชิปเดิมอีก
 */

/* ── ช่องค้นหาพืช ─────────────────────────────────────────────────────────
 * การ์ดข้างล่างมีแค่พืชหลักที่ติ๊กไว้ ช่องนี้คือทางไปหาพืชที่เหลือ
 * สคริปต์กลาง js/kl-plant-search.js · คลาสส่งเข้าไปทาง data-* จึงตั้งชื่อเองได้
 */

.dp-root.klshop .klshop-ps {
  position: relative;
  max-width: 420px;
  margin: 0 0 14px;
}

.dp-root.klshop .klshop-ps-ic {
  position: absolute;
  right: 12px;
  top: 19px;               /* กึ่งกลางช่อง input สูง 38px — ไม่ใช้ translate เพราะ
                              กล่องนี้สูงไม่คงที่ (มี dropdown ซ้อนอยู่ด้วย) */
  transform: translateY(-50%);
  color: var(--ink4);
  line-height: 0;
  pointer-events: none;
}

.dp-root.klshop .klshop-ps-ic svg { width: 16px; height: 16px; display: block; }

.dp-root.klshop .klshop-ps-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 36px 8px 13px;
  border: 1.5px solid var(--bd2, #b5c9dc);
  border-radius: 8px;
  background: #fff;
  color: var(--ink2);
}

.dp-root.klshop .klshop-ps-input:focus { outline: none; border-color: var(--ink1); }
.dp-root.klshop .klshop-ps-input::placeholder { color: var(--ink4); }

.dp-root.klshop .klshop-ps-dd {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--bd2, #b5c9dc);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(4, 80, 147, .12);
  max-height: 300px;
  overflow-y: auto;
}

.dp-root.klshop .klshop-ps-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink2);
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--bd);
  cursor: pointer;
}

.dp-root.klshop .klshop-ps-item:last-child { border-bottom: none; }
.dp-root.klshop .klshop-ps-item:hover { background: var(--grn-soft); color: var(--grn); }
.dp-root.klshop .klshop-ps-item::before { content: "🌿"; font-size: 13px; opacity: .7; }

.dp-root.klshop .klshop-ps-note {
  font-size: 13px;
  color: var(--ink3);
  padding: 12px 14px;
  text-align: center;
}

.dp-root.klshop .klshop-crop-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .dp-root.klshop .klshop-crop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* มือถือ 2 คอลัมน์ (witt ยืนยัน) — 1 คอลัมน์ภาพจะใหญ่จนต้องเลื่อน 10 หน้าจอ */
@media (max-width: 640px) {
  .dp-root.klshop .klshop-crop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dp-root.klshop .klshop-crop {
  display: block;
  height: 100%;
  padding: 8px 8px 10px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink1);
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1),
              transform .25s cubic-bezier(.16, 1, .3, 1),
              box-shadow .25s cubic-bezier(.16, 1, .3, 1);
}

.dp-root.klshop .klshop-crop:hover {
  border-color: var(--grn);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(4, 80, 147, .10);
}

.dp-root.klshop .klshop-crop-ic {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--grn-soft);
}

.dp-root.klshop .klshop-crop-ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* พืชที่ยังไม่ได้ใส่ภาพจริง — ทำให้ภาพวาดดู "ตั้งใจออกแบบมาแบบนี้" ไม่ใช่
 * รูปโหลดไม่ขึ้น: ภาพวาดลอยกลางพื้นเขียวอ่อนพร้อมวงในบาง ๆ
 * ใช้คลาส is-draw จาก PHP ไม่ใช่ :has() — PHP รู้อยู่แล้วว่ามีรูปไหม
 * ไม่ต้องฝากความหวังไว้กับ selector ที่เบราว์เซอร์เก่าไม่รองรับ */
.dp-root.klshop .klshop-crop-ic.is-draw {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(79, 119, 45, .16);
}

.dp-root.klshop .klshop-crop-ic .dp-crop-svg {
  width: 56%;
  height: 56%;
  display: block;
}

.dp-root.klshop .klshop-crop-tx {
  display: block;
  margin-top: 8px;
  line-height: 1.35;
}

.dp-root.klshop .klshop-crop-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink1);
}

.dp-root.klshop .klshop-crop-n {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink4);
  margin-top: 2px;
}

/* พืชที่ยังไม่มีหน้าลูก = ไม่มีตัวเลข — ใส่ทางไปต่อแทนช่องว่างใต้ชื่อ */
.dp-root.klshop .klshop-crop-n.is-go {
  color: var(--grn);
  font-weight: 600;
}


/* ══ สินค้าแนะนำ — carousel เลื่อนแนวนอน ═════════════════════════════════════
 * เลื่อนด้วย overflow-x + scroll-snap ไม่ใช้ไลบรารี · ปุ่มลูกศรเรียก scrollBy
 * ไม่มี JS ก็ยังปัดนิ้ว/เลื่อน trackpad ได้ตามปกติ ปุ่มเป็นของเสริมเท่านั้น
 */

/* margin-top เยอะกว่า section อื่น — ตัวบนคือแถบโปรโมชั่นที่มีขอบและพื้นของตัวเอง
 * ชิดกันเกินไปจะอ่านเป็นก้อนเดียวกัน แยกไม่ออกว่าคนละส่วน */
.dp-root.klshop .klshop-feat {
  margin-top: 34px;
  padding-bottom: 8px;
}

.dp-root.klshop .klshop-feat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* หัวข้อกับคำบรรยายอยู่บรรทัดเดียวกัน ไม่ใช่ซ้อนกันสองชั้น */
.dp-root.klshop .klshop-feat-h {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink1);
  margin: 0;
  border: 0;
  padding: 0;
}

.dp-root.klshop .klshop-feat-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink3);
  margin-left: 10px;
}

.dp-root.klshop .klshop-feat-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dp-root.klshop .klshop-feat-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink1);
  text-decoration: none;
  margin-right: 4px;
}

.dp-root.klshop .klshop-feat-all:hover { text-decoration: underline; }

/* reset ปุ่มของ parent theme (`.wrapper button` = 0,1,1 ชนะ class เดี่ยว) */
.dp-root.klshop .klshop-feat-arrow {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 50%;
  color: var(--ink1);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.dp-root.klshop .klshop-feat-arrow:hover {
  border-color: var(--ink1);
  background: var(--pn);
}

.dp-root.klshop .klshop-feat-arrow svg { width: 16px; height: 16px; }

/* ── ราง carousel ────────────────────────────────────────────────────────────
 * override กริดของ .klshop-grid ให้เป็นแถวเลื่อนแทน — การ์ดข้างในยังใช้สไตล์
 * เดิมทั้งหมด ไม่ต้องเขียนการ์ดใหม่
 */
/* ⚠️ ต้องมี `.dp-root.klshop` นำหน้า — กฎกริดหลัก `.dp-root.klshop ul.products`
 * หนัก (0,3,1) ถ้าเขียนแค่ `ul.products.klshop-feat-track` (0,2,1) จะแพ้
 * แล้วรางยังเป็น grid 3 คอลัมน์ 2 แถว เลื่อนไม่ได้ (บั๊กคลาสเดียวกับตอนทำกริดมือถือ) */
.dp-root.klshop ul.products.klshop-feat-track {
  display: flex;
  /* parent `woo.css` ตั้ง `.products{ flex-wrap: wrap }` ไว้ — ไม่สั่ง nowrap ทับ
   * การ์ดจะตัดขึ้นบรรทัดใหม่แทนที่จะเรียงยาวให้เลื่อน (ได้ 2 แถว เลื่อนไม่ได้) */
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: 16px;
  padding: 4px 16px 14px;
  overflow-x: auto;
  /* สั่งความนุ่มที่ CSS ไม่ใช่ที่ JS — กำหนด scrollLeft ตรง ๆ แล้วเบราว์เซอร์
   * จะเลื่อนให้นุ่มเอง และถอยเป็นกระโดดทันทีถ้าไม่รองรับ · เชื่อถือได้กว่า
   * scrollBy({behavior:'smooth'}) ที่บางเบราว์เซอร์เพิกเฉย */
  scroll-behavior: smooth;
  /* proximity ไม่ใช่ mandatory — mandatory จะยกเลิกการเลื่อนแบบ smooth ที่ปุ่ม
   * ลูกศรสั่ง (ทดสอบแล้ว: scrollBy แบบ instant ขยับ แต่ behavior:'smooth' ค้างที่เดิม)
   * proximity ยังสแนปให้ตอนปัดนิ้ว/เลื่อน trackpad เหมือนเดิม */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.dp-root.klshop ul.products.klshop-feat-track > li.product {
  flex: 0 0 232px;
  max-width: 232px;
  scroll-snap-align: start;
}

@media (max-width: 560px) {
  .dp-root.klshop .klshop-feat { margin-top: 26px; }
  .dp-root.klshop ul.products.klshop-feat-track > li.product { flex-basis: 76%; max-width: 76%; }
  .dp-root.klshop .klshop-feat-sub { display: block; margin: 4px 0 0; }

  /* การ์ดแคบเกินกว่าจะวางปุ่มสองตัวเรียงกัน — "ดูรายละเอียด" ถูกบีบจนตัดสองบรรทัด
   * แยกคนละแถว ทั้งคู่ได้ความกว้างเต็มและกดง่ายด้วยนิ้วโป้ง */
  .dp-root.klshop .klshop-foot { flex-direction: column; }
}

/* ── ปุ่มตะกร้า — เฉพาะรางนี้ ────────────────────────────────────────────────
 * กฎซ่อนปุ่มตะกร้าอยู่ที่ `ul.products.klshop-grid li.product .add_to_cart_button`
 * (0,3,2) + !important · ต้องหนักกว่านั้นถึงจะเปิดคืนได้เฉพาะที่นี่
 */
.dp-root.klshop ul.products.klshop-feat-track li.product .klshop-cart,
.dp-root.klshop ul.products.klshop-feat-track li.product a.button.klshop-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: var(--grn);
  /* ข้อความปุ่มถูกซ่อนไว้ ไอคอนวาดด้วย mask — screen reader ยังอ่าน aria-label
   * ที่ Woo ใส่มาให้ ("Add to cart: ...") จึงไม่เสีย accessibility */
  font-size: 0;
  line-height: 0;
  color: transparent;
  position: relative;
}

.dp-root.klshop ul.products.klshop-feat-track li.product .klshop-cart::before {
  content: '';
  width: 19px;
  height: 19px;
  background: #fff;
  -webkit-mask: var(--klshop-cart-ic) center / contain no-repeat;
  mask: var(--klshop-cart-ic) center / contain no-repeat;
}

.dp-root.klshop ul.products.klshop-feat-track li.product .klshop-cart:hover { filter: brightness(1.1); }

/* ไอคอนตะกร้า Tabler (MIT) เป็น data-URI — CSP บล็อก CDN จึงฝังมาเลย */
.dp-root.klshop ul.products.klshop-feat-track {
  --klshop-cart-ic: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17' cy='19' r='2'/%3E%3Cpath d='M17 17h-11v-14h-2'/%3E%3Cpath d='M6 5l14 1l-1 7h-13'/%3E%3C/svg%3E");
}

/* แถวปุ่มท้ายการ์ด — "ดูรายละเอียด" ยืด ปุ่มตะกร้าคงขนาด */
.dp-root.klshop .klshop-foot,
ul.products.klshop-grid li.product .klshop-foot {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 14px 14px;
}

ul.products.klshop-grid li.product .klshop-cta {
  flex: 1 1 auto;
  margin: 0;
}

/* ⚠️ ต้องอยู่ "ท้ายไฟล์" — กฎฐานของ .klshop-cart (width:40px) ถูกเขียนไว้ล่างกว่า
 * media query ของราง ถ้าใส่ไว้ตรงนั้นจะแพ้ลำดับทั้งที่ selector เท่ากัน */
@media (max-width: 560px) {
  /* จอแคบปุ่มอยู่คนละแถวและกว้างเต็มการ์ด — ไอคอนเปล่ากลางแถบเขียวยาว ๆ
   * ไม่บอกว่ากดแล้วเกิดอะไร · โชว์ข้อความด้วยให้เหมือนปุ่มใน section โปรแกรม
   * (desktop ยังเป็นไอคอนเปล่า เพราะปุ่มแคบ 40px วางข้าง "ดูรายละเอียด") */
  .dp-root.klshop ul.products.klshop-feat-track li.product .klshop-cart,
  .dp-root.klshop ul.products.klshop-feat-track li.product a.button.klshop-cart {
    width: 100%;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
  }
}

/* ══ section "ผลิตภัณฑ์ทั้งหมด" — หัว + ชิปเรียง + ปุ่มความหนาแน่น ═══════════ */

/* padding-bottom ต้องมี — **ห้ามพึ่งระยะจากแถบเลขหน้า**
 *
 * เดิมบล็อกนี้จบที่ขอบกริดพอดี (padding-bottom: 0) ระยะก่อนหัวข้อถัดไปจึงมาจาก
 * margin ของ `.woocommerce-pagination` ล้วน ๆ · แถบเลขหน้าโผล่ก็ต่อเมื่อสินค้า
 * เกิน 1 หน้า → **ร้านที่สินค้ายังไม่ครบหน้า หัวข้อถัดไปแปะติดกริดเลย**
 * (docker 18 ชิ้น = มีเลขหน้า เห็นสวย · staging 4 ชิ้น = ไม่มี ชิดติดกัน —
 *  witt เจอ 3 ก.ย. 2569 · บั๊กที่ดูแต่เครื่อง dev ไม่มีทางเห็น)
 *
 * ให้บล็อกถือระยะล่างของตัวเอง แล้วตัด margin ล่างของแถบเลขหน้าทิ้ง
 * → ได้ 28px เท่ากันทั้งกรณีมีและไม่มีเลขหน้า
 */
.dp-root.klshop .klshop-all {
  max-width: var(--klshop-max, 1320px);
  margin: 34px auto 0;
  padding: 0 16px 28px;
}

.dp-root.klshop .klshop-all .woocommerce-pagination { margin-bottom: 0; }

.dp-root.klshop .klshop-all-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.dp-root.klshop .klshop-all-h {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink1);
  margin: 0;
  flex: none;
}

/* ชิปเรียงลำดับ — แทน dropdown "การเรียงลำดับ" ที่ถอดออกไปแล้ว
 * (ทั้งสองสั่ง orderby เหมือนกัน ชิปกดง่ายกว่าและเห็นตัวเลือกครบทันที) */
.dp-root.klshop .klshop-sorts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.dp-root.klshop .klshop-sort {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.dp-root.klshop .klshop-sort:hover { color: var(--ink1); }

.dp-root.klshop .klshop-sort.is-on {
  border-color: var(--bd2, #b5c9dc);
  background: #fff;
  color: var(--ink1);
  font-weight: 700;
}

.dp-root.klshop .klshop-density { display: flex; gap: 4px; flex: none; }

.dp-root.klshop .klshop-den {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--ink4);
  cursor: pointer;
}

.dp-root.klshop .klshop-den.is-on { color: var(--ink1); border-color: var(--ink1); }
.dp-root.klshop .klshop-den svg { width: 17px; height: 17px; fill: currentColor; }

/* ── โครง 2 คอลัมน์: แถบกรอง + กริด ─────────────────────────────────────── */

.dp-root.klshop .klshop-all-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.dp-root.klshop .klshop-all-main { min-width: 0; }

/* ── แถบกรอง ───────────────────────────────────────────────────────────────
 * checkbox เป็น <a> ไม่ใช่ <form> — กดแล้วโหลดหน้าใหม่พร้อม query arg
 * ก๊อปลิงก์ส่งต่อได้ ปุ่ม back ทำงาน และไม่ต้องมีปุ่ม "ใช้ตัวกรอง"
 */

.dp-root.klshop .klshop-filters {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 4px 14px 10px;
  position: sticky;
  top: 90px;          /* header ของธีมลอยอยู่ — เผื่อไว้ไม่ให้ถูกทับ */
}

.dp-root.klshop .klshop-fgroup { border-bottom: 1px solid var(--bd); }
.dp-root.klshop .klshop-fgroup:last-of-type { border-bottom: 0; }

.dp-root.klshop .klshop-fgroup-h {
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dp-root.klshop .klshop-fgroup-h::-webkit-details-marker { display: none; }

/* ลูกศรพับ/กาง วาดด้วย border ไม่ต้องโหลดไอคอน */
.dp-root.klshop .klshop-fgroup-h::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink4);
  border-bottom: 2px solid var(--ink4);
  transform: rotate(-135deg);
  transition: transform .2s ease;
  margin-right: 3px;
}

.dp-root.klshop .klshop-fgroup:not([open]) .klshop-fgroup-h::after { transform: rotate(45deg); }

.dp-root.klshop .klshop-flist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 3px;
}

.dp-root.klshop .klshop-fitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink2);
  text-decoration: none;
}

.dp-root.klshop .klshop-fitem:hover { background: var(--pn); }

/* ช่องติ๊กวาดเอง — ไม่ใช้ <input> จริงเพราะทั้งแถวเป็นลิงก์อยู่แล้ว */
.dp-root.klshop .klshop-fbox {
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid var(--bd2, #b5c9dc);
  border-radius: 4px;
  position: relative;
}

.dp-root.klshop .klshop-fitem.is-on { color: var(--ink1); font-weight: 600; }

.dp-root.klshop .klshop-fitem.is-on .klshop-fbox {
  background: var(--ink1);
  border-color: var(--ink1);
}

.dp-root.klshop .klshop-fitem.is-on .klshop-fbox::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.dp-root.klshop .klshop-fitem .kl-brandsys-bi { width: 14px; height: 14px; flex: none; }
.dp-root.klshop .klshop-fname { flex: 1 1 auto; min-width: 0; }

.dp-root.klshop .klshop-fn {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink4);
}

.dp-root.klshop .klshop-fclear {
  display: block;
  margin: 4px 0 8px;
  font-size: 12.5px;
  color: #a32d2d;
  text-decoration: none;
}

.dp-root.klshop .klshop-fclear:hover { text-decoration: underline; }

/* ── การ์ดแบบกระชับในกริด ─────────────────────────────────────────────────
 * กดได้ทั้งใบ (ลิงก์ของ Woo ครอบรูป+ชื่อ+ราคาอยู่แล้ว = พื้นที่กดทั้งการ์ด)
 * ไม่มีปุ่ม ไม่มีคำบรรยาย ไม่มีชิป — ของครบอยู่ที่การ์ดใน "สินค้าแนะนำ"
 */
ul.products.klshop-grid li.product.is-compact .klshop-body {
  gap: 4px;
  padding: 12px 12px 14px;
  text-align: center;
}

ul.products.klshop-grid li.product.is-compact h2.woocommerce-loop-product__title {
  font-size: 14px;
  min-height: 40px;      /* ชื่อ 1 กับ 2 บรรทัดต้องได้ราคาที่ระดับเดียวกัน */
}

ul.products.klshop-grid li.product.is-compact .klshop-meta { padding-top: 2px; }

/* ── กริดในคอลัมน์ขวา + ปุ่มความหนาแน่น ─────────────────────────────────── */

.dp-root.klshop .klshop-all-main ul.products {
  max-width: none;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* โปร่ง = น้อยคอลัมน์ การ์ดใหญ่ขึ้น */
.dp-root.klshop .klshop-all-main ul.products.is-roomy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1100px) {
  .dp-root.klshop .klshop-all-body { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
  .dp-root.klshop .klshop-all-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-root.klshop .klshop-all-main ul.products.is-roomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  /* จอแคบ: แถบกรองขึ้นไปอยู่บนกริด ไม่ใช่บีบให้เหลือคอลัมน์จิ๋ว */
  .dp-root.klshop .klshop-all-body { grid-template-columns: 1fr; }
  .dp-root.klshop .klshop-filters { position: static; }
  .dp-root.klshop .klshop-fgroup:not([open]) + .klshop-fgroup { border-top: 0; }
  .dp-root.klshop .klshop-all-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-root.klshop .klshop-all-main ul.products.is-roomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .dp-root.klshop .klshop-all-head { gap: 8px 10px; }
  .dp-root.klshop .klshop-density { display: none; }   /* จอเล็กเลือกความหนาแน่นไม่มีประโยชน์ */
}

/* ══ ระยะขอบหน้าร้านบนมือถือ ═══════════════════════════════════════════════
 * ทุก section เคยใส่ padding แนวนอน 16px ของตัวเอง **ทับกับ 16px ที่
 * `.s-container` ของ parent ให้มาอยู่แล้ว** → เนื้อหาห่างขอบจอ 32px
 * ซึ่งกินความกว้างไปมากบนจอ 384px (17% ของหน้าจอเป็นที่ว่าง)
 *
 * ถอดชั้นที่ซ้ำออก เหลือ 16px ชั้นเดียว — ทุก section ยังตรงแนวกันเหมือนเดิม
 * แค่ได้ความกว้างคืนมา 32px ทั้งหน้า
 */
@media (max-width: 560px) {
  .dp-root.klshop .klshop-hero-in,
  .dp-root.klshop .klshop-sec,
  .dp-root.klshop .klshop-all,
  .dp-root.klshop ul.products,
  .dp-root.klshop .woocommerce-result-count,
  .dp-root.klshop .woocommerce-ordering { padding-inline: 0; }

  /* รางเลื่อนเก็บ padding ไว้ฝั่งขวาอย่างเดียว — กันการ์ดใบสุดท้ายชนขอบจอพอดี
   * จนดูเหมือนถูกตัด ไม่รู้ว่ายังเลื่อนต่อได้ */
  .dp-root.klshop ul.products.klshop-feat-track { padding: 4px 16px 14px 0; }
}

/* ══ โปรแกรมดูแลสวน (ออกแบบใหม่ตาม mockup 2 ก.ย. 2026) ══════════════════════
 * กล่องขาวครอบทั้งก้อน — สื่อว่านี่คือ "ชุด" ไม่ใช่สินค้าเดี่ยวที่ลอยบนพื้นหน้า
 * หัวข้อ navy ตามมาตรฐาน (mockup เป็นเขียว แต่ witt เลือก navy)
 */

.dp-root.klshop .klshop-prog { margin-top: 34px; }

.dp-root.klshop .klshop-prog-box {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 22px 24px 20px;
}

.dp-root.klshop .klshop-prog-h {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink1);
  margin: 0;
}

.dp-root.klshop .klshop-prog-sub {
  font-size: 13px;
  color: var(--ink3);
  margin: 5px 0 0;
}

/* ── แถบ 4 จุดเด่น ───────────────────────────────────────────────────────── */

.dp-root.klshop .klshop-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 20px;
  padding: 14px 0;
  border-block: 1px solid var(--bd);
}

.dp-root.klshop .klshop-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid var(--bd);
}

.dp-root.klshop .klshop-point:last-child { border-right: 0; }

.dp-root.klshop .klshop-point-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grn-soft, #eef7e8);
  color: var(--grn);
}

.dp-root.klshop .klshop-point-ic .kl-brandsys-bi { width: 21px; height: 21px; }

.dp-root.klshop .klshop-point-tx {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink2);
}

/* ── แถบ "แนะนำสำหรับคุณ" + ลิงก์ดูทั้งหมด ──────────────────────────────── */

.dp-root.klshop .klshop-prog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dp-root.klshop .klshop-prog-h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink1);
  margin: 0;
  /* ขีดเขียวใต้หัวข้อ — ลายเซ็นเดียวกับ kicker ที่ใช้เส้นใต้ทองในหน้าอื่น */
  padding-bottom: 5px;
  border-bottom: 2px solid var(--grn);
}

/* ลิงก์แบบ pill มีขอบ ตาม mockup — เด่นกว่าลิงก์ข้อความเปล่า */
.dp-root.klshop .klshop-prog-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--grn);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--grn);
  text-decoration: none;
  transition: background .2s ease;
}

.dp-root.klshop .klshop-prog-all:hover { background: var(--grn-soft, #eef7e8); }
.dp-root.klshop .klshop-prog-all svg { width: 14px; height: 14px; }

/* ── การ์ดโปรแกรม ────────────────────────────────────────────────────────── */

.dp-root.klshop .klshop-prog-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}

.dp-root.klshop .klshop-prog-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.dp-root.klshop .klshop-prog-item:hover {
  border-color: var(--bd2, #b5c9dc);
  box-shadow: var(--shadow-sm);
}

/* ลิงก์ครอบเฉพาะภาพ+เนื้อหา — แถบล่างมีปุ่มตะกร้าซึ่งเป็น <a> ซ้อนกันไม่ได้ */
.dp-root.klshop .klshop-prog-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.dp-root.klshop .klshop-prog-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--pn);
  overflow: hidden;
}

.dp-root.klshop .klshop-prog-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ชุดที่ยังไม่ตั้งภาพหน้าปก — ให้เห็นว่า "ตรงนี้ควรมีภาพ" ไม่ใช่กล่องเทาลอย ๆ */
.dp-root.klshop .klshop-prog-img.is-blank {
  border: 1.5px dashed var(--bd2, #b5c9dc);
  background: transparent;
}

.dp-root.klshop .klshop-prog-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grn);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.dp-root.klshop .klshop-prog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 14px 16px 12px;
}

.dp-root.klshop .klshop-prog-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink1);
}

.dp-root.klshop .klshop-prog-nic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--grn-soft, #eef7e8);
  color: var(--grn);
}

.dp-root.klshop .klshop-prog-nic .kl-brandsys-bi { width: 15px; height: 15px; }

.dp-root.klshop .klshop-prog-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-root.klshop .klshop-prog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.dp-root.klshop .klshop-prog-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink2);
  background: #fff;
}

.dp-root.klshop .klshop-prog-chip .kl-brandsys-bi {
  width: 13px;
  height: 13px;
  color: var(--grn);
}

/* ── แถบล่าง: ราคา + ปุ่มตะกร้า ─────────────────────────────────────────── */

.dp-root.klshop .klshop-prog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--bd);
}

.dp-root.klshop .klshop-prog-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--grn);
  white-space: nowrap;
}

.dp-root.klshop .klshop-prog-price .woocommerce-Price-amount,
.dp-root.klshop .klshop-prog-price .woocommerce-Price-currencySymbol { color: inherit; }

/* ปุ่มตะกร้าบนการ์ดโปรแกรม — มีข้อความ ไม่ใช่ไอคอนเปล่าเหมือนใน "สินค้าแนะนำ"
 * เพราะการ์ดนี้กว้างกว่าและเป็นสินค้าราคาสูง ควรบอกชัดว่ากดแล้วเกิดอะไร */
.dp-root.klshop .klshop-prog-cart,
.dp-root.klshop a.button.klshop-prog-cart {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--grn);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: filter .2s ease;
}

.dp-root.klshop .klshop-prog-cart::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: #fff;
  -webkit-mask: var(--klshop-cart-ic) center / contain no-repeat;
  mask: var(--klshop-cart-ic) center / contain no-repeat;
}

.dp-root.klshop .klshop-prog-cart:hover { filter: brightness(1.12); }

/* ไอคอนตะกร้าใช้ตัวเดียวกับ carousel — ประกาศที่ section นี้ด้วยเพราะคนละต้นไม้ */
.dp-root.klshop .klshop-prog {
  --klshop-cart-ic: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17' cy='19' r='2'/%3E%3Cpath d='M17 17h-11v-14h-2'/%3E%3Cpath d='M6 5l14 1l-1 7h-13'/%3E%3C/svg%3E");
}

/* ══ แถบปรึกษาทางไลน์ (แทนแถบวินิจฉัยเดิม) ═══════════════════════════════════
 * พื้น navy ทึบ + ปุ่มทอง = ชุดเดียวกับแถบในหน้า /solutions/ ทั้งเว็บพูดภาษาเดียวกัน
 */

.dp-root.klshop .klshop-line { margin: 34px 0 8px; }

.dp-root.klshop .klshop-line-box {
  background: var(--ink1);
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
}

.dp-root.klshop .klshop-line-h {
  font-size: clamp(1.05rem, 1.6vw + .3rem, 1.4rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.dp-root.klshop .klshop-line-sub {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 10px auto 0;
  max-width: 680px;
}

.dp-root.klshop .klshop-line-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  border-radius: 10px;
  background: var(--sig);
  color: var(--ink1);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  transition: filter .2s ease;
}

.dp-root.klshop .klshop-line-cta:hover { filter: brightness(.94); }

/* ลิงก์รอง — จางกว่าปุ่มหลักชัดเจน ไม่แย่งสายตา แต่ยังกดเจอ */
.dp-root.klshop .klshop-line-alt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 2px;
}

.dp-root.klshop .klshop-line-alt:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); }
.dp-root.klshop .klshop-line-alt svg { width: 14px; height: 14px; }

@media (max-width: 700px) {
  /* 4 จุดเด่นเป็น 2×2 — บีบ 4 คอลัมน์บนจอแคบแล้วข้อความตัดคำจนอ่านยาก */
  .dp-root.klshop .klshop-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .dp-root.klshop .klshop-point:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
  /* กริดการ์ดทางลัดเหลือ 2 คอลัมน์ — ใบเน้นกินเต็มแถวเพราะเป็น CTA ควรเด่น
   * (ถ้าปล่อย span 2 ไว้จะกลายเป็นเต็มแถวพอดีอยู่แล้ว แต่ประกาศไว้ให้ชัด) */
  .dp-root.klshop .klshop-tiles > li.is-cta { grid-column: 1 / -1; }

  .dp-root.klshop .klshop-prog { margin-top: 26px; }
  .dp-root.klshop .klshop-prog-box { padding: 18px 16px 16px; }
  .dp-root.klshop .klshop-prog-list { grid-template-columns: 1fr; }
  .dp-root.klshop .klshop-prog-bar { flex-wrap: wrap; }
  .dp-root.klshop .klshop-line { margin-top: 26px; }
  .dp-root.klshop .klshop-line-box { padding: 24px 18px; }
  .dp-root.klshop .klshop-line-cta { display: block; }
  .dp-root.klshop .klshop-prog-foot { flex-wrap: wrap; }
  .dp-root.klshop .klshop-prog-cart { flex: 1 1 100%; justify-content: center; }
}