/* =========================
   全局基础
   ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --header-height: 72px;
    --container-width: 1200px;

    --bg-body: #f3f4f6;
    --accent: #ff6b1a;

    --text-main: #111827;
    --text-muted: #6b7280;

    --card-bg: #ffffff;
    --border-soft: rgba(15, 23, 42, 0.06);

    /* 阴影整体调得很轻 */
    --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.1);

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 999px;

    --IconFF1: "Material Icons";
    --IconFF: var(--IconFF1);

    /* ⚠️ 先保留：避免你别的样式/脚本引用它导致报错 */
    --banner-color: #303545;
}

/* 字体引入 */
@import url("../../../assets/test/fonts/css2.css");
@import url("../../../assets/test/fonts/icon.css");

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
    color: var(--text-main);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-body);
}

/* 主体区域占满中间空间 */
#page_main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* 头部、底部不参与拉伸，只按内容高度排布 */
#site_header {
    flex-shrink: 0;
}

#site_footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* 公共宽度容器 */
.container {
    width: min(100% - 48px, var(--container-width));
    margin-inline: auto;
}

/* 通用按钮 */
.btn {
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-dark {
    background: #111827;
    color: #ffffff;
}

.btn-dark:hover {
    background: #020617;
}

/* Footer 里面的 logo 用（通用组件） */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #ffffff;
}

.logo-mark {
    font-size: 20px;
}

.logo-text {
    font-size: 18px;
}

/* =========================
   Hero 区域（保留：避免其它页面复用 hero-section 被影响）
   ========================= */
.hero-section {
    position: relative;
    padding: 24px 0 40px;
}

/* =========================
   Material Icons 映射（供整个站点用）
   ========================= */
[icon]::before,
[icon-only]::before,
[icon-after]::after {
    font-family: var(--IconFF);
    font-style: normal;
    speak: none;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* =========================
   分类区域
   ========================= */
.category-section {
    margin-top: 32px;
    margin-bottom: 32px;
}

.category-section .section-header {
    margin-bottom: 16px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.category-card {
    padding: 18px 10px;
    text-align: center;
    border-radius: var(--radius-md);
    background: #ffffff;
    border: 1px solid var(--border-soft);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    font-size: 13px;
    color: #111827;
}

/* =========================
   活动推荐
   ========================= */
.news-section {
    background: #f3f4f6;
    padding: 32px 0 40px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
}

.news-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.news-info {
    padding: 12px 14px 14px;
}

.news-info h4 {
    margin: 0 0 6px;
    font-size: 14px;
}

.news-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* =========================
   你原本的全局 nav 宽度覆盖（保留）
   ========================= */
#global_nav > .inner.container,
#main_nav  > .inner.container {
    width: min(1440px, calc(100% - 80px)); /* 左右各 40px */
    margin-inline: auto;
}

/* =========================
   Country modal overlay（保留）
   ========================= */
.cm-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

.cm-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   响应式（保留你原本的布局收缩逻辑）
   ========================= */
@media (max-width: 1024px) {
    .offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: 16px;
    }

    .exclusive-offers {
        margin-top: 12px;
    }

    .offer-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}