/* agri-recipe.css v4.0 — Kasetlove Design System
   Design intent: ดึง visual language จากโลกเกษตรจริง
   — ป้ายข้างแปลง, ฉลากขวดสารเคมี, สมุดบันทึกของเกษตรกร
   Signature: ใช้ border-width และ stroke weight แทน color fill
   เพื่อสื่อถึงความ "จริงจัง แม่นยำ" ของสูตรเคมีเกษตร
*/

/* ── Tokens ── */
:root {
  --kl-blue:        #0B4D8C;
  --kl-blue-dark:   #083568;
  --kl-blue-tint:   #E8F0F8;      /* เปลี่ยนจาก #F4F8FC — ลด AI feeling */
  --kl-gold:        #C49A00;      /* ทองเข้มขึ้น — อ่านง่ายกว่าบนขาว */
  --kl-gold-soft:   #FDF5D3;
  --kl-green:       #3A5C1E;      /* เขียวเข้ม — สีใบไม้จริง ไม่ใช่ UI green */
  --kl-green-soft:  #EBF3E2;
  --kl-danger:      #B91C1C;
  --kl-danger-soft: #FEF2F2;
  --kl-text:        #111827;
  --kl-text-soft:   #6B7280;
  --kl-border:      #D1D9E2;
  --kl-border-dark: #9BAEC1;      /* เส้นหนักสำหรับ data */
  --kl-bg:          #FFFFFF;
  --kl-bg-field:    #F7F9F7;      /* สีพื้นเหมือนกระดาษสมุดเกษตร */

  --kl-forest:      #1B4D35;
  --kl-forest-dark: #153D29;
  --kl-orange:      #F4A535;

  /* Radius system: ข้อมูล=เหลี่ยม, action=โค้ง */
  --r-data:   4px;    /* ingredient card, section — ข้อมูลแม่นยำ */
  --r-card:   8px;    /* pill, sched card — intermediate */
  --r-action: 999px;  /* ปุ่ม — action เท่านั้น */

  /* Stroke weights */
  --stroke-light:  1px;
  --stroke-medium: 2px;
  --stroke-heavy:  3px;
}

/* ── Wrapper ── */
.af-recipe-wrap {
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-card, 8px);
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--kl-bg, #ffffff);
  /* ไม่ใช้ box-shadow — ให้ border ทำงานแทน */
}

/* ── Header ── */
.af-recipe-head {
  background: #1B4D35;
  border-bottom: 3px solid #F4A535;
  padding: 14px 18px 12px;
  position: relative;
}
.af-recipe-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #F4A535;
}
.af-recipe-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
  padding-left: 10px;
}
.af-recipe-head-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.af-recipe-head-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: transparent;
  color: #F4A535;
  border: 1.5px solid #F4A535;
  border-radius: var(--r-data, 4px);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.af-recipe-head-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  padding-left: 10px;
}

/* ── Pill List ── */
.af-recipe-pill-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  background: var(--kl-bg-field, #F7F9F7);  /* ไม่ใช้ blue-soft */
}
.af-recipe-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  border-radius: var(--r-card, 8px);
  cursor: pointer;
  background: var(--kl-bg, #ffffff);
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.af-recipe-pill:hover {
  border-color: var(--kl-border-dark, #9BAEC1);
  background: var(--kl-bg, #ffffff);
}
.af-recipe-pill.on {
  border-color: #1B4D35;
  border-width: var(--stroke-medium, 2px);
  background: #1B4D35;
}

/* Pill new layout */
.af-recipe-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-card, 8px);
  background: #E8F0F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.af-recipe-pill-icon i {
  font-size: 18px;
  color: #0B4D8C;
}
.af-recipe-pill.on .af-recipe-pill-icon {
  background: #153D29;
}
.af-recipe-pill.on .af-recipe-pill-icon i {
  color: #ffffff;
}
.af-recipe-pill-body {
  flex: 1;
  min-width: 0;
}
.af-recipe-pill-scenario {
  font-size: 13px;
  color: var(--kl-text-soft, #6B7280);
  line-height: 1.3;
}
.af-recipe-pill.on .af-recipe-pill-scenario {
  font-weight: 700;
  color: #ffffff;
}
.af-recipe-pill.on .af-recipe-pill-sub {
  color: rgba(255,255,255,0.75);
}
.af-recipe-pill.on .af-recipe-pill-count {
  color: rgba(255,255,255,0.75);
}
.af-recipe-pill-sub {
  font-size: 11px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.af-recipe-pill-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.af-recipe-pill-count {
  font-size: 11px;
  color: var(--kl-text-soft, #6B7280);
}
.af-recipe-pill-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-data, 4px);
  background: transparent;
  border: 1px solid var(--kl-border-dark, #9BAEC1);
  color: var(--kl-text-soft, #6B7280);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}
.af-recipe-pill.on .af-recipe-pill-badge {
  background: #F4A535;
  color: #1B4D35;
  border-color: #F4A535;
  font-weight: 700;
}
.af-recipe-pill-chevron {
  font-size: 16px;
  color: #9BAEC1;
  flex-shrink: 0;
}
.af-recipe-pill.on .af-recipe-pill-chevron {
  color: rgba(255,255,255,0.5);
}

/* ── Panel ── */
.af-recipe-panel     { display: none; }
.af-recipe-panel.on  { display: block; }

/* ── Section ── */
.af-recipe-sec {
  padding: 16px 18px;
  border-bottom: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
}
.af-recipe-sec:last-child { border-bottom: none; }

/* Section label: เส้นใต้แทน icon + text สี */
.af-recipe-sec-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--kl-text-soft, #6B7280);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
}
.af-recipe-sec-label i {
  font-size: 14px;
  color: var(--kl-blue, #0B4D8C);
}
.af-recipe-ing-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--kl-blue, #0B4D8C);
  background: var(--kl-blue-tint, #E8F0F8);
  padding: 2px 8px;
  border-radius: var(--r-data, 4px);
}
.af-recipe-sec-label.af-sec-label--highlight {
  font-size: 13px;
  font-weight: 700;
  color: var(--kl-blue, #0B4D8C);
  background: var(--kl-blue-tint, #E8F0F8);
  padding: 8px 18px;
  margin: 0 -18px 12px;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px solid var(--kl-blue, #0B4D8C);
}

/* ── Hero ── */
.af-recipe-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--kl-gold-soft, #FDF5D3);
  border: var(--stroke-medium, 2px) solid var(--kl-gold, #C49A00);
  border-radius: var(--r-data, 4px);   /* เหลี่ยม — นี่คือข้อมูล ไม่ใช่ card ทั่วไป */
  padding: 12px 16px;
}
.af-recipe-hero-icon {
  font-size: 24px;
  color: var(--kl-gold, #C49A00);
  line-height: 1;
  flex-shrink: 0;
}
.af-recipe-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 2px;
}
.af-recipe-hero-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--kl-blue, #0B4D8C);
  line-height: 1;
  letter-spacing: -0.02em;
}
.af-recipe-hero-sub {
  font-size: 12px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 3px;
}
/* hero โหมดวิธีใช้ที่ไม่ใช่การพ่น (กองล่อ/ราดโคน/แช่/คลุก) — ข้อความยาวกว่าตัวเลข
   ลดขนาด val + เปลี่ยนโทนไอคอนเป็นเขียว (ไม่ใช่ "น้ำ") */
.af-recipe-hero--method .af-recipe-hero-val {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--kl-green, #3A5C1E);
}
.af-recipe-hero--method .af-recipe-hero-icon {
  color: var(--kl-green, #3A5C1E);
}


/* ── Ingredients Step Flow ── */
.af-sec--ingredients {
  padding: 0;
  overflow: hidden;
}
.af-recipe-ing-header {
  padding: 12px 18px 10px;
  border-bottom: 0.5px solid var(--kl-border, #D1D9E2);
}
.af-recipe-ing-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.af-recipe-ing-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #0B4D8C;
  display: flex;
  align-items: center;
  gap: 6px;
}
.af-recipe-ing-progress {
  display: flex;
  gap: 4px;
}
.af-recipe-ing-progress-bar {
  flex: 1;
  height: 3px;
  background: #0B4D8C;
  border-radius: 2px;
}
.af-recipe-step-list {
  padding: 12px 18px;
}
.af-recipe-step {
  display: flex;
  gap: 12px;
  padding-bottom: 4px;
}
.af-recipe-step:last-child { padding-bottom: 12px; }
.af-recipe-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.af-recipe-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0B4D8C;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-recipe-step-num--gold {
  background: #C49A00;
  color: #0B4D8C;
}
.af-recipe-step-line {
  width: 1px;
  flex: 1;
  background: #D1D9E2;
  margin-top: 4px;
  min-height: 16px;
}
.af-recipe-step-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 14px;
}
.af-recipe-step:last-child .af-recipe-step-body { padding-bottom: 0; }
.af-recipe-step-rate {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 3px;
}
.af-recipe-step-amount {
  font-size: 20px;
  font-weight: 800;
  color: #0B4D8C;
  line-height: 1;
  letter-spacing: -0.02em;
}
.af-recipe-step-amount--gold { color: #C49A00; }
.af-recipe-step-unit {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.af-recipe-step-own {
  margin-left: auto;
  font-size: 9px;
  background: #FAEEDA;
  color: #633806;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}
.af-recipe-step-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3px;
  line-height: 1.3;
}
.af-recipe-step-hint {
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 7px;
  line-height: 1.4;
}
/* meta ต่อสาร: % สูตร (formulation) + กลุ่ม IRAC/FRAC */
.af-recipe-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.af-recipe-spec {
  font-size: 11px;
  font-weight: 600;
  color: var(--kl-blue);
  background: var(--kl-blue-tint);
  border-radius: var(--r-data);
  padding: 1px 7px;
}
.af-recipe-irac {
  font-size: 11px;
  font-weight: 600;
  color: var(--kl-green);
  background: var(--kl-green-soft);
  border: 1px solid #cfe0bd;
  border-radius: var(--r-data);
  padding: 1px 7px;
  cursor: help;
}

/* premix (ผลิตภัณฑ์สำเร็จรูปหลายสาร) — เตือนว่าตัวเลขอัตราคือของผลิตภัณฑ์
   ครั้งเดียว ไม่ใช่ต่อสาร กันอ่านผิดเป็นเทซ้ำสองเท่า */
.af-recipe-premix-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--kl-gold-dark, #8a6d00);
  background: var(--kl-gold-soft, #FDF5D3);
  border: 1px solid #e8d68a;
  border-radius: var(--r-data);
  padding: 1px 6px;
  margin-left: 5px;
  vertical-align: middle;
  cursor: help;
}
.af-recipe-step-meta--premix {
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.af-recipe-premix-part {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11px;
}
.af-recipe-premix-part-name {
  font-weight: 600;
  color: var(--kl-text);
}

/* citation — อ้างอิงเอกสารทางการท้าย recipe */
.af-recipe-source {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--kl-text-soft);
  border-top: 1px solid var(--kl-border);
  padding-top: 10px;
}
.af-recipe-source .ti { color: var(--kl-gold); }
.af-recipe-source-label { font-weight: 600; }

/* สูตรที่ทีมผสมเอง — ต้องอ่านออกทันทีว่าต่างจากสูตรที่มีเอกสารรองรับ
   ตัด flex เป็น wrap เพราะข้อความยาวกว่า citation ปกติ */
.af-recipe-source-manual { flex-wrap: wrap; }
.af-recipe-source-manual .ti { color: var(--kl-warn, #b26a00); }
.af-recipe-source-manual .af-recipe-source-label { color: var(--kl-warn, #b26a00); }
.af-recipe-source-note { font-size: 11px; opacity: .85; }

/* สินค้า affiliate ต่อสาร — ปุ่ม toggle + การ์ด (collapse ล่างสุดของ card สาร)
   ตั้งใจให้ทึบ+เต็มความกว้าง แยกจากปุ่ม "ดูสินค้า"/"ร้านค้าพาร์ทเนอร์" ข้างบน
   (ปุ่มเดี่ยวต่อสินค้า) ชัดเจน — นี่คือ CTA รวมของสารทั้งสาร */
.af-recipe-prod { margin-top: 10px; }
/* !important บน background/color: parent theme "plant" (ซื้อภายนอก ไม่อยู่ใน
   repo — ตรวจ specificity จริงไม่ได้) มี generic button reset ที่ชนะ selector
   1-class เดิม ทำให้ปุ่มขึ้นเทาก่อนกด ทั้งที่กางแล้ว (.show เพิ่ม specificity)
   กลับเป็นน้ำเงินถูก — ใช้ !important กันเหนียวเหมือน .af-recipe-buy--added
   ด้านล่าง (pattern เดิมในไฟล์นี้) แทนการไล่เดา specificity ของธีมภายนอก */
.af-recipe-prod .af-recipe-prod-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #fff !important;
  background: var(--kl-blue, #0B4D8C) !important;
  border: none !important;
  border-radius: var(--r-card, 8px);
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11,77,140,.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.af-recipe-prod .af-recipe-prod-btn:hover {
  background: var(--kl-blue-dark, #083568) !important;
  box-shadow: 0 2px 6px rgba(11,77,140,.35);
}
.af-recipe-prod-btn-left { display: inline-flex; align-items: center; gap: 7px; }
.af-recipe-prod-btn-left .ti { font-size: 16px; }
.af-recipe-prod-btn-right { display: inline-flex; align-items: center; gap: 6px; }
.af-recipe-prod-count {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  min-width: 20px;
  padding: 0 6px;
  text-align: center;
}
.af-recipe-prod-caret { font-size: 15px; transition: transform .2s; }
.af-recipe-prod.show .af-recipe-prod-caret { transform: rotate(180deg); }
.af-recipe-prod.show .af-recipe-prod-btn {
  background: var(--kl-blue-dark, #083568) !important;
  border-radius: var(--r-card, 8px) var(--r-card, 8px) 0 0;
}
.af-recipe-prod-list { display: none; margin-top: 8px; }
.af-recipe-prod.show .af-recipe-prod-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.af-recipe-prod-card {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--kl-border, #D1D9E2);
  border-radius: var(--r-data, 4px);
  padding: 8px;
  background: #fff;
  text-decoration: none;
}
.af-recipe-prod-card:hover { border-color: var(--kl-blue, #0B4D8C); }
.af-recipe-prod-img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 4px;
  object-fit: cover;
  background: #f0f0f0;
}
.af-recipe-prod-img--ph { display: inline-block; }
.af-recipe-prod-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.af-recipe-prod-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--kl-text, #111827);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.af-recipe-prod-sold { font-size: 11px; color: var(--kl-text-soft, #6B7280); }
.af-recipe-prod-cta {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: var(--r-action, 999px);
  padding: 2px 10px;
  margin-top: 2px;
}
.af-recipe-prod-cta--shopee { background: #EE4D2D; }
.af-recipe-prod-cta--lazada { background: #0F146D; }
.af-recipe-step-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #EBF3E2;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: #27500A;
  line-height: 1.4;
  margin: 0 18px 12px;
}
.af-recipe-step-tip i {
  font-size: 14px;
  color: #3B6D11;
  flex-shrink: 0;
}

/* ── Buy Group ── */
.af-recipe-buy-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ปุ่ม view — text link style แทน outline pill */
.af-recipe-buy--view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 12px;
  color: var(--kl-blue, #0B4D8C);
  background: transparent;
  border: var(--stroke-light, 1px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-action, 999px);
  font-weight: 600;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.af-recipe-buy--view:hover {
  border-color: var(--kl-blue, #0B4D8C);
}

/* ปุ่ม cart — solid สีน้ำเงิน */
.af-recipe-buy--cart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 12px;
  color: #fff;
  background: var(--kl-blue, #0B4D8C);
  border: var(--stroke-light, 1px) solid var(--kl-blue, #0B4D8C);
  border-radius: var(--r-action, 999px);
  font-weight: 600;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.af-recipe-buy--cart:hover:not(:disabled) {
  background: var(--kl-blue-dark, #0A3F72);
  border-color: var(--kl-blue-dark, #0A3F72);
}

.af-recipe-buy--disabled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 12px;
  color: var(--kl-text-soft, #6B7280);
  background: transparent;
  border: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  border-radius: var(--r-action, 999px);
  font-weight: 600;
  white-space: nowrap;
  font-family: inherit;
  opacity: 0.6;
  cursor: default;
}

.af-recipe-buy--added {
  background: var(--kl-green, #3A5C1E) !important;
  color: #fff !important;
  border-color: var(--kl-green, #3A5C1E) !important;
}

/* ── Add All CTA ── */
.af-recipe-add-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: var(--kl-gold, #C49A00);
  color: var(--kl-blue, #0B4D8C);
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: var(--r-action, 999px);
  cursor: pointer;
  margin-top: 14px;
  font-family: inherit;
  /* ไม่ใช้ box-shadow */
  transition: background 0.15s, transform 0.1s;
  letter-spacing: -0.01em;
}
.af-recipe-add-all:hover {
  background: #E6AE00;
}
.af-recipe-add-all:active {
  transform: scale(0.99);
}
.af-recipe-add-all-count {
  font-size: 11px;
  background: rgba(11,77,140,.15);
  padding: 2px 8px;
  border-radius: var(--r-action, 999px);
  font-weight: 700;
}

/* ── Schedule ── */
.af-recipe-sched {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.af-recipe-sched-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--kl-bg, #ffffff);
  border: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  border-top: none;
  /* ไม่มี background color — ใช้ left border แทน */
  border-left: 3px solid var(--kl-green, #3A5C1E);
}
.af-recipe-sched-card:first-child {
  border-top: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  border-radius: var(--r-data, 4px) var(--r-data, 4px) 0 0;
}
.af-recipe-sched-card:last-child {
  border-radius: 0 0 var(--r-data, 4px) var(--r-data, 4px);
}
.af-recipe-sched-card:only-child {
  border-radius: var(--r-data, 4px);
  border-top: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
}
.af-recipe-sched-icon {
  font-size: 16px;
  color: var(--kl-green, #3A5C1E);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.af-recipe-sched-key {
  font-size: 10px;
  font-weight: 700;
  color: var(--kl-green, #3A5C1E);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.af-recipe-sched-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-text, #111827);
}

/* ── Warning ── */
.af-recipe-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--kl-danger-soft, #FEF2F2);
  border-left: 4px solid var(--kl-danger, #B91C1C);
  padding: 12px 14px;
  border-radius: 0 var(--r-data, 4px) var(--r-data, 4px) 0;
  font-size: 13px;
  color: var(--kl-danger, #B91C1C);
  line-height: 1.6;
  font-weight: 500;
}
.af-recipe-warn i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Article links ── */
.af-recipe-art {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 11px 14px;
  background: var(--kl-bg, #ffffff);
  border: var(--stroke-light, 1px) solid var(--kl-border, #D1D9E2);
  border-radius: var(--r-data, 4px);
  transition: border-color 0.15s;
}
.af-recipe-art:hover {
  border-color: var(--kl-blue, #0B4D8C);
}
.af-recipe-art + .af-recipe-art {
  margin-top: 6px;
}
.af-recipe-art-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-data, 4px);
  background: var(--kl-blue-tint, #E8F0F8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.af-recipe-art-icon i {
  font-size: 16px;
  color: var(--kl-blue, #0B4D8C);
}
.af-recipe-art-body { flex: 1; }
.af-recipe-art-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-blue, #0B4D8C);
  line-height: 1.4;
}
.af-recipe-art-sub {
  font-size: 11px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 2px;
}
.af-recipe-art-arr {
  font-size: 16px;
  color: var(--kl-border-dark, #9BAEC1);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .af-recipe-sec      { padding: 12px 14px; }
  .af-recipe-head     { padding: 12px 14px 10px; }
  .af-recipe-hero-val { font-size: 20px; }
  .af-recipe-pill-list { padding: 8px 12px; }

  /* สินค้า affiliate ต่อสาร — เดิมถูกเยื้องซ้ายตามคอลัมน์เลขลำดับ (วงกลม 28px
     + gap 12px = 40px) ทำให้แคบไม่สมส่วนบนจอเล็ก · bleed ออกให้เต็มความกว้าง
     เท่าการ์ด (ชิดขอบเดียวกับกล่อง "น้ำสะอาด 20 ลิตร" ด้านบน) เฉพาะส่วนนี้ */
  .af-recipe-prod {
    margin-left: -40px;
    width: calc(100% + 40px);
  }
  .af-recipe-prod-btn { padding: 11px 14px; font-size: 13.5px; }
  .af-recipe-prod-card { padding: 10px; }
  .af-recipe-prod-img { width: 56px; height: 56px; flex: 0 0 56px; }
}

/* ── Role badges ── */
.af-recipe-ing-role {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-data, 4px); /* เหลี่ยม — ไม่ใช่ pill */
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.af-recipe-ing-role--main_active {
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}
.af-recipe-ing-role--adjuvant {
  background: var(--kl-green-soft, #EBF3E2);
  color: var(--kl-green, #3A5C1E);
  border: 1px solid #C6E0B0;
}
.af-recipe-ing-role--secondary_nutrient,
.af-recipe-ing-role--primary_nutrient {
  background: #FEF9C3;
  color: #854D0E;
  border: 1px solid #FDE68A;
}
.af-recipe-ing-role--amino_acid {
  background: var(--kl-green-soft, #EBF3E2);
  color: var(--kl-green, #3A5C1E);
  border: 1px solid #C6E0B0;
}
.af-recipe-ing-role--other {
  background: transparent;
  color: var(--kl-text-soft, #6B7280);
  border: 1px solid var(--kl-border, #D1D9E2);
}

/* ── Description ── */
.af-recipe-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kl-text, #111827);
}

/* ══ Formula Archive layout — เฉพาะหน้า hub (.af-recipe-archive) ════════════════
   scope ใต้ .af-recipe-archive ทั้งหมด เพื่อไม่ให้ทับ .fx-* inline ของหน้า
   formular-archive (theme template ก็ re-link agri-recipe.css เหมือนกัน)
   สไตล์การ์ด: ยืม visual จาก .afsm-btn (ไอคอนวงกลม + เงานุ่ม + กดง่าย)
   ─────────────────────────────────────────────────────────────────────────── */
.af-recipe-archive.fx-group {
  margin: 0;
}
.af-recipe-archive .fx-group-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--kl-text-soft, #6B7280);
}
.af-recipe-archive .fx-group-hint .ti {
  font-size: 16px;
  color: var(--kl-green, #3A5C1E);
  flex-shrink: 0;
}
.af-recipe-archive .fx-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #e6edf3;
}
.af-recipe-archive .fx-sec-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: #eaf1f8;
  color: #0b4d8c;
}
.af-recipe-archive .fx-sec-title {
  font-size: 16px;
  font-weight: 800;
  color: #0b4d8c;
}
.af-recipe-archive .fx-sec-count {
  font-size: 12px;
  font-weight: 600;
  color: #3b6d11;
  background: #eaf3de;
  border-radius: var(--r-action, 999px);
  padding: 2px 10px;
}

/* ── การ์ดสูตร (accordion) ── */
.af-recipe-archive .fx-card {
  border: 1px solid #e6edf3;
  border-radius: 14px;
  background: #fafaf7;
  margin-bottom: 12px;
  overflow: hidden;
  scroll-margin-top: 70px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.af-recipe-archive .fx-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  border-color: var(--kl-border-dark, #9BAEC1);
}
.af-recipe-archive .fx-card.primary {
  border: 2px solid var(--kl-gold, #C49A00);
  background: var(--kl-gold-soft, #FDF5D3);
}
.af-recipe-archive .fx-card.open {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.af-recipe-archive .fx-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 16px;
  min-height: 74px;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ไอคอนวงกลม (ตามชนิดสูตร) */
.af-recipe-archive .fx-card-ic {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  background: var(--kl-green-soft, #EBF3E2);
  color: var(--kl-green, #3A5C1E);
}
.af-recipe-archive .fx-card.primary .fx-card-ic {
  background: #fff;
  color: var(--kl-gold, #C49A00);
}

.af-recipe-archive .fx-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.af-recipe-archive .fx-card-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.af-recipe-archive .fx-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kl-text, #111827);
}
.af-recipe-archive .fx-badge-rec {
  font-size: 10.5px;
  font-weight: 700;
  color: #854f0b;
  background: #faeeda;
  padding: 2px 9px;
  border-radius: var(--r-action, 999px);
  white-space: nowrap;
}
.af-recipe-archive .fx-card-metarow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.af-recipe-archive .fx-card-meta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--kl-text-soft, #6B7280);
  background: var(--kl-bg-field, #F7F9F7);
  border: 1px solid var(--kl-border, #D1D9E2);
  padding: 1px 8px;
  border-radius: var(--r-action, 999px);
  white-space: nowrap;
}
.af-recipe-archive .fx-card-sub {
  min-width: 0;
  font-size: 12.5px;
  color: var(--kl-text-soft, #6B7280);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-recipe-archive .fx-caret {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--kl-text-soft, #9BAEC1);
  transition: transform 0.25s;
}
.af-recipe-archive .fx-card.open .fx-caret {
  transform: rotate(180deg);
  color: var(--kl-green, #3A5C1E);
}
.af-recipe-archive .fx-card-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--kl-border, #D1D9E2);
}
.af-recipe-archive .fx-card.primary .fx-card-body {
  background: var(--kl-bg, #fff);
}

/* มือถือ: ตัวอักษร/ไอคอนใหญ่ขึ้น กดง่าย */
@media (max-width: 540px) {
  .af-recipe-archive .fx-card-head { padding: 16px 15px; gap: 12px; }
  .af-recipe-archive .fx-card-ic { width: 44px; height: 44px; font-size: 22px; }
  .af-recipe-archive .fx-card-title { font-size: 16px; }
  .af-recipe-archive .fx-card-sub { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   เครื่องคำนวณอัตราผสมต่อถัง (retention tool #1) — ตัวช่วยแยกจากสูตรต้นฉบับ
   ยึด token :root เดียวกับ recipe (navy/gold/green) · ไม่แตะตัวเลขสูตรจริง
   ══════════════════════════════════════════════════════════════════════════ */
.af-calc {
  background: var(--kl-blue-tint, #E8F0F8);
  border: var(--stroke-medium, 2px) solid var(--kl-blue, #0B4D8C);
  border-radius: var(--r-data, 4px);
  padding: 14px 16px;
}
.af-calc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.af-calc-head-icon {
  font-size: 22px;
  color: var(--kl-blue, #0B4D8C);
  line-height: 1;
  flex-shrink: 0;
}
.af-calc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--kl-blue-dark, #083568);
  line-height: 1.2;
}
.af-calc-sub {
  font-size: 12px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 2px;
}
.af-calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.af-calc-chip {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--kl-blue-dark, #083568);
  background: var(--kl-bg, #fff);
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-action, 999px);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.af-calc-chip .ti { font-size: 15px; }
.af-calc-chip:hover { border-color: var(--kl-blue, #0B4D8C); }
.af-calc-chip--on {
  color: #fff;
  background: var(--kl-blue, #0B4D8C);
  border-color: var(--kl-blue, #0B4D8C);
}
.af-calc-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.af-calc-custom-label {
  font-size: 12px;
  color: var(--kl-text-soft, #6B7280);
  font-weight: 600;
}
.af-calc-input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--kl-text, #111827);
  width: 96px;
  padding: 7px 10px;
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-data, 4px);
  background: var(--kl-bg, #fff);
}
.af-calc-input:focus {
  outline: none;
  border-color: var(--kl-blue, #0B4D8C);
}
.af-calc-input-unit {
  font-size: 13px;
  color: var(--kl-text-soft, #6B7280);
}
.af-calc-result:not(:empty) {
  margin-top: 12px;
  border-top: 1px dashed var(--kl-border-dark, #9BAEC1);
  padding-top: 12px;
}
.af-calc-result-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kl-blue-dark, #083568);
  margin-bottom: 8px;
}
.af-calc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--kl-border, #D1D9E2);
}
.af-calc-row:last-child { border-bottom: none; }
.af-calc-row-amt {
  flex-shrink: 0;
  min-width: 82px;
  text-align: right;
}
.af-calc-row-num {
  font-size: 19px;
  font-weight: 800;
  color: var(--kl-blue, #0B4D8C);
  letter-spacing: -0.01em;
}
.af-calc-row-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--kl-text-soft, #6B7280);
}
.af-calc-row-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kl-text, #111827);
  line-height: 1.35;
}
.af-calc-buy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--kl-green, #3A5C1E);
  border-radius: var(--r-action, 999px);
  padding: 7px 13px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.af-calc-buy .ti { font-size: 14px; }
.af-calc-buy:hover { background: var(--kl-forest, #1B4D35); }
.af-calc-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--kl-text-soft, #6B7280);
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.af-calc-note .ti { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 540px) {
  .af-calc { padding: 12px 13px; }
  .af-calc-chip { font-size: 13.5px; padding: 9px 13px; }
  .af-calc-row { flex-wrap: wrap; }
  .af-calc-row-amt { min-width: 70px; }
  .af-calc-row-num { font-size: 18px; }
  .af-calc-buy { margin-left: auto; }
}

/* ── Phase 2: โหมดต่อไร่/ต่อต้น + hero อัตราน้ำจริง ─────────────────────────── */
.af-recipe-hero--rate {
  background: var(--kl-green-soft, #EBF3E2);
  border-color: var(--kl-green, #3A5C1E);
}
.af-recipe-hero--rate .af-recipe-hero-icon { color: var(--kl-green, #3A5C1E); }
.af-recipe-hero--rate .af-recipe-hero-label { color: #3b6d11; }
.af-recipe-hero--rate .af-recipe-hero-val {
  font-size: 19px;
  font-weight: 800;
  color: var(--kl-green, #3A5C1E);
  letter-spacing: 0;
}
.af-recipe-hero-water {
  font-size: 15px;
  font-weight: 700;
  color: var(--kl-blue, #0B4D8C);
  margin-top: 4px;
}
.af-recipe-hero-sprayer {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--kl-text-soft, #6B7280);
  background: var(--kl-bg, #fff);
  border-radius: var(--r-action, 999px);
  padding: 2px 9px;
  margin-left: 7px;
}
.af-recipe-hero-src {
  font-size: 11px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 5px;
}

.af-calc-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.af-calc-mode {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--kl-text-soft, #6B7280);
  background: var(--kl-bg, #fff);
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-action, 999px);
  padding: 7px 16px;
  line-height: 1;
}
.af-calc-mode--on {
  color: #fff;
  background: var(--kl-blue, #0B4D8C);
  border-color: var(--kl-blue, #0B4D8C);
}
/* โหมดต่อไร่/ต่อต้น: กล่องถังยังอยู่ (ใช้บอกว่ากี่ถัง) แต่ลดความเด่น */
.af-calc-tank--secondary { opacity: .75; }
.af-calc-area { margin-top: 4px; }
.af-calc-stage {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--kl-text, #111827);
  padding: 8px 10px;
  margin-top: 4px;
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-data, 4px);
  background: var(--kl-bg, #fff);
}
.af-calc-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.af-calc-qty {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--kl-text, #111827);
  width: 96px;
  padding: 7px 10px;
  border: var(--stroke-medium, 2px) solid var(--kl-border-dark, #9BAEC1);
  border-radius: var(--r-data, 4px);
  background: var(--kl-bg, #fff);
}
.af-calc-qty:focus, .af-calc-stage:focus {
  outline: none;
  border-color: var(--kl-blue, #0B4D8C);
}
.af-calc-src {
  font-size: 11px;
  color: var(--kl-text-soft, #6B7280);
  margin-top: 8px;
}

/* ── เครื่องมือ 2B: ปุ่มเก็บสูตร ─────────────────────────────────────────── */
.af-recipe-sec--save {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.af-save-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kl-blue, #0B4D8C);
  background: var(--kl-bg, #fff);
  border: var(--stroke-medium, 2px) solid var(--kl-blue, #0B4D8C);
  border-radius: var(--r-action, 999px);
  padding: 8px 16px;
  line-height: 1;
  transition: background .12s, color .12s;
}
.af-save-btn:hover { background: var(--kl-blue-tint, #E8F0F8); }
.af-save-btn .af-save-ic { font-size: 16px; }
.af-save-btn--on {
  color: #fff;
  background: var(--kl-gold, #C49A00);
  border-color: var(--kl-gold, #C49A00);
}
.af-save-btn--on:hover { background: #b08a00; }
.af-save-hint {
  font-size: 11.5px;
  color: var(--kl-text-soft, #6B7280);
}
@media (max-width: 540px) {
  .af-save-hint { flex: 1 0 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️ Override parent theme (plant): กฎ `html [type="button"]` = specificity
   (0,1,1) ชนะคลาสเดี่ยว (0,1,0) ของเรา → ปุ่มทุกตัวถูกทับเป็นเทา/ขาว
   จึงต้อง scope ใต้ parent อีกชั้น (0,2,0 ขึ้นไป) · เจอจริงบน staging 1 ส.ค.
   สีอ้างอิง CTA แบรนด์ (Customizer .kl-btn): พื้นทอง + ตัวอักษรน้ำเงิน
   ใช้ !important ตาม pattern เดิมของไฟล์นี้ (ดู .af-recipe-prod-btn บรรทัด ~515)
   — ธีมเป็นของซื้อภายนอก อัปเดตเมื่อไหร่ specificity เปลี่ยนได้ · scope 2 ชั้น
   ก็ยังใส่ไว้ทั้งคู่ (กันเหนียว ไม่ต้องไล่เดาใหม่ทุกครั้งที่ธีมอัป)
   ══════════════════════════════════════════════════════════════════════════ */

/* ปุ่มเก็บสูตร — CTA หลักของการ์ด ใช้ทองแบรนด์ */
.af-recipe-sec--save .af-save-btn {
  background: var(--kl-gold, #F4B400) !important;
  border-color: var(--kl-gold, #F4B400) !important;
  color: var(--kl-blue, #0B4D8C) !important;
  font-weight: 800;
}
.af-recipe-sec--save .af-save-btn:hover {
  background: #ffd54a !important;
  border-color: #ffd54a !important;
}
/* เก็บแล้ว — ยืนยันแล้วไม่ต้องเด่น: โครงทอง พื้นขาว */
.af-recipe-sec--save .af-save-btn--on {
  background: var(--kl-bg, #fff) !important;
  border-color: var(--kl-gold, #F4B400) !important;
  color: var(--kl-blue, #0B4D8C) !important;
}
.af-recipe-sec--save .af-save-btn--on:hover {
  background: var(--kl-gold-soft, #FDF5D3) !important;
}

/* chips ขนาดถัง + ปุ่มสลับโหมด — คืนสไตล์เดิมให้ชนะ theme */
.af-calc .af-calc-chip {
  background: var(--kl-bg, #fff) !important;
  border-color: var(--kl-border-dark, #9BAEC1) !important;
  color: var(--kl-blue-dark, #083568) !important;
}
.af-calc .af-calc-chip:hover { border-color: var(--kl-blue, #0B4D8C) !important; }
.af-calc .af-calc-chip--on {
  background: var(--kl-blue, #0B4D8C) !important;
  border-color: var(--kl-blue, #0B4D8C) !important;
  color: #fff !important;
}
.af-calc .af-calc-mode {
  background: var(--kl-bg, #fff) !important;
  border-color: var(--kl-border-dark, #9BAEC1) !important;
  color: var(--kl-text-soft, #6B7280) !important;
}
.af-calc .af-calc-mode--on {
  background: var(--kl-blue, #0B4D8C) !important;
  border-color: var(--kl-blue, #0B4D8C) !important;
  color: #fff !important;
}