/* ==========================================================================
   CentSnap 内置扩展：小众品牌精简产品组件样式
   独立命名空间 nb-*，不污染全局；PC / 平板 / 移动响应式。
   ========================================================================== */

/* ── CSS 变量（可被区块 style 面板覆盖） ── */
:root {
    --nb-gap: 24px;
    --nb-radius: 16px;
    --nb-card-bg: #ffffff;
    --nb-card-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.12);
    --nb-card-shadow-hover: 0 20px 48px -20px rgba(0, 0, 0, 0.18);
    --nb-border: rgba(0, 0, 0, 0.08);
    --nb-title-color: #111827;
    --nb-desc-color: #4b5563;
    --nb-param-color: #6b7280;
    /* ★ 工单29④（2026-09-15）：原 var(--cs-primary, #111827) 违反「--cs-primary 只在画布
       存在」红线 ⇒ 画布按钮灰 #64748b / 前台深 #111827 两端不一致。前台从未解析到
       --cs-primary（恒 #111827），故直接写死 #111827：前台零变化，画布统一成深色。
       如需「跟随主色」语义，后续用 var(--cs-brand, #111827)（两端都输出）单独评审。 */
    --nb-btn-bg: #111827;
    --nb-btn-color: #ffffff;
    --nb-section-py: 96px;
    --nb-section-py-mb: 64px;
    --nb-detail-gap: 48px;
    --nb-detail-border: rgba(0, 0, 0, 0.08);
    --nb-detail-title-color: #111827;
    --nb-detail-desc-color: #374151;
    --nb-detail-param-color: #4b5563;
}

/* ── 公共工具 ── */
.nb-page {
    background: var(--cs-bg, #fafafa);
    color: var(--cs-text, #111827);
    font-family: var(--cs-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif);
}

.nb-page .wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .nb-page .wrap {
        padding: 0 16px;
    }
}

/* ── 面包屑容器：与 Hero 等覆盖左右 padding 的块保持视觉左边缘齐平 ── */
.nb-page .cs-breadcrumb > .wrap {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .nb-page .cs-breadcrumb > .wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

.nb-empty {
    padding: 48px 0;
    text-align: center;
    color: var(--nb-desc-color);
}

.nb-empty-state {
    padding: 80px 0;
    text-align: center;
    color: var(--nb-desc-color);
}

.nb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--nb-btn-bg);
    color: var(--nb-btn-color);
    border-radius: var(--nb-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    transition: opacity .2s ease, transform .2s ease;
    border: none;
    cursor: pointer;
}

.nb-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.nb-btn-sm {
    padding: 8px 18px;
    font-size: 13px;
}

/* ── 图片比例 ── */
.nb-ratio-1-1  { aspect-ratio: 1 / 1; }
.nb-ratio-4-3  { aspect-ratio: 4 / 3; }
.nb-ratio-3-4  { aspect-ratio: 3 / 4; }
.nb-ratio-16-9 { aspect-ratio: 16 / 9; }

/* ── 区块标题 ── */
.nb-eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cs-primary, #111827);
    margin-bottom: 10px;
}

.nb-section-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nb-title-color);
    margin: 0 0 12px;
}

.nb-section-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--nb-desc-color);
    margin: 0 0 40px;
    max-width: 640px;
}

@media (max-width: 768px) {
    .nb-section-title { font-size: 26px; }
    .nb-section-sub { margin-bottom: 28px; }
}

/* ── 卡片网格 ── */
.nb-grid {
    display: grid;
    gap: var(--nb-list-gap, var(--nb-gap));
}

.nb-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.nb-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.nb-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .nb-grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .nb-grid-cols-3,
    .nb-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .nb-grid-cols-mb-1 { grid-template-columns: 1fr; }
}

/* ── 产品列表横向滑块 ── */
.nb-slider {
    position: relative;
}
.nb-slider-track {
    --nb-gap: var(--nb-list-gap, 24px);
    --nb-cols: 3;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: var(--nb-gap);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nb-slider-track::-webkit-scrollbar { display: none; }
.nb-slider-track .nb-card {
    flex: 0 0 auto;
    width: calc((100% - var(--nb-gap) * (var(--nb-cols) - 1)) / var(--nb-cols));
    scroll-snap-align: start;
}
.nb-slider-track.nb-grid-cols-2 { --nb-cols: 2; }
.nb-slider-track.nb-grid-cols-3 { --nb-cols: 3; }
.nb-slider-track.nb-grid-cols-4 { --nb-cols: 4; }
@media (max-width: 1024px) {
    .nb-slider-track.nb-grid-cols-4 { --nb-cols: 3; }
}
@media (max-width: 768px) {
    .nb-slider-track.nb-grid-cols-3,
    .nb-slider-track.nb-grid-cols-4 { --nb-cols: 2; }
    .nb-slider-track.nb-grid-cols-mb-1 { --nb-cols: 1; }
}

.nb-slider-arrow {
    position: absolute;
    top: 28%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #111827;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, transform .2s, background .2s;
}
.nb-slider-arrow:hover {
    background: #f9fafb;
    transform: translateY(-50%) scale(1.05);
}
.nb-slider-arrow.disabled {
    opacity: 0;
    pointer-events: none;
}
.nb-slider-prev { left: -22px; }
.nb-slider-next { right: -22px; }
@media (max-width: 768px) {
    .nb-slider-arrow { width: 38px; height: 38px; top: 26%; }
    .nb-slider-prev { left: 8px; }
    .nb-slider-next { right: 8px; }
}

/* ── 卡片 ── */
.nb-card {
    background: var(--nb-list-card-bg, var(--nb-card-bg));
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-list-radius, var(--nb-radius));
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.nb-card:hover {
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .18);
    transform: translateY(-3px);
}

.nb-card-media {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f3f4f6;
}

.nb-card-media img,
.nb-detail-main-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.nb-card:hover .nb-card-media img {
    transform: scale(1.04);
}

.nb-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #6b7280;
    font-size: 48px;
    font-weight: 600;
}

.nb-card-body {
    padding: 20px;
}

.nb-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
    color: var(--nb-list-title-color, var(--nb-title-color));
}

.nb-card-title a {
    color: inherit;
    text-decoration: none;
}

.nb-card-title a:hover {
    /* ★ 工单29④：同 --nb-btn-bg 红线修复（前台恒 #111827，画布此前误灰） */
    color: #111827;
}

.nb-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--nb-list-desc-color, var(--nb-desc-color));
    margin: 0 0 14px;
}

.nb-card-params {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 13px;
    color: var(--nb-list-param-color, var(--nb-param-color));
}

.nb-card-params li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed var(--nb-border);
}

.nb-card-params li:last-child {
    border-bottom: none;
}

.nb-card-params b {
    font-weight: 500;
    color: var(--nb-title-color);
    margin-left: 12px;
}

/* ── 列表页英雄区 ── */
.nb-list-hero {
    padding: 64px 0 40px;
    text-align: center;
}

.nb-list-hero h1 {
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--nb-title-color);
}

.nb-list-hero p {
    font-size: 16px;
    color: var(--nb-desc-color);
    margin: 0 auto;
    max-width: 560px;
}

@media (max-width: 768px) {
    .nb-list-hero { padding: 44px 0 28px; }
    .nb-list-hero h1 { font-size: 30px; }
}

.nb-list-body {
    padding-bottom: 80px;
}

/* ── 详情页 ── */
.nb-detail-section {
    padding: 48px 0 80px;
}

.nb-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nb-detail-gap);
    align-items: start;
}

.nb-detail-left .nb-detail-media { order: 1; }
.nb-detail-left .nb-detail-body  { order: 2; }
.nb-detail-right .nb-detail-media { order: 2; }
.nb-detail-right .nb-detail-body  { order: 1; }

@media (max-width: 900px) {
    .nb-detail-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .nb-detail-right .nb-detail-media,
    .nb-detail-right .nb-detail-body { order: unset; }
}

.nb-detail-media {
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .nb-detail-media { position: static; }
}

.nb-detail-main-media {
    border-radius: var(--nb-radius);
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid var(--nb-detail-border);
}

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

.nb-detail-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.nb-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color .2s;
}

.nb-thumb.active,
.nb-thumb:hover {
    border-color: var(--cs-primary, #111827);
}

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

.nb-detail-body {
    padding-top: 8px;
}

.nb-back-link {
    display: inline-block;
    font-size: 13px;
    color: var(--nb-param-color);
    text-decoration: none;
    margin-bottom: 18px;
}

.nb-back-link:hover {
    color: var(--cs-primary, #111827);
}

.nb-detail-title {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 20px;
    color: var(--nb-detail-title-color, var(--nb-title-color));
}

.nb-detail-desc {
    font-size: 16px;
    line-height: 1.75;
    color: var(--nb-detail-desc-color, var(--nb-desc-color));
    margin-bottom: 28px;
}

.nb-detail-desc p {
    margin: 0 0 12px;
}

.nb-detail-params {
    border-top: 1px solid var(--nb-detail-border);
    padding-top: 24px;
}

.nb-detail-params h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--nb-param-color);
    margin: 0 0 16px;
}

.nb-params-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.nb-params-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--nb-detail-border);
    color: var(--nb-detail-param-color, var(--nb-param-color));
    font-size: 15px;
}

.nb-params-list li span {
    flex: 0 0 40%;
}

.nb-params-list li b {
    flex: 1;
    font-weight: 500;
    color: var(--nb-title-color);
    text-align: right;
}

@media (max-width: 768px) {
    .nb-detail-title { font-size: 26px; }
    .nb-detail-section { padding: 28px 0 56px; }
    .nb-thumb { width: 60px; height: 60px; }
}

/* ── 标签页参数（编辑器内可用） ── */
.nb-tabs {
    border: 1px solid var(--nb-detail-border);
    border-radius: var(--nb-radius);
    overflow: hidden;
}

.nb-tab-nav {
    display: flex;
    border-bottom: 1px solid var(--nb-detail-border);
    background: #f9fafb;
}

.nb-tab-btn {
    padding: 12px 18px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--nb-param-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.nb-tab-btn.active {
    color: var(--cs-primary, #111827);
    border-bottom-color: var(--cs-primary, #111827);
    background: #fff;
}

.nb-tab-panel {
    display: none;
    padding: 18px;
    font-size: 15px;
    color: var(--nb-detail-param-color);
}

.nb-tab-panel.active {
    display: block;
}

.nb-tab-panel b {
    display: block;
    margin-bottom: 6px;
    color: var(--nb-title-color);
}

/* ── 卡片：公开字段（角标 / 价格 / 分类 / 原产国 / 标签） ── */
.nb-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;            /* 默认右侧 =「店铺装修 → 产品角标管理 → 角标位置」的默认值；
                               left / center 由 cs-badge-pos-*（store.css 通用规则）覆盖 */
    left: auto;
    z-index: 2;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cs-primary, #111827);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* 「角标位置 = 居中」：store.css 的 .cs-badge-pos-center 与本文件的基础定位特异性相同(0,1,0)，
   而 nichebrand.css 晚于 store.css 加载 ⇒ 必须在同特异性的基础上提权(0,2,0)才生效。 */
.nb-card-badge.cs-badge-pos-center,
.nbd-row-badge.cs-badge-pos-center {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.nb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 12px;
}

.nb-card-price {
    font-size: 18px;
    font-weight: 700;
    /* 工单27②：默认跟随店铺主色（--cs-brand 画布/前台均输出；--cs-primary 仅画布有，保底兼容） */
    color: var(--cs-brand, var(--cs-primary, #111827));
}

.nb-card-cat,
.nb-card-origin {
    font-size: 12px;
    color: var(--nb-param-color);
    padding: 2px 8px;
    border: 1px solid var(--nb-border);
    border-radius: 999px;
    background: #f9fafb;
}

.nb-card-tags,
.nb-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.nb-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
}

.nb-detail-tags-label {
    align-self: center;
    font-size: 13px;
    color: var(--nb-param-color);
}

/* ── 详情页：公开字段信息区 ── */
.nb-detail-info {
    margin-top: 28px;
    border-top: 1px solid var(--nb-detail-border);
    padding-top: 24px;
}

.nb-detail-badge-row {
    margin-bottom: 16px;
}

.nb-detail-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--cs-primary, #111827);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.nb-detail-info-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.nb-detail-info-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nb-detail-border);
    font-size: 15px;
    color: var(--nb-detail-param-color, var(--nb-param-color));
}

.nb-detail-info-list li span {
    flex: 0 0 40%;
    color: var(--nb-param-color);
}

.nb-detail-info-list li b {
    flex: 1;
    text-align: right;
    font-weight: 600;
    color: var(--nb-detail-title-color, var(--nb-title-color));
}

.nb-detail-video {
    margin: 18px 0;
}

.nb-detail-pack h4,
.nb-detail-certs h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--nb-param-color);
    margin: 0 0 12px;
}

.nb-detail-pack {
    margin-bottom: 18px;
}

.nb-detail-pack p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--nb-detail-desc-color, var(--nb-desc-color));
    white-space: pre-wrap;
}

.nb-detail-certs {
    margin-top: 20px;
}

.nb-cert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nb-cert-list li {
    padding: 5px 12px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 13px;
    border: 1px solid var(--nb-detail-border);
}

/* ── 回退页头页脚 ── */
.nb-fallback-header,
.nb-fallback-footer {
    padding: 18px 24px;
    background: #fff;
    border-bottom: 1px solid var(--nb-border);
}

.nb-fallback-footer {
    border-bottom: none;
    border-top: 1px solid var(--nb-border);
    text-align: center;
    color: var(--nb-param-color);
    font-size: 13px;
}

/* ── 库存大标签 + 配送能力提示栏（小众品牌详情，与产品详情页一致视觉） ── */
.nb-pd-stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 10px;
    margin: 10px 0 0;
}
.nb-pd-stock.is-ok { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; }
.nb-pd-stock.is-bad { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cs-stock-ico { font-weight: 900; }
.nb-pd-ship {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; padding: 8px 12px; border-radius: 10px; margin: 8px 0 0;
}
.nb-pd-ship.is-ok { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; }
.nb-pd-ship.is-bad { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.nb-pd-ship-text { flex: 1 1 auto; min-width: 0; }
.nb-pd-ship-link {
    margin-left: auto; background: none; border: none; color: inherit;
    text-decoration: underline; cursor: pointer; font-size: 12.5px; padding: 0;
}
.nb-pd-ship-link:hover { opacity: .8; }
.nb-ship-pop {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45); z-index: 9999; padding: 16px;
}
.nb-ship-pop.show { display: flex; }
.nb-ship-pop-box {
    background: #fff; border-radius: 14px; width: min(420px, 100%);
    max-height: 80vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.nb-ship-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-weight: 700;
}
.nb-ship-pop-close { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: #666; }
.nb-ship-pop-list { list-style: none; margin: 0; padding: 6px 0; }
.nb-ship-pop-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; font-size: 14px; }
.nb-ship-pop-list li:nth-child(odd) { background: rgba(0, 0, 0, .02); }
.cs-pop-name { font-weight: 500; }
.cs-pop-code { color: #888; font-size: 12px; }
.cs-pop-empty { color: #888; justify-content: center; }

/* 移动端：避免横向溢出 */
@media (max-width: 640px) {
    .nb-pd-stock { font-size: 13px; padding: 5px 10px; }
    .nb-pd-ship { font-size: 12.5px; }
    .nb-pd-ship-link { margin-left: 8px; }
}

/* ==========================================================================
   小众品牌详情页模块库（v1.5 实施）
   P2 长条产品 / P3 相关推荐 / C1 购买锚点
   独立命名空间 nbd-*，令牌前缀 --nbd-*（避免与既有 --nb-* 冲突，见 SPEC §5.6.2）
   ========================================================================== */

/* ── 令牌默认值（块内 inline 覆盖优先） ── */
.nbd-row-list,
.nbd-related,
.nbd-anchor {
    --nbd-gap: 16px;
    --nbd-radius: 12px;
    --nbd-card-bg: #ffffff;
    --nbd-border: rgba(0, 0, 0, 0.08);
    --nbd-title-color: #111827;
    --nbd-desc-color: #4b5563;
    --nbd-price-color: #111827;
    /* ★ 2026-09-14（工单19）：必须用 --cs-brand，禁止 --cs-primary。
       --cs-primary 是**后台设计令牌**（admin/assets/centsnap.css 的 :root{--cs-primary:#64748b}），
       而 admin/canvas.php 为渲染 .cs-block 包裹层会加载 centsnap.css ⇒ 该变量泄漏进画布文档，
       使 var(--cs-primary,#E62025) 在画布解析成后台灰 #64748b，而前台未定义 --cs-primary 走兜底
       ⇒ 同一个按钮「画布灰蓝 / 前台红」。这是既有多区块踩过的老坑（见《组件问题清单.md》§六：
       「统一使用 var(--cs-brand, 旧色)，不用 --cs-primary」）。
       --cs-brand 前台与画布**同源**（前台 cs_front_theme_style() 输出 / 画布 canvas.php 镜像注入，
       当前站值均为 #E62025）⇒ 两端必然同色；本站主色恰为 #E62025，故前台渲染零变化。 */
    --nbd-btn-bg: var(--cs-brand, #E62025);
    --nbd-btn-color: #ffffff;
}

/* ── 公共：标题 / 空态 / 按钮 / 比例 ── */
.nbd-eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cs-primary, #111827);
    margin-bottom: 10px;
}
.nbd-section-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nbd-title-color);
    margin: 0 0 12px;
}
.nbd-section-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--nbd-desc-color);
    margin: 0 0 32px;
    max-width: 640px;
}
.nbd-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--nbd-desc-color);
}
.nbd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--nbd-btn-bg);
    color: var(--nbd-btn-color);
    border-radius: var(--nbd-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    transition: opacity .2s ease, transform .2s ease;
    border: none;
    cursor: pointer;
}
.nbd-btn:hover { opacity: .9; transform: translateY(-1px); }
.nbd-btn-sm { padding: 8px 18px; font-size: 13px; }

/* ★ 按钮文字色保护（2026-09-14）：style.css 的 `section.blk a:not(.btn)`（特异性 0,2,1，
   --b-link-color 未定义时回落 inherit）会压掉 `.nbd-btn { color: var(--nbd-btn-color) }`（0,1,0），
   使按钮文字继承父级深灰（实测 #2c333a），而属性面板显示的是设计色 #ffffff —— 即「组件显示不真实」。
   此处限定 .nbd-anchor 作用域 + !important 压回，与 hero 的
   `.nbd-hero-price-bar .nbd-hero-btn-primary{color:#fff!important}` 同机制；
   不影响其它区块（nb_product_row_list / nb_related_products）的 .nbd-btn。 */
.nbd-anchor .nbd-btn { color: var(--nbd-btn-color, #ffffff) !important; }

/* ── 购买锚点右侧栏增强（2026-09-14 工单19 议题三）────────────────────────────
   对齐 product.php 右侧栏：产品亮点 → 颜色 → 数量 → [Add to Cart | ♡ 已收藏]。
   全部以 .nbd-anchor 作用域前缀，仅本区块生效，不影响其它区块与页面。
   色块尺寸/边框/缺货斜杠与 store.css 的 .cs-swatch 保持同一视觉语言。 */

/* 产品亮点（文本列表 / 键值对两模式；圆点沿用主商城 --cs-secondary 次要色） */
.nbd-anchor .nbd-highlights { margin: 14px 0 2px; }
.nbd-anchor .nbd-hl-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 8px; }
.nbd-anchor .nbd-hl-list { list-style: none; margin: 0; padding: 0; }
.nbd-anchor .nbd-hl-list li {
    position: relative; padding-left: 20px; margin-bottom: 7px;
    font-size: 14px; color: #374151; line-height: 1.5;
}
.nbd-anchor .nbd-hl-list li::before {
    content: ''; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--cs-secondary, #f59e0b);
}
.nbd-anchor .nbd-hl-attrs li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.nbd-anchor .nbd-hl-attrs li strong { flex-shrink: 0; font-weight: 500; color: #111827; }
.nbd-anchor .nbd-hl-attrs li span { color: #374151; }

/* 选择行标签（颜色 / 数量共用） */
.nbd-anchor .nbd-opt-label { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.nbd-anchor .nbd-color-row { margin: 14px 0 2px; }
.nbd-anchor .nbd-qty-row { margin: 14px 0 2px; }

/* 颜色色块 */
.nbd-anchor .nbd-color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.nbd-anchor .nbd-swatch {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 2px solid #e5e7eb; background: #f3f4f6;
    background-size: cover; background-position: center;
    cursor: pointer; position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.nbd-anchor .nbd-swatch:hover { border-color: #cbd5e1; }
.nbd-anchor .nbd-swatch.is-on { border-color: var(--cs-brand, #E60012); box-shadow: 0 0 0 2px #fadbd9; }
/* 缺货颜色：对角红线（仍可点击查看，与主商城 .cs-swatch.cs-oos 一致） */
.nbd-anchor .nbd-swatch.is-oos::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 150%; height: 2px;
    background: #ef4444; border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
}
.nbd-anchor .nbd-swatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nbd-anchor .nbd-anchor-sel { margin-top: 10px; font-size: 13px; color: #6b7280; }

/* 数量：− 输入 ＋ */
.nbd-anchor .nbd-qty { display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }.nbd-anchor .nbd-qty-btn { width: 38px; height: 38px; border: 0; background: #fff; color: #374151; font-size: 16px; line-height: 1; cursor: pointer; }
.nbd-anchor .nbd-qty-btn:hover { background: #f9fafb; }
.nbd-anchor .nbd-qty-input {
    width: 56px; height: 38px; border: 0; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
    text-align: center; font-size: 14px; color: #111827; background: #fff; -moz-appearance: textfield;
}
.nbd-anchor .nbd-qty-input::-webkit-outer-spin-button,
.nbd-anchor .nbd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ★ 2026-09-14 工单22 议题五：库存移到「数量」右侧同一行显示。
   结构：.nbd-qty-row > .nbd-opt-label（标签，仍独占一行） + .nbd-qty-line（− 输入 ＋ 与库存同行）
   仅在「显示数量」开启时使用该行；未开启数量时库存仍走原有独立块，
   故不配置数量的旧页面 DOM/像素零变化。 */
.nbd-anchor .nbd-qty-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nbd-anchor .nbd-qty-line .nbd-anchor-stock { margin-bottom: 0; }

/* CTA 行：Add to Cart 保持自身文字宽度（与改造前逐像素一致），收藏按钮自适应宽度。
   ★ 2026-09-14 工单22 议题三：`flex:1 1 auto` 会让 CTA 撑满整行（通栏），
     与改造前 `.nbd-anchor-cta`（inline-flex，宽度＝文案宽度）不一致 ⇒ 还原为 0 0 auto。
     仅改本条；按钮其余属性（圆角/内边距/字号/配色）一律不动。 */
.nbd-anchor .nbd-buy-row { display: flex; align-items: stretch; justify-content: flex-start; gap: 10px; margin-top: 16px; }
.nbd-anchor .nbd-buy-row .nbd-anchor-cta { flex: 0 0 auto; margin-bottom: 0; }
.nbd-anchor .nbd-fav-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #374151; border: 1px solid #e5e7eb;
    border-radius: var(--nbd-btn-radius, var(--nbd-radius));
    padding: var(--nbd-btn-py, 12px) var(--nbd-btn-px, 24px);
    font-size: var(--nbd-btn-size, 14px); font-weight: 500; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.nbd-anchor .nbd-fav-btn:hover { border-color: #cbd5e1; }
.nbd-anchor .nbd-fav-btn[hidden] { display: none !important; }
.nbd-anchor .nbd-fav-ico { font-size: 16px; line-height: 1; }

/* 移动端：收藏按钮不出现（需求：仅电脑 / 平板）；窄屏让 CTA 独占一行 */
body.dv-mobile .nbd-anchor .nbd-fav-btn { display: none !important; }
@media (max-width: 560px) {
    .nbd-anchor .nbd-swatch { width: 30px; height: 30px; }
    .nbd-anchor .nbd-buy-row { flex-wrap: wrap; }
}

.nbd-ratio-4-3  { aspect-ratio: 4 / 3; }
.nbd-ratio-16-9 { aspect-ratio: 16 / 9; }
.nbd-ratio-1-1  { aspect-ratio: 1 / 1; }
.nbd-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .04);
    color: #9ca3af;
    font-size: 28px;
    font-weight: 600;
}
.nbd-ph,
.nbd-row-media img,
.nbd-rel-media img,
.nbd-anchor-main img { object-fit: cover; }

/* ── P2 横向长条产品卡片 ── */
.nbd-row-items { display: flex; flex-direction: column; gap: var(--nbd-gap); }
.nbd-row-item {
    display: flex;
    gap: 20px;
    align-items: center;
    background: var(--nbd-card-bg);
    border: 1px solid var(--nbd-border);
    border-radius: var(--nbd-radius);
    padding: 16px;
}
.nbd-row-media {
    flex: 0 0 160px;
    width: 160px;
    border-radius: calc(var(--nbd-radius) - 2px);
    overflow: hidden;
    position: relative;
}
.nbd-row-media img { width: 100%; height: 100%; display: block; }
.nbd-row-badge {
    position: absolute;
    top: 8px; right: 8px; left: auto;   /* 默认右侧，同 .nb-card-badge；由 cs-badge-pos-* 覆盖 */
    background: var(--cs-primary, #111827);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
}
.nbd-row-body { flex: 1; min-width: 0; }
.nbd-row-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--nbd-title-color); }
.nbd-row-title a { color: inherit; text-decoration: none; }
.nbd-row-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.nbd-row-price { font-weight: 600; color: var(--nbd-price-color); }
.nbd-row-cat { font-size: 13px; color: var(--nbd-desc-color); }
.nbd-row-desc { font-size: 14px; color: var(--nbd-desc-color); line-height: 1.6; margin: 0 0 12px; }

/* ── P3 相关推荐 ── */
.nbd-rel-items { display: flex; gap: var(--nbd-gap); }
.nbd-rel-scroll .nbd-rel-items { overflow-x: auto; padding-bottom: 6px; }
.nbd-rel-grid2 .nbd-rel-items { display: grid; grid-template-columns: repeat(2, 1fr); }
.nbd-rel-item {
    flex: 0 0 220px;
    width: 220px;
    background: var(--nbd-card-bg);
    border: 1px solid var(--nbd-border);
    border-radius: var(--nbd-radius);
    padding: 12px;
}
.nbd-rel-grid2 .nbd-rel-item { flex: none; width: auto; }
.nbd-rel-media {
    width: 100%;
    border-radius: calc(var(--nbd-radius) - 2px);
    overflow: hidden;
    margin-bottom: 10px;
}
.nbd-rel-media img { width: 100%; height: 100%; display: block; }
.nbd-rel-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--nbd-title-color); }
.nbd-rel-title a { color: inherit; text-decoration: none; }
.nbd-rel-price { font-size: 15px; font-weight: 600; color: var(--nbd-price-color); margin-bottom: 8px; }
.nbd-rel-desc { font-size: 13px; color: var(--nbd-desc-color); line-height: 1.5; margin: 0 0 10px; }
.nbd-related-guide .nbd-guide { text-align: center; padding: 48px 0; }
.nbd-guide-text { color: var(--nbd-desc-color); font-size: 15px; }

/* ── C1 购买锚点区 ── */
.nbd-anchor-inner {
    display: flex;
    gap: var(--nbd-gap);
    align-items: center;
    background: var(--nbd-card-bg);
    border: var(--nbd-border-width, 1px) var(--nbd-border-style, solid) var(--nbd-border-color, var(--nbd-border, #e5e7eb));
    border-radius: var(--nbd-radius);
    padding: 28px;
}

/* 无框/Flat：截图 CentSnap 效果，无边框、无背景、仅留白 */
.nbd-anchor.is-flat .nbd-anchor-inner,
.nbd-anchor.is-transparent .nbd-anchor-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.nbd-anchor.is-transparent .nbd-anchor-inner { padding: 0; }

/* ── 小众品牌加购成功弹窗（add_popup）── */
.nbd-add-cart.is-loading { opacity: .6; pointer-events: none; }
.nbd-cart-modal-mask {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.nbd-cart-modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 340px;
    padding: 28px 24px; text-align: center;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
    animation: nbd-cart-pop .18s ease-out;
}
@keyframes nbd-cart-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.nbd-cart-modal-ico {
    width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: 26px; line-height: 48px; font-weight: 700;
}
.nbd-cart-modal-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.nbd-cart-modal-sub { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
.nbd-cart-modal-actions { display: flex; gap: 12px; }
.nbd-cart-modal-actions .nbd-btn { flex: 1; text-decoration: none; }
.nbd-cart-continue { background: #f3f4f6; color: #374151; }
.nbd-cart-gocheck { background: var(--cs-primary, #E62025); color: #fff; }
.nbd-anchor.is-flat .nbd-anchor-main,
.nbd-anchor.is-transparent .nbd-anchor-main { border-radius: var(--nbd-radius); }
.nbd-anchor-media { flex: 0 0 44%; max-width: 44%; }
.nbd-anchor-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--nbd-radius) - 2px);
    overflow: hidden;
}
.nbd-anchor-main img { width: 100%; height: 100%; display: block; }
.nbd-anchor-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.nbd-thumb {
    width: 60px; height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--nbd-border);
    padding: 0;
    background: none;
    cursor: pointer;
}
.nbd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nbd-thumb.active { border-color: var(--nb-brand, #6b7f5e); box-shadow: 0 0 0 2px var(--nb-brand, #6b7f5e); }
.nbd-anchor-info { flex: 1; min-width: 0; }
.nbd-anchor-title { font-size: var(--nbd-anchor-title-size, 28px); font-weight: 600; margin: 0 0 8px; color: var(--nbd-anchor-title-color, var(--nbd-title-color)); line-height: 1.2; }
.nbd-anchor-subtitle { font-size: var(--nbd-anchor-subtitle-size, 15px); line-height: 1.5; color: var(--nbd-anchor-subtitle-color, var(--nbd-desc-color)); margin: 0 0 18px; max-width: 520px; }
.nbd-anchor-rating { font-size: 14px; color: var(--nbd-desc-color); margin-bottom: 8px; }
/* ★ 2026-09-14 工单22 议题六：价格文字改用站点主色（与 product.php 的价格同色）。
   ★★ 真因修正（同日晚，线上实测后）：上一版只给 `.nbd-anchor-price` 补了
   `var(--nbd-price-color, …)` 兜底，但该变量**已被本文件的块级令牌固定**
   （见上方 `.nbd-row-list, .nbd-related, .nbd-anchor { --nbd-price-color: #111827 }`），
   于是 `var()` 命中的是 #111827 这个「有值」的深灰 ⇒ 兜底分支永不触发，
   线上实测价格仍是 rgb(17,24,39)，与主商城 `.cs-pd-price{color:#E60012}` 的红色不一致。
   修法：把 `.nbd-anchor` 作用域内的令牌默认值直接接到主色（同特异性 + 后置声明 ⇒ 覆盖上方令牌组）：
     · 面板显式设色（inline `--nbd-price-color`）依旧优先——inline 覆盖任何 CSS 声明；
     · 未设色 ⇒ 跟随全局主色 `--cs-brand`（后台【全局颜色】，当前 #E60225）；
     · `--cs-brand` 缺失的极端情况再回退历史深灰，保证不出现「颜色丢失」。
   作用域仅限 `.nbd-anchor`（产品详情购买锚点区）；列表页 / 相关产品区价格不受影响。 */
.nbd-anchor { --nbd-price-color: var(--cs-brand, #111827); }
.nbd-anchor-price { font-size: var(--nbd-price-size, 24px); font-weight: 700; color: var(--nbd-price-color, var(--cs-brand, #E60012)); margin: 4px 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nbd-anchor-compare {
    font-size: var(--nbd-anchor-compare-size, 16px);
    font-weight: 400;
    color: var(--nbd-anchor-compare-color, var(--nbd-desc-color, #6b7280));
    text-decoration: line-through;
    opacity: .85;
}
.nbd-anchor-stock { font-size: var(--nbd-anchor-stock-size, 14px); color: var(--nbd-anchor-stock-color, #16a34a); margin-bottom: 14px; }
.nbd-anchor-cta { margin-bottom: 16px; font-size: var(--nbd-btn-size, 14px); border-radius: var(--nbd-btn-radius, var(--nbd-radius)); padding: var(--nbd-btn-py, 12px) var(--nbd-btn-px, 24px); }
.nbd-anchor-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nbd-anchor-trust li {
    font-size: 13px;
    color: var(--nbd-desc-color);
    padding-left: 20px;
    position: relative;
}
.nbd-anchor-trust li::before { content: '✓'; position: absolute; left: 0; color: #16a34a; }

/* ── 移动端适配 ── */
@media (max-width: 768px) {
    .nbd-row-item { flex-direction: column; align-items: stretch; }
    .nbd-row-media { width: 100%; flex-basis: auto; }
    .nbd-rel-item { flex-basis: 160px; width: 160px; }
    .nbd-anchor-inner { flex-direction: column; align-items: stretch; }
    .nbd-anchor-media { flex-basis: auto; max-width: 100%; }
    .nbd-anchor-image_right .nbd-anchor-media { order: 0; }
}
@media (max-width: 480px) {
    .nbd-rel-grid2 .nbd-rel-items { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   小众品牌·低调精品详情页模块（A1 锚点导航 / A2 交替图文 / A3 工艺特写
   / A4 规格参数 / A5 常见疑问）
   设计基调：大留白 + 细线 + 宽字距小标签 + 克制的字重，不使用高饱和色块、
   渐变与阴影；靠版式与叙事补足内容体量。
   ══════════════════════════════════════════════════════════════ */

/* ── 通用：图片比例框（object-fit 保证任意比例不拉伸） ── */
.nbd-ratio-1-1  { aspect-ratio: 1 / 1; }
.nbd-ratio-4-3  { aspect-ratio: 4 / 3; }
.nbd-ratio-3-4  { aspect-ratio: 3 / 4; }
.nbd-ratio-16-9 { aspect-ratio: 16 / 9; }
.nbd-ratio-1-1 img, .nbd-ratio-4-3 img, .nbd-ratio-3-4 img, .nbd-ratio-16-9 img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── A1 锚点导航 ── */
.nbd-nav {
    background: var(--nbd-nav-bg, #ffffff);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    padding: 0 24px;
    position: relative;
}
.nbd-nav.is-sticky { position: relative; }
/* 吸顶接力：Tab 吸顶态由 JS 在越过锚点+30px 时才加（三端统一），平时跟文档流。
   !important 确保接力状态压过 @media(max-width:1024px) 里 .nbd-nav.is-sticky{position:relative} 的源序覆盖，
   否则平板/移动端 is-relay-stuck 会被默认 relative 吃掉，Tab 不吸顶。 */
.nbd-nav.is-relay-stuck { position: sticky !important; top: 0 !important; z-index: 45; }
.nbd-nav:not(.has-rule) { border-bottom-color: transparent; }
.nbd-nav-inner {
    display: flex;
    gap: var(--nbd-nav-gap, 36px);
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.nbd-nav-inner::-webkit-scrollbar { display: none; }
.nbd-nav-left   .nbd-nav-inner { justify-content: flex-start; }
/* ★ 工单103⑦：`safe center` —— 桌面放得下时照常居中；窄屏（≤1024px 时 .nbd-nav-inner
   变 overflow-x:auto 的横向滚动条）内容超宽时退回「安全」的 flex-start，否则居中会把
   首项推到 inner 左侧之外且**滚不回去**（flexbox 居中溢出的经典不可达 bug）。
   两行同写：不支持 safe 关键字的浏览器丢弃第二行、保留第一行的 center。 */
.nbd-nav-center .nbd-nav-inner { justify-content: center; justify-content: safe center; }
.nbd-nav-right  .nbd-nav-inner { justify-content: flex-end; }
.nbd-nav-item {
    position: relative;
    flex: 0 0 auto;
    padding: 16px 2px;
    font-size: var(--nbd-nav-fs, 13px);
    letter-spacing: var(--nbd-nav-ls, 1.5px);
    color: var(--nbd-nav-color, #6b7280);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 400;
    transition: color .2s ease;
}
.nbd-nav.is-upper .nbd-nav-item { text-transform: uppercase; }

/* Tab 激活高亮强化（仅 CSS，2026-09-09）：
   下划线统一由 ::after 渲染：默认隐藏，hover 细预览，active 全显加粗。
   颜色用全局品牌色：
   · active 文字 → 全局次要色 --cs-secondary（用户站 #070F3）
   · 下划线     → 全局主色   --cs-primary   （用户站 #E62025）
   · hover 文字 → 中间灰 #374151（轻微加深）
   · inactive 文字 → 默认浅灰 --nbd-nav-color
   改动 4 项：① 默认无下划线（height:0 + opacity:0）；② hover 细下划线 1.5px@.45；
   ③ hover 文字中间色；④ active 加粗 font-weight:700 + 下划线 3px 全显。 */
.nbd-nav-item::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 0;
    opacity: 0;
    background: var(--cs-primary, #E62025);
    transition: height .2s ease, opacity .2s ease;
}
.nbd-nav-item:hover { color: #374151; }
.nbd-nav-item:hover::after { height: 1.5px; opacity: .45; }
.nbd-nav-item.is-active {
    color: var(--cs-secondary, #070F3);
    font-weight: 700;
}
.nbd-nav-item.is-active::after { height: 3px; opacity: 1; }

/* ── A2 交替图文 ── */
.nbd-story { padding: 88px 0; }
.nbd-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nbd-story-gap, 64px);
}
.nbd-va-center { align-items: center; }
.nbd-va-start  { align-items: start; }
.nbd-va-end    { align-items: end; }
.nbd-story-image_right .nbd-story-media { order: 2; }
.nbd-story-image_right .nbd-story-body  { order: 1; }
.nbd-story-frame {
    overflow: hidden;
    border-radius: var(--nbd-story-radius, 4px);
    background: #f4f4f2;
}
.nbd-story-ph { width: 100%; height: 100%; min-height: 240px; background: #ececea; }
.nbd-story-caption {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #9ca3af;
    letter-spacing: .02em;
}
.nbd-story-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nbd-story-eyebrow, #9ca3af);
    margin-bottom: 16px;
}
.nbd-story-title {
    font-size: 30px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--nbd-story-title, #111827);
    margin: 0 0 20px;
}
.nbd-story-text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--nbd-story-text, #4b5563);
}
.nbd-story-bullets { list-style: none; margin: 26px 0 0; padding: 0; }
.nbd-story-bullets li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--nbd-story-text, #4b5563);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nbd-story-bullets li:last-child { border-bottom: none; }
.nbd-bullet-mark {
    flex: 0 0 auto;
    width: 5px; height: 5px;
    margin-top: .55em;
    background: var(--nbd-story-eyebrow, #9ca3af);
    transform: rotate(45deg);
}
.nbd-story-link {
    display: inline-block;
    margin-top: 28px;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--nbd-story-title, #111827);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}
.nbd-story-link:hover .nbd-arrow { transform: translateX(4px); }
.nbd-arrow { display: inline-block; transition: transform .2s ease; }

/* ── A3 工艺特写 ── */
.nbd-craft { padding: 88px 0; }
.nbd-craft-head { margin-bottom: 44px; }
.nbd-cap-center .nbd-craft-head { text-align: center; }
.nbd-craft-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-craft-title {
    font-size: 26px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0;
}
.nbd-craft-intro {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 640px;
}
.nbd-cap-center .nbd-craft-intro { margin-left: auto; margin-right: auto; }
.nbd-craft-grid {
    display: grid;
    grid-template-columns: repeat(var(--nbd-craft-cols, 3), 1fr);
    gap: var(--nbd-craft-gap, 20px);
}
.nbd-craft-item { margin: 0; }
.nbd-craft-frame {
    overflow: hidden;
    border-radius: var(--nbd-craft-radius, 4px);
    background: #f4f4f2;
}
.nbd-craft-cap { padding-top: 14px; }
.nbd-cap-center .nbd-craft-cap { text-align: center; }
.nbd-craft-cap-t {
    font-size: 14px;
    font-weight: 500;
    color: var(--nbd-craft-title, #1f2937);
    margin-bottom: 5px;
}
.nbd-craft-cap-d {
    font-size: 13px;
    line-height: 1.7;
    color: var(--nbd-craft-cap, #9ca3af);
}

/* ── A4 规格参数 ── */
.nbd-spec { padding: 88px 0; }
.nbd-spec-head { margin-bottom: 36px; }
.nbd-spec-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-spec-title {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0;
}
.nbd-spec-table { width: 100%; border-collapse: collapse; }
.nbd-spec-table tr { border-bottom: 1px solid var(--nbd-spec-line, rgba(0, 0, 0, .08)); }
.nbd-spec-table tr:first-child { border-top: 1px solid var(--nbd-spec-line, rgba(0, 0, 0, .08)); }
.nbd-spec-table th,
.nbd-spec-table td {
    padding: 15px 0;
    vertical-align: top;
    font-size: 14.5px;
    line-height: 1.7;
}
.nbd-spec-table th {
    width: var(--nbd-spec-lw, 38%);
    text-align: left;
    font-weight: 500;
    color: var(--nbd-spec-label, #6b7280);
    padding-right: 24px;
}
.nbd-spec-table td { color: var(--nbd-spec-value, #111827); }

/* ── 工单33（2026-09-15）：规格分组头行（specGroups 组名），低调加粗、不抢戏 ── */
.nbd-spec-table tr.nbd-spec-group th {
    width: auto;
    font-weight: 600;
    color: var(--nbd-spec-value, #111827);
    letter-spacing: .02em;
}
.nbd-spec-grid .nbd-spec-group dt,
.nbd-spec-cards .nbd-spec-group dt {
    width: 100%;
    font-weight: 600;
    color: var(--nbd-spec-value, #111827);
    letter-spacing: .02em;
}
.nbd-spec-grid .nbd-spec-group { flex-basis: 100%; }
.nbd-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    margin: 0;
}
.nbd-spec-cell {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--nbd-spec-line, rgba(0, 0, 0, .08));
}
.nbd-spec-cell dt {
    font-size: 14px;
    color: var(--nbd-spec-label, #6b7280);
    flex: 0 0 auto;
}
.nbd-spec-cell dd {
    margin: 0;
    font-size: 14px;
    color: var(--nbd-spec-value, #111827);
    text-align: right;
}
.nbd-spec-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nbd-spec-gap, 0);
    margin: 0;
}
.nbd-spec-card {
    padding: 20px;
    border: 1px solid var(--nbd-spec-line, rgba(0, 0, 0, .08));
    margin: -1px 0 0 -1px;
}
.nbd-spec-card dt {
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--nbd-spec-label, #9ca3af);
    margin-bottom: 8px;
}
.nbd-spec-card dd {
    margin: 0;
    font-size: 15px;
    color: var(--nbd-spec-value, #111827);
}
.nbd-spec-note {
    margin-top: 20px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #9ca3af;
}

/* ── A-spec 规格参数（读 params_json.highlights_*，原「产品亮点」/ 工单81 改名「规格参数」）── */
.nbdsp { padding: 72px 0; }
.nbdsp-head { margin-bottom: 32px; }
.nbdsp-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; margin-bottom: 12px; }
/* ★ 工单87（2026-09-21）：标题字号与前台「Related Products」区块对齐。
   参照物 = blk nb-product-list 的 .nb-section-title（桌面 32px/600/1.2，≤768px 降 26px）。
   本块原字号比参照小一档、字重偏轻，作者截图对比后要求「文字大小一样」。
   ★ 只对齐决定视觉大小的三项（字号/字重/行高），margin 保持本块原值，
     避免 .nbdsp-head 的 32px 头部间距被叠加而引发布局回归。 */
.nbdsp-title { font-size: 32px; font-weight: 600; line-height: 1.2; color: #111827; margin: 0; }
/* ★ 工单86（2026-09-20）：宽度由 760px 放开到 100%。
   原 760px 在 1200px 容器（.wrap）里只占约 66%，作者反馈「表格是缩短的」。
   现跟随容器满宽；窄屏本就 < 760px，故响应式行为不变。 */
.nbdsp-list { list-style: none; margin: 0; padding: 0; max-width: 100%; }
.nbdsp-list li {
    position: relative; padding: 12px 0 12px 26px;
    border-bottom: 1px solid var(--nbdsp-line, rgba(0, 0, 0, .08));
    color: var(--nbdsp-value, #374151); font-size: 15px; line-height: 1.7;
}
.nbdsp-list li::before {
    content: ''; position: absolute; left: 5px; top: 21px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--cs-primary, #111827);
}
.nbdsp-kv { margin: 0; max-width: 100%; }
.nbdsp-kv > div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--nbdsp-line, rgba(0, 0, 0, .08)); }
.nbdsp-kv dt { flex: 0 0 var(--nbdsp-lw, 38%); color: var(--nbdsp-label, #6b7280); font-size: 14px; }
.nbdsp-kv dd { margin: 0; flex: 1; color: var(--nbdsp-value, #111827); font-size: 15px; }

/* ── A-pack 包装清单（读 params_json.key_features，原「Key features」/ 工单81 改名「包装清单」）── */
.nbdpl { padding: 72px 0; }
.nbdpl-head { margin-bottom: 32px; }
.nbdpl-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; margin-bottom: 12px; }
/* ★ 工单87（2026-09-21）：同 .nbdsp-title，与 .nb-section-title 对齐字号/字重/行高。 */
.nbdpl-title { font-size: 32px; font-weight: 600; line-height: 1.2; color: #111827; margin: 0; }
/* ★ 工单87（2026-09-21）：宽度由 760px 放开到 100%（与工单86 的 .nbdsp-list 同款处理）。
   原 760px 在 1200px 容器（.wrap）里只占约 66%，作者反馈「缩短」。窄屏本就 < 760px，响应式行为不变。 */
.nbdpl-list { list-style: none; margin: 0; padding: 0; max-width: 100%; }
.nbdpl-list li {
    position: relative; padding: 12px 0 12px 30px;
    border-bottom: 1px solid var(--nbdpl-line, rgba(0, 0, 0, .08));
    color: var(--nbdpl-value, #374151); font-size: 15px; line-height: 1.7;
}
.nbdpl-list li::before {
    content: '✓'; position: absolute; left: 2px; top: 12px;
    color: var(--nbdpl-marker, var(--cs-primary, #111827)); font-weight: 700;
}

/* ── 小众品牌·产品描述（读 description 列，i18n 走 desc_display，工单88 新建独立块）── */
.nbpd { padding: 56px 0; }
.nbpd-head { margin-bottom: 24px; }
.nbpd-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; margin-bottom: 12px; }
/* ★ 与 .nbdsp-title / .nbdpl-title / .nb-section-title 对齐字号/字重/行高（工单87 同款）。 */
.nbpd-title { font-size: 32px; font-weight: 600; line-height: 1.2; color: #111827; margin: 0; }
.nbpd-body { max-width: 100%; }
.nbpd-desc { color: var(--nbpd-value, #374151); font-size: 15px; line-height: 1.8; }
.nbpd-desc a { color: var(--nbpd-link, var(--cs-primary, #111827)); }
.nbpd-note { margin-top: 18px; font-size: 13px; color: #9ca3af; }
.nbdpl-note { margin-top: 20px; font-size: 12.5px; line-height: 1.7; color: #9ca3af; }

/* ── A5 常见疑问 ── */
.nbd-faq { padding: 88px 0; }
.nbd-faq-head { margin-bottom: 36px; }
.nbd-faq-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-faq-title {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0;
}
.nbd-faq-list {
    max-width: var(--nbd-faq-maxw, 820px);
    border-top: 1px solid var(--nbd-faq-line, rgba(0, 0, 0, .08));
}
.nbd-faq-item {
    border-bottom: 1px solid var(--nbd-faq-line, rgba(0, 0, 0, .08));
    margin-bottom: var(--nbd-faq-gap, 0);
}
.nbd-faq-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--nbd-faq-qsize, 15px);
    color: var(--nbd-faq-q, #111827);
}
.nbd-faq-sum::-webkit-details-marker { display: none; }
.nbd-faq-sum::marker { content: ''; }
.nbd-faq-ico { position: relative; flex: 0 0 auto; width: 13px; height: 13px; color: #9ca3af; }
.nbd-faq-ico::before,
.nbd-faq-ico::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform .22s ease;
}
.nbd-faq-ico::before { left: 0; top: 6px; width: 13px; height: 1px; }
.nbd-faq-ico::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.nbd-faq-item[open] .nbd-faq-ico::after { transform: scaleY(0); }
.nbd-faq-a {
    padding: 0 40px 22px 0;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--nbd-faq-a, #6b7280);
}

/* ── 响应式 ── */
@media (max-width: 900px) {
    .nbd-story-grid { grid-template-columns: 1fr; gap: 32px; }
    .nbd-story-image_right .nbd-story-media,
    .nbd-story-image_right .nbd-story-body { order: 0; }
    .nbd-craft-grid { grid-template-columns: repeat(2, 1fr); }
    .nbd-spec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .nbd-story, .nbd-craft, .nbd-spec, .nbd-faq, .nbdsp, .nbdpl, .nbpd { padding: 56px 0; }
    .nbd-story-title { font-size: 24px; }
    .nbd-craft-title, .nbd-spec-title, .nbd-faq-title { font-size: 22px; }
    /* ★ 工单87（2026-09-21）：与 .nb-section-title 的窄屏档同步（见本文件 ≤768px 处该规则）。 */
    .nbdsp-title, .nbdpl-title, .nbpd-title { font-size: 26px; }
    .nbd-nav-inner { justify-content: flex-start; gap: 24px; }
}
@media (max-width: 560px) {
    .nbd-craft-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   nbd-hero — Hero 首屏（H1）：全屏氛围 / 左文右图（CentSnap 式）
   全部视觉属性通过 CSS 变量由后台编辑器驱动：颜色、字号、圆角、填充、阴影。
   ========================================================================== */
.nbd-hero {
    position: relative;
    min-height: var(--nbd-hero-minh, 640px);
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    color: var(--nbd-hero-text, #1a1a1a);
    /* 背景色优先由编辑器 bg_color 内联覆盖，此处仅作兜底 */
    background-color: var(--nbd-hero-bg, #1a1a1a);
}
.nbd-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--nbd-hero-bgpos, center center);
    background-repeat: no-repeat;
    z-index: 0;
    /* 圆角走独立钩子：修复前借用 --nbd-hero-media-radius（Split 版式的「媒体区圆角」），
       导致在全屏版式调「媒体区圆角」会连带改变本层背景的圆角（跨版式串味）。
       当前无对应 UI 字段，恒为 0，需要时再加字段输出该变量即可。 */
    border-radius: var(--nbd-hero-bg-radius, 0px);
    transform: translateZ(0); /* 触发 GPU 合成，避免子元素模糊 */
}
.nbd-hero-inner {
    position: relative;
    z-index: 2;
    min-height: var(--nbd-hero-minh, 640px);
    display: flex;
    align-items: center;
}
.nbd-hero-text {
    width: 100%;
    max-width: var(--nbd-hero-maxw, 560px);
    padding: var(--nbd-hero-text-pad, 0px);
    border-radius: var(--nbd-hero-text-radius, 0px);
    background: var(--nbd-hero-text-bg, transparent);
}
.nbd-hero-inner .nbd-hero-text { padding-top: 64px; padding-bottom: 64px; }
.nbd-hero-inner .nbd-hero-text[data-nbd-text-pad="1"] { padding: var(--nbd-hero-text-pad, 0px); }
.nbd-hero-text-right .nbd-hero-text { margin-left: auto; text-align: right; }
.nbd-hero-text-center .nbd-hero-text { margin-left: auto; margin-right: auto; text-align: center; }
.nbd-hero-text-center .nbd-hero-price-row,
.nbd-hero-text-center .nbd-hero-cta { justify-content: center; }

/* overlay — 5 种叠加层，确保文字始终可读 */
.nbd-hero-overlay-soft::before,
.nbd-hero-overlay-soft_left::before,
.nbd-hero-overlay-dark::before,
.nbd-hero-overlay-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.nbd-hero-overlay-soft::before {
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 100%);
}
.nbd-hero-overlay-soft_left::before {
    background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 60%, rgba(0,0,0,0) 100%);
}
.nbd-hero-overlay-dark::before {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%);
}
.nbd-hero-overlay-bottom::before {
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%);
}
/* dark 与 bottom 叠加层下，文字默认转白 */
.nbd-hero-overlay-dark,
.nbd-hero-overlay-bottom { color: var(--nbd-hero-text, #ffffff); }
.nbd-hero-overlay-dark .nbd-hero-eyebrow,
.nbd-hero-overlay-bottom .nbd-hero-eyebrow { color: rgba(255,255,255,.78); }
.nbd-hero-overlay-dark .nbd-hero-subtitle,
.nbd-hero-overlay-bottom .nbd-hero-subtitle { color: rgba(255,255,255,.82); }
.nbd-hero-overlay-dark .nbd-hero-shortdesc,
.nbd-hero-overlay-bottom .nbd-hero-shortdesc { color: rgba(255,255,255,.82); }

/* eyebrow + title + subtitle — 字号/颜色全部走 CSS 变量 */
.nbd-hero-eyebrow {
    font-size: var(--nbd-hero-eyebrow-size, 12px);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nbd-hero-eyebrow, #6b7280);
    margin-bottom: 10px;
}
.nbd-hero-title {
    font-size: var(--nbd-hero-title-size, clamp(28px, 4.4vw, 56px));
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--nbd-hero-title, inherit);
    margin: 0 0 10px;
}
.nbd-hero-subtitle {
    font-size: var(--nbd-hero-subtitle-size, clamp(14px, 1.4vw, 17px));
    line-height: 1.55;
    color: var(--nbd-hero-subtitle, #4b5563);
    margin: 0 0 18px;
    max-width: 480px;
}
.nbd-hero-text-center .nbd-hero-subtitle,
.nbd-hero-text-right .nbd-hero-subtitle { margin-left: auto; margin-right: auto; }
.nbd-hero-text-right .nbd-hero-subtitle { margin-left: auto; margin-right: 0; }

/* ★ 工单86（2026-09-20）：简短描述 —— 位于「五星评价 / SKU」信任行正下方、副标题之上。
   字号/颜色沿用与副标题同一套 CSS 变量机制（--nbd-hero-shortdesc-size / --nbd-hero-shortdesc）。
   margin-top 取 10px：信任行自身 margin-top 12px、无下边距，故此处与其保持同档视觉节奏。
   ★ 工单86b（同日）：max-width 由 480px 放开到 100%（= 占满 hero 文字块，上限仍是
     作者可配的「文字块最大宽度」--nbd-hero-maxw，默认 560px）。原因：作者实际填的简短描述
     是一整句（约 60 字），480px 会多折一行；作者明确偏好「不要缩短的」宽表。
     副标题仍保留自己的 480px（未动），二者互不影响。 */
.nbd-hero-shortdesc {
    font-size: var(--nbd-hero-shortdesc-size, clamp(14px, 1.4vw, 17px));
    line-height: 1.55;
    color: var(--nbd-hero-shortdesc, #4b5563);
    margin: 10px 0 18px;
    max-width: 100%;
}
.nbd-hero-text-center .nbd-hero-shortdesc,
.nbd-hero-text-right .nbd-hero-shortdesc { margin-left: auto; margin-right: auto; }
.nbd-hero-text-right .nbd-hero-shortdesc { margin-left: auto; margin-right: 0; }

/* CentSnap 式价格条：左侧 现价 + 划线原价，右侧 Buy Now（无独立折扣角标） */
.nbd-hero-price-bar {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding: 5px 5px 5px 22px;
    border-radius: 999px;
    background: var(--nbd-hero-price-bar-bg, rgba(255,255,255,.85));
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.08);
    color: #111827;
    max-width: 100%;
}
.nbd-hero-price-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nbd-hero-price {
    font-size: var(--nbd-hero-price-size, clamp(28px, 2.8vw, 42px));
    font-weight: var(--nbd-hero-price-weight, 800);
    letter-spacing: -0.03em;
    color: var(--nbd-hero-price, #111827);
    line-height: 1;
}
.nbd-hero-compare-price {
    font-size: var(--nbd-hero-compare-size, clamp(14px, 1.25vw, 18px));
    font-weight: 500;
    color: var(--nbd-hero-compare-price, rgba(0,0,0,.55));
    text-decoration: line-through;
    line-height: 1;
}
.nbd-hero-overlay-dark .nbd-hero-price,
.nbd-hero-overlay-bottom .nbd-hero-price { color: var(--nbd-hero-price, #111827); }
.nbd-hero-overlay-dark .nbd-hero-compare-price,
.nbd-hero-overlay-bottom .nbd-hero-compare-price { color: rgba(0,0,0,.55); }
.nbd-hero-price-bar .nbd-hero-btn-primary {
    flex: 0 0 auto;
    box-shadow: none;
    padding: var(--nbd-hero-btn-py, 16px) var(--nbd-hero-btn-px, 38px);
    font-size: 20px;
    font-weight: var(--nbd-hero-btn-weight, 700);
    color: #fff !important;
}
.nbd-hero-price-bar .nbd-hero-stock {
    background: transparent;
    color: var(--nbd-hero-text, #1a1a1a);
    padding: 0;
    backdrop-filter: none;
}
.nbd-hero-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    color: #1f2937;
    backdrop-filter: blur(4px);
}
.nbd-hero-overlay-dark .nbd-hero-stock,
.nbd-hero-overlay-bottom .nbd-hero-stock {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
}
.nbd-hero-stock-mark { font-weight: 700; }
.nbd-hero-stock.is-ok .nbd-hero-stock-mark { color: #16a34a; }
.nbd-hero-stock.is-bad .nbd-hero-stock-mark { color: #b91c1c; }
.nbd-hero-overlay-dark .nbd-hero-stock.is-ok .nbd-hero-stock-mark,
.nbd-hero-overlay-bottom .nbd-hero-stock.is-ok .nbd-hero-stock-mark { color: #86efac; }

/* CTA 按钮组 — CentSnap 式大圆角主按钮 */
.nbd-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.nbd-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--nbd-hero-btn-py, 14px) var(--nbd-hero-btn-px, 32px);
    font-size: var(--nbd-hero-btn-fz, 15px);
    font-weight: var(--nbd-hero-btn-weight, 600);
    letter-spacing: .06em;
    text-transform: var(--nbd-hero-btn-upper, uppercase);
    border-radius: var(--nbd-hero-btn-radius, 999px);
    background: var(--nbd-hero-btn-bg, var(--nb-brand, #1a1a1a));
    color: var(--nbd-hero-btn-color, #ffffff);
    border: var(--nbd-hero-btn-border-w, 1px) solid var(--nbd-hero-btn-border-color, var(--nbd-hero-btn-bg, var(--nb-brand, #1a1a1a)));
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nbd-hero-btn-primary:hover {
    opacity: .9;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.25);
}
.nbd-hero-btn-upper { text-transform: uppercase; }
.nbd-hero-btn-secondary {
    padding: var(--nbd-hero-btn-py, 14px) var(--nbd-hero-btn-px, 28px);
    font-size: var(--nbd-hero-btn-fz, 15px);
    font-weight: var(--nbd-hero-btn-weight, 600);
    letter-spacing: .06em;
    text-transform: var(--nbd-hero-btn-upper, uppercase);
    border-radius: var(--nbd-hero-btn-radius, 999px);
    background: transparent;
    color: var(--nbd-hero-btn2-color, inherit);
    border: 1px solid currentColor;
    opacity: .85;
    text-decoration: none;
}
.nbd-hero-btn-secondary:hover {
    opacity: 1;
    background: rgba(255,255,255,.08);
}

/* 响应式：移动端首屏更紧凑 */
@media (max-width: 768px) {
    .nbd-hero { min-height: 480px; }
    .nbd-hero-inner { min-height: 480px; align-items: flex-end; }
    .nbd-hero-text-right .nbd-hero-text,
    .nbd-hero-text-left  .nbd-hero-text { margin-left: 0; margin-right: 0; text-align: left; }
    .nbd-hero-text { padding: 40px 0; max-width: 100%; }
    .nbd-hero-cta,
    .nbd-hero-cta-full-mb { flex-direction: column; align-items: stretch; }
    .nbd-hero-cta-full-mb .nbd-hero-btn-primary,
    .nbd-hero-cta-full-mb .nbd-hero-btn-secondary { width: 100%; text-align: center; }
    /* 恢复 前天(09-11) 修复：不覆盖 .wrap 的左右内边距，标题/内容恢复安全边距（不再贴边） */
    .nbd-hero-split .nbd-hero-split-inner {
        gap: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    /* 恢复 前天(09-11) 修复：价格条自适应宽度、按钮自适应（非 100% 通栏），
       价格与按钮单行垂直居中。 */
    .nbd-hero-price-bar {
        width: auto;
        justify-content: flex-start;
        padding: 6px 6px 6px 14px;
        gap: 10px;
    }
    .nbd-hero-price-bar .nbd-hero-price-info {
        flex: 0 1 auto;
        min-width: 0;
    }
    .nbd-hero-price-bar .nbd-hero-btn-primary {
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
    }
    .nbd-hero-price-bar .nbd-hero-cta-full-mb.nbd-hero-btn-primary {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        text-align: center;
    }
}
@media (max-width: 560px) {
    .nbd-hero { min-height: 420px; }
    .nbd-hero-inner { min-height: 420px; }
    .nbd-hero-price-bar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-radius: 999px;
        padding: 5px 5px 5px 14px;
        gap: 8px;
        margin-bottom: 14px;
    }
    .nbd-hero-price-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        flex: 0 0 auto;
        min-width: 0;
    }
    .nbd-hero-compare-price {
        margin-top: 1px;
    }
    .nbd-hero-price-bar .nbd-hero-btn-primary {
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
        color: #fff !important;
    }
    .nbd-hero-price-bar .nbd-hero-cta-full-mb.nbd-hero-btn-primary {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        text-align: center;
    }
}

/* ==========================================================================
   nbd-feat — 卖点卡片集（H2）
   2-3 列大图卡片，每行一条「图片URL|标题|描述」。
   与 nb_craft_gallery 的区别：本块为「粗大图 + 短描述」，强卖点表达。
   ========================================================================== */
.nbd-feat { padding: 96px 0; }
.nbd-feat-head { text-align: center; margin-bottom: 56px; }
.nbd-feat-cap-left .nbd-feat-head { text-align: left; }
.nbd-feat-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nbd-craft-eyebrow, #6b7280);
    margin-bottom: 12px;
}
.nbd-feat-title {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--nbd-feat-title, inherit);
    margin: 0 0 12px;
}
.nbd-feat-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    max-width: 640px;
}
.nbd-feat-cap-left .nbd-feat-intro { margin: 0; }

.nbd-feat-grid {
    display: grid;
    grid-template-columns: repeat(var(--nbd-feat-cols, 3), 1fr);
    gap: var(--nbd-feat-gap, 24px);
}
.nbd-feat-card {
    display: flex;
    flex-direction: column;
    background: var(--nb-card-bg);
    border-radius: var(--nbd-feat-radius, var(--nb-radius));
    overflow: hidden;
    box-shadow: var(--nb-card-shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.nbd-feat-card:hover {
    box-shadow: var(--nb-card-shadow-hover);
    transform: translateY(-4px);
}
.nbd-feat-frame {
    overflow: hidden;
    background: #f3f4f6;
}
.nbd-feat-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}
.nbd-feat-card:hover .nbd-feat-frame img {
    transform: scale(1.03);
}
.nbd-feat-body {
    padding: 22px 24px 26px;
}
.nbd-feat-card-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--nbd-feat-title, inherit);
    margin: 0 0 8px;
}
.nbd-feat-card-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--nbd-feat-desc, #6b7280);
    margin: 0;
}
.nbd-feat-cap-center .nbd-feat-body { text-align: center; }
.nbd-feat-cap-center .nbd-feat-card-desc { max-width: 320px; margin-left: auto; margin-right: auto; }

/* 响应式：768 退 2 列；560 退单列 */
@media (max-width: 900px) {
    .nbd-feat-grid { grid-template-columns: repeat(2, 1fr); }
    .nbd-feat { padding: 72px 0; }
}
@media (max-width: 768px) {
    .nbd-feat-head { margin-bottom: 36px; }
}
@media (max-width: 560px) {
    .nbd-feat-grid { grid-template-columns: 1fr; gap: 28px; }
    .nbd-feat { padding: 56px 0; }
}

/* ============================================================
   Hero 版式 B：左文右图（CentSnap 式）
   媒体元素直接铺在背景色上，无外层 div 卡片容器、无边框、无圆角、无阴影。
   两版式共用 .nbd-hero-eyebrow / -title / -subtitle / -price-bar / -cta。
   ============================================================ */
.nbd-hero-split .nbd-hero-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    min-height: var(--nbd-hero-minh, 640px);
    padding-top:    var(--nbd-hero-pt, 28px);
    padding-bottom: var(--nbd-hero-pb, 28px);
}
.nbd-hero-split.is-reverse .nbd-hero-split-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.nbd-hero-split.is-reverse .nbd-hero-split-media { order: -1; }
.nbd-hero-split .nbd-hero-split-text { min-width: 0; }
.nbd-hero-split .nbd-hero-split-media {
    display: block;
    width: 100%;
    height: auto;
    object-position: center;
    /* 「媒体区背景」/「媒体区阴影」由编辑器「样式 → 媒体容器样式（Split 版式）」驱动：
       变量在 <section> 上内联输出，此处消费；缺省时回退为透明/无阴影（零影响）。
       可见位置 = 媒体元素自身的内边距区域、以及视频按自身比例留白（contain）的区域。 */
    background: var(--nbd-hero-media-bg, transparent);
    border: var(--nbd-hero-media-border-w, 0px) solid var(--nbd-hero-media-border, transparent);
    border-radius: var(--nbd-hero-media-radius, 0px);
    padding: var(--nbd-hero-media-pad, 0px);
    box-shadow: var(--nbd-hero-media-shadow, none);
    /* 让图片/视频在网格单元中垂直居中，边缘自然融入背景 */
    align-self: center;
    justify-self: center;
}
/* ★ 「Split 版式媒体比例」(media_ratio) 只约束图片与占位块。
   修复前 aspect-ratio / object-fit:cover 写在通用类上，一旦「启用视频替代主图」，
   视频也会被 image 的 4:3 容器按宽度铺满并上下裁切 —— 即改图片比例会连带改变视频显示比例。 */
.nbd-hero-split img.nbd-hero-split-media,
.nbd-hero-split div.nbd-hero-split-media {
    aspect-ratio: var(--nbd-hero-media-ratio, 4 / 3);
    object-fit: cover;
}
/* 视频永远使用自身固有宽高比，不受「Split 版式媒体比例」影响（contain 保证不裁切）。 */
.nbd-hero-split video.nbd-hero-split-media {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}
.nbd-hero-split .nbd-hero-title { font-size: var(--nbd-hero-title-size, 44px); }
.nbd-hero-split .nbd-hero-price-bar { margin-top: 6px; }
@media (max-width: 900px) {
    .nbd-hero-split .nbd-hero-split-inner,
    .nbd-hero-split.is-reverse .nbd-hero-split-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: auto;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .nbd-hero-split.is-reverse .nbd-hero-split-media { order: 0; }
    .nbd-hero-split .nbd-hero-title { font-size: var(--nbd-hero-title-size, 32px); }
}

/* ── ★ 工单23 议题一：Hero 首屏不再叠加全局 `section.blk{padding:60px 0}`（style.css:239）────
   线上实测（1920×1000，seaman 详情页 cs-bk-794）：
     section.nbd-hero 高 770.78px = padding 60 + inner 650.78 + padding 60
     文字块上空白 243.8px / 下空白 265.8px —— 其中上下各 60px 纯属全局区块内边距，
     Hero 首屏本身已是「满幅氛围区」，再吃这 120px 只会把图文往下挤。
   做法：**作用域限定 .nbd-hero**（仅小众品牌 Hero 块），把该块自身的上下内边距归零；
     Hero 的呼吸位由自有的 --nbd-hero-pt/pb（面板「内容区上/下内边距」，设计默认 28px）
     与 --nbd-hero-minh（面板「首屏最小高度」）提供，都在属性面板里可调。
   优先级：`.nbd-hero.blk`（0,2,0）> `section.blk`（0,1,1），且 nichebrand.css 在 style.css 之后加载。
   工单28（2026-09-15）：全局 section.blk 已改 5px（style.css:239），用户裁决 Hero 一并统一 5px，
           故本覆盖 0 → 5px；需要更大留白时，在块「高级设置 → 上下内边距」填值即可（内联 style 优先级最高）。 */
.nbd-hero.blk { padding-top: 5px; padding-bottom: 5px; }

/* ============================================================
   末段引导购买：促销区（活动标签 + 折扣徽章 + 倒计时）
   全部内容由后台配置驱动，CSS 不内置任何行业/品牌文案。
   ============================================================ */
.nbd-anchor-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 14px 0 4px;
}
.nbd-promo-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--nbd-title-color, #111827);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
}
.nbd-promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--nbd-border, rgba(0, 0, 0, .18));
    color: #b91c1c;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
}
.nbd-promo-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--nbd-desc-color, #4b5563);
}
.nbd-cd-label { letter-spacing: .02em; }
.nbd-cd-val {
    font-weight: 500;
    color: var(--nbd-title-color, #111827);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   末段引导购买：支付方式信任行（纯配置驱动，无内置品牌图形）
   ============================================================ */
.nbd-anchor-pay { margin-top: 18px; }
.nbd-pay-title {
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--nbd-desc-color, #4b5563);
    margin-bottom: 8px;
}
.nbd-pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nbd-pay-item {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--nbd-border, rgba(0, 0, 0, .08));
    border-radius: 4px;
    background: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    color: var(--nbd-desc-color, #4b5563);
    white-space: nowrap;
}

/* ============================================================
   滚动吸顶引导购买条（S1）
   fixed 定位不占文档流；JS 接管后由 .is-visible 控制显隐，
   保证 transform 过渡连续（故 hidden 仅在无 JS 时用于防闪烁）。
   ============================================================ */
.nbd-sticky {
    position: fixed;
    top: var(--nbd-sticky-top, 0px);
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--nbd-sticky-bg, #1c1917);
    color: var(--nbd-sticky-color, #ffffff);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .24s ease, transform .24s ease;
}
.nbd-sticky.is-visible { opacity: 1; transform: translateY(0); }
.nbd-sticky[hidden] { display: none; }
.nbd-sticky:not(.is-visible) { pointer-events: none; }
/* 吸顶接力协调器：购买条显隐由接力单一控制（覆盖块内联触发逻辑，不改动块本身）
   注意：外层必须保持 block —— 若改为 flex，.nbd-sticky-inner 会退化为 flex item，
   宽度被内容撑到 ~555px 而不铺满 max-width:1200px（PC/平板看起来像手机端窄条）。 */
.nbd-sticky.is-relay-managed { display: block !important; opacity: 0 !important; transform: translateY(-100%) !important; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.nbd-sticky.is-relay-managed .nbd-sticky-inner { width: 100%; }
.nbd-sticky.is-relay-managed.is-relay-visible { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto; }
/* 编辑器预览态：降级为静态条，避免 fixed 遮挡编辑面板 */
.nbd-sticky.is-preview {
    position: static;
    opacity: 1;
    transform: none;
    border-radius: var(--nbd-radius, 12px);
    overflow: hidden;
    pointer-events: auto;
}
.nbd-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
}
.nbd-sticky-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.nbd-sticky-img {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(255, 255, 255, .1);
}
.nbd-sticky-meta { min-width: 0; }
.nbd-sticky-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nbd-sticky-sub {
    font-size: 12px;
    line-height: 1.3;
    opacity: .72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nbd-sticky-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}
.nbd-sticky-price {
    font-size: 15px;
    font-weight: 500;
    color: currentColor;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.nbd-sticky-compare {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,.55);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
/* 浅色条背景时（bar_bg 未设=深灰，已设=浅色）给划线价足够对比度 */
.nbd-sticky.has-light-bg .nbd-sticky-compare { color: rgba(0,0,0,.4); }
.nbd-sticky-stock { font-size: 12px; opacity: .72; }
.nbd-sticky-stock.is-bad { opacity: .55; }
.nbd-sticky-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 4px;
    background: var(--nbd-sticky-btn-bg, #ffffff);
    color: var(--nbd-sticky-btn-color, #1c1917);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.nbd-sticky-cta:hover { opacity: .9; text-decoration: none; }
@media (max-width: 768px) {
    .nbd-sticky-inner { padding: 8px 16px; gap: 12px; }
    .nbd-sticky-sub { display: none; }
    .nbd-sticky-price { font-size: 14px; }
    .nbd-sticky-cta { padding: 7px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
    .nbd-sticky-img { display: none; }
    .nbd-sticky-right { gap: 10px; }
}

/* ==========================================================================
   nb_reviews — 评价区（评分摘要 + AI 摘要 + 评论列表）
   ========================================================================== */
.nbd-reviews { padding: 88px 0; }
.nbd-reviews-head { margin-bottom: 36px; }
.nbd-reviews-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-reviews-title {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0 0 10px;
}
.nbd-reviews-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
    max-width: 640px;
}
.nbd-reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 24px;
    margin-bottom: 28px;
    border: 1px solid var(--nbd-rev-border, rgba(0, 0, 0, .08));
    border-radius: var(--nbd-rev-radius, 8px);
    background: var(--nbd-rev-card, #ffffff);
}
.nbd-reviews-score {
    font-size: 42px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nbd-title-color, #111827);
}
.nbd-reviews-meta { display: flex; flex-direction: column; gap: 6px; }
.nbd-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--nbd-rev-star, #f59e0b);
}
.nbd-stars svg { flex: none; }
.nbd-reviews-count {
    font-size: 13px;
    color: #9ca3af;
}
.nbd-reviews-ai {
    flex: 1 1 100%;
    max-width: 640px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #4b5563;
    padding-top: 10px;
    border-top: 1px solid var(--nbd-rev-border, rgba(0, 0, 0, .08));
}
.nbd-reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-rev-gap, 16px);
}
.nbd-reviews-grid .nbd-reviews-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nbd-rev-gap, 16px);
}
.nbd-review-card {
    padding: 20px;
    border: 1px solid var(--nbd-rev-border, rgba(0, 0, 0, .08));
    border-radius: var(--nbd-rev-radius, 8px);
    background: var(--nbd-rev-card, #ffffff);
}
.nbd-review-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 12px;
}
.nbd-review-author {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}
.nbd-review-date {
    font-size: 12px;
    color: #9ca3af;
    margin-left: auto;
}
.nbd-review-card > .nbd-review-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 8px;
    color: #111827;
}
.nbd-review-body {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 12px;
}
.nbd-review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.nbd-review-photos img {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    object-fit: cover;
    background: #f3f4f6;
}
.nbd-review-reply {
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4b5563;
}
.nbd-review-reply strong { color: #111827; }

/* ==========================================================================
   nb_compare_intro — 顶部对比导言（人物画像 + 产品对比卡）
   ========================================================================== */
.nbd-compare { padding: 88px 0; }
.nbd-compare-head { margin-bottom: 44px; }
.nbd-compare-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-compare-title {
    font-size: 30px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0 0 16px;
}
.nbd-compare-intro {
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 640px;
}
.nbd-compare-section + .nbd-compare-section { margin-top: 56px; }
.nbd-compare-grid {
    display: grid;
    grid-template-columns: repeat(var(--nbd-compare-cols, 3), 1fr);
    gap: var(--nbd-compare-gap, 24px);
}
.nbd-compare-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--nbd-compare-radius, 8px);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--nbd-border, rgba(0, 0, 0, .08));
    transition: transform .2s ease, box-shadow .2s ease;
}
.nbd-compare-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.nbd-compare-frame {
    overflow: hidden;
    background: #f3f4f6;
    /* ★ 工单90：同上 —— 比例由 .nbd-ratio-* 类驱动，不再写死 4/3
       （blocks/nb_compare_intro.php 恒输出 nbd-ratio-* 类）。 */
}
.nbd-compare-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbd-compare-body { padding: 18px; }
.nbd-compare-card-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 6px;
}
.nbd-compare-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 10px;
}
.nbd-compare-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--nbd-price-color, #111827);
}
.nbd-compare-persona .nbd-compare-body { border: none; }

/* ==========================================================================
   nb_how_to — 使用步骤 + 配件追加销售
   ========================================================================== */
.nbd-howto { padding: 88px 0; }
.nbd-howto-head { margin-bottom: 44px; }
.nbd-howto-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.nbd-howto-title {
    font-size: 30px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #111827;
    margin: 0 0 16px;
}
.nbd-howto-intro {
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 640px;
}
.nbd-howto-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nbd-howto-gap, 24px);
    margin-bottom: 64px;
}
.nbd-howto-vertical .nbd-howto-steps {
    grid-template-columns: 1fr;
    max-width: 720px;
}
.nbd-howto-step {
    position: relative;
    display: flex;
    flex-direction: column;
}
.nbd-howto-step-num {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}
.nbd-howto-step-media { margin-bottom: 16px; }
.nbd-howto-frame {
    overflow: hidden;
    border-radius: var(--nbd-howto-radius, 8px);
    background: #f3f4f6;
    /* ★ 工单90：不再写死比例 —— 由元素上的 .nbd-ratio-* 类决定。
       此前此处写死 4/3，与更早定义的 .nbd-ratio-1-1 特异性相同(均单类)，
       而本规则在样式表中更靠后 ⇒ 层叠覆盖，导致面板「图片比例」选 1:1/3:4 全部无效。
       blocks/nb_how_to.php 渲染恒会输出一个 nbd-ratio-* 类（默认 4:3），故无需兜底。 */
}
.nbd-howto-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbd-howto-step-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 6px;
}
.nbd-howto-step-text {
    font-size: 14px;
    line-height: 1.65;
    color: #6b7280;
    margin: 0;
}
.nbd-howto-accessories { margin-top: 56px; }
.nbd-howto-acc-title {
    font-size: 22px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 24px;
}
.nbd-howto-acc-grid {
    display: grid;
    grid-template-columns: repeat(var(--nbd-howto-cols, 3), 1fr);
    gap: var(--nbd-howto-gap, 24px);
}
.nbd-howto-acc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--nbd-howto-radius, 8px);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--nbd-border, rgba(0, 0, 0, .08));
    transition: transform .2s ease, box-shadow .2s ease;
}
.nbd-howto-acc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.nbd-howto-acc-body { padding: 14px 16px 18px; }
.nbd-howto-acc-name {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 4px;
}
.nbd-howto-acc-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--nbd-price-color, #111827);
}

/* 新模块响应式 */
@media (max-width: 900px) {
    .nbd-reviews-grid .nbd-reviews-list { grid-template-columns: 1fr; }
    .nbd-compare-grid { grid-template-columns: repeat(2, 1fr); }
    .nbd-howto-steps { grid-template-columns: repeat(2, 1fr); }
    .nbd-howto-acc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .nbd-reviews, .nbd-compare, .nbd-howto { padding: 56px 0; }
    .nbd-reviews-summary { flex-direction: column; align-items: flex-start; }
    .nbd-reviews-ai { border-top: none; padding-top: 0; }
    .nbd-compare-title, .nbd-howto-title { font-size: 24px; }
}
@media (max-width: 560px) {
    .nbd-compare-grid,
    .nbd-howto-steps,
    .nbd-howto-acc-grid { grid-template-columns: 1fr; }
    .nbd-howto-steps { gap: 28px; }
}

/* ==========================================================================
   nbd-video-showcase — 生活方式视频/封面展示（CentSnap 风格）
   ========================================================================== */
.nbd-video-showcase { padding: var(--nb-section-py) 0; }
.nbd-video-showcase .wrap { max-width: 1200px; }
.nbd-video-head {
    text-align: center;
    margin-bottom: 44px;
}
.nbd-video-align-left .nbd-video-head { text-align: left; }
.nbd-video-align-right .nbd-video-head { text-align: right; }
.nbd-video-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nbd-video-eyebrow, var(--cs-primary, #6b7280));
    margin-bottom: 12px;
}
.nbd-video-title {
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--nbd-video-title, var(--nb-title-color));
    margin: 0 0 12px;
}
.nbd-video-intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--nbd-video-intro, var(--nb-desc-color));
    max-width: 640px;
    margin: 0 auto;
}
.nbd-video-align-left .nbd-video-intro { margin-left: 0; }
.nbd-video-align-right .nbd-video-intro { margin-right: 0; }
.nbd-video-frame {
    position: relative;
    border-radius: var(--nbd-video-radius, var(--nb-radius));
    overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: var(--nbd-video-ratio, 16 / 9);
    box-shadow: var(--nb-card-shadow);
}
.nbd-video-frame img,
.nbd-video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nbd-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
    display: block;
}
.nbd-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: var(--nbd-video-play-bg, rgba(0,0,0,.45));
    color: var(--nbd-video-play, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: transform .25s ease, background .25s ease;
}
.nbd-video-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0,0,0,.6);
}
/* WATCH 视频区块：第三方嵌入封面 + 懒加载 + 无法访问兜底卡片 */
.nbd-video-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbd-video-poster--empty { background: linear-gradient(135deg, #1f2937, #374151); }
.nbd-video-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
    padding: 24px; background: var(--nb-card-bg, #ffffff); text-align: center; }
.nbd-video-fallback.is-shown { display: flex; }
.nbd-vf-card { max-width: 480px; margin: 0 auto; }
.nbd-vf-icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--cs-primary, #6b7280); }
.nbd-vf-text { font-size: 15px; line-height: 1.7; color: var(--nb-desc-color, #4b5563); margin: 0 0 18px; }
.nbd-vf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 24px; border-radius: 999px;
    background: var(--cs-primary, #1677ff); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600;
    transition: opacity .2s ease; }
.nbd-vf-btn:hover { opacity: .9; }
@media (max-width: 768px) {
    .nbd-video-showcase { padding: var(--nb-section-py-mb) 0; }
    .nbd-video-head { margin-bottom: 32px; }
    .nbd-video-play { width: 64px; height: 64px; }
    .nbd-vf-text { font-size: 14px; }
    .nbd-vf-btn { padding: 10px 20px; font-size: 13px; }
}

/* Hero 视频背景增强 */
.nbd-hero-bg-video {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nbd-hero-bg-video video,
.nbd-hero-split-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   小众品牌·顶部图标触发条 (nb_quick_bar)
   独立 class 前缀 nbd-qb-*，不污染其他模块
   ============================================================ */
.nbd-quickbar {
    --nbd-qb-bg: #ffffff;
    --nbd-qb-h: 44px;
    --nbd-qb-border: #ececec;
    --nbd-qb-color: #222222;
    --nbd-qb-icon: var(--cs-brand, #7C3AED);
    background: var(--nbd-qb-bg);
    color: var(--nbd-qb-color);
    border-bottom: 1px solid var(--nbd-qb-border);
    font-size: 13px;
    position: relative;
    z-index: 60;
}
.nbd-quickbar.is-sticky { position: sticky; top: 0; }
.nbd-quickbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: var(--nbd-qb-h);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
}
.nbd-quickbar-left   .nbd-qb-inner { justify-content: flex-start; }
.nbd-quickbar-center .nbd-qb-inner { justify-content: center; }
.nbd-quickbar-right  .nbd-qb-inner { justify-content: flex-end; }

.nbd-qb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s ease;
}
.nbd-qb-btn:hover { background: rgba(0, 0, 0, .05); }
.nbd-qb-ico { color: var(--nbd-qb-icon); display: inline-flex; }
.nbd-qb-txt { font-size: 13px; letter-spacing: .3px; }

/* 客服面板 */
.nbd-qb-chat[hidden] { display: none; }
.nbd-qb-chat {
    position: absolute;
    top: 100%;
    right: 16px;
    margin-top: 6px;
    width: 260px;
    background: #fff;
    border: 1px solid var(--nbd-qb-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 14px;
    z-index: 61;
}
.nbd-qb-chat-head { font-weight: 600; margin-bottom: 6px; }
.nbd-qb-chat-msg { font-size: 13px; color: #555; margin-bottom: 10px; }
.nbd-qb-chat-cta {
    display: inline-block;
    background: var(--nbd-qb-icon);
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 13px;
}

/* 调查弹窗 */
.nbd-qb-modal[hidden] { display: none; }
.nbd-qb-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nbd-qb-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.nbd-qb-modal-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    width: min(420px, 92vw);
    max-height: 86vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.nbd-qb-modal-x {
    position: absolute; top: 10px; right: 10px;
    background: transparent; border: none; cursor: pointer; color: #666;
}
.nbd-qb-modal-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.nbd-qb-q { display: block; margin-bottom: 12px; font-size: 13px; color: #333; }
.nbd-qb-q span { display: block; margin-bottom: 5px; }
.nbd-qb-q input {
    width: 100%; padding: 9px 10px;
    border: 1px solid #ddd; border-radius: 8px; font-size: 13px;
}
.nbd-qb-submit {
    width: 100%; background: var(--nbd-qb-icon); color: #fff;
    border: none; padding: 10px; border-radius: 99px; font-size: 14px; cursor: pointer;
}
.nbd-qb-thanks { margin-top: 10px; text-align: center; color: var(--nbd-qb-icon); font-weight: 600; }

/* ============================================================
   电脑端（>=769px）：图标触发条悬浮在右侧边
   移动端保持顶部通栏（默认样式）
   ============================================================ */
@media (min-width: 769px) {
    .nbd-quickbar {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 90;
        width: auto;
        min-width: 52px;
        border-bottom: none;
        border-radius: 12px 0 0 12px;
        box-shadow: -2px 4px 16px rgba(0, 0, 0, .10);
        background: var(--nbd-qb-bg);
    }
    .nbd-quickbar.is-sticky {
        position: fixed;
        top: 50%;
    }
    .nbd-quickbar-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        height: auto;
        padding: 8px 6px;
        gap: 4px;
    }
    .nbd-quickbar-left .nbd-qb-inner,
    .nbd-quickbar-center .nbd-qb-inner,
    .nbd-quickbar-right .nbd-qb-inner { justify-content: center; }
    .nbd-qb-btn {
        flex-direction: column;
        padding: 10px 6px;
        gap: 4px;
        border-radius: 10px;
        font-size: 12px;
    }
    .nbd-qb-txt { font-size: 11px; letter-spacing: 0; }
    .nbd-qb-chat {
        right: 100%;
        top: 0;
        margin-top: 0;
        margin-right: 10px;
        border-radius: 12px;
    }
}

/* ============================================================
   小众品牌·顶部购买引导条 (nb_top_buy) — CentSnap 风格
   独立 class 前缀 nbd-tb-*，不污染其他模块
   ============================================================ */
.nbd-topbar {
    --nbd-tb-bg: #1c1917;
    --nbd-tb-color: #ffffff;
    --nbd-tb-price-color: var(--nbd-tb-color);
    --nbd-tb-compare-color: rgba(255, 255, 255, 0.55);
    --nbd-tb-btn-bg: var(--cs-primary, #2563eb);
    --nbd-tb-btn-color: #ffffff;

    position: fixed;
    top: var(--nbd-tb-top, 0px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nbd-tb-bg);
    color: var(--nbd-tb-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 15px;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
}
.nbd-topbar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.nbd-topbar[hidden] { display: none; }

/* 预览态：static 占位示意 */
.nbd-topbar.is-preview {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 1px dashed rgba(255, 255, 255, 0.35);
}

/* 非吸顶态：随文档流占位，不做 fixed 悬浮 */
.nbd-topbar.is-static {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.nbd-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    box-sizing: border-box;
}

.nbd-topbar-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.nbd-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.nbd-topbar-compare {
    color: var(--nbd-tb-compare-color);
    font-size: 14px;
    text-decoration: line-through;
    white-space: nowrap;
}
.nbd-topbar-compare:empty { display: none; }

.nbd-topbar-price {
    color: var(--nbd-tb-price-color);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nbd-topbar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nbd-tb-btn-bg, var(--nbd-shared-btn-bg, var(--cs-primary, #2563eb)));
    color: var(--nbd-tb-btn-color, var(--nbd-shared-btn-color, #ffffff));
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 200ms ease, transform 200ms ease;
}
.nbd-topbar-cta:hover { opacity: 0.9; text-decoration: none; }
.nbd-topbar-cta:active { transform: scale(0.98); }

/* 浅色背景适配 */
.nbd-topbar.has-light-bg {
    --nbd-tb-compare-color: rgba(0, 0, 0, 0.45);
}

/* 详情页站点 header 全程不吸顶（PC/平板/移动三端统一），避免遮挡购买条/Tab 接力。
   ★ 类名以线上实际渲染为准：blocks/site_header.php 输出 <div class="cs-header-block cshd1">，
     吸顶是 inline style（position:sticky;top:0;z-index:50），故必须 !important 才能覆盖。
     （勿用 .cs-site-header / header[class*="sticky"] —— 线上不存在，规则会静默落空） */
body.nbd-page-niche-product .cs-header-block {
    position: relative !important;
    top: auto !important;
}

@media (max-width: 1024px) {
    .nbd-topbar-inner { padding: 8px 16px; min-height: 46px; }
    .nbd-topbar-title { font-size: 14px; max-width: 42vw; }
    .nbd-topbar-compare { font-size: 12px; }
    .nbd-topbar-price { font-size: 16px; }
    .nbd-topbar-cta { padding: 7px 14px; font-size: 13px; }

    /* Tab 导航：默认不 sticky，由 JS 吸顶接力控制（PC/平板/移动三端统一） */
    .nbd-nav.is-sticky { position: relative; top: auto; }
    .nbd-nav { padding: 0; position: relative; }
    .nbd-nav-inner {
        justify-content: flex-start;
        gap: 0;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .nbd-nav-item {
        scroll-snap-align: start;
        padding: 14px 16px;
        flex: 0 0 auto;
    }
    .nbd-nav-item:first-child { padding-left: 16px; }
    .nbd-nav-item:last-child  { padding-right: 16px; }

    /* 横向滑动边界渐变遮罩（原生滚动，JS 仅切显隐，无自定义回弹动画） */
    .nbd-nav::before,
    .nbd-nav::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        z-index: 2;
        transition: opacity 180ms ease;
    }
    .nbd-nav::before {
        left: 0;
        background: linear-gradient(to right, var(--nbd-nav-bg, #ffffff), rgba(255,255,255,0));
        opacity: 1;
    }
    .nbd-nav::after {
        right: 0;
        background: linear-gradient(to left, var(--nbd-nav-bg, #ffffff), rgba(255,255,255,0));
        opacity: 1;
    }
    .nbd-nav.is-scroll-start::before { opacity: 0; }
    .nbd-nav.is-scroll-end::after    { opacity: 0; }
}

/* ============================================================
   ★ 工单25（2026-09-15）：手机端 Hero「左文右图」改为「图在上、文在下」
   ────────────────────────────────────────────────────────────
   现状：.nbd-hero-split-inner 的 DOM 顺序固定为「文字块 → 媒体块」，
        桌面/平板靠两列网格并排成「左文右图」；
        宽度 ≤900px 变单列后，顺序仍是「文字在上、图片在下」。
   需求：仅手机端把产品图片提到最前，左栏文字落到图片下面。
   做法：只对 body.dv-mobile 生效，用 order 调换两个网格项的顺序。
        手机端无论桌面是「图右」（默认）还是「图左」（is-reverse），
        都统一为「图在上、文在下」。
   红线：电脑端（body.dv-desktop）/平板端（body.dv-tablet）命中不到本规则 ⇒ 零影响；
        不改 DOM 顺序、不改 PHP、不动任何其它区块样式。
   ============================================================ */
body.dv-mobile .nbd-hero-split .nbd-hero-split-media { order: -1; }
body.dv-mobile .nbd-hero-split .nbd-hero-split-text  { order: 0; }

/* ============================================================
   ★ 工单26-1（2026-09-15）：手机端「价格 + ADD TO CART」价格条紧凑化
   ────────────────────────────────────────────────────────────
   根因：详情页 Hero 实例面板设了 price_size=42 / btn_padding=38×17 /
        btn_font=18（响应式字段标量值三端生效，.cs-bk-<uid> 输出 --var），
        而价格条按钮字号被 .nbd-hero-price-bar .nbd-hero-btn-primary 硬编码 20px
        ⇒ 手机端（≈390px 视口）一行放不下：价格 42px + 按钮(20px/38×17)
        总宽超出容器，按钮横向溢出被裁切、视觉特别大。
   需求：仅手机端改小；电脑端/平板端不动（面板值继续生效）。
   做法：body.dv-mobile 直接声明属性（优先级 0,3,1/0,4,1，压过 var() 消费规则
        与 ≤560px @media 规则），手机端价格 22px、划线价 13px、按钮 14px/10×20。
   红线：body.dv-desktop / body.dv-tablet 命中不到 ⇒ 两端零影响；不改 DOM/PHP。
   ============================================================ */
body.dv-mobile .nbd-hero .nbd-hero-price-bar .nbd-hero-price         { font-size: 22px; }
body.dv-mobile .nbd-hero .nbd-hero-price-bar .nbd-hero-compare-price { font-size: 13px; }
body.dv-mobile .nbd-hero .nbd-hero-price-bar { padding: 4px 6px 4px 14px; gap: 10px; }
body.dv-mobile .nbd-hero .nbd-hero-price-bar .nbd-hero-btn-primary { font-size: 14px; padding: 10px 20px; }

/* ============================================================
   ★ 工单26-2（2026-09-15）：「小众品牌产品列表」上下留白对齐 Hero 首屏
   ────────────────────────────────────────────────────────────
   背景：工单23 已把 Hero 上下留白归零（.nbd-hero.blk{padding-top/bottom:0}），
        产品列表区块仍吃全局 section.blk{padding:60px 0}（style.css:239）
        ⇒ 详情页 Hero 与 Products 之间、列表与锚点导航之间各多出 60px。
   需求：产品列表上下留白改成和 Hero 一样（=0）。
   做法：双选择器限定「niche 详情页」才归零 ——
        ① body.nbd-page-niche-product（nichebrand.js 在详情页加的既有页面类，
           与 2973 行页头规则同机制）；
        ② .nb-page:has(.nbd-hero)（无 JS 兜底：页面里存在 Hero 才命中，画布可用）。
        小众品牌商店页（niche-store，无 Hero、body 无该类）走全局规则。
   工单28（2026-09-15）：全局 section.blk 已改 5px，用户裁决本覆盖一并统一 5px（0 → 5px）；
        块「高级设置 → 内边距」内联值优先级更高，仍可覆盖。
   ★ 工单101（2026-09-22）：全局 section.blk 已改为 30px 顶/0 底（工单100），用户要求本块
        （详情页「Related Products」）一并统一 ⇒ 本覆盖 5px/5px → 30px 顶 / 0 底。
        线上实测（1440×900，seaman 详情页）：改前本块 5px/5px，是全页唯一异类
        （其余 7 个区块均 30px/0）。左右本就是 0 ⇒ 写成简写 `30px 0 0` 与分别写
        padding-top/bottom 等效。
        本选择器特异性 (0,3,1)，高于 section.blk (0,1,1) 与 .blk (0,1,0)
        ⇒ 必须在此处改；在 brand.css 里加 `.blk` 规则**压不过它**。
   ============================================================ */
body.nbd-page-niche-product .nb-product-list.blk,
.nb-page:has(.nbd-hero) .nb-product-list.blk { padding: 30px 0 0; }

/* ============================================================
   ★ 工单28（2026-09-15）：产品列表卡片「按钮贴底对齐」
   ────────────────────────────────────────────────────────────
   背景：.nb-slider-track 是 flex 容器（默认 align-items:stretch ⇒ 全部卡片等高、
        以最高的那张为准），矮卡内容下方留出大片空白（实测 8 卡等高 527px，
        最矮卡内容仅 358px）。用户裁决：保持等高整齐，把 View Detail 按钮
        margin-top:auto 贴到卡底，空白转移到「描述与按钮之间」（电商列表惯例）。
   红线：仅作用 .nb-card（该类只有 niche_product_list 使用，已 grep 确认无外溢）；
        卡片边框依旧整齐；内容高度≥最高卡的按钮位置不变。
   ============================================================ */
.nb-card { display: flex; flex-direction: column; }
.nb-card .nb-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.nb-card .nb-card-body > .nb-btn { margin-top: auto; }


/* ============================================================
   工单27④（2026-09-15）产品列表卡片多图指示点
   - .nb-card-img 堆叠于 .nb-card-media（aspect-ratio 提供高度），.is-active 可见
   - .nb-card-dots 底部居中胶囊点条；点击切换由 nichebrand.js initCardImageDots 处理
   - 仅作用 .nb-card-*，不影响详情页画廊（.nb-detail-*）
   ============================================================ */
.nb-card-media .nb-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s ease, transform .4s ease;
}

.nb-card-media .nb-card-img.is-active {
    opacity: 1;
}

.nb-card-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    z-index: 2;
}

.nb-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}

.nb-card-dot:hover {
    background: #94a3b8;
}

.nb-card-dot.is-active {
    width: 14px;
    background: var(--cs-brand, var(--cs-primary, #111827));
}

/* ============================================================
   工单29④（2026-09-15）产品列表卡颜色：面板字段真实生效 + 画布/前台一致
   背景：style.css 的 section.blk h3/p、a:not(.btn)（特异性 0,1,1/0,2,1）
        压过本文件单类选择器（0,1,0）⇒ 标题/描述颜色字段填了也不生效；
        storefront 动态 li{color:主题文本色} 让参数行标签两端不一致；
        .nb-btn 背景引用画布才有的 --cs-primary ⇒ 两端不一致。
   做法：.nb-page 前缀把特异性提到 (0,3,0/0,3,1) 稳压 style.css；
        空值回退链 = 改前继承结果（前台逐字节零变化）；填值后字段真实生效。
   ============================================================ */
.nb-page .nb-product-list .nb-card-title,
.nb-page .nb-product-list .nb-card-title a {
    color: var(--nb-list-title-color, var(--b-title-color, inherit));
}

.nb-page .nb-product-list .nb-card-desc {
    color: var(--nb-list-desc-color, var(--b-body-color, inherit));
}

/* 参数行：li 此前被 storefront 动态 li{color} 劫持成主题文本色（仅前台），
   画布却是 #6b7280。统一回面板声明的设计值 #6b7280（画布零变化，
   前台标签从主题文本色回到设计灰 —— 与面板「参数颜色 #6b7280」一致）。 */
.nb-page .nb-product-list .nb-card-params,
.nb-page .nb-product-list .nb-card-params li {
    color: var(--nb-list-param-color, var(--nb-param-color));
}

/* ★ 工单91①（2026-09-21）：列表卡「简短描述」行。
   面板「展示项 → 显示简短描述」（控件 id 仍为 show_params）取值 = 后台
   「基础信息 → 简短描述」（params_json.short_desc），渲染成一行摘要文字，
   替代此前恒空的 <ul class="nb-card-params">（原按 [{label,value}] 遍历 params_json
   整包 map，永远取不到 label/value ⇒ 前台什么都看不到）。
   样式与「参数行」同源同色（--nb-list-param-color），最多两行、超出省略；
   不设置该开关 / 后台没填简短描述 ⇒ 不输出任何字节。 */
.nb-card-params-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--nb-list-param-color, var(--nb-param-color));
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nb-page .nb-product-list .nb-card-params-note {
    color: var(--nb-list-param-color, var(--nb-param-color));
}

/* 按钮颜色字段（--nb-list-btn-*）此前无消费者（死字段），补上作用域映射；
   空值 = #111827/#ffffff，与前台既有渲染逐值一致。
   ★ 工单31②（2026-09-15）再加固：style.css 的 section.blk a:not(.btn)（特异性 0,2,2）
   会压过裸 .nb-btn（0,1,0）——前台靠 .nb-page 前缀（0,3,1）获胜，但画布容器此前无
   nb-page 类 ⇒ 画布被压成链接色（「View Detail 两端颜色不一致」两轮未愈的真因）。
   现画布内容区已补挂 nb-page（admin/canvas.php），此处再补一条不依赖容器的
   (0,3,0) 选择器双保险，两端各自命中、同值渲染。同时接入按钮字号变量（同步三端）。 */
.nb-page .nb-product-list .nb-btn,
.nb-product-list .nb-card .nb-btn {
    background: var(--nb-list-btn-bg, #111827);
    color: var(--nb-list-btn-color, #ffffff);
    font-size: var(--nb-list-btn-fz, 14px);
}

/* ============================================================
   工单29①（2026-09-15）Hero 社交证明行：价格条正下方，虚线分隔线隔开。
   数字由 nichebrand.js initSocialProof 填充（纯前端假数据：随机基数
   20~99 + 每 3 秒抖动，刷新重随机，非真实并发）。颜色随 Hero 文字色
   （浅色/深色叠加层都成立），分隔线用 currentColor + 降透明。
   ============================================================ */
.nbd-hero .nbd-hero-sp {
    position: relative;
    margin-top: 18px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.4;
    opacity: .92;
}

.nbd-hero .nbd-hero-sp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px dashed currentColor;
    opacity: .35;
}

.nbd-hero .nbd-hero-sp-ico {
    flex-shrink: 0;
    /* 工单32④（2026-09-15）：眼睛图标「一闪一闪」呼吸特效（透明度脉动，2s 循环） */
    animation: nbd-sp-eye-breathe 2s ease-in-out infinite;
}

@keyframes nbd-sp-eye-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .2; }
}

/* 无动画偏好：关闭呼吸特效 */
@media (prefers-reduced-motion: reduce) {
    .nbd-hero .nbd-hero-sp-ico { animation: none; opacity: .75; }
}

.nbd-hero .nbd-hero-sp-num {
    font-weight: 700;
    font-size: 15px;
}

/* ============================================================
   工单31③④（2026-09-15）Hero 标题下信任行（五星评价 + SKU 编码）
   与 价格条上方产品颜色选择。
   - .nbd-hero-trust：五星金色 + 5.0(评价数) + SKU 虚线胶囊；随 Hero 文字色。
   - .nbd-hero-colors：复用购买锚点 .nbd-swatch 视觉（图片色块/色值圆点/
     is-on 主色描边/is-oos 斜杠），但作用域收敛在 .nbd-hero 内 —— 购买锚点的
     同名样式作用域是 .nbd-anchor，互不影响。选色联动 JS 在 nichebrand.js initHeroColors。
   ============================================================ */
.nbd-hero .nbd-hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1;
    opacity: .95;
}

.nbd-hero .nbd-hero-stars {
    color: #f59e0b;
    /* 工单32b（2026-09-15）：五星字号与评价文字同步放大到 20px */
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px;
}

.nbd-hero .nbd-hero-rating-txt {
    /* 工单32③（2026-09-15）：评价文字放大到 20px；行高锁 1 保证与五星/SKU 胶囊垂直居中 */
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    opacity: .9;
}

.nbd-hero .nbd-hero-sku {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px dashed currentColor;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .04em;
    opacity: .85;
}

.nbd-hero .nbd-hero-colors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 14px 0 2px;
}

.nbd-hero .nbd-hero-colors-label {
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
}

.nbd-hero .nbd-hero-colors-list {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nbd-hero .nbd-swatch {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .08);
    background-color: #f1f5f9;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nbd-hero .nbd-swatch:hover { border-color: #cbd5e1; }

.nbd-hero .nbd-swatch.is-on {
    border-color: var(--cs-brand, #E60012);
    box-shadow: 0 0 0 2px #fadbd9;
}

.nbd-hero .nbd-swatch.is-oos::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 2px;
    background: rgba(0, 0, 0, .45);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.nbd-hero .nbd-hero-colors-sel {
    font-size: 12px;
    opacity: .75;
}

@media (max-width: 768px) {
    .nbd-hero .nbd-swatch { width: 30px; height: 30px; }
}