/* myshop.html · 浅灰底白卡风格（空白区域灰色，非全黑） */

/* ===== 覆盖 theme.css：body 外围灰色，内容区保持深色 ===== */
body{
  background:#f5f5f5 !important;
  color:#333;
}
.main{
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(245,196,81,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(91,140,255,.12), transparent 60%),
    linear-gradient(180deg,#070b16 0%, #0b1222 55%, #070b16 100%);
  background-attachment:fixed;
}

/* ===== Hero 区（满宽、与内容区同色融合 + 网格光晕，消除色块割裂与空旷感） ===== */
.shop-hero{
  position:relative; overflow:hidden;
  margin:0; padding:34px 20px 28px;
  text-align:center;
  background:
    radial-gradient(380px 200px at 50% -8%, rgba(245,196,81,.20), transparent 72%),
    radial-gradient(620px 280px at 50% 118%, rgba(91,140,255,.12), transparent 72%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.shop-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(330px 200px at 50% 42%, #000 0%, transparent 78%);
  mask-image:radial-gradient(330px 200px at 50% 42%, #000 0%, transparent 78%);
}
.shop-hero .logo{ width:76px; height:76px; margin:0 auto 14px; display:block;
  filter:drop-shadow(0 10px 26px rgba(245,196,81,.35)); position:relative; z-index:1; }
.shop-hero h1{ font-size:25px; font-weight:900; letter-spacing:1.5px;
  color:#fff; position:relative; z-index:1;
  text-shadow:0 2px 20px rgba(245,196,81,.18); }
.shop-hero p{ margin-top:9px; font-size:13.5px; color:#9aa6c0; position:relative; z-index:1; letter-spacing:.5px; }

/* 信任承诺徽章 */
.trust-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; position:relative; z-index:1; }
.trust-badges .tb{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px;
  font-size:14px; font-weight:800; color:#2dd4a7;
  background:rgba(45,212,167,.10); border:1px solid rgba(45,212,167,.25);
  white-space:nowrap; max-width:100%;
}
.trust-badges .tb svg{ width:16px; height:16px; flex-shrink:0; }
/* 单个醒目承诺徽章（金色高亮 + 光晕） */
.trust-badges .tb-strong{
  font-size:17px; font-weight:900; letter-spacing:.5px;
  padding:11px 26px; color:#ffd166;
  background:linear-gradient(135deg, rgba(245,196,81,.16), rgba(245,196,81,.05));
  border:1px solid rgba(245,196,81,.45);
  box-shadow:0 0 24px rgba(245,196,81,.22), inset 0 0 18px rgba(245,196,81,.08);
}
.trust-badges .tb-strong svg{ width:20px; height:20px; }

/* ===== 区块标题 ===== */
.section-header{ display:flex; justify-content:space-between; align-items:center; margin:24px 16px 14px; }
.section-header .title{ font-size:18px; font-weight:800; letter-spacing:.5px;
  color:#e9edf6;
  display:flex; align-items:center; gap:10px; }
.section-header .title::before{ content:""; width:4px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#f5c451,#e8b339); }
.section-header .service-tel{ font-size:12px; font-weight:800; color:#fff;
  border:none; background:linear-gradient(135deg,var(--blue),#4878e0);
  padding:6px 14px; border-radius:999px; white-space:nowrap; text-decoration:none;
  box-shadow:0 4px 12px rgba(91,140,255,.25); }

/* ===== 商品列表 · 两列网格 · 深色玻璃卡 ===== */
.list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 16px 8px; }

.item .product{ display:flex; flex-direction:column; padding:12px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(12px);
  transition:transform .14s ease, border-color .2s ease; }
.item .product:active{ transform:translateY(1px); border-color:rgba(245,196,81,.40); }
.item .product img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  background:#0e1730; margin-bottom:10px; }
/* 产品标题：完整换行显示，不再截断 */
.item .p0{ font-size:13px; font-weight:800; color:#e9edf6; line-height:1.5;
  word-break:break-word; }
.item .p2{ display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; padding-top:10px; }
.item .p2 span:first-child{ color:#ffd166; font-weight:900; font-size:17px;
  text-shadow:0 0 12px rgba(255,209,102,.25); }
.item .p2 span:nth-child(2){ color:#6b7793; font-size:11px; }
.item .p3{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:8px; }
.item .p3 span:first-child{
  font-size:11px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#2dd4a7,#22b385);
  padding:3px 10px; border-radius:6px;
}
.item .p3 span:nth-child(2){ flex-shrink:0; padding:4px 14px; border-radius:999px;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#5b8cff,#4878e0);
  border:none; box-shadow:0 3px 10px rgba(91,140,255,.28); }

/* ===== 推荐大卡（横向，独占整行）· 深色玻璃 ===== */
.list .item-hero{ grid-column:1 / -1; }
.item-hero .hero-inner{ display:flex; align-items:center; gap:14px; padding:16px;
  text-decoration:none; color:inherit; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.55); }
.item-hero .hero-img{ width:38%; max-width:170px; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; flex-shrink:0; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.item-hero .hero-info{ flex:1; min-width:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; }
.item-hero .hero-badge{ display:inline-block; background:linear-gradient(90deg,var(--blue),#4878e0);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:1px; padding:4px 14px;
  border-radius:999px; margin-bottom:8px; box-shadow:0 3px 10px rgba(91,140,255,.35); }
.item-hero .hero-name{ font-size:16px; font-weight:800; color:#e9edf6; line-height:1.5; margin:0 0 6px;
  word-break:break-word; }
.item-hero .hero-desc{ font-size:12px; color:#9aa6c0; line-height:1.6; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-hero .hero-price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.item-hero .hero-price{ color:#ffd166; font-weight:900; font-size:24px; line-height:1;
  text-shadow:0 0 16px rgba(255,209,102,.28); }
.item-hero .hero-sales{ color:#6b7793; font-size:12px; }
.item-hero .hero-btn{ display:inline-block; background:linear-gradient(90deg,var(--blue),#4878e0);
  color:#fff; font-size:15px; font-weight:800; padding:9px 34px; border-radius:999px;
  box-shadow:0 4px 14px rgba(91,140,255,.35); letter-spacing:1px; }
.item-hero .hero-inner:active .hero-btn{ opacity:.85; }

/* ===== 功能特性展示（bg.jpg 图片） ===== */
.feature-showcase{ margin:22px 16px 0; }
.feature-showcase .feature-img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,.08); }

/* ===== 页脚 ===== */
.weui-footer{ text-align:center; color:#6b7793; font-size:12px; line-height:1.9; padding:20px 16px 6px; }
.weui-footer a{ color:#9aa6c0; text-decoration:none; }
.weui-footer .sep{ opacity:.5; }

/* ===== 小屏微调 ===== */
@media (max-width:380px){
  .item-hero .hero-img{ max-width:130px; }
  .item-hero .hero-price{ font-size:20px; }
  .item-hero .hero-btn{ padding:8px 22px; font-size:14px; }
}