/* ====== Product Detail – Pure CSS Gallery ====== */
.pd{max-width:1200px;margin:0 auto;padding:24px}
.pd-grid{display:grid;gap:32px}
@media(min-width:1024px){.pd-grid{grid-template-columns:minmax(520px,58%) 1fr}}

.pdv{position:absolute;opacity:0;pointer-events:none} /* hidden radios */

/* メイン画像 */
.pd-hero{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);background:#111}
.pd-hero img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;aspect-ratio:4/3;opacity:0;transition:.25s}
#pdv1:checked ~ .pd-hero img[data-for="pdv1"],
#pdv2:checked ~ .pd-hero img[data-for="pdv2"],
#pdv3:checked ~ .pd-hero img[data-for="pdv3"],
#pdv4:checked ~ .pd-hero img[data-for="pdv4"],
#pdv5:checked ~ .pd-hero img[data-for="pdv5"],
#pdv6:checked ~ .pd-hero img[data-for="pdv6"],
#pdv7:checked ~ .pd-hero img[data-for="pdv7"],
#pdv8:checked ~ .pd-hero img[data-for="pdv8"],
#pdv9:checked ~ .pd-hero img[data-for="pdv9"],
#pdv10:checked ~ .pd-hero img[data-for="pdv10"]{opacity:1}

/* キャプション（選択中のみ表示） */
.pd-cap{margin:8px 0 0;font-size:1.05rem;line-height:1.7}
.pd-cap span{display:none}
#pdv1:checked ~ .pd-cap span[data-for="pdv1"],
#pdv2:checked ~ .pd-cap span[data-for="pdv2"],
#pdv3:checked ~ .pd-cap span[data-for="pdv3"],
#pdv4:checked ~ .pd-cap span[data-for="pdv4"],
#pdv5:checked ~ .pd-cap span[data-for="pdv5"],
#pdv6:checked ~ .pd-cap span[data-for="pdv6"],
#pdv7:checked ~ .pd-cap span[data-for="pdv7"],
#pdv8:checked ~ .pd-cap span[data-for="pdv8"],
#pdv9:checked ~ .pd-cap span[data-for="pdv9"],
#pdv10:checked ~ .pd-cap span[data-for="pdv10"]{display:block}

/* サムネ */
.pd-thumbs{display:flex;gap:8px;list-style:none;padding:0;margin:10px 0 0;overflow-x:auto}
.pd-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.25)}
.pd-thumbs label{display:block;cursor:pointer}
.pd-thumbs label:focus-visible{outline:2px solid #c9a14a;outline-offset:2px}

/* 右カラム */
.pd-title{margin:0 0 6px;font-size:28px}
.pd-price{margin:0 0 8px;color:#c9a14a;font-weight:700;font-size:22px}
.pd-cta{display:inline-block;padding:12px 20px;border-radius:999px;background:#fff;color:#111;border:0;cursor:pointer}
.pd-story{margin-top:16px;border-top:1px solid #ddd;padding-top:12px}
.pd-story>summary{cursor:pointer;font-weight:700}

/* ====== 商品詳細（カラーミー）– CSSだけで切替 ====== */
.pdv{position:absolute;opacity:0;pointer-events:none}

.pd-media{display:flex;flex-direction:column;gap:10px}
.pd-hero{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#111}
.pd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;aspect-ratio:4/3;opacity:0;transition:.25s}

/* 最大10枚まで対応（必要に応じて増やせます） */
#pdv1:checked ~ .pd-hero img[data-for="pdv1"],
#pdv2:checked ~ .pd-hero img[data-for="pdv2"],
#pdv3:checked ~ .pd-hero img[data-for="pdv3"],
#pdv4:checked ~ .pd-hero img[data-for="pdv4"],
#pdv5:checked ~ .pd-hero img[data-for="pdv5"],
#pdv6:checked ~ .pd-hero img[data-for="pdv6"],
#pdv7:checked ~ .pd-hero img[data-for="pdv7"],
#pdv8:checked ~ .pd-hero img[data-for="pdv8"],
#pdv9:checked ~ .pd-hero img[data-for="pdv9"],
#pdv10:checked ~ .pd-hero img[data-for="pdv10"]{opacity:1}

/* キャプション：選択中だけ表示 */
.pd-cap{margin:6px 0 0;font-size:1.05rem;line-height:1.7}
.pd-cap span{display:none}
#pdv1:checked ~ .pd-cap span[data-for="pdv1"],
#pdv2:checked ~ .pd-cap span[data-for="pdv2"],
#pdv3:checked ~ .pd-cap span[data-for="pdv3"],
#pdv4:checked ~ .pd-cap span[data-for="pdv4"],
#pdv5:checked ~ .pd-cap span[data-for="pdv5"],
#pdv6:checked ~ .pd-cap span[data-for="pdv6"],
#pdv7:checked ~ .pd-cap span[data-for="pdv7"],
#pdv8:checked ~ .pd-cap span[data-for="pdv8"],
#pdv9:checked ~ .pd-cap span[data-for="pdv9"],
#pdv10:checked ~ .pd-cap span[data-for="pdv10"]{display:block}

/* サムネ（極小） */
.pd-thumbs{display:flex;gap:8px;list-style:none;margin:8px 0 0;padding:0;overflow-x:auto}
.pd-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.25)}
.pd-thumbs label{display:block;cursor:pointer}
.pd-thumbs label:focus-visible{outline:2px solid #c9a14a;outline-offset:2px}
/* ===== HOTFIX: ギャラリーの初期表示を保証 & 競合回避 ===== */

/* まずギャラリー枠に最低高を与えてチラつき防止（必要なら数値調整） */
.pd-media .pd-hero{ min-height: 420px; }

/* 画像は基本非表示、is-activeだけ表示（競合を避けるため !important を付与） */
.pd-media .pd-hero img{ opacity:0 !important; }
.pd-media .pd-hero img.is-active{ opacity:1 !important; }

/* ラジオCSSが効かない環境でも “最初の1枚” を必ず見せる保険 */
.pd-media .pd-hero img[data-for="pdv1"]{ opacity:1 !important; }
/* ===== タイトルを最上部で大きく ===== */
.p-product-title{
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 12px 0 16px;
}

/* ===== メイン画像は .pd-media のみを使う：既存の別スライダーは抑止 ===== */
.js-images-slider,
.p-product-visual,
.p-product-visual-wrap,
.p-product-thumb,
.p-product-thumb-list { display: none !important; }

/* 参考：ギャラリー初期表示の保険（競合回避） */
.pd-media .pd-hero{ min-height: 420px; }
.pd-media .pd-hero img{ opacity:0 !important; }
.pd-media .pd-hero img.is-active,
.pd-media .pd-hero img[data-for="pdv1"]{ opacity:1 !important; }