/* ============================================================
   【新文件】全站宽屏填充（assets/css/widescreen.css）
   挂载方式：只在 site_header.php 里加一行 <link>。前台 18 个页面的 HTML、DOM、
   函数、接口一个都没动 —— 大屏上那几列「1200 / 1240 居中窄栏」按屏幕宽度分档抬高，
   屏幕用得起来；小屏（<1400）一条都不生效，看到的东西和你现在线上一字不差。

   三条硬规矩（要改这个文件先读这三条）：
   1) 只抬不压。每条上限一律写成 max(这张页原来的值, var(--ws))，屏幕不够宽时
      var(--ws) 是 0px，算出来就是原值 —— 不可能出现「装了宽屏反而变窄」的页面。
   2) 刻意排窄的一律不碰：购物车 / 结算列表 900、我的订单 1000、评价页 800、
      文章正文与法务页 860、登录注册卡片 380·520、弹窗 440·480·540、页脚 800、
      404 的 540。那些是阅读宽度和弹层尺寸，不是「还没做宽屏」。
   3) 靠写法取胜，不靠 !important。site_header.php 那行 <link> 在页面自己的 <style>
      之后加载，同优先级就已经赢；需要赢过页面在页头之后再输出的样式时才写
      html:has(...) 或 html .xxx 抬高一级。全站只有页头那两处用 var() 变量，
      没有一处 !important。

   兼容性：max() 需要 Chrome 79+/Safari 11.1+（站内 clamp()/min()/max() 早就在用了）；
   :has() 需要 Chrome 105+/Safari 15.4+/Firefox 121+。真遇上不认 :has() 的老浏览器，
   被丢掉的是单独一条规则，那一页维持今天的宽度，不会白屏也不会串版。
   ============================================================ */

/* ---- 分档上限：屏幕越宽，版心越宽。不到 1400 一律 0px（＝不生效） ---- */
html:root{--ws:0px}
@media(min-width:1400px){html:root{--ws:1360px}}
@media(min-width:1600px){html:root{--ws:1520px}}
/* 1900 起才允许超过两套宽屏模板自己的版心（杂志风 1600 / 视频风 1400），见最后一条 */
@media(min-width:1900px){html:root{--ws:1800px}}
@media(min-width:2400px){html:root{--ws:2200px}}

/* ---- 1. 统一页头（导航行 + 搜索行，原本写死 var(--hdr-wrap,1280px)） ----
   站内只有 site_header.php:25 和 :98 两处读这个变量，全篇没人定义它，所以在这里定义一次，
   18 个前台页的页头一起跟着屏幕走。1280 是原值，屏幕不够宽就还是 1280。 */
html:root{--hdr-wrap:max(1280px,var(--ws))}

/* ---- 2. 原首页 / 分类页 / 搜索页的正文（index.php:103 .container 1240） ----
   为什么要挂 :has(.ct-shop)：.container 这个类名站内好几张页都在用，而且各自是故意排窄的
   （checkout 1200、cart 900、myorder 1000、review 800）。只有带货架那一块（.ct-shop 一定在）
   的 index.php 是要填宽的，所以用「这一页里有货架」当条件，别家的 .container 一条都吃不到。
   优先级 (0,2,1) 也足够赢过 index.php 自己那段 <style>。 */
html:has(.ct-shop) .container{max-width:max(1240px,var(--ws))}

/* ---- 3. 全球会员分布地图（index.php:169/:187 两处 1240） ----
   故意写成和 index.php 里一模一样的裸类名（优先级 0,1,0）：本文件在页头那行加载，
   比 index.php 的内联 <style> 晚 → 原首页这一版赢；而 magazine.css:177 / video.css:141
   是在模板里更晚加载的同优先级规则 → 那两套首页的地图继续跟着自己的 --wrap 走。
   谁都不许把地图拽离自己的模板版心。 */
.global-map-header,.global-map-container{max-width:max(1240px,var(--ws))}

/* ---- 4. 后台「首页版式」拖出来的自定义模块行（templates/blocks.css:11 .hb-row 1240） ----
   写 html .hb-row 是为了赢过 blocks.css（它在渲染到自定义块时才加载，比本文件晚）；
   又因为只有 (0,1,1)，输给 blocks.css:14 的 .tpl-mag .hb-row / .tpl-video .hb-row，
   所以杂志风、视频风里的行还是跟模板版心走，只有原首页的行被抬宽。 */
html .hb-row{max-width:max(1240px,var(--ws))}

/* ---- 5. 会员中心（member.php:118 .main 1400） ----
   .main 这个类名太通用，所以同样挂条件：:has(.profile-banner) 只有会员中心这一页有。 */
html:has(.profile-banner) .main{max-width:max(1400px,var(--ws))}

/* ---- 6. 单商品结算页（checkout.php:298 .container 1200） ----
   左图右表单的两栏（.product 1fr 1fr），1200 时图片只有 560 左右，大屏白浪费。
   条件用 :has(.main-img) —— 站内只有这一页有商品大图区。 */
html:has(.main-img) .container{max-width:max(1200px,var(--ws))}

/* ---- 7. 两套宽屏模板自己的版心：只在 1900 起才抬 ----
   magazine.css:2 是 1600，video.css:2 是 1400，都已经在宽屏设计里排好了，
   连它们 ≤1500 / ≤1200 的响应式收档也别抢：所以这条规则只写在 min-width:1900 里面，
   低于 1900 一个字都不覆盖。到了 1900/2400，两套用同一个 max() 抬到 1800/2200，
   内部的网格全是 1fr 与 auto-fill minmax()，宽了只会多一列，不会挤。
   html:root (0,1,1) 也能压过 magazine.css:132 那条 @media(max-width:1500px){:root{--wrap:1240px}}
   —— 但那条只在 ≤1500 生效，与本条的 ≥1900 不重叠，互不打架。 */
@media(min-width:1900px){html:root{--wrap:max(1600px,var(--ws))}}