/* [2026-09-02] v46 由 TaoBaoIndex.cshtml 页内 <style> 抽取归拢到 2026814（样式内容未改动） */
/* ============================================================
   LTPhone · 淘宝店铺列表（对齐首页 v5 设计语言）
   白底 + 橙色点缀 + 彩色渐变缩略图 + 渐变 CTA + Remix Icon
   ============================================================ */
:root{--brand-2:#ff7a2e;--blue-2:#2086ce}
/* ============ 顶部（白底，与首页一致） ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:0.100rem;
  padding:0.100rem 0.140rem;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(0.120rem);
}
.logo{flex-shrink:0}
.logo img{height:0.240rem;width:auto}
.search{
  flex:1;display:flex;align-items:center;gap:0.070rem;
  height:0.360rem;padding:0 0.130rem;
  background:var(--bg);border-radius:0.180rem;
  color:var(--ink-3);font-size:0.140rem;
  transition:background .2s;
}
.search:active{background:#eef0f3}
.search .ic{font-size:0.170rem;color:var(--ink-3)}

/* ============ 列表页标题条 ============ */
.list-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.060rem 0.140rem 0.120rem;
}
.list-head .lh-title{font-size:0.170rem;font-weight:800;display:flex;align-items:center;gap:0.090rem}
.list-head .lh-title::before{content:"";width:0.040rem;height:0.160rem;border-radius:0.020rem;background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.list-head .lh-count{font-size:0.130rem;color:var(--ink-3)}
.list-head .lh-count b{color:var(--brand);font-weight:700}

/* ============ 排序条 ============ */
.sort-bar{
  position:sticky;top:0.560rem;z-index:40;
  display:flex;align-items:center;
  background:var(--card);
  border-top:0.010rem solid var(--line);
  border-bottom:0.010rem solid var(--line);
  padding:0 0.060rem;
}
.sort-bar .sb-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:0.020rem;
  padding:0.120rem 0;font-size:0.140rem;color:var(--ink-2);
  transition:color .2s;
}
.sort-bar .sb-item.on{color:var(--brand);font-weight:700}
.sort-bar .sb-item .ic{font-size:0.140rem}
.sort-bar .sb-filter{
  flex-shrink:0;display:flex;align-items:center;gap:0.030rem;
  padding:0.120rem 0.090rem 0.120rem 0.050rem;font-size:0.140rem;color:var(--ink-2);
}
.sort-bar .sb-filter.on{color:var(--brand);font-weight:700}
.sort-bar .sb-filter .ic{font-size:0.150rem}

/* ============ 店铺卡片（与首页一致） ============ */
.shop-list{padding:0.120rem 0.140rem 0;display:flex;flex-direction:column;gap:0.100rem}
.shop-card{
  display:flex;flex-direction:column;gap:0.090rem;background:var(--card);border-radius:var(--r);
  padding:0.120rem;box-shadow:var(--shadow);transition:transform .2s;
}
.shop-card:active{transform:scale(.98)}
/* [2026-08-17] 同步首页：第一行 徽章+标题（单行省略），徽章顶部对齐第一行文字 */
.shop-top{display:flex;align-items:flex-start}
.shop-badge{flex-shrink:0;height:0.160rem;width:auto;display:inline-block;margin-top:0.025rem;margin-right:0.040rem}
.shop-name{flex:1;min-width:0;font-size:0.150rem;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* [2026-08-17] 同步首页：第二行 缩略图+属性并排 */
.shop-mid{display:flex;gap:0.120rem;align-items:stretch}
.shop-thumb{
  flex-shrink:0;width:0.720rem;height:0.720rem;border-radius:var(--r-sm);
  background:linear-gradient(145deg,#fff3ec,#ffe4d3);
  display:flex;align-items:center;justify-content:center;color:var(--brand);
  position:relative;
}
.shop-thumb .ic{font-size:0.350rem;line-height:1}
.shop-thumb .st-flag{
  position:absolute;left:0.060rem;top:0.060rem;
  font-size:0.120rem;font-weight:700;color:#fff;
  background:rgba(241,85,0,.92);border-radius:0.040rem;padding:0.010rem 0.050rem;
}
.shop-info{flex:1;min-width:0;display:flex;flex-direction:column}
.shop-tags{display:flex;flex-wrap:wrap;gap:0.050rem;margin-top:0.070rem}
.shop-tag{font-size:0.130rem;color:var(--ink-2);background:var(--bg);padding:0.030rem 0.080rem;border-radius:0.060rem}
.shop-tag.hl{color:var(--brand);background:var(--brand-soft);font-weight:600}
.shop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:0.070rem}
.price-img{height:0.280rem;width:auto;display:inline-block;vertical-align:middle}
/* [2026-08-17] 价格下移与微信咨询按钮垂直居中对齐（canvas 文字 baseline 偏上） */
.shop-price{padding-top:0.050rem;display:inline-block}

.shop-cta{
  display:inline-flex;align-items:center;gap:0.040rem;
  font-size:0.140rem;font-weight:600;color:#fff;
  background:var(--brand);
  min-height:0.320rem;padding:0.060rem 0.130rem;border-radius:0.160rem;
  box-shadow:0 0.020rem 0.060rem rgba(241,85,0,.16);
}
.shop-cta:active{opacity:.85}
.shop-cta .ic{font-size:0.140rem}
/* [2026-08-17] 同步首页：微信咨询图标文件引用 */
.shop-cta .ic.ic-wx{width:0.200rem;height:0.200rem;display:block;flex-shrink:0}

/* ============ 加载更多 ============ */
.load-more{
  display:flex;align-items:center;justify-content:center;gap:0.060rem;
  padding:0.170rem 0 0.050rem;font-size:0.140rem;color:var(--ink-3);
}
.load-more .ic{font-size:0.150rem;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 筛选面板 ============ */
.mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .25s;
}
.mask.show{opacity:1;visibility:visible}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:4.300rem;z-index:80;
  background:#fff;border-radius:0.160rem 0.160rem 0 0;
  transition:transform .3s cubic-bezier(.33,1,.68,1);
  padding:0.160rem 0.140rem calc(0.160rem + env(safe-area-inset-bottom));
  max-height:78vh;overflow-y:auto;
}
.sheet.show{transform:translateX(-50%) translateY(0)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.120rem}
.sheet-head b{font-size:0.170rem}
.sheet-head .sh-clear{font-size:0.140rem;color:var(--ink-3)}
.sheet-head .sh-close{font-size:0.190rem;color:var(--ink-3)}
.f-group + .f-group{margin-top:0.140rem}
.f-group .fg-title{font-size:0.140rem;font-weight:600;margin-bottom:0.090rem;color:var(--ink)}
.fg-ops{display:flex;flex-wrap:wrap;gap:0.080rem}
.fg-op{
  font-size:0.140rem;color:var(--ink-2);background:var(--bg);
  padding:0.060rem 0.140rem;border-radius:0.160rem;transition:all .15s;
}
.fg-op.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.fg-price{display:flex;align-items:center;gap:0.080rem}
.fg-price input{
  flex:1;border:0.010rem solid var(--line);border-radius:0.080rem;outline:none;
  padding:0.090rem 0.110rem;font-size:0.140rem;font-family:inherit;background:var(--bg);
}
.sheet-foot{display:flex;gap:0.100rem;margin-top:0.180rem}
.sheet-foot .btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  font-size:0.140rem;font-weight:600;border:none;cursor:pointer;
  border-radius:0.200rem;padding:0.110rem 0;
}
.btn-outline{background:#fff;color:var(--brand);border:0.010rem solid var(--brand)!important}

/* ============ 特殊标签体系（丰富度） ============ */
.shop-tag.hot{color:#e60012;background:#fdecec;font-weight:700}
.shop-tag.urgent{color:#f15500;background:#fff1e8;font-weight:700}
.shop-tag.cheap{color:#2fa86e;background:#e8f7f0;font-weight:700}
.shop-tag.cert{color:#537ada;background:#eef2fc;font-weight:700}
.shop-tag.new{color:#7a5af0;background:#f0ecfe;font-weight:700}
.shop-tag.gold{color:#c98a1b;background:#fbf4e3;font-weight:700}
/* 带图标的特殊标签 */
.shop-tag .ic{font-size:0.130rem;vertical-align:0.000rem;margin-right:0.030rem}
/* 验店认证标 */
.shop-verify{
  display:inline-flex;align-items:center;gap:0.020rem;
  font-size:0.120rem;font-weight:700;color:#537ada;
  background:#eef2fc;border-radius:0.040rem;padding:0.010rem 0.050rem;
  margin-left:auto;
}

/* 卡片特色底纹（隔张不同，打破重复感） */
.shop-card.feat1 .shop-thumb{border:0.020rem solid #ffe4d3}
.shop-card.feat2 .shop-thumb{border:0.020rem solid #dbe4fa}
.shop-card .shop-thumb img{border-radius:var(--r-sm)}
/* 销量/热度角标 */

/* ============ 社会证明 + 限时倒计时 + 点缀 ============ */
.shop-foot-l{display:flex;flex-direction:column;gap:0.030rem}
.shop-sold{
  display:inline-flex;align-items:center;gap:0.030rem;
  font-size:0.130rem;color:var(--ink-3);font-weight:600;
}


/* 限时优惠倒计时条 */
.shop-flash{
  display:inline-flex;align-items:center;gap:0.040rem;
  font-size:0.120rem;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#ff7a2e,#f15500);
  border-radius:0.040rem;padding:0.020rem 0.070rem;margin-bottom:0.060rem;
}
.shop-flash .ic{font-size:0.130rem}
.shop-flash .cd{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.0.050rem}
/* 区块标题点缀 */
.list-head .lh-title .lh-ic{
  width:0.220rem;height:0.220rem;border-radius:0.060rem;
  background:var(--brand-soft);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.140rem;
}
/* [2026-08-17] 淘宝列表标题图标：官方淘宝 logo（tb.svg，2176x1024 横向）替代通用商店图标 */
.list-head .lh-title .lh-tb{height:0.180rem;width:auto;flex-shrink:0;display:inline-block}
/* 标签间点缀点 */
.shop-tag + .shop-tag::before{
  content:"";width:0.020rem;height:0.020rem;border-radius:50%;
  background:var(--ink-3);display:inline-block;vertical-align:middle;margin-right:0.050rem;
}

.shop-sales{
  position:absolute;left:0.040rem;bottom:0.040rem;
  font-size:0.120rem;color:#fff;background:rgba(0,0,0,.45);
  border-radius:0.040rem;padding:0.010rem 0.040rem;
}
/* [2026-08-17] 限时优惠条（对齐 _refactor/taobao.html 静态页）：时钟图标 + 倒计时，放店铺信息顶部 */
.shop-flash{
  display:inline-flex;align-items:center;gap:0.040rem;
  font-size:0.100rem;font-weight:700;color:#fff;letter-spacing:0.010rem;
  background:linear-gradient(90deg,#ff7a2e,#f15500);
  border-radius:0.040rem;padding:0.020rem 0.070rem;margin-bottom:0.060rem;
}
.shop-flash .ic{font-size:0.110rem}
.shop-flash .cd{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.0.005rem}
.shop-thumb{position:relative}