/* ================================================================
   COLLECTION PAGE
   /collection/ ページ固有のスタイル。共通の reset / tokens / base /
   layout / 共通コンポーネント (header, footer, cta-v2 等) は
   style.css 側で定義済み。
   設計方針: hero は craftsmanship-hero と同パターン。
   各 product は「1 product = 1 viewport (min-block-size: 100svh)」の
   cinematic 構成。左に大きな画像、右に番号/タイトル/本文/EC ボタン。
   ================================================================ */
@layer components {

  /* ================================================================
     共通 section padding & background
     ================================================================ */
  .collection-product {
    background-color: var(--color-bg-deep);
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
    position: relative;
    /* トップページのカードからアンカー遷移した際、固定ヘッダー (padding-block: 4rem)
       の下に見出しが潜り込まないよう着地位置をずらす。 */
    scroll-margin-block-start: clamp(6rem, 10vw, 9rem);
  }

  @media (width < 768px) {
    .collection-product {
      padding-inline: clamp(1.875rem, calc(-0.87rem + 11.7vw), 4.75rem);
    }
  }

  /* 素材ごとの section 背景画像。bg1 を section 上端に配置する (bg2 は全幅で非表示)。 */
  #product-calf {
    background-image:
      image-set(
        url(../../images/under-collection/under-collection-calf-bg1.webp) 1x,
        url(../../images/under-collection/under-collection-calf-bg1@2x.webp) 2x
      );
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* OSTRICH STAGE: ostrich / leg-center / leg-side の 3 セクションをまとめ、
     sticky bg-wrap で共通背景を viewport に固定する (croco-stage と同パターン)。 */
  .collection-ostrich-stage {
    position: relative;
    isolation: isolate;
  }

  .collection-ostrich-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    pointer-events: none;
    background-color: var(--color-bg-deep);
    background-image: image-set(
      url(../../images/under-collection/under-collection-ostrich-bg1.webp) 1x,
      url(../../images/under-collection/under-collection-ostrich-bg1@2x.webp) 2x
    );
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* ostrich 各 section: 背景は stage 側で担当するので透過。 */
  [id^="product-ostrich"] {
    background-color: transparent;
    position: relative;
    z-index: 1;
  }

  /* 1 つ目セクションを bg-wrap (100dvh) と重ねて stage の頭から始める。 */
  #product-ostrich {
    margin-block-start: -100dvh;
  }

  /* 2 つ目以降の上 padding を詰めて 3 連 section のリズムを揃える。 */
  #product-ostrich-leg-center,
  #product-ostrich-leg-side {
    padding-block-start: clamp(2.5rem, 5vw, 4rem);
  }

  /* CROCO STAGE: belly / side / mat の 3 セクションをまとめ、sticky bg-wrap で
     共通背景を viewport に固定する (hero-stage と同パターン)。 */
  .collection-croco-stage {
    position: relative;
    isolation: isolate;
  }

  /* sticky bg-wrap: 1 つ目セクションが viewport 上端に到達すると、 stage の
     終端まで viewport 内に貼り付く。 bg1 のみ含む (bg2 は最後の section に
     スクロール連動で配置)。 */
  .collection-croco-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    pointer-events: none;
    background-color: var(--color-bg-deep);
    background-image: image-set(
      url(../../images/under-collection/under-collection-croco-bg1.webp) 1x,
      url(../../images/under-collection/under-collection-croco-bg1@2x.webp) 2x
    );
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* croco 各 section: 背景は stage 側で担当するので透過。 z-index でコンテンツが
     bg-wrap の上に乗るようにする。 */
  [id^="product-croco"] {
    background-color: transparent;
    position: relative;
    z-index: 1;
  }

  /* 1 つ目セクションを bg-wrap (100dvh) と重ねて stage の頭から始める。 */
  #product-croco-belly {
    margin-block-start: -100dvh;
  }

  /* 最後の section (mat) の bg2 は全幅で非表示 (sticky の croco-bg1 のみ見せる)。 */

  /* croco-side / croco-mat の上 padding を半分に詰めて、3 連 section の
     リズムを引き締める (belly はそのまま、 stage 開始位置の余白を担保)。 */
  #product-croco-side,
  #product-croco-mat {
    padding-block-start: clamp(2.5rem, 5vw, 4rem);
  }

  /* SP / TB (< 1024px): 各素材 section 背景を縦長画面向けの SP 版 (bg1 のみ) に
     差し替える。配置ロジック (bg1=上端 / 横幅 100%) は PC と共通なので、
     background-image の URL のみ上書きする。hero の SP 差し替えと同パターン。 */
  @media (width < 1024px) {
    #product-calf {
      background-image:
        image-set(
          url(../../images/under-collection/under-collection-carf-bg1-sp.webp) 1x,
          url(../../images/under-collection/under-collection-carf-bg1-sp@2x.webp) 2x
        );
    }

    .collection-ostrich-stage__bg-wrap {
      background-image: image-set(
        url(../../images/under-collection/under-collection-ostrich-bg1-sp.webp) 1x,
        url(../../images/under-collection/under-collection-ostrich-bg1-sp@2x.webp) 2x
      );
    }

    .collection-croco-stage__bg-wrap {
      background-image: image-set(
        url(../../images/under-collection/under-collection-croco-bg1-sp.webp) 1x,
        url(../../images/under-collection/under-collection-croco-bg1-sp@2x.webp) 2x
      );
    }
  }


  /* ================================================================
     HERO STAGE (philosophy-hero と同パターン)
     hero を stage で wrap し、 stage の sticky bg-wrap で bg1/bg2 の
     クロスフェードループを行う。 hero スクロール中は画像が画面上端に貼り付き、
     hero 自身は背景透過。
     ================================================================ */
  .collection-hero-stage {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg-deep);
  }

  /* hero-stage 末尾を次の collection-product (ダーク) と滑らかに繋ぐ overlay。 */
  .collection-hero-stage::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: clamp(10rem, 30dvh, 24rem);
    background-image: linear-gradient(to bottom, transparent, var(--color-bg-deep) 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* sticky bg-wrap (hero 画像)。 bg1 / bg2 の 2 枚を ::before / ::after に乗せ、
     12 秒サイクル (1 枚あたり 6 秒) でふわっとクロスフェードループする。 */
  .collection-hero-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    background-color: var(--color-bg-deep);
    pointer-events: none;
  }

  .collection-hero-stage__bg-wrap::before,
  .collection-hero-stage__bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top right;
    pointer-events: none;
  }

  .collection-hero-stage__bg-wrap::before {
    background-image: image-set(
      url(../../images/under-collection/under-collection-hero-bg1.webp) 1x,
      url(../../images/under-collection/under-collection-hero-bg1@2x.webp) 2x
    );
    animation: collection-hero-bg-fade-a 12s ease-in-out infinite;
  }

  .collection-hero-stage__bg-wrap::after {
    background-image: image-set(
      url(../../images/under-collection/under-collection-hero-bg2.webp) 1x,
      url(../../images/under-collection/under-collection-hero-bg2@2x.webp) 2x
    );
    animation: collection-hero-bg-fade-b 12s ease-in-out infinite;
  }

  @media (width < 1024px) {
    .collection-hero-stage__bg-wrap::before {
      background-image: image-set(
        url(../../images/under-collection/under-collection-hero-bg1-sp.webp) 1x,
        url(../../images/under-collection/under-collection-hero-bg1-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }

    .collection-hero-stage__bg-wrap::after {
      background-image: image-set(
        url(../../images/under-collection/under-collection-hero-bg2-sp.webp) 1x,
        url(../../images/under-collection/under-collection-hero-bg2-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }
  }

  /* 12s サイクル: 3s ホールド + 3s フェードを 2 回。 ::before / ::after は対称位相。 */
  @keyframes collection-hero-bg-fade-a {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    50%  { opacity: 0; }
    75%  { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes collection-hero-bg-fade-b {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-hero-stage__bg-wrap::before,
    .collection-hero-stage__bg-wrap::after {
      animation: none;
    }
    .collection-hero-stage__bg-wrap::after {
      opacity: 0;
    }
  }

  /* ================================================================
     HERO (philosophy-hero と同パターン)
     ================================================================ */
  .collection-hero {
    background-color: transparent;
    position: relative;
    z-index: 1;
    /* stage の 1 番目の子 (bg-wrap, 100dvh) を打ち消して hero を stage 頭に揃える */
    margin-block-start: -100dvh;
    min-block-size: 80svh;
    /* philosophy / craftsmanship と合わせ、 hero 自身は padding-inline を持たない
       (tagline は自身の padding-inline-end だけで viewport 右端からの距離を作る) */
    padding-block: clamp(13rem, 24vw, 18rem) clamp(2.5rem, 5vw, 4.5rem);
    /* grid 1fr auto: heading 中央、tagline 右下 */
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: clamp(2rem, 4vw, 4rem);
  }

  /* PC (>=1024) で 16:9 比率に固定、 超ワイドは 100svh で頭打ち */
  @media (width >= 1024px) {
    .collection-hero {
      min-block-size: min(56.25vw, 100svh);
    }
  }

  .collection-hero__heading {
    margin: 0;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    margin-block-end: clamp(3rem, 8vw, 8rem);
  }

  .collection-hero__title {
    font-family: var(--font-en);
    font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 1024px) {
    .collection-hero__title {
      font-size: clamp(4.375rem, calc(1.9rem + 3.9vw), 5rem);
    }
  }

  .collection-hero__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .collection-hero__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .collection-hero__title.is-revealed .collection-hero__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-hero__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .collection-hero__subtitle {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.4;
    color: oklch(0.88 0.01 70);
    margin: 0;
    margin-block-start: 1rem;
    padding-inline-start: 0.1rem;
  }

  .collection-hero__tagline {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
    color: oklch(0.88 0.01 70);
    text-align: end;
    margin: 0;
    grid-row: 2;
    justify-self: end;
    padding-inline-end: clamp(1.5rem, 3vw, 4rem);
  }

  @media (width < 768px) {
    .collection-hero__tagline {
      display: none;
    }
  }


  /* ================================================================
     PRODUCT (cinematic 1 product per viewport)
     ================================================================ */
  .collection-product {
    min-block-size: 100svh;
    padding-block: clamp(5rem, 10vw, 8rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(1.5rem, 4vw, 3rem);
  }

  /* heading: h2 + 英字あしらい (section の最上部、 lead/main の上に置く)。
     左端を lead と揃えるため、コンテナ幅・整列ともに lead と一致させる。 */
  .collection-product__heading {
    inline-size: 100%;
    max-inline-size: 65ch;
  }

  /* リード文 (heading の下、 cards の上に置く素材説明文)。
     コンテナ幅を中の段落 (max 65ch) と一致させて、本文の左右に余白幅の
     不一致が出ないようにする。 */
  .collection-product__lead {
    inline-size: 100%;
    max-inline-size: 65ch;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.2vw, 0.875rem);
  }

  .collection-product__lead p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: oklch(1 0 0);
    /* Safari は CJK 本文に text-wrap: pretty を当てると行ボックスを意図せず
       縮め、中途半端な位置で改行してしまう。デフォルト wrap に固定して回避
       （.collection-v2__body / hero__video-text-inner と同じ対処）。 */
    text-wrap: wrap;
    inline-size: 100%;
    margin: 0;
  }

  /* EC リンク (リード文の直下)。philosophy の遷移ボタン
     (.philosophy-logic__detail-link) と同デザイン — 小さめテキスト + 細下線 +
     裸矢印が hover で右へスライド。lead 内の flex item なので
     PC の交互オフセットも自動で継承される。 */
  .collection-product__ec-link {
    display: inline-flex;
    align-items: center;
    /* 親 lead (flex column) の stretch を解除して内容幅に。
       下線が矢印の右端で終わるようにする。 */
    align-self: flex-start;
    gap: 0.85em;
    margin-block-start: clamp(1rem, 2vw, 1.5rem);
    padding-block-end: 0.6em;
    font-family: var(--font-jp);
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: oklch(0.98 0 0);
    text-decoration: none;
    border-block-end: 1px solid oklch(0.98 0 0 / 0.4);
    transition:
      color 0.3s var(--ease-out, ease-out),
      border-color 0.3s var(--ease-out, ease-out);
  }

  .collection-product__ec-link-label {
    display: inline-block;
  }

  .collection-product__ec-link-arrow-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .collection-product__ec-link-arrow {
    display: block;
    /* viewBox 21:11 のアスペクト維持。行に馴染む 0.7em 高 */
    inline-size: auto;
    block-size: 0.7em;
    transition: translate 0.3s var(--ease-out, ease-out);
  }

  @media (hover: hover) {
    .collection-product__ec-link:hover {
      color: oklch(0.88 0.005 70);
      border-block-end-color: oklch(0.98 0 0 / 0.7);
    }

    .collection-product__ec-link:hover .collection-product__ec-link-arrow {
      translate: 0.3em 0;
    }
  }

  .collection-product__ec-link:focus-visible {
    outline: 2px solid oklch(0.98 0 0 / 0.7);
    outline-offset: 0.25em;
  }

  /* main: Black/Brown 2 カードを内包。SP は縦並び、PC は横並び 2 カラム。
     カード同士は枠線を共有するため gap: 0 で接地。
     上方の lead との距離は section の row-gap に加えて margin-block-start を
     重ねることで 2 倍幅に。 */
  .collection-product__main {
    inline-size: 100%;
    margin-block-start: clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch;
  }

  /* SP/TB: gallery (写真 2 枚) は縦積みで密着するので、少しだけ間を空ける。
     (PC は --gallery modifier 側の gap: 1.25rem が効く) */
  @media (width < 1024px) {
    .collection-product__main--gallery {
      gap: 0.75rem;
    }
  }

  /* PC: section 自体は縦並びのまま (heading → lead → main)。
     main (cards) のみ 2 カラム化。
     heading / lead は cards の中央より右側にオフセットして配置する。 */
  @media (width >= 1024px) {
    .collection-product__main {
      grid-template-columns: 1fr 1fr;
      /* craftsmanship-leather__details (max 80rem) と揃えて、大画面でも右側が
         スカスカにならない幅に。 */
      max-inline-size: 80rem;
    }

    /* gallery modifier: viewport 全幅 (full-bleed) で大きく見せる。
       section の padding-inline を突き抜けて 100vw 表示し、上下 40px /
       左右 80px / 2 枚の間 20px の余白で空気を入れる。 */
    .collection-product__main--gallery {
      max-inline-size: none;
      inline-size: 100vw;
      margin-inline: calc(50% - 50vw);
      padding-block: 2.5rem;
      padding-inline: 5rem;
      gap: 1.25rem;
      box-sizing: border-box;
    }

    /* section が縦に積まれる順番 (calf, ostrich, croco-belly) に対して
       交互に配置する。奇数 (calf, croco-belly) は右寄り、偶数 (ostrich) は
       左寄り。値は鏡映しになるよう同一の clamp を margin-inline-start/end に。 */
    .collection-product:nth-of-type(odd) .collection-product__heading,
    .collection-product:nth-of-type(odd) .collection-product__lead {
      margin-inline-start: clamp(8rem, 24vw, 28rem);
    }
    .collection-product:nth-of-type(even) .collection-product__heading,
    .collection-product:nth-of-type(even) .collection-product__lead {
      margin-inline-end: clamp(8rem, 24vw, 28rem);
    }

    /* croco-stage 内の 3 section は交互レイアウトを打ち消して、 1 つ目 (belly)
       と同じ右寄り位置に統一する。 */
    .collection-croco-stage .collection-product:nth-of-type(even) .collection-product__heading,
    .collection-croco-stage .collection-product:nth-of-type(even) .collection-product__lead {
      margin-inline-start: clamp(8rem, 24vw, 28rem);
      margin-inline-end: 0;
    }

    /* ostrich-stage 内の 3 section も同様に交互レイアウトを打ち消し、
       1 つ目 (ostrich) と同じ右寄り位置に統一する。 */
    .collection-ostrich-stage .collection-product:nth-of-type(even) .collection-product__heading,
    .collection-ostrich-stage .collection-product:nth-of-type(even) .collection-product__lead {
      margin-inline-start: clamp(8rem, 24vw, 28rem);
      margin-inline-end: 0;
    }
  }

  /* セクション見出し h2 (philosophy-history__title と同じデザイン、色のみ白に)。 */
  .collection-product__section-heading {
    font-family: var(--font-jp);
    /* SP 375 で 26px、767 で 32px へ fluid */
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(1 0 0);
    text-wrap: balance;
    margin: 0;
  }

  /* PC (1024~): 1024px で 30px、1440px で 36px (max) に到達する fluid。
     philosophy-history__title と一致。 */
  @media (width >= 1024px) {
    .collection-product__section-heading {
      font-size: clamp(1.875rem, 0.95rem + 1.44vw, 2.25rem);
    }
  }

  /* h2 の下に添える英字あしらい (craftsmanship-leather__title-en と同じ設計、色は白系)。 */
  .collection-product__section-heading-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(1 0 0 / 0.6);
    margin: 0;
    padding-inline-start: 0.2em;
  }

  @media (width >= 768px) {
    .collection-product__section-heading-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .collection-product__section-heading-en {
      font-size: 1rem;
    }
  }


  /* ----------------------------------------------------------------
     GALLERY ITEM: enkouji 風、左右に大きな縦長画像を並べる新レイアウト
     既存 .collection-product__card と置き換えで使う。1 セット = 2 枚。
     ---------------------------------------------------------------- */
  .collection-product__gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    inline-size: 100%;
  }

  .collection-product__gallery-item img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  /* 画像下部の黒グラデ。右下に重なるメタ (色 / 価格) の可読性を上げる。
     ::before (positioned, z-auto) は img より上・meta (DOM 後続) より下に描画される。 */
  .collection-product__gallery-item::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 38%;
    background: linear-gradient(to top, oklch(0 0 0 / 0.55), oklch(0 0 0 / 0));
    pointer-events: none;
  }

  /* 画像右下に重ねる商品メタ (色 / 価格 / Mens-Ladies)。
     背景に明色が来ても読めるよう text-shadow で縁取り。 */
  .collection-product__gallery-meta {
    position: absolute;
    inset-block-end: clamp(1rem, 2vw, 1.5rem);
    inset-inline-end: clamp(1.25rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    color: oklch(1 0 0);
    text-shadow: 0 1px 4px oklch(0 0 0 / 0.55);
    pointer-events: none;
  }

  .collection-product__gallery-color {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    margin: 0;
  }

  .collection-product__gallery-price {
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0;
  }

  .collection-product__gallery-size {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.2;
    color: oklch(1 0 0 / 0.85);
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .collection-product__gallery-item img {
      transition: scale 0.6s var(--ease-out-expo, ease-out);
    }
    .collection-product__gallery-item:hover img,
    .collection-product__gallery-item:focus-visible img {
      scale: 1.04;
    }
  }

  .collection-product__gallery-item:focus-visible {
    outline: 2px solid oklch(1 0 0 / 0.8);
    outline-offset: 4px;
  }


  /* ----------------------------------------------------------------
     MEDIA PANE: 左カラム、製品画像
     ---------------------------------------------------------------- */
  /* main の中身は 2 カード (Black / Brown) — SP は縦並び、PC は横並び。
     枠線で囲む。隣接する辺は共有 (Brown 側で消す) して 1 本にする。
     カード全体が <a> なので display と装飾を link 用に調整。 */
  .collection-product__card {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    inline-size: 100%;
    border: 1px solid oklch(1 0 0 / 0.35);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s var(--ease-out-expo, ease-out),
                border-color 0.3s var(--ease-out-expo, ease-out);
  }

  .collection-product__card:hover,
  .collection-product__card:focus-visible {
    background-color: oklch(1 0 0 / 0.06);
    border-color: oklch(1 0 0 / 0.8);
  }

  .collection-product__card:focus-visible {
    outline: 2px solid oklch(1 0 0 / 0.8);
    outline-offset: -2px;
  }

  /* ホバー時にカード内画像をわずかに拡大 */
  .collection-product__card-belt img {
    transition: transform 0.6s var(--ease-out-expo, ease-out);
  }

  .collection-product__card:hover .collection-product__card-belt img {
    transform: scale(1.04);
  }

  /* SP (縦並び): Brown の上辺を消して、Black の下辺を共有線にする。 */
  .collection-product__card--brown {
    border-block-start: none;
  }

  /* PC (横並び): Brown の左辺を消して、Black の右辺を共有線にする。
     SP で消した上辺は復活させる。 */
  @media (width >= 1024px) {
    .collection-product__card--brown {
      border-block-start: 1px solid oklch(1 0 0 / 0.35);
      border-inline-start: none;
    }
  }

  /* card-image: long と short の 2 枚を横並び (常時)。
     上下中央で揃え、各 picture は flex item として 1fr ずつ。 */
  .collection-product__card-image {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    /* top の collection-v2__display と同じ背景色 */
    background-color: oklch(0.976 0 0);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    box-sizing: border-box;
  }

  .collection-product__card-belt {
    display: block;
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .collection-product__card-belt img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    /* SP は 40svh、PC は 35svh で頭打ち。 */
    max-block-size: 40svh;
    object-fit: contain;
  }

  @media (width >= 1024px) {
    .collection-product__card-belt img {
      max-block-size: 35svh;
    }
  }

  .collection-product__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* 色ラベル (Black / Brown): 英字あしらい、控えめなサイズ */
  .collection-product__card-color {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: oklch(1 0 0);
    margin: 0;
  }

  /* body 本文 */
  .collection-product__card-text {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: oklch(1 0 0);
    margin: 0;
    /* Safari の text-wrap: pretty 行ボックス縮みを回避（lead p と同じ対処）。 */
    text-wrap: wrap;
    inline-size: 100%;
  }

  /* meta 行: 価格 (左) + Mens/Ladies (右) を space-between で並べる。
     上に薄い区切り線を入れて body 文と視覚的に区切る。 */
  .collection-product__card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    padding-block-start: clamp(0.75rem, 1.5vw, 1rem);
    border-block-start: 1px solid oklch(1 0 0 / 0.25);
    margin-block-start: clamp(0.25rem, 1vw, 0.5rem);
  }

  /* 価格 (数字メイン、控えめだが視認性高め) */
  .collection-product__card-price {
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: oklch(1 0 0);
    margin: 0;
  }

  /* Mens / Ladies ラベル (英字あしらい、控えめ) */
  .collection-product__card-size {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: oklch(1 0 0 / 0.7);
    margin: 0;
  }

  .collection-product__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 70svh;
    object-fit: contain;
    margin-inline: auto;
  }

  /* SP: 画像は max-block-size を控えめに */
  @media (width < 1024px) {
    .collection-product__media img {
      max-block-size: 45svh;
    }
  }


  /* ----------------------------------------------------------------
     TEXT PANE: 右カラム、番号 + タイトル + 本文 + EC ボタン
     ---------------------------------------------------------------- */
  .collection-product__text-pane {
    display: grid;
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-content: center;
    inline-size: 100%;
    max-inline-size: 30rem;
    justify-self: center;
  }

  @media (width >= 1024px) {
    .collection-product__text-pane {
      max-inline-size: 28rem;
      justify-self: start;
    }
  }

  /* 番号 (01-05): philosophy-logic__detail-num と同設定 */
  .collection-product__num {
    font-family: var(--font-en);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--color-accent-light);
    line-height: 1;
    display: block;
  }

  /* h3: philosophy-logic__detail-title / craftsmanship-technique__title と揃える。
     SP/TB: 1.25rem 固定、PC: clamp で fluid。 */
  .collection-product__title {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 1024px) {
    .collection-product__title {
      font-size: clamp(1.25rem, calc(0.79rem + 0.72vw), 1.4375rem);
    }
  }

  .collection-product__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.15em;
  }

  .collection-product__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.15em), 0);
    transition: transform 1.1s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .collection-product__title.is-revealed .collection-product__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-product__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .collection-product__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.2;
    color: var(--color-text-secondary);
    margin: 0;
  }

  @media (width >= 768px) {
    .collection-product__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .collection-product__title-en {
      font-size: 1rem;
    }
  }

  .collection-product__body {
    display: grid;
    row-gap: clamp(1rem, 2vw, 1.5rem);
  }

  .collection-product__body p {
    font-family: var(--font-jp);
    font-size: 0.9375rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 2.1;
    color: oklch(0.9 0.005 70);
    text-wrap: wrap;
    max-inline-size: 32rem;
    margin: 0;
  }

  /* EC CTA: 既存の .btn .btn--primary を使うので追加スタイルは不要。
     ここでは ctaラッパーの margin だけ。 */
  .collection-product__cta {
    margin-block-start: clamp(0.5rem, 1.5vw, 1.5rem);
  }

}