/**
 * sa-mnav.css — 手机端导航按钮 + 全屏抽屉
 * 2026-10-10 建。配套 sa-mnav.js（按钮和抽屉的 DOM 都由 JS 建，这里只管长相）。
 *
 * 设计语言全部取自主题根变量（style.css:21-56）：金色 #c5a059、羊皮纸 #f4f1ea、
 * 胶囊圆角 99px、金色细线 rgba(197,160,89,.26)、衬线体 Cormorant Garamond。
 *
 * ⚠ 特异性策略：凡是覆盖主题已有类的规则，一律写成「.sa-nav-inner 的直接子元素」，
 *   这样永远不会误伤抽屉里的东西（抽屉挂在 body 下，不是 nav 的子元素）。
 */

/* ============================================================
   1. 汉堡按钮
   ============================================================ */

.sa-mnav-toggle {
  display: none;                     /* 默认不显示；由 JS 实测导航是否被收起后加 .is-on */
  position: relative;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  color: var(--sa-parch, #f4f1ea);
  background: transparent;
  border: 1px solid rgba(197, 160, 89, .26);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.sa-mnav-toggle.is-on { display: inline-flex; }

.sa-mnav-toggle:hover { color: #dcbb7c; border-color: rgba(197, 160, 89, .6); }
.sa-mnav-toggle:focus-visible { outline: 2px solid var(--sa-gold-hi, #dcbb7c); outline-offset: 2px; }

.sa-mnav-bars {
  position: relative;
  display: block;
  width: 15px;
  height: 11px;
}

.sa-mnav-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.sa-mnav-bars i:nth-child(1) { top: 0; }
.sa-mnav-bars i:nth-child(2) { top: 4.75px; }
.sa-mnav-bars i:nth-child(3) { bottom: 0; }

/* ============================================================
   2. 抽屉本体
   ============================================================ */

.sa-mnav {
  position: fixed;
  inset: 0;
  /* 低于 wpadminbar(99999) —— 登录状态下后台条保持可见可点，不被抽屉盖住 */
  z-index: 99990;

  /* 兜底：面板正常情况下挂在 #saRoot 内、会继承主题排版；
     万一将来被挪到 .sa-root 外面，这两行保证不会变成黑字无衬线。 */
  color: var(--sa-parch, #f4f1ea);
  font-family: var(--sa-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* 同理兜底：主题的 box-sizing 复位只在 .sa-root 内生效（style.css:73-75），
   这里自带一份，位置怎么挪都不会因为 content-box 而撑破。 */
.sa-mnav,
.sa-mnav *,
.sa-mnav *::before,
.sa-mnav *::after { box-sizing: border-box; }

.sa-mnav[hidden] { display: none; }

/* 登录状态下 WP 后台条占顶部 32px（手机 46px），抽屉整体下移，否则关闭按钮被压住 */
body.admin-bar .sa-mnav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .sa-mnav { top: 46px; }
}

.sa-mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .32s ease;
}

.sa-mnav.is-open .sa-mnav-backdrop { opacity: 1; }

/* 从**左边**滑出（2026-10-10 按 Melo 要求从右边改过来）。
   与汉堡按钮同在左侧，方向一致；改方向要同时改四处，漏一处就会出现
   「面板在左边、却从右边飞进来」：left/right、border、box-shadow、transform 符号。 */
.sa-mnav-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #141312, #0d0d0c);
  border-right: 1px solid var(--sa-gold-line, rgba(197, 160, 89, .26));
  box-shadow: 24px 0 70px rgba(0, 0, 0, .62);
  transform: translateX(-100%);
  transition: transform .42s var(--sa-ease, cubic-bezier(.22, .61, .36, 1));
}

.sa-mnav.is-open .sa-mnav-drawer { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sa-mnav-backdrop,
  .sa-mnav-drawer { transition: none; }
}

/* ---------- 抽屉头部 ---------- */

.sa-mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px 26px;
  flex: 0 0 auto;
}

.sa-mnav-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sa-parch, #f4f1ea);
}

.sa-mnav-brand em { font-style: normal; color: var(--sa-gold, #c5a059); }

.sa-mnav-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--sa-parch, #f4f1ea);
  background: transparent;
  border: 1px solid rgba(197, 160, 89, .26);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.sa-mnav-close:hover { color: #dcbb7c; border-color: rgba(197, 160, 89, .6); }
.sa-mnav-close:focus-visible { outline: 2px solid var(--sa-gold-hi, #dcbb7c); outline-offset: 2px; }
.sa-mnav-close svg { display: block; width: 15px; height: 15px; }

/* ---------- ─── ◆ ─── 分隔 ---------- */

.sa-mnav-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 26px 6px;
  font-size: 8px;
  line-height: 1;
  color: var(--sa-gold, #c5a059);
  flex: 0 0 auto;
}

.sa-mnav-rule::before,
.sa-mnav-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 160, 89, .26), transparent);
}

/* ---------- 导航项 ---------- */

.sa-mnav-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 26px 0;
  flex: 0 0 auto;
}

body .sa-mnav .sa-mnav-link {
  display: block;
  padding: 15px 0;
  font-family: var(--sa-font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--sa-parch, #f4f1ea);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, .06);
  transition: color .3s ease, padding-left .3s var(--sa-ease, ease);
}

body .sa-mnav .sa-mnav-link:last-child { border-bottom: 0; }
body .sa-mnav .sa-mnav-link:hover { color: var(--sa-gold-hi, #dcbb7c); }
body .sa-mnav .sa-mnav-link:focus-visible { outline: 2px solid var(--sa-gold-hi, #dcbb7c); outline-offset: 3px; }

@media (hover: hover) {
  body .sa-mnav .sa-mnav-link:hover { padding-left: 6px; }
}

/* ---------- 底部 CTA ---------- */

.sa-mnav-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  flex: 0 0 auto;
}

/* 特异性 (0,3,1) > 上面任何 .sa-nav-inner > .sa-nav-btn 的覆盖，所以抽屉里的 CTA
   不受「窄屏把导航里那个 CTA 收起来」的影响。 */
body .sa-mnav .sa-mnav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: .12em;
}

.sa-mnav-note {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sa-mute, rgba(244, 241, 234, .28));
}

/* ============================================================
   3. 为汉堡按钮腾出空间
   ------------------------------------------------------------
   手机导航栏本来就排满了：390px 时 logo 128 + 购物车 34 + CTA 94 = 266，
   可用宽仅 312，只剩 14px 富余。再塞一个 34px 按钮必然溢出，
   所以在导航被收起的那一档把这一栏整体压一压。
   ⚠ 只作用于 .sa-nav-inner 的直接子元素 —— 抽屉挂在 body 下，不受影响。
   ============================================================ */

@media (max-width: 899.98px) {
  body .sa-nav-inner { gap: 12px; }
  body .sa-nav-inner > .sa-nav-cart { margin-right: 0; }
}

@media (max-width: 809.98px) {
  body .sa-nav-inner > .sa-logo { font-size: 11px; letter-spacing: .18em; }
  body .sa-nav-inner > .sa-nav-btn { height: 38px; padding: 0 13px; font-size: 10.5px; letter-spacing: .08em; }
}

@media (max-width: 479.98px) {
  body .sa-nav-inner { gap: 10px; }
  body .sa-nav-inner > .sa-logo { font-size: 10.5px; letter-spacing: .14em; }
  body .sa-nav-inner > .sa-nav-btn { padding: 0 10px; font-size: 10px; letter-spacing: .05em; }
}

/* 极窄屏（≤359.98px，老机型）：把导航栏里的主 CTA 收掉，它仍然在抽屉底部，
   转化路径不断，只是多一次点击 —— 好过整条导航挤爆换行。 */
@media (max-width: 359.98px) {
  body .sa-nav-inner > .sa-logo { font-size: 10px; letter-spacing: .12em; }
  body .sa-nav-inner > .sa-nav-btn { display: none; }
}