/* ===================================
   经理云官网 - 老浏览器兼容层
   ===================================
   背景（2026-10-30 收银机 hdx065 实测，非推测）：
   收银机系统浏览器 UA = Chrome/11.0.696.34（2011 年引擎）。设备端实测结果：
     - CSS 变量 var() 不生效：color:var(--primary-color) 计算值回退成 rgb(0,0,0)
       => 白底白字，「登录」「微信平台」按钮视觉消失、hero 按钮变成白色空块
     - display: grid 不生效：计算 display 回退成 block，多列布局塌成单列
     - flex 的 gap 不生效：菜单项之间无间距，挤成一坨纯文字
     - @supports 完全不被解析（SUPPORTS_parsed=false），故本层不能用条件规则
     - 箭头函数 / let / const 均不支持，main.js 会整文件语法报错（已单独改写为 ES5）

   本层的实现手法（关键：不依赖 @supports，对所有浏览器无条件生效）：
     1) grid 降级用「重复声明」：
            display: flex;      <- 老浏览器只认这条
            display: grid;      <- 现代浏览器认这条并覆盖前者
        Chrome 11 解析到 display:grid 会当作无效值丢弃整条声明，于是保留 flex；
        现代浏览器两条都认，后一条覆盖前一条，网格布局完全不受影响。
     2) 列宽用 flex 百分比表达（关键：不能用 width）：
            flex: 1 1 50%;
        - 老浏览器：容器已降级为 flex，flex-basis 生效，模拟原 grid 列宽；
        - 现代浏览器：容器仍是 grid，grid item 不是 flex item，flex 属性被忽略，
          子项宽度由 grid-template-columns(1fr) 决定，不受百分比约束。
        ⚠️ 曾用 width:50% 导致现代浏览器卡片被压成半宽（grid 下 width 同样约束
           grid item），已废弃；padding/margin 同理会压缩 grid item 内容区，
           故本层不设 padding/margin，间距统一由 grid 的 gap 提供。
     3) gap 降级用 margin：老浏览器不认 gap，改用子项 margin 制造间距。
     4) var() 降级在 main.css 内已完成（字面量在前、var() 在后），本文件不重复处理。

   加载顺序：在 main.css 之后加载。
   =================================== */

/* ===================================
   一、导航栏（本次故障的主体）
   =================================== */

/* 老浏览器不认 gap，菜单项补左间距 */
.navbar-menu > a + a {
    margin-left: 2rem;
}

.navbar-actions > a + a {
    margin-left: 1rem;
}

/* 老浏览器不认 gap：汉堡菜单三根线的间距 */
.navbar-toggle > span + span {
    margin-top: 5px;
}

/* 老浏览器无 backdrop-filter，导航栏需不透明底色，否则内容会透出叠字 */
.navbar {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.98);
}

/* 老浏览器不认 gap：hero 按钮间距 */
.hero-buttons > a + a,
.hero-buttons > button + button {
    margin-left: 1rem;
}

/* ===================================
   二、grid -> flex 降级
   =================================== */

/* --- 三列 --- */
.features-grid,
.product-features,
.partner-benefit {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

/* --- 二列 --- */
.products-grid,
.about-content,
.about-features,
.login-container {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

/* --- 四列 --- */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

/* --- 页脚 2fr 1fr 1fr 1fr --- */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

/* 老浏览器 grid 失效后，grid-template-columns 也会被丢弃，
   故用 width 百分比模拟列宽（写在 flex 生效、现代浏览器被 grid 覆盖的前提下） */
.features-grid > *,
.product-features > *,
.partner-benefit > * {
    flex: 1 1 33.33%;
    box-sizing: border-box;
}

.products-grid > *,
.about-content > *,
.about-features > *,
.login-container > * {
    flex: 1 1 50%;
    box-sizing: border-box;
}

.stats-grid > * {
    flex: 1 1 25%;
    box-sizing: border-box;
}

.footer-grid > * {
    flex: 1 1 25%;
    box-sizing: border-box;
}

.footer-grid > *:first-child {
    flex: 1 1 25%;
}

/* grid gap 用 margin 补：老浏览器 flex 布局下用子项间距模拟 */
.about-content > *,
.about-features > *,
.footer-grid > * {
    margin-bottom: 1rem;
}

/* ===================================
   三、其它 flex 容器的 gap 兜底
   =================================== */

.product-tags > span + span {
    margin-left: 0.5rem;
}

.partners-grid > * + * {
    margin-left: 3rem;
}

.about-feature > i + span {
    margin-left: 0.75rem;
}

.product-feature > i + div {
    margin-left: 0.75rem;
}

.footer-bottom > * + * {
    margin-left: 1rem;
}

.product-categories > * + * {
    margin-left: 1rem;
}

/* ===================================
   五、下载页专属布局降级
   =================================== */

/* 下载页两卡片：grid -> flex */
.download-grid {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

.download-grid > * {
    flex: 1 1 50%;
    box-sizing: border-box;
}

/* 下载页使用说明三步：grid -> flex */
.guide-steps {
    display: flex;
    flex-wrap: wrap;
    display: grid;
}

.guide-steps > * {
    flex: 1 1 33.33%;
    box-sizing: border-box;
}

.download-platforms {
    display: block;
    display: grid;
}

@media (max-width: 900px) {
    .download-grid > * {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .guide-steps > * {
        flex: 1 1 100%;
    }
}

/* ===================================
   四、响应式：窄屏单列
   =================================== */

@media (max-width: 1024px) {
    .features-grid > *,
    .product-features > *,
    .partner-benefit > *,
    .products-grid > *,
    .about-content > *,
    .about-features > *,
    .login-container > *,
    .stats-grid > *,
    .footer-grid > *,
    .footer-grid > *:first-child {
        flex: 1 1 50%;
    }
}

@media (max-width: 768px) {
    .features-grid > *,
    .product-features > *,
    .partner-benefit > *,
    .products-grid > *,
    .about-content > *,
    .about-features > *,
    .login-container > *,
    .stats-grid > *,
    .footer-grid > *,
    .footer-grid > *:first-child {
        flex: 1 1 100%;
    }

    .navbar-menu > a + a,
    .navbar-actions > a + a,
    .hero-buttons > a + a,
    .partners-grid > * + *,
    .footer-bottom > * + *,
    .product-categories > * + * {
        margin-left: 0;
    }

    .partners-grid > * + * {
        margin-top: 1rem;
    }
}