/* 在庫の詳細ページの写真ギャラリー（stock-sites 共通・2026-10-10 永谷さん決定のルール）
   DOZO（CarGallery）と同じ動き：大きい写真に前・次の矢印と「n / N」、スワイプで切り替え。
   小さい写真は PC では並べて表示、スマホでは1列の横スクロール（数が多くても扱いやすいように）。
   使う側：<div class="cg" data-cg> …（render が書き出す）＋ gallery.js。色は .cg{--cg-accent} で上書き */
.cg { --cg-accent: #e60012; min-width: 0; max-width: 100%; }  /* グリッドの中でも横スクロールの列がページを押し広げないように */
.cg-main { position: relative; background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; touch-action: pan-y; }
.cg-main > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cg .cg-prev, .cg .cg-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cg .cg-prev:hover, .cg .cg-next:hover { background: rgba(0,0,0,.65); }
.cg .cg-prev { left: 8px; }
.cg .cg-next { right: 8px; }
.cg .cg-prev svg, .cg .cg-next svg { width: 18px; height: 18px; }
.cg-count { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 1.6; padding: 1px 10px; border-radius: 999px; }
.cg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.cg .cg-thumbs button { position: relative; padding: 0; margin: 0; min-height: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: #eee; aspect-ratio: 4 / 3; }
.cg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg .cg-thumbs button.on { border-color: var(--cg-accent); }
@media (max-width: 640px) {
  .cg-thumbs { display: flex; max-width: 100%; overflow-x: auto; gap: 4px; padding: 2px 0 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .cg .cg-thumbs button { flex: 0 0 64px; height: 48px; aspect-ratio: auto; scroll-snap-align: start; }
  .cg .cg-prev, .cg .cg-next { width: 36px; height: 36px; }
}