/* ==========================================================================
   products-list.css — Issue-010 商品・ブランドHub page-specific 層
   wp_diversity theme / enqueue: is_page('products-list') のときのみ配信
   読み込み順: style.css → rebuild.css → products-list.css
   --------------------------------------------------------------------------
   命名根拠
   - 既存の page-specific CSS は `top.css`（front page）／`company.css`
     （/company-overview/）。「1 Page = 1 page-specific CSS / ページ名で命名」
     という規約に従う。本ページは slug `products-list` であり、後続で実装する
     商品詳細5ページ（curble-chair 等）と混同しない名称として
     `products-list.css` を採用する（`products.css` は詳細ページ群と紛らわしい）。
   --------------------------------------------------------------------------
   方針
   - Global Component（rebuild.css）で解決できるものは再定義しない。
     再利用: .l-inner / .sec-eyebrow / .sec-title / .cta / .cta--primary /
             .link-inline / .ext-mark / :focus-visible / .screen-reader-text /
             Design Token 一式（Brand Accent Token を含む）
   - `.page-products` にスコープを閉じる。`.page-id-xxx` を作らない。
   - Gutenberg の layout hash 依存セレクタ（wp-container-core-*）を作らない。
   - `!important` は使わない。inline style も使わない。JS も追加しない。
   - breakpoint は既存に合わせる（1100 / 900 / 768 / 700 / 500）。
     本ファイルで使うのは **768（1→2列）** と **900（2→3列）** のみ。
   --------------------------------------------------------------------------
   Cascade 注意（Issue-008 / 009 で実際に発生した事象）
     style.css の `a:any-link { color:#444 }` は詳細度 (0,1,1)。
     本文リンクは `a.〜:link / :visited / :hover / :focus / :active` を
     明示して (0,2,1) 以上にしないと #444 に戻される。
     本ページのリンクは **すべて rebuild.css の .link-inline / .cta--primary**
     を使うため、そちら側で解決済み。ここでは色を再定義しない。
   --------------------------------------------------------------------------
   wpautop 注意（Issue-009 Production incident）
     `.product-grid` / `.product-card__media` / `.products-purchase__actions`
     は Grid / Flex コンテナ。**直接の子の位置に HTML コメントを置かない**こと。
     wpautop が空の <p> を生成し、Grid item 数が狂う。
     本ページの Content Artifact は `.page-products` 配下にコメントを
     1件も持たない構成にしている。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-local Token
   -------------------------------------------------------------------------- */
.page-products {
  /* 商品画像の下地。
     TOP の `--c-bg-figure: #f0eee9` ではなく **白** を使う。
     理由（実測）: 本ページの Approved Asset 6点のうち
       - 透過PNG 4点（ccw / ccg / cshp / fizx）
       - **白背景の不透過JPEG 2点**（curble-two-way-footrest… / mw-…）
     が混在する。下地を #f0eee9 にすると白背景JPEGだけが白い矩形として
     可視化され（Issue-008 STEP3 で Chair 画像に発生した事象と同一）、
     同一Grid内でカードの見た目が揃わない。
     下地を白にすると、透過PNGは白地に載り、白背景JPEGは継ぎ目が出ない。
     ページ地色 #fbfaf7 との差でカードの面が保たれる。 */
  --c-figure-ground: #ffffff;

  /* 商品名（H3）専用サイズ。
     rebuild.css の --fs-h4 (clamp(15px,1.2vw,17px)) は TOP の Product Card 用で
     本ページの Discovery Card には小さい。--fs-h3-brand (最大28px) は
     Brand H2 (--fs-h2 最大32px) に近すぎるため、その中間を置く。 */
  --fs-product-name: clamp(17px, 1.45vw, 21px);
}

/* --------------------------------------------------------------------------
   Section Rhythm（Page-specific）
   company.css の `.page-company .section` と同一の役割。Global へ昇格させない。
   理由: `class="section"` は未改修の商品5ページで多数使用されており、
         `.section` を素の Global セレクタにすると Regression になる。
   -------------------------------------------------------------------------- */
.page-products .section { padding: var(--sp-sec) var(--sp-gutter); }
.page-products .section--ground { background: var(--c-bg-sub); }
.page-products .section-rule {
  max-width: var(--w-page); margin-inline: auto;
  height: 1px; background: var(--c-line);
}

/* Brand / Purchase / B2B いずれも「見出し → 説明文 → 本体」の順。
   rebuild.css の .sec-title は margin-bottom: var(--sp-lg) だが、
   本ページは直後に説明文が入るため詰める。 */
.page-products .sec-title { margin-bottom: clamp(12px, 1.2vw, 18px); }

/* ==========================================================================
   S01 — Page Hero
   大型 Hero 画像を使わない。Typography と余白で「商品・ブランドの入口」を示す。
   ========================================================================== */
.products-hero {
  padding: clamp(40px, 5.2vw, 80px) var(--sp-gutter) clamp(36px, 4.4vw, 68px);
}
.products-hero__title {
  margin: 0;
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-h1); line-height: 1.28; letter-spacing: .06em;
}
.products-hero__lead {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-lead);
  color: var(--c-text-2);
}
/* 法人向け Secondary 導線。Primary CTA（S06）と競合しないテキストリンク。 */
.products-hero__b2b { margin: clamp(14px, 1.6vw, 22px) 0 0; }

/* ==========================================================================
   S02 / S03 / S04 — Brand Section（Brand != Product）
   Brand 名＝H2／商品＝H3。Brand Logo は使わない。
   Brand の識別は左罫のみ（rebuild.css の Brand Accent Token を使用）。
   ========================================================================== */
.brand-section__head {
  border-left: 3px solid var(--c-brand, var(--c-line-strong));
  padding-left: clamp(16px, 1.6vw, 24px);
  margin-bottom: var(--sp-lg);
}
.brand-section--curble { --c-brand: var(--c-brand-curble); }
.brand-section--marfys { --c-brand: var(--c-brand-marfys); }
.brand-section--fizx   { --c-brand: var(--c-brand-fizx); }

.brand-section__lead {
  margin: 0;
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* --------------------------------------------------------------------------
   Product Grid
   PC は 3列固定。`auto-fit` を使わない理由:
     MARFY'S / FIZX は商品が1件のため、auto-fit だとカードが全幅へ伸びて
     「不自然な全幅巨大カード」になる。3列固定にすることで
     **全ブランドでカード幅が一致**する（Issue-010 §23 card width consistency）。
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px);
  }
}

/* ==========================================================================
   Product Discovery Card
   EC Card ではない。価格 / JAN / カラー一覧 / 購入ボタンを持たない。
   Primary Action は WordPress 商品詳細ページへの遷移のみ。
   カード全体を1つのリンクにしない（nested interactive を作らない）。
   ========================================================================== */
.product-card { display: flex; flex-direction: column; }

/* --- Media ----------------------------------------------------------------
   統一 aspect ratio 4/3 ＋ object-fit: contain。
   商品形状（正方形 / 横長 / 縦長）が異なるため crop しない。
   -------------------------------------------------------------------------- */
.product-card__media {
  aspect-ratio: 4 / 3;
  /* `.product-card__media` は `.product-card`（column flex）の **flex item** であり、
     flex item の既定 `min-height: auto` は「中身が縮まない最小サイズ」に解決される。
     そのため縦長画像（MARFY'S 1037×1500）や正方形画像（Footrest 700×700）が
     箱を押し広げ、aspect-ratio 4/3 が無効化されていた（実測: 0.719 / 1.000）。
     min-height を 0 に固定して aspect-ratio を常に優先させる。 */
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 1.4%, 14px);
  padding: 6%;
  background: var(--c-figure-ground);
  border: 1px solid var(--c-line);
}
.product-card__media img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* Curble Chair は Wider / Grand の2モデルを1つの media area 内に並べる。
   別 Primary Card に分割しない（Primary Entity = Curble Chair）。
   画像の合成ファイルは新規生成せず、CSS で同一 media area に配置する。

   --- O-26（Human Decision: MINOR VISUAL FIX REQUIRED）-------------------
   2枚を横に並べると1枚あたりの使用幅が箱幅の半分に制限される。
   4/3 の箱に正方形寄りの画像を2枚並べる場合、各画像のスロットは
   幅:高さ = 2:3 になり、画像は **幅で頭打ち**（高さは 2/3 しか使えない）。
   その結果、一覧表示で Curble Chair だけが明らかに小さく見えていた
   （実測 占有率 29〜33% ／ 他カードは 49〜95%）。

   対処は **Chair 専用の modifier（.product-card__media--dual）に限定**し、
   余白（padding / gap）だけを詰めて画像スロットを広げる。
     - 2枚は別 Element のまま維持（合成画像を作らない）
     - 重ねない（gap を残す）
     - crop しない（object-fit: contain と max-width/height:100% は共通ルールのまま）
     - aspect-ratio 4/3 は他カードと共通（この modifier では変更しない）
   `.product-card__media img` 等の**共通ルールは変更していない**ため、
   他4商品のカードには影響しない。

   理論上限: 余白 0 でも 2×(2/3・h)² ÷ (4/3・h²) = **66.7%**。
   本設定は実測 **約 59〜60%**（Footrest 70% / MARFY'S 49% の中間）で、
   「Chair だけが明らかに小さい」状態は解消される。
   ---------------------------------------------------------------------- */
.product-card__media--dual { padding: 2.5%; gap: 2%; }
.product-card__media--dual img { max-width: 49%; }

/* --- Body ----------------------------------------------------------------- */
.product-card__body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  padding-top: clamp(14px, 1.6vw, 20px);
}
.product-card__brand {
  margin: 0 0 6px;
  font-family: var(--f-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  /* --c-text-faint は #fbfaf7 上 2.9:1 で AA 未満。意味を持つテキストのため
     AA を満たす --c-text-3（6.29:1 / S3 #f3f1ec 上 5.82:1）を使う。 */
  color: var(--c-text-3);
}
.product-card__name {
  margin: 0;
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-product-name);
  line-height: var(--lh-head); letter-spacing: .04em;
}
/* 日本語補助名 / モデル名。商品名の一部ではないため別要素で小さく置く。 */
.product-card__variants {
  margin: 6px 0 0;
  font-size: var(--fs-meta); letter-spacing: .04em;
  color: var(--c-text-3);
}
.product-card__desc {
  margin: clamp(10px, 1.1vw, 14px) 0 0;
  font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--c-text-2);
}
/* 専用カバー等の付帯情報。商品そのものではないため罫で従属を示す。 */
.product-card__note {
  position: relative;
  margin: 10px 0 0; padding-left: 1em;
  font-size: var(--fs-meta); line-height: 1.7;
  color: var(--c-text-3);
}
.product-card__note::before {
  content: "";
  position: absolute; left: 0; top: .8em;
  width: 5px; height: 1px; background: var(--c-line-connect);
}
/* CTA はカード下端で揃える。色・下線・focus は rebuild.css の .link-inline。
   リンクは **必ず <p class="product-card__action"> で包む**。
   wpautop は block コンテナの直接の子にある「裸の inline 要素（<a> 等）」を
   <p> で包むが、直後が </div> の場合に </p> だけが除去され
   **閉じられていない <p>** が残る（＝以降の兄弟要素を巻き込み、
   .product-grid の direct child 数まで壊す）。
   最初から明示的な <p> を置けば、wpautop は二重の <p> を畳んで無害化する。 */
.product-card__action {
  margin: auto 0 0;
  padding-top: clamp(12px, 1.4vw, 18px);
}

/* ==========================================================================
   S05 — Purchase Navigation
   Shopify URL を各商品カードへ個別に配置せず、ここへ集約する。
   ========================================================================== */
.products-purchase__body {
  margin: 0 0 var(--sp-lg);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.products-purchase__actions {
  display: flex; flex-wrap: wrap;
  gap: 4px clamp(24px, 3vw, 40px);
  margin: 0; padding: 0; list-style: none;
}

/* ==========================================================================
   S06 — B2B CTA
   OEM・オリジナル商品開発の示唆を含めない（WP-H04）。
   ========================================================================== */
.products-b2b { padding-block: var(--sp-sec-cta); }
.products-b2b__body {
  margin: 0 0 var(--sp-lg);
  max-width: var(--w-measure);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
/* Primary CTA も裸の <a> にしない（上記 .product-card__action と同じ理由）。 */
.products-b2b__action { margin: 0; }

/* ==========================================================================
   Responsive 微調整
   ========================================================================== */
/* SP は 1 column。カードが横に広がりすぎると media が縦に伸びるため上限を置く。 */
@media (max-width: 767px) {
  .product-card { max-width: 480px; }
}