/* FACAI_FRONTEND_CSS_CONSOLIDATE_001 :: web/css/home-bundle.C0102.css :: exact-order consolidation */

/* ===== SOURCE: /static/web/css/home.css ===== */
.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;
    
    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-card {
    
    
    border-radius: 14px;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}





.secondary-card-eyebrow {
    
    
    letter-spacing: .08em;
    
    
    opacity: .56;
    margin-bottom: 18px;
}







/* 左高卡 */
.secondary-card-left {
    
    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;
    
    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 {
    
    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;
    
    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%);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-video-el {
    display: none;
    
    
    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;
    
    
    
    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;
    
    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-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;
    
    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;
    
}

.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;
    
}

.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;
    
    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;
    
    text-transform: uppercase;
    letter-spacing: .03em;
}

.popular-card-extra-list {
    
    
    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-grid {
    align-items: start;
}

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

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

.popular-card-body {
    position: relative;
    
}

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

/* 关键：额外信息不再占据文档流，而是悬浮显示 */
.popular-card-extra {
    
    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;
    
    
    
    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;
    
    
    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 {
    
    
    
    background: #ffffff;
    
}

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

/* 手机端留白稍微小一点 */
@media (max-width: 680px) {
    

    
}

/* =====================================
   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::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;
    }
}


/* FACAI_HOMEPAGE_CATEGORY_003 */
.secondary-card { isolation: isolate; }
.secondary-card::before,
.secondary-card::after { z-index: 0; }
.secondary-card-managed-image {
    position: absolute;
    z-index: 1;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    filter: drop-shadow(0 16px 24px rgba(20,24,30,.10));
}
.secondary-card.has-managed-image::before,
.secondary-card.has-managed-image::after { opacity: .08; }
.secondary-card-left .secondary-card-managed-image { right:2%; bottom:2%; width:60%; height:72%; }
.secondary-card-right .secondary-card-managed-image { right:2%; bottom:3%; width:62%; height:70%; }
.secondary-card-mid-top .secondary-card-managed-image,
.secondary-card-mid-bottom .secondary-card-managed-image { right:2%; bottom:4%; width:47%; height:64%; }
.secondary-card.has-managed-image .secondary-card-inner { max-width:58%; }
.secondary-card-mid-top.has-managed-image .secondary-card-inner,
.secondary-card-mid-bottom.has-managed-image .secondary-card-inner { max-width:62%; }
@media (max-width:900px) {
    .secondary-card-managed-image { opacity:.82; }
    .secondary-card.has-managed-image .secondary-card-inner { max-width:64%; }
}


/* FACAI_HOMEPAGE_CATEGORY_004 */
.secondary-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.secondary-card:hover,
.secondary-card:focus-visible {
    color: inherit;
    text-decoration: none;
}
.secondary-card.has-managed-background {
    background-image:
        linear-gradient(90deg, rgba(248,248,248,.90) 0%, rgba(248,248,248,.70) 38%, rgba(248,248,248,.10) 70%),
        var(--secondary-card-bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.secondary-card.has-managed-background::before,
.secondary-card.has-managed-background::after {
    display: none !important;
}
.secondary-card-managed-image {
    display: none !important;
}
.secondary-card.has-managed-background .secondary-card-inner,
.secondary-card-mid-top.has-managed-background .secondary-card-inner,
.secondary-card-mid-bottom.has-managed-background .secondary-card-inner {
    max-width: 58%;
}
.secondary-card-link {
    pointer-events: none;
}
.secondary-card.has-managed-background:hover {
    transform: translateY(-1px);
}
@media (max-width: 900px) {
    .secondary-card.has-managed-background {
        background-image:
            linear-gradient(90deg, rgba(248,248,248,.94) 0%, rgba(248,248,248,.76) 48%, rgba(248,248,248,.20) 78%),
            var(--secondary-card-bg) !important;
    }
    .secondary-card.has-managed-background .secondary-card-inner {
        max-width: 66%;
    }
}

/* ===== SOURCE: /static/web/css/home-certifications.C0101.css ===== */
.home-certifications {
    width: min(1410px, calc(100vw - 48px));
    max-width: 1410px;
    margin: 30px auto 28px;
    padding: 28px 30px 24px;
    border: 1px solid #e8ebee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(18, 26, 36, .055);
}

.home-certifications__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.home-certifications__eyebrow {
    margin: 0 0 6px;
    color: #8a929b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.home-certifications h2 {
    margin: 0;
    color: #11151a;
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.03em;
}

.home-certifications__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}

.home-certification-card {
    min-width: 0;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 8px 12px;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    background: #fafbfb;
}

.home-certification-card img {
    display: block;
    width: 112px;
    max-width: 100%;
    height: 52px;
    object-fit: contain;
}

.home-certification-card span {
    color: #343a40;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}

.home-certifications__note {
    max-width: 1180px;
    margin: 18px auto 0;
    color: #68717b;
    font-size: 13px;
    line-height: 1.72;
    text-align: center;
}

@media (max-width: 1180px) {
    .home-certifications {
        width: min(100%, calc(100vw - 32px));
    }

    .home-certifications__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .home-certifications {
        width: min(100%, calc(100vw - 24px));
        margin-top: 22px;
        padding: 22px 16px 20px;
        border-radius: 14px;
    }

    .home-certifications__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .home-certification-card {
        min-height: 94px;
    }

    .home-certification-card img {
        width: 98px;
        height: 46px;
    }

    .home-certifications__note {
        font-size: 12px;
        text-align: left;
    }
}

/* ===== SOURCE: /static/web/components/factory-video/factory-video.css ===== */
/*
CaspiaSupply 首页工厂视频组件 v2

独立组件样式，不依赖首页模块样式。
*/

.cfv-section {
    --factory-accent: #11cfc0;
    --factory-background: #f3f3f5;
    --factory-title: #121419;
    --factory-text: #666c76;

    width: 100%;
    margin: 28px 0;
    padding: clamp(34px, 3.2vw, 52px);
    overflow: hidden;
    border-radius: 24px;
    background: var(--factory-background);
    box-sizing: border-box;
}

.cfv-section *,
.cfv-section *::before,
.cfv-section *::after {
    box-sizing: border-box;
}

.cfv-wrap {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(330px, 0.82fr)
        minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(38px, 4vw, 66px);
}


/* 左侧文案 */

.cfv-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.cfv-copy.is-switching {
    opacity: 0.6;
    transform: translateY(3px);
}

.cfv-eyebrow {
    width: 100%;
    height: 22px;
    margin: 0 0 20px;
    overflow: hidden;
    color: #8c919b;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.12em;
}

.cfv-title {
    width: 100%;
    height: auto;
    min-height: 3.5em;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    overflow: visible;
    color: var(--factory-title);
    font-size: clamp(35px, 2.8vw, 49px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.045em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cfv-desc {
    width: 100%;
    max-width: 520px;
    height: 5.25em;
    min-height: 5.25em;
    max-height: 5.25em;
    display: -webkit-box;
    margin: 0 auto 12px;
    overflow: hidden;
    color: var(--factory-text);
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cfv-note {
    width: 100%;
    max-width: 500px;
    height: 3.4em;
    min-height: 3.4em;
    max-height: 3.4em;
    display: -webkit-box;
    margin: 0 auto;
    overflow: hidden;
    color: #969ba4;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* 右侧媒体区 */

.cfv-player {
    min-width: 0;
    width: 100%;
}

.cfv-stage {
    position: relative;
    width: 100%;
}

.cfv-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #08090b;
    box-shadow:
        0 22px 48px rgba(24, 29, 38, 0.13),
        0 5px 15px rgba(24, 29, 38, 0.08);
}

.cfv-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: #08090b;
    object-fit: cover;
    object-position: center;
}

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


/* 没有视频时的占位 */

.cfv-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 50% 38%,
            #30343d 0%,
            #15181e 52%,
            #08090b 100%
        );
    text-align: center;
}

.cfv-placeholder-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 50%;
    color: #15181d;
    background: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    text-indent: 3px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);
}

.cfv-placeholder strong {
    font-size: 21px;
    font-weight: 700;
}

.cfv-placeholder > span:last-child {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
}


/* 左右切换按钮 */

.cfv-arrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 38px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #14171c;
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        width 0.22s ease,
        background 0.22s ease;
}

.cfv-arrow:hover {
    width: 43px;
    background: rgba(255, 255, 255, 0.97);
}

.cfv-arrow[hidden] {
    display: none;
}

.cfv-prev {
    left: 0;
    border-radius: 0 11px 11px 0;
}

.cfv-next {
    right: 0;
    border-radius: 11px 0 0 11px;
}


/* 动态缩略视频 */

.cfv-thumbs {
    width: 100%;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 18px;
}

.cfv-thumb {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 11px;
    background: #282b31;
    cursor: pointer;
    box-shadow:
        0 5px 14px rgba(25, 29, 38, 0.09);
    transform: translateY(0) scale(1);
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cfv-thumb-video,
.cfv-thumb-fallback {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0.74;
    filter:
        brightness(0.82)
        saturate(0.9);
    transform: scale(1.01);
    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.4s ease;
}

.cfv-thumb-fallback-1 {
    background:
        linear-gradient(135deg, #53686b, #b8c6c7);
}

.cfv-thumb-fallback-2 {
    background:
        linear-gradient(135deg, #816e59, #d8c4aa);
}

.cfv-thumb-fallback-3 {
    background:
        linear-gradient(135deg, #536b6e, #c5d6d7);
}

.cfv-thumb-fallback-4 {
    background:
        linear-gradient(135deg, #645e78, #cac1dc);
}

.cfv-thumb-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 12, 0.04) 0%,
            rgba(5, 8, 12, 0.17) 48%,
            rgba(5, 8, 12, 0.87) 100%
        );
    pointer-events: none;
}

.cfv-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.22);
    opacity: 0.76;
    transform:
        translate(-50%, -50%)
        scale(0.88);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.cfv-thumb-play::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #15181d;
}

.cfv-thumb strong {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 4;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.72);
    white-space: nowrap;
}


/* Hover */

.cfv-thumb:hover {
    z-index: 5;
    border-color: rgba(17, 207, 192, 0.56);
    box-shadow:
        0 12px 26px rgba(25, 29, 38, 0.18);
    transform:
        translateY(-3px)
        scale(1.025);
}

.cfv-thumb:hover
.cfv-thumb-video,
.cfv-thumb:hover
.cfv-thumb-fallback {
    opacity: 1;
    filter:
        brightness(1.06)
        saturate(1.04);
    transform: scale(1.065);
}

.cfv-thumb:hover
.cfv-thumb-play {
    opacity: 1;
    background: #ffffff;
    transform:
        translate(-50%, -50%)
        scale(1.04);
}


/* 当前激活卡片 */

.cfv-thumb.active {
    z-index: 6;
    border-color: var(--factory-accent);
    animation:
        cfv-cyan-glow
        2.2s
        ease-in-out
        infinite alternate;
}

.cfv-thumb.active
.cfv-thumb-video,
.cfv-thumb.active
.cfv-thumb-fallback {
    opacity: 1;
    filter:
        brightness(1)
        saturate(1.03);
}

.cfv-thumb.active
.cfv-thumb-play {
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(0.72);
}

@keyframes cfv-cyan-glow {
    0% {
        box-shadow:
            0 0 0 1px rgba(17, 207, 192, 0.28),
            0 0 7px rgba(17, 207, 192, 0.3),
            0 7px 18px rgba(25, 29, 38, 0.13);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(17, 207, 192, 0.72),
            0 0 19px rgba(17, 207, 192, 0.66),
            0 11px 25px rgba(25, 29, 38, 0.17);
    }
}


/* 多语言 */

html[lang^="ru"] .cfv-title,
html[lang^="kk"] .cfv-title {
    font-size: clamp(31px, 2.5vw, 44px);
    letter-spacing: -0.035em;
}


/* 平板 */

@media (max-width: 1120px) {
    .cfv-section {
        padding: 36px 30px;
    }

    .cfv-wrap {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(0, 1.45fr);
        gap: 34px;
    }

    .cfv-title {
        font-size: clamp(31px, 3.1vw, 41px);
    }

    .cfv-thumbs {
        gap: 10px;
        margin-top: 14px;
    }
}


/* 手机 */

@media (max-width: 860px) {
    .cfv-section {
        padding: 38px 20px 22px;
        border-radius: 18px;
    }

    .cfv-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cfv-copy {
        min-height: 340px;
    }

    .cfv-title {
        font-size: clamp(30px, 7.8vw, 40px);
    }

    .cfv-thumbs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .cfv-thumb {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .cfv-section {
        margin: 18px 0;
        padding: 32px 14px 16px;
    }

    .cfv-arrow {
        width: 31px;
        height: 62px;
        font-size: 23px;
    }

    .cfv-desc {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfv-thumb,
    .cfv-thumb-video,
    .cfv-thumb-play {
        transition: none;
    }

    .cfv-thumb.active {
        animation: none;
    }
}


/* ==================================================
   Factory video component v3 overrides

   1. 去掉右侧黑色容器背景；
   2. 缩略卡片使用后台图片；
   3. 加强Hover青色外发光；
   4. 主视频保持独立悬浮卡片。
   ================================================== */


/* 整个模块统一为浅灰色 */

.cfv-section[data-cfv-root] {
    background: #f3f3f5 !important;
}


/* 去掉右侧大面积黑色背景 */

.cfv-section[data-cfv-root]
.cfv-player {
    background: transparent !important;
    box-shadow: none !important;
}

.cfv-section[data-cfv-root]
.cfv-stage {
    background: transparent !important;
}


/*
只有主视频本身保留深色底，
外部不再出现黑色大箱体。
*/

.cfv-section[data-cfv-root]
.cfv-screen {
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #080a0e !important;
    box-shadow:
        0 22px 48px
        rgba(24, 29, 38, 0.13),
        0 5px 15px
        rgba(24, 29, 38, 0.08) !important;
}


/* 底部区域完全透明 */

.cfv-section[data-cfv-root]
.cfv-thumbs {
    background: transparent !important;
}


/* 缩略卡片基础外观 */

.cfv-section[data-cfv-root]
.cfv-thumb {
    overflow: hidden !important;
    border:
        2px solid
        rgba(20, 23, 29, 0.08) !important;
    border-radius: 11px !important;
    background: #e8eaed !important;
    box-shadow:
        0 5px 14px
        rgba(25, 29, 38, 0.08) !important;
}


/* 后台上传的卡片底图 */

.cfv-section[data-cfv-root]
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb-fallback {
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 0.82 !important;

    filter:
        brightness(0.86)
        saturate(0.92) !important;

    transform: scale(1.01) !important;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.4s ease !important;
}


/* 图片上保留轻微渐变，保证文字清晰 */

.cfv-section[data-cfv-root]
.cfv-thumb-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 12, 0.02) 0%,
            rgba(5, 8, 12, 0.12) 44%,
            rgba(5, 8, 12, 0.88) 100%
        ) !important;
}


/* Hover：明显的青色外发光 */

.cfv-section[data-cfv-root]
.cfv-thumb:hover {
    z-index: 10 !important;

    border-color:
        #00e8e0 !important;

    box-shadow:
        0 0 0 1px
            rgba(0, 232, 224, 0.94),
        0 0 10px 3px
            rgba(0, 232, 224, 0.66),
        0 0 22px 6px
            rgba(0, 232, 224, 0.28),
        0 12px 26px
            rgba(25, 29, 38, 0.18) !important;

    transform:
        translateY(-3px)
        scale(1.025) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb:hover
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb:hover
.cfv-thumb-fallback {
    opacity: 1 !important;

    filter:
        brightness(1.08)
        saturate(1.05) !important;

    transform: scale(1.065) !important;
}


/* 当前激活状态 */

.cfv-section[data-cfv-root]
.cfv-thumb.active {
    border-color:
        #00e8e0 !important;

    animation:
        cfv-cyan-glow-v3
        2.2s
        ease-in-out
        infinite alternate !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb.active
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb.active
.cfv-thumb-fallback {
    opacity: 1 !important;

    filter:
        brightness(1)
        saturate(1.03) !important;
}


/* 更明显但不过分刺眼的呼吸光 */

@keyframes cfv-cyan-glow-v3 {
    0% {
        box-shadow:
            0 0 0 1px
                rgba(0, 232, 224, 0.50),
            0 0 7px 2px
                rgba(0, 232, 224, 0.38),
            0 7px 18px
                rgba(25, 29, 38, 0.12);
    }

    100% {
        box-shadow:
            0 0 0 1px
                rgba(0, 232, 224, 0.96),
            0 0 15px 4px
                rgba(0, 232, 224, 0.72),
            0 0 25px 6px
                rgba(0, 232, 224, 0.24),
            0 11px 25px
                rgba(25, 29, 38, 0.16);
    }
}


/* 未上传底图时的临时浅灰渐变 */

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-1 {
    background:
        linear-gradient(
            135deg,
            #d7e1e2,
            #aebfc1
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-2 {
    background:
        linear-gradient(
            135deg,
            #e9dfd1,
            #cbbb9f
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-3 {
    background:
        linear-gradient(
            135deg,
            #dbe5e6,
            #b5c7c9
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-4 {
    background:
        linear-gradient(
            135deg,
            #e4deed,
            #c2b8d2
        ) !important;
}


/* 减少动画模式 */

@media (prefers-reduced-motion: reduce) {
    .cfv-section[data-cfv-root]
    .cfv-thumb.active {
        animation: none !important;

        box-shadow:
            0 0 0 2px
            rgba(0, 232, 224, 0.64) !important;
    }
}


/* ==================================================
   CFV component width constraint
   与首页其他主要内容区域保持一致
   ================================================== */

.cfv-section[data-cfv-root] {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* 平板和手机减小左右留白 */

@media (max-width: 860px) {
    .cfv-section[data-cfv-root] {
        width: calc(100% - 24px) !important;
    }
}


/* FACAI_HOMEPAGE_VIDEO_004 */
.cfv-placeholder[data-cfv-play] {
    cursor: pointer;
}

.cfv-placeholder[data-cfv-play]:focus-visible {
    outline: 3px solid rgba(20, 184, 166, .42);
    outline-offset: -5px;
}

.cfv-placeholder.is-loading .cfv-placeholder-icon {
    animation: cfv-video-loading-spin 1s linear infinite;
}

.cfv-placeholder.is-error .cfv-placeholder-icon {
    color: #ef6b6b;
}

.cfv-placeholder.is-error [data-video-placeholder-text] {
    color: #f0a0a0;
}

@keyframes cfv-video-loading-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* FACAI_HOMEPAGE_VIDEO_005 */
.cfv-placeholder-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: .82;
}

.cfv-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7,15,25,.10), rgba(7,15,25,.45));
    pointer-events: none;
}

.cfv-placeholder > *:not(.cfv-placeholder-poster) {
    position: relative;
    z-index: 2;
}

/* ===== SOURCE: /static/web/components/homepage-news/homepage-news.css ===== */
/*
CaspiaSupply Homepage News
独立首页新闻资讯组件
*/

.hnews-section {
    width: calc(100% - 40px);
    max-width: 1420px;
    margin: 64px auto 80px;
    color: #12141a;
    background: #ffffff;
}

.hnews-section *,
.hnews-section *::before,
.hnews-section *::after {
    box-sizing: border-box;
}

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

.hnews-title {
    margin: 0;
    color: #05070d;
    font-size: clamp(25px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.hnews-description {
    max-width: 520px;
    margin: 0;
    color: #6f6a7b;
    font-size: 14px;
    line-height: 1.75;
    text-align: right;
}

.hnews-grid {
    width: 100%;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.hnews-card {
    min-width: 0;
    transition:
        opacity .45s ease,
        transform .45s ease;
}

.hnews-section.is-enhanced
.hnews-card:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
}

.hnews-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

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

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

.hnews-category {
    margin-top: 20px;
    color: #6f6a7b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.hnews-card-title {
    margin: 18px 0;
    color: #05070d;
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -.025em;
}

.hnews-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

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

.hnews-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #6f6a7b;
    font-size: 12px;
    line-height: 1.4;
}

.hnews-author {
    color: #05070d;
    font-weight: 700;
}

.hnews-clock {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hnews-meta time {
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .hnews-grid {
        gap: 22px;
    }

    .hnews-image {
        height: 220px;
    }
}

@media (max-width: 860px) {
    .hnews-head {
        flex-direction: column;
        margin-bottom: 26px;
    }

    .hnews-description {
        text-align: left;
    }

    .hnews-grid {
        grid-template-columns: 1fr;
    }

    .hnews-image {
        height: 260px;
    }
}

@media (max-width: 560px) {
    .hnews-section {
        margin: 44px 0 56px;
    }

    .hnews-image {
        height: 210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hnews-card,
    .hnews-image img {
        transition: none;
    }

    .hnews-section.is-enhanced
    .hnews-card:not(.is-visible) {
        opacity: 1;
        transform: none;
    }
}


/* HOMEPAGE-NEWS-CONTAINER-V3 */

@media (max-width: 560px) {
    .hnews-section {
        width: calc(100% - 24px);
    }
}

/* ===== SOURCE: /static/web/css/seo-content.C0091.css ===== */

.c0085-seo-content{width:min(1180px,calc(100% - 40px));margin:40px auto 0;padding:34px;border:1px solid rgba(18,61,92,.12);border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(15,50,75,.06)}
.c0085-seo-content__eyebrow{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4c7188}
.c0085-seo-content h2{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.25;color:#123d5c}
.c0085-seo-content__intro{max-width:900px;margin:14px 0 0;font-size:16px;line-height:1.85;color:#506675}
.c0085-seo-content__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.c0085-seo-card{padding:22px;border-radius:14px;background:#f5f9fb;border:1px solid rgba(18,61,92,.08)}
.c0085-seo-card h3{margin:0 0 10px;font-size:19px;line-height:1.35;color:#173f59}
.c0085-seo-card p{margin:0;font-size:15px;line-height:1.75;color:#536b79}
.c0085-seo-card a,.c0085-seo-content__links a{display:inline-flex;margin-top:16px;font-weight:700;text-decoration:none;color:#0a628d}
.c0085-seo-content__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
.pcat-main .c0085-seo-content{width:100%;margin-top:34px;padding:28px}
.nlist-container .c0085-seo-content{width:100%;margin:36px 0 0}
@media(max-width:820px){.c0085-seo-content{width:min(100% - 24px,1180px);padding:24px 20px;border-radius:14px}.c0085-seo-content__grid{grid-template-columns:1fr}}