/* =========================================================================
   monocosmelab  /shop_redesign1/  シングル精油 横スライダー（B-14）
   -------------------------------------------------------------------------
   「Fragrance Line up」と「モノコスメラボのモノづくり」の間に追加する
   「シングル精油」セクション（.shop-single）を、おすすめ商品（B-9）と同じ
   cocokind 風の横スクロール・カルーセルにする追加スタイル。

   既存の商品カード装飾（B-7 / shop-redesign1-cards.css）はそのまま流用し、
   ここでは「並べ方（横1列スクロール）」と「左右の矢印ボタン」のみを定義する。
   ＝ おすすめ（B-9 / shop-redesign1-slider.css の .shop-featured）の
     スコープ違いクローン。

   ◆ 読み込み方法
     functions.php の enqueue 配列に 'single' を追加して
     /shop_redesign1/（page-id 2784）でのみ読み込む（B-10 方式）。

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

   ◆ 前提 DOM（おすすめと同じ Product Collection ブロック）
     .shop-single                                   ← セクション(group / className)
       └ h2.shop-section-title「シングル精油」
       └ .wp-block-woocommerce-product-collection    ← WC interactive ラッパ
            └ ul.wp-block-woocommerce-product-template ← トラック
                 └ li.wc-block-product               ← 商品カード（B-7 で装飾済）

   ◆ 矢印ボタン（.shop-slider-arrow）は shop-redesign1-slider.js が
     実行時に .shop-single へ動的に append する（SLIDERS 配列に登録済み）。
     CSS は見た目のみ担当。

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

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

/* =========================================================================
   1. トラック（商品テンプレート UL）を横1列スクロールに
   ========================================================================= */
.page-id-2784 .shop-single 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-single ul.wp-block-woocommerce-product-template::-webkit-scrollbar {
  height: 6px;
}
.page-id-2784 .shop-single ul.wp-block-woocommerce-product-template::-webkit-scrollbar-track {
  background: transparent;
}
.page-id-2784 .shop-single ul.wp-block-woocommerce-product-template::-webkit-scrollbar-thumb {
  background: var(--kage-line, #E7DBCF);
  border-radius: 999px;
}

/* =========================================================================
   2. 各カードの幅を固定して横並びをキープ（PC で約4枚見え）
   ========================================================================= */
.page-id-2784 .shop-single 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-single .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-single .shop-slider-prev { left: -10px; }
.page-id-2784 .shop-single .shop-slider-next { right: -10px; }

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

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

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

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

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