/* =========================================================
   PDP Gallery（下部ギャラリー専用）
   - 単枚スライド / 複数カード / 右端チラ見せ（フルブリード）
   - JSなしでも横スクロールで利用可（CSS Scroll Snap）
   ========================================================= */

/* セクション共通 */
.pdp-carousel{
  margin-block: 2.5rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1.5rem;
}
.pdp-carousel__inner{ position: relative; }

.pdp-carousel__title{
  position: relative;
  margin: 2rem 0 2.5rem;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  color: var(--c-fg-muted, #6b7280);
  line-height: 1.4;
  padding-left: 4px;
}
/* 英字見出し（任意） */
.pdp-carousel__title::before{
  content: "Gallery";
  display: block;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(17,17,17,.88);
  margin-bottom: .75rem;
}

/* ======================
   ビューポート共通
   ====================== */
.pdp-carousel__viewport{
  overflow-x: auto;
  scroll-snap-type: x proximity;   /* 弱めのスナップ */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 6px;
}
.pdp-carousel__viewport::-webkit-scrollbar{ display:none; }

/* アニメ中はスナップ＆smoothを無効化（JS連携用） */
.pdp-carousel__viewport.is-animating{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* ======================
   単枚スライド版（1画面=1スライド）
   ====================== */
.pdp-carousel--single .pdp-carousel__track{
  display: flex;
  gap: var(--gap, 16px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp-carousel--single .pdp-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ======================
   複数カード横スクロール版
   ====================== */
.pdp-carousel--cards .pdp-carousel__track{
  display: grid;
  grid-auto-flow: column;
  /* カード幅トークン（BPで拡張） */
  --card-w: 280px;
  grid-auto-columns: minmax(var(--card-w), 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px){
  .pdp-carousel--cards .pdp-carousel__track{ --card-w: 300px; }
}
@media (min-width: 1024px){
  .pdp-carousel--cards .pdp-carousel__track{ --card-w: 320px; }
}
.pdp-carousel--cards .pdp-slide{ scroll-snap-align: start; }

/* ======================
   右端チラ見せ（フルブリード）
   ====================== */
.pdp-carousel--peek .pdp-carousel__viewport{
  /* 調整用トークン */
  --peek: 64px;    /* 右の“のぞき”幅（40–80推奨） */
  --card-w: 320px; /* カード幅（280–360推奨） */

  padding-left: 16px;
  padding-right: var(--peek);
  scroll-padding-left: 16px;

  /* 右だけビューポート端まで広げる */
  margin-right: calc(50% - 50vw);

  /* 右端フェード（任意） */
  -webkit-mask-image: linear-gradient(to right,
    black calc(100% - var(--peek)), transparent 100%);
          mask-image: linear-gradient(to right,
    black calc(100% - var(--peek)), transparent 100%);
}
.pdp-carousel--peek .pdp-carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp-carousel--peek .pdp-slide{ scroll-snap-align: start; }

/* ======================
   スライド共通
   ====================== */
.pdp-slide__link img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* ======================
   右下コントロール（任意）
   ====================== */
#pdp-extra-gallery .pdp-extra-controls{
  display:flex; justify-content:flex-end; align-items:center;
  gap:10px; margin-top:20px;
}
#pdp-extra-gallery .pdp-extra-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.95); border:1px solid #e5e7eb;
  box-shadow:0 2px 3px rgba(0,0,0,.06);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition:background .15s, box-shadow .15s, border-color .15s, transform .06s;
}
#pdp-extra-gallery .pdp-extra-btn:hover{
  background:#fff; border-color:#d1d5db; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
#pdp-extra-gallery .pdp-extra-btn:active{ transform:translateY(1px); }

#pdp-extra-gallery .pdp-extra-btn--arrow{
  font-size:22px; font-weight:500; line-height:1; color:#6b7280;
}
#pdp-extra-gallery .pdp-extra-btn--pp{ color:transparent; }
#pdp-extra-gallery .pdp-extra-btn--pp[data-state="playing"]::before,
#pdp-extra-gallery .pdp-extra-btn--pp[data-state="playing"]::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:16px; background:#6b7280; border-radius:1px;
}
#pdp-extra-gallery .pdp-extra-btn--pp[data-state="playing"]::before{ left:16px; }
#pdp-extra-gallery .pdp-extra-btn--pp[data-state="playing"]::after{ right:16px; }
#pdp-extra-gallery .pdp-extra-btn--pp[data-state="paused"]::before{
  content:""; position:absolute; top:50%; left:19px; transform:translateY(-50%);
  width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid #6b7280;
}

/* =========================================================
   Fallback（現在のマークアップ用）
   - .pdp-carousel__viewport が存在しない / モディファイア未指定でも横スクロールに
   ========================================================= */

/* 親に viewport が無い場合、UL(=track) 自身を横スクロールのビューポートにする */
.pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track{
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;

  display: grid;
  grid-auto-flow: column;
  --card-w: 320px;                 /* 必要なら調整 */
  grid-auto-columns: var(--card-w);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track::-webkit-scrollbar{ display:none; }
.pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-slide{ scroll-snap-align: start; }

/* 画面幅でカード幅を可変（任意） */
@media (min-width:640px){
  .pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track{ --card-w: 300px; }
}
@media (min-width:1024px){
  .pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track{ --card-w: 320px; }
}

/* viewport が無い時は track 自体をスクロール要素にする */
.pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track{
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp-carousel:not(:has(.pdp-carousel__viewport)) .pdp-carousel__track::-webkit-scrollbar{ display:none; }

/* JSのアニメ中は snap/smooth を無効化（viewport/track 両対応） */
.pdp-carousel__viewport.is-animating,
.pdp-carousel__track.is-animating{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}