/* ================================================================
   【页面】产品中心页（那拉泉生态养殖）
   【模块】页面容器
   【用途】产品中心页整体容器，设置溢出隐藏、白色背景和默认文字色；内容区最大宽度1400px居中
   【关键属性】overflow: hidden; max-width: 1400px; margin: 0 auto;
   ================================================================ */
.nl-product-page { overflow: hidden; background: #fff; color: #2d2d2d; }
.nl-product-page .nl-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; position: relative; }

/* ================================================================
   【页面】产品中心页
   【模块】1. 顶部横幅
   【用途】全宽横幅（1920×630），背景图铺满，水波漂流动画效果
   【关键属性】height: 630px; animation: pdWaterDrift
   【交互】背景图缓慢漂移（12s ease-in-out infinite alternate），进入时品牌文字从下往上淡入浮现
   ================================================================ */
.pd-banner {
    width: 100%;
    height: 630px;
    background: url(../images/product/bg_banner.png) center / cover no-repeat;
    position: relative;
    overflow: hidden;
    /* 水动效果：背景大图放大 5% 后缓慢漂移（无叠层、不遮背景、文字不动） */
    animation: pdWaterDrift 12s ease-in-out infinite alternate;
}
.pd-banner__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
@keyframes pdWaterDrift {
    0%   { background-position: 50% 50%; background-size: 105% 105%; }
    100% { background-position: 46% 54%; background-size: 105% 105%; }
}

/* 尊重系统"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
    .pd-banner { animation: none; }
}
.pd-banner__brand {
    display: block;
    width: 371px;
    max-width: 40%;
    height: auto;
    /* 进入效果：从下往上淡入浮现（与 about 页 banner 入场风格一致） */
    opacity: 0;
    animation: pdBrandIn .9s ease-out .3s forwards;
}
@keyframes pdBrandIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

/* ================================================================
   【页面】产品中心页
   【模块】2. 养殖特色：从活泉到餐桌
   【用途】展示养殖特色板块，左侧大图 + 右侧 2×2 卡片网格布局
   【关键属性】display: flex; grid-template-columns: 1fr 1fr; border-radius: 16px; box-shadow
   【交互】卡片 hover 时背景变绿、上浮、阴影加深，图标缩放，文字变白
   ================================================================ */
.pd-feats { padding: 70px 0 50px; }

/* 【页面】产品中心页 | 【模块】养殖特色板块头 | 左主标/副标 + 右绿色渐隐细线装饰 */
.pd-feats__head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}
.pd-feats__head-text { flex: 0 0 auto; }
.pd-feats__head-title {
    margin: 0 0 8px 0;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 1px;
}
.pd-feats__head-sub {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #0f7256;
    line-height: 1.5;
    letter-spacing: .5px;
}
.pd-feats__head-line {
    flex: 1;
    height: 2px;
    margin-top: 24px;
    background: linear-gradient(to right, rgba(47, 158, 110, .55) 0%, rgba(47, 158, 110, .55) 80px, transparent 80px);
}

/* 【页面】产品中心页 | 【模块】养殖特色主体 | 左大图（450px固定）+ 右 2×2 卡片网格 */
.pd-feats__body {
    display: flex;
    gap: 28px;
    align-items: stretch;
}
.pd-feats__media {
    flex: 0 0 450px;
    width: 450px;
    height: 460px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(14, 59, 40, .18);
}
.pd-feats__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-feats__cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
    min-width: 0;
}
.pd-feats__card {
    position: relative;
    background: #f7f9f8;
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: background .4s ease, transform .4s ease, box-shadow .4s ease;
    cursor: pointer;
    overflow: hidden;
}
.pd-feats__card::before {
    /* 右上角绿色短斜线装饰 */
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 24px;
    height: 2px;
    background: #2f9e6e;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: background .4s ease, width .4s ease;
}
.pd-feats__no {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #2f9e6e;
    line-height: 1;
    letter-spacing: 1px;
    transition: color .4s ease, opacity .4s ease;
}
/* 默认隐藏数字文字（被斜线条挡住），hover 露出 */
.pd-feats__no { opacity: 0; }

/* 【页面】产品中心页 | 【模块】养殖特色卡片内部 | 顶部行：图标+标题横向排列，底部为描述文字 */
.pd-feats__top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
.pd-feats__icon-wrap {
    flex: 0 0 74px;
    width: 74px;
    height: 84px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(14, 59, 40, .08);
    transition: background .4s ease, box-shadow .4s ease;
}
.pd-feats__icon {
    width: 58px;
    height: 66px;
    object-fit: contain;
    display: block;
    transition: transform .4s ease;
}
.pd-feats__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    transition: color .4s ease;
}
.pd-feats__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #5e5e5e;
    line-height: 1.65;
    transition: color .4s ease;
}

.pd-feats__card:hover {
    background: #0f7256;
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(15, 114, 86, .28);
}
.pd-feats__card:hover::before {
    background: rgba(255, 255, 255, .75);
    width: 32px;
}
.pd-feats__card:hover .pd-feats__no {
    color: rgba(255, 255, 255, .6);
    opacity: 1;
}
.pd-feats__card:hover .pd-feats__icon-wrap {
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.pd-feats__card:hover .pd-feats__icon { transform: scale(1.06); }
.pd-feats__card:hover .pd-feats__title { color: #fff; }
.pd-feats__card:hover .pd-feats__desc { color: rgba(255, 255, 255, .88); }

/* ================================================================
   【页面】产品中心页
   【模块】3. 四大生态冷水鱼品类
   【用途】展示四种冷水鱼品类，每类包含标题条、背景卡片、内容描述块、价格标签和鱼图动画
   【关键属性】grid/title背景图、卡片hover上浮、鱼图漂浮游动动画
   【交互】标题条hover时光泽从左扫过；卡片hover上浮+阴影加深；鱼图持续漂浮微摆；圆点气泡呼吸动画
   ================================================================ */
.pd-species { padding: 50px 0 30px; }
.pd-species__head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}
.pd-species__head-text { flex: 0 0 auto; }
.pd-species__head-title {
    margin: 0 0 8px 0;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 1px;
}
.pd-species__head-sub {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #0f7256;
    line-height: 1.5;
    letter-spacing: .5px;
}
.pd-species__head-line {
    flex: 1;
    height: 2px;
    margin-top: 24px;
    background: linear-gradient(to right, rgba(47, 158, 110, .55) 0%, rgba(47, 158, 110, .55) 80px, transparent 80px);
}
/* 【页面】产品中心页 | 【模块】品类组入场动画 | JS控制整组进入视口时淡入上浮，默认可见仅动画模式隐藏 */
.pd-species__group {
    margin-bottom: 30px;
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .68, .35, 1);
}
.pd-species-anim .pd-species__group {
    opacity: 0;
    transform: translateY(26px);
}
.pd-species-anim .pd-species__group.is-in {
    opacity: 1;
    transform: translateY(0);
}

.pd-species__title {
    width: 100%;
    max-width: 1219px;
    height: 90px;
    margin: 0 0 21px 0;
    background: url(../images/product/rect25.png) center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    padding: 0 52px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.pd-species__title span {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 60px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
/* 标题条：hover 时一道光泽从左向右扫过 */
.pd-species__title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .7s ease;
}
.pd-species__group:hover .pd-species__title::after {
    left: 130%;
}

.pd-species__card {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 6px;
    background: center / 100% 100% no-repeat;
    background-color: #f4f8f7;
    overflow: visible;
    /* hover 立体：上浮 + 阴影加深 */
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.pd-species__group:hover .pd-species__card {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(23, 131, 100, .18);
}

/* 【页面】产品中心页 | 【模块】品类内容背景块 | 左侧半透明白色底，含圆点+描述+价格，垂直居中定位 */
.pd-species__content {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .68);
    border-radius: 10px;
    padding: 22px 32px 18px 28px;
    box-sizing: border-box;
    max-width: 640px;
}
.pd-species__row {
    display: flex;
    align-items: stretch;
}
.pd-species__dots {
    flex: 0 0 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 24px;
    /* 圆点中心精确对齐描述每行文字中心（行高 40px）：
       padding-top 14px = 行1中心(20) - 圆点半高(5.5)；
       圆点中心距 = 行高 40px = 圆点高 11px + margin-top 29px */
    padding-top: 14px;
    box-sizing: border-box;
}
.pd-species__dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #178364;
    flex: 0 0 11px;
    /* 气泡呼吸：逐点错峰微弱缩放，增加水中的生命感 */
    animation: nl-dot-breathe 3.2s ease-in-out infinite;
}
.pd-species__dots i:nth-child(2) { animation-delay: .5s; }
.pd-species__dots i:nth-child(3) { animation-delay: 1s; }
@keyframes nl-dot-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}
.pd-species__dots i + i { margin-top: 29px; }
.pd-species__desc {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #383838;
    line-height: 40px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}

/* 【页面】产品中心页 | 【模块】品类摘要参数行 | 规格/形态/保质期等参数，顶部细虚线区隔，与描述形成两级信息层次 */
.pd-species__sum {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 12px 0 0 35px;
    padding: 10px 0 0 0;
    border-top: 1px dashed rgba(23, 131, 100, .28);
    box-sizing: border-box;
}
.pd-species__sum-item {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1;
}
.pd-species__sum-item em {
    font-style: normal;
    font-weight: 700;
    color: #0f7256;
    margin-right: 7px;
    font-size: 16px;
}
.pd-species__sum-item:first-child { margin-left: 0; }

/* 【页面】产品中心页 | 【模块】品类价格标签 | 绿色、单行，绝对定位卡片右下角，像鱼的「标价签」效果 */
.pd-species__price {
    position: absolute;
    right: 40px;
    bottom: 17px;   /* 上移 5px（原 12px），更贴近鱼尾 */
    z-index: 3;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    white-space: nowrap;
}
.pd-species__price-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-right: 10px;
    color: #178364;
    display: inline;
}
.pd-species__price-amount {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #178364;
}
.pd-species__price-amount b {
    font-size: 48px;
    font-weight: 700;
    color: #178364;
    margin: 0 6px;
    line-height: 1;
}

/* 【页面】产品中心页 | 【模块】品类鱼图定位与动画 | 外层wrap负责滚动进入时从右游入，内层img负责持续漂浮微摆；JS添加.pd-species-anim后启用进入动画 */
.pd-species__fish-wrap {
    position: absolute;
    z-index: 2;
    right: 40px;
    top: -30px;
    height: 190px;
    width: auto;
    pointer-events: none;
    /* 进入视口前的初始状态：偏右、略倾、透明（仅 .pd-species-anim 下生效） */
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .9s cubic-bezier(.22, .68, .35, 1);
    will-change: transform, opacity;
}
.pd-species-anim .pd-species__fish-wrap {
    opacity: 0;
    transform: translateX(70px) rotate(6deg);
}
/* 进入视口后（由 JS IntersectionObserver 添加 .is-in）游入就位 */
.pd-species-anim .pd-species__group.is-in .pd-species__fish-wrap {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}
.pd-species__fish {
    display: block;
    height: 190px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(23, 131, 100, .22));
    transform-origin: 30% 60%;   /* 以鱼头为支点 */
    animation: nl-fish-swim 5s ease-in-out infinite;
}
/* 鱼：缓慢上下漂浮 + 身体轻微摆动（像在水中游动） */
@keyframes nl-fish-swim {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-12px) rotate(1.6deg); }
}

/* ================================================================
   【页面】产品中心页
   【模块】4. 精深加工系列
   【用途】数据驱动轮播展示精深加工产品，左侧信息列（标题/名称/重量/价格/描述/切换箭头）+ 右侧产品大图展示区
   【关键属性】flex布局、CSS变量控制图片尺寸、产品图片持续微悬浮动画
   【交互】左右箭头切换产品、图片切换时平滑过渡、产品图持续微悬浮呼吸感
   ================================================================ */
.pd-process { padding: 60px 0 80px; position: relative; }
.pd-process .nl-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
/* 左：标题 + 产品信息列（蓝湖 box_8 381 宽） */
.pd-process__info {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pd-process__title {
    margin: 0 0 14px 0;
    font-size: 40px;
    font-weight: 700;
    color: #0f7256;             /* 与首页板块标题一致（绿） */
    line-height: 1.2;
    letter-spacing: 2px;
}
/* 标题下的绿色细短装饰线（呼应"从活泉到餐桌"头部语言） */
.pd-process__title::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin-top: 18px;
    background: linear-gradient(to right, rgba(47, 158, 110, .55), transparent);
}
.pd-process__name {
    margin: 34px 0 0 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f7256;
    line-height: 1.4;
    transition: opacity .35s ease, transform .35s ease;
}
.pd-process__weight {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: #5e5e5e;
    line-height: 1.6;
    min-height: 26px;
    transition: opacity .35s ease, transform .35s ease;
}
.pd-process__price {
    display: flex;
    align-items: baseline;
    margin: 22px 0 0 0;
    gap: 4px;
    transition: opacity .35s ease, transform .35s ease;
}
.pd-process__price em {
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    color: #2d2d2d;
}
.pd-process__price b {
    font-size: 30px;
    font-weight: 700;
    color: #0f7256;
    line-height: 1;
}
.pd-process__price span {
    font-size: 16px;
    font-weight: 700;
    color: #2d2d2d;
    margin-left: 2px;
}
/* 当前产品介绍文案（栏目内容部分 · 原「查看详情」按钮位置）
   数据源：后台「产品中心特色加工系列产品」每条产品 content 介绍（div/p 转多行纯文本）
   pre-line 保留后台换行分段；内容为空时整块隐藏（:empty 兜底 + JS display 双保险） */
.pd-process__desc {
    margin: 24px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border-left: 3px solid #2f9e6e;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, rgba(47, 158, 110, .10), rgba(47, 158, 110, .03));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    color: #4d4d4d;
    white-space: pre-line;
    transition: opacity .35s ease, transform .35s ease;
}
.pd-process__desc:empty { display: none; }
/* 左右箭头（蓝湖 group_18：双 60px 绿圆，白箭头） */
.pd-process__arrows {
    display: flex;
    gap: 27px;
    margin-top: 44px;
}
.pd-process__arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0f7256;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .3s ease, transform .3s ease;
    padding: 0;
}
.pd-process__arrow:hover { background: #0a5a42; transform: scale(1.08); }
.pd-process__arrow svg { width: 26px; height: 26px; }

/* === 右：产品大图展示区（比例自适应，无底色背景）
   尺寸由 JS 根据图片 naturalWidth/naturalHeight 动态设定（CSS 变量 --plate-w / --plate-h），
   切换时 transition 平滑变形；仅展示产品图本体，不做相框/底色/光效 */
.pd-process__stage {
    flex: 0 0 620px;
    width: 620px;
    min-height: 660px;            /* 防止 plate 尺寸跳变引起 section 高度抖动；plate 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    box-sizing: border-box;
    position: relative;
    background: none;             /* 去掉摄影棚地面光背景 */
    transition: min-height .55s cubic-bezier(.22, .68, .35, 1);
}
/* 纯图片容器：不设底色 / 描边 / 阴影 */
.pd-process__plate {
    position: relative;
    width: var(--plate-w, 540px);
    height: var(--plate-h, 540px);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    transition:
        width .55s cubic-bezier(.22, .68, .35, 1),
        height .55s cubic-bezier(.22, .68, .35, 1);
}
.pd-process__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 70%;
    /* 持续微悬浮：让产品在页面背景上有"呼吸"感 */
    animation: nl-proc-float 5.4s ease-in-out infinite;
    transition: opacity .4s ease;
}
/* 切换产品时（JS 通过 inline style 控制 opacity 0→1） */
@keyframes nl-proc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(.5deg); }
}
/* 整区进入视口：左侧信息淡入上浮（默认可见，仅动画模式隐藏） */
.pd-process__info {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .68, .35, 1);
}
.pd-process-anim .pd-process__info { opacity: 0; transform: translateY(26px); }
.pd-process-anim .pd-process__info.is-in { opacity: 1; transform: translateY(0); }

/* ================================================================
   【页面】产品中心页
   【模块】5. 食用场景
   【用途】折叠式手风琴卡片墙，展示产品食用场景；展开卡展示宣传图，收缩卡展示缩略图
   【关键属性】flex-grow伸缩过渡、双图叠放交叉淡化、Ken Burns慢速放大效果
   【交互】点击切换展开/收缩状态、hover时宣传图慢速放大（Ken Burns）、卡片错峰淡入上浮入场动画
   ================================================================ */
.pd-scene { padding: 50px 0 60px; }

/* 板块头：与「从活泉到餐桌 / 四大品类」统一（48 主标 + 绿副标 + 右侧渐隐线） */
.pd-scene__head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}
.pd-scene__head-text { flex: 0 0 auto; }
.pd-scene__head-title {
    margin: 0 0 8px 0;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 1px;
}
.pd-scene__head-sub {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #0f7256;
    line-height: 1.5;
    letter-spacing: .5px;
}
.pd-scene__head-line {
    flex: 1;
    height: 2px;
    margin-top: 24px;
    background: linear-gradient(to right, rgba(47, 158, 110, .55) 0%, rgba(47, 158, 110, .55) 80px, transparent 80px);
}

/* 卡片墙：折叠式（手风琴）。
   展开卡(.is-open) = 蓝湖 780fr 宽，展示宣传图 promo_image 整幅；
   其余卡 = 280fr 宽，展示缩略图 image。flex-grow 数值过渡实现平滑伸缩，
   任意容器宽等比缩放不失真。默认第 1 张开，滑过哪张哪张开（JS 切 .is-open） */
.pd-scene__grid {
    display: flex;
    gap: 30px;
    align-items: stretch;
}
.pd-scene__card {
    position: relative;
    flex: 0 0 0px;                   /* 宽度完全由 flex-grow 决定 */
    flex-grow: 280;                  /* 收缩态 280fr */
    min-width: 0;                    /* 允许按比例收到 280fr */
    height: 490px;
    border-radius: 14px;
    overflow: hidden;
    background: #10261c;             /* 图片加载前深绿兜底 */
    box-shadow: 0 18px 44px rgba(14, 59, 40, .14);
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: flex-grow .65s cubic-bezier(.22, .68, .35, 1),
                opacity .8s ease,
                transform .8s cubic-bezier(.22, .68, .35, 1),
                box-shadow .5s ease;
}
.pd-scene__card.is-open { flex-grow: 780; }   /* 展开态 780fr */
.pd-scene__card:hover { box-shadow: 0 26px 60px rgba(14, 59, 40, .22); }

/* 图片层基础：cover 铺满，恒微放大防边缘露白 */
.pd-scene__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.6s cubic-bezier(.22, .68, .35, 1), opacity .7s ease;
    will-change: transform, opacity;
}

/* 双图叠放：缩略图 = 收缩态（280×490 竖图恰好铺满窄卡，不裁切）；
   宣传图 = 展开态（780×490 横图恰好铺满宽卡）。.is-open 卡交叉淡化到宣传图 */
.pd-scene__media--thumb { opacity: 1; }
.pd-scene__media--promo  { opacity: 0; }
.pd-scene__card.is-open .pd-scene__media--thumb { opacity: 0; }
.pd-scene__card.is-open .pd-scene__media--promo  { opacity: 1; }

/* 鼠标停在展开卡上时宣传图慢速放大（Ken Burns 呼吸感） */
.pd-scene__card:hover .pd-scene__media--promo { transform: scale(1.09); }

/* 遮罩层：顶部与底部渐暗，保证白字可读；hover 时底部再加深，突出文字层级 */
.pd-scene__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 18, 13, .42) 0%, rgba(5, 18, 13, .04) 40%, rgba(5, 18, 13, 0) 62%),
                linear-gradient(0deg, rgba(5, 18, 13, .30) 0%, rgba(5, 18, 13, 0) 34%);
    transition: opacity .6s ease, background .6s ease;
}
.pd-scene__card:hover .pd-scene__shade {
    background: linear-gradient(180deg, rgba(5, 18, 13, .46) 0%, rgba(5, 18, 13, .06) 42%, rgba(5, 18, 13, .02) 64%),
                linear-gradient(0deg, rgba(5, 18, 13, .46) 0%, rgba(5, 18, 13, 0) 42%);
}

/* 文字层：左上角 标题(30) + 描述(18)，蓝湖 text_41~46；hover 时整组轻微上浮 */
.pd-scene__body {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 52px 30px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform .6s cubic-bezier(.22, .68, .35, 1),
                padding-left .65s cubic-bezier(.22, .68, .35, 1),
                max-width .65s cubic-bezier(.22, .68, .35, 1);
}
/* 展开卡：padding-left 61px（蓝湖 text_41/42 文字边距），内容宽上限 580 防溢出图主体 */
.pd-scene__card.is-open .pd-scene__body { max-width: 580px; padding-left: 61px; }
/* 收缩卡：padding-left 32px（蓝湖 text_43/45 文字边距），内容宽上限 215 紧凑两行 */
.pd-scene__card:not(.is-open) .pd-scene__body { max-width: 215px; padding-left: 32px; }
.pd-scene__card:hover .pd-scene__body { transform: translateY(-6px); }
.pd-scene__name {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .30);
    /* 标题下绿色短划线（hover 时展开） */
    padding-bottom: 12px;
    position: relative;
}
.pd-scene__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #7fd0a8;
    transform-origin: left center;
    transition: width .5s ease;
}
.pd-scene__card:hover .pd-scene__name::after { width: 64px; }
.pd-scene__desc {
    margin: 16px 0 0 0;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
    /* 最多 3 行兜底，防止超长文压塌卡片 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 进入视口：卡片错峰淡入上浮（JS 添加 .pd-scene-anim + .is-in；默认可见，仅动画模式隐藏） */
.pd-scene-anim .pd-scene__card {
    opacity: 0;
    transform: translateY(30px);
}
.pd-scene-anim .pd-scene__card.is-in {
    opacity: 1;
    transform: translateY(0);
}
.pd-scene-anim .pd-scene__card:nth-child(2) { transition-delay: .10s; }
.pd-scene-anim .pd-scene__card:nth-child(3) { transition-delay: .20s; }
.pd-scene-anim .pd-scene__card.is-in:nth-child(1) { transition-delay: 0s; }
.pd-scene-anim .pd-scene__card.is-in:nth-child(2) { transition-delay: .10s; }
.pd-scene-anim .pd-scene__card.is-in:nth-child(3) { transition-delay: .20s; }

/* ================================================================
   【页面】产品中心页
   【模块】6. 三文鱼小知识（FAQ）
   【用途】文章分类驱动的页内展开预览FAQ，问题行整行可点，展开后显示答案卡片
   【关键属性】max-height过渡展开、绿色圆点指示器、箭头旋转动画
   【交互】点击问题行展开/收起答案，hover时淡绿底+文字转绿，展开箭头旋转180°+绿底白箭头
   ================================================================ */
/* 页面收尾板块，底部留白稍大 */
.pd-faq { padding: 60px 0 80px; }
/* 板块头：与「从活泉到餐桌/四大品类/食用场景」统一（48 主标 + 绿副标 + 右侧渐隐线） */
.pd-faq__head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}
.pd-faq__head-text { flex: 0 0 auto; }
.pd-faq__head-title {
    margin: 0 0 8px 0;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: 1px;
}
.pd-faq__head-sub {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #0f7256;
    line-height: 1.5;
    letter-spacing: .5px;
}
.pd-faq__head-line {
    flex: 1;
    height: 2px;
    margin-top: 24px;
    background: linear-gradient(to right, rgba(47, 158, 110, .55) 0%, rgba(47, 158, 110, .55) 80px, transparent 80px);
}
.pd-faq__list {
    width: 100%;
    max-width: 1400px;
}

/* 问题行：整行可点（button 重置默认样式），hover 淡绿底 + 文字转绿；展开态保持淡绿底 */
.pd-faq__item { width: 100%; }
.pd-faq__q {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 8px 14px;
    border: 0;
    background: none;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background .3s ease;
}
.pd-faq__q:hover,
.pd-faq__item.is-open .pd-faq__q { background: #f2f8f4; }
.pd-faq__dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2f9e6e;
    box-shadow: 0 0 0 3px rgba(47, 158, 110, .16);
}
.pd-faq__text {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2d2d2d;
    line-height: 1.5;
    transition: color .3s ease;
}
.pd-faq__q:hover .pd-faq__text { color: #0f7256; }

/* 右侧指示箭头：圆环内下箭头；展开时旋转 180° + 绿底白箭头 */
.pd-faq__ind {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #0f7256;
    border: 1.5px solid rgba(15, 114, 86, .45);
    border-radius: 50%;
    transition: transform .45s cubic-bezier(.22, .68, .35, 1),
                background .3s ease, border-color .3s ease, color .3s ease;
}
.pd-faq__ind svg { display: block; width: 13px; height: 13px; }
.pd-faq__item.is-open .pd-faq__ind {
    transform: rotate(180deg);
    background: #0f7256;
    border-color: #0f7256;
    color: #fff;
}

/* 解答区：max-height 0 ↔ 内容高 平滑展开（JS 测量后设 px）；收起时整体隐藏 */
.pd-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s cubic-bezier(.22, .68, .35, 1);
}
/* 答案卡片：与问题行同宽距的浅绿面板 + 左侧绿色强调线 */
.pd-faq__a-in {
    margin: 0 14px 18px 14px;
    padding: 16px 22px;
    background: #f2f9f4;
    border-left: 3px solid #2f9e6e;
    border-radius: 0 10px 10px 0;
}
.pd-faq__a-in p {
    margin: 0;
    font-size: 16px;
    color: #3f5a4c;
    line-height: 1.95;
    text-align: justify;
}
.pd-faq__a-in p + p { margin-top: 10px; }
.pd-faq__sep {
    width: 100%;
    height: 1px;
    background: #e9ecea;
    margin: 0;
}

/* ================================================================
   【页面】产品中心页
   【模块】7. 响应式适配
   【用途】适配 1280px / 1024px / 640px 三种断点，主要保障PC体验，移动端精简内容布局
   【关键属性】media queries、flex-direction变化、栅格列数调整、图片尺寸缩放
   ================================================================ */
@media (max-width: 1280px) {
    .pd-feats__media { flex: 0 0 380px; width: 380px; }
    .pd-scene__card { height: 420px; }
    .pd-species__content { left: 30px; }
    .pd-species__fish { right: 20px; height: 130px; max-width: 40%; }
    .pd-process .nl-container { gap: 40px; }
    .pd-process__info { flex: 0 0 360px; }
    .pd-process__stage { flex: 0 0 500px; width: 500px; min-height: 600px; }
}
@media (max-width: 1024px) {
    .pd-banner { height: 480px; }
    .pd-banner__brand { width: 280px; }
    .pd-feats__body { flex-direction: column; }
    .pd-feats__media { width: 100%; flex: none; height: 360px; }
    .pd-feats__cards { width: 100%; grid-template-columns: 1fr; grid-template-rows: auto; }
    .pd-scene__grid { flex-direction: column; }
    .pd-scene__card { flex: none; width: 100%; height: 360px; }
    /* 单列堆叠：无 hover 场景，三卡都直接显示宣传图整幅（收起态缩略图隐藏） */
    .pd-scene__card .pd-scene__media--thumb { opacity: 0; }
    .pd-scene__card .pd-scene__media--promo { opacity: 1; }
    .pd-scene__card .pd-scene__body,
    .pd-scene__card:not(.is-open) .pd-scene__body { max-width: 580px; padding-left: 61px; }
    .pd-process .nl-container { flex-direction: column; gap: 30px; }
    .pd-process__info, .pd-process__stage { flex: none; width: 100%; max-width: 100%; }
    .pd-process__stage { min-height: 600px; padding: 10px 0; }
    .pd-process__title { font-size: 40px; }

    /* 物种卡片窄屏适配：保留鱼图（缩小置右），内容白块收窄至左侧，
       价格改右下角上下两行（label/金额分行），不再与文字重叠 */
    .pd-species__card { height: auto; min-height: 252px; }
    .pd-species__content {
        left: 22px;
        max-width: 52%;
        padding: 16px 18px 14px;
        background: rgba(255, 255, 255, .92);
    }
    .pd-species__fish-wrap {
        right: 14px;
        top: auto;
        bottom: 6px;
        height: 150px;
    }
    .pd-species__fish { height: 150px; }
    .pd-species__desc { font-size: 14px; line-height: 1.9; }
    .pd-species__sum { flex-wrap: wrap; row-gap: 6px; }
    .pd-species__sum-item { font-size: 13px; }
    /* 价格：标签与金额分行，宽度收窄，置于卡片右下不压左侧文字 */
    .pd-species__price {
        right: 16px;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        white-space: normal;
        gap: 2px;
        background: rgba(255, 255, 255, .7);
        border-radius: 8px;
        padding: 4px 10px;
    }
    .pd-species__price-label { font-size: 13px; margin-right: 0; }
    .pd-species__price-amount { font-size: 20px; }
    .pd-species__price-amount b { font-size: 30px; margin: 0 4px; }
    /* ≤1024 品类鱼图/整组恒定显示（栋生 2026-09-07）：滚动入场动画依赖 IntersectionObserver，
       iOS Safari / 微信 WebView / iPad 等偶发不回调 → wrap 停在 opacity:0 透明隐藏态、鱼图不可见。
       1024 及以下全部强制可见并取消初始位移（此断点起即为移动/平板布局；漂浮动画
       nl-fish-swim 在 img 上不受影响）；仅 >1024 桌面保留滚动入场动画 */
    /* ≤1024 品类鱼图处理（栋生 2026-09-07 v3 真因排查）：
       真因是前景 .pd-species__fish-wrap 的小鱼 PNG 被右下角价格白块完全遮挡、
       又与卡背景大鱼（bg_yu1..4）重叠显得几乎不可见，用户反复反馈"没有鱼"。
       直接隐藏前景小鱼，让背景大鱼独立担当"鱼的图片"——更清晰、无遮挡、无视觉冗余。
       整组 group 的 opacity 兜底仍保留，防止 IO 未回调导致整组卡片透明 */
    .pd-species-anim .pd-species__group {
        opacity: 1 !important;
        transform: none !important;
    }
    /* ≤1024 产品鱼图 v5（栋生 2026-09-07）：用户确认要的是前景"鱼的产品图片"，且
       不要白底衬垫 → 去掉 rgba 白底/圆角/padding/阴影，裸鱼图直接显示在价格块
       上方（right:16 bottom:80 避开价格白块；位置/尺寸沿用 v4 实测零重叠参数）。
       桌面(>1024)保持原悬浮位不受影响 */
    .pd-species__fish-wrap {
        display: block;
        right: 16px;
        bottom: 80px;
        top: auto;
        height: 80px;
    }
    .pd-species__fish { height: 100%; width: auto; max-width: 100%; }
}
/* 【页面】产品中心页 | 【模块】手机端适配（≤640px） | 内容与鱼图进一步精简，保持不压叠 */
@media (max-width: 640px) {
    .pd-species__card { min-height: 300px; }
    .pd-species__content { max-width: 62%; left: 12px; padding: 12px 14px 10px; }
    .pd-species__content,
    .pd-species__sum { width: 62%; }
    /* 640 内不再覆写 fish-wrap/fish 定位尺寸——由 ≤1024 块的 v4 产品鱼规则统一管理（抬到价格块上方+白底衬） */
    .pd-species__price { right: 10px; bottom: 8px; }
    /* 手机端（栋生 2026-09-08 与关于页统一：板块间视觉间距一律 15px，桌面不动）
       规则：上一块 pb=0 + 下一块 pt=15；首块 pd-feats 顶部呼吸 44px，
       结尾 pd-faq 保留 pb 60 让问答不贴页脚 */
    .pd-feats   { padding: 44px 0 0; }
    .pd-species { padding: 15px 0 0; }
    .pd-process { padding: 15px 0 0; }
    .pd-scene   { padding: 15px 0 0; }
    .pd-faq     { padding: 15px 0 60px; }
    /* pd-species 末项 30px margin-bottom 会让 species→process 间距变 44（15+30）；
       section 自身 pb 已为 0，最后一张品类卡不再外溢间距 */
    .pd-species__group:last-child { margin-bottom: 0; }
    /* 产品中心 banner（手机端）：与关于页一致——整张横幅完整显示不裁切
       后台 banner 图统一 1920×630（3.048）→ section 用 padding-top 撑出同比例高度，
       背景 cover 恰好零裁切；关闭水动漂移(105% 放大会破坏零裁切)，inner 绝对叠层品牌图左中 */
    .pd-banner { height: auto; padding-top: 32.8125%; animation: none; background-position: center; }
    /* 提高特异性：__inner 同时是 .nl-container（全局 position:relative），需覆盖为 absolute 叠层 */
    .pd-banner .pd-banner__inner { position: absolute; inset: 0; height: auto; display: flex; align-items: center; }
    .pd-banner__brand {
        position: static; transform: none;
        width: 220px; max-width: 55%;
        animation: none; opacity: 1;
    }
}