/* ============================================================
   §2 商品列表页皮肤（/shop/ · 商品分类页）
   ============================================================
   本段由生成器提取，产出 assets/css/shop.css，只在归档页挂载：
       is_shop() || is_product_category() || is_product_tag()
   ⚠ 线上 DOM 由 WooCommerce 生成 —— 本段只允许使用它的原生类名：
        ul.products / li.product / a.woocommerce-LoopProduct-link /
        .woocommerce-loop-product__title / .price / .button /
        .woocommerce-result-count / .woocommerce-ordering /
        .woocommerce-pagination
      本页新增的容器只有两个：.shop-hero（页头）与 .catbar（分类筛选条）。
   ⚠ 统一用 body.archive 作前缀 —— 它同时命中 /shop/
      （body.post-type-archive-product）与分类页（body.tax-product_cat），
      并且**不会**命中商品详情页（body.single-product），防止误伤钱路页面。
   ⚠ ≤640px 的归档卡（一行 2 个正方形）由 wc.css 管（老板定稿），本段不重复定义。
   ============================================================ */

/* ---------- 1) 页头标题区 ---------- */
body.archive .shop-hero{padding:34px 0 30px;background:var(--paper-2);border-bottom:1px solid var(--line)}
body.archive .shop-hero .eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--coral)}
body.archive .shop-hero h1{margin:10px 0 0;font-family:'Archivo Black','Inter',sans-serif;font-size:clamp(30px,4.4vw,48px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
body.archive .shop-hero p{margin:12px 0 0;max-width:640px;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- 2) 分类筛选条 ---------- */
body.archive .catbar{background:var(--paper);border-bottom:1px solid var(--line)}
body.archive .catbar .wrap{display:flex;align-items:center;gap:8px;padding-top:14px;padding-bottom:14px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.archive .catbar .wrap::-webkit-scrollbar{display:none}
body.archive .cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 17px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800;letter-spacing:.03em;text-decoration:none;white-space:nowrap;transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
body.archive .cat:hover{border-color:var(--ink)}
body.archive .cat .n{font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
body.archive .cat.on{background:var(--ink);border-color:var(--ink);color:#fff}
body.archive .cat.on .n{color:rgba(255,255,255,.62)}

/* ---------- 3) 工具栏：结果计数 ↔ 排序（一行两端对齐） ---------- */
body.archive .shop-loop{padding-bottom:70px}
body.archive .wrap.entry{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
body.archive .wrap.entry > .woocommerce-products-header,
body.archive .wrap.entry > .woocommerce-notices-wrapper,
body.archive .wrap.entry > ul.products,
body.archive .wrap.entry > .woocommerce-pagination{flex:1 0 100%;min-width:0}
body.archive .woocommerce-result-count{flex:1 1 auto;min-width:0;margin:20px 0 0;font-size:13px;color:var(--muted)}
body.archive .woocommerce-ordering{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin:20px 0 0}
body.archive .woocommerce-ordering::before{content:"Sort by";font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------- 4) 商品网格：桌面 4 列 / 平板 3 列卡片 ---------- */
@media (min-width:641px){
  body.archive ul.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:20px 0 0;padding:0;list-style:none}
}
@media (min-width:641px) and (max-width:1024px){
  body.archive ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:641px){
  /* ⚠ 一旦 ul.products 变成 grid，WC 给它的 ::before/::after（content:" ";display:table）
     就各自成了一个 grid 子项 —— 后果是首行左边空一格、底部多出一整行空行。
     桌面端原为 float 布局，clearfix 是必需的；改 grid 后**必须杀掉**。 */
  body.archive ul.products::before,
  body.archive ul.products::after{content:none;display:none}
  body.archive ul.products li.product{display:flex;flex-direction:column;float:none;width:auto;min-width:0;margin:0;padding:0 0 16px;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  body.archive ul.products li.product a.woocommerce-LoopProduct-link{display:block;width:100%;min-width:0;margin:0;text-decoration:none}
  body.archive ul.products li.product a.woocommerce-LoopProduct-link img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0;border-radius:0 !important}
  body.archive ul.products li.product .woocommerce-loop-product__title{margin:16px 16px 0;padding:0;font-size:15px;line-height:1.3;font-weight:800;color:var(--ink);min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  body.archive ul.products li.product .price{margin:8px 16px 0;font-size:15px;font-weight:800;overflow-wrap:anywhere}
  /* 按钮：贴底 + 全宽 + 胶囊。
     margin-top:auto 让同一行卡片的按钮落在同一水平线（配合卡片 flex column）。
     视觉属性（底色/圆角/字号）在此重复一份 wc.css 的通用按钮规则，是刻意的：
     设计稿 shop.html 不含 wc.css，不写这一份，设计稿预览里的按钮就是一串裸文字，
     老板看到的不是最终形态。线上两处都命中、视觉一致，不会打架。 */
  body.archive ul.products li.product .button{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin:auto 16px 0;height:46px;min-height:46px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1.25;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease)}
  body.archive ul.products li.product .button:hover{background:var(--coral);color:#fff}
}

/* ---------- 5) 分页（商品超过一页时出现） ---------- */
body.archive .woocommerce-pagination{margin:34px 0 0;text-align:center}
body.archive .woocommerce-pagination ul.page-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;border:0;list-style:none}
body.archive .woocommerce-pagination ul.page-numbers li{margin:0;border:0}

/* ---------- 6) 窄屏：一行 2 个正方形（老板定稿形态） ----------
   ⚠ 这一段与 wc.css 的手机端归档卡规则**内容重复**，是刻意为之：
     设计稿 shop.html 不含 wc.css，若本段不写，设计稿在手机上会退化成
     单列堆叠 —— 本地预览与线上不一致，验收就会看错。
     两份同时命中时，shop.css 在 wc.css 之后加载，以本段为准；
     wc.css 那份继续为「商品页相关商品 / 购物车交叉销售」兜底，不冲突。
   ⚠ !important 是必需的：要盖过 wc.css 里同名的 !important 规则。 */
@media (max-width:640px){
  body.archive .shop-hero{padding:24px 0 22px}
  body.archive .shop-hero p{font-size:13.5px}
  body.archive .shop-loop{padding-bottom:48px}
  body.archive .woocommerce-ordering::before{display:none}
  body.archive .woocommerce-result-count,
  body.archive .woocommerce-ordering{margin-top:16px}

  body.archive ul.products{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin:16px 0 0 !important;padding:0 !important;list-style:none}
  /* 杀 WC clearfix 伪元素 —— 变 grid 后它们会各占一个格子 */
  body.archive ul.products::before,
  body.archive ul.products::after{content:none !important;display:none !important}
  body.archive ul.products li.product{display:flex !important;flex-direction:column !important;float:none !important;width:auto !important;min-width:0 !important;margin:0 !important;padding:0 0 10px !important;position:relative !important;background:#fff !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;overflow:hidden !important}
  body.archive ul.products li.product a.woocommerce-LoopProduct-link{display:block !important;width:100% !important;min-width:0 !important;margin:0 !important}
  body.archive ul.products li.product a.woocommerce-LoopProduct-link img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:1/1 !important;object-fit:cover !important;margin:0 !important;border-radius:0 !important}
  body.archive ul.products li.product .woocommerce-loop-product__title{display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;min-height:2.6em !important;margin:9px 10px 0 !important;padding:0 !important;font-size:13px !important;line-height:1.3 !important;overflow-wrap:anywhere}
  body.archive ul.products li.product .price{margin:5px 10px 0 !important;font-size:13.5px !important;overflow-wrap:anywhere}
  /* ⚠ 44px 是移动端最小可点区（硬性规则 8），不得再压 */
  body.archive ul.products li.product .button{display:flex !important;flex:0 0 auto !important;align-items:center !important;justify-content:center !important;margin:auto 10px 0 !important;height:44px !important;min-height:44px !important;padding:0 12px !important;border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:inherit;font-size:11px !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;text-decoration:none}
}