/* =========================================================================
   monocosmelab  /shop_redesign1/「おすすめ商品」カバーフロー演出CSS（案A）
   -------------------------------------------------------------------------
   既存の shop-redesign1-slider.css（おすすめの横スクロール＋矢印）の「上に」
   重ねて、PC幅のときだけ 3D の奥行き（カバーフロー）を成立させる追加レイヤー。

   役割:
     1. perspective を product-collection（= ul の親）に置く
        ※ coverflow-demo.html の .cf>ul>li と同じ入れ子の深さに合わせ、
          確認済みの見え方を再現する。
     2. 中央スナップ＋左右に大きな余白を取り、先頭/末尾カードも中央に来られるように
     3. 各カードの transform/opacity 変化を短く滑らかに追従させる（即応・等速の操作感）

   ◆ 読み込み順
     functions.php の parts 配列で 'slider' より後に 'coverflow' を読み込み、
     同詳細度のプロパティ（padding / scroll-snap-align）を上書きする。

   ◆ スマホ/タブレット（max 781px）は本ファイルの上書きを当てず、
     従来の平面スクロール（slider.css）のまま。JS側も3Dを当てない。

   ◆ 変数（--kage-*）は B-7（product_cards.css）の .page-id-2784 で定義済み。
   ========================================================================= */

/* PC幅のみカバーフローを成立させる（モバイルは従来表示にフォールバック） */
@media (min-width: 782px) {

  /* 1. 奥行きの基準。ul の親（product-collection）に perspective を置く。 */
  .page-id-2784 .shop-featured .wp-block-woocommerce-product-collection {
    perspective: 1500px;
  }

  /* 2. トラック：中央スナップ＋左右に大きな余白（先頭/末尾も中央へ来られる）。
        上下は回転カードの影が切れない余白。slider.css の padding を上書き。 */
  .page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template {
    padding: 2.6rem 42% 3rem;
    scroll-snap-type: x mandatory;
  }

  /* 3. 各カード：中央スナップ＋短く滑らかな追従（即応・等速の操作感）。 */
  .page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template > li.wc-block-product {
    scroll-snap-align: center;             /* slider.css の start を上書き */
    transform-origin: center center;
    transition: transform .14s ease-out,
                opacity   .14s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;           /* 回転時のちらつき抑制 */
  }

  /* 矢印はカード帯の中央へ（カバーフローは上下余白が大きいため微調整） */
  .page-id-2784 .shop-featured .shop-slider-arrow {
    top: 50%;
  }
}

/* モーション軽減設定では3Dを当てない（JS側でも平面化。CSSでも保険） */
@media (prefers-reduced-motion: reduce) {
  .page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template > li.wc-block-product {
    transform: none !important;
    opacity: 1 !important;
  }
}