header > .pu-menu-toggle { display: none; }
header.pu-sticky-header.pu-menu-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  overflow: visible;
}
header.pu-menu-compact > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
header.pu-menu-compact > .pu-header-actions { grid-column: 2; grid-row: 1 / 3; align-self: start; }
header.pu-menu-compact > .pu-menu-toggle {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #d3e2f3;
  border-radius: 10px;
  background: #fffaf0;
  color: #18324d;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pu-menu-symbol { position: relative; display: block; width: 16px; height: 14px; }
.pu-menu-symbol i { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s, opacity .22s; }
.pu-menu-symbol i:nth-child(1) { top: 0; }
.pu-menu-symbol i:nth-child(2) { top: 6px; }
.pu-menu-symbol i:nth-child(3) { top: 12px; }
.pu-menu-open .pu-menu-symbol i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pu-menu-open .pu-menu-symbol i:nth-child(2) { opacity: 0; }
.pu-menu-open .pu-menu-symbol i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pu-menu-chevron { transition: transform .22s; }
.pu-menu-open .pu-menu-chevron { transform: rotate(180deg); }
header.pu-sticky-header.pu-menu-compact > nav {
  position: absolute;
  top: calc(100% + 6px);
  left: var(--pu-menu-left, 4%);
  right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: min(270px, 86vw);
  max-height: min(360px, 55dvh);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #dce5ee;
  border-radius: 14px;
  background: #fffaf2;
  box-shadow: 0 12px 30px rgb(16 31 53 / 15%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(.97);
  transform-origin: top left;
  transition: opacity .22s ease, transform .25s ease, visibility .22s;
  z-index: 5;
}
header.pu-sticky-header.pu-menu-compact.pu-menu-open > nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
header.pu-sticky-header.pu-menu-compact > nav a {
  display: block;
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
}
header.pu-sticky-header.pu-menu-compact > nav a:hover { background: #eaf3ff; border-color: #d3e4fc; }
header .pu-menu-toggle:focus-visible,
header.pu-menu-compact > nav a:focus-visible { outline: 2px solid #1877f2; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  header.pu-menu-compact > nav, .pu-menu-symbol i, .pu-menu-chevron { transition: none; }
}
header.pu-sticky-header.pu-menu-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
}

header.pu-menu-compact > .brand {
  grid-column: 1;
  grid-row: 1;
}

header.pu-menu-compact > .pu-menu-toggle {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

header.pu-menu-compact > .pu-header-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

/* รายการเปิดลงมาตรงกลางใต้แถบเมนู */
header.pu-sticky-header.pu-menu-compact > nav {
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(.97);
  transform-origin: top center;
}

header.pu-sticky-header.pu-menu-compact.pu-menu-open > nav {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ย่อปุ่มบนมือถือจอแคบ */
@media (max-width: 420px) {
  header.pu-menu-compact > .pu-menu-toggle {
    padding: 6px 8px;
    gap: 5px;
  }

  header.pu-menu-compact .pu-menu-chevron {
    display: none;
  }
}
header.pu-menu-compact > .pu-menu-toggle {
  justify-self: start;
  margin-left: 8px;
}
.pu-menu-toggle .pu-menu-chevron {
  display: none;
}
header.pu-sticky-header.pu-menu-compact > nav {
  left: var(--pu-menu-left, 4%);
  right: auto;
  transform: translateY(-10px) scale(.97);
  transform-origin: top left;
}

header.pu-sticky-header.pu-menu-compact.pu-menu-open > nav {
  transform: translateY(0) scale(1);
}