/* ==========================================================================
   超级工厂店铺主页（supplier-tpl-3）
   基准：设计画板 1250 宽 @2x → 内容区 1440px。
   所有数值 = 标注坐标 ×2，纵向位置 = 标注 y ×2 − 236（站点头部 118×2）。
   对应设计稿：PC-超级工厂店铺首页-蓝色版02
   ========================================================================== */

/* 设计稿字体 Inter，仅在本模板作用域内使用，避免影响全站 */
@font-face {
    font-family: 'InterSf3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../font/inter/Inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'InterSf3';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../font/inter/Inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'InterSf3';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../font/inter/Inter-700.woff2') format('woff2');
}

@font-face {
    font-family: 'InterSf3';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../font/inter/Inter-900.woff2') format('woff2');
}

.sf3 {
    --sf3-orange: #FF5A00;
    --sf3-blue: #2546A1;
    --sf3-blue-deep: #070852;
    --sf3-text: #343434;
    --sf3-line: #D8D8D8;
    --sf3-font: 'InterSf3', 'Inter', Arial, "Microsoft YaHei", sans-serif;
    position: relative;
    overflow: hidden;
    background: #fff;
    color: var(--sf3-text);
    font-family: var(--sf3-font);
    font-size: 14px;
    line-height: 1.5;
}

.sf3 *,
.sf3 *::before,
.sf3 *::after {
    box-sizing: border-box;
    /* 站点 common.css 开头有 `* { font-family: "Microsoft YaHei" !important }`，
       会把模板里的 Inter 全压掉（雅黑字宽/行高不同 → 整个排版错位）。
       用 .sf3 * 的更高特异性 + !important 夺回字体。 */
    font-family: var(--sf3-font) !important;
}
}

/* 模板内所有容器/文本统一 div，div 无浏览器默认 margin/padding；
   form 由 .sf3-form 单独定义间距，此处不做覆盖 */

.sf3 :where(a) {
    color: inherit;
    text-decoration: none;
}

.sf3 img {
    display: block;
    max-width: 100%;
    vertical-align: top;   /* bootstrap reboot 会设 middle，统一压回顶部 */
}

.sf3-container {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* 通用区块标题：Inter Bold 21px@2x=42px，字距 1.45@2x=2.9，全大写，首字母橙色 */
.sf3-title {
    position: relative;
    top: 5px;               /* 设计稿 42/42 行盒，字形顶 = 标注 y + 5 */
    z-index: 2;
    margin: 0;
    color: var(--sf3-text);
    font-size: 42px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 2.9px;
    text-align: center;
    text-transform: uppercase;
}

/* 标题首字母橙色（行内高亮用 span） */
.sf3-title .sf3-first {
    color: var(--sf3-orange);
}

/* 橙色按钮 83.5×27.5@2x → 167×55 */
.sf3-btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 167px;
    height: 55px;
    border-radius: 999px;
    background: var(--sf3-orange);
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

/* 分隔线整条切图（线 + 中心菱形），高 11@2x=22 */
.sf3-divider img {
    display: block;
    width: 100%;
    height: 22px;
}

/* ==========================================================================
   Banner  标注 (0,118) 1250×250
   ========================================================================== */
.sf3-banner {
    position: relative;
    z-index: 1;
    height: 500px;
    overflow: hidden;
    color: #fff;
}

.sf3-banner-inner {
    padding-top: 66px;      /* 标签顶 151×2−236 */
}

/* 矩形2 (265,151) 232×14 #2546A1 → 464×28 */
.sf3-banner-tag {
    display: flex;
    align-items: center;
    width: 464px;
    max-width: 100%;
    height: 28px;
    padding-left: 17px;
    border-radius: 28px;
    background: #2546A1;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* 标题 (263.5,178.5) 28px/900 lh30 ls0.81 → 56/60 ls1.62 */
.sf3-banner-title {
    margin-top: 27px;
    margin-left: -3px;      /* 设计稿标题框在 527，比内容区左 3px */
    color: #fff;
    font-size: 56px;
    font-weight: 900;
    line-height: 60px;
    letter-spacing: 1.62px;
}

/* Group97 (265.5,247) 276×34 → 552×68，描边 0.8×2 */
.sf3-banner-checks {
    width: 552px;
    max-width: 100%;
    height: 68px;
    margin-top: 17px;       /* 框顶 258 − 标题行盒底 241 */
    padding: 12px 0 0 10px;
    border: 1.6px solid rgba(255, 255, 255, 0.8);
}

.sf3-banner-checks .sf3-check-item {
    position: relative;
    padding-left: 26px;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
}

.sf3-banner-checks .sf3-check-item + .sf3-check-item {
    margin-top: 8px;
}

.sf3-banner-checks .sf3-check {
    position: absolute;
    left: 0;
    top: -1px;
    width: 17px;
    height: 17px;
}

/* ==========================================================================
   中部浅色区（类别 / 生产现场 / 热销 / 国旗）
   背景为设计稿切图（渐变 + SUPER FACTORY 水印），已擦除文字
   ========================================================================== */
.sf3-middle {
    position: relative;
    /* 背景切图按视口宽度等比铺满（任意宽度都不露白），不再额外叠加渐变色层 */
    background-color: #fff;
    background-image: url("../images/supplier-tpl-3/middle-bg.jpg");
    background-position: center top;
    background-size: 100% auto;   /* 设计稿原图 2500×2556，其余高度为纯白 */
    background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
   产品类别  标注 (259.5,408.1) 731×297.9
   ------------------------------------------------------------------------- */
.sf3-category {
    position: relative;
    padding: 75px 0 23px;   /* 标题字形顶 579.8；区底 1176（胶囊溢出部分） */
}

.sf3-category .sf3-title {
    letter-spacing: 2.9px;
}

/* 描边按钮 (580,440.8) 90×21 → 180×42，顶 645.6
   宽度按需求改为内容区宽度的 15%（1440 基准 = 216px，原固定 180px）：
   盒模型是 .sf3 * 的 border-box，15% 已含左右 padding(35+24) 和 1px 边框。
   min-width: 180px —— 内容（"View More" 16px ≈ 80.7 + padding 59 + gap 17 + 箭头 21 ≈ 179px）
   几乎等于设计稿的 180，15% 在内容区 < 1193px 时就不够用了（1024 → 153.6、768 → 115.2 会把文字压掉），
   用 min-width 兜住，保证窄屏退化成原来的 180 而不是文字溢出 */
.sf3-outline-btn {
    display: flex;
    align-items: center;
    width: 15%;
    min-width: 180px;
    height: 42px;
    margin: 29px auto 0;
    padding: 0 24px 0 35px;
    border: 1px solid var(--sf3-blue);
    border-radius: 999px;
    background: #F4F7FF;
    color: #2E4EA5;
    font-size: 16px;
    line-height: 1;
    gap: 17px;
}

.sf3-outline-btn img {
    width: 21px;
    height: 6px;
    margin-left: auto;
}

/* 4 卡 (259.5,476.5) 可见白卡 345×413，间距 20，卡顶 962 */
/* 分类改成轮播：一屏 4 张 345 宽，间距 20（345*4 + 20*3 = 1440） */
/* 箭头定位基准（轮播本身要 overflow:hidden，箭头必须在它外面才能露在内容区外侧） */
.sf3-cat-stage,
.sf3-made-stage {
    position: relative;
}
.sf3-cat-swiper {
    margin-top: 40px;       /* 可见卡顶 728 − 按钮底 687.6 */
    padding-bottom: 30px;   /* 给压在卡片下沿的按钮留出空间，避免被 overflow 裁掉 */
    overflow: hidden;       /* 裁掉右侧露头的下一张卡（原来 visible 会把它露在背景上） */
}
.sf3-cat-swiper .swiper-slide {
    /* 一屏恒定 4 张，间距 20×3；1440 基准下算出来就是设计稿的 345，
       窄屏容器有 padding 时按实际可用宽度等比缩，不会把第 4 张挤掉一半 */
    width: calc((100% - 60px) / 4);
    height: auto;
}

/* 左右翻页箭头（圆形半透明底 + 白色 chevron） */
.sf3-cat-nav {
    position: absolute;
    top: calc(50% - 15px);  /* swiper 含 30 底部留白，减掉一半才是卡片中心 */
    z-index: 5;
    margin-top: -24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* 底色太浅时白色 chevron 在浅蓝背景上看不见，加重一点并补阴影 */
    background: rgba(52, 52, 52, 0.26);
    box-shadow: 0 2px 10px rgba(37, 70, 161, 0.10);
    cursor: pointer;
    transition: background 0.2s ease;
}
.sf3-cat-nav:hover {
    background: rgba(37, 70, 161, 0.55);
}
.sf3-cat-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.sf3-cat-prev {
    left: -62px;
}
/* Made Here 轮播的箭头只有 sf3-made-prev/next 类，没有 sf3-cat-prev/next，
   chevron 的旋转与偏移必须一起带上，否则会被画成不旋转的直角折线（像 L 形） */
.sf3-cat-prev::after,
.sf3-made-prev::after {
    margin: -5px 0 0 -3px;
    transform: rotate(45deg);
}
.sf3-cat-next {
    right: -62px;
}
.sf3-cat-next::after,
.sf3-made-next::after {
    margin: -5px 0 0 -7px;
    transform: rotate(-135deg);
}
/* 箭头常显：分类不足一屏时 Swiper 会加 disabled，这里只减淡，不做隐藏 */
.sf3-cat-nav.swiper-button-disabled,
.sf3-cat-nav.is-disabled {
    opacity: 0.35;
    cursor: default;
}
.sf3-cat-nav.swiper-button-lock {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
/* 压掉 Swiper 内置按钮的箭头背景图，统一用我们的 chevron */
.sf3-cat-nav.swiper-button-prev::before,
.sf3-cat-nav.swiper-button-next::before,
.sf3-cat-nav.swiper-button-prev .swiper-navigation-icon,
.sf3-cat-nav.swiper-button-next .swiper-navigation-icon {
    display: none;
}
.sf3-cat-nav.swiper-button-prev,
.sf3-cat-nav.swiper-button-next {
    background-image: none;
    margin-top: -24px;
}

.sf3-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;            /* 宽度由 swiper-slide 决定（一屏 4 张 = 345） */
    height: 425px;          /* 设计稿 345×425 */
    padding: 21px 0 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(37, 70, 161, 0.10);
    text-align: center;
}

/* 卡内产品图 150.5×150@2x → 300×300，距卡顶 23 */
.sf3-cat-img {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
}

.sf3-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 名称 (322,659) 8px/500 → 16px，字形顶 1082 */
.sf3-cat-name {
    margin-top: 29px;       /* 字形顶 1318 − 图底 1285 */
    color: #343434;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

/* 动作区：卡1 胶囊溢出卡底，卡2-4 圆钮 */
.sf3-cat-action {
    position: absolute;
    left: 0;
    bottom: -23px;      /* 胶囊顶 1365，卡底 1388 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 47px;
}

/* 卡1 胶囊 (297,682.3) 109×23.3 → 218×46.6 */
.sf3-pill-more {
    display: flex;
    align-items: center;
    width: 218px;
    height: 47px;
    padding: 0 7px 0 55px;
    border-radius: 999px;
    background: var(--sf3-blue);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.sf3-pill-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border-radius: 50%;
    background: #fff;
}

.sf3-pill-arrow img {
    width: 21px;
    height: 6px;
}

/* 卡2-4 圆钮 (522,682) 24×24 → 48×48 */
.sf3-circle-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sf3-blue);
}

.sf3-circle-arrow::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
}

.sf3-circle-arrow img {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 6px;
}

/* -------------------------------------------------------------------------
   生产现场  标注 (265,745.5) 720×303.5
   ------------------------------------------------------------------------- */
.sf3-made {
    padding-top: 74px;      /* 标题字形顶 1255 */
}

.sf3-made .sf3-title {
    letter-spacing: 2.9px;
}

/* 线 (265.5,788.5) + 菱形 (605.5,786) → 切图 22 高，顶 1336 */
.sf3-made .sf3-divider {
    margin-top: 43px;       /* 线对齐设计 1341 */
}

/* 设计稿 5 图并排：卡宽 = 5 等分（≈258），间距 37.5
   不超过 5 个时用 flex 居中一排（不出箭头），超过 5 个切轮播（.sf3-made-swiper） */
.sf3-made-grid {
    display: flex;
    justify-content: center;
    gap: 37.5px;
    margin-top: 46px;       /* 分隔线上移 1px 后补偿，图片顶 1403 */
}
.sf3-made-grid .sf3-made-item {
    flex: 0 0 calc((100% - 4 * 37.5px) / 5);
}

/* 超过 5 个：轮播，箭头样式沿用分类区（.sf3-cat-nav） */
.sf3-made-swiper {
    margin-top: 46px;
    overflow: hidden;       /* 裁掉两侧露头的半张卡，卡片不外溢到页面边距 */
}
.sf3-made-swiper .swiper-slide {
    height: auto;
}
.sf3-made-nav {
    top: 50%;               /* 覆盖 .sf3-cat-nav 的 calc(50% - 15px)：这里没有底部留白 */
    margin-top: -24px;
}
.sf3-made-prev {
    left: -62px;
}
.sf3-made-next {
    right: -62px;
}

.sf3-made-item {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 设计稿 (dovetail) 播放按钮圆心相对图片 (128,214)/258×459，切图 70×90 */
.sf3-made-item.is-video::after {
    content: "";
    position: absolute;
    left: 36%;
    top: 36.8%;
    width: 27.1%;
    height: 19.6%;
    background: url("../images/supplier-tpl-3/play.png") center / contain no-repeat;
    pointer-events: none;
}

.sf3-made-item img {
    display: block;
    width: 100%;
    height: 459px;
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   热销  标注 (262.5,1091.6) 725×757.9
   ------------------------------------------------------------------------- */
.sf3-hot {
    padding-top: 74px;      /* 标题字形顶 1940.9 */
    padding-bottom: 7px;    /* 卡片改 660 高后的高度补偿 */
}

.sf3-hot .sf3-title {
    letter-spacing: 2.28px;
}

/* 分隔条：线 (264.5,1131.5) + 采购图标 (616,1122.5) → 切图 72 高，顶 2009 */
.sf3-divider-cart {
    margin-top: 31px;       /* 切图顶 2009 − 标题行盒底 1977.9 */
}

.sf3-divider-cart img {
    height: 72px;
}

/* 卡 (262.5,1161.5) 725×335 → 1450×670，出血 5px，卡顶 2087 */
.sf3-hot-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    /* 设计稿卡高 660；改成 min-height 而不是固定高：商品名/卖点由商家填写，
       长度不可控，固定高 + overflow:hidden 会把按钮整块裁掉（已踩坑） */
    height: auto;
    min-height: 660px;
    margin: 9px 0 0;        /* 卡实体顶 2090（标注 2087 含 3px 阴影出血） */
    /* 底部 56 是给卡底装饰带（40 高）留的，避免按钮压到装饰带上 */
    padding: 51px 42px 56px 52px;
    border-radius: 32px;
    /* 设计稿卡片底色是近白 #F9FAFC，外圈还有约 5px 淡蓝暗带；
       卡2 背景是纯白，没有这层就会完全融进背景（看不出卡片边界） */
    /* 卡片内部是垂直渐变：顶部纯白 → 底部 #F5F6F9 */
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F9 100%);
    /* 设计稿原值是 0 3px 7px / 5%，太淡——卡片2（is-reverse）背景是纯白，
       没有这层就完全融进页面背景，看不出卡片边界。改为双层投影加深轮廓 */
    box-shadow: 0 2px 8px rgba(88, 138, 226, 0.10), 0 10px 26px rgba(88, 138, 226, 0.12);
    overflow: hidden;
}

.sf3-hot-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: url("../images/supplier-tpl-3/hot-shelf-a.png") left bottom / 100% 100% no-repeat;
    pointer-events: none;
}

.sf3-hot-card.is-reverse::after {
    background-image: url("../images/supplier-tpl-3/hot-shelf-b.png");
}

.sf3-hot-card + .sf3-hot-card {
    margin-top: 46px;
}

.sf3-hot-card.is-reverse {
    justify-content: flex-start;
    padding-left: 51px;
}

.sf3-hot-text {
    position: relative;
    z-index: 1;
    flex: none;
    width: 706px;
}

.sf3-hot-card.is-reverse .sf3-hot-text {
    width: 660px;
    margin-left: 78px;
}

.sf3-hot-card.is-reverse .sf3-hot-media {
    order: -1;
}

.sf3-hot-media {
    position: relative;
    z-index: 1;
    flex: none;
    width: 528px;
    height: 528px;
    overflow: hidden;
    border-radius: 6px;
}

.sf3-hot-media img {
    display: block;
    width: 528px;
    height: 528px;
    object-fit: cover;
}

/* 超级工厂标 (289.5,1189.2) 105×24 → 210×48 */
/* 热销卡文字区的徽标：同样纯 CSS，文字 19.5px，胶囊圆角 */
.sf3-sf-badge {
    display: flex;
    align-items: center;
    width: 210px;
    height: 48px;
    padding-left: 58px;     /* 钻石图标 20~49，文字从 58 起 */
    box-sizing: border-box;
    border-radius: 8px;      /* 设计稿实测四角都是小圆角（半径约 8），不是胶囊 */
    color: #3A3632;
    font-size: 19.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background-image:
        url("../images/supplier-tpl-3/sf-diamond.png"),
        linear-gradient(90deg, #E4AE72 0%, #F0D0AC 28%, #FDF2E7 57%, #F6DCBD 79%, #E4AE72 100%);
    background-position: 20px center, 0 0;
    background-size: 29px 24px, 100% 100%;
    background-repeat: no-repeat, no-repeat;
}

/* 标题 (291,1235.2) 24px/700 lh24 → 48，行距按 1.17 放宽（设计稿 24/24 换算过来，
   真实字体渲染两行英文会贴在一起，实测 48/48 太挤，改为 48/56） */
.sf3-hot-title {
    margin-top: 44px;
    color: var(--sf3-text);   /* 设计稿实测 #333，不是主题蓝 */
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0;
    position: relative;       /* 配合 top，实测墨迹比设计高 2px */
    top: 2px;
    /* 设计稿标题固定两行。真实商品名可能有一百多字符，不限行会撑到 5 行
       把定位行/按钮全部顶出去，这里按设计稿截两行，完整名称放在 title 属性里 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    /* 设计稿标题恒占两行；短标题（如只有一个词）也留出两行高，
       保证下面的价格行/按钮位置不变，两卡节奏一致 */
    min-height: 112px;
}

/* 卡2 文字块整体比设计高 1~4px，逐级补偿（标题 +4、其余逐级回冲） */
.sf3-hot-card.is-reverse .sf3-hot-title {
    margin-top: 54px;       /* 字形顶 2953 */
}

.sf3-hot-card.is-reverse .sf3-hot-tag {
    margin-top: 39px;
}

.sf3-hot-card.is-reverse .sf3-hot-desc {
    margin-top: 43px;
}

.sf3-hot-card.is-reverse .sf3-hot-line {
    margin-top: 34px;
}

/* 定位行：图标 16×16→32；文字 12px→24 lh30，字形顶 2368.5 */
.sf3-hot-tag {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 40px;
    color: var(--sf3-orange);
    font-size: 24px;
    line-height: 30px;
}

.sf3-hot-tag img {
    flex: none;
    width: 32px;
    height: 32px;
}

/* 描述 9px lh18 → 18/36 #2546A1，字形顶 2444.2 */
.sf3-hot-desc {
    width: 580px;
    max-width: 100%;
    margin-top: 44px;
    color: var(--sf3-blue);
    font-size: 18px;
    line-height: 36px;
    letter-spacing: -0.5px;  /* 对齐设计稿的换行位置 */
}

.sf3-hot-card.is-reverse .sf3-hot-desc {
    width: 587px;
}

/* 描述：原型里就是价格行下面的一段说明文字，恒两行（18/36）
   商家写超了截两行，没写也占两行高度，保证下面的橙线、按钮位置跟原型一致 */
.sf3-hot-desc.is-point {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    min-height: 72px;
}

/* 橙色线 (292,1394) 40.5×3 → 81×6，顶 2552 */
.sf3-hot-line {
    display: block;
    width: 81px;
    height: 6px;
    margin-top: 36px;
    /* 设计稿是「长线 71 + 间隙 4 + 短点 6」两段 */
    background: linear-gradient(90deg,
        var(--sf3-orange) 0 71px,
        transparent 71px 75px,
        var(--sf3-orange) 75px 81px);
}

/* 按钮 (290.5,1421) 120×27.5 → 240×55，顶 2606 */
.sf3-hot-btn {
    display: flex;
    align-items: center;
    width: 240px;
    height: 55px;
    margin-top: 48px;
    padding: 0 7px 0 42px;
    border-radius: 999px;
    background: var(--sf3-blue);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
}

.sf3-hot-btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    background: #F1F3F7;
}

.sf3-hot-btn-cart img {
    width: 25px;
    height: 23px;
}

/* 国旗条 (265,1864) 720×97.5 → 1440×195，顶 3492 */
.sf3-flags {
    margin-top: 29px;
    font-size: 0;
    text-align: center;
}

.sf3-flags img {
    display: block;
    width: 1440px;
    max-width: 100%;
    height: 195px;
    margin: 0 auto;
    object-fit: cover;
}

/* ==========================================================================
   公司简介  标注 (0,1983) 1250×447.5 → 3730..4625
   ========================================================================== */
.sf3-about {
    position: relative;
    height: 895px;
    margin-top: 43px;       /* 区顶 3730 − 国旗条底 3687 */
    overflow: hidden;
    background-color: #2A70DA;   /* 图未加载时的兜底 */
    /* 背景是设计稿导出的源图（2500×895，只有渐变+建筑+ABOUT US 水印，不含任何照片） */
    background-image: url("../images/supplier-tpl-3/about-bg.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.sf3-about-inner {
    display: flow-root;     /* 阻止子元素 margin 外溢，保证图组按区顶定位 */
    height: 100%;
}

.sf3-about-text {
    position: relative;
    z-index: 1;
    width: 736px;
    max-width: 55%;
}

/* 标题 (264,2017.4) 20px/700 ls1.29 → 40px ls2.58，字形顶 3798.8
   实测墨迹比设计低 7px：只上移标题本身（改 margin 会连带下移正文/按钮/统计） */
.sf3-about-title {
    top: -2px;
    margin-top: 71px;
    font-size: 40px;
    line-height: 42px;
    letter-spacing: 2.58px;
    text-align: left;
}

/* 描述 (264.9,2060.8) 7px lh15 → 14/30，字形顶 3885.6 */
.sf3-about-desc {
    height: 210px;
    margin-top: 43px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: justify;
    /* 简介固定 7 行（210 ÷ 30），超出部分省略号收尾：
       否则商家简介一长就会顶掉下面 View More 和数据条，把整块版式撑乱 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* View More (265,2179) 83.5×27.5 → 167×55，顶 4122 */
.sf3-about .sf3-btn-orange {
    margin-top: 26px;       /* 按钮顶 4122 − 描述底 4085.7 */
}

/* 数据条 (265,2222.5) 404×84.5 → 808×169，顶 4209 */
.sf3-stats {
    display: flex;
    width: 808px;
    height: 169px;
    margin-top: 32px;
    padding: 41px 0 0 44px; /* 数字字形顶 4259 */
    background: linear-gradient(90deg, #2546A1 50.6%, rgba(37, 70, 161, 0.99) 51%, rgba(37, 70, 161, 0.2) 91.9%, rgba(37, 70, 161, 0) 100%);
}

/* 第一组距条左 44；第二组 (440,2243.7) 距条左 175×2=350 */
.sf3-stat {
    flex: none;
    width: 306px;
}

.sf3-stat-top {
    display: flex;
    align-items: baseline;
}

/* 数字 30px/700 → 60/60 */
.sf3-stat-num {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
}

/* Yeas / m² 9px/500 → 18/18 */
.sf3-stat-unit {
    margin-left: 2px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 2.26px;    /* 设计 1.13 @1x */
    text-transform: uppercase; /* YEAS / M² */
}

/* Industry Experience 9px → 18/18 */
.sf3-stat-label {
    margin-top: 5px;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.6px;    /* 设计 -0.3 @1x */
}

/* 右侧图组：主图 316×183.5@2x → 632×367；小图 154.7×90.2 → 309×180 */
.sf3-about-media {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 1440px;
    height: 100%;
    margin-left: -720px;
    pointer-events: none;
}

.sf3-about-media img {
    position: absolute;
    display: block;
}

.sf3-about-main {
    top: 75px;              /* 图顶 3805 − 区顶 3730 */
    left: 808px;
    width: 632px;
    height: 367px;
    object-fit: cover;
}

.sf3-about-sub-1 {
    top: 466px;
    left: 806px;
    width: 309px;
    height: 180px;
    object-fit: cover;
}

.sf3-about-sub-2 {
    top: 466px;
    left: 1131px;
    width: 309px;
    height: 180px;
    object-fit: cover;
}

/* ==========================================================================
   产品中心 / 工厂实力 / VR / 为什么选择
   ========================================================================== */
.sf3-body-bg {
    position: relative;
    display: flow-root;      /* 阻止子元素负 margin 外溢，F8FBFF 背景须从 4625 开始 */
    background: #F8FBFF;
}

/* 卡片 (265.5,2337) 719×597 → 1438×1194，上缘压 About 区 187
   高度按需求去掉：商品数量由后台装修配置决定，固定 1194 会在商品多时溢出 / 少时留大空白，
   改由内容撑开（.sf3--data .sf3-pc-card 已是 height:auto + flow-root，底部留白靠 .sf3-pc-more 的 margin-bottom） */
.sf3-pc {
    position: relative;
    z-index: 2;
    margin-top: -187px;
}

.sf3-pc-card {
    /* display: flow-root —— .sf3-pc-card 的高度去掉后（改成内容撑开），最后一个子元素
       .sf3-pc-more 的 margin-bottom: 64px 会因 margin 塌陷穿透到卡片外面，
       表现为「View More 贴着卡底、卡片下方多出 64px」。flow-root 建立 BFC 把它关在卡内 */
    display: flow-root;
    width: 1438px;
    max-width: 100%;
    margin: 0 auto;
    padding: 74px 29px 0;
    border-radius: 26px;
    background: #fff;
    /* 设计剖面：左右各约 90px、底部约 150px 的淡蓝柔光（卡边处最深 Δ10），顶部压在 About 深蓝上看不见 */
    box-shadow: 0 20px 100px rgba(122, 170, 230, 0.20);
}

/* 标题 (519,2376.4) 212×21 → 424×42，字形顶 4516.8 */
.sf3-pc .sf3-title {
    letter-spacing: 2.74px;
}

/* 导航 7px → 14，文字顶 4601.2，虚线底 4638 */
.sf3-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 114px;
    margin-top: 45px;       /* 文字顶 4601.2 − 标题底 4554 */
    padding-bottom: 25px;   /* 底线 4638 */
    border-bottom: 1px solid var(--sf3-line);
}

.sf3-tab {
    position: relative;
    color: #666666;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
}

/* 选中下划线 (342,2436.5) 27×1.5 → 54×3
   类名用 active（不是 is-active）：index.php 的 doAction.changeCategory 里是 addClass('active') */
.sf3-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -25px;
    width: 54px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--sf3-blue);
}

/* 商品网格 5 列 252，行高 400（图 252 + 文字 148），顶 4669 */
.sf3-pc-grid {
    display: grid;
    grid-template-columns: repeat(5, 252px);
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
    margin-top: 30px;       /* 图顶 4669 − 底线 4639 */
}

.sf3-pc-item {
    display: block;
    width: 252px;
    height: 400px;
}

.sf3-pc-img {
    position: relative;
    width: 252px;
    height: 252px;
    /* 与数据版一致：只有左上 + 右下 15px 圆角，加一层淡蓝柔光 */
    border-radius: 15px 0 15px 0;
    box-shadow: 0px 20px 140px 0px rgba(67, 153, 234, 0.15);
    overflow: hidden;
}

/* 设计稿每张产品图左上角都有 Super Factory 徽标 (0,0) 119×27，
   原先烘焙在裁图里，改用原始切图后需由样式叠加 */
.sf3-pc-img::after {
    content: "Super Factory";
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    width: 47.2%;
    height: 10.7%;
    padding-left: 26px;
    box-sizing: border-box;
    border-radius: 15px 0 15px 0;  /* 只有左上 + 右下圆角，右上/左下直角 */
    color: #3A3632;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background-image:
        url("../images/supplier-tpl-3/sf-diamond.png"),
        linear-gradient(90deg, #E4AE72 0%, #F0D0AC 28%, #FDF2E7 57%, #F6DCBD 79%, #E4AE72 100%);
    background-position: 6px center, 0 0;
    background-size: 16px 13px, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
}

.sf3-pc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 名称 7px lh9 → 14/18 #333，字形顶 4923.2 */
.sf3-pc-name {
    display: -webkit-box;
    height: 36px;
    letter-spacing: -0.28px;   /* 设计 -2% */
    margin-top: 22px;       /* 名称字形顶 4947 − 图底 4922 */
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    line-height: 18px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 价格 9px #EC2C3D → 18/18，字形顶 4971.6 */
.sf3-pc-price {
    margin-top: 14px;       /* 价格字形顶 4991.6 */
    color: #EC2C3D;
    font-size: 18px;
    line-height: 18px;
}

/* 100 Kg (MOQ) 7px → 14/14，字形顶 5001.8 */
.sf3-pc-moq {
    margin-top: 12px;
    color: #666666;
    font-size: 14px;
    line-height: 14px;
}

/* 查看更多 (583.5,2864.5) 83.5×27.5 → 167×55 */
.sf3-pc-more {
    display: flex;
    margin: 58px auto 64px;  /* 上边距 58、下边距 64（下边距即卡内底部留白） */
}

/* -------------------------------------------------------------------------
   工厂实力  标注 (0,2958)；标题 (504,2995.4) → 5754.8
   ------------------------------------------------------------------------- */
.sf3-factory {
    margin-top: 48px;       /* 区顶 5680 − 产品中心卡底 5632 */
    padding: 70px 0 84px;
}

.sf3-factory .sf3-title {
    letter-spacing: 2.88px;
}

/* 线 (264.5,3031.5) + 菱形 (606,3029) → 切图 22 高，顶 5821 */
.sf3-factory .sf3-divider {
    margin-top: 29px;       /* 切图顶 5821 − 标题行盒底 5791.8 */
}

/* 副标 (447,3050.7) 10px → 20/20，字形顶 5865.4 */
.sf3-sub {
    letter-spacing: -0.46px;
    margin-top: 22px;
    color: var(--sf3-blue);
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

/* 6 图 477×347，列距 12，行距 61，顶 5962。
   比例用 aspect-ratio 锁死，窄屏容器变窄时高度等比收缩，
   避免出现「宽度自适应、高度仍 347」把图片裁成竖条、且各图构图裁剪不一致的问题 */
.sf3-fac-grid {
    display: grid;
    grid-template-columns: repeat(3, 477px);
    gap: 61px 12px;
    justify-content: center;
    margin-top: 77px;       /* 副标下移 2px 后补偿，保持图片顶 6198 */
}

.sf3-fac-item {
    position: relative;
    width: 477px;
    max-width: 100%;
    min-width: 0;              /* 关键：grid/flex 下禁止被图片固有宽度撑开 */
    height: auto;
    aspect-ratio: 477 / 347;   /* 宽高比锁定，任何视口下 6 张完全同尺寸 */
    border-radius: 8px;        /* 设计稿卡片四角是圆角（放大实测半径约 8px） */
    overflow: hidden;
}

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

/* 标题条文字 8px → 16px #FFF，居中于 461 宽蓝条，条高 24.5×2=49
   设计稿的蓝色条是半透明深蓝蒙版（压在照片上，实测 RGB 约 60,89,168），
   之前一直靠截图的像素，数据版换图后就没了 → 这里用半透明底色画出来 */
.sf3-fac-item .sf3-fac-cap {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;            /* 设计稿图注以整卡 477 宽居中，非蓝条 461 宽 */
    height: 49px;
    background: rgba(43, 82, 180, 0.90);
    color: #fff;
    font-size: 16px;
    line-height: 49px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   VR FACTORY  标注 (0,3518.5) 1250×318 → 6801..7437
   ------------------------------------------------------------------------- */
.sf3-vr {
    position: relative;
    height: 636px;
    overflow: hidden;
    background: #34549E url("../images/supplier-tpl-3/vr-bg.jpg") center top / 2500px 100% no-repeat;
    color: #fff;
    text-align: center;
}

.sf3-vr-inner {
    position: relative;
    z-index: 1;
}

/* 标题 (415.5,3567.5) 50px/700 lh65 ls10 → 100/130 ls20，字形顶 6899 */
.sf3-vr-title {
    width: 837px;           /* 标注 (415.5,3567.5) 418.5×65 → 837×130，左对齐 */
    margin: 98px auto 0;
    color: #fff;
    font-size: 100px;
    font-weight: 700;
    line-height: 130px;
    letter-spacing: 20px;
    text-align: left;
    text-indent: 0;
    text-transform: uppercase;  /* 标题取装修栏目名，统一按设计稿大字写法 */
}

/* 副标 (411,3638) 16px/700 ls1 → 32 ls2，字形顶 7040 */
/* 字号实际值 28px：比设计稿 32 小一档（用户指定），行高同步到 28 保持单行居中 */
.sf3-vr-sub {
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
}

/* 720 图标 (593,3702.5) 64×40.5 → 128×81，顶 7169（实测墨迹低 6px，margin 101→95） */
.sf3-vr-720 {
    display: block;
    width: 128px;
    height: 81px;
    margin: 95px auto 0;
}

/* 宣传视频：同一位置换成播放按钮；高度按需求 100px（宽度 auto，随 play.png 70×90 比例走 ≈ 78px），
   比 720 图标（128×81）高 19px，下方 Explore Now 会跟着下移 19px */
.sf3-vr-play {
    display: block;
    width: auto;
    height: 100px;
    margin: 95px auto 0;
}

/* Explore Now (583.9,3772.9) 6.45px ls4.38 → 12.9 ls8.76，字形顶 7310；
   按需求去掉 margin-top，紧贴播放按钮/720 图标下方 */
.sf3-vr-explore {
    display: block;
    color: #ffffff;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 8.76px;
    text-indent: 8.76px;
}

/* -------------------------------------------------------------------------
   为什么选择  标注 (0,3837) 1250×308.5 → 7438..8059，背景 #EFF4FF
   ------------------------------------------------------------------------- */
.sf3-why {
    height: 621px;
    margin-top: 1px;        /* 区顶 7438 */
    padding: 73px 0 0;
    background: #EFF4FF;
}

/* 标题 196×21 → 392×42，字形顶 7515.8 */
.sf3-why .sf3-title {
    letter-spacing: 2.2px;
}

/* 线 (264.5,3916) + 菱形 (605.5,3913.5) → 切图 22 高，顶 7590 */
.sf3-why .sf3-divider {
    margin-top: 37px;       /* 切图顶 7590 − 标题行盒底 7552.8 */
}

/* 5 卡 274×291，间距 18，顶 7680 */
.sf3-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 274px);
    justify-content: space-between;
    gap: 0;
    margin-top: 68px;
}

.sf3-why-item {
    height: 291px;
    padding: 27px 10px 0;
    border-radius: 13px;
    background: #fff;
    text-align: center;
}

/* 图标 44×32 → 88×64，距卡顶 27 */
.sf3-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.sf3-why-icon img {
    width: auto;
    max-width: 88px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

/* 标题 12px/700 lh14 → 24/28 #070852，字形顶 7790.4 */
.sf3-why-title {
    height: 56px;
    margin-top: 21px;
    letter-spacing: -0.8px;   /* 实测比设计宽 9px（12 字符），收字距对齐 */
    color: var(--sf3-blue-deep);
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

/* 描述 7px lh10 → 14/20 #2546A1，字形顶 7885 */
.sf3-why-desc {
    margin-top: 33px;
    color: var(--sf3-blue);
    font-size: 14px;
    line-height: 20px;
}

/* ==========================================================================
   资质证书  背景 (0,4147.5) 1250.5×387 → 8059..8833，白底
   ========================================================================== */
.sf3-cert {
    height: 774px;
    padding: 69px 0 0;
    overflow: hidden;
    background: #fff;
}

/* 标题 336.5×21 → 673×42，字形顶 8133 */
.sf3-cert .sf3-title {
    letter-spacing: 2.5px;
}

/* 副标 (465.5,4218.9) 10px ls0.64 → 20/28 ls1.28，字形顶 8201.8 */
.sf3-cert-sub {
    margin-top: 28px;
    color: var(--sf3-blue);
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    letter-spacing: 1.28px;
}

.sf3-cert-sub .sf3-sep {
    margin: 0 7.5px;        /* 两条竖线共 4 段间距，实测 10 会让整行宽出 10px */
    font-style: normal;
}

/* 证书整条 (178,4236) 894×296 → 1788×592，顶 8236，左 −174 */
.sf3-cert .sf3-cert-img {
    display: block;
    width: 1788px;
    max-width: none;
    height: 592px;
    margin: 10px 0 0 -174px;   /* 副标下移 3px 后补偿 */
    object-fit: cover;
}

/* ==========================================================================
   联系供应商  标注 (1,4534.5) → 8833 起，背景 #F8FBFF
   ========================================================================== */
.sf3-contact {
    padding: 61px 0 0;
    background: #F8FBFF;
}

/* 标题 342×21 → 684×42，字形顶 8898.8 */
.sf3-contact .sf3-title {
    left: 21px;             /* 设计稿该标题首字前有一个空格，实测需右移 21 */
    letter-spacing: 3.18px;
}

/* 白板 (265.5,4624) 719.5×199 → 1440×400，顶 9010 */
.sf3-form {
    width: 1440px;
    max-width: 100%;
    height: 400px;
    margin: 74px auto 0;    /* 白板顶 9010 − 标题行盒底 8935.8 */
    padding: 44px 0 0 19px;
    background: #fff;
    overflow: hidden;
}

.sf3-form-row {
    display: grid;
    grid-template-columns: 109px minmax(0, 1fr);
    column-gap: 6px;
}

.sf3-form-row + .sf3-form-row {
    margin-top: 28px;
}

.sf3-form-row.sf3-form-row-submit {
    margin-top: 28px;       /* 按钮顶 9326 */
}

/* 标签 7px → 14px #999 右对齐 */
.sf3-form-row label {
    color: #999999;
    font-size: 14px;
    line-height: 18px;
    text-align: right;
    white-space: nowrap;    /* E-mail Address 不换行 */
}

.sf3-form-row:first-child label {
    padding-top: 12px;
}

.sf3-form-row:nth-child(2) label {
    padding-top: 9px;
}

.sf3-form-row:nth-child(3) label {
    padding-top: 12px;
}

.sf3-form-row label.is-req::before {
    content: "*";
    margin-right: 4px;
    color: #C3413F;
}

/* To 只读框 666..1941 × 41 高 #EAEBF1 */
.sf3-form-readonly {
    height: 41px;
    padding: 0 18px;
    background: #EAEBF1;
    color: #333333;
    font-size: 14px;
    line-height: 41px;
}

/* Message 输入域 106 高 */
.sf3-form textarea {
    width: 100%;
    height: 106px;
    padding: 8px 18px;
    border: 1px solid #E4E6E7;
    border-radius: 2px;
    outline: none;
    background: #fff;
    color: #333333;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
}

/* E-mail 输入框 41 高 */
.sf3-form-input {
    width: 100%;
    height: 41px;
    padding: 0 18px;
    border: 1px solid #E4E6E7;
    border-radius: 2px;
    outline: none;
    background: #fff;
    color: #333333;
    font-family: inherit;
    font-size: 14px;
    line-height: 39px;
}

/* Send 按钮 251×40 → 252×41 #2546A1 圆角 4，顶 9562 */
.sf3-form-submit {
    width: 252px;
    height: 41px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--sf3-blue);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 41px;
    cursor: pointer;
}

.sf3-form textarea:focus,
.sf3-form-input:focus {
    border-color: var(--sf3-blue);
}

.sf3-form textarea::placeholder,
.sf3-form-input::placeholder {
    color: #9AA0A9;
}

/* ==========================================================================
   响应式（1440 基准以下的降级）
   ========================================================================== */
@media (max-width: 1500px) {
    /* 窄屏给内容区留出边距，分类卡不会贴屏幕边缘 */
    .sf3-container {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .sf3-pc-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 20px;
    }

    .sf3-pc-item {
        width: auto;
    }

    .sf3-hot-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .sf3-hot-text,
    .sf3-hot-card.is-reverse .sf3-hot-text {
        width: calc(100% - 568px);
    }

    .sf3-fac-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sf3-fac-item {
        width: 100%;           /* 撑满等分列，不再随内容宽度变化 */
        min-width: 0;
    }

    .sf3-fac-item .sf3-fac-cap {
        width: 100%;
    }

    .sf3-why-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    .sf3-cert .sf3-cert-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: 0;
    }
}

@media (max-width: 1200px) {
    /* 窄屏布局已重排，设计稿整幅烘焙背景（含卡片/水印）无法对齐，改用同色渐变兜底 */
    .sf3-middle {
        background-image: linear-gradient(180deg, #FBFDFF 0%, #E8F2FF 45%, #F5FAFF 100%);
        background-size: 100% 100%;
    }

    .sf3-about {
        background-image: linear-gradient(160deg, #1080DA 0%, #0D53D3 60%, #1C4DB5 100%);
    }

    .sf3-title {
        font-size: 32px;
        letter-spacing: 1.6px;
    }

    .sf3-banner {
        height: 460px;
    }

    .sf3-banner-title {
        font-size: 44px;
        line-height: 48px;
    }

    .sf3-category {
        padding-top: 48px;
    }

    .sf3-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sf3-cat-card {
        height: auto;
        padding-bottom: 56px;
    }

    .sf3-cat-action {
        bottom: 8px;
    }

    .sf3-made-grid {
        gap: 20px;
    }

    .sf3-made-grid .sf3-made-item {
        flex: 0 0 calc((100% - 2 * 20px) / 3);
    }

    .sf3-made-item img {
        height: auto;
        aspect-ratio: 258 / 459;
    }

    .sf3-hot-card,
    .sf3-hot-card.is-reverse {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        min-height: 0;          /* 窄屏上下排列，卡高交给内容，不再锁 660 */
        padding: 34px;
    }

    /* 窄屏改上下排列后，文字与图片都要占满卡宽，否则溢出 */
    .sf3-hot-text,
    .sf3-hot-card.is-reverse .sf3-hot-text {
        width: 100%;
        margin-left: 0;
    }

    .sf3-hot-media,
    .sf3-hot-media img {
        width: 100%;
        max-width: 528px;
        height: auto;
        aspect-ratio: 1;
    }

    .sf3-hot-card::after {
        display: none;          /* 卡底装饰带只属于设计稿的桌面版式 */
    }

    .sf3-hot-card.is-reverse .sf3-hot-media {
        order: 0;
        margin-bottom: 30px;
    }

    .sf3-hot-media,
    .sf3-hot-media img {
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .sf3-hot-text,
    .sf3-hot-card.is-reverse .sf3-hot-text {
        width: 100%;
        margin-left: 0;
    }

    .sf3-hot-title {
        font-size: 38px;
        line-height: 46px;
        min-height: 92px;       /* 两行高 */
    }

    .sf3-about {
        height: auto;
        padding-bottom: 70px;
    }

    .sf3-about-inner {
        padding-bottom: 60px;
    }

    .sf3-about-media {
        display: none;
    }

    .sf3-pc {
        height: auto;
        margin-top: -80px;
        padding-bottom: 40px;
    }

    .sf3-pc-card {
        height: auto;
        padding: 50px 24px 60px;
    }

    .sf3-tabs {
        gap: 34px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sf3-pc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 24px;
    }

    .sf3-pc-item {
        height: auto;
    }

    .sf3-fac-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
        width: 100%;
    }

    /* 卡片锁比例；img 必须 height:100% 撑满卡片，
       若给 img 也写 aspect-ratio + height:auto，会和卡片高度打架 */
    .sf3-fac-item {
        width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 477 / 347;
    }

    .sf3-fac-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf3-vr {
        height: auto;
        padding: 80px 0 90px;
    }

    .sf3-vr-title {
        width: auto;
        max-width: 100%;
        font-size: 56px;
        line-height: 1.2;
        letter-spacing: 6px;
        text-align: center;
    }

    .sf3-vr-sub {
        font-size: 20px;
        line-height: 1.4;
    }

    .sf3-vr-720 {
        margin-top: 40px;
    }

    .sf3-vr-explore {
        margin-top: 24px;
    }

    .sf3-why {
        height: auto;
        padding-bottom: 60px;
    }

    .sf3-why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .sf3-cert {
        height: auto;
        padding-bottom: 40px;
    }

    .sf3-form {
        width: 100%;
        height: auto;
        padding: 28px 24px 32px;
    }

    .sf3-form-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }

    .sf3-form-row label {
        text-align: left;
        padding-top: 0 !important;
    }
}

@media (max-width: 768px) {
    .sf3-title {
        font-size: 24px;
    }

    .sf3-banner {
        height: auto;
        padding-bottom: 60px;
    }

    .sf3-banner .sf3-container {
        padding: 0 20px;        /* 窄屏避免文字贴边 */
    }

    .sf3-banner-tag {
        width: auto;
        max-width: 100%;
    }

    .sf3-banner-title {
        font-size: 30px;
        line-height: 36px;
    }

    .sf3-banner-checks {
        width: 100%;
        height: auto;
        padding: 12px;
    }

    .sf3-banner-checks .sf3-check-item {
        font-size: 13px;
        line-height: 18px;
        white-space: normal;
    }

    .sf3-cat-grid,
    .sf3-pc-grid,
    .sf3-fac-grid,
    .sf3-why-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sf3-pc-grid,
    .sf3-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 生产现场：手机上两列，保持卡片等分 */
    .sf3-made-grid {
        gap: 16px;
    }

    .sf3-made-grid .sf3-made-item {
        flex: 0 0 calc((100% - 16px) / 2);
    }

    .sf3-hot-card {
        padding: 22px;
    }

    .sf3-hot-title {
        font-size: 26px;
        line-height: 34px;
        min-height: 68px;       /* 两行高 */
    }

    .sf3-hot-desc {
        width: 100%;
        font-size: 14px;
        line-height: 26px;
    }

    .sf3-about-text {
        width: 100%;
        max-width: 100%;
    }

    .sf3-about-desc {
        height: auto;
        /* 窄屏（H5 / 小屏 PC）恢复完整展示，不做行数截断 */
        display: block;
        -webkit-line-clamp: unset;
    }

    .sf3-stats {
        width: 100%;
        height: auto;
        padding: 20px;
    }

    .sf3-stat {
        width: 50%;
    }

    .sf3-form-submit {
        width: 100%;
    }

    .sf3-cert .sf3-cert-img {
        height: auto;
    }
}

/* -------------------------------------------------------------------------
   工厂第二行 6 图：设计稿本身不是严格栅格，第 4/5/6 张分别比第一行整体左 7/4/1px
   （实测第一行左边界 522/1011/1500，第二行 529/1015/1501，行内 pitch 489 vs 486）。
   卡片尺寸仍严格 477×347 一致，这里只做整块位移以贴合设计稿；
   若希望两行绝对对齐，删掉这段即可（整页像素差会从 2.03 升到 2.55）。
   ------------------------------------------------------------------------- */
@media (min-width: 1501px) {
    .sf3:not(.sf3--data) .sf3-fac-grid .sf3-fac-item:nth-child(4) { transform: translateX(-7px); }
    .sf3:not(.sf3--data) .sf3-fac-grid .sf3-fac-item:nth-child(5) { transform: translateX(-4px); }
    .sf3:not(.sf3--data) .sf3-fac-grid .sf3-fac-item:nth-child(6) { transform: translateX(-1px); }
}

/* ==========================================================================
   数据版（.sf3--data）适配
   模板由装修配置驱动后，图片来自后台上传（比例不定）、数量不定，
   这里只补"静态稿里是 img 元素、数据版变成背景占位"的部分，不改设计稿数值
   ========================================================================== */

/* ---- Banner：设计稿是单张烘焙图；数据版也是一张整图（文案做在图里），高度由装修配置内联控制 ---- */
.sf3--data .sf3-banner {
    /* 设计稿 banner 是 2500×500 的整图，标题等文字烘焙在图里，文字左边缘落在 x=530，
       正好等于 (2500−1440)/2，也就是 1440 内容区左边缘。
       用 auto 100%（按高度等比、宽度自动）：图不会被纵向拉伸，横向上等于按 H/500 倍放大再居中裁切。
       所以装修里配的 banner 高度要跟图的比例对得上（2500×500 的图 → 高度配 500）。
       background-size 加 !important：防止主题 / 装修侧的后置规则再把它改回 cover（cover 会让烘焙文字错位）。 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100% !important;
}
.sf3-banner--swiper {
    height: 500px;
    background: #05070F;
}
.sf3-banner-swiper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.sf3-banner-swiper .swiper-slide {
    width: 100%;            /* 兜底：Swiper 未初始化时也要铺满 */
    flex: 0 0 auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ---- 生产现场：封面用背景图，播放按钮居中 ---- */
.sf3--data .sf3-made-item {
    height: 459px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(37, 70, 161, 0.16);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* 卡片不做描边/光圈：封面图自带圆角裁切即为卡片边界 */
.sf3-made-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 鼠标移入 / 键盘聚焦：只做封面轻微放大，不上浮、不加描边和光晕 */
.sf3-made-item:hover .sf3-made-cover,
.sf3-made-item:focus-visible .sf3-made-cover {
    transform: scale(1.04);
}
.sf3-made-item:hover .sf3-made-play,
.sf3-made-item:focus-visible .sf3-made-play {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}
.sf3-made-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 90px;
    margin: -45px 0 0 -35px;
    pointer-events: none;
}
.sf3-made-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- 公司简介：图片改背景占位 ---- */
.sf3-about-slot {
    position: absolute;     /* 与 .sf3-about-media img 一致，脱离文档流按 top/left 定位 */
    display: block;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

/* ---- 工厂实力：封面改背景占位（标题条仍是 .sf3-fac-cap 叠在底部） ---- */
.sf3-fac-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;        /* 与卡片一致，避免背景图盖住圆角 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ---- VR：整块可点 ---- */
.sf3-vr-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ---- 证书：设计稿是一条拼好的长图，数据版是 N 张独立证书。
       证书数量不定 → 区块高度改为自适应，图片按等分列排布，避免各自占满一行把高度撑爆 ---- */
.sf3--data .sf3-cert {
    height: auto;
    padding-bottom: 70px;
    overflow: visible;
}
.sf3-cert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    max-width: 1440px;      /* 与容器同宽（列表已移出 .sf3-container，需自己居中） */
    margin: 18px auto 0;
}
/* 演示证书条：设计稿里是满幅出血的（2500 宽），按原比例铺满整行 */
.sf3--data .sf3-cert.is-bleed {
    padding-bottom: 0;      /* 图底就是区块底，不再补 70 留白 */
}
.sf3-cert-list.is-bleed {
    display: block;
    max-width: none;
    margin-top: 0;          /* 图内已含上方的留白 */
}
.sf3-cert-list.is-bleed .sf3-cert-item {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}
.sf3-cert-item {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: contain;
    box-shadow: 0 6px 24px rgba(37, 70, 161, 0.08);
}

/* ---- 产品中心：tab 数量不定（装修里可能十几个），允许换行 ---- */
.sf3--data .sf3-tabs {
    flex-wrap: wrap;
    row-gap: 14px;
}

/* ---- 产品中心：商品列表由 index.php 的 goods-tpl 异步渲染，
        结构是 .m-avg-sm-5 > .goods-item-panel，需要映射成设计稿卡片 ---- */
/* 数据版商品数量不定，卡片高度必须自适应；底部留白由 .sf3-pc-more 的 margin-bottom 撑开。
   display:flow-root 必须有：否则 .sf3-pc-more 的 margin-bottom 会穿透父级（margin 塌陷），
   卡片高度差 64px，按钮直接贴到卡底。 */
.sf3--data .sf3-pc-card {
    display: flow-root;
    height: auto;
    padding-bottom: 0;
}
.sf3--data .sf3-pc-grid {
    row-gap: 30px;          /* 商品卡之间的行间距，设计稿 30px */
}
.sf3--data .sf3-pc-grid > * {
    display: contents;      /* 打散老框架的栅格包裹层，让卡片直接参与 grid */
}
.sf3--data .sf3-pc-grid .goods-item-panel {
    display: block;
    float: none;            /* 老框架用 float:left + width:20% */
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;              /* 老样式 .goods-item-panel 带 1px 灰边 */
}
.sf3--data .sf3-pc-grid .goods-item-panel .thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 252px;
    padding-bottom: 0;      /* 老样式用 padding-bottom:100% 撑正方形，会把卡片撑高 */
    /* 设计稿：只有左上 + 右下是圆角（15px），右上/左下保持直角 */
    border-radius: 15px 0 15px 0;
    box-shadow: 0px 20px 140px 0px rgba(67, 153, 234, 0.15);
    overflow: hidden;
}
/* 老样式在缩略图上盖了一层 3% 黑遮罩，设计稿没有 */
.sf3--data .sf3-pc-grid .goods-item-panel .thumb:after {
    display: none;
}
/* 超级工厂店铺：商品图左上角叠 Super Factory 徽标（设计稿 119×27 / 图片 252 宽 = 47.2%）
   纯 CSS 实现：伪元素自带文字 + 双层背景（钻石图 + 橙色渐变），
   圆角用 border-radius 对角写法，不需要额外切图。
   ajax 返回的是老结构 .goods-item-panel，类名跟静态版的 .sf3-pc-img 不同，这里单独补一层 */
.sf3--data .sf3-pc-grid .goods-item-panel .thumb::before {
    content: "Super Factory";
    position: absolute;
    left: 0;                /* 与设计稿标注一致：徽标贴图片左上角 (0,0) */
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 47.2%;
    aspect-ratio: 119 / 27;
    padding-left: 26px;     /* 给左侧钻石图标留位 */
    box-sizing: border-box;
    border-radius: 15px 0 15px 0;  /* 只有左上 + 右下圆角，右上/左下直角 */
    color: #3A3632;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background-image:
        url("../images/supplier-tpl-3/sf-diamond.png"),
        linear-gradient(90deg, #E4AE72 0%, #F0D0AC 28%, #FDF2E7 57%, #F6DCBD 79%, #E4AE72 100%);
    background-position: 6px center, 0 0;
    background-size: 16px 13px, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
}
.sf3--data .sf3-pc-grid .goods-item-panel .thumb img,
.sf3--data .sf3-pc-grid .goods-item-panel .thumb .goods-lazy-img {
    display: block;
    position: static;       /* 老样式 absolute + translate(-50%,-50%) 居中 */
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf3--data .sf3-pc-grid .goods-item-panel .info {
    padding: 0;
}
.sf3--data .sf3-pc-grid .goods-item-panel .goods-name {
    display: -webkit-box;
    height: 36px;
    margin-top: 22px;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.28px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sf3--data .sf3-pc-grid .goods-item-panel .goods-desc {
    margin: 0;
}
.sf3--data .sf3-pc-grid .goods-item-panel .price {
    display: block;
    margin-top: 14px;
    color: #EC2C3D;
    font-size: 18px;
    line-height: 18px;
}
.sf3--data .sf3-pc-grid .goods-item-panel .min-order-item {
    margin-top: 10px;
    color: #666666;
    font-size: 14px;
    line-height: 18px;
}

/* ---- why 卡标题是整句（不是设计稿的两行短语），取消固定两行高度 ---- */
.sf3--data .sf3-why-title {
    height: auto;
    min-height: 56px;
    letter-spacing: 0;
}

/* ---- 热销标题里是商品名链接，继承颜色不要下划线 ---- */
.sf3-hot-title a,
.sf3--data .sf3-cat-card {
    color: inherit;
    text-decoration: none;
}

/* Banner 图文层：装修数据带 title/desc 时叠加在图上（只有文案才渲染这层） */
.sf3-banner-slide {
    position: relative;
}
.sf3-banner-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.sf3-banner-slide > .sf3-container {
    position: relative;
    height: 100%;           /* container 自带 position:relative，不撑满会让文案层按高度 0 定位到顶部 */
}
.sf3-banner-copy {
    position: absolute;
    left: 0;
    top: 66px;              /* 设计稿是顶部对齐（标签顶 58），不是垂直居中 */
    z-index: 2;
    max-width: 640px;
    color: #fff;
    pointer-events: none;
}
.sf3-banner-copy-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -1px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
}
.sf3-banner-copy-desc {
    margin-top: 18px;
    font-size: 18px;
    line-height: 28px;
    opacity: .9;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .25);
}
/* 数据版复用设计稿的三层结构：蓝色标签条 / 56px 大标题 / 描边框里的勾选说明 */
/* 设计稿标签是 464×28 的定宽胶囊、文字 14px 左对齐（实测宽 479、字宽 265，右侧留白） */
.sf3-banner-copy .sf3-banner-tag {
    width: auto;
    min-width: 464px;
    max-width: 100%;
    display: inline-flex;
    padding: 0 20px 0 17px;
    text-shadow: none;      /* 标签本身是实底，不需要阴影 */
}
.sf3-banner-copy .sf3-banner-title {
    margin-top: 27px;
    margin-left: -3px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .34);
}
/* 数据里的说明条数不定（1 条也可能），高度改成自适应 */
.sf3-banner-copy .sf3-banner-checks {
    width: 552px;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 16px 13px 10px;
    margin-top: 26px;
    background: rgba(5, 7, 15, 0.18);
}
.sf3-banner-copy .sf3-check-item {
    display: flex;
    align-items: flex-start;
    padding-left: 0;        /* 原设计稿用 absolute 图标 + 26px 缩进，这里改 flex */
    line-height: 20px;
}
.sf3-banner-copy .sf3-check-item .sf3-check {
    position: static;       /* 覆盖设计稿的 absolute 定位 */
    flex: none;
    margin: 2px 9px 0 0;
}
.sf3-banner-copy .sf3-check-item + .sf3-check-item {
    margin-top: 8px;
}

/* ---- 分类卡按钮：默认只露圆形箭头，鼠标移入展开成 View More 胶囊 ---- */
.sf3-cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 收起时只有箭头（padding 均分即居中），展开后文字在左箭头在右 */
    width: 47px;
    height: 47px;
    padding: 0 7.5px;
    border-radius: 999px;
    background: var(--sf3-blue);
    overflow: hidden;
    transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.sf3-cat-btn-text {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.34s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.sf3-cat-btn-arrow {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
}
.sf3-cat-btn-arrow img {
    width: 21px;
    height: 6px;
}
/* hover / 键盘聚焦 时展开 */
.sf3-cat-card:hover .sf3-cat-btn,
.sf3-cat-card:focus-visible .sf3-cat-btn {
    width: 218px;
}
.sf3-cat-card:hover .sf3-cat-btn-text,
.sf3-cat-card:focus-visible .sf3-cat-btn-text {
    max-width: 150px;
    margin-left: 30px;      /* 设计稿文字距胶囊左边缘 55px（含 7.5 padding） */
    opacity: 1;
}

@media (max-width: 768px) {
    .sf3-cat-swiper .swiper-slide {
        width: calc(100vw - 64px);
    }
    .sf3-cat-card {
        height: auto;
        padding-bottom: 56px;
    }
    .sf3-cat-img {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        position: relative;
    }
    .sf3-cat-img img {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* 窄屏（容器贴屏）时外侧没有箭头空间：
   给轮播外框左右留 56px 内边距，箭头落在这条空隙里，不压住卡片；
   内边距放在 stage 上而不是 swiper 上，swiper 的 overflow:hidden 才能连这条空隙一起裁干净 */
@media (max-width: 1560px) {
    /* 左右 56px 内边距只在「需要出箭头」时留（.is-carousel）：给箭头腾空间、不压卡片。
       分类 ≤4 个时模板不输出箭头（一排摆满），这里也不留内边距，
       否则 4 张卡会被挤窄、左右各空 76px，铺不满内容区 */
    .sf3-cat-stage.is-carousel,
    .sf3-made-stage {
        padding-left: 56px;
        padding-right: 56px;
    }
    .sf3-cat-prev {
        left: 4px;
    }
    .sf3-cat-next {
        right: 4px;
    }
    /* 生产现场轮播同理：留出箭头空间，箭头不压卡片 */
    .sf3-made-prev {
        left: 4px;
    }
    .sf3-made-next {
        right: 4px;
    }
    /* 卡片变窄时产品图按卡片宽度等比缩放（仍是正方形），不写死 300 */
    .sf3-cat-img {
        width: calc(100% - 45px);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}