/* ============================================================================
   shop-v3.css —— 商城页（2026-10-24 **第二次从零重做**：换骨架，不是换皮肤）
   ----------------------------------------------------------------------------
   上一版（同日 shop-v2）换了类名，但骨架仍是电商模板：通栏横幅 → 分类横条 → 网格。

   这一版改的是**信息组织方式**：

     左栏（220，滚动吸附）           右栏（内容）
     ┌──────────────┐   ┌──────────────────────────────┐
     │ 商城          │   │ 全部商品 22        [ 搜索 ]   │
     │ 现货 18       │   │ ┌── 活动条（矮横条 150）──┐  │
     │ 可预定 5      │   │ └──────────────────────────┘  │
     │ 已登记 0      │   │ ┌──┐┌──┐┌──┐┌──┐┌──┐         │
     │ ───────────   │   │ └──┘└──┘└──┘└──┘└──┘         │
     │ ▎全部    22   │   │                              │
     │  卡套    11   │   │                              │
     │  周边     6   │   │                              │
     │  预定     5   │   │                              │
     │ ───────────   │   │                              │
     │ 单卡 6081 →   │   │                              │
     └──────────────┘   └──────────────────────────────┘

   理由：
     · 逛商城的核心动作是"按类目看"——分类就是主目录，必须**常驻**在左栏，
       而不是压在横幅下面（旧版滚一下就找不到了）；
     · 右栏只干一件事：看货。标题行 = 当前类目 + 数量 + 搜索；
     · 活动条压到 150（旧 268），它只是"公告"，不配占掉首屏 1/3。

   命名 `shp-`，完全独立：页面不再加载旧 `shop.css`，也不加载 `shop-v2.css`。
   ========================================================================= */

:root {
  --shp-panel: #13151b;
  --shp-card: #171a21;
  --shp-line: rgba(255, 255, 255, .07);
  --shp-line-2: rgba(255, 255, 255, .12);
  --shp-gold: #ffd60a;
  /* 金色**当文字**用时用这颗（深色=亮金；浅色主题在 theme-light.css 里换成暗金）。
     与全站 --gold / --gold-ink 的拆分同一个道理：底和字必须分开。 */
  --shp-gold-ink: #ffd60a;
  --shp-t1: #f4f5f7;
  --shp-t2: #a2a8b4;
  --shp-t3: #8B93A3;   /* 2026-10-24 提亮：原 #6d7482 在深卡面上只有 3.4–3.9:1 */
  --shp-side: 220px;
}

/* 两栏容器 */
.shoppage.shp {
  display: grid;
  grid-template-columns: var(--shp-side) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 72px;
}

/* ══ 左栏 ═══════════════════════════════════════════════════════ */
.shp-side {
  position: sticky; top: 82px;
  display: flex; flex-direction: column; gap: 3px;
  padding-right: 26px; margin-right: 26px;
  border-right: 1px solid var(--shp-line);
}

.shp-title {
  margin: 0;
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--shp-t1);
}
.shp-title em {
  font-style: normal; margin-left: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--shp-gold-ink); vertical-align: 3px;
}

.shp-counts {
  display: flex; flex-wrap: wrap; gap: 3px 13px;
  margin: 7px 0 16px;
  font-size: 11.5px; color: var(--shp-t3);
}
.shp-counts b { color: var(--shp-t2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 分类：竖排目录 + 选中左侧金条（不用整块填色，目录感更稳） */
.shp-cats { display: flex; flex-direction: column; gap: 2px; }
.shp-cat {
  position: relative;
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 11px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--shp-t2);
  font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left;
  transition: background .15s, color .15s;
}
.shp-cat > span { font-size: 14px; line-height: 1; opacity: .85; }
.shp-cat > i {
  margin-left: auto;
  font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--shp-t3); font-variant-numeric: tabular-nums;
}
.shp-cat:hover { background: rgba(255,255,255,.04); color: var(--shp-t1); }
.shp-cat.on { background: var(--shp-gold); color: #12140a; font-weight: 700; }
.shp-cat.on > i { color: rgba(18,20,10,.6); }
/* 2026-10-25 修「点一下就描黑」：
   这里原来是 `filter: grayscale(1) brightness(.2)` —— 把选中分类的图标压成黑块。
   本意是让 `✦` 那种**文字字形**在金底上够深，但文字颜色已经由 `.shp-cat.on { color:#12140a }`
   管住了；这层滤镜只会把彩色 emoji（🎴 卡套 / 🧩 周边 / 📦 预定）统一毁成黑色剪影。
   所以只保留 opacity，不再动 filter。 */
.shp-cat.on > span { opacity: 1; }

.shp-rule { height: 1px; background: var(--shp-line); margin: 14px 0; }

.shp-jump {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 14px;
  border-radius: 8px;
  color: var(--shp-t3);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
}
.shp-jump b { margin-left: auto; font-weight: 400; transition: transform .15s; }
.shp-jump:hover { background: rgba(255,255,255,.04); color: var(--shp-gold-ink); }
.shp-jump:hover b { transform: translateX(3px); }

/* ══ 右栏 ═══════════════════════════════════════════════════════ */
.shp-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.shp-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--shp-line);
}
.shp-hd h2 {
  margin: 0;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--shp-t1);
}
.shp-hd h2 span {
  font-size: 12px; font-weight: 600; color: var(--shp-t3);
  padding: 1px 7px; border-radius: 99px;
  background: rgba(255,255,255,.055);
  font-variant-numeric: tabular-nums;
}
.shp-q {
  width: 220px; height: 34px; padding: 0 12px;
  border: 1px solid var(--shp-line); border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: var(--shp-t1); font: inherit; font-size: 12.5px;
  outline: none; transition: border-color .16s, background .16s;
}
.shp-q::placeholder { color: var(--shp-t3); }
.shp-q:focus { border-color: rgba(255,214,10,.5); background: rgba(255,255,255,.05); }

/* 活动条：矮横条，只是公告 */
/* 2026-10-25 店主：「商城的轮播图位置图片大小有点问题」。
   原来是**写死 height:150px** + `object-fit:cover` —— 宽度随栏走（约 660px），
   于是画框变成 4.4:1，而海报是 16:9，`cover` 只能把上下各裁掉一大半：
   画面被放大、标题文字被切。改成**按 16:9 定高**（宽度自适应），海报整幅进去。 */
.shp-strip {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 300px;          /* 宽屏时不至于把商品挤到首屏外 */
  border-radius: 12px; overflow: hidden;
  background: #0e1016;
  /* 🔴 2026-10-25 店主：「这里有多余的黑框，删了之后对齐」。
     那圈黑边不是边框，而是**垫在下面的深色底（#0e1016）从内边距里露出来**：
       `.hc` 自带 `padding: 0 0 18px`、`.hc-viewport` 自带 `padding-top: 28px` ——
     这两个内边距是给"带边框的轮播"留呼吸位的，可商城这条是**整幅海报**，
     露出来的 18 + 28 = 46px 就成了一圈黑框（照片没贴边，看着像没对齐）。
     手机端 2026-10-24 已经清过一次（brand-touch.css 的 .hc.spb.shp-strip），
     这里把宽屏补上，两边口径统一。 */
  padding: 0;
}
.shp-strip .hc-viewport {
  padding-top: 0;             /* 同上：去掉顶部 28px 暗带 */
}
/* 单张 slide 自带 `padding: 1px 6px`（旧版"画框"的留白）—— 海报要贴边，
   否则左右各露 6px 深色底，看起来像一条细黑边。 */
.shp-strip .hc-slide {
  padding: 0;
}
.shp-strip-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.shp-strip-slide { position: relative; flex: 0 0 100%; height: 100%; }
.shp-strip-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  display: block;
}
.shp-strip-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,9,12,.72) 0%, transparent 58%);
}
.shp-strip-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,11,15,.6);
  color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s;
}
.shp-strip-nav:hover { background: var(--shp-gold); color: #14150a; border-color: transparent; }
.shp-strip-prev { left: 10px; }
.shp-strip-next { right: 10px; }
.shp-strip-dots { position: absolute; left: 16px; bottom: 10px; z-index: 3; display: flex; gap: 5px; }
.shp-strip-dots button {
  width: 14px; height: 2px; border-radius: 99px; border: 0; padding: 0;
  background: rgba(255,255,255,.3); cursor: pointer;
}
.shp-strip-dots button.on { background: var(--shp-gold); width: 20px; }

/* ══ 商品墙 ═════════════════════════════════════════════════════ */
.shp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 22px 16px;
}

.shp-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--shp-card);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* 内描边 + 顶部 1px 高光 = 卡片有"厚度"，不再是贴在黑底上的色块 */
  box-shadow: inset 0 0 0 1px var(--shp-line), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
.shp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.48), 0 0 0 1px rgba(255,214,10,.3);
}
.shp-card:focus-visible { outline: 2px solid var(--shp-gold); outline-offset: 3px; }

.shp-art {
  position: relative;
  /* 2026-10-26 店主：「商城的商品图页面要保持 750*750 像素比例」——
     素材本身是 1:1 方图（750×750），容器跟着做成正方形，
     配 object-fit:contain 正好铺满、不裁也不留边。
     之前写 4:5 是按「卡套竖版」推的，但商品图是独立素材，跟卡面不是一回事。 */
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #1d212a, #0d0f14 72%);
  overflow: hidden;
}
.shp-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.shp-card:hover .shp-art img { transform: scale(1.04); }
.shp-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}

.shp-tag {
  position: absolute; left: 9px; top: 9px; z-index: 2;
  height: 21px; padding: 0 7px;
  display: inline-flex; align-items: center;
  border-radius: 5px;
  font-size: 10.5px; font-weight: 800;
  background: var(--shp-gold); color: #14150a;
}
.shp-tag.gray { background: rgba(244,245,247,.92); color: #1a1c22; }
.shp-tag.out { background: rgba(24,26,32,.92); color: #cfd3da; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.shp-card.is-out .shp-art img { filter: grayscale(.85) brightness(.6); }

.shp-info { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 12px; }
.shp-name {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.34;
  color: var(--shp-t1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.shp-sub { font-size: 11px; color: var(--shp-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-pre {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 1px; font-size: 10.5px; color: #d9b64a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shp-pre::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }

.shp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--shp-line);
}
.shp-price { display: flex; align-items: baseline; gap: 2px; color: var(--shp-t1); }
.shp-price small { font-size: 11px; font-weight: 700; color: var(--shp-t2); }
.shp-price b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.shp-price s { margin-left: 7px; font-size: 10.5px; color: var(--shp-t3); opacity: .85; }
.shp-price .ask { font-size: 12.5px; font-weight: 700; color: var(--shp-t2); }

.shp-go {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--shp-line-2);
  background: transparent; color: var(--shp-t1);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.shp-card:hover .shp-go { background: var(--shp-gold); color: #14150a; border-color: transparent; }
.shp-go:disabled { opacity: .35; cursor: not-allowed; }

.shp-cta {
  flex: none; height: 30px; padding: 0 11px;
  border-radius: 7px;
  border: 1px solid rgba(255,214,10,.45);
  background: transparent; color: var(--shp-gold-ink);
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .16s, color .16s;
}
.shp-cta:hover { background: var(--shp-gold); color: #14150a; }
.shp-cta[aria-disabled="true"], .shp-cta:disabled { opacity: .4; cursor: not-allowed; }
.shp-cta[aria-disabled="true"]:hover, .shp-cta:disabled:hover { background: transparent; color: var(--shp-gold-ink); }

.shp-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; color: var(--shp-t3); font-size: 13px; }

/* ══ 详情弹窗 ═══════════════════════════════════════════════════ */
.shp-mask {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5,6,9,.8);
  backdrop-filter: blur(7px);
}
.shp-mask[hidden] { display: none; }
.shp-dlg {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: min(790px, 100%);
  max-height: min(86vh, 660px);
  border-radius: 16px; overflow: hidden;
  background: #12141a;
  box-shadow: 0 40px 90px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.07);
}
.shp-dlg-art { position: relative; background: #0e1015; }
.shp-dlg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shp-dlg-bd { display: flex; flex-direction: column; padding: 24px 26px 20px; overflow-y: auto; }
.shp-dlg-cat { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--shp-gold-ink); }
.shp-dlg-name { margin: 7px 0 3px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--shp-t1); }
.shp-dlg-sub { margin: 0; font-size: 12.5px; color: var(--shp-t2); }
.shp-dlg-note { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--shp-t2); }

.shp-pbox { margin-top: 16px; padding: 14px 16px; background: #171a21; border-radius: 10px; }
.shp-prow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.shp-plbl { font-size: 11px; color: var(--shp-t3); }
.shp-pnum { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--shp-gold-ink); }
.shp-pnum small { font-size: 14px; font-weight: 700; margin-right: 2px; }
.shp-pnum.ask { font-size: 19px; color: var(--shp-t2); }
.shp-pwas { font-size: 12.5px; color: var(--shp-t3); }
.shp-pstate {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #5fd18d;
}
.shp-pstate::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.shp-pstate.pre { color: var(--shp-gold-ink); }
.shp-pstate.off { color: var(--shp-t3); }
.shp-pmeta { display: flex; gap: 16px; margin-top: 9px; font-size: 11.5px; color: var(--shp-t3); }
.shp-pmeta b { color: var(--shp-t1); font-weight: 700; }

.shp-tl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: 12px;
  background: var(--shp-line); border-radius: 10px; overflow: hidden;
}
.shp-tl > i { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; background: #171a21; font-style: normal; }
.shp-tl em { font-style: normal; font-size: 10.5px; color: var(--shp-t3); }
.shp-tl b { font-size: 12.5px; font-weight: 700; color: var(--shp-t1); white-space: nowrap; }
.shp-quota { margin-top: 10px; display: flex; align-items: center; gap: 9px; }
.shp-qbar { flex: 1 1 auto; height: 4px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.shp-qbar > i { display: block; height: 100%; background: var(--shp-gold); border-radius: 99px; }
.shp-quota > b { font-size: 11.5px; color: var(--shp-t2); font-weight: 600; white-space: nowrap; }

.shp-policy {
  margin: 14px 0 0; padding-top: 11px;
  border-top: 1px dashed rgba(255,255,255,.07);
  font-size: 11px; color: var(--shp-t3);
}

.shp-act { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.shp-buy {
  height: 42px; padding: 0 24px;
  border: 0; border-radius: 9px;
  background: var(--shp-gold); color: #14150a;
  font: inherit; font-size: 13.5px; font-weight: 800;
  cursor: pointer; transition: filter .16s, transform .16s;
}
.shp-buy:hover { filter: brightness(1.06); }
.shp-buy:active { transform: scale(.985); }
.shp-buy.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--shp-line-2); color: var(--shp-t2); font-weight: 600; }
.shp-buy.ghost:hover { color: var(--shp-t1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.shp-buy:disabled { opacity: .4; cursor: not-allowed; }

.shp-x {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--shp-line-2);
  background: rgba(10,11,15,.62);
  color: var(--shp-t2);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .16s, color .16s;
}
.shp-x:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ══ 窄屏：左栏折成横向滚动条 ═══════════════════════════════════ */
@media (max-width: 900px) {
  .shoppage.shp { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 16px; }
  .shp-side { position: static; }
  .shp-title { font-size: 22px; }
  .shp-counts { margin-bottom: 10px; }
  .shp-cats { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .shp-cats::-webkit-scrollbar { display: none; }
  .shp-cat { flex: none; height: 34px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.04); }
  .shp-cat.on { background: var(--shp-gold); color: #14150a; }
  .shp-cat.on > i { color: rgba(20,21,10,.82); }   /* 金底上的计数：.6 只有 4.29:1 */
  .shp-cat.on::before { display: none; }
  .shp-rule, .shp-jump { display: none; }
  .shp-hd { flex-wrap: wrap; }
  .shp-q { width: 100%; }
  .shp-strip { aspect-ratio: 16 / 9; height: auto; max-height: none; }
  .shp-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 16px 10px; }
  .shp-name { font-size: 13px; }
  .shp-price b { font-size: 16px; }
  .shp-dlg { grid-template-columns: 1fr; max-height: 88vh; }
  .shp-dlg-art { aspect-ratio: 16 / 11; }
}

/* ── 活动条收口（2026-10-24）──────────────────────────────────────
   宣传图是 16:9，活动条只有 150 高 → cover 必裁。与其硬塞，不如：
   ① 左右各加一道渐隐，让"图片被裁"看起来是设计（画卷式展开），而不是切边；
   ② 图轻微放大并降饱和，作为背景存在，不争商品。 */
.shp-strip::before,
.shp-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 90px;
  z-index: 2; pointer-events: none;
}
.shp-strip::before { left: 0; background: linear-gradient(90deg, #0b0c10, transparent); }
.shp-strip::after { right: 0; background: linear-gradient(270deg, #0b0c10, transparent); }
.shp-strip-slide img { filter: saturate(.92); }

/* 卡片图统一比例，避免个别图未加载时高度跳动 */
.shp-art { min-height: 0; }

/* ── 活动条收口（2026-10-24）──────────────────────────────────────
   宣传图是 16:9，活动条只有 150 高 → cover 必裁。与其硬塞，不如：
   ① 左右各加一道渐隐，让"图片被裁"看起来是设计（画卷式展开），而不是切边；
   ② 图轻微放大并降饱和，作为背景存在，不争商品。 */
.shp-strip::before,
.shp-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 90px;
  z-index: 2; pointer-events: none;
}
.shp-strip::before { left: 0; background: linear-gradient(90deg, #0b0c10, transparent); }
.shp-strip::after { right: 0; background: linear-gradient(270deg, #0b0c10, transparent); }
.shp-strip-slide img { filter: saturate(.92); }

/* 卡片图统一比例，避免个别图未加载时高度跳动 */
.shp-art { min-height: 0; }


/* ═══════════════════════════════════════════════════════════════════
   2026-10-24 16:10 修复：**轮播不滚**
   根因：HTML 保留了旧 carousel 结构（.hc-track / .hc-slide），
        而新样式只写了 .shp-strip-* 的新类名 —— .hc-slide 于是回落到
        brand-home.css 的 `flex: 0 0 74%`：一屏露 3 张，carousel.js 按
        "中心对齐"算位移，每次只挪 74%，看起来就是"点了没反应"。
   修法：在这里把 .hc-* 映射成 100% 宽（一次一屏），位移才对得上。
   ═══════════════════════════════════════════════════════════════════ */
/* 2026-10-25 店主：「商城的轮播图位置图片大小有点问题」。
   上一版这里写死 `height: 248px`（10-24 店主说"再高一点"，168 → 248）。
   但栏宽约 916，248 高 = 3.7:1，而海报是 **16:9** —— `object-fit: cover` 只能把上下各裁掉约一半：
   画面被放大、标题被切，这就是"图片大小不对"的来源。
   改成**跟海报同比例**（16:9，宽度自适应），不再写死高度：
   916 宽时约 515 高 —— 比 248 高，但这是"整幅可见"的最小代价；嫌高就改 max-height。 */
.shp-strip {
  aspect-ratio: 16 / 9;
  height: auto;
  /* 2026-10-25：460 太紧 —— 916 内容宽时 16:9 需要 515 高，被 460 一压，
     比例变成 1.99，`object-fit:cover` 又把上下裁掉一点（正是"图片大小不对"的残留）。
     兜底高度必须**大于**常见宽度下的比例高度，否则它就从"兜底"变成了"裁切"。 */
  max-height: 560px;
}
.shp-strip .hc-viewport { position: relative; height: 100%; overflow: hidden; }
.shp-strip .hc-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform; }
.shp-strip .hc-slide {
  flex: 0 0 100%; width: 100%; margin: 0; height: 100%;
  position: relative; overflow: hidden;
}
.shp-strip .hc-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
.shp-strip .hc-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,10,.78) 0%, rgba(6,7,10,.18) 46%, transparent 66%);
  pointer-events: none;
}
.shp-strip .hc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,11,15,.66);
  color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s, border-color .16s;
}
.shp-strip .hc-nav:hover { background: var(--shp-gold); color: #14150a; border-color: transparent; }
.shp-strip .hc-prev { left: 12px; }
.shp-strip .hc-next { right: 12px; }
.shp-strip .hc-dots { position: absolute; left: 18px; bottom: 12px; z-index: 4; display: flex; gap: 6px; }
.shp-strip .hc-dots button {
  width: 16px; height: 3px; border-radius: 99px; border: 0; padding: 0;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: background .2s, width .2s;
}
.shp-strip .hc-dots button.is-on, .shp-strip .hc-dots button.on { background: var(--shp-gold); width: 24px; }


/* 无图商品的占位（2026-10-24）：旧 .shop-ph 随 shop.css 一起下线了，
   新页面若不补这条，无图商品会是一片空白 —— 看起来像破图。
   用品牌字形 + 径向底，明确是"没有配图"而不是"加载失败"。 */
.shp-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 58px; line-height: 1;
  color: rgba(255, 255, 255, .16);
  background: radial-gradient(120% 90% at 50% 10%, #1b1f27, #0d0f14 74%);
  user-select: none;
}

/* 商品码（2026-10-25 店主：「商城内的商品也是有商品码的」）
   在详情弹窗的价格元信息行里，跟"库存 N 件""合计 ¥X" 同一行；
   用等宽字体 + 略深色，读起来像编号而不是广告词。 */
.shp-pcode{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em;}