/* Shop navigation: desktop dropdowns and touch-friendly mobile disclosures. */
.primary-navigation { height: 100%; gap: 22px; margin-right: 16px; }
.nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-trigger { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; height: 100%; min-height: 44px; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; white-space: nowrap; transition: color .18s; }
.nav-trigger::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.nav-trigger:hover, .nav-trigger[aria-expanded='true'] { color: var(--lime); }
.nav-trigger[aria-expanded='true']::after { transform: scaleX(1); }
.nav-chevron { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .18s; }
.nav-trigger[aria-expanded='true'] .nav-chevron { transform: rotate(180deg); }
.nav-submenu[hidden] { display: none !important; }
.nav-submenu { position: absolute; z-index: 5; top: calc(100% - 1px); left: -20px; width: 282px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 145px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: #f4f5f0; border: 1px solid #dce3d2; border-top: 2px solid var(--lime); border-radius: 0 0 4px 4px; box-shadow: 0 20px 42px #0005; color: #172110; color-scheme: light; scrollbar-width: thin; }
.nav-submenu-end { left: auto; right: -15px; }
.nav-submenu .nav-submenu-kicker { padding: 8px 12px 12px; margin: 0 0 4px; color: #78816e; font-size: 9px; font-weight: 700; line-height: 1.7; letter-spacing: .12em; }
.nav-submenu ul { list-style: none; margin: 0; padding: 0; }
.primary-navigation .nav-submenu a, .primary-navigation .nav-submenu button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 17px; width: 100%; min-height: 43px; padding: 10px 12px; border: 0; border-radius: 2px; background: transparent; color: #26371b; font-family: var(--body); font-size: 12px; font-weight: 650; line-height: 1.7; letter-spacing: 0; text-align: left; transition: background .16s, color .16s; word-break: normal; overflow-wrap: normal; }
.primary-navigation .nav-submenu a::after, .primary-navigation .nav-submenu button::after { content: ''; flex: 0 0 auto; width: 5px; height: 5px; margin-right: 2px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .35; }
.primary-navigation .nav-submenu a:hover, .primary-navigation .nav-submenu button:hover { color: #3f641e; background: #e6eedb; }
.primary-navigation .nav-submenu a:focus-visible, .primary-navigation .nav-submenu button:focus-visible { background: #e6eedb; outline: 2px solid #547c2d; outline-offset: -2px; }
.primary-navigation .nav-submenu .nav-submenu-overview { border-top: 1px solid #d7dfcc; margin-top: 8px; padding-top: 14px; border-radius: 0; color: #4a6e2b; font-size: 11px; }
html[lang='th'] .primary-navigation { gap: 20px; }
html[lang='th'] .nav-trigger { font-family: var(--thai-body); font-weight: 550; }
html[lang='th'] .nav-submenu .nav-submenu-kicker { font-family: var(--thai-body); font-size: 11px; letter-spacing: 0; font-weight: 500; }
html[lang='th'] .primary-navigation .nav-submenu a, html[lang='th'] .primary-navigation .nav-submenu button { font-family: var(--thai-body); font-size: 14px; font-weight: 550; line-height: 1.8; }
html[lang='th'] .primary-navigation .nav-submenu .nav-submenu-overview { font-size: 13px; }

@media (min-width: 981px) and (max-width: 1200px) {
  .primary-navigation { gap: 16px; margin-right: 8px; }
  html[lang='th'] .primary-navigation { gap: 13px; }
  .nav-trigger { gap: 5px; }
  .nav-chevron { width: 10px; height: 10px; }
}
@media (max-width: 980px) {
  .primary-navigation { height: auto; margin: 0; max-height: calc(100dvh - 126px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 22px; scrollbar-width: thin; }
  .primary-navigation.is-open, html[lang='th'] .primary-navigation.is-open { gap: 0; }
  .nav-dropdown { display: block; width: 100%; }
  .nav-trigger { width: 100%; height: auto; min-height: 52px; padding: 14px 12px; border-bottom: 1px solid #2c3c21; font-size: 14px; }
  .nav-trigger::after { left: 12px; right: 12px; height: 1px; }
  .nav-chevron { width: 13px; height: 13px; }
  .nav-submenu { position: static; width: 100%; max-width: none; max-height: none; overflow: visible; margin: 0 0 10px; padding: 8px 10px; border: 0; border-top: 1px solid var(--lime); border-radius: 0 0 3px 3px; box-shadow: none; }
  .nav-submenu .nav-submenu-kicker { padding-top: 10px; padding-bottom: 7px; }
  .primary-navigation .nav-submenu a, .primary-navigation .nav-submenu button { min-height: 44px; font-size: 13px; padding: 10px 12px; }
  .primary-navigation .nav-submenu .nav-submenu-overview { margin-top: 5px; padding-top: 12px; font-size: 12px; }
  .primary-navigation > a { padding-inline: 12px; }
  html[lang='th'] .nav-trigger { font-size: 15px; }
  html[lang='th'] .primary-navigation .nav-submenu a, html[lang='th'] .primary-navigation .nav-submenu button { font-size: 15px; }
  html[lang='th'] .primary-navigation .nav-submenu .nav-submenu-overview { font-size: 14px; }
}
@media (max-width: 365px) {
  .primary-navigation { padding-inline: 16px; }
  .nav-submenu { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-trigger, .nav-trigger::after, .nav-chevron, .primary-navigation .nav-submenu a, .primary-navigation .nav-submenu button { transition: none; }
}