/* language: css, target: browser, phase: 微信分享入口、链接卡片预览与分享图 */
/* 命名空间 wx-*，避免与站点原有样式冲突；CSP style-src 'self' 允许同源加载 */

:root {
  --wx-ink: #191919;
  --wx-sub: #8a8a8f;
  --wx-line: #e7e7ea;
  --wx-panel: #ffffff;
  --wx-brand: #7762ce;
}

.wx-fab {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 2147482000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: linear-gradient(135deg, #7762ce, #5a49b0);
  color: #fff;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(52, 38, 110, .38);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-fab:hover { filter: brightness(1.08); }
.wx-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wx-fab svg { width: 19px; height: 19px; flex: none; }

.wx-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 6, 16, .62);
  backdrop-filter: blur(3px);
}
.wx-overlay.is-open { display: flex; }

.wx-panel {
  width: min(420px, 100%);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  background: var(--wx-panel);
  color: var(--wx-ink);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  padding: 20px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-overflow-scrolling: touch;
}
.wx-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wx-panel-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.wx-close {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: #f2f2f5; color: #666; font-size: 19px; line-height: 1; cursor: pointer;
}
.wx-close:focus-visible { outline: 2px solid var(--wx-brand); outline-offset: 2px; }

/* 两个分享形态：图片（默认，100% 可控） / 链接卡片 */
.wx-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: #f3f2f7; border-radius: 10px;
}
.wx-tab {
  flex: 1; padding: 8px 6px; border: 0; border-radius: 8px;
  background: transparent; color: #77737f;
  font: 600 13px/1.2 inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-tab.is-active { background: #fff; color: var(--wx-brand); box-shadow: 0 1px 5px rgba(30, 20, 60, .10); }
.wx-tab:focus-visible { outline: 2px solid var(--wx-brand); outline-offset: 1px; }
.wx-tabpane { display: none; }
.wx-tabpane.is-active { display: block; }

.wx-lead {
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px; background: #f6f3ff; color: #5f5488;
  font-size: 12px; line-height: 1.65;
}
.wx-label { margin: 0 0 9px; color: var(--wx-sub); font-size: 12px; }

/* 分享图预览：图片必须允许长按保存 / 转发 */
.wx-poster-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: 10px;
  border: 1px solid var(--wx-line); border-radius: 12px; background: #f7f7f9;
}
.wx-poster-loading { color: var(--wx-sub); font-size: 12.5px; }
.wx-poster-img {
  display: block; width: auto; max-width: 100%; max-height: 46dvh;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(24, 16, 50, .18);
  -webkit-touch-callout: default; user-select: auto;
}
.wx-poster-img[hidden] { display: none; }
.wx-poster-img { cursor: zoom-in; }
.wx-poster-tip { margin: 10px 0 14px; color: var(--wx-sub); font-size: 11.5px; line-height: 1.6; }

/* 原尺寸大图：长按保存 / 截屏都基于 750x1180 原图，二维码不被缩糊 */
.wx-zoom {
  position: fixed; inset: 0; z-index: 2147482600; display: none;
  overflow-y: auto; padding: 14px 10px 26px;
  background: #0a0714; text-align: center;
  -webkit-overflow-scrolling: touch;
}
.wx-zoom.is-open { display: block; }
.wx-zoom img {
  display: block; width: min(750px, 96vw); height: auto; margin: 0 auto;
  border-radius: 6px; -webkit-touch-callout: default; user-select: auto;
}
.wx-zoom p {
  display: inline-block; margin: 16px 0 0; padding: 10px 16px;
  border-radius: 10px; background: rgba(255, 255, 255, .07); color: #d2caea;
  font: 12px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 仿微信聊天里的链接卡片：左文右图，两行截断 */
.wx-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--wx-line);
  border-radius: 12px;
  background: #f7f7f9;
  text-align: left;
}
.wx-card-text { min-width: 0; flex: 1; }
.wx-card-title {
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--wx-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}
.wx-card-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--wx-sub);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.wx-card-thumb {
  width: 62px; height: 62px; flex: none;
  border-radius: 8px; object-fit: cover;
  background: #e9e6f7;
}
.wx-card-source { margin: 9px 0 0; font-size: 11px; color: #a4a4aa; }
.wx-note { margin: 10px 0 16px; font-size: 11.5px; line-height: 1.55; color: var(--wx-sub); }

.wx-qr-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; margin-bottom: 16px;
  border: 1px dashed #d9d4f0; border-radius: 12px; background: #fbfaff;
}
.wx-qr {
  width: 108px; height: 108px; flex: none;
  background: #fff; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--wx-sub); text-align: center;
}
.wx-qr canvas, .wx-qr img { display: block; width: 108px !important; height: 108px !important; }
.wx-qr-hint { font-size: 12px; color: #5d5578; line-height: 1.6; }
.wx-qr-hint strong { display: block; margin-bottom: 3px; color: var(--wx-ink); font-size: 13px; }

.wx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wx-btn {
  padding: 11px 8px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.wx-btn:focus-visible { outline: 2px solid var(--wx-brand); outline-offset: 2px; }
.wx-btn-primary { background: var(--wx-brand); color: #fff; }
.wx-btn-ghost { background: #fff; color: var(--wx-ink); border-color: var(--wx-line); }
.wx-btn:disabled { opacity: .55; cursor: default; }

.wx-url {
  margin-top: 12px; padding: 9px 10px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--wx-line); border-radius: 8px; background: #fafafa;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: #555;
}

.wx-toast {
  position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); z-index: 2147483000;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(20, 16, 34, .93); color: #fff; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  max-width: 82vw; text-align: center;
}
.wx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 微信内置浏览器：右上角「···」引导蒙层 */
.wx-guide {
  position: fixed; inset: 0; z-index: 2147482500; display: none;
  background: rgba(0, 0, 0, .82); color: #fff;
  font: 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 22px;
  text-align: right;
}
.wx-guide.is-open { display: block; }
.wx-guide-arrow { font-size: 46px; line-height: 1; margin: 0 6px 8px 0; color: #fff; }
.wx-guide p { margin: 6px 0 0; text-align: right; }
.wx-guide small { display: block; margin-top: 14px; color: #c9c4dd; font-size: 12.5px; }
.wx-guide-tip {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: min(300px, 82%); text-align: center; line-height: 1.8;
}

/* 桌面宽视口没有底部 tab bar，浮标下移到视口角落，避免压住首屏主视觉的 CTA */
@media (min-width: 768px) {
  /* 桌面端 floating-cart 在 right:32px/bottom:28px，浮标固定左下避开 */
  .wx-fab { left: 24px; right: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  .wx-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); padding: 9px 13px; }
  .wx-panel { padding: 17px; border-radius: 16px; }
  .wx-poster-img { max-height: 42dvh; }
  .wx-qr { width: 92px; height: 92px; }
  .wx-qr canvas, .wx-qr img { width: 92px !important; height: 92px !important; }
}


/* ---- 子站：店铺切换器改为静态店名，顾客不跨店跳转 ---- */
.store-picker .store-current {
  display: inline-flex; align-items: center;
  padding: 5px 9px; border: 1px solid #d7d0e3; border-radius: 8px;
  background: #fff; color: #272130; font-size: 12px; white-space: nowrap;
  cursor: default; -webkit-tap-highlight-color: transparent;
}
/* ---- 店铺切换器：替代原生 select（微信 X5 对透明化 select 的 change 事件不可靠） ----
   菜单项用 a[data-link]，点击直接走 app.js 全局委托的 navigate()，无 JS 事件依赖。 */
.store-picker details.store-menu { position: relative; margin-left: auto; }
.store-menu > summary {
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer;
  padding: 5px 9px; border: 1px solid #d7d0e3; border-radius: 8px;
  background: #fff; color: #272130; font-size: 12px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.store-menu > summary::-webkit-details-marker { display: none; }
.store-menu > summary::marker { content: ''; }
.store-menu > summary svg { width: 13px; height: 13px; flex: none; transition: transform .18s; }
.store-menu[open] > summary svg { transform: rotate(90deg); }
.store-menu:not([open]) > .store-menu-list { display: none; }
.store-menu[open] > .store-menu-list { display: block; }
.store-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 186px; padding: 6px; border-radius: 12px;
  background: #2a2433; box-shadow: 0 12px 36px rgba(20, 14, 32, .34);
}
.store-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 8px;
  color: #ece7f5; text-decoration: none; font-size: 13px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.store-menu-item + .store-menu-item { border-top: 1px solid rgba(255, 255, 255, .07); }
.store-menu-item:active { background: rgba(255, 255, 255, .10); }
.store-menu-item.is-current { color: #fff; font-weight: 600; }
.store-menu-item svg,
.store-menu-check { width: 15px; height: 15px; flex: none; color: #c9b6ff; }
@media (max-width: 760px) {
  .store-menu > summary { font-size: 12px; padding: 4px 8px; }
  .store-menu-list { min-width: 178px; }
  .store-menu-item { padding: 12px; font-size: 14px; }
}

/* ===== 立牌子分类筛选条（福瑞立牌 / BL立牌） ===== */
.stand-filter {
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 4px; padding: 2px 0 18px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stand-filter::-webkit-scrollbar { display: none; }
.stand-filter button {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid rgba(74, 58, 116, .16); background: #fff;
  color: #4a4260; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.stand-filter button:active { transform: scale(.97); }
.stand-filter button small { font-size: 11px; font-weight: 700; opacity: .55; }
.stand-filter button.active {
  background: var(--accent, #7762ce); border-color: var(--accent, #7762ce); color: #fff;
  box-shadow: 0 6px 16px rgba(80, 60, 150, .24);
}
.stand-filter button.active small { opacity: .85; }
@media (max-width: 420px) {
  .stand-filter { gap: 8px; padding: 2px 0 14px; }
  .stand-filter button { padding: 9px 14px; font-size: 13px; }
}