/* ============================================================
   VERETTA SOUNDS — FS Product Detail  v1.0
   対象: body.fs-body-product（FS商品詳細ページ）
   product-detail.html のレイアウトをFS HTMLで再現
   FS管理画面「独自CSS」に貼り付けて使用
   ============================================================ */

/* 01. VARIABLES -------------------------------------------- */


:root {
  --bg:           #000;
  --bg-alt:       #000;
  --bg-dark:      #0C0C0A;
  --text:         #fff;
  --text-muted:   #7C7A74;
  --text-light:   #B6B3AC;
  --text-inv:     #F4F2ED;
  --border:       #000;
  --header-h:     72px;
}

/* 02. fs-l-main リセット ------------------------------------ */
.fs-body-product .fs-l-main {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width:     none !important;
  overflow:      visible !important;
}
.fs-body-product #fs-page-error-container { display: none !important; }

/* 03. 2カラムグリッド --------------------------------------- */
.fs-l-productLayout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  min-height: calc(100vh - var(--header-h)) !important;
}

/* 04. 左カラム: 画像ギャラリー (sticky) -------------------- */
.fs-c-productCarouselMainImage {
  grid-column: 1 !important;
  grid-row: 1 / span 99 !important;
  position: sticky !important;
  top: var(--header-h) !important;
	max-height: 1100px;
  height: calc(100vh - var(--header-h)) !important;
  background: var(--bg-alt) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-right: none !important;
}

/* slick: flex の残り高さを埋める */
.fs-c-productCarouselMainImage__carousel {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* slick の peek パディング・inline height をリセット */
.fs-c-productCarouselMainImage .slick-list {
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.fs-c-productCarouselMainImage .slick-track,
.fs-c-productCarouselMainImage .slick-slide,
.fs-c-productCarouselMainImage .slick-slide > div {
  height: 100% !important;
}

/* メイン画像 */
.fs-c-productCarouselMainImage__image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.fs-c-productCarouselMainImage__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: grayscale(15%) contrast(1.05) !important;
  transition: filter 0.5s ease !important;
}

/* 矢印・拡大ボタン非表示 */
.fs-c-productCarouselMainImage .slick-prev,
.fs-c-productCarouselMainImage .slick-next,
.fs-c-productCarouselMainImage__expandButton {
  display: none !important;
}

/* サムネイルリスト */
.fs-c-productCarouselMainImage__thumbnailList {
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  background: var(--bg-alt) !important;
}

.fs-c-productCarouselMainImage{ height: auto !important}
.fs-c-productCarouselMainImage__thumbnailList li {
  flex: 1 !important;
  list-style: none !important;
  cursor: pointer !important;
		width: 64px; height: 64px;

}
.fs-c-productCarouselMainImage__thumbnail {
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  opacity: 0.45 !important;
  border: 1px solid transparent !important;
  transition: opacity 0.15s ease, border-color 0.15s ease !important;
	width: 64px;
}
.fs-c-productCarouselMainImage__thumbnailList li.slick-active .fs-c-productCarouselMainImage__thumbnail,
.fs-c-productCarouselMainImage__thumbnailList li:hover .fs-c-productCarouselMainImage__thumbnail {
  opacity: 1 !important;
  border-color: var(--text) !important;
}
.fs-c-productCarouselMainImage__thumbnail__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 05. 右カラム: 全要素共通 ---------------------------------- */
.fs-l-productLayout > *:not(.fs-c-productCarouselMainImage) {
  grid-column: 2 !important;
  margin-left:  clamp(32px, 5vw, 80px) !important;
  padding-right: clamp(32px, 5vw, 80px) !important;
}

/* 06. 商品名 ----------------------------------------------- */
.fs-c-productNameHeading {
  padding-top: clamp(48px, 6vw, 80px) !important;
  margin: 0 0 8px !important;
  border: none !important;
  background: transparent !important;
}
.fs-c-productNameHeading__name {
  font-size: clamp(30px, 3.5vw, 52px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
  display: block !important;
}

/* 07. 商品番号 --------------------------------------------- */
.fs-c-productNumber {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
}
.fs-c-productNumber__label { display: none !important; }
.fs-c-productNumber__number {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
}

/* 08. 価格 -------------------------------------------------- */
.fs-c-productPrices--productDetail {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
  border-bottom: 1px solid var(--border) !important;
}
.fs-c-productPrices--productDetail .fs-c-productPrice__main__label {
  display: none !important;
}
.fs-c-productPrices--productDetail .fs-c-productPrice__main__price,
.fs-c-productPrices--productDetail .fs-c-price {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--text) !important;
}
.fs-c-productPrices--productDetail .fs-c-price__currencyMark { font-size: 16px !important; }
.fs-c-productPrices--productDetail .fs-c-productPrice__addon__label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: #fff!important;
}

/* 09. バリエーション選択パネル ----------------------------- */
.fs-c-productChooseVariation {
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  background: transparent !important;
  border: none !important;
}
.fs-c-variationPanelList__label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.fs-c-variationLabel__label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 300 !important;
}
.fs-c-variationLabel__value {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--text) !important;
}
.fs-c-variationPanelList__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.fs-c-variationPanelList__list__item { list-style: none !important; }

/* radio 非表示 */
.fs-c-variationPanelList__radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
/* label → variant-btn スタイル */
.fs-c-variationPanelList__panel {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.fs-c-variationPanelList__panel:hover,
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel {
  background: var(--text) !important;
  color: #000 !important;
  border-color: var(--text) !important;
}
.fs-c-variationPanelList__panel__caption,
.fs-c-variationPanelList__panel__stock,
.fs-c-variationPanelList__panel__price { display: none !important; }

/* 10. 数量セレクト ----------------------------------------- */
.fs-c-productQuantityAndWishlist {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: none !important;
}
.fs-c-productQuantityAndWishlist__wishlist { display: none !important; }
.fs-c-quantity__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  padding: 12px 36px 12px 16px !important;
  height: 52px !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background-color: #000 !important;
  background-image: url("https://verettasounds.itembox.cloud/item/arw.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
  cursor: pointer !important;
  min-width: 80px !important;
  box-shadow: none !important;
}
.fs-c-quantity__select:focus {
  outline: none !important;
  border-color: var(--text) !important;
}
.fs-c-quantity__message { display: none !important; }

/* 11. カートボタン ----------------------------------------- */
.fs-c-productActionButton {
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  background: transparent !important;
  border: none !important;
}
.fs-c-button--addToCart--detail {
  width: 100% !important;
  padding: 18px 32px !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid var(--bg-dark) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: block !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: background 0.3s ease !important;
}
.fs-c-button--addToCart--detail:hover {
  background: #2A2A28 !important;
  border-color: #2A2A28 !important;
}

/* 12. 商品説明 --------------------------------------------- */
.fs-p-productDescription {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  color: var(--text-muted) !important;
  padding-top: clamp(32px, 4vw, 48px) !important;
  margin-bottom: clamp(48px, 6vw, 80px) !important;
  border-top: 1px solid var(--border) !important;
}
.fs-p-productDescription p + p { margin-top: 12px !important; }

/* 13. 非表示要素 ------------------------------------------- */
.fs-c-returnedSpecialContract,
.fs-c-inquiryAboutProduct,
.fs-c-productReview { display: none !important; }

/* 14. RESPONSIVE ------------------------------------------- */
@media (max-width: 1024px) {
  .fs-l-productLayout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .fs-c-productCarouselMainImage {
    grid-row: 1 !important;
    position: relative !important;
    top: 0 !important;
    height: 70vw !important;
    max-height: 560px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .fs-l-productLayout > *:not(.fs-c-productCarouselMainImage) {
    grid-column: 1 !important;
    padding-top: 0 !important;
  }
  .fs-c-productNameHeading {
    padding-top: clamp(32px, 5vw, 56px) !important;
  }
}
@media (max-width: 1024px) {
  :root { --header-h: 60px; }
  .fs-l-productLayout > *:not(.fs-c-productCarouselMainImage) {
	  margin-left: 0;
    padding-left:  20px !important;
    padding-right: 20px !important;
  }
/* ── 商品詳細 メイン画像 100%幅・見切れ解消 ── */
.fs-c-productCarouselMainImage__carousel .slick-list {
  padding: 0 !important;
  height: auto !important;
}

.fs-c-productCarouselMainImage {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.fs-c-productCarouselMainImage__image {
  width: 100% !important;
}

.fs-c-productCarouselMainImage__image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── サムネイル余白 ── */
.fs-c-productCarouselMainImage__thumbnailList {
  padding: 8px 16px !important;
}
	    .fs-l-productLayout > *:not(.fs-c-productCarouselMainImage) {
        margin-left: 0;
			padding-left: 0;}
	/* ── 商品詳細 メイン画像 高さを自動に（見切れ解消） ── */
.fs-c-productCarouselMainImage__carousel .slick-list {
  height: auto !important;
}

.fs-c-productCarouselMainImage__image img {
  height: auto !important;
  max-height: none !important;
}
	.fs-l-productLayout > *:not(.fs-c-productCarouselMainImage){ padding-left: 0 !important}
	

  /* slickのインライン height を上書き */
  #fs_productCarouselMainImage .slick-list {
    height: auto !important;
    overflow: hidden !important; /* スクロールバー防止 */
  }

  /* slick-track の高さも自動に */
  #fs_productCarouselMainImage .slick-track {
    height: auto !important;
  }

  /* 各スライドの figure を縦横比で制御 */
  .fs-c-productCarouselMainImage__image {
    width: 100% !important;
    aspect-ratio: 1 / 1; /* 正方形。4/3や3/2にも変更可 */
    overflow: hidden !important;
  }

  .fs-c-productCarouselMainImage__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ページ全体の横スクロール防止 */
  body {
    overflow-x: hidden !important;
  }
	
	#fs_productCarouselMainImage .slick-list {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

#fs_productCarouselMainImage .slick-track {
  height: auto !important;
  max-height: none !important;
}

.fs-c-productCarouselMainImage__image {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important; /* aspect-ratio指定も解除 */
}

.fs-c-productCarouselMainImage__image img {
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: unset !important;
}
	#fs_productCarouselMainImage .slick-list {
  padding: 0 !important;
  height: auto !important;
}

#fs_productCarouselMainImage .slick-slide {
  height: auto !important;
}

#fs_productCarouselMainImage .slick-slide > div {
  height: auto !important;
}

#fs_productCarouselMainImage .fs-c-productCarouselMainImage__image {
  height: auto !important;
}

#fs_productCarouselMainImage .fs-c-productCarouselMainImage__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
	
	.fs-c-productCarouselMainImage {

		height: auto !important;}
	.fs-c-productCarouselMainImage{ margin-bottom: 4vw}

}
.fs-c-productCarouselMainImage__thumbnailList > li {
	flex-basis: 64px !important;}
.fs-c-productCarouselMainImage__thumbnailList li{
	flex: 0 !important;}
.fs-c-productCarouselMainImage__thumbnailList {
	display: block !important; padding-top: 10px; overflow: hidden;}
.fs-c-productCarouselMainImage__thumbnailList > li { display: inline-block; margin-top: 10px;}
.fs-c-productChooseVariation__variation{ margin-bottom: 20px}




/* ── 商品詳細 メイン画像 正方形固定 ── */

/* figureを正方形に */
.fs-c-productCarouselMainImage__image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* img を正方形内に収める */
.fs-c-productCarouselMainImage__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2枚間の余白 */
#fs_productCarouselMainImage {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* slick-listのpadding・height上書き（Slick初期化された場合の保険） */
#fs_productCarouselMainImage .slick-list {
  padding: 0 !important;
  height: auto !important;
}