/* =========================================================================
   monocosmelab  /shop_redesign1/  おすすめ商品 横スライダー（B-9）
   -------------------------------------------------------------------------
   「おすすめ商品」セクション（.shop-featured）だけを cocokind 風の
   横スクロール・カルーセルに変える追加スタイル。
   既存の商品カード装飾（B-7 / shop_redesign1_product_cards.css）は
   そのまま流用し、ここでは「並べ方（横1列スクロール）」と
   「左右の矢印ボタン」のみを定義する。

   ◆ 適用方法
     子テーマ twentytwentyfour-child/custom.css の末尾に追記する。
     （B-7 と同じ場所。カスタマイザー追加CSSではない）

   ◆ スコープ方式（page-id 方式 / マークアップ変更ゼロ）
     全セレクタを .page-id-2784 .shop-featured 配下にスコープ済み。
     ★ HOME 爽/華/煌・SKIN のグリッドには一切影響しない ★。
     ※ ページIDが変わった場合は .page-id-2784 を新IDに一括置換すること。

   ◆ 前提 DOM（live で確認済み）
     .shop-featured                                  ← セクション(group)
       └ h2.shop-section-title「おすすめ商品」
       └ .wp-block-woocommerce-product-collection    ← WC interactive ラッパ
            └ ul.wp-block-woocommerce-product-template.columns-3  ← トラック
                 └ li.wc-block-product               ← 商品カード（B-7 で装飾済）

   ◆ 矢印ボタン（.shop-slider-arrow）は shop_redesign1_featured_slider.js が
     実行時に .shop-featured へ動的に append する。CSS は見た目のみ担当。

   ◆ 変数（--kage-*）は B-7（product_cards.css）の .page-id-2784 で定義済み。
     本ファイル単体で使う場合に備え、未定義時のフォールバックも併記する。
   ========================================================================= */

/* ---- 0. 矢印配置の基準。セクションを相対配置に ------------------------- */
.page-id-2784 .shop-featured {
  position: relative;
}

/* =========================================================================
   1. トラック（商品テンプレート UL）を横1列スクロールに
   ========================================================================= */
.page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template {
  display: flex !important;          /* columns-N グリッド/wrap を上書き */
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 1.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;       /* iOS 慣性スクロール */
  /* 上下: ホバー時の浮き上がり影が切れない余白 / 下: スクロールバー分 */
  padding: 0.6rem 0.25rem 1.4rem;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: var(--kage-line, #E7DBCF) transparent;
}

/* WebKit 系スクロールバーを細く上品に */
.page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template::-webkit-scrollbar {
  height: 6px;
}
.page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template::-webkit-scrollbar-track {
  background: transparent;
}
.page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template::-webkit-scrollbar-thumb {
  background: var(--kage-line, #E7DBCF);
  border-radius: 999px;
}

/* =========================================================================
   2. 各カードの幅を固定して横並びをキープ（PC で約4枚見え）
   ========================================================================= */
.page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template > li.wc-block-product {
  flex: 0 0 auto;
  width: clamp(208px, 23vw, 248px);
  margin: 0;                                /* グリッド gap を使わず flex gap に統一 */
  scroll-snap-align: start;
}

/* =========================================================================
   3. 左右の矢印ボタン（JS が動的に append）
   ========================================================================= */
.page-id-2784 .shop-featured .shop-slider-arrow {
  position: absolute;
  top: 58%;                                 /* 見出しの下＝カード帯の中央付近。微調整可 */
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--kage-line, #E7DBCF);
  background: rgba(255, 255, 255, 0.92);
  color: var(--kage-ink, #333333);
  font-family: var(--kage-sans, "Montserrat", "Lato", sans-serif);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -10px rgba(51, 51, 51, 0.4);
  transition: opacity .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}

.page-id-2784 .shop-featured .shop-slider-prev { left: -10px; }
.page-id-2784 .shop-featured .shop-slider-next { right: -10px; }

.page-id-2784 .shop-featured .shop-slider-arrow:hover {
  background: var(--kage-ink, #333333);
  color: var(--kage-beige, #FEF5EE);
  border-color: var(--kage-ink, #333333);
}

.page-id-2784 .shop-featured .shop-slider-arrow:focus-visible {
  outline: 2px solid var(--kage-amber, #A9762B);
  outline-offset: 2px;
}

/* 端（先頭/末尾）では進めない方向の矢印を不可視化 */
.page-id-2784 .shop-featured.at-start .shop-slider-prev,
.page-id-2784 .shop-featured.at-end   .shop-slider-next {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   4. レスポンシブ（モバイルは矢印を隠し、スワイプ操作に委ねる）
   ========================================================================= */
@media (max-width: 781px) {
  .page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template > li.wc-block-product {
    width: 60vw;                            /* 1.5枚ほど見せて「続きがある」と分かる */
  }
}

@media (max-width: 600px) {
  .page-id-2784 .shop-featured .shop-slider-arrow {
    display: none;                          /* タッチ端末はスワイプで操作 */
  }
  .page-id-2784 .shop-featured ul.wp-block-woocommerce-product-template > li.wc-block-product {
    width: 72vw;
  }
}

/* マウスホイール/トラックパッドでの横スクロールを邪魔しないよう、
   タッチ端末以外でもスクロールバーは細く残す（操作可能性の明示）。 */