* { margin: 0; padding: 0; box-sizing: border-box; }
        /* 注意：这里不能用 height:100%，否则 body 高度被限制为一屏，
           sticky 头部的包含块随之被截断，滚动到下半页时头部会失去吸附 */
        html { min-height: 100%; background: #1a1a2e !important; }
        body { min-height: 100vh; background: #1a1a2e !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #e0e0e0; display: flex; flex-direction: column; }
        /* body 是纵向 flex 容器，页面容器是它的 flex 子项。layui 的 .layui-container 带 margin:0 auto，
           而交叉轴上的 auto 外边距会禁用 stretch，容器于是按内容 min-content 定宽（购物车表格 760px、
           结算表单 414px），窄屏下撑破视口。移动端断点内改成非 auto 外边距让 stretch 生效；
           768px 以上仍由 layui 的固定宽度 + auto 外边距保持居中。 */
        @media screen and (max-width: 767px) {
            body > .layui-container { margin-left: 0; margin-right: 0; }
        }
        :root {
            --Area-background: #1a1a2e;
            --padding: 10px;
        }
        /* 用户区（已移除欢迎语，登录/购物车合并进 logo 所在行） */
        .user-info {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
        }
        .user-info > * {
            margin-left: 15px;
        }
        .user-info form {
            margin-left: 0;
        }
        .user-info a { color: #e0e0e0; opacity: 0.9; transition: opacity 0.3s; }
        .user-info a:hover { opacity: 1; }
        /* 购物车入口：只留图标，商品件数走右上角角标，避免按钮被文字撑得过宽 */
        .user-info .cart-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            font-size: 18px;
            opacity: 1;
            transition: filter 0.25s;
        }
        .user-info .cart-btn:hover { filter: brightness(1.12); }
        .user-info .cart-btn .layui-icon { font-size: 18px; }
        /* 角标贴图标右上角，用页面底色描一圈边，避免与图标糊在一起；
           数量为 0 时由 site.js 置为 display:none */
        .user-info .cart-btn .layui-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            height: 18px;
            min-width: 18px;
            padding: 0 5px;
            border: 2px solid var(--Area-background);
            border-radius: 999px;
            /* 件數角標（頁頭購物車 / 移動端底欄）與「熱銷」角標、「立即購買」同源，
               避免日後調整 --c-hot 時此處不跟隨 */
            background-color: var(--c-hot);
            color: #fff;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
        }
        
        /* User dropdown */
        .user-dropdown {
            position: relative;
            cursor: pointer;
        }
        .user-dropdown:hover .dropdown-menu, .dropdown-menu:hover {
            display: block;
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: #2d2d2d;
            border: 1px solid #333;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            min-width: 150px;
            z-index: 9999;
            margin-top: 0;
        }
        .dropdown-menu a {
            display: block;
            padding: 10px 15px;
            color: #e0e0e0;
            text-decoration: none;
            transition: background 0.3s;
        }
        .dropdown-menu a:hover {
            background: #3a3a3a;
        }
        .dropdown-menu form {
            margin: 0;
        }
        .dropdown-menu button {
            width: 100%;
            text-align: left;
            padding: 10px 15px;
            background: none;
            border: none;
            color: #e0e0e0;
            cursor: pointer;
            transition: background 0.3s;
        }
        .dropdown-menu button:hover {
            background: #3a3a3a;
        }
        
        /* Header Main */
        .header-main { 
            /* background: #1e1e1e;  */
            background: var(--Area-background);
            padding: 18px 0 0; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        /* logo、搜索、用户区在同一行内垂直居中对齐 */
        .header-main .layui-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .header-main .layui-row > [class*="layui-col-"] {
            float: none;
        }
        /* 公司全名有 9 个字，36px 时单行要 360px 以上，而原来所在列固定占 25%
           （1140 容器下约 255px 内容宽），必然折行。字号收到 28px 后单行约 285px，
           配合下方 ≥992px 的自适应列宽即可一行放完 */
        .logo { 
            font-size: 28px; 
            font-weight: 800; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        /* 搜索框：整组共用一个胶囊外框，下拉 / 输入框 / 按钮之间只用细分隔线，
           避免各画各的边框导致圆角错位、高度不齐 */
        .search-box { margin: 0; }
        .search-box .layui-input-group {
            display: flex;
            align-items: stretch;
            max-width: 500px;
            height: 44px;
            margin: 0 auto;
            border: 2px solid #3a3a3a;
            border-radius: 25px;
            background: #2d2d2d;
            overflow: hidden;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .search-box .layui-input-group:focus-within {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
        }

        /* 搜索类型下拉：去掉系统默认外观，改为自绘箭头，底色与外框融为一体 */
        .search-box .search-type {
            flex: 0 0 auto;
            height: 100%;
            padding: 0 32px 0 18px;
            border: none;
            border-right: 1px solid #3a3a3a;
            background-color: transparent;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 11px 7px;
            color: #e0e0e0;
            font-size: 14px;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            transition: background-color 0.25s, color 0.25s;
        }
        .search-box .search-type:hover {
            background-color: rgba(102, 126, 234, 0.16);
            color: #fff;
        }
        .search-box .search-type:focus { outline: none; }
        /* 展开后的选项列表（Chrome / Edge 生效），默认白底与暗色头部不搭 */
        .search-box .search-type option {
            background: #2d2d2d;
            color: #e0e0e0;
        }

        .search-box .layui-input {
            flex: 1 1 auto;
            width: auto;
            height: 100%;
            padding: 0 16px;
            border: none;
            border-radius: 0;
            background: transparent;
            color: #e0e0e0;
            font-size: 14px;
        }
        .search-box .layui-input:focus {
            border: none;
            outline: none;
            box-shadow: none;
        }
        .search-box .layui-input::placeholder {
            color: #7d7d7d;
        }

        .search-box .layui-input-suffix { padding: 0; }
        .search-box .layui-btn-normal {
            height: 100%;
            padding: 0 24px;
            border: none;
            border-radius: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-size: 16px;
            line-height: 40px;
            transition: filter 0.25s;
        }
        .search-box .layui-btn-normal:hover { filter: brightness(1.12); }
        /* layui 会把输入框后缀内的图标统一染成 #5f5f5f，落在紫色渐变按钮上偏暗，改回白色 */
        .search-box .layui-input-suffix .layui-icon {
            color: #fff;
        }
        
        /* Navigation（已并入 header-main，与 logo 同属一个区块，位于 logo 行下方） */
        .nav-main { 
            background: transparent;
            margin-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        /* 压缩导航行高度，避免头部整体过厚；同时去掉 layui 默认左右内边距，使首个分类与 logo 左对齐。
           nowrap 保证分类不折行；overflow 仅在脚本量宽前兜底裁剪（脚本量完会置为 visible），
           否则「更多」的下拉会被裁掉 */
        .nav-main .layui-nav {
            background: transparent;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        /* [hidden] 自带的 display:none 会被 layui 的 .layui-nav .layui-nav-item{display:inline-block} 盖掉 */
        .nav-main .layui-nav > .layui-nav-item[hidden] { display: none; }
        .nav-main .layui-nav > .layui-nav-item { line-height: 40px; }
        .nav-main .layui-nav > .layui-nav-item > a {
            height: 40px;
            line-height: 40px;
            padding: 0 18px;
        }
        .nav-main .layui-nav-item a { 
            color: #e0e0e0; 
            font-weight: 500;
            transition: all 0.3s;
        }
        .nav-main .layui-nav-item a:hover { color: #667eea; }
        .nav-main .layui-nav-item.layui-this a { 
            color: #667eea;
            font-weight: 600;
        }
        .nav-main .layui-nav-child { background: #2d2d2d !important; border-color: rgba(255,255,255,0.1) !important; }
        .nav-main .layui-nav-child a { color: #e0e0e0 !important; }
        .nav-main .layui-nav-child a:hover { background: #3a3a3a !important; }
        /* 「全部商品」二级菜单：鼠标移入导航项即展开分类列表 */
        .nav-main .layui-nav-item:hover > .layui-nav-child { display: block; }
        /* layui 默认按 60px 导航高把菜单定位在 top:65px，此处已压缩为 40px，需同步修正，
           否则菜单与导航项之间会出现空隙，鼠标下移经过空隙时菜单会收起 */
        .nav-main .layui-nav > .layui-nav-item > .layui-nav-child { top: 40px; }
        /* 「更多」下拉贴在导航行右端：右对齐可避免继续向右溢出；
           layui 的 min-width:100% 只等于按钮宽度，需放宽到能放下一个分类名 */
        .nav-main .layui-nav > .layui-nav-item.nav-more > .layui-nav-child {
            left: auto;
            right: 0;
            min-width: 150px;
        }
        .nav-main .layui-nav > .layui-nav-item.nav-more > a { padding: 0 14px; }

        .CategoriesItem{
            display: block;
            background: var(--Area-background);
            padding: 30px 15px;
            border-radius: 16px;
            text-align: center;
            text-decoration: none;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px;
            transition: 0.3s;
            transform: translateY(0px);
        }
        /*定义区块背景颜色*/

        
        /* Product Card */
        .product-card { 
            /* background: #1e1e1e; */
            background: var(--Area-background);
            border-radius: 16px; 
            overflow: hidden; 
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;   /* 作为下方 a 拉伸层的定位参照 */
            cursor: pointer;
        }
        /* 整卡可点击：图片链接自身铺满整个卡片，
           点击卡片任意空白处都能进入商品详情页；
           用绝对定位而非 ::after 拉伸，可让链接自身的盒模型就等于卡片尺寸，
           触控目标测量（>=40px）才有真实数值可依 */
        .product-card > a {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
        }
        /* 卡片角标（熱銷 / 熱門）：绝对定位叠在图片左上角，不占文档流，
           因此不会再像原先那样把卡片撑高；z-index 高于整卡链接，但
           pointer-events:none 让点击穿透到整卡链接，点角标同样能进详情页 */
        .product-tags {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;
            display: flex;
            gap: 8px;
            pointer-events: none;
        }
        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .product-info button {
            margin-top: auto;
            position: relative;   /* 抬到拉伸层之上，保证「加入购物车」按钮自身仍可点击 */
            z-index: 2;
        }
        .product-card:hover { 
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25); 
            transform: translateY(-8px); 
        }
        .product-img { 
            width: 100%; 
            /* 高度由宽度等比推出（商品图实测全是 1:1 正方形）。原先写死 220px，
               一旦降到 2 列 / 1 列，宽度变大而高度不变，容器就成了 2.5:1 上下的扁条，
               cover 只能把正方形图放大到只余中间一条 —— 看到的即是"被拉伸、显示不完整"。
               改成锁 1:1 后任意宽度容器比例恒定，正方形图零裁切 */
            aspect-ratio: 1 / 1; 
            object-fit: cover; 
            transition: transform 0.5s;
            margin-bottom: 16px;
        }
        .product-card:hover .product-img { transform: scale(1.08); }
        .product-info { padding: 16px; }
        .product-price { 
            color: #ff5722; 
            font-size: 24px; 
            font-weight: 800;
            /* 强制单行：现价与划线原价过长时省略，避免折行把卡片撑高导致同一行卡片高度不一致 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        .product-name { 
            color: #e0e0e0; 
            margin: 12px 0; 
            height: 44px; 
            overflow: hidden;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.5;
        }
        .product-meta { 
            color: #666; 
            font-size: 13px; 
            margin-bottom: 12px;
        }

        /* ---------- 商品详情页：主图 ---------- */
        /* 展示方式对齐首页轮播图（见 .home-slide*）：原图按 contain 完整显示，
           留白由同一张图放大模糊后的背景层填满。这样任意视口宽度下图片都完整可见，
           既不会像 cover 那样被裁掉，也不会把高度交给图片自身比例而随容器放大。 */
        .product-image-frame {
            position: relative;
            width: 100%;
            height: 400px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }
        /* 四周各溢出 8%，让模糊的软边落在可视区之外，避免四周出现一圈渐隐 */
        .product-image-bg {
            position: absolute;
            inset: -8%;
            background-size: cover;
            background-position: center;
            filter: blur(18px) brightness(0.6);
        }
        .product-image-main {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 992px 以下栅格堆叠：图片列由半宽变为整宽，若继续用 100%×400px 的扁框，
           contain 出来会在两侧留下大片留白。此时改为正方形框（高度随宽度等比缩放），
           并把宽度收到与桌面端高度同宽，避免堆叠后主图比桌面端更大。 */
        @media screen and (max-width: 991.98px) {
            .product-image-frame {
                width: 100%;
                max-width: 400px;
                height: auto;
                aspect-ratio: 1 / 1;
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* ---------- 商品详情页：统一面板表面 ---------- */
        /* 与商品卡片同一套表面：底色取页面底色 --Area-background，靠
           box-shadow 的悬浮层次区分区域。底色与页面相同后阴影边界偏柔，
           故再叠一条 20% 白的细描边把轮廓交代清楚。
           复合选择器 .ArticleCent.detail-panel 用于压过文件后段 .ArticleCent 的规则。 */
        .detail-panel,
        .ArticleCent.detail-panel {
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }

        /* ---------- 商品详情页：面包屑 ---------- */
        /* 层级为「首頁 > 分类 > 商品名」，分隔符用实心 >；当前层级取主题橙并加粗。
           表面处理与 .detail-panel 一致（同底色 + 20% 白描边 + 阴影），保持详情页统一的卡片观感 */
        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0 8px;
            margin-bottom: 20px;
            padding: 12px 20px;
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            font-size: 14px;
        }
        .breadcrumb a {
            color: #e0e0e0;
            text-decoration: none;
            transition: color 0.3s;
        }
        .breadcrumb a:hover { color: #667eea; }
        /* 与 zen 同源：原 #7d7d7d 在深底上仅 4.14:1，改用语义变量后约 4.8:1 */
        .breadcrumb-separator { color: var(--c-text-muted); }
        .breadcrumb-text { color: #e0e0e0; }
        .breadcrumb-current {
            max-width: 100%;
            color: #ff9800;
            font-weight: 600;
            /* 商品名过长时省略，避免把面包屑挤成多行 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ---------- 商品详情页：三宫格统计卡 ---------- */
        /* 单行横向布局（图标 + 数值），比原来的「图标/数值/文字」三行矮一半 */
        .detail-stats {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }
        .detail-stat {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            padding: 12px 10px;
        }
        .detail-stat .layui-icon {
            font-size: 22px;
            color: #667eea;
            flex: 0 0 auto;
        }
        .detail-stat-value {
            color: #e0e0e0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }

        /* ---------- 商品详情页：数量步进器 − [输入框] + ---------- */
        /* 与其它面板同一套表面：底色取页面底色 --Area-background，
           靠 20% 白描边交代轮廓，不再用突兀的浅灰块 */
        .qty-stepper {
            display: inline-flex;
            align-items: center;
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            overflow: hidden;
        }
        .qty-stepper button {
            width: 40px;
            height: 40px;
            border: none;
            background: var(--Area-background);
            color: #e0e0e0;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.25s, color 0.25s;
        }
        .qty-stepper button:hover {
            background: #3a3a5a;
            color: #fff;
        }
        .qty-stepper input {
            width: 64px;
            height: 40px;
            border: none;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            background: var(--Area-background);
            color: #e0e0e0;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
        }
        .qty-stepper input:focus { outline: none; }
        /* 去掉 number 输入框自带的上下箭头，避免与步进按钮重复 */
        .qty-stepper input::-webkit-outer-spin-button,
        .qty-stepper input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .qty-stepper input[type='number'] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        /* ---------- 商品详情页：规格参数明细 ---------- */
        .detail-spec-list {
            list-style: none;
            margin: 0;
            padding: 8px 20px;
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }
        .detail-spec-list li {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid #3d3d3d;
            font-size: 14px;
            line-height: 1.6;
        }
        .detail-spec-list li:last-child { border-bottom: none; }
        .detail-spec-list .spec-label {
            color: #9a9a9a;
            flex: 0 0 auto;
        }
        .detail-spec-list .spec-value {
            color: #e0e0e0;
            text-align: right;
            overflow-wrap: anywhere;
        }

        /* ---------- 商品详情页：购买须知 ---------- */
        .detail-notice {
            list-style: none;
            margin: 0;
            padding: 14px 20px;
            background: var(--Area-background);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }
        .detail-notice li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 0;
            color: #aaa;
            font-size: 14px;
            line-height: 1.6;
        }
        .detail-notice li::before {
            content: '•';
            color: #667eea;
            flex: 0 0 auto;
        }

        /* ---------- 商品详情页：主操作按钮（加入购物车 / 立即购买） ---------- */
        /* layui 默认圆角只有 2px，这里放大到卡片同一档的 12px。
           用 id 选择器提权，压过 .layui-btn 的弱选择器，无需 !important */
        #btn-add-cart,
        #btn-buy-now {
            border-radius: 12px;
        }

        .ArticleCategories {
            background: var(--Area-background);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
            margin-bottom: 20px;
        }
        .ArticleCategories h3{
                color: #667eea;
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 15px;
                padding-bottom: 10px;
                border-bottom: 2px solid #667eea;
            }

        .ArticleCategories .layui-nav-tree .layui-nav-item {
                height:50px;
                margin: 10px;
        }

            .ArticleCategories-this {
                background-color: #16BBFC !important;
                border-radius: 5px !important;
            }

        .ArticleCent{
            background: var(--Area-background);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* Footer */
        .footer { 
            background: #1a1a2e !important;
            color: #e0e0e0; 
            padding: 50px 0 0; 
            margin-top: 80px;
        }
        .footer p { margin: 0; opacity: 0.9; }
        /* 客服横条：不参与分组网格，独占一整行并居中（与参考站一致）。
           原先它是第 7 个 .layui-col-md2，与前面 6 个分组共需 14 格，必然换到第二行，
           再被浮动挤到中间列下方，导致行尾留下大片空洞 */
        .footer-contact {
            margin-top: 40px;
            padding: 20px 15px 0;
            border-top: 1px solid #34495e;
            text-align: center;
        }
        /* 页面到页脚结束，而 .footer 的 padding 是 50px 0 0（底部为 0），桌面端「聯繫我們」
           按钮会紧贴页面最底部。只给桌面端补 30px：≤768.98px 时页脚容器自带
           padding-bottom: 60px，再叠加会变成 90px */
        @media (min-width: 769px) {
            .footer-contact { padding-bottom: 30px; }
        }
        /* 横条标题是「客服專線：xxx」，与分组标题的橙色下划线样式无关，故一并复位 */
        .footer-contact h4 {
            margin: 0 0 8px;
            padding: 0;
            border: 0;
            color: #ff9800;
            font-size: 16px;
            font-weight: 700;
        }
        /* 原为 13px #666，在 #1a1a2e 上对比度仅约 3:1，低于 AA 的 4.5:1 */
        .footer-contact p { margin: 0; color: #d1d1d1; font-size: 14px; }
        .footer-contact-btn {
            display: inline-block;
            margin-top: 12px;
            padding: 8px 20px;
            border: 1px solid #ff9800;
            border-radius: 4px;
            color: #ff9800;
            font-size: 14px;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
        }
        .footer-contact-btn:hover {
            background-color: #ff9800;
            color: #1a1a2e;
        }
        /* <992px：layui 只在 ≥992px 给 .layui-col-md2 加 width 与 float，断点以下这 6 个分组
           会退化成块级元素竖着堆成 6 行。按参考站的做法改成 2 列 3 行。
           用 flex 换行而不是 float：分组高度不等（实测 110/142/175），float 会形成瀑布流
           —— 实测 768px 下左列只落 2 个、右列落 4 个，左列还空出 109.8px 竖缝 */
        @media screen and (max-width: 991.98px) {
            .footer .layui-row {
                display: flex;
                flex-wrap: wrap;
            }
            .footer .layui-col-md2 {
                float: none;
                width: 50%;
                flex: 0 0 50%;
            }
            /* 加载失败分支里的错误块也是 flex 子项，不给宽度会被按内容收窄 */
            .footer .layui-col-md12 { flex: 1 1 100%; }
        }
        /* 超窄屏（如 320px）每列不足 130px，两列会把分组标题挤到 2~3 行，退回单列。
           必须同时改 flex-basis：flex 子项的主轴尺寸由 basis 决定，只改 width 不生效 */
        @media (max-width: 380px) {
            .footer .layui-col-md2 {
                width: 100%;
                flex-basis: 100%;
            }
        }
        
        /* Badge */
        .layui-badge-dot { margin-right: 6px; }

        /* ---------- 文字居中 ---------- */
        /* 本项目的 layui 包未实现 .layui-text-center，而空态、错误页、分页容器等 13 处都在用它，
           类名一直是个空壳导致内容左对齐，这里补上实现 */
        .layui-text-center { text-align: center; }

        /* ---------- layui layer 弹层：暗色皮肤 ---------- */
        /* layer 默认白底、深灰文字，与全站暗色主题不搭（购物车删除确认框尤为明显）。
           本文件在 layui.css 之后加载，同权重即可覆盖，无需 !important */
        .layui-layer {
            background-color: #22223a;
            color: #e0e0e0;
            border-radius: 12px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }
        .layui-layer-title {
            height: 48px;
            line-height: 48px;
            font-size: 15px;
            font-weight: 600;
            color: #e0e0e0;
            background-color: #1f1f36;
            border-bottom: 1px solid #33334d;
            border-radius: 12px 12px 0 0;
        }
        .layui-layer-dialog .layui-layer-content { color: #e0e0e0; }
        /* 关闭按钮默认纯黑，落在暗底上几乎不可见 */
        .layui-layer-setwin span { color: #a0a0a0; }
        .layui-layer-setwin span:hover { color: #fff; }
        .layui-layer-btn a {
            background-color: #2d2d45;
            border-color: #3a3a5a;
            color: #e0e0e0;
            border-radius: 8px;
        }
        .layui-layer-btn a:hover { opacity: 1; background-color: #3a3a5a; }
        /* 主按钮沿用全站紫色渐变，与「结算」按钮同一套视觉语言 */
        .layui-layer-btn .layui-layer-btn0 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: transparent;
            color: #fff;
        }
        .layui-layer-btn .layui-layer-btn0:hover { filter: brightness(1.12); }
        
        /* Spacing Classes */
        .section-block { margin-bottom: 60px; }
        .hero-section { margin-bottom: 60px; }
        .card-gap { margin-bottom: 20px; }
        .element-gap { margin-bottom: 16px; }
        .small-gap { margin-bottom: 8px; }
        .medium-gap { margin-bottom: 24px; }
        .large-gap { margin-bottom: 32px; }

        /* 商品卡栅格分档：>992px 四列 / >700px 三列 / >500px 两列 / 其余一列。
           layui 的栅格断点是写死的 768 / 992 / 1200，与这里要的 500 / 700 对不上，
           所以不套 layui-col-*，只沿用它的做法：单元格间距由 .layui-col-space20 > * 的
           内边距提供，这里只负责 float 与宽度百分比（文件开头已全局 box-sizing: border-box） */
        .card-grid-cell { float: left; width: 100%; }

        @media (min-width: 501px) {
            .card-grid-cell { width: 50%; }
        }

        @media (min-width: 701px) {
            .card-grid-cell { width: 33.333333%; }
        }

        @media (min-width: 993px) {
            .card-grid-cell { width: 25%; }
        }

        /* 板块内空态：板块标题恒定渲染，没有商品时用它占位，
           避免后端返回空数据时整页只剩一条错误提示 */
        .section-empty {
            color: #666;
            font-size: 14px;
            padding: 8px 0 8px 18px;
        }

        /* 首页轮播。图源是近正方形的（实测 1556×1464 等，约 1.06:1），
           原先 "100% 宽 + 固定 360px 高 + object-fit:cover" 会让容器比例随宽度剧变
           （1150 宽时 3.19:1，裁掉约 2/3 高度；375 宽时 1.04:1，几乎不裁），
           即"同一张图在不同宽度看到的内容不一样"。
           现在：容器锁 8:3（16:9 的 2/3 高），图片 contain 完整显示，
           两侧留白用同图放大模糊铺底，高度由宽度等比决定 —— 任意宽度可见内容完全一致 */
        #home-slides {
            aspect-ratio: 8 / 3;
            background-color: var(--Area-background);
            /* 圆角属于皮肤观感，从视图的内联样式挪到这里，换皮肤才好调 */
            border-radius: 16px;
            overflow: hidden;
        }
        /* 轮播无数据时的占位框：与 #home-slides 同比例同外距，页面结构不塌 */
        .home-slides-empty {
            aspect-ratio: 8 / 3;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #3d3d5c;
            border-radius: 16px;
            color: #666;
            font-size: 14px;
        }
        /* layui 给轮播容器和每个轮播项都刷了浅灰底 #f8f8f8，深色主题下要盖掉 */
        #home-slides > [carousel-item] > * { background-color: transparent; }
        .home-slide {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        /* 四周各溢出 8%，让模糊的软边落在可视区之外，避免四周出现一圈渐隐 */
        .home-slide-bg {
            position: absolute;
            inset: -8%;
            background-size: cover;
            background-position: center;
            filter: blur(18px) brightness(0.6);
        }
        .home-slide-link {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }
        .home-slide-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        /* 结算表单：标签在上、同行平分，结构对齐参考站 Shopnew 的 .form-row/.form-group */
        .checkout-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .checkout-form-row {
            display: flex;
            gap: 20px;
        }
        .checkout-field {
            flex: 1;
            min-width: 0;
        }
        .checkout-field > label {
            display: block;
            margin-bottom: 8px;
            color: #e0e0e0;
            font-size: 14px;
            font-weight: 500;
        }
        .checkout-field .required {
            margin-left: 2px;
            color: #ff5722;
        }
        .checkout-field input.layui-input,
        .checkout-field textarea.layui-textarea,
        .checkout-field select.layui-input {
            background: #2d2d2d;
            color: #e0e0e0;
            border-color: #3a3a3a;
        }
        .checkout-field textarea.layui-textarea {
            resize: vertical;
        }
        @media screen and (max-width: 768.98px) {
            .checkout-form-row {
                flex-direction: column;
                gap: 16px;
            }
        }

        /* Bottom Navigation */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #1a1a2e !important;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
            z-index: 999;
            border-top: 1px solid #333;
        }
        .bottom-nav .layui-nav {
            background: transparent;
            display: flex;
            justify-content: space-around;
            padding: 0;
        }
        .bottom-nav .layui-nav-item {
            flex: 1;
            text-align: center;
        }
        .bottom-nav .layui-nav-item a {
            color: #e0e0e0;
            font-size: 12px;
            padding: 10px 0;
            height: 50px;
            line-height: 20px;
            /* 角标以本链接为定位基准（图标 20px 居中排布，故角标用 left:50% 起算） */
            position: relative;
        }
        .bottom-nav .layui-nav-item a i {
            display: block;
            font-size: 20px;
            margin-bottom: 2px;
        }
        /* 底部菜单的购物车角标：贴图标右上角，描一圈页面底色边避免与图标糊在一起；
           数量为 0 时由 site.js 置为 display:none（与页头角标同一套处理） */
        .bottom-nav-badge {
            position: absolute;
            top: 2px;
            left: 50%;
            margin-left: 4px;
            height: 16px;
            min-width: 16px;
            padding: 0 4px;
            border: 2px solid var(--Area-background);
            border-radius: 999px;
            /* 件數角標（頁頭購物車 / 移動端底欄）與「熱銷」角標、「立即購買」同源，
               避免日後調整 --c-hot 時此處不跟隨 */
            background-color: var(--c-hot);
            color: #fff;
            font-size: 11px;
            line-height: 12px;
            text-align: center;
        }
        .bottom-nav .layui-nav-item.layui-this a {
            color: #667eea;
        }
        
        /* Responsive */
        /* ≥992px：三列同行。logo 列放弃 layui 的固定 25% 死宽，改为按内容宽度占位，
           搜索框列弹性吃满剩余空间，用户区按内容宽贴右。这样公司全名单行放得下，
           也不必为了塞进 25% 而把字号压得过小。
           放在 992 断点内是有意为之：769-991 的两行布局与移动端堆叠规则
           靠 .header-main .layui-col-mdX 的 width 生效，此处若不加断点会以
           更高优先级（三选择器）把它们一并覆盖掉。 */
        @media (min-width: 992px) {
            .header-main .layui-row > .layui-col-md3 {
                flex: 0 0 auto;
                width: auto;
            }
            .header-main .layui-row > .layui-col-md5 {
                flex: 1 1 320px;
                min-width: 280px;
                width: auto;
            }
            .header-main .layui-row > .layui-col-md4 {
                flex: 0 0 auto;
                width: auto;
            }
        }
        /* 769px 以上 logo 单行显示；移动端保持可折行，避免窄屏（如 320px）横向溢出 */
        @media (min-width: 769px) {
            .logo { white-space: nowrap; }
        }
        /* 769-991px：容器仅 750px，原先让搜索框独占第二行，头部高度翻倍。
           改为三列仍排在同一行，靠压小 logo 字号 + 让搜索框弹性收缩腾空间 */
        @media (min-width: 769px) and (max-width: 991.98px) {
            .header-main .layui-row { flex-wrap: nowrap; }
            .header-main .layui-col-md3 { order: 1; flex: 0 1 auto; width: auto; min-width: 0; }
            .header-main .layui-col-md4 { order: 3; flex: 0 0 auto; width: auto; margin-left: 12px; }
            .header-main .layui-col-md5 { order: 2; flex: 1 1 auto; width: auto; min-width: 0; margin-left: 12px; }
            .logo { font-size: 18px; }
            /* 搜索框列变窄：铺满该列而不是居中定宽，同时放开输入框的最小宽度让它能继续缩 */
            .search-box .layui-input-group { max-width: none; margin: 0; }
            .search-box .layui-input { min-width: 0; padding: 0 10px; }
            .search-box .search-type { padding: 0 26px 0 12px; }
            .search-box .layui-btn-normal { padding: 0 16px; }
        }
        /* 移动端。上界同样写成 768.98px 而非 768px：与之衔接的平板/桌面分支
           用的是 min-width: 769px，若这里封在 768px，则 768~769 之间的分数宽
           （DPR=1.5 下的 768.667px 就落在这里）会两边都不命中——底部菜单不会出现，
           容器上边距与移动端字号也一并丢失。留 0.02px 间隔与上面的 991.98px 保持同一套边界约定 */
        @media (max-width: 768.98px) {
            /* 头部同样保持单行：购物车入口已由底部菜单承接，右上只剩语言切换，
               靠压小公司名字号 + 搜索框弹性收缩腾空间，不换行、头部高度回到单行 */
            .header-main { padding: 12px 0; }
            .header-main .layui-row { flex-wrap: nowrap; }
            .header-main .layui-col-md3 { flex: 0 0 auto; width: auto; }
            .header-main .layui-col-md5 { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 8px; }
            .header-main .layui-col-md4 { flex: 0 0 auto; width: auto; margin-left: 0; }
            /* 头部内的容器不吃下面 .layui-container 的 20px 上边距与 60px 底部留白
               （那 60px 是给页面内容让开底部菜单的），否则头部盒子白高 80px */
            .header-main .layui-container { margin-top: 0 !important; padding-bottom: 0 !important; }
            .logo { font-size: 16px; white-space: nowrap; }
            .search-box .layui-input-group { max-width: none; margin: 0; }
            /* 输入框留 40px 下限：再窄就会被 .layui-input-group 的 overflow:hidden 裁掉 */
            .search-box .layui-input { min-width: 40px; padding: 0 8px; }
            .search-box .search-type { padding: 0 22px 0 10px; }
            .search-box .layui-btn-normal { padding: 0 12px; }
            /* 底部菜单已有购物车入口，头部不再重复显示（选择器需带 .user-info 才压得住上面的 display:inline-flex） */
            .user-info .cart-btn { display: none; }
            /* 高度已由 .product-img 的 aspect-ratio 决定，这里只收窄下外边距 */
            .product-img { margin-bottom: 12px; }
            .product-price { font-size: 20px; }
            .layui-container { margin-top: 20px !important; padding-bottom: 60px !important; }
            .hero-section { padding: 80px 0 !important; margin-bottom: 40px !important; }
            .section-block { margin-bottom: 40px !important; }
            .bottom-nav { display: block; }
            /* 底部菜单已提供同样的入口，顶部菜单栏隐藏，避免重复入口并省出纵向空间 */
            .nav-main { display: none; }
        }
        /* 移动端触控目标：按钮 / 链接的可点区域不小于 40px */
        @media screen and (max-width: 767px) {
            /* layui 按钮默认 38px，统一撑到 40px */
            .layui-btn {
                min-height: 40px;
                line-height: 40px;
            }
            .logo,
            .user-info > a,
            #cart-tbody button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 40px;
            }
            /* 搜索框整组已是 44px 高，下拉跟随满高即可（勿再单独放大，否则会被外框裁切） */
            .search-box select {
                height: 100%;
                min-height: 40px;
            }
            /* 轮播左右箭头 layui 默认 36px，撑到 40px */
            .layui-carousel .layui-carousel-arrow {
                width: 40px;
                height: 40px;
                line-height: 40px;
            }
            /* 轮播内的 a 默认为 inline，其盒高只有字体行高（实测 18.7px），
               改成 block 后盒模型才等于内部图片的真实可点区域 */
            .layui-carousel a { display: block; }
            /* 页脚文章链接行高仅 19px，撑到 40px 并去掉条目间距，避免页脚被撑得过高 */
            .footer li { margin-bottom: 0 !important; }
            .footer li a {
                display: flex;
                align-items: center;
                width: 100%;
                min-height: 40px;
            }
        }
        /* 超窄屏（≤480px，如 375px 的手机）：公司名压到 12px、搜索框收到 125px 可用下限，
           两者相加才塞得进 375px 一行；再窄（≤380px）时长名字会被省略号截断，
           但搜索框始终可用，不会换行、不产生横向滚动。
           必须放在上面的 ≤767px 之后：那里给 .logo 设了 display:inline-flex，
           同权重下靠源码顺序覆盖，否则此处的 block/省略号不生效 */
        @media (max-width: 480px) {
            /* 公司名不收缩（flex-shrink 0），搜索列的弹性基准与下限都定在 125px：
               125 = 下拉 48.67 + 输入 40（上面的 min-width）+ 按钮 32 + 输入组左右内边距 4，
               即搜索框三件套的最小可用宽度。基准写死成 125px 而不是默认的 auto 很关键——
               auto 会取输入框的固有宽度（约 250px），收缩时按比例分摊，会把公司名一起压窄；
               写成 125px 后行内本来是"刚好放得下还有富余"，富余全部由 flex-grow 给搜索框，
               公司名分毫不动；只有窄到连 125px 都放不下（≤380px）才由公司名让位 */
            .header-main .layui-col-md3 { flex: 0 0 auto; min-width: 0; }
            .header-main .layui-col-md5 { flex: 1 1 125px; min-width: 125px; }
            .logo {
                display: block;
                font-size: 12px;
                line-height: 40px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .search-box .search-type { padding: 0 18px 0 6px; font-size: 12px; }
            .search-box .layui-btn-normal { padding: 0 6px; }
            .user-info > * { margin-left: 8px; }
            .user-info > a { font-size: 12px; }
        }
        /* 超窄屏（≤380px）：搜索列已缩到 125px 下限仍放不下，这时的溢出才由公司名承担——
           表现为省略号截断（.logo 上的 overflow/text-overflow 在 ≤480px 里已备好），
           既保证搜索框完整可用，也不产生横向滚动 */
        @media (max-width: 380px) {
            .header-main .layui-col-md3 { flex: 0 1 auto; }
        }