@charset "utf-8";
/* =====================================================================
   OMPRO 窄屏适配补丁（1024–1235 视口）
   背景：版面按 1226px 定宽设计，style.css 里又写了 body{min-width:1226px}
        （原意是让全宽背景条在手机桌面模式下铺满），导致 1024–1225 的
        笔记本窗口右侧被切、出现横向滚动条（1024 下超出 202px）。
   做法：容器改弹性（>=1226 时视觉完全不变，因为有 max-width 兜住），
        再针对会撑破布局的固定宽度逐个覆盖。全部集中在本文件，
        官方 CSS 一行未改，回滚只需删掉 file 里的引用。
   注意：本文件由 ViewFilterBehavior 注入到 </head> 前，
        位置在所有官方样式之后，同特异性下优先级最高。
   ===================================================================== */

/* ---------- 1. 容器弹性化（宽屏无影响） ---------- */
.width,
.eyou_gg,
.home-banner-box,
.eyou_foot .baozheng,
.eyou_foot .nav-art {
    width: 100% !important;
    max-width: 1226px !important;
}

/* style.css 里的 body{min-width:1226px} 在窄窗口会把版面顶出可视区 */
body {
    min-width: 0 !important;
}

/* ---------- 2. 首页轮播：取消 1200 最小宽度 ---------- */
.banner,
.banner .carousel-item a {
    min-width: 0 !important;
}

/* 全宽 banner 图不加这条会按原始 1226px 撑开 */
.home-banner-box img,
.banner .carousel-item img {
    max-width: 100%;
    height: auto;
}

/* ---------- 3. 1024–1235 区间的细部压缩 ----------
   （上界取 1235 而非 1225：.bs-grid 的 -7px 负边距让 1226 这个“设计宽度”
     反而溢出 7px，一并纳入处理） */
@media (min-width: 1024px) and (max-width: 1235px) {
    /* .bs-grid 沿用了 bootstrap 的 -7px 左右负外边距，容器收缩后会顶出 14px；
       区间内去掉，卡片左右各留 7px、视觉对称（宽屏保持原样不动） */
    .bs-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 商品详情：.w1200 是写死 1200 的图片列基准宽度（只为让 .col-xs-4 = 400px），
       在窄屏会顶出 200px 横向滚动条。改成跟随 .picfl，图片列占满 */
    .w1200 {
        width: 100% !important;
    }
    .w1200 > .col-xs-4 {
        width: 100% !important;
        float: none !important;
    }

    /* 顶部工具条与头部：1226 定宽的 row 收缩后，靠内边距和字号微调避免挤压 */
    .eyoucms_top,
    .eyoucms_head {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 主导航项原本靠固定宽度排列，窄屏统一压缩左右间距 */
    .eyoucms_head .nav > ul > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    /* 页脚信息条 */
    .eyou_foot .baozheng,
    .eyou_foot .nav-art {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---------- 会员中心 / 购物车 / 结算 ---------- */
    /* .w1226 与购物车头部原本写死 1226/1200，窄屏会整块顶出可视区 */
    .w1226 {
        width: 100% !important;
        max-width: 1226px !important;
    }
    .ey-cart-header-con {
        width: 100% !important;
        max-width: 1200px !important;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 购物车表格列宽：原本按 150+170+380+150+150+120+80=1200 写死，
       容器变窄后固定列宽会把 table 撑回 1200（table-layout:fixed 下
       width:100% 只是期望值，列宽合计更大时以列宽为准），故改百分比。
       前缀必须与模板内联规则完全一致（5 层类名），否则特异性不足压不住。
       ⚠ 列在 .item-row 里、不在 .item-table 里；表头 .list-head 的 26px 右内边距
         必须保留，否则表头 1024 与商品行 998 两套基准，整列右移 26px。 */
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-check,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-check {
        width: 12.5% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-img,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-img {
        width: 14.1667% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-name,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-name {
        width: 31.6667% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-price,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-price {
        width: 12.5% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-num,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-num {
        width: 12.5% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-total,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-total {
        width: 10% !important;
    }
    .cart-container .container-main .cart-wrap .cart-goods-list .list-head .col-action,
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-action {
        width: 6.6667% !important;
    }
    /* 结算页商品行：good-img70 + good-name620 + good-price150 + good-status100 + good-total190，
       合计 1130 > 1024 容器，最后的小计列被挤出可视区。让商品名弹性收缩即可 */
    .goods-list .good-item .good-name {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        word-break: normal;
        overflow-wrap: break-word;
    }
    /* 小计列固定 190px 在窄屏会让整行右移，改为按内容自适应 */
    .goods-list .good-item .good-total {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 110px;
        padding-left: 10px;
    }

    /* 缩略图列是全站唯一 content-box 的列（`.mi-cart *{box-sizing:unset}` 取消了 border-box），
       30px 右内边距会额外撑宽列，导致比表头宽 28px；统一成 border-box 后与表头一致 */
    .cart-container .container-main .cart-wrap .cart-goods-list .item-row .col-img {
        box-sizing: border-box !important;
        padding-right: 12px !important;
    }
    /* 缩略图原本写死 140px，列变窄后会撑破格子 */
    .cart-container .container-main .cart-wrap .cart-goods-list .item-box .col-img img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* ---------- 4. 商品详情：多规格组的标签右对齐（所有宽度） ----------
   pro.css 的 .web_main .webspec li em 只写了 min-width:54px（按 4 个汉字设计）。
   规格名改英文后 Packaging / Compatible With 实测 74px / 108px，
   em 被内容撑宽 → 两行选项起点错开 34px。
   ★用 :has(li + li) 只命中「两组及以上规格」的产品：
     全站 433 个只有 Color 单组规格的产品保持原样，不会被无谓右移；
     浏览器不支持 :has() 时规则不生效，只是回到原状，不会破版。
   官方 CSS 一行未改，回滚删掉这一段即可。 */
.web_main .webspec:has(li + li) li em {
    width: 132px !important;
    min-width: 132px !important;
    flex: 0 0 132px !important;
    text-align: right !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}


/* ---------- 5. 商品详情：规格值缩略图（#135，PC + 移动） ----------
   图片来自后台「添加图片」，TagSppurchase.php 已把 spec_image 放进模板变量。
   只在「整组规格值都传了图」时显示，避免同一行图文参差；
   <=4 个值用图片卡片（图在上、名称在下），>4 个值用内嵌小图，防止撑高首屏。
   命名统一用 ompro-sppic- 前缀，避开商品参数卡片原有的 ompro-spec-* 系列 class。
   不支持 :has() 的浏览器自动回到纯文字，不会破版。 */
.ompro-sppic-img { display: none; }

.web_main .webspec .ompro-sppic-row:not(:has(dt[data-sppic=""])) .ompro-sppic-img,
.goods-skushow .ompro-sppic-row:not(:has(dt[data-sppic=""])) .ompro-sppic-img {
    display: block;
}

/* 内嵌小图：默认（规格值 >4 个） */
.web_main .webspec .ompro-sppic-row:not(:has(dt[data-sppic=""])) dt,
.goods-skushow .ompro-sppic-row:not(:has(dt[data-sppic=""])) dt {
    display: inline-flex;
    align-items: center;
}
.ompro-sppic-row .ompro-sppic-img {
    width: 24px;
    height: 24px;
    margin: 0 6px 0 0;
    flex: 0 0 24px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: middle;
}

/* 图片卡片：规格值 <=4 个（不存在第 5 个 dt） */
.web_main .webspec .ompro-sppic-row:not(:has(dt[data-sppic=""])):not(:has(dt:nth-child(5))) dt,
.goods-skushow .ompro-sppic-row:not(:has(dt[data-sppic=""])):not(:has(dt:nth-child(5))) dt {
    flex-direction: column;
    justify-content: flex-start;
    width: 116px;
    min-width: 116px;
    padding: 6px;
    line-height: 1.35;
    text-align: center;
}
.web_main .webspec .ompro-sppic-row:not(:has(dt[data-sppic=""])):not(:has(dt:nth-child(5))) dt .ompro-sppic-img,
.goods-skushow .ompro-sppic-row:not(:has(dt[data-sppic=""])):not(:has(dt:nth-child(5))) dt .ompro-sppic-img {
    width: 72px;
    height: 72px;
    margin: 0 0 4px;
    flex: 0 0 72px;
    border-radius: 6px;
    border: 1px solid #e8e8ec;
    box-sizing: border-box;
}

/* 移动端：官方 .goods-skushow 写死 max-height:240px + 内部滚动（原本给 sku 弹层用），
   图片卡片撑高后会把最后一行型号按钮截掉一半。该容器在产品页只有一处、不是弹层，
   只在确实渲染出规格图时放开限制；同时固定标签列宽，避免 flex 压缩 em 导致两行起点错开。 */
.goods-skushow:has(.ompro-sppic-img) {
    max-height: none;
    overflow-y: visible;
}
.goods-skushow:has(.ompro-sppic-img) li em {
    flex: 0 0 70px;
    width: 70px;
    box-sizing: border-box;
    text-align: left !important;
    text-align-last: left !important;
    text-justify: auto !important;
}

/* ---------- 6. Spec price-diff badges + long-group fold (#136) ----------
   Badges are injected by ompro-spec-enhance.js from the page SpecData.
   Card mode gets a corner badge; text mode keeps it inline. */
.ompro-spval { display: inline; }
.ompro-spdiff {
    display: inline-block; margin-left: 5px; padding: 0 5px;
    font-size: 11px; line-height: 16px; font-weight: 400;
    color: #9a5b08; background: #fff3e0;
    border: 1px solid #f0d9ae; border-radius: 3px;
    white-space: nowrap; vertical-align: middle;
}
.ompro-spdiff[data-ompro-diff="Base"] {
    color: #6b7280; background: #f4f5f7; border-color: #e3e5e9;
}
.ompro-spdiff .ompro-fx-usd { display: none !important; }
.ompro-spcard { position: relative; }
.ompro-spcard .ompro-spdiff {
    position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2;
}
.ompro-spfold-hidden { display: none !important; }
.ompro-spfold-btn {
    display: inline-block; margin: 4px 0 0 2px; padding: 3px 10px;
    font-size: 12px; line-height: 1.5;
    color: #9a5b08; background: #fffaf0;
    border: 1px solid #e6d3ae; border-radius: 4px;
    text-decoration: none; cursor: pointer; vertical-align: middle;
}
.ompro-spfold-btn:hover { background: #fff3e0; }

/* ===== product page trust bar (#144 2026-11-06) PC only ===== */
.ompro-trust { display: flex; align-items: flex-start; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #ececec; }
.ompro-trust-item { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; padding: 0 10px; text-decoration: none; }
.ompro-trust-item:first-child { padding-left: 0; }
.ompro-trust-item + .ompro-trust-item { border-left: 1px solid #f0f0f0; }
.ompro-trust-ico { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 7px 0 0; color: #3a3a3a; }
.ompro-trust-ico svg { width: 20px; height: 20px; display: block; }
.ompro-trust-tx { min-width: 0; }
.ompro-trust-t { display: block; font-size: 12px; font-weight: 600; color: #222; line-height: 1.35; white-space: nowrap; }
.ompro-trust-s { display: block; font-size: 11px; color: #9a9a9a; line-height: 1.35; margin-top: 2px; }
.ompro-trust-item--wa { cursor: pointer; border-radius: 3px; transition: background .18s; }
.ompro-trust-item--wa .ompro-trust-ico { color: #25a35a; transition: transform .18s; }
.ompro-trust-item--wa .ompro-trust-s { color: #8f8f8f; }
.ompro-trust-item--wa:hover { background: #f2fbf5; }
.ompro-trust-item--wa:hover .ompro-trust-t { color: #1f8f4e; }
.ompro-trust-item--wa:hover .ompro-trust-ico { transform: scale(1.06); }
.ompro-trust-item--wa:hover .ompro-trust-s { color: #5c9c76; }