/*
 * OBY Smart Menu 样式（店面和管理页预览共用）
 * 尺寸/阴影照抄 2026-10-17 截下来的 qikify 菜单：顶栏 16px 字距 1px、高 37、左右 11；
 * 下拉白底 + 1px #eaeaea 内描边 + 0 5px 20px 阴影；小标题粗体带细下划线。
 * 颜色/字体默认 inherit（= 沿用主题），设了才由 CSS 变量覆盖。
 */
.obysm, .obysm-mobile { --obysm-gap: 20px; }

/* ---------- 电脑：顶栏 ---------- */
.obysm--desktop { position: relative; width: 100%; background: var(--obysm-top-bg, transparent); }
.obysm-top { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.obysm--wrap .obysm-top { flex-wrap: wrap; }
.obysm--align-center .obysm-top { justify-content: center; }
.obysm--align-end .obysm-top { justify-content: flex-end; }
.obysm--vertical .obysm-top { flex-direction: column; }
.obysm-top__item { position: static; margin: 0; padding: 0; list-style: none; }
.obysm-sub--flyout { position: relative; }
.obysm-top__link {
  display: flex; align-items: center; gap: 4px; height: var(--obysm-top-h, 37px); padding: 0 var(--obysm-top-pad, 11px);
  font-family: var(--obysm-top-font, inherit); font-size: var(--obysm-top-size, 16px); letter-spacing: var(--obysm-top-ls, 1px);
  color: var(--obysm-top-text, rgb(51, 51, 51)); text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1.2;
}
.obysm-top__item.obysm-open > .obysm-top__link,
.obysm-top__link:hover { color: var(--obysm-top-active-text, var(--obysm-top-text, rgb(51, 51, 51))); background: var(--obysm-top-active-bg, transparent); }
.obysm-top__link:focus-visible, .obysm-link:focus-visible, .obysm-heading:focus-visible, .obysm-fly__link:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.obysm-ind { width: 10px; height: 10px; flex: none; fill: currentColor; transition: transform .15s ease; }
.obysm-open > .obysm-top__link .obysm-ind { transform: rotate(180deg); }
.obysm-ind--right { margin-left: auto; }
.obysm-img { display: block; max-width: 100%; height: auto; }

/* ---------- 电脑：下拉公共 ---------- */
.obysm-panel {
  position: absolute; z-index: 50; top: 100%; margin: 0; list-style: none; text-align: left;
  background: var(--obysm-sub-bg, #fff); color: var(--obysm-sub-text, #000);
  box-shadow: inset 0 0 0 1px #eaeaea, 0 5px 20px rgba(0, 0, 0, .15);
  font-family: var(--obysm-sub-font, inherit); font-size: var(--obysm-sub-size, 16px); letter-spacing: var(--obysm-sub-ls, 1px);
  visibility: hidden; opacity: 0; pointer-events: none;
}
.obysm-open > .obysm-panel { visibility: visible; opacity: 1; pointer-events: auto; }
.obysm--anim-fade .obysm-panel { transition: opacity .15s ease, visibility 0s linear .15s; }
.obysm--anim-fade .obysm-open > .obysm-panel { transition: opacity .15s ease, visibility 0s; }
.obysm--anim-slide .obysm-panel { transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.obysm--anim-slide .obysm-open > .obysm-panel { transform: none; transition: opacity .15s ease, transform .15s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .obysm-panel, .obysm-open > .obysm-panel { transition: none !important; transform: none !important; } }

/* ---------- 电脑：Mega 大下拉 ---------- */
.obysm-panel--mega { left: 0; right: 0; padding: 10px 10px 25px; }
.obysm--fullwidth .obysm-panel--mega { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.obysm--fullwidth.obysm--anim-slide .obysm-panel--mega { transform: translate(-50%, -6px); }
.obysm--fullwidth.obysm--anim-slide .obysm-open > .obysm-panel--mega { transform: translateX(-50%); }
/* 每列左右各 10px（列间距 20px），宽度 = 几格/12 × 总宽 − 20px；automatic 列平分剩下的 —— 和 Smart Menu 量出来的一致 */
.obysm-grid { display: flex; flex-wrap: wrap; row-gap: 10px; }
.obysm-col { box-sizing: border-box; min-width: 0; margin: 0 calc(var(--obysm-gap) / 2); padding: 10px 0; }
.obysm-col--span { flex: 0 0 calc(var(--obysm-span) / 12 * 100% - var(--obysm-gap)); max-width: calc(var(--obysm-span) / 12 * 100% - var(--obysm-gap)); }
.obysm-col--auto { flex: 1 1 0; min-width: 140px; }
.obysm-align-center { text-align: center; }
.obysm-align-right { text-align: right; }
.obysm-heading {
  display: block; padding: 8px 0 7px; margin-bottom: 8px; font-weight: 700; color: var(--obysm-sub-text, #000); text-decoration: none;
  border-bottom: 1px solid var(--obysm-heading-line, #eaeaea);
}
.obysm-list { margin: 0; padding: 0; list-style: none; }
.obysm-list__item { margin: 0; padding: 0; list-style: none; }
.obysm-link { display: block; padding: 5px 0; color: var(--obysm-sub-text, #000); text-decoration: none; line-height: 1.4; }
a.obysm-link:hover, a.obysm-heading:hover { color: var(--obysm-sub-hover, var(--obysm-sub-text, #000)); text-decoration: underline; }
.obysm-image-link { display: block; color: inherit; text-decoration: none; }
.obysm-image-caption { display: block; padding-top: 8px; }
.obysm-nolink { cursor: default; }

/* ---------- 电脑：Flyout 小下拉 ---------- */
.obysm-panel--flyout { left: 0; padding: 7px 0; box-sizing: content-box; }
.obysm-panel--nested { top: -7px; left: 100%; }
.obysm-fly--rtl.obysm-panel--nested { left: auto; right: 100%; }
.obysm-fly__item { position: relative; margin: 0; padding: 0; list-style: none; }
.obysm-fly__link { display: flex; align-items: center; gap: 6px; padding: 7px 24px; color: var(--obysm-sub-text, #000); text-decoration: none; line-height: 1.4; }
.obysm-fly__item:hover > .obysm-fly__link, .obysm-fly__item.obysm-open > .obysm-fly__link { color: var(--obysm-sub-hover, var(--obysm-sub-text, #000)); text-decoration: underline; }

/* ---------- 手机：抽屉里的手风琴（替换 Expanse .slide-nav 的内容） ---------- */
.obysm-mobile { margin: 0; padding: 0; list-style: none; }
.obysm-mobile .obysm-m__item { margin: 0; padding: 0; list-style: none; }
.obysm-m__row { display: flex; align-items: center; min-height: 46px; }
.obysm-m__link {
  flex: 1; display: block; padding: 10px 15px; color: var(--obysm-top-text, inherit); text-decoration: none;
  font-family: var(--obysm-top-font, inherit); font-size: var(--obysm-top-size, 16px); letter-spacing: var(--obysm-top-ls, 1px);
}
.obysm-m__sub .obysm-m__link { font-size: var(--obysm-sub-size, 15px); letter-spacing: var(--obysm-sub-ls, 1px); }
.obysm-m__link--heading { font-weight: 700; }
.obysm-m__toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.obysm-m__toggle .obysm-ind { width: 12px; height: 12px; }
.obysm-m-open > .obysm-m__row .obysm-ind { transform: rotate(180deg); }
.obysm-m__row--toggle { cursor: pointer; }
.obysm-m__sub { margin: 0; padding: 0 0 6px 15px; list-style: none; }
.obysm-m__sub[hidden] { display: none; }