/* Otomatik: Medya ayarları kaydedilince üretilir — elle düzenlemeyin */
.ws-product-card-img {
  aspect-ratio: 600 / 600;
}
.ws-product-show .ws-product-gallery-main-img {
  aspect-ratio: 1000 / 1000;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.ws-product-show {
  --ws-product-gallery-ratio: 1000 / 1000;
  --ws-gallery-thumb-w: 64px;
  --ws-gallery-thumb-h: 64px;
}
.ws-product-show .sf-attr-btn.color-item.has-swatch-image {
  width: 64px;
  height: 64px;
  max-width: 100%;
}
/* Ek görseller = Color (varyasyon) ebatı; tema 100px kuralını ezer */
.ws-product-show #sf-gallery-thumbs.mySwiper .swiper-wrapper {
  gap: 0;
}
.ws-product-show #sf-gallery-thumbs.mySwiper .swiper-wrapper .swiper-slide {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px;
  aspect-ratio: auto;
  box-sizing: border-box;
}
.ws-product-show #sf-gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1024px) {
  .ws-product-show #sf-gallery-thumbs.mySwiper .swiper-wrapper .swiper-slide {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Kategori kartı hover renkleri — daire varsayılan; görselli swatch’ta card_color ebatı
 * Puan hover’da yer kaplamaya devam eder (opacity); kayma buna göre ayarlanır. */
.product-item.has-card-colors {
  --ws-card-swatch-w: 32px;
  --ws-card-swatch-h: 32px;
  --ws-card-price-shift: 36px;
}
.product-item.has-card-colors:has(.product-rate) {
  --ws-card-price-shift: max(0px, calc(36px - 1.5rem));
}
.product-item.has-card-colors:has(.color-item.has-swatch-image) {
  --ws-card-swatch-w: 60px;
  --ws-card-swatch-h: 60px;
  /* İsim (~1.5rem) */
  --ws-card-price-shift: max(0px, calc(var(--ws-card-swatch-h) - 1.5rem));
}
.product-item.has-card-colors:has(.color-item.has-swatch-image):has(.product-category) {
  /* Kategori + isim (~2.75rem) */
  --ws-card-price-shift: max(0px, calc(var(--ws-card-swatch-h) - 2.75rem));
}
.product-item.has-card-colors:has(.color-item.has-swatch-image):has(.product-rate) {
  /* İsim + puan (~3rem) */
  --ws-card-price-shift: max(0px, calc(var(--ws-card-swatch-h) - 3rem));
}
.product-item.has-card-colors:has(.color-item.has-swatch-image):has(.product-category):has(.product-rate) {
  /* Kategori + isim + puan (~4.25rem) */
  --ws-card-price-shift: max(0px, calc(var(--ws-card-swatch-h) - 4.25rem));
}
.product-item .list-color .color-item.has-swatch-image {
  width: var(--ws-card-swatch-w, 60px);
  height: var(--ws-card-swatch-h, 60px);
  border: 0 !important;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}
.product-item .list-color .color-item.has-swatch-image:hover,
.product-item .list-color .color-item.has-swatch-image.active {
  border: 0 !important;
}
.product-item .list-color .color-item.has-swatch-image .ws-card-swatch-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.product-item .list-color .color-item .ws-card-swatch-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}
.product-item.has-card-colors .product-main .product-infor .list-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  z-index: 2;
  line-height: 0;
  height: var(--ws-card-swatch-h, 32px);
}
/* Hover’da fiyat swatch altına kayar; yer rezervi yalnızca kayma kadar */
.product-item.grid-type.has-card-colors .product-main .product-infor {
  margin-bottom: var(--ws-card-price-shift, 36px);
}

/* Renk yoksa hover’da isim/fiyat kaymasın */
@media (min-width: 1024px) {
  .product-item.grid-type:not(.has-card-colors):hover .product-main .product-infor .product-name {
    opacity: 1;
    visibility: visible;
  }
  .product-item.grid-type:not(.has-card-colors):hover .product-main .product-infor .product-price-block {
    transform: none;
  }
  /* Renk varken fiyat swatch altına kayar (rozet translate product-card.css’te; margin-top koru) */
  .product-item.grid-type.has-card-colors:hover .product-main .product-infor .product-price-block {
    transform: translateY(var(--ws-card-price-shift, 36px));
  }
}