/* ==========================================================================
   1688 商品详情 · 高仿页面样式
   坐标体系：iPhone 14 Pro 截图原图 1179x2556 (@3x) → CSS 尺寸 = 原图 / 3
   设计宽度 393px，所有数值按截图逐像素量取
   ========================================================================== */

:root {
  --orange: #ff5c00;
  --orange-lt: #fb6c33;
  --red: #ff0036;
  --txt: #111111;
  --txt-2: #333333;
  --gray: #999999;
  --bg-gray: #f4f4f6;
  --hdr: #f8f8fa;
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bot: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  background: #fff;
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  line-height: 1.4;
}
img { display: block; border: none; }
input, button { font-family: inherit; border: none; outline: none; background: none; }
input { -webkit-appearance: none; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }

.app {
  position: relative;
  width: 393px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  overflow-x: hidden;
}

/* ============================ 顶部搜索 + 标签 ============================ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--hdr);
  padding-top: var(--sa-top);
}
.hdr-row {
  display: flex;
  align-items: center;
  height: 33.7px;
  margin-top: 2.7px;
  padding: 0 12px 0 10px;
}
.hdr-back { width: 12px; flex: 0 0 auto; display: block; }
.hdr-back img { width: 10.7px; height: 15px; }
.searchbox {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 33.7px;
  margin-left: 22.7px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.searchbox input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 15px;
  color: #333;
  border-radius: 0;
}
.searchbox input::placeholder { color: #a3a3a3; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.btn-search {
  flex: 0 0 auto;
  width: 44.3px;
  height: 27.7px;
  margin-right: 3px;
  border-radius: 5px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.hdr-ico { flex: 0 0 auto; }
.hdr-ico.cart  { width: 19.4px; height: 18.7px; margin-left: 15.3px; }
.hdr-ico.share { width: 16px;   height: 15.3px; margin-left: 18.3px; }
.hdr-ico.more  { width: 18px;   height: 4.7px;  margin-left: 19px; }

.tabs {
  display: flex;
  align-items: flex-start;
  height: 52px;
  padding: 25px 0 0 75px;
}
.tab {
  font-size: 17.2px;
  font-weight: 600;
  color: #111;
  line-height: 18.3px;
  position: relative;
  white-space: nowrap;
}
.tab:nth-child(2) { margin-left: 72.7px; }
.tab:nth-child(3) { margin-left: 67px; }
.tab-badge {
  margin-left: 4px;
  width: 44px;
  height: 15.3px;
  border-radius: 7.7px;
  background: linear-gradient(90deg, #ff8a4c, #fb6c33);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 15.3px;
  text-align: center;
  display: inline-block;
}

/* ============================ 页面主体 ============================ */
.main { padding-bottom: calc(56px + var(--sa-bot)); }
.pane { display: none; }
.pane.on { display: block; }
.gap { height: 8.3px; background: #f7f7f7; }
.sec { background: #fff; }

/* ---------- 密文代发卡片 ---------- */
.mwdf {
  margin: 1px 15px 0;
  height: 127.7px;
  background: var(--bg-gray);
  border-radius: 6px;
  padding: 25.7px 11px 0;
  position: relative;
}
.mwdf-head { display: flex; align-items: center; height: 16.7px; }
.mwdf-title { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.mwdf-badges { margin-left: 3px; }
.mwdf-badges img { width: 87px; height: 16.3px; }
.mwdf-sub {
  margin-top: 10.3px;
  font-size: 11.7px;
  line-height: 16px;
  color: #333;
  white-space: nowrap;
}
.mwdf-sub .hot { color: var(--orange); }
.mwdf-btns { display: flex; margin-top: 12px; }
.mwdf-btn {
  height: 23.3px;
  border-radius: 3px;
  font-size: 13.3px;
  font-weight: 500;
  line-height: 23.3px;
  text-align: center;
  padding: 0 11px;
}
.mwdf-btn.solid { background: var(--orange); color: #fff; }
.mwdf-btn.ghost {
  margin-left: 8.3px;
  background: #fff;
  color: #333;
  border: .5px solid #dcdcdc;
  line-height: 22.3px;
}

/* ---------- 通用标题行 ---------- */
.sec-hd {
  display: flex;
  align-items: center;
  padding: 14.7px 13px 0;
}
.sec-hd h3 { font-size: 15.5px; font-weight: 700; line-height: 17px; letter-spacing: .2px; }
.sec-hd .chev { margin-left: auto; display: flex; }
.sec-hd .chev img { width: 9.3px; height: 11px; }

/* ---------- 商品参数 ---------- */
.params { padding: 0 13px 21px; }
.params .sec-hd { padding: 14.7px 0 0; }
.params-grid {
  display: grid;
  grid-template-columns: 76px 1fr 71px 1fr;
  row-gap: 10.3px;
  margin-top: 16px;
  font-size: 13.3px;
  line-height: 13px;
}
.params-grid .k { color: #b3b3b3; }
.params-grid .v { color: #1a1a1a; }

/* ---------- 商品尺寸重量 ---------- */
.size { padding: 0 13px 38px; }
.size .sec-hd { padding: 15.7px 0 0; }
.table {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 160px 105px 1fr;
  font-size: 13.3px;
}
.table .th { background: #f5f5f5; color: #1a1a1a; font-weight: 600; }
.table .cell { padding-left: 10px; height: 18.3px; line-height: 18.3px; }
.table .rowline { grid-column: 1 / -1; height: .5px; background: #f2f2f2; }
.table .td { height: 33.3px; line-height: 33.3px; padding-left: 10px; }

/* ---------- 评价 ---------- */
.reviews .sec-hd { padding: 12.7px 4px 0 13px; }
.reviews .rate {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 14.7px;
  color: #ff8b00;
}
.reviews .rate img { width: 9.3px; height: 11px; margin-left: 2px; }
.rv { padding: 14px 13px 0; }
.rv-thumb { flex: 0 0 auto; border-radius: 4px; overflow: hidden; }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-head { display: flex; align-items: center; font-size: 12.5px; line-height: 13px; }
.rv-name { color: #1a1a1a; }
.rv-sep { color: #d8d8d8; margin: 0 7px; }
.rv-cnt { color: #b3b3b3; }
.rv-body { display: flex; flex-wrap: nowrap; margin-top: 13px; }
.rv-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.9px;
  line-height: 18px;
  color: #1a1a1a;
  padding-right: 10px;
  word-break: break-word;
}
.rv.r1 .rv-thumb { width: 53.7px; height: 25px; }
.rv.r2 .rv-thumb { width: 52.7px; height: 35.3px; }
.rv.r3 .rv-thumb { width: 52.3px; height: 53px; }
.rv-more { padding: 14px 13px 18px; text-align: center; font-size: 13px; color: #999; }

/* ---------- 严选店铺卡 ---------- */
.yx {
  margin-top: 8.3px;
  padding: 5px 0 0;
  background: linear-gradient(180deg, #feebdc 0%, #feebdc 100px, #f7f7f7 100px, #f7f7f7 100%);
}
.yx-hd { display: flex; align-items: center; padding: 0 13px; }
.yx-hd h3 { font-size: 20px; font-weight: 800; letter-spacing: .5px; line-height: 18px; }
.yx-hd .more { margin-left: auto; font-size: 12.7px; color: #666; display: flex; align-items: center; }
.yx-hd .more img { width: 9.3px; height: 11px; margin-left: 2px; }
.yx-sub { margin-top: 4px; padding: 0 13px; font-size: 10.7px; color: #666; line-height: 10px; }
.yx-card {
  margin: 6.3px 12px 0;
  background: #fff;
  border-radius: 8px 8px 0 0;
  padding: 14.7px 13px 0;
}
.yx-shop { display: flex; align-items: center; }
.yx-shop .name { font-size: 12.3px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yx-shop .go {
  margin-left: auto;
  height: 23.3px;
  line-height: 22.3px;
  padding: 0 9px;
  border: .5px solid #b9b9b9;
  border-radius: 3px;
  font-size: 12.7px;
  color: #333;
  white-space: nowrap;
  flex: 0 0 auto;
}
.yx-brand { display: flex; align-items: center; margin-top: 12px; }
.yx-brand img { width: 15.3px; height: 16px; }
.yx-brand .t { font-size: 13.5px; font-weight: 600; color: #111; margin-left: 2px; }
.yx-brand .d { font-size: 12px; color: #888; margin-left: 3px; }
.yx-stats { display: flex; margin-top: 14px; }
.yx-stat { width: 83.3px; }
.yx-stat .n { font-size: 15px; font-weight: 600; color: #111; line-height: 15px; }
.yx-stat .l { font-size: 11.7px; color: #999; margin-top: 8px; line-height: 12px; }
.yx-factory { display: flex; align-items: center; margin-top: 20px; font-size: 12.7px; }
.yx-factory .k { color: #111; }
.yx-factory .v { color: #999; margin-left: 12px; }
.yx-tag {
  display: inline-block;
  margin: 8px 0 20px;
  padding: 0 5px;
  height: 18px;
  line-height: 18px;
  background: #f4f4f6;
  border-radius: 2px;
  font-size: 11.7px;
  color: #333;
}
/* ---------- 店铺推荐 ---------- */
.shoprx { background: #fff; padding: 0 13px 14px; }
.shoprx .sec-hd { padding: 14px 0 0; }
.shoprx-list { display: flex; margin-top: 12px; }
.shoprx-item { width: 110.7px; }
.shoprx-item + .shoprx-item { margin-left: 16px; }
.shoprx-item .pic {
  width: 110.7px;
  height: 110.7px;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f5f5;
}
.shoprx-item .pic img { width: 100%; height: 100%; object-fit: cover; }
.shoprx-item .t {
  margin-top: 7px;
  font-size: 12.7px;
  line-height: 15px;
  color: #1a1a1a;
  height: 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shoprx-item .p { margin-top: 4px; font-size: 14.7px; color: var(--orange); font-weight: 600; }

/* ---------- 详情 / 推荐 面板 ---------- */
.detail-recs { display: flex; padding: 12px 13px 0; background: #fff; }
.detail-recs .it { width: 110.7px; }
.detail-recs .it + .it { margin-left: 16px; }
.detail-recs .pic { width: 110.7px; height: 66px; border-radius: 4px; overflow: hidden; background: #f5f5f5; }
.detail-recs .pic img { width: 100%; height: 100%; object-fit: cover; }
.detail-recs .t {
  margin-top: 5px; font-size: 12.7px; line-height: 15px; color: #1a1a1a; height: 15px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.detail-recs .p { margin-top: 3px; font-size: 14.7px; color: var(--orange); font-weight: 600; }
.detail-title { padding: 20px 13px 12px; font-size: 17px; font-weight: 700; background: #fff; }
.detail-long { width: 100%; display: block; }
.reco-grid { display: flex; flex-wrap: wrap; padding: 10px 13px 0; background: #fff; }
.reco-grid .it { width: 178px; margin-bottom: 14px; }
.reco-grid .it:nth-child(2n) { margin-left: 8px; }
.reco-grid .pic { width: 178px; height: 178px; border-radius: 4px; overflow: hidden; background: #f5f5f5; }
.reco-grid .pic img { width: 100%; height: 100%; object-fit: cover; }
.reco-grid .t { margin-top: 6px; font-size: 13px; line-height: 16px; height: 32px; overflow: hidden; }
.reco-grid .p { margin-top: 3px; font-size: 15px; color: var(--orange); font-weight: 600; }

/* ============================ 底部操作栏 ============================ */
.bottombar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 70;
  width: 393px;
  max-width: 100%;
  transform: translateX(-50%);
  background: #fff;
  padding-bottom: var(--sa-bot);
  height: calc(56px + var(--sa-bot));
  display: flex;
  align-items: flex-start;
  box-shadow: 0 -1px 0 rgba(0,0,0,.04);
}
.bb-cols { display: flex; width: 134.7px; flex: 0 0 134.7px; }
.bb-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  overflow: hidden;
}
.bb-col img { height: 17.3px; width: auto; }
.bb-col.star img { height: 17px; }
.bb-col span { margin-top: 4px; font-size: 10px; color: #333; line-height: 11px; white-space: nowrap; }
.bb-btn {
  height: 41px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 5px;
}
.bb-cart {
  width: 103px;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: #fff;
}
.bb-buy {
  margin-left: 10.2px;
  width: 133.3px;
  background: linear-gradient(90deg, #ff6a00, #ff5000);
  color: #fff;
  flex-direction: column;
  line-height: 1;
}
.bb-buy .l1 { font-size: 16px; font-weight: 600; }
.bb-buy .l2 { font-size: 10.5px; font-weight: 400; margin-top: 4px; opacity: .95; }

/* ============================ 功能直达浮层 ============================ */
.mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 91;
  width: 393px; max-width: 100%;
  transform: translate(-50%, 100%);
  background: #fff;
  border-radius: 12px 12px 0 0;
  transition: transform .24s ease;
  padding: 0 0 calc(14px + var(--sa-bot));
}
.sheet.on { transform: translate(-50%, 0); }
.sheet-hd {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: #111;
}
.sheet-close { position: absolute; right: 14px; top: 50%; margin-top: -9px; width: 18px; }
.sheet-close img { width: 18px; height: 18px; }
.tool-grid { display: flex; padding: 8px 12px 0; }
.tool { width: 20%; display: flex; flex-direction: column; align-items: center; }
.tool .tile {
  width: 52px; height: 52px; border-radius: 12px; background: #f7f7f7;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tool .tile img { width: 24px; height: 24px; object-fit: contain; }
.tool .dot {
  position: absolute; top: -4px; right: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #ff2d2d; color: #fff; font-size: 10px; line-height: 15px; text-align: center;
}
.tool span { margin-top: 8px; font-size: 11.7px; color: #333; }