/* [2026-09-01] v36 from Views/Home/IndexLeTaoJia.cshtml inline <style>, moved into 2026814 dir */
/* ============================================================
   LTPhone · 首页（恢复 v5 确认版 + 融合 v6 优点）
   白底大留白 + 橙色仅点缀 + Remix Icon
   保留：金刚区彩色渐变图标、转化引导条 lead-bar
   ============================================================ */

/* ============ 顶部（白底） ============ */
.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)}

/* ============ Banner ============ */
.banner{padding:0.120rem 0.140rem 0}
.banner-box{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:2.15/1;box-shadow:var(--shadow)}
.banner-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.33,1,.68,1)}
.banner-slide{flex:0 0 100%;height:100%}
.banner-slide img{width:100%;height:100%;object-fit:cover}
.banner-dots{position:absolute;left:50%;bottom:0.080rem;transform:translateX(-50%);display:flex;gap:0.040rem}
.banner-dots i{width:0.050rem;height:0.050rem;border-radius:0.030rem;background:rgba(255,255,255,.55);transition:all .3s ease-out}
.banner-dots i.on{width:0.130rem;background:#fff}

/* ============ 金刚区（[2026-08-28] 图标更换为定制 SVG：品牌色方块 + 单字，
       文件 Content/2026814/image/ico-*.svg；原 g2~g8 彩色渐变底不再使用） ============ */
.grid{
  margin:0.120rem 0.140rem 0;
  background:var(--card);border-radius:var(--r);
  padding:0.140rem 0.040rem 0.100rem;box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(4,1fr);row-gap:0.140rem;
}
.grid-item{display:flex;flex-direction:column;align-items:center;gap:0.070rem;font-size:0.130rem;color:var(--ink-2)}
.grid-item:active{opacity:.7}
.grid-ic{
  width:0.420rem;height:0.420rem;border-radius:0.120rem;
}
.grid-ic img{width:100%;height:100%;display:block;border-radius:0.120rem}
.grid-item:active .grid-ic{transform:scale(.94)}
.gi-tb img{filter:drop-shadow(0 0.030rem 0.080rem rgba(255,106,0,.25))}
.gi-tm img{filter:drop-shadow(0 0.030rem 0.080rem rgba(255,0,54,.22))}
.gi-sell img{filter:drop-shadow(0 0.030rem 0.080rem rgba(241,85,0,.24))}
.gi-buy img{filter:drop-shadow(0 0.030rem 0.080rem rgba(59,111,224,.24))}
.gi-value img{filter:drop-shadow(0 0.030rem 0.080rem rgba(201,168,106,.28))}
.gi-join img{filter:drop-shadow(0 0.030rem 0.080rem rgba(30,167,93,.24))}
.gi-flow img{filter:drop-shadow(0 0.030rem 0.080rem rgba(14,151,173,.24))}
/* [2026-09-02] v54 帮助中心换紫色调，投影色同步；图标底色由 ico-help.svg 渐变控制 */
.gi-help img{filter:drop-shadow(0 0.030rem 0.080rem rgba(91,75,214,.26))}
/* [2026-09-02] v54 第二排四个次级入口（估价/入驻/流程/帮助）图标缩小一档，与上排主入口作尺寸区分 */
.gi-value,.gi-join,.gi-flow,.gi-help{width:0.360rem;height:0.360rem;border-radius:0.104rem}
.gi-value img,.gi-join img,.gi-flow img,.gi-help img{border-radius:0.104rem}
.grid-item.hot{position:relative}
.grid-item.hot::after{
  content:"热";position:absolute;top:-0.020rem;right:20%;
  font-size:0.120rem;color:#fff;background:var(--brand);
  border-radius:0.070rem;padding:0 0.050rem;line-height:0.140rem;height:0.140rem;
}

/* ============ 平台数据 ============ */
.data-strip{
  display:flex;align-items:center;margin:0.120rem 0.140rem 0;padding:0.110rem 0;
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
}
.data-strip b{color:var(--brand);font-size:0.170rem;font-weight:800;font-variant-numeric:tabular-nums}
.data-strip b em{font-style:normal;font-size:0.120rem;font-weight:600}
.data-strip span{display:block;font-size:0.130rem;color:var(--ink-3);margin-top:0.020rem}
.ds{flex:1;text-align:center}
.ds + .ds{border-left:0.010rem solid var(--line)}

/* ============ 信任背书（图标+标题一行、说明一行） ============ */
.trust{
  display:flex;margin:0.120rem 0.140rem 0;
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
}
.trust-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0.120rem 0.040rem;text-align:center;
}
.trust-item + .trust-item{border-left:0.010rem dashed var(--line)}
/* [2026-08-17] 信任背书图标 v2：Phosphor Icons（MIT 开源，256 viewBox）+ 浅橙圆形容器，iconfont 质感 */
.trust-title{display:flex;align-items:center;justify-content:center;gap:0.060rem;font-size:0.140rem;font-weight:700;color:var(--ink);white-space:nowrap}
.trust-title .trust-ico{
  width:0.340rem;height:0.340rem;border-radius:50%;
  background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);flex-shrink:0;
}
/* [2026-08-28] 信任背书图标改文件引用（trust-*.svg，img 需 display:block 对齐） */
.trust-title .trust-ico img{width:0.200rem;height:0.200rem;display:block}
.trust-desc{font-size:0.130rem;color:var(--ink-3);margin-top:0.050rem;white-space:nowrap}

/* ============ 转化引导条（v6 保留项） ============ */
.lead-bar{
  margin:0.120rem 0.140rem 0;border-radius:var(--r);padding:0.140rem;
  background:linear-gradient(135deg,#1c2333,#2b3550);
  display:flex;align-items:center;gap:0.120rem;position:relative;overflow:hidden;
}
/* [2026-08-28] 背景橙色球漂移动画：大球右上缓漂缩放，小球左下反向漂移 */
.lead-bar::after{
  content:"";position:absolute;right:-0.200rem;top:-0.300rem;
  width:1.000rem;height:1.000rem;border-radius:50%;
  background:rgba(255,122,46,.18);
  animation:leadBallA 7s ease-in-out infinite alternate;
}
.lead-bar::before{
  content:"";position:absolute;left:-0.180rem;bottom:-0.420rem;
  width:0.620rem;height:0.620rem;border-radius:50%;
  background:rgba(255,122,46,.12);
  animation:leadBallB 9s ease-in-out infinite alternate;
}
@keyframes leadBallA{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-0.420rem,0.300rem) scale(1.12)}
  100%{transform:translate(-0.760rem,-0.180rem) scale(.92)}
}
@keyframes leadBallB{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(0.300rem,-0.260rem) scale(1.18)}
  100%{transform:translate(0.620rem,0.120rem) scale(.90)}
}
.lead-info{flex:1;position:relative;z-index:1}
.lead-info b{display:block;color:#fff;font-size:0.150rem}
.lead-info span{display:block;color:rgba(255,255,255,.65);font-size:0.130rem;margin-top:0.040rem}
.lead-btn{
  flex-shrink:0;position:relative;z-index:1;
  background:linear-gradient(135deg,#ff7a2e,#f15500);color:#fff;
  font-size:0.140rem;font-weight:700;padding:0.100rem 0.170rem;border-radius:0.210rem;
  box-shadow:0 0.040rem 0.120rem rgba(241,85,0,.35);
}
.lead-btn .ic{font-size:0.150rem;margin-right:0.030rem}
/* [2026-09-02] v50d 求购引导条按用户要求移除，.buy-lead 样式块同步删除 */

/* ============ 区块标题 ============ */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0.180rem 0.140rem 0.100rem}
.sec-more:active{color:var(--brand)}

/* ============ 平台资讯 Tab ============ */
.news-card{margin:0 0.140rem;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.news-tabs{display:flex;border-bottom:0.010rem solid var(--line)}
.news-tab{flex:1;text-align:center;padding:0.120rem 0;font-size:0.140rem;color:var(--ink-2);position:relative;cursor:pointer}
.news-tab.on{color:var(--ink)}
.news-tab.on::after{content:"";position:absolute;left:50%;bottom:-0.010rem;transform:translateX(-50%);width:0.180rem;height:0.025rem;border-radius:0.020rem;background:var(--brand)}
.news-body{padding:0.020rem 0.140rem}
.news-list{display:none}
.news-list.on{display:block;animation:fadeUp .3s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(0.050rem)}to{opacity:1;transform:none}}
.news-li{display:flex;align-items:center;gap:0.100rem;padding:0.115rem 0;border-bottom:0.020rem dashed var(--line);font-size:0.140rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.news-li:last-child{border-bottom:none}
.news-li .n-tag{flex-shrink:0;font-size:0.120rem;padding:0.025rem 0.070rem;border-radius:0.050rem;background:var(--brand-soft);color:var(--brand)}
.news-li:nth-child(2) .n-tag{background:var(--blue-soft);color:var(--blue)}
.news-li .n-txt{flex:1;overflow:hidden;text-overflow:ellipsis}
.news-li .n-date{flex-shrink:0;font-size:0.130rem;color:var(--ink-3)}

/* ============ 精选专题（横滑） ============ */
/* [2026-08-31] 精选专题改动态数据（对接 ViewBag.recommend）：封面图直接铺满，
   删除写死的 t1/t2/t3 渐变底、.ph 占位图标、.topic-badge（热卖/天猫/捡漏角标）、.topic-meta（写死的店铺数/价格） */
.topic-scroll{display:flex;gap:0.100rem;overflow-x:auto;margin:0 0.140rem;padding:0 0 0.040rem;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topic-scroll::-webkit-scrollbar{display:none}
.topic-scroll .topic:last-child{margin-right:0.140rem}
.topic{
  flex-shrink:0;width:1.540rem;scroll-snap-align:start;background:var(--card);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s;
}
.topic:active{transform:scale(.97)}
.topic-img{
  aspect-ratio:4/3;height:1.160rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#fff3ec 0%,#ffe1cc 100%);/* cover 为空时的兜底底色 */
}
.topic-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.topic-body{padding:0.080rem 0.090rem 0.100rem}
.topic-title{font-size:0.140rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ 为你推荐（横向卡片） ============ */
.shop-list{padding:0 0.140rem;display:flex;flex-direction:column;gap:0.100rem}
/* [2026-08-17] shop-card 改垂直布局：第一行 标题+徽章，第二行 缩略图+属性 */
.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] 第一行：徽章 + 标题（最多2行），徽章顶部对齐第一行开头。
   ⚠️ 不能用 -webkit-box 包裹 img（vertical-align 失效），徽章必须作为 flex 兄弟项 */
.shop-top{display:flex;align-items:flex-start}
/* [2026-08-17] shop-badge 在标题第一行开头，margin-top 让徽章中心对齐第一行文字中心 */
.shop-badge{flex-shrink:0;height:0.160rem;width:auto;display:inline-block;margin-top:0.025rem;margin-right:0.040rem}
/* [2026-08-17] 标题单行省略（用户要求只保留一行），徽章在行首 */
.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] 第二行：类目缩略图 + 店铺属性（tags/foot）并排 */
.shop-mid{display:flex;gap:0.120rem;align-items:stretch}
.shop-thumb{
  position:relative;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);
}
.shop-thumb.tmall{background:linear-gradient(145deg,#eef2fc,#dbe4fa);color:var(--blue)}
.shop-thumb .ic{font-size:0.350rem;line-height:1}
/* [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.tmall{background:linear-gradient(90deg,#ff5a6e,#e60039)}
.shop-flash .ic{font-size:0.110rem}
.shop-flash .cd{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.0.005rem}
.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}
/* [2026-08-17] 价格块下移与咨询按钮垂直居中对齐（canvas 文字 baseline 偏上，padding-top 微调） */
.shop-price{display:flex;align-items:flex-end;padding-top:0.050rem}
.price-img{height:0.280rem;width:auto;display:inline-block;vertical-align:middle}
.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}
/* [2026-08-17] 天猫卡片咨询按钮换天猫红（#FF0036 系） */
.shop-cta.cta-tmall{background:linear-gradient(145deg,#FF5A6E,#E60039);box-shadow:0 0.020rem 0.060rem rgba(230,0,57,.18)}
.shop-cta .ic{font-size:0.140rem}
/* [2026-08-17] 微信咨询图标改为文件引用：wx.svg，img 需 display:block 对齐 */
.shop-cta .ic.ic-wx{width:0.200rem;height:0.200rem;display:block;flex-shrink:0}

/* ============ 资讯 ============ */
.article-list{margin:0 0.140rem;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0.020rem 0.140rem}
.article-li{display:flex;align-items:center;gap:0.110rem;padding:0.125rem 0;border-bottom:0.020rem dashed var(--line);font-size:0.140rem}
.article-li:last-child{border-bottom:none}
.article-li .a-dot{width:0.050rem;height:0.050rem;border-radius:50%;background:var(--brand);flex-shrink:0}
.article-li .a-txt{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-li .a-time{flex-shrink:0;font-size:0.130rem;color:var(--ink-3)}

/* [2026-09-02] v46 数据条单位字同级："年"与"万"同尺寸（0.170rem），避免"8年"整块显小 */
.data-strip b em.yr{font-size:0.170rem;font-weight:800}