.hero-grid {
    display: grid;
    grid-template-columns: 1.25fr .95fr .95fr;
    gap: 20px;
    align-items: stretch;
}

.banner {
    position: relative;
    border-radius: var(--theme-radius);
    overflow: hidden;
    background: #111;
    min-height: 310px;
    color: #fff;
}

.banner-large {
    min-height: 668px;
}

.banner-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.banner-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18));
}

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

.banner-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 25%, rgba(255, 255, 255, .28), transparent 18%),
        radial-gradient(circle at 82% 78%, rgba(19, 191, 166, .35), transparent 22%),
        linear-gradient(135deg, #151020 0%, #2f2142 48%, #0f766e 100%);
}

.banner-small.one .banner-fallback {
    background:
        radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .26), transparent 20%),
        linear-gradient(135deg, #111827, #0f766e);
}

.banner-small.two .banner-fallback {
    background:
        radial-gradient(circle at 82% 30%, rgba(255, 255, 255, .28), transparent 18%),
        linear-gradient(135deg, #3b1020, #e01a2b 55%, #ff7a18);
}

.banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 42px;
    display: flex;
    align-items: center;
}

.banner-small .banner-content {
    padding: 30px;
    align-items: center;
}

.banner-inner {
    max-width: 520px;
}

.entry-subtitle {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    opacity: .58;
    margin-bottom: 14px;
}

.entry-title {
    margin: 0;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.8px;
}

.banner-large .entry-title {
    font-size: 52px;
}

.banner-small .entry-title {
    font-size: 30px;
    line-height: 1.12;
}

.entry-excerpt {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75;
    opacity: .72;
}

.banner-action {
    margin-top: 26px;
}

.shop-button {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
}

.banner-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.category-row {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-mini {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: var(--theme-radius);
    padding: 20px;
    min-height: 118px;
    position: relative;
    overflow: hidden;
}

.category-mini::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -32px;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: #f3f4f6;
}

.category-mini h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    position: relative;
    z-index: 2;
}

.category-mini p {
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.products-panel {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: var(--theme-radius);
    padding: 22px;
}

@media (max-width: 1180px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .banner-large {
        min-height: 500px;
    }

    .banner-right {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .category-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .banner-large {
        min-height: 420px;
    }

    .banner-large .entry-title {
        font-size: 34px;
    }

    .banner-small .entry-title {
        font-size: 26px;
    }

    .banner-content,
    .banner-small .banner-content {
        padding: 26px;
    }

    .banner-right,
    .category-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================
   Homepage hero full-width responsive fix
   ===================================== */

/* 首页主体容器：保证宽度居中并尽量吃满可用空间 */
.home-page,
.home-wrap,
.page-container {
    width: 100%;
}

/* 首页内容区更接近 Digimart 的大宽度 */
.home-page .page-container,
.page-container {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(18px, 3vw, 40px) !important;
    padding-right: clamp(18px, 3vw, 40px) !important;
}

/* Hero 区域：不要固定死宽度，改成按比例撑满 */
.hero-grid {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    gap: clamp(18px, 2vw, 28px) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

/* 左侧大 banner 撑满左列 */
.banner-large {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: clamp(520px, 42vw, 660px) !important;
}

/* 右侧两张 banner 撑满右列 */
.banner-right {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: clamp(18px, 2vw, 28px) !important;
    height: 100% !important;
}

/* 所有 banner 卡片都占满所在网格 */
.banner,
.banner-right .banner {
    width: 100% !important;
    min-width: 0 !important;
}

/* 右侧小 banner 高度跟左侧整体对齐 */
.banner-right .banner {
    min-height: 0 !important;
}

/* 防止内容把网格撑坏 */
.banner-content,
.banner-media,
.banner-fallback {
    min-width: 0 !important;
}

/* 大标题在宽屏下更稳，不会挤爆 */
.banner-large .entry-title {
    max-width: 620px;
}

/* 1440+ 大屏：继续保持舒展，但不无限拉宽 */
@media (min-width: 1440px) {
    .home-page .page-container,
    .page-container {
        max-width: 1400px !important;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    }
}

/* 1100-1300 中等屏幕：适当缩小左图比例，避免右侧太窄 */
@media (max-width: 1280px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) !important;
    }

    .banner-large {
        min-height: 560px !important;
    }
}

/* 平板：仍然两列，但高度降低 */
@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
        gap: 18px !important;
    }

    .banner-large {
        min-height: 500px !important;
    }
}

/* 小屏和手机：上下排列 */
@media (max-width: 860px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .banner-large {
        min-height: 440px !important;
    }

    .banner-right {
        grid-template-rows: auto auto !important;
    }

    .banner-right .banner {
        min-height: 260px !important;
    }
}

/* 手机端：进一步压缩高度 */
@media (max-width: 560px) {
    .home-page .page-container,
    .page-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .banner-large {
        min-height: 380px !important;
    }

    .banner-right .banner {
        min-height: 230px !important;
    }
}

/* =========================================
   Secondary promo mosaic (below hero)
   ========================================= */
.secondary-promo-section {
    margin: 28px 0 42px;
}

.secondary-promo-mosaic {
    display: grid;
    grid-template-columns: 1.08fr 1fr 1.08fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.secondary-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.secondary-card::before,
.secondary-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.secondary-card-inner {
    position: relative;
    z-index: 2;
    padding: 22px 24px;
    max-width: 58%;
}

.secondary-card-eyebrow {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .56;
    margin-bottom: 18px;
}

.secondary-card-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111111;
}

.secondary-card-desc {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.68;
    color: rgba(17, 17, 17, 0.72);
}

.secondary-card-link {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 左高卡 */
.secondary-card-left {
    grid-row: 1 / span 2;
    min-height: 600px;
    background:
        radial-gradient(circle at 72% 72%, rgba(225, 215, 201, 0.65), rgba(225, 215, 201, 0) 26%),
        linear-gradient(180deg, #f5f1ea 0%, #e7dfd4 100%);
}

.secondary-card-left::before {
    right: -40px;
    bottom: -30px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, rgba(0,0,0,0.16), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 60%);
    opacity: .12;
}

.secondary-card-left::after {
    right: 18px;
    bottom: 10px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(210,206,198,0.5));
    box-shadow: inset -16px -12px 30px rgba(0,0,0,0.08);
    opacity: .32;
}

/* 中上 */
.secondary-card-mid-top {
    min-height: 288px;
    background:
        radial-gradient(circle at 73% 32%, rgba(255,255,255,0.58), rgba(255,255,255,0) 24%),
        linear-gradient(180deg, #eef2f5 0%, #d8e0e7 100%);
}

.secondary-card-mid-top::after {
    right: 18px;
    bottom: 12px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(196,203,209,0.88));
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: .75;
}

/* 中下 */
.secondary-card-mid-bottom {
    min-height: 288px;
    background:
        radial-gradient(circle at 70% 28%, rgba(255,255,255,0.48), rgba(255,255,255,0) 25%),
        linear-gradient(180deg, #eef1f4 0%, #d8dfe5 100%);
}

.secondary-card-mid-bottom::after {
    right: 18px;
    bottom: 14px;
    width: 190px;
    height: 150px;
    border-radius: 50% 50% 44% 44%;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(207,214,219,0.86));
    box-shadow: 0 12px 30px rgba(0,0,0,0.07);
    opacity: .78;
}

/* 右高卡 */
.secondary-card-right {
    grid-row: 1 / span 2;
    min-height: 600px;
    background:
        radial-gradient(circle at 73% 70%, rgba(236, 220, 204, 0.70), rgba(236, 220, 204, 0) 26%),
        linear-gradient(180deg, #f5ede3 0%, #e8dacb 100%);
}

.secondary-card-right::before {
    right: 28px;
    bottom: 36px;
    width: 300px;
    height: 200px;
    border-radius: 45% 45% 40% 40%;
    background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(217,200,182,0.42));
    box-shadow: inset -16px -10px 24px rgba(0,0,0,0.07);
    opacity: .44;
}

.secondary-card-right::after {
    right: 64px;
    bottom: 30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(210,193,178,0.35));
    box-shadow: inset -10px -10px 16px rgba(0,0,0,0.06);
    opacity: .36;
}

/* 不同卡片文本宽度微调 */
.secondary-card-left .secondary-card-inner,
.secondary-card-right .secondary-card-inner {
    max-width: 52%;
}

.secondary-card-mid-top .secondary-card-inner,
.secondary-card-mid-bottom .secondary-card-inner {
    max-width: 58%;
}

/* 平板 */
@media (max-width: 1180px) {
    .secondary-promo-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .secondary-card-left,
    .secondary-card-right {
        grid-row: auto;
        min-height: 420px;
    }

    .secondary-card-mid-top,
    .secondary-card-mid-bottom {
        min-height: 240px;
    }

    .secondary-card-left {
        grid-column: 1 / span 2;
    }

    .secondary-card-right {
        grid-column: 1 / span 2;
    }
}

/* 手机 */
@media (max-width: 760px) {
    .secondary-promo-section {
        margin: 22px 0 34px;
    }

    .secondary-promo-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }

    .secondary-card-left,
    .secondary-card-right,
    .secondary-card-mid-top,
    .secondary-card-mid-bottom {
        grid-column: auto;
        grid-row: auto;
        min-height: 250px;
    }

    .secondary-card-inner,
    .secondary-card-left .secondary-card-inner,
    .secondary-card-right .secondary-card-inner,
    .secondary-card-mid-top .secondary-card-inner,
    .secondary-card-mid-bottom .secondary-card-inner {
        max-width: 68%;
        padding: 20px 18px;
    }

    .secondary-card-title {
        font-size: 28px;
    }

    .secondary-card-desc {
        font-size: 14px;
        line-height: 1.55;
    }
}


/* ===== secondary promo compact final ===== */
.secondary-promo-section {
    padding: 18px 0 26px;
}

.secondary-promo-mosaic {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr 1.08fr;
    grid-template-rows: 285px 285px;
    gap: 18px;
    align-items: stretch;
}

.secondary-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 0;
    background: #ebe6dd;
    min-height: auto;
    box-shadow: none;
}

.secondary-card-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    background:
        radial-gradient(circle at 68% 78%, rgba(255,255,255,0.26) 0, rgba(255,255,255,0.08) 24%, rgba(255,255,255,0) 25%),
        linear-gradient(135deg, #e9e3d9 0%, #efe9df 55%, #ddd2c3 100%);
}

.secondary-card-mid-top {
    grid-column: 2;
    grid-row: 1;
    background:
        radial-gradient(circle at 76% 36%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0) 25%),
        linear-gradient(135deg, #eef2f5 0%, #dfe7ee 100%);
}

.secondary-card-mid-bottom {
    grid-column: 2;
    grid-row: 2;
    background:
        radial-gradient(circle at 72% 74%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0) 25%),
        linear-gradient(135deg, #eef2f5 0%, #dde4ea 100%);
}

.secondary-card-right {
    grid-column: 3;
    grid-row: 1 / span 2;
    background:
        radial-gradient(circle at 72% 78%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0) 25%),
        linear-gradient(135deg, #efe7dc 0%, #ece3d7 56%, #dccfc2 100%);
}

.secondary-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 24px 24px 22px;
    max-width: 78%;
}

.secondary-card-eyebrow {
    margin-bottom: 12px;
    color: rgba(0,0,0,0.42);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.secondary-card-title {
    margin: 0 0 12px;
    color: #06080f;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.secondary-card-desc {
    margin: 0 0 16px;
    color: rgba(0,0,0,0.56);
    font-size: 14px;
    line-height: 1.55;
    max-width: 320px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.secondary-card-link {
    margin-top: auto;
    display: inline-block;
    color: #06080f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.secondary-card::before,
.secondary-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.secondary-card-left::before {
    right: -10px;
    bottom: -18px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 72%);
}

.secondary-card-right::before {
    right: -6px;
    bottom: 10px;
    width: 300px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 72%);
}

.secondary-card-mid-top::before {
    right: 18px;
    bottom: 14px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0) 72%);
}

.secondary-card-mid-bottom::before {
    right: 14px;
    bottom: 16px;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0) 72%);
}

@media (max-width: 1200px) {
    .secondary-promo-mosaic {
        width: min(1180px, calc(100% - 24px));
        grid-template-columns: 1fr 0.92fr 1fr;
        grid-template-rows: 255px 255px;
        gap: 16px;
    }

    .secondary-card-inner {
        padding: 20px 20px 18px;
        max-width: 84%;
    }

    .secondary-card-title {
        font-size: clamp(17px, 1.8vw, 24px);
    }

    .secondary-card-desc {
        font-size: 13px;
        line-height: 1.5;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 900px) {
    .secondary-promo-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .secondary-card-left,
    .secondary-card-mid-top,
    .secondary-card-mid-bottom,
    .secondary-card-right {
        grid-column: auto;
        grid-row: auto;
        min-height: 240px;
    }

    .secondary-card-left,
    .secondary-card-right {
        min-height: 320px;
    }

    .secondary-card-inner {
        max-width: 78%;
    }
}
/* ===== /secondary promo compact final ===== */

/* =====================================
   Secondary promo full width refinement
   让次级展示模块宽度与 Hero 区域对齐
   ===================================== */

/* 整个模块吃满当前页面容器 */
.secondary-promo-section {
    width: 100% !important;
    margin: 28px 0 42px !important;
    padding: 0 !important;
}

/* 去掉之前的 1280px 限制，跟随 page-container 宽度 */
.secondary-promo-mosaic {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) minmax(0, 1.08fr) !important;
    grid-template-rows: 285px 285px !important;
    gap: 18px !important;
}

/* 卡片本身也必须完全撑满格子 */
.secondary-card {
    width: 100% !important;
    min-width: 0 !important;
}

/* 左右两张高卡保持和中间两张整体高度一致 */
.secondary-card-left,
.secondary-card-right {
    min-height: 588px !important;
}

/* 中间两张卡 */
.secondary-card-mid-top,
.secondary-card-mid-bottom {
    min-height: 285px !important;
}

/* 文字不要太靠边，也不要太散 */
.secondary-card-inner {
    padding: 26px 28px 22px !important;
}

/* 大屏下更舒展 */
@media (min-width: 1440px) {
    .secondary-promo-mosaic {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.1fr) !important;
        gap: 20px !important;
    }
}

/* 中等屏幕保持稳定 */
@media (max-width: 1200px) {
    .secondary-promo-mosaic {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr) !important;
        grid-template-rows: 255px 255px !important;
        gap: 16px !important;
    }

    .secondary-card-left,
    .secondary-card-right {
        min-height: 526px !important;
    }

    .secondary-card-mid-top,
    .secondary-card-mid-bottom {
        min-height: 255px !important;
    }
}

/* 平板和手机仍然上下排列 */
@media (max-width: 900px) {
    .secondary-promo-mosaic {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 16px !important;
    }

    .secondary-card-left,
    .secondary-card-right,
    .secondary-card-mid-top,
    .secondary-card-mid-bottom {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 260px !important;
    }
}

/* =====================================
   Factory video showcase section
   ===================================== */

.factory-video-section {
    width: 100%;
    margin: 28px 0 30px;
}

.factory-video-wrap {
    width: 100%;
    min-height: 460px;
    border-radius: 12px;
    overflow: hidden;
    background: #e8e8eb;
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.35fr);
    align-items: stretch;
}

.factory-video-copy {
    padding: clamp(44px, 6vw, 86px) clamp(32px, 4vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.factory-video-eyebrow {
    margin-bottom: 22px;
    color: rgba(0,0,0,.46);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.factory-video-title {
    margin: 0;
    color: #05070d;
    font-size: clamp(32px, 3.1vw, 52px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.factory-video-desc {
    margin: 28px auto 0;
    max-width: 520px;
    color: rgba(0,0,0,.62);
    font-size: 16px;
    line-height: 1.7;
}

.factory-video-note {
    margin: 14px auto 0;
    max-width: 520px;
    color: rgba(0,0,0,.48);
    font-size: 13px;
    line-height: 1.55;
}

.factory-video-player {
    position: relative;
    background: #050505;
    padding: 48px 48px 42px;
    display: grid;
    grid-template-rows: minmax(260px, 1fr) auto;
    gap: 28px;
}

.factory-video-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

.factory-video-screen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 4px;
    background:
        radial-gradient(circle at 70% 36%, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
        linear-gradient(135deg, #050505 0%, #101014 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-video-el {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.factory-video-screen.has-video .factory-video-el {
    display: block;
}

.factory-video-screen.has-video .factory-video-placeholder {
    display: none;
}

.factory-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

.factory-video-placeholder strong {
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 900;
    letter-spacing: -.02em;
}

.factory-video-placeholder span {
    margin-top: 10px;
    font-size: 14px;
    color: rgba(255,255,255,.72);
}

.factory-video-play-dot {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #ffffff;
    color: #050505;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 12px 30px rgba(255,255,255,.12);
}

.factory-video-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 20px;
    height: 92px;
    margin-top: -46px;
    border: 0;
    background: #efeff2;
    color: #050505;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-video-prev {
    left: 0;
}

.factory-video-next {
    right: 0;
}

.factory-video-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.factory-video-thumb {
    border: 0;
    padding: 0;
    min-height: 84px;
    background: #e8e8eb;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.factory-video-thumb.active {
    outline: 3px solid #13c7b7;
    outline-offset: -3px;
}

.factory-thumb-visual {
    position: absolute;
    inset: 0;
    display: block;
    opacity: .9;
}

.factory-thumb-1 {
    background: linear-gradient(135deg, #d7dce0, #f4f2eb);
}

.factory-thumb-2 {
    background: linear-gradient(135deg, #e9dfd1, #f8f3ea);
}

.factory-thumb-3 {
    background: linear-gradient(135deg, #dfe8ea, #f6f7f2);
}

.factory-thumb-4 {
    background: linear-gradient(135deg, #e5e0ef, #f5f3fa);
}

.factory-video-thumb strong {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    z-index: 2;
    color: #050505;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 跟 hero / secondary 一样吃满当前页面内容宽度 */
.factory-video-section,
.factory-video-wrap {
    max-width: none;
}

/* 大屏 */
@media (min-width: 1440px) {
    .factory-video-wrap {
        min-height: 500px;
        grid-template-columns: minmax(360px, .88fr) minmax(620px, 1.4fr);
    }

    .factory-video-screen {
        min-height: 320px;
    }
}

/* 中屏 */
@media (max-width: 1180px) {
    .factory-video-wrap {
        grid-template-columns: 1fr;
    }

    .factory-video-copy {
        padding: 44px 36px 34px;
    }

    .factory-video-player {
        padding: 34px;
    }
}

/* 手机 */
@media (max-width: 680px) {
    .factory-video-section {
        margin: 22px 0 26px;
    }

    .factory-video-wrap {
        border-radius: 10px;
    }

    .factory-video-copy {
        padding: 34px 22px 26px;
        text-align: left;
    }

    .factory-video-desc,
    .factory-video-note {
        margin-left: 0;
        margin-right: 0;
    }

    .factory-video-player {
        padding: 22px;
        gap: 18px;
    }

    .factory-video-screen {
        min-height: 220px;
    }

    .factory-video-arrow {
        width: 18px;
        height: 70px;
        margin-top: -35px;
        font-size: 28px;
    }

    .factory-video-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================
   Factory video compact height refinement
   视频展示区高度压缩约 1/5
   ===================================== */

.factory-video-section {
    margin: 24px 0 26px !important;
}

.factory-video-wrap {
    min-height: 368px !important;
}

/* 左侧文字区域压缩 */
.factory-video-copy {
    padding: clamp(30px, 4.5vw, 58px) clamp(26px, 3.5vw, 54px) !important;
}

/* 左侧主标题缩小 */
.factory-video-title {
    font-size: clamp(26px, 2.45vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
}

/* 顶部小标题间距压缩 */
.factory-video-eyebrow {
    margin-bottom: 16px !important;
    font-size: 11px !important;
}

/* 描述文字和间距压缩 */
.factory-video-desc {
    margin-top: 20px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.factory-video-note {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* 右侧视频区域压缩 */
.factory-video-player {
    padding: 36px 42px 32px !important;
    gap: 20px !important;
}

.factory-video-stage {
    min-height: 220px !important;
}

.factory-video-screen {
    min-height: 230px !important;
}

.factory-video-placeholder strong {
    font-size: clamp(22px, 1.9vw, 30px) !important;
}

.factory-video-play-dot {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 14px !important;
    font-size: 18px !important;
}

/* 左右箭头同步缩短 */
.factory-video-arrow {
    height: 74px !important;
    margin-top: -37px !important;
    font-size: 30px !important;
}

/* 缩略图高度压缩 */
.factory-video-thumb {
    min-height: 66px !important;
}

.factory-video-thumbs {
    gap: 12px !important;
}

.factory-video-thumb strong {
    font-size: 10px !important;
}

/* 大屏也压缩 */
@media (min-width: 1440px) {
    .factory-video-wrap {
        min-height: 400px !important;
    }

    .factory-video-screen {
        min-height: 260px !important;
    }
}

/* 中屏适配 */
@media (max-width: 1180px) {
    .factory-video-wrap {
        min-height: auto !important;
    }

    .factory-video-copy {
        padding: 34px 30px 28px !important;
    }

    .factory-video-player {
        padding: 28px !important;
    }
}

/* 手机端继续压缩 */
@media (max-width: 680px) {
    .factory-video-copy {
        padding: 28px 20px 22px !important;
    }

    .factory-video-title {
        font-size: 28px !important;
    }

    .factory-video-screen {
        min-height: 190px !important;
    }

    .factory-video-player {
        padding: 20px !important;
    }

    .factory-video-thumb {
        min-height: 58px !important;
    }
}

/* =========================================
   Factory video thumbnails hover interaction
   视频缩略图悬停放大交互
   ========================================= */

.factory-video-thumbs {
    overflow: visible !important;
    padding: 8px 4px 10px !important;
    gap: 14px !important;
}

.factory-video-thumb {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform-origin: center center;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        filter 0.22s ease;
    will-change: transform;
    z-index: 1;
    border-radius: 10px !important;
}

/* 默认轻微质感 */
.factory-video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.00) 52%,
        rgba(0,0,0,0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

/* 鼠标悬停：放大 + 上浮 */
.factory-video-thumb:hover,
.factory-video-thumb:focus-visible {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 14px 28px rgba(8, 10, 26, 0.22);
    z-index: 8;
    filter: brightness(1.02);
}

/* hover 时高光浮现 */
.factory-video-thumb:hover::after,
.factory-video-thumb:focus-visible::after {
    opacity: 1;
}

/* 当前选中项也更明显 */
.factory-video-thumb.is-active,
.factory-video-thumb.active,
.factory-video-thumb[aria-current="true"] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(10, 14, 32, 0.18);
    border: 2px solid rgba(37, 200, 194, 0.55) !important;
}

/* 当前选中项再 hover 更突出一点 */
.factory-video-thumb.is-active:hover,
.factory-video-thumb.active:hover,
.factory-video-thumb[aria-current="true"]:hover {
    transform: translateY(-6px) scale(1.07);
    box-shadow: 0 16px 30px rgba(10, 14, 32, 0.24);
}

/* 缩略图文字也顺带一点动态 */
.factory-video-thumb strong,
.factory-video-thumb span,
.factory-video-thumb small {
    transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.factory-video-thumb:hover strong,
.factory-video-thumb:hover span,
.factory-video-thumb:hover small,
.factory-video-thumb:focus-visible strong,
.factory-video-thumb:focus-visible span,
.factory-video-thumb:focus-visible small {
    transform: translateY(-1px);
}

/* 手机端别放太大，避免挤压 */
@media (max-width: 768px) {
    .factory-video-thumbs {
        gap: 10px !important;
        padding: 6px 0 8px !important;
    }

    .factory-video-thumb:hover,
    .factory-video-thumb:focus-visible {
        transform: translateY(-3px) scale(1.03);
    }

    .factory-video-thumb.is-active:hover,
    .factory-video-thumb.active:hover,
    .factory-video-thumb[aria-current="true"]:hover {
        transform: translateY(-3px) scale(1.04);
    }
}


/* === Popular Picks module === */
.popular-picks-section {
    width: min(1410px, calc(100% - 48px));
    margin: 42px auto 36px;
}

.popular-picks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.popular-picks-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    color: #11101b;
}

.popular-category-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: #f3f1f8;
    min-height: 58px;
}

.popular-category-tab {
    border: 0;
    background: transparent;
    color: #8e8a9e;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all .22s ease;
}

.popular-category-tab:hover {
    color: #171423;
    background: rgba(255,255,255,0.72);
}

.popular-category-tab.active {
    background: #ffffff;
    color: #12101b;
    box-shadow: 0 6px 16px rgba(20,18,35,0.10);
}

.popular-picks-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}

.popular-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(26, 22, 46, 0.06);
    transition: transform .24s ease, box-shadow .24s ease;
    position: relative;
}

.popular-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(24, 22, 41, 0.12);
}

.popular-card-media {
    position: relative;
    height: 276px;
    background: #f7f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.popular-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .28s ease;
}

.popular-card:hover .popular-card-media img {
    transform: scale(1.03);
}

.popular-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #24c9bc;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.popular-card-noimage {
    color: #9a97a7;
    font-size: 16px;
    font-weight: 500;
}

.popular-card-body {
    padding: 16px 18px 18px;
}

.popular-card-category {
    color: #a09cad;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.popular-card-title {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    color: #12101b;
    min-height: 49px;
}

.popular-card-title a {
    color: inherit;
    text-decoration: none;
}

.popular-card-title a:hover {
    color: #12c8bf;
}

.popular-card-meta {
    color: #7f7a8f;
    font-size: 14px;
    line-height: 1.7;
    min-height: 52px;
}

.popular-card-extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, opacity .24s ease, margin-top .24s ease;
    margin-top: 0;
}

.popular-card:hover .popular-card-extra {
    max-height: 220px;
    opacity: 1;
    margin-top: 14px;
}

.popular-card-extra-title {
    font-size: 13px;
    font-weight: 800;
    color: #16131f;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.popular-card-extra-list {
    margin: 0;
    padding-left: 18px;
    color: #615d72;
    font-size: 14px;
    line-height: 1.7;
}

.popular-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.popular-card-btn {
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: all .22s ease;
}

.popular-card-btn-detail {
    background: #161126;
    color: #fff;
}

.popular-card-btn-detail:hover {
    background: #0e0a19;
    transform: translateY(-1px);
}

.popular-card-btn-service {
    background: #eef9f8;
    color: #11a89f;
    border: 1px solid #caefec;
}

.popular-card-btn-service:hover {
    background: #dff7f4;
    color: #0f958d;
    transform: translateY(-1px);
}

.popular-card-hidden {
    display: none !important;
}

@media (max-width: 1280px) {
    .popular-picks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .popular-picks-section {
        width: min(100%, calc(100% - 32px));
    }

    .popular-picks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .popular-category-tabs {
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .popular-picks-head {
        align-items: flex-start;
    }

    .popular-picks-grid {
        grid-template-columns: 1fr;
    }

    .popular-card-actions {
        grid-template-columns: 1fr;
    }

    .popular-category-tab {
        padding: 10px 16px;
    }
}


/* === Popular Picks hover overlay fix === */
.popular-picks-section,
.popular-picks-grid {
    overflow: visible !important;
}

.popular-picks-grid {
    align-items: start;
}

.popular-card {
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

.popular-card:hover,
.popular-card:focus-within {
    z-index: 30;
}

.popular-card-body {
    position: relative;
    overflow: visible !important;
}

.popular-card-actions {
    position: relative;
    z-index: 3;
}

/* 关键：额外信息不再占据文档流，而是悬浮显示 */
.popular-card-extra {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 12px;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 18px 40px rgba(18, 12, 35, 0.16);
    padding: 14px 18px 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 20;
}

/* hover 时显示悬浮层 */
.popular-card:hover .popular-card-extra,
.popular-card:focus-within .popular-card-extra {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 让悬浮层里的标题和列表更紧凑一点 */
.popular-card-extra-title {
    margin-bottom: 8px;
}

.popular-card-extra-list {
    margin: 0;
    padding-left: 18px;
}

.popular-card-extra-list li {
    margin-bottom: 4px;
}

/* 如果原来给 extra 写了影响布局的 margin / display，这里统一压掉 */
.popular-card-extra + .popular-card-actions,
.popular-card-actions + .popular-card-extra {
    margin-top: 0 !important;
}


/* =====================================
   Popular Picks overlay gap fix
   去掉 hover 悬浮层和卡片之间的断层
   ===================================== */

/* 让悬浮层以整张卡片为定位基准，而不是 body 内部 */
.popular-card {
    position: relative !important;
    overflow: visible !important;
    border-radius: 18px 18px 0 0 !important;
}

/* body 不再作为 extra 的定位基准 */
.popular-card-body {
    position: static !important;
    overflow: visible !important;
}

/* 悬浮层贴住整张卡片底部，去掉 margin 造成的断层 */
.popular-card-extra {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;

    /* 关键：略微往上重叠 2px，避免白色背景中间出现缝 */
    top: calc(100% - 2px) !important;

    margin-top: 0 !important;
    padding: 16px 18px 18px !important;

    background: #ffffff !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 22px 42px rgba(18, 12, 35, 0.16) !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 40;
}

/* hover 时悬浮出现 */
.popular-card:hover .popular-card-extra,
.popular-card:focus-within .popular-card-extra {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 给悬浮层顶部加一条极淡的分隔线，像自然延展出来 */
.popular-card-extra::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: rgba(17, 16, 27, .06);
}

/* hover 时让主体卡片底部圆角变直，和下面浮层自然连接 */
.popular-card:hover {
    border-radius: 18px 18px 0 0 !important;
}

/* 防止浮层被下面 footer 或其他模块盖住 */
.popular-picks-section,
.popular-picks-grid {
    overflow: visible !important;
}

.popular-card:hover,
.popular-card:focus-within {
    z-index: 80 !important;
}

/* =====================================
   Remove Popular Picks overlay separator line
   去掉商品 hover 展开区域顶部的分割线
   ===================================== */

.popular-card-extra::before {
    display: none !important;
    content: none !important;
}

/* =====================================
   Home News Section
   ===================================== */

.home-news-section {
    width: 100%;
    margin: 64px 0 72px;
}

.home-news-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.home-news-title {
    margin: 0;
    color: #05070d;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.home-news-desc {
    margin: 0;
    max-width: 520px;
    color: #6f6a7b;
    font-size: 15px;
    line-height: 1.65;
    text-align: right;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.home-news-card {
    min-width: 0;
}

.home-news-image {
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f2f7;
}

.home-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .28s ease;
}

.home-news-card:hover .home-news-image img {
    transform: scale(1.035);
}

.home-news-category {
    margin-top: 20px;
    color: #6f6a7b;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}

.home-news-card-title {
    margin: 18px 0 18px;
    color: #05070d;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.home-news-card-title a {
    color: inherit;
    text-decoration: none;
}

.home-news-card-title a:hover {
    color: #13c7b7;
}

.home-news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #6f6a7b;
    font-size: 13px;
    line-height: 1.4;
}

.home-news-meta span:first-child {
    color: #05070d;
    font-weight: 800;
}

.home-news-dot {
    color: #0f0b15;
    font-size: 14px;
}

/* 中屏 */
@media (max-width: 1180px) {
    .home-news-image {
        height: 220px;
    }

    .home-news-grid {
        gap: 22px;
    }
}

/* 平板 */
@media (max-width: 860px) {
    .home-news-head {
        flex-direction: column;
        margin-bottom: 26px;
    }

    .home-news-desc {
        text-align: left;
    }

    .home-news-grid {
        grid-template-columns: 1fr;
    }

    .home-news-image {
        height: 260px;
    }
}

/* 手机 */
@media (max-width: 560px) {
    .home-news-section {
        margin: 44px 0 52px;
    }

    .home-news-image {
        height: 210px;
    }

    .home-news-card-title {
        font-size: 22px;
    }
}

/* =====================================
   News section white background + footer spacing
   新闻区白底 + 与 Footer 间距
   ===================================== */

/* 新闻模块整体改成白色底，并且左右铺满 */
.home-news-section {
    background: #ffffff !important;
    margin-top: 64px !important;
    margin-bottom: 80px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* 让白色背景突破内容容器，铺满屏幕宽度 */
    box-shadow: 0 0 0 100vmax #ffffff !important;
    clip-path: inset(0 -100vmax) !important;
}

/* 确保新闻模块到 footer 之间的区域也是白色 */
.home-news-section::after {
    content: "";
    display: block;
    height: 80px;
    background: #ffffff;
    margin-bottom: -80px;
}

/* Footer 上方不要再贴太近 */
.site-footer,
.footer-v2 {
    margin-top: 0 !important;
}

/* 手机端留白稍微小一点 */
@media (max-width: 680px) {
    .home-news-section {
        margin-bottom: 56px !important;
    }

    .home-news-section::after {
        height: 56px;
        margin-bottom: -56px;
    }
}

/* =====================================
   Home main content white background
   从 Hero 到新闻区域全部改为白色背景
   ===================================== */

/* 页面主体背景改白 */
body {
    background: #ffffff !important;
}

/* 首页 main 区域整体白底 */
main,
.page-container,
.home-page,
.home-wrap {
    background: #ffffff !important;
}

/* Hero、视频、次级展示、热门商品、新闻区域之间的空白全部白底 */
.hero-grid,
.factory-video-section,
.secondary-promo-section,
.popular-picks-section,
.home-news-section {
    background: #ffffff !important;
}

/* 如果父级容器有浅灰背景，强制铺满白色 */
.page-container {
    box-shadow: 0 0 0 100vmax #ffffff !important;
    clip-path: inset(0 -100vmax) !important;
}

/* Footer 自己仍然保持深色，不受影响 */
.site-footer,
.footer-v2,
.footer-contact-strip,
.footer-main,
.footer-bottom {
    box-shadow: none !important;
}

/* 新闻区域到 Footer 的留白也保持白色 */
.home-news-section {
    margin-bottom: 80px !important;
}

.home-news-section::after {
    content: "";
    display: block;
    height: 80px;
    background: #ffffff !important;
    margin-bottom: -80px;
}

@media (max-width: 680px) {
    .home-news-section {
        margin-bottom: 56px !important;
    }

    .home-news-section::after {
        height: 56px;
        margin-bottom: -56px;
    }
}

/* =====================================
   Home page overflow cleanup
   首页横向溢出清理
   ===================================== */

.page-container,
.home-page,
.home-wrap,
main,
.hero-grid,
.factory-video-section,
.factory-video-wrap,
.secondary-promo-section,
.secondary-promo-mosaic,
.popular-picks-section,
.home-news-section {
    max-width: 100% !important;
    overflow-x: clip;
}

/* 部分浏览器不支持 clip 时的兜底 */
@supports not (overflow-x: clip) {
    .page-container,
    .home-page,
    .home-wrap,
    main,
    .hero-grid,
    .factory-video-section,
    .factory-video-wrap,
    .secondary-promo-section,
    .secondary-promo-mosaic,
    .popular-picks-section,
    .home-news-section {
        overflow-x: hidden;
    }
}

/* =====================================
   Home content width unify
   统一首页各模块宽度，避免 Hero 被撑满全屏
   ===================================== */

/* 首页主体模块统一按 Popular Picks 的视觉宽度 */
.hero-grid,
.factory-video-section,
.secondary-promo-section,
.popular-picks-section,
.home-news-section {
    width: min(1410px, calc(100vw - 48px)) !important;
    max-width: 1410px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 防止之前的 100% 宽度把模块撑到整屏 */
.factory-video-wrap,
.secondary-promo-mosaic,
.popular-picks-grid,
.home-news-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* Hero 内部保持两列比例，但不再超出统一宽度 */
.hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 24px !important;
}

/* 新闻区虽然背景白色，但内容宽度也要跟其他模块一致 */
.home-news-section {
    box-shadow: none !important;
    clip-path: none !important;
}

/* 新闻区和 Footer 之间继续保留白色留白 */
.home-news-section {
    margin-top: 64px !important;
    margin-bottom: 80px !important;
}

/* 如果页面外层之前被设置成 100%，这里不影响居中模块 */
.page-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 中屏适配 */
@media (max-width: 1180px) {
    .hero-grid,
    .factory-video-section,
    .secondary-promo-section,
    .popular-picks-section,
    .home-news-section {
        width: min(100%, calc(100vw - 32px)) !important;
    }

    .hero-grid {
        gap: 18px !important;
    }
}

/* 手机端适配 */
@media (max-width: 680px) {
    .hero-grid,
    .factory-video-section,
    .secondary-promo-section,
    .popular-picks-section,
    .home-news-section {
        width: min(100%, calc(100vw - 24px)) !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================
   Homepage managed Hero v1
   后台可配置Hero背景图和多语言标题
   ===================================== */

.hero-managed-banner
.banner-fallback {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.hero-managed-banner.has-managed-image
.banner-fallback {
    background-image:
        linear-gradient(
            90deg,
            rgba(8, 7, 18, .82) 0%,
            rgba(8, 7, 18, .56) 48%,
            rgba(8, 7, 18, .20) 100%
        ),
        var(--hero-bg-image) !important;
}

.banner-small.hero-managed-banner.has-managed-image
.banner-fallback {
    background-image:
        linear-gradient(
            90deg,
            rgba(8, 7, 18, .78) 0%,
            rgba(8, 7, 18, .50) 50%,
            rgba(8, 7, 18, .16) 100%
        ),
        var(--hero-bg-image) !important;
}

.hero-managed-title,
.hero-managed-description {
    white-space: pre-line;
}

.hero-managed-title {
    overflow-wrap: anywhere;
}

.hero-managed-description {
    max-width: 720px;
}


/* =====================================
   Homepage managed Hero no overlay v2
   后台上传的三个Hero区域显示原始图片
   ===================================== */

/* 关闭原有的黑色半透明伪元素遮罩 */
.hero-managed-banner .banner-media::before,
.hero-managed-banner .banner-media::after,
.hero-managed-banner::before,
.hero-managed-banner::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* 去掉主Hero和两个小Hero新增加的渐变遮罩 */
.hero-managed-banner.has-managed-image
.banner-fallback,
.banner-small.hero-managed-banner.has-managed-image
.banner-fallback {
    background-image:
        var(--hero-bg-image) !important;
    background-color:
        transparent !important;
    background-blend-mode:
        normal !important;
    background-size:
        cover !important;
    background-position:
        center center !important;
    background-repeat:
        no-repeat !important;
    filter:
        none !important;
    opacity:
        1 !important;
}

/* 确保图片容器本身也没有透明度和滤镜 */
.hero-managed-banner .banner-media,
.hero-managed-banner .banner-fallback {
    filter: none !important;
    opacity: 1 !important;
}


/* =====================================
   Homepage managed Hero text outline v3
   使用字体描边和阴影增强可读性
   不对背景图片增加任何遮罩
   ===================================== */

/* Hero标题：明显描边和立体阴影 */
.hero-managed-banner.has-managed-image
.entry-title {
    color: #ffffff !important;

    -webkit-text-stroke:
        1px rgba(5, 8, 16, .82);

    paint-order:
        stroke fill;

    text-shadow:
        -1px -1px 0 rgba(5, 8, 16, .72),
         1px -1px 0 rgba(5, 8, 16, .72),
        -1px  1px 0 rgba(5, 8, 16, .72),
         1px  1px 0 rgba(5, 8, 16, .72),
         0 3px 5px rgba(0, 0, 0, .58),
         0 7px 18px rgba(0, 0, 0, .38);
}

/* 顶部小字：轻描边，避免浅色背景看不清 */
.hero-managed-banner.has-managed-image
.entry-subtitle {
    color: #ffffff !important;
    font-weight: 700;

    -webkit-text-stroke:
        .35px rgba(5, 8, 16, .78);

    paint-order:
        stroke fill;

    text-shadow:
        -1px 0 0 rgba(5, 8, 16, .68),
         1px 0 0 rgba(5, 8, 16, .68),
         0 -1px 0 rgba(5, 8, 16, .68),
         0 1px 0 rgba(5, 8, 16, .68),
         0 2px 5px rgba(0, 0, 0, .58),
         0 4px 12px rgba(0, 0, 0, .30);
}

/* 描述文字：细描边加集中阴影 */
.hero-managed-banner.has-managed-image
.entry-excerpt {
    color: #ffffff !important;
    font-weight: 500;

    -webkit-text-stroke:
        .3px rgba(5, 8, 16, .76);

    paint-order:
        stroke fill;

    text-shadow:
        -1px 0 0 rgba(5, 8, 16, .60),
         1px 0 0 rgba(5, 8, 16, .60),
         0 -1px 0 rgba(5, 8, 16, .60),
         0 1px 0 rgba(5, 8, 16, .60),
         0 2px 4px rgba(0, 0, 0, .65),
         0 5px 14px rgba(0, 0, 0, .34);
}

/* 小Hero标题尺寸较小，描边略微减弱 */
.banner-small.hero-managed-banner.has-managed-image
.entry-title {
    -webkit-text-stroke:
        .8px rgba(5, 8, 16, .82);

    text-shadow:
        -1px -1px 0 rgba(5, 8, 16, .70),
         1px -1px 0 rgba(5, 8, 16, .70),
        -1px  1px 0 rgba(5, 8, 16, .70),
         1px  1px 0 rgba(5, 8, 16, .70),
         0 3px 6px rgba(0, 0, 0, .60),
         0 6px 15px rgba(0, 0, 0, .34);
}


/* =====================================
   Homepage managed factory video v1
   ===================================== */

.factory-video-screen {
    overflow: hidden;
    background: #07080a;
}

.factory-video-el {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: contain;
    background: #07080a;
}

.factory-video-el[hidden],
.factory-video-placeholder[hidden] {
    display: none !important;
}

.managed-video-copy,
.factory-video-title,
.factory-video-desc,
.factory-video-note {
    white-space: pre-line;
}

.factory-video-title {
    overflow-wrap: anywhere;
}

.factory-video-placeholder {
    width: 100%;
    height: 100%;
}

.factory-video-thumb {
    overflow: hidden;
}

.factory-video-thumb strong {
    position: relative;
    z-index: 2;
}

@media (max-width: 680px) {
    .factory-video-el {
        min-height: 210px;
    }
}


/* ==================================================
   Homepage managed factory video UI v2

   目标：
   1. 切换文案时整个模块不再跳动；
   2. 视频舞台固定为16:9；
   3. 视频完整铺满舞台；
   4. 底部切换按钮改成内容卡片；
   5. 预留后台卡片背景图能力。
   ================================================== */

.factory-video-section[data-managed-factory-video] {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #050505;
}

.factory-video-section[data-managed-factory-video]
.factory-video-wrap {
    width: 100%;
    min-height: 580px;
    display: grid !important;
    grid-template-columns:
        minmax(370px, 38.5%)
        minmax(0, 61.5%);
    align-items: stretch;
    gap: 0 !important;
}


/* =========================
   左侧固定文案区域
   ========================= */

.factory-video-section[data-managed-factory-video]
.factory-video-copy {
    min-width: 0;
    min-height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 46px 46px 44px;
    text-align: center;
    background: #f0f0f3;
}

.factory-video-section[data-managed-factory-video]
.factory-video-eyebrow {
    width: 100%;
    height: 22px;
    flex: 0 0 22px;
    margin: 0 0 22px;
    overflow: hidden;
    color: #8b8e98;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    letter-spacing: .075em !important;
    text-transform: uppercase;
}

.factory-video-section[data-managed-factory-video]
.factory-video-title {
    width: 100%;
    height: 3.6em;
    min-height: 3.6em;
    max-height: 3.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 0 23px;
    color: #090b0f;
    font-size: clamp(
        35px,
        2.65vw,
        48px
    ) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -.045em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.factory-video-section[data-managed-factory-video]
.factory-video-desc {
    width: 100%;
    max-width: 520px;
    height: 5.25em;
    min-height: 5.25em;
    max-height: 5.25em;
    display: -webkit-box;
    overflow: hidden;
    margin: 0 auto 12px;
    color: #676c77;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.75 !important;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.factory-video-section[data-managed-factory-video]
.factory-video-note {
    width: 100%;
    max-width: 500px;
    height: 3.4em;
    min-height: 3.4em;
    max-height: 3.4em;
    display: -webkit-box;
    overflow: hidden;
    margin: 0 auto;
    color: #9296a0;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.7 !important;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* =========================
   右侧视频展示舞台
   ========================= */

.factory-video-section[data-managed-factory-video]
.factory-video-player {
    min-width: 0;
    min-height: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 20px 20px 21px;
    background: #050505;
}

.factory-video-section[data-managed-factory-video]
.factory-video-stage {
    position: relative;
    width: 100%;
    display: block !important;
    flex: 0 0 auto;
    margin: 0;
}

.factory-video-section[data-managed-factory-video]
.factory-video-screen {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 11px;
    background: #000000;
    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, .28);
}

.factory-video-section[data-managed-factory-video]
.factory-video-el {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block;
    border: 0;
    background: #000000;

    /*
    使用cover铺满画面。
    比fill更合适，不会把人物和建筑强行拉变形。
    */
    object-fit: cover !important;
    object-position: center center;
}

.factory-video-section[data-managed-factory-video]
.factory-video-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(38, 42, 50, .56),
            rgba(5, 6, 8, .96) 66%
        );
}

.factory-video-section[data-managed-factory-video]
.factory-video-el[hidden],
.factory-video-section[data-managed-factory-video]
.factory-video-placeholder[hidden] {
    display: none !important;
}


/* =========================
   视频左右切换箭头
   ========================= */

.factory-video-section[data-managed-factory-video]
.factory-video-arrow {
    position: absolute !important;
    top: 50%;
    z-index: 8;
    width: 34px !important;
    height: 76px !important;
    min-width: 34px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    color: #101318;
    background: rgba(255, 255, 255, .92);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        width .2s ease,
        background .2s ease;
}

.factory-video-section[data-managed-factory-video]
.factory-video-arrow:hover {
    width: 39px !important;
    background: #ffffff;
}

.factory-video-section[data-managed-factory-video]
.factory-video-prev {
    left: 0;
}

.factory-video-section[data-managed-factory-video]
.factory-video-next {
    right: 0;
}


/* =========================
   底部四个视频卡片
   ========================= */

.factory-video-section[data-managed-factory-video]
.factory-video-thumbs {
    width: 100%;
    height: 94px;
    min-height: 94px;
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb {
    position: relative;
    isolation: isolate;
    min-width: 0;
    width: 100%;
    height: 94px !important;
    min-height: 94px !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    margin: 0;
    padding: 16px 15px;
    border: 1px solid
        rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #16191e;
    background: #f3f4f4;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 7px 17px
        rgba(0, 0, 0, .12);
    transform: translateY(0);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

/*
卡片图片层。

后续后台接入后，只需要在按钮上增加：
style="--video-thumb-image: url('图片地址');"

目前没有上传图片时，自动显示下面的渐变底色。
*/
.factory-video-section[data-managed-factory-video]
.factory-video-thumb
.factory-thumb-visual {
    position: absolute !important;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    opacity: 1;
    background-image:
        var(--video-thumb-image, none),
        linear-gradient(
            135deg,
            #f1f2f2,
            #e3e7e8
        );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scale(1.01);
    transition:
        transform .3s ease,
        filter .3s ease;
}

/* 图片上覆盖一层浅色渐变，让黑字稳定可见 */
.factory-video-section[data-managed-factory-video]
.factory-video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .24) 0%,
            rgba(255, 255, 255, .68) 100%
        );
    pointer-events: none;
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:nth-child(1)
.factory-thumb-visual {
    background-image:
        var(--video-thumb-image, none),
        linear-gradient(
            135deg,
            #ecf0f0,
            #d9dfdf
        );
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:nth-child(2)
.factory-thumb-visual {
    background-image:
        var(--video-thumb-image, none),
        linear-gradient(
            135deg,
            #f4efe8,
            #eae1d4
        );
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:nth-child(3)
.factory-thumb-visual {
    background-image:
        var(--video-thumb-image, none),
        linear-gradient(
            135deg,
            #edf2f2,
            #dce5e5
        );
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:nth-child(4)
.factory-thumb-visual {
    background-image:
        var(--video-thumb-image, none),
        linear-gradient(
            135deg,
            #f2eff7,
            #e5dfef
        );
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb strong {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    overflow: hidden;
    color: #171a20;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.42 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:hover {
    border-color:
        rgba(17, 198, 184, .58);
    box-shadow:
        0 12px 27px
        rgba(0, 0, 0, .19);
    transform: translateY(-2px);
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb:hover
.factory-thumb-visual {
    transform: scale(1.055);
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb.active {
    border-color: #11c6b8 !important;
    box-shadow:
        0 0 0 2px
        rgba(17, 198, 184, .30),
        0 13px 28px
        rgba(0, 0, 0, .20);
    transform: translateY(-2px);
}

.factory-video-section[data-managed-factory-video]
.factory-video-thumb.active
.factory-thumb-visual {
    filter:
        saturate(1.05)
        contrast(1.02);
}


/* =========================
   切换时的轻微过渡
   ========================= */

.factory-video-section[data-managed-factory-video]
.factory-video-copy {
    transition: opacity .15s ease;
}

.factory-video-section[data-managed-factory-video]
.factory-video-copy.is-switching {
    opacity: .72;
}


/* =========================
   俄文与哈萨克文适配
   ========================= */

html[lang^="ru"]
.factory-video-section[data-managed-factory-video]
.factory-video-title,
html[lang^="kk"]
.factory-video-section[data-managed-factory-video]
.factory-video-title {
    font-size: clamp(
        32px,
        2.35vw,
        43px
    ) !important;
    letter-spacing: -.035em;
}


/* =========================
   平板适配
   ========================= */

@media (max-width: 1100px) {
    .factory-video-section[data-managed-factory-video]
    .factory-video-wrap {
        min-height: 540px;
        grid-template-columns:
            minmax(330px, 40%)
            minmax(0, 60%);
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-copy {
        padding:
            38px 32px 36px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-title {
        font-size: clamp(
            31px,
            3.2vw,
            40px
        ) !important;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-player {
        padding:
            17px 17px 18px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-thumbs {
        height: 82px;
        min-height: 82px;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-thumb {
        height: 82px !important;
        min-height: 82px !important;
        padding: 13px 11px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-thumb strong {
        font-size: 12px !important;
    }
}


/* =========================
   手机端改为上下结构
   ========================= */

@media (max-width: 820px) {
    .factory-video-section[data-managed-factory-video]
    .factory-video-wrap {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-copy {
        min-height: 410px;
        padding:
            40px 26px 38px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-title {
        height: auto;
        min-height: 3.5em;
        max-height: none;
        font-size: clamp(
            30px,
            7.8vw,
            40px
        ) !important;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-player {
        min-height: 0;
        padding: 14px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-thumbs {
        height: auto;
        min-height: 0;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-thumb {
        height: 78px !important;
        min-height: 78px !important;
    }
}

@media (max-width: 480px) {
    .factory-video-section[data-managed-factory-video] {
        border-radius: 13px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-copy {
        min-height: 380px;
        padding:
            34px 19px 32px;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-desc {
        font-size: 14px !important;
    }

    .factory-video-section[data-managed-factory-video]
    .factory-video-arrow {
        width: 29px !important;
        min-width: 29px !important;
        height: 62px !important;
        font-size: 23px;
    }
}