.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track-wrapper, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track-wrapper {
  position: relative;
  width: 100%;
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  overflow-x: auto;
  /* SNAP TAMAMEN KAPALI. Önce `mandatory` vardı (yapış yapış), sonra
     `proximity` denendi — o da bırakınca şeridi en yakın karta çekiyordu.
     Fare ile serbest sürükleme istendiği için ikisi de kaldırıldı. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;

  /* Sürüklerken metin seçilmesin */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

/* Sürükleme sırasında: `scroll-behavior: smooth` her scrollLeft atamasını
   animasyona sokup sürüklemeyi geciktiriyor, bu yüzden kapatılıyor.
   Snap da kapanıyor ki parmak/fare nereye bırakırsa orada kalsın. */
.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track.is-dragging, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track::-webkit-scrollbar, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track::-webkit-scrollbar {
  display: none;
}

/* Mobilde 1.5 kart görünür — yarım kart "buradan devamı var" sinyali (peek).
   Ürün kartı kategori kartından daha yoğun (ad + fiyat + buton), 2.5'te
   dar kalıyordu.
   Görseller de sürüklenmesin: fareyle şeridi çekerken tarayıcı görseli
   sürükle-bırak nesnesi sanıyordu. */
.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track > .product-card, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track > .product-card {
  flex: 0 0 calc((100% - var(--space-sm) * 0.5) / 1.5);
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track img, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track img, .cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track a, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track a {
  -webkit-user-drag: none;
  user-select: none;
}

/* Masaüstünde 4.5 — yarım kart peek olarak kalır. */
@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-track > .product-card, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-track > .product-card {
    flex: 0 0 calc(
      (100% - (var(--space-sm) * (var(--products-per-view, 4.5) - 1))) /
        var(--products-per-view, 4.5)
    );
  }
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow {
  position: absolute;
  top: var(--arrow-top, 50%);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--slider-accent, var(--color-accent));
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow[aria-hidden="true"], .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow--prev, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow--prev {
  left: -20px;
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow--next, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow--next {
  right: -20px;
}

@media (min-width: 768px) {
  .cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow {
    transition: background-color 200ms ease, border-color 200ms ease,
      color 200ms ease, opacity 200ms ease;
  }
}

.cc_vf4ft4MdSc_qV4CbzYgB6 .product-slider-arrow:hover, .cc_vf4ft4MdSc_multi_tab_product_slider .product-slider-arrow:hover {
  background-color: var(--slider-accent, var(--color-accent));
  border-color: var(--slider-accent, var(--color-accent));
  color: var(--color-surface);
}

/* ═══════════════════════════════════════════════════════════════
   IZGARA MODU

   Şerit ve ızgara AYNI DOM'u paylaşıyor; geçiş tamamen CSS'te.
   Kategori karuselinde de kalıp bu — iki ayrı render yapılsaydı
   "masaüstü ızgara + mobil şerit" gibi kombinasyonlar imkânsız olurdu.

   Sıra önemli: aşağıdaki kurallar yukarıdaki flex/overflow kurallarından
   SONRA geliyor, çünkü aynı özgüllükte olup onları eziyorlar.
   Mobil kuralı 1023px'te kesiliyor, masaüstü kuralı 1024px'te başlıyor —
   böylece iki kırılım birbirini ezmiyor ve karışık kombinasyon çalışıyor.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .cc_vf4ft4MdSc_qV4CbzYgB6 .pst--m-grid .product-slider-track, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--m-grid .product-slider-track {
    display: grid;
    grid-template-columns: repeat(var(--pst-m-cols, 2), minmax(0, 1fr));
    overflow-x: visible;
    cursor: default;
    padding-bottom: 0;
  }

  /* flex payı ızgarada sütunu bozar — sıfırlanıyor */
  .cc_vf4ft4MdSc_qV4CbzYgB6 .pst--m-grid .product-slider-track > .product-card, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--m-grid .product-slider-track > .product-card {
    flex: initial;
  }
}

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_qV4CbzYgB6 .pst--d-grid .product-slider-track, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--d-grid .product-slider-track {
    display: grid;
    grid-template-columns: repeat(var(--pst-d-cols, 4), minmax(0, 1fr));
    overflow-x: visible;
    cursor: default;
    padding-bottom: 0;
  }

  .cc_vf4ft4MdSc_qV4CbzYgB6 .pst--d-grid .product-slider-track > .product-card, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--d-grid .product-slider-track > .product-card {
    flex: initial;
  }
}

/* Izgarada satır arası boşluk sütun boşluğundan biraz geniş olsun —
   kartların altındaki "Sepete Ekle" butonu bir sonraki satırın görseline
   yapışık durmasın. */
.cc_vf4ft4MdSc_qV4CbzYgB6 .pst--m-grid .product-slider-track, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--m-grid .product-slider-track, .cc_vf4ft4MdSc_qV4CbzYgB6 .pst--d-grid .product-slider-track, .cc_vf4ft4MdSc_multi_tab_product_slider .pst--d-grid .product-slider-track {
  row-gap: calc(var(--space-sm) * 1.5);
}