@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 {
    /* 主色：蓝（专业感靠它撑） */
    --yj-blue-900: #1e3a8a;
    --yj-blue-700: #1d4ed8;
    --yj-blue: #2563eb;
    --yj-blue-500: #60a5fa;
    --yj-blue-200: #bfdbfe;
    --yj-blue-100: #dbeafe;
    --yj-blue-050: #eff6ff;

    /* 流光（点缀色）：蓝 → 天蓝 → 青，做流光描边与扫光用 */
    --yj-flow: #0ea5e9;
    --yj-flow-light: #38bdf8;
    --yj-flow-100: #f0f9ff;
    --yj-flow-cyan: #22d3ee;

    /* 墨色阶 */
    --yj-ink: #0b1a30;
    --yj-ink-2: #475569;
    --yj-ink-3: #64748b;
    --yj-ink-4: #94a3b8;

    /* 面与线 */
    --yj-bg: #f4f5f7;
    --yj-surface: #ffffff;
    --yj-surface-2: #f8fafc;
    --yj-line: #e2e8f0;
    --yj-line-2: #eef3f9;

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

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

    /* 阴影 */
    --yj-sh-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --yj-sh-s: 0 2px 8px -3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .04);
    --yj-sh: 0 4px 14px -6px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .04);
    --yj-sh-l: 0 20px 46px -26px rgba(15, 23, 42, .30), 0 2px 8px -4px rgba(15, 23, 42, .08);
    --yj-sh-blue: 0 12px 30px -14px rgba(37, 99, 235, .55);

    /* 渐变 */
    --yj-grad-blue: linear-gradient(135deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
    --yj-grad-sky: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    /* 流光三色带：给标题下划线、卡片顶边、按钮描边等一切"会流动"的地方共用 */
    --yj-grad-flow: linear-gradient(90deg, #2563eb 0%, #0ea5e9 38%, #38bdf8 62%, #22d3ee 100%);
    --yj-grad-sheen: linear-gradient(120deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%);
    /* 流光扫过的柔光：hover 时贴在卡片/按钮上 */
    --yj-glow-soft: 0 0 0 1px rgba(14, 165, 233, .18), 0 10px 30px -12px rgba(37, 99, 235, .45);
    --yj-glow-strong: 0 0 0 1px rgba(14, 165, 233, .28), 0 16px 44px -16px rgba(37, 99, 235, .62);

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

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

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

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

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

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

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

a {
    color: var(--yj-blue-700);
    text-decoration: none;
    transition: color var(--yj-dur) var(--yj-ease);
}
a:hover { color: var(--yj-blue-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(--yj-blue-200); color: var(--yj-blue-900); }

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

/* 背景是纯淡灰（.yj-body 上的 --yj-bg），不再铺那层漂移的光雾渐变 */

/* 内容层要盖在背景之上 */
.site-header,
#main,
.site-footer,
.yj-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(--yj-grad-blue);
    box-shadow: 0 0 12px rgba(96, 165, 250, .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(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--yj-dur) var(--yj-ease),
        border-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease),
        box-shadow var(--yj-dur) var(--yj-ease);
}

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

.btn-primary:hover {
    background: var(--yj-grad-blue);
    color: #fff;
    filter: saturate(1.08) brightness(1.04);
    box-shadow: 0 16px 34px -14px rgba(37, 99, 235, .68);
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   7. 顶部细条
   -------------------------------------------------------------------------- */
.yj-topbar {
    background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 48%, #2563eb 100%);
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    letter-spacing: .2px;
}

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

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

.yj-topbar__slogan .fa { color: var(--yj-flow-light); }

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

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

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

@media (max-width: 860px) {
    .yj-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: 0;
    /* 不用描边也不用色条，靠一层常驻柔影把页头跟内容分开 */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px -20px rgba(15, 23, 42, .5);
    transition: box-shadow var(--yj-dur) var(--yj-ease), background-color var(--yj-dur) var(--yj-ease);
}

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

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

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

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

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

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

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

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

.site-logo-text {
    font-family: var(--yj-font-logo);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(120deg, var(--yj-blue-900), var(--yj-blue) 60%, var(--yj-flow));
    -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;
    /* 悬浮背景用 5px 小圆角（原来跟着胶囊走，999px 在长方形的菜单项上太圆了） */
    border-radius: 5px;
    color: var(--yj-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--yj-dur) var(--yj-ease), background-color var(--yj-dur) var(--yj-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(--yj-grad-blue);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--yj-dur) var(--yj-ease);
}

.main-nav > a:hover,
.main-nav .nav-dropdown > a:hover {
    color: var(--yj-blue-700);
    background: var(--yj-blue-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(--yj-blue-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(--yj-dur) var(--yj-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(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--yj-dur) var(--yj-ease), visibility var(--yj-dur) var(--yj-ease);
}

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

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

.nav-dropdown-menu a:hover { background: var(--yj-blue-050); color: var(--yj-blue-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(--yj-r-pill);
    background: transparent;
    color: var(--yj-ink-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease),
        border-color var(--yj-dur) var(--yj-ease);
}

.header-action-btn:hover {
    background: var(--yj-blue-050);
    border-color: var(--yj-blue-100);
    color: var(--yj-blue-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    cursor: pointer;
    color: var(--yj-ink);
    transition: border-color var(--yj-dur) var(--yj-ease), background-color var(--yj-dur) var(--yj-ease);
}

.header-user:hover { border-color: var(--yj-blue-200); background: var(--yj-blue-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(--yj-blue-100);
    color: var(--yj-blue-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(--yj-ink);
    max-width: 118px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.header-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 176px;
    padding: 8px;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--yj-dur) var(--yj-ease), visibility var(--yj-dur) var(--yj-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(--yj-r-s);
    color: var(--yj-ink-2);
    font-size: 13.5px;
}

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

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

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

.header-user-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--yj-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    cursor: pointer;
}

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

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

.header-menu-btn.active .hamburger-line { background: var(--yj-blue-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; }
    .yj-logo-mark { width: 34px; height: 34px; border-radius: 10px; }
    .yj-logo-mark svg { width: 30px; height: 30px; }
    /* 自定义 Logo：别被上面的固定 34px 方框框住 */
    .yj-logo-mark--img { width: auto; height: auto; }
    .yj-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(--yj-dur) var(--yj-ease), visibility var(--yj-dur) var(--yj-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(--yj-surface);
    box-shadow: -20px 0 50px -30px rgba(16, 26, 36, .6);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .34s var(--yj-ease), visibility .34s var(--yj-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(--yj-r-s);
    color: var(--yj-ink-2);
    font-size: 14.5px;
    font-weight: 500;
}

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

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

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

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

.mobile-nav-arrow {
    margin-left: auto;
    width: auto !important;
    transition: transform var(--yj-dur) var(--yj-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(--yj-r-s);
    color: var(--yj-ink-3);
    font-size: 13.5px;
}

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

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

.mobile-nav-logout { color: var(--yj-danger); }
.mobile-nav-logout .fa { color: var(--yj-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(--yj-dur) var(--yj-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(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-l);
    box-shadow: var(--yj-sh-l);
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-ease);
}

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

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

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

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

.search-modal-tab:hover { color: var(--yj-blue-700); }

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

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

.search-modal-bar:focus-within {
    background: var(--yj-surface);
    border-color: var(--yj-blue-500);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .12);
}

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

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

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

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

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

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    margin-top: 40px;
    padding-top: 24px;
    /* 深蓝夜色调：顶部跟云纹 SVG 同色，底部透出一点靛蓝，不至于糊成一块黑 */
    background: linear-gradient(180deg, #0f2744 0%, #0b1a30 52%, #12305c 100%);
    color: rgba(233, 240, 245, .72);
    overflow: hidden;
}

/* 页脚顶沿一道流光，跟页头收尾呼应 */
.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--yj-grad-flow);
    background-size: 200% 100%;
    animation: yjFlow 12s linear infinite;
    opacity: .7;
    pointer-events: none;
}

.site-footer__cloud {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 78px;
    /* 跟页脚顶部同色，云纹才跟页脚长在一起 */
    color: #0f2744;
    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;
}

.yj-logo-mark--foot {
    background: rgba(96, 165, 250, .1);
    border-color: rgba(96, 165, 250, .22);
}

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

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

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

.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(96, 165, 250, .26);
    border-radius: var(--yj-r-pill);
    background: rgba(96, 165, 250, .08);
    color: #93c5fd;
    font-size: 12px;
}

.site-footer__col-title {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #eef4ff;
    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(--yj-dur) var(--yj-ease);
}

.site-footer__links a:hover { color: var(--yj-blue-500); }

.site-footer__links .fa { color: rgba(14, 165, 233, .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(--yj-blue-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 1fr;
        gap: 24px 16px;
        padding: 30px 0 20px;
    }

    .site-footer__brand { grid-column: 1 / -1; }

    .site-footer__col:last-child { grid-column: 1 / -1; }

    .site-footer__col-title { margin-bottom: 11px; font-size: 13.5px; }

    .site-footer__links { gap: 8px; }

    /* 联系方式横着排一行，省掉三行高度 */
    .site-footer__col:last-child .site-footer__links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
    }

    .site-footer__desc { max-width: none; }
    .site-footer__bottom { justify-content: center; text-align: center; }
}

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

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

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

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

/* --------------------------------------------------------------------------
   12. 通用卡片
   -------------------------------------------------------------------------- */
.card {
    display: block;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-xs);
    transition: border-color var(--yj-dur) var(--yj-ease),
        box-shadow var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-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(--yj-ink);
}

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   15. 首页 · 分类矩阵（大数字卡片）
   -------------------------------------------------------------------------- */
.yj-cat-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}

.yj-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px 16px 14px;
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
    transition: border-color var(--yj-dur) var(--yj-ease), box-shadow var(--yj-dur) var(--yj-ease);
}

.yj-cat-card:hover { border-color: var(--yj-blue-200); box-shadow: var(--yj-glow-soft); }

/* 悬浮时顶边亮起一道流光 */
.yj-cat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--yj-grad-flow);
    background-size: 200% 100%;
    animation: yjFlow 8s linear infinite;
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-ease), left var(--yj-dur) var(--yj-ease), right var(--yj-dur) var(--yj-ease);
}

.yj-cat-card:hover::before { opacity: 1; left: 0; right: 0; }

/* 有「分类图片」时：封面铺满卡片顶部（出血到边缘），小图标让位 */
.yj-cat-card__cover {
    display: block;
    margin: -16px -16px 0;
    aspect-ratio: 16 / 9;
    background: var(--yj-surface-2);
    overflow: hidden;
}

.yj-cat-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yj-cat-card__top { display: flex; align-items: center; gap: 10px; }

/* 只传了分类图标时：居中留白显示，别把 36px 的小图拉成封面糊一片 */
.yj-cat-card__cover--contain {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--yj-blue-050) 0%, #ffffff 70%);
}

.yj-cat-card__cover--contain img {
    width: auto;
    height: auto;
    max-width: 46%;
    max-height: 58%;
    object-fit: contain;
}

/* 什么都没传：模板自带的默认 SVG（等距立方体 + 两团柔光），
   保证每张卡片顶部视觉区大小一致，不会矮一截、旁边空一片 */
.yj-cat-card__cover--default {
    background-color: var(--yj-blue-050);
    background-image:
        radial-gradient(120% 140% at 16% 0%, rgba(96, 165, 250, .30), rgba(96, 165, 250, 0) 62%),
        radial-gradient(120% 140% at 88% 108%, rgba(34, 211, 238, .18), rgba(34, 211, 238, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg stroke='%232563eb' stroke-opacity='.26' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M60 20 86 35 60 50 34 35Z' fill='%232563eb' fill-opacity='.10'/%3E%3Cpath d='M34 35v24l26 15V50Z' fill='%232563eb' fill-opacity='.05'/%3E%3Cpath d='M86 35v24L60 74V50Z' fill='%232563eb' fill-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 100% 100%, center;
    background-size: auto, auto, auto 42%;
}

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

.yj-cat-card__num { display: flex; align-items: baseline; gap: 6px; }

.yj-cat-card__num b {
    font-family: var(--yj-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--yj-blue-700);
}

.yj-cat-card__num i { color: var(--yj-ink-4); font-size: 12px; font-style: normal; }

.yj-cat-card__subs { display: flex; flex-wrap: wrap; gap: 5px; }

.yj-cat-sub {
    padding: 2px 9px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface-2);
    color: var(--yj-ink-3);
    font-size: 11.5px;
}

.yj-cat-card__go {
    margin-top: auto;
    padding-top: 4px;
    color: var(--yj-blue-700);
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   15b. 首页 · 今日优选（左主推 + 右榜单）
   -------------------------------------------------------------------------- */
.yj-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 16px;
    align-items: stretch;
}

/* —— 主推大卡 —— */
.yj-lead {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
    transition: border-color var(--yj-dur) var(--yj-ease), box-shadow var(--yj-dur) var(--yj-ease);
}

.yj-lead:hover { border-color: var(--yj-blue-200); box-shadow: var(--yj-glow-soft); }

.yj-lead__img {
    position: relative;
    display: block;
    /* 宽屏时压扁一点：这样主推卡总高跟右边的榜单差不多齐，右侧不剩死白 */
    aspect-ratio: 21 / 9;
    background: var(--yj-surface-2);
    overflow: hidden;
}

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

.yj-lead__img .goods-no-image { position: absolute; inset: 0; }

.yj-lead__flag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 13px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-grad-flow);
    background-size: 200% 100%;
    animation: yjFlow 7s linear infinite;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    box-shadow: var(--yj-sh-s);
}

.yj-lead__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.yj-lead__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.yj-lead__title {
    font-family: var(--yj-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--yj-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yj-lead:hover .yj-lead__title { color: var(--yj-blue-700); }

.yj-lead__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--yj-ink-4); font-size: 12.5px; }

.yj-lead__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--yj-line-2);
}

.yj-lead__price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--yj-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--yj-blue-700);
}

.yj-lead__price s { color: var(--yj-ink-4); font-size: 13px; font-weight: 400; }

.yj-lead__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-grad-blue);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: box-shadow var(--yj-dur) var(--yj-ease), filter var(--yj-dur) var(--yj-ease);
}

.yj-lead:hover .yj-lead__btn { filter: brightness(1.06); box-shadow: var(--yj-sh-blue); }

.yj-lead__btn.is-disabled,
.yj-lead:hover .yj-lead__btn.is-disabled {
    background: var(--yj-surface-2);
    color: var(--yj-ink-4);
    filter: none;
    box-shadow: none;
}

/* —— 右侧榜单 —— */
.yj-rank {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
}

.yj-rank__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--yj-line-2);
    background: linear-gradient(90deg, var(--yj-blue-050) 0%, rgba(240, 249, 255, .6) 70%, transparent 100%);
}

.yj-rank__head-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--yj-ink); }
.yj-rank__head-title .fa { color: var(--yj-flow); }
.yj-rank__head-sub { color: var(--yj-ink-4); font-size: 12px; }

.yj-rank__list { flex: 1 1 auto; padding: 6px; }

.yj-rank-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--yj-r-s);
    transition: background-color var(--yj-dur) var(--yj-ease);
}

.yj-rank-item + .yj-rank-item { margin-top: 2px; }

.yj-rank-item:hover { background: var(--yj-blue-050); }

.yj-rank-item__no {
    flex: 0 0 auto;
    width: 26px;
    font-family: var(--yj-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--yj-blue-500);
}

.yj-rank-item:nth-child(1) .yj-rank-item__no { color: var(--yj-flow); }
.yj-rank-item:nth-child(2) .yj-rank-item__no { color: var(--yj-blue); }

.yj-rank-item__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--yj-line);
    background: var(--yj-surface-2);
    overflow: hidden;
}

.yj-rank-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yj-rank-item__noimg { color: var(--yj-ink-4); font-size: 15px; }

.yj-rank-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.yj-rank-item__name {
    color: var(--yj-ink);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yj-rank-item:hover .yj-rank-item__name { color: var(--yj-blue-700); }

.yj-rank-item__sub { color: var(--yj-ink-4); font-size: 11.5px; }

.yj-rank-item__price {
    flex: 0 0 auto;
    font-family: var(--yj-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--yj-blue-700);
}

.yj-rank-item.is-soldout .yj-rank-item__name { color: var(--yj-ink-3); }

/* --------------------------------------------------------------------------
   15c. 首页 · 最新动态（日期 + 正文 + 缩略图的横向行）
   -------------------------------------------------------------------------- */
.yj-news {
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
}

.yj-news-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px dashed var(--yj-line-2);
    transition: background-color var(--yj-dur) var(--yj-ease);
}

.yj-news-item:last-child { border-bottom: 0; }
.yj-news-item:hover { background: var(--yj-blue-050); }

.yj-news-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    padding: 7px 0;
    border-radius: 10px;
    background: var(--yj-blue-050);
    border: 1px solid var(--yj-blue-100);
    color: var(--yj-blue-700);
}

.yj-news-item__date b { font-family: var(--yj-font); font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.yj-news-item__date i { color: var(--yj-ink-4); font-size: 11px; font-style: normal; }

.yj-news-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.yj-news-item__title {
    color: var(--yj-ink);
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yj-news-item:hover .yj-news-item__title { color: var(--yj-blue-700); }

.yj-news-item__excerpt {
    color: var(--yj-ink-3);
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yj-news-item__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--yj-ink-4); font-size: 12px; }
.yj-news-item__meta .fa { margin-right: 3px; }

.yj-news-item__thumb {
    flex: 0 0 auto;
    width: 138px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: var(--yj-surface-2);
}

.yj-news-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   15d. 首页 · 底部行动带
   -------------------------------------------------------------------------- */
.yj-cta {
    position: relative;
    margin-top: 34px;
    border-radius: 22px;
    background: linear-gradient(120deg, #0f2744 0%, #12305c 46%, #0b1a30 100%);
    overflow: hidden;
}

/* 一束斜着扫过的光，横贯整条横幅 */
.yj-cta__beam {
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -30%;
    width: 34%;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, .28), rgba(34, 211, 238, 0));
    transform: rotate(-14deg);
    animation: yjCtaBeam 7.5s var(--yj-ease) infinite;
    pointer-events: none;
}

@keyframes yjCtaBeam {
    0%   { left: -30%; opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { left: 118%; opacity: 0; }
}

.yj-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
}

.yj-cta__title {
    font-family: var(--yj-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.yj-cta__desc { margin-top: 7px; color: rgba(255, 255, 255, .68); font-size: 13.5px; }

.yj-cta__btns { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; }

.yj-cta__ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.yj-cta__ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* --------------------------------------------------------------------------
   15e. 首页窄屏适配
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .yj-feature { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .yj-cat-matrix { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
    .yj-cat-card { padding: 13px 13px 11px; gap: 9px; }
    .yj-cat-card__cover { margin: -13px -13px 0; }
    .yj-cat-card__num b { font-size: 24px; }

    .yj-lead__body { padding: 15px 15px 16px; }
    .yj-lead__title { font-size: 17px; }
    .yj-lead__price { font-size: 22px; }
    .yj-lead__btn { padding: 8px 16px; font-size: 13px; }

    .yj-rank__head { padding: 12px 14px 10px; }
    .yj-rank-item { gap: 9px; padding: 8px; }
    .yj-rank-item__thumb { width: 38px; height: 38px; }
    .yj-rank-item__price { font-size: 14px; }

    .yj-news-item { gap: 11px; padding: 13px 14px; align-items: flex-start; }
    .yj-news-item__date { width: 54px; padding: 5px 0; }
    .yj-news-item__date b { font-size: 13px; }
    .yj-news-item__thumb { width: 92px; }

    .yj-cta { border-radius: var(--yj-r-l); }
    .yj-cta__inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
    .yj-cta__title { font-size: 19px; }
    .yj-cta__btns { width: 100%; }
    .yj-cta__btns .btn { flex: 1 1 auto; justify-content: center; }
}
/* --------------------------------------------------------------------------
   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(--yj-blue-200);
    box-shadow: var(--yj-sh);
}

.card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--yj-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(96, 165, 250, .18), rgba(96, 165, 250, 0) 62%),
        radial-gradient(circle at 74% 70%, rgba(14, 165, 233, .16), rgba(14, 165, 233, 0) 60%),
        var(--yj-surface-2);
}

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

.card-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--yj-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(--yj-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(--yj-line-2);
}

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

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

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

.goods-badge--auto { background: linear-gradient(135deg, rgba(96, 165, 250, .96), rgba(37, 99, 235, .96)); }
.goods-badge--manual { background: linear-gradient(135deg, rgba(56, 189, 248, .96), rgba(14, 165, 233, .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(--yj-r-pill);
    color: #475569;
    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; }

/* 文章网格（首页资讯与博客列表共用） */
.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(--yj-blue-200); box-shadow: var(--yj-sh); }

.article-grid-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yj-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(--yj-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(--yj-ink-4);
}

@media (max-width: 640px) {
    .goods-grid,
    .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，摆在排序栏上方；桌面换行铺开，手机整行左右滑动 */
.yj-cat-bar {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-xs);
}

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

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

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

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

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

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

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

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

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

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

/* 窄屏：分类胶囊均分整行宽度 —— 换行时每行右边就不会参差地空出一块 */
@media (max-width: 900px) {
    .yj-cat-bar__row { gap: 7px; }

    .yj-cat-chip {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding: 7px 10px;
    }

    .yj-cat-bar__row--sub .yj-cat-chip { padding: 5px 10px; }
}


.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(--yj-r-s);
    color: var(--yj-ink-2);
    font-size: 13.5px;
    transition: background-color var(--yj-dur) var(--yj-ease), color var(--yj-dur) var(--yj-ease);
}

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

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

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

.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(--yj-ink-4);
    background: var(--yj-surface-2);
    border-radius: var(--yj-r-pill);
    padding: 1px 8px;
}

.sidebar-cat-parent.is-active .sidebar-cat-count {
    background: rgba(255, 255, 255, .8);
    color: var(--yj-blue-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(--yj-ink-4);
    font-size: 11px;
    cursor: pointer;
    transition: color var(--yj-dur) var(--yj-ease), background-color var(--yj-dur) var(--yj-ease);
}

.sidebar-cat-arrow:hover { background: var(--yj-blue-050); color: var(--yj-blue-700); }
.sidebar-cat-arrow.is-open { color: var(--yj-blue-700); background: var(--yj-blue-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(--yj-r-s);
    color: var(--yj-ink-3);
    font-size: 13px;
    transition: background-color var(--yj-dur) var(--yj-ease), color var(--yj-dur) var(--yj-ease);
}

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

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

/* 工具条：分类条一行，排序 + 搜索一行 */
.yj-tbl-tools { margin-bottom: 15px; }

.yj-tbl-tools .yj-cat-bar { margin-bottom: 10px; }

/* 第二行的白底条：左边排序、右边搜索 */
.yj-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 10px;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-xs);
}

/* 排序只是这条里的一组链接，卡片外壳归 .yj-list-bar */
.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(--yj-r-pill);
    color: var(--yj-ink-3);
    font-size: 13px;
    transition: background-color var(--yj-dur) var(--yj-ease), color var(--yj-dur) var(--yj-ease);
}

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

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

/* 搜索框：贴着这条的右边 */
.yj-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface-2);
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        box-shadow var(--yj-dur) var(--yj-ease);
}

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

.yj-list-search:focus-within {
    border-color: var(--yj-blue-200);
    background: #fff;
    box-shadow: var(--yj-glow-soft);
}

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

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

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

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

.yj-list-search__clear:hover { color: var(--yj-blue-700); }

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

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

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

@media (max-width: 640px) {
    /* 窄屏：排序条横向滚动占一行，搜索框单独占一行 */
    .yj-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; }

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

.yj-cat-block {
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
    margin-bottom: 15px;
}

.yj-cat-block:last-child { margin-bottom: 0; }

/* 板块头：分类名 + 件数 + 只看该分类 */
.yj-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    /* 白底 + 一条实分割线跟下面的表头分开：
       原来那条通栏浅蓝渐变跟表头的浅灰蓝几乎同色，糊成一片看不出层级 */
    background: var(--yj-surface);
    border-bottom: 1px solid var(--yj-line);
}

/* ---------------------------------------------------------------------
   表体：不用 <table>，用 CSS grid 模拟 —— 列宽写在一个变量 --yj-cols 上，
   表头行和每条商品行共用同一份，永远对得齐；行数变量 --yj-rows 是窄屏
   让左列图片纵跨右侧所有行用的。两个变量都由 goods_list.php 生成。
   --------------------------------------------------------------------- */
.yj-table { width: 100%; }

.yj-tr {
    display: grid;
    grid-template-columns: var(--yj-cols);
    align-items: center;
}

/* 表头行 */
.yj-tr--head {
    background: var(--yj-surface-2);
    border-bottom: 1px solid var(--yj-line-2);
}

.yj-th {
    min-width: 0;
    padding: 11px 14px;
    color: var(--yj-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* 单元格 */
.yj-td {
    min-width: 0;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--yj-ink-2);
}

/* 列宽：商品列吃剩余宽度，其余固定。除「商品」列外全部居中。 */
.yj-col-no      { width: auto; text-align: center; }
.yj-col-thumb   { text-align: center; }
.yj-col-num     { text-align: center; }
.yj-col-deliver { text-align: center; }
.yj-col-price   { text-align: center; }
.yj-col-act     { text-align: center; }

/* —— 商品行 —— */
.yj-tr--goods {
    position: relative;
    border-bottom: 1px solid var(--yj-line-2);
    transition: background-color var(--yj-dur) var(--yj-ease);
}

.yj-tr--goods:last-child { border-bottom: 0; }
.yj-tr--goods:hover { background: var(--yj-blue-050); }

/* 悬浮时最左侧补一道流光，视线不丢行 */
.yj-tr--goods::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--yj-grad-flow);
    background-size: 100% 220%;
    animation: yjFlow 6s linear infinite alternate;
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-ease);
}

.yj-tr--goods:hover::before { opacity: 1; }

.yj-tr--goods.is-soldout .yj-goods-name { color: var(--yj-ink-3); }

.yj-no {
    font-family: var(--yj-font);
    font-size: 13px;
    color: var(--yj-ink-4);
}

/* 缩略图列 */
.yj-col-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 图片左上角的发货标签：只有窄屏才显示（那时"发货"列被藏起来省一行） */
.yj-thumb-badge { display: none; }

.yj-col-thumb > img,
.yj-col-thumb > .yj-goods-noimg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--yj-line);
    background: var(--yj-surface-2);
    object-fit: cover;
    overflow: hidden;
}

.yj-goods-noimg { color: var(--yj-ink-4); font-size: 16px; }

/* 商品名（表格里就是一格文字，不再套一层） */
.yj-goods-name {
    color: var(--yj-ink);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yj-goods-name:hover { color: var(--yj-blue-700); }

.yj-goods-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.yj-mini-tag {
    padding: 1px 8px;
    border-radius: var(--yj-r-pill);
    font-size: 11px;
    line-height: 1.7;
    white-space: nowrap;
}

.yj-mini-tag--auto { background: var(--yj-blue-100); color: var(--yj-blue-700); }
.yj-mini-tag--manual { background: var(--yj-flow-100); color: var(--yj-flow); }
.yj-mini-tag--discount { background: var(--yj-flow-100); color: var(--yj-flow); }
.yj-mini-tag--soldout { background: #eef2f7; color: var(--yj-ink-3); }

.yj-num { font-family: var(--yj-font); font-size: 14px; color: var(--yj-ink); }
.yj-num--zero { color: var(--yj-danger); }

.yj-deliver { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

.yj-deliver--auto { color: var(--yj-blue-700); }
.yj-deliver--manual { color: var(--yj-flow); }
.yj-deliver--none { color: var(--yj-ink-4); }

/* 售价 + 划线价并排：一行放得下就不折行，行高才整齐 */
.yj-price-box { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }

.yj-price {
    font-family: var(--yj-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--yj-blue-700);
    letter-spacing: .3px;
}

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

.yj-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-grad-blue);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    transition: box-shadow var(--yj-dur) var(--yj-ease), filter var(--yj-dur) var(--yj-ease);
}

.yj-buy-btn:hover {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: var(--yj-glow-soft);
}

.yj-buy-btn.is-disabled,
.yj-buy-btn.is-disabled:hover {
    background: var(--yj-surface-2);
    color: var(--yj-ink-4);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

/* 子分类小标题行：通栏，不参与 grid */
.yj-tr--subgroup { display: block; }

.yj-subgroup-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px 30px;
    /* 不整行铺底色：只靠左侧竖条 + 一条虚线上分隔，免得又跟表头混成一片 */
    background: transparent;
}

.yj-tr--subgroup { border-top: 1px dashed var(--yj-line-2); }

/* 子分类名左侧的竖色条（原来是横着的一小段线，跟主标题的竖条不统一） */
.yj-subgroup-bar {
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--yj-blue-500);
}

.yj-subgroup-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--yj-ink-2);
}

.yj-group-count {
    padding: 1px 9px;
    border-radius: var(--yj-r-pill);
    background: #fff;
    border: 1px solid var(--yj-line);
    color: var(--yj-ink-3);
    font-size: 11.5px;
    white-space: nowrap;
}

/* 空分类占位行 */
.yj-tr--empty { display: block; }

.yj-td-empty {
    display: block;
    padding: 16px;
    text-align: center;
    color: var(--yj-ink-4);
    font-size: 12.5px;
    background: var(--yj-surface-2);
    border-bottom: 1px solid var(--yj-line-2);
}

.yj-td-empty .fa { margin-right: 6px; }

/* 无障碍：只给读屏用的文本 */
.yj-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   窄屏（≤900px）：每行折成一张卡 —— 左边图片，右边信息；
   标题在最上，其余（库存/销量/发货/价格）依次排在它下面。
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* 板块外壳脱掉：头一块卡、每行一张卡，卡片套卡片就太难看了 */
    .yj-cat-block {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        margin-bottom: 15px;
    }

    .yj-block-head {
        border: 1px solid var(--yj-blue-200);
        border-radius: var(--yj-r);
        background: linear-gradient(120deg, var(--yj-blue-050) 0%, var(--yj-flow-100) 100%);
        margin-bottom: 10px;
    }

    /* 表头整行不要（每行自带字段名） */
    .yj-tr--head { display: none; }

    /* 四列：左图 + 三列信息位。库存/销量分别落在第 2、3 列 → 自然排在同一行；
       标题、价格、操作横跨 2~4 列。 */
    .yj-tr--goods {
        grid-template-columns: 92px auto auto minmax(0, 1fr);
        grid-template-rows: repeat(var(--yj-rows), auto);
        align-items: start;
        gap: 4px 10px;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--yj-line);
        border-radius: var(--yj-r);
        background: var(--yj-surface);
        box-shadow: var(--yj-sh-xs);
        overflow: hidden;
    }

    .yj-tr--goods:hover { background: var(--yj-surface); }

    /* 序号不占位 */
    .yj-col-no { display: none; }

    /* 左列：图片（纵跨右侧所有行）；行高按内容自适应，图片不拉伸 */
    .yj-col-thumb {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        padding: 0;
    }

    .yj-col-thumb > img,
    .yj-col-thumb > .yj-goods-noimg {
        width: 92px;
        height: 92px;
        border-radius: 12px;
    }

    /* 右列：标题独占一行；价格占第 2~3 列、购买按钮占第 4 列 —— 两者共用同一行。
      （发货类型挪到图片角标，所以那一列藏掉） */
    .yj-col-goods { grid-column: 2 / 5; }

    .yj-col-price { grid-column: 2 / 4; align-self: center; }

    .yj-col-act {
        grid-column: 4;
        align-self: center;
    }

    /* 库存 + 销量并排同一行 */
    .yj-col-num { grid-column: 2; }

    .yj-col-num + .yj-col-num { grid-column: 3; }

    .yj-col-deliver { display: none; }

    .yj-thumb-badge {
        position: absolute;
        top: 4px;
        left: 4px;
        display: inline-flex;
        align-items: center;
        padding: 1px 7px;
        border-radius: var(--yj-r-pill);
        color: #fff;
        font-size: 10.5px;
        line-height: 1.75;
        white-space: nowrap;
        box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .6);
    }

    .yj-thumb-badge--auto { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .yj-thumb-badge--manual { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }

    .yj-col-goods { padding: 0 0 2px; }

    .yj-goods-name {
        font-size: 14px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }

    /* 其余信息：字段名在前、值紧跟其后，读起来是一句话，不再是"左右拉伸"的一行 */
    .yj-col-num,
    .yj-col-deliver,
    .yj-col-price {
        padding: 0;
        text-align: left;
        font-size: 12.5px;
    }

    .yj-col-num::before,
    .yj-col-price::before {
        content: attr(data-label) " ";
        color: var(--yj-ink-4);
        font-size: 12px;
    }

    .yj-col-price::before { content: ""; }

    .yj-num { font-size: 13px; }
    .yj-price { font-size: 17px; }

    /* 操作按钮单独占一行，靠右 */
    /* 购买按钮与价格同行，落在右边 */
    .yj-col-act {
        display: flex;
        justify-content: flex-end;
        padding: 0;
    }

    .yj-buy-btn { padding: 7px 18px; }

    /* 子分类标题：一张矮卡 */
    .yj-tr--subgroup {
        margin: 10px 0 8px;
        border: 1px solid var(--yj-line);
        border-radius: var(--yj-r);
        background: var(--yj-surface);
        overflow: hidden;
    }

    .yj-subgroup-inner { padding-left: 16px; border-bottom: 0; }

    .yj-td-empty { border: 1px solid var(--yj-line); border-radius: var(--yj-r); margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 13.5px;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease);
}

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

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

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

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

.pagination-dots { color: var(--yj-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(--yj-ink-4);
}

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

/* --------------------------------------------------------------------------
   20. 店铺公告
   -------------------------------------------------------------------------- */
/* 公告：标题独占一行，正文在它下面（不再左右分栏） */
.site-announcement {
    display: block;
    /* 上边距 = 与页头之间的呼吸缝；下方间距交给 .page-body--announce，这里不再留 */
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-surface);
}

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

/* 标题行独占一行，正文从下一行开始 */
.site-announcement__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--yj-blue-700);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}

/* "店铺公告" 已经独占一行，中间那根竖分隔线留着反而突兀 */
.site-announcement__title-sep { display: none; }

.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(--yj-flow);
    font-size: 12px;
}

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

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

.site-announcement__body a { color: var(--yj-blue-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(--yj-ink); }
.empty-state p { margin: 0 0 18px; font-size: 13.5px; color: var(--yj-ink-3); }
.empty-state p a { color: var(--yj-blue-700); text-decoration: underline; }
.empty-state .btn { margin-top: 4px; }

.empty-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--yj-blue-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(--yj-blue-100), rgba(219, 234, 254, 0) 72%);
    color: var(--yj-blue);
    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(--yj-blue-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(--yj-flow-100); }
.empty-decor__dot--3 { width: 8px; height: 8px; top: 34%; right: 18%; background: var(--yj-flow-100); }

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   23. 商品详情
   -------------------------------------------------------------------------- */
.detail-card {
    padding: 26px;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-l);
    box-shadow: var(--yj-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(--yj-line);
    border-radius: var(--yj-r);
    background: var(--yj-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(--yj-r-pill);
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--yj-dur) var(--yj-ease);
}

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

.detail-thumb:hover { border-color: var(--yj-blue-200); }
.detail-thumb.active { border-color: var(--yj-blue); box-shadow: 0 0 0 3px rgba(96, 165, 250, .14); }

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

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

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

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

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

.yj-chip .fa { color: var(--yj-blue); }

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

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

.detail-stat-item strong { color: var(--yj-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(--yj-blue-200);
    border-radius: var(--yj-r);
    background: linear-gradient(120deg, var(--yj-blue-050) 0%, var(--yj-flow-100) 145%);
}

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

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

.detail-price-original {
    font-size: 14px;
    color: var(--yj-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(--yj-ink-4); text-decoration: line-through; }

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

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

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

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

.yj-promo__item {
    padding: 1px 10px;
    border-radius: var(--yj-r-pill);
    background: rgba(255, 255, 255, .8);
    color: #0369a1;
    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(--yj-ink-2);
}

.spec-group-label .fa { color: var(--yj-blue); 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(--yj-flow-100);
    color: #0369a1;
    font-size: 10.5px;
    line-height: 1.7;
}

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

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

.spec-btn.active {
    border-color: var(--yj-blue);
    background: var(--yj-blue-050);
    color: var(--yj-blue-900);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .14);
}

.spec-btn.disabled,
.spec-btn:disabled {
    border-color: var(--yj-line-2);
    background: var(--yj-surface-2);
    color: var(--yj-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(--yj-ink-2);
}

.detail-qty-label .fa { color: var(--yj-blue); 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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    overflow: hidden;
}

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

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

.detail-qty-input {
    width: 62px;
    height: 38px;
    border: 0;
    border-left: 1px solid var(--yj-line-2);
    border-right: 1px solid var(--yj-line-2);
    background: transparent;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--yj-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(--yj-ink-4); }
.detail-stock-info__empty { color: var(--yj-danger); }

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

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

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

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

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

.detail-form-field-input:focus {
    border-color: var(--yj-blue-500);
    background: var(--yj-surface);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .12);
}

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

.detail-guest-find-section {
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px dashed var(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface-2);
}

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

.detail-coupon-title .fa { color: var(--yj-flow); }

.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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    font-size: 14px;
    outline: none;
    transition: border-color var(--yj-dur) var(--yj-ease);
}

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

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

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

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

.detail-coupon-guest-tip { margin-top: 10px; font-size: 12.5px; color: var(--yj-ink-3); }
.detail-coupon-guest-tip .fa { color: var(--yj-blue); }
.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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease);
}

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

.detail-coupon-goget .fa { color: var(--yj-flow); }

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

.detail-coupon-applied-name { color: var(--yj-blue-700); font-weight: 600; }
.detail-coupon-applied-saved { color: #0369a1; }

/* 支付方式 */
.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(--yj-ink-2);
}

.detail-payment-title .fa { color: var(--yj-blue); 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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        box-shadow var(--yj-dur) var(--yj-ease);
}

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

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

.detail-payment-item.active {
    border-color: var(--yj-blue);
    background: var(--yj-blue-050);
    color: var(--yj-blue-900);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .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(--yj-ink-4); }

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

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

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

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

.detail-meta-tab-btn.active {
    background: var(--yj-surface);
    color: var(--yj-blue-700);
    font-weight: 600;
    box-shadow: var(--yj-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(--yj-ink-4); }
.detail-meta-value { color: var(--yj-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(--yj-flow-light);
    border-radius: var(--yj-r-s);
    background: rgba(240, 249, 255, .55);
    color: #075985;
    font-size: 13px;
}

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

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

.detail-body { font-size: 14px; line-height: 1.95; color: var(--yj-ink-2); word-break: break-word; }
.detail-body img { border-radius: var(--yj-r-s); }
.detail-body h1, .detail-body h2, .detail-body h3 { margin: 20px 0 10px; color: var(--yj-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(--yj-line); }
.detail-body th { background: var(--yj-surface-2); }
.detail-body blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid var(--yj-blue-200);
    background: var(--yj-blue-050);
    color: var(--yj-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(--yj-ink-4); }
.detail-tags__label .fa { color: var(--yj-blue); }

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

.article-tag:hover {
    border-color: var(--yj-blue-200);
    background: var(--yj-blue-050);
    color: var(--yj-blue-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(--yj-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 13px;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease);
}

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

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

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

.category-tab-count {
    padding: 0 7px;
    border-radius: var(--yj-r-pill);
    background: rgba(15, 23, 42, .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(--yj-blue-200); box-shadow: var(--yj-sh); }

.blog-article-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yj-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(--yj-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(--yj-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(--yj-line-2);
    font-size: 12px;
    color: var(--yj-ink-4);
}

.blog-article-meta .fa { color: var(--yj-blue-200); }

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

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

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

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

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

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

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

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

.sidebar-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 15px;
    border-radius: 3px;
    background: var(--yj-grad-blue);
    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(--yj-blue-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(--yj-blue-700); font-size: 18px; }

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

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

.sidebar-user-meta {
    font-size: 12px;
    color: var(--yj-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 12.5px;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease);
}

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

.sidebar-user-btn--primary {
    border-color: transparent;
    background: var(--yj-grad-blue);
    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(--yj-r-s);
    overflow: hidden;
    background: var(--yj-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(--yj-ink-4); font-size: 15px; }

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

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

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

.sidebar-article-date { margin-top: 3px; font-size: 11.5px; color: var(--yj-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(--yj-surface-2);
    color: var(--yj-ink-4);
    font-size: 11px;
    font-weight: 700;
}

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

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

.sidebar-post:hover .sidebar-post-title { color: var(--yj-blue-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink-3);
    font-size: 12.5px;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease);
}

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

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

/* 评论 */
.comment-section {
    margin-top: 16px;
    padding: 22px 30px 26px;
    background: var(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-l);
    box-shadow: var(--yj-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(--yj-line);
}

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

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

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

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

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

.comment-sort-btn.active { background: var(--yj-surface); color: var(--yj-blue-700); font-weight: 600; box-shadow: var(--yj-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(--yj-blue-100);
    color: var(--yj-blue-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface-2);
    color: var(--yj-ink);
    font-size: 13.5px;
    line-height: 1.75;
    resize: vertical;
    outline: none;
    transition: border-color var(--yj-dur) var(--yj-ease), background-color var(--yj-dur) var(--yj-ease);
}

.comment-textarea:focus { border-color: var(--yj-blue-500); background: var(--yj-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(--yj-ink-4); }

.comment-submit-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: var(--yj-r-pill);
    background: var(--yj-grad-blue);
    color: #fff;
    font-size: 13.5px;
    cursor: pointer;
    transition: filter var(--yj-dur) var(--yj-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink-3);
    font-size: 13.5px;
    cursor: pointer;
}

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

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

.comment-login-btn {
    padding: 6px 18px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-grad-blue);
    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(--yj-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(--yj-blue-100);
    color: var(--yj-blue-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(--yj-ink); }
.comment-reply-to { font-size: 12.5px; color: var(--yj-ink-4); }
.comment-reply-to b { color: var(--yj-blue-700); font-weight: 600; }
.comment-time { margin-left: auto; font-size: 11.5px; color: var(--yj-ink-4); }

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

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

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

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

.comment-load-more-replies { margin-top: 8px; }
.comment-load-replies-btn { font-size: 12.5px; color: var(--yj-blue-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(--yj-line);
    border-radius: var(--yj-r-s);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 13px;
}

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

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

.comment-page-dots { color: var(--yj-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(--yj-line);
    border-radius: var(--yj-r-l);
    background: linear-gradient(135deg, #ffffff 0%, var(--yj-blue-050) 100%);
    box-shadow: var(--yj-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(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-pill);
    transition: border-color var(--yj-dur) var(--yj-ease), box-shadow var(--yj-dur) var(--yj-ease);
}

.search-box__field:focus-within {
    border-color: var(--yj-blue-500);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .12);
}

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

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

.search-input::placeholder { color: var(--yj-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(--yj-line);
}

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

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

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

.search-type-tab:hover { color: var(--yj-blue-700); }

.search-type-tab.active {
    background: var(--yj-grad-blue);
    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(--yj-ink);
}

.search-sec__title .fa { color: var(--yj-blue); }

.search-sec__count {
    padding: 1px 10px;
    border-radius: var(--yj-r-pill);
    background: var(--yj-blue-100);
    color: var(--yj-blue-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(--yj-ink-3);
}

.coupon-intro .fa { color: var(--yj-blue); }

.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(--yj-surface);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r);
    box-shadow: var(--yj-sh-xs);
    overflow: hidden;
    transition: border-color var(--yj-dur) var(--yj-ease), box-shadow var(--yj-dur) var(--yj-ease);
}

.coupon-card:hover { border-color: var(--yj-blue-200); box-shadow: var(--yj-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(--yj-blue) 0%, var(--yj-blue-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(--yj-surface) 5px, transparent 5.5px);
    background-size: 12px 18px;
    background-repeat: repeat-y;
}

.coupon-card__value {
    font-family: var(--yj-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(--yj-ink); }

.coupon-card__desc {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--yj-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(--yj-flow-100);
    color: #0369a1;
    font-size: 11px;
}

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

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

.coupon-card__code-val {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--yj-surface-2);
    border: 1px dashed var(--yj-line);
    color: var(--yj-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(--yj-line);
    border-radius: var(--yj-r-pill);
    background: var(--yj-surface);
    color: var(--yj-ink-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--yj-dur) var(--yj-ease),
        background-color var(--yj-dur) var(--yj-ease),
        color var(--yj-dur) var(--yj-ease),
        filter var(--yj-dur) var(--yj-ease);
}

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

.coupon-btn-primary {
    border-color: transparent;
    background: var(--yj-grad-blue);
    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(--yj-r-pill);
    background: var(--yj-grad-blue);
    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(--yj-r) !important; overflow: hidden; }
.layui-layer-title { background: var(--yj-surface-2) !important; border-bottom-color: var(--yj-line) !important; }

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

.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(--yj-ink-2); font-weight: 500; }

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

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

/* --------------------------------------------------------------------------
   29. 流光特效（玉京子的招牌）
   —— 全部基于三条共用动画：
        yjFlow   渐变横向流动（蓝 → 天蓝 → 青），给描边 / 下划线 / 进度条
        yjSweep  一束高光扫过，给按钮 / 卡片
        yjPulse  柔光呼吸，给悬浮元素
      统一在这里覆盖，不散落到各组件里，改一处全站生效。
   -------------------------------------------------------------------------- */
@keyframes yjFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes yjSweep {
    0%       { transform: translateX(-120%) skewX(-18deg); }
    18%, 100% { transform: translateX(240%) skewX(-18deg); }
}

@keyframes yjPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* 流光条：任何地方要一条"会流动的线"，套这个类即可 */
.yj-flow-bar {
    background: var(--yj-grad-flow);
    background-size: 200% 100%;
    animation: yjFlow 6s linear infinite;
}

/* ① 顶部细条：静态蓝渐变（不再流动） */
.yj-topbar {
    background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 48%, #2563eb 100%);
}

/* ② 页头：底边那条约 1px 的彩色流光条已去掉 —— 上下的分界改由 .site-header
      自带的常驻柔影承担（见第 8 节），滚动时只把阴影加重一点。 */
.site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(76, 29, 149, .6); }

/* ③ 主导航：选中/悬浮的下划线走流光，并且一直在流 */
.main-nav > a::after,
.main-nav .nav-dropdown > a::after {
    background: var(--yj-grad-flow);
    background-size: 220% 100%;
    animation: yjFlow 7s linear infinite;
}

/* ④ 按钮：常驻一束高光缓慢扫过；悬浮时扫得更快、外发光更亮 */
.btn-primary { position: relative; overflow: hidden; }

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
    animation: yjSweep 5.4s var(--yj-ease) infinite;
    pointer-events: none;
}

.btn-primary:hover { box-shadow: var(--yj-glow-strong); }
.btn-primary:hover::before { animation-duration: 2.4s; }

/* ⑤ 卡片：顶边一条流光，悬浮时亮起 + 上浮取消（只加光，不做位移） */
.card { position: relative; }

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--yj-grad-flow);
    background-size: 200% 100%;
    animation: yjFlow 8s linear infinite;
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-ease), left var(--yj-dur) var(--yj-ease), right var(--yj-dur) var(--yj-ease);
    z-index: 2;
    pointer-events: none;
}

.card:hover::before { opacity: 1; left: 0; right: 0; }

/* ⑥ 区块标题左侧的小竖条 / 首页"全部"按钮 */
.yj-sec-head__mark {
    background: var(--yj-grad-flow);
    background-size: 100% 220%;
    animation: yjFlow 7s linear infinite alternate;
}

.home-all-btn:hover {
    border-color: transparent;
    background: var(--yj-blue-050);
    box-shadow: var(--yj-glow-soft);
}

/* ⑦ 底部行动带的光束在 .yj-cta 那节里，这里只补一个共用的旋转动画，留给需要自转的装饰元素 */
@keyframes yjSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ⑪ 图标按钮 / 汉堡按钮：悬浮外发光 */
.header-action-btn:hover,
.header-menu-btn:hover { box-shadow: 0 6px 18px -10px rgba(37, 99, 235, .55); }

/* ⑫ 图片：悬浮时一层极淡的流光掠过（不改变尺寸，只叠光） */
.card-img::after,
.article-grid-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(96, 165, 250, 0) 40%, rgba(56, 189, 248, .16) 50%, rgba(34, 211, 238, 0) 60%);
    opacity: 0;
    transition: opacity var(--yj-dur) var(--yj-ease);
    pointer-events: none;
}

.card:hover .card-img::after,
.article-grid-card:hover .article-grid-img::after { opacity: 1; }

/* --------------------------------------------------------------------------
   30. 打印 / 无障碍降级
   -------------------------------------------------------------------------- */
@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,
    .yj-topbar,
    .yj-totop,
    .mobile-nav,
    .search-modal { display: none !important; }
    .page-body { padding: 0; }
}