/* =====================================================================
   bySENSE — items.css  (ITEM LIST / 商品一覧 = ec-force 標準ルート /shop/products)
   ────────────────────────────────────────────────────────────────────────
   mockup/assets/css/items.css（C2a 承認デザイン）を ec-force の文脈へ適応した版。
   ・mockup は <main class="stage items-stage"> 直下に .items-content を置いたが、
     ec-force の /shop/products は layout が <main class="l-container"> を描画し、
     その中に products_index_content セクションが .items-stage > .items-content を出す。
   ・.l-container は ec-force 標準フレームではほぼ無スタイル（width/padding 制約なし）。
     固定ヘッダー回避の padding-top は components.css の `.l-container{padding-top:var(--header-h)}`
     が供給するため、ここでは .items-content 上余白を「デザイン上のギャップ」だけに絞る
     （mockup の 96px は固定ヘッダー回避兼用だったが、ここでは l-container が回避を担当）。
   ・ヘッダー/フッターは layout がセクション外で描画 → 本文に #site-footer は無い。
     mockup の `.items-content > #site-footer{margin-top}` は不要（footer 余白は
     components.css の build.sh 付与 `.site-footer{margin-top:80px}` が担当）。
   ・濃色ヘッダー（明背景での視認性）は components.css の
     `body:has(.l-container) .site-header{color:var(--ink)…}` が自動適用。
   共通トークン/部品は base.css・components.css（_head でグローバル読込）を使う。
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41。
   全クラスは .items-stage / .items-content / .il-* にスコープ＝他ページ無影響。
   ===================================================================== */

/* ============ items-stage 流体化（mockup .stage + .stage.items-stage を統合移植） ============
   .stage 基底（base.css）= position:relative / width:frame / min-width:floor / margin中央 / bg。
   .items-stage は .l-container の子なので .stage を継承しない → 同等の基底をここで再現する。
   width は faq/sub と同一機構の clamp(floor,100vw,frame)。 */
.items-stage {
  position: relative;
  width: clamp(var(--floor), 100vw, var(--frame));
  min-width: var(--floor);
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
  background: var(--bg);
}
/* bleed: stage 中央寄せ前提で viewport 全幅へ（将来の全幅写真帯用に保持） */
.items-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; }

/* ============ CONTENT GRID（通常フロー＋名前付き列）= mockup と同一 ============
   [full | wide(1152) | full]。1536: full余白=192 / wide=1152。1200(フロア): full余白=24 / wide=1152。
   padding-top は l-container が固定ヘッダー回避済 → デザイン上のギャップ(64px)のみ。 */
.items-content {
  padding-top: 64px;
  display: grid;
  grid-template-columns:
    [full-start] minmax(24px, 1fr)
    [wide-start] minmax(0, 1152px) [wide-end]
    minmax(24px, 1fr) [full-end];
}

/* ============ ヘッダーバンド（控えめ・FVなし） ============ */
.il-head {
  grid-column: wide-start / wide-end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.il-head__en {
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--ink);
}
.il-head__ja {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 40px; letter-spacing: 3px; color: var(--ink);
  margin-top: 2px;
}
.il-head__lead {
  margin-top: 22px;
  width: min(680px, 100%);
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ink-60);
}

/* ============ 商品グリッド（3カード・wide トラック） ============ */
.il-grid {
  grid-column: wide-start / wide-end;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}
/* -------- 単品1件時（feedback6: STEP単品2種は掲載終了・2STEP KITのみ） --------
   3カラムのまま1件だけ置くと1/3幅で寂しく間延びするため単一カラムへ切替えつつ、
   幅は480pxへキャップ（wide トラック1152px全幅までは広げない）。中央寄せはせず
   wide トラック左端起点のまま＝左寄せ厳守[center禁止]。products_index_content.liquid
   側で該当件数(=1)のときのみ .il-grid--single を付与。 */
.il-grid--single { grid-template-columns: minmax(0, 480px); }

/* -------- カード（チップ無し・写真＋左寄せテキスト：editorial listing） -------- */
.il-card { display: flex; flex-direction: column; }

/* メディア: 4:3 で軽くクロップ。商品本番アセット前提（mockup の暫定明度補正フィルタは外した）。 */
.il-card__media {
  position: relative;
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bg-alt);
}
.il-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform .6s var(--ease);
}
.il-card__media:hover img { transform: scale(1.03); }

/* バッジ（SOLD OUT / NEW）: メディア左上に控えめなタグ。明ページの濃インク基調。 */
.il-card__badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: .12em; padding: 6px 9px; border-radius: 1px;
}
.il-card__badge--soldout { background: rgba(57, 60, 65, .9); color: #fff; }
.il-card__badge--new { background: #fff; color: var(--ink); border: 1px solid var(--line); }
/* SOLD OUT カードは写真を僅かに退色させ「購入不可」を視覚化（リンク自体は詳細へ生存） */
.il-card--soldout .il-card__media img { filter: grayscale(.4) opacity(.7); }

.il-card__body { padding-top: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }

.il-card__cat {
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 10px;
}
.il-card__name {
  font-family: var(--sans); font-weight: 500; font-size: 19px; line-height: 30px;
  letter-spacing: .02em; color: var(--ink);
}
.il-card__ja {
  margin-top: 6px;
  font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 24px;
  letter-spacing: .04em; color: var(--ink);
}
.il-card__desc {
  margin-top: 10px;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.85;
  color: var(--ink-60);
}

/* 価格ブロック: 税込を主表示。セール時は origin を取消線、sale を強調。 */
.il-card__price {
  margin-top: 16px;
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.4;
  letter-spacing: .01em; color: var(--ink);
}
.il-card__price .origin {
  font-weight: 400; font-size: 14px; color: var(--ink-60);
  text-decoration: line-through; margin-right: 8px;
}
.il-card__price .sale { color: var(--ink); }
.il-card__price .tax {
  font-weight: 400; font-size: 12px; color: var(--ink-60); margin-left: 6px; letter-spacing: 0;
}
/* 定期便ヒント（セット品のみ）: 小・控えめ。subscription ページへ誘導 */
.il-card__sub {
  margin-top: 6px;
  font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.5;
  letter-spacing: .02em; color: var(--ink-60);
}
.il-card__sub a { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .3s var(--ease); }
.il-card__sub a:hover { opacity: .65; }

/* read-more はカード下端に固定（margin-top:auto）。3枚を等高 stretch＋body flex:1 で
   区切り罫線＋「詳細を見る」が同一ベースラインに揃う。下線はテキスト幅に追従。 */
.il-card__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.il-card .read-more { width: auto; }
.il-card .read-more::after { width: 100%; }

/* ============ 空状態（products_all.size == 0） ============ */
.il-empty {
  grid-column: wide-start / wide-end;
  margin-top: 80px; padding: 64px 0 40px; text-align: center;
}
.il-empty__title {
  font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: 3px; color: var(--ink);
}
.il-empty__text {
  margin-top: 14px;
  font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60);
}

/* ============ ページネーション（2ページ以上のときのみ・標準意匠を wide 列に中央寄せ） ============ */
.il-pager {
  grid-column: wide-start / wide-end;
  margin-top: 56px; display: flex; justify-content: center;
}

/* ============ 注釈エリア（footer 直上）— faq/sub と同一配置 ============ */
.il-notes {
  grid-column: full-start / full-end;
  justify-self: center;
  width: min(1280px, 100%);
  margin-top: 80px;
}

/* =====================================================================
   [Phase3] スマホ専用 (<768) — faq/sub のスマホ規則を踏襲
   items-stage のフロア(1200)解除＋グリッド1カラム化。l-container が SP は padding-top:60px。
   ===================================================================== */
@media (max-width: 767px) {
  .items-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }

  .items-content { padding-top: 40px; }

  .il-head { padding-bottom: 32px; }
  .il-head__en { font-size: 20px; letter-spacing: 4px; }
  .il-head__ja { font-size: 22px; line-height: 36px; letter-spacing: 2px; }
  .il-head__lead { margin-top: 18px; }

  .il-grid {
    grid-template-columns: 1fr; gap: 44px;
    max-width: 420px; margin-left: auto; margin-right: auto;
  }

  .il-empty { margin-top: 56px; padding: 40px 24px 24px; }
  .il-pager { margin-top: 44px; }
  .il-notes { margin-top: 56px; padding: 0 24px; }
}