/* ================= 移动端商城全局样式 ================= */
:root {
    --bg: #f0f2f5;
    --card-bg: #ffffff;
    --text: #1a1a2e;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --primary: #ff6b6b;
    --primary-light: #fff0f0;
    --accent: #f59e0b;
    --accent-light: #fffbeb;
    --border: #e5e7eb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --nav-height: 60px;
    --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: var(--font-sans);
    background: #e8eaef;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.app-container {
    max-width: 430px;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--bg);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.15);
}

@media (min-width: 431px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .app-container {
        border-radius: 28px;
        min-height: 90vh;
        max-height: 95vh;
        overflow-y: auto;
    }
}

.page { display: none; flex:1; flex-direction:column; padding-bottom: calc(var(--nav-height) + 8px); }
.page.active { display: flex; }

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    position: sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid var(--border);
}
.shop-name { font-size:15px; font-weight:700; }
.mall-name { font-size:13px; font-weight:500; color:var(--primary); background:var(--primary-light); padding:5px 12px; border-radius:20px; }

.carousel-wrapper {
    margin:12px 14px 0;
    border-radius: var(--radius-lg);
    overflow:hidden;
    position:relative;
    aspect-ratio:16/9;
    background:#e2e8f0;
    box-shadow:var(--shadow);
}
.carousel-track { display:flex; height:100%; transition:transform 0.5s; }
.carousel-slide { flex:0 0 100%; height:100%; position:relative; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.slide-content { position:relative; z-index:1; text-align:center; padding:20px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.3); }
.slide-title { font-size:20px; font-weight:700; }
.carousel-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
.dot.active { background:#fff; width:20px; border-radius:10px; }

.notice-bar {
    margin:10px 14px 0;
    background:var(--card-bg);
    border-radius:30px;
    padding:9px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.notice-badge {
    flex-shrink:0;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#7c4a00;
    font-size:11px;
    font-weight:700;
    padding:4px 12px;
    border-radius:20px;
    white-space:nowrap;
}
.notice-text {
    flex:1;
    font-size:13px;
    color:var(--text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.quick-icons {
    margin:16px 14px 0;
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    padding:16px 8px 12px;
    box-shadow:var(--shadow-sm);
    display:flex;
    justify-content:space-around;
}
.quick-icon-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    cursor:pointer;
    flex:1;
    transition: transform 0.2s;
}
.quick-icon-item:active { transform:scale(0.94); }
.quick-icon-circle {
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.quick-icon-name { font-size:11px; color:var(--text-secondary); }

.section-header { margin:18px 14px 10px; display:flex; align-items:center; gap:8px; }
.section-title { font-size:17px; font-weight:700; }
.section-badge { font-size:10px; font-weight:600; background:linear-gradient(135deg,#ff6b6b,#ff4444); color:#fff; padding:3px 9px; border-radius:10px; animation:pulse-badge 2s infinite; }
@keyframes pulse-badge { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

.product-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:0 14px;
}
.product-card {
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:0.2s;
    aspect-ratio:0.85;
    display:flex;
    flex-direction:column;
}
.product-card:active { transform:scale(0.97); }
.card-img {
    flex:0 0 60%;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:32px;
    font-weight:700;
}
.card-body { padding:10px 12px; display:flex; flex-direction:column; justify-content:space-between; }
.card-title { font-size:13px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.card-price-row { display:flex; align-items:center; gap:6px; }
.card-price { font-size:18px; font-weight:700; color:#ff4444; }
.card-price .unit { font-size:12px; }
.card-original { font-size:11px; color:#b0b5be; text-decoration:line-through; }
.card-tag { position:absolute; top:8px; left:8px; background:rgba(255,68,68,0.9); color:#fff; font-size:10px; font-weight:600; padding:3px 8px; border-radius:10px; }

.bottom-nav {
    position:fixed;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:430px;
    background:var(--card-bg);
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:var(--nav-height);
    border-top:1px solid var(--border);
    z-index:200;
}
.nav-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    cursor:pointer;
    color:var(--text-muted);
    font-size:10px;
    text-decoration:none;
    padding:6px 12px;
}
.nav-item.active { color:var(--primary); font-weight:600; }
.nav-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; }

/* 下单页样式 */
.order-page .product-hero {
    margin:0 14px;
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    aspect-ratio:16/10;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    color:#fff;
    background-size:cover;
}
.order-page .product-info-card { margin:12px 14px; background:#fff; border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.product-name-lg { font-size:18px; font-weight:700; }
.product-price-lg { font-size:28px; font-weight:800; color:#ff4444; }
.form-group { margin:0 14px 10px; background:#fff; border-radius:var(--radius-lg); padding:14px 16px; }
.form-label { font-size:13px; font-weight:600; display:block; margin-bottom:8px; }
.form-input { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; outline:none; }
.qty-control { display:flex; align-items:center; gap:12px; }
.qty-btn { width:36px; height:36px; border-radius:50%; border:2px solid var(--border); background:#fff; font-size:18px; cursor:pointer; }
.qty-num { font-size:20px; font-weight:700; min-width:32px; text-align:center; }
.pay-channels { display:flex; gap:10px; }
.pay-channel { flex:1; padding:12px 10px; border:2px solid var(--border); border-radius:var(--radius); text-align:center; cursor:pointer; font-size:12px; font-weight:600; }
.pay-channel.selected { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.submit-btn { display:block; width:calc(100% - 28px); margin:16px 14px; padding:14px; background:linear-gradient(135deg,#ff6b6b,#ff4444); color:#fff; border:none; border-radius:30px; font-size:16px; font-weight:700; cursor:pointer; }

/* 订单/分类/我的页面基础样式 */
.order-card, .mine-header, .mine-menu { background:#fff; border-radius:var(--radius-lg); margin:10px 14px; padding:14px; box-shadow:var(--shadow-sm); }
.order-kami { margin-top:8px; padding:8px 12px; background:#f9fafb; border-radius:var(--radius-sm); font-size:12px; border:1px dashed var(--border); }
.status-done { color:#065f46; background:#d1fae5; padding:2px 8px; border-radius:10px; font-size:11px; }
.status-pending { color:#92400e; background:#fef3c7; padding:2px 8px; border-radius:10px; font-size:11px; }
.empty-state { text-align:center; padding:50px; color:var(--text-muted); }