* { margin: 0; padding: 0; box-sizing: border-box; }
        /* 注意：这里不能用 height:100%，否则 body 高度被限制为一屏，
           sticky 头部的包含块随之被截断，滚动到下半页时头部会失去吸附 */
        html { min-height: 100%; background: var(--c-bg) !important; }
        body { min-height: 100vh; background: var(--c-bg) !important; font-family: 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--c-text); 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; }
        }
        /* ==================================================================
           大乘皮膚（mahayana）：淡黃紙面 × 酒紅 × 鎏金字
           參考 mahayanaegyhaz.hu 的視覺：極深的酒紅 #660000 配飽和金 #fbd03b，
           淺色區用淡黃 #f7f3d4（取自目標站 #f7f4d9 一系的淺黃）打底，
           圓角與陰影用得極克制（2–3px）。
           色板集中在這裡覆蓋 site.css 的同名變量 —— 視圖裡的 .page-title /
           .text-muted / .surface / .btn-primary / .footer-link 等語義類，
           以及下方的面板、頁腳、彈層，全部由這一組變量驅動。
           ================================================================== */
        :root {
            /* 底色與表面：淡黃紙面 + 近白／更淡黃的面（表頭、分隔行）
               深色面（商品卡、詳情頁面板）走酒紅，字色見下方的 --c-on-dark 一組 */
            --c-bg: #f7f3d4;
            --c-surface: #fffdf6;
            --c-surface-head: #f8f3da;
            --c-surface-2: #f2ecd2;
            --c-surface-hover: #faf5dc;

            /* 酒紅深面（商品卡、詳情頁的價格／統計／描述／規格／須知面板）上的字色。
               米黃 #ffeac8 對 #660000 是 11.4:1，沙金 #d9a86c 是 6.2:1 */
            --c-on-dark: #ffeac8;
            --c-on-dark-muted: #d9a86c;

            /* 文字：酒紅一系。目標站的淺底正文就是 #660000，在淡黃紙面上約 11.6:1；
               次要文字取 #7a1f1f，說明文字取 #8a6055（淡黃底 4.6:1、卡片白上 5.3:1），
               已是能過 WCAG AA 的最淺一檔 */
            --c-text: #660000;
            --c-text-2: #7a1f1f;
            --c-text-muted: #8a6055;

            /* 描邊：酒紅淡線 */
            --c-line: #e8d8c4;
            --c-line-strong: #e3d0ba;
            --c-line-soft: rgba(102, 0, 0, 0.18);

            /* 主題色：朱紅為主，金色只做「色塊」不做淺底上的字。
               金 #fbd03b 在淡黃紙面上僅 1.8:1，當文字完全讀不了，所以它只出現在
               深酒紅底上（頁頭導航、頁腳標題、商品卡價格，7–9:1）
               或當按鈕／角標的底色（配深字）。
               承擔 .text-brand / .breadcrumb 這類正文級文字的是朱紅 #af0000，
               淡黃紙面上 5.3:1，取自目標站深色漸變 #af0000 → #660000 的亮端 */
            --c-brand: #af0000;
            --c-brand-2: #660000;
            --c-accent: #b34600;
            --c-hot: #a80d00;
            --c-success: #6b5210;
            /* 主按鈕走金色漸變（目標站 .et_pb_button 就是金底黑字），
               所以 .btn-primary 必須同步把字色壓成深褐，否則 layui 默認白字
               落在金底上只有 1.7:1 */
            --grad-brand: linear-gradient(135deg, #fbd03b 0%, #e8a800 100%);
            --c-hot-soft: rgba(168, 13, 0, 0.08);

            /* 角標：熱門（layui-bg-orange）與熱銷（layui-bg-red）都走金箔底 + 深褐字
               （9.2:1），所屬分類（layui-bg-blue）走深酒紅 + 白字（13.4:1）；
               layui 原值 #ffb800 / #1e9fff 配白字在淺底上只有 1.73 / 2.82 : 1 */
            --c-tag-popular: #fbd03b;
            --c-tag-popular-ink: #3d2b00;
            --c-tag-info: #660000;

            /* 頁腳：目標站頁腳是獨立深色帶（原站為 #222222），這裡改用酒紅，
               與頁頭同源成一道「上下壓邊」。標題金 #fbd03b 對酒紅 9.1:1，
               正文米黃 #ffeac8 對酒紅 11.4:1 */
            --c-footer-bg: #660000;
            --c-footer-text: #ffeac8;
            --c-footer-accent: #fbd03b;

            /* 狀態色板：訂單頁把它當「白字 + 色塊底」用（見 Order/Index.cshtml），
               所以門檻是白字對色塊 4.5:1，不是色塊當文字。整組收在酒紅／赭金一線，
               代價是幾個狀態靠明度階而非色相區分，語義由文字標籤承擔 */
            --c-status-pending: #b34600;
            --c-status-info: #8a1f14;
            --c-status-shipped: #9c5b00;
            --c-status-done: #7a4a10;
            --c-status-cancelled: #a80d00;
            --c-status-unknown: #8a6055;

            /* 本主題自身的表面色（商品卡、面板、頭部等大量引用） */
            --Area-background: #fffdf6;
            --padding: 10px;
        }

        /* ---------- 大乘排版 ---------- */
        /* 標題走 Oswald 這類窄體無襯線並全大寫 —— 目標站的 h1/h2/導航/按鈕清一色如此。
           Oswald 在中文環境通常沒有安裝，拉丁字會落到它、漢字繼續沿後面的 CJK 字體，
           正好還原「窄體大寫標題 + 常規正文」的兩級節奏；字距放開 0.02em 便於大寫辨識。
           卡片標題、商品名不在此列：電商標題混排大小寫，強制大寫反而難讀 */
        h1, h2, h3, h4,
        .page-title,
        .panel-title,
        .footer-group-title,
        .ArticleCategories h3 {
            font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        .page-title,
        .panel-title,
        .footer-group-title {
            text-transform: uppercase;
        }

        /* 板塊標題的色條沿用朱紅，並在標題下方壓一條 2px 金線，
           對應目標站「酒紅標題 + 金色界線」的經卷感 */
        .page-title {
            border-left: 4px solid #af0000;
            padding-bottom: 6px;
            border-bottom: 2px solid #fbd03b;
        }
        .page-title--hot { border-left-color: var(--c-hot); }
        .page-title--accent { border-left-color: var(--c-accent); }

        /* 頁頭底邊壓一條 4px 金箔細線，作為酒紅橫帶下方的第一道「金邊」 */
        .header-main { border-bottom: 4px solid #fbd03b; }

        /* 頂部一層極淡的金色光暈（目標站淺色區都疊了黃色徑向漸變）。
           透明度壓到 8%，只在米黃紙面上形成暖調，不影響任何文字對比度。
           必須帶 !important：上面的 body 簡寫 background 帶 !important，
           它會把 background-image 一併重置為 none，且優先級高於後面的普通聲明 */
        body {
            background-image: radial-gradient(circle at 50% 0, rgba(247, 202, 0, 0.08) 0, rgba(247, 202, 0, 0) 60%) !important;
            background-repeat: no-repeat !important;
        }

        /* ---------- 按鈕 ---------- */
        /* 主按鈕是金箔底 + 深褐字（目標站 .et_pb_button 的原始做法），
           layui 默認的白字必須壓掉；圓角收到 3px，貼合目標站幾乎不打圓角的硬朗觀感 */
        .btn-primary,
        .btn-primary .layui-icon,
        .search-box .layui-btn-normal {
            color: #4a2a00;
        }
        .btn-primary,
        .layui-btn-normal {
            border-radius: 3px;
        }
        /* 次按鈕對齊目標站的「bővebben」：淡酒紅底 + 酒紅描邊 + 酒紅字，
           取代 layui 默認的白底灰框（在米黃紙面上幾乎看不出是顆按鈕） */
        .layui-btn-primary {
            background-color: rgba(102, 0, 0, 0.06);
            border: 1px solid #660000;
            color: #660000;
            border-radius: 3px;
        }
        .layui-btn-primary:hover {
            background-color: rgba(102, 0, 0, 0.12);
            border-color: #660000;
            color: #660000;
        }
        /* SKU 规格的选中态：product.js 是给按钮「追加」一个 .layui-btn-normal，
           按钮本身仍带 .layui-btn-primary。两个都是单类选择器、特指度相同，
           本文件后加载，于是上面那条 .layui-btn-primary 会把选中态一起吃掉 ——
           选中后没有任何视觉反馈（layui 原生的蓝色被压掉，也回不到金箔色）。
           这里用双类选择器把选中态提权，恢复「金箔底 + 深褐字」的选中反馈 */
        .sku-option.layui-btn-normal {
            background: linear-gradient(135deg, #fbd03b 0%, #e8a800 100%);
            border-color: #e8a800;
            color: #4a2a00;
        }
        /* 導航「當前項」的 3px 指示條（頂部主導航與移動端底欄共用）。
           site.css 把它設成了 --c-brand（朱紅），落在酒紅頁頭上等於看不見，
           這裡改回金箔色；layui 該處沒有 !important，後加載即勝 */
        .layui-nav .layui-this::after,
        .layui-nav-bar {
            background-color: #fbd03b;
        }

        /* 用户区（已移除欢迎语，登录/购物车合并进 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: #ffeac8; opacity: 0.92; transition: color 0.3s, opacity 0.3s; }
        .user-info a:hover { color: #fbd03b; opacity: 1; }
        /* 語言下拉的觸發鈕不在 .user-info a 的覆蓋範圍內，site.css 給的是 --c-text（本主題為酒紅），
           在酒紅頁頭上等於隱形，這裡補一筆同色的米黄；下拉面板是淺色底，不繼承此色 */
        .user-info .lang-switch > summary { color: #ffeac8; }
        .user-info .lang-switch > summary:hover,
        .user-info .lang-switch[open] > summary { color: #fbd03b; }
        /* 购物车入口：只留图标，商品件数走右上角角标，避免按钮被文字撑得过宽。
           金箔底 + 深褐图标，与主按钮同源 */
        .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, #fbd03b 0%, #e8a800 100%);
            color: #4a2a00;
            font-size: 18px;
            opacity: 1;
            transition: filter 0.25s;
        }
        .user-info .cart-btn:hover { filter: brightness(1.08); color: #4a2a00; }
        .user-info .cart-btn .layui-icon { font-size: 18px; }
        /* 角标贴图标右上角，用页面底色描一圈边，避免与图标糊在一起；
           数量为 0 时由 site.js 置为 display:none。
           als 描的是 --Area-background（浅色表面），在酒红页头上会留一圈亮边，
           这里改成页头底色 */
        .user-info .cart-btn .layui-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            height: 18px;
            min-width: 18px;
            padding: 0 5px;
            border: 2px solid #660000;
            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: #fffdf6;
            border: 1px solid rgba(102, 0, 0, 0.16);
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(102, 0, 0, 0.14);
            min-width: 150px;
            z-index: 9999;
            margin-top: 0;
        }
        .dropdown-menu a {
            display: block;
            padding: 10px 15px;
            color: #660000;
            text-decoration: none;
            transition: background 0.3s;
        }
        .dropdown-menu a:hover {
            background: #f7f3d4;
        }
        .dropdown-menu form {
            margin: 0;
        }
        .dropdown-menu button {
            width: 100%;
            text-align: left;
            padding: 10px 15px;
            background: none;
            border: none;
            color: #660000;
            cursor: pointer;
            transition: background 0.3s;
        }
        .dropdown-menu button:hover {
            background: #f7f3d4;
        }
        
        /* Header Main */
        /* 頁頭是酒紅實底橫帶（目標站 #main-header 的做法），
           底邊壓 4px 金線；金線與陰影共同把它從米黃紙面上切出來 */
        .header-main { 
            background: #660000;
            padding: 18px 0 0; 
            box-shadow: 0 2px 10px rgba(102, 0, 0, 0.28);
            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 本身就是金色（logo-arany.png），
           在酒紅底上取 6.4:1 以上的亮端，不加陰影也讀得清 */
        .logo { 
            font-size: 28px; 
            font-weight: 800; 
            background: linear-gradient(135deg, #fbd03b 0%, #e8a800 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 rgba(251, 208, 59, 0.55);
            border-radius: 3px;
            background: #fffdf6;
            overflow: hidden;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .search-box .layui-input-group:focus-within {
            border-color: #fbd03b;
            box-shadow: 0 0 0 3px rgba(251, 208, 59, 0.28);
        }

        /* 搜索类型下拉：去掉系统默认外观，改为自绘箭头，底色与外框融为一体 */
        .search-box .search-type {
            flex: 0 0 auto;
            height: 100%;
            padding: 0 32px 0 18px;
            border: none;
            border-right: 1px solid #e8d8c4;
            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='%238a6055' 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: #660000;
            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, 0, 0, 0.08);
            color: #af0000;
        }
        .search-box .search-type:focus { outline: none; }
        /* 展开后的选项列表（Chrome / Edge 生效），默认白底与酒红头部不搭 */
        .search-box .search-type option {
            background: #fffdf6;
            color: #660000;
        }

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

        .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, #fbd03b 0%, #e8a800 100%);
            font-size: 16px;
            line-height: 40px;
            transition: filter 0.25s;
        }
        .search-box .layui-btn-normal:hover { filter: brightness(1.08); }
        /* layui 会把输入框后缀内的图标统一染成 #5f5f5f，落在金底上偏暗，改用深褐 */
        .search-box .layui-input-suffix .layui-icon {
            color: #4a2a00;
        }
        
        /* Navigation（已并入 header-main，与 logo 同属一个区块，位于 logo 行下方） */
        .nav-main { 
            background: transparent;
            margin-top: 14px;
            border-top: 1px solid rgba(251, 208, 59, 0.28);
        }
        /* 压缩导航行高度，避免头部整体过厚；同时去掉 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;
            /* 目標站導航是金色全大寫、字距放開；中文不受大寫影響，
               靠字距與字重還原同樣的「碑刻」節奏 */
            font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .nav-main .layui-nav-item a { 
            color: #ffeac8; 
            font-weight: 500;
            transition: all 0.3s;
        }
        .nav-main .layui-nav-item a:hover { color: #fbd03b; }
        .nav-main .layui-nav-item.layui-this a { 
            color: #fbd03b;
            font-weight: 600;
        }
        /* 二級菜單沿用目標站子菜單的做法：酒紅底 + 金線描邊 + 米黃字 */
        .nav-main .layui-nav-child { background: #550000 !important; border-color: rgba(251, 208, 59, 0.35) !important; }
        .nav-main .layui-nav-child a { color: #ffeac8 !important; }
        .nav-main .layui-nav-child a:hover { background: rgba(251, 208, 59, 0.14) !important; color: #fbd03b !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: 3px;
            text-align: center;
            text-decoration: none;
            box-shadow: rgba(102,0,0,0.10) 0px 2px 8px;
            transition: 0.3s;
            transform: translateY(0px);
        }
        /*定义区块背景颜色*/

        
        /* Product Card */
        /* 商品卡：酒红实底 + 金线描边，压在淡黄纸面上作深色块。
           卡片内的文字一律走 --c-on-dark 一系（不能沿用浅色面那套酒红字），
           具体见下面 .product-card 作用域内的三条覆写 */
        .product-card { 
            background: #660000;
            border-radius: 3px; 
            overflow: hidden; 
            transition: all 0.3s;
            border: 1px solid rgba(251, 208, 59, 0.32);
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.16);
            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;
        }
        /* 悬停只抬 4px 并让描边转金 —— 目標站幾乎不做位移，這裡保留可點擊回饋但收住幅度 */
        .product-card:hover { 
            box-shadow: 0 6px 18px rgba(102, 0, 0, 0.30);
            border-color: #fbd03b;
            transform: translateY(-4px); 
        }
        .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.05); }
        .product-info { padding: 16px; }
        /* 商品名 / 价格 / 次要信息只出现在酒红深面上（商品卡，以及详情页价格面板里的
           #product-price），所以直接按深面取色：价格用金箔 #fbd03b（9.1:1），
           名称用米黄（11.4:1），次要信息用沙金（6.2:1）。
           浅色面那套酒红字在这里分别是 1.0–1.6:1，等于看不见 */
        .product-price { 
            color: #fbd03b; 
            font-size: 24px; 
            font-weight: 800;
            /* 强制单行：现价与划线原价过长时省略，避免折行把卡片撑高导致同一行卡片高度不一致 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        .product-name { 
            color: var(--c-on-dark); 
            margin: 12px 0; 
            height: 44px; 
            overflow: hidden;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.5;
        }
        .product-meta { 
            color: var(--c-on-dark-muted); 
            font-size: 13px; 
            margin-bottom: 12px;
        }
        /* 无图占位块：原先用 --c-surface（近白），在酒红卡上会顶着一块突兀的亮面，
           改成同色系更深一档的酒红，配沙金图标 */
        .product-card .product-img--placeholder {
            background: #550000;
            color: var(--c-on-dark-muted);
        }

        /* ---------- 富文本里的内联亮色字 ---------- */
        /* 商品描述与文章正文都由后端 CMS 直接下发（@Html.Raw），里面写死了原站
           「深色底 + 亮色字」的内联样式。跨 9 个页面实测，这类内联色只有两个值：
           #ffffff（46 处，商品参数）与 #ffcc66（15 处，FAQ 小标题），
           落在米黄纸面上分别只有 1.02:1 与 1.47:1，等于隐形。
           内联样式没带 !important，外部样式带 !important 即可盖过；
           这里按实测值逐个枚举，不做通配，避免误伤内容作者日后刻意加的强调色 */
        .detail-panel [style*="color:#ffffff"],
        .detail-panel [style*="color: #ffffff"],
        .detail-panel [style*="color:#fff;"],
        .detail-panel [style*="color: #fff;"],
        .detail-panel [style*="color:#FFFFFF"],
        .detail-panel [style*="color:#ffcc66"],
        .detail-panel [style*="color: #ffcc66"],
        .detail-panel [style*="color:#FFCC66"],
        .detail-panel [style*="color:white"],
        .article-body [style*="color:#ffffff"],
        .article-body [style*="color: #ffffff"],
        .article-body [style*="color:#fff;"],
        .article-body [style*="color: #fff;"],
        .article-body [style*="color:#FFFFFF"],
        .article-body [style*="color:#ffcc66"],
        .article-body [style*="color: #ffcc66"],
        .article-body [style*="color:#FFCC66"],
        .article-body [style*="color:white"] {
            color: inherit !important;
        }

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

        /* ---------- 商品详情页：统一面板表面 ---------- */
        /* 详情页的面板（价格 / 描述）改用酒红深面，与商品卡同色，
           边缘靠金线勾勒。深面上的字色必须在下面各处单独指定 ——
           浅色面那套酒红字落在 #660000 上是 1:1，看不见。
           复合选择器 .ArticleCent.detail-panel 用于压过文件后段 .ArticleCent 的规则。 */
        .detail-panel,
        .ArticleCent.detail-panel {
            background: #660000;
            border: 1px solid rgba(251, 208, 59, 0.32);
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.16);
            /* 面板整体走深面字色：.ArticleCent 上挂着 .text-body（浅色面的 #7a1f1f），
               这里用双类选择器把它压过来，下方 CMS 富文本继承的也是这个颜色 */
            color: var(--c-on-dark);
        }

        /* ---------- 商品详情页：面包屑 ---------- */
        /* 层级为「首頁 > 分类 > 商品名」，分隔符用实心 >；当前层级取朱红并加粗。
           表面处理与 .detail-panel 一致，保持详情页统一的卡片观感 */
        .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(102, 0, 0, 0.16);
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.08);
            font-size: 14px;
        }
        .breadcrumb a {
            color: #660000;
            text-decoration: none;
            transition: color 0.3s;
        }
        .breadcrumb a:hover { color: #af0000; }
        /* 分隔符是真实可见的字符，按正文门槛 4.5:1 取色。
           原 #a89b82 在卡片白上只有 2.69:1，改用语义变量后约 5.3:1 */
        .breadcrumb-separator { color: var(--c-text-muted); }
        .breadcrumb-text { color: #660000; }
        .breadcrumb-current {
            max-width: 100%;
            /* 原為 #a97d1f（--c-accent 的舊值，3.7:1 不達標）；改用品牌朱紅並走變量，
               卡片白底上 6.8:1，也不會在 --c-brand 調整後悄悄漂走 */
            color: var(--c-brand);
            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: #660000;
            border: 1px solid rgba(251, 208, 59, 0.32);
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.16);
            padding: 12px 10px;
        }
        .detail-stat .layui-icon {
            font-size: 22px;
            /* 朱红 #af0000 落在酒红底上只有 1.9:1，改用金箔 */
            color: #fbd03b;
            flex: 0 0 auto;
        }
        .detail-stat-value {
            color: var(--c-on-dark);
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }

        /* ---------- 商品详情页：数量步进器 − [输入框] + ---------- */
        /* 与其它面板同一套表面：近白底 + 酒紅細邊，不再用突兀的浅灰块 */
        .qty-stepper {
            display: inline-flex;
            align-items: center;
            background: var(--Area-background);
            border: 1px solid rgba(102, 0, 0, 0.16);
            border-radius: 3px;
            overflow: hidden;
        }
        .qty-stepper button {
            width: 40px;
            height: 40px;
            border: none;
            background: var(--Area-background);
            color: #660000;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.25s, color 0.25s;
        }
        .qty-stepper button:hover {
            background: #f7f3d4;
            color: #af0000;
        }
        .qty-stepper input {
            width: 64px;
            height: 40px;
            border: none;
            border-left: 1px solid rgba(102, 0, 0, 0.16);
            border-right: 1px solid rgba(102, 0, 0, 0.16);
            background: var(--Area-background);
            color: #660000;
            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: #660000;
            border: 1px solid rgba(251, 208, 59, 0.32);
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.16);
        }
        .detail-spec-list li {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 0;
            /* 分隔线改用金线，浅色面的 #e8d8c4 在酒红底上过硬 */
            border-bottom: 1px solid rgba(251, 208, 59, 0.22);
            font-size: 14px;
            line-height: 1.6;
        }
        .detail-spec-list li:last-child { border-bottom: none; }
        .detail-spec-list .spec-label {
            color: var(--c-on-dark-muted);
            flex: 0 0 auto;
        }
        .detail-spec-list .spec-value {
            color: var(--c-on-dark);
            text-align: right;
            overflow-wrap: anywhere;
        }

        /* ---------- 商品详情页：购买须知 ---------- */
        .detail-notice {
            list-style: none;
            margin: 0;
            padding: 14px 20px;
            background: #660000;
            border: 1px solid rgba(251, 208, 59, 0.32);
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.16);
        }
        .detail-notice li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 0;
            /* 须知是完整句子，按正文门槛取色：米黄对酒红 11.4:1 */
            color: var(--c-on-dark);
            font-size: 14px;
            line-height: 1.6;
        }
        .detail-notice li::before {
            content: '•';
            /* 朱红落在酒红底上看不出，项目符号改金箔 */
            color: #fbd03b;
            flex: 0 0 auto;
        }

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

        .ArticleCategories {
            background: var(--Area-background);
            border: 1px solid rgba(102, 0, 0, 0.16);
            border-radius: 3px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.08);
            margin-bottom: 20px;
        }
        .ArticleCategories h3{
                color: #660000;
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 15px;
                padding-bottom: 10px;
                /* 目標站的界線是金色，這裡保留下劃線但換成金箔色 */
                border-bottom: 2px solid #fbd03b;
            }

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

            .ArticleCategories-this {
                background-color: #af0000 !important;
                border-radius: 3px !important;
            }

        .ArticleCent{
            background: var(--Area-background);
            border: 1px solid rgba(102, 0, 0, 0.16);
            border-radius: 3px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(102, 0, 0, 0.08);
        }
        
        /* Footer */
        /* 頁腳是與紙底無關的獨立色帶：酒紅底 + 米黃字 + 金箔標題，
           與頁頭形成上下兩道壓邊（目標站頁腳是 #222 深灰帶，這裡統一成酒紅） */
        .footer { 
            background: var(--c-footer-bg) !important;
            color: var(--c-footer-text); 
            padding: 50px 0 0; 
            margin-top: 80px;
            /* 頁腳與內容區之間壓一條金線，對應頁頭的 4px 金邊 */
            border-top: 4px solid #fbd03b;
        }
        .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 rgba(251, 208, 59, 0.35);
            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: var(--c-footer-accent);
            font-size: 16px;
            font-weight: 700;
        }
        /* 原為 13px 深灰，在酒紅底上不可讀；改用米黄，#ffeac8 對 #660000 約 11.4:1 */
        .footer-contact p { margin: 0; color: var(--c-footer-text); font-size: 14px; }
        .footer-contact-btn {
            display: inline-block;
            margin-top: 12px;
            padding: 8px 20px;
            border: 1px solid var(--c-footer-accent);
            border-radius: 3px;
            color: var(--c-footer-accent);
            font-size: 14px;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
        }
        .footer-contact-btn:hover {
            background-color: var(--c-footer-accent);
            /* 金箔底上用酒紅字（原 als 是深底配米色字） */
            color: var(--c-footer-bg);
        }
        /* <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: #fffdf6;
            color: #660000;
            border-radius: 3px;
            box-shadow: 0 6px 24px rgba(102, 0, 0, 0.24);
        }
        .layui-layer-title {
            height: 48px;
            line-height: 48px;
            font-size: 15px;
            font-weight: 600;
            color: #660000;
            background-color: #f8f3da;
            /* 標題下壓一條金線，與頁頭／頁腳同一套「金邊」語言 */
            border-bottom: 2px solid #fbd03b;
            border-radius: 3px 3px 0 0;
        }
        .layui-layer-dialog .layui-layer-content { color: #660000; }
        /* 关闭按钮默认纯黑，落在米黄底上过重 */
        .layui-layer-setwin span { color: #8a6055; }
        .layui-layer-setwin span:hover { color: #af0000; }
        .layui-layer-btn a {
            background-color: #f8f3da;
            border-color: rgba(102, 0, 0, 0.22);
            color: #660000;
            border-radius: 3px;
        }
        .layui-layer-btn a:hover { opacity: 1; background-color: #f2ecd2; }
        /* 确认按钮沿用全站金色渐变，与「结算」「加入購物車」同一套视觉语言 */
        .layui-layer-btn .layui-layer-btn0 {
            background: linear-gradient(135deg, #fbd03b 0%, #e8a800 100%);
            border-color: transparent;
            color: #4a2a00;
        }
        .layui-layer-btn .layui-layer-btn0:hover { filter: brightness(1.08); }
        
        /* 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: var(--c-text-muted);
            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: 3px;
            /* 目標站首屏大圖下方帶一道懸浮投影，這裡收成 1px 酒紅細邊 */
            border: 1px solid rgba(102, 0, 0, 0.16);
            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 rgba(102, 0, 0, 0.28);
            border-radius: 3px;
            color: var(--c-text-muted);
            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(1.1) saturate(0.9);
        }
        .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: #660000;
            font-size: 14px;
            font-weight: 500;
        }
        .checkout-field .required {
            margin-left: 2px;
            color: #a80d00;
        }
        .checkout-field input.layui-input,
        .checkout-field textarea.layui-textarea,
        .checkout-field select.layui-input {
            background: #fffdf6;
            color: #660000;
            border-color: rgba(102, 0, 0, 0.22);
            border-radius: 3px;
        }
        .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: #660000 !important;
            box-shadow: 0 -2px 10px rgba(102, 0, 0, 0.35);
            z-index: 999;
            border-top: 3px solid #fbd03b;
        }
        .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: #ffeac8;
            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 #660000;
            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: #fbd03b;
        }
        
        /* 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; }
        }
        /* ---------- 大乘精修：平面收尾 ---------- */
        /* 分類磁貼：近白底 + 酒紅細邊，hover 時描邊轉金，與商品卡同一套觀感。
           類名必須用 site.css 的 .category-tile（Category/All.cshtml 實際用的就是它）；
           本文件裡 als 留下的 .CategoriesItem 與 .ArticleCategories，三個視圖都沒引用，
           是死規則，不能拿來當掛載點 */
        .category-tile {
            border: 1px solid rgba(102, 0, 0, 0.16);
            border-radius: 3px;
        }
        .category-tile:hover {
            border-color: rgba(232, 168, 0, 0.75);
        }