/* 子比组合购买 —— 前台样式
 * 颜色与圆角全部走子比 CSS 变量，自动适配昼夜模式。
 *
 * 布局分档用【容器查询】而非媒体查询：同一份代码放进侧栏（窄）时单列、
 * 放进主内容区（宽）时两列，媒体查询只能看到视口宽度，无法区分这两种场景。
 */

/* 声明尺寸容器，供下方 @container 分档判断「本模块有多宽」 */
.zcb-combo {
    container-type: inline-size;
}

/*
 * 头部：渐变封面带（角标 / 组合名 / 说明）
 *
 * 结构照搬子比「登录小工具」上方那块封面头 —— inc/widgets/widget-user.php 的
 * zib_widget_ui_user() 里是 `.user-card > .user-cover.graphic > img.fit-cover`。
 * 这里复用同一个 .graphic（提供 --main-color:#fff / color:#fff / text-shadow / 圆角），
 * 封面位没有 <img>，改由子比自带的渐变工具类 jb-pink 上色
 * （.jb-pink 给出 --this-bg，主题的 `.jb-…{color:var(--this-color);background:var(--this-bg)}`
 *  直接用这个变量上色）。换渐变只改模板里那一个类名。
 *
 * 这里只补三件主题不管的事：
 *   ① 封面位没有图 —— 把 .graphic 那个「用比例撑高给 <img> 定位」的
 *      padding-bottom 换成自然内边距，纯文字头在任何宽度下都稳定；
 *   ② 压一层深色遮罩 —— jb 渐变的浅端是 #ff967e，纯白字压上去只有约 2.1:1，
 *      必须压暗才够读。遮罩方向顺着渐变加码（浅端更重），浓度按实测对比度定：
 *      0.34 平铺 → 最亮处 3.66:1 ✗；0.34→0.48 顺渐变加码 → 4.7:1 ✓（13px 说明按 4.5 判）。
 *   ③ 圆角 —— 默认四角：在小工具「无背景」模式与展示页的组合面板里，
 *      它是一块独立色块；贴着 .zib-widget 卡片顶边时改成只圆上两角并向外出血，见下。
 *
 * 窄容器（侧栏）自上而下三行：角标 / 组合名 / 说明 —— 角标实心胶囊与粗体标题
 * 挤在同一行时两个都在抢视线，下面再压一行说明会很乱。
 * 宽容器（主内容区 / 展示页面板）横向空间够，改回「角标与组合名同行」，
 * 见文末 @container (min-width: 560px)。
 */
.zcb-combo .zcb-head {
    position: relative;
    overflow: hidden;                       /* 裁掉溢出的光晕圆（原生 .relative-h 的角色） */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
    padding: 16px 15px 18px;
    border-radius: var(--main-radius);
    background-size: 120%;                  /* 与原生一样放大一档，让渐变在头内更舒展；渐变本身由 .jb-pink 类提供，不写死色值、不加任何暗色遮罩 */
    box-shadow: none;
    color: #fff;
}

/* 头部里的三块内容要压在光晕圆之上（圆是 z-index:0 的装饰层） */
.zcb-combo .zcb-head > .zcb-pills,
.zcb-combo .zcb-head > .zcb-name,
.zcb-combo .zcb-head > .zcb-desc {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
 * 两团圆形光晕 —— 不再用本插件自写的类，直接复用子比原生结构：
 *   模板/函数里输出
 *     <div class="absolute radius jb-pink" style="height:200px;left:75%;width:200px;top:-34%;border-radius:100%"></div>
 *     <div class="absolute jb-pink radius"  style="height:305px;width:337px;left:-229px;border-radius:100%;opacity:.7"></div>
 *   圆直接挂原生 jb-* 类拿到 var(--this-bg) 渐变，按自身尺寸铺开（父级 120% / 圆 100%，
 *   background-size 不继承）→ 圆与底相位不同，自然呈现柔光。溢出由 .relative-h 裁掉。
 * ---------------------------------------------------------- */

/*
 * 头部贴着 .zib-widget 卡片的顶边时向外出血到卡片内边距之外，只圆上面两角，
 * 形成「卡片顶部一条渐变带」的观感（与登录小工具上方那块封面头一致）。
 *
 * 负外边距必须与 .zib-widget 的 padding(15px) 严格相等，否则会露出卡片底色。
 * 主题一旦改这个数值，这里就会露边 —— 所以测试里用【源码契约断言】回读
 * 主题 main.min.css 核对 .zib-widget 的 padding 仍是 15px，主题升级会立刻报警。
 */
.zib-widget.zcb-combo > .zcb-head {
    margin: -15px -15px 12px;
    border-radius: var(--main-radius) var(--main-radius) 0 0;
}

/* ------------------------------------------------------------
 * 角标 / 功能胶囊
 *
 * 只有两种填充语言：品牌色实心（自定义、火爆）与品牌色描边
 * （限时、超值、热门）—— 不叠渐变、光晕与阴影，靠图标和文案区分类型，
 * 保证在昼夜两种主题下都只依赖 --theme-color 一个强调色。
 * ---------------------------------------------------------- */
.zcb-combo .zcb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zcb-combo .zcb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.zcb-combo .zcb-pill > i {
    font-size: 12px;
    line-height: 1;
}

.zcb-combo .zcb-pill-custom,
.zcb-combo .zcb-pill-fire {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

.zcb-combo .zcb-pill-limit,
.zcb-combo .zcb-pill-value,
.zcb-combo .zcb-pill-hot {
    background-color: transparent;
    border-color: var(--theme-color);
    color: var(--theme-color);
}

/* —— 限时：子比原生倒计时 —— */
.zcb-combo .zcb-pill-limit .zcb-pill-txt {
    opacity: .85;
}

.zcb-combo .zcb-pill-timer {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 原生 $.fn.countdown 会向容器里写入 .day/.hour/.minute/.second 及配套 -unit */
.zcb-combo .zcb-pill-timer .day-unit,
.zcb-combo .zcb-pill-timer .hour-unit,
.zcb-combo .zcb-pill-timer .minute-unit,
.zcb-combo .zcb-pill-timer .second-unit {
    margin-right: 2px;
    font-weight: 400;
    opacity: .75;
}

.zcb-combo .zcb-pill-timer .second-unit {
    margin-right: 0;
}

/*
 * 结束态弱化，不再抢视线。
 * 用 --muted-color（主题主中性色）而非 --muted-2-color：
 * 后者在白底只有 2.85:1，连 3:1 都过不了；前者 4.48:1。
 * 仍是同一套主题中性色，不引入第二个强调色。
 */
.zcb-combo .zcb-pill-limit.is-ended {
    border-color: var(--main-border-color);
    color: var(--muted-color);
}

/* —— 热门：关注人数 + 原生关注按钮（data-action="follow_user" 由主题接管）—— */
.zcb-combo .zcb-pill-hot .zcb-hot-count b {
    font-weight: 700;
}

.zcb-combo .zcb-pill-hot .zcb-follow {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--theme-color);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition: opacity .2s;
}

/* 主题给图标加的 .mr3 与这里的 gap 会重复计距 */
.zcb-combo .zcb-pill-hot .zcb-follow i.mr3 {
    margin-right: 0;
}

.zcb-combo .zcb-pill-hot .zcb-follow:hover {
    color: #fff;
    opacity: .88;
}

/* 已关注：同样弱化，同样用 --muted-color 保证可读性 */
.zcb-combo .zcb-pill-hot .zcb-follow.actived {
    border: 1px solid var(--main-border-color);
    background-color: transparent;
    color: var(--muted-color);
}

/* ------------------------------------------------------------
 * 头部在渐变底上 —— 胶囊整体反相成「白底 + 深字」
 *
 * 上面那两种填充语言（品牌色实心 / 品牌色描边）都是为【浅色卡片】定的：
 * 实心胶囊的底色就是品牌色，压在同色的渐变带上会糊成一片。
 *
 * ⚠️ 中间试过一版「半透明白填充(.2) + 白字」，是错的：半透明白压在粉底上
 *    仍然很亮（实测合成 rgb(231,171,187)），白字只有 1.92:1，根本读不清。
 *    而按「胶囊外圈的底色」去判对比度会得到 4.87:1 的假象 ——
 *    文字的底是它自己的填充，不是它外面的底。反相后深字压近白底约 5:1。
 *
 * 选择器必须比 .zcb-combo .zcb-pill-xxx 多一层（.zcb-head），否则 (0,2,0) 打平后
 * 胜负交给加载顺序 —— 插件 CSS 与主题 CSS 谁后加载并不固定。
 * ---------------------------------------------------------- */
.zcb-combo .zcb-head .zcb-pill {
    background-color: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .92);
    color: rgba(0, 0, 0, .85);
}

/*
 * 结束态单独提到 (0,4,0)，比上一条 .zcb-combo .zcb-head .zcb-pill（(0,3,0)）高一级，
 * 不靠加载顺序。
 *
 * ⚠️ 「弱化」降低的是【填充的白度】（.92 → .62），字色只从 .85 退到 .78。
 *    两边都不碰文字透明度：字一旦半透明，压在任何底上都只剩 2:1 上下，
 *    表意不能拿可读性去换。这一条由 shot-badges.js 用真实像素守着。
 */
.zcb-combo .zcb-head .zcb-pill-limit.is-ended {
    background-color: rgba(255, 255, 255, .62);
    border-color: rgba(255, 255, 255, .62);
    color: rgba(0, 0, 0, .78);
}

/* 头部里的说明文字：最后一条 .zcb-pill-timer 的单位也一并提亮 */
.zcb-combo .zcb-head .zcb-pill-timer .day-unit,
.zcb-combo .zcb-head .zcb-pill-timer .hour-unit,
.zcb-combo .zcb-head .zcb-pill-timer .minute-unit,
.zcb-combo .zcb-head .zcb-pill-timer .second-unit {
    opacity: .85;
}

/* 关注按钮是这一块里唯一的【操作】，要跟「内容」区分开：
   外胶囊已经反相成白底，按钮再白就融进去了 —— 所以按钮反过来用
   品牌色实心 + 白字（白字压品牌色约 4.3:1），与胶囊的白底形成对比。 */
.zcb-combo .zcb-head .zcb-pill-hot .zcb-follow {
    background-color: var(--theme-color);
    color: #fff;
}

.zcb-combo .zcb-head .zcb-pill-hot .zcb-follow:hover {
    color: #fff;
    opacity: .9;
    background-color: var(--theme-color);
}

/* 已关注 = 回到「描边次要按钮」，但字样要压在白胶囊上，所以用深色描边深色字 */
.zcb-combo .zcb-head .zcb-pill-hot .zcb-follow.actived {
    background-color: transparent;
    border-color: rgba(0, 0, 0, .24);
    color: rgba(0, 0, 0, .72);
}

/* —— 火爆：已售份数 + 「+1」飘散 —— */
.zcb-combo .zcb-fire-wrap {
    position: relative;
    display: inline-block;
}

.zcb-combo .zcb-fire-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.zcb-combo .zcb-fire-delta {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 2px;
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
    animation: zcb-fire-rise 1.1s ease-out forwards;
}

@keyframes zcb-fire-rise {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(.8);
    }

    25% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-9px) scale(1);
    }
}

/* 组合名：自有排版，【不】挂主题的 .title-h-left。
   那个类的 :before 会画一根 40px×3px 的 var(--theme-color) 短横线
   （主题 css/main.min.css），登录小工具的封面里并没有这种东西。
   层级靠字号/字重与上方胶囊、下方说明的间距拉开，不靠装饰线。 */
.zcb-combo .zcb-name {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--key-color);
}

/* 头部在渐变底上：白字。 */
.zcb-combo .zcb-head .zcb-name {
    color: #fff;
}

.zcb-combo .zcb-desc {
    /* 头部改成纵向 flex 后这里不要再写 flex-basis：
       在 column 方向上 100% 是「占满整个容器高度」，说明文字会被拉成一大片留白。 */
    margin-top: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-2-color);
}

/* 头部在渐变底上：说明文字用满白，不靠透明度弱化 ——
   13px 属正文字号按 4.5:1 判，压暗后的渐变底上 0.86 的白只有约 4.0:1，
   差一点点够不到；层级改由 16px 粗体名 / 13px 说明的字号字重差体现。 */
.zcb-combo .zcb-head .zcb-desc {
    color: #fff;
}

/* 标题前缀（.DearLicy_prefix，由主题 func.php 注入，如「首发」/「独家」）。
 * 全站 grep 确认主题未提供任何 .DearLicy_prefix 样式，故此处仅在插件作用域内补【形态】，
 * 不重写颜色（颜色由主题按 prefix 类型给的 c-* 类控制），也不写全局规则以免与其它插件冲突。 */
.zcb-combo .DearLicy_prefix,
.combo-card .DearLicy_prefix {
    display: inline-block;
    padding: .08em .5em;
    border-radius: 4px;
    font-size: .82em;
    line-height: 1.5;
    background: rgba(0, 0, 0, .06);
}

.zcb-combo .zcb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zcb-combo .zcb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--main-border-color);
}

.zcb-combo .zcb-item:last-child {
    border-bottom: 0;
}

/* 圆角交给原生工具类 .radius4（与子比小缩略图 .article-postsbox 的 4px 一致）。
   这里不要写 border-radius：会和主题规则同特异性打架。 */
.zcb-combo .zcb-thumb {
    /* 缩略图本身是链接（可点击跳转），显式转块级，
       避免主题里针对 a 标签的 display 规则把尺寸搞坏 */
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 42px;
    overflow: hidden;
    background-color: var(--muted-bg-color);
}

.zcb-combo .zcb-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zcb-combo .zcb-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.zcb-combo .zcb-title {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--key-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zcb-combo .zcb-title:hover {
    color: var(--theme-color);
}

.zcb-combo .zcb-price {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-2-color);
}

.zcb-combo .zcb-price del {
    color: var(--muted-3-color);
    margin-right: 2px;
}

/* 价格与积分统一使用品牌色，靠文案（¥ / 积分）区分，保持单一强调色 */
.zcb-combo .zcb-cash {
    color: var(--theme-color);
    font-weight: 600;
}

.zcb-combo .zcb-points {
    color: var(--theme-color);
    font-weight: 600;
}

.zcb-combo .zcb-item.is-owned .zcb-title {
    color: var(--muted-2-color);
}

.zcb-combo .zcb-item.is-owned .zcb-owned-text {
    color: var(--muted-3-color);
}

.zcb-combo .zcb-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--main-border-color);
}

.zcb-combo .zcb-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.zcb-combo .zcb-sum-label {
    font-size: 13px;
    color: var(--muted-2-color);
}

.zcb-combo .zcb-sum-label .zcb-count {
    color: var(--muted-3-color);
}

.zcb-combo .zcb-sum-price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.zcb-combo .zcb-sum-price del {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted-3-color);
    margin-right: 6px;
}

.zcb-combo .zcb-sum-price .zcb-points {
    font-size: 14px;
}

/* 购买按钮：填充改用子比原生渐变工具类 jb-pink（class 由 frontend.php 输出时挂载）。
 *
 * ⚠️ 这里【刻意不写】background-color / color：
 *    .jb-* 的机制是 `background: var(--this-bg); color: var(--this-color); --this-color:#fff`，
 *    而本选择器是 (0,2,0)、高于主题的 (0,1,0) —— 一旦写了 background-color 就会把渐变覆盖掉，
 *    变成「自写实心色」而不是原生渐变。这也是之前按钮没复用原生的根因。
 *
 * 圆角沿用原生 .but 的 4px —— 此处不可再写 border-radius，
 * 否则会与 .but.radius(50px) 同特异性(0,2,0)，胜负取决于 CSS 加载顺序。 */
.zcb-combo .zcb-buy-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity .2s;
}

.zcb-combo .zcb-buy-btn:hover {
    opacity: .88;
}

.zcb-combo .zcb-buy-btn:disabled,
.zcb-combo .zcb-buy-btn.is-loading {
    /* 禁用态必须显式清掉渐变 —— .jb-* 给的是 background-image，只改 background-color 压不住 */
    background-image: none;
    background-color: var(--muted-bg-2-color, #e9ecef);
    color: var(--muted-2-color);
    cursor: not-allowed;
    opacity: 1;
}

.zcb-combo .zcb-empty-text {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--muted-2-color);
    text-align: center;
}

/* 支付模态里的组合明细沿用原生样式，这里只兜底标题过长 */
.zcb-combo-modal .paid-modal-lists-box .order-item .text-ellipsis {
    max-width: 100%;
}

/* 退化弹层（仅当主题未提供 refresh_modal 时使用） */
.zcb-fallback-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.zcb-fallback-box {
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
    background-color: var(--main-bg-color);
    border-radius: var(--main-radius, 8px);
    box-shadow: 0 0 20px var(--main-shadow);
}

@media (max-width: 767px) {
    .zcb-combo .zcb-thumb {
        width: 48px;
        height: 36px;
    }
}

/* 尊重系统「减少动态效果」：脚本已跳过自增，这里再兜一层动画与过渡 */
@media (prefers-reduced-motion: reduce) {

    .zcb-combo .zcb-fire-delta {
        animation: none;
    }

    .zcb-combo .zcb-buy-btn,
    .zcb-combo .zcb-pill-hot .zcb-follow {
        transition: none;
    }
}

/* ============================================================
 * 主内容区（宽容器）适配：文章两列 + 购买按钮移到最右侧
 * 阈值 560px —— 侧栏典型宽度约 300px 不会触发，主内容区才会。
 * 不支持容器查询的浏览器会整块忽略，自动退化为单列全宽按钮。
 * ============================================================ */
@container (min-width: 560px) {

    /* 头部：宽度够时回到「角标与组合名同行、说明另起一行」。
     *
     * 用 flex-start 而不是 center：组合名带 .title-h-left 后底部多了 8px 内边距
     * （留给那根短横线），居中对齐会让胶囊相对标题文字下坠约 4px；
     * 顶对齐时胶囊顶部与标题首行对齐，误差只有零点几像素。
     * 标题换行时胶囊也仍留在第一行，符合预期。 */
    .zcb-combo .zcb-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 10px;
    }

    .zcb-combo .zcb-desc {
        flex: 1 1 100%;
    }

    /* 文章列表：两列网格 */
    .zcb-combo .zcb-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    /* 底部：合计在左、按钮靠最右（不再全宽铺满） */
    .zcb-combo .zcb-foot {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .zcb-combo .zcb-sum {
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    .zcb-combo .zcb-buy-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 148px;
        padding-left: 22px;
        padding-right: 22px;
    }

    /* 空状态同样一行排布 */
    .zcb-combo .zcb-empty {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .zcb-combo .zcb-empty-text {
        margin-bottom: 0;
        text-align: left;
    }
}

/* ============================================================
 * 左右两栏（展示页专用）
 *
 * 只对 .zcb-split 生效 —— 小工具输出的标记里没有这个类，观感完全不变。
 * 两栏宽度用百分比基准 + min-width：容器够宽时「左宽右窄」并排，
 * 不够宽（手机 / 窄容器）时 flex-wrap 自动叠成一栏，无需媒体查询。
 * ============================================================ */
.zcb-combo.zcb-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

/* 左栏：组合的文章展示（缩略图 + 标题 + 价格）
 *
 * display:block 是必须的，不是随意写的：
 *   @container (min-width:560px) 里有一条
 *     `.zcb-combo .zcb-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }`
 *   那是给「小工具铺满整个宽主内容区」准备的（那时整个 .zcb-combo 里只有这一份列表）。
 *   容器查询量的是【整个 .zcb-combo 的宽度】，split 下它整体仍然 ≥560px，
 *   于是照样命中，可左栏实际只占 60%（约 660px）——文章会被压成两列小格子，
 *   「一行一个的文章展示」语义被毁，整卡片看起来就是乱的。
 *   这里以 (0,3,0) 覆盖 @container 内的 (0,2,0)，不靠 CSS 加载顺序决胜负。 */
.zcb-combo.zcb-split > .zcb-list {
    flex: 1 1 60%;
    min-width: 0;
    display: block;
}

/* 右栏：标题 / 介绍 / 合计 / 购买按钮 */
.zcb-combo.zcb-split > .zcb-side {
    flex: 1 1 32%;
    min-width: 260px;
}

/*
 * 右栏里的合计与按钮恢复【纵向堆叠】。
 *
 * 宽容器下 @container (min-width:560px) 会把 .zcb-foot 排成横排（合计左、按钮右），
 * 那是给「整宽卡片」准备的；右栏只有 300px 上下，横排会挤成一团。
 * 这里的选择器 (0,4,0) 高于 @container 里的 (0,2,0)，不靠加载顺序决胜负。
 */
.zcb-combo.zcb-split .zcb-side .zcb-foot {
    display: block;
}

.zcb-combo.zcb-split .zcb-side .zcb-sum {
    margin-bottom: 10px;
}

/*
 * 右栏里的「已拥有全部内容」恢复【纵向堆叠】。
 *
 * ⚠️ 这条是「展示页里那行提示被压成竖条」的根因，别删：
 *   @container (min-width:560px) 里有一条
 *     `.zcb-combo .zcb-empty { display:flex; align-items:center; gap:18px }`
 *   那是给「整宽卡片」准备的（文字在左、按钮在右）—— 此时按钮在 @container 里
 *   被设成 `flex:0 0 auto; min-width:148px`，宽度由内容撑，横排好看。
 *
 *   但容器查询量的是【整个 .zcb-combo】的宽度，split 下它整体仍 ≥560px 照样命中，
 *   而右栏实际只有约 371px。更要命的是本文件另一条
 *     `.zcb-combo.zcb-split .zcb-side .zcb-buy-btn { width:100% }`
 *   让按钮的 flex-basis 变成整栏 100%，于是「您已拥有该组合内的全部内容」
 *   被挤到剩余那点宽度里逐字换行 —— 看上去就是「一条竖直的文字完全没排版」。
 *
 * 选择器 (0,4,0) 高于 @container 内的 (0,2,0)，不靠 CSS 加载顺序决胜负。
 */
.zcb-combo.zcb-split .zcb-side .zcb-empty {
    display: block;
}

.zcb-combo.zcb-split .zcb-side .zcb-empty-text {
    margin-bottom: 10px;
    text-align: center;
}

.zcb-combo.zcb-split .zcb-side .zcb-buy-btn {
    display: block;
    width: 100%;
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
}

/* ============================================================
 * 「开通会员更优惠」次按钮
 *
 * 标记由子比原生 zibpay_get_payvip_icon() 输出，原生 class 是
 *   pay-vip but jb-red radius4 payvip-icon zcb-vip-btn
 * 其中 .payvip-icon 自带一层金属渐变底 + 一枚 3.5em 的半透明钻石水印，
 * .jb-red 又叠一层红渐变 —— 和主按钮（本页统一的 --theme-color 实心）会互抢。
 * 这里只保留它的「可点击 + pay-vip 行为」，外观收成【品牌色描边次按钮】：
 *   · background 收空、去掉水印伪元素；
 *   · 描边与文字都取本页统一的 --theme-color（展示页已把它映射成 --highlight-color）。
 * 选择器比 .payvip-icon / .jb-red（都是 (0,1,0)）高一层，不依赖 CSS 加载顺序。
 * 圆角照旧不写 —— 交回原生 .but，避免同特异性竞争。
 * ---------------------------------------------------------- */
.zcb-combo .zcb-vip-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px 16px;
    background: none;
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-shadow: none;
    box-shadow: none;
    overflow: visible;
}

/* 收掉原生那枚大钻石水印 —— 本插件的按钮不靠装饰图撑场 */
.zcb-combo .zcb-vip-btn:before {
    content: none;
}

.zcb-combo .zcb-vip-btn:hover {
    background-color: var(--theme-color);
    color: #fff;
}

/* 原生按钮里带一枚 svg 会员图标，让它跟随文字颜色 */
.zcb-combo .zcb-vip-btn svg {
    fill: currentColor;
    color: currentColor;
}