/* =================================================================
 * c-products — TOP「製品情報」PRODUCTS セクション（PC）
 * Figma: 2943:125437
 *
 * 構成:
 *   .c-products                セクション（gap32 / padding 96 0）
 *     ├─ .c-products__header    ラベル + [EN | 説明] + 下線（padding 0 70）
 *     └─ .c-products__body      gap64
 *         ├─ .c-products__groups   新着/人気の2グループ（gap32）
 *         │   └─ .c-products__group  ドットラベル + カルーセル + 前後ボタン
 *         └─ （製品検索フォーム＝旧 partial を温存 include）
 *
 * ※ カルーセルは pc.blade.php 末尾の共通JSが
 *    [data-pc-products-track] / [data-pc-products-controls] / .pc-carousel-item / [data-dir] を駆動。
 *    フックは保持すること（viewport = track.parentElement）。
 * ※ 製品検索フォームは app.js 連動（.search-form--redirect / .js-* / window.divisionCategories）のため
 *    現状 partial を温存。CSS は top-main.css の `.element-top .serch-box` 系がそのまま効く。
 * ※ TOP では .top-pc（PC表示）専用。SP表示は別 blade（front/top/mobile）が担当。
 * 色・タイポは tokens.css 経由（ハードコード禁止）。
 * =================================================================*/

.c-products {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  padding: 96rem 0;
  box-sizing: border-box;
}

/* ---------- ヘッダー ---------- */
.c-products__header {
  width: 100%;
  padding: 0 70rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.c-products__label {
  margin-top: -1px;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-key);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 24rem;
}

.c-products__head-row {
  display: inline-flex;
  align-items: center;
  gap: 64rem;
}

.c-products__title-en {
  margin-top: -1px;
  font-family: var(--font-en-condensed);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-h1-pc);           /* 56px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 84rem;
  white-space: nowrap;
}

.c-products__description {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 600;                     /* Figma SemiBold */
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
}

.c-products__rule {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

/* ---------- 本体（グループ群 + 検索） ---------- */
.c-products__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64rem;
}

.c-products__groups {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rem;
}

.c-products__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}

/* グループ見出し（● 新着製品） */
.c-products__group-label {
  width: 100%;
  padding: 0 70rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8rem;
}

.c-products__group-dot {
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--color-orange-01) 0%, var(--color-key) 100%);
}

.c-products__group-name {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: 24rem;
  letter-spacing: 0.96rem;
  line-height: 43.2rem;
}

/* カルーセル ラッパ（viewport + コントロール） */
.c-products__carousel-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}

/* カルーセル viewport（画面端まで全幅） */
.c-products__carousel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  box-sizing: border-box;
}

.c-products__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: max-content;
  min-width: 100%;
  gap: 24rem;
  padding-inline: 70rem;
  will-change: transform;
}

/* ---------- 商品カード ---------- */
.c-products__card {
  flex: 0 0 auto;
  width: 307rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}

.c-products__card-media {
  position: relative;
  width: 100%;
  height: 222rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rem;
  background-color: var(--color-white);
  border-radius: 24rem;
  box-sizing: border-box;
  overflow: hidden;                  /* hover時の画像 1.1x をボックス内にクリップ */
}

.c-products__card-imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-products__card-img {
  width: 180rem;
  height: 180rem;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:90668: hover時に画像 1.1x 拡大（カード全体ホバーで反応） */
.c-products__card:hover .c-products__card-img { transform: scale(1.1); }

.c-products__card-badge {
  position: absolute;
  bottom: 16rem;
  right: 16rem;
  width: 16rem;
  height: 16rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
}

.c-products__card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  padding: 0 8rem;
  box-sizing: border-box;
}

.c-products__card-title {
  margin: 0;
  align-self: flex-start;             /* テキスト幅に揃え hover下線がテキスト下に収まる */
  font-family: var(--font-jp);
  font-weight: 600;
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
  text-decoration: none;
  /* 指示 5693:90577 / 90669: 製品名は hover で左→右へ 1px 下線スライドイン (0.3s ease-in-out) */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease-in-out;
}
.c-products__card:hover .c-products__card-title { background-size: 100% 1px; }

.c-products__card-tagrow {
  display: flex;
}

.c-products__card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24rem;
  padding: 2rem 14rem;
  background-color: var(--color-secondary);
  border-radius: 12rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: var(--fs-body-xs);         /* 12px */
  letter-spacing: 0.48rem;
  line-height: 18rem;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ---------- 前後ボタン（矢印の左に点線） ---------- */
.c-products__controls {
  width: 100%;
  padding: 0 70rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32rem;
}

/* Figma 3084:55260 / 3084:55263 — Vector 8（点線 stroke-dasharray 2 2 / Neutral 04）。
   矢印の左いっぱいに伸びる。WORKS の .c-works__footer-line と同じ見た目。 */
.c-products__controls::before {
  content: "";
  flex: 1;
  height: 2rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-neutral-04) 0 2rem,
    transparent 2rem 4rem
  );
}

.c-products__nav {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}

.c-products__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44rem;
  height: 44rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-default);
}

.c-products__nav-btn:hover { transform: scale(1.08); }
.c-products__nav-btn:active { transform: scale(0.96); }

.c-products__nav-icon {
  display: block;
  width: 44rem;
  height: 44rem;
  pointer-events: none;
}

/* =================================================================
 * SP（TOP モバイル）— .SP ツリー専用オーバーライド
 *   front/top/mobile（products partial）に c-products を @include した際の SP。
 *   Figma SP: 1200:8582（中央見出し → 新着/人気の2カルーセル（隣 peek）→ 製品検索フォーム）。
 *   製品検索フォームは保留対象のため c-products には含めず、SP partial 側で別ブロック配置。
 *   カルーセルは mobile.blade の SP用JS（.SP [data-carousel-track="products-*"]）が駆動。
 *   PCのJSは min-width:1024、SPのJSは max-width:1023.98 で排他のため二重駆動しない。
 *   ※ .SP スコープで PCツリー(.top-pc)に影響させない。
 * =================================================================*/

.SP .c-products {
  padding: 40rem 0 0;
  gap: 24rem;
  align-items: stretch;
}

/* ヘッダー（中央寄せ・縦積み） */
.SP .c-products__header {
  padding: 0 16rem;
  align-items: center;
  text-align: center;
  gap: 8rem;
}

.SP .c-products__label {
  margin-top: 0;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 12rem;
}

/* Figma(SP 5083:331830): 見出しの並びは ラベル → PRODUCTS → 下線(オレンジ) → 説明 の順。
   head-row を contents 化して header(flex column)直下に EN/説明 を出し、
   order で下線(__rule)を EN と説明の間へ差し込む。
   旧実装は下線が説明文の「下」に出ていた（QA No.37）。 */
.SP .c-products__head-row { display: contents; }
.SP .c-products__label       { order: 1; }
.SP .c-products__title-en    { order: 2; }
.SP .c-products__rule        { order: 3; }
.SP .c-products__description { order: 4; }

.SP .c-products__title-en {
  margin-top: 0;
  font-size: 34rem;
  letter-spacing: 1.36rem;
  line-height: 34rem;
}

/* Figma(SP)はラベル/EN見出しのみ中央。説明文は左揃え・全幅（SERVICE と統一・QA No.36） */
.SP .c-products__description {
  align-self: stretch;
  margin-top: 4rem;                 /* 下線→説明の間隔（Figma） */
  font-size: 13rem;
  letter-spacing: 0.52rem;
  line-height: 1.9;
  text-align: left;
}

/* 本体・グループ */
.SP .c-products__body {
  gap: 32rem;
  align-items: stretch;
}

.SP .c-products__groups {
  gap: 32rem;
}

.SP .c-products__group {
  gap: 12rem;
}

/* グループ見出し（● 新着製品 / 左寄せ） */
.SP .c-products__group-label {
  padding: 0 16rem;
}

.SP .c-products__group-name {
  font-size: 18rem;
  letter-spacing: 0.72rem;
  line-height: 1.6;
}

/* ---------- カルーセル（transform 方式・シームレス無限ループ／中央カード＋両隣 peek） ----------
   mobile.blade の SP用JS が track の中身をクローンで複製し、transform で 1 枚ずつスライドする
   （PC pc.blade と同方式）。カードサイズは従来どおり（.SP .sp-carousel-item の flex:0 0 84%＝
   top-main.css）。active カードは JS が viewport 中央に寄せ、左右に隣カードを対称に peek させる。 */
.SP .c-products__carousel-wrap {
  gap: 16rem;
}

.SP .c-products__carousel {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  overflow: hidden;           /* 両隣 peek の超過分をクリップ */
}

/* track は definite width（100%）にする。max-content にすると .sp-carousel-item の
   flex-basis:84% が循環参照でカード幅が暴走するため不可。children は shrink:0 で外へ溢れ、
   親 .c-products__carousel の overflow:hidden でクリップ、transform でスライドする。
   左右の peek を対称にする中央寄せは JS（centerPad）が transform に加味する。 */
.SP .c-products__track {
  width: 100%;
  gap: 12rem;
  padding: 0;
  overflow: visible;
  will-change: transform;
}

/* カード幅 250px（top-main.css の .SP .sp-carousel-item の flex:0 0 84% を .sp-carousel-item
   付きセレクタで上書き）。JS の centerPad が viewport 中央へ寄せ、左右に隣カードを対称 peek。 */
.SP .c-products__card.sp-carousel-item {
  flex: 0 0 250rem;
  max-width: 250rem;
  width: 250rem;
  gap: 12rem;
}

/* 画像ボックス 250×188（Figma 指定）。flex 中央寄せ＋padding 16 */
.SP .c-products__card-media {
  width: 100%;                /* カード 250px に追従 */
  height: 188rem;
  aspect-ratio: auto;         /* 旧 1.38/1 を解除 */
  padding: 16rem;
  gap: 8rem;
}

.SP .c-products__card-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.SP .c-products__card-badge {
  bottom: 10rem;
  right: 10rem;
  width: 16rem;
  height: 16rem;
}

.SP .c-products__card-title {
  font-size: 14rem;
  line-height: 1.6;
}

/* 前後ボタン（Figma 1200:8582 = 右寄せ＋左に点線）。c-works SP と同じ方式 */
.SP .c-products__controls {
  padding: 0 16rem;
  justify-content: flex-end;
  align-items: center;
  gap: 16rem;
}

.SP .c-products__controls::before {
  content: "";
  flex: 1 1 auto;
  height: 0;
  background: none;                       /* PC基底の点線gradientを無効化（SPはborderで描画） */
  border-top: 2rem dotted var(--color-neutral-04);
}

/* ---------- 製品検索フォーム（保留対象・別partialを外側で配置）の外枠余白 ---------- */
.SP .sp-products-search {
  /* .main-contents は align-items:flex-start の flex 列。幅指定が無いと中身の
     max-content(≈414px)に膨らみ 390 設計幅を超える → 兄弟セクションと同じく 100% に固定 */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 32rem 16rem 48rem;
}