/* ==========================================================
   藁易藁 · 门户首页
   ========================================================== */

body.portal {
  background:
    radial-gradient(1200px 520px at 50% -10%, #e8eefb 0%, rgba(232, 238, 251, 0) 62%),
    var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶栏：品牌 +「后台」紧挨着，搜索框推到最右 */
.portal-bar {
  justify-content: flex-start;
  gap: 10px;
}

.gg-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

/* 搜索框自己靠右 */
.portal-bar .portal-search { margin-left: auto; }

.gg-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #3a2a06;
  background: linear-gradient(150deg, #f3dfa0, #c9a13f 58%, #8d6a18);
  box-shadow: 0 4px 12px -6px rgba(141, 106, 24, .8);
}

.gg-name {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: .06em;
}

.portal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 420px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: .15s;
}

.portal-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 86, 196, .12);
}

.portal-search .ico {
  font-size: 13px;
  opacity: .55;
  flex: 0 0 auto;
}

.portal-search input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  width: 100%;
  outline: none;
  box-shadow: none;
}

.portal-search input:focus { box-shadow: none; }

/* 主区 */
.portal .shell {
  flex: 1;
  max-width: 960px;
  padding-top: 40px;
}

.portal-hero {
  text-align: center;
  padding: 14px 0 38px;
}

.portal-hero h1 {
  font-size: 30px;
  font-weight: 760;
  letter-spacing: .06em;
  margin: 0 0 12px;
  color: var(--ink);
}

.portal-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .08em;
}

.portal-section {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
  margin: 0 0 14px 2px;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: .18s;
}

.shop-card.live:hover {
  transform: translateY(-3px);
  border-color: #c9d6ea;
  box-shadow: 0 16px 32px -18px rgba(16, 24, 40, .34);
}

.shop-card[hidden] { display: none; }

.shop-ico {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-radius: 16px;
}

.shop-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.shop-body b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.shop-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

.shop-enter {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.portal-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 40px 0;
}

@media (max-width: 860px) {
  .portal-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .portal-bar { flex-wrap: wrap; gap: 10px; }
  .portal-search { max-width: none; order: 3; flex-basis: 100%; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-hero h1 { font-size: 23px; }
  .portal .shell { padding-top: 22px; }
  .gg-name { font-size: 18px; }
}

/* ==========================================================
   小工具页（商城 / 麻将）共用的头部
   ========================================================== */

.mini-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.mini-bar .back {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 9px;
}

.mini-bar .back:hover { background: var(--bg); color: var(--ink); }

.mini-bar h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}

.mini-bar .spacer { flex: 1; }

.mini-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 132px;   /* 底下留出购物车条的位置 */
}

/* ==========================================================
   商品商城
   ========================================================== */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.prod-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prod-ico {
  font-size: 30px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-radius: 13px;
  margin-bottom: 4px;
}

.prod-name { font-size: 14.5px; font-weight: 680; }
.prod-desc { font-size: 12px; color: var(--muted); flex: 1; }

.prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.prod-price { font-size: 16px; font-weight: 720; color: var(--accent); }

.prod-ctrl { display: flex; align-items: center; gap: 6px; }
.prod-qty { min-width: 18px; text-align: center; font-size: 13.5px; }

.cart-total {
  text-align: right;
  font-size: 14px;
  margin: 14px 0 0;
  color: var(--ink-2);
}

.cart-total b { font-size: 20px; font-weight: 760; color: var(--ink); }

.done-box {
  text-align: center;
  padding: 20px 10px 6px;
}

.done-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}

/* ==========================================================
   麻将预约
   ========================================================== */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.slot-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: .15s;
  font: inherit;
  text-align: left;
}

.slot-card b { font-size: 13.5px; color: var(--ink); }
.slot-card span { font-size: 12.5px; color: var(--muted); }
.slot-card em { font-style: normal; font-size: 12px; color: var(--ok); font-weight: 600; }

.slot-card:hover:not(:disabled) { border-color: var(--line-strong); background: #fbfcfe; }

.slot-card.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(26, 86, 196, .1);
}

.slot-card.on em { color: var(--accent); }

.slot-card.taken {
  background: #f6f7fa;
  border-style: dashed;
  cursor: not-allowed;
  opacity: .62;
}

.slot-card.taken em { color: var(--muted); }

@media (max-width: 860px) {
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .prod-grid { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: 1fr; }
}

/* 藁易藁 旁边的「后台」入口 */
.admin-link {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  transition: .15s;
}

.admin-link:hover {
  color: var(--accent);
  border-color: #c9d6ea;
  background: var(--accent-soft);
}

/* 「后台」贴着 logo 一点点，别飘太远 */
.portal-bar .admin-link { margin-left: 2px; }

/* ==========================================================
   商城 · 底部购物车条 + 结账
   ========================================================== */

.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(820px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .8);
  z-index: 30;
}

.cart-bar-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.cart-bar-info b { font-size: 15px; font-weight: 700; }
.cart-bar-info span { font-size: 13px; opacity: .82; }

.cart-bar-go {
  flex: 0 0 auto;
  border: 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: .15s;
}

.cart-bar-go:hover { background: #f1f4f9; }

/* 有货时顶栏购物车按钮也要显眼 */
#cartBtn.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.checkout-block { margin-top: 18px; }

.checkout-block .seg.wide {
  width: 100%;
  display: flex;
}

.checkout-block .seg.wide button {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
}

.checkout-sum {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  flex-wrap: wrap;
}

.checkout-sum .big {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--ink);
}

.cart-total-num { font-size: 16px; }

/* 底部有购物车条，内容留出位置 */

@media (max-width: 520px) {
  .cart-bar { bottom: 10px; padding: 10px 10px 10px 14px; }
  .checkout-block .seg.wide { flex-wrap: wrap; }
  .checkout-block .seg.wide button { flex: 1 1 45%; }
}

/* ==========================================================
   韩兵国际物流 · 首页 / 领代号
   ========================================================== */

.hb-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 2px 22px;
}

.hb-logo { width: 52px; height: auto; }

.hb-head h2 { font-size: 20px; margin: 0 0 4px; letter-spacing: -.01em; }
.hb-head p { margin: 0; font-size: 12.5px; color: var(--muted); }

.hb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hb-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: .18s;
}

.hb-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6ea;
  box-shadow: 0 16px 32px -18px rgba(16, 24, 40, .34);
}

.hb-ico {
  font-size: 30px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-radius: 16px;
}

.hb-card b { font-size: 18px; font-weight: 720; }
.hb-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; flex: 1; }
.hb-go { font-size: 13.5px; font-weight: 650; color: var(--accent); }

/* 代号结果 */
.code-card { text-align: center; }

.code-lead { margin: 0; font-size: 13px; color: var(--muted); }

.code-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent);
  line-height: 1.15;
  margin: 6px 0 4px;
}

.code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.code-chip {
  font-size: 13.5px;
  font-weight: 650;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #cfe0ff;
}

.req, .opt {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: 1px;
}

.req { background: #fde8e6; color: #b42318; }
.opt { background: var(--bg); color: var(--muted); }

/* 地址块 */
.addr-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.addr-row {
  display: flex;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}

.addr-row:last-child { border-bottom: 0; }

.addr-k {
  flex: 0 0 76px;
  color: var(--muted);
  font-size: 12.5px;
}

.addr-v {
  flex: 1;
  word-break: break-all;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 640px) {
  .hb-actions { grid-template-columns: 1fr; }
  .code-big { font-size: 42px; }
}

/* ==========================================================
   客服联系方式（二维码 + 电话）
   ========================================================== */

.contact-row {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}

.contact-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.contact-qr img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}

.contact-qr span { font-size: 12px; color: var(--muted); }

.qr-empty {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
}

.contact-wx {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}

.contact-line { display: flex; align-items: baseline; gap: 12px; }

.contact-line .k {
  flex: 0 0 44px;
  font-size: 12.5px;
  color: var(--muted);
}

.contact-phone {
  font-size: 19px;
  font-weight: 720;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
}

.contact-phone:hover { text-decoration: underline; }

.contact-wx-txt {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  word-break: break-all;
}

@media (max-width: 520px) {
  .contact-row { gap: 16px; }
  .contact-qr img, .qr-empty { width: 110px; height: 110px; }
  .contact-phone { font-size: 17px; }
}

/* ==========================================================
   官网外壳：顶部导航 / 首屏 / 区块 / 页脚 / 悬浮客服 / 试算
   ========================================================== */

body.site {
  background:
    radial-gradient(1100px 480px at 50% -8%, #e6edfa 0%, rgba(230, 237, 250, 0) 62%),
    var(--bg);
  min-height: 100vh;
}

/* ---------- 顶部导航 ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.site-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
}

.site-links a:hover { background: var(--bg); color: var(--ink); }
.site-links a.on { color: var(--accent); background: var(--accent-soft); }

.site-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.lang-switch {
  display: flex;
  padding: 3px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--line);
}

.lang-switch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-switch button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* ---------- 首屏 ---------- */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 24px 30px;
  text-align: center;
}

.hero h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--ink);
}

.hero p {
  margin: 0 0 30px;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: .06em;
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn.btn-lg {
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 12px;
}

.hero-notice {
  max-width: 780px;
  margin: 34px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
}

.hero-notice[hidden] { display: none !important; }

.notice-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--ink);
  padding: 3px 7px;
  border-radius: 0;
}

.notice-text {
  flex: 1;
  display: flex;
  gap: 26px;
  overflow: hidden;
  white-space: nowrap;
}

.notice-item {
  animation: notice-scroll 18s linear infinite;
}

@keyframes notice-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

/* ---------- 区块 ---------- */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 24px;
}

.section-title {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 16px;
}

/* 常用入口 */

.q-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: .18s;
}

.q-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6ea;
  box-shadow: 0 16px 32px -18px rgba(16, 24, 40, .34);
}

.q-ico { font-size: 26px; line-height: 1; }
.q-card b { font-size: 14.5px; font-weight: 700; }
.q-card .q-desc { font-size: 12px; color: var(--muted); line-height: 1.55; flex: 1; }

/* 「点击进入」 */
.q-go {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}

.q-card:hover .q-go { color: #0f3c92; }

/* 主营业务 */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.biz-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.biz-band { height: 78px; }

.band-1 { background: linear-gradient(135deg, #1b4ea8, #4c8ff0); }
.band-2 { background: linear-gradient(135deg, #8d6a18, #d8b34f); }
.band-3 { background: linear-gradient(135deg, #1e6b3a, #4fae74); }

.biz-card h3 { font-size: 16px; margin: 16px 18px 6px; }
.biz-card p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 18px 14px; flex: 1; }

.biz-link {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
  padding: 0 18px 18px;
}

/* 为什么 */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.why-item b { display: block; font-size: 14px; margin-bottom: 7px; }
.why-item p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

.why-item::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 12px;
}

/* ---------- 页脚 ---------- */
.site-foot {
  margin-top: 40px;
  padding: 44px 24px 26px;
  background: #101319;
  color: #c9d2e0;
}

.foot-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 26px;
}

.foot-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-brand b { font-size: 16px; color: #fff; }
.foot-brand p { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; color: #8b93a3; }

.foot-col h4 { font-size: 12.5px; color: #8b93a3; margin: 0 0 10px; font-weight: 650; }
.foot-col p { margin: 0 0 7px; font-size: 13px; }
.foot-col a { display: block; font-size: 13px; color: #c9d2e0; text-decoration: none; margin-bottom: 7px; }
.foot-col a:hover { color: #fff; }

.foot-copy {
  max-width: 1080px;
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  color: #7b8496;
}

/* ---------- 悬浮客服 ---------- */
.wg-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  font-size: 13.5px;
  font-weight: 760;
  letter-spacing: .08em;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(26, 86, 196, .8);
  transition: .15s;
}

.wg-fab:hover { transform: translateY(-2px); }

.wg-panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 60;
  width: min(288px, calc(100vw - 44px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -22px rgba(16, 24, 40, .55);
  overflow: hidden;
}

.wg-panel[hidden] { display: none !important; }

.wg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.wg-x {
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.wg-body { padding: 14px; text-align: center; }

.wg-qr { width: 150px; height: 150px; object-fit: contain; border-radius: 10px; }

.wg-cap { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.wg-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.wg-line span { color: var(--muted); }

.wg-call {
  display: block;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- 运费试算页 ---------- */
.price-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 60px 24px 90px;
  text-align: center;
}

.price-wrap h1 { font-size: 32px; margin: 0 0 10px; letter-spacing: -.02em; }
.price-sub { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px 26px 22px;
  text-align: left;
}

.price-card label { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 8px; }

.price-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: 13px;
  padding: 0 14px;
  margin-bottom: 16px;
  transition: .15s;
}

.price-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,86,196,.12); }

.price-input input {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-size: 26px;
  font-weight: 700;
  padding: 12px 0;
  width: 100%;
  outline: none;
}

.price-input input:focus { box-shadow: none; }
.price-input span { font-size: 14px; color: var(--muted); flex: 0 0 auto; }

.price-card .btn-lg { width: 100%; }

.price-result { margin-top: 24px; text-align: center; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.price-result[hidden] { display: none !important; }

.pr-label { font-size: 12.5px; color: var(--muted); }
.pr-num { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1.2; }
.pr-rule { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.price-note { font-size: 12px; color: var(--muted); margin: 18px 0 0; text-align: center; }

@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .site-links { order: 3; flex-basis: 100%; overflow-x: auto; }
  .site-right { margin-left: auto; }
  .hero { padding: 44px 18px 20px; }
  .hero h1 { font-size: 29px; }
  .biz-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .notice-text { gap: 16px; }
  .wg-fab { right: 14px; bottom: 14px; }
  .wg-panel { right: 14px; bottom: 78px; }
}

/* ==========================================================
   韩兵国际物流 · 功能页
   ========================================================== */

.hb-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 2px 26px;
}

.hb-logo {
  width: 66px;
  height: auto;
  flex: 0 0 auto;
}

.hb-brand-txt h1 {
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.01em;
  margin: 0 0 5px;
}

.hb-brand-txt p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .04em;
}

/* 三个功能入口：编号 + 标题 + 说明 */
.hb-fn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hb-fn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: .15s;
}

.hb-fn:hover {
  border-color: #c9d6ea;
  background: #fbfcfe;
  transform: translateX(2px);
}

.hb-no {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .04em;
  background: var(--ink);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.hb-fn:nth-child(2) .hb-no { background: var(--accent); }
.hb-fn:nth-child(3) .hb-no { background: #6b7488; }

.hb-fn-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hb-fn-body b { font-size: 16px; font-weight: 720; letter-spacing: -.01em; }
.hb-fn-body em { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.hb-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  color: #b9c2d2;
  line-height: 1;
}

/* 三个数字 */
.hb-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.hb-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 14px;
  background: #fff;
}

.hb-facts b {
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hb-facts span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 520px) {
  .hb-brand { padding-bottom: 18px; }
  .hb-logo { width: 54px; }
  .hb-brand-txt h1 { font-size: 19px; }
  .hb-fn { padding: 15px 14px; gap: 12px; }
  .hb-no { width: 36px; height: 36px; font-size: 12px; }
  .hb-fn-body b { font-size: 15px; }
  .hb-facts { grid-template-columns: 1fr; }
  .hb-facts li { padding: 11px 14px; }
}

/* 首页快捷入口：汉字方标（不用卡通表情） */
.q-tag {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: 0;
  background: var(--ink);
  color: #fff;
  margin-bottom: 2px;
}

.q-card:nth-child(2) .q-tag { background: #2b6f4b; }
.q-card:nth-child(3) .q-tag { background: #8d6a18; }
.q-card:nth-child(4) .q-tag { background: #6b3f8d; }

/* ==========================================================
   韩兵国际物流 · 合并页（查包裹 + 寄包裹）
   ========================================================== */

.hb-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #101319;
  color: #fff;
}

.hb-head .back {
  font-size: 12.5px;
  color: #9aa6ba;
  text-decoration: none;
  flex: 0 0 auto;
}

.hb-head .back:hover { color: #fff; }

.hb-head-logo {
  width: 52px;
  height: auto;
  flex: 0 0 auto;
}

.hb-head-txt h1 {
  font-size: 18px;
  font-weight: 760;
  margin: 0 0 3px;
  letter-spacing: .02em;
}

.hb-head-txt p {
  margin: 0;
  font-size: 11.5px;
  color: #9aa6ba;
  letter-spacing: .04em;
}

/* 切换 */
.hb-main { max-width: 820px; margin: 0 auto; padding: 0 14px 60px; }

/* 两个标签各自独立，中间留缝，谁也别黏谁 */
.hb-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0 16px;
  padding: 6px 0;
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
}

.hb-tabs button {
  flex: 1;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 14px 10px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: .15s;
  box-shadow: 0 8px 18px -16px rgba(16, 24, 40, .7);
}

.hb-tabs button:hover { background: #fbfcfe; color: var(--ink); }

.hb-tabs button.on {
  background: #101319;
  border-color: #101319;
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(16, 24, 40, .8);
}

.hb-panel .shell {
  padding: 0 0 10px;
  max-width: none;
}

.hb-contact { margin-top: 8px; }

@media (max-width: 520px) {
  .hb-head { padding: 10px 14px; gap: 10px; }
  .hb-head-logo { width: 40px; }
  .hb-head-txt h1 { font-size: 16px; }
  .hb-head-txt p { display: none; }
  .hb-tabs button { font-size: 13.5px; padding: 12px 8px; }
}

/* 带图片的卡片（韩兵 logo / 麻将人物） */
.q-card .q-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: 4px;
}

.q-card-hb .q-logo { height: 50px; }

.q-card-hb {
  border-color: #e4d9b8;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 62%);
}

.q-card-hb:hover { border-color: #d8c68d; }
/* 韩兵页里的运费试算 */
.price-label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

.hb-panel .price-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: 0;
  padding: 0 14px;
  margin-bottom: 14px;
}

.hb-panel .price-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 86, 196, .12);
}

.hb-panel .price-input input {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  padding: 12px 0;
  width: 100%;
  outline: none;
}

.hb-panel .price-input input:focus { box-shadow: none; }
.hb-panel .price-input span { font-size: 13px; color: var(--muted); flex: 0 0 auto; }

.hb-panel .price-result {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  text-align: center;
}

.hb-panel .price-result[hidden] { display: none !important; }
.hb-panel .pr-label { font-size: 12.5px; color: var(--muted); }
.hb-panel .pr-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  line-height: 1.2;
}
.hb-panel .pr-rule { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

@media (max-width: 520px) {
  .hb-tabs button { font-size: 13px; padding: 12px 4px; }
  .hb-panel .pr-num { font-size: 32px; }
}
/* 三条线路并排的结果 */
.price-result,
#result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}

#result[hidden] { display: none !important; }

.pr-item {
  padding: 12px 10px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}

.pr-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.pr-item .pr-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  line-height: 1.15;
}

.pr-item .pr-rule {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.4;
}

.pr-item.unpriced .pr-num { color: #b9c2d2; }

@media (max-width: 520px) {
  .price-result, #result { gap: 8px; }
  .pr-item { padding: 10px 6px; }
  .pr-item .pr-num { font-size: 20px; }
  .pr-name { font-size: 12px; }
}

/* 麻将卡：人物图 */
.q-card-mj .q-logo { height: 64px; }

/* 麻将卡跟韩兵卡一个做法，只是换成蓝色 */
.q-card-mj {
  border-color: #cddcf2;
  background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 62%);
}

.q-card-mj:hover {
  border-color: #a8c3e8;
  box-shadow: 0 16px 32px -18px rgba(26, 86, 196, .32);
}

.q-card-mj .q-go { color: #1a56c4; }
.q-card-mj:hover .q-go { color: #0f3c92; }

/* 韩兵卡悬停阴影也统一一下 */
.q-card-hb:hover {
  box-shadow: 0 16px 32px -18px rgba(141, 106, 24, .28);
}
/* mini 顶栏里的 logo（麻将页的小人） */
.mini-bar-logo {
  height: 32px;
  width: auto;
  flex: 0 0 auto;
  margin-right: -2px;
}

@media (max-width: 520px) {
  .mini-bar-logo { height: 28px; }
  .mini-bar h1 { font-size: 15px; }
}
/* 常用入口：标志在左，名字和说明在右，点击进入留在底部 */
.q-card { gap: 10px; }

.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.q-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.q-text b { font-size: 15px; line-height: 1.35; }

.q-logo {
  margin: 0;
  height: 46px;
  flex: 0 0 auto;
  align-self: center;
}

.q-card-hb .q-logo { height: 42px; }

.q-tag {
  flex: 0 0 auto;
  margin: 0;
  width: 44px;
  height: 44px;
}

.q-desc { flex: none; }

.q-card .q-go { margin-top: auto; }

@media (max-width: 560px) {
  .q-logo { height: 40px; }
  .q-tag { width: 40px; height: 40px; font-size: 16px; }
}

/* 麻将小人儿是竖图，给高一点才看得清 */
.q-card-mj .q-logo { height: 54px; }



/* ==========================================================
   商品图片 & 商品详情页
   ========================================================== */

.prod-link { display: block; text-decoration: none; color: inherit; }

.prod-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 13px;
  background: var(--bg);
  margin-bottom: 8px;
}

.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.prod-card:hover .prod-img img { transform: scale(1.04); }

.prod-thumb {
  width: 84px;
  height: 64px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-thumb .no-img { font-size: 24px; }

.np-img-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 详情页 */
.pd-card { padding: 0; overflow: hidden; }

.pd-img {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: var(--bg);
}

.pd-img img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; display: block; }

.pd-img-empty {
  height: 180px;
  display: grid;
  place-items: center;
  font-size: 64px;
}

.pd-body { padding: 20px; }

.pd-name { font-size: 22px; font-weight: 760; letter-spacing: -.02em; margin: 0 0 6px; }
.pd-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.pd-price { font-size: 26px; font-weight: 780; color: var(--accent); letter-spacing: -.03em; }

.pd-detail {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.pd-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.pd-buy .btn { flex: 1 1 200px; }

@media (max-width: 560px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-name { font-size: 19px; }
  .pd-price { font-size: 22px; }
}


/* ==========================================================
   下单后的付款区
   ========================================================== */

.pay-box {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
}

.pay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pay-head b { font-size: 16px; }

.pay-qrs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pay-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pay-qr img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}

.pay-qr span { font-size: 12px; color: var(--muted); }

.pay-card {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}

.pay-claim {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

.pay-claim .btn { flex: 0 0 auto; }

/* 后台：收款设置里的二维码槽位并排 */
.pay-qr-row { display: flex; gap: 18px; flex-wrap: wrap; }


/* ==========================================================
   合作伙伴
   ========================================================== */

.partners .partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.partner-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: 26px 22px;
  height: 132px;
  transition: .18s;
}

.partner-card img {
  max-width: 92%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 图是透明背景，这里不加任何底色或滤镜，换什么背景都干净 */
}

.partner-card:hover {
  border-color: #c9d6ea;
  box-shadow: 0 12px 26px -18px rgba(16, 24, 40, .35);
}

@media (max-width: 560px) {
  .partners .partner-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .partner-card { height: 92px; padding: 14px 10px; }
  .partner-card img { max-height: 44px; }
}

/* 合作伙伴的副标题（跟标题同一种灰，但小一号） */
.partners .section-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin: -8px 0 16px;
  letter-spacing: .01em;
}


/* ==========================================================
   寄件须知页
   ========================================================== */

.hb-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  text-decoration: none;
}

.hb-help-link:hover { background: #dbe6fb; }

.help-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

.help-list li { margin-bottom: 4px; }

.pk-point { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.pk-point:last-child { border-bottom: 0; padding-bottom: 0; }

.pk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.addr-row .k { min-width: 68px; }


/* ==========================================================
   寄件须知：放进「我要寄包裹」之后的分区标题
   ========================================================== */

.help-head {
  margin: 30px 0 14px;
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), rgba(255, 255, 255, 0));
  border-radius: var(--radius);
}

.help-head h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.01em;
}

.help-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.help-block { margin-bottom: var(--gap); }


/* 代号说明的三步 */
.help-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 16px;
}

.help-step {
  position: relative;
  padding: 14px 14px 14px 46px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
}

.help-step .n {
  position: absolute;
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

.help-step b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.help-step p { margin: 0; color: var(--muted); font-size: 12.5px; }

@media (max-width: 640px) {
  .help-steps { grid-template-columns: 1fr; gap: 8px; }
}


/* ==========================================================
   联系我们里的取货点：名字 + 地址 + 地铁 + 时间 + 电话
   ========================================================== */

.contact-point {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

.contact-point:last-of-type { border-bottom: 0; }

.cp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cp-name { font-size: 15.5px; font-weight: 780; letter-spacing: -.01em; }
.cp-store { font-size: 12.5px; color: var(--muted); }

.cp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

.cp-row .k {
  flex: 0 0 34px;
  font-size: 12px;
  color: var(--muted);
}

.cp-addr { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* 微信 / 国内仓库 / 投诉 这几行：标签留够宽度，别折成两行 */
.contact-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contact-extra .contact-line .k { flex: 0 0 66px; }


/* 取货点标题行：左边名字，右边二维码小图 */
.cp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cp-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.cp-qr {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .cp-qr { width: 64px; height: 64px; }
}


/* 商品商城卡：绿色，跟韩兵的金色、麻将的蓝色配一套 */
.q-card-shop {
  border-color: #c6e0c9;
  background: linear-gradient(180deg, #f3fbf4 0%, #ffffff 62%);
}

.q-card-shop:hover {
  border-color: #a9d3b0;
  box-shadow: 0 16px 32px -18px rgba(24, 90, 48, .34);
}

.q-card-shop .q-logo { height: 54px; }


/* ==========================================================
   常用入口：法国 → 中国 专线卡（橙色）
   ========================================================== */

.q-card-frcn {
  border-color: #f0d5b3;
  background: linear-gradient(180deg, #fef7ee 0%, #ffffff 62%);
}

.q-card-frcn:hover {
  border-color: #e6bd8a;
  box-shadow: 0 16px 32px -18px rgba(140, 86, 20, .32);
}

/* 四张卡：宽屏四列，平板两列，手机一列 */

/* 专线页的价格表 */
.frcn-table td, .frcn-table th { padding: 11px 16px; }
.frcn-table tbody tr:nth-child(even) { background: #f7f9fc; }
.frcn-table td.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.frcn-table th.num { text-align: right; }


/* 「在哪寄」每个店：左边信息，右边二维码 */
.pk-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pk-main { flex: 1 1 auto; min-width: 0; }

.pk-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.pk-side .cp-qr { width: 112px; height: 112px; }

@media (max-width: 560px) {
  .pk-block { gap: 12px; }
  .pk-side .cp-qr { width: 84px; height: 84px; }
}


/* ==========================================================
   顾客查包裹：箱子卡上的单号 / 查询按钮 / 到货状态
   ========================================================== */

.q-box-main { flex: 1 1 auto; min-width: 0; }

.q-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
}

.q-box-title b { font-weight: 760; }

.q-box-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}

.q-box-track .mono {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
}

.track-btn { padding: 3px 10px; font-size: 12px; }

.q-no-track { color: var(--muted); }

@media (max-width: 480px) {
  .q-box-title { font-size: 14px; }
  .q-box-track .mono { font-size: 12px; }
}


/* 箱子物流单号那一行：标签 + 单号 + 明显的查询按钮 */
.trk-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}

.trk-code {
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .04em !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px;
  padding: 3px 10px !important;
}

.track-btn {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px -4px rgba(26, 86, 196, .55);
}

.track-btn:hover { filter: brightness(1.05); }

@media (max-width: 480px) {
  .trk-code { font-size: 13px !important; }
  .track-btn { padding: 5px 10px !important; font-size: 12px !important; }
}


/* 顾客页里那折：跟后台一样的折叠样式，间距稍微收紧 */
.q-box .parcel-details { border-top: 1px solid var(--line); }

.q-box .parcel-details > summary {
  padding: 11px 16px;
  font-size: 12.5px;
}

.q-box .parcel-details .table-wrap { margin: 0; padding: 0 8px 8px; }

.q-box .parcel-details table { font-size: 13px; }
.q-box .parcel-details td, .q-box .parcel-details th { padding: 9px 10px; }


/* ==========================================================
   页脚：联系方式并进品牌那一块（三列）
   ========================================================== */

.foot-grid { grid-template-columns: 1.6fr 1fr 1fr; }

.foot-brand { align-items: flex-start; }

.foot-brand .foot-where {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #8b93a3;
}

.foot-brand .foot-contact-line {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 13px;
  color: #cfd6e2;
  letter-spacing: .01em;
}

.foot-brand .foot-contact-line a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(255, 255, 255, .35);
}

.foot-brand .foot-contact-line a:hover { border-bottom-color: #fff; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .foot-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   常用入口：加了「本地仓储」之后五张卡 → 宽屏三列
   ========================================================== */


/* 本地仓储：青色，跟金/橙/绿/蓝 区分开 */
.q-card-wh {
  border-color: #c9e2e6;
  background: linear-gradient(180deg, #f2fbfc 0%, #ffffff 62%);
}

.q-card-wh:hover {
  border-color: #a6cfd6;
  box-shadow: 0 16px 32px -18px rgba(20, 90, 100, .3);
}


/* ==========================================================
   「我们做什么」五张卡：色带里放一个大字标
   ========================================================== */

.biz-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .biz-grid { grid-template-columns: 1fr; }
}

.biz-band {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.biz-mark {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.band-4 { background: linear-gradient(135deg, #1e6b4a, #45a37d); }
.band-5 { background: linear-gradient(135deg, #4b2c79, #8a63c9); }

@media (max-width: 560px) {
  .biz-band { height: 78px; }
  .biz-mark { font-size: 22px; }
}


/* ==========================================================
   「我们做什么」第一张卡：用真实物流照片
   ========================================================== */

.biz-band {
  height: 128px;
  position: relative;
  overflow: hidden;
}

.band-1 {
  background-image:
    linear-gradient(180deg, rgba(8, 22, 48, .28), rgba(8, 22, 48, .52)),
    url('/assets/biz-cn-eu.jpg');
  background-size: cover;
  background-position: center 52%;
  background-repeat: no-repeat;
}

.biz-mark {
  position: relative;
  z-index: 2;
  font-size: 24px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

@media (max-width: 560px) {
  .biz-band { height: 104px; }
  .biz-mark { font-size: 20px; }
}


/* 第二张卡：法国 → 中国 专线，也用实拍图 */
.band-2 {
  background-image:
    linear-gradient(180deg, rgba(30, 16, 6, .22), rgba(30, 16, 6, .5)),
    url('/assets/biz-fr-cn.jpg');
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
}


/* 第三张卡：仓储 · 一件代发，仓库实拍 */
.band-3 {
  background-image:
    linear-gradient(180deg, rgba(10, 30, 22, .22), rgba(10, 30, 22, .5)),
    url('/assets/biz-warehouse.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}


/* 第四张卡：本地好物，超市货架实拍 */
.band-4 {
  background-image:
    linear-gradient(180deg, rgba(12, 34, 20, .2), rgba(12, 34, 20, .5)),
    url('/assets/biz-shop.jpg');
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
}


/* 第五张卡：麻将 · 桌游，13区 桌上的实拍 */
.band-5 {
  background-image:
    linear-gradient(180deg, rgba(18, 12, 40, .18), rgba(18, 12, 40, .48)),
    url('/assets/biz-mahjong.jpg');
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}


/* ==========================================================
   「我们做什么」：字标去掉后，遮罩调淡，照片亮起来
   ========================================================== */

.biz-mark { display: none; }

.band-1 {
  background-image:
    linear-gradient(180deg, rgba(6, 16, 36, .04), rgba(6, 16, 36, .22)),
    url('/assets/biz-cn-eu.jpg');
}

.band-2 {
  background-image:
    linear-gradient(180deg, rgba(24, 12, 4, .03), rgba(24, 12, 4, .2)),
    url('/assets/biz-fr-cn.jpg');
}

.band-3 {
  background-image:
    linear-gradient(180deg, rgba(8, 24, 16, .03), rgba(8, 24, 16, .2)),
    url('/assets/biz-warehouse.jpg');
}

.band-4 {
  background-image:
    linear-gradient(180deg, rgba(10, 26, 14, .03), rgba(10, 26, 14, .2)),
    url('/assets/biz-shop.jpg');
}

.band-5 {
  background-image:
    linear-gradient(180deg, rgba(14, 10, 32, .03), rgba(14, 10, 32, .2)),
    url('/assets/biz-mahjong.jpg');
}


/* ==========================================================
   搬家服务：首页卡（砖红）+ 搬家页
   ========================================================== */

.q-card-move {
  border-color: #f0c9c4;
  background: linear-gradient(180deg, #fdf4f2 0%, #ffffff 62%);
}

.q-card-move:hover {
  border-color: #e3a89f;
  box-shadow: 0 16px 32px -18px rgba(140, 40, 30, .3);
}

.hb-head-move { border-left: 4px solid #c0563f; }

.move-hero {
  background: linear-gradient(135deg, #7d2c1c 0%, #c0563f 62%, #e08a6a 100%);
  border: 0;
  color: #fff;
}

.move-hero h2 { color: #fff; font-size: 26px; margin-bottom: 8px; }

.move-slogan { color: rgba(255, 255, 255, .86); font-size: 14px; margin: 0 0 14px; }

.move-hero .chip {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

.move-hero .btn-primary { background: #fff; color: #7d2c1c; border-color: #fff; }

.move-hero .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.move-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 860px) {
  .move-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .move-grid { grid-template-columns: 1fr; }
}

.move-item { padding: 12px 14px; background: #fbfcfd; border: 1px solid var(--line); }
.move-item b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.move-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

.move-price {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mp-main {
  flex: 0 0 auto;
  background: #fdf4f2;
  border: 1px solid #f0c9c4;
  padding: 16px 22px;
  min-width: 176px;
}

.mp-k { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }

.mp-v { font-size: 34px; font-weight: 800; color: #b6452e; line-height: 1; }

.mp-unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }

.mp-list { flex: 1 1 320px; margin: 0; }

.move-ad {
  margin: 0;
  padding: 16px 18px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}


/* 搬家页第二个板块：仓储，绿色，跟红色板块同款 */
.move-hero-store {
  background: linear-gradient(135deg, #14503a 0%, #1f7a5a 62%, #46a884 100%);
}

.move-hero-store .btn-primary { background: #fff; color: #14503a; border-color: #fff; }


/* ==========================================================
   家政服务：首页卡（紫）+ 家政页
   ========================================================== */

.q-card-clean {
  border-color: #d9cdea;
  background: linear-gradient(180deg, #f8f5fd 0%, #ffffff 62%);
}

.q-card-clean:hover {
  border-color: #bfa9de;
  box-shadow: 0 16px 32px -18px rgba(70, 40, 120, .28);
}

/* 七张卡：宽屏四列 */

.hb-head-clean { border-left: 4px solid #6a47a8; }

.clean-hero {
  background: linear-gradient(135deg, #3f2a66 0%, #6a47a8 58%, #9a7cc9 100%);
}

.clean-ask {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 860px) {
  .clean-ask { grid-template-columns: 1fr; }
}

.ask-item {
  padding: 14px 16px;
  background: #f8f5fd;
  border: 1px solid #e4dbf2;
}

.ask-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6a47a8;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ask-item b { display: block; font-size: 15px; margin-bottom: 6px; }

.ask-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

.ask-eg {
  margin-top: 8px !important;
  padding-top: 8px;
  border-top: 1px dashed #e4dbf2;
  color: #6a47a8 !important;
  font-size: 12.5px !important;
}


/* ==========================================================
   包车 / 接机：首页卡（钢青）+ 页面
   ========================================================== */

.q-card-car {
  border-color: #bfd6de;
  background: linear-gradient(180deg, #f3f9fb 0%, #ffffff 62%);
}

.q-card-car:hover {
  border-color: #9dbecb;
  box-shadow: 0 16px 32px -18px rgba(20, 70, 90, .28);
}

/* 八张卡：宽屏四列，两行正好 */

.hb-head-car { border-left: 4px solid #23627c; }

.car-hero {
  background: linear-gradient(135deg, #123c50 0%, #23627c 58%, #4f9ab8 100%);
}

.car-ask { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .car-ask { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .car-ask { grid-template-columns: 1fr; }
}


/* ==========================================================
   常用入口：八张卡 —— 唯一的栅格定义（改这里就行）
   宽屏 4 列 / 平板 2 列 / 手机 1 列
   ========================================================== */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1040px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .quick-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* 手机上卡片横过来排，别让字竖着走 */
@media (max-width: 560px) {
  .q-card .q-head { align-items: center; gap: 10px; }
  .q-card .q-logo { width: 34px; height: 34px !important; object-fit: contain; flex: 0 0 34px; }
  .q-card .q-text b { font-size: 15px; }
  .q-card .q-desc { font-size: 12.5px; line-height: 1.5; }
}


/* 家政卡用扫地小人做 logo，跟商城/麻将那两张一样高 */
.q-card-clean .q-logo { height: 54px; }


/* 包车卡用商务车小人做 logo（横图，高度比竖图小一点） */
.q-card-car .q-logo { height: 46px; width: auto; }


/* 搬家卡用搬家小人做 logo（方图，跟家政那张一样高） */
.q-card-move .q-logo { height: 52px; width: auto; }


/* 麻将卡用打麻将的小人（图是方的，比原来的站姿图留白少） */
.q-card-mj .q-logo { height: 56px; width: auto; }


/* 商城卡用购物小人（推车 + 购物袋） */
.q-card-shop .q-logo { height: 56px; width: auto; }


/* ==========================================================
   我们做什么：改成「一段话 + 八条业务清单 + 实拍条」
   ========================================================== */

.biz-lead {
  max-width: 760px;
  margin: -6px 0 22px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

.biz-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}

@media (max-width: 860px) {
  .biz-list { grid-template-columns: 1fr; }
}

.biz-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.biz-row:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 22px -16px rgba(16, 24, 40, .35);
  transform: translateY(-1px);
}

.biz-no {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  padding-top: 2px;
}

.biz-body { flex: 1 1 auto; min-width: 0; }

.biz-body b {
  display: block;
  font-size: 15px;
  font-weight: 720;
  margin-bottom: 3px;
}

.biz-body span {
  display: block;
  font-size: 12.8px;
  line-height: 1.65;
  color: var(--muted);
}

.biz-go {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
}

/* 实拍条：五张照片并排，只做「真地方」的证据 */
.biz-shots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .biz-shots { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .biz-shots { grid-template-columns: repeat(2, 1fr); }
}

.biz-shots figure { margin: 0; overflow: hidden; position: relative; }

.biz-shots img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  filter: saturate(1.02);
}

.biz-shots figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
}


/* ==========================================================
   我们做什么：一整块广告（左边文案 + 右边实拍拼图）
   ========================================================== */

.biz-ad {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold, #c8a951);
}

@media (max-width: 900px) {
  .biz-ad { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
}

.biz-ad-main h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.biz-ad-main p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
  color: #3c444f;
}

.biz-ad-punch {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 14.5px !important;
  letter-spacing: .01em;
}

/* 右边实拍：2 列小拼图 */
.biz-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 0;
}

.biz-shots figure:first-child { grid-column: 1 / -1; }

.biz-shots img { height: 88px; }

.biz-shots figure:first-child img { height: 132px; }

@media (max-width: 900px) {
  .biz-shots { grid-template-columns: repeat(3, 1fr); }
  .biz-shots figure:first-child { grid-column: 1 / -1; }
  .biz-shots figure:first-child img { height: 120px; }
}

@media (max-width: 560px) {
  .biz-shots { grid-template-columns: repeat(2, 1fr); }
  .biz-ad-main h3 { font-size: 17px; }
  .biz-ad-main p { font-size: 13.5px; }
}


/* ==========================================================
   全球代发：首页卡（FedEx 紫）+ 页面
   ========================================================== */

.q-card-ship {
  border-color: #d5c9e8;
  background: linear-gradient(180deg, #f8f5fd 0%, #ffffff 62%);
}

.q-card-ship:hover {
  border-color: #bda8dc;
  box-shadow: 0 16px 32px -18px rgba(77, 20, 140, .28);
}

.q-card-ship .q-logo { height: 26px; width: auto; }

.hb-head-ship { border-left: 4px solid #4d148c; }

.ship-hero {
  background: linear-gradient(135deg, #2b1050 0%, #4d148c 58%, #8a4fbf 100%);
}

.ship-partner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  letter-spacing: .06em;
}

.ship-partner img {
  height: 22px;
  width: auto;
  background: #fff;
  padding: 3px 8px;
}

.ship-ways {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 700px) {
  .ship-ways { grid-template-columns: 1fr; }
}

.way-item {
  padding: 14px 16px;
  background: #f8f5fd;
  border: 1px solid #e2d9f2;
}

.way-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4d148c;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.way-item b { display: block; font-size: 15px; margin-bottom: 6px; }

.way-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

.ship-note { margin: 0; font-size: 13.5px; line-height: 1.8; color: #3c444f; }


/* 代发卡换成打包小人（FedEx 标还留在页面顶部做合作方） */
.q-card-ship .q-logo { height: 52px; width: auto; }


/* 商城 / 麻将页也用深色顶栏，跟其它页面统一 */
.hb-spacer { flex: 1 1 auto; }

.hb-head .hb-cart {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  flex: 0 0 auto;
}

.hb-head .hb-cart:hover { background: rgba(255, 255, 255, .22); }

.hb-head-shop { border-left: 4px solid #1f7a4a; }
.hb-head-mj { border-left: 4px solid #1b4ea8; }

.hb-head-shop .hb-head-logo,
.hb-head-mj .hb-head-logo { width: 46px; }

@media (max-width: 560px) {
  .hb-head .hb-cart { font-size: 12px; padding: 5px 9px; }
  .hb-head-txt h1 { font-size: 15px; }
}


/* ==========================================================
   麻将页：两个区域（WANER 玩儿 / 藁易藁麻将）
   ========================================================== */

.mj-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 700px) {
  .mj-areas { grid-template-columns: 1fr; }
}

.mj-area {
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.mj-area:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.mj-area.on {
  border-color: #1b4ea8;
  box-shadow: 0 0 0 2px rgba(27, 78, 168, .12);
  background: #f7faff;
}

.mj-area-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mj-area-logo { width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px; }

.mj-area-head b { display: block; font-size: 16px; }

.mj-area-head .tiny { font-size: 12px; color: var(--muted); }

.mj-picked { margin-left: auto; }

.mj-area-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #3c444f;
}

.mj-price { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.mj-price .chip {
  background: #eef3fd;
  border: 1px solid #d3e0f7;
  color: #1b4ea8;
  font-size: 12px;
  padding: 3px 9px;
}


/* ==========================================================
   娱乐后台 · 营业额表
   ========================================================== */

.rev-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.rev-table th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.rev-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.rev-table td.num, .rev-table th.num { text-align: right; white-space: nowrap; }

.rev-table tr.rev-sum td {
  background: #f7f9fc;
  font-size: 12.5px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.rev-table tr.rev-sum td.num { color: var(--ink); font-weight: 700; }

@media (max-width: 640px) {
  .rev-table { font-size: 12px; }
  .rev-table th, .rev-table td { padding: 7px 6px; }
}


/* ==========================================================
   娱乐后台 · 营业额：分成、区域汇总、行内编辑
   ========================================================== */

.rev-mine-cell {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
}

.rev-mine-cell b { color: #0f7a3d; font-size: 14px; }

.rev-half { color: #0f7a3d; }

.rev-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 640px) {
  .rev-area-grid { grid-template-columns: 1fr; }
}

.rev-area-box {
  border: 1px solid var(--line);
  background: #fbfcfd;
  padding: 14px 16px;
}

.rev-area-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 720;
  margin-bottom: 10px;
}

.rev-area-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--line);
}

.rev-area-rows > div:last-child { border-bottom: 0; }

.rev-area-rows span { color: var(--muted); }

.rev-preview {
  background: #f2fbf5;
  border: 1px solid #cdebd8;
  padding: 8px 12px;
  font-size: 13px;
  color: #1c6b3f;
}

.rev-table .rev-ops { white-space: nowrap; }

.rev-table .rev-ops .btn { padding: 3px 8px; font-size: 12px; margin-left: 4px; }

.rev-table tr.rev-editing td { background: #f7faff; }

.rev-table tr.rev-editing input {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12.5px;
}


/* ==========================================================
   营业额导出 PDF：打印页样式（只在打印时出现）
   ========================================================== */

.rev-export { justify-content: flex-end; gap: 8px; }

#printArea { display: none; }

@media print {
  #printArea { display: block !important; }

  .print-doc h1 { font-size: 20px; margin: 0 0 6px; }

  .print-meta { font-size: 11px; color: #555; margin: 0 0 14px; }

  .print-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 14px; }

  .print-table th, .print-table td {
    border-bottom: 1px solid #ccc;
    padding: 6px 8px;
    text-align: left;
  }

  .print-table th { border-bottom: 1.5px solid #333; font-size: 11px; }

  .print-table td.num, .print-table th.num { text-align: right; }

  .print-table tr.print-sum td { background: #f2f2f2; font-weight: 700; border-top: 1px solid #333; }

  .print-foot { margin-top: 18px; font-size: 10.5px; color: #666; }
}


/* 娱乐入口的新 logo（WANER 玩偶 + 小店长合影，横图） */
.q-card-mj .q-logo { height: 48px; width: auto; }

.hb-head-mj .hb-head-logo { width: 62px; height: auto; }


/* 顶栏：换真实 logo 图，名字加「官方网站」后字号略收 */
.gg-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
}

.gg-name {
  font-size: 16px;
  letter-spacing: .01em;
}

@media (max-width: 560px) {
  .gg-logo { width: 34px; height: 34px; flex: 0 0 34px; }
  .gg-name { font-size: 14px; }
}


/* 首页大标题里的「藁易藁」：金色渐变，跟 logo 同色系 */
.hero h1 .hero-brand,
.hero-brand {
  font-family: "SimSun", "STSong", "Songti SC", "Noto Serif SC", Georgia, serif;
  font-weight: 800;
  font-size: 1.18em;
  line-height: 1;
  color: #9c7719;
  letter-spacing: .05em;
  display: inline-block;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-brand { color: #c9a13f; -webkit-text-fill-color: currentColor; }
}


/* ==========================================================
   窄屏（手机）顶栏和标题别撑破：按钮可换行、标题按屏宽缩
   ========================================================== */

.site-nav { max-width: 100%; box-sizing: border-box; }

.hero h1 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.28; }

@media (max-width: 640px) {
  .site-nav { gap: 10px; padding: 10px 14px; }
  .site-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .admin-link { font-size: 11.5px; padding: 5px 9px; }
  .lang-switch button { font-size: 12px; padding: 4px 9px; }
  .hero { padding: 34px 14px 18px; }
  .hero h1 { font-size: clamp(21px, 6.4vw, 30px); letter-spacing: -.01em; }
  .hero p { font-size: 13.5px; line-height: 1.7; letter-spacing: .02em; }
}

@media (max-width: 420px) {
  .admin-link { font-size: 11px; padding: 4px 7px; }
  .hero h1 { font-size: 20px; }
}


/* 窄屏：公告条允许换行，别只露半句 */
@media (max-width: 640px) {
  .hero-notice { align-items: flex-start; }
  .notice-text {
    display: block;
    white-space: normal;
    overflow: visible;
    line-height: 1.65;
  }
  .notice-item { display: inline; }
  .notice-item + .notice-item::before { content: "；"; }
}


/* ==========================================================
   藁易藁后台 · 服务单
   ========================================================== */

.sv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.sv-table th {
  text-align: left;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 650;
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.sv-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

.sv-table td.num, .sv-table th.num { text-align: right; white-space: nowrap; }

.sv-table .sv-ops { white-space: nowrap; }
.sv-table .sv-ops .btn { padding: 3px 8px; font-size: 12px; margin-left: 4px; }

.sv-table td.tiny { font-size: 11.5px; color: var(--muted); max-width: 220px; }

/* 顶栏 4 个后台入口：窄屏换行 */
@media (max-width: 1100px) {
  .site-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}


/* ==========================================================
   跑腿 / 采购：首页卡（玫红）+ 页面
   ========================================================== */

.q-card-errand {
  border-color: #f0ccd6;
  background: linear-gradient(180deg, #fdf5f7 0%, #ffffff 62%);
}

.q-card-errand:hover {
  border-color: #e3a8b8;
  box-shadow: 0 16px 32px -18px rgba(150, 40, 70, .26);
}

.q-card-errand .q-logo { height: 40px; width: auto; }

.hb-head-errand { border-left: 4px solid #b8395c; }

.errand-hero {
  background: linear-gradient(135deg, #4a1020 0%, #8e2f4a 58%, #c05a76 100%);
}

/* 九张卡：宽屏三列，正好三行 */
.quick-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1040px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .quick-grid { grid-template-columns: 1fr; }
}


/* 跑腿卡用跑腿小人（斜挎包 + 购物袋 + 地图） */
.q-card-errand .q-logo { height: 52px; width: auto; }


/* 合作伙伴：四个 logo（WANER + UPS + La Poste + FedEx） */
.partners .partner-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .partners .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

.partners a.partner-card { text-decoration: none; }

.partners a.partner-card:hover { transform: translateY(-2px); }


/* ==========================================================
   顶栏搜索框
   ========================================================== */

.site-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 320px;
  min-width: 160px;
  padding: 5px 6px 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.site-search:focus-within {
  background: #fff;
  border-color: var(--line-strong);
  box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .3);
}

.search-ico { font-size: 12px; opacity: .55; }

.site-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.site-search input::placeholder { color: #9aa3b2; }

.site-search input::-webkit-search-cancel-button { display: none; }

.search-go {
  flex: 0 0 auto;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.search-go:hover { filter: brightness(1.06); }

/* 下拉结果 */
.search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .35);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}

.search-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}

.search-item:last-child { border-bottom: 0; }

.search-item b { display: block; font-size: 13.5px; margin-bottom: 2px; }

.search-item span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }

.search-item:hover, .search-item.on { background: #f5f8fd; }

.search-empty { padding: 12px 14px; font-size: 13px; line-height: 1.7; }

.search-empty .tiny { color: var(--muted); font-size: 12px; }

/* 窄屏：搜索框跟「首页」排在同一行，别单独占一整行 */
@media (max-width: 900px) {
  .site-nav { flex-wrap: wrap; row-gap: 8px; }

  .gg-brand { order: 1; flex: 1 1 auto; }

  .site-right {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .site-links { order: 3; flex: 0 0 auto; }

  .site-search {
    order: 4;
    flex: 1 1 160px;
    min-width: 120px;
  }
}

@media (max-width: 560px) {
  .gg-brand { flex: 1 1 100%; order: 1; }
  .site-links { order: 2; }
  .site-search { order: 3; flex: 1 1 auto; min-width: 0; }
  .site-right { order: 4; flex: 1 1 100%; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .site-search input { font-size: 13px; }
  .search-go { padding: 4px 10px; }
}


/* 服务单：订单详情行 + 多行输入 */
.sv-table tr.sv-detail-row td {
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  padding-top: 4px;
  padding-bottom: 8px;
  white-space: normal;
  line-height: 1.65;
}

.sv-table .sv-k {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef3fd;
  color: #2f5aa8;
  font-size: 11px;
}

.field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
  min-height: 72px;
  background: #fff;
}

.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* 顾客查包裹：分享给家人 */
.share-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.share-qr img {
  width: 148px;
  height: 148px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  display: block;
}

.share-ops { flex: 1 1 220px; min-width: 0; }

.share-ops .btn { margin: 0 6px 8px 0; }

.share-url {
  word-break: break-all;
  font-size: 11.5px;
  color: #667085;
}

@media (max-width: 520px) {
  .share-body { gap: 12px; }
  .share-qr img { width: 120px; height: 120px; }
}


/* ==========================================================
   法语版（fr.js）
   ========================================================== */

.fr-toggle {
  position: fixed;
  right: 14px;
  bottom: 88px;
  z-index: 60;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 40, .12);
  background: #fff;
  color: #101828;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(16, 24, 40, .45);
}

.fr-toggle:hover { border-color: var(--accent); color: var(--accent); }

.fr-wrap .card { margin-bottom: 14px; }

.fr-hero {
  background: linear-gradient(160deg, #101319, #2b3446);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 22px;
}

.fr-kicker {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}

.fr-wrap .fr-hero h1 {
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.fr-lead { font-size: 14.5px; line-height: 1.6; opacity: .92; margin: 0 0 10px; }

.fr-note { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin: 10px 0 0; }

.fr-hero .fr-note { color: rgba(255, 255, 255, .72); }

.fr-list { list-style: none; padding: 0; margin: 0; }

.fr-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
}

.fr-list li:last-child { border-bottom: 0; }

.fr-list li b { display: block; margin-bottom: 2px; }

.fr-list li span { color: #475467; }

.fr-list-num li { counter-increment: frli; }

.fr-area { margin: 12px 0 0; font-size: 13px; color: #475467; }

.fr-tel-line, .fr-wx-line, .fr-addr { margin: 6px 0; font-size: 14px; }

.fr-tel { color: var(--accent); text-decoration: none; font-weight: 700; }

@media (max-width: 560px) {
  .fr-wrap .fr-hero h1 { font-size: 21px; }
  .fr-toggle { bottom: 76px; right: 12px; }
}