/* ==========================================================================
   kphyper 主题样式（hyper[简约]）

   这个文件是 kphyper 主题「唯一」的自定义样式表，加载顺序是：
       app-creative.min.css（Hyper 的 Bootstrap 4 基座）  →  本文件

   为什么不再共用 /assets/hyper/css/hyper.css：
   两个主题共用一个 css，改 kphyper 的样式必然把 hyper[大图] 一起改了。
   所以这里把 kphyper 页面用到的、原本写在 hyper.css 里的结构性规则
   （.buy-grid / .pay-type / .stats-card / .tab-link 等）整套搬了过来，
   再在上面重做视觉。改这个文件不会影响任何其它主题。

   页面结构和类名一律保持原样，只换观感 —— 主题里的功能
   （支付方式选择、搜索过滤、购物车角标、卡密复制、批发弹窗…）依赖这些
   类名和 id，删一个就会坏一个功能。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
    --kp-bg:            #f5f6fa;
    --kp-surface:       #ffffff;
    --kp-surface-soft:  #fafbfd;
    --kp-border:        #e8eaf0;
    --kp-border-strong: #d9dde7;

    --kp-text:          #1e2433;
    --kp-text-soft:     #59617a;
    --kp-text-muted:    #8b93a7;

    --kp-primary:       #3b6cf6;
    --kp-primary-dark:  #2b56d4;
    --kp-primary-soft:  #eef3ff;

    --kp-danger:        #e8384f;
    --kp-danger-soft:   #fdeef0;
    --kp-success:       #0ca678;
    --kp-success-soft:  #e6f8f2;
    --kp-warning:       #f08c00;
    --kp-warning-soft:  #fff4e0;

    --kp-radius-sm:  8px;
    --kp-radius:    12px;
    --kp-radius-lg: 16px;

    --kp-shadow-xs: 0 1px 2px rgba(23, 32, 56, .05);
    --kp-shadow-sm: 0 1px 3px rgba(23, 32, 56, .06), 0 1px 2px rgba(23, 32, 56, .04);
    --kp-shadow:    0 4px 16px -6px rgba(23, 32, 56, .12), 0 1px 3px rgba(23, 32, 56, .05);
    --kp-shadow-lg: 0 16px 40px -18px rgba(23, 32, 56, .25);

    --kp-header-h: 66px;
}

/* --------------------------------------------------------------------------
   2. 基础排版
   -------------------------------------------------------------------------- */
body {
    background-color: var(--kp-bg);
    color: var(--kp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}
body, .wrapper, .content-page { overflow: visible; }
body[data-leftbar-compact-mode=condensed] { min-height: 0; }
body[data-layout=topnav] .content-page { padding: 0 !important; min-height: 0; }

/* 底部 footer 是 absolute 定位的，正文要留出高度，否则会被盖住 */
.content { margin-bottom: 96px; padding-top: 20px; }

h1, h2, h3, h4, h5, h6 { color: var(--kp-text); font-weight: 600; letter-spacing: -.01em; }

a { color: var(--kp-primary); transition: color .15s ease; }
a:hover { color: var(--kp-primary-dark); text-decoration: none; }
.hyper-wrapper a { color: var(--kp-text); }

hr { border-color: var(--kp-border); }

::selection { background: rgba(59, 108, 246, .16); }

.container { max-width: 1240px; }
@media screen and (max-width: 575.98px) { .container { padding-left: 12px; padding-right: 12px; } }

/* 焦点可见性：键盘/读屏用户能看到当前落点，同时不影响鼠标操作 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tab-link:focus-visible,
.pay-type:focus-visible {
    outline: 2px solid var(--kp-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. 顶部导航
   -------------------------------------------------------------------------- */
.header-navbar {
    height: var(--kp-header-h);
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--kp-border);
    box-shadow: 0 1px 2px rgba(23, 32, 56, .03);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.header-flex {
    height: var(--kp-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topnav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.topnav-logo img { height: 34px; width: auto; border-radius: 8px; }
.logo-title {
    font-size: 19px;
    font-weight: 700;
    display: inline-block;
    color: var(--kp-text);
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: -.02em;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .logo-title { font-size: 16px; max-width: 8em; overflow: hidden; text-overflow: ellipsis; }
}

/* PC 导航按钮组 */
.pc-nav-links { display: flex; align-items: center; margin-left: 28px; gap: 8px; }
.pc-nav-links > a,
.pc-nav-links > .dropdown > button,
.pc-nav-links .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    color: var(--kp-text-soft);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pc-nav-links > a i,
.pc-nav-links > .dropdown > button i { margin-right: 6px; font-size: 17px; }
.pc-nav-links > a:hover,
.pc-nav-links > .dropdown > button:hover {
    background: var(--kp-primary-soft);
    color: var(--kp-primary);
    border-color: transparent;
}
.pc-nav-links .dropdown-toggle::after { margin-left: 6px; }

/* 导航里的购物车角标 */
.nav-cart-badge {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
    margin-left: 6px; border-radius: 9px; background: var(--kp-danger); color: #fff;
    font-size: 11px; text-align: center; font-weight: 700; vertical-align: top;
}

/* 下拉菜单 */
.dropdown { position: relative; }
.header-navbar .dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: auto; right: 0; z-index: 1000;
    min-width: 168px; padding: 6px; margin: 0;
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow-lg);
}
.header-navbar .dropdown:hover .dropdown-menu,
.header-navbar .dropdown-menu.show { display: block; }
.header-navbar .dropdown-item {
    display: block; padding: 9px 12px; border-radius: var(--kp-radius-sm);
    color: var(--kp-text-soft); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.header-navbar .dropdown-item:hover { background: var(--kp-primary-soft); color: var(--kp-primary); }

/* 移动端菜单 */
.mobile-nav-toggle {
    display: none; margin-left: 10px; align-items: center; justify-content: center;
    width: 40px; height: 38px; padding: 0; border-radius: 10px;
    border: 1px solid var(--kp-border-strong); background: var(--kp-surface); color: var(--kp-text-soft);
}
.mobile-nav-toggle i { font-size: 20px; margin: 0; }
.mobile-nav-menu {
    display: none; position: absolute; top: calc(var(--kp-header-h) + 4px); right: 12px; left: 12px;
    background: var(--kp-surface); border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius); box-shadow: var(--kp-shadow-lg);
    padding: 8px; z-index: 1030; max-height: calc(100vh - var(--kp-header-h) - 24px); overflow-y: auto;
}
.mobile-nav-item {
    display: flex; align-items: center; padding: 11px 12px; border-radius: var(--kp-radius-sm);
    color: var(--kp-text-soft); font-size: 15px; text-decoration: none;
}
.mobile-nav-item:hover, .mobile-nav-item:active { color: var(--kp-primary); background: var(--kp-primary-soft); }
.mobile-nav-item i:first-child { margin-right: 12px; width: 20px; text-align: center; font-size: 18px; }
.mobile-dropdown-menu { display: none; padding-left: 20px; }
.mobile-dropdown-item {
    display: block; padding: 9px 12px; border-radius: var(--kp-radius-sm);
    color: var(--kp-text-muted); text-decoration: none; font-size: 14px;
}
.mobile-dropdown-item:hover { color: var(--kp-primary); background: var(--kp-primary-soft); }
.float-right { float: right; margin-left: auto; transition: transform .2s; }

@media (max-width: 991.98px) {
    .pc-nav-links { display: none; }
    .mobile-nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   4. 页头标题区
   -------------------------------------------------------------------------- */
.page-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0 18px 0;
    background: transparent;
}
.page-title-box .page-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--kp-text);
    letter-spacing: -.02em;
}
.page-title-box .page-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--kp-text-muted);
}
.page-title-right { display: flex !important; float: none !important; margin: 0 !important; margin-left: auto !important; }

/* 搜索框 */
.app-search { width: 260px; }
.app-search .form-control {
    height: 40px;
    padding-left: 38px;
    border-radius: 999px;
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    box-shadow: var(--kp-shadow-xs);
}
.app-search .position-relative > span {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--kp-text-muted); font-size: 17px; line-height: 1; pointer-events: none;
}
@media (max-width: 767.98px) {
    .page-title-box { padding-bottom: 14px; }
    .page-title-box .page-title { font-size: 19px; }
    .page-title-right { width: 100%; margin-left: 0 !important; }
    .app-search { width: 100%; }
}

/* 面包屑（SEO 用，同时给用户一条返回路径） */
.kp-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 0 0 12px 0; margin: 0; list-style: none;
    font-size: 13px; color: var(--kp-text-muted);
}
.kp-breadcrumb li { display: inline-flex; align-items: center; }
.kp-breadcrumb li + li::before { content: "/"; margin: 0 8px 0 2px; color: var(--kp-border-strong); }
.kp-breadcrumb a { color: var(--kp-text-muted); }
.kp-breadcrumb a:hover { color: var(--kp-primary); }
.kp-breadcrumb [aria-current="page"] { color: var(--kp-text-soft); }

/* --------------------------------------------------------------------------
   5. 卡片
   -------------------------------------------------------------------------- */
.card {
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg);
    box-shadow: var(--kp-shadow-sm);
    margin-bottom: 20px;
}
.card-body { padding: 20px; }
@media (max-width: 575.98px) { .card-body { padding: 16px; } }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--kp-border);
    padding: 16px 20px;
    border-radius: var(--kp-radius-lg) var(--kp-radius-lg) 0 0;
}
.card-header .card-title, .card .card-title {
    font-size: 15px; font-weight: 600; margin: 0; color: var(--kp-text);
}
.card .header-title {
    font-size: 15px; font-weight: 600; color: var(--kp-text);
    display: flex; align-items: center;
}
.card .header-title::before {
    content: ""; display: inline-block; width: 3px; height: 15px; border-radius: 2px;
    margin-right: 8px; background: var(--kp-primary);
}

/* 站点公告 */
.notice { color: var(--kp-text-soft); font-size: 14px; word-break: break-word; }
.notice img { max-width: 100%; height: auto; border-radius: var(--kp-radius-sm); }
.notice a { color: var(--kp-primary); }
.notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. 按钮
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:focus,
.btn-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: none; }

.btn-primary {
    background: var(--kp-primary); border-color: var(--kp-primary);
    box-shadow: 0 2px 8px -2px rgba(59, 108, 246, .5);
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--kp-primary-dark); border-color: var(--kp-primary-dark);
}
.btn-danger {
    background: var(--kp-danger); border-color: var(--kp-danger);
    box-shadow: 0 2px 8px -2px rgba(232, 56, 79, .5);
}
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background: #cf2b41; border-color: #cf2b41; }

.btn-outline-primary {
    color: var(--kp-primary); border-color: rgba(59, 108, 246, .45); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--kp-primary); border-color: var(--kp-primary); color: #fff;
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    color: var(--kp-text-muted); border-color: var(--kp-border-strong); background: var(--kp-surface-soft); opacity: 1;
}
.btn-secondary { background: #eef0f5; border-color: #eef0f5; color: var(--kp-text-soft); }
.btn-secondary:hover { background: #e3e6ee; border-color: #e3e6ee; color: var(--kp-text); }
.btn-link { color: var(--kp-primary); padding-left: 0; padding-right: 0; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn-pill { border-radius: 10rem; padding-left: 1.5em; padding-right: 1.5em; }
.btn-disabled, .btn:disabled { background-color: #e6e8ee !important; border-color: #e6e8ee !important; color: #a6acbb !important; box-shadow: none; cursor: not-allowed; }
.btn-outline-orange {
    background: none; border: 1px solid var(--kp-success); color: var(--kp-success);
}
.btn-outline-orange:hover { background: var(--kp-success); color: #fff; }

/* --------------------------------------------------------------------------
   7. 徽标
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; letter-spacing: .01em;
}
.badge-outline-primary { color: var(--kp-primary); border: 1px solid rgba(59, 108, 246, .4); background: var(--kp-primary-soft); }
.badge-outline-danger  { color: var(--kp-danger);  border: 1px solid rgba(232, 56, 79, .35); background: var(--kp-danger-soft); }
.badge-outline-success { color: var(--kp-success); border: 1px solid rgba(12, 166, 120, .35); background: var(--kp-success-soft); }
.badge-outline-warning { color: var(--kp-warning); border: 1px solid rgba(240, 140, 0, .35); background: var(--kp-warning-soft); }
.badge-outline-secondary { color: var(--kp-text-muted); border: 1px solid var(--kp-border-strong); background: var(--kp-surface-soft); }
.badge-outline-dark { color: var(--kp-text-soft); border: 1px solid var(--kp-border-strong); background: var(--kp-surface-soft); }

/* --------------------------------------------------------------------------
   8. 表单
   -------------------------------------------------------------------------- */
.form-control {
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--kp-border-strong);
    background: var(--kp-surface);
    color: var(--kp-text);
    font-size: 14px;
    padding: 8px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(59, 108, 246, .14);
}
.form-control::placeholder { color: #aab0c0; }
.form-control:disabled, .form-control[readonly] { background: var(--kp-surface-soft); color: var(--kp-text-muted); }
textarea.form-control { height: auto; line-height: 1.6; }
.form-group { margin-bottom: 18px; }
.form-group label, .col-form-label { font-size: 13px; font-weight: 500; color: var(--kp-text-soft); margin-bottom: 6px; }

/* 表单小标题（下单页、充值弹窗都在用） */
.buy-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--kp-text-soft);
    margin-bottom: 7px;
}
.form-group h3 { font-weight: 600; color: var(--kp-text); }

/* 数量步进器（touchspin） */
.bootstrap-touchspin .form-control { border-radius: 10px; text-align: center; }
.bootstrap-touchspin .input-group-btn .btn { border-radius: 10px; }

.alert { border-radius: var(--kp-radius); border: 1px solid transparent; font-size: 14px; }
.alert-dark.bg-white { background: var(--kp-primary-soft) !important; border-color: rgba(59, 108, 246, .18); color: var(--kp-text-soft) !important; }
.alert-warning { background: var(--kp-warning-soft); border-color: rgba(240, 140, 0, .25); color: #a36000; }
.alert-danger { background: var(--kp-danger-soft); border-color: rgba(232, 56, 79, .25); color: #b02135; }

/* --------------------------------------------------------------------------
   9. 表格
   -------------------------------------------------------------------------- */
.table { color: var(--kp-text); margin-bottom: 0; }
.table thead th {
    background: var(--kp-surface-soft);
    border-bottom: 1px solid var(--kp-border);
    border-top: 0;
    color: var(--kp-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 12px 14px;
    white-space: nowrap;
}
.table td {
    border-top: 1px solid var(--kp-border);
    padding: 14px;
    vertical-align: middle;
    font-size: 14px;
}
.table-hover tbody tr:hover, .table tbody tr:hover { background-color: var(--kp-primary-soft); }
.table tbody tr { transition: background-color .12s ease; }
.table-responsive { border-radius: var(--kp-radius); }

/* 商品名一列 */
.table-user a, .table td a.text-body { color: var(--kp-text); font-weight: 500; }
.table td a.text-body:hover, .text-body:hover { color: var(--kp-primary) !important; }
.avatar-sm {
    width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--kp-border); background: var(--kp-surface-soft);
}
/* 基座里有一条 .table .table-user img{width:30px;height:30px}，权重比 .avatar-sm 高，
   会把列表缩略图压回 30px，和 HTML 上写的 width/height 对不上。这里显式对齐。 */
.table .table-user img.avatar-sm { width: 34px; height: 34px; }
.link-no-decor { color: inherit; text-decoration: none; }
.link-no-decor:hover { color: var(--kp-primary); }

/* 价格 */
.kp-price, .table td b[style*="red"] { color: var(--kp-danger) !important; font-weight: 700; font-size: 15px; }

/* 首页真实销量与已审核评分：紧邻下单按钮展示。 */
.kp-cell-action .home-product-stats {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 5px;
    color: var(--kp-text-muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
}
.kp-cell-action .home-product-stats i { margin-right: 2px; }
.kp-cell-action .home-review-score { color: #d88a08; }
.kp-cell-action .home-review-score.is-empty { color: var(--kp-text-muted); }

/* 商品列表卡片外壳：去掉表格与卡片之间多余的内边距 */
.card.pl-1.pr-1 { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
.card.pl-1.pr-1 .table thead th:first-child,
.card.pl-1.pr-1 .table td:first-child { padding-left: 18px; }
.card.pl-1.pr-1 .table thead th:last-child,
.card.pl-1.pr-1 .table td:last-child { padding-right: 18px; }

/* 分类标题条 —— 原来是一个通栏的蓝色按钮，观感很突兀，改成左侧色条的小标题 */
.kp-group-title {
    display: flex; align-items: center; gap: 9px;
    margin: 26px 0 12px 0;
    font-size: 16px; font-weight: 700; color: var(--kp-text); letter-spacing: -.01em;
}
.kp-group-title::before {
    content: ""; width: 4px; height: 17px; border-radius: 2px;
    background: linear-gradient(180deg, var(--kp-primary), #6a8dff);
}
.kp-group-title .kp-group-count {
    font-size: 12px; font-weight: 500; color: var(--kp-text-muted);
    background: var(--kp-surface); border: 1px solid var(--kp-border);
    border-radius: 999px; padding: 1px 9px;
}
.category:first-of-type .kp-group-title { margin-top: 6px; }

/* 移动端：把商品表格改成卡片式，避免横向滚动和挤压 */
@media (max-width: 767.98px) {
    .phone { display: none; }

    .kp-goods-table thead { display: none; }
    .kp-goods-table, .kp-goods-table tbody, .kp-goods-table tr, .kp-goods-table td { display: block; width: 100%; }
    /* 上面这条按类名算权重比 .phone 高，不排除的话会把手机上本该隐藏的
       类型/库存/返利三列又显示出来，一行商品要占掉大半屏。 */
    .kp-goods-table td.phone, .kp-goods-table th.phone { display: none !important; }
    .kp-goods-table tr {
        position: relative;
        border-top: 1px solid var(--kp-border);
        padding: 14px 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 6px;
        align-items: center;
    }
    .kp-goods-table tr:first-child { border-top: 0; }
    .kp-goods-table td { border: 0; padding: 0; grid-column: 1 / -1; }
    .kp-goods-table td.table-user, .kp-goods-table td:first-of-type { grid-column: 1 / -1; }
    .kp-goods-table td.kp-cell-price { grid-column: 1; }
    .kp-goods-table td.kp-cell-action { grid-column: 2; grid-row: 2; text-align: right; }
    .kp-goods-table td.kp-cell-action .btn { padding: 6px 16px; }
    .kp-cell-action .home-product-stats { justify-content: flex-end; }
    .kp-goods-table td.kp-cell-rebate { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10. 分类切换（首页 Tab）
   -------------------------------------------------------------------------- */
.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0;
}
.nav-list::-webkit-scrollbar { display: none; }
.tab-link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--kp-text-soft);
    background-color: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: 999px;
    box-shadow: var(--kp-shadow-xs);
    transition: all .15s ease;
}
.tab-link:hover { color: var(--kp-primary); border-color: rgba(59, 108, 246, .4); }
.tab-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--kp-primary), #6a8dff);
    border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(59, 108, 246, .6);
}
@media screen and (max-width: 767px) { .tab-link { min-width: 0; padding: 6px 14px; font-size: 13px; } }

/* 原主题在选中的分类上贴一张 check.png，观感很脏；这里隐藏图片，
   选中态改由上面的渐变背景表达。标签结构保持不变，不影响 JS。 */
.img-checkmark { display: none !important; }

/* --------------------------------------------------------------------------
   11. 最近成交滚动条
   -------------------------------------------------------------------------- */
.purchase-info-container {
    overflow: hidden;
    white-space: nowrap;
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow-xs);
    padding: 9px 14px;
    margin-bottom: 18px;
}
.purchase-info { display: inline-block; animation: kpSlideLeft 20s linear infinite; }
.purchase-info div {
    color: var(--kp-text-soft);
    font-weight: 500;
    font-size: 13px;
}
.purchase-info div::before {
    content: "🔥";
    margin-right: 6px;
}
@keyframes kpSlideLeft {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) { .purchase-info { animation: none; } }

/* --------------------------------------------------------------------------
   12. 商品详情页
   -------------------------------------------------------------------------- */
.buy-product img { max-width: 100%; height: auto; border-radius: var(--kp-radius); cursor: zoom-in; }
.buy-product { line-height: 1.8; color: var(--kp-text-soft); }
.buy-product h1, .buy-product h2, .buy-product h3, .buy-product h4 { margin-top: 1.2em; }
.kp-product-title {
    font-size: 20px; font-weight: 700; line-height: 1.45; margin: 0;
    letter-spacing: -.01em; word-break: break-word;
}
.buy-price { color: var(--kp-danger); font-weight: 700; }
.kp-buy-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; }
.kp-buy-price-row .buy-price { font-size: 30px; letter-spacing: -.02em; }
.kp-buy-price-row del { color: var(--kp-text-muted); font-size: 14px; font-weight: 400; }
.kp-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

.geetest_holder.geetest_wind { width: 100% !important; min-width: 100% !important; }

@media screen and (min-width: 992px) {
    .buy-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .sticky { position: -webkit-sticky; position: sticky; top: calc(var(--kp-header-h) + 12px); }
    .buy-shop { grid-column: span 2 / span 2; }
    .buy-product { grid-column: span 4 / span 4; }
    .hyper-sm-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; }
}

/* 自选卡密 */
.buy label { display: block; cursor: pointer; }
.buy > div > label input[type=radio] { margin-right: 6px; }

/* 支付方式 */
.pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}
.pay-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 58px;
    padding: 8px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--kp-text-soft);
    background: var(--kp-surface) !important;
    border: 1.5px solid var(--kp-border-strong);
    border-radius: var(--kp-radius);
    cursor: pointer;
    position: relative;
    transition: all .15s ease;
}
.pay-type svg { flex-shrink: 0; }
.pay-type:hover { border-color: rgba(59, 108, 246, .55); color: var(--kp-text); }
.pay-type.active, .pay-select {
    border-color: var(--kp-primary);
    background: var(--kp-primary-soft) !important;
    color: var(--kp-primary);
    box-shadow: 0 2px 10px -4px rgba(59, 108, 246, .55);
}
/* 选中角标 */
.pay-type.active::after {
    content: "";
    position: absolute; top: -1px; right: -1px;
    width: 0; height: 0;
    border-top: 18px solid var(--kp-primary);
    border-left: 18px solid transparent;
    border-radius: 0 var(--kp-radius) 0 0;
}
/* 登录用户的余额支付按钮不在 pay-grid 里，单独占一行 */
.input-group > .pay-type { width: 100%; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   13. 订单详情页
   -------------------------------------------------------------------------- */
.orderinfo-grid { display: grid; grid-template-columns: auto; }
.orderinfo-info .mb-1 { display: flex; gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--kp-border); font-size: 14px; }
.orderinfo-info .mb-1:last-child { border-bottom: 0; }
.orderinfo-info label { margin: 0; color: var(--kp-text-muted); font-weight: 500; min-width: 5em; flex-shrink: 0; }
.orderinfo-info span { color: var(--kp-text); word-break: break-all; }
@media screen and (min-width: 768px) {
    .orderinfo-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-gap: 24px; }
    .orderinfo-info { grid-column: span 2 / span 2; }
    .orderinfo-kami { grid-column: span 4 / span 4; }
}
@media screen and (max-width: 767.98px) {
    .orderinfo-kami { margin-top: 18px; }
}
.textarea-kami {
    min-height: 190px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    background: var(--kp-surface-soft);
}
.kami-btn { margin-top: 10px; margin-right: 8px; }
.orderinfo-kami .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   14. 个人中心 / 邀请 / 批发
   -------------------------------------------------------------------------- */
.stats-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 22px;
    margin-bottom: 20px;
    overflow: hidden;
}
.stats-icon {
    display: flex; justify-content: center; align-items: center;
    width: 50px; height: 50px; flex-shrink: 0;
    background: var(--kp-primary-soft);
    color: var(--kp-primary);
    border-radius: 14px;
}
.stats-card i { font-size: 22px; }
.stats-detail {
    margin-right: auto; margin-left: 16px;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
}
.stats-detail > span { font-size: 12.5px; color: var(--kp-text-muted); }
.stats-member h6 { margin-top: 3px !important; font-size: 15px; font-weight: 600; word-break: break-all; }
.stats-icon-user { background: var(--kp-success-soft); color: var(--kp-success); }
.stats-icon-time { background: var(--kp-warning-soft); color: var(--kp-warning); }
.malus-invite-tips {
    display: block; position: absolute; right: 0; bottom: 0;
    background: var(--kp-surface-soft); color: var(--kp-text-muted);
    font-size: 11.5px; font-weight: 500; line-height: 1.5;
    padding: 3px 10px 3px 14px; text-align: center;
    border-radius: 12px 0 0 0; cursor: pointer;
}
.edu-badge, .malus-invite-tips { cursor: pointer; }
.stats-card .btn { align-self: center; }

.vip-center .card-header .card-title { font-size: 15px; font-weight: 700; }
.order-table .table td { vertical-align: middle !important; }
.order-table .badge, .invite-table .badge { margin-right: 4px; }

.overview { align-items: center !important; }
.overview .card-title { font-size: 15px; font-weight: 600; }

.affiliate-overview { align-items: center; display: flex; padding: 22px; }
.affiliate-overview .card {
    margin-right: 12px; height: 88px; display: flex; justify-content: center;
    margin-bottom: 0; width: 260px; box-shadow: none; border-color: var(--kp-border);
}
.affiliate-overview .h4 { font-size: 24px; font-weight: 700; }
.affiliate-show-withdrowal-btn {
    margin: 0 12px 0 auto; height: 42px; display: flex; align-items: center;
    justify-content: center; padding: 0 42px; position: relative;
}
.stamp {
    color: #fff; background: var(--kp-text-muted);
    display: flex; justify-content: center; align-items: center;
    min-width: 46px; height: 46px; border-radius: 12px; margin-right: 18px !important;
}
.stamp i { font-size: 22px; }
.stamp-md { line-height: 2.5rem; }
.bg-success { background-color: var(--kp-success-soft) !important; }
.bg-success i { color: var(--kp-success); }
.bg-red { background: var(--kp-danger-soft) !important; }
.bg-red i { color: var(--kp-danger); }
.contact { min-height: 136px; }
.invite-card .card-title { font-size: 15px; font-weight: 700; }
.malus-share .list { padding-left: 18px; font-size: 14px; }
.invite-table .table th { vertical-align: middle; line-height: 1.4; }
.invite-table .show-address { max-width: 180px; }

@media (max-width: 768px) {
    .affiliate-overview { align-items: flex-start; padding: 20px; }
    .affiliate-overview .card { margin-right: 0; width: 100%; }
    .affiliate-link, .affiliate-overview { flex-direction: column; }
    .affiliate-show-withdrowal-btn { margin-top: 20px; width: 100%; }
}

/* 提现设置 */
.withdrowal-setting .account-info { margin-bottom: 24px; }
.withdrowal-setting .account-info .payment-type {
    margin-top: 20px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; margin-bottom: 18px;
}
.withdrowal-setting .account-info .payment-type div {
    cursor: pointer; width: 158px; height: 42px; background: var(--kp-surface);
    border: 1px solid var(--kp-border-strong); box-sizing: border-box; border-radius: 10px;
    margin-right: 12px; margin-bottom: 8px;
    display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500;
}
.withdrowal-setting .account-info .payment-type div.active { border: 1.5px solid var(--kp-primary); color: var(--kp-primary); background: var(--kp-primary-soft); }
.withdrowal-setting .account-info .payment-type div svg { margin-right: 8px; }
.withdrowal-setting .account-info .account { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; }
.withdrowal-setting .account-info .account .form-wrapper.account-name { width: 320px; margin-right: 16px; }
.withdrowal-setting .account-info .account .form-wrapper .label { font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--kp-text-soft); }
.withdrowal-setting .account-info .account .form-wrapper.account-name input { width: 100%; }
.withdrowal-setting .account-info .account .form-wrapper input {
    background: var(--kp-surface); border: 1px solid var(--kp-border-strong); box-sizing: border-box;
    border-radius: 10px; font-size: 14px; display: flex; align-items: center; color: var(--kp-text);
    margin-right: 16px; padding: 0 13px; height: 44px; margin-bottom: 16px;
}
.withdrowal-setting .desc { margin-top: 18px; position: relative; }
.withdrowal-setting .desc h4 { margin-bottom: 20px; font-size: 15px; }
.withdrowal-setting .desc li {
    list-style: none; font-size: 12.5px; line-height: 1.7; display: flex; align-items: center;
    color: var(--kp-text-muted); flex: none; order: 0; align-self: flex-start; margin-top: 10px;
}
.withdrowal-setting .desc button { margin-top: 32px; border-radius: 10px; width: 200px; height: 46px; float: right; }

/* 充值面额 */
.choose-tag { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.choose-tag .tag {
    font-size: 14px; border-radius: 10px; border: 1px solid var(--kp-border-strong);
    font-weight: 500; background: var(--kp-surface); color: var(--kp-text-soft);
    position: relative; padding: 6px 10px; min-width: 100px; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all .15s ease;
}
.choose-tag .tag:hover { border-color: rgba(59, 108, 246, .5); }
.choose-tag .tag.active { border-color: var(--kp-primary); color: var(--kp-primary); background: var(--kp-primary-soft); }
.choose-tag .tag .discount-tag {
    color: #fff; background: var(--kp-danger); padding: 2px 6px; border-radius: 100px;
    font-size: 11px; font-weight: 700; line-height: 14px; margin-left: 5px;
}

/* --------------------------------------------------------------------------
   15. 文章列表 / 详情
   -------------------------------------------------------------------------- */
.kp-article-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.kp-article-nav a {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-size: 13.5px; color: var(--kp-text-soft);
    background: var(--kp-surface-soft); border: 1px solid var(--kp-border);
}
.kp-article-nav a:hover { color: var(--kp-primary); border-color: rgba(59, 108, 246, .4); }
.kp-article-nav a.active { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; font-weight: 600; }

.kp-article-item { padding: 18px 0; border-top: 1px solid var(--kp-border); }
.kp-article-item:first-child { border-top: 0; padding-top: 4px; }
.blog-post-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.blog-post-title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.5; }
.blog-post-title a { color: var(--kp-text); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.blog-post-title a:hover { color: var(--kp-primary); }
.blog-post-meta { font-size: 12.5px; color: var(--kp-text-muted); margin: 0; }
a.blog-post-meta { color: var(--kp-text-muted); }
.article-summary { font-size: 13px; color: var(--kp-text-muted); margin: 8px 0 0 0; line-height: 1.75; }

.kp-article-detail { max-width: 820px; margin: 0 auto; }
.kp-article-detail .kp-article-title { font-size: 26px; font-weight: 700; line-height: 1.4; margin: 6px 0 12px 0; text-align: center; }
.kp-article-detail .kp-article-meta { text-align: center; color: var(--kp-text-muted); font-size: 13px; margin-bottom: 22px; }
.kp-article-body { font-size: 15px; line-height: 1.9; color: var(--kp-text-soft); word-break: break-word; }
.kp-article-body img { max-width: 100%; height: auto; border-radius: var(--kp-radius); }
.kp-article-body h2 { font-size: 20px; margin: 1.6em 0 .6em; }
.kp-article-body h3 { font-size: 17px; margin: 1.4em 0 .5em; }
.kp-article-body p { margin-bottom: 1.1em; }
.kp-article-body pre, .kp-article-body code {
    background: var(--kp-surface-soft); border-radius: 8px; padding: 2px 6px; font-size: 13px;
}
.kp-article-body pre { padding: 14px; overflow-x: auto; border: 1px solid var(--kp-border); }
.kp-article-body blockquote {
    border-left: 3px solid var(--kp-primary); background: var(--kp-primary-soft);
    padding: 10px 16px; border-radius: 0 8px 8px 0; margin: 1.2em 0;
}
.kp-article-body table { width: 100%; margin-bottom: 1.2em; }
.kp-article-body table td, .kp-article-body table th { border: 1px solid var(--kp-border); padding: 8px 10px; }

/* 分页 */
.pagination { gap: 6px; flex-wrap: wrap; }
.page-link {
    border-radius: 10px !important; border: 1px solid var(--kp-border);
    color: var(--kp-text-soft); min-width: 38px; text-align: center;
}
.page-link:hover { background: var(--kp-primary-soft); color: var(--kp-primary); border-color: rgba(59, 108, 246, .35); }
.page-item.active .page-link { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.page-item.disabled .page-link { color: var(--kp-text-muted); background: var(--kp-surface-soft); }

/* --------------------------------------------------------------------------
   16. 标签页（查询订单）
   -------------------------------------------------------------------------- */
.nav-tabs.nav-bordered { border-bottom: 1px solid var(--kp-border); gap: 4px; }
.nav-tabs.nav-bordered .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--kp-text-muted); font-weight: 500; padding: 10px 14px;
}
.nav-tabs.nav-bordered .nav-link:hover { color: var(--kp-text); }
.nav-tabs.nav-bordered .nav-link.active {
    background: transparent; color: var(--kp-primary); border-bottom-color: var(--kp-primary);
}

/* --------------------------------------------------------------------------
   17. 弹窗
   -------------------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-lg); }
.modal-header {
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg) var(--kp-radius-lg) 0 0;
}
.modal-header .modal-title { font-size: 15px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-body img { max-width: 100%; height: auto; }
@media screen and (min-width: 1367px) { .modal-dialog { max-width: 860px !important; } }
@media screen and (max-width: 1366.98px) { .modal-dialog { max-width: 680px !important; } }
@media screen and (max-width: 767.98px) { .modal-dialog { max-width: calc(100% - 24px) !important; } }
@media (min-width: 576px) { .modal-sm { max-width: 460px !important; } }

/* --------------------------------------------------------------------------
   18. 页脚 / 回到顶部 / 悬浮购物车
   -------------------------------------------------------------------------- */
.hyper-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 22px 0;
    line-height: 1.7;
    font-size: 13px;
    background: var(--kp-surface);
    border-top: 1px solid var(--kp-border);
    color: var(--kp-text-muted);
}
.hyper-footer a { color: var(--kp-text-soft); }
.hyper-footer a:hover { color: var(--kp-primary); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.text-md-right .footer-links { justify-content: flex-end; }
@media screen and (max-width: 767.98px) {
    .hyper-footer { text-align: center; }
    .footer-links { justify-content: center; }
}

.back-to-top { display: none; position: fixed; bottom: 96px; right: 18px; z-index: 99; }
#back-to-top {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; width: 44px; height: 44px; padding: 0;
    box-shadow: var(--kp-shadow);
}
@media (max-width: 767.98px) { .back-to-top { bottom: 82px; right: 12px; } }

.cart-float {
    position: fixed; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--kp-primary); color: #fff !important; text-decoration: none !important;
    box-shadow: 0 8px 22px -6px rgba(59, 108, 246, .6);
    transition: transform .18s ease, box-shadow .18s ease;
}
.cart-float:hover { transform: translateY(-2px) scale(1.05); }
.cart-float.is-hidden { display: none; }
.cart-float-reminder {
    position: absolute; right: calc(100% + 12px); bottom: 5px;
    width: max-content; max-width: calc(100vw - 100px); padding: 12px 16px;
    color: var(--kp-text); background: #fff; border: 1px solid var(--kp-border);
    border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.1);
    font-size: 13px; font-weight: 600; line-height: 1.5;
}
.kp-cart-open { overflow: hidden; }
.cart-modal-mask {
    display: none; position: fixed; inset: 0; z-index: 1100;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(22,32,52,.5); overscroll-behavior: contain;
}
.cart-modal-mask.show { display: flex; }
.cart-modal {
    box-sizing: border-box; width: min(400px, calc(100vw - 32px)) !important;
    max-width: 400px !important; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; background: #fff; border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.cart-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--kp-border); }
.cart-modal-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.cart-modal-close { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--kp-text-muted); font-size: 25px; line-height: 1; cursor: pointer; }
.cart-modal-body { padding: 20px; }
.cart-modal-price { margin-bottom: 15px; font-size: 14px; }
.cart-modal-price b { color: var(--kp-primary); font-size: 21px; }
.cart-modal-qty { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; width: 100%; height: 42px; margin-bottom: 10px; }
.cart-modal-qty button { width: 42px; padding: 0; border: 1px solid var(--kp-border); background: #f6f8fc; font-size: 19px; line-height: 1; cursor: pointer; }
.cart-modal-qty button:first-child { border-radius: 8px 0 0 8px; }
.cart-modal-qty button:last-child { border-radius: 0 8px 8px 0; }
.cart-modal-qty input { box-sizing: border-box; width: 100%; min-width: 0; padding: 0 8px; text-align: center; border: 1px solid var(--kp-border); border-left: 0; border-right: 0; border-radius: 0; font-size: 15px; -moz-appearance: textfield; }
.cart-modal-qty input::-webkit-outer-spin-button,
.cart-modal-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.cart-modal-stock { color: var(--kp-text-muted); font-size: 13px; }
#cartModalStatus { min-height: 20px; color: var(--kp-danger); margin: 7px 0; font-size: 13px; }
.cart-modal-submit { width: 100%; padding: 11px 13px; border: 0; border-radius: 8px; background: var(--kp-primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.cart-modal-submit:disabled { opacity: .6; cursor: wait; }
.cart-modal-links { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 8px; margin-top: 15px; font-size: 12px; text-align: center; }
.cart-modal-links a { white-space: nowrap; }
.cart-modal :focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
.cart-float i { font-size: 20px; line-height: 1; }
.cart-float-text { font-size: 10px; line-height: 1.2; margin-top: 1px; letter-spacing: .04em; }
.cart-float-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--kp-danger); color: #fff;
    font-size: 11px; font-weight: 700; text-align: center; border: 2px solid #fff;
}
@media (max-width: 767px) {
    .cart-float { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
    .cart-float i { font-size: 18px; }
    .cart-modal { width: min(360px, calc(100vw - 24px)) !important; }
    .cart-modal-head { padding: 15px 16px; }
    .cart-modal-body { padding: 16px; }
    .cart-modal-links { font-size: 11px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-float, .btn, .tab-link, .pay-type, .card { transition: none; }
}

/* --------------------------------------------------------------------------
   19. 错误页 / 空状态
   -------------------------------------------------------------------------- */
.kp-empty { text-align: center; padding: 48px 20px; }
.kp-empty .kp-empty-icon { font-size: 46px; color: var(--kp-border-strong); line-height: 1; }
.kp-empty h1, .kp-empty h4 { font-size: 18px; margin-top: 14px; color: var(--kp-text); }
.kp-empty p { color: var(--kp-text-muted); }
.text-error {
    font-size: 64px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--kp-primary), #6a8dff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 只给读屏和搜索引擎的文本 */
.kp-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   20. 打印
   -------------------------------------------------------------------------- */
@media print {
    .header-navbar, .hyper-footer, .back-to-top, .cart-float, .page-title-right { display: none !important; }
    .card { box-shadow: none; border-color: #ddd; }
    body { background: #fff; }
}