/* One header treatment across homepage, shop and regular Miaoling pages.
 * The ID in :is() matches the existing immersive wrapper and gives both page
 * modes equal specificity against the older page-specific header rules.
 */
body.wmi-compact-header,
body.wmi-compact-header.wmi-sitewide.wmi-enabled {
  --wmi-header-height: var(--wmi-header-setting, 72px);
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) header.wp-block-template-part {
  box-sizing: border-box;
  width: var(--wmi-header-viewport, 100vw) !important;
  max-width: none !important;
  min-height: var(--wmi-header-height) !important;
  height: var(--wmi-header-height) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

body.wmi-compact-header > .wp-site-blocks > header.wp-block-template-part {
  position: sticky !important;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

/* Blur a separate layer so the mobile fixed dialog keeps its viewport bounds. */
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) header.wp-block-template-part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgb(70 19 20 / var(--wmi-header-alpha, .54)),
    rgb(89 39 35 / var(--wmi-header-alpha, .54)) 56%,
    rgb(119 73 48 / var(--wmi-header-alpha, .54)));
  border-bottom: 1px solid rgb(211 175 108 / .35);
  box-shadow: inset 0 1px rgb(255 237 199 / .055), 0 8px 24px rgb(15 4 8 / .12);
  -webkit-backdrop-filter: blur(var(--wmi-header-blur, 18px)) saturate(125%);
  backdrop-filter: blur(var(--wmi-header-blur, 18px)) saturate(125%);
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .walkin-miaoling-header {
  position: static !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-header-inner {
  box-sizing: border-box;
  font-size: clamp(.875rem, calc(.875rem + ((var(--wmi-header-viewport, 100vw) * .01 - .2rem) * .217)), 1rem);
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--wmi-header-height) !important;
  height: var(--wmi-header-height) !important;
  margin: 0 !important;
  padding: 0 clamp(20px, calc(var(--wmi-header-viewport, 100vw) * .043), 88px) !important;
  gap: 20px !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-brand-lockup {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: start;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-brand-name {
  margin: 0 !important;
  color: #eddbcd !important;
  font-size: 18px !important;
  letter-spacing: .18em !important;
  white-space: nowrap;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .walkin-header-actions {
  justify-self: end;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 14px !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav {
  gap: 24px !important;
  position: relative !important;
  isolation: auto;
  justify-self: center;
  align-self: stretch !important;
  width: auto !important;
  min-height: 0 !important;
  height: var(--wmi-header-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .walkin-header-actions a {
  color: #d8bf92;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a[aria-disabled="true"] {
  opacity: .45 !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav::before,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav::after,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-primary-nav li::before,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-primary-nav li::after,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-primary-nav a::before,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-primary-nav a::after {
  content: none !important;
  display: none !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav ul {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #eddbcd !important;
  font: 500 14px/1.4 "Noto Serif TC", "PMingLiU", serif !important;
  letter-spacing: .1em !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, color 180ms ease !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav:not(:has(.is-menu-open)) :is(ul, li, a) {
  height: var(--wmi-header-height) !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:hover:not([aria-disabled="true"]) {
  color: #fff0d3 !important;
  background: rgb(218 177 113 / .1) !important;
  box-shadow: inset 1px 0 rgb(215 181 124 / .2), inset -1px 0 rgb(215 181 124 / .2) !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:is([aria-current="page"], [aria-current="location"]):not([aria-disabled="true"]) {
  position: relative;
  color: #f3debd !important;
  background: linear-gradient(180deg, rgb(169 119 78 / .30), rgb(132 71 49 / .24) 65%, rgb(156 98 53 / .30)) !important;
  box-shadow: inset 1px 0 rgb(225 195 136 / .38), inset -1px 0 rgb(225 195 136 / .38), inset 0 1px rgb(255 234 187 / .08) !important;
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:is([aria-current="page"], [aria-current="location"]):not([aria-disabled="true"])::before,
body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:is([aria-current="page"], [aria-current="location"]):not([aria-disabled="true"])::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  opacity: var(--wmi-nav-active-glow, .5);
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:is([aria-current="page"], [aria-current="location"]):not([aria-disabled="true"])::before {
  height: 14px;
  background: radial-gradient(ellipse at 50% 100%, rgb(244 197 111 / .5), transparent 72%);
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:is([aria-current="page"], [aria-current="location"]):not([aria-disabled="true"])::after {
  height: 1px;
  background: linear-gradient(90deg, rgb(228 184 111 / .2), #efd49c 50%, rgb(228 184 111 / .2));
  box-shadow: 0 1px 7px 1px rgb(236 188 98 / .55), 0 3px 13px rgb(204 145 67 / .28);
}

body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a:focus-visible {
  outline: 2px solid #ecd09b !important;
  outline-offset: -5px !important;
}

@media (max-width: 1100px) {
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-header-inner {
    grid-template-columns: minmax(160px, 1fr) auto minmax(100px, 1fr);
    padding-inline: 24px !important;
    gap: 12px !important;
  }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a { padding-inline: 12px !important; font-size: 13px !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .walkin-header-actions .label { display: none !important; }
}

@media (max-width: 900px) {
  body.wmi-compact-header,
  body.wmi-compact-header.wmi-sitewide.wmi-enabled { --wmi-header-height: 64px; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-header-inner { grid-template-columns: 1fr auto auto; padding-inline: 20px !important; gap: 14px !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .miaoling-brand-name { font-size: 16px !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav { align-items: center !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px !important; color: #eddbcd; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; height: 100dvh !important; width: 100% !important; box-sizing: border-box; padding: calc(72px + var(--wp-admin--admin-bar--height, 0px)) 24px 24px !important; background: #261117 !important; color: #eddbcd !important; overflow-y: auto; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .is-menu-open ul { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; height: auto !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .is-menu-open li { height: auto !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .is-menu-open a { height: auto !important; min-height: 48px !important; padding: 12px 24px !important; font-size: 18px !important; }
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) .wp-block-navigation__responsive-container-close { top: 20px; right: 20px; min-width: 44px; min-height: 44px; color: #eddbcd; }
}

@media (prefers-reduced-transparency: reduce) {
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) header.wp-block-template-part::before { background: #421d23; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* WordPress' small-screen admin bar scrolls away with the document. */
@media (max-width: 600px) {
  body.wmi-compact-header > .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) header.wp-block-template-part::before { background: #421d23; }
}
@media (prefers-reduced-motion: reduce) {
  body.wmi-compact-header :is(#wmi-screen, .wp-site-blocks) nav.miaoling-primary-nav a { transition: none !important; }
}

/* Both labels reserve the same space, so hovering never moves the menu. */
body.wmi-compact-header .miaoling-primary-nav .wmi-nav-label {
  display: grid;
  place-items: center;
}
body.wmi-compact-header .miaoling-primary-nav .wmi-nav-label > span {
  grid-area: 1 / 1;
  transition: opacity 160ms ease;
}
body.wmi-compact-header .miaoling-primary-nav .wmi-nav-description { opacity: 0; }
body.wmi-compact-header .miaoling-primary-nav a:focus-visible .wmi-nav-name { opacity: 0; }
body.wmi-compact-header .miaoling-primary-nav a:focus-visible .wmi-nav-description { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.wmi-compact-header .miaoling-primary-nav a:hover .wmi-nav-name { opacity: 0; }
  body.wmi-compact-header .miaoling-primary-nav a:hover .wmi-nav-description { opacity: 1; }
}
/* Touch menus show both labels without requiring a hover gesture. */
@media (max-width: 900px), (hover: none) {
  body.wmi-compact-header .miaoling-primary-nav .wmi-nav-label { gap: 3px; }
  body.wmi-compact-header .miaoling-primary-nav .wmi-nav-label > span { grid-area: auto; opacity: 1 !important; }
  body.wmi-compact-header .miaoling-primary-nav .wmi-nav-description { font-size: .8em; color: #d8bf92; }
}
@media (prefers-reduced-motion: reduce) {
  body.wmi-compact-header .miaoling-primary-nav .wmi-nav-label > span { transition: none; }
}
/* Only the Miaoling presentation hides the preview control; covers stay selectable. */
body.wmi-compact-header.brand-miaoling .wb-image-preview { display: none !important; }

/* The open touch menu owns its layout, independent of compact desktop links. */
@media (max-width:900px) {
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{width:100%!important;max-width:none!important;margin:0!important}
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:calc(100dvh - 120px - var(--wp-admin--admin-bar--height,0px));padding:0!important}
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open ul{width:100%!important;max-width:480px!important;gap:8px!important;align-items:stretch!important}
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open li{width:100%!important}
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open a{width:100%!important;min-height:76px!important;padding:14px 20px!important;font-size:22px!important;line-height:1.4!important;border-radius:12px!important;white-space:normal;text-align:center}
 body.wmi-compact-header :is(#wmi-screen,.wp-site-blocks) nav.miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wmi-nav-description{font-size:14px!important}
}