/* ===================== */
/* 998雪糕网 - 移动端卡片样式 */
/* 京东风格 - 2026-04-14 */
/* ===================== */

/* 商品列表网格 */
.prolist ul {
 display: grid !important;
 grid-template-columns: repeat(2, 1fr) !important;
 gap: 12px !important;
 padding: 12px !important;
 background: #f5f5f5;
}

.prolist ul li {
 width: 100% !important;
 float: none !important;
 margin: 0 !important;
 background: #fff;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 商品图片 */
.prolist ul li .img {
 position: relative;
 width: 100%;
 padding-bottom: 100%;
 background: #f8f9fa;
}

.prolist ul li .img img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* 标签 */
.prolist ul li .img::before {
 content: "热销";
 position: absolute;
 top: 8px;
 left: 8px;
 background: linear-gradient(135deg, #ff4757, #ff6348);
 color: #fff;
 font-size: 11px;
 padding: 3px 8px;
 border-radius: 10px;
 z-index: 2;
}

.prolist ul li:nth-child(2) .img::before { content: "新品"; background: linear-gradient(135deg, #2ed573, #7bed9f); }
.prolist ul li:nth-child(3) .img::before { content: "特惠"; background: linear-gradient(135deg, #ffa502, #ffc107); }
.prolist ul li:nth-child(n+4) .img::before { display: none; }

/* 商品信息 */
.prolist ul li .info { padding: 12px; }
.prolist ul li .info h3 {
 font-size: 13px;
 color: #333;
 line-height: 1.4;
 height: 36px;
 overflow: hidden;
 margin-bottom: 8px;
}

.prolist ul li .info .price strong {
 font-size: 18px;
 color: #ff4757;
 font-weight: bold;
}

.prolist ul li .info .price strong::before {
 content: "¥";
 font-size: 12px;
}

/* 底部固定导航 */
.jd-bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: #fff;
 display: flex;
 justify-content: space-around;
 padding: 6px 0 10px;
 box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
 z-index: 999;
 border-top: 1px solid #f1f2f6;
}

.jd-bottom-nav .nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 color: #999;
 text-decoration: none;
 flex: 1;
}

.jd-bottom-nav .nav-item.active { color: #ff6b6b; }

.jd-bottom-nav .nav-icon {
 width: 22px;
 height: 22px;
 margin-bottom: 3px;
}

.jd-bottom-nav .nav-icon-center {
 width: 44px;
 height: 44px;
 background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
 border-radius: 50%;
 margin-top: -22px;
 border: 3px solid #fff;
 box-shadow: 0 4px 15px rgba(255,107,107,0.4);
}

.jd-bottom-nav .nav-text { font-size: 10px; }

.bottom-placeholder { height: 65px; }