/* ============================================================================
 * 站点顶栏与页脚（前台三页共用：index.php / extend/appView.php / extend/marketView.php）
 * ----------------------------------------------------------------------------
 * 只放「顶栏 + 页脚」这两块，**不含任何 reset**，所以首页（加载 Codebase/Bootstrap）
 * 也能安全引用。
 *
 * 历史坑（2026-09-16 统一）：这三块原来是各自写的两份 —— 首页 .home-header/-footer、
 * 详情页 .store-header/-footer，数值分别漂移成了 logo 34 vs 32px、顶栏 61 vs 57px、
 * 页脚 47 vs 70px、阴影 0.08 vs 0.05、字号 12 vs 13px，切页面时头部和底部会抖一下。
 * 现在都以本文件为准，各页只保留自己独有的子元素样式（首页的品牌名/登录按钮、
 * 详情页的「返回首页」链接）。
 *
 * 2026-09-25 宽屏改版：**站点内容宽度统一取 `--site-max-width`**（顶栏 / 页脚 / 首页主容器 /
 * 详情页容器都引它），从 1200 提到 1680 —— ≤1680 的屏幕基本是满宽，更大屏两侧留白不超过 120px。
 * 以后要调宽窄只改这一个变量；各页不要再各写一个 max-width。
 * ========================================================================== */

:root {
    /* 站点内容宽度（前台三页共用） */
    --site-max-width: 1680px;
}

.site-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.site-header-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 12px 24px;
    /* 固定高度：不让内部元素（logo / 登录按钮 / 返回链接）的高度决定顶栏高度 */
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header-logo {
    height: 34px;
    /* 详情页的 logo 包在 <a> 里，inline 图片的基线间隙会把顶栏撑高几个像素 */
    display: block;
}

.site-footer {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 14px 24px;
}

.site-footer-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #a3a3a3;
    text-align: center;
}

.site-footer a {
    color: #737373;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: #404040;
}

@media (max-width: 576px) {
    .site-header-inner {
        padding: 10px 16px;
    }

    .site-header-logo {
        height: 28px;
    }

    .site-footer {
        padding: 10px 16px;
    }

    .site-footer-inner {
        font-size: 11px;
        gap: 6px;
    }
}