/* ============================================================
   VERETTA SOUNDS — FS Top Page  v5.0
   実際のslick構造: __itemTrack > .slick-list > .slick-track > .slick-slide
   ============================================================ */

:root {
  --bg-alt:    #000;
  --bg-dark:   #000;
  --text:      #111110;
  --text-muted:#7C7A74;
  --text-light:#B6B3AC;
  --text-inv:  #F4F2ED;
  --border:    #DAD7CF;
  --font-body: "Archivo", sans-serif;
  --font-mono: "Archivo", sans-serif;
}

/* ---- 01. product-grid内で全幅に ----------------------------- */
#shop .product-grid .fs-c-productListCarousel {
  grid-column: 1 / -1 !important;
}

/* ---- 02. __list / __itemTrack をブロック化 ------------------ */
#shop .fs-c-productListCarousel__list {
  display:  block   !important;
  overflow: visible !important;
  height:   auto    !important;
  width:    auto    !important;
}
#shop .fs-c-productListCarousel__list__itemTrack {
  display: block !important;
  width:   auto  !important;
  height:  auto  !important;
}

/* ---- 03. slick-list の overflow:hidden を解除 --------------- */
#shop .fs-c-productListCarousel__list__itemTrack .slick-list {
  overflow: visible !important;
  height:   auto    !important;
  width:    auto    !important;
}

/* ---- 03b. slick-track の ::before / ::after を無効化 --------
   fs_style.css が .slick-track::before { display:table } を付けるため
   grid の1セル目を占有してしまう → content:none で消す          */
#shop .fs-c-productListCarousel__list__itemTrack .slick-track::before,
#shop .fs-c-productListCarousel__list__itemTrack .slick-track::after {
  content: none    !important;
  display: none    !important;
}

/* ---- 04. slick-track → 4カラムグリッド ---------------------- */
/* slick の inline: transform / width / left をリセット         */
#shop .fs-c-productListCarousel__list__itemTrack .slick-track {
  display:               grid                     !important;
  grid-template-columns: repeat(4, 1fr)           !important;
  gap:                   clamp(16px, 2.5vw, 32px) !important;
  transform:             none                     !important;
  -webkit-transform:     none                     !important;
  width:                 auto                     !important;
  height:                auto                     !important;
  left:                  auto                     !important;
  float:                 none                     !important;
  opacity:               1                        !important;
  transition:            none                     !important;
}

/* ---- 05. slick-slide → グリッドセル ------------------------- */
/* fs_style.css の float:left / min-height:1px を上書き        */
#shop .fs-c-productListCarousel__list__itemTrack .slick-slide {
  display:        flex    !important;
  flex-direction: column  !important;
  width:          auto    !important;
  min-width:      0       !important;
  height:         auto    !important;
  min-height:     0       !important;
  float:          none    !important;
  visibility:     visible !important;
  opacity:        1       !important;
  position:       relative !important;
  left:           auto    !important;
  /* aria-hidden のスライドも表示 */
}

/* aria-hidden="true" のスライドを強制表示 */
#shop .fs-c-productListCarousel__list__itemTrack .slick-slide[aria-hidden="true"] {
  display:    flex    !important;
  visibility: visible !important;
  opacity:    1       !important;
}

/* slick が各スライド内に挿入する <div> ラッパーを透過 */
#shop .fs-c-productListCarousel__list__itemTrack .slick-slide > div {
  display: contents !important;
}

/* ---- 06. cloned スライドを非表示 ----------------------------
   詳細度を .slick-slide ルール (1ID+2class=120) より高くする
   1ID + 3class = 130 で勝てる                               */
#shop .fs-c-productListCarousel__list__itemTrack .slick-slide.slick-cloned {
  display: none !important;
}


/* ---- 08. 前へ / 次へボタン非表示 ---------------------------- */
#shop .fs-c-productListCarousel__ctrl,
#shop .slick-prev,
#shop .slick-next,
#shop .slick-dots {
  display: none !important;
}

/* ---- 09. 画像コンテナ --------------------------------------- */
#shop .fs-c-productListItem__imageContainer {
  position:     relative !important;
  overflow:     hidden   !important;
  aspect-ratio: 3 / 3   !important;
  width:        100%     !important;
  margin-bottom: 14px   !important;
  background:   var(--bg-alt) !important;
  flex-shrink:  0        !important;
}
#shop .fs-c-productListItem__image,
#shop .fs-c-productImage {
  display: block !important;
  width:   100%  !important;
  height:  100%  !important;
}
#shop .fs-c-productListItem__image > a {
  display: block !important;
  width:   100%  !important;
  height:  100%  !important;
}
#shop .fs-c-productListItem__image__image {
  width:      100%  !important;
  height:     100%  !important;
  object-fit: cover !important;
  display:    block !important;
  filter: grayscale(20%) contrast(1.05) !important;
  transition: transform 0.65s cubic-bezier(0,0,0.2,1),
              filter    0.65s ease      !important;
}
#shop .slick-slide:hover .fs-c-productListItem__image__image {
  transform: scale(1.05) !important;
  filter:    grayscale(0%) contrast(1.05) !important;
}

/* ---- 10. 商品名 --------------------------------------------- */
#shop .fs-c-productListItem__productName a,
#shop .fs-c-productName a {
  font-size:       15px !important;
  font-weight:     400  !important;
  color:           #fff !important;
  text-decoration: none !important;
}
#shop .slick-slide:hover .fs-c-productListItem__productName a {
  color: var(--text-muted) !important;
}
.fs-c-button--addToWishList--icon { display: none}

/* ---- 11. 価格 ----------------------------------------------- */
#shop .fs-c-productPrice__main__label { display: none !important; }
#shop .fs-c-productPrice__main__price,
#shop .fs-c-price {
  font-family:    var(--font-mono) !important;
  font-size:      13px !important;
  color:          #fff !important;
  letter-spacing: 0.02em !important;
  font-weight:    400 !important;
}
#shop .fs-c-price__currencyMark { font-size: 11px !important; }
#shop .fs-c-productPrice__addon__label {
  font-family: var(--font-mono) !important;
  font-size:   10px !important;
  color:       #fff !important;
  margin-left: 3px !important;
}

/* ---- 12. ボタン --------------------------------------------- */
#shop .fs-c-productListItem__control {
  margin-top:     auto  !important;
  display:        flex  !important;
  flex-direction: column !important;
  gap:            6px   !important;
}
#shop .fs-c-button--addToCart--list {
  width:          100%  !important;
  padding:        11px 20px !important;
  background:     var(--bg-dark) !important;
  color:          var(--text-inv) !important;
  border:         1px solid var(--bg-dark) !important;
  border-radius:  0 !important;
  font-family:    var(--font-body) !important;
  font-size:      10px !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;
}
#shop .fs-c-button--addToCart--list:hover {
  background:   #2A2A28 !important;
  border-color: #2A2A28 !important;
}
#shop .fs-c-button--addToWishList--icon {
  font-family:    var(--font-mono) !important;
  font-size:      10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--text-light) !important;
  background:     none  !important;
  border:         none  !important;
  cursor:         pointer !important;
  padding:        2px 0 !important;
  text-align:     left  !important;
  width:          100%  !important;
}
#shop .fs-c-button--addToWishList--icon:hover { color: var(--text) !important; }

/* ---- 13. RESPONSIVE ----------------------------------------- */
@media (max-width: 1024px) {
  #shop .fs-c-productListCarousel__list__itemTrack .slick-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  #shop .fs-c-productListCarousel__list__itemTrack .slick-track {
    gap: 12px !important;
  }
}
.fs-c-price {

    justify-content: flex-start;
}