/* ================================================================
   SofaBaton Product Configurator — CSS Final
   WPCodey: 类型 CSS
   ================================================================ */

.sbc-wrap {
    --sbc-black:     #111111;
    --sbc-white:     #ffffff;
    --sbc-bg-img:    #ffffff;
    --sbc-border:    #e2e2e2;
    --sbc-grey-text: #888888;
    --sbc-radius:    10px;
    --sbc-font:      -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ── 外层容器 ── */
.sbc-wrap {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 48px 32px;
    font-family: var(--sbc-font);
    color: var(--sbc-black);
    box-sizing: border-box;
}

/* ================================================================
   左侧画廊  60%
   ================================================================ */
.sbc-gallery {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 80px;
}

/* 主图容器：不设固定高度，让图片自然撑开 */
.sbc-main-image-wrap {
    width: 100%;
    background: var(--sbc-bg-img);
    border-radius: 14px;
    overflow: visible;          /* ← 不裁剪 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 主图：按原比例显示，不拉伸不裁剪 */
.sbc-main-image {
    width: 100%;
    height: auto;               /* ← 关键：高度自动，不强制撑满 */
    object-fit: contain;
    display: block;
    border-radius: 14px;
    transition: opacity 0.25s ease;
}

.sbc-main-image.sbc-fade { opacity: 0; }
/* 主图容器需要 relative 让指示器浮上去 */
.sbc-main-image-wrap {
    width: 100%;
    background: var(--sbc-bg-img);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    position: relative;          /* 关键：新增 */
}

/* 缩略图条 → 浮动胶囊指示器 */
.sbc-thumb-strip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    margin: 0;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    z-index: 5;
    flex-wrap: nowrap;
}

/* 缩略图按钮 → 小圆点（不再是图片缩略图）*/
.sbc-thumb {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: rgba(0,0,0,.28);
    transition: width .35s ease, background .25s ease;
    flex-shrink: 0;
}
.sbc-thumb:hover { background: rgba(0,0,0,.5); }

/* 隐藏圆点里的图片缩略图 */
.sbc-thumb img { display: none; }

/* 当前激活的圆点 → 长条 */
.sbc-thumb.is-active {
    width: 28px;
    border-radius: 999px;
    background: rgba(0,0,0,.78);
}

/* 左右箭头按钮 */
.sbc-arrow {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,.55);
    padding: 0;
    border-radius: 50%;
    transition: color .2s, background .2s;
    flex-shrink: 0;
}
.sbc-arrow:hover {
    color: rgba(0,0,0,.95);
    background: rgba(0,0,0,.06);
}
.sbc-arrow svg {
    width: 14px;
    height: 14px;
    display: block;
}


/* ================================================================
   右侧面板  40%
   ================================================================ */
.sbc-panel {
    flex: 0 0 40%;
    max-width: 40%;
    min-width: 0;
}

.sbc-product-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 10px;
    line-height: 1.2;
}

.sbc-product-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
    margin: 0 0 14px;
}

.sbc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.sbc-features li {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
}

.sbc-section-label {
    font-size: 12px;
    color: var(--sbc-grey-text);
    margin: 0 0 8px;
}


/* ================================================================
   通用卡片
   ================================================================ */
.sbc-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--sbc-border);
    border-radius: var(--sbc-radius);
    padding: 14px 16px;
    background: var(--sbc-white);
    position: relative;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sbc-card-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sbc-bg-img);
}

.sbc-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sbc-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbc-card-name {
    font-size: 13px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbc-card-sub {
    font-size: 11px;
    color: var(--sbc-grey-text);
    line-height: 1.4;
}

.sbc-card-price {
    flex-shrink: 0;
    text-align: right;
    min-width: 84px;
}

.sbc-price-orig {
    display: block;
    font-size: 11px;
    color: #bbb;
    text-decoration: line-through;
    white-space: nowrap;
}

.sbc-price-now {
    display: block;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* 数量控制 */
.sbc-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 4px;
}

.sbc-qty-btn {
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--sbc-border);
    border-radius: 50%;
    background: var(--sbc-white);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, background 0.15s;
    color: var(--sbc-black);
    user-select: none;
}

.sbc-qty-btn:hover {
    border-color: var(--sbc-black);
    background: #f5f5f5;
}

.sbc-qty-val {
    font-size: 13px;
    font-weight: 500;
    min-width: 16px;
    text-align: center;
}


/* ================================================================
   Solution 卡片（单选）
   ================================================================ */
.sbc-solutions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.sbc-solution-card { cursor: pointer; }

.sbc-radio {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--sbc-black);
    cursor: pointer;
    margin: 0;
}

.sbc-solution-card.is-selected {
    border-color: var(--sbc-black);
    border-width: 2px;
}

/* 有角标时顶部留空，防止遮挡内容 */
.sbc-solution-card.has-badge {
    padding-top: 36px;
}

.sbc-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--sbc-black);
    color: var(--sbc-white);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 16px;
    min-width: 100px;
    text-align: center;
    border-radius: 0 var(--sbc-radius) 0 8px;
    white-space: nowrap;
    z-index: 1;
}


/* ================================================================
   Accessory 卡片
   ================================================================ */
.sbc-accessories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}


/* ================================================================
   加购按钮
   ================================================================ */
.sbc-atc-btn {
    width: 100%;
    padding: 16px 20px;
    background: var(--sbc-black);
    color: var(--sbc-white);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.sbc-atc-btn:hover  { background: #333; }
.sbc-atc-btn:active { transform: scale(0.99); }
.sbc-atc-btn.is-loading { opacity: 0.65; pointer-events: none; }


/* ================================================================
   响应式
   ================================================================ */
@media ( max-width: 900px ) {
    .sbc-wrap {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }
    .sbc-gallery,
    .sbc-panel {
        flex: none;
        max-width: 100%;
        width: 100%;
        position: static;
    }
}

@media ( max-width: 480px ) {
    .sbc-card { flex-wrap: wrap; gap: 8px; }
    .sbc-card-price { min-width: auto; }
    .sbc-product-title { font-size: 22px; }
}


/* ── 外层容器：改成全宽 ── */
.sbc-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;                    /* 原 48px，改成 0，让两栏紧贴 */
    max-width: 100%;           /* 原 1280px，改成全宽 */
    width: 100%;
    margin: 0;
    padding: 0;                /* 原 48px 32px，外层 padding 拿掉 */
    font-family: var(--sbc-font);
    color: var(--sbc-black);
    box-sizing: border-box;
}

/* ── 左侧画廊：60% → 50%，贴左屏边 ── */
.sbc-gallery {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;                    /* 滚动时贴顶 */
    align-self: flex-start;
}

/* ── 主图区：去掉圆角 + 让图填满左半屏 ── */
.sbc-main-image-wrap {
    width: 100%;
    background: var(--sbc-bg-img);
    border-radius: 0;          /* 去掉圆角，让图贴边 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;       /* 让左侧图固定高度，跟右侧高度对齐 */
}

.sbc-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 改成 cover，填满整个左半屏 */
    display: block;
    border-radius: 0;          /* 圆角也去掉 */
    transition: opacity 0.25s ease;
}

/* 缩略图条放到主图底部内侧（参考截图里的小圆点指示器位置） */
.sbc-thumb-strip {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── 右侧面板：40% → 50%，加内部 padding ── */
.sbc-panel {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    padding: 0px 14px 20px 26px;   /* 关键：内部 padding，避免内容贴屏边 */
    box-sizing: border-box;
}

/* 大屏（>=1600px）右侧内容别拉太开，限制实际内容宽度居左 */
@media (min-width: 1600px) {
    .sbc-panel {
        padding-left: 64px;
        padding-right: calc((100vw - 1400px) / 2 + 80px);
    }
}

/* 响应式 ── 移动端保持原样 */
@media ( max-width: 900px ) {
    .sbc-wrap {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .sbc-gallery,
    .sbc-panel {
        flex: none;
        max-width: 100%;
        width: 100%;
        position: static;
    }
    .sbc-panel {
        padding: 32px 20px 40px;
    }
    .sbc-main-image-wrap {
        aspect-ratio: 4 / 3;    /* 移动端图别太正方形 */
    }
}

@media ( max-width: 480px ) {
    .sbc-card { flex-wrap: wrap; gap: 8px; }
    .sbc-card-price { min-width: auto; }
    .sbc-product-title { font-size: 22px; }
}

/* ================================================================
   收紧版：紧凑布局，首屏可见全部内容
   ================================================================ */

/* ── 主图比例：改成 4:5（产品图标准电商比例，紧凑且能展示完整产品） ── */
.sbc-main-image-wrap {
    aspect-ratio: 4 / 5;
}
@media ( max-width: 900px ) {
    .sbc-main-image-wrap {
        aspect-ratio: 4 / 3;
    }
}

/* ── 右侧面板：padding 收紧 ── */
.sbc-panel {
    padding: 48px 56px 48px 48px;
}
@media (min-width: 1280px) {
    .sbc-panel {
        padding: 56px 64px 56px 56px;
    }
}
@media (min-width: 1600px) {
    .sbc-panel {
        padding-left: 64px;
        padding-right: calc((100vw - 1400px) / 2 + 80px);
    }
}

/* ── 标题：稍大但不过分 ── */
.sbc-product-title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 12px;
}
.sbc-product-desc {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 14px;
}
.sbc-features {
    margin-bottom: 22px;
}
.sbc-features li {
    font-size: 13px;
    line-height: 1.85;
}

.sbc-section-label {
    font-size: 12px;
    margin-bottom: 8px;
}

/* ── 卡片：紧凑型 ── */
.sbc-card {
    padding: 12px 14px;
    gap: 10px;
}
.sbc-card-thumb {
    width: 64px;
    height: 64px;
}
.sbc-card-name {
    font-size: 13.5px;
}
.sbc-card-sub {
    font-size: 11.5px;
    line-height: 1.4;
}
.sbc-card-price {
    min-width: 90px;
}
.sbc-price-now {
    font-size: 15px;
}
.sbc-price-orig {
    font-size: 11px;
}

/* ── 数量按钮 ── */
.sbc-qty-btn {
    width: 26px;
    height: 26px;
    font-size: 16px;
}
.sbc-qty-val {
    font-size: 13px;
    min-width: 16px;
}

/* ── 区块间距收紧 ── */
.sbc-solutions {
    gap: 8px;
    margin-bottom: 20px;
}
.sbc-accessories {
    gap: 8px;
    margin-bottom: 22px;
}

/* ── 角标：缩小 ── */
.sbc-badge {
    font-size: 10px;
    padding: 4px 14px;
    min-width: 90px;
}
.sbc-solution-card.has-badge {
    padding-top: 32px;
}

/* ── 加购按钮 ── */
.sbc-atc-btn {
    padding: 15px 22px;
    font-size: 15px;
}

/* ── 移动端补丁 ── */
@media ( max-width: 900px ) {
    .sbc-product-title { font-size: 24px; }
    .sbc-card-thumb { width: 64px; height: 64px; }
    .sbc-card { padding: 12px 14px; }
}


/* ================================================================
   SofaBaton Product Page — Balanced Layout Override
   放在所有 CSS 最底部
   ================================================================ */

/* 整体：左图更强，右侧更像案例图 */
.sbc-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 56% 44%;
    gap: 0;
    align-items: flex-start;
    background: #ffffff;
    font-family: var(--sbc-font);
    color: var(--sbc-black);
    box-sizing: border-box;
}

/* 左侧主图区域 */
.sbc-gallery {
    width: 100%;
    max-width: none;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* 左图高度控制：不要再用 4/5，避免太高 */
.sbc-main-image-wrap {
    width: 100%;
    height: clamp(560px, 78vh, 760px);
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 图片视觉：接近案例图，填满左侧 */
.sbc-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    display: block;
}

/* 右侧面板：顶部对齐，不要太低 */
.sbc-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 32px 56px 48px 56px;
    background: #ffffff;
    box-sizing: border-box;
}

/* 控制右侧实际内容宽度，避免卡片太宽 */
.sbc-panel > * {
    max-width: 520px;
}

/* 标题更接近案例图 */
.sbc-product-title {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

/* 描述文字稍微放宽一点 */
.sbc-product-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
    margin: 0 0 14px;
}

/* 卖点文字 */
.sbc-features {
    margin: 0 0 26px;
}

.sbc-features li {
    font-size: 13.5px;
    line-height: 1.9;
    font-weight: 700;
}

/* 小标题间距 */
.sbc-section-label {
    font-size: 12px;
    color: #888888;
    margin: 0 0 10px;
}

/* 卡片更精致，不要太厚重 */
.sbc-card {
    min-height: 72px;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 8px;
    border: 1.5px solid #e2e2e2;
    background: #ffffff;
    box-sizing: border-box;
}

/* 选中卡片边框 */
.sbc-solution-card.is-selected {
    border-color: #111111;
    border-width: 2px;
}

/* 产品缩略图稍微收小 */
.sbc-card-thumb {
    width: 58px;
    height: 58px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* 卡片文字 */
.sbc-card-name {
    font-size: 13.5px;
    font-weight: 700;
}

.sbc-card-sub {
    font-size: 11.5px;
    line-height: 1.4;
    color: #888888;
}

/* 价格区域 */
.sbc-card-price {
    min-width: 92px;
    text-align: right;
}

.sbc-price-orig {
    font-size: 11px;
    color: #aaaaaa;
}

.sbc-price-now {
    font-size: 15.5px;
    font-weight: 800;
}

/* 数量按钮 */
.sbc-qty {
    gap: 6px;
    margin-left: 6px;
}

.sbc-qty-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

/* 角标不要压得太大 */
.sbc-badge {
    font-size: 10px;
    padding: 5px 14px;
    min-width: 92px;
    border-radius: 0 8px 0 8px;
}

.sbc-solution-card.has-badge {
    padding-top: 32px;
}

/* 区块间距 */
.sbc-solutions {
    gap: 10px;
    margin-bottom: 24px;
}

.sbc-accessories {
    gap: 10px;
    margin-bottom: 28px;
}

/* 加购按钮 */
.sbc-atc-btn {
    max-width: 520px;
    padding: 17px 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
}

/* 轮播圆点保持在图片内部 */
.sbc-thumb-strip {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 5;
}

/* 中等屏幕 */
@media (max-width: 1200px) and (min-width: 901px) {
    .sbc-wrap {
        grid-template-columns: 55% 45%;
    }

    .sbc-panel {
        padding: 28px 36px 44px 44px;
    }

    .sbc-panel > * {
        max-width: 480px;
    }

    .sbc-main-image-wrap {
        height: clamp(520px, 72vh, 680px);
    }
}

/* 移动端 */
@media (max-width: 900px) {
    .sbc-wrap {
        display: flex;
        flex-direction: column;
    }

    .sbc-gallery,
    .sbc-panel {
        width: 100%;
        max-width: 100%;
        position: static;
    }

    .sbc-main-image-wrap {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .sbc-main-image {
        height: 100%;
        object-fit: cover;
    }

    .sbc-panel {
        padding: 32px 20px 44px;
    }

    .sbc-panel > * {
        max-width: 100%;
    }

    .sbc-product-title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .sbc-card {
        flex-wrap: wrap;
    }

    .sbc-card-price {
        min-width: auto;
    }

    .sbc-qty {
        margin-left: auto;
    }
}

a {
    transition: opacity 0.25s ease;
}

.sbc-main-image.sbc-fade {
    opacity: 0;
}


/* ================================================================
   Gallery Indicator Progress Animation
   当前圆点变成长条，并显示 1-3 秒进度动画
   ================================================================ */

/* 圆点基础状态 */
.sbc-thumb {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    transition: width 0.35s ease, background 0.25s ease, transform 0.25s ease;
}

/* 当前激活条：变成长条，但底色不要太黑 */
.sbc-thumb.is-active {
    width: 34px;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
}

/* 当前激活条里面的动态进度 */
.sbc-thumb.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    animation: sbcThumbProgress var(--sbc-progress-time, 3000ms) linear forwards;
}

/* 鼠标经过稍微放大，更精致 */
.sbc-thumb:hover {
    transform: scale(1.12);
    background: rgba(0, 0, 0, 0.38);
}

/* 进度动画：从左到右填充 */
@keyframes sbcThumbProgress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* 暂停轮播时，进度条也暂停 */
.sbc-thumb-strip.is-paused .sbc-thumb.is-active::after {
    animation-play-state: paused;
}


/* ================================================================
   Smooth Crossfade Gallery Transition
   双图交叉淡入淡出，解决主图切换频闪
   ================================================================ */

.sbc-main-image-wrap {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

/* 当前主图 */
.sbc-main-image {
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    transition: none !important;
    will-change: transform;
}

/* 过渡用的新图层 */
.sbc-main-image-next {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.025);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    display: block;
}

/* 新图慢慢出现 */
.sbc-main-image-wrap.is-crossfading .sbc-main-image-next {
    opacity: 1;
    transform: scale(1);
}

/* 禁用旧的单图 fade，避免露白 */
.sbc-main-image.sbc-fade {
    opacity: 1 !important;
}
.sbc-main-image-wrap {
    position: relative !important;
    overflow: hidden !important;
}

.sbc-thumb-strip {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
}

@media (max-width: 900px) {
    .sbc-thumb-strip {
        bottom: 14px !important;
    }
}

/* ================================================================
   Mobile Product Card Fix
   手机端产品选择卡片重新排版：不再挤压
   放到所有 Product Configurator CSS 最底部
================================================================ */

@media (max-width: 600px) {

  /* 右侧内容手机端不要太挤 */
  .sbc-panel {
    padding: 26px 18px 38px !important;
    background: #fff !important;
  }

  .sbc-section-label {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .sbc-solutions,
  .sbc-accessories {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  /* 核心：手机端卡片改成 grid，不再用 flex 横向硬挤 */
  .sbc-card,
  .sbc-solution-card,
  .sbc-accessory-card {
    display: grid !important;
    grid-template-columns: 22px 58px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "radio thumb body body"
      "radio thumb price qty" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;

    width: 100% !important;
    min-height: 104px !important;
    padding: 14px 12px !important;

    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }


  .sbc-radio {
    grid-area: radio !important;
    align-self: center !important;
    justify-self: center !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  .sbc-card-thumb {
    grid-area: thumb !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 6px !important;
  }

  .sbc-card-body {
    grid-area: body !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 产品名称手机端允许两行，避免只显示 S... */
  .sbc-card-name {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .sbc-card-sub {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: #777 !important;
  }

  /* 价格放到第二行左侧 */
  .sbc-card-price {
    grid-area: price !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
    justify-self: start !important;
  }

  .sbc-price-orig {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    color: #aaa !important;
    white-space: nowrap !important;
  }

  .sbc-price-now {
    margin-top: 2px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /* 数量按钮放到第二行右侧 */
  .sbc-qty {
    grid-area: qty !important;
    justify-self: end !important;
    align-self: center !important;
    margin-left: 0 !important;
    gap: 7px !important;
  }

  .sbc-qty-btn {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    background: #fff !important;
    color: #111 !important;
  }

  .sbc-qty-val {
    min-width: 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
  }

  /* Save 角标优化 */
  .sbc-badge {
    top: 0 !important;
    right: 0 !important;
    height: 34px !important;
    min-width: 108px !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 0 8px 0 8px !important;
    white-space: nowrap !important;
  }

  .sbc-atc-btn {
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}

/* 超窄屏再保护一下，比如 360px 宽度 */
@media (max-width: 380px) {
  .sbc-card,
  .sbc-solution-card,
  .sbc-accessory-card {
    grid-template-columns: 20px 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "radio thumb body"
      "radio thumb price"
      ". . qty" !important;
  }

  .sbc-card-thumb {
    width: 52px !important;
    height: 52px !important;
  }

  .sbc-qty {
    justify-self: start !important;
  }
}







/* ================================================================
   Mobile Gallery Image Fix
   手机端主图完整显示，不裁切产品
================================================================ */
@media (max-width: 900px) {
  .sbc-gallery {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
  }

  .sbc-main-image-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    aspect-ratio: 1 / 1 !important;

    padding: 20px 18px !important;
    background: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  .sbc-main-image {
    width: 100% !important;
    height: 100% !important;

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

    display: block !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 480px) {
  .sbc-main-image-wrap {
    min-height: 330px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 18px 14px !important;
  }

  .sbc-main-image {
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* ================================================================
   PC + Mobile Gallery Full Product Image Fix
   主图完整显示，不裁切产品图
   放在所有 CSS 最底部
================================================================ */

/* 桌面端：完整显示产品，不再 cover 裁切 */
@media (min-width: 901px) {
  .sbc-main-image-wrap {
    height: clamp(560px, 74vh, 720px) !important;
    padding: 46px 54px !important;
    background: #ffffff !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .sbc-main-image {
    width: 100% !important;
    height: 100% !important;

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

    border-radius: 0 !important;
    display: block !important;
  }

  /* 如果你用了交叉淡入淡出图层，也要同步改成 contain */
  .sbc-main-image-next {
    inset: 46px 54px !important;
    width: calc(100% - 108px) !important;
    height: calc(100% - 92px) !important;

    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* 中等 PC 屏幕，稍微减少留白 */
@media (max-width: 1200px) and (min-width: 901px) {
  .sbc-main-image-wrap {
    height: clamp(520px, 70vh, 660px) !important;
    padding: 36px 40px !important;
  }

  .sbc-main-image-next {
    inset: 36px 40px !important;
    width: calc(100% - 80px) !important;
    height: calc(100% - 72px) !important;
  }
}

/* 手机端：也完整显示 */
@media (max-width: 900px) {
  .sbc-main-image-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 18px 16px !important;
    background: #ffffff !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .sbc-main-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;
  }

  .sbc-main-image-next {
    inset: 18px 16px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 36px) !important;

    object-fit: contain !important;
    object-position: center center !important;
  }
}

.sbc-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.sbc-action-buttons .sbc-atc-btn,
.sbc-action-buttons .sbc-checkout-btn {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

.sbc-action-buttons .sbc-atc-btn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}

.sbc-action-buttons .sbc-checkout-btn {
  background: #fff !important;
  color: #111 !important;
  border: 1.5px solid #111 !important;
}

.sbc-action-buttons .sbc-atc-btn:hover {
  background: #222 !important;
  color: #fff !important;
}

.sbc-action-buttons .sbc-checkout-btn:hover {
  background: #111 !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .sbc-action-buttons {
    gap: 10px;
    margin-top: 22px;
  }

  .sbc-action-buttons .sbc-atc-btn,
  .sbc-action-buttons .sbc-checkout-btn {
    height: 50px;
    border-radius: 8px;
    font-size: 15px;
  }
}

/* ================================================================
   SBC Card Thumbnail Full Image Fix
   PC + Mobile 缩略图完整显示，不裁切
   放到所有 CSS 最底部
================================================================ */

.sbc-card-thumb {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  flex-shrink: 0 !important;

  padding: 5px !important;
  border-radius: 8px !important;
  background: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sbc-card-thumb img {
  width: 100% !important;
  height: 100% !important;

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

  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;

  border-radius: 0 !important;
}

/* PC 端稍微大一点，看起来更清楚 */
@media (min-width: 901px) {
  .sbc-card-thumb {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    padding: 6px !important;
  }
}

/* 手机端保持完整显示，避免挤压 */
@media (max-width: 600px) {
  .sbc-card-thumb {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 5px !important;
  }

  .sbc-card-thumb img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* 超窄屏保护 */
@media (max-width: 380px) {
  .sbc-card-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 4px !important;
  }
}


/* ================================================================
   Auto Product Image Full Display Fix
   自动获取产品图：PC + Mobile 完整显示
   放到所有 CSS 最底部
================================================================ */

.sbc-card-thumb {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  background: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sbc-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

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

  display: block !important;
  border-radius: 0 !important;
}

/* 手机端 */
@media (max-width: 600px) {
  .sbc-card-thumb {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    padding: 5px !important;
  }

  .sbc-card-thumb img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* 超小屏 */
@media (max-width: 380px) {
  .sbc-card-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 4px !important;
  }
}





/* ================================================================
   SBC Main Image Magnifier
   主图放大镜效果
   放到所有 CSS 最底部
================================================================ */

.sbc-main-image-wrap.has-magnifier {
  cursor: zoom-in;
}

/* 放大镜圆形镜片 */
.sbc-magnifier-lens {
  position: absolute;
  left: 0;
  top: 0;

  width: 188px;
  height: 188px;
  border-radius: 50%;

  background-color: #ffffff;
  background-repeat: no-repeat;

  border: 1px solid rgba(17, 17, 17, 0.18);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);

  opacity: 0;
  pointer-events: none;
  z-index: 12;

  transform: translate(-9999px, -9999px);
  transition: opacity 0.16s ease;
}

/* 显示放大镜 */
.sbc-main-image-wrap.is-magnifying .sbc-magnifier-lens {
  opacity: 1;
}

/* 右上角提示 */
.sbc-magnifier-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 11;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(17, 17, 17, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sbc-magnifier-hint span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #111111;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

/* 放大时隐藏提示 */
.sbc-main-image-wrap.is-magnifying .sbc-magnifier-hint {
  opacity: 0;
  transform: translateY(-4px);
}

/* 中等屏幕镜片小一点 */
@media (max-width: 1200px) and (min-width: 901px) {
  .sbc-magnifier-lens {
    width: 160px;
    height: 160px;
  }
}

/* 手机端关闭放大镜，避免影响滑动 */
@media (max-width: 900px) {
  .sbc-main-image-wrap.has-magnifier {
    cursor: default;
  }

  .sbc-magnifier-lens,
  .sbc-magnifier-hint {
    display: none !important;
  }
}


/* ================================================================
   SBC Qty Button + Left Gallery Height Fix
   修复 + - hover 变白 / 左侧主图贴顶遮挡
================================================================ */

/* 1. 修复 + - 数量按钮 hover 变白、文字看不见的问题 */
.sbc-qty-btn,
.sbc-qty-btn:link,
.sbc-qty-btn:visited {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #d8d8d8 !important;
  box-shadow: none !important;
  outline: none !important;
}

.sbc-qty-btn:hover,
.sbc-qty-btn:focus,
.sbc-qty-btn:active {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 防止主题给 button 加奇怪的 hover 颜色 */
.sbc-card .sbc-qty-btn:hover,
.sbc-card .sbc-qty-btn:focus,
.sbc-card .sbc-qty-btn:active {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* 2. 左侧图片不要贴顶，避免被上方内容挡住 */
@media (min-width: 901px) {
  .sbc-gallery {
    position: sticky !important;
    top: 72px !important;
    align-self: flex-start !important;
  }

  .sbc-main-image-wrap {
    height: clamp(500px, 66vh, 640px) !important;
    padding: 36px 54px 54px !important;
  }

  .sbc-main-image {
    object-fit: contain !important;
    object-position: center center !important;
  }

  .sbc-main-image-next {
    inset: 36px 54px 54px !important;
    width: calc(100% - 108px) !important;
    height: calc(100% - 90px) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* 圆点不要压到产品底部 */
  .sbc-thumb-strip {
    bottom: 22px !important;
  }

  /* 放大镜提示不要顶到最上面 */
  .sbc-magnifier-hint {
    top: 24px !important;
    right: 24px !important;
  }
}

/* 3. 如果你的顶部有固定导航栏，可以把 top 再加大一点 */
@media (min-width: 901px) and (max-height: 760px) {
  .sbc-gallery {
    top: 60px !important;
  }

  .sbc-main-image-wrap {
    height: clamp(460px, 62vh, 580px) !important;
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }
}


/* ================================================================
   Mobile Save Badge Overlap Fix
   修复手机端 Save 角标挡住标题
================================================================ */

@media (max-width: 600px) {

  /* 有 Save 角标的方案卡片，顶部预留空间 */
  .sbc-solution-card.has-badge {
    padding-top: 46px !important;
    min-height: 126px !important;
  }

  /* Save 角标缩小一点，避免挡文字 */
  .sbc-solution-card.has-badge .sbc-badge {
    top: 0 !important;
    right: 0 !important;
    height: 32px !important;
    min-width: 96px !important;
    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9.5px !important;
    line-height: 1 !important;
    border-radius: 0 10px 0 10px !important;
    z-index: 5 !important;
  }

  /* 标题不要被右侧区域压住，允许换行 */
  .sbc-solution-card.has-badge .sbc-card-name {
    padding-right: 6px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* 价格和数量按钮对齐更稳 */
  .sbc-solution-card.has-badge .sbc-card-price {
    align-self: center !important;
  }

  .sbc-solution-card.has-badge .sbc-qty {
    align-self: center !important;
  }
}

/* ================================================================
   Product Features Horizontal Layout
   产品卖点改成横向排列
================================================================ */

.sbc-features {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 28px !important;
}

.sbc-features li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: #f5f5f5 !important;
  color: #111111 !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  white-space: nowrap !important;
}

/* 鼠标移动轻微效果 */
.sbc-features li:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

/* 手机端允许自动换行，不会挤出去 */
@media (max-width: 600px) {
  .sbc-features {
    gap: 8px !important;
    margin: 16px 0 24px !important;
  }

  .sbc-features li {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* ================================================================
   SBC Custom Notice
   替代浏览器 alert，统一 SofaBaton 产品页黑白极简风格
================================================================ */

.sbc-custom-notice {
  position: fixed;
  top: 86px;
  right: 28px;
  z-index: 9999999;

  width: min(420px, calc(100vw - 36px));
  min-height: 92px;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: flex-start;

  padding: 20px 20px 18px;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.94);
  color: #111111;

  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  pointer-events: none;

  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}

.sbc-custom-notice.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sbc-custom-notice__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #111111;
  color: #ffffff;

  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.sbc-custom-notice__body {
  min-width: 0;
}

.sbc-custom-notice__title {
  margin: 0 0 6px;
  color: #111111;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.sbc-custom-notice__text {
  color: #333333;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.sbc-custom-notice__sub {
  margin-top: 8px;
  color: #777777;
  font-size: 12px;
  line-height: 1.45;
}

.sbc-custom-notice__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #f5f5f5;
  color: #111111;

  font-size: 20px;
  line-height: 1;
  font-weight: 400;

  cursor: pointer;
  padding: 0;
  box-shadow: none !important;
  outline: none !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.sbc-custom-notice__close:hover {
  background: #111111;
  color: #ffffff;
  transform: rotate(90deg);
}

@media (max-width: 600px) {
  .sbc-custom-notice {
    top: auto;
    right: 14px;
    left: 14px;
    bottom: 22px;

    width: auto;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    gap: 12px;

    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  .sbc-custom-notice__icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .sbc-custom-notice__title {
    font-size: 14px;
  }

  .sbc-custom-notice__text {
    font-size: 12.5px;
  }
}

/* ================================================================
   SBC Cooldown Button State
   按钮倒计时状态
================================================================ */

.sbc-action-buttons .sbc-atc-btn.is-cooldown,
.sbc-action-buttons .sbc-checkout-btn.is-cooldown {
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 黑色按钮倒计时 */
.sbc-action-buttons .sbc-atc-btn.is-cooldown {
  background: #2f2f2f !important;
  color: #ffffff !important;
  border-color: #2f2f2f !important;
}

/* 白色按钮倒计时 */
.sbc-action-buttons .sbc-checkout-btn.is-cooldown {
  background: #f4f4f4 !important;
  color: #555555 !important;
  border-color: #d8d8d8 !important;
}

.sbc-action-buttons .sbc-atc-btn.is-cooldown:hover,
.sbc-action-buttons .sbc-checkout-btn.is-cooldown:hover {
  transform: none !important;
}

/* ShortPixel Global picture fix for SBC carousel */
.sbc-main-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sbc-main-image-wrap picture .sbc-main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sbc-thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sbc-thumb picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}