/* ==========================================================================
   xc-cart.css — 购物车主题统一视觉层（xccart）
   站点：www.3w3f.top
   版本：20261103a
   语言：与 clientarea/xcclientarea 完全同源 —— 直角、1px #eff2f7 描边、
        主色 #0064ff、次级文字 #8a94a6、hover 蓝雾、DIN 数字字体。
   作用域：产品列表 / 产品导航 / 产品配置 / 购物车结算 / 下单完成 / v10 商品页。
   加载位置：各 cart 模板末尾（最后加载，覆盖 topbar.css / custom.css /
            configureproduct.css 的旧色值与圆角）。
   维护约定：
     1. 只改本文件即可换肤；色值一律走「0. 令牌」段，不要在组件里写死颜色。
     2. 需要 !important 的地方均已注明原因（历史 CSS 或模板内联样式）。
     3. 不改任何 DOM 结构与 JS 钩子，仅做样式层覆盖。
   ========================================================================== */

/* ==========================================================================
   0. 令牌（与 xc-shell.css / xc-pages.css 同名同值）
   ========================================================================== */
:root {
    --xc-brand: #0064ff;
    --xc-brand-d: #0052d9;
    --xc-brand-l: #3d8bff;
    --xc-tint: rgba(0, 100, 255, .06);
    --xc-tint-2: rgba(0, 100, 255, .09);
    --xc-ring: rgba(0, 100, 255, .10);

    --xc-ink: #1d2129;
    --xc-ink-2: #4b5563;
    --xc-ink-3: #8a94a6;
    --xc-ink-4: #b9c0cc;
    --xc-body: #333;

    --xc-line: #eff2f7;
    --xc-line-2: #e6eaf2;
    --xc-line-3: #f3f5fa;
    --xc-line-4: #f6f7fb;

    --xc-surface: #fff;
    --xc-subtle: #fbfcfe;
    --xc-subtle-2: #fcfdff;
    --xc-hover: #f8faff;

    --xc-shadow: 0 4px 20px 2px rgba(6, 75, 179, .08);
    --xc-shadow-s: 0 4px 20px 2px rgba(6, 75, 179, .06);

    --xc-ok: #2c9c5b;
    --xc-ok-b: #3fbf70;
    --xc-warn: #b97a08;
    --xc-warn-b: #fca426;
    --xc-danger: #c81014;
    --xc-danger-b: #e31519;

    --xc-num: "DINCondensed-Bold", Arial, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   1. 通用骨架：卡片 / 标题 / 按钮 / 表单 / 表格
   ========================================================================== */
/* 页头标题：原生 3px 蓝色竖条与文字重叠，按 xc-pages 规范改为无边框 */
.card-title,
.modal-title {
    border-left: 0 !important;
    padding-left: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--xc-ink);
}
.card-title > .bx:first-child,
.card-title > i:first-child {
    color: var(--xc-brand);
}

.card {
    margin-bottom: 16px;
    border: 1px solid var(--xc-line);
    border-radius: 0;
    background: var(--xc-surface);
    box-shadow: none;
    transition: box-shadow .2s ease;
}
.card:hover {
    box-shadow: var(--xc-shadow-s);
}
.card-header {
    padding: 15px 18px;
    background: var(--xc-surface);
    border-bottom: 1px solid var(--xc-line-3);
}
.card-header .card-title,
.card-header div.card-title {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--xc-ink);
}
.card-body {
    padding: 18px;
}
.card-footer {
    padding: 13px 18px;
    background: var(--xc-subtle-2);
    border-top: 1px solid var(--xc-line-3);
}
.card-bordered {
    border: 1px solid var(--xc-line);
}

/* 按钮：直角 + 主色实心；语义变体保留各自的颜色语义 */
.btn {
    border-radius: 0;
    font-size: 13px;
    line-height: 34px;
    padding: 0 16px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-sm,
.btn-group-sm > .btn {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 30px;
}
.btn-primary {
    background-color: var(--xc-brand);
    border-color: var(--xc-brand);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--xc-brand-d);
    border-color: var(--xc-brand-d);
    color: #fff;
    box-shadow: none;
}
.btn-outline-primary {
    color: var(--xc-brand);
    border-color: var(--xc-brand);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--xc-brand);
    border-color: var(--xc-brand);
    color: #fff;
}
.btn-danger {
    background-color: var(--xc-danger-b);
    border-color: var(--xc-danger-b);
}
.btn-danger:hover {
    background-color: var(--xc-danger);
    border-color: var(--xc-danger);
}
.btn-warning {
    background-color: var(--xc-warn-b);
    border-color: var(--xc-warn-b);
    color: #fff;
}
.btn-secondary {
    background-color: var(--xc-surface);
    border-color: var(--xc-line-2);
    color: var(--xc-ink-2);
}
.btn-secondary:hover {
    background-color: var(--xc-hover);
    border-color: var(--xc-brand);
    color: var(--xc-brand);
}

/* 表单控件：38px 高、13px 字、直角、focus 主色环 */
.form-control,
.custom-select,
.form-control.e-input__inner,
.bootstrap-select > .dropdown-toggle {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--xc-ink);
    background-color: var(--xc-surface);
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    box-shadow: none;
}
textarea.form-control {
    padding: 10px 12px;
    line-height: 1.6;
}
.form-control:focus,
.custom-select:focus,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--xc-brand);
    box-shadow: 0 0 0 3px var(--xc-ring);
}
.form-control::placeholder {
    color: var(--xc-ink-4);
}
.form-control-sm {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
}
.form-group {
    margin-bottom: 18px;
}
.col-form-label,
.form-group label,
.control-label {
    margin-bottom: 6px;
    font-size: 12px;
    color: #5b6474;
}
.input-group-text {
    border-radius: 0;
    border: 1px solid var(--xc-line-2);
    background: var(--xc-subtle);
    color: var(--xc-ink-2);
    font-size: 13px;
}
.input-group > .form-control:not(:last-child) {
    border-right: 0;
}

/* 复选框 / 单选框 */
.custom-control-label::before {
    border-color: #cfd6e4;
    border-radius: 2px;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--xc-brand);
    border-color: var(--xc-brand);
}
.form-check-input:checked {
    background-color: var(--xc-brand);
    border-color: var(--xc-brand);
}

/* 表格：表头浅灰底 + 12px 次级字，行 hover 淡蓝 */
.table {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--xc-body);
}
.table thead th {
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--xc-ink-3);
    background: var(--xc-subtle);
    border-bottom: 1px solid var(--xc-line);
    border-top: 0;
    white-space: nowrap;
}
.table tbody td {
    padding: 13px 14px;
    color: var(--xc-body);
    border-top: 1px solid var(--xc-line-4);
    vertical-align: middle;
}
.table tbody tr:hover {
    background: var(--xc-hover);
}
.table-responsive {
    border-radius: 0;
}

/* 提示条 / 徽标 */
.alert {
    border-radius: 0;
    border: 1px solid var(--xc-line);
    font-size: 13px;
    line-height: 1.8;
}
.badge {
    border-radius: 0;
    font-weight: 500;
}
.close {
    font-weight: 300;
    text-shadow: none;
    opacity: .5;
}
.close:hover {
    opacity: 1;
    color: var(--xc-brand);
}

/* 键盘可达性 */
.btn:focus-visible,
.form-control:focus-visible,
.card-title a:focus-visible,
.firstgroup_item a:focus-visible,
.secondgroup_item a:focus-visible,
.xc-buy:focus-visible {
    outline: 2px solid rgba(0, 100, 255, .35);
    outline-offset: 1px;
}

/* ==========================================================================
   2. 产品导航（产品品类条 + 竖排「产品导航」标）
   ========================================================================== */
.project-item {
    position: relative;
    padding: 0;
    margin-bottom: 16px;
    background: var(--xc-surface);
    border: 1px solid var(--xc-line) !important; /* 历史 topbar.css 里 border-left:none，统一补回 */
    border-left: 1px solid var(--xc-line) !important;
}
.main-content .project-item:hover,
.project-item:hover {
    border-color: var(--xc-line) !important; /* 去掉整块变蓝的 hover，改由内部色条承担 */
}
.project-item-name {
    width: 56px;
    background-color: var(--xc-subtle);
    border-right: 1px solid var(--xc-line);
    border-radius: 0 !important;
}
.project-item-name span {
    left: 50%;
    margin-left: -0.5em;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    color: var(--xc-ink-4);
    transition: color .18s ease;
}
.project-item:hover .project-item-name {
    background-color: var(--xc-subtle);
}
.project-item:hover .project-item-name span {
    color: var(--xc-brand);
}
.product-info {
    padding: 16px 18px;
    margin: 0;
}

/* 分类 / 产品切换条：无缝拼接的直角分段控件（同 .xc-seg 语言） */
.firstgroup_box,
.secondgroup_box {
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.firstgroup_box:last-child,
.secondgroup_box:last-child {
    margin-bottom: 0;
}
.firstgroup_box_prov,
.secondgroup_box_area {
    min-width: 42px;
    padding-top: 9px;
    font-size: 12px;
    line-height: 1;
    color: var(--xc-ink-3);
}
.firstgroup_box_group,
.secondgroup_box_group {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    flex: 1 1 auto;
}
/* 分段控件的选择器必须以容器为前缀：topbar.css 用的是 .firstgroup_box .firstgroup_item
   （0,2,0），裸类选择器压不住它的 height:40px 与圆角 */
.firstgroup_box .firstgroup_item,
.secondgroup_box .secondgroup_item,
.pro_box .pro_item {
    height: 34px;
    min-width: 0;
    margin: 0 0 0 -1px;          /* 相邻边框合并成 1px */
    padding: 0;
    float: none;
    background: var(--xc-surface);
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.firstgroup_box_group > .firstgroup_item:first-child,
.secondgroup_box_group > .secondgroup_item:first-child,
.pro_box .pro_item:first-child {
    margin-left: 0;
}
.firstgroup_box .firstgroup_item a,
.secondgroup_box .secondgroup_item a,
.pro_box .pro_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 96px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    color: var(--xc-ink-2);
    text-decoration: none;
}
.firstgroup_box .firstgroup_item:hover,
.secondgroup_box .secondgroup_item:hover,
.pro_box .pro_item:hover {
    background: var(--xc-hover);
    border-color: var(--xc-line-2);
}
.firstgroup_box .firstgroup_item:hover a,
.secondgroup_box .secondgroup_item:hover a,
.pro_box .pro_item:hover a {
    color: var(--xc-brand);
}
.firstgroup_box .firstgroup_item.active,
.secondgroup_box .secondgroup_item.active,
.pro_box .pro_item.active {
    position: relative;
    z-index: 1;
    background: var(--xc-brand);
    border-color: var(--xc-brand);
    border-radius: 0;   /* topbar.css 的 active 规则带 1px 圆角，这里显式归零 */
    box-shadow: none;
}
/* 未选中文字色：topbar.css 用的是 .firstgroup_box a（0,2,0），以容器前缀提权 */
.firstgroup_box .firstgroup_item a,
.secondgroup_box .secondgroup_item a,
.pro_box .pro_item a {
    color: var(--xc-ink-2);
}
.firstgroup_box .firstgroup_item.active a,
.secondgroup_box .secondgroup_item.active a,
.pro_box .pro_item.active a {
    color: #fff;
    font-weight: 500;
}
.text-white,
.text-white a,
.text-white a:active {
    color: #fff;
    text-decoration: none;
}

/* 分组介绍行（tagline）：模板内联 #0060ff，需要提权 */
.firstgroup_box .card-text {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--xc-ink-2) !important;
}

/* ==========================================================================
   3. 产品卡片（列表页）
   ========================================================================== */
.product-wrap-box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 18px;
    padding: 18px;
    background: var(--xc-surface);
    border: 1px solid var(--xc-line) !important; /* 模板内联 border:1px solid #fff */
    border-radius: 0;
    box-shadow: none;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.product-wrap-box:hover {
    color: inherit;
    border-color: #cfe0ff !important;
    box-shadow: var(--xc-shadow);
}
.product-wrap-head {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.product-wrap-title {
    margin: 24px 0 10px;         /* 上边距让开右上角库存标签 */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--xc-ink);
    min-height: 45px;
}
.product-wrap-price .big {
    font-family: var(--xc-num);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--xc-ink);
}
.product-wrap-price .won {
    font-size: 12px;
    color: var(--xc-ink-3);
}
.product-wrap-box .big {
    font-family: var(--xc-num);
    color: var(--xc-ink);
}
/* 「原价：xxx / 月」这一行是裸 div，只能按位置收敛字号 */
.product-wrap-head > div:not(.product-wrap-title):not(.product-wrap-price) {
    font-size: 12px;
    line-height: 1.6;
    color: var(--xc-ink-4);
}

/* 产品描述是富文本，统一到 12.5px / 行高 1.75，保留业务强调色 */
.product-wrap-desc {
    flex: 1 1 auto;
    margin: 14px 0 0;
    padding: 14px 0 0;
    list-style: none;
    border-top: 1px solid var(--xc-line-3);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--xc-ink-2);
}
.product-wrap-desc li {
    display: flex;
    align-items: flex-start;
    padding: 2px 0;
    font-size: 12.5px;
    line-height: 1.7;
}
/* 标签列定宽、值列自适应；旧写法把每个 span 都锁 62px，值列会被压成竖排折行 */
.product-wrap-desc li > span:first-child {
    flex: 0 0 62px;
    min-width: 62px;
    padding-right: 10px;
    color: var(--xc-ink-3);
}
.product-wrap-desc li > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
    color: var(--xc-ink-2);
}
.product-wrap-desc table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.product-wrap-desc td,
.product-wrap-desc th {
    padding: 2px 0;
    border: 0;
    font-size: 12.5px;
    line-height: 1.7;
    vertical-align: top;
    color: inherit;
}
.product-wrap-desc p {
    margin: 0 0 6px;
}
.product-wrap-desc p:last-child {
    margin-bottom: 0;
}
.product-wrap-desc img {
    max-width: 100%;
    height: auto;
}
.product-wrap-desc a {
    color: var(--xc-brand);
}

/* 库存标签（模板里原来是一段内联样式字符串，现改为语义类） */
.xc-stock {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    margin: 0;
    padding: 0 8px;
    background: var(--xc-subtle);
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--xc-ink-3);
    white-space: nowrap;
}
.xc-stock svg {
    display: block;
    flex: 0 0 auto;
}
.xc-stock--ok {
    color: var(--xc-ok);
    border-color: rgba(63, 191, 112, .35);
    background: rgba(63, 191, 112, .08);
}
.xc-stock--low {
    color: var(--xc-warn);
    border-color: rgba(252, 164, 38, .35);
    background: rgba(252, 164, 38, .10);
}
.xc-stock--off {
    color: var(--xc-ink-3);
    border-color: var(--xc-line-2);
    background: #f7f8fb;
}

/* 购买按钮（模板里原来是内联渐变 + 圆角，现改为语义类） */
.xc-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin-top: 16px;
    padding: 0 16px;
    background: var(--xc-brand);
    border: 1px solid var(--xc-brand);
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #fff !important;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.xc-buy:hover {
    background: var(--xc-brand-d);
    border-color: var(--xc-brand-d);
    color: #fff;
    text-decoration: none;
}
.xc-buy--disabled,
.xc-buy--disabled:hover {
    background: #f0f2f5;
    border-color: #e6eaf2;
    color: var(--xc-ink-4) !important;
    cursor: not-allowed;
}

/* 售罄角标图：收进卡片角落，避免压住标题 */
.product-wrap-box > img[src*="saleout"] {
    top: auto !important;
    right: 14px !important;
    bottom: 66px !important;
    width: 44px !important;
    opacity: .9;
}

/* ==========================================================================
   4. 产品配置页（configureproduct）
   ========================================================================== */
.configoption_form {
    width: auto;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}
.card-back {
    background: var(--xc-surface);
    border: 1px solid var(--xc-line);
    border-radius: 0;
    box-shadow: none;
}
.card-title-h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 54px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--xc-line-3);
}
.title-h4 {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--xc-ink);
}

/* 配置项选择按钮组：未选中白底描边，选中主色实心 */
.btn-custom {
    min-width: 72px;
    min-height: 34px;
    padding: 0 12px;
    background: var(--xc-surface);
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    font-size: 13px;
    line-height: 32px;
    color: var(--xc-ink-2);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-custom:hover {
    background: var(--xc-hover);
    border-color: var(--xc-brand);
    color: var(--xc-brand);
}
/* 选中态：真实 DOM 是 .btn.btn-primary.btn-custom.hoverer.active，没有 .btn-custom-group 父级，
   且 bootstrap 的 .btn-primary:not(:disabled).active（0,4,0）压在前面，故直接对 .active 提权 */
.btn-custom.active,
.btn-custom.active:hover,
.btn-custom.active:focus,
.btn-custom-group .active {
    background: var(--xc-brand) !important;
    border-color: var(--xc-brand) !important;
    box-shadow: none;
    color: #fff !important;
}

/* 配置总价区 */
.configoption_total {
    padding: 14px 18px;
    background: var(--xc-subtle-2);
    border: 1px solid var(--xc-line);
    border-radius: 0;
}
/* 汇总表：去掉历史 35px 行高与 #999 强制色 */
table.table.mb-5.mt-2.ordersummary tr {
    height: auto;
    line-height: 1.6;
    border-bottom: 1px solid var(--xc-line-4);
    color: var(--xc-ink-2) !important;
}
table.table.mb-5.mt-2.ordersummary tr:last-child {
    border-bottom: 0;
}
table.table.mb-5.mt-2.ordersummary td {
    border-top: 0;
    padding: 8px 0;
}
/* 总价数字 */
td.font-weight-bold.text-dark.text-right {
    font-family: var(--xc-num);
    font-size: 22px !important;
    font-weight: 700;
    color: var(--xc-ink) !important;
}
.mobile-hide td.color-999 {
    font-size: 13px;
    font-weight: 500;
    color: var(--xc-ink) !important;
}

/* 折扣角标 */
.cycle-select-discount {
    top: -11px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    background: var(--xc-danger-b);
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
}

/* 数量/配置滑块 */
input[type="range"] {
    height: 4px;
    border-radius: 0;
    background: var(--xc-line-2);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 20px;
    background-color: var(--xc-brand);
    border: 1px solid var(--xc-brand);
    border-radius: 0;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 20px;
    background-color: var(--xc-brand);
    border: 1px solid var(--xc-brand);
    border-radius: 0;
    cursor: pointer;
}
.range_none {
    height: 4px;
    border-radius: 0;
    background: var(--xc-line-2);
}

/* 商品公告卡（配置页顶部） */
.qr-notice-card {
    border: 1px solid var(--xc-line);
    border-radius: 0;
    background: var(--xc-surface);
    box-shadow: none;
    margin-bottom: 16px;
}
.qr-notice-card:hover {
    box-shadow: var(--xc-shadow-s);
}
.qr-notice-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--xc-ink);
}
.qr-notice-title i {
    color: var(--xc-brand);
    font-size: 16px;
}
.qr-notice-toggle {
    height: 30px;
    padding: 0 12px;
    background: var(--xc-tint);
    border: 1px solid rgba(0, 100, 255, .25);
    border-radius: 0;
    font-size: 12px;
    color: var(--xc-brand);
}
.qr-notice-toggle:hover {
    background: rgba(0, 100, 255, .12);
    border-color: var(--xc-brand);
    color: var(--xc-brand);
}
.qr-notice-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--xc-line-3);
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--xc-ink-2);
}
/* 「展开全部内容」折叠条：原为浅蓝圆角胶囊，收敛成与 .xc-note 同语言的直角描边 */
.qr-notice-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: -moz-fit-content;
    width: fit-content;   /* 原为通栏块，收敛成居中按钮 */
    height: 30px;
    margin: 12px auto 0;
    padding: 0 14px;
    background: var(--xc-tint);
    border: 1px solid rgba(0, 100, 255, .28);
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--xc-brand);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.qr-notice-more:hover {
    background: rgba(0, 100, 255, .12);
    border-color: var(--xc-brand);
}
.qr-notice-card .card-body {
    padding: 16px 18px;
}
.qr-notice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.qr-notice-body h1,
.qr-notice-body h2,
.qr-notice-body h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--xc-ink);
}

/* 右侧宣传块：保留原背景图，只收敛尺寸与圆角 */
/* 右侧宣传位：原为深蓝大图 + 40px 白字，与用户中心的「白底细描边」语言冲突。
   收敛成淡蓝说明卡（同 .xc-note），信息层级靠字号与色阶，不靠大色块 */
.subtop {
    padding: 22px 24px;
    background-color: #f0f5ff;
    background-image: none;
    border: 1px solid #dbe6ff;
    border-radius: 0;
}
.subtop .subtop-title {
    color: var(--xc-ink);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}
.subtop .subtop-title small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--xc-ink-3);
}
.subtop .subtop-info {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--xc-ink-3);
}
.subtop .subtop-title {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
}
.subtop .subtop-title small {
    margin-left: .5rem;
    font-size: 13px;
}
.subtop .subtop-info {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
}

/* 错误提示 */
.error-tip {
    color: var(--xc-danger-b);
    font-size: 12px;
    line-height: 1.6;
}

/* ==========================================================================
   5. 购物车结算页（viewcart）
   ========================================================================== */
.cartitem {
    background: var(--xc-surface);
    border: 1px solid var(--xc-line);
    border-radius: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cartitem.active,
.cartitem:hover {
    border-color: var(--xc-brand);
    box-shadow: var(--xc-shadow-s);
}

/* 所购产品列表：原为 style="max-height:50vh;overflow:auto;padding:0 20px" 的内滚动框，
   商品超过 2 件即被裁切。改为自然撑开 + 块间细线分隔（同 .xc-kv 语言） */
.xc-cart-list {
    padding: 0;
}
.xc-cart-list > address {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--xc-ink-3);
}
.xc-cart-list > address:not(:first-of-type) {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--xc-line-3);
}
.xc-cart-list > address strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--xc-ink);
    line-height: 1.5;
}
.xc-cart-list > address .goods_info {
    margin-top: 6px;
}
.xc-cart-list > address .goods_info .title {
    color: var(--xc-ink-2);
}
.xc-cart-list > address .goods_info .zk {
    color: var(--xc-ink-4);
}
.xc-cart-list > address .info font {
    color: var(--xc-ink-2);
}
.xc-cart-list > address p {
    margin: 0;
    font-size: 12.5px;
    color: var(--xc-ink-3);
}
/* 价格行（小计 / 折扣 / 合计）：标签 12px 灰，数字 DIN 对齐右侧 */
.xc-cart-list .font-size-16 {
    font-size: 13px !important;
    line-height: 1.6;
}
.xc-cart-list .font-size-16 > span:first-child {
    color: var(--xc-ink-3);
}
.xc-cart-list .cart_qty .number {
    width: 64px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    font-size: 12.5px;
}
.xc-cart-list .cart_qty .btn {
    height: 32px;
    margin-left: 6px;
    padding: 0 10px;
    border: 1px solid var(--xc-line-2);
    border-radius: 0;
    background: var(--xc-surface) !important;
    font-size: 12px;
    color: var(--xc-ink-2);
}
.xc-cart-list .cart_qty .btn:hover {
    border-color: var(--xc-brand);
    color: var(--xc-brand);
}
.xc-cart-list .fa-pen,
.xc-cart-list .fa-times-circle {
    color: var(--xc-ink-4);
    transition: color .18s ease;
}
.xc-cart-list .fa-pen:hover {
    color: var(--xc-brand);
}
.xc-cart-list .fa-times-circle:hover {
    color: var(--xc-danger);
}

/* 支付方式方块 —— 规格对齐用户中心 addfunds.css 的 .af-gateway .addfunds-payment
   （min-height 56 / 图标 24 / hover #b9d2ff + #f7faff / 选中 #0064ff + #f5f9ff + 落影） */
/* global.css 里 .addfunds-payment 带 border:1px solid #eff2f7!important、
   .addfunds-payment.active 带 border-color:#007bfc!important + 新拟态渐变，
   同为 !important 时靠「后加载 + 同级特异性」覆盖，故此处必须保留 !important */
.checkboxDiv,
.addfunds-payment {
    border: 1px solid var(--xc-line) !important;
    border-radius: 0 !important;
    background: var(--xc-surface) !important;
    background-image: none !important;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.addfunds-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 12px 18px !important;
    font-size: 13px;
    color: var(--xc-ink-2);
    text-align: center;
}
.addfunds-payment img {
    height: 24px;
    max-height: 24px;
}
.checkboxDiv:hover,
.addfunds-payment:hover {
    border-color: #b9d2ff !important;
    background: var(--xc-hover) !important;
    color: var(--xc-brand);
}
.checkboxDiv.checkboxSelect,
.addfunds-payment.active,
.addfunds-payment.active:hover {
    border-color: var(--xc-brand) !important;
    background: #f5f9ff !important;
    color: var(--xc-brand);
    box-shadow: var(--xc-shadow);
}

/* 订单汇总：小计 / 总计 */
.ordersummary .total,
.total {
    font-family: var(--xc-num);
    font-size: 20px;
    font-weight: 700;
    color: var(--xc-ink);
}
.price-num,
.discount-num {
    font-family: var(--xc-num);
    font-size: 15px;
    color: var(--xc-ink);
}
.color-999 {
    color: var(--xc-ink-3) !important;
}
.mobile-bottom-total {
    background: var(--xc-surface);
    border-top: 1px solid var(--xc-line);
}

/* 结算页页签（手机注册 / 邮箱注册） */
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
    color: var(--xc-ink-2);
}
.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--xc-brand);
    color: var(--xc-brand);
    font-weight: 500;
}

/* ==========================================================================
   6. 下单完成页（complete）
   ========================================================================== */
.twitter-bs-wizard .twitter-bs-wizard-nav {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--xc-line);
    border-radius: 0;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent !important;
    font-size: 13px;
    color: var(--xc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s ease, border-color .18s ease;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--xc-brand);
    color: var(--xc-brand);
    font-weight: 600;
}
/* 步骤号：原为 32px 圆形描边 + 蓝紫底，收敛成 26px 直角方块（同 .xc-tag 语言） */
.twitter-bs-wizard .twitter-bs-wizard-nav .step-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--xc-line-2);
    border-radius: 0 !important;
    background: var(--xc-surface);
    font-family: var(--xc-num);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--xc-ink-3);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active .step-number {
    background: var(--xc-brand);
    border-color: var(--xc-brand);
    color: #fff;
}
.progress {
    height: 3px;
    border-radius: 0;
    background: var(--xc-line-3);
    overflow: hidden;
}
/* bootstrap 的 .bg-success / .progress-bar-striped 用 background-image 叠条纹渐变，
   只覆盖 background-color 会残留条纹，必须一并置 none */
.progress-bar {
    background-color: var(--xc-brand) !important;
    background-image: none !important;
    border-radius: 0;
}
/* 成功提示区 */
#progrss-wizard .tab-pane .text-center {
    padding: 36px 16px 44px;
}
#progrss-wizard .tab-pane .display-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 30px !important;
    color: var(--xc-ok) !important;
    border: 1px solid rgba(44, 156, 91, .28);
    border-radius: 0;
    background: rgba(44, 156, 91, .08);
}
#progrss-wizard .tab-pane h5 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--xc-ink);
}
#progrss-wizard .tab-pane .text-muted {
    font-size: 12.5px;
    color: var(--xc-ink-3) !important;
}

/* ==========================================================================
   7. 空态（列表页无产品 / 结算页无商品）
   ========================================================================== */
.no-data {
    min-height: 280px;
    margin-top: 0;
    background: var(--xc-surface);
    border: 1px solid var(--xc-line);
    box-shadow: none;
}
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty img {
    display: none; /* 原图 404（clientarea/user/static/images/empty.svg），改用 CSS 图形占位 */
}
.empty::before {
    content: "";
    width: 56px;
    height: 44px;
    border: 1px dashed var(--xc-line-2);
    background: var(--xc-subtle);
    border-radius: 2px;
}
.empty p {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--xc-ink-3);
}

/* ==========================================================================
   8. v10 商品页（Vue + Element UI）主色对齐
   ========================================================================== */
.el-button {
    border-radius: 0;
    font-size: 13px;
}
.el-button--primary {
    background-color: var(--xc-brand);
    border-color: var(--xc-brand);
}
.el-button--primary:hover,
.el-button--primary:focus {
    background-color: var(--xc-brand-d);
    border-color: var(--xc-brand-d);
}
.el-button--default {
    border-color: var(--xc-line-2);
    color: var(--xc-ink-2);
}
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
    border-radius: 0;
    border-color: var(--xc-line-2);
    font-size: 13px;
    color: var(--xc-ink);
}
.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: var(--xc-brand);
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: var(--xc-brand);
    border-color: var(--xc-brand);
}
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--xc-brand);
}
.el-tabs__item.is-active,
.el-tabs__item:hover {
    color: var(--xc-brand);
}
.el-tabs__active-bar {
    background-color: var(--xc-brand);
}
.el-dialog {
    border-radius: 0;
}
.el-card {
    border-radius: 0;
    border-color: var(--xc-line);
    box-shadow: none;
}
.el-table th {
    background: var(--xc-subtle);
    color: var(--xc-ink-3);
    font-size: 12px;
    font-weight: 500;
}
.el-table td,
.el-table th.is-leaf {
    border-bottom-color: var(--xc-line-4);
}

/* ==========================================================================
   9. 响应式（断点按内容，与 xc-pages 一致：992 / 768）
   ========================================================================== */
@media (max-width: 991.98px) {
    .configoption_form {
        max-width: 100%;
    }
    .product-wrap-title {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .project-item {
        display: block;
    }
    .project-item-name {
        position: static;
        display: none; /* 窄屏竖排标签无空间，隐藏后由内容自解释 */
    }
    .product-info {
        padding: 12px 12px 14px;
        margin: 0;
    }
    .firstgroup_box,
    .secondgroup_box {
        display: block;
    }
    .firstgroup_box_prov,
    .secondgroup_box_area {
        padding: 0 0 6px;
        min-width: 0;
    }
    .firstgroup_box_group,
    .secondgroup_box_group {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    .firstgroup_box .firstgroup_item,
    .secondgroup_box .secondgroup_item {
        margin-left: 0;
        flex: 1 1 50%;
        height: 36px;
        border-left-width: 1px;
    }
    .firstgroup_box .firstgroup_item:nth-child(2n),
    .secondgroup_box .secondgroup_item:nth-child(2n) {
        margin-left: -1px;
    }
    .firstgroup_box .firstgroup_item a,
    .secondgroup_box .secondgroup_item a {
        min-width: 0;
        padding: 0 8px;
        font-size: 12.5px;
    }
    .product-wrap-box {
        margin-bottom: 12px;
        padding: 14px;
    }
    .product-wrap-title {
        margin-top: 22px;
        font-size: 14px;
    }
    .product-wrap-price .big {
        font-size: 22px;
    }
    .card-body {
        padding: 14px;
    }
    .card-header {
        padding: 12px 14px;
    }
    .xc-stock {
        top: 10px;
        right: 10px;
        height: 20px;
        font-size: 11px;
    }
    .xc-buy {
        height: 36px;
        margin-top: 12px;
    }
    .subtop {
        padding: 18px;
    }
    .subtop .subtop-title {
        font-size: 17px;
    }
}

/* ==========================================================================
   10. 降级：动效偏好 + 暗色兜底
   说明：站点暗色由 clientarea 的 Dark-Theme.css 统一接管（含购物车既有组件），
        这里只补本文件新增的 .xc-stock / .xc-buy，避免切换暗色时这两处穿透成白底。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .card,
    .product-wrap-box,
    .btn,
    .xc-buy,
    .firstgroup_item,
    .secondgroup_item,
    .cartitem {
        transition-duration: .001ms !important;
    }
}

body[data-theme="dark"] .xc-stock {
    background: #2a2d3f;
    border-color: #3a3e52;
    color: #8c909a;
}
body[data-theme="dark"] .xc-stock--ok {
    color: #7bd69d;
    border-color: rgba(63, 191, 112, .35);
    background: rgba(63, 191, 112, .12);
}
body[data-theme="dark"] .xc-stock--low {
    color: #f0b95e;
    border-color: rgba(252, 164, 38, .35);
    background: rgba(252, 164, 38, .12);
}
body[data-theme="dark"] .xc-buy {
    background: var(--xc-brand);
    border-color: var(--xc-brand);
    color: #fff;
}
body[data-theme="dark"] .xc-buy--disabled,
body[data-theme="dark"] .xc-buy--disabled:hover {
    background: #2a2d3f;
    border-color: #3a3e52;
    color: #6b7080 !important;
}
body[data-theme="dark"] .empty::before {
    background: #2a2d3f;
    border-color: #3a3e52;
}


/* ===== 商品描述·结构化（2026-11-06） =====
   描述 HTML 由后台富文本写入，这里给一套自带类名的排版：
   .xc-desc-note 顶部提示 / .xc-spec 规格表 / .xc-desc-warn 警示条 / .xc-desc-foot 脚注 */
.xc-desc-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--xc-ink-3);
    word-break: break-word;
}
.xc-desc-note::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--xc-ink-4);
}

.product-wrap-desc .xc-spec {
    margin: 0;
    padding: 0;
    list-style: none;
}
.product-wrap-desc .xc-spec > li {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px dashed var(--xc-line-2);
    font-size: 12.5px;
    line-height: 1.6;
}
.product-wrap-desc .xc-spec > li:first-child {
    padding-top: 2px;
}
.product-wrap-desc .xc-spec > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.product-wrap-desc .xc-spec .k {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    padding-right: 8px;
    color: var(--xc-ink-3);
    letter-spacing: .05em;
}
.product-wrap-desc .xc-spec .v {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--xc-ink);
    font-weight: 500;
    word-break: break-word;
}
.product-wrap-desc .xc-spec > li.is-hl .v {
    color: var(--xc-brand);
    font-weight: 600;
}

.xc-desc-warn {
    margin: 10px 0 0;
    padding: 8px 10px;
    background: #fff8ef;
    border-left: 2px solid #f59e0b;
    font-size: 12px;
    line-height: 1.7;
    color: #8a5300;
    word-break: break-word;
}
.xc-desc-warn b,
.xc-desc-warn strong {
    color: #b45309;
    font-weight: 600;
}

.xc-desc-foot {
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--xc-line-3);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--xc-ink-4);
    word-break: break-word;
}