/* ============================================================
   第7屏：Get a Quote 表单（复制自 contact.html 第三屏，1rem = 100px）
   顶部橙色带 1920x151（标题 40px/600/#FFF top 34 + 副标题 16px/#FFF top 93）
   表单区 1400 宽（top 211）：6 输入框 450x64（3列x2行，间距 25）
   + 文本域 1400x164（*Content:）+ 隐私说明 16px/#999
   + 居中按钮 Reset 141x48 #333 / Submit 140x48 #EA5404（圆角 10，间距 12）
   样式约束：表单内部不使用 class/id 选择器，全部通过 .seventh 父级定位
   ============================================================ */

.seventh {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding-bottom: 1rem;
    overflow: hidden;
}

/* 顶部橙色带 */
.seventh::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.51rem;
    background: #EA5404;
    transform-origin: left center;
}

/* 标题：40px / 600 / #FFF，top 34 */
.seventh > h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.34rem 0 0.05rem;
    overflow: hidden;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-transform: capitalize;
}

/* 副标题：16px / 400 / #FFF，top 93 */
.seventh > p {
    position: relative;
    z-index: 1;
    margin: 0.1rem 0 0;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* ---------- 表单（通过父级元素定位）---------- */

/* 表单区：1400 宽居中，与橙带间隔 60 */
.seventh form {
    display: block;
    box-sizing: border-box;
    width: 14rem;
    margin: 0.6rem auto 0;
}

/* 隐藏字段容器：去除浏览器默认样式 */
.seventh form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* 字段网格：3 列 x 450，间距 25 */
.seventh form ul {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seventh form ul li {
    margin: 0;
    min-width: 0;
}

/* 最后一项（Content 文本域）占满整行 */
.seventh form ul li:last-child {
    grid-column: 1 / -1;
}

.seventh form ul li p {
    margin: 0;
}

/* 输入框：450 x 64，白底 1px rgba(0,0,0,.1)，文字 16px #666 */
.seventh form ul li input {
    box-sizing: border-box;
    display: block;
    width: 4.5rem;
    max-width: 100%;
    height: 0.64rem;
    padding: 0 0.2rem;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    transition: border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 文本域：1400 x 164 */
.seventh form ul li textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 1.64rem;
    padding: 0.2rem;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 下拉框：外观同输入框，右侧灰色 chevron */
.seventh form ul li select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 4.5rem;
    max-width: 100%;
    height: 0.64rem;
    padding: 0 0.5rem 0 0.2rem;
    background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.2rem center / 0.16rem 0.16rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 未选择时保持占位符灰色 */
.seventh form ul li select:required:invalid {
    color: #666;
}

.seventh form ul li select:hover {
    border-color: rgba(234, 84, 4, 0.5);
}

.seventh form ul li select:focus {
    border-color: #EA5404;
    box-shadow: 0 0 0 0.03rem rgba(234, 84, 4, 0.14);
}

.seventh form ul li select option {
    color: #333;
}

/* 占位符：16px #666 */
.seventh form ul li input::placeholder,
.seventh form ul li textarea::placeholder {
    color: #666;
    opacity: 1;
}

/* 悬浮/聚焦：边框变橙 + 柔和橙色内光 */
.seventh form ul li input:hover,
.seventh form ul li textarea:hover {
    border-color: rgba(234, 84, 4, 0.5);
}

.seventh form ul li input:focus,
.seventh form ul li textarea:focus {
    border-color: #EA5404;
    box-shadow: 0 0 0 0.03rem rgba(234, 84, 4, 0.14);
}

/* 隐私说明：16px / 400 / #999 */
.seventh form > p:first-of-type {
    margin: 0.26rem 0 0;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

/* 按钮组：居中，间距 12 */
.seventh form > p:last-of-type {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
    margin: 0.6rem 0 0;
}

/* 按钮：48 高，圆角 10，白字 16px */
.seventh form > p:last-of-type button {
    position: relative;
    box-sizing: border-box;
    height: 0.48rem;
    padding: 0;
    border: 0;
    border-radius: 0.1rem;
    overflow: hidden;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.35s ease;
}

.seventh form button[type="reset"] {
    width: 1.41rem;
    background: #333;
}

.seventh form button[type="submit"] {
    width: 1.4rem;
    background: #EA5404;
}

/* 高光扫过层 */
.seventh form > p:last-of-type button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 30%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 70%);
    transform: translateX(-130%);
    pointer-events: none;
}

/* 按钮悬浮（无阴影）：回弹上浮 + 加深 + 高光扫过 */
.seventh form > p:last-of-type button:hover {
    transform: translateY(-0.04rem);
}

.seventh form button[type="reset"]:hover {
    background: #1A1A1A;
}

.seventh form button[type="submit"]:hover {
    background: #D64A00;
}

.seventh form > p:last-of-type button:hover::after {
    transform: translateX(130%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh form > p:last-of-type button:active {
    transform: translateY(0) scale(0.97);
}

/* CF7 提示输出区 */
.seventh form > div[aria-hidden="true"] {
    margin: 0.2rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* 屏幕阅读器响应区：视觉隐藏 */
.seventh p[role="status"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   橙带左→右展开 → 标题蒙版揭示 → 副标题上浮
   → 字段自下而上错峰滑入 → 隐私说明浮现 → 按钮回弹弹出
   ============================================================ */
html.js .seventh:not(.is-in-view)::before {
    transform: scaleX(0);
}

/* 初始隐藏仅在未入场时生效（:not(.is-in-view) 避免与显示规则发生特异性竞争） */
html.js .seventh:not(.is-in-view) > h2,
html.js .seventh:not(.is-in-view) > p,
html.js .seventh:not(.is-in-view) form ul li,
html.js .seventh:not(.is-in-view) form > p:first-of-type,
html.js .seventh:not(.is-in-view) form > p:last-of-type button {
    opacity: 0;
}

.seventh.is-in-view::before {
    transform: scaleX(1);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 标题：蒙版揭示 */
.seventh.is-in-view > h2 {
    opacity: 1;
    animation: quote-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

@keyframes quote-title-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

/* 副标题：上浮 */
.seventh.is-in-view > p {
    opacity: 1;
    animation: quote-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards;
}

@keyframes quote-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.3rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 字段：自下而上错峰滑入 */
.seventh.is-in-view form ul li {
    opacity: 1;
    animation: quote-field-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.seventh.is-in-view form ul li:nth-child(1) { animation-delay: 0.65s; }
.seventh.is-in-view form ul li:nth-child(2) { animation-delay: 0.72s; }
.seventh.is-in-view form ul li:nth-child(3) { animation-delay: 0.79s; }
.seventh.is-in-view form ul li:nth-child(4) { animation-delay: 0.86s; }
.seventh.is-in-view form ul li:nth-child(5) { animation-delay: 0.93s; }
.seventh.is-in-view form ul li:nth-child(6) { animation-delay: 1s; }
.seventh.is-in-view form ul li:nth-child(7) { animation-delay: 1.07s; }

@keyframes quote-field-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 隐私说明：浮现 */
.seventh.is-in-view form > p:first-of-type {
    opacity: 1;
    animation: quote-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s backwards;
}

/* 按钮：回弹弹出 */
.seventh.is-in-view form > p:last-of-type button {
    opacity: 1;
    animation: quote-btn-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s backwards;
}

@keyframes quote-btn-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem) scale(0.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- H5 适配 ---------- */
/* 橙带高度改为随内容自适应：隐藏固定高度的 ::before，
   由标题/描述各自铺橙色底无缝拼接，H5 下文字换行增多也不会被裁切 */
html[data-mode="h5"] .seventh::before {
    display: none;
}

html[data-mode="h5"] .seventh > h2 {
    background: #EA5404;
    margin: 0;
    padding: 0.34rem 0.3rem 0.05rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .seventh > p {
    background: #EA5404;
    margin: 0;
    padding: 0.1rem 0.3rem 0.2rem;
    font-size: 0.22rem;
}

html[data-mode="h5"] .seventh form {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0 0.3rem;
}

html[data-mode="h5"] .seventh form ul {
    grid-template-columns: 1fr;
    gap: 0.3rem;
}

html[data-mode="h5"] .seventh form ul li input {
    width: 100%;
    height: 0.8rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .seventh form ul li textarea {
    height: 2.4rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .seventh form > p:first-of-type {
    font-size: 0.22rem;
}

html[data-mode="h5"] .seventh form > p:last-of-type {
    margin-top: 0.5rem;
}

html[data-mode="h5"] .seventh form > p:last-of-type button {
    width: 2rem;
    height: 0.7rem;
    font-size: 0.24rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .seventh::before,
    .seventh.is-in-view::before {
        transform: none;
        transition: none;
    }

    html.js .seventh > h2,
    html.js .seventh > p,
    html.js .seventh form ul li,
    html.js .seventh form > p:first-of-type,
    html.js .seventh form > p:last-of-type button,
    .seventh.is-in-view > h2,
    .seventh.is-in-view > p,
    .seventh.is-in-view form ul li,
    .seventh.is-in-view form > p:first-of-type,
    .seventh.is-in-view form > p:last-of-type button {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }

    .seventh form > p:last-of-type button:hover {
        transform: none;
    }
}

/* ============================================================
   第1屏：产品图库 + 参数信息（1920 设计基准，1rem = 100px）
   区块 padding 60 260 100，顶部额外预留 80 导航栏高度；
   左侧大图 678x570 圆角 20 + 缩略图 4 张 80x67（选中橙描边）
   + 左右切换圆钮 50x50（默认 #F2F3ED / 悬浮橙色）；
   右侧标题 40px/600 + 参数列表 16px + 两个胶囊按钮
   ============================================================ */
.first {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    /* 导航栏 80 + 设计稿顶部 60 */
    padding: 1.4rem 2.6rem 1rem;
    overflow: hidden;
}

/* ---------- 左侧图库：678 宽 ---------- */
.first__gallery {
    flex: 0 0 auto;
    width: 6.78rem;
}

/* 大图舞台：678 x 570，圆角 20 */
.first__stage {
    position: relative;
    width: 6.78rem;
    height: 5.7rem;
    border-radius: 0.2rem;
    background: #F6F6F6;
    overflow: hidden;
}

/* 堆叠主图：交叉淡入 + 缩放过渡 */
.first__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.6s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.first__img.is-active {
    opacity: 1;
    transform: none;
}

/* ---------- 切换圆钮：50 x 50，默认 #F2F3ED / 悬浮橙色 ---------- */
.first__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F2F3ED;
    color: #999;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.35s ease,
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

.first__nav svg {
    display: block;
    width: 0.32rem;
    height: 0.32rem;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.first__nav--prev {
    left: 0.3rem;
}

.first__nav--next {
    right: 0.3rem;
}

/* 悬浮：橙底白箭头 + 回弹放大 + 辉光，箭头位移提示方向 */
.first__nav:hover {
    background: #EA5404;
    color: #FFF;
    box-shadow: 0 0.06rem 0.18rem rgba(234, 84, 4, 0.45);
    transform: translateY(-50%) scale(1.15);
}

.first__nav--prev:hover svg {
    transform: translateX(-0.03rem);
}

.first__nav--next:hover svg {
    transform: translateX(0.03rem);
}

.first__nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* ---------- 缩略图：4 张 80x67，间隔 10，底部居中 ---------- */
.first__thumbs {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    width: max-content;
    margin: 0.2rem auto 0;
}

.first__thumb {
    box-sizing: border-box;
    width: 0.8rem;
    height: 0.67rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.1rem;
    background: none;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.35s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

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

/* 选中态：橙色描边（与设计稿一致） */
.first__thumb.is-active {
    border-color: #EA5404;
}

/* 悬浮：预览描边 + 上浮 */
.first__thumb:hover {
    border-color: rgba(234, 84, 4, 0.5);
    transform: translateY(-0.04rem);
    box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.12);
}

/* ---------- 右侧信息：635 宽 ---------- */
.first__info {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 6.35rem;
}

/* 标题：40px / 600 / 黑色 */
.first__title {
    margin: 0;
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.first__title span {
    display: inline-block;
}

/* 参数列表：16px / #333，标签加粗 */
.first__specs {
    margin: 0.44rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.2;
}

.first__specs strong {
    font-weight: 600;
}

/* ---------- 按钮组：间隔 10 ---------- */
.first__actions {
    display: flex;
    gap: 0.1rem;
    margin-top: 0.5rem;
}

/* 胶囊按钮基类：48 高 */
.first__btn {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 0.48rem;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}

.first__btn-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* 橙色主按钮：190 宽，文字 + 右上箭头 */
.first__btn--quote {
    justify-content: space-between;
    width: max-content;
    padding: 0 0.22rem 0 0.24rem;
    background: #EA5404;
    color: #FFF;
    font-family: Gabarito, Montserrat, sans-serif;
}

.first__btn-arrow {
    position: relative;
    z-index: 1;
    width: 0.2rem;
    height: 0.2rem;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 高光扫过层 */
.first__btn--quote::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 30%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 70%);
    transform: translateX(-130%);
    pointer-events: none;
}

/* 灰色副按钮：185 宽 */
.first__btn--return {
    width: 1.85rem;
    background: #F6F6F6;
    color: #333;
}

/* 副按钮悬浮填充层：黑色自下而上漫入 */
.first__btn--return::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #333;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 按钮悬浮动效 ---------- */
/* 主按钮：上浮 + 加深 + 橙色辉光 + 高光扫过 + 箭头向右上弹出 */
.first__btn--quote:hover {
    background: #D64A00;
    box-shadow: 0 0.1rem 0.24rem rgba(234, 84, 4, 0.4);
    transform: translateY(-0.04rem);
}

.first__btn--quote:hover::after {
    transform: translateX(130%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.first__btn--quote:hover .first__btn-arrow {
    transform: translate(0.04rem, -0.04rem) scale(1.15);
}

/* 副按钮：黑色填充漫入 + 文字变白 + 上浮 */
.first__btn--return:hover {
    color: #FFF;
    transform: translateY(-0.04rem);
}

.first__btn--return:hover::before {
    transform: translateY(0);
}

.first__btn:active {
    transform: translateY(0) scale(0.97);
}

/* ============================================================
   入场动效（首屏，页面加载即播放，animation backwards 占位）
   大图 3D 翻入 → 缩略图逐个弹出 → 切换钮弹出
   → 标题蒙版揭示 → 参数上浮 → 按钮回弹弹出
   ============================================================ */
.first__stage {
    animation: first-stage-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.first__thumb {
    animation: first-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.first__thumb:nth-child(1) { animation-delay: 0.55s; }
.first__thumb:nth-child(2) { animation-delay: 0.65s; }
.first__thumb:nth-child(3) { animation-delay: 0.75s; }
.first__thumb:nth-child(4) { animation-delay: 0.85s; }

.first__nav {
    animation: first-nav-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.first__nav--prev { animation-delay: 0.95s; }
.first__nav--next { animation-delay: 1.05s; }

.first__title {
    animation: first-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

.first__specs {
    animation: first-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.first__btn {
    animation: first-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.first__btn--quote { animation-delay: 0.75s; }
.first__btn--return { animation-delay: 0.87s; }

@keyframes first-stage-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateY(15deg) translateX(-0.5rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes first-title-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

@keyframes first-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes first-pop-in {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 切换钮专属弹出：全程保持 translateY(-50%) 居中基准 */
@keyframes first-nav-pop {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.4);
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .first {
    flex-direction: column;
    align-items: stretch;
    padding: 1.1rem 0.3rem 0.6rem;
}

html[data-mode="h5"] .first__gallery {
    width: 100%;
}

html[data-mode="h5"] .first__stage {
    width: 100%;
    height: auto;
    aspect-ratio: 678 / 570;
}

html[data-mode="h5"] .first__nav {
    width: 0.64rem;
    height: 0.64rem;
}

html[data-mode="h5"] .first__nav svg {
    width: 0.4rem;
    height: 0.4rem;
}

html[data-mode="h5"] .first__thumbs {
    gap: 0.16rem;
    margin-top: 0.24rem;
}

html[data-mode="h5"] .first__thumb {
    width: 1.28rem;
    height: 1.07rem;
    border-radius: 0.12rem;
}

html[data-mode="h5"] .first__info {
    width: 100%;
    padding-top: 0.4rem;
}

html[data-mode="h5"] .first__title {
    font-size: 0.44rem;
}

html[data-mode="h5"] .first__specs {
    margin-top: 0.24rem;
    font-size: 0.24rem;
    line-height: 1.9;
}

html[data-mode="h5"] .first__actions {
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.4rem;
}

html[data-mode="h5"] .first__btn {
    height: 0.72rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .first__btn--quote {
    width: 2.9rem;
    padding: 0 0.3rem;
}

html[data-mode="h5"] .first__btn--return {
    width: 2.7rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .first__stage,
    .first__thumb,
    .first__nav,
    .first__title,
    .first__specs,
    .first__btn {
        animation: none;
    }

    .first__title {
        clip-path: none;
    }

    .first__nav:hover,
    .first__btn:hover {
        transform: translateY(-50%);
    }

    .first__btn:hover {
        transform: none;
    }

    .first__btn--return::before {
        transition: none;
    }
}

/* ============================================================
   第4屏：Our Advantages 优势卡片（1920 设计基准，1rem = 100px）
   背景 fourth-img.webp 全屏铺满；标题 40px/600/#333 top 79
   网格 1400 宽（4 列 x 320，间隔 40），卡片 320x340 白底圆角 10
   图标 50x50（外层底图 + 内层 26x26 图形），标题 18px/600/#333，
   描述 16px/400/#666，内容宽 271
   ============================================================ */
.fourth {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 0.79rem 0 0.92rem;
    background: url("../assets/images/product-detail/fourth-img.webp") no-repeat center center / cover;
    overflow: hidden;
}

/* ---------- 标题：1000 宽 / 40px / 600 / #333 ---------- */
.fourth__title {
    width: 10rem;
    margin: 0 auto 0.6rem;
    color: #333;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.fourth__title span {
    display: inline-block;
}

/* ---------- 网格：3 列平均分，间隔 40 ---------- */
.fourth__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    width: 14rem;
    margin: 0 auto;
}

/* ---------- 卡片：320 x 340，白底圆角 10 ---------- */
.fourth__card {
    position: relative;
    box-sizing: border-box;
    min-height: 3.4rem;
    padding: 0.43rem 0.25rem 0.4rem;
    border-radius: 0.1rem;
    background: #FFF;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

/* 悬浮高光扫过层 */
.fourth__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 35%,
            rgba(234, 84, 4, 0.12) 50%,
            transparent 65%);
    transform: translateX(-130%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* ---------- 图标：50 x 50 双层 ---------- */
.fourth__card-icon {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fourth__icon-bg {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
}

.fourth__icon-glyph {
    position: absolute;
    left: 0.11rem;
    top: 0.12rem;
    width: 0.26rem;
    height: 0.26rem;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 卡片标题：18px / 600 / #333 ---------- */
.fourth__card-name {
    max-width: 100%;
    margin: 0.21rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.35s ease;
}

/* ---------- 卡片描述：16px / 400 / #666 ---------- */
.fourth__card-desc {
    max-width: 100%;
    margin: 0.16rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.35s ease;
}

/* ---------- 悬浮：上浮橙色辉光 + 高光扫过 + 图标翻转回弹 + 标题变橙 ---------- */
.fourth__card:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.16rem 0.36rem rgba(234, 84, 4, 0.3);
}

.fourth__card:hover::before {
    transform: translateX(130%);
}

.fourth__card:hover .fourth__card-icon {
    transform: rotate(360deg) scale(1.12);
}

.fourth__card:hover .fourth__icon-glyph {
    transform: scale(1.15);
}

.fourth__card:hover .fourth__card-name {
    color: #EA5404;
}

.fourth__card:hover .fourth__card-desc {
    color: #333;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   标题蒙版揭示 → 卡片 3D 翻转错峰滑入 → 图标弹出
   ============================================================ */
html.js .fourth__title,
html.js .fourth__card {
    opacity: 0;
}

.fourth.is-in-view .fourth__title {
    opacity: 1;
    animation: fourth-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* 卡片：错峰 3D 翻入 */
.fourth.is-in-view .fourth__card {
    opacity: 1;
    animation: fourth-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fourth.is-in-view .fourth__card:nth-child(1) { animation-delay: 0.3s; }
.fourth.is-in-view .fourth__card:nth-child(2) { animation-delay: 0.42s; }
.fourth.is-in-view .fourth__card:nth-child(3) { animation-delay: 0.54s; }
.fourth.is-in-view .fourth__card:nth-child(4) { animation-delay: 0.66s; }
.fourth.is-in-view .fourth__card:nth-child(5) { animation-delay: 0.78s; }
.fourth.is-in-view .fourth__card:nth-child(6) { animation-delay: 0.9s; }
.fourth.is-in-view .fourth__card:nth-child(7) { animation-delay: 1.02s; }
.fourth.is-in-view .fourth__card:nth-child(8) { animation-delay: 1.14s; }

/* 图标：入场回弹弹出 */
.fourth.is-in-view .fourth__card-icon {
    animation: fourth-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.fourth.is-in-view .fourth__card:nth-child(1) .fourth__card-icon { animation-delay: 0.55s; }
.fourth.is-in-view .fourth__card:nth-child(2) .fourth__card-icon { animation-delay: 0.67s; }
.fourth.is-in-view .fourth__card:nth-child(3) .fourth__card-icon { animation-delay: 0.79s; }
.fourth.is-in-view .fourth__card:nth-child(4) .fourth__card-icon { animation-delay: 0.91s; }
.fourth.is-in-view .fourth__card:nth-child(5) .fourth__card-icon { animation-delay: 1.03s; }
.fourth.is-in-view .fourth__card:nth-child(6) .fourth__card-icon { animation-delay: 1.15s; }
.fourth.is-in-view .fourth__card:nth-child(7) .fourth__card-icon { animation-delay: 1.27s; }
.fourth.is-in-view .fourth__card:nth-child(8) .fourth__card-icon { animation-delay: 1.39s; }

@keyframes fourth-title-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

@keyframes fourth-card-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateY(18deg) translateY(0.5rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fourth-icon-pop {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fourth {
    padding: 0.6rem 0 0.7rem;
}

html[data-mode="h5"] .fourth__title {
    width: auto;
    margin: 0 0.4rem 0.4rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .fourth__grid {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    width: auto;
    padding: 0 0.4rem;
}

html[data-mode="h5"] .fourth__card {
    min-height: 0;
    padding: 0.4rem 0.32rem;
}

html[data-mode="h5"] .fourth__card-icon {
    width: 0.64rem;
    height: 0.64rem;
}

html[data-mode="h5"] .fourth__icon-bg {
    width: 0.64rem;
    height: 0.64rem;
}

html[data-mode="h5"] .fourth__icon-glyph {
    left: 0.14rem;
    top: 0.16rem;
    width: 0.34rem;
    height: 0.34rem;
}

html[data-mode="h5"] .fourth__card-name {
    width: 100%;
    margin-top: 0.26rem;
    font-size: 0.28rem;
}

html[data-mode="h5"] .fourth__card-desc {
    width: 100%;
    margin-top: 0.16rem;
    font-size: 0.22rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .fourth__title,
    html.js .fourth__card,
    .fourth.is-in-view .fourth__title,
    .fourth.is-in-view .fourth__card,
    .fourth.is-in-view .fourth__card-icon {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }

    .fourth__card:hover {
        transform: none;
    }
}

/* ============================================================
   第6屏：Recommended products 分类横滑列表（复制自 index.html 第二屏，1920 基准）
   背景：linear-gradient(0deg, #FFF 0%, #F9FAF4 100%)
   padding 100 0；标题 1000 宽下边距 60；列表横向滚动 padding 0 312 间隔 40
   ============================================================ */
.sixth {
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(0deg, #FFF 0%, #F9FAF4 100%);
}

/* 可视内容吸附层：高度由 JS 设为整屏，横滚期间钉住不动 */
.sixth__inner {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
}

/* ---------- 标题：1000 宽 / 40px / 600 / #333 ---------- */
.sixth__title {
    width: 10rem;
    margin: 0 auto 0.6rem;
    color: #333;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.sixth__title span {
    display: inline-block;
}

/* ---------- 分类列表：横向滚动，padding 0 312，间隔 40 ---------- */
.sixth__list {
    display: flex;
    gap: 0.4rem;
    /* 左右 312 为设计参数；上下 60 为悬浮上浮与投影留出余量，避免被滚动容器裁切 */
    padding: 0.6rem 3.12rem;
    overflow-x: auto;
    /* 隐藏滚动条，保持画面干净 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sixth__list::-webkit-scrollbar {
    display: none;
}

/* ---------- 卡片 ---------- */
.sixth__card {
    position: relative;
    flex: 0 0 auto;
    width: 4.28rem;
    border-radius: 0.2rem;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

/* 图片：428 x 360，上圆角 20 */
.sixth__card-media {
    position: relative;
    width: 4.28rem;
    height: 3.6rem;
    border-radius: 0.2rem 0.2rem 0 0;
    overflow: hidden;
}

.sixth__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

/* 悬浮时图片上的橙色渐变提亮层 */
.sixth__card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(234, 84, 4, 0) 30%,
            rgba(234, 84, 4, 0.45) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 文本区域：428 x 142，下圆角 20，#333，padding 30 30 0 */
.sixth__card-body {
    box-sizing: border-box;
    width: 4.28rem;
    height: 1.42rem;
    border-radius: 0 0 0.2rem 0.2rem;
    background: #333;
    padding: 0.3rem 0.3rem 0;
    text-align: left;
    transition: background-color 0.45s ease;
}

/* 卡片标题：20px / 600 / #FFF，下边距 15 */
.sixth__card-title {
    margin: 0 0 0.15rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* tag 容器：间隔 10 */
.sixth__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
}

/* tag：胶囊描边，14px / 400 / #999 */
.sixth__tag {
    display: inline-flex;
    border-radius: 100px;
    border: 1px solid #999;
    padding: 0.06rem 0.16rem;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-transform: capitalize;
    transition: color 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 悬浮：卡片上浮橙色辉光 + 图放大 + 文本区变橙 + tag 变白 ---------- */
.sixth__card:hover {
    transform: translateY(-0.14rem);
    /* 投影扩散控制在 60 内，配合列表上下 padding 保证不被裁切 */
    box-shadow: 0 0.18rem 0.4rem rgba(234, 84, 4, 0.35);
}

.sixth__card:hover .sixth__card-img {
    transform: scale(1.1) rotate(1.5deg);
    filter: brightness(1.06);
}

.sixth__card:hover .sixth__card-media::after {
    opacity: 1;
}

.sixth__card:hover .sixth__card-body {
    background: #EA5404;
}

.sixth__card:hover .sixth__tag {
    color: #FFF;
    border-color: #FFF;
    transform: translateY(-0.03rem);
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   标题裁切揭示 + 卡片 3D 翻转滑入错峰（入场用 animation，不占用悬浮 transition）
   ============================================================ */
html.js .sixth__title,
html.js .sixth__card {
    opacity: 0;
}

.sixth.is-in-view .sixth__title {
    opacity: 1;
    animation: sixth-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* 卡片：错峰 3D 翻入 */
.sixth.is-in-view .sixth__card {
    opacity: 1;
    animation: sixth-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__card:nth-child(1) { animation-delay: 0.3s; }
.sixth.is-in-view .sixth__card:nth-child(2) { animation-delay: 0.45s; }
.sixth.is-in-view .sixth__card:nth-child(3) { animation-delay: 0.6s; }
.sixth.is-in-view .sixth__card:nth-child(4) { animation-delay: 0.75s; }

/* 卡片图入场轻微回缩呼吸 */
.sixth.is-in-view .sixth__card-img {
    animation: sixth-zoom 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__card:nth-child(1) .sixth__card-img { animation-delay: 0.35s; }
.sixth.is-in-view .sixth__card:nth-child(2) .sixth__card-img { animation-delay: 0.5s; }
.sixth.is-in-view .sixth__card:nth-child(3) .sixth__card-img { animation-delay: 0.65s; }
.sixth.is-in-view .sixth__card:nth-child(4) .sixth__card-img { animation-delay: 0.8s; }

/* tag 入场：逐个弹出 */
.sixth.is-in-view .sixth__tag {
    animation: sixth-tag-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.sixth.is-in-view .sixth__card:nth-child(1) .sixth__tag:nth-child(1) { animation-delay: 0.7s; }
.sixth.is-in-view .sixth__card:nth-child(1) .sixth__tag:nth-child(2) { animation-delay: 0.8s; }
.sixth.is-in-view .sixth__card:nth-child(2) .sixth__tag:nth-child(1) { animation-delay: 0.85s; }
.sixth.is-in-view .sixth__card:nth-child(2) .sixth__tag:nth-child(2) { animation-delay: 0.95s; }
.sixth.is-in-view .sixth__card:nth-child(3) .sixth__tag:nth-child(1) { animation-delay: 1s; }
.sixth.is-in-view .sixth__card:nth-child(3) .sixth__tag:nth-child(2) { animation-delay: 1.1s; }
.sixth.is-in-view .sixth__card:nth-child(4) .sixth__tag:nth-child(1) { animation-delay: 1.15s; }
.sixth.is-in-view .sixth__card:nth-child(4) .sixth__tag:nth-child(2) { animation-delay: 1.25s; }

@keyframes sixth-title-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

@keyframes sixth-card-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateY(18deg) translateX(-0.6rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sixth-zoom {
    from {
        transform: scale(1.18);
    }

    to {
        transform: scale(1);
    }
}

@keyframes sixth-tag-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .sixth {
    padding: 0;
}

/* H5：取消钉屏，恢复常规纵向排布 + 原生横滑 */
html[data-mode="h5"] .sixth__inner {
    position: static;
    height: auto;
    display: block;
    padding: 0.6rem 0;
}

html[data-mode="h5"] .sixth__title {
    width: auto;
    margin: 0 0.4rem 0.4rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .sixth__list {
    padding: 0 0.4rem;
    gap: 0.3rem;
}

html[data-mode="h5"] .sixth__card,
html[data-mode="h5"] .sixth__card-media,
html[data-mode="h5"] .sixth__card-body {
    width: 6rem;
}

html[data-mode="h5"] .sixth__card-media {
    height: 5.04rem;
}

html[data-mode="h5"] .sixth__card-title {
    font-size: 0.28rem;
}

html[data-mode="h5"] .sixth__tag {
    font-size: 0.2rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .sixth__title,
    html.js .sixth__card,
    .sixth.is-in-view .sixth__title,
    .sixth.is-in-view .sixth__card,
    .sixth.is-in-view .sixth__card-img,
    .sixth.is-in-view .sixth__tag {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }
}

/* ============================================================
   第2屏：Description（Figma 338_986：1920 x 446，1rem = 100px）
   背景 #F9FAF4；左文字块 x 260 / 宽 971（标题 40px/600/#333 top 73
   + 规格文字 16px/#333 top 163，标签加粗）；右图 364 x 446（右边距 260）
   ============================================================ */
.second {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 19.2rem;
    min-height: 4.46rem;
    margin: 0 auto;
    overflow: hidden;
    background: #F9FAF4;
}

/* ---------- 左侧文字块：宽 971，top 73 ---------- */
.second__body {
    box-sizing: border-box;
    width: 9.71rem;
    margin: 0.73rem 0 0 2.6rem;
}

/* 标题：40px / 600 / #333（文字块内 top 0，规格文字与其间隔 42） */
.second__title {
    margin: 0 0 0.42rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
}

.second__title span {
    display: inline-block;
}

/* 规格列表：16px / #333，标签加粗，行高约 27（对应 Figma 6 行 192 高） */
.second__specs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.second__specs p {
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    word-wrap: break-word;
}

.second__specs p strong {
    font-weight: 600;
}

/* ---------- 右侧图片：364 x 446，右边距 260 ---------- */
.second__media {
    position: relative;
    flex: 0 0 auto;
    width: 3.64rem;
    height: 4.46rem;
    margin-right: 2.6rem;
    overflow: hidden;
}

.second__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   图片右→左擦除揭示 + 高光扫过；标题蒙版揭示；
   规格行自左模糊错峰滑入
   ============================================================ */
html.js .second__title,
html.js .second__specs p,
html.js .second__media {
    opacity: 0;
}

/* 图片：右侧擦除揭示 + 微缩放回弹 */
.second.is-in-view .second__media {
    opacity: 1;
    animation: second-media-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

@keyframes second-media-in {
    from {
        clip-path: inset(0 0 0 100%);
        transform: translateX(0.4rem) scale(1.04);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

/* 高光扫过：入场后单次播放 */
.second.is-in-view .second__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 35%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: second-shine 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

@keyframes second-shine {
    to {
        transform: translateX(130%);
    }
}

/* 标题：蒙版揭示 */
.second.is-in-view .second__title {
    opacity: 1;
    animation: second-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

@keyframes second-title-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

/* 规格行：自左模糊错峰滑入 */
.second.is-in-view .second__specs p {
    opacity: 1;
    animation: second-line-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__specs p:nth-child(1) { animation-delay: 0.5s; }
.second.is-in-view .second__specs p:nth-child(2) { animation-delay: 0.62s; }
.second.is-in-view .second__specs p:nth-child(3) { animation-delay: 0.74s; }
.second.is-in-view .second__specs p:nth-child(4) { animation-delay: 0.86s; }
.second.is-in-view .second__specs p:nth-child(5) { animation-delay: 0.98s; }
.second.is-in-view .second__specs p:nth-child(6) { animation-delay: 1.1s; }

@keyframes second-line-in {
    from {
        opacity: 0;
        transform: translateX(-0.5rem);
        filter: blur(0.06rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .second {
    display: block;
    min-height: 0;
    padding: 0.6rem 0.4rem;
}

html[data-mode="h5"] .second__body {
    width: auto;
    margin: 0;
}

html[data-mode="h5"] .second__title {
    margin-bottom: 0.3rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .second__specs p {
    font-size: 0.24rem;
    line-height: 1.7;
}

/* H5：图片移到文字下方，占满内容宽 */
html[data-mode="h5"] .second__media {
    width: 100%;
    height: auto;
    margin-top: 0.4rem;
    aspect-ratio: 364 / 446;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .second__title,
    html.js .second__specs p,
    html.js .second__media,
    .second.is-in-view .second__title,
    .second.is-in-view .second__specs p,
    .second.is-in-view .second__media {
        opacity: 1;
        transform: none;
        clip-path: none;
        filter: none;
        transition: none;
        animation: none;
    }

    .second.is-in-view .second__media::after {
        display: none;
    }
}

/* ============================================================
   第5屏：Application areas（Figma 343_1058：1400 x 617，1rem = 100px）
   padding 100/260/80；标题 40px/600/#333 居中
   轮播：视口裁切 + flex 轨道，一屏 4 卡（H5 两卡），JS 无限循环自动播放：
   图 260x190 圆角 10 + 标签 16px/#333 居中（图下 19）
   ============================================================ */
.fifith {
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 2.6rem 0.8rem; /* 100 / 260 / 80 */
}

/* ---------- 标题：40px / 600 / #333 居中（蒙版揭示） ---------- */
.fifith__title {
    margin: 0;
    overflow: hidden;
    padding-bottom: 0.06rem;
    text-align: center;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}

.fifith__title span {
    display: inline-block;
}

/* ---------- 轮播：视口裁切 + 轨道 flex（JS 无限循环，见 product-detail.js） ---------- */
.fifith__viewport {
    overflow: hidden;
    margin-top: 0.4rem;
}

.fifith__grid {
    position: relative; /* 使卡片 offsetLeft 以轨道为基准 */
    display: flex;
    gap: 0.25rem;
    width: max-content;
}

/* ---------- 卡片：一屏 4 张，(14rem - 3×0.25rem) / 4 ---------- */
.fifith__card {
    display: block;
    flex: 0 0 3.3125rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.fifith__card-media {
    height: 1.9rem; /* 190px */
    border-radius: 0.1rem;
    overflow: hidden;
}

.fifith__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
    will-change: transform;
}

.fifith__card-name {
    margin: 0.19rem 0 0; /* 图下 19px */
    text-align: center;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.35s ease, letter-spacing 0.35s ease;
}

/* ---------- 悬浮动效：上浮 + 图片放大 + 标签变橙加字距 ---------- */
.fifith__card:hover {
    transform: translateY(-0.1rem);
}

.fifith__card:hover .fifith__card-img {
    transform: scale(1.1);
    filter: brightness(1.06);
}

.fifith__card:hover .fifith__card-name {
    color: #EA5404;
    letter-spacing: 0.02rem;
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ---------- */
/* 标题：蒙版揭示 */
html.js .fifith__title span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.fifith.is-in-view .fifith__title span {
    transform: none;
}

/* 卡片：3D 翻转 + 上浮缩放，蛇形错峰入场 */
html.js .fifith__card {
    opacity: 0;
}

.fifith.is-in-view .fifith__card {
    opacity: 1;
    animation: fifith-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fifith.is-in-view .fifith__card:nth-child(1) { animation-delay: 0.25s; }
.fifith.is-in-view .fifith__card:nth-child(2) { animation-delay: 0.35s; }
.fifith.is-in-view .fifith__card:nth-child(3) { animation-delay: 0.45s; }
.fifith.is-in-view .fifith__card:nth-child(4) { animation-delay: 0.55s; }
.fifith.is-in-view .fifith__card:nth-child(5) { animation-delay: 0.65s; }
.fifith.is-in-view .fifith__card:nth-child(6) { animation-delay: 0.5s; }
.fifith.is-in-view .fifith__card:nth-child(7) { animation-delay: 0.6s; }
.fifith.is-in-view .fifith__card:nth-child(8) { animation-delay: 0.7s; }
.fifith.is-in-view .fifith__card:nth-child(9) { animation-delay: 0.8s; }
.fifith.is-in-view .fifith__card:nth-child(10) { animation-delay: 0.9s; }

/* 图片：入场时由放大回正（Ken Burns 收束） */
.fifith.is-in-view .fifith__card-img {
    animation: fifith-img-zoom 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fifith.is-in-view .fifith__card:nth-child(1) .fifith__card-img { animation-delay: 0.25s; }
.fifith.is-in-view .fifith__card:nth-child(2) .fifith__card-img { animation-delay: 0.35s; }
.fifith.is-in-view .fifith__card:nth-child(3) .fifith__card-img { animation-delay: 0.45s; }
.fifith.is-in-view .fifith__card:nth-child(4) .fifith__card-img { animation-delay: 0.55s; }
.fifith.is-in-view .fifith__card:nth-child(5) .fifith__card-img { animation-delay: 0.65s; }
.fifith.is-in-view .fifith__card:nth-child(6) .fifith__card-img { animation-delay: 0.5s; }
.fifith.is-in-view .fifith__card:nth-child(7) .fifith__card-img { animation-delay: 0.6s; }
.fifith.is-in-view .fifith__card:nth-child(8) .fifith__card-img { animation-delay: 0.7s; }
.fifith.is-in-view .fifith__card:nth-child(9) .fifith__card-img { animation-delay: 0.8s; }
.fifith.is-in-view .fifith__card:nth-child(10) .fifith__card-img { animation-delay: 0.9s; }

@keyframes fifith-card-in {
    from {
        opacity: 0;
        transform: perspective(10rem) rotateY(14deg) translateY(0.5rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifith-img-zoom {
    from {
        transform: scale(1.25);
        filter: brightness(1.25);
    }

    to {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fifith {
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .fifith__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .fifith__grid {
    gap: 0.24rem;
}

html[data-mode="h5"] .fifith__card {
    flex: 0 0 3.33rem; /* 一屏 2 张：(6.9rem - 0.24rem) / 2 */
}

/* 轮播克隆卡：不参与入场动画，始终可见 */
html.js .fifith__card.is-clone {
    opacity: 1;
    animation: none;
}

.fifith.is-in-view .fifith__card.is-clone,
.fifith.is-in-view .fifith__card.is-clone .fifith__card-img {
    animation: none;
}

html[data-mode="h5"] .fifith__card-media {
    height: auto;
    aspect-ratio: 260 / 190;
}

html[data-mode="h5"] .fifith__card-name {
    font-size: 0.24rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .fifith__title span,
    html.js .fifith__card {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .fifith.is-in-view .fifith__card-img {
        animation: none;
    }

    .fifith__card:hover {
        transform: none;
    }

    .fifith__card:hover .fifith__card-img {
        transform: none;
    }
}

/* ============================================================
   第3屏：Product parameters（Figma 334_540：1400 x 426，1rem = 100px）
   padding 60/260/100；标题 40px/600/#333 居中
   8 列参数表：表头 #EA5404 白字 16px/600（高 80）
   数据行白 / #F5F5F5 交替，#666 16px 居中；末列 rowspan 跨 3 行
   表格元素不带 class/id，全部通过父级 .third 定位
   ============================================================ */
.third {
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem; /* 1920px */
    margin: 0 auto;
    padding: 0.6rem 2.6rem 1rem; /* 60px 260px 100px */
    overflow: hidden;
}

/* 标题：40px / 600 / #333 居中（模糊上浮入场） */
.third h2 {
    margin: 0 auto 0.5rem; /* 标题 0-49，表格 top 100 */
    color: #333;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem; /* 40px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}

/* 滚动容器（H5 端横向滚动，PC 端不裁切） */
.third > div {
    overflow-x: auto;
}

/* 表格：行块分离，间隔 2px；固定布局 */
.third table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.02rem; /* 2px */
    table-layout: fixed;
}

/* 首列 149px，其余 7 列均分 */
/*.third thead th:first-child {*/
/*    width: 1.49rem; */
/*}*/

/* 表头：#EA5404 底白字 16px/600，高 80px 垂直居中 */
.third thead th {
    height: 0.8rem; /* 80px */
    background: #EA5404;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-weight: 600;
    line-height: 1.4;
}

/* 数据行：高 80px，#666 16px 居中，白/#F5F5F5 交替 */
.third tbody td {
    height: 0.8rem; /* 80px */
    padding: 0 0.1rem;
    background: #FFF;
    color: #666;
    text-align: center;
    vertical-align: middle;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-weight: 400;
    line-height: 1.5;
}

.third tbody tr:nth-child(even) td {
    background: #F5F5F5;
}

/* 末列 rowspan 单元格：允许换行，行高略紧凑 */
.third tbody td[rowspan] {
    line-height: 1.4;
}

/* 行悬浮：轻微提亮（设计稿静态，仅做轻反馈） */
.third tbody tr {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.third tbody tr:hover {
    transform: translateY(-0.03rem);
}

.third tbody tr:hover td {
    color: #333;
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ----------
   标题模糊上浮 → 表头逐列下压落位 → 数据行 3D 翻入错峰 → 跨行单元格淡入 */
html.js .third:not(.is-in-view) h2,
html.js .third:not(.is-in-view) table {
    opacity: 0;
}

.third.is-in-view h2 {
    animation: third-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

/* 表头/数据行统一延迟入场，不按 nth-child 写死序号，后续增删行列无需改 CSS */
.third.is-in-view thead th {
    animation: third-th-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

.third.is-in-view tbody tr {
    animation: third-row-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
}

/* 跨行单元格：最后淡入 */
.third.is-in-view tbody td[rowspan] {
    animation: third-fade 0.8s ease 1.3s backwards;
}

@keyframes third-title-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
        filter: blur(0.06rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes third-th-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes third-row-in {
    0% {
        opacity: 0;
        transform: perspective(12rem) translateY(0.4rem) rotateX(-24deg) scale(0.96);
        filter: blur(0.04rem);
    }

    100% {
        opacity: 1;
        transform: perspective(12rem) translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes third-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .third {
    padding: 0.4rem 0.3rem 0.6rem;
}

html[data-mode="h5"] .third h2 {
    font-size: 0.36rem;
}

html[data-mode="h5"] .third table {
    min-width: 12rem; /* 触发横向滚动 */
}

html[data-mode="h5"] .third thead th,
html[data-mode="h5"] .third tbody td {
    font-size: 0.24rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做隐藏与动画 */
@media (prefers-reduced-motion: reduce) {
    html.js .third:not(.is-in-view) h2,
    html.js .third:not(.is-in-view) table {
        opacity: 1;
    }

    .third.is-in-view h2,
    .third.is-in-view thead th,
    .third.is-in-view tbody tr,
    .third.is-in-view tbody td[rowspan] {
        animation: none;
        transform: none;
        filter: none;
    }

    .third tbody tr,
    .third tbody td {
        transition: none !important;
    }

    .third tbody tr:hover {
        transform: none;
    }
}