/**
 * Nolik Lab 页样式 - nolik-lab.css
 *
 * 设计基准：1920px 宽（与项目通用约定一致）；默认样式按桌面/大屏书写。
 *
 * 文件结构：
 * 1. 页面与 Header
 * 2. Hero
 * 3. Details 轮播（与 style.css 公用类名，此处仅 Nolik Lab 差异）
 * 4. Nolik 技术
 * 5. 环境测试轮播
 * 6. 寿命数据 Lifespan
 * 7. 零浪费 Zero Waste
 * 8. Platform Story
 * 9. Nolik Platform
 * 10. Nolik Experience
 * 11. 底部 Contact CTA（DOM/样式与首页共用 components.css .site-call-to-action）
 * 12. 响应式（媒体查询集中在文末，断点从大到小排列）
 */

/* ========== 1. 页面与 Header ========== */
/* 全宽区块左右 padding：桌面 235px，移动端 40px */
.nolik-lab-page {
    --section-title-mb: 40px;
    --section-padding: 150px;
    background: var(--color-surface);
}

/* 固定副导航（与 tela-kit .fixed-secondary-menu--tela 同结构） */
.fixed-secondary-menu--nolik {
    background: rgba(210, 204, 193, 1);
    color: var(--color-base-primary);
}

.fixed-secondary-menu--nolik.fixed-secondary-menu--visible {
    border-bottom: 1px solid var(--color-border);
    max-height: 120px;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__inner {
    height: 65px;
    box-sizing: border-box;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__brand {
    color: var(--color-base-primary);
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__brand-img {
    max-width: 100px;
    height: auto;
    display: block;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__logo-img {
    width: 42px;
    height: auto;
    object-fit: contain;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__action {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-self: end;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__nav-item {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-base-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__nav-item:hover {
    opacity: 0.85;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__nav-item--active {
    font-weight: 600;
    opacity: 1;
    border-bottom-color: var(--color-base-primary);
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__btn {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-base-primary);
    border: 1px solid var(--color-base-primary);
    border-radius: 9999px;
    background: transparent;
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__btn:hover {
    background: var(--color-base-primary);
    color: var(--color-surface-warm);
}

.fixed-secondary-menu--nolik .fixed-secondary-menu__menu-btn {
    display: none;
}

/* ========== 2. Hero ========== */
.nolik-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-dark);
    padding: 4rem 0 5rem;
    text-align: center;
    overflow: hidden;
}

.nolik-hero__bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.nolik-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    will-change: opacity, transform;
}

/* Hero 视频层：滚动时渐显覆盖背景 */
.nolik-hero__video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nolik-hero__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}

.nolik-hero__video-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 70% at 50% 35%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.10) 35%, rgba(0, 0, 0, 0.35) 100%);
}

.nolik-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto;
    padding-top: clamp(80px, 10vh, 140px);
    padding-bottom: clamp(60px, 8vh, 120px);
}

.nolik-hero__inner,
.nolik-hero__video-wrapper {
    will-change: transform, opacity;
}

.nolik-hero__brand {
    font-size: var(--font-size-20);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0;
    opacity: 0.95;
}

.nolik-hero__subtitle {
    font-size: var(--font-size-18);
    letter-spacing: 0.2em;
    margin-top: 6.25rem;
    opacity: 0.95;
}

.nolik-hero__title {
    font-size: clamp(1.5rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.nolik-hero__title span {
    display: block;
}

/* Watch Video 按钮：深色底、浅色描边与文字、右侧箭头 */
.nolik-hero__cta {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: var(--font-size-16);
    letter-spacing: 0.02em;
    color: #E0DED7;
    text-decoration: none;
    background-color: #3A3832;
    border: 1px solid #E0DED7;
    border-radius: 9999px;
    margin: 0.5rem 0 2rem;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.nolik-hero__cta:hover {
    opacity: 0.9;
    background-color: #4a4840;
}

.nolik-hero__cta-icon {
    font-size: 1.25em;
    line-height: 1;
}

.nolik-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
}

html.is-nolik-video-open,
body.is-nolik-video-open {
    overflow: hidden;
}

.nolik-video-modal.is-open {
    display: block;
}

.nolik-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.nolik-video-modal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(920px, calc(100% - 32px));
    transform: translate(-50%, -50%);
}

.nolik-video-modal__player {
    display: block;
    width: 100%;
    max-height: calc(100vh - 96px);
    background: #000;
    border-radius: 10px;
}

.nolik-video-modal__close {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    z-index: 2;
}

.nolik-video-modal__close::before,
.nolik-video-modal__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 2px;
    background: #fff;
}

.nolik-video-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nolik-video-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ========== 3. Details 轮播（公用结构见 style.css，此处仅 nolik-lab 差异） ========== */
.details-slider.section-highlights.staggered-end {
    background: var(--color-surface-dark);
    color: var(--color-text);
}

.details-slider__headline {
    color: #FCFBF4;
}

/* .details-slider__card {
    background: var(--color-surface-alt);
} */

.details-slider__card:first-child .details-slider__card-title {
    color: var(--color-accent);
}

.details-slider__card-content {
    font-size: var(--font-size-36);
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    text-align: center;
    z-index: 2;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    color: var(--color-surface-alt);
}

.details-slider__card-content * {
    -webkit-user-select: text;
    user-select: text;
}

.details-slider__card-title {
    margin: 0;
}

.details-slider__arrow {
    color: #E6D7BE;
}

/* ========== 4. Nolik 技术 ========== */
.nolik-technology {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #181818 46.15%, rgba(24, 24, 24, 0.526786) 71.63%, rgba(24, 24, 24, 0) 100%);
    /* background: var(--color-surface-dark); */
    color: #FCFBF4;
    padding: 4rem 0 0;
    isolation: isolate;
    text-align: center;
}

.nolik-technology::before,
.nolik-technology::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(90px);
    z-index: 0;
}

.nolik-technology::before {
    left: -14%;
    bottom: -18%;
    width: 520px;
    height: 520px;
    background: rgba(176, 154, 132, 0.28);
}

.nolik-technology::after {
    right: -10%;
    top: 36%;
    transform: translateY(-50%);
    width: 560px;
    height: 560px;
    background: rgba(165, 128, 92, 0.30);
}

.nolik-technology__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 0 auto;
}

.nolik-technology__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--section-title-mb);
}

.nolik-technology__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}

.nolik-technology__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #E6D7BE;
    letter-spacing: 0.02em;
    /* margin: 0; */
    line-height: 1.2;
    margin-bottom: var(--section-title-mb);
}

.nolik-technology__desc {
    font-size: var(--font-size-16);
    line-height: 1.6;
    color: rgba(252, 251, 244, 0.75);
    margin: 0;
    max-width: 520px;
}

.nolik-technology__figure-wrapper {
    position: relative;
    width: 100%;
    align-self: stretch; /* 父级是 column-flex 且 align-items:center，需显式拉伸宽度 */
}

.nolik-technology__figure {
    /* margin: 2.5rem 0; */
    width: 100%;
}

.nolik-technology__figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.nolik-technology__figure img::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 86%;
    height: 30px;
    background: radial-gradient(ellipse at center,
            rgba(255, 202, 132, 0.88) 0%,
            rgba(255, 165, 82, 0.25) 45%,
            transparent 75%);
    filter: blur(12px);
    z-index: 0;
}

.nolik-technology__subtitle-wrapper {
    position: absolute;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: min(1165px, calc(100% - (var(--container-padding, 20px) * 2)));
    box-sizing: border-box;
    padding-inline: var(--container-padding, 20px);
}

.nolik-technology__subtitle {
    font-size: var(--font-size-48);
    font-weight: 700;
    color: #E6D7BE;
    letter-spacing: 0.02em;
    margin-bottom: var(--section-title-mb);
    line-height: 1.2;
}

.nolik-technology__subtitle-desc{
    font-size: var(--font-size-16);
    opacity: 0.75;
}

/* ========== 5. 环境测试轮播 ========== */
.environmental-testing {
    --env-test-peek: 90px;
    --env-test-gap: 18px;
    --env-test-radius: 20px;
    --env-test-anim: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    padding: 4rem 0 5rem;
    background: var(--color-surface);
    color: #FCFBF4;
}

.environmental-testing__icon {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    margin-bottom: 2rem;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    text-align: left;
}

.environmental-testing__icon img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
}

.environmental-testing__inner {
    display: flex;
    flex-direction: column;
    gap: var(--section-title-mb);
}

.environmental-testing__content {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.environmental-testing__headline {
    flex-shrink: 0;
    font-size: var(--font-size-48);
    color: var(--color-text);
    font-weight: 700;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

.environmental-testing__headline span {
    display: block;
}

.environmental-testing__desc {
    flex: 1;
    min-width: 0;
    max-width: 650px;
    margin: 0;
    font-size: var(--font-size-16);
    line-height: 1.5;
    color: var(--color-text);
    text-align: left;
}

.lifespan__desc-highlight,
.environmental-testing__desc-highlight {
    font-weight: 700;
}

.environmental-testing__viewport {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    margin-right: -50dvw;
    overflow: hidden;
    padding: 0 var(--details-slider-padding);
    user-select: none;
}

.environmental-testing__hit {
    position: absolute;
    top: 0;
    bottom: 64px;
    width: 16%;
    z-index: 5;
    cursor: pointer;
}

.environmental-testing__hit--prev {
    left: 0;
}

.environmental-testing__hit--next {
    right: 0;
}

.environmental-testing__track {
    display: flex;
    align-items: flex-start;
    gap: var(--env-test-gap);
    will-change: transform;
    transition: transform var(--env-test-anim);
}

.environmental-testing__card {
    flex: 0 0 calc(100% - (var(--env-test-peek) * 2));
    min-width: max(260px, var(--env-test-card-img-min-width, 1450px));
    max-width: 1450px;
    border-radius: var(--env-test-radius);
    overflow: hidden;
    background: rgba(252, 251, 244, 0.08);
    /* border: 1px solid rgba(230, 215, 190, 0.2); */
    position: relative;
    transform: scale(0.985);
    opacity: 0.9;
    transition: transform var(--env-test-anim), opacity var(--env-test-anim);
}

.environmental-testing__card--active {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(230, 215, 190, 0.4);
}

.environmental-testing__card-img {
    border-radius: inherit;
}

.environmental-testing__card-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
}

.environmental-testing__card-content {
    font-size: var(--font-size-36);
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    text-align: center;
    z-index: 2;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    color: var(--color-surface-alt);
}

.environmental-testing__card-content * {
    -webkit-user-select: text;
    user-select: text;
}

.environmental-testing__card-title {
    margin: 0;
}

.environmental-testing__pagination {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    padding: 1.5rem var(--details-slider-padding) 0;
    display: flex;
    align-items: center;
    justify-content: start;
}

.environmental-testing__dots {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 14px;
    height: 44px;
    background: rgba(252, 251, 244, 0.1);
    background: var(--color-primary);
    border: 1px solid rgba(230, 215, 190, 0.5);
    border-radius: 35px;
}

.environmental-testing__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(252, 251, 244, 0.35);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.environmental-testing__dot:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.environmental-testing__dot--active {
    background: #E6D7BE;
    width: 12px;
    height: 12px;
}

.environmental-testing__arrow {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(230, 215, 190, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.environmental-testing__arrow:hover {
    color: #E6D7BE;
    transform: scale(1.05);
}

.environmental-testing__arrow svg {
    display: block;
    flex-shrink: 0;
}

/* ========== 6. 寿命数据 Lifespan ========== */
.lifespan {
    padding: 4rem 0 5rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.lifespan__icon {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    margin-bottom: 2rem;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    text-align: left;
}

.lifespan__icon img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
}

.lifespan__inner {
    display: flex;
    flex-direction: column;
    gap: var(--section-title-mb);
}

.lifespan__content {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.lifespan__headline {
    flex-shrink: 0;
    font-size: var(--font-size-48);
    color: var(--color-text);
    font-weight: 700;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

.lifespan__headline span {
    display: block;
}

.lifespan__desc {
    flex: 1;
    min-width: 0;
    max-width: 650px;
    margin: 0;
    font-size: var(--font-size-16);
    line-height: 1.5;
    color: var(--color-text);
    text-align: left;
}

/* lifespan__chart：与 lifespan__content 对齐，使用相同左右 padding */
.lifespan__chart {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    margin-top: 2rem;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
}

.lifespan__chart>.lifespan__chart-inner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* min-height: 480px; */
}

@media (min-width: 769px) {
    .lifespan__chart>.lifespan__chart-inner {
        min-height: 780px;
    }
}

.lifespan__chart-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

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

.lifespan__chart-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 2.5rem 3.5rem;
    position: relative;
    z-index: 0;
}

.lifespan__chart-card {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    max-width: 320px;
    border-radius: 20px;
    padding: 1.75rem 2rem;
    color: #e8e6e3;
}

.lifespan__chart-item {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lifespan__chart-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lifespan__chart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lifespan__chart-label {
    font-size: var(--font-size-14);
    color: rgba(232, 230, 227, 0.75);
}

.lifespan__chart-value {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    color: #e8e6e3;
    line-height: 1.2;
}

.lifespan__chart-sublabel {
    font-size: var(--font-size-14);
    color: rgba(232, 230, 227, 0.75);
    margin-top: 0.15rem;
}

.lifespan__chart-sublabel--refill {
    display: none;
}

.lifespan__chart-figure {
    margin: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lifespan__chart-figure img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lifespan__chart-disclaimer {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    margin-top: 1rem;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}

/* ========== 7. 零浪费 Zero Waste ========== */
.zero-waste-section {
    padding: 4rem 0 5rem;
    /* background: #fefefa; */
}

.zero-waste-section__inner {
    text-align: center;
}

.zero-waste-section__heading {
    margin: 0 0 2rem;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-image: url("../images/nolik/webp/mask.webp");
    background-size: 150%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
}

.zero-waste-section__heading span {
    display: block;
}

.zero-waste-section__content {
    text-align: left;
    margin-top: 2rem;
}

.zero-waste-section__row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 5rem;
    justify-content: space-between;
    margin: 0 auto;
}

.zero-waste-section__left {
    flex: 1;
    min-width: 0;
}

.zero-waste-section__icon {
    margin-bottom: 1.5rem;
}

.zero-waste-section__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.zero-waste-section__content-title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.zero-waste-section__content-title sup {
    font-size: 0.6em;
    vertical-align: super;
}

.zero-waste-section__desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #4a4a4a;
    max-width: 540px;
}

.zero-waste-section__right {
    flex: 1;
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 1rem;
}

.zero-waste-section__right-top {
    flex-shrink: 0;
}

.zero-waste-section__right-top .zero-waste-section__icon {
    margin-bottom: 1.5rem;
}

.zero-waste-section__right-top .zero-waste-section__content-title {
    margin-bottom: 1.25rem;
}

.zero-waste-section__right-top .zero-waste-section__desc {
    margin-top: 0;
}

.zero-waste-section__right-bottom {
    flex-shrink: 0;
}

.zero-waste-section__figure {
    margin: 0;
    width: 100%;
}

.zero-waste-section__figure picture {
    display: block;
    width: 100%;
}

.zero-waste-section__figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.zero-waste-section__disclaimer {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.45);
    text-align: left;
    max-width: 540px;
}

/* ========== 8. Platform Story ========== */
.platform-story {
    position: relative;
    /* background: #f5f3ee; */
    overflow: visible;
    min-height: 560px;
}

.platform-story__top {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: linear-gradient(180deg, #2c2419 0%, #1a1510 50%, #0f0d0a 100%);
}

.platform-story__heading {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 4rem var(--details-slider-padding) 2rem;
    font-size: var(--font-size-48);
    font-weight: 700;
    color: var(--color-surface-dark);
    text-align: center;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.platform-story__curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.platform-story__curve path {
    display: block;
    width: 100%;
    height: 100%;
    vector-effect: non-scaling-stroke;
}

.platform-story__content {
    position: relative;
    z-index: 2;
    background: #f5f3ee;
    padding: 2rem 0 4rem;
}

.platform-story__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
    margin: 0 auto;
}

.platform-story__left {
    flex: 0 0 auto;
    min-width: 0;
}

.platform-story__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.platform-story__img {
    width: 100%;
    max-width: 715px;
    height: auto;
    border-radius: 20px;
    display: block;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.platform-story__caption {
    font-size: var(--font-size-16);
    color: #222;
    text-align: center;
    margin: 0;
}

.platform-story__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.platform-story__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.platform-story__title-line {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.platform-story__text {
    margin: 0;
    font-size: var(--font-size-24);
    line-height: 1.5;
    color: #3d3d3d;
    max-width: 650px;
}

.platform-story__conclusion {
    margin: 3rem auto 0;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #222;
    letter-spacing: 0.01em;
    max-width: 1200px;
    padding: 0 var(--details-slider-padding);
}

.platform-story__body {
    position: relative;
    background: linear-gradient(180deg, #EFE8D8 0%, #FCFBF4 100%);
}

.platform-story .curve-wrapper {
    position: relative;
    height: 11.25rem;
    overflow: hidden;
}


/**
 * .platform-story__curve-overlay 实现原理（纯 CSS 弧形遮罩）
 * 父级为 .curve-wrapper。弧底不超出容器：top + height 建议 ≤ 560，或依赖 .curve-wrapper overflow:hidden 裁剪
 */
.platform-story__curve-overlay {
    position: absolute;
    top: -200px;
    left: -25%;
    width: 150%;
    height: 300px;
    background: var(--color-surface);
    border-bottom-left-radius: 50% 300px;
    border-bottom-right-radius: 50% 300px;
    z-index: 1;
}

/* Traditional Pod 区块：图+文案，在弧形下方 */
.platform-story .traditional-pod-wrapper {
    position: relative;
    z-index: 0;
}

.platform-story .traditional-pod-content {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 9rem;
    margin: 9rem auto;
}

.platform-story .traditional-pod-image {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.platform-story .traditional-pod-image img {
    width: 100%;
    max-width: min(520px, 100%);
    height: auto;
    display: block;
    border-radius: 20px;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.platform-story .traditional-pod-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: start;
    text-align: left;
}

.platform-story .traditional-pod-title {
    margin: 0;
    font-size: var(--font-size-24);
    font-weight: 700;
    color: #222;
    letter-spacing: 0.01em;
}

.platform-story .traditional-pod-title span {
    display: block;
}

.platform-story .traditional-pod-desc {
    margin: 0;
    font-size: var(--font-size-24);
    color: #3d3d3d;
    max-width: 560px;
}


/* ========== 9. Nolik Platform ========== */
.nolik-platform-title {
    text-align: center;
    padding: var(--details-slider-padding) 0;
    font-size: var(--font-size-36);
}

.nolik-platform-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--section-title-mb);
}

.nolik-platform-title {
    text-align: center;
    margin-bottom: var(--section-title-mb);
}

.nolik-platform-content-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--section-title-mb);
}

.nolik-platform-content-left{
    flex: 1;
    min-width: 0;
    max-width: 450px;
    font-size: var(--font-size-24);
}


.nolik-platform-content-right{
    flex: 1;
    min-width: 0;
}

.nolik-platform-content-text p{
    line-height: 1.5;
    margin-bottom: 1rem;
}

.nolik-platform-content-text .highlight-text{
    font-weight: 700;
}

.nolik-platform-card-title {
    font-size: var(--font-size-36);
    font-weight: 500;
    color: var(--color-surface-dark);
    text-align: center;
    letter-spacing: 0.02em;
    padding: var(--details-slider-padding) 0;
}

/* .nolik-platform-card-title span {
    display: block;
} */


/* ========== 10. Nolik Experience（参考 test4：标题 + 弧形米色带 + 产品图 + 下方文案区） ========== */
.nolik-experience {
    overflow: hidden;
    /* background: #f5f3ee; */
    color: #111;
}

.nolik-experience__hero {
    text-align: center;
    padding: var(--section-padding) 20px 36px;
}

.nolik-experience__title {
    margin: 0;
    font-size: var(--font-size-48);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: var(--section-title-mb);
}

.nolik-experience__subtitle {
    font-size: var(--font-size-24);
    font-weight: 300;
    color: var(--color-surface-dark);
    margin: 0 auto;
}

/* 中间弧形米色区域：背景层固定高度，产品卡叠在上层（图文同卡） */
.nolik-experience__curve-band {
    position: relative;
    overflow: visible;
    height: auto;
    background: transparent;
    padding-bottom: 0;
}

.nolik-experience__curve-band-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 520px;
    background: #EFE8D8;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.nolik-experience__curve-band-bg::before,
.nolik-experience__curve-band-bg::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 102%;
    height: 240px;
    background: var(--color-surface);
    border-radius: 50%;
    z-index: 0;
}

.nolik-experience__curve-band-bg::before {
    top: -140px;
}

.nolik-experience__curve-band-bg::after {
    bottom: -140px;
}

.nolik-experience__product-grid {
    position: relative;
    z-index: 1;
    max-width: 1165px;
    margin: 0 auto;
    padding: 0 0 90px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 40px;
}

.nolik-experience__card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 100%;
}

.nolik-experience__card-visual {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 0;
}

.nolik-experience__image-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.nolik-experience__image-wrap img {
    width: 100%;
    max-width: 220px;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    border-radius: 18px;
    /* box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08); */
}

.nolik-experience__card-body {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 56px;
    text-align: center;
    box-sizing: border-box;
}

.nolik-experience__card-title {
    margin: 0 0 14px;
    font-size: var(--font-size-24);
    line-height: 1.2;
    color: #111;
}

.nolik-experience__card-desc {
    margin: 0 0 24px;
    font-size: var(--font-size-14);
    line-height: 1.5;
    color: #555;
}

.nolik-experience__card-compatible,
.nolik-experience__card-capacity {
    display: block;
}

.nolik-experience__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px;
    padding: 19px 22px;
    border: 1px solid #a2666c;
    border-radius: 999px;
    color: #222;
    text-decoration: none;
    font-size: var(--font-size-12);
    transition: all 0.25s ease;
    background: transparent;
}

.nolik-experience__link:hover {
    background: #a2666c;
    color: #fff;
}

.nolik-experience__link-text {
    display: inline;
}

/* ========== 12. 响应式（设计基准 1920px；媒体查询按覆盖面从大到小） ==========
 * 顺序：min 大屏 / 4K → max 1024 → max 768 → prefers-reduced-motion
 */

/* --- min-width: 2560px / 1920px@高 DPI（4K / 超宽屏，figure 满屏） --- */
@media (min-width: 2560px), (min-width: 1920px) and (min-resolution: 1.25dppx) {
    .nolik-technology__figure {
        width: 100dvw;
        position: relative;
        left: 50%;
        margin-left: -50dvw;
        margin-right: -50dvw;
        height: clamp(720px, 72vh, 980px);
        overflow: hidden;
    }

    .nolik-technology__figure img {
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* --- max-width: 1024px --- */
@media (max-width: 1024px) {
    .nolik-experience__title {
        font-size: 50px;
    }

    .nolik-experience__curve-band-bg {
        height: 380px;
    }

    .nolik-experience__curve-band-bg::before,
    .nolik-experience__curve-band-bg::after {
        width: 180%;
    }
}

/* --- max-width: 768px（Details 轮播等，仅 .nolik-lab-page） --- */
@media (max-width: 768px) {

    .nolik-lab-page {
        --section-title-mb: 20px;
    }

    /*
     * 335×340 为切图源尺寸；渲染宽 = 视口 − 留白 − peek。
     * 收窄本页 --details-slider-padding 与 peek，使卡片更接近设计稿。
     */
    .nolik-lab-page {
        --details-slider-padding: 16px;
    }

    /* 与 components 一致：小屏取消 dvw breakout，避免旧内核不认 dvw 时出现右侧留白与横滚 */
    .environmental-testing__icon,
    .environmental-testing__content,
    .environmental-testing__viewport,
    .environmental-testing__pagination,
    .lifespan__icon,
    .lifespan__content,
    .lifespan__chart,
    .lifespan__chart-disclaimer {
        width: 100%;
        left: 0;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* 环境测试区块：移动端左右 20px，与全页 16px 细节轮播留白区分 */
    .nolik-lab-page .environmental-testing {
        --details-slider-padding: 20px;
    }

    .nolik-lab-page .details-slider__inner {
        gap: 1.25rem;
    }

    .nolik-lab-page .details-slider__headline {
        font-size: clamp(1.5rem, 5vw, var(--font-size-48));
    }

    .nolik-lab-page .details-slider__viewport {
        padding-bottom: 0;
    }

    .nolik-lab-page .details-slider__card {
        --details-slider-peek: 12px;
        --details-slider-radius: 28px;
        box-sizing: border-box;
        align-self: flex-start;
        aspect-ratio: 335 / 340;
    }

    .nolik-lab-page .details-slider__card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        border-radius: inherit;
        overflow: hidden;
    }

    .nolik-lab-page .details-slider__card-img picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .nolik-lab-page .details-slider__card-img img {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
    }

    .nolik-lab-page .details-slider__card-content {
        bottom: 14px;
        padding: 0 16px;
    }

    .nolik-lab-page .details-slider__card-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        color: #fcfcf4;
    }

    .nolik-lab-page .details-slider__card:first-child .details-slider__card-title {
        color: #fcfcf4;
    }

    .nolik-lab-page .details-slider__pagination {
        padding-top: 1rem;
    }

    .nolik-lab-page .details-slider__dots {
        align-items: center;
        gap: 7px;
        padding: 8px 12px 8px 14px;
        min-height: 0;
        height: auto;
        background: rgba(252, 251, 244, 0.2);
        border: 1px solid rgba(230, 215, 190, 0.45);
        border-radius: 9999px;
    }

    .nolik-lab-page .details-slider__dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.22);
    }

    .nolik-lab-page .details-slider__dot--active {
        background: #e6d7be;
        box-shadow: none;
    }

    .nolik-lab-page .details-slider__arrow {
        margin-left: 4px;
        color: #fcfcf4;
    }

    .nolik-lab-page .details-slider__hit {
        bottom: 52px;
    }

    .nolik-technology__icon, .zero-waste-section__icon img {
        width: 48px;
        height: 48px;
    }

    .nolik-technology__title, .nolik-technology__subtitle, .nolik-experience__title {
        font-size: var(--font-size-24);
    }

    .nolik-technology__desc {
        font-size: var(--font-size-10);
    }

    .nolik-technology__subtitle-wrapper {
        bottom: 20px;
    }

    .nolik-technology__subtitle span {
        display: block;
    }

    .nolik-technology__subtitle-desc {
        font-size: var(--font-size-8);
    }

    .environmental-testing__icon {
        position: static;
        width: 100%;
        max-width: 100%;
        left: auto;
        margin: 0 0 20px;
        padding: 0 var(--details-slider-padding);
        box-sizing: border-box;
    }

    .environmental-testing__icon img {
        max-width: 48px;
    }

    /*
     * 环境测试 viewport / 卡片 / 分页：移动端布局对齐 .nolik-lab-page .details-slider__*
     *（间距、比例、触控区、字号档位；不覆盖背景/边框/主题色）
     */
    .nolik-lab-page .environmental-testing__inner {
        gap: 1.25rem;
    }

    .nolik-lab-page .environmental-testing__viewport {
        padding-bottom: 0;
        padding: 0;
    }

    .nolik-lab-page .environmental-testing__card {
        --env-test-peek: 12px;
        --env-test-radius: 28px;
        box-sizing: border-box;
        align-self: flex-start;
        aspect-ratio: 335 / 340;
    }

    .nolik-lab-page .environmental-testing__card > picture {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: inherit;
        overflow: hidden;
    }

    .nolik-lab-page .environmental-testing__card > picture img {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .nolik-lab-page .environmental-testing__card-content {
        bottom: 14px;
        padding: 0 16px;
    }

    .nolik-lab-page .environmental-testing__card-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .nolik-lab-page .environmental-testing__pagination {
        padding-top: 1rem;
    }

    .nolik-lab-page .environmental-testing__dots {
        align-items: center;
        gap: 7px;
        padding: 8px 12px 8px 14px;
        min-height: 0;
        height: auto;
        border-radius: 9999px;
    }

    .nolik-lab-page .environmental-testing__dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
    }

    .nolik-lab-page .environmental-testing__dot--active {
        width: 8px;
        height: 8px;
        box-shadow: none;
    }

    .nolik-lab-page .environmental-testing__arrow {
        margin-left: 4px;
    }

    .nolik-lab-page .environmental-testing__hit {
        bottom: 52px;
    }

    /* 取消 100vw breakout，保留与区块变量一致的左右留白（勿写 padding: 0，会贴边溢出） */
    .environmental-testing__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: static;
        width: 100%;
        max-width: 100%;
        left: auto;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .environmental-testing__desc {
        font-size: var(--font-size-10);
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .environmental-testing__headline {
        font-size: var(--font-size-24);
        font-weight: 600;
        overflow-wrap: anywhere;
        margin-bottom: var(--section-title-mb);
    }

    .environmental-testing__desc-highlight {
        font-weight: 600;
    }

    /* 与 details-slider 一致：小屏 min-width，peek/hit 与本段 max-width:768px 规则统一 */
    .nolik-lab-page .environmental-testing__card {
        min-width: 200px;
    }

    .zero-waste-section__row {
        flex-direction: column;
        gap: 2rem;
    }

    .zero-waste-section__figure {
        max-width: 100%;
    }

    /* Lifespan：上图 + 浅色 2×2 数据格（仅水平分割线，参考移动端稿） */
    .lifespan {
        padding: 2.5rem 0 3rem;
    }

    .lifespan__icon {
        margin-bottom: 1.25rem;
    }

    .lifespan__icon img {
        max-width: 88px;
    }

    .lifespan__inner {
        gap: 1.25rem;
    }

    .lifespan__headline {
        font-size: var(--font-size-24);
        line-height: 1.25;
    }

    .lifespan__headline span {
        display: inline;
    }

    .lifespan__headline span:first-child::after {
        content: "\00a0";
    }

    .lifespan__desc {
        font-size: var(--font-size-14);
        line-height: 1.55;
        max-width: 100%;
    }

    .lifespan__chart {
        margin-top: 0.5rem;
    }

    .lifespan__chart>.lifespan__chart-inner {
        border-radius: 20px;
    }

    .lifespan__chart-bg {
        position: relative;
        inset: auto;
        z-index: 0;
    }

    .lifespan__chart-bg img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .lifespan__chart-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
    }

    .lifespan__chart-card {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        align-items: stretch;
        padding: 0;
        border-radius: 0;
        /* background: #faf8f5; */
        color: var(--color-text);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .lifespan__chart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 1rem 0.75rem 1.1rem;
        margin: 0;
        border: 0;
    }

    .lifespan__chart-item:nth-child(1),
    .lifespan__chart-item:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .lifespan__chart-item:first-child {
        border-top: none;
    }

    .lifespan__chart-item:last-child {
        border-bottom: none;
        padding-bottom: 1.1rem;
    }

    .lifespan__chart-label {
        font-size: var(--font-size-8);
        color: rgba(0, 0, 0, 0.5);
        line-height: 1.3;
    }

    .lifespan__chart-value {
        font-size: var(--font-size-20);
        font-weight: 500;
        color: var(--color-text);
        line-height: 1.2;
        white-space: nowrap;
    }

    .lifespan__chart-sublabel {
        font-size: var(--font-size-8);
        color: rgba(0, 0, 0, 0.5);
        margin-top: 0.1rem;
        font-weight: 500;
    }

    .lifespan__chart-sublabel--refill {
        display: block;
    }

    .lifespan__chart-disclaimer {
        font-size: 6px;
        line-height: 1.45;
        margin-top: 0.75rem;
        text-align: left;
    }

    .lifespan__chart-figure {
        justify-content: center;
    }

    .lifespan__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /*
     * 移动端 Hero：高度由图比例主导（375×640 与 nolik-lab-mobile-bg 一致）。
     * 背景与文案同格叠放。
     */
    .nolik-hero {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
        padding: 0;
        align-items: stretch;
        justify-items: stretch;
    }

    .nolik-hero__bg-wrapper {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        inset: auto;
        width: 100%;
        aspect-ratio: 375 / 640;
        z-index: 0;
        align-self: stretch;
    }

    .nolik-hero__bg-wrapper picture {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .nolik-hero__bg-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transform: none;
    }

    .nolik-hero__video-wrapper {
        display: none !important;
    }

    .nolik-hero__cta {
        display: inline-flex;
        padding: 8px 20px;
        font-size: var(--font-size-8);
    }

    .nolik-hero__subtitle {
        font-size: var(--font-size-12);
    }

    .nolik-hero__title {
        font-size: var(--font-size-24);
        white-space: nowrap;
    }

    .nolik-hero__inner {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 3;
        align-self: center;
        justify-self: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        padding: clamp(64px, 14vw, 96px) 20px clamp(28px, 8vw, 40px);
        gap: 1rem;
    }

    .nolik-video-modal__dialog {
        width: calc(100% - 20px);
    }

    .nolik-video-modal__player {
        max-height: calc(100vh - 64px);
        border-radius: 8px;
    }

    .nolik-video-modal__close {
        right: 0;
        top: -42px;
    }


    .nolik-experience {
        margin: var(--section-title-mb) 0;
    }

    .nolik-experience__hero {
        padding-top: 48px;
        padding-left: var(--details-slider-padding);
        padding-right: var(--details-slider-padding);
    }


    .nolik-experience__curve-band {
        padding: 0 20px 0;
    }

    /* 移动端米色弧形带固定 150px；伪元素按桌面 520/240/±140 同比缩放并略收窄 width，弧不致过扁 */
    .nolik-experience__curve-band-bg {
        height: 150px;
    }

    .nolik-experience__curve-band-bg::before {
        top: -50px;
        width: 155%;
        height: 92px;
    }

    .nolik-experience__curve-band-bg::after {
        bottom: -50px;
        width: 155%;
        height: 92px;
    }

    /*
     * 与首页 .new-arrival__product-list 移动端一致：整卡横向滚动，一屏 2 列（仅布局）
     */
    .nolik-experience__product-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 20px) / 2);
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        padding: 0 0 32px;
        margin: 0 auto;
        max-width: 100%;
        text-align: center;
        /* 仅隐藏横向滚动条视觉，仍可滑动 / 箭头翻页 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nolik-experience__product-grid::-webkit-scrollbar {
        display: none;
    }

    .nolik-experience__product-grid .nolik-experience__card {
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: auto;
    }

    .nolik-experience__card-visual {
        flex: 0 0 auto;
        justify-content: center;
    }

    .nolik-experience__card-body {
        padding-top: 24px;
    }

    .nolik-experience__card--placeholder {
        visibility: hidden;
        pointer-events: none;
    }

    .platform-story__heading {
        padding: 1.25rem var(--details-slider-padding) 0.75rem;
        font-size: clamp(1.25rem, 5vw, 1.5rem);
        line-height: 1.25;
        position: relative;
        bottom: auto;
        text-align: center;
    }

    .platform-story__inner {
        flex-direction: column;
        gap: 2.5rem;
    }

    .platform-story__right {
        gap: 1.25rem;
    }

    .platform-story__conclusion {
        margin-top: 2rem;
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .zero-waste-section__heading {
        margin: 8rem 0 8rem;
        padding: 0;
    }

    .zero-waste-section{
        padding: 0;
    }

    .zero-waste-section__content {
        margin-top: 0;
    }

    .zero-waste-section__right {
        padding-left: 0;
        min-height: fit-content;
    }

    .zero-waste-section__content-title {
        font-size: var(--font-size-24);
    }

    .zero-waste-section__desc {
        font-size: var(--font-size-10);
    }

    .zero-waste-section__right-bottom {
        margin-top: 40px;
    }

    .zero-waste-section__disclaimer {
        font-size: var(--font-size-8);
    }

    .platform-story {
        min-height: 0;
        margin-top: clamp(3rem, 12vw, 6rem);
        margin-bottom: 5rem;
    }

    .platform-story .curve-wrapper {
        height: 2.5rem;
    }

    .platform-story__curve-overlay {
        top: -220px;
        left: -50%;
        width: 200%;
        height: 260px;
        border-bottom-left-radius: 50% 220px;
        border-bottom-right-radius: 50% 220px;
    }

    .platform-story .traditional-pod-wrapper {
        padding-inline: var(--details-slider-padding);
        box-sizing: border-box;
    }

    .platform-story .traditional-pod-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
        margin: 2.25rem auto 2.5rem;
    }

    .platform-story .traditional-pod-image {
        width: 100%;
    }

    .platform-story .traditional-pod-image img {
        max-width: 100%;
        border-radius: 18px;
    }

    .platform-story .traditional-pod-text, .nolik-platform-content-text {
        text-align: left;
        gap: 1rem;
        max-width: 230px;
        margin-left: auto;
        align-items: start;
    }

    .platform-story .traditional-pod-title {
        font-size: 12px;
        line-height: 1.25;
    }

    .platform-story .traditional-pod-desc {
        font-size: 10px;
        line-height: 1.55;
        max-width: none;
    }

    .nolik-platform-title {
        text-align: left;
        padding: 5.625rem var(--details-slider-padding);
        margin-bottom: 0;
        font-size: 1rem;
        line-height: 1.25;
    }

    .nolik-platform-content-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
        padding-inline: var(--details-slider-padding);
        box-sizing: border-box;
    }

    .nolik-platform-content-left {
        max-width: none;
        font-size: var(--font-size-12);
        order: 1;
    }

    .nolik-platform-content-right {
        order: 2;
    }

    .nolik-platform-content-text p {
        margin-bottom: 0.75rem;
        text-align: left;
        line-height: 1.55;
    }

    .nolik-platform-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
    }

    .nolik-platform-card-wrapper {
        padding-inline: var(--details-slider-padding);
        box-sizing: border-box;
    }

    .nolik-platform-card-title {
        font-size: 1rem;
        padding: 2rem 0 1.25rem;
        text-align: center;
        line-height: 1.3;
    }

    .nolik-platform-card-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
    }

    .nolik-platform-card-title p {
        margin-bottom: var(--section-title-mb);
    }

    .nolik-platform-card-title p>span {
        display: block;
    }

    .nolik-platform-wrapper {
        margin-bottom: 40px;
    }

    .nolik-experience__subtitle {
        font-size: var(--font-size-12);
    }

    .nolik-experience__card-title {
        font-size: var(--font-size-14);
    }

    .nolik-experience__card-desc {
        font-size: var(--font-size-8);
    }

    .nolik-experience__link {
        font-size: var(--font-size-8);
        padding: 9px 12px;
        min-width: fit-content;
    }

    /* 固定副导航（Nolik）：汉堡 + 下拉动作区 */
    .fixed-secondary-menu--nolik .fixed-secondary-menu__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: none;
        position: relative;
    }

    .fixed-secondary-menu--nolik .fixed-secondary-menu__logo {
        display: none;
    }

    .fixed-secondary-menu--nolik .fixed-secondary-menu__menu-btn.header__burger {
        display: flex;
        flex-shrink: 0;
    }

    .fixed-secondary-menu--nolik .fixed-secondary-menu__menu-btn:focus-visible {
        outline: 2px solid var(--color-base-primary);
        outline-offset: 2px;
        color: rgba(250, 250, 249, 1)
    }

    .fixed-secondary-menu--nolik .fixed-secondary-menu__action {
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100vw;
        max-width: 100vw;
        z-index: 2;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0.75rem max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left));
        margin: 0;
        box-sizing: border-box;
        background: var(--color-surface-warm);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
        display: none;
    }

    .fixed-secondary-menu--nolik.fixed-secondary-menu--nolik-nav-open .fixed-secondary-menu__action {
        display: flex;
    }

    .fixed-secondary-menu--nolik.fixed-secondary-menu--visible.fixed-secondary-menu--nolik-nav-open {
        overflow: visible;
        max-height: none;
    }

    .fixed-secondary-menu--nolik.fixed-secondary-menu--nolik-nav-open .fixed-secondary-menu__nav-item {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .fixed-secondary-menu--nolik.fixed-secondary-menu--nolik-nav-open .fixed-secondary-menu__btn {
        margin: 1rem auto;
        width: fit-content;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    .nolik-hero__video-wrapper {
        display: none !important;
    }

    .nolik-hero__inner {
        transform: none !important;
        opacity: 1 !important;
    }
}