/* ============================================================================
   桌面层（≥721px）—— 只补「桌面该怎么显示」，移动端一条不改。
   ----------------------------------------------------------------------------
   为什么单独一层：
     全站 34 处媒体查询里 33 处是 max-width:720px（移动覆盖），只有 1 处
     min-width:721px（st-material-v3 的分类卡）。也就是说桌面从来不是被
     「设计」出来的，而是 max-width 规则没命中时**兜底漏下来的那份样式**。
     所以这里把所有「桌面该另外长什么样」的规则集中成一层，加载顺序排在最后
     （index.html 里紧跟 st-bottom-navigation.css），与既有规则同特异度时胜出。

   维护约定：
     · 只写 min-width，⛔ 绝不在本文件里写 max-width —— 移动端的行为必须由
       st-density-v5 / st-layout-v4 那批既有文件独占，避免两处互相打架。
     · 选择器要深到能压住既有规则（例：`.catalog-mode .catalog-tabs` 的
       特异度是 0,2,0，只写 `.catalog-tabs` 压不住它）。
   ============================================================================ */

@media (min-width:721px) {
  /* ── ① 桌面主导航的「当前屏」高亮 ──────────────────────────────────────
     移动端靠底部导航的 .active 态告诉用户「你在哪一屏」；而底部导航只在
     ≤720px 显示，桌面上原本**没有任何位置指示**。这三个 .desktop-action
     由 st-commerce-v2.js 注入，renderMainNavigation() 同步 is-active。 */
  .toplinks > .desktop-action { position: relative; transition: color .2s ease; }
  .toplinks > .desktop-action:hover { color: var(--orange); }
  .toplinks > .desktop-action.is-active { color: var(--blue); font-weight: 650; }
  .toplinks > .desktop-action.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
    height: 2px; border-radius: 2px; background: var(--orange);
  }

  /* ── ② 商品网格：列数随宽度走 ─────────────────────────────────────────
     基础样式写死 repeat(4,minmax(0,1fr))：1280 下 4 列尚可，但 1440/1920
     仍是 4 列 → 单卡被拉到 440px，图片区白白放大、一屏能看的品项反而变少。
     721–1023 给 3 列（原来也是 4 列，卡片被挤到 180px）。
     ⚠️ 这里只覆盖列数，gap / 卡片内部（aspect-ratio、字号）一律不动。 */
  .goods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ── ③ 分类页签：移动端是横向滚动 rail，桌面换成换行铺开 ───────────────
     `.catalog-tabs` 在两处被定义过（st-commerce-v2 的 flex+overflow:auto、
     st-reference-v6 的 6 列 grid），catalog 模式下还有一条 0,2,0 的
     `.catalog-mode .catalog-tabs` —— 必须一起压住，否则会出现「桌面下有一排
     页签被截断、只能横向拖」的移动交互。 */
  .catalog-tabs,
  .catalog-mode .catalog-tabs {
    display: flex; flex-wrap: wrap; grid-template-columns: none;
    overflow: visible; margin-right: 0; padding-right: 0;
  }

  /* ── ④ 「我的 ST」浏览热销：6 张卡横排被容器裁掉最后一张 ───────────────
     .shelf-rail 是 flex + overflow-x:auto（横向货架，移动端正确）。桌面下
     容器只到 688px，6×114+5×10=734px → 第 6 张被裁。换成换行。 */
  .shelf-rail { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; }

  /* ── ⑤ 三个「看完就关」的视图恢复成居中弹窗 ────────────────────────────
     被修的规则（都在 st-density-v5.css / st-layout-v4.css 里，且**不在任何媒体
     查询内**，所以全宽度生效）：
       .commerce-dialog.commerce-page{width:100%;max-width:none;height:100dvh;
                                      max-height:none;margin:0;border-radius:0}
       .commerce-dialog.commerce-page::backdrop{background:var(--concept-paper)}
       .page-inquiry .dialog-head,.page-account .dialog-head{display:none}
       .page-inquiry .dialog-body,.page-account .dialog-body{width:min(720px,100%)}
     而同一个文件里的**基础样式本来就是桌面弹窗**：
       .commerce-dialog{width:min(900px,calc(100% - 32px));max-height:90dvh;border-radius:24px}
       .commerce-dialog::backdrop{background:#101c3d80;backdrop-filter:blur(6px)}
       .dialog-head{display:flex;justify-content:space-between}
     也就是说桌面从来不是「没设计」，是被 commerce-page 那份全局规则盖错了 ——
     全屏只应该属于 ≤720px。这里用 :not(.page-workbench) 把它退回弹窗形态，
     内部工作台（长表格 + 多页签 + 双向联动的预览栏）保持整页，见 ⑥。

     特异度核对：`.commerce-dialog.commerce-page` 是 0,2,0，
     本条 `.commerce-dialog.commerce-page:not(.page-workbench)` 是 0,3,0 → 胜。
     ⛔ 不要图省事写成 `.commerce-page{...}`，压不住。 */
  .commerce-dialog.commerce-page:not(.page-workbench) {
    width: min(1120px, calc(100% - 64px));
    max-width: none;
    /* ⛔ 这里必须是 fit-content，不能写 auto。
       弹窗是靠 UA 的 `position:fixed; top:0; bottom:0; margin:auto` 做垂直居中的，
       而「绝对/固定定位 + top 与 bottom 都非 auto + height:auto」的语义是
       **拉伸填满包含块** —— 于是短内容（商品详情 head 69 + body 512 = 581）
       也会被顶到 max-height 792，看着像一个空荡荡的大白框。
       UA 原本给 dialog 的就是 fit-content，是这里覆盖掉的，所以显式写回来；
       内容比 max-height 高时（如「我的 ST」1115）仍由 max-height + overflow:auto 截断。 */
    height: fit-content;
    max-height: min(88dvh, 1040px);
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 30px 90px #081f8033;
  }
  .commerce-dialog.commerce-page:not(.page-workbench)::backdrop {
    background: #101c3d80;
    backdrop-filter: blur(6px);
  }
  /* 头部：这两屏的头部被全局规则 display:none 掉了（移动端整页不需要它），
     但弹窗形态必须有头部来承载「返回」。做成三槽栅格 —— 返回(左) / 标题(正中对齐) /
     操作(右)，并去掉 `calc((100vw - 980px)/2)` 撑出来的那 150px 空档。

     ⚠️ 两个坑，都在这里踩过：
     ① `.dialog-head-actions` 必须显式拉回常规流。st-reference-v6.css:296 有一条
        `.page-inquiry .dialog-head-actions,.page-detail .dialog-head-actions{position:absolute;
        top:16px;right:16px}` —— 那是给**移动端**的（那两页移动端头部没有标题，操作区浮在
        右上角）。到了 1120 宽的桌面弹窗它一脱流，flex 里只剩「返回 + 标题」两个常规元素，
        标题被 space-between 推到最右、正被绝对定位的语言控件压住（实测重叠 ~85px）。
     ② 用 `1fr auto 1fr` 而不是 flex + space-between。flex 下标题盒虽占满中段，但两侧
        「40px 返回」与「78~125px 操作区」宽度不等 → 中段中心偏离头部中心 19~20px，
        标题看着就是不正。等宽外列才能让中列严格居中。
     ③ 标题用 `p`（不是唯一子元素）→ 只在本层覆盖对齐，不动移动端。
     注：`.commerce-page` 由 st-commerce-v2.js:374 按 `view.page` 精确开关，凡带这个类的
     弹层头部一律是「返回 + p + .dialog-head-actions」三子元素，所以栅格列数是确定的。 */
  .commerce-page:not(.page-workbench) .dialog-head {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 12px; min-height: 62px; padding: 14px 22px;
  }
  .commerce-page:not(.page-workbench) .dialog-head > .round-control { justify-self: start; }
  .commerce-page:not(.page-workbench) .dialog-head p {
    justify-self: center; min-width: 0; font-size: 17px; text-align: center;
  }
  .commerce-page:not(.page-workbench) .dialog-head-actions {
    position: static; width: auto; justify-self: end;
  }
  /* 内容：宽度交给弹窗自己（曾经详情 980 / 询价单与我的 ST 只有 720），
     并清掉「为移动端底部导航预留」的那段 padding-bottom。 */
  .commerce-page:not(.page-workbench) .dialog-body {
    width: 100%; max-width: none; margin: 0; padding: 24px 26px 28px;
  }

  /* ── ⑥ 内部工作台：保持整页，但改成桌面版式 ───────────────────────────
     工作台是长表格 + 4 个平级页签 + 候选预览栏的双向联动，塞进弹窗反而难用，
     所以只改版式：容器加宽（1180 → 1360）、头部标题左对齐、去掉三段式空档。 */
  .commerce-page.page-workbench .dialog-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 8px 28px;
  }
  .commerce-page.page-workbench .dialog-head p { text-align: left; font-size: 17px; }
  .commerce-page.page-workbench .dialog-body { width: min(1360px, 100%); padding: 24px 28px 80px; }
}

@media (min-width:1024px) {
  .goods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1440px) {
  .goods-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width:1800px) {
  .goods-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}