/* 产品首屏背景视频舞台：媒体只承载氛围，正文和交互保持独立。 */
.md-product-list .pl-hero {
    --pl-video-bg: #050807;
    --pl-video-text: #f4f6f2;
    --pl-video-text-secondary: #c4cbc4;
    --pl-video-text-tertiary: #929c94;
    --pl-video-accent-soft: var(--dm-accent-soft);
    --pl-video-accent-strong: var(--dm-accent-strong);
    --pl-video-accent-on-image: color-mix(in srgb, var(--dm-accent) 34%, var(--pl-video-text));
    --pl-video-divider: rgba(211, 221, 207, 0.21);
    --pl-video-action: var(--dm-action-bg);
    --pl-video-action-hover: var(--dm-action-bg-hover);
    --pl-video-action-text: var(--dm-action-text);
    isolation: isolate;
    border-bottom-color: var(--pl-video-divider);
    background: var(--pl-video-bg);
    color: var(--pl-video-text);
}

.md-product-list .pl-hero > .pl-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--pl-video-bg);
    pointer-events: none;
}

.md-product-list .pl-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(2, 5, 4, 0.34);
    pointer-events: none;
}

.md-product-list .pl-hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.76) saturate(0.72) contrast(1.04);
    opacity: 1;
    transition: opacity 600ms ease;
    pointer-events: none;
}

.md-product-list .pl-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--pl-video-bg);
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.76) saturate(0.72) contrast(1.04);
    opacity: 0;
    transform: scale(1.002);
    transition: opacity 600ms ease;
    pointer-events: none;
}

.md-product-list .pl-hero-bg.is-video-ready.is-video-playing .pl-hero-video {
    opacity: 1;
}

.md-product-list .pl-hero-bg.is-video-ready.is-video-playing .pl-hero-fallback {
    opacity: 0;
}

.md-product-list .pl-hero-bg[data-video-state="empty"] .pl-hero-video,
.md-product-list .pl-hero-bg[data-video-state="error"] .pl-hero-video {
    display: none;
}

.md-product-list .pl-hero-shell {
    z-index: 2;
}

.md-product-list .pl-hero-eyebrow {
    border-color: var(--pl-video-accent-strong);
    background: var(--pl-video-accent-soft);
    color: var(--pl-video-text);
}

.md-product-list .pl-hero-title,
.md-product-list .pl-hero-offer .pl-cta-title,
.md-product-list .pl-hero-actions .pl-btn-ghost {
    color: var(--pl-video-text);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.68);
}

.md-product-list .pl-hero-title .pl-word:nth-child(2),
.md-product-list .pl-hero-offer .pl-cta-title span {
    color: var(--pl-video-accent-on-image);
}

.md-product-list .pl-hero-subtitle,
.md-product-list .pl-hero-offer .pl-cta-sub {
    color: var(--pl-video-text-secondary);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.76);
}

.md-product-list .pl-hero-occasions {
    color: var(--pl-video-text-tertiary);
}

.md-product-list .pl-hero-occasions li {
    border-color: var(--pl-video-accent-strong);
    background: var(--pl-video-accent-soft);
    color: var(--pl-video-text-secondary);
}

.md-product-list .pl-hero-offer {
    border-left-color: var(--pl-video-divider);
}

.md-product-list .pl-hero-actions .pl-btn-magnetic {
    background: var(--pl-video-action);
    color: var(--pl-video-action-text);
    box-shadow: 0 14px 32px var(--dm-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.md-product-list .pl-hero-actions .pl-btn-magnetic:hover {
    background: var(--pl-video-action-hover);
}

.md-product-list .pl-hero-actions .pl-btn-ghost {
    border: 1px solid var(--pl-video-divider);
    background: rgba(255, 255, 255, 0.08);
}

.md-product-list .pl-hero-actions .pl-btn-ghost:hover {
    border-color: var(--pl-video-accent-strong);
    background: var(--pl-video-accent-soft);
}

.md-product-list .pl-hero-actions .pl-btn:focus-visible,
.md-product-list .pl-hero-actions .pl-btn-magnetic:focus-visible {
    outline-color: var(--dm-focus);
}

/* 系统暗黑与手动暗黑必须同时维护，避免不同主题入口下边界层次不一致。 */
@media (prefers-color-scheme: dark) {
    html:not(.husir-light) .md-product-list .pl-hero {
        --pl-video-divider: rgba(218, 226, 213, 0.24);
        --pl-video-text-secondary: #cbd1cb;
        --pl-video-text-tertiary: #9ba49d;
    }
}

html.husir-dark .md-product-list .pl-hero {
    --pl-video-divider: rgba(218, 226, 213, 0.24);
    --pl-video-text-secondary: #cbd1cb;
    --pl-video-text-tertiary: #9ba49d;
}

@media (min-width: 834px) {
    .md-product-list .pl-hero > .pl-hero-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: min(var(--pl-video-natural-height, 56.25vw), calc(100vh - var(--mh-header-h, 136px) - 1px));
        height: min(var(--pl-video-natural-height, 56.25vw), calc(100dvh - var(--mh-header-h, 136px) - 1px));
    }

    .md-product-list .pl-hero-video {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .md-product-list .pl-hero-bg[data-video-state="empty"] .pl-hero-video,
    .md-product-list .pl-hero-bg[data-video-state="error"] .pl-hero-video {
        display: block;
    }

    .md-product-list .pl-hero-shell {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
}

/* 低高度横屏仍沿用横排导航，但首屏文案必须随视频舞台一起收敛到一屏内。 */
@media (min-width: 834px) and (max-height: 599px) {
    .md-product-list .pl-hero-shell {
        grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
        column-gap: 24px;
        row-gap: 12px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .md-product-list .pl-hero-copy {
        margin-left: clamp(24px, 5vw, 64px);
    }

    .md-product-list .pl-hero-eyebrow {
        margin-bottom: 8px;
        padding: 3px 8px;
        font-size: 11px;
    }

    .md-product-list .pl-hero-title {
        font-size: 36px;
        line-height: 1.06;
    }

    .md-product-list .pl-hero-subtitle {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.4;
    }

    .md-product-list .pl-hero-occasions {
        margin-top: 8px;
        font-size: 11px;
    }

    .md-product-list .pl-hero-occasions li {
        padding: 2px 6px;
    }

    .md-product-list .pl-hero-offer {
        padding: 8px 0 8px 20px;
    }

    .md-product-list .pl-hero-offer .pl-cta-title {
        font-size: 20px;
    }

    .md-product-list .pl-hero-offer .pl-cta-sub {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.4;
    }

    .md-product-list .pl-hero-actions {
        padding-left: 20px;
    }
}

@media (max-width: 833px) {
    .md-product-list .pl-hero-offer {
        border-top-color: var(--pl-video-divider);
    }
}

/* 手机端收敛为单一编辑式首屏；768px 以上继续使用既有平板和桌面布局。 */
@media (max-width: 767px) {
    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero {
        min-height: 548px;
        padding: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero > .pl-hero-bg::after {
        background: rgba(2, 5, 4, 0.56);
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-video {
        object-position: 58% center;
        filter: brightness(0.72) saturate(0.72) contrast(1.06);
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-shell {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: calc(100% - 32px);
        min-height: 548px;
        padding: 86px 0 20px;
        row-gap: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-copy {
        align-self: stretch;
        max-width: none;
        margin: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-eyebrow {
        width: fit-content;
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--pl-video-text-secondary);
        font-size: 12px;
        line-height: 1.5;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-title {
        max-width: 8ch;
        font-size: 40px;
        line-height: 1.08;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-title .pl-word:nth-child(2) {
        padding-top: 2px;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-subtitle {
        max-width: 24em;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.55;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-occasions {
        gap: 0;
        margin-top: 12px;
        color: var(--pl-video-text-secondary);
        font-size: 13px;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-occasions li {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-occasions li + li::before {
        content: "/";
        margin: 0 10px;
        color: var(--pl-video-text-tertiary);
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-offer {
        align-self: stretch;
        margin-top: auto;
        padding: 16px 0 0;
        border-top: 1px solid var(--pl-video-divider);
        border-left: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-offer .pl-cta-title {
        font-size: 20px;
        line-height: 1.25;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-offer .pl-cta-sub {
        max-width: 32em;
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.55;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-self: stretch;
        width: 100%;
        max-width: none;
        gap: 10px;
        margin: 16px 0 0;
        padding: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-actions .pl-magnetic-wrap,
    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-actions > .pl-btn {
        width: 100%;
        min-width: 0;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-actions .pl-btn-magnetic,
    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-actions > .pl-btn {
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero,
    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-shell {
        min-height: 536px;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-shell {
        padding-top: 82px;
    }

    body.custom-override.mobile-header-overlay main.md-product-list > .pl-hero .pl-hero-title {
        font-size: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-product-list .pl-hero-fallback,
    .md-product-list .pl-hero-video {
        transition: none;
    }
}