/*!
 * 蔻心草前台设计令牌层  2026-08-23
 *
 * 审查发现站点实际有两套视觉语言：2026-06 升级过的八个页面用深林绿系，
 * 其余页面还是 style.css 的草黄绿 #53893b。而且"升级过"的八个页面之间
 * 也各写各的绿，一共八种色值；圆角有 4/5/6/7/8/12/18px 七档。
 *
 * 这个文件做三件事：
 *   1) 定义全站唯一的一套令牌（颜色 / 圆角 / 间距 / 字阶 / 过渡）
 *   2) 把旧 style.css 的默认观感抬到新标准（主色、圆角、焦点态、过渡）
 *   3) 提供标题衬线字体系统
 *
 * 加载位置：header.php 里 style.css 之后、各页面专属样式之前 ——
 * 这样它能纠正旧默认，又不会盖掉已升级页面自己的设计。
 * 令牌是 CSS 变量，位置不影响生效。
 *
 * 取舍说明：收敛到站点现有的主导值（#1f6b45 / #174829 / #c18747），
 * 不做色相偏移。"统一"是把散的收拢，不是趁机换品牌色。
 */

:root {
    /* ---- 品牌色 ---- */
    --kxc-green:        #1f6b45;   /* 主色：按钮、链接、强调 */
    --kxc-green-deep:   #174829;   /* 深色：标题、深底、悬停 */
    --kxc-green-mid:    #2a5f3f;   /* 主色与深色之间，用于渐变或次级 */
    --kxc-green-soft:   #eaf1ec;   /* 浅底：标签、选中背景 */
    --kxc-green-line:   #cfe0d5;   /* 浅描边 */

    --kxc-gold:         #c18747;   /* 强调金：勋章、引号、点缀 */
    --kxc-gold-deep:    #9c6b33;
    --kxc-gold-soft:    #f7f0e3;

    /* ---- 中性色（带一点绿偏，避免死灰）---- */
    --kxc-ink:          #17251d;   /* 正文主色 */
    --kxc-ink-soft:     #5d6a62;   /* 次要文字 */
    --kxc-ink-faint:    #8b968e;   /* 辅助文字、时间 */
    --kxc-line:         #e4e1d5;   /* 分隔线 */
    --kxc-line-soft:    #efeee7;
    --kxc-paper:        #f7f5ef;   /* 页面米白底 */
    --kxc-surface:      #ffffff;   /* 卡片底 */

    /* ---- 圆角：从七档收敛为三档 ---- */
    --kxc-radius-sm:    6px;       /* 标签、输入框、小按钮 */
    --kxc-radius:       12px;      /* 卡片、图片、面板 */
    --kxc-radius-pill:  999px;     /* 胶囊按钮 */

    /* ---- 阴影 ---- */
    --kxc-shadow-soft:  0 2px 10px rgba(23, 37, 29, .05);
    --kxc-shadow:       0 8px 28px rgba(23, 37, 29, .08);
    --kxc-shadow-lift:  0 16px 40px rgba(23, 37, 29, .12);

    /* ---- 过渡：全站统一时长与缓动 ---- */
    --kxc-ease:         cubic-bezier(.22, .61, .36, 1);
    --kxc-t-fast:       .18s;
    --kxc-t:            .3s;
    --kxc-t-slow:       .55s;

    /* ---- 字体 ---- */
    /* 标题用宋体、正文用黑体 —— 中文护肤美妆品牌最耐看的搭配。
       宋体横细竖粗自带书卷气，做标题比黑体加粗高级。
       只在标题层级使用，正文继续走系统字体，避免拖慢首屏。 */
    --kxc-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                 "SimSun", "STSong", Georgia, serif;
    --kxc-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    /* ---- 版心 ---- */
    --kxc-wrap:         1200px;
    --kxc-wrap-wide:    1320px;
}

/* ============================================================
   1  把旧 style.css 的草黄绿抬成品牌绿
   ------------------------------------------------------------
   #53893b 在 style.css 里出现 49 次，是旧页面与新页面并列时
   最先被眼睛抓到的差异。这里按用途逐条纠正，不用通配覆盖，
   避免误伤那些确实该是别的颜色的地方。
   ============================================================ */

a { transition: color var(--kxc-t-fast) var(--kxc-ease); }

/* 注意这里不写裸的 a:hover。
   色值收敛之后 style.css 里的 hover 色本来就已经是品牌绿了（46 处），
   再加一条全局 a:hover 是多余的，而且会波及自带完整配色的活动页 ——
   比如明星产品页整套是配合产品包装的薰衣草紫，链接悬停突然变绿会打架。
   只保留确实需要纠正的几个选择器。 */
.com-bread a:hover,
.page-cate a:hover,
.newslist-gr01 .cont h4,
.newslist-gr01 a:hover .cont h4 {
    color: var(--kxc-green);
}

.page-cate a.on,
.page-cate a:hover {
    background: var(--kxc-green);
    border-color: var(--kxc-green);
    color: #fff;
}

/* 分页：旧版是直角灰块 */
.paging a,
.paging span,
.pages a,
.pages span {
    border-radius: var(--kxc-radius-sm);
    transition: background var(--kxc-t-fast) var(--kxc-ease),
                border-color var(--kxc-t-fast) var(--kxc-ease),
                color var(--kxc-t-fast) var(--kxc-ease);
}
.paging a:hover,
.pages a:hover,
.paging .current,
.paging a.current,
.pages .current {
    background: var(--kxc-green);
    border-color: var(--kxc-green);
    color: #fff;
}

/* ============================================================
   2  标题衬线系统
   ------------------------------------------------------------
   只作用于内容标题，不动导航、按钮、表单 —— 那些用黑体更清晰。
   ============================================================ */

.kxc-serif,
.com-title h2,
.com-title h3,
.page-title h2,
.news-show-left .news-tit,
.product-detail-header h1,
.product-detail-header .tit {
    font-family: var(--kxc-serif);
    font-weight: 600;
    letter-spacing: .01em;
}

/* ============================================================
   3  图片与卡片的统一手感
   ------------------------------------------------------------
   旧页面几乎全是直角、无过渡。这里给通用的列表卡片补上，
   已升级页面有自己的实现，不受影响（它们的选择器更具体）。
   ============================================================ */

.newslist-gr01 li .box,
.product-list li .box,
.pro_list li .box {
    border-radius: var(--kxc-radius);
    overflow: hidden;
    transition: box-shadow var(--kxc-t) var(--kxc-ease),
                transform var(--kxc-t) var(--kxc-ease);
}
.newslist-gr01 li .box:hover,
.product-list li .box:hover,
.pro_list li .box:hover {
    box-shadow: var(--kxc-shadow);
    transform: translateY(-3px);
}

.img-scale .pic,
.img-scale .img {
    border-radius: var(--kxc-radius);
    overflow: hidden;
}
.img-scale .pic img,
.img-scale .img img {
    transition: transform var(--kxc-t-slow) var(--kxc-ease);
}
.img-scale:hover .pic img,
.img-scale:hover .img img {
    transform: scale(1.04);
}

/* ============================================================
   4  键盘焦点可见
   ------------------------------------------------------------
   实测站内绝大多数交互元素没有焦点样式，键盘用户完全看不到
   自己在哪。用 :focus-visible，鼠标点击不会出现描边。
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--kxc-green);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   5  尊重"减少动态效果"偏好
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* 视觉隐藏但读屏可读。用于首页的 h1 ——
   首屏是图像化 hero，没有现成的可见文字适合当主标题，
   但页面不能一个 h1 都没有。
   不用 display:none / visibility:hidden —— 那两种读屏软件也读不到。 */
.kxc-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* 搜索结果页的标题（这一页原来一个标题标签都没有） */
.kxc-search-title {
    color: var(--kxc-ink, #17251d);
    font-family: var(--kxc-serif, "Noto Serif SC", serif);
    font-size: 26px;
    font-weight: 600;
    margin: 26px 0 4px;
}

/* ============================================================
   搜索结果页与在线留言（2026-08-23）
   ------------------------------------------------------------
   这两页此前完全没升级：搜索结果是灰底方框 + 无卡片的方格，
   留言表单是裸输入框。都改成与产品中心、其它已升级页面一致的手感。
   模板里三处 background:#f5f5f5 的内联样式已改为 class。
   ============================================================ */

/* ---- 搜索：提示条 ---- */
.kxc-search-note {
    background: var(--kxc-green-soft, #eaf1ec);
    border: 1px solid var(--kxc-green-line, #cfe0d5);
    border-radius: var(--kxc-radius, 12px);
    color: var(--kxc-ink-soft, #5d6a62);
    font-size: 15px !important;
    line-height: 1.8;
    padding: 18px 22px !important;
}
.kxc-search-note .s_key {
    color: var(--kxc-green-deep, #174829);
    font-weight: 600;
}
.kxc-search-note .s_con {
    margin: 8px 0 0;
}

/* ---- 搜索：结果网格 ---- */
.pc-search-page .product-list,
.com-width > .product-list {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.com-width > .product-list li {
    float: none;
    margin: 0;
    width: auto;
}
.com-width > .product-list li .box {
    background: #fff;
    border: 1px solid var(--kxc-line-soft, #efeee7);
    border-radius: var(--kxc-radius, 12px);
    display: block;
    overflow: hidden;
    transition: border-color var(--kxc-t, .3s) var(--kxc-ease, ease),
                box-shadow var(--kxc-t, .3s) var(--kxc-ease, ease),
                transform var(--kxc-t, .3s) var(--kxc-ease, ease);
}
.com-width > .product-list li .box:hover {
    border-color: var(--kxc-green-line, #cfe0d5);
    box-shadow: var(--kxc-shadow, 0 8px 28px rgba(23,37,29,.08));
    transform: translateY(-3px);
}
.com-width > .product-list li .box h5 {
    color: var(--kxc-ink, #17251d);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px 18px;
    text-align: center;
}

/* ---- 在线留言：表单控件 ---- */
.message-form input[type="text"],
.message-form textarea,
#frm input[type="text"],
#frm textarea {
    background: #fff;
    border: 1px solid var(--kxc-line, #e4e1d5);
    border-radius: var(--kxc-radius-sm, 6px);
    box-sizing: border-box;
    color: var(--kxc-ink, #17251d);
    font-size: 15px;
    padding: 11px 14px;
    transition: border-color var(--kxc-t-fast, .18s) var(--kxc-ease, ease),
                box-shadow var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
#frm input[type="text"]:focus,
#frm textarea:focus {
    border-color: var(--kxc-green, #1f6b45);
    box-shadow: 0 0 0 3px rgba(31, 107, 69, .1);
    outline: none;
}
#frm textarea {
    line-height: 1.8;
    min-height: 130px;
    resize: vertical;
}
#frm label {
    color: var(--kxc-ink-soft, #5d6a62);
}
#frm .com-submit,
#frm input[type="submit"] {
    background: var(--kxc-green, #1f6b45);
    border: 1px solid var(--kxc-green, #1f6b45);
    border-radius: var(--kxc-radius-sm, 6px);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: .04em;
    min-height: 46px;
    padding: 0 40px;
    transition: background var(--kxc-t-fast, .18s) var(--kxc-ease, ease),
                box-shadow var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
#frm .com-submit:hover,
#frm input[type="submit"]:hover {
    background: var(--kxc-green-deep, #174829);
    box-shadow: 0 8px 22px rgba(31, 107, 69, .22);
}