/*
Theme Name: Metrabest
Author: Metrabest Team
Description: Final Compact Version - Fixed Spacing & Typography.
Version: 3.5.0
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ---------- 基础字号与重置 ---------- */
.mb-main * { box-sizing: border-box; }
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    margin: 0; padding: 0; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; 
    background: #ffffff; 
    font-size: 16px; 
    line-height: 1.5;
}

/* ---------- 核心间距控制 (减少50%) ---------- */
.mb-section { 
    padding: 20px 32px; /* 原 40px/50px 减至 20px */
    max-width: 1440px; 
    margin: 0 auto; 
    width: 100%; 
}
.mb-section__hdr { 
    display: flex; 
    align-items: flex-end; 
    justify-content: space-between; 
    margin-bottom: 10px; /* 标题与内容的紧凑间距 */
    flex-wrap: wrap; 
    gap: 8px; 
}

/* ---------- Hero Section (完全复刻附件布局) ---------- */
.mb-hero { position: relative; min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ffffff; overflow: hidden; padding: 20px 32px; }
.mb-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; display: flex; flex-direction: column; align-items: center; gap: 0; }

/* 关键修复：Hero 商品横向排列 */
.mb-hero__showcase { width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.mb-hero__cards { display: flex; flex-direction: row !important; align-items: center; justify-content: center; gap: 16px; width: 100%; }

/* 漂浮卡片 */
.mb-pcard { background: #ffffff; border: 1px solid #F1F5F9; border-radius: 16px; padding: 20px 16px; width: 180px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 4px 24px rgba(79, 70, 229, 0.07); cursor: pointer; transition: all 0.3s ease; opacity: 0; transform: translateY(24px) scale(0.96); }
.mb-pcard--visible { opacity: 1; transform: translateY(0) scale(1); }
.mb-pcard--exit { opacity: 0; transform: translateY(-20px) scale(0.96); }
.mb-pcard__brand { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #4F46E5; }
.mb-pcard__name { font-size: 14px; font-weight: 700; color: #0F172A; text-align: center; line-height: 1.35; }
.mb-pcard__price { font-size: 16px; font-weight: 800; color: #0F172A; font-style: italic; }

/* ---------- 进度条组件 (...-...) ---------- */
.mb-hero__progress-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mb-hero__cat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: #CBD5E1; min-height: 18px; text-align: center; }
.mb-hero__cat-label--active { color: #4F46E5; }
.mb-hero__dots { display: flex; align-items: center; gap: 6px; }
.mb-dot { height: 3px; border-radius: 2px; background: #E2E8F0; overflow: hidden; cursor: pointer; transition: width 0.3s ease; position: relative; }
.mb-dot--inactive { width: 20px; }
.mb-dot--active { width: 60px; }
.mb-dot__fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #4F46E5; border-radius: 2px; }

/* ---------- 其他板块组件 ---------- */
.mb-section__title { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; font-style: italic; color: #0F172A; line-height: 1; }
.mb-cat-card { width: 200px; height: 300px; flex-shrink: 0; background: #ffffff; border: 1px solid #F1F5F9; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; transition: all 0.25s ease; cursor: pointer; }
.mb-prod-card { background: #ffffff; border: 1px solid #F8FAFC; border-radius: 14px; padding: 18px; transition: all 0.25s ease; cursor: pointer; }
.mb-prod-card:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,0.08); }

/* ---------- Footer ---------- */
.mb-footer { background: #0F172A; padding: 32px 32px 24px; margin-top: 20px; }
.mb-footer__grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 20px; }

.bold-icon { stroke-width: 2.2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.no-scrollbar::-webkit-scrollbar { display: none; }