/* ═══════════════════════════════════════════════════════════════════════════
   Site chrome — header (คอม) / footer
   โครงและเมนูจัดใน src/inc/helpers/09-site-chrome.php, 07-mobile-header.php
   ใช้ .ast-desktop / .ast-header-break-point (class ที่ Astra ใส่ตาม breakpoint จริง) ไม่ใช้ media query
   กับ header เพื่อให้ตรงกับที่ Astra เลือก layout เสมอ
   token สีมาจาก src/inc/enqueue/theme-colors.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ทุกขนาดจอ ───────────────────────────────────────────────────────────── */
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
}
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar #masthead { top: 0; } }

/* header ติดขอบบนแล้ว — ลิงก์ #anchor และ scrollIntoView() (เช่นปุ่ม "เลือกซื้อสินค้า" หน้าแรก)
   ต้องเว้นที่ให้ ไม่งั้นหัวข้อที่เลื่อนไปถึงจะโดน header บัง */
html { scroll-padding-top: 150px; }
@media (max-width: 1099px) { html { scroll-padding-top: 100px; } }

/* พื้นหลังแถบหลักเป็นสีขาว (เดิมเป็น gradient ขาว→เขียวจาก Customizer) */
#masthead .ast-primary-header-bar.main-header-bar {
  background-color: #fff;
  background-image: none;
}

/* รายการเมนูที่มีไว้ให้มือถือเท่านั้น (บัญชีของฉัน / ติดต่อ Support) — คอมไปอยู่แถบบนแล้ว */
.ast-desktop .menu-item.jn-mobile-only { display: none !important; }

/* ── Header: คอม ─────────────────────────────────────────────────────────── */
.ast-desktop #masthead .ast-container,
.ast-desktop #masthead .ast-container-fluid {
  max-width: none;
  padding-inline: 28px;
}

/* Astra ใส่ความสูงขั้นต่ำ/ขอบบนล่างให้แต่ละแถบ ทำให้เส้นใต้เมนูไม่ชนขอบล่างของแถบ — ตัดออก ให้ความสูงมาจาก min-height ของเราเอง */
.ast-desktop #masthead .site-above-header-wrap,
.ast-desktop #masthead .site-primary-header-wrap { min-height: 0; }
.ast-desktop #masthead .ast-primary-header-bar.main-header-bar { padding-block: 0; }

/* แถบบน (เขียวเข้ม) */
.ast-desktop #masthead .ast-above-header-bar {
  background: var(--jn-primary-dark);
  border: 0;
}
.ast-desktop #masthead .ast-above-header-bar .ast-builder-grid-row {
  min-height: 38px;
  align-items: center;
}
.ast-desktop #masthead .ast-above-header-bar,
.ast-desktop #masthead .ast-above-header-bar a {
  color: #fff;
  font-size: .8125rem;
}
.ast-desktop #masthead .ast-above-header-bar .ast-builder-html-element p { margin: 0; }
.ast-desktop #masthead .jn-topbar-promo { font-weight: 600; letter-spacing: .01em; }

.ast-desktop #masthead .ast-above-header-bar .site-header-above-section-right {
  gap: 4px;
  align-items: center;
}
.ast-desktop #masthead .ast-above-header-bar .main-header-menu { gap: 0; }
.ast-desktop #masthead .ast-above-header-bar .main-header-menu > .menu-item > .menu-link {
  padding: 0 12px;
  line-height: 38px;
  color: rgba(255, 255, 255, .88);
  transition: color .15s ease;
}
.ast-desktop #masthead .ast-above-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.ast-desktop #masthead .ast-above-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ตะกร้าบนแถบเขียว: ตัวหนังสือ/ไอคอนขาว ป้ายจำนวนเป็นวงกลมขาว */
.ast-desktop #masthead .ast-above-header-bar .ast-site-header-cart .cart-container,
.ast-desktop #masthead .ast-above-header-bar .ast-site-header-cart .ast-addon-cart-wrap,
.ast-desktop #masthead .ast-above-header-bar .ast-woo-header-cart-info-wrap {
  color: #fff;
  background: transparent;
  border: 0;
  padding-block: 0;
}
.ast-desktop #masthead .ast-above-header-bar .ast-woo-header-cart-total { font-weight: 700; }
.ast-desktop #masthead .ast-above-header-bar .ast-site-header-cart .ast-icon svg { fill: #fff; }
.ast-desktop #masthead .ast-above-header-bar .ast-addon-cart-wrap i.astra-icon:after {
  background: #fff;
  color: var(--jn-primary-dark);
  font-weight: 700;
}

/* แถบหลัก (ขาว): โลโก้ + เมนู ชิดซ้าย */
.ast-desktop #masthead .ast-primary-header-bar .ast-builder-grid-row {
  min-height: 68px;
  align-items: stretch;
}
.ast-desktop #masthead .ast-primary-header-bar .site-header-primary-section-left {
  display: flex;
  align-items: stretch;
  gap: 28px;
}
.ast-desktop #masthead .site-branding,
.ast-desktop #masthead .ast-builder-layout-element[data-section="title_tagline"] {
  display: flex;
  align-items: center;
}
.ast-desktop #masthead .custom-logo-link img { max-height: 58px; width: auto; }

.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu { gap: 0; }
.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 0 14px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: #2b2f2b;
  transition: color .15s ease, box-shadow .15s ease;
}
.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
  color: var(--jn-primary-hover);
  box-shadow: inset 0 -3px 0 var(--jn-primary);
}
/* ลูกศรชี้ลงของรายการที่มีเมนูย่อย */
.ast-desktop #masthead .ast-builder-menu-1 .menu-item-has-children > .menu-link .ast-icon { margin-left: 4px; opacity: .55; }

/* เมนูย่อย (วิธีใช้กับพืชชนิดต่างๆ) */
.ast-desktop #masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu {
  min-width: 260px;
  margin-top: 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #dcdfdc;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}
.ast-desktop #masthead .ast-builder-menu-1 .sub-menu .menu-link {
  padding: 13px 24px;
  font-size: .9375rem;
  font-weight: 500;
  color: #5f6661;
  border-bottom: 1px solid #eef0ee;
  transition: color .15s ease, background-color .15s ease, padding-left .15s ease;
}
.ast-desktop #masthead .ast-builder-menu-1 .sub-menu .menu-item:last-child > .menu-link { border-bottom: 0; }
.ast-desktop #masthead .ast-builder-menu-1 .sub-menu .menu-item:hover > .menu-link,
.ast-desktop #masthead .ast-builder-menu-1 .sub-menu .menu-item.current-menu-item > .menu-link {
  color: var(--jn-primary-hover);
  background: var(--jn-primary-soft);
  padding-left: 28px;
}

/* ── Header: แท็บเล็ต/มือถือ — เมนูในลิ้นชัก ──────────────────────────────── */
.ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-link {
  font-weight: 600;
  color: #2b2f2b;
}
.ast-header-break-point .ast-mobile-popup-content .main-header-menu .sub-menu .menu-link {
  font-weight: 500;
  color: #5f6661;
  padding-left: 34px;
}
/* Astra ใส่ <span class="ast-icon icon-arrow"> ไว้หน้าข้อความของเมนูย่อย ซึ่งในลิ้นชักตกลงมาเป็นบรรทัดแยก — ไม่ต้องใช้ มีลูกศรเปิด/ปิดที่หัวข้อแม่แล้ว */
.ast-header-break-point .ast-mobile-popup-content .main-header-menu .sub-menu .menu-link .ast-icon.icon-arrow { display: none !important; } /* !important: Astra มีกฎ :not(.menu-item-has-children) … :first-of-type ที่ specificity สูงกว่า */

/* ═══ Footer ═══════════════════════════════════════════════════════════════ */
.jn-footer {
  background: var(--jn-primary-dark);
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  line-height: 1.7;
}
.jn-footer a { color: inherit; text-decoration: none; }
.jn-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.jn-footer-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

.jn-footer-main { padding-block: 48px 36px; }
.jn-footer-main .jn-footer-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 640px)  { .jn-footer-main .jn-footer-wrap { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jn-footer-main .jn-footer-wrap { grid-template-columns: 1.5fr 1fr 1.3fr .9fr; gap: 40px; } }

.jn-footer-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.jn-footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}

.jn-footer-products,
.jn-footer-list { margin: 0; padding: 0; list-style: none; }

.jn-footer-product {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.jn-footer-products li:first-child .jn-footer-product { padding-top: 0; }
.jn-footer-product-img { flex: 0 0 64px; }
.jn-footer-product-img img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #fff;
}
.jn-footer-product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jn-footer-product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}
.jn-footer-product-price { font-weight: 700; color: #fff; }
.jn-footer-product-price del { opacity: .65; font-weight: 400; margin-right: 6px; }
.jn-footer-product-price ins { text-decoration: none; }
.jn-footer-more { display: inline-block; margin-top: 14px; font-weight: 600; }

.jn-footer-list li { padding-block: 5px; }
.jn-footer-contact li { display: flex; gap: 10px; }
.jn-footer-contact li > span { min-width: 72px; opacity: .7; }

.jn-footer-address { margin: 0 0 14px; font-style: normal; }
.jn-footer-address strong { color: #fff; }
.jn-footer-address .jn-footer-map { display: inline-block; margin-top: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.jn-footer-qr {
  display: inline-block;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  line-height: 0;
}
.jn-footer-qr:hover { text-decoration: none; }
.jn-footer-qr img { display: block; width: 132px; height: 132px; }
.jn-footer-qr-note { margin: 10px 0 0; font-size: .8125rem; opacity: .75; }

/* แถบล่าง */
.jn-footer-bar {
  padding-block: 16px;
  background: color-mix(in srgb, var(--jn-primary-dark) 72%, #000);
  font-size: .8125rem;
}
.jn-footer-bar-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.jn-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.jn-footer-links a { opacity: .75; }
.jn-footer-links a:hover { opacity: 1; }
.jn-footer-copy { margin: 0; opacity: .7; }

/* มือถือ: เว้นที่ล่างให้ปุ่ม LINE ลอย (มุมขวาล่าง) ไม่บังบรรทัดลิขสิทธิ์ */
@media (max-width: 767px) { .jn-footer-bar { padding-bottom: 84px; } }