:root{
    --te-red:#f42424;
    --te-red-deep:#d81e1e;
    --te-warm:#ff7a45;
    --te-bg:#f7f8fa;
}

/* ---------- 第 1 层：全站骨架 ---------- */

/* 页面空白底：纯白 → 极浅暖灰，卡片浮白更立体
   （只在 PC 生效，避免影响移动端 responsive.css 的满宽处理） */
@media (min-width:769px){
    body{ background:var(--te-bg); }
}

/* 导航条：纯白 → 极浅暖灰竖向微渐变 + 底部细阴影，红下边框保留 */
.nav_bg{
    background:linear-gradient(180deg,#ffffff 0%,#fdf6f4 100%);
    box-shadow:0 2px 6px rgba(244,36,36,.06);
}

/* All Products 红块：纯红 → 竖向微渐变，hover 提亮 */
.nav_firstc{
    background:linear-gradient(180deg,var(--te-red) 0%,var(--te-red-deep) 100%);
    transition:filter .2s ease;
}
.nav_firstc:hover{ filter:brightness(1.08); }

/* 横向导航项：hover 红字 + 底部滑入红短横，给点反馈 */
.nav_list li a{ position:relative; transition:color .2s ease; }
.nav_list li a::after{
    content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px;
    background:var(--te-red); transition:left .22s ease,right .22s ease;
}
.nav_list li a:hover{ color:var(--te-red); }
.nav_list li a:hover::after{ left:22px; right:22px; }

/* 楼层标题：光秃文字 → 左侧主色竖条 + 文字加重 */
.floorhd_tit{ font-weight:800; }
.floorhd_tit::before,.floorhd_tit::after{
    content:""; position:absolute; top:50%; width:34px; height:3px; margin-top:-1px;
    background:linear-gradient(90deg,transparent,var(--te-red));
    background-image:none; /* 覆盖 style.css 里的 sprite 背景图 */
}
.floorhd_tit::before{ left:-16px; transform:scaleX(-1); }
.floorhd_tit::after{ right:-16px; }

/* ---------- 第 2 层：inhome 瀑布流 ---------- */

/* 商品卡：图片 hover 微放大已**移到 style.css**（2026-09-24 卡片改版，对齐原型 koruima）。
   放在那里的原因：那边改成了 `.p-img-link img`（0,3,1），本文件这条 `.country-product-image img`
   只有 0,2,1 ⇒ 会被压过、变成永不生效的死规则（留着会误导后来人）。 */

/* 分类 tab：整块做成胶囊，未选中浅灰 / 选中红底白字。
   两处修正：① 收小尺寸（覆盖 style.css 的 min-width:170px + padding:12px 20px）；
             ② 清掉内层 span 自带的红底/圆角/内边距（style.css:408/411），
                背景只由外层胶囊承担，消除「胶囊里再套一层背景」。 */
.country-products .country-category-tabs li{
    min-width:auto;            /* 覆盖 style.css 的 170px，胶囊按内容宽 */
    padding:4px 16px;          /* 覆盖 style.css 的 12px 20px；上下 4px 收扁，横向 16px 不变 */
    border-radius:18px; background:#f4f5f7;
    margin:8px 10px 8px 6px;   /* 上下同高(8px)，加左边距(6px)使胶囊不贴容器左沿、右10px保持间隔 */
    transition:background .2s ease,color .2s ease;
}
.country-products .country-category-tabs li .p-name{ font-size:14px; }
.country-products .country-category-tabs li .p-name span{ transition:color .2s ease; }
/* 内层 span：去掉 style.css 给它的独立背景/圆角/内边距 */
.country-products .country-category-tabs li .p-name span,
.country-products .country-category-tabs li.on .p-name span{
    background:transparent !important; padding:0; border-radius:0;
}
.country-products .country-category-tabs li:not(.on):hover{ background:#fdeae4; }
.country-products .country-category-tabs li:not(.on):hover .p-name span{ color:var(--te-warm); }
.country-products .country-category-tabs li.on{
    background:linear-gradient(180deg,var(--te-red) 0%,var(--te-red-deep) 100%);
    border-bottom:none; /* 覆盖 style.css 的红下划线 */
}
.country-products .country-category-tabs li.on .p-name span{ color:#fff; }

/* 排序条：选中主色 + 暖色 hover 底 */
.country-sort-list li{ border-radius:16px; padding:4px 14px; margin:0 5px; transition:background .2s,color .2s; }
.country-sort-list li:hover{ background:#fdeae4; color:var(--te-warm); }
.country-sort-list li.on{ color:var(--te-red); font-weight:700; }
/* 改成分离胶囊后：① 原竖分隔线(li+li::before)会与选中红圈/hover胶囊底重叠打架，隐藏；
   ② 首项「综合」原有 padding-left:20px 偏宽，归一为 14px 并去掉左外边距，让整排左对齐。 */
.country-sort-list>li+li::before{ display:none; }
.country-sort-list>li:first-child{ padding-left:14px; margin-left:0; }

/* Product 楼层标题（inhome）左侧竖条已由上面 .floorhd_tit 统一处理 */


/* 工具条底：纯灰 → 极浅暖灰竖向微渐变，底部一道发丝线与下方白 logo 区分层 */
.head_bg{
    background:linear-gradient(180deg,#fbfbfc 0%,#f5f6f8 100%);
    border-bottom:1px solid #ededed;
}

/* 右侧相邻项之间加极浅竖分隔线，消除「一片灰糊」 */
.head_right .headnav + .headnav::before{
    content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px;
    background:#e6e6e6;
}

/* hover：public.css 原本变纯白底 + 左右灰描边；改为浅暖红底、去掉描边，更干净并呼应主色 */
.headnav:hover{ background:#fdeae4; }
.headnav:hover a.btn{ border-left-color:transparent; border-right-color:transparent; }
.headnav:hover span,
.headnav:hover i{ color:var(--te-red); }

/* 下拉菜单项 hover：public.css 原本浅灰底；改为浅暖红底 + 红字，和顶栏整体统一 */
.headnav ul li a:hover{ background:#fdeae4; color:var(--te-red); }

/* 登录区用户名 hover 不变红的修正：
   用户名包在 <span id="no_lang">（防翻译），而 public.css 的 .head_left span{color:#666}
   直接给 span 设了灰色，会压过 .head_left a:hover 从 <a> 继承下来的红——所以 hover 时
   只有旁边的「!」（<a> 直接文本）变红，用户名仍灰。这里 hover 时把 span 也显式设红，
   让整个「用户名!」作为同一个链接一起变红。 */
.head_left a:hover span,
.head_left a:hover #no_lang{ color:var(--te-red); }

/* 主导航栏隐藏「常见问题(question)」「政策(terms)」两项——仅 PC。
   移动端这两项会收进汉堡菜单，按用户要求保留，故用 min-width:769px 限定只在 PC 隐藏。
   只作用于 .nav_list 这一栏，售后页自己的导航(_serviceNav/service)不受影响。
   用 :has() 按 href 精准命中；IE 已被 _Layout 重定向走，:has() 现代浏览器全支持。 */
@media (min-width:769px){
    .nav_list li:has(> a[href="/pages/question"]),
    .nav_list li:has(> a[href="/pages/terms"]){ display:none !important; }
}