/* Imported from: ../../styles/section.css */
/* ===== Ortak bölüm iskeleti =====
 * Anasayfadaki her bölüm aynı başlık alanını, aynı sekme çubuğunu ve aynı
 * ızgara aralığını kullanır. Tek yerde tanımlı olması "tüm bölümler birbiriyle
 * uyumlu" şartının teknik karşılığı: bir değeri değiştirmek hepsini değiştirir.
 *
 * Her değer editörden ezilebilir; var() ikinci argümanı tasarım varsayılanıdır.
 * Bu dosyayı kullanan bölüm CSS'i, kendi başına bu dosyayı import etmek
 * ZORUNDA — import edilmeyen stil derlemede sessizce düşer.
 * (Örnek yolu buraya yazmıyoruz: derleyicinin import tarayıcısı yorum
 *  satırlarını ayıklamıyor, yorumdaki yolu da çözmeye çalışıyor.)
 */

/* Bölüm dikey boşluğu. İki bölümün dikişi bunun iki katı okunuyor
   (üsttekinin alt boşluğu + alttakinin üst boşluğu): mobilde 64px,
   masaüstünde 80px. Bölüm başına "Bölüm Boşlukları" propları ezer. */
.cc_c1wmfzom_bdGVMblQxB .mays-section {
  width: 100%;
  padding-top: var(--sec-pt, 2rem);
  padding-bottom: var(--sec-pb, 2rem);
}

.cc_c1wmfzom_bdGVMblQxB .mays-section__container {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap, 1.25rem);
  max-width: var(--sec-max-w, none);
  margin-inline: auto;
  width: 100%;
}

/* ----- Başlık alanı ----- */

.cc_c1wmfzom_bdGVMblQxB .mays-section__head {
  display: flex;
  flex-direction: column;
  align-items: var(--head-align, center);
  gap: var(--head-gap, 0.5rem);
  text-align: var(--head-text-align, center);
}

/* Varsayılan: label-sm-medium (12px / 18px / 500 / .017em / uppercase).
   Satır yüksekliği varsayılanı BİRİMSİZ oran: editörden yalnızca puntoyu
   büyüten kişi rem cinsinden donmuş bir satır kutusuna sıkışıyordu — başlık
   büyüyüp altındaki giriş metninin üstüne biniyordu. 1.5 × 12px = 18px, yani
   varsayılan görünüm bit birebir aynı kalıyor, punto büyüyünce boşluk da
   onunla büyüyor. Satır yüksekliği propu yazıldığında yine o kazanır. */
.cc_c1wmfzom_bdGVMblQxB .mays-section__title {
  margin: 0;
  font-size: var(--sec-title-fs, 0.75rem);
  line-height: var(--sec-title-lh, 1.5);
  font-weight: var(--sec-title-fw, 500);
  letter-spacing: var(--sec-title-ls, 0.017em);
  text-transform: var(--sec-title-tt, uppercase);
  color: var(--sec-title-color, var(--kombos-gray-900));
}

/* Varsayılan: text-sm-regular (14px / 20px / 400).
   Satır yüksekliği yine birimsiz oran — 20/14 = 1.4286, 14px'te 20px eder. */
.cc_c1wmfzom_bdGVMblQxB .mays-section__desc {
  margin: 0;
  max-width: var(--sec-desc-max-w, 34rem);
  font-size: var(--sec-desc-fs, 0.875rem);
  line-height: var(--sec-desc-lh, 1.4286);
  font-weight: var(--sec-desc-fw, 400);
  letter-spacing: var(--sec-desc-ls, normal);
  text-transform: var(--sec-desc-tt, none);
  color: var(--sec-desc-color, var(--kombos-muted));
}

/* ----- Sekmeler (Kadın / Erkek) ----- */

.cc_c1wmfzom_bdGVMblQxB .mays-section__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sec-tab-gap, 1.5rem);
}

/* Varsayılan: label-sm-regular. Aktif sekme dolgu değil, ince çizgi alır. */
.cc_c1wmfzom_bdGVMblQxB .mays-section__tab {
  position: relative;
  padding: 0.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--sec-tab-fs, 0.75rem);
  line-height: 1.125rem;
  font-weight: var(--sec-tab-fw, 400);
  letter-spacing: var(--sec-tab-ls, 0.017em);
  text-transform: var(--sec-tab-tt, uppercase);
  color: var(--sec-tab-color, var(--kombos-muted));
  transition: color var(--kombos-duration-fast) var(--kombos-ease-standard);
}

.cc_c1wmfzom_bdGVMblQxB .mays-section__tab:hover, .cc_c1wmfzom_bdGVMblQxB .mays-section__tab--active {
  color: var(--sec-tab-active-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_bdGVMblQxB .mays-section__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: var(--sec-tab-underline, var(--kombos-gray-900));
}

/* ----- Izgara ----- */

.cc_c1wmfzom_bdGVMblQxB .mays-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--mobile-cols, 2), 1fr);
  gap: var(--sec-grid-gap-m, var(--sec-grid-gap, var(--kombos-grid-gap)));
}

@media (min-width: 768px) {
  .cc_c1wmfzom_bdGVMblQxB .mays-section {
    padding-top: var(--sec-pt, 2.5rem);
    padding-bottom: var(--sec-pb, 2.5rem);
  }

  .cc_c1wmfzom_bdGVMblQxB .mays-section__container {
    gap: var(--sec-gap, 1.5rem);
  }

  .cc_c1wmfzom_bdGVMblQxB .mays-section__grid {
    gap: var(--sec-grid-gap, var(--kombos-grid-gap));
  }
}

@media (min-width: 1024px) {
  .cc_c1wmfzom_bdGVMblQxB .mays-section__grid {
    grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
  }
}

@media (max-width: 767px) {
  .cc_c1wmfzom_bdGVMblQxB .mays-section__title {
    font-size: var(--sec-title-fs-m, var(--sec-title-fs, 0.75rem));
  }

  .cc_c1wmfzom_bdGVMblQxB .mays-section__desc {
    font-size: var(--sec-desc-fs-m, var(--sec-desc-fs, 0.875rem));
  }
}

/* End import: ../../styles/section.css */
/* Imported from: ../../sub-components/ProductCard/styles.css */
/* Imported from: ../QuickView/styles.css */
/* Imported from: ../Modal/styles.css */
/* Portalın kapsam sınıfını bulabilmesi için sahnede kalan görünmez çıpa.
   Modalın kendisi document.body'ye taşınıyor; bu span yerinde duruyor. */
.cc_c1wmfzom_bdGVMblQxB .kombos-modal__anchor {
  display: none;
}

/* Imported from: ../Button/styles.css */
/* ===== Button ===== */

/* --- Base --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--kombos-radius);
  gap: var(--kombos-space-8);
  cursor: pointer;
  /* Tipografi sınıfla geliyor; boyutu section'lar --btn-fs ile ezebilir. */
  /* Fallback ASLA `inherit` olmamalı: ikon boyutlamak için yazı boyutu
     veren bir kabın içinde buton o puntoyu miras alıyordu (boş sepetteki
     "Alışverişe Başla" 48px çıkıyordu). Boyut sınıfları kendi ölçeğini verir. */
  font-size: var(--btn-fs, var(--kombos-ui-fs-sm));
  letter-spacing: var(--btn-ls, inherit);
  transition:
    background-color var(--kombos-duration-fast) var(--kombos-ease-standard),
    border-color var(--kombos-duration-fast) var(--kombos-ease-standard),
    color var(--kombos-duration-fast) var(--kombos-ease-standard),
    opacity var(--kombos-duration-fast) var(--kombos-ease-standard);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn:disabled {
  cursor: not-allowed;
}

/* --- Spinner --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn__spinner {
  animation: cc_c1wmfzom_bdGVMblQxB_kombos-spin 1s linear infinite;
}

@keyframes cc_c1wmfzom_bdGVMblQxB_kombos-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Icon --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--xs .kombos-btn__icon {
  font-size: var(--kombos-icon-md);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--s .kombos-btn__icon {
  font-size: var(--kombos-icon-lg);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--m .kombos-btn__icon {
  font-size: var(--kombos-icon-xl);
}

/* --- Sizes --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn--xs {
  padding: 0.4375rem 0.9375rem;
  min-height: 2.25rem;
  font-size: var(--btn-fs, var(--kombos-ui-fs-xs));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--s {
  padding: 0.5625rem 1.1875rem;
  min-height: 2.75rem;
  font-size: var(--btn-fs, var(--kombos-ui-fs-sm));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--m {
  padding: 0.6875rem 1.4375rem;
  min-height: 3.375rem;
  font-size: var(--btn-fs, var(--kombos-ui-fs-sm));
}

/* --- Primary --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn--primary {
  background-color: var(--btn-bg, var(--kombos-gray-900));
  border-color: var(--btn-bg, var(--kombos-gray-900));
  color: var(--btn-color, var(--kombos-white));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--primary:hover:not(:disabled) {
  opacity: var(--kombos-btn-hover-opacity);
  background-color: var(--btn-hover-bg, var(--btn-bg, var(--kombos-gray-900)));
  border-color: var(--btn-hover-bg, var(--btn-bg, var(--kombos-gray-900)));
  color: var(--btn-hover-color, var(--btn-color, var(--kombos-white)));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--primary:disabled {
  background-color: var(--kombos-gray-300);
  border-color: var(--kombos-gray-300);
  color: var(--kombos-gray-50);
}

/* --- Secondary --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn--secondary {
  background-color: var(--kombos-white);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-900);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--secondary:hover:not(:disabled) {
  background-color: var(--kombos-white);
  border-color: var(--kombos-ui-hover-border);
  color: var(--kombos-ui-hover-color);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--secondary:disabled {
  background-color: var(--kombos-gray-50);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-300);
}

/* --- Dangerous --- */
.cc_c1wmfzom_bdGVMblQxB .kombos-btn--dangerous {
  background-color: var(--kombos-error);
  border-color: var(--kombos-error);
  color: var(--kombos-white);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--dangerous:hover:not(:disabled) {
  background-color: var(--kombos-error-hover);
  border-color: var(--kombos-error-hover);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-btn--dangerous:disabled {
  background-color: var(--kombos-gray-300);
  border-color: var(--kombos-gray-300);
  color: var(--kombos-gray-50);
}

/* End import: ../Button/styles.css */

/* ── Modal ── */
.cc_c1wmfzom_bdGVMblQxB .kombos-modal {
  position: fixed;
  inset: 0;
  z-index: var(--kombos-z-overlay);
  background: var(--kombos-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--kombos-duration-slow);
  padding: var(--kombos-space-16);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal--open {
  opacity: 1;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__panel {
  background: var(--kombos-white);
  border-radius: var(--kombos-radius);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(1rem);
  transition: transform var(--kombos-duration-slow);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal--open .kombos-modal__panel {
  transform: translateY(0);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--kombos-white);
  padding: var(--kombos-space-24);
  border-bottom: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__title {
  color: var(--kombos-gray-900);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--kombos-gray-700);
  font-size: var(--kombos-icon-lg);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__body {
  padding: var(--kombos-space-24);
  overflow-y: auto;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__footer {
  background: var(--kombos-white);
  padding: var(--kombos-space-24);
  border-top: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  display: flex;
  gap: var(--kombos-space-12);
  justify-content: flex-end;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-modal__close:hover {
  color: var(--kombos-ui-hover-color);
}

/* End import: ../Modal/styles.css */
/* Circular import skipped: ../Button/styles.css */
/* Imported from: ../SpinnerIcon/styles.css */
.cc_c1wmfzom_bdGVMblQxB .kombos-spinner {
  animation: cc_c1wmfzom_bdGVMblQxB_kombos-spin 1s linear infinite;
}

@keyframes cc_c1wmfzom_bdGVMblQxB_kombos-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* End import: ../SpinnerIcon/styles.css */
/* Imported from: ../VariantBadge/styles.css */
/* Imported from: ../Badge/styles.css */
/* ===== Badge Primitives ===== */

/* ---- Base badge ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 2.25rem;
  cursor: pointer;
  border: 1px solid var(--badge-border-color, var(--kombos-gray-200));
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Reset for <button> */
  padding: 0;
  font: inherit;
  /* Reset for <a> */
  text-decoration: none;
  color: inherit;
  transition: border-color var(--kombos-duration-fast)
    var(--kombos-ease-standard);
}

/* ---- Size: xxs — bare dot, product-card colour indicator ----
   Boyutu kart bileşeni --badge-xxs-size ile ezebilir. */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xxs {
  height: var(--badge-xxs-size, 0.5rem);
  min-width: var(--badge-xxs-size, 0.5rem);
  border-width: 1px;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xxs.kombos-badge--color, .cc_c1wmfzom_bdGVMblQxB .kombos-badge--xxs.kombos-badge--image {
  width: var(--badge-xxs-size, 0.5rem);
}

/* The dot is tiny, so give it a 44px hit area without changing its look. */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xxs::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
}

/* ---- Size: xs ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xs {
  height: 1.75rem;
  min-width: 1.75rem;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xs.kombos-badge--color, .cc_c1wmfzom_bdGVMblQxB .kombos-badge--xs.kombos-badge--image {
  width: 1.75rem;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {
  width: 3rem;
  height: 3rem;
}

/* ---- Type: text ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--text {
  color: var(--kombos-gray-700);
  transition:
    border-color var(--kombos-duration-fast) var(--kombos-ease-standard),
    color var(--kombos-duration-fast) var(--kombos-ease-standard);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xs.kombos-badge--text {
  padding: 0 var(--kombos-space-6);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--s.kombos-badge--text {
  padding: 0 var(--kombos-space-8);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--m.kombos-badge--text, .cc_c1wmfzom_bdGVMblQxB .kombos-badge--l.kombos-badge--text {
  padding: 0 var(--kombos-space-12);
}

/* ---- Type: color ---- */
/* Colour swatches are the one place circles survive the square language —
   both Prada and Chanel render colour as a dot. */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--color {
  width: 2.25rem;
  padding: 0;
  border-radius: var(--kombos-radius-round);
}

/* ---- Type: image ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--image {
  width: 2.25rem;
  padding: 0;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--kombos-radius);
}

/* Variant product image (larger) */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--image.kombos-badge--variant-img {
  width: 4rem;
  height: 4rem;
}

/* ---- States ---- */

/* Hover (skip disabled buttons and out-of-stock) */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {
  border-color: var(--kombos-gray-900);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {
  color: var(--kombos-gray-900);
}

/* Selected */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--selected {
  border-color: var(--badge-selected-border-color, var(--kombos-gray-900));
}

/* A dot cannot show a 1px border change — mark selection with a ring instead. */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--xxs.kombos-badge--selected {
  box-shadow:
    0 0 0 1px var(--kombos-white),
    0 0 0 2px var(--badge-selected-border-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--selected.kombos-badge--text {
  background: var(--kombos-gray-50);
  color: var(--kombos-gray-900);
}

/* Out of stock */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge--nonstock {
  cursor: not-allowed;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-badge--nonstock.kombos-badge--text {
  color: var(--kombos-gray-400);
}

/* Diagonal strike line */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge__strike {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 0.5px),
    var(--kombos-gray-500) calc(50% - 0.5px),
    var(--kombos-gray-500) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* ---- Overflow counter ("+3") ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-badge__more {
  display: inline-flex;
  align-items: center;
  color: var(--badge-more-color, var(--kombos-muted));
  font-size: var(--badge-more-fs, 0.625rem);
  line-height: 1;
  letter-spacing: var(--badge-more-ls, 0.06em);
  white-space: nowrap;
}

/* End import: ../Badge/styles.css */

/* ===== Variant Badge Layout ===== */

/* ---- Layout ---- */
.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__groups {
  display: flex;
  flex-direction: column;
  gap: var(--kombos-space-12);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__groups--l {
  gap: var(--kombos-space-24);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__group {
  display: flex;
  flex-direction: column;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label {
  color: var(--kombos-gray-900);
  margin-bottom: var(--kombos-space-6);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kombos-space-6);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__row--l {
  gap: var(--kombos-space-8);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__row--scrollable {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__row--scrollable::-webkit-scrollbar {
  display: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__row--scrollable .kombos-badge {
  flex-shrink: 0;
}

/* Yazı sicili: UI kontrol token'larından. */
.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label--xxs, .cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label--xs {
  font-size: var(--kombos-ui-fs-xs);
  line-height: var(--kombos-ui-lh-xs);
  font-weight: var(--kombos-ui-fw-medium);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label--s, .cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label--m, .cc_c1wmfzom_bdGVMblQxB .kombos-variant-badge__label--l {
  font-size: var(--kombos-ui-fs-sm);
  line-height: var(--kombos-ui-lh-sm);
  font-weight: var(--kombos-ui-fw-medium);
}

/* End import: ../VariantBadge/styles.css */

/* ===== Hızlı Bakış =====
 * Tek sütun mobilde, ikili masaüstünde. Görsel karar için orada: varyantın
 * kareleri kaydırılabilir, ama küçük resim şeridi yok — o ürün sayfasının işi.
 */

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__body {
  display: flex;
  flex-direction: column;
  gap: var(--qv-gap, 1.25rem);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__media {
  position: relative;
  aspect-ratio: var(--qv-ratio, 4 / 5);
  background: var(--qv-media-bg, var(--kombos-gray-100));
  overflow: hidden;
}

/* Scroll-snap şerit: dokunmatikte parmakla, masaüstünde fareyle sürükle ya da
   noktalarla atla. */
.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Şeridin sürüklenebildiğini imleç söylüyor. Dokunmatikte imleç yok, kural
     boşa düşüyor — parmakla kaydırma zaten tarayıcının kendi işi. */
  cursor: grab;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__track::-webkit-scrollbar {
  display: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: block;
  object-fit: var(--qv-media-fit, cover);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__dot {
  position: relative;
  width: var(--qv-dot-size, 0.3125rem);
  height: var(--qv-dot-size, 0.3125rem);
  padding: 0;
  border: none;
  border-radius: var(--kombos-radius-round);
  background: var(--qv-dot-color, var(--kombos-gray-300));
  cursor: pointer;
  transition: background-color var(--kombos-duration-fast)
    var(--kombos-ease-standard);
}

/* Görünen nokta minik, tıklama alanı değil. Dokunmatikte 44px'e çıkıyor. */
.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__dot--active {
  background: var(--qv-dot-active-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--kombos-icon-2xl);
  color: var(--kombos-gray-300);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__info {
  display: flex;
  flex-direction: column;
  gap: var(--qv-info-gap, 0.75rem);
  min-width: 0;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__brand {
  font-size: var(--qv-brand-fs, 0.6875rem);
  line-height: var(--qv-brand-lh, 1rem);
  font-weight: var(--qv-brand-fw, 500);
  letter-spacing: var(--qv-brand-ls, 0.08em);
  text-transform: var(--qv-brand-tt, uppercase);
  color: var(--qv-brand-color, var(--kombos-gray-500));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__name {
  margin: 0;
  font-size: var(--qv-name-fs, 0.875rem);
  line-height: var(--qv-name-lh, 1.25rem);
  font-weight: var(--qv-name-fw, 400);
  letter-spacing: var(--qv-name-ls, 0.01em);
  text-transform: var(--qv-name-tt, none);
  color: var(--qv-name-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__prices {
  display: flex;
  align-items: baseline;
  gap: var(--qv-price-gap, 0.5rem);
  flex-wrap: wrap;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__price {
  font-size: var(--qv-price-fs, 0.875rem);
  line-height: var(--qv-price-lh, 1.25rem);
  font-weight: var(--qv-price-fw, 500);
  color: var(--qv-price-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__old-price {
  font-size: var(--qv-old-fs, 0.8125rem);
  font-weight: var(--qv-old-fw, 400);
  color: var(--qv-old-color, var(--kombos-gray-400));
  text-decoration: line-through;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__rate {
  font-size: var(--qv-rate-fs, 0.8125rem);
  font-weight: var(--qv-rate-fw, 500);
  color: var(--qv-rate-color, var(--kombos-error));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__variants {
  margin-top: var(--qv-variants-mt, 0.25rem);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__cta {
  width: 100%;
  min-height: var(--qv-cta-min-h, 3rem);
  font-weight: var(--qv-cta-fw, 500);
  text-transform: var(--qv-cta-tt, uppercase);
  letter-spacing: var(--qv-cta-ls, 0.06em);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__link {
  align-self: flex-start;
  font-size: var(--qv-link-fs, 0.6875rem);
  line-height: var(--qv-link-lh, 1rem);
  font-weight: var(--qv-link-fw, 400);
  letter-spacing: var(--qv-link-ls, 0.06em);
  text-transform: var(--qv-link-tt, uppercase);
  color: var(--qv-link-color, var(--kombos-gray-500));
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  transition: color var(--kombos-duration-fast) var(--kombos-ease-standard);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__link:hover {
  color: var(--qv-link-hover-color, var(--kombos-gray-900));
}

/* ===== Tablet (>=768px) ===== */
@media (min-width: 768px) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-quick-view__body {
    display: grid;
    grid-template-columns: var(--qv-cols, 20rem 1fr);
    gap: var(--qv-gap, 1.75rem);
    align-items: start;
  }
}

/* End import: ../QuickView/styles.css */
/* Circular import skipped: ../Button/styles.css */
/* Circular import skipped: ../SpinnerIcon/styles.css */
/* Imported from: ../Tag/styles.css */
/* ===== Tag ===== */
.cc_c1wmfzom_bdGVMblQxB .kombos-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tag-py, 0.1875rem) var(--tag-px, 0.375rem);
  border-radius: var(--kombos-radius);
  white-space: nowrap;
}

/* Discounted */
.cc_c1wmfzom_bdGVMblQxB .kombos-tag--discounted {
  background: var(--tag-discount-bg, var(--kombos-discount-bg));
  color: var(--tag-discount-color, var(--kombos-white));
}

/* New */
.cc_c1wmfzom_bdGVMblQxB .kombos-tag--new {
  background: var(--tag-new-bg, var(--kombos-white));
  border: 1px solid var(--tag-new-border, var(--kombos-gray-200));
  color: var(--tag-new-color, var(--kombos-gray-900));
}

/* Dark */
.cc_c1wmfzom_bdGVMblQxB .kombos-tag--dark {
  padding: var(--kombos-space-2) var(--kombos-space-8);
  border-radius: var(--kombos-radius);
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
}

/* Yazı sicili: UI kontrol token'larından. */
/* Boyut sicili; --tag-fs / --tag-fw / --tag-ls verilirse editör kazanır. */
.cc_c1wmfzom_bdGVMblQxB .kombos-tag--s {
  font-size: var(--tag-fs, var(--kombos-ui-fs-xxs));
  line-height: var(--kombos-ui-lh-xxs);
  font-weight: var(--tag-fw, var(--kombos-ui-fw-medium));
  letter-spacing: var(--tag-ls, var(--kombos-ui-ls-label));
  text-transform: uppercase;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-tag--m {
  font-size: var(--tag-fs, var(--kombos-ui-fs-xs));
  line-height: var(--kombos-ui-lh-xs);
  font-weight: var(--tag-fw, var(--kombos-ui-fw-medium));
  letter-spacing: var(--tag-ls, 0.017em);
  text-transform: uppercase;
}

/* End import: ../Tag/styles.css */

/* ===== Product Card =====
 * Media only — the name, brand, price and colour dots underneath are composed
 * in the editor from the CardProduct* components.
 *
 * The card has no border, no background and no radius. In the reference grids
 * the tiles sit ~4px apart so the page reads as one continuous field of
 * product rather than a tray of cards.
 */

/* Görünüm değişkenleri: kartı barındıran section kendi editör proplarını
   bu değişkenlere yazar. Yazmazsa buradaki tasarım varsayılanı geçerlidir. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, 0.75rem);
  min-width: 0;
}

/* ----- Media ----- */

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--card-media-bg, var(--kombos-gray-100));
}

/* Scroll-snap carousel: swipe on touch, drag or hover-peek on desktop. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Şeridin sürüklenebildiğini imleç söylüyor. */
  cursor: grab;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__track::-webkit-scrollbar {
  display: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: block;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kombos-gray-300);
  font-size: var(--kombos-icon-empty-sm);
}

/* ----- Yumuşak geçiş katmanı (Prada) -----
   Prada'nın PLP ızgarasında ölçüldü: ikinci kare birincinin üstünde duruyor
   ve yalnız opacity ile beliriyor — kayma, zoom, transform yok.
   measured: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1) @ prada.com PLP desktop
   Easing tema token'ıyla birebir aynı, o yüzden yeni bir eğri tanımlanmadı. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Şeridin tıklaması ve sürüklemesi bu katmanın altından geçmeli. */
  pointer-events: none;
  transition: opacity var(--card-hover-fade-duration, 600ms)
    var(--kombos-ease-standard);
}

/* İKİ koşul birden: geniş kırılım VE gerçek hover.
   - Genişlik (768px, temanın mobil/masaüstü çizgisi): dar bir masaüstü
     penceresi ya da editörün mobil önizlemesi `hover: hover` bildirmeye
     devam ediyor — tek başına hover'a bakmak oralarda mobil görünümü
     bozuyordu.
   - Hover: dokunmatik tablet 768px'in üstünde olabiliyor; orada solma hiç
     tetiklenmeyeceği için 2. kare erişilemez kalırdı. */
@media (min-width: 768px) and (hover: hover) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-product-card__hover-layer.is-visible {
    opacity: 1;
  }
}

/* Yumuşak geçiş modunda masaüstünde karusel diye bir şey kalmıyor.
   Prada'da ölçüldü (@ prada.com PLP, 1837px): şeridin `overflow-x: hidden`ı
   ve `scroll-snap-type: none`u var, noktalar `display: none`. Aynı viewport'ta
   scrollWidth === clientWidth — yani şerit gerçekten kaydırılamıyor.
   Mobilde (390px) tersi: `overflow-x: auto`, `scroll-snap-type: x mandatory`,
   noktalar `display: flex`. Orada hover olmadığı için 2. kareye ulaşmanın tek
   yolu kaydırma — bu yüzden kural yalnızca geniş kırılım + hover altında
   (koşulun ikisi de neden gerekli: yukarıdaki blokta yazılı).
   Fare sürüklemesi ayrıca JS tarafında da bağlanmıyor: `overflow: hidden`
   imperatif `scrollLeft` yazımını engellemez, tek başına CSS yetmezdi. */
@media (min-width: 768px) and (hover: hover) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-product-card__image-wrapper--fade .kombos-product-card__track {
    overflow-x: hidden;
    scroll-snap-type: none;
    cursor: default;
  }

  .cc_c1wmfzom_bdGVMblQxB .kombos-product-card__image-wrapper--fade .kombos-product-card__dots {
    display: none;
  }
}

/* ----- Rotated edge label ----- */

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__edge-label {
  position: absolute;
  top: var(--card-edge-inset, 0.75rem);
  left: var(--card-edge-inset, 0.75rem);
  margin: 0;
  font-size: var(--card-edge-fs, 0.625rem);
  line-height: var(--card-edge-lh, 0.875rem);
  font-weight: var(--card-edge-fw, 400);
  letter-spacing: var(--card-edge-ls, 0.06em);
  text-transform: var(--card-edge-tt, uppercase);
  color: var(--card-edge-color, var(--kombos-muted));
  white-space: nowrap;
  transform-origin: left top;
  /* Reads bottom-to-top down the left edge, as on the reference product grid. */
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  pointer-events: none;
}

/* ----- Discount / status marks ----- */

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__badges {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--card-badge-gap, 0.25rem);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__status {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--kombos-space-4) var(--kombos-space-8);
  font-size: var(--card-status-fs, 0.625rem);
  line-height: var(--card-status-lh, 0.875rem);
  font-weight: var(--card-status-fw, 400);
  letter-spacing: var(--card-status-ls, 0.06em);
  text-transform: uppercase;
  background: var(--card-status-bg, var(--kombos-white));
  color: var(--card-status-color, var(--kombos-gray-900));
}

/* ----- Favourite ----- */

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__favorite {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px hit area, 20px glyph */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--card-fav-size, 1.25rem);
  color: var(--card-fav-color, var(--kombos-gray-900));
  transition: opacity var(--kombos-duration-fast) var(--kombos-ease-standard);
}

/* Dolu kalp, indirim rozetinin kırmızısıyla aynı: kartta tek bir vurgu
   rengi olsun diye editörden rozet rengi değiştirilirse kalp de onu izliyor.
   Kural taban kuraldan sonra geliyor — ikisi de tek sınıf, sıralama kazanıyor. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__favorite--active {
  color: var(--tag-discount-bg, var(--kombos-discount-bg));
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__favorite:hover {
  opacity: 0.6;
}

/* ----- Carousel dots ----- */

/* Prada'nın ölçülen değerleri 6px halka / 8px aralık / alttan 8px idi
   (@ prada.com PLP, 390px). Bizde bilerek bir tık daha küçük ve sıkı:
   Prada ızgara kartına 2 kare koyuyor, biz varyantın tüm karelerini
   basıyoruz — 5-6 noktalık şerit aynı ölçülerle çok daha ağır okunuyor. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--card-dot-bottom, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kombos-space-4);
}

/* Pasif nokta Prada'da gri dolgu DEĞİL, içi boş siyah halka; aktif olan aynı
   halkanın dolmuş hâli. Görülen fark boyut değil kontrasttı: eski gri dolgu
   (gray-300) soluk kalıyordu. `--card-dot-color` propu artık halkanın rengi,
   `--card-dot-active-color` dolgunun rengi — ikisi de yerinde, anlamları
   editörde aynı kaldı ("Nokta Rengi" / "Aktif Nokta Rengi"). */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dot {
  position: relative;
  /* 5px halkanın alt sınırı: 1px kenarla içeride 3px boşluk kalıyor. Daha
     küçüğünde halka dolu noktadan ayırt edilemiyor, aktif/pasif farkı ölüyor. */
  width: var(--card-dot-size, 0.3125rem);
  height: var(--card-dot-size, 0.3125rem);
  padding: 0;
  border: 1px solid var(--card-dot-color, var(--kombos-gray-900));
  border-radius: var(--kombos-radius-round);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--kombos-duration-fast) var(--kombos-ease-standard),
    border-color var(--kombos-duration-fast) var(--kombos-ease-standard);
}

/* Görünen nokta minik, tıklama alanı değil. Dokunmatikte 44px'e çıkıyor. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}

@media (pointer: coarse) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dot::before {
    width: var(--kombos-tap);
    height: var(--kombos-tap);
    /* Nokta artık görselin tam dibinde. Hedefi noktanın ortasına yerleştirmek
       alt yarısını kabın `overflow: hidden`ına kırptırıyor ve 44px fiilen
       ~24px'e düşüyor. Alta yaslayıp YUKARI doğru büyütüyoruz — 44px'in
       tamamı görselin içinde kalıyor. */
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
}

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dot--active {
  background: var(--card-dot-active-color, var(--kombos-gray-900));
  border-color: var(--card-dot-active-color, var(--kombos-gray-900));
}

/* ----- Add to cart ----- */

.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__add-btn {
  width: 100%;
}

/* Görsel ile sepete-ekle arasındaki boşluk, kartın genel boşluğundan bağımsız.
   `--card-gap` (editördeki "Kart Boşluğu") ad/fiyat/marka satırlarının ritmini
   kuruyor; buton görselin devamı gibi okunmalı, o ritme uymamalı. Flex `gap`
   zaten uygulandığı için farkı geri alıyoruz — merchant `--card-gap`i
   değiştirse de aradaki mesafe sabit kalır. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__image-wrapper + .kombos-product-card__add-btn {
  margin-top: calc(
    var(--card-media-btn-gap, var(--kombos-space-4)) - var(--card-gap, 0.75rem)
  );
}

/* Noktalar dokunmatikte kaydırılıyor, farede tıklanıyor — geri bildirim şart. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__dot:hover {
  background: var(--card-dot-active-color, var(--kombos-gray-900));
  border-color: var(--card-dot-active-color, var(--kombos-gray-900));
}

/* ----- Marka satırı -----
   Bölümün "Marka Adını Göster" anahtarı açıkken kartın içinde, editörden
   gelen ürün adı komponentinin hemen üstünde basılır. Varsayılanlar referans
   ızgaradaki gibi: adın bir tık kalını, aynı kolon içi yatay boşlukla hizalı.
   Her metrik değişkenli — punto büyürken satır yüksekliği de büyüyebilsin. */
.cc_c1wmfzom_bdGVMblQxB .kombos-product-card__brand {
  display: block;
  padding: 0 var(--kombos-space-4);
  font-size: var(--card-brand-fs, 0.75rem);
  line-height: var(--card-brand-lh, 1.125rem);
  font-weight: var(--card-brand-fw, 600);
  letter-spacing: var(--card-brand-ls, 0.02em);
  text-transform: var(--card-brand-tt, none);
  color: var(--card-brand-color, var(--kombos-gray-900));
  text-align: var(--card-brand-align, center);
  margin-top: var(--card-brand-mt, 0);
  margin-bottom: var(--card-brand-mb, 0);
}

/* Marka satırı bağlantıya dönüştüğünde link krome'unu almasın; altı çizgi
   yalnız hover'da tıklanabilirliği duyursun. */
.cc_c1wmfzom_bdGVMblQxB a.kombos-product-card__brand {
  text-decoration: none;
  cursor: pointer;
}

.cc_c1wmfzom_bdGVMblQxB a.kombos-product-card__brand:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 767px) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-product-card__brand {
    font-size: var(--card-brand-fs-m, var(--card-brand-fs, 0.75rem));
  }
}

/* End import: ../../sub-components/ProductCard/styles.css */
/* Imported from: ../../sub-components/SliderArrow/styles.css */
/* ===== Slider Arrow =====
 * A bare chevron by default. The reference sites give these no circle, border
 * or shadow — the arrow is a hint, not a control surface. `filled` opts into a
 * round plate for sections that need the arrow to survive a busy image.
 *
 * `--arrow-size-m` is the mobile size; the desktop query falls back to
 * `--arrow-size`, so a section may set either one alone.
 *
 * DİKKAT: burada `position` bildirme. Bu dosyayı @import eden bölümler oku
 * `position: absolute` ile konumlandırıyor ve derleme sırasına göre buradaki
 * bildirim onu ezip oku ray hizasından düşürebiliyor.
 */
.cc_c1wmfzom_bdGVMblQxB .kombos-slider-arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kombos-space-10);
  /* Dokunma hedefi 44px; plaka bundan bağımsız ölçekleniyor */
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--arrow-size-m, var(--arrow-size, 1.5rem));
  color: var(--arrow-color, var(--kombos-gray-900));
  transition: opacity var(--kombos-duration-fast) var(--kombos-ease-standard);
}

/* Plaka butona değil ikona çiziliyor: buton 44px vuruş alanı olarak kalırken
   görünen daire ok boyutuyla büyüyüp küçülüyor (çap = ok + 2×halka).
   Halka 12px'te duruyor ki büyük masaüstü oklarında plaka şişmesin. */
.cc_c1wmfzom_bdGVMblQxB .kombos-slider-arrow--filled .kombos-icon {
  box-sizing: content-box;
  padding: min(0.4em, 0.75rem);
  background: var(--arrow-bg, var(--kombos-white));
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-slider-arrow:hover:not(:disabled) {
  opacity: 0.55;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-slider-arrow:disabled {
  cursor: default;
  opacity: 0.2;
}

@media (min-width: 768px) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-slider-arrow {
    font-size: var(--arrow-size, 1.5rem);
  }
}

/* End import: ../../sub-components/SliderArrow/styles.css */

/* ===== Son Görüntülenenler =====
 * ProductSlider ile aynı ray mantığı; sekme yok, kart sayısı ziyaretçinin
 * gezinme geçmişi kadar. Geçmiş boşsa komponent hiç render edilmiyor.
 */

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__slider {
  position: relative;
  overflow: hidden;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__track {
  display: flex;
  gap: var(--sec-grid-gap-m, var(--sec-grid-gap, var(--kombos-grid-gap)));
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__track::-webkit-scrollbar {
  display: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__card {
  flex: 0 0
    calc(
      (
          100% - (var(--mobile-columns, 2) - 1) *
            var(--sec-grid-gap-m, var(--sec-grid-gap, var(--kombos-grid-gap)))
        ) /
        var(--mobile-columns, 2)
    );
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--kombos-space-8);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--kombos-space-2);
  padding: 0 var(--kombos-space-4);
  text-align: var(--rv-card-text-align, center);
}

/* ===== Navigation arrows =====
 * Oklar rayın tamamının değil, yalnızca ÜRÜN GÖRSELİNİN dikey ortasına
 * hizalanıyor; "Sepete Ekle" + başlık + fiyat blokları oku kartın alt yarısına
 * çekiyordu. Katmanın yüksekliği yüzdeli `padding-top` ile kuruluyor —
 * yüzde, kabın YÜKSEKLİĞİNE değil GENİŞLİĞİNE göre çözülür — yani tek kart
 * genişliği × görsel oranı. Oran propu değişince hiza kendiliğinden düzeliyor.
 */
.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  padding-top: calc(
    (
        100% - (var(--mobile-columns, 2) - 1) *
          var(--sec-grid-gap-m, var(--sec-grid-gap, var(--kombos-grid-gap)))
      ) /
      var(--mobile-columns, 2) * var(--rv-media-ratio, 1)
  );
  /* Katman rayın üstünü kapatmasın; yalnızca oklar tıklanabilir. */
  pointer-events: none;
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--kombos-z-dropdown);
  pointer-events: auto;
}

/* Mobilde ok kartın içine değil kenar boşluğuna doğru taşıyor: gövde payı
   1rem, ok kutusu da o kadar dışarı çıkıyor — görselin üstünü en az kapatır. */
.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__arrow--left {
  left: calc(var(--kombos-space-16) * -1);
}

.cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__arrow--right {
  right: calc(var(--kombos-space-16) * -1);
}

@media (min-width: 768px) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__track {
    gap: var(--sec-grid-gap, var(--kombos-grid-gap));
  }

  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__nav {
    padding-top: calc(
      (
          100% - (var(--mobile-columns, 2) - 1) *
            var(--sec-grid-gap, var(--kombos-grid-gap))
        ) /
        var(--mobile-columns, 2) * var(--rv-media-ratio, 1)
    );
  }
}

@media (min-width: 1024px) {
  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__card {
    flex: 0 0
      calc(
        (
            100% - (var(--columns) - 1) *
              var(--sec-grid-gap, var(--kombos-grid-gap))
          ) /
          var(--columns)
      );
  }

  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__nav {
    padding-top: calc(
      (
          100% - (var(--columns, 5) - 1) *
            var(--sec-grid-gap, var(--kombos-grid-gap))
        ) /
        var(--columns, 5) * var(--rv-media-ratio, 1)
    );
  }

  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__arrow--left {
    left: 0.25rem;
  }

  .cc_c1wmfzom_bdGVMblQxB .kombos-recently-viewed__arrow--right {
    right: 0.25rem;
  }
}