/* =============================================================
   產品頁樣式 — 中文版 /products.html 與英文版 /en/products.html 共用
   ⚠ 只有這一份，改這裡兩個語言版本同時生效
   ============================================================= */
  /* ============================================================
     Products overview — 大類 → 小類目錄（早安式兩層結構第 1 層）
     ============================================================ */

  .catalog-head {
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: clamp(36px, 5vw, 60px) 0 clamp(30px, 4vw, 44px);
  }
  .breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--steel); margin-bottom: 22px;
    display: flex; gap: 10px;
  }
  .breadcrumb a:hover { color: var(--green); }
  .breadcrumb .sep { opacity: .5; }

  .catalog-title-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
  }
  @media (max-width: 720px) { .catalog-title-row { grid-template-columns: 1fr; } }
  .catalog-title {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 1; letter-spacing: -.02em;
    margin: 6px 0 0;
  }
  .catalog-title em { font-style: normal; color: var(--green); font-weight: 400; }
  .catalog-meta {
    display: flex; gap: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: .1em; color: var(--steel);
    text-transform: uppercase;
  }
  .catalog-meta strong { color: var(--ink); font-weight: 600; }
  .catalog-lead {
    max-width: 720px;
    margin: 22px 0 0;
    font-size: 15.5px; line-height: 1.7;
    color: var(--ink-2);
  }
  .catalog-lead strong { color: var(--ink); }

  /* Quick category anchor tabs */
  .cat-anchors {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 30px;
  }
  .cat-anchors a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px; letter-spacing: .1em;
    border: 1px solid var(--hair);
    padding: 9px 14px;
    color: var(--ink-2);
    transition: all .25s var(--easing);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .cat-anchors a .n { color: var(--green); font-weight: 700; }
  .cat-anchors a:hover { border-color: var(--green); color: var(--green); }

  /* ============================================================
     Category sections（每大類一段，內含小類卡片格）
     ============================================================ */
  .cat-section {
    padding: clamp(44px, 5.5vw, 72px) 0;
    border-bottom: 1px solid var(--hair);
    scroll-margin-top: 120px;
  }
  .cat-section:nth-child(even) { background: var(--paper-2); }

  .cat-sec-head {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    padding-bottom: 20px; margin-bottom: 26px;
    border-bottom: 2px solid var(--ink);
  }
  .cat-sec-head .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700; letter-spacing: .12em;
    color: var(--green);
  }
  .cat-sec-head h2 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
    margin: 0;
  }
  .cat-sec-head .zh { font-size: 14px; color: var(--steel); }
  .cat-sec-head .cnt {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: .1em;
    color: var(--green);
  }

  /* 小類卡片格（客戶回饋：產品圖太小）
     每張卡片＝上方方形圖框（產品圖是 600×600 方形去背圖，contain 後橫向撐滿整個圖框）
     ＋下方名稱／規格／項數。產品圖大小＝卡片寬度，由「每列欄數 --cols」決定。

     客戶於 2026-10 選定「標準」尺寸：桌機 6 欄，產品圖約 185px（1440 寬時；
     舊版清單列約 86px）。想再調大小就改 --cols：數字越小，卡片與產品圖越大。 */
  .sub-grid {
    --cols: 6;
    --card-bg: #fff;   /* 純白卡底（站內變數沒有純白） */
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: clamp(14px, 1.7vw, 24px);
  }
  @media (max-width: 1279px) { .sub-grid { --cols: 4; } }
  @media (max-width: 860px)  { .sub-grid { --cols: 3; } }
  @media (max-width: 560px)  { .sub-grid { --cols: 2; gap: 12px; } }

  .sub-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    background: var(--card-bg);
    border: 1px solid var(--hair);
    border-radius: var(--rad);
    overflow: hidden;
    position: relative;
    transition: border-color .25s var(--easing), box-shadow .25s var(--easing), transform .25s var(--easing);
  }
  .sub-card:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-color: var(--green);
  }
  .sub-card .thumb {
    grid-column: 1 / -1;
    display: grid; place-items: center;
    aspect-ratio: 1 / 1;
    padding: clamp(8px, 3%, 12px);
    overflow: hidden;
    border-bottom: 1px solid var(--hair);
  }
  .sub-card .thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .45s var(--easing);
  }
  .sub-card .info {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 16px 18px 4px;
  }
  .sub-card .name {
    display: block;
    font-size: 17px; font-weight: 600;
    color: var(--ink); line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .sub-card .spec {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--steel);
    letter-spacing: .04em; margin-top: 5px;
    overflow-wrap: anywhere;
  }
  .sub-card .cnt {
    grid-column: 1; justify-self: start; align-self: center;
    margin: 12px 18px 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    background: var(--paper-2);
    color: var(--steel);
    padding: 3px 9px; border-radius: 999px;
  }
  .sub-card .cnt.has { background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
  .sub-card .arrow {
    grid-column: 2; align-self: center;
    margin: 12px 18px 18px 0;
    font-size: 15px; color: var(--steel);
    transition: color .25s var(--easing), transform .25s var(--easing);
  }
  /* hover 動效只給有滑鼠的裝置（觸控裝置點一下不會留下浮起的卡片） */
  @media (hover: hover) {
    .sub-card:hover {
      border-color: var(--green);
      box-shadow: 0 10px 26px -14px rgba(14, 20, 16, .35);
      box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--ink) 35%, transparent);
      transform: translateY(-2px);
    }
    .sub-card:hover .thumb img { transform: scale(1.05); }
    .sub-card:hover .name { color: var(--green-deep); }
    .sub-card:hover .arrow { color: var(--green); transform: translateX(3px); }
  }
  @media (max-width: 480px) {
    .sub-card .info { padding: 12px 12px 2px; }
    .sub-card .name { font-size: 14.5px; }
    .sub-card .cnt { margin: 10px 12px 12px; }
    .sub-card .arrow { margin: 10px 12px 12px 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sub-card, .sub-card .thumb img, .sub-card .arrow { transition: none; }
    .sub-card:hover { transform: none; }
    .sub-card:hover .thumb img { transform: none; }
    .sub-card:hover .arrow { transform: none; }
  }