@charset "UTF-8";

/* --- Logo 字体（与 default 模板同一份） --- */
@font-face {
    font-family: 'LogoFont';
    src: url('fonts/logo-font.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ==========================================================================
   云螭 · EMSHOP 模板样式
   意象：云气层叠、螭纹流转。青玉为主、螭金作点睛，大量留白，克制而不寡淡。
   适配：移动优先断点 1080 / 860 / 640 / 420，桌面最大内容宽 1240px。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
    /* 青玉（主色） */
    --yc-jade-900: #17564f;
    --yc-jade-700: #22766f;
    --yc-jade: #2f8f86;
    --yc-jade-500: #4cb8a9;
    --yc-jade-200: #bfe4dd;
    --yc-jade-100: #e8f5f2;
    --yc-jade-050: #f3faf8;

    /* 螭金（点缀色） */
    --yc-gold: #c8a15c;
    --yc-gold-light: #e2c68d;
    --yc-gold-100: #faf3e4;

    /* 墨色阶 */
    --yc-ink: #16202c;
    --yc-ink-2: #47586a;
    --yc-ink-3: #7d8e9e;
    --yc-ink-4: #a8b6c2;

    /* 面与线 */
    --yc-bg: #f3f6f8;
    --yc-surface: #ffffff;
    --yc-surface-2: #f8fafb;
    --yc-line: #e2e9ef;
    --yc-line-2: #edf2f6;

    /* 功能色 */
    --yc-danger: #d9534f;
    --yc-warn: #e08a3c;

    /* 圆角 */
    --yc-r-s: 8px;
    --yc-r: 14px;
    --yc-r-l: 20px;
    --yc-r-pill: 999px;

    /* 阴影 */
    --yc-sh-xs: 0 1px 2px rgba(22, 32, 44, .04);
    --yc-sh-s: 0 2px 8px -3px rgba(22, 32, 44, .10), 0 1px 2px rgba(22, 32, 44, .04);
    --yc-sh: 0 4px 14px -6px rgba(22, 32, 44, .12), 0 1px 3px rgba(22, 32, 44, .04);
    --yc-sh-l: 0 20px 46px -26px rgba(22, 32, 44, .30), 0 2px 8px -4px rgba(22, 32, 44, .08);
    --yc-sh-jade: 0 12px 30px -14px rgba(47, 143, 134, .55);

    /* 渐变 */
    --yc-grad-jade: linear-gradient(135deg, #4cb8a9 0%, #2f8f86 55%, #22766f 100%);
    --yc-grad-gold: linear-gradient(135deg, #e2c68d 0%, #c8a15c 100%);
    --yc-grad-sheen: linear-gradient(120deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%);

    /* 字体 */
    /* 字体：与 default 模板保持一致（系统无衬线），站点名另有 LogoFont */
    --yc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --yc-font-logo: 'LogoFont', 'Orbitron', var(--yc-font);

    /* 动效 */
    --yc-ease: cubic-bezier(.24, .6, .28, 1);
    --yc-dur: .26s;

    --yc-header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.yc-body {
    margin: 0;
    min-height: 100vh;
    background: var(--yc-bg);
    color: var(--yc-ink);
    font-family: var(--yc-font);
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.yc-body.search-modal-open,
body.yc-body.mobile-nav-drawer-open { overflow: hidden; }

a {
    color: var(--yc-jade-700);
    text-decoration: none;
    transition: color var(--yc-dur) var(--yc-ease);
}
a:hover { color: var(--yc-jade-500); }

img { max-width: 100%; height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

button { font-family: inherit; }

input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--yc-jade-200); color: var(--yc-jade-900); }

/* 滚动条（桌面端） */
@media (min-width: 861px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #cfdbe3;
        border: 3px solid var(--yc-bg);
        border-radius: var(--yc-r-pill);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--yc-jade-500); }
}

/* --------------------------------------------------------------------------
   3. 云气背景
   -------------------------------------------------------------------------- */
.yc-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.yc-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

.yc-aurora__blob--1 {
    width: 46vw;
    height: 46vw;
    top: -16vw;
    right: -8vw;
    background: radial-gradient(circle at 32% 32%, rgba(76, 184, 169, .38), rgba(76, 184, 169, 0) 70%);
}

.yc-aurora__blob--2 {
    width: 40vw;
    height: 40vw;
    top: 26vh;
    left: -14vw;
    background: radial-gradient(circle at 50% 50%, rgba(200, 161, 92, .20), rgba(200, 161, 92, 0) 70%);
}

.yc-aurora__blob--3 {
    width: 52vw;
    height: 52vw;
    bottom: -22vw;
    right: -12vw;
    background: radial-gradient(circle at 50% 50%, rgba(120, 178, 214, .20), rgba(120, 178, 214, 0) 70%);
}

/* 极淡的云纹肌理：用 SVG data-uri 平铺，只做质感不做干扰 */
.yc-aurora__grain {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%232f8f86' stroke-width='1' stroke-opacity='.05'%3E%3Cpath d='M-20 60c18 0 24-14 38-14s16 14 34 14 22-14 38-14 18 14 36 14 22-14 38-14 18 14 36 14'/%3E%3Cpath d='M-20 96c18 0 24-14 38-14s16 14 34 14 22-14 38-14 18 14 36 14 22-14 38-14 18 14 36 14'/%3E%3Cpath d='M-20 132c18 0 24-14 38-14s16 14 34 14 22-14 38-14 18 14 36 14 22-14 38-14 18 14 36 14'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* 内容层要盖在背景之上 */
.site-header,
#main,
.site-footer,
.yc-topbar { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. 布局容器
   -------------------------------------------------------------------------- */
.wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.page-body {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 24px 72px;
}

.section { margin-bottom: 30px; }

@media (max-width: 640px) {
    .wrapper { padding: 0 16px; }
    .page-body { padding: 18px 16px 56px; }
}

/* --------------------------------------------------------------------------
   5. PJAX 进度条
   -------------------------------------------------------------------------- */
.pjax-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 0;
    height: 2px;
    background: var(--yc-grad-jade);
    box-shadow: 0 0 12px rgba(76, 184, 169, .8);
    opacity: 0;
    pointer-events: none;
}

.pjax-bar.running {
    opacity: 1;
    width: 72%;
    transition: width 6s cubic-bezier(.08, .72, .16, 1), opacity .2s linear;
}

.pjax-bar.done {
    opacity: 1;
    width: 100%;
    transition: width .28s ease-out, opacity .3s linear .18s;
}

/* --------------------------------------------------------------------------
   6. 按钮
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--yc-dur) var(--yc-ease),
        border-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

.btn-primary {
    background: var(--yc-grad-jade);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--yc-sh-jade);
}

.btn-primary:hover {
    background: var(--yc-grad-jade);
    color: #fff;
    filter: saturate(1.08) brightness(1.04);
    box-shadow: 0 16px 34px -14px rgba(47, 143, 134, .68);
}

.btn-outline {
    background: rgba(255, 255, 255, .72);
    border-color: var(--yc-line);
    color: var(--yc-ink-2);
}

.btn-outline:hover {
    border-color: var(--yc-jade-500);
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

.btn-lg { padding: 13px 28px; font-size: 15px; }

.yc-btn-glow { position: relative; overflow: hidden; }

.yc-btn-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--yc-grad-sheen);
    opacity: 0;
    transition: opacity var(--yc-dur) var(--yc-ease);
}

.yc-btn-glow:hover::after { opacity: 1; }

.btn:disabled,
.btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. 顶部细条
   -------------------------------------------------------------------------- */
.yc-topbar {
    background: linear-gradient(90deg, #17564f 0%, #22766f 48%, #2f8f86 100%);
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    letter-spacing: .2px;
}

.yc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 36px;
}

.yc-topbar__slogan {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yc-topbar__slogan .fa { color: var(--yc-gold-light); }

.yc-topbar__links { display: inline-flex; align-items: center; gap: 18px; }

.yc-topbar__links a {
    color: rgba(255, 255, 255, .82);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.yc-topbar__links a:hover { color: #fff; }

@media (max-width: 860px) {
    .yc-topbar { display: none; }
}

/* --------------------------------------------------------------------------
   8. 页头
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(226, 233, 239, .9);
    transition: box-shadow var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 30px -22px rgba(22, 32, 44, .5);
}

.yc-header__inner {
    display: flex;
    align-items: center;
    /* 窄屏会把 .main-nav 隐藏，用 space-between 把右侧功能区顶到最右边，
       否则它会紧贴 Logo，整条导航右边空出一大块 */
    justify-content: space-between;
    gap: 20px;
    min-height: var(--yc-header-h);
}

/* Logo */
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--yc-ink);
}

.yc-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--yc-jade-050);
    border: 1px solid var(--yc-jade-100);
    transition: background-color var(--yc-dur) var(--yc-ease), border-color var(--yc-dur) var(--yc-ease);
}

.site-logo:hover .yc-logo-mark {
    background: var(--yc-jade-100);
    border-color: var(--yc-jade-200);
}

/* 站长在「模板设置」里传了自己的 Logo：去掉方框底色/描边，按图片原始比例撑开
   （宽高都留上限，横版字标也不会把页头撑变形） */
.yc-logo-mark--img {
    width: auto;
    height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.site-logo:hover .yc-logo-mark--img {
    border-color: transparent;
    background: transparent;
}

.yc-logo-img {
    display: block;
    max-height: 40px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.site-logo-text {
    font-family: var(--yc-font-logo);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(120deg, var(--yc-jade-900), var(--yc-jade) 60%, var(--yc-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.site-logo-img { max-height: 38px; width: auto; }

/* 主导航 */
.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav > a,
.main-nav .nav-dropdown > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 15px;
    border-radius: var(--yc-r-pill);
    color: var(--yc-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.main-nav > a::after,
.main-nav .nav-dropdown > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--yc-grad-jade);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--yc-dur) var(--yc-ease);
}

.main-nav > a:hover,
.main-nav .nav-dropdown > a:hover {
    color: var(--yc-jade-700);
    background: var(--yc-jade-050);
}

.main-nav > a:hover::after,
.main-nav .nav-dropdown > a:hover::after { transform: translateX(-50%) scaleX(1); }

.main-nav > a.active,
.main-nav .nav-dropdown > a.active {
    color: var(--yc-jade-700);
    font-weight: 600;
}

.main-nav > a.active::after,
.main-nav .nav-dropdown > a.active::after { transform: translateX(-50%) scaleX(1); }

.nav-arrow { opacity: .55; transition: transform var(--yc-dur) var(--yc-ease); }
.nav-dropdown:hover .nav-arrow { transform: rotate(180deg); }

/* 二级下拉 */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    padding: 8px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--yc-dur) var(--yc-ease), visibility var(--yc-dur) var(--yc-ease);
}

.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; }

.nav-dropdown-menu a {
    display: block;
    padding: 9px 13px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-2);
    font-size: 13.5px;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

/* 右侧功能区 */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--yc-r-pill);
    background: transparent;
    color: var(--yc-ink-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        border-color var(--yc-dur) var(--yc-ease);
}

.header-action-btn:hover {
    background: var(--yc-jade-050);
    border-color: var(--yc-jade-100);
    color: var(--yc-jade-700);
}

.header-action-btn--text { padding: 0 14px; }

/* 用户下拉 */
.header-user-dropdown { position: relative; }

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    cursor: pointer;
    color: var(--yc-ink);
    transition: border-color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.header-user:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); }

.header-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.header-user-avatar--default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    font-size: 14px;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink);
    max-width: 118px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-user-money { font-size: 11.5px; color: var(--yc-gold); font-weight: 600; }

.header-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 176px;
    padding: 8px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--yc-dur) var(--yc-ease), visibility var(--yc-dur) var(--yc-ease);
}

.header-user-dropdown:hover .header-user-menu,
.header-user-dropdown:focus-within .header-user-menu { opacity: 1; visibility: visible; }

.header-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-2);
    font-size: 13.5px;
}

.header-user-menu-item .fa { width: 15px; text-align: center; color: var(--yc-ink-4); }

.header-user-menu-item:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }
.header-user-menu-item:hover .fa { color: var(--yc-jade); }

.header-user-menu-item--danger:hover { background: #fdf2f2; color: var(--yc-danger); }
.header-user-menu-item--danger:hover .fa { color: var(--yc-danger); }

.header-user-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--yc-line-2);
}

/* 汉堡按钮 */
.header-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 38px;
    padding: 0 9px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    cursor: pointer;
}

.hamburger-line {
    display: block;
    height: 1.8px;
    border-radius: 2px;
    background: var(--yc-ink-2);
    transition: background-color var(--yc-dur) var(--yc-ease), opacity var(--yc-dur) var(--yc-ease);
}

.header-menu-btn:hover .hamburger-line { background: var(--yc-jade); }

.header-menu-btn.active .hamburger-line { background: var(--yc-jade-700); }
.header-menu-btn.active .hamburger-line:nth-child(1) { opacity: .4; }
.header-menu-btn.active .hamburger-line:nth-child(3) { opacity: .4; }

@media (max-width: 1080px) {
    .main-nav { display: none; }
    .header-menu-btn { display: flex; }
    .header-action-btn--text span { display: none; }
    .header-user-info { display: none; }
    .header-user { padding: 5px; border-color: transparent; }
}

@media (max-width: 640px) {
    .site-logo-text { font-size: 18px; letter-spacing: 1px; }
    .yc-logo-mark { width: 34px; height: 34px; border-radius: 10px; }
    .yc-logo-mark svg { width: 30px; height: 30px; }
    /* 自定义 Logo：别被上面的固定 34px 方框框住 */
    .yc-logo-mark--img { width: auto; height: auto; }
    .yc-logo-img { max-height: 34px; max-width: 120px; }
}

/* --------------------------------------------------------------------------
   9. 移动端侧滑菜单
   -------------------------------------------------------------------------- */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(16, 26, 36, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--yc-dur) var(--yc-ease), visibility var(--yc-dur) var(--yc-ease);
}

.mobile-nav-backdrop.mobile-nav--shown { display: block; visibility: visible; }
.mobile-nav-backdrop.is-open { opacity: 1; }

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    width: min(84vw, 340px);
    background: var(--yc-surface);
    box-shadow: -20px 0 50px -30px rgba(16, 26, 36, .6);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .34s var(--yc-ease), visibility .34s var(--yc-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-nav.mobile-nav--shown { visibility: visible; }
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-inner { padding: 22px 16px 40px; }

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-2);
    font-size: 14.5px;
    font-weight: 500;
}

.mobile-nav-item .fa { width: 18px; text-align: center; color: var(--yc-ink-4); }

.mobile-nav-item:hover,
.mobile-nav-item.active {
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

.mobile-nav-item.active .fa,
.mobile-nav-item:hover .fa { color: var(--yc-jade); }

.mobile-nav-toggle { cursor: pointer; }

.mobile-nav-arrow {
    margin-left: auto;
    width: auto !important;
    transition: transform var(--yc-dur) var(--yc-ease);
}

.mobile-nav-toggle.open .mobile-nav-arrow { transform: rotate(180deg); }

.mobile-nav-sub {
    display: none;
    padding: 2px 0 6px 30px;
}

.mobile-nav-sub.open { display: block; }

.mobile-nav-sub-item {
    display: block;
    padding: 9px 14px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-3);
    font-size: 13.5px;
}

.mobile-nav-sub-item:hover,
.mobile-nav-sub-item.active { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.mobile-nav-divider {
    height: 1px;
    margin: 12px 8px;
    background: var(--yc-line-2);
}

.mobile-nav-logout { color: var(--yc-danger); }
.mobile-nav-logout .fa { color: var(--yc-danger); }

/* --------------------------------------------------------------------------
   10. 搜索弹窗
   -------------------------------------------------------------------------- */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: none;
}

.search-modal.active { display: block; }

.search-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(16, 26, 36, .46);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--yc-dur) var(--yc-ease);
}

.search-modal.active .search-modal-mask { opacity: 1; }

.search-modal-stage {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: 12vh 20px 20px;
    overflow-y: auto;
}

.search-modal-body {
    width: 100%;
    max-width: 620px;
    padding: 28px 28px 24px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh-l);
    opacity: 0;
    transition: opacity var(--yc-dur) var(--yc-ease);
}

.search-modal.active .search-modal-body { opacity: 1; }

.yc-search-modal__title {
    margin-bottom: 16px;
    font-family: var(--yc-font);
    font-size: 19px;
    letter-spacing: 1px;
    color: var(--yc-ink);
}

.search-modal-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--yc-surface-2);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
}

.search-modal-tab {
    padding: 6px 18px;
    border: 0;
    border-radius: var(--yc-r-pill);
    background: transparent;
    color: var(--yc-ink-3);
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.search-modal-tab:hover { color: var(--yc-jade-700); }

.search-modal-tab.active {
    background: var(--yc-surface);
    color: var(--yc-jade-700);
    font-weight: 600;
    box-shadow: var(--yc-sh-xs);
}

.search-modal-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    background: var(--yc-surface-2);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    transition: border-color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.search-modal-bar:focus-within {
    background: var(--yc-surface);
    border-color: var(--yc-jade-500);
    box-shadow: 0 0 0 4px rgba(76, 184, 169, .12);
}

.search-modal-bar input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--yc-ink);
}

.search-modal-bar input::placeholder { color: var(--yc-ink-4); }

.search-modal-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-jade);
    color: #fff;
    cursor: pointer;
    transition: filter var(--yc-dur) var(--yc-ease);
}

.search-modal-bar button:hover { filter: brightness(1.06); }

.search-modal-hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--yc-ink-4);
}

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    margin-top: 40px;
    padding-top: 24px;
    background: linear-gradient(180deg, #1b2a35 0%, #16222c 100%);
    color: rgba(233, 240, 245, .72);
    overflow: hidden;
}

.site-footer__cloud {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 78px;
    color: #16222c;
    opacity: .95;
}

.site-footer__cloud svg { display: block; width: 100%; height: 100%; }

.site-footer .wrapper { position: relative; z-index: 1; }

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 34px;
    padding: 44px 0 30px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.yc-logo-mark--foot {
    background: rgba(76, 184, 169, .1);
    border-color: rgba(76, 184, 169, .22);
}

/* 页脚用模板配置的 Logo 图片时：同样脱掉方框底色，按图片原始比例撑开 */
.yc-logo-mark--foot.yc-logo-mark--img {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border-color: transparent;
}

.yc-logo-img--foot { max-height: 32px; max-width: 150px; }

.site-footer__name {
    font-family: var(--yc-font-logo);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #eef5f4;
}

.site-footer__desc {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.85;
    color: rgba(214, 226, 233, .62);
    max-width: 340px;
}

.site-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }

.site-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid rgba(76, 184, 169, .26);
    border-radius: var(--yc-r-pill);
    background: rgba(76, 184, 169, .08);
    color: #9fd6cc;
    font-size: 12px;
}

.site-footer__col-title {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #eef5f4;
    letter-spacing: .5px;
}

.site-footer__links { display: flex; flex-direction: column; gap: 9px; }

.site-footer__links a,
.site-footer__contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(214, 226, 233, .66);
    transition: color var(--yc-dur) var(--yc-ease);
}

.site-footer__links a:hover { color: var(--yc-jade-500); }

.site-footer__links .fa { color: rgba(200, 161, 92, .75); }

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12.5px;
    color: rgba(200, 214, 223, .55);
}

.site-footer__copy { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-footer__sep { opacity: .45; }

.site-footer__icp a { color: rgba(200, 214, 223, .55); }
.site-footer__icp a:hover { color: var(--yc-jade-500); }

@media (max-width: 1080px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 640px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 22px; padding: 34px 0 22px; }
    .site-footer__desc { max-width: none; }
    .site-footer__bottom { justify-content: center; text-align: center; }
}

/* 回到顶部 */
.yc-totop {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 880;
    width: 44px;
    height: 44px;
    border: 1px solid var(--yc-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    color: var(--yc-jade-700);
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--yc-sh);
    transition: opacity var(--yc-dur) var(--yc-ease),
        visibility var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        border-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.yc-totop.is-visible { opacity: 1; visibility: visible; }

.yc-totop:hover {
    background: var(--yc-grad-jade);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 640px) {
    .yc-totop { right: 14px; bottom: 18px; width: 40px; height: 40px; font-size: 18px; }
}

/* --------------------------------------------------------------------------
   12. 通用卡片
   -------------------------------------------------------------------------- */
.card {
    display: block;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
    transition: border-color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease);
}

/* --------------------------------------------------------------------------
   13. 区块标题
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.section-title {
    position: relative;
    padding-left: 14px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--yc-ink);
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: var(--yc-grad-jade);
    transform: translateY(-50%);
}

.yc-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.yc-sec-head--plain { margin-bottom: 14px; }

.yc-sec-head__left { display: flex; align-items: center; gap: 12px; }

.yc-sec-head__mark {
    display: block;
    width: 4px;
    height: 34px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--yc-jade-500), var(--yc-gold));
}

.yc-sec-head__title {
    font-family: var(--yc-font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--yc-ink);
}

.yc-sec-head__sub { font-size: 12.5px; color: var(--yc-ink-4); }

.home-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-3);
    font-size: 13px;
    white-space: nowrap;
    transition: border-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease);
}

.home-all-btn:hover {
    border-color: var(--yc-jade-200);
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

@media (max-width: 640px) {
    .yc-sec-head { align-items: flex-start; }
    .yc-sec-head__title { font-size: 18px; }
    .yc-sec-head__sub { display: none; }
}

/* --------------------------------------------------------------------------
   14. 首页主视觉
   -------------------------------------------------------------------------- */
.yc-hero {
    position: relative;
    margin-bottom: 34px;
    padding: 44px 44px 40px;
    border: 1px solid rgba(191, 228, 221, .8);
    border-radius: 26px;
    background:
        radial-gradient(120% 130% at 8% 0%, rgba(232, 245, 242, .95) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(90% 120% at 96% 96%, rgba(250, 243, 228, .9) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(140deg, #ffffff 0%, #f7fbfa 100%);
    box-shadow: var(--yc-sh);
    overflow: hidden;
}

.yc-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 30px;
    align-items: center;
}

.yc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--yc-jade-200);
    border-radius: var(--yc-r-pill);
    background: rgba(255, 255, 255, .8);
    color: var(--yc-jade-700);
    font-size: 12.5px;
    letter-spacing: .8px;
}

.yc-hero__eyebrow .fa { color: var(--yc-gold); }

.yc-hero__title {
    font-family: var(--yc-font);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 1px;
    color: var(--yc-ink);
}

.yc-hero__title-accent {
    display: block;
    background: linear-gradient(100deg, var(--yc-jade-700), var(--yc-jade-500) 55%, var(--yc-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yc-hero__desc {
    margin-top: 14px;
    max-width: 460px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--yc-ink-2);
}

.yc-hero__search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 460px;
    margin-top: 22px;
    padding: 6px 6px 6px 16px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    box-shadow: var(--yc-sh-s);
    transition: border-color var(--yc-dur) var(--yc-ease), box-shadow var(--yc-dur) var(--yc-ease);
}

.yc-hero__search:focus-within {
    border-color: var(--yc-jade-500);
    box-shadow: 0 0 0 4px rgba(76, 184, 169, .13);
}

.yc-hero__search-ico { color: var(--yc-ink-4); font-size: 15px; }

.yc-hero__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14.5px;
    color: var(--yc-ink);
}

.yc-hero__search-input::placeholder { color: var(--yc-ink-4); }

.yc-hero__search-btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-jade);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: filter var(--yc-dur) var(--yc-ease);
}

.yc-hero__search-btn:hover { filter: brightness(1.07); }

.yc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.yc-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px dashed var(--yc-jade-200);
}

.yc-hero__stat { display: flex; flex-direction: column; gap: 3px; }

.yc-hero__stat-num {
    font-family: var(--yc-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--yc-jade-700);
    letter-spacing: .5px;
}

.yc-hero__stat-label { font-size: 12.5px; color: var(--yc-ink-4); }

/* 主视觉右侧插画 */
.yc-hero__art {
    position: relative;
    min-height: 280px;
}

.yc-hero__dragon {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    max-width: 420px;
    margin: 0 auto;
}

.yc-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
}

.yc-hero__orb--1 {
    width: 190px;
    height: 190px;
    top: 6%;
    right: 6%;
    background: radial-gradient(circle at 40% 40%, rgba(76, 184, 169, .5), rgba(76, 184, 169, 0) 70%);
}

.yc-hero__orb--2 {
    width: 150px;
    height: 150px;
    bottom: 4%;
    left: 4%;
    background: radial-gradient(circle at 50% 50%, rgba(200, 161, 92, .38), rgba(200, 161, 92, 0) 70%);
}

.yc-hero__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border: 1px dashed rgba(76, 184, 169, .34);
    border-radius: 50%;
}

@media (max-width: 1080px) {
    .yc-hero { padding: 34px 28px; }
    .yc-hero__inner { grid-template-columns: 1fr; gap: 10px; }
    .yc-hero__title { font-size: 30px; }
    .yc-hero__art { display: none; }
}

@media (max-width: 640px) {
    .yc-hero {
        padding: 24px 18px 22px;
        border-radius: 20px;
        margin-bottom: 24px;
    }
    .yc-hero__title { font-size: 24px; }
    .yc-hero__desc { font-size: 13.5px; }
    .yc-hero__search { flex-wrap: wrap; padding: 10px; border-radius: var(--yc-r); }
    .yc-hero__search-input { height: 34px; padding-left: 6px; }
    .yc-hero__search-btn { width: 100%; }
    .yc-hero__actions .btn { flex: 1 1 100%; }
    .yc-hero__stats { gap: 18px; margin-top: 22px; padding-top: 16px; }
    .yc-hero__stat-num { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   15. 首页分类磁贴
   -------------------------------------------------------------------------- */
.yc-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.yc-cat-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 16px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
    color: var(--yc-ink);
    transition: border-color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease);
}

.yc-cat-tile:hover {
    border-color: var(--yc-jade-200);
    background: linear-gradient(140deg, #ffffff 0%, var(--yc-jade-050) 100%);
    box-shadow: var(--yc-sh-s);
    color: var(--yc-ink);
}

.yc-cat-tile__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    font-size: 19px;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.yc-cat-tile__ico img { width: 26px; height: 26px; object-fit: contain; }

.yc-cat-tile:hover .yc-cat-tile__ico { background: var(--yc-jade-200); color: var(--yc-jade-900); }

.yc-cat-tile__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

.yc-cat-tile__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--yc-ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yc-cat-tile__count { font-size: 12px; color: var(--yc-ink-4); }

.yc-cat-tile__arrow {
    margin-left: auto;
    color: var(--yc-ink-4);
    font-size: 17px;
    transition: color var(--yc-dur) var(--yc-ease);
}

.yc-cat-tile:hover .yc-cat-tile__arrow { color: var(--yc-jade); }

@media (max-width: 1080px) {
    .yc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .yc-cats { grid-template-columns: 1fr; }
    .yc-cat-tile { padding: 13px 14px; }
    .yc-cat-tile__ico { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
}

/* --------------------------------------------------------------------------
   16. 商品网格与卡片
   -------------------------------------------------------------------------- */
.goods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 16px;
}

.goods-card { overflow: hidden; position: relative; }

.goods-card:hover {
    border-color: var(--yc-jade-200);
    box-shadow: var(--yc-sh);
}

.card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--yc-surface-2);
    overflow: hidden;
}

.card-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.goods-no-image {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, rgba(76, 184, 169, .18), rgba(76, 184, 169, 0) 62%),
        radial-gradient(circle at 74% 70%, rgba(200, 161, 92, .16), rgba(200, 161, 92, 0) 60%),
        var(--yc-surface-2);
}

.card-body { padding: 14px 15px 15px; }

.card-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--yc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 43px;
}

.card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--yc-ink-4);
}

.card-bottom {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    /* 价格行收一下行高：继承 body 的 1.65 会在数字上下各撑出一大截空白 */
    line-height: 1.2;
    border-top: 1px dashed var(--yc-line-2);
}

.price {
    font-family: var(--yc-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--yc-jade-700);
    letter-spacing: .4px;
}

.price-original {
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--yc-ink-4);
    text-decoration: line-through;
}

/* 商品徽标 */
.goods-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: var(--yc-r-pill);
    font-size: 11.5px;
    line-height: 1.7;
    color: #fff;
    backdrop-filter: blur(6px);
}

.goods-badge--auto { background: linear-gradient(135deg, rgba(76, 184, 169, .96), rgba(47, 143, 134, .96)); }
.goods-badge--manual { background: linear-gradient(135deg, rgba(226, 198, 141, .96), rgba(200, 161, 92, .96)); }

/* 售罄 */
.goods-soldout-stamp {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 244, 247, .74);
    backdrop-filter: blur(1.5px);
}

.goods-soldout-stamp__text {
    padding: 6px 18px;
    border: 1.5px solid rgba(120, 138, 154, .8);
    border-radius: var(--yc-r-pill);
    color: #5d6f80;
    font-size: 13px;
    letter-spacing: 2px;
}

.goods-card.stock-empty-box .card-img > img { filter: grayscale(.55) opacity(.75); }
.goods-card.is-blocked { cursor: not-allowed; }

/* 首页精选 / 文章网格 */
.home-featured { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
}

.article-grid-card { overflow: hidden; }
.article-grid-card:hover { border-color: var(--yc-jade-200); box-shadow: var(--yc-sh); }

.article-grid-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yc-surface-2); }
.article-grid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-grid-body { padding: 14px 16px 16px; }

.card-excerpt {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--yc-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--yc-ink-4);
}

@media (max-width: 640px) {
    .goods-grid,
    .home-featured,
    .article-grid { grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 11px; }
    .card-body { padding: 11px 11px 12px; }
    .card-title { font-size: 13.5px; min-height: 40px; }
    .price { font-size: 16.5px; }
    .card-bottom { margin-top: 9px; padding-top: 8px; }
    .goods-badge { top: 7px; left: 7px; padding: 2px 8px; font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   17. 商品列表页（分类条 + 主区）
   -------------------------------------------------------------------------- */
/* 分类条：横向 chips，摆在排序栏上方；桌面换行铺开，手机整行左右滑动 */
.yc-cat-bar {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
}

.yc-cat-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 第二行：当前父级分类的子分类，用虚线跟第一行分开 */
.yc-cat-bar__row--sub {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--yc-line-2);
}

.yc-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface-2);
    color: var(--yc-ink-2);
    font-size: 13px;
    white-space: nowrap;
    transition: background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

.yc-cat-chip:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.yc-cat-chip.is-active {
    background: var(--yc-grad-jade);
    color: #fff;
    font-weight: 500;
    box-shadow: var(--yc-sh-jade);
}

.yc-cat-chip__ico { color: var(--yc-ink-4); font-size: 12.5px; }
.yc-cat-chip:hover .yc-cat-chip__ico { color: var(--yc-jade); }
.yc-cat-chip.is-active .yc-cat-chip__ico { color: rgba(255, 255, 255, .9); }

.yc-cat-chip__icon { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }

.yc-cat-chip__count {
    font-size: 11.5px;
    color: var(--yc-ink-4);
}

.yc-cat-chip.is-active .yc-cat-chip__count { color: rgba(255, 255, 255, .85); }

.yc-cat-chip--sub { padding: 5px 12px; font-size: 12.5px; background: transparent; }
.yc-cat-chip--sub:hover { background: var(--yc-jade-050); }

.sidebar-cat-list { padding: 8px; }

.sidebar-cat-group + .sidebar-cat-group { margin-top: 2px; }

.sidebar-cat-parent-row { display: flex; align-items: center; gap: 2px; }

.sidebar-cat-parent {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-2);
    font-size: 13.5px;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.sidebar-cat-parent:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.sidebar-cat-parent.is-active {
    background: var(--yc-jade-100);
    color: var(--yc-jade-900);
    font-weight: 600;
}

.sidebar-cat-ico { width: 16px; text-align: center; color: var(--yc-ink-4); font-size: 13px; }
.sidebar-cat-parent.is-active .sidebar-cat-ico,
.sidebar-cat-parent:hover .sidebar-cat-ico { color: var(--yc-jade); }

.sidebar-cat-icon { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }

.sidebar-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-cat-count {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--yc-ink-4);
    background: var(--yc-surface-2);
    border-radius: var(--yc-r-pill);
    padding: 1px 8px;
}

.sidebar-cat-parent.is-active .sidebar-cat-count {
    background: rgba(255, 255, 255, .8);
    color: var(--yc-jade-700);
}

.sidebar-cat-arrow {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--yc-ink-4);
    font-size: 11px;
    cursor: pointer;
    transition: color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.sidebar-cat-arrow:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }
.sidebar-cat-arrow.is-open { color: var(--yc-jade-700); background: var(--yc-jade-050); }

.sidebar-cat-children { padding: 2px 0 6px 22px; }

.sidebar-cat-child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--yc-r-s);
    color: var(--yc-ink-3);
    font-size: 13px;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.sidebar-cat-child:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.sidebar-cat-child.is-active {
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
    font-weight: 600;
}

/* 主区 */
.shop-main { min-width: 0; }

.yc-pagehead {
    position: relative;
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    background: linear-gradient(135deg, #ffffff 0%, var(--yc-jade-050) 100%);
    box-shadow: var(--yc-sh-xs);
}

.yc-pagehead__crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--yc-ink-4);
}

.yc-pagehead__crumb a { color: var(--yc-ink-3); }
.yc-pagehead__crumb a:hover { color: var(--yc-jade-700); }
.yc-pagehead__sep { opacity: .6; }

.yc-pagehead__title {
    margin-top: 6px;
    font-family: var(--yc-font);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--yc-ink);
}

.yc-pagehead__meta { margin-top: 5px; font-size: 12.5px; color: var(--yc-ink-4); }
.yc-pagehead__meta strong { color: var(--yc-jade-700); font-size: 14px; }
.yc-pagehead__meta-sep { margin: 0 5px; opacity: .6; }

/* 排序栏 */
/* 工具条外壳：左边排序、右边搜索 */
.yc-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 10px;
    margin-bottom: 16px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
}

/* 排序只是这条里的一组链接 */
.goods-sort-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.goods-sort-link {
    padding: 6px 16px;
    border-radius: var(--yc-r-pill);
    color: var(--yc-ink-3);
    font-size: 13px;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.goods-sort-link:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.goods-sort-link.active {
    background: var(--yc-grad-jade);
    color: #fff;
    font-weight: 500;
}

/* 分类条任何宽度下都整块平铺（.yc-cat-bar__row 基础样式就是 flex-wrap: wrap）：
   不做横向滚动 —— 横滑区域看不出"还能滑"，客户会以为分类就这几个。 */

@media (max-width: 640px) {
    .yc-pagehead { padding: 15px 16px; }
    .yc-pagehead__title { font-size: 19px; }
    .yc-cat-bar { padding: 9px 10px; margin-bottom: 10px; }
    .yc-cat-chip { padding: 6px 12px; font-size: 12.5px; }
    .yc-cat-chip--sub { padding: 5px 11px; font-size: 12px; }
    /* 窄屏：排序条横向滚动占一行，搜索框单独占一行 */
    .yc-list-bar { padding: 8px; gap: 8px; }

    .goods-sort-bar {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .goods-sort-bar::-webkit-scrollbar { display: none; }
    .goods-sort-link { white-space: nowrap; padding: 6px 14px; }

    .yc-list-search { flex: 1 1 100%; margin-left: 0; }
}

/* 前端静态搜索框：贴着工具条右边 */
.yc-list-search {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 250px;
    min-width: 0;
    margin-left: auto;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface-2);
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

/* 关掉排序后只剩搜索框：让它占满整条，别缩在右边空出半行 */
.yc-list-search:only-child {
    flex: 1 1 auto;
    margin-left: 0;
}

.yc-list-search:focus-within {
    border-color: var(--yc-jade-200);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(76, 184, 169, .18), 0 10px 30px -12px rgba(47, 143, 134, .45);
}

.yc-list-search > .fa { flex: 0 0 auto; color: var(--yc-ink-4); font-size: 13px; }

.yc-list-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--yc-ink);
    font-size: 13px;
    outline: none;
}

.yc-list-search input::placeholder { color: var(--yc-ink-4); }

.yc-list-search__clear {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--yc-ink-4);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.yc-list-search__clear:hover { color: var(--yc-jade-700); }

/* 前端搜索没命中 */
.yc-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    background: var(--yc-surface);
    box-shadow: var(--yc-sh-xs);
    color: var(--yc-ink-3);
    font-size: 13.5px;
}

/* hidden 属性是 UA 样式的 display:none，压不过上面那条 display:flex，得显式写一条 */
.yc-filter-empty[hidden] { display: none; }

.yc-filter-empty .fa { font-size: 26px; color: var(--yc-ink-4); }

/* --------------------------------------------------------------------------
   18. 分页
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 28px;
}

.pagination-btn,
.pagination-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13.5px;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.pagination-btn:hover,
.pagination-num:hover {
    border-color: var(--yc-jade-200);
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

.pagination-num.active {
    background: var(--yc-grad-jade);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: var(--yc-sh-jade);
}

.pagination-btn.disabled {
    color: var(--yc-ink-4);
    background: var(--yc-surface-2);
    cursor: not-allowed;
}

.pagination-btn.disabled:hover { border-color: var(--yc-line); background: var(--yc-surface-2); color: var(--yc-ink-4); }

.pagination-dots { color: var(--yc-ink-4); padding: 0 2px; }

/* --------------------------------------------------------------------------
   19. 面包屑
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--yc-ink-4);
}

.breadcrumb a { color: var(--yc-ink-3); }
.breadcrumb a:hover { color: var(--yc-jade-700); }
.breadcrumb .sep { opacity: .55; }

/* --------------------------------------------------------------------------
   20. 店铺公告
   -------------------------------------------------------------------------- */
.site-announcement {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* 上边距 = 与页头之间的呼吸缝；下方间距交给 .page-body--announce，这里不再留 */
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--yc-jade-200);
    border-radius: var(--yc-r);
    background: linear-gradient(120deg, var(--yc-jade-050) 0%, var(--yc-gold-100) 130%);
}

/* 页面顶部有公告时，页面主体只留 15px 上间距（默认 26px 会让公告与首屏板块离得太远） */
.page-body--announce { padding-top: 15px; }

.site-announcement__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--yc-jade-700);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}

.site-announcement__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--yc-gold);
    font-size: 12px;
}

.site-announcement__title-sep {
    width: 1px;
    height: 14px;
    background: var(--yc-jade-200);
}

.site-announcement__body {
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--yc-ink-2);
}

.site-announcement__body a { color: var(--yc-jade-700); text-decoration: underline; }

@media (max-width: 640px) {
    .site-announcement { flex-direction: column; gap: 8px; margin-top: 14px; padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
   21. 空态
   -------------------------------------------------------------------------- */
.empty-state {
    padding: 52px 24px;
    text-align: center;
    border-style: dashed;
    background: rgba(255, 255, 255, .7);
}

.empty-state h3 { margin: 0 0 8px; font-size: 17px; color: var(--yc-ink); }
.empty-state p { margin: 0 0 18px; font-size: 13.5px; color: var(--yc-ink-3); }
.empty-state p a { color: var(--yc-jade-700); text-decoration: underline; }
.empty-state .btn { margin-top: 4px; }

.empty-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--yc-jade-200);
}

.empty-icon--glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--yc-jade-100), rgba(232, 245, 242, 0) 72%);
    color: var(--yc-jade);
    font-size: 28px;
}

.empty-state--rich { position: relative; overflow: hidden; }

.empty-decor { position: absolute; inset: 0; pointer-events: none; }

.empty-decor__dot {
    position: absolute;
    border-radius: 50%;
    background: var(--yc-jade-100);
}

.empty-decor__dot--1 { width: 10px; height: 10px; top: 22%; left: 16%; }
.empty-decor__dot--2 { width: 6px; height: 6px; top: 62%; left: 26%; background: var(--yc-gold-100); }
.empty-decor__dot--3 { width: 8px; height: 8px; top: 34%; right: 18%; background: var(--yc-gold-100); }

.empty-decor__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    border: 1px dashed var(--yc-jade-100);
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   22. 通用页面标题 / 404 / 密码页
   -------------------------------------------------------------------------- */
.page-title {
    margin-bottom: 8px;
    font-family: var(--yc-font);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--yc-ink);
}

.not-found {
    padding: 70px 20px;
    text-align: center;
}

.not-found-code {
    font-family: var(--yc-font);
    font-size: 92px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 4px;
    background: linear-gradient(120deg, var(--yc-jade-500), var(--yc-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.not-found-title { margin-top: 14px; font-size: 20px; font-weight: 600; color: var(--yc-ink); }
.not-found-desc { margin: 10px 0 26px; font-size: 14px; color: var(--yc-ink-3); line-height: 1.9; }

.password-page {
    max-width: 460px;
    margin: 60px auto;
    padding: 52px 36px;
    text-align: center;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh);
}

.password-icon { font-size: 54px; margin-bottom: 16px; }
.password-title { font-size: 21px; font-weight: 600; color: var(--yc-ink); margin-bottom: 8px; }
.password-desc { font-size: 13.5px; color: var(--yc-ink-3); margin-bottom: 22px; }

.password-input {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
    font-size: 15px;
    text-align: center;
    outline: none;
    transition: border-color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.password-input:focus { border-color: var(--yc-jade-500); background: var(--yc-surface); }

/* --------------------------------------------------------------------------
   23. 商品详情
   -------------------------------------------------------------------------- */
.detail-card {
    padding: 26px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh-s);
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* 图片区 */
.detail-gallery { position: relative; }

.detail-img {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    background: var(--yc-surface-2);
    overflow: hidden;
}

.detail-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.detail-img__zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--yc-r-pill);
    background: rgba(22, 32, 44, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    opacity: 0;
    transition: opacity var(--yc-dur) var(--yc-ease);
}

.detail-img:hover .detail-img__zoom { opacity: 1; }

.detail-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.detail-thumb {
    aspect-ratio: 1 / 1;
    border: 1.5px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--yc-dur) var(--yc-ease);
}

.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-thumb:hover { border-color: var(--yc-jade-200); }
.detail-thumb.active { border-color: var(--yc-jade); box-shadow: 0 0 0 3px rgba(76, 184, 169, .14); }

/* 信息区 */
.detail-info { min-width: 0; }

.detail-name {
    font-family: var(--yc-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .6px;
    color: var(--yc-ink);
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.detail-badges .goods-badge { position: static; }

.yc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface-2);
    color: var(--yc-ink-3);
    font-size: 11.5px;
}

.yc-chip .fa { color: var(--yc-jade); }

.detail-intro {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--yc-ink-2);
}

.detail-stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--yc-ink-4);
}

.detail-stat-item strong { color: var(--yc-ink-2); font-weight: 600; }
.detail-stat-sep { opacity: .5; }

/* 价格盒 */
.detail-price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px solid var(--yc-jade-200);
    border-radius: var(--yc-r);
    background: linear-gradient(120deg, var(--yc-jade-050) 0%, var(--yc-gold-100) 145%);
}

.detail-price-box__label { font-size: 12.5px; color: var(--yc-ink-3); }

.detail-price {
    font-family: var(--yc-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .5px;
    color: var(--yc-jade-700);
}

.detail-price-original {
    font-size: 14px;
    color: var(--yc-ink-4);
    text-decoration: line-through;
}

.detail-price-discount-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4px;
}

.detail-price-strike { font-size: 12.5px; color: var(--yc-ink-4); text-decoration: line-through; }

.detail-price-discount-label {
    padding: 2px 10px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-gold);
    color: #fff;
    font-size: 11.5px;
}

/* 满减提示 */
.yc-promo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 15px;
    border: 1px dashed var(--yc-gold-light);
    border-radius: var(--yc-r-s);
    background: rgba(250, 243, 228, .55);
}

.yc-promo__ico { color: var(--yc-gold); font-size: 14px; line-height: 1.6; }

.yc-promo__list { display: flex; flex-wrap: wrap; gap: 8px; }

.yc-promo__item {
    padding: 1px 10px;
    border-radius: var(--yc-r-pill);
    background: rgba(255, 255, 255, .8);
    color: #9a7736;
    font-size: 12px;
}

/* 规格 */
.spec-section { margin-top: 18px; }

.spec-group + .spec-group { margin-top: 14px; }

.spec-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink-2);
}

.spec-group-label .fa { color: var(--yc-jade); font-size: 12px; }

.spec-group-options { display: flex; flex-wrap: wrap; gap: 9px; }

.spec-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.spec-item-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.spec-tag {
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--yc-gold-100);
    color: #9a7736;
    font-size: 10.5px;
    line-height: 1.7;
}

.spec-btn {
    padding: 8px 18px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

.spec-btn:hover {
    border-color: var(--yc-jade-500);
    color: var(--yc-jade-700);
    background: var(--yc-jade-050);
}

.spec-btn.active {
    border-color: var(--yc-jade);
    background: var(--yc-jade-050);
    color: var(--yc-jade-900);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(76, 184, 169, .14);
}

.spec-btn.disabled,
.spec-btn:disabled {
    border-color: var(--yc-line-2);
    background: var(--yc-surface-2);
    color: var(--yc-ink-4);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* 数量 */
.detail-qty-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.detail-qty-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink-2);
}

.detail-qty-label .fa { color: var(--yc-jade); font-size: 12px; }

.detail-qty-wrap { display: flex; align-items: center; gap: 12px; }

.detail-qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    overflow: hidden;
}

.detail-qty-btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--yc-ink-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.detail-qty-btn:hover { background: var(--yc-jade-050); color: var(--yc-jade-700); }

.detail-qty-input {
    width: 62px;
    height: 38px;
    border: 0;
    border-left: 1px solid var(--yc-line-2);
    border-right: 1px solid var(--yc-line-2);
    background: transparent;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--yc-ink);
    outline: none;
    -moz-appearance: textfield;
}

.detail-qty-input::-webkit-outer-spin-button,
.detail-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.detail-stock-info { font-size: 12.5px; color: var(--yc-ink-4); }
.detail-stock-info__empty { color: var(--yc-danger); }

.detail-min-buy { font-size: 12.5px; color: var(--yc-warn); }

/* 表单字段 */
.detail-form-field { margin-top: 16px; }

.detail-form-field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink-2);
}

.detail-form-field__req { color: var(--yc-danger); margin-left: 2px; }

.detail-form-field-input {
    width: 100%;
    max-width: 330px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
    color: var(--yc-ink);
    font-size: 14px;
    outline: none;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

.detail-form-field-input:focus {
    border-color: var(--yc-jade-500);
    background: var(--yc-surface);
    box-shadow: 0 0 0 4px rgba(76, 184, 169, .12);
}

.detail-form-field-input::placeholder { color: var(--yc-ink-4); }

.detail-guest-find-section {
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px dashed var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
}

.detail-guest-find-section .detail-form-field:first-child { margin-top: 0; }

/* 优惠券 */
.detail-coupon {
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
}

.detail-coupon-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink-2);
}

.detail-coupon-title .fa { color: var(--yc-gold); }

.detail-coupon-input-row { display: flex; gap: 8px; max-width: 420px; }

.detail-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    font-size: 14px;
    outline: none;
    transition: border-color var(--yc-dur) var(--yc-ease);
}

.detail-coupon-input:focus { border-color: var(--yc-jade-500); }

.detail-coupon-btn {
    flex: 0 0 auto;
    padding: 0 20px;
    height: 40px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease),
        border-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.detail-coupon-btn--primary {
    border-color: transparent;
    background: var(--yc-grad-jade);
    color: #fff;
}

.detail-coupon-btn--primary:hover { filter: brightness(1.06); }
.detail-coupon-btn:hover { border-color: var(--yc-jade-200); }

.detail-coupon-guest-tip { margin-top: 10px; font-size: 12.5px; color: var(--yc-ink-3); }
.detail-coupon-guest-tip .fa { color: var(--yc-jade); }
.detail-coupon-guest-tip a { text-decoration: underline; }

.detail-coupon-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.detail-coupon-choose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.detail-coupon-choose:hover {
    border-color: var(--yc-jade-200);
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

.detail-coupon-goget .fa { color: var(--yc-gold); }

.detail-coupon-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding: 9px 13px;
    border: 1px dashed var(--yc-jade-200);
    border-radius: var(--yc-r-s);
    background: rgba(232, 245, 242, .7);
    font-size: 12.5px;
}

.detail-coupon-applied-name { color: var(--yc-jade-700); font-weight: 600; }
.detail-coupon-applied-saved { color: #9a7736; }

/* 支付方式 */
.detail-payment-section { margin-top: 18px; }

.detail-payment-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yc-ink-2);
}

.detail-payment-title .fa { color: var(--yc-jade); font-size: 12px; }

.detail-payment-list { display: flex; flex-wrap: wrap; gap: 9px; }

.detail-payment-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px 8px 11px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        box-shadow var(--yc-dur) var(--yc-ease);
}

.detail-payment-item img { width: 22px; height: 22px; object-fit: contain; }

.detail-payment-item:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); }

.detail-payment-item.active {
    border-color: var(--yc-jade);
    background: var(--yc-jade-050);
    color: var(--yc-jade-900);
    box-shadow: 0 0 0 3px rgba(76, 184, 169, .14);
}

.detail-payment-item.is-disabled { opacity: .45; cursor: not-allowed; }

/* 操作 */
.detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.detail-actions .btn { min-width: 176px; }

.detail-actions__hint { font-size: 12px; color: var(--yc-ink-4); }

/* meta tabs */
.detail-meta-tabs {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--yc-line);
}

.detail-meta-tab-nav {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--yc-surface-2);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
}

.detail-meta-tab-btn {
    padding: 6px 18px;
    border: 0;
    border-radius: var(--yc-r-pill);
    background: transparent;
    color: var(--yc-ink-3);
    font-size: 13px;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.detail-meta-tab-btn:hover { color: var(--yc-jade-700); }

.detail-meta-tab-btn.active {
    background: var(--yc-surface);
    color: var(--yc-jade-700);
    font-weight: 600;
    box-shadow: var(--yc-sh-xs);
}

.detail-meta-tab-pane { display: none; }
.detail-meta-tab-pane.active { display: block; }

.detail-meta { display: flex; flex-direction: column; gap: 8px; }

.detail-meta-row { display: flex; align-items: baseline; gap: 14px; font-size: 13px; }

.detail-meta-label { flex: 0 0 74px; color: var(--yc-ink-4); }
.detail-meta-value { color: var(--yc-ink-2); word-break: break-all; }

.detail-discount-list { display: flex; flex-direction: column; gap: 8px; }

.detail-discount-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px dashed var(--yc-gold-light);
    border-radius: var(--yc-r-s);
    background: rgba(250, 243, 228, .55);
    color: #8d6c31;
    font-size: 13px;
}

.detail-discount-tag {
    padding: 1px 9px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-gold);
    color: #fff;
    font-size: 11px;
}

/* 详情正文 / 标签 */
.detail-content-block {
    margin-top: 16px;
    padding: 22px 26px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh-xs);
}

.detail-body { font-size: 14px; line-height: 1.95; color: var(--yc-ink-2); word-break: break-word; }
.detail-body img { border-radius: var(--yc-r-s); }
.detail-body h1, .detail-body h2, .detail-body h3 { margin: 20px 0 10px; color: var(--yc-ink); }
.detail-body h3 { font-size: 16.5px; }
.detail-body p { margin: 0 0 12px; }
.detail-body ul, .detail-body ol { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.detail-body ol { list-style: decimal; }
.detail-body li { margin-bottom: 6px; }
.detail-body a { text-decoration: underline; }
.detail-body table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.detail-body th, .detail-body td { padding: 9px 12px; border: 1px solid var(--yc-line); }
.detail-body th { background: var(--yc-surface-2); }
.detail-body blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid var(--yc-jade-200);
    background: var(--yc-jade-050);
    color: var(--yc-ink-2);
}

.goods-detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

.detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.detail-tags__label { font-size: 13px; color: var(--yc-ink-4); }
.detail-tags__label .fa { color: var(--yc-jade); }

.article-tag,
.article-tag-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-3);
    font-size: 12.5px;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.article-tag:hover {
    border-color: var(--yc-jade-200);
    background: var(--yc-jade-050);
    color: var(--yc-jade-700);
}

@media (max-width: 1080px) {
    .detail-card { padding: 20px; }
    .detail-layout { grid-template-columns: 1fr; gap: 22px; }
    .detail-img { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
    .detail-card { padding: 15px; border-radius: var(--yc-r); }
    .detail-name { font-size: 19px; }
    .detail-price { font-size: 24px; }
    .detail-price-box { padding: 13px 15px; }
    .detail-thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; }
    .detail-form-field-input { max-width: none; }
    .detail-actions .btn { width: 100%; }
    .detail-actions__hint { text-align: center; width: 100%; }
    .detail-content-block { padding: 16px 15px; }
    .detail-qty-row { gap: 10px; }
}

/* --------------------------------------------------------------------------
   24. 文章 / 博客
   -------------------------------------------------------------------------- */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.category-tabs--sub { margin-top: -8px; padding-left: 14px; }

.category-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13px;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.category-tab:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); color: var(--yc-jade-700); }

.category-tab.active {
    border-color: transparent;
    background: var(--yc-grad-jade);
    color: #fff;
    font-weight: 500;
    box-shadow: var(--yc-sh-jade);
}

.category-tab-icon { width: 15px; height: 15px; object-fit: contain; }

.category-tab-count {
    padding: 0 7px;
    border-radius: var(--yc-r-pill);
    background: rgba(22, 32, 44, .06);
    font-size: 11px;
    line-height: 1.8;
}

.category-tab.active .category-tab-count { background: rgba(255, 255, 255, .26); }

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 22px;
    align-items: start;
}

.blog-main { min-width: 0; }

.blog-article-grid { display: grid; gap: 16px; }

.blog-article-grid--3col { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.article-list { display: grid; gap: 14px; }

.blog-article-card { overflow: hidden; }
.blog-article-card:hover { border-color: var(--yc-jade-200); box-shadow: var(--yc-sh); }

.blog-article-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yc-surface-2); }
.blog-article-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-article-body { padding: 14px 16px 16px; }

.blog-article-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--yc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-article-excerpt {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--yc-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--yc-line-2);
    font-size: 12px;
    color: var(--yc-ink-4);
}

.blog-article-meta .fa { color: var(--yc-jade-200); }

/* 文章详情 */
.article-detail {
    padding: 26px 30px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh-xs);
}

.detail-title {
    font-family: var(--yc-font);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .6px;
    color: var(--yc-ink);
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--yc-line);
    font-size: 12.5px;
    color: var(--yc-ink-4);
}

.article-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 20px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    font-size: 13.5px;
}

.article-nav a { color: var(--yc-ink-2); }
.article-nav a:hover { color: var(--yc-jade-700); }
.article-nav span { color: var(--yc-ink-4); }

/* 侧栏 */
.blog-sidebar { display: flex; flex-direction: column; gap: 16px; }

.sidebar-widget {
    padding: 16px 16px 18px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
}

.sidebar-title {
    position: relative;
    padding-left: 12px;
    margin-bottom: 14px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--yc-ink);
}

.sidebar-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 15px;
    border-radius: 3px;
    background: var(--yc-grad-jade);
    transform: translateY(-50%);
}

.sidebar-list { font-size: 13px; }

.sidebar-user { display: flex; align-items: center; gap: 12px; }

.sidebar-user-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--yc-jade-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-user-avatar--default,
.sidebar-user-avatar--guest { color: var(--yc-jade-700); font-size: 18px; }

.sidebar-user-info { min-width: 0; }

.sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--yc-ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-user-meta {
    font-size: 12px;
    color: var(--yc-ink-4);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-user-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.sidebar-user-links a,
.sidebar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 12.5px;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.sidebar-user-links a:hover,
.sidebar-user-btn:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); color: var(--yc-jade-700); }

.sidebar-user-btn--primary {
    border-color: transparent;
    background: var(--yc-grad-jade);
    color: #fff;
}

.sidebar-user-btn--primary:hover { color: #fff; filter: brightness(1.06); }

.sidebar-article-list { display: flex; flex-direction: column; gap: 11px; }

.sidebar-article-item { display: flex; gap: 11px; align-items: center; }

.sidebar-article-img {
    width: 62px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--yc-r-s);
    overflow: hidden;
    background: var(--yc-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-article-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-article-img--empty { color: var(--yc-ink-4); font-size: 15px; }

.sidebar-article-info { min-width: 0; }

.sidebar-article-title {
    font-size: 13px;
    line-height: 1.55;
    color: var(--yc-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-article-item:hover .sidebar-article-title { color: var(--yc-jade-700); }

.sidebar-article-date { margin-top: 3px; font-size: 11.5px; color: var(--yc-ink-4); }

.sidebar-posts { display: flex; flex-direction: column; gap: 9px; }

.sidebar-post { display: flex; align-items: baseline; gap: 10px; }

.sidebar-rank {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--yc-surface-2);
    color: var(--yc-ink-4);
    font-size: 11px;
    font-weight: 700;
}

.sidebar-rank.top { background: var(--yc-grad-gold); color: #fff; }

.sidebar-post-title {
    font-size: 13px;
    line-height: 1.6;
    color: var(--yc-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-post:hover .sidebar-post-title { color: var(--yc-jade-700); }

.sidebar-tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }

.sidebar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-3);
    font-size: 12.5px;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease);
}

.sidebar-tag:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); color: var(--yc-jade-700); }

.tag-count { color: var(--yc-ink-4); font-size: 11px; }

/* 评论 */
.comment-section {
    margin-top: 16px;
    padding: 22px 30px 26px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    box-shadow: var(--yc-sh-xs);
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--yc-line);
}

.comment-header-left { display: inline-flex; align-items: center; gap: 9px; }

.comment-title { font-size: 15.5px; font-weight: 600; color: var(--yc-ink); }

.comment-count {
    padding: 1px 10px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    font-size: 12px;
}

.comment-sort { display: inline-flex; gap: 4px; padding: 3px; background: var(--yc-surface-2); border-radius: var(--yc-r-pill); }

.comment-sort-btn {
    padding: 4px 13px;
    border-radius: var(--yc-r-pill);
    color: var(--yc-ink-3);
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color var(--yc-dur) var(--yc-ease), color var(--yc-dur) var(--yc-ease);
}

.comment-sort-btn.active { background: var(--yc-surface); color: var(--yc-jade-700); font-weight: 600; box-shadow: var(--yc-sh-xs); }

.comment-form-box { margin-bottom: 20px; }

.comment-form-wrapper { display: flex; gap: 12px; }

.comment-form-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-form-avatar img { width: 100%; height: 100%; object-fit: cover; }

.comment-form-body { flex: 1 1 auto; min-width: 0; }

.comment-textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
    color: var(--yc-ink);
    font-size: 13.5px;
    line-height: 1.75;
    resize: vertical;
    outline: none;
    transition: border-color var(--yc-dur) var(--yc-ease), background-color var(--yc-dur) var(--yc-ease);
}

.comment-textarea:focus { border-color: var(--yc-jade-500); background: var(--yc-surface); }

.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 9px;
}

.comment-char-count { margin-right: auto; font-size: 12px; color: var(--yc-ink-4); }

.comment-submit-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-jade);
    color: #fff;
    font-size: 13.5px;
    cursor: pointer;
    transition: filter var(--yc-dur) var(--yc-ease);
}

.comment-submit-btn:hover { filter: brightness(1.06); }
.comment-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.comment-cancel-btn {
    padding: 8px 18px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-3);
    font-size: 13.5px;
    cursor: pointer;
}

.comment-cancel-btn:hover { border-color: var(--yc-jade-200); color: var(--yc-jade-700); }

.comment-login-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    border: 1px dashed var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface-2);
    color: var(--yc-ink-3);
    font-size: 13.5px;
}

.comment-login-btn {
    padding: 6px 18px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-jade);
    color: #fff;
    font-size: 13px;
}

.comment-login-btn:hover { color: #fff; filter: brightness(1.06); }

.comment-list { display: flex; flex-direction: column; gap: 16px; }

.comment-loading,
.comment-empty { padding: 26px; text-align: center; color: var(--yc-ink-4); font-size: 13.5px; }

.comment-item { display: flex; gap: 12px; }

.comment-item--reply { margin-top: 12px; }

.comment-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }

.comment-body { flex: 1 1 auto; min-width: 0; }

.comment-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }

.comment-author { font-size: 13.5px; font-weight: 600; color: var(--yc-ink); }
.comment-reply-to { font-size: 12.5px; color: var(--yc-ink-4); }
.comment-reply-to b { color: var(--yc-jade-700); font-weight: 600; }
.comment-time { margin-left: auto; font-size: 11.5px; color: var(--yc-ink-4); }

.comment-content { margin-top: 6px; font-size: 13.5px; line-height: 1.8; color: var(--yc-ink-2); word-break: break-word; }

.comment-actions { display: flex; gap: 14px; margin-top: 7px; }

.comment-action-btn { font-size: 12.5px; color: var(--yc-ink-4); cursor: pointer; }
.comment-action-btn:hover { color: var(--yc-jade-700); }

.comment-replies { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--yc-line-2); }

.comment-load-more-replies { margin-top: 8px; }
.comment-load-replies-btn { font-size: 12.5px; color: var(--yc-jade-700); cursor: pointer; }

.comment-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }

.comment-page-btn {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-s);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 13px;
}

.comment-page-btn:hover { border-color: var(--yc-jade-200); color: var(--yc-jade-700); }

.comment-page-btn.active {
    background: var(--yc-grad-jade);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.comment-page-dots { color: var(--yc-ink-4); align-self: center; }

.comment-reply-form { margin-top: 10px; }

@media (max-width: 1080px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { order: 2; }
}

@media (max-width: 640px) {
    .article-detail { padding: 18px 16px; }
    .detail-title { font-size: 20px; }
    .comment-section { padding: 16px 15px 20px; }
    .article-nav { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* --------------------------------------------------------------------------
   25. 搜索页
   -------------------------------------------------------------------------- */
.search-hero {
    margin-bottom: 22px;
    padding: 24px 26px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-l);
    background: linear-gradient(135deg, #ffffff 0%, var(--yc-jade-050) 100%);
    box-shadow: var(--yc-sh-xs);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 660px;
    margin: 0 auto;
}

.search-box__field {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 18px;
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    transition: border-color var(--yc-dur) var(--yc-ease), box-shadow var(--yc-dur) var(--yc-ease);
}

.search-box__field:focus-within {
    border-color: var(--yc-jade-500);
    box-shadow: 0 0 0 4px rgba(76, 184, 169, .12);
}

.search-box__ico { color: var(--yc-ink-4); }

.search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14.5px;
    color: var(--yc-ink);
    outline: none;
}

.search-input::placeholder { color: var(--yc-ink-4); }

.search-submit { flex: 0 0 auto; height: 46px; padding: 0 30px; }

.search-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--yc-line);
}

.search-result-count { font-size: 13.5px; color: var(--yc-ink-3); }
.search-result-count strong { color: var(--yc-jade-700); font-size: 15px; }
.search-result-count em { font-style: normal; color: var(--yc-ink); font-weight: 600; }

.search-type-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-r-pill); }

.search-type-tab {
    padding: 5px 16px;
    border-radius: var(--yc-r-pill);
    color: var(--yc-ink-3);
    font-size: 13px;
}

.search-type-tab:hover { color: var(--yc-jade-700); }

.search-type-tab.active {
    background: var(--yc-grad-jade);
    color: #fff;
    font-weight: 500;
}

.search-sec { margin-bottom: 28px; }

.search-sec__head { margin-bottom: 14px; }

.search-sec__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 600;
    color: var(--yc-ink);
}

.search-sec__title .fa { color: var(--yc-jade); }

.search-sec__count {
    padding: 1px 10px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-jade-100);
    color: var(--yc-jade-700);
    font-size: 12px;
}

@media (max-width: 640px) {
    .search-hero { padding: 18px 16px; }
    .search-box { flex-direction: column; align-items: stretch; }
    .search-submit { width: 100%; }
    .search-result-head { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   26. 领券中心
   -------------------------------------------------------------------------- */
.coupon-intro {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--yc-ink-3);
}

.coupon-intro .fa { color: var(--yc-jade); }

.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

.coupon-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    background: var(--yc-surface);
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r);
    box-shadow: var(--yc-sh-xs);
    overflow: hidden;
    transition: border-color var(--yc-dur) var(--yc-ease), box-shadow var(--yc-dur) var(--yc-ease);
}

.coupon-card:hover { border-color: var(--yc-jade-200); box-shadow: var(--yc-sh); }

.coupon-card__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 12px;
    background: linear-gradient(150deg, var(--yc-jade) 0%, var(--yc-jade-700) 100%);
    color: #fff;
    position: relative;
}

.coupon-card__left::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 12px;
    background-image: radial-gradient(circle at 6px 50%, var(--yc-surface) 5px, transparent 5.5px);
    background-size: 12px 18px;
    background-repeat: repeat-y;
}

.coupon-card__value {
    font-family: var(--yc-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.15;
}

.coupon-card__caption { font-size: 11.5px; opacity: .88; text-align: center; }

.coupon-card__right { padding: 16px 18px 16px 22px; min-width: 0; }

.coupon-card__title { font-size: 14.5px; font-weight: 600; color: var(--yc-ink); }

.coupon-card__desc {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--yc-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coupon-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }

.coupon-card__tag {
    padding: 1px 9px;
    border-radius: 4px;
    background: var(--yc-gold-100);
    color: #9a7736;
    font-size: 11px;
}

.coupon-card__valid { font-size: 11.5px; color: var(--yc-ink-4); }

.coupon-card__code {
    margin-top: 9px;
    font-size: 12px;
    color: var(--yc-ink-4);
}

.coupon-card__code-val {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--yc-surface-2);
    border: 1px dashed var(--yc-line);
    color: var(--yc-ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.coupon-card__actions { display: flex; gap: 8px; margin-top: 13px; }

.coupon-btn {
    padding: 7px 18px;
    border: 1px solid var(--yc-line);
    border-radius: var(--yc-r-pill);
    background: var(--yc-surface);
    color: var(--yc-ink-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--yc-dur) var(--yc-ease),
        background-color var(--yc-dur) var(--yc-ease),
        color var(--yc-dur) var(--yc-ease),
        filter var(--yc-dur) var(--yc-ease);
}

.coupon-btn-ghost:hover { border-color: var(--yc-jade-200); background: var(--yc-jade-050); color: var(--yc-jade-700); }

.coupon-btn-primary {
    border-color: transparent;
    background: var(--yc-grad-jade);
    color: #fff;
}

.coupon-btn-primary:hover { filter: brightness(1.06); }

.coupon-btn.is-disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
    .coupon-grid { grid-template-columns: 1fr; }
    .coupon-card { grid-template-columns: 110px minmax(0, 1fr); }
    .coupon-card__value { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   27. 其它第三方/插件片段
   -------------------------------------------------------------------------- */
.em-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--yc-r-pill);
    background: var(--yc-grad-jade);
    color: #fff !important;
    font-size: 13.5px;
    text-decoration: none;
}

.em-download-btn:hover { color: #fff !important; filter: brightness(1.06); }

/* layer 弹层圆角与配色贴合本模板 */
.layui-layer { border-radius: var(--yc-r) !important; overflow: hidden; }
.layui-layer-title { background: var(--yc-surface-2) !important; border-bottom-color: var(--yc-line) !important; }

/* --------------------------------------------------------------------------
   28. 补充：结构性占位类
   （本身不画东西，只负责间距 / 布局，缺了它们上面的组合样式会松掉）
   -------------------------------------------------------------------------- */
.home-sec { margin-bottom: 34px; }
.home-sec:last-child { margin-bottom: 8px; }

.yc-cats-sec { margin-bottom: 30px; }

.yc-hero__copy { min-width: 0; }

.mobile-nav-group + .mobile-nav-group,
.mobile-nav-item + .mobile-nav-group { margin-top: 2px; }

.site-footer__brand { min-width: 0; }

.sidebar-user--guest .sidebar-user-name { color: var(--yc-ink-2); font-weight: 500; }

.category-tab-name { white-space: nowrap; }

.comment-delete-btn:hover { color: var(--yc-danger); }

/* --------------------------------------------------------------------------
   29. 打印 / 无障碍降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .yc-topbar,
    .yc-totop,
    .mobile-nav,
    .search-modal { display: none !important; }
    .yc-aurora { display: none !important; }
    .page-body { padding: 0; }
}