:root {
  --primary: #ff4d4f;
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #222;
  --muted: #888;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* 顶部 */
.header { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.header-inner { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { font-size: 22px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.search-box { flex: 1; display: flex; }
.search-box input { flex: 1; border: 2px solid var(--primary); border-right: none; border-radius: 8px 0 0 8px; padding: 8px 14px; font-size: 14px; outline: none; }
.search-box button { background: var(--primary); color: #fff; border: none; border-radius: 0 8px 8px 0; padding: 0 22px; cursor: pointer; font-size: 14px; }
.cart-btn { background: #fff5f5; color: var(--primary); border: 1px solid var(--primary); border-radius: 20px; padding: 8px 16px; cursor: pointer; font-size: 14px; position: relative; }
.cart-count { background: var(--primary); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; margin-left: 4px; }

/* 横幅 */
.banner { background: linear-gradient(120deg, #ff6b6b, #ff9068); color: #fff; text-align: center; padding: 56px 16px; margin-bottom: 24px; }
.banner h1 { font-size: 32px; margin-bottom: 10px; }
.banner p { opacity: .92; }

/* 分类 */
.categories { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-btn { background: #fff; border: 1px solid #e5e5e5; border-radius: 20px; padding: 8px 18px; cursor: pointer; font-size: 14px; transition: all .2s; }
.cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 商品区 */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-head h2 { font-size: 20px; }
.sort-select { padding: 6px 10px; border-radius: 8px; border: 1px solid #ddd; background: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding-bottom: 40px; }
.product-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.product-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 56px; }
.product-info { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.product-name { font-size: 14px; line-height: 1.4; margin-bottom: 8px; flex: 1; }
.product-meta { display: flex; align-items: baseline; justify-content: space-between; }
.product-price { color: var(--primary); font-size: 18px; font-weight: 700; }
.product-price small { font-size: 12px; }
.product-sales { color: var(--muted); font-size: 12px; }
.add-cart { margin-top: 10px; background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 8px 0; cursor: pointer; font-size: 14px; }
.add-cart:hover { filter: brightness(1.08); }
.empty-tip { text-align: center; color: var(--muted); padding: 60px 0; }

/* 购物车抽屉 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.mask.show { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: -400px; width: 380px; max-width: 92vw; height: 100vh; background: #fff; z-index: 100; transition: right .3s; display: flex; flex-direction: column; }
.cart-drawer.show { right: 0; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #eee; }
.close-btn { border: none; background: none; font-size: 18px; cursor: pointer; color: #666; }
.cart-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #eee; }
.cart-item .emoji { font-size: 32px; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 13px; margin-bottom: 4px; }
.cart-item-price { color: var(--primary); font-size: 14px; font-weight: 600; }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 24px; height: 24px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; }
.cart-foot { border-top: 1px solid #eee; padding: 16px; }
.cart-total { margin-bottom: 12px; text-align: right; }
.cart-total strong { color: var(--primary); font-size: 20px; }
.checkout-btn { width: 100%; background: var(--primary); color: #fff; border: none; border-radius: 24px; padding: 12px 0; font-size: 16px; cursor: pointer; }
.cart-empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* 底部 */
.footer { background: #222; color: #aaa; text-align: center; padding: 24px 0; font-size: 13px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%) translateY(20px); background: rgba(0,0,0,.8); color: #fff; padding: 10px 22px; border-radius: 20px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .search-box { order: 3; width: 100%; }
  .banner h1 { font-size: 24px; }
}

/* ========== 平台主理人专属背景音乐（admin-bgm） ==========
   仅在登录用户 role === "admin" 时按需加载，普通会员零流量 */
.admin-music {
  position: fixed; right: 22px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  animation: amIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes amIn { from { opacity:0; transform: translateY(14px) scale(.9); } to { opacity:1; transform:none; } }

.admin-music .am-disc {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background:
    radial-gradient(circle at 50% 50%, #f5f0e6 0 5px, #1a2a4a 5px 7px, transparent 7px),
    radial-gradient(circle at 34% 28%, #3d5b96, #1a2a4a 55%, #101a30 100%);
  box-shadow: 0 6px 18px rgba(26,42,74,.32), inset 0 0 0 1px rgba(245,230,228,.18);
  display: flex; align-items: center; justify-content: center;
  color: #f0e3d0; font-size: 15px; position: relative; flex: none;
  transition: transform .25s, box-shadow .25s;
}
.admin-music .am-disc:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(26,42,74,.42); }
.admin-music .am-disc::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(184,135,59,.0); transition: border-color .3s;
}
.admin-music.playing .am-disc::after { border-color: rgba(184,135,59,.55); animation: amRipple 2.4s ease-out infinite; }
@keyframes amRipple { 0%{ transform:scale(.94); opacity:.9 } 100%{ transform:scale(1.22); opacity:0 } }
.admin-music.playing .am-disc { animation: amSpin 7s linear infinite; }
.admin-music.playing .am-disc:hover { animation-play-state: paused; }
@keyframes amSpin { to { transform: rotate(360deg) } }

.admin-music .am-info {
  background: rgba(26,42,74,.94); color: #f2ead9; border-radius: 12px;
  padding: 7px 13px 8px; font-size: 12px; line-height: 1.45; letter-spacing: .3px;
  box-shadow: 0 6px 18px rgba(26,42,74,.28);
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: .3s;
  white-space: nowrap;
}
.admin-music:hover .am-info, .admin-music.show-info .am-info { opacity: 1; transform: none; pointer-events: auto; }
.admin-music .am-info b { display: block; color: #e8c07d; font-size: 12.5px; font-weight: 700; }
.admin-music .am-info span { color: #b9c4d8; font-size: 11px; }
@media (max-width: 760px) {
  .admin-music { right: 14px; bottom: 16px; }
  .admin-music .am-disc { width: 46px; height: 46px; font-size: 13px; }
  .admin-music .am-info { display: none; }
}


/* ===== 我在哪里（城市定位条）===== */
.yjy-hloc { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px auto 6px; }
.hloc-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 14px; border-radius:999px; border:1px solid #e3d3c8;
  background:linear-gradient(180deg,#fff,#fdf7f2); color:#8a4a34;
  font-size:13.5px; font-weight:600; line-height:1; box-shadow:0 1px 4px rgba(140,90,60,.08); transition:.15s; }
.hloc-btn:hover { border-color:#c05a3e; color:#a83f39; box-shadow:0 2px 8px rgba(192,90,62,.18); }
.hloc-btn.has-city { background:linear-gradient(135deg,#a83f39,#c05a3e); color:#fff; border-color:transparent; }
.hloc-pin { font-size:14px; }
.hloc-caret { font-size:10px; opacity:.7; }
.hloc-tip { font-size:12.5px; color:#96786a; }
.hloc-tip b { color:#a83f39; }
.hloc-tip a { color:#a83f39; }

/* 面板（选择城市 / 筹备中） */
.hloc-mask { position:fixed; inset:0; background:rgba(35,20,14,.45); z-index:9998;
  display:flex; align-items:flex-end; justify-content:center; }
.hloc-mask[hidden] { display:none; }
.hloc-sheet { width:100%; max-width:660px; background:#fffdf9; border-radius:18px 18px 0 0;
  padding:18px 18px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -8px 32px rgba(60,30,20,.22);
  max-height:84vh; overflow:auto; animation:hlocUp .22s ease-out; }
@keyframes hlocUp { from { transform:translateY(28px); opacity:.4 } to { transform:none; opacity:1 } }
.hloc-hd { display:flex; align-items:center; justify-content:space-between; }
.hloc-hd b { font-size:16.5px; color:#3a2a22; letter-spacing:.5px; }
.hloc-x { border:0; background:transparent; font-size:15px; color:#a08d84; cursor:pointer; padding:4px 8px; }
.hloc-sub { font-size:12.5px; color:#8d7568; margin:6px 0 14px; }
.hloc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:9px; }
.hloc-city { cursor:pointer; border:1px solid #eadfd6; background:#fff; border-radius:12px;
  padding:10px 8px 9px; text-align:center; transition:.14s; position:relative; }
.hloc-city:hover { border-color:#c05a3e; transform:translateY(-1px); box-shadow:0 3px 10px rgba(192,90,62,.15); }
.hloc-city .hc-n { font-size:14.5px; font-weight:600; color:#3a2a22; }
.hloc-city .hc-s { font-size:11px; color:#a1908a; margin-top:3px; line-height:1.35; }
.hloc-city.on { border-color:#a83f39; background:linear-gradient(180deg,#fff7f4,#fff); box-shadow:inset 0 0 0 1px #a83f39; }
.hloc-city.off .hc-n { color:#7c6c65; }
.hloc-city .hc-badge { position:absolute; top:-6px; right:-4px; font-size:10px; padding:1px 6px;
  border-radius:8px; background:#efe6dd; color:#8d7568; }
.hloc-city.live .hc-badge { background:#e8f2e6; color:#4a7a45; }
.hloc-ft { margin-top:14px; font-size:11.5px; color:#a1908a; text-align:center; }

/* 城市条上的筹备标记 */
.cat-btn.is-soon { opacity:.6; }
.cat-btn .soon-dot { font-size:9px; margin-left:2px; opacity:.85; }

/* 筹备中城市面板 */
.soon-sheet .si-hd { display:flex; align-items:center; gap:10px; }
.soon-sheet .si-hd b { font-size:20px; color:#3a2a22; letter-spacing:1px; }
.soon-sheet .si-badge { font-size:11px; padding:2px 9px; border-radius:9px; background:#f3ece3; color:#8d7568; }
.soon-sheet .si-lead { font-size:13.5px; color:#5b4636; line-height:1.8; margin:9px 0 14px; }
.soon-sheet .si-lead b { color:#8a5a20; }
.si-row { margin-bottom:13px; }
.si-lb { font-size:12px; color:#9a8578; margin-bottom:6px; letter-spacing:.5px; }
.si-vals { display:flex; flex-wrap:wrap; gap:7px; }
.si-chip { font-size:13px; padding:5px 11px; border-radius:9px; border:1px solid #eadfd6; background:#fff; color:#3a2a22; }
.si-chip.c1 { border-color:#e6d3b8; background:#fffaf2; }
.si-chip.c2 { border-color:#d8e3d0; background:#f7fbf4; }
.si-chip.c3 { border-color:#d5dde8; background:#f6f9fd; }
.si-chip.c4 { border-color:#e2d9f0; background:#faf7fe; }
.si-chip.c5 { border-color:#f0d8c8; background:#fff8f3; font-weight:600; }
.si-chip.c6 { border-color:#f3d9d2; background:#fff6f4; }
.si-chip.c7 { border-color:#dcdcd0; background:#fbfbf3; }
.si-chip.c8 { border-color:#b8dfb4; background:#f2fbf1; color:#2f7a2c; }   /* 绿色食品 */
.si-chip.c9 { border-color:#b6d8ea; background:#f1f9fd; color:#1f6a88; }   /* 有机产品 */
.si-chip.c10 { border-color:#e0cdb0; background:#fdf8f0; color:#8a6234; }
.si-chip.c11 { border-color:#c9b8e0; background:#f8f5fd; color:#5b3f8a; }   /* 特优区 */  /* 特质农品 */
.si-sep { margin:14px 0 8px; padding-top:10px; border-top:1px dashed #e6e2d8;
  font-size:12px; color:#9a8f7b; letter-spacing:.5px; }
.si-disc { margin:14px 0 4px; font-size:11.5px; line-height:1.65; color:#a89e8c; }

.si-more { font-size:11.5px; color:#a1908a; align-self:center; padding:0 4px; }
.si-near { margin:14px 0 4px; padding-top:12px; border-top:1px dashed #e8dcd0; }
.si-nbtns { display:flex; flex-wrap:wrap; gap:8px; }
.si-nb { cursor:pointer; font-size:13px; padding:7px 14px; border-radius:10px; border:1px solid #dccbbd;
  background:linear-gradient(180deg,#fff,#fdf7f2); color:#8a4a34; font-weight:600; }
.si-nb:hover { border-color:#c05a3e; color:#a83f39; }
.si-ft { margin-top:12px; font-size:12.5px; color:#9a8578; }
.si-ft a { color:#a83f39; }

/* 会员中心：家乡 / 常住城市 */
.home-row { display:flex; align-items:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
.home-row label { font-size:13.5px; color:#5b4636; min-width:86px; }
.home-row select { padding:7px 10px; border:1px solid #dccbbd; border-radius:10px;
  font-size:13.5px; background:#fff; color:#3a2a22; min-width:132px; }
.home-row .home-save { padding:7px 16px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,#a83f39,#c05a3e); color:#fff; font-size:13.5px; font-weight:600; }
.home-row .home-msg { font-size:12.5px; color:#4a7a45; }


/* ===== 省外 / 境外：游子入口 ===== */
.wanderer { margin:14px auto 6px; background:linear-gradient(160deg,#fff8f0,#fffdfa 55%,#fdf3ec);
  border:1px solid #efdfd0; border-radius:16px; padding:20px 20px 16px;
  box-shadow:0 4px 22px rgba(150,100,60,.08); }
.wd-kicker { font-size:12px; letter-spacing:2.5px; color:#b08968; }
.wd-title { font-size:24px; margin:8px 0 8px; color:#3a2a22; letter-spacing:1px;
  font-family:"Noto Serif CJK SC",STKaiti,KaiTi,serif; }
.wd-lead { font-size:13.5px; color:#6b5648; line-height:1.85; margin:0 0 10px; max-width:560px; }
.wd-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#96786a; margin-bottom:16px; }
.wd-meta b { color:#a83f39; font-size:14px; }

.wd-groups { display:flex; flex-direction:column; gap:18px; }
.wd-g { border-top:1px dashed #e8d8c8; padding-top:14px; }
.wd-g:first-child { border-top:0; padding-top:0; }
.wd-gh { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.wd-gh b { font-size:16px; color:#3a2a22; letter-spacing:.5px; }
.wd-gh span { font-size:12.5px; color:#a1908a; }
.wd-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.wd-item { display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #f0e4d8;
  border-radius:12px; padding:9px 10px; text-decoration:none; color:inherit; transition:.15s; }
.wd-item:hover { border-color:#d9b98f; box-shadow:0 3px 12px rgba(170,120,70,.12); transform:translateY(-1px); }
.wd-item .wi-ico { width:38px; height:38px; border-radius:9px; background:#fbf3ea; display:flex;
  align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; overflow:hidden; }
.wd-item .wi-ico img { width:100%; height:100%; object-fit:cover; }
.wd-item .wi-n { font-size:13px; color:#3a2a22; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wd-item .wi-p { font-size:12.5px; color:#c0392b; font-weight:600; margin-top:3px; }
.wd-empty { font-size:12.5px; color:#a1908a; }
.wd-foot { margin-top:16px; padding-top:12px; border-top:1px solid #f0e4d8; }
.wd-switch { font-size:12.5px; color:#a83f39; text-decoration:none; }
.wd-switch:hover { text-decoration:underline; }

/* ===== 已开通城市：官方认定名录入口条 ===== */
.gi-entry {
  margin: 22px auto 8px; max-width: 1080px;
  background: linear-gradient(135deg, #fffaf0 0%, #fdf6e8 100%);
  border: 1px solid #eddfc4; border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 3px 14px rgba(168, 120, 40, .07);
}
.gi-entry-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gi-entry-t { font-size: 15px; color: #6b4e1f; font-weight: 600; }
.gi-entry-t b { color: #a83f39; font-weight: 700; }
.gi-entry-n { font-size: 12.5px; color: #a8905f; }
.gi-entry-sub {
  margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: #8c7c5e;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gi-entry-btn {
  margin-top: 11px; width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #d99a3f, #c07d24); color: #fff;
  font-size: 14px; font-weight: 600; padding: 11px 0; border-radius: 10px;
  transition: filter .15s;
}
.gi-entry-btn:hover { filter: brightness(1.06); }
.gi-entry-btn:active { filter: brightness(.94); }

/* 「已开通」徽章 */
.si-badge-open { background: #eaf6ea; color: #2f7a2c; border-color: #bfe0bd; }