/* ============================================================================
 * wide.css —— 电脑大屏（≥1024px）的版心与排版。
 *
 * 由 layout.php 用 media="(min-width: 1024px)" 引入：手机不下载、不生效，
 * 所以这里只管「屏幕宽了以后怎么用好空间」，不碰手机版的任何规则。
 * 放在 app.css 和各页样式之后加载，同优先级的规则这里说了算。
 *
 * 四档（量过的，不是拍脑袋）：
 *   1024–1279  不动版心（app.css 的 1320 本来就比屏幕宽，等于满屏），只修缅文
 *   A 1280–1439  版心 = 屏宽 − 64，内容 1216–1375
 *   B 1440–1759  同上，到 1744 屏宽时内容到顶 1680
 *   C 1760–2239  内容 1680
 *   D ≥2240      内容 1840（2560 屏两边各留 360，再宽就是一行字太长了）
 *
 * 商品卡片宽度一直守在 200–260px 之间：屏幕变宽就多放一列，而不是把卡片放大。
 *   首页/附近的满宽网格  A5 B6 C7 D8
 *   分类/搜索（带筛选栏） A4 B5 C6 D6   （每页 24 件：4、6 都能整除）
 *   店铺页（带右侧栏）    A4 B5 C6 D6
 *
 * 注意 app.css 里还有 max-width:1240 / 1080 的规则在 1024–1240 生效，
 * 所以这里所有改版心、改列数的规则都放在 ≥1280 的 @media 里，跟它们不重叠。
 * ========================================================================== */

/* ── 0. 缅文：页头之外最后一处被切的上下标（全部电脑宽度） ───────────────── */
/* 首页左侧分类栏：名字的 overflow:hidden 是为了挡住断不开的长词横向溢出，
   但它也把缅文叠在上下的元音符号削掉 2–4px（实测 25>22、47>43）。
   上下各让 3px 出来、再用负外边距收回，行距不变，符号不再被切。 */
.lang-my .cat-rail__name { padding-block: 3px; margin-block: -3px; }

@media (min-width: 1280px) {
  /* ── 1. 版心 ──────────────────────────────────────────────────────────── */
  :root {
    --gutter: 32px;
    --container: 1744px; /* 含左右各 32px 内边距 → 内容最宽 1680 */
    --wide-gap: 16px;    /* 卡片之间的统一间距 */
  }

  /* ── 2. 页头：搜索框跟着变宽，两侧的小控件不再被压成省略号 ─────────── */
  .masthead__inner { gap: 24px; }
  .search { height: 48px; }
  /* 缅文页头：分类下拉、选城市、「登录 / 注册」三样都比中文宽一倍，1280 屏上搜索框只剩 70px（实测）。
     1600 以下缅文版收起搜索框里的分类下拉——分类在下面的分类条和「全部分类」里都有（app.css 在 ≤1240 也是这么做的）。 */
  .lang-my .search__cat { display: none; }
  .lang-my .location-btn { max-width: 220px; }
  /* 分类条：电脑上原来只放前 8 个。宽了就多放到 12 个，
     放不下的照旧由 app.js 的 hideClipped() 整个藏起来（它跳过 display:none 的项）。 */
  .catnav__rail .catnav__list li:nth-child(-n+12) { display: block; }

  /* ── 3. 首页 ──────────────────────────────────────────────────────────── */
  .home { padding-top: 20px; }
  .hero-row { grid-template-columns: 240px minmax(0, 1fr) 272px; gap: 20px; }
  .hero, .hero__slide { min-height: 440px; }
  .hero__slide { padding: 60px 48px 56px 52px; gap: 24px; }
  .hero__dots { left: 52px; }
  .hero__lede { max-width: 34em; }

  .value-strip { margin: 20px 0 8px; }
  .value-strip li { padding: 18px 24px; }

  .section { margin-top: 44px; }
  .section__head { margin-bottom: 18px; }

  /* 分类格子：16 个分类 + 「全部分类」= 17 格，8 列时最后一格孤零零占一行。
     改成 9 列，「全部分类」占两格：9 + 9 正好两整行。
     只在格子数恰好是 17 时才这样排（:has 守着），分类数变了就退回 app.css 的 8 列。 */
  .cat-tiles { gap: 14px; }
  .cat-tiles:has(> li:nth-child(17):last-child) { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .cat-tiles:has(> li:nth-child(17):last-child) > li:last-child { grid-column: span 2; }
  .cat-tiles:has(> li:nth-child(17):last-child) .cat-tile--all { grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; column-gap: 14px; }

  /* 分类专区：和上面的网格对齐成同一套列。专区自己变成 N 列网格（N = 这一档首页网格的列数），
     介绍栏占前几列，5 张卡用 subgrid 落在剩下的列上；左右各伸出 16px 的底色，
     里面的内容就和上下两栏的卡片严丝合缝。A 档 5 列时只放得下 4 张，第 5 张藏起来（app.css 在 ≤1240 也是这么做的）。 */
  .spotlight { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wide-gap); padding: 16px; margin-inline: -16px; }
  .spotlight > .product-grid.product-grid--row { grid-column: span 4; grid-template-columns: subgrid; }

  .seller-cta { margin-top: 48px; padding: 36px 44px; gap: 40px; }

  /* ── 4. 商品网格（A 档） ──────────────────────────────────────────────── */
  /* 修饰类都写成 .product-grid.xxx（两个类）：后面几档只改 .product-grid 的列数，不会误伤它们 */
  .product-grid { gap: var(--wide-gap); grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-grid.product-grid--row6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .listing__layout { grid-template-columns: 264px minmax(0, 1fr); gap: 24px; }
  .product-grid.product-grid--listing,
  .shop-layout .product-grid--listing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }

  /* ── 5. 商品详情 ──────────────────────────────────────────────────────── */
  /* 下面「商品详情 | 评价」两栏的分界线对齐上面图库的右边：详情和图库一样宽，评价从信息栏的左边开始。
     列宽公式和 .pdp 一一对应，改一边要改另一边。 */
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 288px; gap: 28px; }
  .pdp-below { grid-template-columns: calc((100% - 288px - 56px) / 2) minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  /* 描述是长文：详情栏本身已和图库同宽（≤720），再兜一道 46em，中文一行 ≤46 字、英文 ≤95 字 */
  .pdp-below .prose { max-width: 46em; }
  .crumbs [aria-current="page"] { max-width: 560px; }

  /* ── 6. 其它页 ────────────────────────────────────────────────────────── */
  .filters { top: 20px; }
  .feature-grid { gap: 20px; }
  .how { gap: 24px; }
  /* 开店页：数字商品那块紧贴在横幅底边上，补一点呼吸 */
  .sell-digital { margin-top: 24px; }
  .sell-digital p { max-width: 52em; }
  .nearby-steps { gap: var(--wide-gap); }
  .me { max-width: 840px; margin-top: 20px; }
  .auth-page { padding-top: 40px; padding-bottom: 48px; }
}

/* ── B 档 1440–1759 ───────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-grid.product-grid--listing,
  .shop-layout .product-grid--listing { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .spotlight { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .spotlight > .product-grid.product-grid--row { grid-column: span 5; }
  .hero__title { font-size: 38px; }
  .lang-my .hero__title { font-size: 28px; }
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }
  .pdp-below { grid-template-columns: calc((100% - 300px - 56px) / 2) minmax(0, 1fr); }
}

@media (min-width: 1600px) {
  .lang-my .search__cat { display: block; }
}

/* ── C 档 1760–2239 ───────────────────────────────────────────────────────── */
@media (min-width: 1760px) {
  .search__cat { max-width: 180px; }
  .hero-row { grid-template-columns: 256px minmax(0, 1fr) 288px; }
  .hero, .hero__slide { min-height: 460px; }
  .hero__slide { padding: 64px 56px 60px 60px; }
  .hero__dots { left: 60px; }
  .hero__title { font-size: 42px; }
  .lang-my .hero__title { font-size: 30px; }
  .hero__lede { font-size: 17px; }
  .lang-my .hero__lede { font-size: 16px; }
  .spotlight { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .spotlight__intro { grid-column: span 2; padding: 16px 16px 12px 14px; gap: 12px; }
  /* 介绍栏占两列以后有 460px 宽：图标和标题跟着放大，不让这一块只剩一角有字 */
  .spotlight__emoji { width: 68px; height: 68px; border-radius: 20px; font-size: 38px; }
  .spotlight__intro .section__title { font-size: 26px; }
  .lang-my .spotlight__intro .section__title { font-size: 22px; }
  .spotlight__subs { gap: 8px; }
  .spotlight__subs a { padding: 5px 12px; font-size: 13.5px; }

  .product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .product-grid.product-grid--listing,
  .shop-layout .product-grid--listing { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .listing__layout { grid-template-columns: 280px minmax(0, 1fr); }
  .shop-layout { grid-template-columns: minmax(0, 1fr) 320px; }

  /* 图库最宽 680：再宽主图就比一屏还高，买家要往下滚才看得到价格 */
  .pdp { grid-template-columns: minmax(0, 680px) minmax(0, 1fr) 312px; gap: 32px; }
  .pdp-below { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); gap: 32px; }
}

/* ── D 档 ≥2240 ───────────────────────────────────────────────────────────── */
@media (min-width: 2240px) {
  :root { --container: 1904px; } /* 内容 1840 */
  .product-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .spotlight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .spotlight__intro { grid-column: span 3; }
  .hero-row { grid-template-columns: 272px minmax(0, 1fr) 300px; }
  .pdp { grid-template-columns: minmax(0, 720px) minmax(0, 1fr) 320px; }
  .pdp-below { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); }
}

/* ── 推荐栏去掉孤卡 ───────────────────────────────────────────────────────────
 * 首页「最新上架」「大家都在买」、商品页「相似」只是推荐（有「查看更多」，或不必看完），
 * 件数固定（20 / 10 / ≤10），列数一变最后一行就剩一两张孤卡。
 * 规则：第一行之后，凑不满一整行的那一行整行藏起来；第一行永远显示。
 * 写法：「第 2 行起某一行的行首」且「从它数到最后不足一行」→ 它和它后面的卡都藏。
 * 每档用 min+max 的区间写死，不写「上一档藏、这一档再放出来」——那样两条规则的
 * 优先级不一样（带 ~ 的多一个类），放出来的会盖掉该藏的，实测第 8 张孤卡就是这么漏的。
 * 分类、搜索、店铺、附近是搜索结果，一张都不藏。 */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(5n+6):nth-last-child(-n+4),
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(5n+6):nth-last-child(-n+4) ~ .pcard { display: none; }
  .spotlight > .product-grid--row > .pcard:nth-child(n+5) { display: none; } /* 专区 A 档只有 4 列 */
}
@media (min-width: 1440px) and (max-width: 1759.98px) {
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(6n+7):nth-last-child(-n+5),
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(6n+7):nth-last-child(-n+5) ~ .pcard { display: none; }
}
@media (min-width: 1760px) and (max-width: 2239.98px) {
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(7n+8):nth-last-child(-n+6),
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(7n+8):nth-last-child(-n+6) ~ .pcard { display: none; }
}
@media (min-width: 2240px) {
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(8n+9):nth-last-child(-n+7),
  :is(.page-home .section > .product-grid:not(.product-grid--row), .page-product .section > .product-grid:not(.product-grid--row6))
    > .pcard:nth-child(8n+9):nth-last-child(-n+7) ~ .pcard { display: none; }
}