/**
 * cloud-direct-download - 前台样式
 * 目标：1:1 复刻参考站的「极速下载（移动云盘）」直链面板
 * 前缀统一 cdd- ，避免与子比主题 / 其它插件冲突
 */

/* 变量必须定义在 :root ——
   免费组 .cdd-groups 与直链面板 .cdd-box 是**兄弟节点**，
   若变量只写在 .cdd-box 内，免费组的按钮取不到变量 → 渐变背景失效 → 白底白字「隐形」。 */
:root {
    --cdd-border: #ececec;
    --cdd-text: #222;
    --cdd-muted: #9a9a9a;
    --cdd-orange-1: #ff7a45;
    --cdd-orange-2: #ff4d2e;
    --cdd-green-1: #34c759;
    --cdd-green-2: #22a94a;
    --cdd-tip-bg: #fff9f2;
    --cdd-tip-border: #ffe3c9;
    --cdd-tip-text: #a8562a;
}

.cdd-box {
    box-sizing: border-box;
    margin: 0 0 16px;
    border: 1px solid var(--cdd-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    color: var(--cdd-text);
    font-size: 14px;
    line-height: 1.6;
}

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

/* ---------- 头部 ---------- */
.cdd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

.cdd-head-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.cdd-pan-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* 图标占位（无图时用文字符号） */
.cdd-pan-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #e8f3ff;
    color: #1677ff;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.cdd-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cdd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdd-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 50%;
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
    cursor: help;
}

.cdd-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff1ef;
    color: #e5484d;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- 主体 ---------- */
.cdd-body { padding: 0 16px 16px; }

.cdd-center { text-align: center; padding: 10px 0 4px; }

.cdd-main-btn {
    display: inline-block;
    min-width: 200px;
    padding: 13px 34px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cdd-orange-1, #ff7a45), var(--cdd-orange-2, #ff4d2e));
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 77, 46, .22);
    transition: filter .18s, transform .18s, box-shadow .18s;
    text-decoration: none;
}

.cdd-main-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(255, 77, 46, .3); }
.cdd-main-btn:active { transform: translateY(1px); }
.cdd-main-btn[disabled] { opacity: .6; cursor: default; box-shadow: none; }

.cdd-hint {
    margin: 10px 0 0;
    color: var(--cdd-muted);
    font-size: 13px;
}

/* ---------- 黄色提示条 ---------- */
.cdd-tip {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--cdd-tip-border);
    border-radius: 8px;
    background: var(--cdd-tip-bg);
    color: var(--cdd-tip-text);
    font-size: 12.5px;
    line-height: 1.85;
}
.cdd-tip a { color: #e5484d; text-decoration: none; }
.cdd-tip a:hover { text-decoration: underline; }

/* ---------- 文件列表 ---------- */
.cdd-files { margin-top: 16px; }

.cdd-files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
}
.cdd-files-head h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cdd-text);
}
.cdd-files-count { color: var(--cdd-muted); font-size: 13px; }

.cdd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #ededed;
}
.cdd-row:last-child { border-bottom: 0; }

.cdd-row-info { min-width: 0; flex: 1 1 auto; }

.cdd-row-name {
    display: block;
    color: var(--cdd-text);
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}
.cdd-row-size { display: block; margin-top: 2px; color: var(--cdd-muted); font-size: 12.5px; }

/* 文件夹行 */
.cdd-row.is-dir {
    padding: 12px;
    border-bottom: 1px solid #f2f2f2;
    border-radius: 8px;
    background: #f6f7f8;
}
.cdd-row.is-dir .cdd-row-name { color: #666; font-weight: 400; }
.cdd-row.is-dir + .cdd-row { border-top: 0; }

.cdd-btn {
    flex: 0 0 auto;
    display: inline-block;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--cdd-orange-1, #ff7a45), var(--cdd-orange-2, #ff4d2e));
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .18s;
}
.cdd-btn:hover { filter: brightness(1.06); color: #fff; }

.cdd-btn.is-dir {
    background: linear-gradient(135deg, var(--cdd-green-1, #34c759), var(--cdd-green-2, #22a94a));
    box-shadow: 0 3px 10px rgba(52, 199, 89, .2);
}

/* ---------- 复制全部链接（文件列表头部） ---------- */
.cdd-head-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.cdd-btn.is-copy {
    padding: 6px 12px;
    font-size: 12.5px;
    background: transparent;
    color: #8a8f99;
    border: 1px solid #e2e5ea;
    box-shadow: none;
}
.cdd-btn.is-copy:hover { background: #f5f6f8; color: #5b6068; filter: none; }
.cdd-btn.is-copy[disabled] { opacity: .65; cursor: default; }

.cdd-copy-hint {
    margin: 8px 0 0;
    color: var(--cdd-muted);
    font-size: 12.5px;
    line-height: 1.7;
}

/* 剪贴板不可用时，把链接摊出来让用户手动复制 */
.cdd-copy-ta {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #e2e5ea;
    border-radius: 6px;
    background: #f7f8fa;
    color: #5b6068;
    font-size: 12px;
    line-height: 1.6;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    word-break: break-all;
    resize: vertical;
}

/* ---------- 面包屑 / 返回 ---------- */
.cdd-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--cdd-muted);
}
.cdd-crumb a { color: #1677ff; text-decoration: none; }
.cdd-crumb a:hover { text-decoration: underline; }
.cdd-crumb-sep { color: #cfcfcf; }

/* ---------- 状态 ---------- */
.cdd-loading,
.cdd-empty,
.cdd-error {
    padding: 26px 10px;
    text-align: center;
    font-size: 13.5px;
}
.cdd-loading { color: var(--cdd-muted); }
.cdd-empty { color: var(--cdd-muted); }
.cdd-error { color: #e5484d; }

.cdd-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #ffd9cc;
    border-top-color: var(--cdd-orange-2);
    border-radius: 50%;
    vertical-align: -3px;
    animation: cdd-spin .8s linear infinite;
}
@keyframes cdd-spin { to { transform: rotate(360deg); } }

.cdd-notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f7f8fa;
    color: #7a7f87;
    font-size: 12.5px;
    line-height: 1.8;
}

/* ---------- 付费门槛（未购买） ---------- */
.cdd-pay { text-align: center; padding: 14px 0 6px; }

.cdd-price {
    margin: 0 0 14px;
    font-size: 14px;
    color: #666;
}
.cdd-price b {
    margin: 0 4px;
    color: #e5484d;
    font-size: 22px;
    font-weight: 600;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
}

.cdd-pay-note { margin: 10px 0 0; color: var(--cdd-muted); font-size: 12.5px; }

/* ---------- 下载组（免费 / 付费 两种并排样式） ---------- */
.cdd-groups { margin: 0 0 16px; }

.cdd-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--cdd-border, #ececec);
    border-radius: 12px;
    background: #fff;
}
.cdd-group:last-child { margin-bottom: 0; }

.cdd-group-main { min-width: 0; flex: 1 1 auto; }

.cdd-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--cdd-text, #222);
}

.cdd-group-price {
    margin-top: 6px;
    color: #666;
    font-size: 13.5px;
}
.cdd-group-price b {
    margin: 0 3px;
    color: #e5484d;
    font-size: 19px;
    font-weight: 600;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
}
.cdd-group-price.is-free b { color: #e5484d; font-size: 17px; }

.cdd-group-btn {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 96px;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5453a, #e02020);
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .18s;
}
.cdd-group-btn:hover { filter: brightness(1.07); color: #fff; }

.cdd-group-note {
    margin-top: 4px;
    color: var(--cdd-muted, #9a9a9a);
    font-size: 12.5px;
}

/* 小屏 */
@media (max-width: 560px) {
    .cdd-main-btn { width: 100%; min-width: 0; }
    .cdd-head { padding: 12px; }
    .cdd-body { padding: 0 12px 14px; }
    .cdd-btn { padding: 7px 12px; font-size: 12.5px; }
    .cdd-row-name { font-size: 13px; }
}

/* ---------- 子比桥接：网盘图标 / 提取码 ---------- */
.cdd-pan-svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
    fill: currentColor;
    flex: 0 0 auto;
}

.cdd-bridge { margin: 14px 0 0; }
.cdd-bridge .cdd-groups { margin-bottom: 0; }
.cdd-bridge .cdd-box { margin-bottom: 14px; }
.cdd-bridge .cdd-row-info { display: flex; align-items: center; }
.cdd-bridge .cdd-row-name { flex: 0 1 auto; min-width: 0; }

.cdd-row-pwd {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #f2f3f5;
    color: #8a8f99;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* v1.3 起付费组不再有「手动转存」那一行，.cdd-srcs / .cdd-src 样式已移除 */

/* ==================================================================
   子比桥接：两组都是主题原生虚线框，付费组框内为灰底、只有一行
   付费组 = .hidden-box.show.cdd-pay-box（虚线 + 左上角「直链下载」标签）
            └ 框内一行：下载价格 + 绿色「立即下载」
   免费组 = .hidden-box.show.cdd-free-box（虚线 + 左上角「免费下载」标签）
            └ 框内一行：子比原生下载按钮（无需插件配色）
   两框竖向内边距同用主题的 35px / 10px，内容都是一行 ≈44px → 视觉等高。
   两框底色统一（浅色 #eaf0f7 / 深色 #37383a）——
   浅色这个值是为了「衬在最外层那张淡蓝卡片上还能看出块」而选的同色系浅灰蓝。
   ================================================================== */

/* ---------- 最外层卡片（付费组 / 免费组 / 下方通知 都排在它上面） ---------- */
/* v1.7.1 起改用「Steam 玩家评价」那张卡片的配色（站长要求两处统一）。
   对齐源：steam-review-card/assets/steam_review.css 里的 .steam-review-card
     浅色 = 145° 淡蓝渐变 #fbfdff → #f5f8fc + 淡蓝描边 #dce6f1 + 14px 圆角
            + 收紧的蓝调投影 0 14px 30px -27px rgba(29, 56, 96, .5)
     深色 = 145° 深灰渐变 #292d33 → #262a30 + 描边 #3b4655 + 无投影
   ⚠️ 这套数值要和 steam 插件保持一致 —— 那边改了记得同步这边。 */
.cdd-wrap.cdd-bridge {
    margin: 14px 0 0;
    padding: 16px;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdff 0%, #f5f8fc 100%);
    box-shadow: 0 14px 30px -27px rgba(29, 56, 96, .5);
}

.dark-theme .cdd-wrap.cdd-bridge {
    background: linear-gradient(145deg, #292d33 0%, #262a30 100%);
    border-color: #3b4655;
    box-shadow: none;
}

/* 去掉独立模式那层白卡片外壳，只留内容 */
.cdd-bridge-box {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

/* ---------- 付费组 / 免费组：底色统一（主题灰阶变量，浅 / 深自动切换） ---------- */
/* 故意把 .hidden-box.show.cdd-pay-box 三个类一起写（特异性 0,3,0）：
   这样不用管主题 CSS 与插件 CSS 谁先加载，都能稳定压过主题 .hidden-box 的
   白底/实线边框/圆角，以及插件 .cdd-box 的那套外壳样式。 */
/* 竖向内边距与左右 10px 全部照抄主题 .hidden-box.show（35px 10px 10px）→
   付费框的「一行价格 + 按钮」与免费框的「一行按钮」左右对齐、上下等高。 */
/* 两组同底色。🔴 注意：外框 v1.7.1 起是淡蓝渐变（最浅 #fbfdff），
   原来那个中性灰 #f6f7f8 贴上去几乎同色 → 块会看不见，
   所以浅色兜底值换成同色系的浅灰蓝 #eaf0f7（深色仍是 #37383a，本就够开）。 */
.hidden-box.show.cdd-pay-box,
.hidden-box.show.cdd-free-box {
    background: var(--muted-bg-2-color, #eaf0f7);
}

/* 免费组不再自带上下外边距 —— 组间距统一由付费组的 margin-bottom 给。 */
.hidden-box.show.cdd-free-box {
    margin: 0;
}

.hidden-box.show.cdd-pay-box {
    margin: 0 0 16px;
    padding: 35px 10px 10px;
    overflow: visible;
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- 付费组：一行（下载价格 + 立即下载），不再有网盘图标那一行 ---------- */
.cdd-pay-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* 免费组那一行按钮实测约 44px 高；这里对齐它，两个框看起来就一样高 */
    min-height: 44px;
}

.cdd-pay-price {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}
/* 子比原生价格块（zibpay_get_show_price）在行内显示 */
.cdd-pay-price .price-box { display: inline-block; margin: 0; padding: 0; }
.cdd-price-inline { display: inline-flex; align-items: center; }
.cdd-price-inline svg,
.cdd-price-inline .icon { fill: currentColor; }

/* 子比原生价格数字是 .em3x（3em ≈ 39px），太大、抢「立即下载」的视觉 →
   在价格行里收小一档；单位（默认「推广币」）保持子比原本的小字。 */
.cdd-pay-price .em3x {
    font-size: 24px;
    line-height: 1.25;
}

.cdd-pay-btn {
    flex: 0 0 auto;
    padding: 10px 26px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

/* 直链面板展开后，单独给个卡片底，别糊在页面背景上 */
.cdd-box[data-cdd-toggle="1"] .cdd-stage { display: none; }

.cdd-bridge-box .cdd-stage:not(:empty) {
    margin-top: 12px;
    padding: 12px 16px 4px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
}
.cdd-bridge-box .cdd-tip { margin-top: 12px; }

/* ---------- 免费组：主题原生虚线框里的按钮排布 ---------- */
.cdd-free-box { clear: both; }
.cdd-free-box .but-download { margin: 0 10px 10px 0; }
.cdd-free-box .but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: .45em 1.1em;
    font-size: 14px;
    line-height: 1.4;
}
/* 子比给百度/夸克按钮的类就是 .but.baidu（本意 #1578f8 蓝），
   但站点把主题色设成了暖色，.b-theme 的 --this-bg 会把这个蓝色盖掉 →
   在免费组内恢复子比本意色，与原生「资源下载」按钮一致。其它地方不受影响。 */
.cdd-free-box .but.baidu { background: #1578f8; }
/* 提取码复制按钮：原生 .but 没带颜色类，补个浅底，别看起来像裸文本 */
.cdd-free-box .but[data-clipboard-text] {
    background: rgba(127, 127, 127, .18);
    color: inherit;
    min-width: 0;
    font-size: 13px;
    padding: .45em .9em;
}
.cdd-free-box .but svg,
.cdd-free-box .but .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    fill: currentColor;
    flex: 0 0 auto;
}
.cdd-free-box .but .fa { margin-right: 6px; }
.cdd-free-box .badg { margin: 0 0 6px; }

/* ---------- 附加按钮行（后台可配） ---------- */
.cdd-extra-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}
.cdd-extra-btns .but {
    padding: 5px 15px;
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- 下载区下方：通知（后台可配文字 + 按钮） ---------- */
/* v1.7.0 起不再自带边框 / 圆角 / 底色：它本来就落在最外层那块白色底框上面，
   再自己画一圈白框 = 白底套白框，只会什么都看不见（站长上次的疑问就是这个）。 */
.cdd-notice-box {
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cdd-text);
    font-size: 13px;
    line-height: 1.85;
    word-break: break-word;
}
.cdd-notice-box p { margin: 0 0 6px; }
.cdd-notice-box p:last-child { margin-bottom: 0; }
.cdd-notice-box .cdd-extra-btns { margin: 10px 0 0; }

/* ---------- 黄色提示条：显示时机（后台可配，纯 CSS） ---------- */
/* always：渲染在哪就显示在哪（旧行为） */
.cdd-wrap.cdd-tipmode-always .cdd-tip { display: block; }
/* never：任何位置都不显示 */
.cdd-wrap.cdd-tipmode-never .cdd-tip { display: none !important; }
/* open（默认）：付费组里「立即下载」未展开时隐藏，展开出文件列表后显示 */
.cdd-wrap.cdd-tipmode-open .cdd-pay-box .cdd-tip { display: none; }
.cdd-wrap.cdd-tipmode-open .cdd-pay-box .cdd-stage[data-cdd-open="1"] ~ .cdd-tip { display: block; }

/* ---------- 深色主题 ---------- */
.dark-theme .hidden-box.show.cdd-pay-box,
.dark-theme .hidden-box.show.cdd-free-box {
    background: var(--muted-bg-2-color, #37383a);
}
.dark-theme .cdd-pay-price { color: #999; }
/* 独立模式的 .cdd-box 是白底卡片 + #222 文字，深色下会变成「白卡片 / 黑字看不见」；
   桥接模式的 .cdd-bridge-box 已经去壳，用 :not() 排除，别把它盖回白底。
   这条只影响独立模式，桥接（当前线上用法）完全不受影响。 */
.dark-theme .cdd-box:not(.cdd-bridge-box) {
    background: #292a2d;
    border-color: #333;
    color: #ddd;
}
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-row { border-color: #333; }
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-row.is-dir { background: #333; }
.dark-theme .cdd-bridge-box .cdd-stage:not(:empty) {
    border-color: #333;
    background: #292a2d;
}
.dark-theme .cdd-bridge-box .cdd-row { border-color: #333; }
.dark-theme .cdd-bridge-box .cdd-row-name { color: #ddd; }
.dark-theme .cdd-bridge-box .cdd-row.is-dir { background: #333; }
.dark-theme .cdd-bridge-box .cdd-files-head { border-color: #333; }
.dark-theme .cdd-bridge-box .cdd-files-head h5 { color: #ddd; }
.dark-theme .cdd-bridge-box .cdd-notice { background: #333; color: #999; }
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-btn.is-copy,
.dark-theme .cdd-bridge-box .cdd-btn.is-copy {
    background: transparent;
    color: #9aa0a8;
    border-color: #3a3d42;
    box-shadow: none;
}
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-btn.is-copy:hover,
.dark-theme .cdd-bridge-box .cdd-btn.is-copy:hover {
    background: #333539;
    color: #c9ccd1;
    filter: none;
}
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-copy-hint,
.dark-theme .cdd-bridge-box .cdd-copy-hint { color: #8b9099; }
.dark-theme .cdd-box:not(.cdd-bridge-box) .cdd-copy-ta,
.dark-theme .cdd-bridge-box .cdd-copy-ta {
    background: #333539;
    border-color: #3a3d42;
    color: #c9ccd1;
}
.dark-theme .cdd-bridge-box .cdd-tip {
    background: #332b23;
    border-color: #4a3a2a;
    color: #d2a679;
}
.dark-theme .cdd-notice-box {
    background: transparent;
    border: 0;
    color: #c9ccd1;
}

/* ---------- 小屏 ---------- */
@media (max-width: 560px) {
    .cdd-wrap.cdd-bridge { padding: 12px; }
    .cdd-pay-item {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
    }
    .cdd-pay-price { flex: 1 1 100%; }
    .cdd-pay-btn { width: 100%; padding: 9px 0; }
    .cdd-free-box .but-download { margin: 0 0 8px; width: 100%; }
    .cdd-free-box .but { width: 100%; min-width: 0; }
}