/* ==========================================================================
   首页组件：少数派 Bento Grid 焦点网格 (PC + 移动端完整适配)
   ========================================================================== */

.sf-bento-grid { 
    display: grid; 
    grid-template-columns: 240px 1fr 240px; 
    gap: var(--sf-gap); 
    margin: 30px 0 50px; 
    height: 480px; 
}

.bento-side-col, .bento-main-col { display: flex; flex-direction: column; gap: var(--sf-gap); height: 100%; }

/* --- 卡片通用基础 --- */
.sf-bento-card { position: relative; border-radius: var(--sf-radius-lg); background-color: var(--sf-bg-card); border: 1px solid var(--sf-border-color); overflow: hidden; width: 100%; transition: border-color 0.3s ease; }
.sf-bento-card:hover { border-color: #DEDEDE; }
.bento-link-overlay { position: absolute; inset: 0; z-index: 10; }
.bento-title-lg { font-size: 28px; font-weight: 800; line-height: 1.3; margin: 0; }
.bento-title-sm { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0; color: var(--sf-text-main); transition: color 0.3s; }

/* --- 类型 A：纯文字卡片 --- */
.bento-text-only { flex: 1.1; background-color: #F7F7F9 !important; }
.bento-text-inner { padding: 15px 25px; display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; z-index: 2; }
.bento-text-inner .text-tag { color: var(--sf-accent-red); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.bento-text-inner h4 { font-size: 16px; font-weight: 700; color: var(--sf-text-main); line-height: 1.4; margin-bottom: 4px; }
.bento-text-inner p { font-size: 13px; color: var(--sf-text-muted); margin: 0; line-height: 1.5; }

/* --- 类型 B：上下分割 (图文 / 产品 / 日历) --- */
.bento-img-text { flex: 1.8; display: flex; flex-direction: column; background: #fff !important; overflow: visible !important; }
.bento-img-text .img-part { height: 55%; width: 100%; position: relative; background: #E8EBED; border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0; overflow: hidden; }
.bento-img-text .img-part img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-bento-card:hover .img-part img { transform: scale(1.03); }
.bento-img-text .text-part { height: 45%; padding: 12px 20px; display: flex; flex-direction: column; justify-content: center; }
.bento-img-text .text-part h4 { font-size: 16px; font-weight: 700; color: var(--sf-text-main); margin-bottom: 2px; }
.bento-img-text .text-part p { font-size: 13px; color: var(--sf-text-muted); margin: 0; line-height: 1.5; }

/* 日历角标特供 */
.bento-calendar-box { position: relative; }
.calendar-badge { position: absolute; left: 20px; top: 55%; transform: translateY(-50%); background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; z-index: 5; overflow: hidden; }
.calendar-badge .week { background: var(--sf-accent-red); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; text-align: center; }
.calendar-badge .day { color: var(--sf-text-main); font-size: 18px; font-weight: 800; padding: 2px 8px 4px; line-height: 1; text-align: center; }

/* --- 类型 C：纯图广告位 --- */
.bento-ad-pure { flex: 1.1; }
.bento-ad-pure .bento-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.sf-bento-card:hover .bento-bg-img { transform: scale(1.03); }

/* --- 类型 D：左右错落倾斜卡片 (原版备用) --- */
.bento-split-x { flex: 1.1; display: flex; flex-direction: row; align-items: center; background-color: #F7F7F9 !important; justify-content: space-between; padding: 20px; }
.split-x-text { flex: 1; align-self: flex-start; padding-right: 15px; z-index: 2; padding-top: 5px; }
.split-x-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transform: rotate(6deg) translateX(10px); transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.split-x-img img { width: 100%; height: 100%; object-fit: cover; }
.bento-split-x:hover .split-x-img { transform: rotate(0deg) translateX(0px); }
.bento-split-x:hover .split-x-text .bento-title-sm { color: var(--sf-accent-red); }

/* --- 类型 E：中间大图 --- */
.bento-main { flex: 1; }
.bento-main .bento-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bento-main:hover .bento-bg-img { transform: scale(1.03); }
.bento-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 65%; background: linear-gradient(to top, rgba(0,0,0, 0.75), transparent); z-index: 2; pointer-events: none;}
.bento-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 3; color: #fff; pointer-events: none; }

/* ==========================================================================
   原生 CSS 滚动轮播图 (无依赖、极轻量)
   ========================================================================== */
.bento-main-slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sf-slides-container { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.sf-slides-container::-webkit-scrollbar { display: none; }
.sf-slide-item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; overflow: hidden; }

/* 中间大图轮播 - 顶部进度条导航 */
.sf-slider-progress { position: absolute; top: 10px; left: 20px; right: 20px; display: flex; gap: 6px; z-index: 20; }
.sf-slider-progress .progress-bar { flex: 1; height: 24px; cursor: pointer; position: relative; }
.sf-slider-progress .progress-bar::before { content: ''; position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; }
.sf-slider-progress .progress-bar::after { content: ''; position: absolute; top: 11px; left: 0; height: 2px; width: 0; background: #fff; border-radius: 2px; z-index: 2; }
.sf-slider-progress .progress-bar.active::after { animation: sf-progress-run 8s linear forwards; }
@keyframes sf-progress-run { 0% { width: 0; opacity: 0.8; } 100% { width: 100%; opacity: 1; } }

/* ==========================================================================
   Bento 左右侧边列 - 完美对齐与高度修饰终极版 
   ========================================================================== */
/* --- 【左侧列】日历与标题高度精调 --- */
.sf-bento-grid > .bento-side-col:first-child { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden; }
.sf-bento-grid > .bento-side-col:first-child > * { min-height: 0 !important; }

/* 1. 左上角 (毒鸡汤) */
.sf-bento-grid > .bento-side-col:first-child .bento-calendar-box { flex: 1.95 !important; background-color: #F7F7F9 !important; }
.sf-bento-grid > .bento-side-col:first-child .bento-calendar-box .img-part { height: 55% !important; flex: 0 0 55% !important; }
.sf-bento-grid > .bento-side-col:first-child .bento-calendar-box .calendar-badge { top: 55% !important; }
.sf-bento-grid > .bento-side-col:first-child .bento-calendar-box .text-part { height: auto !important; flex: 1 !important; padding: 26px 20px 15px 20px !important; justify-content: flex-start !important; }

.sf-custom-code-box { margin-top: 10px; flex: 1; }
.sf-custom-code-box p, 
.sf-custom-code-box #hitokoto { font-size: 13px; line-height: 1.6 !important; color: var(--sf-text-muted); display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; margin: 0 !important; }

/* 2. 左中 (广告) */
.sf-bento-grid > .bento-side-col:first-child .bento-ad-pure { flex: 1.2 !important; }

/* 3. 左下 (单行公告) */
.sf-bento-grid > .bento-side-col:first-child .bento-text-only { flex: 0.55 !important; }
.sf-bento-grid > .bento-side-col:first-child .bento-text-only .bento-text-inner { padding: 10px 20px !important; justify-content: center !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }

/* --- 【右侧列】间距统一对齐规范 --- */
.sf-bento-grid > .bento-side-col:last-child .bento-text-only .bento-text-inner { padding: 12px 20px !important; }
.sf-bento-grid > .bento-side-col:last-child .bento-split-x { padding: 15px 20px !important; }
.sf-bento-grid > .bento-side-col:last-child .bento-split-x .split-x-text { padding-right: 15px !important; padding-top: 0 !important; }
.sf-bento-grid > .bento-side-col:last-child .bento-img-text .product-info { padding: 12px 20px !important; }

/* ==========================================================================
   左下角公告轮播
   ========================================================================== */
.bento-notice-slider .bento-text-inner { padding: 15px 20px !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
.sf-notice-icon { color: var(--sf-accent-red); font-size: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-notice-scroll-wrap { height: 24px; overflow: hidden; flex: 1; min-width: 0; }
.sf-notice-list { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; animation: notice-icon-scroll 9s ease-in-out infinite; }
.sf-notice-item { height: 24px !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
.bento-notice-slider .sf-notice-item a { font-size: 14px !important; line-height: 24px !important; color: var(--sf-text-muted) !important; font-weight: normal !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; margin: 0 !important; transition: color 0.3s ease; }
.bento-notice-slider .sf-notice-item a:hover { color: var(--sf-accent-red) !important; }

@keyframes notice-icon-scroll {
    0%, 25% { transform: translateY(0); opacity: 1; }
    30% { opacity: 0; transform: translateY(-10%); }
    33.3%, 58% { transform: translateY(-33.333%); opacity: 1; }
    63% { opacity: 0; transform: translateY(-43%); }
    66.6%, 91% { transform: translateY(-66.666%); opacity: 1; }
    96% { opacity: 0; transform: translateY(-76%); }
    100% { transform: translateY(0); opacity: 1; }
}
.bento-notice-slider:hover .sf-notice-list { animation-play-state: paused; }

/* ==========================================================================
   右上角专题卡片
   ========================================================================== */
.bento-icon-row-card { background-color: #F7F7F9 !important; display: flex !important; flex-direction: row !important; align-items: center !important; padding: 20px !important; gap: 15px !important; }
.bento-icon-row-card .card-icon-box { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-color: #111; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; }
.bento-icon-row-card .card-icon-box img { width: 100%; height: 100%; object-fit: cover; }
.bento-icon-row-card .card-text-box { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; height: 88px !important; }
.bento-icon-row-card .card-text-box h4 { font-size: 13px !important; line-height: 22px !important; color: #1d1e20; font-weight: 500; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
.bento-icon-row-card .card-text-box p { font-size: 13px !important; line-height: 20px !important; color: var(--sf-text-muted); margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }

/* ==========================================================================
   右中专题卡片 (含 3D 特效补丁的话也可以写在这里)
   ========================================================================== */
.bento-split-x { display: flex !important; flex-direction: row !important; align-items: center !important; padding: 20px !important; gap: 15px !important; background-color: #fff; }
/* 修改文字区容器高度，把“去看看”推下去 */
.bento-split-x .split-x-text { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-width: 0; 
    /* 核心调整：把原来的 height: 88px 改成 100%，让它撑满整个卡片 */
    height: 100% !important; 
    padding: 0; /* 去掉多余的内边距 */
}

/* 顺便确保父容器允许内部元素撑满高度 */
.bento-split-x { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: stretch !important; /* 核心调整：从 center 改为 stretch，让内部左右两侧等高 */
    padding: 20px !important; 
    gap: 15px !important; 
    background-color: #fff; 
}
.bento-split-x .split-x-text h4 { font-size: 13px !important; line-height: 22px !important; color: #1d1e20; font-weight: 500; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
.bento-split-x .split-x-text .sf-cta-link { font-size: 14px !important; color: var(--sf-text-muted); display: flex; align-items: center; gap: 4px; font-weight: 400; }
.bento-split-x .split-x-text .sf-cta-link i { font-size: 16px; transition: all 0.3s ease; }
.bento-split-x:hover .sf-cta-link i { transform: translate(2px, -2px); color: #111; }
.bento-split-x .split-x-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: #f7f7f9; }
.bento-split-x .split-x-img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   右下角随机卡片
   ========================================================================== */
.bento-random-card { background-color: #F7F7F9 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px 15px 15px 15px !important; }
.bento-random-card .random-img-stage { position: relative; width: 100%; height: 85px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; }
.bento-random-card .img-side { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 35px !important;   
    height: 70px !important;  
    border-radius: 6px; 
    overflow: hidden; 
    z-index: 1; 
    opacity: 0.5;             
    transition: all 0.3s ease; 
}
.bento-random-card .img-side img { width: 100%; height: 100%; object-fit: cover; }
.bento-random-card .img-left { left: -15px !important;  }
.bento-random-card .img-right { right: -15px !important; }
.bento-random-card .img-center { position: relative; z-index: 2; width: 140px; height: 85px; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.12); background-color: #fff; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bento-random-card .img-center img { width: 100%; height: 100%; object-fit: cover; }
.bento-random-card:hover .img-center { transform: scale(1.05); }
.bento-random-card:hover .img-left { transform: translate(-5px, -50%) !important; opacity: 0.2; }
.bento-random-card:hover .img-right { transform: translate(5px, -50%) !important; opacity: 0.2; }
.bento-random-card .random-text-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 44px; }
.bento-random-card .random-text-stage h4 { font-size: 13px !important; line-height: 22px !important; color: #111; font-weight: 500; margin: 0 !important; text-align: center; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; width: 100%; }
.bento-random-card .random-text-stage p { font-size: 13px !important; line-height: 18px !important; color: var(--sf-text-muted); margin: 0 !important; text-align: center; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; width: 100%; }

/* ==========================================================================
   移动端终极响应式适配 - 针对 Bento Grid 的核心调整
   ========================================================================== */
@media (max-width: 1024px) {
   /* 【手机端专属】少数派官方 App 完美复刻版网格 (保留灰色底色) */
    .sf-bento-grid { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important; 
        height: auto !important; 
        margin: 15px 0 10px !important; 
    }

    .sf-bento-grid > .bento-side-col,
    .sf-bento-grid > .bento-side-col:first-child,
    .sf-bento-grid > .bento-side-col:last-child,
    .sf-bento-grid > .bento-main-col { 
        display: contents !important; 
    }

    /* 1. 顶部：焦点图大轮播 (保留 380px 高度) */
    .sf-bento-grid .bento-main-slider {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        height: 380px !important; 
        border-radius: 16px !important;
    }

    /* 隐藏无法放入轮播的日历毒鸡汤，保持网格纯粹 */
    .sf-bento-grid .bento-calendar-box {
        display: none !important; 
    }

    /* 2. 左上：纯图广告位 (第 2 行左列，高度 95px) */
    .sf-bento-grid .bento-ad-pure {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        height: 95px !important;
        border-radius: 16px !important;
    }

    /* 3. 左下：专题小卡片 (第 3 行左列，高度 95px) */
    .sf-bento-grid .bento-icon-row-card {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
        height: 95px !important;
        min-height: 95px !important;
        border-radius: 16px !important; 
        padding: 10px 15px 10px 10px !important;
        background: #F7F7F9 !important;
        gap: 10px !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .sf-bento-grid .bento-icon-row-card .card-icon-box { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; }
    .sf-bento-grid .bento-icon-row-card .card-text-box { height: auto !important; justify-content: center !important; } 
    .sf-bento-grid .bento-icon-row-card .card-text-box h4 { font-size: 13px !important; line-height: 1.4 !important; }
    .sf-bento-grid .bento-icon-row-card .card-text-box p { font-size: 11px !important; color: #999 !important; -webkit-line-clamp: 1 !important; }

    /* 4. 右侧：商品橱窗长卡片 */
    .sf-bento-grid .bento-random-card {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 4 !important; 
        display: flex !important;
        flex-direction: column !important;
        height: 202px !important;
        min-height: 202px !important;
        max-height: 202px !important;
        border-radius: 16px !important;
        padding: 0 !important; 
        overflow: hidden !important; 
        box-sizing: border-box !important;
        background: #F7F7F9 !important; 
        gap: 0 !important; 
    }
    .sf-bento-grid .bento-random-card .img-left, 
    .sf-bento-grid .bento-random-card .img-right { display: none !important; }
    
    .sf-bento-grid .bento-random-card .random-img-stage,
    .sf-bento-grid .bento-random-card .img-center,
    .sf-bento-grid .bento-random-card .img-center a { 
        width: 100% !important; 
        max-width: 100% !important;
        height: 95px !important; 
        min-height: 95px !important;
        max-height: 95px !important;
        flex: 0 0 95px !important;
        margin: 0 !important; 
        padding: 0 !important;
        border-radius: 0 !important; 
        display: block !important;
        box-shadow: none !important; 
        background: transparent !important;
    }
    .sf-bento-grid .bento-random-card .img-center img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important; 
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

   .sf-bento-grid .bento-random-card .random-text-stage { 
        display: flex !important;           
        flex-direction: column !important;  
        width: 100% !important;
        height: 107px !important; 
        flex: 0 0 107px !important;
        padding: 0px 15px 36px 15px !important; 
        margin: 0 !important;
        gap: 4px !important; 
        box-sizing: border-box !important;
        justify-content: center !important; 
        align-items: center !important; 
        text-align: center !important; 
        background: #F7F7F9 !important; 
        position: relative !important;      
    }
    .sf-bento-grid .bento-random-card .random-text-stage h4 { 
        font-size: 13px !important; 
        -webkit-line-clamp: 1 !important; 
        white-space: normal !important; 
        margin-top: 0 !important; 
        width: 100% !important;
        text-align: center !important;
    }
    .sf-bento-grid .bento-random-card .random-text-stage p { 
        font-size: 11px !important; 
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; 
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; 
        white-space: normal !important; 
        line-height: 1.4 !important; 
        margin: 0 !important; 
        color: #888 !important; 
        width: 100% !important;
        text-align: center !important;
    }
    
    .sf-bento-grid .bento-random-card .random-text-stage::after {
        content: '' !important;
        position: absolute !important;    
        bottom: 12px !important;            
        left: 50% !important;               
        transform: translateX(-50%) !important; 
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important; 
        width: 16px !important;   
        height: 16px !important;
        border: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11'%3E%3C/circle%3E%3Cpolyline points='10.5 8 14.5 12 10.5 16'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        display: block !important;
        pointer-events: none !important; 
        z-index: 10 !important;
    }

   /* 5. 底部兜底：公告轮播 */
    .sf-bento-grid .bento-notice-slider {
        grid-column: 1 / 3 !important; 
        grid-row: 4 !important; 
        height: 48px !important; 
        min-height: 48px !important;
        border-radius: 16px !important; 
    }
    .sf-bento-grid .bento-notice-slider .bento-text-inner { 
        flex-direction: row !important; 
        justify-content: flex-start !important; 
        align-items: center !important; 
        padding: 0 15px 0 20px !important; 
        gap: 12px !important; 
    }
    .sf-bento-grid .sf-notice-icon { margin-bottom: 0 !important; font-size: 20px !important; } 

    .sf-bento-grid .sf-notice-scroll-wrap { 
        flex: 1 !important; 
        width: auto !important; 
        height: 24px !important; 
    } 
    .sf-bento-grid .bento-notice-slider .sf-notice-item { height: 24px !important; justify-content: flex-start !important; }
    .sf-bento-grid .bento-notice-slider .sf-notice-item a { white-space: nowrap !important; display: block !important; line-height: 24px !important; font-size: 13px !important; text-align: left !important; color: var(--sf-text-main) !important; }

    .sf-bento-grid .bento-notice-slider .bento-text-inner::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-top: 2px solid #ccc;   
        border-right: 2px solid #ccc;
        transform: rotate(45deg);
        flex-shrink: 0 !important;
        margin-left: 5px !important;
    }

    .sf-bento-grid .bento-split-x { display: none !important; }
}

/* ==========================================================
   首页网格：右中卡片 3D 倾斜抽出特效
   ========================================================== */
/* 1. 给卡片主体开启 3D 透视镜头 */
.bento-split-x.sf-3d-hover-card {
    perspective: 1000px;
    overflow: hidden;    /* 切掉超出卡片的图片边角 */
    position: relative;
}

/* 2. 限制文字区的宽度，给右侧图片留出空间 */
.bento-split-x.sf-3d-hover-card .split-x-text {
    width: 60%; 
}

/* 3. 核心 3D 图片包裹器（默认倾斜状态） */
.sf-3d-image-wrapper {
    position: absolute;
    right: -10%;         /* 往右下角塞一点，藏住一部分 */
    bottom: -15%;
    width: 55%;          /* 控制图片的绝对大小 */
    height: 85%;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
    
    /* 打上高级的高斯阴影，模拟图片浮在背景上 */
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.08);
    
    /* 核心魔法：沿 Y轴和 X轴 倾斜，并把变形原点定在右下角 */
    transform-origin: bottom right;
    transform: rotateY(-20deg) rotateX(15deg) scale(1.05);
    
    /* 贝塞尔曲线过渡，模拟真实的物理弹簧阻尼感 */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.sf-3d-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. 鼠标悬停时：平滑展平并抽出 */
.bento-split-x.sf-3d-hover-card:hover .sf-3d-image-wrapper {
    /* 核心调整：translate 的第二个参数从 -10% 改为 2%，让图片展平时整体向下偏移，避开标题 */
    transform: rotateY(0deg) rotateX(0deg) scale(1) translate(-12%, 2%);
    box-shadow: -8px -8px 25px rgba(0, 0, 0, 0.12);
}