/* 首屏关键样式：同步加载，保证刷新瞬间就是最终样式，不闪旧主题 */
/* 公告条：背景与文字色由后台「商品专属公告」配置驱动（CSS 变量，JS 写入）
   --czd-notice-bg / --czd-notice-fg 未设置时回退到原红色渐变 + 白字 */
body .dx2-goods-detail .czd-notice{background:var(--czd-notice-bg,linear-gradient(90deg,#e1251b,#ff4142))!important;border:0!important;border-radius:4px!important;height:40px!important;padding:0 12px!important;display:flex!important;align-items:center!important;gap:10px!important;overflow:hidden;box-shadow:0 2px 8px rgba(225,37,27,.22)!important}
body .dx2-goods-detail .czd-notice .czd-notice-ic{font-size:0!important;flex:0 0 auto;width:36px;height:20px;border-radius:3px;background:rgba(255,255,255,.22)!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}
body .dx2-goods-detail .czd-notice .czd-notice-ic::after{content:"公告";font-size:11px;color:var(--czd-notice-fg,#fff);line-height:1;font-weight:600;letter-spacing:.5px}
body .dx2-goods-detail .czd-notice .czd-notice-body{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;color:var(--czd-notice-fg,#fff)!important;font-size:13px!important;white-space:nowrap}
body .dx2-goods-detail .dx2-body-breadcrumb{background:#fff!important;background-image:none!important;height:38px!important;border:0!important;border-bottom:1px solid #f0f0f0!important;border-radius:0!important;display:flex!important;align-items:center!important;padding:0 6px!important;margin-bottom:10px!important}
body .dx2-goods-detail .dx2-body-breadcrumb .ivu-breadcrumb-item-link a,body .dx2-goods-detail .dx2-body-breadcrumb .ivu-breadcrumb-item-link span{color:#666!important;font-size:12px!important}
body .dx2-goods-detail .dx2-body-breadcrumb .ivu-breadcrumb-item-link a:hover{color:#e1251b!important}
body .dx2-goods-detail .dx2-body-breadcrumb .ivu-breadcrumb-item-separator{font-size:0!important;margin:0 6px!important}
body .dx2-goods-detail .dx2-body-breadcrumb .ivu-breadcrumb-item-separator::after{content:">";font-size:12px;color:#ccc}
body .dx2-goods-detail .dx2-body-breadcrumb .ivu-icon{font-size:13px!important;margin-right:2px;color:#999}
body .dx2-goods-detail .spec-group{display:flex!important;align-items:flex-start!important;margin-bottom:14px!important}
body .dx2-goods-detail .spec-group-title{flex:0 0 60px!important;width:60px!important;color:#999!important;font-size:12px!important;line-height:36px!important;font-weight:normal!important;margin:0!important}
body .dx2-goods-detail .spec-values{display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:flex-start!important}
body .dx2-goods-detail .spec-value-item{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:36px!important;padding:0 14px!important;background:#f7f7f7!important;border:1px solid transparent!important;border-radius:2px!important;font-size:12px!important;color:#333!important;cursor:pointer}
body .dx2-goods-detail .spec-value-item.selected{background:#fff!important;border-color:#e1251b!important;color:#e1251b!important}
body .dx2-goods-detail .dx2-card-right-body .dx2-goods-detail .dx2-card-item{display:flex!important;align-items:flex-start!important}
body .dx2-goods-detail .dx2-card-right-body .dx2-goods-detail .dx2-card-item>span:first-child{flex:0 0 60px!important;width:60px!important;color:#999!important;font-size:12px!important}

/* 首屏防闪：仅对橙意满满 dx2 详情页生效
   判定依据是 body 上的 czd-jd / czd-vdetail —— 这两个类由 custom-dx2.js 添加，
   而 czd-ready（放行信号）也只有 custom-dx2.js 会加。

   为什么必须收窄：
     nginx 注入的 cz-boot-js 会给所有 /payment/purchase、/payment/buy 页面
     的 <html> 打上 czd-boot-detail，不区分模板。
     而水天一色等其他模板根本不加载 custom-dx2.js，
     永远不会有 czd-ready 来放行 → body 永久 opacity:0 → 整页空白。

   为什么原来的 2.5s 兜底动画没用：
     CSS 级联中 !important 声明优先级高于 @keyframes
     （normal author < animations < important author），
     所以 animation:czdBootReveal 永远压不过 opacity:0!important，
     兜底形同虚设。必须从选择器源头收窄，而不是指望动画兜底。 */
/* ===== 首屏防闪 v2（关键修复）=====
   旧写法依赖 body.czd-jd / body.czd-vdetail / body.dx2-body，
   但前两个是 custom-dx2.js 跑完才加的，第三个本页根本不存在。
   页面刚返回 HTML 时三个类都没有 → opacity:0 不生效 → 官方样式直接可见，
   然后 JS 跑完再套定制样式，就出现「官方样式 → 中间态 → 定制样式」的三段跳。

   新写法用 :has() 直接判定页面结构：
   .dx2-goods-detail / .dx2-card-right-buy 都在服务端渲染的 HTML 里，
   CSS 一解析就命中，不需要等 JS。 */
html.czd-boot-detail:not(.czd-ready) body:has(.dx2-goods-detail),
html.czd-boot-detail:not(.czd-ready) body:has(.dx2-card-right-buy),
html.czd-boot-detail:not(.czd-ready) body:has(.dx2-card-pay-body),
html.czd-boot-detail:not(.czd-ready) body.czd-jd,
html.czd-boot-detail:not(.czd-ready) body.czd-vdetail,
html.czd-boot-detail:not(.czd-ready) body.dx2-body,
html:not(.czd-ready) body.dx2-body{opacity:0!important}

/* 老浏览器（不支持 :has()）兜底：
   3 秒后无论如何放行，避免 JS 异常导致永久空白。
   注意 !important 优先级高于 animation，所以这里不能用 animation 兜底，
   改由 custom-dx2.js 里的 markReady 超时逻辑保证（见 4560 行附近）。 */

/* 兜底结束后移除动画，避免残留 will-change 影响滚动性能 */
html.czd-ready body{opacity:1!important;animation:none!important}

/* 详情页「联系人/手机号/地址」三个表单项强制隐藏
 * 模板 purchase.html 已给这三个 div 加上 czd-hide-ship 类，
 * 这里用 !important 兜底，防止主题样式或运行时 JS 重置 display。 */
.czd-hide-ship { display: none !important; }

/* 收货信息三个表单项：最高优先级强制隐藏
 * 原因：custom-dx2.css 里有 html body:is(.czd-jd,.czd-vdetail) .dx2-goods-detail
 *      .dx2-card-buy .ivu-form-item 这类高优先级规则（0,0,3,1），
 *      把 display 算成了 flex，压过了 .czd-ship-hide 的 display:none!important（0,0,1,0）。
 * 这里用 ID 选择器 #commform 把优先级顶到 1,0,0,2，确保收起时一定不显示。
 * 展开时 JS 会移除 czd-ship-hide / czd-hide-ship，此规则自然失效。 */
html body #commform .ivu-form-item.czd-ship-hide,
html body #commform .ivu-form-item.czd-hide-ship {
    display: none !important;
}

/* 收货信息就地展开时的「智能识别」框 */
.czd-ship-smart-inline {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f7f9fc;
    border: 1px dashed #c9d4e4;
    border-radius: 6px;
}
.czd-ship-smart-inline .czd-ship-smart-hd {
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 6px;
}
.czd-ship-smart-inline .czd-ship-smart-ta {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    background: #fff;
    color: #1f2329;
}
.czd-ship-smart-inline .czd-ship-smart-ta:focus {
    outline: none;
    border-color: #2f6bff;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, .12);
}
.czd-ship-smart-inline .czd-ship-smart-tip {
    margin-top: 6px;
    font-size: 12px;
    color: #8a9199;
}
.czd-ship-smart-inline .czd-ship-smart-tip.on { color: #18a058; }

/* 收货信息就地展开时的「所在地区」三级联动 */
.czd-ship-region {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f7f9fc;
    border: 1px dashed #c9d4e4;
    border-radius: 6px;
}
.czd-ship-region .czd-ship-region-hd {
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 6px;
}
.czd-ship-region .czd-ship-region-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.czd-ship-region .czd-ship-sel {
    flex: 1 1 0;
    min-width: 96px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    background: #fff;
    color: #1f2329;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.czd-ship-region .czd-ship-sel:focus {
    outline: none;
    border-color: #2f6bff;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, .12);
}
.czd-ship-region .czd-ship-region-tip {
    margin-top: 6px;
    font-size: 12px;
    color: #8a9199;
}

/* ===== 所在地区：一行式，点击弹底部抽屉（拼多多式） ===== */
.czd-ship-region {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f7f9fc;
    border: 1px dashed #c9d4e4;
    border-radius: 6px;
}
.czd-ship-region .czd-ship-region-hd {
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 6px;
}
.czd-ship-region .czd-ship-region-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s;
}
.czd-ship-region .czd-ship-region-pick:hover { border-color: #2f6bff; }
.czd-ship-region .czd-ship-region-val { font-size: 13px; color: #b8bcc4; }
.czd-ship-region .czd-ship-region-val.on { color: #1f2329; }
.czd-ship-region .czd-ship-region-arrow {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 1.5px solid #b8bcc4;
    border-bottom: 1.5px solid #b8bcc4;
    transform: rotate(-45deg);
}

/* ===== 底部抽屉选择器 ===== */
.czd-pick-mask {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .45);
    display: none;
}
.czd-pick-mask.on { display: block; }
.czd-pick-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: czdPickUp .22s ease;
}
@keyframes czdPickUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.czd-pick-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #1f2329;
    flex: 0 0 auto;
}
.czd-pick-hd b { font-weight: 600; }
.czd-pick-cancel,
.czd-pick-ok {
    font-size: 14px;
    cursor: pointer;
    padding: 6px 4px;
    -webkit-tap-highlight-color: transparent;
}
.czd-pick-cancel { color: #8a9199; }
.czd-pick-ok { color: #e93b3d; font-weight: 600; }
.czd-pick-ok.off { color: #c8ccd2; pointer-events: none; }
.czd-pick-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 6px;
    overflow-x: auto;
    flex: 0 0 auto;
}
.czd-pick-tab {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 13px;
    color: #4e5969;
    background: #f4f5f7;
    border-radius: 14px;
    cursor: pointer;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.czd-pick-tab.on { background: #fdecec; color: #e93b3d; font-weight: 600; }
.czd-pick-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
}
.czd-pick-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #1f2329;
    cursor: pointer;
}
.czd-pick-item:hover { background: #f7f8fa; }
.czd-pick-item.on { color: #e93b3d; font-weight: 600; }
.czd-pick-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: #a8adb5;
}

/* ===== 所在地区：套官方 ivu-form-item，清掉自定义虚线框 ===== */
.ivu-form-item.czd-ship-region {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.czd-ship-region .czd-ship-region-pick {
    position: relative;
    cursor: pointer;
}
.czd-ship-region .czd-ship-region-val {
    cursor: pointer;
    padding-right: 28px !important;
}
.czd-ship-region .czd-ship-region-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid #b8bcc4;
    border-bottom: 1.5px solid #b8bcc4;
    transform: rotate(-45deg);
    pointer-events: none;
}
/* 旧的地区提示行已不用，隐藏残留 */
.czd-ship-region .czd-ship-region-hd,
.czd-ship-region .czd-ship-region-tip { display: none !important; }

/* ===== 确认收货地址卡片（淘宝/拼多多式） ===== */
.czd-addr-card {
    margin-bottom: 14px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.czd-addr-card .czd-addr-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.czd-addr-card .czd-addr-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2329;
}
.czd-addr-card .czd-addr-new {
    font-size: 13px;
    color: #e93b3d;
    cursor: pointer;
    padding: 2px 4px;
    -webkit-tap-highlight-color: transparent;
}
.czd-addr-card .czd-addr-new.on { color: #8a9199; }
.czd-addr-card .czd-addr-list {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.czd-addr-card .czd-addr-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 13px;
    color: #a8adb5;
}
.czd-addr-card .czd-addr-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background .15s;
}
.czd-addr-card .czd-addr-item:last-child { border-bottom: none; }
.czd-addr-card .czd-addr-item:hover { background: #fafafa; }
.czd-addr-card .czd-addr-item.on {
    background: #fff5f5;
    box-shadow: inset 3px 0 0 #e93b3d;
}
.czd-addr-card .czd-addr-bd { flex: 1 1 auto; min-width: 0; }
.czd-addr-card .czd-addr-region {
    font-size: 13px;
    color: #4e5969;
    line-height: 1.5;
    margin-bottom: 2px;
}
.czd-addr-card .czd-addr-detail {
    font-size: 14px;
    color: #1f2329;
    line-height: 1.5;
    word-break: break-all;
    margin-bottom: 4px;
}
.czd-addr-card .czd-addr-user {
    font-size: 13px;
    color: #4e5969;
}
.czd-addr-card .czd-addr-name { margin-right: 12px; }
.czd-addr-card .czd-addr-phone { color: #8a9199; }
.czd-addr-card .czd-addr-edit {
    flex: 0 0 auto;
    font-size: 13px;
    color: #2f6bff;
    cursor: pointer;
    padding: 2px 4px;
    -webkit-tap-highlight-color: transparent;
}

/* 卡片标题栏右侧操作组 */
.czd-addr-card .czd-addr-ops {
    display: flex;
    align-items: center;
    gap: 14px;
}
.czd-addr-card .czd-addr-manage {
    font-size: 13px;
    color: #2f6bff;
    cursor: pointer;
    padding: 2px 4px;
    -webkit-tap-highlight-color: transparent;
}
.czd-addr-card .czd-addr-manage:hover { text-decoration: underline; }

/* ===== 地址管理弹窗 ===== */
.czd-mgr-mask {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
}
.czd-mgr-mask.on { display: flex; }
.czd-mgr-panel {
    width: min(900px, 92vw);
    height: min(640px, 86vh);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .18);
    animation: czdMgrIn .2s ease;
}
@keyframes czdMgrIn {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.czd-mgr-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
    flex: 0 0 auto;
    font-size: 15px;
    color: #1f2329;
}
.czd-mgr-hd b { font-weight: 600; }
.czd-mgr-x {
    font-size: 16px;
    color: #8a9199;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
}
.czd-mgr-x:hover { color: #1f2329; }
.czd-mgr-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
}

/* 重构后：所在地区下方的提示行要能显示（之前被隐藏了） */
.czd-ship-region .czd-ship-region-tip {
    display: block !important;
    margin-top: 4px;
    font-size: 12px;
    color: #8a9199;
    line-height: 1.5;
}

/* ===== 所在地区：行内三个下拉（替代底部抽屉） ===== */
.ivu-form-item.czd-ship-region {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.czd-region-row {
    display: flex;
    gap: 8px;
    width: 100%;
}
.czd-region-sel {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 24px 0 10px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b8bcc4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    color: #1f2329;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    box-sizing: border-box;
}
.czd-region-sel:hover { border-color: #2f6bff; }
.czd-region-sel:focus {
    border-color: #2f6bff;
    box-shadow: 0 0 0 2px rgba(47, 107, 255, .12);
}
  .czd-region-sel option { color: #1f2329; }

/* ================= 商品列表页首屏关键布局 =================
 *
 * 【要解决的问题】刷新或刚进入商品列表页（含搜索结果 / 商城 / 分类页）时，
 * 卡片会先显示成模板默认的「横向」样式，约 0.5 秒后才跳成方块的纵向卡片。
 *
 * 【实测数据】
 *   first-contentful-paint = 708ms
 *   firstpaint.css   到达   = 462ms   ← 早于首屏绘制
 *   custom-dx2.css   到达   = 1282ms  ← 晚于首屏绘制 574ms
 *   dx2-vt-card.css  到达   = 1318ms
 *
 * 卡片样式是 loader.js 用 JS 动态注入的，浏览器先用模板自带的样式画了一遍，
 * 于是出现「先横向、再变方块」的跳动。
 *
 * 【做法】把列表页最关键的那几条布局写进本文件（同步加载，首屏之前就到位），
 * 让卡片一出现就是最终样子。等 custom-dx2.css / dx2-vt-card.css 到位后，
 * 它们的规则权重更高，会自然接管细节，这里的规则退化成兜底。
 *
 * 【为什么安全】#contentDiv 只有商品列表页才有；
 * 水天一色主题（custom.js / custom.css）完全不使用 #contentDiv，实测 0 处引用。
 *
 * 【为什么必须 !important】模板的 styles.css 在本文件之后加载，
 * 不加 !important 会被它盖掉。
 */

/* 列表容器：直接就是 5 列网格，而不是一行一个的块级排列 */
#contentDiv {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    align-items: stretch !important;
}

/* 卡片外壳：白底、浅描边、圆角 */
#contentDiv .dx2-card-body {
    margin: 0 !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* 卡片内容：纵向排列（模板默认是横向：图在左、信息在右） */
#contentDiv .dx2-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* 图片：占满整行、正方形 */
#contentDiv .dx2-card-icon {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
}

#contentDiv .dx2-card-icon > a {
    display: block !important;
    width: 100% !important;
}

#contentDiv .dx2-card-icon-img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
}

#contentDiv .dx2-card-icon-img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* 标题 / 价格：满宽左对齐（模板给它们留了 align-self:center，会缩成一小块居中） */
#contentDiv .dx2-card-title,
#contentDiv .dx2-card-price {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#contentDiv .dx2-card-price {
    text-align: left !important;
    color: #e1251b !important;
    font-weight: 700 !important;
}

#contentDiv .dx2-card-buy {
    width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
   水天一色 商品详情页头部（.public-shop）  【2026-10-31 二次调整】
   注意：几何数值（宽度/内距/图片尺寸）在 nginx 注入的
   <style id="cz-boot-css"> 里也有一份（见 install.php 的 $bootStyle），
   两处必须保持一致，改一处就要同步另一处。
   放在 firstpaint.css 里是有原因的：本文件由 nginx 在 <body> 开头同步引入，
   属于「渲染前就位」的样式表，所以刷新/进入页面时不会先看到主题的旧样式
   再跳成新样式。
   本次调整：图 440→320、整体字重降一档（标题 600 / 价格 700 / 按钮 600）、
   卡片宽度改成 100%（与「用户评价」等模块左右完全对齐）。
   ============================================================ */
@media (min-width: 992px) {

    /* 详情页头部本来被 cz-boot-css 藏起来等 3 秒，现在样式已经同步就位，直接显示 */
    body.cz-boot-purchase .public-shop { opacity: 1 !important; }

    /* ------------------------------------------------------------
       居中问题：bootstrap 的 .container{max-width:1320px} 只写在
       @media (min-width:1400px) 里，视口 <1400 时 .container 是
       width:100%（铺满 + 贴左）。于是首屏会先看到「靠左」，等别的东西
       一应用才变成居中。
       这里把详情页的容器宽度/居中提前钉死，第一帧就是居中。
       ------------------------------------------------------------ */
    /* 注意：这里不能用 :has(.public-shop) —— :has() 随 DOM 动态生效，
       容器解析时 .public-shop 还没出现 → 容器先铺满贴左，等解析到
       .public-shop 才跳成居中，肉眼就是「先左后中」。
       改用 boot 脚本打在 <html> 上的永久类（不会被移除）。 */
    html.czd-shop-page .container {
        width: 100%;
        max-width: 1320px;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    .public-shop {
        width: 100%;
        max-width: 1298px;          /* 容器 1320 − 左右各 11 内边距 */
        margin: 20px auto 0;        /* 左右 auto：任何时候都居中 */
        box-sizing: border-box;
        padding: 22px 26px;
        display: flex;
        align-items: flex-start;
        gap: 30px;
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
        box-sizing: border-box;
    }

    /* ---------- 左图：440 → 320 ---------- */
    .public-shop .picture {
        flex: 0 0 320px;
        width: 320px;
        max-width: 320px;
        position: relative;
    }

    .public-shop .picture > img {
        display: block;
        width: 100%;
        height: 320px;
        object-fit: contain;
        background: #fafbfc;
        border-radius: 10px;
    }

    .public-shop .census {
        margin-top: 10px;
        font-size: 12px;
        color: #98a2b3;
        text-align: center;
    }

    /* ---------- 右侧信息 ---------- */
    .public-shop .info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .public-shop .info .title em {
        display: block;
        font-size: 21px;
        font-weight: 600;      /* 700 → 600，不要那么冲 */
        line-height: 1.5;
        color: #1f2329;
        font-style: normal;
    }

    /* ---------- 标签：小药丸，字重 500 ---------- */
    .public-shop .info .label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }

    .public-shop .info .label span:not(.cz-chip-off) {
        display: inline-flex !important;
        align-items: center;
        height: 24px;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 500;
        line-height: 1 !important;
        white-space: nowrap;
    }

    /* 空值标签（代充:个 / 耗时:暂无耗时）必须继续隐藏 */
    .public-shop .info .label span.cz-chip-off { display: none !important; }

    /* 限购：主题的 span 规则会把文字刷成白色，这里强制回深色 */
    .public-shop .info .label span.cz-chip-fix {
        background: #fff4e8 !important;
        color: #c2410c !important;
        box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .15);
    }

    /* ---------- 价格：不再用大渐变块，改成浅灰小卡 ---------- */
    .public-shop .info .money {
        margin-top: 14px;
        padding: 12px 16px;
        border-radius: 10px;
        background: #fafbfc;
        border: 1px solid #f0f1f3;
    }

    .public-shop .info .money .price {
        font-size: 13.5px;
        color: #667085;
        line-height: 1.2;
    }

    .public-shop .info .money .price em {
        font-size: 26px;
        font-weight: 700;      /* 800 → 700 */
        color: #f5331f;
        letter-spacing: -.3px;
        vertical-align: -2px;
    }

    .public-shop .info .money .price em span {
        font-size: 16px;
        font-weight: 600;
        margin-right: 1px;
    }

    .public-shop .info .money .costprice {
        margin-top: 4px;
        font-size: 12.5px;
        color: #98a2b3;
        text-decoration: line-through;
    }

    /* ---------- 发货方式 / 购买须知 ---------- */
    .public-shop .info .distribution {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 12px;
    }

    .public-shop .info .distribution .mode {
        height: 26px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 26px;
    }

    .public-shop .info .distribution .tips {
        font-size: 12.5px;
        color: #667085;
    }

    /* ---------- 服务保障 ---------- */
    .public-shop .info .service {
        display: flex;
        align-items: center;
        gap: 26px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #f2f3f5;
    }

    .public-shop .info .service .item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: #475467;
    }

    .public-shop .info .service .item svg {
        width: 18px !important;
        height: 18px !important;
        color: #ff7a45;
    }

    /* ---------- 立即购买 ---------- */
    .public-shop .info .buybut {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 280px;
        height: 46px;
        margin-top: 16px;
        border-radius: 10px;
        background: linear-gradient(135deg, #ff7a45, #ff3b30);
        box-shadow: 0 6px 16px rgba(255, 59, 48, .2);
        color: #fff;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: .3px;
        transition: transform .18s, box-shadow .18s;
    }

    .public-shop .info .buybut:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(255, 59, 48, .26);
    }
}