/* ============================================
   产品列表页内容区重构样式
   对应模板：template/pc/lists_product.htm
   说明：仅作用于 header/footer 之间的内容区域
   ============================================ */

body.custom-override {
    display: block;
    min-height: auto;
    overflow-x: clip;
    background: var(--dm-bg);
}

.md-product-list {
    --pl-bg: var(--dm-bg);
    --pl-bg-soft: var(--dm-bg-secondary);
    --pl-surface: var(--dm-bg-elevated);
    --pl-text: var(--dm-text);
    --pl-text-secondary: var(--dm-text-secondary);
    --pl-text-tertiary: var(--dm-text-tertiary);
    --pl-border: var(--dm-border);
    --pl-accent: var(--dm-accent);
    --pl-accent-hover: var(--dm-accent-hover);
    --pl-accent-soft: var(--dm-accent-soft);
    --pl-accent-glow: var(--dm-accent-glow);
    --pl-glass: var(--dm-glass);
    --pl-shadow-sm: var(--dm-shadow-sm);
    --pl-shadow-md: var(--dm-shadow-md);
    --pl-shadow-lg: var(--dm-shadow-lg);
    --pl-shell-width: min(var(--hs-rail-content), calc(100vw - 48px));
    --pl-box-shell-width: min(var(--hs-rail-content), calc(100vw - 64px));
    --pl-on-accent: var(--dm-on-accent);
    --pl-hero-title-size: var(--hs-fs-display);
    --pl-hero-title-second-line-pad: var(--hs-space-2);
    --pl-hero-subtitle-size: var(--hs-fs-body);
    --pl-eyebrow-size: var(--hs-fs-meta);
    --pl-story-eyebrow-size: 32px;
    --pl-cta-hover-bg: var(--dm-accent-hover);
    --pl-cta-padding-y: 0px;
    --pl-cta-title-size: var(--hs-fs-title-l);
    --pl-cta-sub-size: var(--hs-fs-body);
    --pl-cta-action-gap: var(--hs-space-4);
    --pl-cta-primary-height: 48px;
    --pl-cta-secondary-height: 48px;
    --pl-cta-primary-pad-x: var(--hs-space-6);
    --pl-cta-secondary-pad-x: var(--hs-space-5);
    --pl-cta-primary-size: var(--hs-fs-button);
    --pl-cta-secondary-size: var(--hs-fs-button);
    --pl-section-padding-y: var(--hs-space-8);
    --pl-box-padding-y: var(--pl-section-padding-y);
    --pl-story-padding-y: 0px;
    --pl-features-padding-y: var(--pl-section-padding-y);
    --pl-specs-padding-top: var(--pl-section-padding-y);
    --pl-specs-padding-bottom: var(--pl-section-padding-y);
    --pl-story-bg: var(--pl-bg);
    --pl-story-hero-bg: var(--pl-bg-soft);
    --pl-story-hero-shadow: var(--pl-shadow-sm);
    --pl-story-hero-hover-shadow: var(--pl-shadow-md);
    --pl-story-image-filter: none;
    --pl-story-image-hover-filter: saturate(1.08) contrast(1.02);
    --pl-story-hero-radius: var(--hs-radius-md);
    --pl-story-hero-badge-bg: var(--dm-bg-elevated);
    --pl-story-hero-badge-color: var(--dm-text);
    --pl-story-point-bg: var(--pl-bg-soft);
    --pl-story-point-border: var(--pl-border);
    --pl-story-point-icon-color: var(--pl-accent);
    --pl-ease-out: var(--hs-ease-out);
    --pl-ease-smooth: var(--hs-ease-out);
    position: relative;
    /* 页面外层使用主画布；次级色只留给内部模块/面板，和视频专栏保持同一层级。 */
    background: var(--pl-bg);
    color: var(--pl-text);
    font-family: var(--hs-font-sans);
    font-size: var(--hs-fs-body);
    line-height: 1.7;
    overflow: clip;
}

/* 该页样式文件在 header 全局 CSS 之前加载，需提高特异性压过 app.core 的 main 顶距 */
body.custom-override main.md-product-list {
    padding-top: 0;
    /* dark-mode-core.css 的通用 main 规则使用次级表面；商品页外层要与视频页主画布对齐。 */
    background: var(--dm-bg);
}

.md-product-list *,
.md-product-list *::before,
.md-product-list *::after {
    box-sizing: border-box;
}

.md-product-list img {
    display: block;
    max-width: 100%;
}

.md-product-list a {
    color: inherit;
    text-decoration: none;
}

.md-product-list button {
    font: inherit;
}

.md-product-list section[id] {
    scroll-margin-top: 120px;
}

.pl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pl-shell {
    width: var(--pl-shell-width);
    margin: 0 auto;
}

.pl-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--pl-eyebrow-size);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pl-accent);
    text-transform: uppercase;
}

.pl-story-content .pl-eyebrow {
    font-size: var(--pl-story-eyebrow-size);
}

.pl-section-head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.pl-section-title {
    margin: 10px 0 0;
    font-size: var(--hs-fs-title-l);
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--pl-text);
    text-wrap: balance;
}

.pl-section-sub {
    max-width: 620px;
    margin: 16px auto 0;
    font-size: var(--hs-fs-body);
    color: var(--pl-text-secondary);
    text-wrap: pretty;
}

.pl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 var(--hs-space-5);
    border-radius: var(--hs-radius-sm);
    font-size: var(--hs-fs-button);
    font-weight: 600;
    transition: transform var(--hs-motion-fast) var(--pl-ease-out), background-color var(--hs-motion-fast) var(--pl-ease-out), color var(--hs-motion-fast) var(--pl-ease-out), box-shadow var(--hs-motion-fast) var(--pl-ease-out), border-color var(--hs-motion-fast) var(--pl-ease-out);
}

.pl-btn:hover {
    transform: translateY(-1px);
}

.pl-btn:focus-visible,
.pl-box-tab:focus-visible,
.pl-box-side-item:focus-visible,
.pl-box-cell:focus-visible,
.pl-btn-magnetic:focus-visible {
    outline: 2px solid var(--pl-accent);
    outline-offset: 3px;
}

.md-product-list .pl-btn-primary {
    background: var(--pl-accent);
    color: var(--pl-on-accent);
    box-shadow: 0 12px 28px var(--pl-accent-glow);
}

.md-product-list .pl-btn-primary:hover {
    background: var(--pl-accent-hover);
}

.pl-btn-ghost {
    background: transparent;
    color: var(--pl-text);
}

.pl-btn-ghost:hover {
    background: var(--pl-accent-soft);
}

.pl-reveal,
.pl-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: opacity var(--hs-motion-normal) var(--pl-ease-out), transform var(--hs-motion-normal) var(--pl-ease-out);
}

/* Hero */
.pl-hero {
    position: relative;
    padding: 30px 24px 20px;
    text-align: center;
    overflow: hidden;
}

.pl-hero-bg {
    position: absolute;
    inset: 0;
    background: var(--pl-bg-soft);
    z-index: 0;
}

.pl-hero-bg::before {
    content: none;
}

.pl-hero > * {
    position: relative;
    z-index: 1;
}

.pl-hero-eyebrow {
    margin-bottom: 20px;
}

.pl-hero-title {
    margin: 0;
    font-size: var(--pl-hero-title-size);
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--pl-text);
    text-wrap: balance;
}

.pl-hero-title span {
    display: block;
}

.pl-hero-title .pl-word:nth-child(2) {
    padding-top: var(--pl-hero-title-second-line-pad);
}

.pl-hero-subtitle {
    max-width: min(var(--hs-rail-prose), calc(100vw - 48px));
    margin: 20px auto 0;
    font-size: var(--pl-hero-subtitle-size);
    line-height: 1.5;
    color: var(--pl-text-secondary);
    white-space: normal;
    text-wrap: pretty;
}

.pl-motion-ready .pl-hero-eyebrow {
    animation: pl-fade-up var(--hs-motion-normal) var(--pl-ease-out) both;
}

.pl-motion-ready .pl-hero-subtitle {
    animation: pl-fade-up var(--hs-motion-normal) var(--pl-ease-out) var(--hs-motion-instant) both;
}

.pl-motion-ready .pl-word {
    opacity: 0;
    transform: translateY(16px);
    animation: pl-word-rise var(--hs-motion-normal) var(--pl-ease-out) both;
}

.pl-motion-ready .pl-word:nth-child(1) { animation-delay: 0.08s; }
.pl-motion-ready .pl-word:nth-child(2) { animation-delay: 0.18s; }

/* CTA */
.pl-cta {
    position: relative;
    padding: var(--pl-cta-padding-y) 0;
    text-align: center;
    overflow: hidden;
}

.pl-cta-title {
    max-width: min(1040px, calc(100vw - 48px));
    margin: 0 auto;
    font-size: var(--pl-cta-title-size);
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--pl-text);
    white-space: normal;
    text-wrap: balance;
}

.pl-cta-title span {
    color: var(--pl-accent);
}

.pl-cta-sub {
    max-width: min(920px, calc(100vw - 48px));
    margin: 18px auto 0;
    font-size: var(--pl-cta-sub-size);
    line-height: 1.5;
    color: var(--pl-text-secondary);
    white-space: normal;
    text-wrap: pretty;
}

.pl-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100vw - 24px);
    gap: var(--pl-cta-action-gap);
    flex-wrap: nowrap;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
}

.pl-cta-actions .pl-btn {
    min-height: var(--pl-cta-secondary-height);
    padding: 0 var(--pl-cta-secondary-pad-x);
    font-size: var(--pl-cta-secondary-size);
    white-space: nowrap;
}

.pl-cta-actions .pl-btn i {
    flex: 0 0 auto;
    font-size: 0.95em;
}

.pl-cta-actions .pl-magnetic-wrap {
    flex: 0 1 auto;
    min-width: 0;
}

.pl-magnetic-wrap {
    display: inline-block;
    will-change: transform;
    transition: transform var(--hs-motion-fast) var(--pl-ease-out);
}

.md-product-list .pl-btn-magnetic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pl-cta-primary-height);
    padding: 0 var(--pl-cta-primary-pad-x);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-accent);
    color: var(--pl-on-accent);
    font-size: var(--pl-cta-primary-size);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
    overflow: hidden;
    transition: transform var(--hs-motion-fast) var(--pl-ease-out), box-shadow var(--hs-motion-fast) var(--pl-ease-out), background-color var(--hs-motion-fast) var(--pl-ease-out);
}

.pl-btn-magnetic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pl-cta-hover-bg);
    opacity: 0;
    transition: opacity var(--hs-motion-fast) var(--pl-ease-out);
}

.md-product-list .pl-btn-magnetic span {
    position: relative;
    z-index: 1;
}

.md-product-list .pl-btn-magnetic:hover {
    box-shadow: none;
}

.md-product-list .pl-btn-magnetic:hover::before {
    opacity: 1;
}

/* Box module 裸类规则已废弃：被下方 .md-product-list .pl-box-* 前缀块（更高特异性）覆盖。
   仅保留 .pl-box-datasets（隐藏数据源）。珊瑚红重构 2026-07。 */

.pl-box-datasets {
    display: none;
}

/* Story */
.pl-story {
    padding: var(--pl-story-padding-y) 0;
    background: var(--pl-story-bg);
}

.pl-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.96fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

/* 淘宝风单张大主图：替代原 6 格 tilt 画廊，无 mask/光斑/视差，干净直接（2026-07） */
.pl-story-hero {
    position: relative;
    border-radius: var(--pl-story-hero-radius);
    overflow: hidden;
    box-shadow: var(--pl-story-hero-shadow);
    background: var(--pl-story-hero-bg);
    aspect-ratio: 4 / 3;
}

@supports not (aspect-ratio: 4 / 3) {
    .pl-story-hero::before {
        content: "";
        display: block;
        padding-top: 75%;
    }
}

.pl-story-hero-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* 轮播图：两帧绝对堆叠，opacity 过渡淡入淡出（容器 aspect-ratio 已定高，无需 active 撑高）*/
.md-product-list .pl-story-hero-img .ey-carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--pl-story-image-filter);
    opacity: 0;
    transition: opacity 0.9s var(--pl-ease-out), transform 0.6s var(--pl-ease-out), filter 0.4s var(--pl-ease-out);
}

.md-product-list .pl-story-hero-img .ey-carousel-img.active {
    opacity: 1;
}

.pl-story-hero:hover .pl-story-hero-img .ey-carousel-img.active {
    transform: scale(1.04);
    filter: var(--pl-story-image-hover-filter);
}

.pl-story-hero-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pl-story-hero-badge-bg);
    color: var(--pl-story-hero-badge-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pl-story-content {
    max-width: 520px;
    text-align: left;
}

.pl-story-content .pl-eyebrow {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.pl-story-content .pl-section-title {
    max-width: 15em;
    text-wrap: balance;
}

.pl-story-desc {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--pl-text-secondary);
    text-wrap: pretty;
}

.pl-story-desc .accent {
    color: var(--pl-accent);
    font-weight: 600;
}

.pl-story-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid var(--pl-border);
    border-bottom: 1px solid var(--pl-border);
    text-align: center;
}

.pl-story-stat {
    min-width: 0;
    padding-left: 24px;
    padding-right: 24px;
}

.pl-story-stat + .pl-story-stat {
    padding-left: 24px;
    padding-right: 24px;
    border-left: 1px solid var(--pl-border);
}

.pl-story-stat-value {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    font-weight: 700;
    color: var(--pl-accent);
}

.pl-story-stat-value .unit {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 600;
}

.pl-story-stat-label {
    margin-top: 8px;
    font-size: 13px;
    color: var(--pl-text-secondary);
}

.pl-story-proof {
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--pl-story-point-border);
    border-radius: var(--hs-radius-md);
    background: color-mix(in srgb, var(--pl-story-point-bg) 72%, transparent);
}

.pl-story-proof-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pl-story-point-border);
}

.pl-story-proof-title {
    color: var(--pl-text);
    font-size: 13px;
    font-weight: 700;
}

.pl-story-proof-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pl-text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.pl-story-proof-meta i {
    color: var(--pl-story-point-icon-color);
}

/* 三项履约信息共享一个证据面板，不伪装成三张可点击卡片。 */
.pl-story-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-story-point {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
    color: var(--pl-text-secondary);
}

.pl-story-point + .pl-story-point {
    border-left: 1px solid var(--pl-story-point-border);
}

.pl-story-point-icon {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--pl-story-point-icon-color);
}

.pl-story-point-text b {
    display: block;
    margin: 0 0 2px;
    color: var(--pl-text);
    font-weight: 600;
}

/* Features —— 产地到交付的信任路径，区分鲜活证据与服务承诺（2026-07） */
.pl-features {
    --pl-eyebrow-size: 22px;
    --pl-feature-accent-text: color-mix(in srgb, var(--pl-accent) 60%, var(--pl-text));
    --pl-feature-muted-text: color-mix(in srgb, var(--pl-text) 28%, var(--pl-text-secondary));
    padding: var(--pl-features-padding-y) 0;
    background: var(--pl-features-bg);
}

.pl-features .pl-eyebrow {
    font-size: var(--pl-eyebrow-size);
    color: var(--pl-feature-accent-text);
}

.pl-feature-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(340px, 1fr);
    align-items: stretch;
    gap: 20px;
}

.pl-feature-journey,
.pl-feature-assurance {
    min-width: 0;
    padding: clamp(28px, 3vw, 40px);
    border: 1px solid var(--pl-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-surface);
}

.pl-feature-journey {
    --pl-ledger-line: color-mix(in srgb, var(--pl-accent) 16%, var(--pl-border));
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 2px solid color-mix(in srgb, var(--pl-accent) 68%, var(--pl-border));
    background: var(--pl-feature-journey-bg);
}

.pl-feature-assurance {
    display: flex;
    flex-direction: column;
    background: var(--pl-feature-assurance-bg);
}

.pl-feature-group-head {
    max-width: 560px;
}

.pl-feature-journey .pl-feature-group-head {
    display: flex;
    max-width: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.pl-feature-group-kicker {
    width: max-content;
    margin: 0 0 10px;
    color: var(--pl-feature-accent-text);
    font-size: var(--hs-fs-title-s);
    line-height: 1.4;
    font-weight: 700;
}

.pl-feature-group-title {
    margin: 0;
    color: var(--pl-text);
    font-size: var(--hs-fs-title-m);
    line-height: 1.25;
    font-weight: 700;
    text-wrap: balance;
}

.pl-feature-ledger-summary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    margin: 2px 0 0;
    padding: 0;
    color: var(--pl-text-secondary);
    font-size: var(--hs-fs-body-s);
    line-height: 1.4;
    list-style: none;
}

.pl-feature-ledger-summary li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid var(--pl-ledger-line);
    white-space: nowrap;
}

.pl-feature-ledger-summary li:first-child {
    padding-left: 0;
}

.pl-feature-ledger-summary li:last-child {
    padding-right: 0;
    border-right: 0;
}

.pl-feature-ledger-summary i {
    color: var(--pl-feature-accent-text);
    font-size: 11px;
}

.pl-feature-steps {
    display: block;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--pl-ledger-line);
    list-style: none;
}

.pl-feature-steps::before {
    content: none;
}

.pl-feature-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    align-items: center;
    min-width: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--pl-ledger-line);
}

.pl-feature-step-marker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: var(--pl-text-secondary);
    font-size: var(--hs-fs-body-s);
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pl-feature-step-marker b {
    color: var(--pl-feature-accent-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.pl-feature-step-body {
    display: grid;
    grid-template-columns: minmax(136px, 0.7fr) minmax(220px, 1.3fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    min-width: 0;
}

.pl-feature-step-claim {
    min-width: 0;
}

.pl-feature-journey .pl-feature-value {
    margin: 0 0 5px;
    color: var(--pl-text);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.15;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pl-feature-journey .pl-feature-title {
    margin-bottom: 0;
    color: var(--pl-feature-accent-text);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.pl-feature-value-unit {
    margin-left: 4px;
    color: var(--pl-feature-muted-text);
    font-size: 0.42em;
    font-weight: 600;
}

.pl-feature-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pl-accent-soft);
    color: var(--pl-accent);
    font-size: 16px;
}

.pl-feature-title {
    margin: 0 0 6px;
    color: var(--pl-text);
    font-size: var(--hs-fs-title-s);
    line-height: 1.35;
    font-weight: 700;
}

.pl-feature-desc {
    margin: 0;
    font-size: var(--hs-fs-body-s);
    line-height: 1.65;
    color: var(--pl-feature-muted-text);
    text-wrap: pretty;
}

.pl-feature-step .pl-feature-desc {
    max-width: 34ch;
}

.pl-feature-ledger-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--pl-text-secondary);
    font-size: var(--hs-fs-body-s);
    line-height: 1.5;
}

.pl-feature-ledger-note i {
    flex: 0 0 auto;
    color: var(--pl-feature-accent-text);
}

.pl-feature-assurance-list {
    display: grid;
    flex: 1 1 auto;
    align-content: end;
    gap: 0;
    margin: 24px 0 0;
    padding: 0;
    border-top: 1px solid var(--pl-border);
    list-style: none;
}

.pl-feature-assurance-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--pl-border);
}

/* Specs */
.pl-specs {
    --pl-spec-accent-text: color-mix(in srgb, var(--pl-accent) 68%, var(--pl-text));
    padding: var(--pl-specs-padding-top) 0 var(--pl-specs-padding-bottom);
    background: var(--pl-bg);
}

.pl-specs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
}

.pl-specs-intro {
    width: min(100%, 760px);
    margin: 0 auto;
    text-align: center;
}

.pl-specs-title {
    margin: 0;
    color: var(--pl-text);
    font-size: var(--hs-fs-title-l);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
}

.pl-specs-title span {
    color: var(--pl-spec-accent-text);
}

.pl-specs-copy {
    max-width: 36em;
    margin: 16px auto 0;
    color: color-mix(in srgb, var(--pl-text) 72%, var(--pl-bg));
    font-size: var(--hs-fs-body);
    line-height: 1.75;
    text-wrap: pretty;
}

.pl-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pl-border);
    border-bottom: 1px solid var(--pl-border);
}

.pl-spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    min-height: 206px;
    padding: 28px clamp(16px, 1.7vw, 24px);
    text-align: center;
}

.pl-spec-item + .pl-spec-item {
    border-left: 1px solid var(--pl-border);
}

.pl-spec-icon {
    display: none;
}

.pl-spec-value {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    color: var(--pl-text);
    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pl-spec-unit {
    position: static;
    flex: 0 0 auto;
    margin-left: 4px;
    color: var(--pl-spec-accent-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

.pl-spec-label {
    margin: 0;
    color: color-mix(in srgb, var(--pl-text) 78%, var(--pl-bg));
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.pl-spec-note {
    margin: 0;
    color: color-mix(in srgb, var(--pl-text) 70%, var(--pl-bg));
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* 动画 */
@keyframes pl-fade-up {
    from {
        opacity: 0.001;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pl-word-rise {
    from {
        opacity: 0.001;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 响应式 */

@media (max-width: 1023px) {
    .md-product-list {
        --pl-hero-title-size: 76px;
        --pl-hero-title-second-line-pad: 10px;
        --pl-hero-subtitle-size: 16px;
        --pl-eyebrow-size: 16px;
        --pl-story-eyebrow-size: 15px;
        --pl-cta-title-size: 54px;
        --pl-cta-sub-size: 15px;
        --pl-cta-action-gap: 14px;
        --pl-cta-primary-height: 54px;
        --pl-cta-secondary-height: 50px;
        --pl-cta-primary-pad-x: 34px;
        --pl-cta-secondary-pad-x: 24px;
        --pl-cta-primary-size: 16px;
        --pl-cta-secondary-size: 15px;
    }

    .pl-shell {
        width: min(100%, calc(100vw - 32px));
    }

    .pl-features {
        --pl-eyebrow-size: 16px;
    }

    .pl-hero-subtitle {
        max-width: calc(100vw - 48px);
    }

    .pl-story-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pl-story-content {
        max-width: none;
    }

    .pl-feature-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-feature-assurance-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: stretch;
    }

    .pl-feature-assurance-item {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 18px;
        border-right: 1px solid var(--pl-border);
    }

    .pl-feature-assurance-item:first-child {
        padding-left: 0;
    }

    .pl-feature-assurance-item:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .pl-specs-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .pl-specs-intro {
        max-width: 680px;
    }
}

/* 品牌故事图库资源与导航端型一致；短横屏触控手机保持手机图比例。 */
@media (max-width: 833px), (max-height: 599px) and (orientation: landscape) and (pointer: coarse) {
    .pl-story-hero {
        aspect-ratio: 16 / 10;
    }
}

@supports not (aspect-ratio: 4 / 3) {
    @media (max-width: 833px), (max-height: 599px) and (orientation: landscape) and (pointer: coarse) {
        .pl-story-hero::before {
            padding-top: 62.5%;
        }
    }
}

/* 右侧固定浮栏在 768–1400px 内会进入内容宽度，预留独立通道避免遮挡末列文字。 */
@media (min-width: 768px) and (max-width: 1400px) {
    .pl-story-grid,
    .pl-feature-layout {
        padding-right: 72px;
    }
}

/* 竖屏平板保留固定工具通道，并拉开品牌主图与正文的层级。 */
@media (min-width: 768px) and (max-width: 833px) and (orientation: portrait) {
    .pl-story-grid,
    .pl-feature-layout {
        padding-inline: 72px;
    }

    .pl-story-content {
        margin-top: 20px;
    }

    .md-product-list .pl-story-desc,
    .md-product-list .pl-story-proof-head,
    .md-product-list .pl-story-proof-title,
    .md-product-list .pl-story-proof-meta {
        font-size: 18px;
    }

    .md-product-list .pl-story-point {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    /* 竖屏平板把图标与两行履约文案作为一组居中，保留紧凑端横向信息密度。 */
    .md-product-list .pl-story-point-text {
        min-width: 0;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .md-product-list {
        --pl-shell-width: min(100%, calc(100vw - 24px));
        --pl-hero-title-size: 52px;
        --pl-hero-title-second-line-pad: 6px;
        --pl-hero-subtitle-size: 12px;
        --pl-eyebrow-size: 12px;
        --pl-story-eyebrow-size: 12px;
        --pl-cta-title-size: 30px;
        --pl-cta-sub-size: 11px;
        --pl-cta-action-gap: 10px;
        --pl-cta-primary-height: 46px;
        --pl-cta-secondary-height: 44px;
        --pl-cta-primary-pad-x: 22px;
        --pl-cta-secondary-pad-x: 14px;
        --pl-cta-primary-size: 14px;
        --pl-cta-secondary-size: 14px;
    }

    .pl-hero {
        padding-top: 30px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .pl-features {
        --pl-eyebrow-size: 12px;
    }

    .pl-hero-title {
        font-size: var(--pl-hero-title-size);
    }

    .pl-hero-subtitle {
        max-width: calc(100vw - 24px);
        font-size: var(--pl-hero-subtitle-size);
    }

    .pl-cta-sub {
        max-width: calc(100vw - 24px);
        font-size: var(--pl-cta-sub-size);
    }

    .pl-cta-title {
        max-width: calc(100vw - 24px);
    }

    .pl-cta-actions {
        width: max-content;
        max-width: calc(100vw - 24px);
        gap: var(--pl-cta-action-gap);
    }

    .pl-btn,
    .pl-btn-magnetic {
        width: 100%;
    }

    .pl-cta-actions .pl-btn,
    .pl-cta-actions .pl-btn-magnetic {
        width: auto;
        min-width: 0;
    }
    .pl-story-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pl-story-hero {
        aspect-ratio: 16 / 10;
    }

    .pl-story-content {
        max-width: none;
    }

    .pl-story-point {
        font-size: 12px;
    }

    .pl-story-point-icon {
        font-size: 14px;
    }

    .pl-story-stats {
        gap: 10px;
    }

    .pl-feature-layout {
        gap: 12px;
    }

    .pl-feature-journey,
    .pl-feature-assurance {
        padding: 24px 58px 24px 20px;
        border-radius: 16px;
    }

    .pl-feature-journey .pl-feature-group-title {
        font-size: 22px;
    }

    .pl-feature-journey .pl-feature-group-head {
        flex-direction: column;
        gap: 16px;
    }

    .pl-feature-ledger-summary {
        width: 100%;
        flex-wrap: wrap;
    }

    .pl-feature-steps {
        margin-top: 22px;
    }

    .pl-feature-steps::before {
        content: none;
    }

    .pl-feature-step {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 18px 0;
    }

    .pl-feature-step-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pl-feature-step-marker {
        width: auto;
        height: auto;
        box-shadow: none;
    }

    .pl-feature-step .pl-feature-desc {
        max-width: none;
    }

    .pl-feature-assurance-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-feature-assurance-item,
    .pl-feature-assurance-item:first-child,
    .pl-feature-assurance-item:last-child {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px 0;
        border-right: 0;
    }

    .pl-spec-item {
        min-height: 190px;
        padding: 24px clamp(16px, 5vw, 28px);
    }

    .pl-specs-title {
        max-width: 12em;
        margin-inline: auto;
        font-size: clamp(32px, 9vw, 42px);
    }

    .pl-specs-copy {
        margin-top: 16px;
        font-size: 15px;
    }

    .pl-spec-value {
        margin-top: 0;
        font-size: clamp(42px, 13vw, 56px);
    }

}

@media (max-width: 480px) {
    .md-product-list {
        --pl-hero-title-size: 46px;
        --pl-hero-title-second-line-pad: 4px;
        --pl-hero-subtitle-size: 10px;
        --pl-eyebrow-size: 11px;
        --pl-story-eyebrow-size: 11px;
        --pl-cta-title-size: 28px;
        --pl-cta-sub-size: 9px;
        --pl-cta-action-gap: 8px;
        --pl-cta-primary-height: 44px;
        --pl-cta-secondary-height: 44px;
        --pl-cta-primary-pad-x: 18px;
        --pl-cta-secondary-pad-x: 12px;
        --pl-cta-primary-size: 13px;
        --pl-cta-secondary-size: 13px;
    }

    .pl-hero-subtitle {
        margin-top: 14px;
    }

    .pl-features {
        --pl-eyebrow-size: 11px;
    }
}

/* 360px 以下超窄手机收紧参数卡横排与型号控件，避免单行轨道互挤。 */
@media (max-width: 360px) {
    .md-product-list {
        --pl-hero-title-size: 42px;
        --pl-hero-title-second-line-pad: 4px;
        --pl-hero-subtitle-size: 9px;
        --pl-eyebrow-size: 11px;
        --pl-story-eyebrow-size: 11px;
        --pl-cta-title-size: 26px;
        --pl-cta-sub-size: 8px;
        --pl-cta-action-gap: 6px;
        --pl-cta-primary-pad-x: 15px;
        --pl-cta-secondary-pad-x: 10px;
        --pl-cta-primary-size: 12px;
        --pl-cta-secondary-size: 12px;
    }
}
/* V3 商品配置台：中性表面承载信息，珊瑚红只表达当前选择与购买动作。 */
.md-product-list {
    --pl-warm-bg: var(--dm-bg);
    --pl-warm-panel: var(--dm-bg-secondary);
    --pl-warm-panel-hover: var(--dm-bg-hover);
    --pl-warm-ink: var(--dm-text);
    --pl-warm-ink-secondary: var(--dm-text-secondary);
    --pl-warm-line: var(--dm-border);
    --pl-warm-line-strong: var(--dm-divider);
    --pl-box-module-bg: var(--dm-bg);
    --pl-box-frame-border: var(--dm-border);
    --pl-box-tabs-bg: var(--dm-bg-elevated);
    --pl-box-tab-bg: transparent;
    --pl-box-tab-hover-bg: var(--dm-bg-hover);
    --pl-box-tab-color: var(--pl-warm-ink);
    --pl-box-tab-shadow: none;
    --pl-box-tab-num-size: 20px;
    --pl-box-tab-type-size: 14px;
    --pl-box-tab-type-bg: var(--dm-bg-secondary);
    --pl-box-tab-active-bg: var(--dm-accent-soft);
    --pl-box-tab-active-color: var(--dm-accent);
    --pl-box-tab-active-accent: var(--dm-accent);
    --pl-box-tab-active-type-color: var(--pl-box-tab-active-color);
    --pl-box-tab-active-type-bg: var(--dm-accent-soft);
    --pl-box-tab-active-shadow: none;
    --pl-box-stage-border: var(--pl-warm-line);
    --pl-box-stage-bg: var(--dm-bg-elevated);
    --pl-box-stage-shadow: var(--dm-shadow-sm);
    --pl-box-main-bg: var(--dm-bg-elevated);
    --pl-box-divider: var(--pl-warm-line);
    --pl-box-accent-text: var(--dm-accent);
    --pl-box-detail-bg: transparent;
    --pl-box-detail-border: transparent;
    --pl-box-detail-kicker-bg: var(--dm-accent-soft);
    --pl-box-detail-kicker-border: var(--dm-accent-strong);
    --pl-box-grid-line: var(--pl-warm-line);
    --pl-box-cell-bg: var(--pl-warm-panel);
    --pl-box-cell-hover-bg: var(--pl-warm-panel-hover);
    --pl-box-cell-active-bg: var(--pl-warm-panel-hover);
    --pl-box-cell-border: var(--pl-warm-line);
    --pl-box-cell-active-border: var(--pl-warm-line-strong);
    --pl-box-cell-active-shadow: none;
    --pl-box-grid-hover-border: var(--pl-warm-line-strong);
    --pl-box-grid-hover-bg: var(--pl-warm-panel-hover);
    --pl-box-grid-hover-shadow: var(--dm-shadow-sm);
    --pl-box-badge-bg: var(--dm-accent-soft);
    --pl-box-qr-bg: var(--dm-bg-elevated);
    --pl-box-qr-shadow: var(--dm-shadow-sm);
    --pl-box-qr-rail-bg: var(--pl-warm-panel);
    --pl-box-qr-rail-border: var(--pl-warm-line);
    --pl-box-side-bg: var(--dm-bg-secondary);
    --pl-box-side-count-bg: var(--dm-bg-hover);
    --pl-box-side-count-color: var(--pl-warm-ink-secondary);
    --pl-box-side-item-bg: var(--dm-bg-elevated);
    --pl-box-side-item-border: var(--dm-border);
    --pl-box-side-item-hover-bg: var(--dm-bg-hover);
    --pl-box-side-item-hover-border: var(--dm-accent-strong);
    --pl-box-side-item-hover-shadow: var(--dm-shadow-sm);
    --pl-box-side-index-bg: var(--dm-bg-hover);
    --pl-box-side-index-border: var(--dm-border);
    --pl-box-side-index-color: var(--pl-warm-ink-secondary);
    --pl-box-side-state-shadow: none;
    --pl-box-side-active-bg: var(--dm-accent-soft);
    --pl-box-side-active-border: var(--dm-accent-strong);
    --pl-box-side-active-color: var(--pl-warm-ink);
    --pl-box-side-active-shadow: none;
    --pl-box-side-active-name-color: var(--pl-warm-ink);
    --pl-box-buy-border: var(--dm-accent);
    --pl-box-buy-bg: var(--dm-accent);
    --pl-box-buy-color: var(--dm-on-accent);
    --pl-box-buy-shadow: none;
    --pl-box-buy-hover-border: var(--dm-accent-hover);
    --pl-box-buy-hover-bg: var(--dm-accent-hover);
    --pl-box-buy-hover-color: var(--dm-on-accent);
    --pl-box-buy-hover-shadow: none;
    --pl-box-detail-card-bg: var(--dm-bg-elevated);
    --pl-box-detail-card-border: var(--dm-border);
    --pl-box-detail-card-shadow: none;
    --pl-box-assurance-shell-bg: var(--dm-bg-elevated);
    --pl-box-assurance-item-bg: var(--dm-bg-secondary);
    --pl-box-assurance-border: var(--dm-border);
    --pl-box-assurance-color: var(--dm-text);
    --pl-box-facts-bg: #fff;
    --pl-box-facts-border: rgba(198, 63, 0, 0.2);
}

.md-product-list .pl-box-module {
    padding: var(--pl-box-padding-y) 0;
    background: var(--pl-box-module-bg);
}

.md-product-list .pl-box-module::before {
    content: none;
}

.md-product-list .pl-box-module .pl-shell {
    width: var(--pl-box-shell-width);
}

.md-product-list .pl-box-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pl-box-frame-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-stage-bg);
    box-shadow: var(--pl-box-stage-shadow);
}

.md-product-list .pl-box-tabs-frame {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--pl-box-divider);
    background: var(--pl-box-tabs-bg);
}

.md-product-list .pl-box-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 64px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    color: var(--pl-box-tab-color);
    box-shadow: none;
}

.md-product-list .pl-box-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 18px;
    gap: 8px;
    border: 0;
    border-right: 1px solid var(--pl-box-divider);
    background: var(--pl-box-tab-bg);
    color: var(--pl-box-tab-color);
    transform: none;
    box-shadow: var(--pl-box-tab-shadow);
    transition: background-color var(--hs-motion-fast) var(--hs-ease-out), color var(--hs-motion-fast) var(--hs-ease-out);
}

/* 图标结构只在手机端启用；桌面保持原分类排版。 */
.md-product-list .pl-box-tab-icon,
.md-product-list .pl-box-side-symbol,
.md-product-list .pl-box-detail-buy-icon {
    display: none;
}

.md-product-list .pl-box-tab-copy,
.md-product-list .pl-box-side-title-group {
    display: contents;
}

.md-product-list .pl-box-tab:last-child {
    border-right: 0;
}

.md-product-list .pl-box-tab:hover {
    filter: none;
    background: var(--pl-box-tab-hover-bg);
    transform: none;
}

.md-product-list .pl-box-tab-num {
    font-size: var(--pl-box-tab-num-size);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
}

.md-product-list .pl-box-tab-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: var(--pl-box-tab-type-size);
    line-height: 1;
    font-weight: 600;
    text-align: center;
    color: currentColor;
    background: var(--pl-box-tab-type-bg);
}

.md-product-list .pl-box-tab.active .pl-box-tab-type,
.md-product-list .pl-box-tab.is-active .pl-box-tab-type {
    color: var(--pl-box-tab-active-type-color);
    background: var(--pl-box-tab-active-type-bg);
}

/* 顶部分类选中态：以底边定位当前分类，避免大面积色块抢走产品信息的注意力。 */
.md-product-list .pl-box-tab.active,
.md-product-list .pl-box-tab.is-active {
    isolation: isolate;
    margin-top: 0;
    min-height: 64px;
    padding-top: 0;
    border-radius: 0;
    /* 覆盖全局暗黑模式对 .active 按钮施加的背景，状态色只由本模块 token 决定。 */
    background: var(--pl-box-tab-active-bg) !important;
    color: var(--pl-box-tab-active-color) !important;
    box-shadow: var(--pl-box-tab-active-shadow);
}

.md-product-list .pl-box-tab.active::after,
.md-product-list .pl-box-tab.is-active::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--pl-box-tab-active-accent);
}

.md-product-list .pl-box-tab.active .pl-box-tab-num,
.md-product-list .pl-box-tab.active .pl-box-tab-type,
.md-product-list .pl-box-tab.is-active .pl-box-tab-num,
.md-product-list .pl-box-tab.is-active .pl-box-tab-type {
    position: relative;
    z-index: 1;
}

.md-product-list .pl-box-stage {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.md-product-list .pl-box-stage-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.md-product-list .pl-box-panel {
    position: relative;
    min-width: 0;
}

.md-product-list .pl-box-side-shell,
.md-product-list .pl-box-main-shell,
.md-product-list .pl-box-right-shell {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
}

.md-product-list .pl-box-stage::before {
    background-image: none;
    background-size: auto;
}

.md-product-list .pl-box-stage::after {
    content: none;
}

.md-product-list .pl-box-side {
    padding: 28px 20px 26px;
    overflow: visible;
    border-right: 1px solid var(--pl-box-divider);
    background: var(--pl-box-side-bg);
}

.md-product-list .pl-box-side-shell {
    display: flex;
    flex-direction: column;
}

.md-product-list .pl-box-side-banner {
    margin-bottom: 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--pl-box-divider);
    text-align: left;
}

.md-product-list .pl-box-side-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--dm-accent);
    font-size: var(--hs-fs-meta);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
}

.md-product-list .pl-box-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.md-product-list .pl-box-side-banner h3 {
    min-width: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
    color: var(--pl-warm-ink);
    letter-spacing: 0;
}

.md-product-list .pl-box-side-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--pl-box-side-count-bg);
    color: var(--pl-box-side-count-color);
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.md-product-list .pl-box-side-banner p {
    min-height: 0;
    padding: 0;
    margin-top: 8px;
    border-radius: 0;
    background: transparent;
    color: var(--pl-warm-ink-secondary);
    font-size: var(--hs-fs-meta);
    line-height: 1.6;
    box-shadow: none;
}

.md-product-list .pl-box-side-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pl-side-index;
}

.md-product-list .pl-box-side-entry {
    width: 100%;
    min-width: 0;
    list-style: none;
    counter-increment: pl-side-index;
}

.md-product-list .pl-box-side-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px 10px 10px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: var(--hs-radius-sm);
    background: transparent;
    color: var(--pl-warm-ink);
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transform: none;
    transition: background-color var(--hs-motion-fast) var(--pl-ease-out), border-color var(--hs-motion-fast) var(--pl-ease-out), color var(--hs-motion-fast) var(--pl-ease-out), box-shadow var(--hs-motion-fast) var(--pl-ease-out), transform var(--hs-motion-fast) var(--pl-ease-out);
}

.md-product-list .pl-box-side-item::before {
    content: counter(pl-side-index, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--dm-border);
    border-radius: var(--hs-radius-sm);
    background: var(--dm-bg-hover);
    color: var(--pl-warm-ink-secondary);
    font-size: var(--hs-fs-caption);
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--hs-motion-fast) var(--pl-ease-out), border-color var(--hs-motion-fast) var(--pl-ease-out), color var(--hs-motion-fast) var(--pl-ease-out);
}

.md-product-list .pl-box-side-item:hover {
    border-color: var(--pl-box-side-item-hover-border);
    background: var(--pl-box-side-item-hover-bg);
    transform: translateX(2px);
}

.md-product-list .pl-box-side-item.is-active {
    width: 100%;
    border-color: var(--pl-box-side-active-border);
    background: var(--pl-box-side-active-bg) !important;
    color: var(--pl-box-side-active-color) !important;
    transform: translateX(4px);
    box-shadow: var(--pl-box-side-active-shadow);
}

.md-product-list .pl-box-side-item.is-active::before {
    border-color: var(--dm-accent-strong);
    background: var(--dm-accent-soft);
    color: var(--dm-accent);
}

.md-product-list .pl-box-side-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dm-accent);
    color: var(--dm-on-accent);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity var(--hs-motion-fast) var(--hs-ease-out), transform var(--hs-motion-fast) var(--hs-ease-out);
}

.md-product-list .pl-box-side-state i {
    font-size: 10px;
    line-height: 1;
}

.md-product-list .pl-box-side-item.is-active .pl-box-side-state {
    opacity: 1;
    transform: scale(1);
}

.md-product-list .pl-box-side-item:hover .pl-box-side-state {
    opacity: 0.24;
    transform: scale(0.9);
}

.md-product-list .pl-box-side-copy {
    display: grid;
    min-width: 0;
}

.md-product-list .pl-box-side-name {
    min-width: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.md-product-list .pl-box-side-item.is-active .pl-box-side-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pl-box-side-active-name-color);
}

.md-product-list .pl-box-main {
    display: flex;
    flex-direction: column;
    padding: 30px 32px 32px;
    border-left: 0;
    border-right: 0;
    background: var(--pl-box-main-bg);
}

.md-product-list .pl-box-main-shell {
    display: flex;
    flex-direction: column;
}

.md-product-list .pl-box-main-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 196px;
    align-items: stretch;
    gap: 20px;
    min-width: 0;
}

.md-product-list .pl-box-main-head {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pl-box-divider);
    box-shadow: none;
}

.md-product-list .pl-box-main-title {
    max-width: 760px;
    font-size: var(--hs-fs-title-m);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: 0;
    color: var(--pl-warm-ink);
}

.md-product-list .pl-box-main-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--pl-box-divider);
    border-radius: 999px;
    background: var(--pl-warm-panel);
    font-size: 13px;
    color: var(--pl-warm-ink-secondary);
}

.md-product-list .pl-box-main-time i {
    color: var(--pl-box-accent-text);
}

.md-product-list .pl-box-grid {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 24px;
    border: 1px solid var(--pl-box-detail-card-border);
    border-radius: var(--hs-radius-md);
    overflow: visible;
    background: var(--pl-box-detail-card-bg);
    box-shadow: var(--pl-box-detail-card-shadow);
}

/* 详情与购买栏同属主内容区，右侧扫码栏用固定列宽保持清晰边界。 */
.md-product-list .pl-box-grid-frame {
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.md-product-list .pl-box-detail {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: var(--pl-box-detail-bg);
    overflow: hidden;
}

.md-product-list .pl-box-detail-shell {
    padding: 0;
}

.md-product-list .pl-box-detail-head {
    display: grid;
    gap: 7px;
}

.md-product-list .pl-box-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--pl-box-detail-kicker-border);
    border-radius: 999px;
    background: var(--pl-box-detail-kicker-bg);
    font-size: 13px;
    line-height: 1.3;
}

.md-product-list .pl-box-detail-kicker-label {
    color: var(--pl-warm-ink-secondary);
    font-weight: 500;
}

.md-product-list .pl-box-detail-kicker-value {
    color: var(--pl-box-accent-text);
    font-size: inherit;
    font-weight: 800;
}

.md-product-list .pl-box-detail-title {
    color: var(--pl-warm-ink);
    font-size: var(--hs-fs-title-m);
    line-height: 1.35;
    font-weight: 700;
    text-wrap: pretty;
}

.md-product-list .pl-box-detail-assurance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--pl-box-divider);
    border-bottom: 1px solid var(--pl-box-divider);
}

.md-product-list .pl-box-assurance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 1 340px;
    min-width: min(340px, 100%);
    gap: 4px;
    margin-left: auto;
    margin-bottom: 0;
    padding: 4px;
    list-style: none;
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-assurance-shell-bg);
}

.md-product-list .pl-box-assurance-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 0 4px;
    border: 1px solid var(--pl-box-assurance-border);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-box-assurance-item-bg);
    color: var(--pl-box-assurance-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.md-product-list .pl-box-assurance-icon {
    flex: 0 0 auto;
    margin-right: 4px;
    font-size: 15px;
    line-height: 1;
}

/* 字段事实条移除后，仅保留随盒配套信息。 */
.md-product-list .pl-box-detail-facts--strip {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--pl-box-facts-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-facts-bg);
}

.md-product-list .pl-box-detail-accessories {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 9px 16px;
}

.md-product-list .pl-box-detail-accessories-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pl-box-detail-kicker-border);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-box-detail-kicker-bg);
    color: var(--pl-box-accent-text);
    font-size: 14px;
}

.md-product-list .pl-box-detail-accessories-copy {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.md-product-list .pl-box-detail-accessories-label {
    flex: 0 0 auto;
    color: var(--pl-warm-ink);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.md-product-list .pl-box-detail-accessories-value {
    min-width: 0;
    margin: 0;
    color: var(--pl-warm-ink-secondary);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
    overflow-wrap: normal;
    word-break: keep-all;
}

.md-product-list .pl-box-detail-summary-frame {
    width: min(220px, 100%);
    margin: 0 auto;
    padding-top: 12px;
}

.md-product-list .pl-box-detail-summary {
    margin: 0;
    color: var(--pl-warm-ink-secondary);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    text-wrap: pretty;
}

.md-product-list .pl-box-detail-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 12px 0 0;
}

.md-product-list .pl-box-detail-buy {
    width: min(220px, 100%);
    min-width: 0;
    min-height: 52px;
    padding: 0 22px;
    border-radius: var(--hs-radius-sm);
    border: 1px solid var(--pl-box-buy-border);
    background: var(--pl-box-buy-bg);
    color: var(--pl-box-buy-color);
    box-shadow: var(--pl-box-buy-shadow);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.md-product-list .pl-box-detail-buy:hover {
    border-color: var(--pl-box-buy-hover-border);
    background: var(--pl-box-buy-hover-bg);
    color: var(--pl-box-buy-hover-color);
    box-shadow: var(--pl-box-buy-hover-shadow);
}

.md-product-list .pl-box-grid-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 72px;
    border-top: 1px solid var(--pl-box-grid-line);
    box-shadow: none;
}

.md-product-list .pl-box-grid-row:first-of-type {
    border-top: 0;
}

.md-product-list .pl-box-grid-row:last-child {
    border-bottom: 0;
    box-shadow: none;
}

.md-product-list .pl-box-cell {
    min-height: 68px;
    padding: 12px 12px;
    border: 1px solid var(--pl-box-cell-border);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-box-cell-bg);
    cursor: default;
    pointer-events: auto;
    transform: none;
    transition: background-color var(--hs-motion-fast) var(--hs-ease-out), border-color var(--hs-motion-fast) var(--hs-ease-out), box-shadow var(--hs-motion-fast) var(--hs-ease-out);
}

.md-product-list .pl-box-cell:hover {
    background: var(--pl-box-cell-hover-bg);
    transform: none;
}

.md-product-list .pl-box-cell.is-active {
    border-color: var(--pl-box-cell-active-border);
    background: var(--pl-box-cell-active-bg);
    box-shadow: var(--pl-box-cell-active-shadow);
    transform: none;
}

.md-product-list .pl-box-cell-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pl-warm-ink);
}

.md-product-list .pl-box-cell:hover .pl-box-cell-name {
    color: var(--pl-warm-ink);
}

.md-product-list .pl-box-cell.is-active .pl-box-cell-name {
    color: var(--pl-box-accent-text);
}

.md-product-list .pl-box-cell-spec {
    font-size: 13px;
    color: var(--pl-warm-ink-secondary);
}

.md-product-list .pl-box-grid-hover {
    display: none;
    border: 1px solid var(--pl-box-grid-hover-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-grid-hover-bg);
    box-shadow: var(--pl-box-grid-hover-shadow);
}

.md-product-list .pl-box-grid-hover::before,
.md-product-list .pl-box-grid-hover::after {
    display: none;
}

.md-product-list .pl-box-right {
    width: 196px;
    min-width: 0;
    gap: 0;
    padding: 0;
    border-left: 0;
}

.md-product-list .pl-box-right-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 100%;
    padding: 18px 16px 16px;
    border: 1px solid var(--pl-box-detail-card-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-detail-card-bg);
    box-shadow: var(--pl-box-detail-card-shadow);
    text-align: center;
}

.md-product-list .pl-box-right-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pl-box-divider);
    text-align: center;
}

.md-product-list .pl-box-right-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--pl-box-detail-kicker-border);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-box-detail-kicker-bg);
    color: var(--pl-box-accent-text);
    font-size: 18px;
}

.md-product-list .pl-box-right-copy {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

.md-product-list .pl-box-right-label {
    display: block;
    margin-bottom: 2px;
    color: var(--pl-warm-ink-secondary);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}

.md-product-list .pl-box-qr-frame {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

.md-product-list .pl-box-right-tip {
    max-width: none;
    margin: 0;
    color: var(--pl-warm-ink);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
}

.md-product-list .pl-box-right-qr {
    width: 100%;
    max-width: 164px;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--pl-box-divider);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-qr-bg);
    box-shadow: var(--pl-box-qr-shadow);
}

.md-product-list .pl-box-right-qr::before {
    display: none;
}

.md-product-list .pl-box-right-qr::after {
    display: none;
}

.md-product-list .pl-box-right-qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.md-product-list .pl-box-right-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 8px 9px;
    border: 1px solid var(--pl-box-side-item-border);
    border-radius: var(--hs-radius-md);
    background: var(--pl-box-side-item-bg);
    text-align: center;
}

.md-product-list .pl-box-right-guide-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--pl-box-detail-kicker-border);
    border-radius: var(--hs-radius-sm);
    background: var(--pl-box-detail-kicker-bg);
    color: var(--pl-box-accent-text);
    font-size: 13px;
}

.md-product-list .pl-box-right-guide-copy {
    display: grid;
    flex: 0 1 auto;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    max-width: calc(100% - 38px);
    text-align: center;
}

.md-product-list .pl-box-right-guide-title {
    color: var(--pl-warm-ink);
    font-size: var(--hs-fs-meta);
    line-height: 1.35;
    font-weight: 700;
}

.md-product-list .pl-box-right-guide-desc {
    color: var(--pl-warm-ink-secondary);
    font-size: var(--hs-fs-caption);
    line-height: 1.4;
    overflow-wrap: break-word;
    white-space: normal;
}

@media (max-width: 1280px) {
    .md-product-list {
        --pl-box-tab-num-size: 18px;
        --pl-box-tab-type-size: 13px;
    }

    .md-product-list .pl-box-stage-inner {
        grid-template-columns: 216px minmax(0, 1fr);
    }

    .md-product-list .pl-box-main {
        padding: 26px 28px 28px;
    }

    .md-product-list .pl-box-main-title {
        font-size: 23px;
    }
}

@media (max-width: 1080px) {
    .md-product-list .pl-box-stage-inner {
        grid-template-columns: 188px minmax(0, 1fr);
    }

    .md-product-list .pl-box-side {
        padding: 22px 14px 20px;
    }

    .md-product-list .pl-box-side-name,
    .md-product-list .pl-box-side-item.is-active .pl-box-side-name {
        font-size: 14px;
    }

    .md-product-list .pl-box-right {
        width: 198px;
        padding-left: 20px;
    }

    .md-product-list .pl-box-main-body {
        grid-template-columns: minmax(0, 1fr) 198px;
        gap: 24px;
    }
}

@media (max-width: 1023px) {
    .md-product-list .pl-box-module {
        padding: var(--pl-box-padding-y) 0;
    }

    .md-product-list .pl-box-tabs {
        min-height: auto;
    }

    .md-product-list .pl-box-tab,
    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        min-height: 64px;
        margin-top: 0;
        border-radius: 0;
    }

    .md-product-list .pl-box-stage {
        min-height: auto;
    }

    .md-product-list .pl-box-stage-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .md-product-list .pl-box-side {
        padding: 20px 22px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--pl-box-divider);
    }

    .md-product-list .pl-box-side-shell {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
    }

    .md-product-list .pl-box-side-banner {
        margin-bottom: 0;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }

    .md-product-list .pl-box-side-list {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        scrollbar-width: thin;
        scrollbar-color: var(--pl-warm-line-strong) transparent;
    }

    .md-product-list .pl-box-side-list::-webkit-scrollbar {
        height: 4px;
    }

    .md-product-list .pl-box-side-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .md-product-list .pl-box-side-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--pl-warm-line-strong);
    }

    .md-product-list .pl-box-side-entry {
        flex: 0 0 142px;
        width: auto;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        display: flex;
        transform: none;
        width: 100%;
        min-height: 46px;
    }

    .md-product-list .pl-box-side-item::before {
        content: none;
    }

    .md-product-list .pl-box-side-copy {
        display: block;
    }

    .md-product-list .pl-box-main {
        padding: 26px 24px 28px;
        border-right: 0;
        border-bottom: 1px solid var(--pl-box-divider);
    }

    .md-product-list .pl-box-main-title {
        max-width: none;
        text-align: left;
        font-size: 25px;
    }

    .md-product-list .pl-box-main-time {
        justify-content: flex-start;
        text-align: left;
    }

    .md-product-list .pl-box-grid-frame {
        width: 100%;
        max-width: none;
    }

    .md-product-list .pl-box-grid {
        height: auto;
    }

    .md-product-list .pl-box-main-body {
        grid-template-columns: 1fr;
    }

    .md-product-list .pl-box-detail {
        flex: none;
    }

    .md-product-list .pl-box-stage--gift .pl-box-right {
        display: none !important;
    }

    .md-product-list .pl-box-right {
        padding: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .md-product-list {
        --pl-box-tab-num-size: 15px;
        --pl-box-tab-type-size: 11px;
    }

    .md-product-list .pl-box-module .pl-shell {
        width: min(100%, calc(100vw - 24px));
    }

    .md-product-list .pl-box-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }

    .md-product-list .pl-box-tab,
    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        min-height: 58px;
        padding: 0 8px;
        border-right: 1px solid var(--pl-box-divider);
        box-shadow: none;
    }

    .md-product-list .pl-box-tab:nth-child(2n) {
        border-right: 0;
    }
    .md-product-list .pl-box-tab-type {
        min-height: 20px;
        padding: 0 8px;
    }

    .md-product-list .pl-box-stage {
        border-radius: 0;
    }

    .md-product-list .pl-box-side-shell {
        display: flex;
        align-items: stretch;
        gap: 0;
    }

    .md-product-list .pl-box-side-banner {
        margin-bottom: 14px;
    }

    .md-product-list .pl-box-side-banner h3 {
        font-size: 20px;
    }

    .md-product-list .pl-box-side-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding: 2px 0 6px;
    }

    .md-product-list .pl-box-side-entry {
        width: 100%;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        padding: 8px 24px 8px 8px;
        gap: 0;
    }

    .md-product-list .pl-box-side-state {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 18px;
        height: 18px;
    }

    .md-product-list .pl-box-side-name,
    .md-product-list .pl-box-side-item.is-active .pl-box-side-name {
        width: 100%;
        font-size: 13px;
        line-height: 1.15;
        text-align: center;
    }

    .md-product-list .pl-box-main {
        padding: 22px 16px 24px;
    }

    .md-product-list .pl-box-main-title {
        font-size: 22px;
    }

    .md-product-list .pl-box-main-time {
        font-size: 14px;
    }

    .md-product-list .pl-box-grid {
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .md-product-list .pl-box-detail {
        min-height: auto;
        border-radius: 0;
    }

    .md-product-list .pl-box-detail-shell {
        min-height: auto;
        padding: 0;
    }

    .md-product-list .pl-box-detail-actions {
        padding-top: 10px;
    }

    .md-product-list .pl-box-detail-buy {
        width: calc(100% - 20px);
        min-width: 0;
        min-height: 48px;
        padding: 0 20px;
        font-size: 15px;
    }

    .md-product-list .pl-box-detail-title {
        font-size: 18px;
    }

    .md-product-list .pl-box-detail-kicker {
        display: none;
    }

    .md-product-list .pl-box-assurance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-basis: 100%;
        min-width: 100%;
        margin-top: 2px;
        margin-left: 0;
    }

    .md-product-list .pl-box-assurance-item {
        min-height: 40px;
        font-size: 12px;
    }

    .md-product-list .pl-box-detail-summary {
        font-size: 11px;
    }

    .md-product-list .pl-box-detail-accessories {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px;
        min-height: 48px;
        padding: 8px 10px;
    }

    .md-product-list .pl-box-detail-accessories-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .md-product-list .pl-box-detail-accessories-copy {
        align-items: flex-start;
        gap: 6px;
    }

    .md-product-list .pl-box-detail-accessories-label,
    .md-product-list .pl-box-detail-accessories-value {
        font-size: 12px;
    }

    .md-product-list .pl-box-right-qr {
        width: min(100%, 196px);
        height: auto;
    }

    .md-product-list .pl-box-right-qr::before {
        display: none;
    }
}

/* 桌面型号区随视口适度伸缩，为两列型号保留稳定的可读宽度。 */
@media (min-width: 1024px) {
    .md-product-list .pl-box-stage-inner {
        grid-template-columns: clamp(300px, 25vw, 340px) minmax(0, 1fr);
    }

    .md-product-list .pl-box-side-banner {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .md-product-list .pl-box-side-list {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 54px;
        align-content: start;
        row-gap: 15px;
        column-gap: 8px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .md-product-list .pl-box-side-entry {
        width: 100%;
        min-width: 0;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 20px;
        align-items: center;
        width: 100%;
        height: 54px;
        min-height: 54px;
        padding: 8px 10px;
        gap: 10px;
        border: 1px solid var(--pl-box-side-item-border);
        border-radius: 10px;
        background: var(--pl-box-side-item-bg);
        text-align: center;
        transform: none;
        box-shadow: none;
    }

    .md-product-list .pl-box-side-item::before {
        position: static;
        width: 28px;
        height: 28px;
        border-color: var(--pl-box-side-index-border);
        border-radius: 9px;
        background: var(--pl-box-side-index-bg);
        color: var(--pl-box-side-index-color);
        font-size: 11px;
    }

    .md-product-list .pl-box-side-state {
        position: static;
        width: 20px;
        height: 20px;
        box-shadow: var(--pl-box-side-state-shadow);
    }

    .md-product-list .pl-box-side-copy {
        display: grid;
        min-width: 0;
        width: 100%;
    }

    .md-product-list .pl-box-side-name,
    .md-product-list .pl-box-side-item.is-active .pl-box-side-name {
        width: 100%;
        font-size: 14px;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
    }

    .md-product-list .pl-box-side-item:hover {
        border-color: var(--pl-box-side-item-hover-border);
        background: var(--pl-box-side-item-hover-bg);
        transform: translateX(2px);
        box-shadow: var(--pl-box-side-item-hover-shadow);
    }

    .md-product-list .pl-box-side-item.is-active {
        border-color: var(--pl-box-side-active-border);
        background: var(--pl-box-side-active-bg) !important;
        transform: none;
        box-shadow: var(--pl-box-side-active-shadow);
    }

    .md-product-list .pl-box-side-item.is-active:hover .pl-box-side-state {
        opacity: 1;
        transform: scale(1);
    }

    .md-product-list .pl-box-main {
        padding-bottom: 28px;
    }

    .md-product-list .pl-box-grid {
        border-radius: 16px;
    }

    .md-product-list .pl-box-detail-actions {
        justify-content: center;
    }

    .md-product-list .pl-box-grid-row {
        min-height: 72px;
    }

    .md-product-list .pl-box-cell {
        min-height: 64px;
    }

}

/* 宽桌面为右侧悬浮工具栏预留安全间距，避免遮挡扫码模块。 */
@media (min-width: 1200px) {
    .md-product-list .pl-box-main-body {
        margin-right: 24px;
    }

    .md-product-list .pl-box-grid-frame {
        max-width: 650px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .md-product-list .pl-box-main-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .md-product-list .pl-box-right {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-product-list *,
    .md-product-list *::before,
    .md-product-list *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Canonical V3 收敛层：覆盖历史响应式片段，避免商品页继续形成暖色平行主题。 */
.md-product-list {
    --pl-bg: var(--dm-bg);
    --pl-bg-soft: var(--dm-bg-secondary);
    --pl-hero-module-bg: var(--dm-bg);
    --pl-features-bg: var(--dm-bg);
    --pl-surface: var(--dm-bg-elevated);
    --pl-text: var(--dm-text);
    --pl-text-secondary: var(--dm-text-secondary);
    --pl-text-tertiary: var(--dm-text-tertiary);
    --pl-border: var(--dm-border);
    --pl-accent: var(--dm-accent);
    --pl-accent-hover: var(--dm-accent-hover);
    --pl-accent-soft: var(--dm-accent-soft);
    --pl-on-accent: var(--dm-on-accent);
    --pl-warm-bg: var(--dm-bg);
    --pl-warm-panel: var(--dm-bg-secondary);
    --pl-warm-panel-hover: var(--dm-bg-hover);
    --pl-warm-ink: var(--dm-text);
    --pl-warm-ink-secondary: var(--dm-text-secondary);
    --pl-warm-line: var(--dm-border);
    --pl-warm-line-strong: var(--dm-divider);
    /* 亮色保留轻微品牌暖色，暗黑由本文件末尾双分支收敛为中性表面。 */
    --pl-feature-journey-bg: color-mix(in srgb, var(--pl-accent) 4%, var(--pl-surface));
    --pl-feature-assurance-bg: color-mix(in srgb, var(--pl-accent) 5%, var(--pl-surface));
    --pl-hero-title-size: var(--hs-fs-display);
    --pl-hero-subtitle-size: var(--hs-fs-body);
    --pl-eyebrow-size: var(--hs-fs-meta);
    --pl-story-eyebrow-size: 32px;
    --pl-cta-title-size: var(--hs-fs-title-l);
    --pl-cta-sub-size: var(--hs-fs-body);
    --pl-section-padding-y: var(--hs-space-8);
    /* 商品选择区紧接首屏；Features 桌面端保留 80px 内边距，窄屏仍由响应式规则收敛。 */
    --pl-box-padding-y: 0px;
    --pl-features-padding-y: 80px;
    --pl-story-hero-radius: var(--hs-radius-md);
}

.pl-hero {
    padding: 0;
    border-bottom: 1px solid var(--pl-border);
    text-align: left;
}

.pl-hero > .pl-hero-bg {
    position: absolute;
    z-index: 0;
}

.pl-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "copy offer"
        "copy actions";
    align-content: center;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: var(--hs-space-5);
    min-height: 460px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.pl-hero-copy {
    grid-area: copy;
    align-self: center;
    min-width: 0;
    max-width: 560px;
    margin-left: 130px;
}

.pl-hero-eyebrow {
    justify-content: flex-start;
    margin: 0 0 var(--hs-space-5);
    padding: 6px var(--hs-space-3);
    border: 1px solid var(--dm-accent-strong);
    border-radius: var(--hs-radius-full);
    background: var(--dm-accent-soft);
    color: color-mix(in srgb, var(--pl-accent) 70%, var(--pl-text));
}

.pl-hero-eyebrow::after {
    content: none;
}

.pl-hero-title {
    max-width: 10ch;
    margin: 0;
    font-size: var(--hs-fs-display);
    line-height: 1.12;
    text-wrap: balance;
}

.pl-hero-title .pl-word:nth-child(2) {
    color: var(--pl-accent);
}

.pl-hero-subtitle {
    max-width: 32em;
    margin: var(--hs-space-5) 0 0;
    color: color-mix(in srgb, var(--pl-text) 70%, var(--pl-bg-soft));
}

.pl-hero-occasions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hs-space-2);
    margin: var(--hs-space-4) 0 0;
    padding: 0;
    color: var(--pl-text-tertiary);
    font-size: var(--hs-fs-meta);
    line-height: 1.5;
    list-style: none;
}

.pl-hero-occasions li {
    padding: 4px 10px;
    border: 1px solid var(--dm-accent-strong);
    border-radius: var(--hs-radius-full);
    background: var(--dm-accent-soft);
}

.pl-hero-occasions li + li::before {
    content: none;
}

.pl-hero-offer {
    grid-area: offer;
    align-self: end;
    min-width: 0;
    padding: var(--hs-space-3) 0 var(--hs-space-3) clamp(32px, 4vw, 64px);
    border-left: 1px solid var(--pl-border);
    text-align: left;
    overflow: visible;
}

.pl-hero-offer .pl-cta-title {
    max-width: 11em;
    margin: 0;
    font-size: var(--hs-fs-title-m);
    line-height: 1.22;
    text-wrap: balance;
}

.pl-hero-offer .pl-cta-sub {
    max-width: 34em;
    margin: var(--hs-space-4) 0 0;
    color: color-mix(in srgb, var(--pl-text) 70%, var(--pl-bg-soft));
    line-height: 1.7;
}

.pl-hero-actions {
    grid-area: actions;
    align-self: start;
    justify-self: stretch;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: clamp(32px, 4vw, 64px);
}

.pl-hero-subtitle,
.pl-section-sub,
.pl-story-desc,
.pl-specs-copy {
    font-size: var(--hs-fs-body);
    line-height: 1.7;
}

.pl-eyebrow,
.pl-story-stat-label,
.pl-story-point,
.pl-spec-label,
.pl-spec-note {
    font-size: var(--hs-fs-meta);
    letter-spacing: 0;
}

.pl-section-head {
    margin-bottom: 30px;
}

.pl-section-title,
.pl-specs-title,
.pl-cta-title {
    font-size: var(--hs-fs-title-l);
    line-height: 1.22;
    letter-spacing: 0;
}

.pl-feature-group-title,
.md-product-list .pl-box-main-title,
.md-product-list .pl-box-detail-title {
    font-size: var(--hs-fs-title-m);
}

.pl-feature-title {
    font-size: var(--hs-fs-title-s);
}

.pl-story-stat-value,
.pl-feature-value,
.pl-spec-value {
    font-size: var(--hs-fs-title-l);
}

.pl-spec-value--text {
    font-size: var(--hs-fs-title-l);
    line-height: 1.25;
    white-space: normal;
}

.md-product-list .pl-box-empty {
    display: grid;
    place-items: center;
    gap: var(--hs-space-2);
    min-height: 180px;
    padding: var(--hs-space-6);
    border: 1px solid var(--dm-border);
    border-radius: var(--hs-radius-md);
    background: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
    font-size: var(--hs-fs-body);
    line-height: 1.7;
    text-align: center;
}

.md-product-list .pl-box-empty strong {
    color: var(--dm-text);
    font-size: var(--hs-fs-title-s);
}

.md-product-list .pl-box-empty--side {
    min-height: 96px;
}

.pl-story {
    padding-top: var(--pl-story-padding-y);
    padding-bottom: var(--pl-story-padding-y);
}

.pl-features {
    padding-top: var(--pl-features-padding-y);
    padding-bottom: 0;
}

.pl-specs {
    padding-top: 0;
    padding-bottom: 0;
}

.pl-hero-bg {
    background: var(--pl-hero-module-bg);
}

.pl-hero-bg::before {
    content: none;
}

.pl-btn,
.pl-btn-magnetic,
.md-product-list .pl-box-detail-buy {
    min-height: 48px;
    border-radius: var(--hs-radius-sm);
}

.pl-hero-actions .pl-btn,
.pl-hero-actions .pl-btn-magnetic {
    min-height: 48px;
    border-radius: var(--hs-radius-full);
    font-size: var(--hs-fs-button);
}

.md-product-list .pl-box-tab,
.md-product-list .pl-box-side-item,
.md-product-list .pl-box-cell {
    min-height: 44px;
}

.pl-story-hero,
.pl-feature-journey,
.pl-feature-assurance,
.md-product-list .pl-box-frame,
.md-product-list .pl-box-grid,
.md-product-list .pl-box-assurance,
.md-product-list .pl-box-right-shell,
.md-product-list .pl-box-right-qr,
.md-product-list .pl-box-right-guide,
.md-product-list .pl-box-grid-hover {
    border-radius: var(--hs-radius-md);
}

.md-product-list .pl-box-side-item,
.md-product-list .pl-box-side-item::before,
.md-product-list .pl-box-cell,
.md-product-list .pl-box-assurance-item,
.md-product-list .pl-box-right-icon,
.md-product-list .pl-box-right-guide-icon {
    border-radius: var(--hs-radius-sm);
}

.md-product-list .pl-box-side-item.is-active,
.md-product-list .pl-box-side-item:hover {
    transform: none;
}

.md-product-list .pl-box-detail-summary,
.md-product-list .pl-box-cell-spec,
.md-product-list .pl-box-main-time,
.md-product-list .pl-box-side-count,
.md-product-list .pl-box-right-label,
.md-product-list .pl-box-right-guide-title {
    font-size: var(--hs-fs-meta);
}

.md-product-list .pl-box-detail-buy,
.md-product-list .pl-box-cell-name {
    font-size: var(--hs-fs-body);
}

.md-product-list .pl-box-right-qr img {
    object-fit: contain;
}

@media (prefers-color-scheme: dark) {
    html:not(.husir-light) .md-product-list {
        --pl-bg: var(--dm-bg);
        --pl-bg-soft: var(--dm-bg-secondary);
        --pl-surface: var(--dm-bg-elevated);
        --pl-text: var(--dm-text);
        --pl-text-secondary: var(--dm-text-secondary);
        --pl-text-tertiary: var(--dm-text-tertiary);
        --pl-border: var(--dm-border);
        --pl-warm-bg: var(--dm-bg);
        --pl-warm-panel: var(--dm-bg-secondary);
        --pl-warm-panel-hover: color-mix(in srgb, var(--dm-bg-secondary) 85%, #ffffff 6%);
        --pl-warm-ink: var(--dm-text);
        --pl-warm-ink-secondary: color-mix(in srgb, var(--dm-text) 68%, var(--dm-bg-elevated));
        --pl-warm-line: var(--dm-border);
        --pl-warm-line-strong: var(--dm-divider);
        --pl-cta-hover-bg: var(--dm-accent-hover);
        --pl-story-hero-bg: var(--dm-bg-secondary);
        --pl-story-hero-shadow: var(--dm-shadow-sm);
        --pl-story-hero-hover-shadow: var(--dm-shadow-md);
        --pl-story-image-filter: brightness(0.98) contrast(1.04) saturate(0.96);
        --pl-story-image-hover-filter: brightness(1.02) contrast(1.06) saturate(1.02);
        --pl-story-hero-badge-bg: rgba(30, 30, 32, 0.82);
        --pl-story-hero-badge-color: var(--dm-text);
        --pl-story-point-bg: var(--dm-bg);
        --pl-story-point-border: var(--dm-border);
        --pl-story-point-icon-color: var(--dm-accent-hover);
        --pl-feature-journey-bg: var(--dm-bg-elevated);
        --pl-feature-assurance-bg: var(--dm-bg-elevated);
        --pl-box-frame-border: var(--dm-border);
        --pl-box-tabs-bg: var(--dm-bg-secondary);
        --pl-box-tab-bg: transparent;
        --pl-box-tab-hover-bg: rgba(255, 255, 255, 0.06);
        --pl-box-tab-color: var(--dm-text);
        --pl-box-tab-shadow: none;
        --pl-box-tab-type-bg: rgba(255, 255, 255, 0.09);
        --pl-box-tab-active-bg: var(--dm-bg-tint);
        --pl-box-tab-active-color: var(--dm-accent);
        --pl-box-tab-active-accent: var(--dm-accent);
        --pl-box-tab-active-type-color: var(--dm-accent);
        --pl-box-tab-active-type-bg: transparent;
        --pl-box-tab-active-shadow: none;
        --pl-box-stage-border: var(--dm-border);
        --pl-box-stage-bg: var(--dm-bg-secondary);
        --pl-box-stage-shadow: var(--dm-shadow-md);
        --pl-box-main-bg: var(--dm-bg-secondary);
        --pl-box-accent-text: var(--dm-accent);
        --pl-box-divider: rgba(255, 255, 255, 0.1);
        --pl-box-detail-bg: transparent;
        --pl-box-detail-border: rgba(255, 255, 255, 0.12);
        --pl-box-detail-kicker-bg: var(--dm-bg-tint);
        --pl-box-detail-kicker-border: var(--dm-accent-strong);
        --pl-box-detail-card-bg: var(--dm-bg-elevated);
        --pl-box-detail-card-border: var(--dm-divider);
        --pl-box-detail-card-shadow: none;
        --pl-box-grid-line: rgba(255, 255, 255, 0.08);
        --pl-box-cell-bg: rgba(255, 255, 255, 0.05);
        --pl-box-cell-hover-bg: rgba(255, 255, 255, 0.07);
        --pl-box-cell-active-bg: var(--dm-bg-tint);
        --pl-box-cell-border: rgba(255, 255, 255, 0.11);
        --pl-box-cell-active-border: var(--dm-accent-strong);
        --pl-box-cell-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        --pl-box-grid-hover-border: var(--dm-accent-strong);
        --pl-box-grid-hover-bg: var(--dm-accent-soft);
        --pl-box-grid-hover-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 28px rgba(0, 0, 0, 0.22);
        --pl-box-badge-bg: var(--dm-bg-tint);
        --pl-box-qr-bg: var(--dm-bg-elevated);
        --pl-box-qr-shadow: none;
        --pl-box-qr-rail-bg: var(--dm-bg-elevated);
        --pl-box-qr-rail-border: var(--dm-accent-strong);
        --pl-box-side-bg: color-mix(in srgb, var(--dm-bg-secondary) 72%, var(--dm-bg));
        --pl-box-side-count-bg: rgba(255, 255, 255, 0.08);
        --pl-box-side-count-color: var(--pl-warm-ink-secondary);
        --pl-box-side-item-bg: rgba(255, 255, 255, 0.035);
        --pl-box-side-item-border: rgba(255, 255, 255, 0.08);
        --pl-box-side-item-hover-bg: rgba(255, 255, 255, 0.06);
        --pl-box-side-item-hover-border: rgba(255, 255, 255, 0.1);
        --pl-box-side-item-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
        --pl-box-side-index-bg: rgba(255, 255, 255, 0.06);
        --pl-box-side-index-border: rgba(255, 255, 255, 0.1);
        --pl-box-side-index-color: var(--pl-warm-ink-secondary);
        --pl-box-side-state-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
        --pl-box-side-active-bg: var(--dm-accent-soft);
        --pl-box-side-active-border: var(--dm-accent-strong);
        --pl-box-side-active-color: var(--dm-text);
        --pl-box-side-active-shadow: none;
        --pl-box-side-active-name-color: var(--dm-text);
        --pl-box-assurance-shell-bg: var(--dm-bg-elevated);
        --pl-box-assurance-item-bg: var(--dm-bg-secondary);
        --pl-box-assurance-border: var(--dm-divider);
        --pl-box-assurance-color: var(--dm-text);
        --pl-box-facts-bg: transparent;
        --pl-box-facts-border: var(--dm-accent-strong);
        --pl-box-buy-border: var(--dm-accent);
        --pl-box-buy-bg: var(--dm-accent);
        --pl-box-buy-color: var(--dm-on-accent);
        --pl-box-buy-shadow: none;
        --pl-box-buy-hover-border: var(--dm-accent-hover);
        --pl-box-buy-hover-bg: var(--dm-accent-hover);
        --pl-box-buy-hover-color: var(--dm-on-accent);
        --pl-box-buy-hover-shadow: none;
    }
}

html.husir-dark .md-product-list {
    --pl-bg: var(--dm-bg);
    --pl-bg-soft: var(--dm-bg-secondary);
    --pl-surface: var(--dm-bg-elevated);
    --pl-text: var(--dm-text);
    --pl-text-secondary: var(--dm-text-secondary);
    --pl-text-tertiary: var(--dm-text-tertiary);
    --pl-border: var(--dm-border);
    --pl-warm-bg: var(--dm-bg);
    --pl-warm-panel: var(--dm-bg-secondary);
    --pl-warm-panel-hover: color-mix(in srgb, var(--dm-bg-secondary) 85%, #ffffff 6%);
    --pl-warm-ink: var(--dm-text);
    --pl-warm-ink-secondary: color-mix(in srgb, var(--dm-text) 68%, var(--dm-bg-elevated));
    --pl-warm-line: var(--dm-border);
    --pl-warm-line-strong: var(--dm-divider);
    --pl-cta-hover-bg: var(--dm-accent-hover);
    --pl-story-hero-bg: var(--dm-bg-secondary);
    --pl-story-hero-shadow: var(--dm-shadow-sm);
    --pl-story-hero-hover-shadow: var(--dm-shadow-md);
    --pl-story-image-filter: brightness(0.98) contrast(1.04) saturate(0.96);
    --pl-story-image-hover-filter: brightness(1.02) contrast(1.06) saturate(1.02);
    --pl-story-hero-badge-bg: rgba(30, 30, 32, 0.82);
    --pl-story-hero-badge-color: var(--dm-text);
    --pl-story-point-bg: var(--dm-bg);
    --pl-story-point-border: var(--dm-border);
    --pl-story-point-icon-color: var(--dm-accent-hover);
    --pl-feature-journey-bg: var(--dm-bg-elevated);
    --pl-feature-assurance-bg: var(--dm-bg-elevated);
    --pl-box-frame-border: var(--dm-border);
    --pl-box-tabs-bg: var(--dm-bg-secondary);
    --pl-box-tab-bg: transparent;
    --pl-box-tab-hover-bg: rgba(255, 255, 255, 0.06);
    --pl-box-tab-color: var(--dm-text);
    --pl-box-tab-shadow: none;
    --pl-box-tab-type-bg: rgba(255, 255, 255, 0.09);
    --pl-box-tab-active-bg: var(--dm-bg-tint);
    --pl-box-tab-active-color: var(--dm-accent);
    --pl-box-tab-active-accent: var(--dm-accent);
    --pl-box-tab-active-type-color: var(--dm-accent);
    --pl-box-tab-active-type-bg: transparent;
    --pl-box-tab-active-shadow: none;
    --pl-box-stage-border: var(--dm-border);
    --pl-box-stage-bg: var(--dm-bg-secondary);
    --pl-box-stage-shadow: var(--dm-shadow-md);
    --pl-box-main-bg: var(--dm-bg-secondary);
    --pl-box-accent-text: var(--dm-accent);
    --pl-box-divider: rgba(255, 255, 255, 0.1);
    --pl-box-detail-bg: transparent;
    --pl-box-detail-border: rgba(255, 255, 255, 0.12);
    --pl-box-detail-kicker-bg: var(--dm-bg-tint);
    --pl-box-detail-kicker-border: var(--dm-accent-strong);
    --pl-box-detail-card-bg: var(--dm-bg-elevated);
    --pl-box-detail-card-border: var(--dm-divider);
    --pl-box-detail-card-shadow: none;
    --pl-box-grid-line: rgba(255, 255, 255, 0.08);
    --pl-box-cell-bg: rgba(255, 255, 255, 0.05);
    --pl-box-cell-hover-bg: rgba(255, 255, 255, 0.07);
    --pl-box-cell-active-bg: var(--dm-bg-tint);
    --pl-box-cell-border: rgba(255, 255, 255, 0.11);
    --pl-box-cell-active-border: var(--dm-accent-strong);
    --pl-box-cell-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --pl-box-grid-hover-border: var(--dm-accent-strong);
    --pl-box-grid-hover-bg: var(--dm-accent-soft);
    --pl-box-grid-hover-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 28px rgba(0, 0, 0, 0.22);
    --pl-box-badge-bg: var(--dm-bg-tint);
    --pl-box-qr-bg: var(--dm-bg-elevated);
    --pl-box-qr-shadow: none;
    --pl-box-qr-rail-bg: var(--dm-bg-elevated);
    --pl-box-qr-rail-border: var(--dm-accent-strong);
    --pl-box-side-bg: color-mix(in srgb, var(--dm-bg-secondary) 72%, var(--dm-bg));
    --pl-box-side-count-bg: rgba(255, 255, 255, 0.08);
    --pl-box-side-count-color: var(--pl-warm-ink-secondary);
    --pl-box-side-item-bg: rgba(255, 255, 255, 0.035);
    --pl-box-side-item-border: rgba(255, 255, 255, 0.08);
    --pl-box-side-item-hover-bg: rgba(255, 255, 255, 0.06);
    --pl-box-side-item-hover-border: rgba(255, 255, 255, 0.1);
    --pl-box-side-item-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    --pl-box-side-index-bg: rgba(255, 255, 255, 0.06);
    --pl-box-side-index-border: rgba(255, 255, 255, 0.1);
    --pl-box-side-index-color: var(--pl-warm-ink-secondary);
    --pl-box-side-state-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
    --pl-box-side-active-bg: var(--dm-accent-soft);
    --pl-box-side-active-border: var(--dm-accent-strong);
    --pl-box-side-active-color: var(--dm-text);
    --pl-box-side-active-shadow: none;
    --pl-box-side-active-name-color: var(--dm-text);
    --pl-box-assurance-shell-bg: var(--dm-bg-elevated);
    --pl-box-assurance-item-bg: var(--dm-bg-secondary);
    --pl-box-assurance-border: var(--dm-divider);
    --pl-box-assurance-color: var(--dm-text);
    --pl-box-facts-bg: transparent;
    --pl-box-facts-border: var(--dm-accent-strong);
    --pl-box-buy-border: var(--dm-accent);
    --pl-box-buy-bg: var(--dm-accent);
    --pl-box-buy-color: var(--dm-on-accent);
    --pl-box-buy-shadow: none;
    --pl-box-buy-hover-border: var(--dm-accent-hover);
    --pl-box-buy-hover-bg: var(--dm-accent-hover);
    --pl-box-buy-hover-color: var(--dm-on-accent);
    --pl-box-buy-hover-shadow: none;
}

@media (min-width: 834px) and (max-width: 1100px) {
    .pl-hero-shell {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
        gap: var(--hs-space-7);
        min-height: 420px;
    }

    .pl-hero-title {
        font-size: var(--hs-fs-display);
    }

    .pl-hero-offer {
        padding-left: var(--hs-space-6);
    }

    .pl-hero-offer .pl-cta-title {
        font-size: var(--hs-fs-title-m);
    }

    .pl-hero-actions {
        padding-left: var(--hs-space-6);
    }
}

@media (max-width: 833px) {
    body.custom-override main.md-product-list {
        padding-top: 0;
    }

    .md-product-list {
        --pl-shell-width: min(100%, calc(100vw - 24px));
        --pl-box-shell-width: min(100%, calc(100vw - 24px));
        --pl-hero-title-size: 32px;
        --pl-hero-subtitle-size: var(--hs-fs-body);
        --pl-eyebrow-size: var(--hs-fs-meta);
        --pl-story-eyebrow-size: 20px;
        --pl-cta-title-size: 26px;
        --pl-cta-sub-size: var(--hs-fs-body);
        --pl-section-padding-y: var(--hs-space-7);
        --pl-box-padding-y: var(--hs-space-7);
    }

    .pl-hero {
        /* 背景保持贴顶，正文下移 14px：胶囊底部与眉题之间稳定保留 8px。 */
        padding: 14px 0 0;
    }

    .pl-hero-shell {
        display: block;
        width: min(100%, calc(100vw - 48px));
        min-height: 0;
        padding-top: var(--hs-space-7);
        padding-bottom: var(--hs-space-7);
    }

    .pl-hero-copy {
        margin-left: 0;
    }

    .pl-hero-eyebrow {
        margin-bottom: var(--hs-space-4);
    }

    .pl-hero-title {
        max-width: 10ch;
        font-size: 32px;
        line-height: 1.12;
    }

    .pl-hero-subtitle {
        max-width: 38em;
        margin-top: var(--hs-space-4);
    }

    .pl-hero-occasions {
        margin-top: var(--hs-space-3);
    }

    .pl-hero-offer {
        margin-top: var(--hs-space-7);
        padding: var(--hs-space-6) 0 0;
        border-top: 1px solid var(--pl-border);
        border-left: 0;
    }

    .pl-hero-offer .pl-cta-title {
        max-width: none;
        font-size: var(--hs-fs-title-m);
    }

    .pl-hero-offer .pl-cta-sub {
        max-width: 42em;
        margin-top: var(--hs-space-3);
    }

    .pl-hero-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--hs-space-3);
        margin-top: var(--hs-space-6);
        padding-left: 0;
    }

    .pl-hero-actions .pl-btn,
    .pl-hero-actions .pl-btn-magnetic {
        width: auto;
    }

    .pl-section-title,
    .pl-specs-title,
    .pl-cta-title {
        font-size: 26px;
    }

    .pl-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl-spec-item:nth-child(3) {
        border-left: 0;
    }

    .pl-spec-item:nth-child(n + 3) {
        border-top: 1px solid var(--pl-border);
    }

    .pl-features,
    .pl-specs {
        padding-top: var(--pl-section-padding-y);
        padding-bottom: var(--pl-section-padding-y);
    }

    .pl-story-hero {
        aspect-ratio: 16 / 10;
    }

}

/* 手机端共享玻璃变量：只承载分类状态、证据面板与流程图标，不覆盖正文。 */
@media (max-width: 767px) {
    .md-product-list {
        --pl-mobile-glass-surface: rgba(255, 255, 255, 0.78);
        --pl-mobile-glass-surface-strong: rgba(255, 255, 255, 0.92);
        --pl-mobile-glass-stage: rgba(255, 255, 255, 0.66);
        --pl-mobile-glass-active: rgba(198, 63, 0, 0.12);
        --pl-mobile-glass-border: rgba(29, 29, 31, 0.12);
        --pl-mobile-glass-highlight: rgba(255, 255, 255, 0.68);
        --pl-mobile-glass-state-border: rgba(255, 255, 255, 0.5);
        --pl-mobile-glass-shadow: 0 12px 30px rgba(29, 29, 31, 0.1), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-shadow-active: 0 8px 20px rgba(198, 63, 0, 0.16), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-icon-shadow: 0 8px 22px rgba(29, 29, 31, 0.1), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-control: rgba(255, 255, 255, 0.86);
        --pl-mobile-glass-control-active: rgba(198, 63, 0, 0.14);
        --pl-mobile-glass-icon-bg: rgba(255, 255, 255, 0.72);
        --pl-mobile-glass-rim: rgba(255, 255, 255, 0.84);
        --pl-mobile-glass-button-icon: rgba(255, 255, 255, 0.24);
        --pl-mobile-glass-shadow-control: 0 8px 22px rgba(29, 29, 31, 0.1), inset 0 1px 0 var(--pl-mobile-glass-rim);
    }

    .md-product-list .pl-story-content {
        width: 100%;
        max-width: none;
        padding: var(--hs-space-2) var(--hs-space-1) 0;
    }

    .md-product-list .pl-story-content .pl-eyebrow {
        margin-bottom: var(--hs-space-3);
        font-size: 14px;
        line-height: 1.4;
    }

    .md-product-list .pl-story-content .pl-section-title {
        max-width: 12em;
        font-size: 26px;
        line-height: 1.24;
    }

    .md-product-list .pl-story-desc {
        margin-top: var(--hs-space-4);
        font-size: var(--hs-fs-body);
        line-height: 1.8;
    }

    .md-product-list .pl-box-frame {
        border-color: var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-surface);
        box-shadow: var(--pl-mobile-glass-shadow);
    }

    .md-product-list .pl-box-tabs-frame {
        padding: var(--hs-space-2);
        border-bottom: 0;
        background: transparent;
    }

    .md-product-list .pl-box-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: var(--hs-space-2);
        padding: var(--hs-space-1);
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-surface);
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-highlight);
    }

    .md-product-list .pl-box-tab,
    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 58px;
        padding: 8px 10px;
        gap: 9px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        text-align: left;
    }

    .md-product-list .pl-box-tab {
        background: var(--pl-mobile-glass-control);
        box-shadow: var(--pl-mobile-glass-shadow-control);
        transition: background-color var(--hs-motion-fast) var(--hs-ease-out), border-color var(--hs-motion-fast) var(--hs-ease-out), box-shadow var(--hs-motion-fast) var(--hs-ease-out), color var(--hs-motion-fast) var(--hs-ease-out), transform var(--hs-motion-fast) var(--hs-ease-out);
    }

    .md-product-list .pl-box-tab:active {
        transform: scale(0.99);
    }

    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        border-color: var(--dm-accent-strong);
        background: var(--pl-mobile-glass-control-active) !important;
        box-shadow: var(--pl-mobile-glass-shadow-active);
    }

    .md-product-list .pl-box-tab.active::after,
    .md-product-list .pl-box-tab.is-active::after {
        content: none;
    }

    .md-product-list .pl-box-tab-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-icon-bg);
        color: var(--dm-accent);
        font-size: 13px;
        box-shadow: var(--pl-mobile-glass-shadow-control);
        transition: background-color var(--hs-motion-fast) var(--hs-ease-out), border-color var(--hs-motion-fast) var(--hs-ease-out), color var(--hs-motion-fast) var(--hs-ease-out), transform var(--hs-motion-fast) var(--hs-ease-out);
    }

    .md-product-list .pl-box-tab.active .pl-box-tab-icon,
    .md-product-list .pl-box-tab.is-active .pl-box-tab-icon {
        border-color: var(--dm-accent-strong);
        background: var(--dm-accent);
        color: var(--dm-on-accent);
        transform: scale(1.04);
    }

    .md-product-list .pl-box-tab-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        min-width: 0;
        gap: 5px;
    }

    .md-product-list .pl-box-tab-num {
        min-width: 0;
        font-size: 14px;
        line-height: 1.25;
        white-space: nowrap;
    }

    .md-product-list .pl-box-tab-type,
    .md-product-list .pl-box-tab.active .pl-box-tab-type,
    .md-product-list .pl-box-tab.is-active .pl-box-tab-type {
        min-height: 0;
        padding: 0;
        flex-shrink: 0;
        background: transparent;
        font-size: 11px;
        white-space: nowrap;
    }

    .md-product-list .pl-story-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-top: var(--hs-space-5);
        padding-top: var(--hs-space-5);
        padding-bottom: var(--hs-space-5);
    }

    .md-product-list .pl-story-stat {
        min-width: 0;
        padding-left: var(--hs-space-4);
        padding-right: var(--hs-space-4);
    }

    .md-product-list .pl-story-stat + .pl-story-stat {
        padding-left: var(--hs-space-4);
        padding-right: var(--hs-space-4);
    }

    .md-product-list .pl-story-stat-value {
        font-size: 26px;
    }

    .md-product-list .pl-story-stat-value .unit {
        margin-left: 2px;
        font-size: 12px;
    }

    .md-product-list .pl-story-stat-label {
        margin-top: var(--hs-space-2);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* 证明信息共用一层玻璃，图标只承担静态识别。 */
    .md-product-list .pl-story-proof {
        margin-top: 20px;
        border-color: var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-surface);
        box-shadow: var(--pl-mobile-glass-shadow);
    }

    .md-product-list .pl-story-proof-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--hs-space-2);
        min-height: 0;
        padding: var(--hs-space-3) 14px;
        border-bottom-color: var(--pl-mobile-glass-border);
    }

    .md-product-list .pl-story-proof-title {
        font-size: 14px;
    }

    .md-product-list .pl-story-proof-meta {
        justify-content: flex-start;
        font-size: 12px;
        text-align: left;
    }

    .md-product-list .pl-story-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin: 0;
    }

    .md-product-list .pl-story-point {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        min-width: 0;
        min-height: 104px;
        gap: var(--hs-space-2);
        padding: var(--hs-space-3) var(--hs-space-1);
        color: var(--pl-text-secondary);
        line-height: 1.45;
        text-align: center;
        white-space: normal;
    }

    .md-product-list .pl-story-point + .pl-story-point {
        border-top: 0;
        border-left: 1px solid var(--pl-mobile-glass-border);
    }

    .md-product-list .pl-story-point-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin: 0;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-icon-bg);
        color: var(--pl-story-point-icon-color);
        font-size: 14px;
        box-shadow: var(--pl-mobile-glass-icon-shadow);
    }

    .md-product-list .pl-story-point-text {
        min-width: 0;
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .md-product-list .pl-story-point-text b {
        display: block;
        margin: 0 0 2px;
        font-size: 14px;
        line-height: 1.35;
    }

    /* 参数区按证据强弱分层：硬数据并排，履约能力改为全宽证明条。 */
    .md-product-list .pl-specs {
        padding-top: var(--pl-section-padding-y);
        padding-bottom: var(--pl-section-padding-y);
    }

    .md-product-list .pl-specs-layout {
        gap: var(--hs-space-6);
    }

    .md-product-list .pl-specs-intro {
        width: min(100%, 24em);
    }

    .md-product-list .pl-specs-title {
        max-width: 11em;
        font-size: 26px;
        line-height: 1.22;
    }

    .md-product-list .pl-specs-copy {
        max-width: 24em;
        margin-top: var(--hs-space-3);
        color: var(--pl-text-secondary);
        font-size: var(--hs-fs-body);
        line-height: 1.7;
    }

    .md-product-list .pl-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hs-space-3);
        border: 0;
    }

    .md-product-list .pl-spec-item--primary,
    .md-product-list .pl-spec-item--primary + .pl-spec-item--primary,
    .md-product-list .pl-spec-item--proof,
    .md-product-list .pl-spec-item--proof + .pl-spec-item--proof {
        position: relative;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-surface);
        box-shadow: var(--pl-mobile-glass-icon-shadow);
        text-align: left;
    }

    .md-product-list .pl-spec-icon {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        margin: 0;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-surface-strong);
        color: var(--pl-accent);
        font-size: 15px;
        line-height: 1;
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-highlight), var(--pl-mobile-glass-icon-shadow);
    }

    .md-product-list .pl-spec-item--primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "value"
            "note";
        align-items: center;
        row-gap: 0;
        min-height: 152px;
        padding: var(--hs-space-4);
    }

    .md-product-list .pl-spec-item--primary .pl-spec-label {
        grid-area: label;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 0;
        color: var(--pl-text-secondary);
        font-size: var(--hs-fs-caption);
        line-height: 1.4;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-value {
        grid-area: value;
        display: flex;
        align-items: baseline;
        min-width: 0;
        margin: var(--hs-space-3) 0 0;
        font-size: 32px;
        line-height: 1;
        white-space: nowrap;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-unit,
    .md-product-list .pl-spec-item--proof .pl-spec-unit {
        position: static;
        flex: 0 0 auto;
        margin-left: 4px;
        line-height: 1;
        transform: none;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-unit {
        font-size: 14px;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-note {
        grid-area: note;
        margin: var(--hs-space-2) 0 0;
        color: var(--pl-text-secondary);
        font-size: var(--hs-fs-caption);
        line-height: 1.45;
    }

    .md-product-list .pl-spec-item--proof {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "note value";
        align-items: center;
        column-gap: 10px;
        row-gap: 3px;
        min-height: 72px;
        margin-right: 0;
        padding: 10px 84px 10px var(--hs-space-3);
    }

    .md-product-list .pl-spec-item--proof .pl-spec-label {
        grid-area: label;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 0;
        color: var(--pl-text);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .md-product-list .pl-spec-item--proof .pl-spec-value {
        grid-area: value;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        margin: 0;
        color: var(--pl-spec-accent-text);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    .md-product-list .pl-spec-item--proof .pl-spec-unit {
        font-size: 12px;
    }

    .md-product-list .pl-spec-item--proof .pl-spec-note {
        grid-area: note;
        margin: 0;
        padding-left: 46px;
        color: var(--pl-text-secondary);
        font-size: 11px;
        line-height: 1.4;
    }

    .md-product-list .pl-box-stage {
        padding: 0 var(--hs-space-2) var(--hs-space-2);
    }

    .md-product-list .pl-box-stage-inner {
        overflow: hidden;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-stage);
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-highlight);
    }

    .md-product-list .pl-box-side {
        padding: var(--hs-space-4) var(--hs-space-3);
        border-bottom-color: var(--pl-mobile-glass-border);
        background: var(--pl-mobile-glass-surface);
    }

    .md-product-list .pl-box-side-shell {
        display: block;
    }

    .md-product-list .pl-box-side-banner {
        margin-bottom: var(--hs-space-3);
    }

    .md-product-list .pl-box-side-heading {
        justify-content: flex-start;
        gap: 10px;
    }

    .md-product-list .pl-box-side-symbol {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-icon-bg);
        color: var(--dm-accent);
        font-size: 14px;
        box-shadow: var(--pl-mobile-glass-shadow-control);
    }

    .md-product-list .pl-box-side-title-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .md-product-list .pl-box-side-list {
        gap: var(--hs-space-2);
        padding: 0;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        min-height: 48px;
        padding: 8px 32px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-control);
        box-shadow: var(--pl-mobile-glass-shadow-control);
        transition: background-color var(--hs-motion-fast) var(--hs-ease-out), border-color var(--hs-motion-fast) var(--hs-ease-out), box-shadow var(--hs-motion-fast) var(--hs-ease-out), color var(--hs-motion-fast) var(--hs-ease-out), transform var(--hs-motion-fast) var(--hs-ease-out);
    }

    .md-product-list .pl-box-side-item:active {
        transform: scale(0.98);
    }

    .md-product-list .pl-box-side-item.is-active {
        border-color: var(--dm-accent-strong);
        background: var(--pl-mobile-glass-control-active);
        color: var(--dm-accent);
        box-shadow: var(--pl-mobile-glass-shadow-active);
    }

    .md-product-list .pl-box-side-state {
        top: calc(50% - 11px);
        right: 8px;
        width: 22px;
        height: 22px;
        border: 1px solid var(--pl-mobile-glass-state-border);
        border-radius: var(--hs-radius-full);
        box-shadow: var(--pl-mobile-glass-shadow-control);
    }

    .md-product-list .pl-box-main {
        padding: 18px var(--hs-space-3) var(--hs-space-4);
        border-bottom: 0;
        background: transparent;
    }

    .md-product-list .pl-box-main-head {
        margin-bottom: var(--hs-space-4);
    }

    .md-product-list .pl-box-detail-head {
        padding-right: 0;
        text-align: center;
    }

    .md-product-list .pl-box-main-time {
        display: flex;
        width: fit-content;
        max-width: 100%;
        min-height: 42px;
        margin-right: auto;
        margin-left: auto;
        padding: 6px 10px 6px 6px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-control);
        box-shadow: var(--pl-mobile-glass-shadow-control);
        text-align: center;
    }

    .md-product-list .pl-box-detail-title {
        text-align: center;
        white-space: nowrap;
    }

    .md-product-list .pl-box-main-time > i {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-icon-bg);
        color: var(--dm-accent);
        font-size: 12px;
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-rim);
    }

    .md-product-list .pl-box-detail-kicker,
    .md-product-list .pl-box-detail-buy {
        border-radius: var(--hs-radius-full);
    }

    .md-product-list .pl-box-detail-assurance-row {
        display: block;
    }

    .md-product-list .pl-box-assurance {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .md-product-list .pl-box-assurance-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        min-height: 58px;
        padding: 6px 2px;
        gap: 4px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-md);
        background: var(--pl-mobile-glass-control);
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        box-shadow: var(--pl-mobile-glass-shadow-control);
    }

    .md-product-list .pl-box-assurance-icon {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        margin: 0;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-icon-bg);
        color: var(--dm-accent);
        font-size: 11px;
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-rim);
    }

    .md-product-list .pl-box-detail-buy {
        min-height: 54px;
        gap: 9px;
        box-shadow: 0 10px 24px rgba(198, 63, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transition: background-color var(--hs-motion-fast) var(--hs-ease-out), border-color var(--hs-motion-fast) var(--hs-ease-out), box-shadow var(--hs-motion-fast) var(--hs-ease-out), transform var(--hs-motion-fast) var(--hs-ease-out);
    }

    .md-product-list .pl-box-detail-buy:active {
        transform: scale(0.99);
    }

    .md-product-list .pl-box-detail-buy-icon {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-button-icon);
        font-size: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }
}

/* 视频首屏在 768px 起退出手机布局；竖屏平板增大顶部呼吸区，避免正文紧贴悬浮导航。 */
@media (min-width: 768px) and (max-width: 833px) and (orientation: portrait) {
    .md-product-list > .pl-hero {
        padding-top: 65px;
    }
}

/* 竖屏平板用一层连续玻璃承载型号，避免逐项胶囊割裂选择顺序。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
    .md-product-list {
        /* 竖屏平板比紧凑基线多留 10px，保持长内容区块之间的呼吸感。 */
        --pl-section-padding-y: 58px;
        --pl-box-padding-y: 58px;
        --pl-tablet-glass-surface: rgba(255, 255, 255, 0.52);
        --pl-tablet-glass-track: rgba(255, 255, 255, 0.66);
        --pl-tablet-glass-border: rgba(29, 29, 31, 0.12);
        --pl-tablet-glass-highlight: rgba(255, 255, 255, 0.72);
        --pl-tablet-glass-hover: rgba(255, 255, 255, 0.5);
        --pl-tablet-glass-active: rgba(198, 63, 0, 0.13);
        --pl-tablet-glass-active-border: rgba(198, 63, 0, 0.38);
        --pl-tablet-glass-icon-bg: rgba(255, 255, 255, 0.72);
        --pl-tablet-glass-state-border: rgba(255, 255, 255, 0.58);
        --pl-tablet-glass-shadow: 0 12px 30px rgba(29, 29, 31, 0.1), inset 0 1px 0 var(--pl-tablet-glass-highlight);
        --pl-tablet-glass-active-shadow: 0 7px 18px rgba(198, 63, 0, 0.14), inset 0 1px 0 var(--pl-tablet-glass-highlight);
    }

    .md-product-list .pl-box-frame {
        margin-inline: 15px;
    }

    /* 竖屏平板让信任路径直接衔接长期标准区，避免紧凑基线重复留白。 */
    .md-product-list > .pl-features {
        --pl-eyebrow-size: 18px;
        padding-bottom: 0;
    }

    /* 外层只补材质底色与内高光，不加圆角和外投影，避免套出第二张卡片。 */
    .md-product-list .pl-box-side {
        border-bottom-color: var(--pl-tablet-glass-border);
        background: var(--pl-tablet-glass-surface);
        box-shadow: inset 0 1px 0 var(--pl-tablet-glass-highlight);
    }

    .md-product-list .pl-box-side-shell {
        display: block;
    }

    .md-product-list .pl-box-side-banner {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .md-product-list .pl-box-side-eyebrow {
        margin-bottom: 7px;
    }

    .md-product-list .pl-box-side-heading {
        justify-content: flex-start;
        gap: 10px;
    }

    .md-product-list .pl-box-side-symbol {
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border: 1px solid var(--pl-tablet-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-tablet-glass-icon-bg);
        color: var(--dm-accent);
        font-size: 14px;
        box-shadow: inset 0 1px 0 var(--pl-tablet-glass-highlight);
    }

    .md-product-list .pl-box-side-title-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    /* 竖屏平板有足够横向容量，放大分类与型号层级，避免沿用紧凑基线的小字号。 */
    .md-product-list .pl-box-tab-num {
        font-size: 20px;
    }

    .md-product-list .pl-box-tab-type,
    .md-product-list .pl-box-tab.active .pl-box-tab-type,
    .md-product-list .pl-box-tab.is-active .pl-box-tab-type {
        font-size: 16px;
    }

    .md-product-list .pl-box-side-banner h3 {
        font-size: 22px;
    }

    .md-product-list .pl-box-side-count {
        min-width: 54px;
        min-height: 32px;
        font-size: 22px;
    }

    .md-product-list .pl-box-side-banner p {
        margin-top: 6px;
        font-size: 16px;
        line-height: 1.5;
    }

    .md-product-list .pl-box-side-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        overflow: visible;
        padding: 6px;
        border: 1px solid var(--pl-tablet-glass-border);
        border-radius: 18px;
        background: var(--pl-tablet-glass-track);
        box-shadow: var(--pl-tablet-glass-shadow);
        scrollbar-width: auto;
    }

    .md-product-list .pl-box-side-entry {
        flex: initial;
        width: 100%;
        min-width: 0;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        padding: 8px 32px 8px 10px;
        gap: 0;
        border: 1px solid transparent;
        border-radius: 13px;
        background: transparent;
        box-shadow: none;
        text-align: center;
        transform: none;
    }

    .md-product-list .pl-box-side-item:hover {
        border-color: transparent;
        background: var(--pl-tablet-glass-hover);
        transform: none;
    }

    .md-product-list .pl-box-side-item.is-active {
        border-color: var(--pl-tablet-glass-active-border);
        background: var(--pl-tablet-glass-active) !important;
        color: var(--dm-accent) !important;
        box-shadow: var(--pl-tablet-glass-active-shadow);
        transform: none;
    }

    .md-product-list .pl-box-side-copy {
        width: 100%;
        min-width: 0;
    }

    .md-product-list .pl-box-side-name,
    .md-product-list .pl-box-side-item.is-active .pl-box-side-name {
        width: 100%;
        min-width: 0;
        font-size: 18px !important;
        line-height: 1.25;
        text-align: center;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }

    .md-product-list .pl-box-side-item.is-active .pl-box-side-name {
        color: var(--dm-accent) !important;
    }

    /* 勾选始终占用右侧预留区，型号换行时也不会与文字相撞。 */
    .md-product-list .pl-box-side-state {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 22px;
        height: 22px;
        border: 1px solid var(--pl-tablet-glass-state-border);
        border-radius: var(--hs-radius-full);
        box-shadow: inset 0 1px 0 var(--pl-tablet-glass-highlight);
        transform: translateY(-50%) scale(0.75);
    }

    .md-product-list .pl-box-side-item:hover .pl-box-side-state {
        transform: translateY(-50%) scale(0.9);
    }

    .md-product-list .pl-box-side-item.is-active .pl-box-side-state {
        transform: translateY(-50%) scale(1);
    }

    .md-product-list .pl-box-side-item.is-active:hover .pl-box-side-state {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* 手机竖屏收紧内容段落节奏；600px 起保留紧凑基线给竖屏平板。 */
@media (max-width: 599px) {
    .md-product-list #plBoxTitle {
        text-align: center;
    }

    .md-product-list .pl-box-tab,
    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        padding-right: 9px;
        padding-left: 9px;
    }

    .md-product-list .pl-box-tab-icon {
        transform-origin: left center;
    }

    .md-product-list .pl-box-detail-buy {
        width: min(230px, calc(100% - 20px));
        gap: 20px;
    }

    .md-product-list .pl-story-content {
        padding-top: 0;
    }

    .md-product-list .pl-story-content .pl-eyebrow {
        font-size: 18px;
    }

    .md-product-list .pl-story-content .pl-section-title {
        max-width: none;
        font-size: 22px;
        white-space: nowrap;
    }

    .md-product-list > .pl-features {
        --pl-eyebrow-size: 18px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .md-product-list .pl-feature-ledger-summary {
        width: min(100%, 360px);
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .md-product-list > .pl-specs {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .md-product-list .pl-specs-title {
        max-width: none;
        font-size: 22px;
        white-space: nowrap;
    }

    .md-product-list .pl-specs-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 手机竖屏将主数据拆成上下两行，避免三列挤压并保持右侧内容左对齐。 */
    .md-product-list .pl-spec-item--primary {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-areas:
            "label value"
            "label note";
        column-gap: 8px;
        row-gap: 15px;
        min-height: 72px;
        padding: 10px 12px;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-label {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
        margin-left: 20px;
        white-space: nowrap;
    }

    .md-product-list .pl-spec-item--proof .pl-spec-label {
        margin-left: 20px;
    }

    .md-product-list .pl-spec-item--proof .pl-spec-note {
        padding-left: 66px;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-icon {
        width: 32px;
        height: 32px;
    }

    /* 右侧证据列按移动端视觉标注整体右移，数值与说明保持同一左边界。 */
    .md-product-list .pl-spec-item--primary .pl-spec-value {
        margin: 0;
        font-size: 24px;
        justify-self: start;
        text-align: left;
        transform: translateX(60px);
    }

    .md-product-list .pl-spec-item--primary .pl-spec-unit {
        font-size: 12px;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-note {
        margin: 0;
        font-size: 11px;
        white-space: nowrap;
        justify-self: start;
        text-align: left;
        transform: translateX(60px);
    }
}

@media (max-width: 360px) {
    .md-product-list .pl-spec-item--primary {
        column-gap: 4px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .md-product-list .pl-spec-item--primary .pl-spec-label {
        gap: 6px;
    }

    .md-product-list .pl-box-tab,
    .md-product-list .pl-box-tab.active,
    .md-product-list .pl-box-tab.is-active {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 58px;
        padding: 7px 8px;
        gap: 7px;
    }

    .md-product-list .pl-box-tab-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .md-product-list .pl-box-tab-copy {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
    }

    .md-product-list .pl-box-tab-num {
        font-size: 13px;
    }

    .md-product-list .pl-box-tab-type,
    .md-product-list .pl-box-tab.active .pl-box-tab-type,
    .md-product-list .pl-box-tab.is-active .pl-box-tab-type {
        justify-content: flex-start;
        font-size: 10px;
    }

    .md-product-list .pl-box-side-item,
    .md-product-list .pl-box-side-item.is-active {
        min-height: 44px;
        padding-right: 22px;
        padding-left: 6px;
    }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (max-width: 767px) {
        .md-product-list .pl-box-tabs,
        .md-product-list .pl-box-side,
        .md-product-list .pl-story-proof,
        .md-product-list .pl-spec-item--primary,
        .md-product-list .pl-spec-item--proof {
            -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
        }
    }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    html:not(.husir-light) .md-product-list {
        --pl-mobile-glass-surface: rgba(42, 42, 42, 0.86);
        --pl-mobile-glass-surface-strong: rgba(42, 42, 42, 0.95);
        --pl-mobile-glass-stage: rgba(42, 42, 42, 0.78);
        --pl-mobile-glass-active: rgba(239, 91, 95, 0.18);
        --pl-mobile-glass-border: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-highlight: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-state-border: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-shadow-active: inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-icon-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-control: rgba(54, 48, 44, 0.88);
        --pl-mobile-glass-control-active: rgba(239, 91, 95, 0.22);
        --pl-mobile-glass-icon-bg: rgba(255, 255, 255, 0.08);
        --pl-mobile-glass-rim: rgba(247, 248, 249, 0.2);
        --pl-mobile-glass-button-icon: rgba(255, 255, 255, 0.16);
        --pl-mobile-glass-shadow-control: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-rim);
    }
}

@media (max-width: 767px) {
    html.husir-dark .md-product-list {
        --pl-mobile-glass-surface: rgba(42, 42, 42, 0.86);
        --pl-mobile-glass-surface-strong: rgba(42, 42, 42, 0.95);
        --pl-mobile-glass-stage: rgba(42, 42, 42, 0.78);
        --pl-mobile-glass-active: rgba(239, 91, 95, 0.18);
        --pl-mobile-glass-border: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-highlight: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-state-border: rgba(247, 248, 249, 0.18);
        --pl-mobile-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-shadow-active: inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-icon-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-highlight);
        --pl-mobile-glass-control: rgba(54, 48, 44, 0.88);
        --pl-mobile-glass-control-active: rgba(239, 91, 95, 0.22);
        --pl-mobile-glass-icon-bg: rgba(255, 255, 255, 0.08);
        --pl-mobile-glass-rim: rgba(247, 248, 249, 0.2);
        --pl-mobile-glass-button-icon: rgba(255, 255, 255, 0.16);
        --pl-mobile-glass-shadow-control: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-rim);
    }
}

@supports (color: color-mix(in srgb, #000 50%, transparent)) {
    @media (max-width: 767px) {
        .md-product-list {
            --pl-mobile-glass-surface: color-mix(in srgb, var(--dm-bg-elevated) 78%, transparent);
            --pl-mobile-glass-surface-strong: color-mix(in srgb, var(--dm-bg-elevated) 92%, transparent);
            --pl-mobile-glass-stage: color-mix(in srgb, var(--dm-bg-elevated) 66%, transparent);
            --pl-mobile-glass-active: color-mix(in srgb, var(--dm-accent-soft) 70%, var(--pl-mobile-glass-surface-strong));
            --pl-mobile-glass-border: color-mix(in srgb, var(--dm-divider) 72%, transparent);
            --pl-mobile-glass-highlight: color-mix(in srgb, var(--dm-on-accent) 68%, transparent);
            --pl-mobile-glass-shadow: 0 12px 30px color-mix(in srgb, var(--dm-text) 10%, transparent), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-shadow-active: 0 8px 20px color-mix(in srgb, var(--dm-accent) 16%, transparent), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-icon-shadow: 0 8px 22px color-mix(in srgb, var(--dm-text) 10%, transparent), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-control: color-mix(in srgb, var(--dm-bg-elevated) 86%, transparent);
            --pl-mobile-glass-control-active: color-mix(in srgb, var(--dm-accent-soft) 78%, var(--pl-mobile-glass-control));
            --pl-mobile-glass-icon-bg: color-mix(in srgb, var(--dm-bg-elevated) 72%, transparent);
            --pl-mobile-glass-rim: color-mix(in srgb, #fff 84%, transparent);
            --pl-mobile-glass-shadow-control: 0 8px 22px color-mix(in srgb, var(--dm-text) 10%, transparent), inset 0 1px 0 var(--pl-mobile-glass-rim);
        }
    }

    @media (max-width: 767px) and (prefers-color-scheme: dark) {
        html:not(.husir-light) .md-product-list {
            --pl-mobile-glass-surface: color-mix(in srgb, var(--dm-bg-elevated) 86%, transparent);
            --pl-mobile-glass-surface-strong: color-mix(in srgb, var(--dm-bg-elevated) 95%, transparent);
            --pl-mobile-glass-stage: color-mix(in srgb, var(--dm-bg-elevated) 78%, transparent);
            --pl-mobile-glass-border: color-mix(in srgb, var(--dm-divider) 82%, transparent);
            --pl-mobile-glass-highlight: color-mix(in srgb, var(--dm-text) 18%, transparent);
            --pl-mobile-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-icon-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-control: color-mix(in srgb, var(--dm-bg-elevated) 88%, transparent);
            --pl-mobile-glass-control-active: color-mix(in srgb, var(--dm-accent-soft) 74%, var(--pl-mobile-glass-control));
            --pl-mobile-glass-icon-bg: color-mix(in srgb, var(--dm-bg-elevated) 72%, transparent);
            --pl-mobile-glass-rim: color-mix(in srgb, var(--dm-text) 20%, transparent);
            --pl-mobile-glass-shadow-control: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-rim);
        }
    }

    @media (max-width: 767px) {
        html.husir-dark .md-product-list {
            --pl-mobile-glass-surface: color-mix(in srgb, var(--dm-bg-elevated) 86%, transparent);
            --pl-mobile-glass-surface-strong: color-mix(in srgb, var(--dm-bg-elevated) 95%, transparent);
            --pl-mobile-glass-stage: color-mix(in srgb, var(--dm-bg-elevated) 78%, transparent);
            --pl-mobile-glass-border: color-mix(in srgb, var(--dm-divider) 82%, transparent);
            --pl-mobile-glass-highlight: color-mix(in srgb, var(--dm-text) 18%, transparent);
            --pl-mobile-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-icon-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-highlight);
            --pl-mobile-glass-control: color-mix(in srgb, var(--dm-bg-elevated) 88%, transparent);
            --pl-mobile-glass-control-active: color-mix(in srgb, var(--dm-accent-soft) 74%, var(--pl-mobile-glass-control));
            --pl-mobile-glass-icon-bg: color-mix(in srgb, var(--dm-bg-elevated) 72%, transparent);
            --pl-mobile-glass-rim: color-mix(in srgb, var(--dm-text) 20%, transparent);
            --pl-mobile-glass-shadow-control: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--pl-mobile-glass-rim);
        }
    }
}

/* 平板玻璃独立于手机 token，暗黑两入口保持完全相同的材质参数。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) and (prefers-color-scheme: dark) {
    html:not(.husir-light) .md-product-list {
        --pl-tablet-glass-surface: rgba(43, 37, 32, 0.92);
        --pl-tablet-glass-surface: color-mix(in srgb, var(--dm-bg-secondary) 92%, transparent);
        --pl-tablet-glass-track: rgba(52, 45, 39, 0.92);
        --pl-tablet-glass-track: color-mix(in srgb, var(--dm-bg-elevated) 92%, transparent);
        --pl-tablet-glass-border: rgba(247, 248, 249, 0.18);
        --pl-tablet-glass-highlight: rgba(247, 248, 249, 0.18);
        --pl-tablet-glass-hover: rgba(255, 255, 255, 0.07);
        --pl-tablet-glass-active: rgba(239, 91, 95, 0.2);
        --pl-tablet-glass-active-border: rgba(245, 143, 146, 0.48);
        --pl-tablet-glass-icon-bg: rgba(255, 255, 255, 0.08);
        --pl-tablet-glass-state-border: rgba(247, 248, 249, 0.2);
        --pl-tablet-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-tablet-glass-highlight);
        --pl-tablet-glass-active-shadow: 0 7px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--pl-tablet-glass-highlight);
    }
}

@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
    html.husir-dark .md-product-list {
        --pl-tablet-glass-surface: rgba(43, 37, 32, 0.92);
        --pl-tablet-glass-surface: color-mix(in srgb, var(--dm-bg-secondary) 92%, transparent);
        --pl-tablet-glass-track: rgba(52, 45, 39, 0.92);
        --pl-tablet-glass-track: color-mix(in srgb, var(--dm-bg-elevated) 92%, transparent);
        --pl-tablet-glass-border: rgba(247, 248, 249, 0.18);
        --pl-tablet-glass-highlight: rgba(247, 248, 249, 0.18);
        --pl-tablet-glass-hover: rgba(255, 255, 255, 0.07);
        --pl-tablet-glass-active: rgba(239, 91, 95, 0.2);
        --pl-tablet-glass-active-border: rgba(245, 143, 146, 0.48);
        --pl-tablet-glass-icon-bg: rgba(255, 255, 255, 0.08);
        --pl-tablet-glass-state-border: rgba(247, 248, 249, 0.2);
        --pl-tablet-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--pl-tablet-glass-highlight);
        --pl-tablet-glass-active-shadow: 0 7px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--pl-tablet-glass-highlight);
    }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
        .md-product-list .pl-box-side {
            -webkit-backdrop-filter: blur(20px) saturate(1.25);
            backdrop-filter: blur(20px) saturate(1.25);
        }
    }
}

/* 手机 feature 采用静态玻璃轨迹，强调溯源顺序而不伪装成交互控件。 */
@media (max-width: 767px) {
    .md-product-list .pl-feature-journey,
    .md-product-list .pl-feature-assurance {
        padding: 22px 54px 22px 18px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: 18px;
        background: var(--pl-mobile-glass-surface);
        box-shadow: var(--pl-mobile-glass-shadow);
    }

    .md-product-list .pl-feature-journey .pl-feature-group-head {
        gap: 14px;
    }

    .md-product-list .pl-feature-ledger-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        /* 紧凑卡片右侧为悬浮工具多留 36px，此处回移半值以保持视觉居中。 */
        transform: translateX(18px);
    }

    .md-product-list .pl-feature-ledger-summary li,
    .md-product-list .pl-feature-ledger-summary li:first-child,
    .md-product-list .pl-feature-ledger-summary li:last-child {
        justify-content: center;
        min-width: 0;
        min-height: 38px;
        padding: 6px 8px;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-surface-strong);
        box-shadow: inset 0 1px 0 var(--pl-mobile-glass-highlight);
    }

    .md-product-list .pl-feature-ledger-summary i {
        flex: 0 0 auto;
    }

    .md-product-list .pl-feature-steps {
        position: relative;
        margin-top: 18px;
        border-top: 0;
    }

    .md-product-list .pl-feature-steps::before {
        content: '';
        position: absolute;
        top: 36px;
        bottom: 36px;
        left: 23px;
        width: 1px;
        background: linear-gradient(to bottom, var(--pl-feature-accent-text), var(--pl-mobile-glass-border));
    }

    .md-product-list .pl-feature-step {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        min-height: 82px;
        padding: 13px 0;
        border-bottom: 0;
    }

    .md-product-list .pl-feature-step-marker {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--pl-mobile-glass-border);
        border-radius: var(--hs-radius-full);
        background: var(--pl-mobile-glass-surface-strong);
        box-shadow: var(--pl-mobile-glass-icon-shadow);
        font-size: 0;
        text-align: center;
    }

    .md-product-list .pl-feature-step-marker::after,
    .md-product-list .pl-feature-icon::after {
        content: '';
        position: absolute;
        top: 2px;
        right: 6px;
        left: 6px;
        height: 42%;
        border-radius: var(--hs-radius-full);
        background: linear-gradient(to bottom, var(--pl-mobile-glass-highlight), transparent);
        pointer-events: none;
    }

    .md-product-list .pl-feature-step-marker b {
        position: relative;
        z-index: 1;
        font-size: 13px;
    }

    .md-product-list .pl-feature-step-body {
        gap: 6px;
    }

    .md-product-list .pl-feature-assurance-list {
        margin-top: 18px;
        border-top: 0;
    }

    .md-product-list .pl-feature-assurance-item,
    .md-product-list .pl-feature-assurance-item:first-child,
    .md-product-list .pl-feature-assurance-item:last-child {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        padding: 15px 0;
    }

    .md-product-list .pl-feature-icon {
        position: relative;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border: 1px solid var(--pl-mobile-glass-border);
        background: var(--pl-mobile-glass-surface-strong);
        box-shadow: var(--pl-mobile-glass-icon-shadow);
    }

    .md-product-list .pl-feature-icon i {
        position: relative;
        z-index: 1;
    }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (max-width: 767px) {
        .md-product-list .pl-feature-journey,
        .md-product-list .pl-feature-assurance,
        .md-product-list .pl-feature-ledger-summary li,
        .md-product-list .pl-feature-step-marker,
        .md-product-list .pl-feature-icon {
            -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
        }
    }
}

@media (max-width: 420px) {
    .pl-hero-actions {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .pl-hero-actions .pl-magnetic-wrap,
    .pl-hero-actions > .pl-btn {
        flex: 0 0 auto;
        width: 100%;
    }

    .pl-hero-actions .pl-btn-magnetic,
    .pl-hero-actions > .pl-btn {
        width: 100%;
    }
}

/* 手机内容密度：缩短商品选择区纵向留白，并拉开两张信任卡的层级。 */
@media (max-width: 599px) {
    .md-product-list {
        --pl-box-padding-y: 30px;
    }

    .md-product-list .pl-feature-assurance {
        margin-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-product-list *,
    .md-product-list *::before,
    .md-product-list *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .md-product-list .pl-reveal,
    .md-product-list .pl-reveal-stagger > *,
    .md-product-list .pl-motion-ready .pl-word {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 901px) {
    .md-product-list { --inner-page-module-gap: 60px; }
    .md-product-list > .pl-hero { margin-bottom: 0 !important; }
    .md-product-list > .pl-story,
    .md-product-list > .pl-specs {
        margin-top: var(--inner-page-module-gap) !important;
        margin-bottom: 0 !important;
    }
}

/* 桌面商品区与参数区分别控制间距，避免改动共享 token。 */
@media (min-width: 834px) {
    .md-product-list > .pl-box-module {
        padding-top: 80px;
    }

    .md-product-list > .pl-specs {
        margin-top: 80px !important;
    }

    .md-product-list .pl-specs-layout {
        margin-bottom: 60px;
        padding-top: 0;
    }
}