/* Imported from: ../../sub-components/MarlaProductCard/styles.css */
/*
 * Ölçü popup'ındaki özelleştirme (option set) alanlarının stilleri.
 * PDP ile AYNI bileşenler kullanılıyor; ikas build'i CSS'i sadece @import ile
 * taşıdığı için yalnızca SEÇİM tiplerinin stilleri alınır — kazıma/tarih/dosya
 * alanları popup'ta gösterilmediği için onların CSS'i buraya çekilmez.
 */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css */
/* Box grid */
.cc_0gxxbhqk_product_list .kombos-option-choice__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-option-choice__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  color: var(--kombos-gray-700);
  cursor: pointer;
  transition: border-color 0.15s;
}

.cc_0gxxbhqk_product_list .kombos-option-choice__box:hover {
  border-color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__box--selected {
  border-color: var(--kombos-gray-900);
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__box-price {
  color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__box--selected .kombos-option-choice__box-price {
  color: var(--kombos-white);
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css */
/* Checklist (multi-select) */
.cc_0gxxbhqk_product_list .kombos-option-choice__checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  padding: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
}

.cc_0gxxbhqk_product_list .kombos-option-choice__checklist--error {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__checklist-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--kombos-radius);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cc_0gxxbhqk_product_list .kombos-option-choice__checklist-row:hover {
  background-color: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__checklist-price {
  color: var(--kombos-gray-500);
  margin-left: auto;
}

/* ===== Özel açılır kutu (canlıdaki ölçüler, 1440'ta ölçüldü) =====
   tetikleyici 40px · 1px #E5E7EB · köşe 0 · iç boşluk 8/12 · sağda chevron */
.cc_0gxxbhqk_product_list .kombos-choice-select {
  position: relative;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-choice-select__trigger {
  align-items: center;
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: border-color 0.15s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-choice-select__trigger:hover, .cc_0gxxbhqk_product_list .kombos-choice-select[data-open="true"] .kombos-choice-select__trigger {
  border-color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_list .kombos-choice-select__trigger--error {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list .kombos-choice-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_0gxxbhqk_product_list .kombos-choice-select__value--placeholder {
  color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_list .kombos-choice-select__caret {
  color: var(--kombos-gray-700);
  flex-shrink: 0;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.cc_0gxxbhqk_product_list .kombos-choice-select[data-open="true"] .kombos-choice-select__caret {
  transform: rotate(180deg);
}

.cc_0gxxbhqk_product_list .kombos-choice-select__panel {
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 15rem;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--kombos-z-dropdown);
}

.cc_0gxxbhqk_product_list .kombos-choice-select__item {
  background: none;
  border: 0;
  color: var(--kombos-gray-900);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.625rem 0.75rem;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-choice-select__item:hover {
  background-color: var(--kombos-gray-50);
}

/* Seçili satır — marka bordosu, köşe yok (proje kuralı). */
.cc_0gxxbhqk_product_list .kombos-choice-select__item--selected {
  background-color: var(--kombos-gray-50);
  color: var(--marla-primary);
  font-weight: 600;
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css */
/* Swatch grid */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Individual swatch item (button + price) */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Swatch button — square like Badge */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  padding: 0.125rem;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kombos-white);
  position: relative;
  transition: border-color 0.15s;
}

.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-btn:hover:not(.kombos-option-choice__swatch-btn--selected) {
  border-color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-btn--selected {
  border-color: var(--kombos-gray-900);
}

/* Color fill */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-color {
  width: 100%;
  height: 100%;
  border-radius: var(--kombos-radius);
}

/* Image inside swatch */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--kombos-radius);
}

/* Eye icon overlay on image swatches */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-eye {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--kombos-radius);
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  font-size: 1rem;
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-btn:hover .kombos-option-choice__swatch-eye {
  opacity: 1;
}

/* Footer row: checkbox + price for image swatches */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-footer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Price below swatch */
.cc_0gxxbhqk_product_list .kombos-option-choice__swatch-price {
  color: var(--kombos-gray-500);
  text-align: center;
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css */
/* Imported from: ../Select/styles.css */
/* ===== Select ===== */
.cc_0gxxbhqk_product_list .kombos-select-wrap {
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cc_0gxxbhqk_product_list .kombos-select {
  appearance: none;
  width: 100%;
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  color: var(--kombos-gray-900);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cc_0gxxbhqk_product_list .kombos-select:hover {
  border-color: var(--kombos-gray-300);
}

/* Sizes — match Button padding + extra right space for icon */
.cc_0gxxbhqk_product_list .kombos-select--xs {
  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
  min-height: 2.25rem;
}

.cc_0gxxbhqk_product_list .kombos-select--s {
  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
  min-height: 2.75rem;
}

.cc_0gxxbhqk_product_list .kombos-select--m {
  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
  min-height: 3.375rem;
}

/* Caret icon */
.cc_0gxxbhqk_product_list .kombos-select__icon {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  color: var(--kombos-gray-900);
  font-size: 1rem;
  transition: opacity 0.15s ease;
}

/* Clear button */
.cc_0gxxbhqk_product_list .kombos-select__clear {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--kombos-gray-700);
  background-color: var(--kombos-white);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* On hover: show clear button, hide caret */
.cc_0gxxbhqk_product_list .kombos-select-wrap:hover .kombos-select__clear {
  opacity: 1;
}

.cc_0gxxbhqk_product_list .kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
  opacity: 0;
}

/* --- Status (standalone + inherited from FormItem) --- */
.cc_0gxxbhqk_product_list [data-state="error"] .kombos-select {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list [data-state="error"] .kombos-select:hover {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list [data-state="success"] .kombos-select {
  border-color: var(--kombos-success);
}

.cc_0gxxbhqk_product_list [data-state="success"] .kombos-select:hover {
  border-color: var(--kombos-success);
}

/* --- Disabled state --- */
.cc_0gxxbhqk_product_list .kombos-select:disabled {
  background: var(--kombos-gray-50);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-300);
  cursor: not-allowed;
}

.cc_0gxxbhqk_product_list .kombos-select:disabled:hover {
  border-color: var(--kombos-gray-200);
}

.cc_0gxxbhqk_product_list .kombos-select:disabled ~ .kombos-select__icon {
  color: var(--kombos-gray-300);
}

/* End import: ../Select/styles.css */
/* Imported from: ../MarlaTagBadges/styles.css */
/*
 * Köşe rozetleri — ürün kartı ve ürün detay galerisi ortak stili.
 *
 * Rozet ölçüleri canlıdan (2026-08-12, /cocuk kartı): 10px/500 lh15, beyaz
 * metin, zemin #a84e47, iç boşluk 5px, harf aralığı -0.25px, köşe 0,
 * kenarlık YOK. PDP'de standart 12px ve 75×23 kutu (mockup). Buradaki
 * değerlerin hepsi yalnızca FALLBACK — gerçek değerler proptan gelir.
 */

.cc_0gxxbhqk_product_list .marla-tag-badges {
  /*
   * Yığın genişliği = en geniş rozetin genişliği; `align-items: stretch` ile
   * aynı köşedeki TÜM rozetler o genişliğe uzar. Böylece "HIZLI KARGO" ile
   * "ÇOK SATAN" harf sayıları farklı olsa da aynı kutuda görünür ve kenarları
   * hizalanır.
   */
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  top: var(--tag-badge-offset, 0.75rem);
  width: min-content;
  z-index: 2;
}

/* Tek satır modu: metin kırılmaz, yığın en uzun metne göre genişler. */
.cc_0gxxbhqk_product_list .marla-tag-badges--one-line {
  width: max-content;
}

.cc_0gxxbhqk_product_list .marla-tag-badges--one-line .marla-tag-badges__item {
  white-space: nowrap;
}

.cc_0gxxbhqk_product_list .marla-tag-badges--left {
  left: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_list .marla-tag-badges--right {
  right: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_list .marla-tag-badges__item {
  align-items: center;
  background: var(--tag-badge-bg, var(--marla-primary-soft));
  /* Kenarlık varsayılanda YOK (canlıda da yok); editörden renk verilince
     kalınlık değişkeni 1px'e çıkar ve çerçeve görünür. */
  border: var(--tag-badge-border-w, 0) solid
    var(--tag-badge-border, transparent);
  border-radius: var(--tag-badge-radius, var(--kombos-radius));
  /* En az genişlik/yükseklik DIŞ kutuyu bağlasın: mockup "75×23" derken
     kenarlık ve iç boşluk dahil kutuyu kastediyor. Tema global bir
     `box-sizing` reset'i tanımlamadığı için burada açıkça veriliyor. */
  box-sizing: border-box;
  color: var(--tag-badge-color, var(--kombos-white));
  display: flex;
  font-size: var(--tag-badge-fs, 0.625rem);
  font-weight: var(--tag-badge-fw, 500);
  justify-content: center;
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
  min-height: var(--tag-badge-min-h, auto);
  min-width: var(--tag-badge-min-w, auto);
  padding: var(--tag-badge-py, 0.3125rem) var(--tag-badge-px, 0.3125rem);
  text-align: center;
  /*
   * Genişliği rozetin kendisi DEĞİL, yığın belirler (yukarı bak). Kutu yığına
   * uzar; canlıdaki gibi "Çok Satan" iki satıra kırılıp kare kutu olur, tek
   * satır seçilirse tek satırda kalır.
   *
   * `word-break: normal` ŞART: global.css'teki `* { word-break: break-word }`
   * Chrome'da min-content'i tek HARFE düşürüyor (18.9px genişlik, 131px
   * yükseklik ölçüldü). Normale çekilince kırılma kelime sınırında olur.
   */
  word-break: normal;
}

.cc_0gxxbhqk_product_list .marla-tag-badges__item--alt {
  background: var(--tag-badge-alt-bg, var(--kombos-gray-900));
  border-color: var(--tag-badge-alt-border, transparent);
  border-width: var(--tag-badge-alt-border-w, 0);
  color: var(--tag-badge-alt-color, var(--kombos-white));
}

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

/*
 * Marla ürün kartı.
 *
 * Mockup'ta "dinamik olsun" denen her değer bir CSS değişkeninden okunur;
 * değişkenler parent section'ın propları tarafından inline style ile set edilir.
 * Buradaki değerler yalnızca FALLBACK (mockup'taki standart ölçüler).
 */

.cc_0gxxbhqk_product_list .marla-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* --- Görsel ---
   Canlıdan ölçüldü: kare, zemin #dddddd %20 opaklıkta, görsel `cover`.
   (rgba overlay değeri olduğu için token'a bağlanmıyor.) */
.cc_0gxxbhqk_product_list .marla-card__media {
  aspect-ratio: var(--card-media-ratio, 1 / 1);
  background: var(--card-media-bg, rgba(222, 222, 222, 0.2));
  overflow: hidden;
  position: relative;
}

.cc_0gxxbhqk_product_list .marla-card__media-link {
  display: block;
  height: 100%;
  width: 100%;
}

.cc_0gxxbhqk_product_list .marla-card__img {
  height: 100%;
  object-fit: var(--card-media-fit, cover);
  width: 100%;
}

/* Hover'da ikinci görsele geçiş */
.cc_0gxxbhqk_product_list .marla-card__img--hover {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
}

.cc_0gxxbhqk_product_list .marla-card__media:hover .marla-card__img--hover {
  opacity: 1;
}

.cc_0gxxbhqk_product_list .marla-card__img--placeholder {
  align-items: center;
  color: var(--kombos-gray-300);
  display: flex;
  font-size: var(--card-placeholder-fs, 3rem);
  justify-content: center;
}

.cc_0gxxbhqk_product_list .marla-card__out-of-stock {
  background: rgba(0, 0, 0, 0.55);
  color: var(--kombos-white);
  font-size: var(--card-out-of-stock-fs, 0.75rem);
  inset: auto 0 0 0;
  padding: 0.375rem;
  position: absolute;
  text-align: center;
}

/* Rozetler ortak bileşende: ../MarlaTagBadges (kart ve PDP aynı görünsün diye). */

/* --- Favori --- */
.cc_0gxxbhqk_product_list .marla-card__favorite {
  background: none;
  border: 0;
  /* Canlıda boş kalp #1D1D1B (SVG'ye satır içi yazılmış). */
  color: var(--card-favorite-color, var(--kombos-gray-900));
  cursor: pointer;
  /* Canlıda kalp 23×20px ve görselin 12px içinden başlıyor. */
  font-size: var(--card-favorite-fs, 1.25rem);
  line-height: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

/*
 * Favorideyken dolu kalp KIRMIZI — 2026-08-14'te canlıdaki favori kartından
 * ölçüldü: boş kalp `#1D1D1B`, dolu kalp **`#C5143D`** (23×20px).
 */
.cc_0gxxbhqk_product_list .marla-card__favorite--active {
  color: var(--card-favorite-active, #c5143d);
}

/* Sağ üstte rozet varsa çakışmasın diye sağ alta kayar (marka talebi). */
.cc_0gxxbhqk_product_list .marla-card__favorite--bottom {
  bottom: 0.75rem;
  top: auto;
}

/* --- Gövde ---
   Canlıdan ölçüldü: ortalanmış kolon, iç boşluk 8px 16px, öğe aralığı 8px. */
.cc_0gxxbhqk_product_list .marla-card__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* Canlıda 16px/500, satır aralığı 24px, iki satırda kırpılıyor. */
.cc_0gxxbhqk_product_list .marla-card__name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-name-clamp, 2);
  color: var(--card-name-color, var(--kombos-gray-900));
  display: -webkit-box;
  font-size: var(--card-name-fs, 1rem);
  font-weight: var(--card-name-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
  overflow: hidden;
  text-decoration: none;
}

/*
 * İsim altı blok (etiketler + taksit). Gövdenin ALTINA yaslanır: kart, satırın
 * en uzun kartı kadar uzadığında artan boşluk adın altına düşer, bu blok fiyat
 * barına yapışık kalır. Böylece komşu kartın adı iki satır olsa bile etiket,
 * taksit ve sepete ekle satırları aynı hizada durur — ama satırdaki adların
 * hepsi tek satırsa kart zaten uzamadığı için hiç fazladan boşluk oluşmaz.
 * (Ada `min-height` ile 2 satır ayırmak da hizalıyordu ama tek satırlık
 * satırlarda boşuna yer harcıyordu; o yüzden kaldırıldı.)
 */
.cc_0gxxbhqk_product_list .marla-card__meta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

/* Mockup'ta açık zeminli, kenarlıklı, koyu yazılı etiket. */
.cc_0gxxbhqk_product_list .marla-card__pill {
  background: var(--card-pill-bg, var(--kombos-gray-50));
  border: 1px solid var(--card-pill-border, var(--kombos-gray-200));
  color: var(--card-pill-color, var(--kombos-gray-900));
  font-size: var(--card-pill-fs, 0.8125rem);
  font-weight: var(--card-pill-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  padding: 0.25rem 0.625rem;
}

/*
 * İsim altındaki iki satırın görünümü editörden seçilir (ENUM):
 * "Kutulu" = zemin + çerçeve + iç boşluk, "Düz Yazı" = sade metin.
 * Varsayılan mockup'taki gibi: üstteki etiket kutulu, promo düz yazı.
 * Böylece marka ileride ikisini de kutulu ya da ikisini de düz yapabilir.
 */
.cc_0gxxbhqk_product_list .marla-card__pill--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* Mockup: 14px standart, dinamik. Renk canlıdan: bordo #450017. */
.cc_0gxxbhqk_product_list .marla-card__promo {
  color: var(--card-promo-color, var(--marla-primary));
  font-size: var(--card-promo-fs, 0.875rem);
  font-weight: var(--card-promo-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
}

.cc_0gxxbhqk_product_list .marla-card__promo--box {
  background: var(--card-promo-bg, var(--kombos-gray-50));
  border: var(--card-promo-border-w, 0) solid
    var(--card-promo-border, transparent);
  padding: 0.25rem 0.625rem;
}

/* 3. isim altı etiketi — 1 ve 2 ile aynı yetenekler, ayrı değişkenler. */
.cc_0gxxbhqk_product_list .marla-card__label3 {
  color: var(--card-label3-color, var(--marla-primary));
  font-size: var(--card-label3-fs, 0.875rem);
  font-weight: var(--card-label3-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
}

.cc_0gxxbhqk_product_list .marla-card__label3--box {
  background: var(--card-label3-bg, var(--kombos-gray-50));
  border: var(--card-label3-border-w, 0) solid
    var(--card-label3-border, transparent);
  padding: 0.25rem 0.625rem;
}

/* Taksit satırı — görselli talepte standart 13px.
   Ağırlık/renk/satır yüksekliği canlıdan: 500, #717171, lh 1. */
.cc_0gxxbhqk_product_list .marla-card__installment {
  color: var(--card-installment-color, var(--kombos-gray-500));
  font-size: var(--card-installment-fs, 0.8125rem);
  font-weight: var(--card-installment-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1;
}

/* --- Fiyat barı --- */
/*
 * Fiyat barı — indirimli/indirimsiz kartlarda AYNI yükseklikte durmalı.
 * İndirimsizde içerik tek satır (45px FAB), indirimlide iki satırlık fiyat
 * yığını (~50px) olduğu için bar kendiliğinden 2–5px büyüyordu ve satır
 * hizası bozuluyordu. Taban yükseklik, olabilecek EN UZUN içerikten
 * hesaplanır; ölçüler proptan değişirse kendiliğinden güncellenir.
 */
.cc_0gxxbhqk_product_list .marla-card__price-bar {
  align-items: center;
  background: var(--card-pricebar-bg, var(--kombos-gray-50));
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: auto;
  min-height: calc(
    max(
      var(--card-fab-size, 2.8125rem),
      var(--card-discount-size, 2.8125rem),
      var(--card-price-old-fs, 1.125rem) * 1.2 + var(--card-price-fs, 1.5rem) *
        1.2
    ) + 1rem
  );
  padding: 0.5rem 0.75rem;
}

.cc_0gxxbhqk_product_list .marla-card__prices {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

/* Mockup: kutucuk 45×45px, font-size 20px — ikisi de dinamik */
.cc_0gxxbhqk_product_list .marla-card__discount-box {
  align-items: center;
  align-self: stretch;
  background: var(--card-discount-bg, var(--marla-primary-soft));
  color: var(--card-discount-color, var(--kombos-white));
  display: flex;
  flex-shrink: 0;
  font-size: var(--card-discount-fs, 1.25rem);
  font-weight: var(--card-discount-fw, 700);
  height: var(--card-discount-size, 2.8125rem);
  justify-content: center;
  letter-spacing: var(--marla-tracking-tight);
  width: var(--card-discount-size, 2.8125rem);
}

.cc_0gxxbhqk_product_list .marla-card__price-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Mockup: üstü çizili 18px */
.cc_0gxxbhqk_product_list .marla-card__price-old {
  color: var(--card-price-old-color, var(--kombos-gray-400));
  font-size: var(--card-price-old-fs, 1.125rem);
  font-weight: var(--card-price-old-fw, 400);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
  text-decoration: line-through;
}

/* Mockup: indirimli fiyat 24px */
.cc_0gxxbhqk_product_list .marla-card__price-final {
  color: var(--card-price-color, var(--marla-accent));
  font-size: var(--card-price-fs, 1.5rem);
  font-weight: var(--card-price-fw, 700);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
}

/* Mockup: indirim yoksa 25px siyah */
.cc_0gxxbhqk_product_list .marla-card__price-plain {
  color: var(--card-price-plain-color, var(--kombos-gray-900));
  font-size: var(--card-price-plain-fs, 1.5625rem);
  font-weight: var(--card-price-fw, 700);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
}

/* --- Sepete ekle FAB ---
   Mockup: 45×45px yuvarlak, içi sepet + artı; sepetteyken tik.

   RENK: mockup'ta daire BEYAZ DEĞİL — fiyat barıyla aynı gri, çevresinde
   kenarlık da yok. Daireyi görünür kılan tek şey sağ-alta düşen yumuşak
   gölge. Bu yüzden dolgu varsayılanı bar rengine bağlanır; bar rengi
   editörden değişirse buton da onunla birlikte değişir.

   GÖLGE (2026-08-18'de mockup 4'ten ölçüldü): daire yarıçapı 24px, gölge
   0°–90° arasında (sağ + alt) görünüyor, sol/üstte yok; kenarda %10, 1px
   dışarıda tepe %18, ~6px sonra sıfır. Tarayıcıda üretilen adayların
   normalize koyuluk profilleri mockup'ınkiyle karşılaştırıldı; `4px 4px 4px
   rgba(0,0,0,0.2)` her açıda (0/45/90/135/180) birebir örtüştü — RMS 0.012,
   denenen 108 kombinasyonun en iyisi. Değerler prop'tan gelir. */
.cc_0gxxbhqk_product_list .marla-card__fab {
  align-items: center;
  background: var(--card-fab-bg, var(--card-pricebar-bg, var(--kombos-gray-50)));
  border: 1px solid var(--card-fab-border, transparent);
  border-radius: 50%;
  box-shadow: var(--card-fab-shadow-x, 4px) var(--card-fab-shadow-y, 4px)
    var(--card-fab-shadow-blur, 4px)
    var(--card-fab-shadow-color, rgba(0, 0, 0, 0.2));
  color: var(--card-fab-color, var(--kombos-gray-900));
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: var(--card-fab-icon-fs, 1.375rem);
  height: var(--card-fab-size, 2.8125rem);
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: var(--card-fab-size, 2.8125rem);
}

.cc_0gxxbhqk_product_list .marla-card__fab:hover:not(:disabled) {
  background: var(--card-fab-hover-bg, var(--kombos-gray-100));
}

.cc_0gxxbhqk_product_list .marla-card__fab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/*
 * "Sepette" durumu. Mockup 4'te tikli daire artılı daireyle AYNI görünüyor —
 * dolgu da, gölge de değişmiyor, yalnızca ikon tike dönüyor. Bu yüzden
 * varsayılanlar normal butonun renklerine düşer; merchant dolgulu bir vurgu
 * isterse editörden "Eklendi Arka Plan"ı değiştirir.
 */
.cc_0gxxbhqk_product_list .marla-card__fab--added {
  background: var(
    --card-fab-added-bg,
    var(--card-fab-bg, var(--card-pricebar-bg, var(--kombos-gray-50)))
  );
  /* Kenarlık dolgudan BAĞIMSIZ: "eklendi" dolgusu beyaz kaldığında daire
     çerçevesini kaybetmesin diye normal kenarlığa düşer. Dolgulu bir vurgu
     isteyen merchant "Eklendi Kenarlık" propunu da aynı renge çeker. */
  border-color: var(
    --card-fab-added-border,
    var(--card-fab-border, transparent)
  );
  color: var(
    --card-fab-added-color,
    var(--card-fab-color, var(--kombos-gray-900))
  );
}

/* Popup içindeki özelleştirme alanları — varyant rozetlerinin altında. */
.cc_0gxxbhqk_product_list .marla-card__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.cc_0gxxbhqk_product_list .marla-card__options:first-child {
  margin-top: 0;
}

/*
 * Popup içinde açılır liste MUTLAK konumlanamaz: `.kombos-modal__body`
 * `overflow-y: auto` olduğu için paneli kırpıyordu (liste görünmüyordu).
 * Burada akışın içinde açılır, modal kendi içinde kayar.
 */
.cc_0gxxbhqk_product_list .marla-card__options .kombos-choice-select__panel {
  box-shadow: none;
  margin-top: 0.25rem;
  max-height: 12rem;
  position: static;
}

/*
 * Dar sütunlarda fiyat satırı kırılmasın (1280px'te "₺" ile tutar alt alta
 * düşüyordu). Fiyat asla sarmaz; sütun daralınca satır kırmak yerine ÖLÇEKLENİR:
 * prop değeri üst sınırdır, gerçek boyut kart genişliğine göre hesaplanır.
 * (Canlıda slider fiyatı 20px ve hiç kırılmıyor; bizde mockup gereği 25px.)
 */
.cc_0gxxbhqk_product_list .marla-card {
  container-type: inline-size;
}

.cc_0gxxbhqk_product_list .marla-card__price-plain, .cc_0gxxbhqk_product_list .marla-card__price-final, .cc_0gxxbhqk_product_list .marla-card__price-old {
  white-space: nowrap;
}

.cc_0gxxbhqk_product_list .marla-card__price-plain {
  font-size: min(var(--card-price-plain-fs, 1.5625rem), 11cqi);
}

.cc_0gxxbhqk_product_list .marla-card__price-final {
  font-size: min(var(--card-price-fs, 1.5rem), 11cqi);
}

.cc_0gxxbhqk_product_list .marla-card__price-old {
  font-size: min(var(--card-price-old-fs, 1.125rem), 8cqi);
}

/*
 * İndirimli düzende satırda ayrıca 45px'lik %-kutusu ve üstü çizili fiyat var.
 * 1440'ta (kart ~238px) mockup ölçüleri sığıyor, bu yüzden orada dokunulmaz;
 * kart 220px'in altına inince (1280 ve dar ekranlar) daha sert ölçeklenir.
 */
/* 9cqi: 238px'lik kartta 6 haneli indirimli fiyatın bile sığdığı en büyük
   değer (ölçüldü); 5 haneli fiyatlarda mockup boyutuna çok yakın kalır. */
.cc_0gxxbhqk_product_list .marla-card__price-bar--discounted .marla-card__price-final {
  font-size: min(var(--card-price-fs, 1.5rem), 9cqi);
}

.cc_0gxxbhqk_product_list .marla-card__price-bar--discounted .marla-card__price-old {
  font-size: min(var(--card-price-old-fs, 1.125rem), 7.5cqi);
}

@container (max-width: 220px) {
  .cc_0gxxbhqk_product_list .marla-card__price-bar--discounted .marla-card__price-final {
    font-size: min(var(--card-price-fs, 1.5rem), 7cqi);
  }

  .cc_0gxxbhqk_product_list .marla-card__price-bar--discounted .marla-card__price-old {
    font-size: min(var(--card-price-old-fs, 1.125rem), 5.4cqi);
  }

  .cc_0gxxbhqk_product_list .marla-card__price-bar--discounted .marla-card__discount-box {
    font-size: min(var(--card-discount-fs, 1.25rem), 8cqi);
    height: min(var(--card-discount-size, 2.8125rem), 20cqi);
    width: min(var(--card-discount-size, 2.8125rem), 20cqi);
  }
}

/*
 * Kart, ızgara satırının tamamını kaplar; gövde `flex-grow: 1`, fiyat barı ve
 * `__meta` bloğu `margin-top: auto` olduğu için artan boşluk hep ADIN ALTINA
 * düşer. Satırdaki adların hepsi tek satırsa kart uzamaz, dolayısıyla hiç
 * boşluk oluşmaz; biri iki satıra inince komşusundaki etiket/taksit/fiyat
 * satırları kendiliğinden hizalanır. Hiçbir yerde sabit yükseklik YOK.
 */
.cc_0gxxbhqk_product_list .marla-card {
  height: 100%;
}

@media (max-width: 1023px) {
  /*
   * Sepete ekle butonu mobilde küçülür. Mockup'taki 45px masaüstü ölçüsü;
   * iki sütunlu mobil ızgarada kart ~180px olduğu için bar'ın yarısını
   * FAB + indirim kutusu yiyor, fiyat okunmaz hale geliyordu. Brief'te mobil
   * için ölçü YOK, "boyutları dinamik olsun" deniyor — bu yüzden ayrı prop.
   */
  .cc_0gxxbhqk_product_list .marla-card__fab {
    font-size: var(--card-fab-icon-fs-m, 1.125rem);
    height: var(--card-fab-size-m, 2.25rem);
    width: var(--card-fab-size-m, 2.25rem);
  }

  /* Bar yüksekliği FAB'ın masaüstü ölçüsünden değil, mobil ölçüsünden
     türesin — yoksa küçülen butonun altında boş yer kalır. */
  .cc_0gxxbhqk_product_list .marla-card__price-bar {
    min-height: calc(
      max(
        var(--card-fab-size-m, 2.25rem),
        var(--card-discount-size, 2.8125rem),
        var(--card-price-old-fs, 1.125rem) * 1.2 + var(--card-price-fs, 1.5rem) *
          1.2
      ) + 1rem
    );
  }
}

/* End import: ../../sub-components/MarlaProductCard/styles.css */
/* Imported from: ./components/CategoryListControls/styles.css */
/* ===== CategoryListControls — marla.com'dan birebir ölçüldü =====
 * Satır: margin 16px 0, gap 20px (<1024px) → 56px (≥1024px), align center.
 * "Filtreler": ikon 20×20 + 14px gap + 13/400 lh19.5 etiket, py 4px.
 * "Filtreleri Temizle": satırın altında, 14/400 altı çizili, siyah.
 */

/*
 * Satırın kendi 16px iç boşluğu 1024px ALTINDA var (canlıdaki `max-lg:px-4`);
 * container'ın 16px'iyle toplanıp 32px yapıyor. 1024px üstünde container'ın
 * 64px'i tek başına geçerli. "Filtreleri Temizle" bu boşluğu ALMIYOR.
 */
.cc_0gxxbhqk_product_list .kombos-category-list-controls__row {
  align-items: center;
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0;
  padding: 0 1rem;
}

/* Filtre butonu */
.cc_0gxxbhqk_product_list .kombos-category-list-controls__filter-btn {
  align-items: center;
  background: none;
  border: none;
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  gap: 0.875rem;
  overflow: hidden;
  padding: 0.25rem 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list-controls__filter-icon {
  color: var(--kombos-gray-700);
  height: 1.25rem;
  width: 1.25rem;
}

.cc_0gxxbhqk_product_list .kombos-category-list-controls__filter-label {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

/* Filtreleri temizle — satırın altında, sola yaslı */
.cc_0gxxbhqk_product_list .kombos-category-list-controls__clear {
  background: none;
  border: none;
  color: var(--kombos-black);
  cursor: pointer;
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}

/* Sütun değiştirici — canlıda YOK, editörden açılırsa görünür */
.cc_0gxxbhqk_product_list .kombos-category-list-controls__col-btn {
  margin-left: auto;
}

.cc_0gxxbhqk_product_list .kombos-category-list-controls__col-btn .kombos-icon {
  font-size: 1.25rem;
}

.cc_0gxxbhqk_product_list .kombos-category-list-controls__search {
  margin-left: auto;
  max-width: 18rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_list .kombos-category-list-controls__row {
    gap: 3.5rem;
    padding: 0;
  }
}

/* End import: ./components/CategoryListControls/styles.css */
/* Imported from: ./components/FilterBoxValues/styles.css */
/* ===== Filter Box Values — marla.com'dan birebir ölçüldü =====
 * Etiket: 1px kenarlık rgba(29,29,27,.2), beyaz zemin, 12/400 lh16 #1d1d1b,
 * iç boşluk 8px 12px, aralarında 8px. Seçili: kenarlık #717171, zemin
 * #fafafa, metin #717171.
 */

.cc_0gxxbhqk_product_list .kombos-filter-box-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-box-values__item {
  align-items: center;
  background: var(--kombos-white);
  border: 1px solid rgba(29, 29, 27, 0.2);
  border-radius: var(--kombos-radius);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 0.75rem;
  font-weight: 400;
  justify-content: center;
  line-height: 1rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cc_0gxxbhqk_product_list .kombos-filter-box-values__item--active {
  background: var(--marla-filter-chip-selected-bg);
  border-color: var(--kombos-gray-500);
  color: var(--kombos-gray-500);
}

/* End import: ./components/FilterBoxValues/styles.css */
/* Imported from: ./components/FilterCategoryList/styles.css */
/* ===== Filter Category List — marla.com'dan ölçüldü =====
 * Satır: tam genişlik, dikey iç boşluk 4px, satır arası 8px,
 * 14px/400 siyah, hover'da altı çizilir.
 */
.cc_0gxxbhqk_product_list .kombos-filter-category-list {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-category-list__link {
  align-items: center;
  background: none;
  border: none;
  color: var(--kombos-black);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  font-weight: 400;
  gap: 0.5rem;
  justify-content: flex-start;
  line-height: 1.25rem;
  padding: 0.25rem 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-category-list__link:hover {
  text-decoration: underline;
}

/* Marka sayfasında kategori seçimi yerinde filtreler — seçili satır vurgulanır */
.cc_0gxxbhqk_product_list .kombos-filter-category-list__link--active {
  font-weight: 600;
}

/* End import: ./components/FilterCategoryList/styles.css */
/* Imported from: ./components/FilterGroupValues/styles.css */
/* ===== Filter Group Values ===== */

/* End import: ./components/FilterGroupValues/styles.css */
/* Imported from: ./components/FilterListValues/styles.css */
/* ===== Filter List Values — marla.com'dan birebir ölçüldü =====
 * Satır: dikey iç boşluk 6px, ikon-metin arası 8px, metin 14/400 siyah.
 * Onay kutusu 16×16, 1px #6b7280 kenarlık; seçiliyken dolgu #717171.
 */

.cc_0gxxbhqk_product_list .kombos-filter-list-values {
  display: flex;
  flex-direction: column;
}

.cc_0gxxbhqk_product_list .kombos-filter-list-values__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem 0;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-list-values__label {
  color: var(--kombos-black);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  /* canlıdaki `mb-px` optik kaydırma — satır 33px oluyor */
  margin-bottom: 1px;
}

.cc_0gxxbhqk_product_list .kombos-filter-list-values__count {
  color: var(--kombos-gray-400);
}

/* Onay kutusu — canlıdaki yerel input görünümü */
.cc_0gxxbhqk_product_list .kombos-filter-list-values .kombos-checkbox__box {
  border-color: var(--marla-filter-checkbox-border);
}

.cc_0gxxbhqk_product_list .kombos-filter-list-values .kombos-checkbox__box--checked {
  background: var(--kombos-gray-500);
  border-color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_list .kombos-filter-list-values
  .kombos-checkbox:hover
  .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
  border-color: var(--kombos-gray-500);
}

/* End import: ./components/FilterListValues/styles.css */
/* Imported from: ./components/FilterRangeListValues/styles.css */
/* ===== Filter Range List Values ===== */

.cc_0gxxbhqk_product_list .kombos-filter-range-list-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-range-list-values__item {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  cursor: pointer;
  color: var(--kombos-gray-700);
}

.cc_0gxxbhqk_product_list .kombos-filter-range-list-values__item:hover {
  border-color: var(--kombos-gray-300);
}

.cc_0gxxbhqk_product_list .kombos-filter-range-list-values__item--active {
  border-color: var(--kombos-gray-900);
  color: var(--kombos-gray-900);
}

/* End import: ./components/FilterRangeListValues/styles.css */
/* Imported from: ./components/FilterRangeValues/styles.css */
/* ===== Range Slider ===== */

.cc_0gxxbhqk_product_list .kombos-range-slider {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
}

/* Value labels row */
.cc_0gxxbhqk_product_list .kombos-range-slider__values {
  position: relative;
  height: 1rem;
}

.cc_0gxxbhqk_product_list .kombos-range-slider__value-label {
  position: absolute;
  transform: translateX(-50%);
  color: var(--kombos-gray-900);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Track */
.cc_0gxxbhqk_product_list .kombos-range-slider__track {
  position: relative;
  height: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cc_0gxxbhqk_product_list .kombos-range-slider__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.25rem;
  border-radius: var(--kombos-radius);
  background: var(--kombos-gray-200);
}

/* Filled area between handles */
.cc_0gxxbhqk_product_list .kombos-range-slider__fill {
  position: absolute;
  height: 0.25rem;
  border-radius: var(--kombos-radius);
  background: var(--kombos-gray-900);
  pointer-events: none;
}

/* Drag handles */
.cc_0gxxbhqk_product_list .kombos-range-slider__handle {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--kombos-gray-900);
  border: 2px solid var(--kombos-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
  z-index: 1;
  outline: none;
}

.cc_0gxxbhqk_product_list .kombos-range-slider__handle:active {
  cursor: grabbing;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.cc_0gxxbhqk_product_list .kombos-range-slider__handle:focus-visible {
  box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.15);
}

/* Min/Max bound labels */
.cc_0gxxbhqk_product_list .kombos-range-slider__bounds {
  display: flex;
  justify-content: space-between;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-range-slider__bound {
  color: var(--kombos-gray-500);
  user-select: none;
}

/* End import: ./components/FilterRangeValues/styles.css */
/* Imported from: ./components/FilterSidebar/styles.css */
/* ===== Filter Sidebar ===== */
.cc_0gxxbhqk_product_list .kombos-filter-sidebar {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.cc_0gxxbhqk_product_list .kombos-filter-sidebar__search {
  padding-bottom: 0.25rem;
}

/* Clear */
.cc_0gxxbhqk_product_list .kombos-filter-sidebar__clear {
  margin-top: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--kombos-gray-500);
  text-decoration: underline;
  text-align: left;
}

.cc_0gxxbhqk_product_list .kombos-filter-sidebar__clear:hover {
  color: var(--kombos-gray-700);
}

/* End import: ./components/FilterSidebar/styles.css */
/* Imported from: ./components/FilterSwatchValues/styles.css */
/* ===== Filter Swatch Values ===== */

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--kombos-radius);
  border: 1px solid var(--kombos-gray-200);
  background: var(--kombos-white);
  cursor: pointer;
  color: var(--kombos-gray-700);
  transition: all 0.15s ease;
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__item:hover:not(.kombos-filter-swatch-values__item--active) {
  border-color: var(--kombos-gray-300);
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__item--active {
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
  border-color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__color {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--kombos-gray-200);
}

.cc_0gxxbhqk_product_list .kombos-filter-swatch-values__item--active .kombos-filter-swatch-values__color {
  border-color: var(--kombos-white);
}

/* End import: ./components/FilterSwatchValues/styles.css */
/* Imported from: ./components/FilterDrawer/styles.css */
/* ===== Filter Drawer — marla.com'dan birebir ölçüldü =====
 * Kaplayıcı rgba(0,0,0,.1) · panel SOLDAN, 384px (mobilde de 384px), gölge
 * shadow-01 · başlık bloğu py 20px / px 24px, alt 1px kenarlık, başlık 20/500
 * · gövde px 24px pt 24px · grup arası 20px, grup başlığı 16/600, içerik 12px
 * altında · alt blok px 24px pb 32px, "Kaydet" 336×40 #1d1d1b 14/500 beyaz,
 * "Filtreleri Temizle" 16px altında 14/400 altı çizili.
 */

.cc_0gxxbhqk_product_list .kombos-filter-drawer {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--kombos-z-overlay);
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__backdrop {
  background: rgba(0, 0, 0, 0.1);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer--open .kombos-filter-drawer__backdrop {
  opacity: 1;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__panel {
  background: var(--kombos-white);
  box-shadow: var(--marla-panel-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 24rem;
  overflow-y: auto;
  position: relative;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer--open .kombos-filter-drawer__panel {
  transform: translateX(0);
}

/* Başlık — panel kaydırılırken yerinde kalır */
.cc_0gxxbhqk_product_list .kombos-filter-drawer__header {
  align-items: center;
  background: var(--kombos-white);
  border-bottom: 1px solid var(--kombos-gray-200);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  left: 0;
  padding: 1.25rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: var(--kombos-z-dropdown);
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__title {
  color: var(--kombos-black);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin: 0;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__close {
  align-items: center;
  background: none;
  border: none;
  color: var(--kombos-black);
  cursor: pointer;
  display: flex;
  font-size: 1.25rem;
  justify-content: center;
  /* canlıdaki -2px optik kaydırma */
  margin-right: -2px;
  padding: 0;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__content {
  padding: 1.5rem 1.5rem 0;
}

/* Filtre grubu — çekmecede kenarlık ve dikey iç boşluk YOK */
.cc_0gxxbhqk_product_list .kombos-filter-drawer__group.kombos-collapsible-group {
  border-bottom: none;
  margin-bottom: 1.25rem;
  padding: 0;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group .kombos-collapsible-group__header {
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group .kombos-collapsible-group__title {
  color: var(--kombos-gray-900);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group .kombos-collapsible-group__toggle-icon {
  color: var(--kombos-gray-900);
  font-size: 0.875rem;
  transform: rotate(180deg);
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group
  .kombos-collapsible-group__toggle-icon--collapsed {
  transform: none;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group .kombos-collapsible-group__body {
  padding-top: 0.75rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__group .kombos-collapsible-group__body--collapsed {
  padding-top: 0;
}

/* Alt blok */
.cc_0gxxbhqk_product_list .kombos-filter-drawer__footer {
  background: var(--kombos-white);
  margin-top: auto;
  padding: 0 1.5rem 2rem;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__save {
  align-items: center;
  background: var(--kombos-gray-900);
  border: none;
  color: var(--kombos-white);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1.25rem;
  padding: 0.625rem;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-filter-drawer__clear {
  background: none;
  border: none;
  color: var(--kombos-black);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin-top: 1rem;
  padding: 0;
  text-decoration: underline;
  width: 100%;
}

/* End import: ./components/FilterDrawer/styles.css */
/* Imported from: ./components/SortDropdown/styles.css */
/* ===== Sort Dropdown — marla.com'dan birebir ölçüldü =====
 * Tetikleyici: py 4px, gap 8px · ikon 25×23 · etiket 14/400 lh20 · ok 16×16
 * (ok'un solunda 12px ml) · Panel: top 28px, py 4px, gölge shadow-01,
 * satır 12/400 lh16 #717171, iç boşluk 8px 16px, seçili satır 500 + %5 zemin.
 */

.cc_0gxxbhqk_product_list .kombos-sort-dropdown {
  position: relative;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__trigger {
  align-items: center;
  background: none;
  border: none;
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  overflow: hidden;
  padding: 0.25rem 0;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__label-wrap {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Liste ikonu kare değil (25×23) — .kombos-icon'un 1em karesi ezilir. */
.cc_0gxxbhqk_product_list .kombos-sort-dropdown__icon {
  height: 1.4375rem;
  width: 1.5625rem;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__label {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__caret {
  height: 1rem;
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
  width: 1rem;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__caret--open {
  transform: rotate(180deg);
}

/* Panel — mobilde sağa, 768px üstünde sola hizalı (canlıdaki davranış). */
.cc_0gxxbhqk_product_list .kombos-sort-dropdown__panel {
  background: var(--kombos-white);
  box-shadow: var(--marla-panel-shadow);
  min-width: max-content;
  overflow: hidden;
  padding: 0.25rem 0;
  position: absolute;
  right: 0;
  top: 1.75rem;
  width: 100%;
  z-index: var(--kombos-z-dropdown);
}

@media (min-width: 768px) {
  .cc_0gxxbhqk_product_list .kombos-sort-dropdown__panel {
    left: 0;
    right: auto;
  }
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__option {
  background: none;
  border: none;
  color: var(--kombos-gray-500);
  cursor: pointer;
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  padding: 0.5rem 1rem;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__option:hover, .cc_0gxxbhqk_product_list .kombos-sort-dropdown__option--active {
  background: rgba(112, 112, 112, 0.05);
}

.cc_0gxxbhqk_product_list .kombos-sort-dropdown__option--active {
  font-weight: 500;
}

/* End import: ./components/SortDropdown/styles.css */
/* Imported from: ./components/CategoryStorySlider/styles.css */
/* Şerit + mockup'taki sol/sağ ok butonları. */
/*
 * Üst boşluk her iki sıralamada da geçerli: şerit banner'ın ALTINDAYSA
 * banner'a, ÜSTÜNDEYSE sayfa başlığına yapışmasın diye. Değer editörden
 * gelir ("Slider Üst Boşluğu"), CSS yalnızca yedek. Komşu elemanın alt
 * boşluğuyla çakışırsa (margin collapse) büyük olan geçerli olur.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__stories-wrap {
  margin-bottom: 1rem;
  margin-top: var(--cl-story-gap, 1.5rem);
  position: relative;
}

.cc_0gxxbhqk_product_list .kombos-category-list__stories-arrow {
  position: absolute;
  top: calc(var(--story-size, 5rem) / 2);
  transform: translateY(-50%);
  z-index: var(--kombos-z-dropdown);
}

.cc_0gxxbhqk_product_list .kombos-category-list__stories-arrow--prev {
  left: 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list__stories-arrow--next {
  right: 0;
}

/* Yana kaydırılabilir alt kategori şeridi; kaydırma çubuğu gizli. */
/*
 * `safe center`: şerit ekranı doldurmuyorsa öğeler ORTALANIR, taşıyorsa
 * kendiliğinden sola yaslanır. Düz `center` kullanılsaydı taşan içerikte
 * soldaki öğeler kaydırmayla ulaşılamaz hale gelirdi. Değeri tanımayan eski
 * tarayıcılarda kural tümden düşer ve varsayılan sola yaslı davranış kalır.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__stories {
  display: flex;
  gap: 1rem;
  justify-content: safe center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cc_0gxxbhqk_product_list .kombos-category-list__stories::-webkit-scrollbar {
  display: none;
}

.cc_0gxxbhqk_product_list .kombos-category-list__story {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.5rem;
  text-decoration: none;
  width: var(--story-size, 5rem);
}

.cc_0gxxbhqk_product_list .kombos-category-list__story-media {
  background: var(--kombos-gray-100);
  border-radius: 50%;
  display: block;
  height: var(--story-size, 5rem);
  overflow: hidden;
  width: var(--story-size, 5rem);
}

.cc_0gxxbhqk_product_list .kombos-category-list__story-img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-category-list__story-label {
  color: var(--kombos-gray-900);
  font-size: var(--story-fs, 0.8125rem);
  line-height: 1.25;
  text-align: center;
}

/* End import: ./components/CategoryStorySlider/styles.css */
/* Imported from: ../../sub-components/SliderArrow/styles.css */
/* ===== Slider Arrow =====
 * marla.com hero slider'ından ölçüldü: 40×40 tam daire, DOLU beyaz zemin,
 * kenarlık yok, ikon 24px, hafif gölge. (Yarıçap kuralının kasıtlı istisnası —
 * daire olması gereken elemanlardan biri.)
 */
.cc_0gxxbhqk_product_list .kombos-slider-arrow {
  align-items: center;
  background: var(--kombos-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
  width: 2.5rem;
}

.cc_0gxxbhqk_product_list .kombos-slider-arrow:hover:not(:disabled) {
  background: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_list .kombos-slider-arrow:disabled {
  cursor: default;
  color: var(--kombos-gray-400);
}

/* End import: ../../sub-components/SliderArrow/styles.css */
/* Imported from: ./components/SeoDescription/styles.css */
/*
 * marla.com'da metin 16px / satır aralığı 28px, paragraf arası 20px.
 * Kırpma yalnızca CSS ile; metin DOM'da eksiksiz duruyor.
 *
 * Düzen referansı: curaproxturkiye.com/manuel-dis-fircalari — kırpılmış metnin
 * altında arka plana giden gradient solma, üzerine binen ortalanmış buton.
 * Köşeler Marla kuralı gereği keskin (referanstaki pill kullanılmadı).
 */

.cc_0gxxbhqk_product_list .kombos-category-list__seo {
  background: var(--seo-bg, transparent);
  margin-top: 3.75rem;
}

/* Arka plan verildiyse metin kenara yapışmasın. */
.cc_0gxxbhqk_product_list .kombos-category-list__seo[style*="--seo-bg"] .kombos-category-list__seo-clip {
  padding: 1.5rem 1.5rem 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-clip {
  position: relative;
}

/* Kırpılmışken alttaki gradient solma — referanstaki `after:h-1/3`. */
.cc_0gxxbhqk_product_list .kombos-category-list__seo-clip::after {
  background: linear-gradient(
    to top,
    var(--seo-bg, var(--kombos-white)),
    transparent
  );
  bottom: 0;
  content: "";
  height: 33%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle:checked
  ~ .kombos-category-list__seo-clip::after {
  display: none;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-body {
  -webkit-box-orient: vertical;
  color: var(--kombos-gray-900);
  display: -webkit-box;
  font-size: var(--cl-seo-body-fs, 1rem);
  -webkit-line-clamp: var(--seo-lines, 6);
  line-height: 1.75;
  overflow: hidden;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle:checked
  ~ .kombos-category-list__seo-clip
  .kombos-category-list__seo-body {
  display: block;
  overflow: visible;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-body p {
  margin: 1.25rem 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-body p:first-child {
  margin-top: 0;
}

/*
 * Aç/kapa butonu — referansta gradient'in üzerine binen ortalanmış buton.
 * Marla'nın bordo birincil buton diline uyarlandı.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__seo-label {
  background: var(--marla-primary);
  border: 1px solid var(--marla-primary-border);
  color: var(--kombos-white);
  cursor: pointer;
  display: block;
  font-size: var(--cl-seo-label-fs, 0.875rem);
  font-weight: 500;
  margin: -1.25rem auto 0;
  padding: 0.625rem 1.5rem;
  position: relative;
  text-align: center;
  width: fit-content;
  z-index: 2;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-less, .cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle:checked
  ~ .kombos-category-list__seo-label
  .kombos-category-list__seo-more {
  display: none;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle:checked
  ~ .kombos-category-list__seo-label
  .kombos-category-list__seo-less {
  display: inline;
}

/* Klavye ile odaklanınca etiket görünür olsun. */
.cc_0gxxbhqk_product_list .kombos-category-list__seo-toggle:focus-visible
  ~ .kombos-category-list__seo-label {
  outline: 2px solid var(--kombos-gray-900);
  outline-offset: 2px;
}

/*
 * Metin zaten kırpılmıyorsa (kısa açıklama) gradient ve aç/kapa butonu
 * anlamsız kalıyor — mount sonrası ölçüm bu sınıfı ekleyip ikisini de gizler.
 * Metin her hâlükârda DOM'da tam duruyor.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__seo--full .kombos-category-list__seo-body {
  display: block;
  overflow: visible;
}

.cc_0gxxbhqk_product_list .kombos-category-list__seo--full .kombos-category-list__seo-clip::after, .cc_0gxxbhqk_product_list .kombos-category-list__seo--full .kombos-category-list__seo-label {
  display: none;
}

/* End import: ./components/SeoDescription/styles.css */
/* Imported from: ../MarlaGridBanner/styles.css */
.cc_0gxxbhqk_product_list .marla-grid-banner {
  margin-top: var(--gb2-top-mobile, 0);
  aspect-ratio: var(--gb-ratio-mobile, 390 / 200);
  display: block;
  grid-column: span var(--gb-span-mobile, 2);
  overflow: hidden;
  width: 100%;
}

.cc_0gxxbhqk_product_list .marla-grid-banner__img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cc_0gxxbhqk_product_list .marla-grid-banner__img--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_list .marla-grid-banner {
    aspect-ratio: var(--gb-ratio, 654 / 250);
    grid-column: span var(--gb-span, 2);
  }

  .cc_0gxxbhqk_product_list .marla-grid-banner__img--desktop {
    display: block;
  }

  .cc_0gxxbhqk_product_list .marla-grid-banner__img--mobile {
    display: none;
  }
}


/* Bölüm üst boşluğu — canlıda bölümden bölüme değişiyor, editörden ayarlanır. */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_list .marla-grid-banner {
    margin-top: var(--gb2-top, 0);
  }
}

/* End import: ../MarlaGridBanner/styles.css */
/* Sub-component stilleri. ikas build'i bunlari SADECE @import ile
   dahil ediyor; import yoksa CSS hic yayinlanmiyor. */
/* Imported from: ../../sub-components/Breadcrumb/styles.css */
/* ===== Breadcrumb Sub-Component ===== */
.cc_0gxxbhqk_product_list .kombos-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__link {
  color: var(--kombos-gray-500);
  text-decoration: none;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__link:hover {
  text-decoration: underline;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__link--active {
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__current {
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__sep {
  font-size: 0.75rem;
  color: var(--kombos-gray-400);
  display: inline-flex;
  align-items: center;
}

.cc_0gxxbhqk_product_list .kombos-breadcrumb__sep--xs {
  font-size: 0.625rem;
  color: var(--kombos-gray-300);
}

/* End import: ../../sub-components/Breadcrumb/styles.css */
/* Imported from: ../../sub-components/Button/styles.css */
/* ===== Button ===== */

/* --- Base --- */
.cc_0gxxbhqk_product_list .kombos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--kombos-radius);
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

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

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

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

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

.cc_0gxxbhqk_product_list .kombos-btn--xs .kombos-btn__icon {
  font-size: 1rem;
}

.cc_0gxxbhqk_product_list .kombos-btn--s .kombos-btn__icon {
  font-size: 1.25rem;
}

.cc_0gxxbhqk_product_list .kombos-btn--m .kombos-btn__icon {
  font-size: 1.5rem;
}

/* --- Sizes --- */
.cc_0gxxbhqk_product_list .kombos-btn--xs {
  padding: 0.4375rem 0.9375rem;
  min-height: 2.25rem;
}

.cc_0gxxbhqk_product_list .kombos-btn--s {
  padding: 0.625rem 1.5rem;
  min-height: 2.5625rem;
}

.cc_0gxxbhqk_product_list .kombos-btn--m {
  padding: 0.6875rem 1.4375rem;
  min-height: 3.375rem;
}

/*
 * --- Primary ---
 * marla.com'da birincil buton bordo (#450017), yazı 14px/500 beyaz,
 * iç boşluk 10px 24px, yükseklik ~41px, köşe keskin, 1px açık pembe kenarlık.
 * (404, sepet "Satın Al" ve ürün detay "Yorum Ekle" butonlarından ölçüldü.)
 */
.cc_0gxxbhqk_product_list .kombos-btn--primary {
  background-color: var(--marla-primary);
  border-color: var(--marla-primary-border);
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_list .kombos-btn--primary:hover:not(:disabled) {
  opacity: 0.85;
}

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

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

.cc_0gxxbhqk_product_list .kombos-btn--secondary:hover:not(:disabled) {
  border-color: var(--kombos-gray-300);
}

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

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

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

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

/* End import: ../../sub-components/Button/styles.css */
/* Imported from: ../../sub-components/Checkbox/styles.css */
.cc_0gxxbhqk_product_list .kombos-checkbox {
  display: inline-flex;
  cursor: pointer;
}

.cc_0gxxbhqk_product_list .kombos-checkbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc_0gxxbhqk_product_list .kombos-checkbox__box {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  border: 1px solid var(--kombos-gray-300);
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cc_0gxxbhqk_product_list .kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
  border-color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_list .kombos-checkbox__box--checked {
  background: var(--kombos-gray-900);
  border-color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_list .kombos-checkbox__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kombos-white);
  font-size: 0.75rem;
}

/* --- Status (standalone + inherited from FormItem) --- */
.cc_0gxxbhqk_product_list [data-state="error"] .kombos-checkbox__box {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list .kombos-checkbox[data-state="error"]:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked), .cc_0gxxbhqk_product_list [data-state="error"] .kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list [data-state="success"] .kombos-checkbox__box {
  border-color: var(--kombos-success);
}

.cc_0gxxbhqk_product_list .kombos-checkbox[data-state="success"]:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked), .cc_0gxxbhqk_product_list [data-state="success"] .kombos-checkbox:hover .kombos-checkbox__box:not(.kombos-checkbox__box--checked) {
  border-color: var(--kombos-success);
}

/* End import: ../../sub-components/Checkbox/styles.css */
/* Imported from: ../../sub-components/CollapsibleGroup/styles.css */
/* ===== Collapsible Group ===== */
.cc_0gxxbhqk_product_list .kombos-collapsible-group {
  border-bottom: 1px solid var(--cg-divider, var(--kombos-gray-200));
  padding: 1rem 0;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__title {
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__toggle-icon {
  font-size: 1rem;
  color: var(--kombos-gray-500);
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
  margin-left: auto;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__toggle-icon--collapsed {
  transform: rotate(90deg);
}

/*
 * İki ikonlu (miras alınabilir) mod: artı/eksi ile ok birlikte basılır,
 * görünen olanı CSS değişkeni seçer. Sarmalayıcının dönüşü kapatılır; ok
 * kendi içinde döner — kapalıyken aşağı, açıkken yukarı (canlıdaki davranış).
 */
.cc_0gxxbhqk_product_list .kombos-collapsible-group__toggle-icon--dual {
  transform: none;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__icon-plusminus {
  align-items: center;
  display: var(--cg-icon-plus, flex);
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__icon-chevron {
  align-items: center;
  display: var(--cg-icon-chevron, none);
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__toggle-icon--collapsed
  .kombos-collapsible-group__icon-chevron {
  transform: rotate(0deg);
}

/* Animated body — grid-template-rows trick */
.cc_0gxxbhqk_product_list .kombos-collapsible-group__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, padding-top 0.25s ease;
  padding-top: 0.75rem;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__body--collapsed {
  grid-template-rows: 0fr;
  padding-top: 0;
}

.cc_0gxxbhqk_product_list .kombos-collapsible-group__content {
  overflow: hidden;
  min-height: 0;
}

/* End import: ../../sub-components/CollapsibleGroup/styles.css */
/* Imported from: ../../sub-components/Input/styles.css */
/* ===== Input Sub-Component ===== */

/* --- Base --- */
.cc_0gxxbhqk_product_list .kombos-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  transition: border-color 0.15s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-input:hover {
  border-color: var(--kombos-gray-300);
}

.cc_0gxxbhqk_product_list .kombos-input:focus-within {
  border-color: var(--kombos-gray-900);
}

/* --- Sizes --- */
.cc_0gxxbhqk_product_list .kombos-input--s {
  /* Canlıdan ölçüldü: 44px yükseklik, iç boşluk 8px 12px. */
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  min-height: 2.75rem;
}

.cc_0gxxbhqk_product_list .kombos-input--xs {
  padding: 0.375rem 0.75rem;
  gap: 0.375rem;
  min-height: 2.25rem;
}

/* --- Native input --- */
.cc_0gxxbhqk_product_list .kombos-input__native {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--kombos-gray-900);
  padding: 0;
}

.cc_0gxxbhqk_product_list .kombos-input__native::placeholder {
  color: var(--kombos-gray-400);
}

/* --- Left icon --- */
.cc_0gxxbhqk_product_list .kombos-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_list .kombos-input--s .kombos-input__icon {
  font-size: 1.25rem;
}

.cc_0gxxbhqk_product_list .kombos-input--xs .kombos-input__icon {
  font-size: 1rem;
}

/* --- With-icon variant --- */
.cc_0gxxbhqk_product_list .kombos-input--with-icon {
  border-color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_list .kombos-input--s.kombos-input--with-icon {
  padding: 0.5rem 0.6875rem;
  gap: 0.75rem;
}

.cc_0gxxbhqk_product_list .kombos-input--xs.kombos-input--with-icon {
  padding: 0.375rem 0.6875rem;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-input--with-icon:hover, .cc_0gxxbhqk_product_list .kombos-input--with-icon:focus-within {
  border-color: var(--kombos-gray-700);
}

.cc_0gxxbhqk_product_list .kombos-input--with-icon:focus-within .kombos-input__icon {
  color: var(--kombos-gray-700);
}

/* --- Password toggle --- */
.cc_0gxxbhqk_product_list .kombos-input__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_list .kombos-input--s .kombos-input__toggle {
  font-size: 1.5rem;
}

.cc_0gxxbhqk_product_list .kombos-input--xs .kombos-input__toggle {
  font-size: 1.25rem;
}

/* --- Date input --- */
.cc_0gxxbhqk_product_list .kombos-input__native[type="date"], .cc_0gxxbhqk_product_list .kombos-input__native[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
}

.cc_0gxxbhqk_product_list .kombos-input__native[type="date"]::-webkit-calendar-picker-indicator, .cc_0gxxbhqk_product_list .kombos-input__native[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

/* --- Status (standalone + inherited from FormItem) --- */
.cc_0gxxbhqk_product_list .kombos-input[data-state="error"], .cc_0gxxbhqk_product_list [data-state="error"] .kombos-input {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list .kombos-input[data-state="error"]:hover, .cc_0gxxbhqk_product_list .kombos-input[data-state="error"]:focus-within, .cc_0gxxbhqk_product_list [data-state="error"] .kombos-input:hover, .cc_0gxxbhqk_product_list [data-state="error"] .kombos-input:focus-within {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_list .kombos-input[data-state="success"], .cc_0gxxbhqk_product_list [data-state="success"] .kombos-input {
  border-color: var(--kombos-success);
}

.cc_0gxxbhqk_product_list .kombos-input[data-state="success"]:hover, .cc_0gxxbhqk_product_list .kombos-input[data-state="success"]:focus-within, .cc_0gxxbhqk_product_list [data-state="success"] .kombos-input:hover, .cc_0gxxbhqk_product_list [data-state="success"] .kombos-input:focus-within {
  border-color: var(--kombos-success);
}

/* --- Disabled state --- */
.cc_0gxxbhqk_product_list .kombos-input--disabled {
  background: var(--kombos-gray-50);
  border-color: var(--kombos-gray-200);
  pointer-events: none;
}

.cc_0gxxbhqk_product_list .kombos-input--disabled .kombos-input__native, .cc_0gxxbhqk_product_list .kombos-input--disabled .kombos-input__native::placeholder {
  color: var(--kombos-gray-300);
}

/* End import: ../../sub-components/Input/styles.css */
/* Imported from: ../../sub-components/Pagination/styles.css */
/* ===== Pagination ===== */
.cc_0gxxbhqk_product_list .kombos-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  max-width: 100%;
}

/* Left/right button groups (first+prev, next+last) */
.cc_0gxxbhqk_product_list .kombos-pagination__nav-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Navigation buttons (first, prev, next, last) */
.cc_0gxxbhqk_product_list .kombos-pagination__nav-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kombos-gray-50);
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  cursor: pointer;
  font-size: 1rem;
  color: var(--kombos-gray-900);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cc_0gxxbhqk_product_list .kombos-pagination__nav-btn:hover:not(:disabled) {
  border-color: var(--kombos-gray-300);
  background: var(--kombos-gray-100);
}

.cc_0gxxbhqk_product_list .kombos-pagination__nav-btn:disabled {
  cursor: default;
  color: var(--kombos-gray-300);
  background: var(--kombos-gray-50);
}

/* Page numbers container */
.cc_0gxxbhqk_product_list .kombos-pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Page number buttons — 32×32 */
.cc_0gxxbhqk_product_list .kombos-pagination__page {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--kombos-radius);
  cursor: pointer;
  padding: 0;
  color: var(--kombos-gray-500);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.cc_0gxxbhqk_product_list .kombos-pagination__page:hover {
  color: var(--kombos-gray-900);
  background: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_list .kombos-pagination__page--active {
  color: var(--kombos-white);
  background: var(--kombos-gray-900);
  pointer-events: none;
}

/* Dots separator */
.cc_0gxxbhqk_product_list .kombos-pagination__dots {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--kombos-gray-400);
}

/* End import: ../../sub-components/Pagination/styles.css */
/* Imported from: ../../sub-components/SpinnerIcon/styles.css */
.cc_0gxxbhqk_product_list .kombos-spinner {
  animation: cc_0gxxbhqk_product_list_kombos-spin 1s linear infinite;
}

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

/* End import: ../../sub-components/SpinnerIcon/styles.css */
/* Imported from: ../../sub-components/Tag/styles.css */
/* ===== Tag ===== */
.cc_0gxxbhqk_product_list .kombos-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--kombos-radius);
  white-space: nowrap;
}

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

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

/* Dark */
.cc_0gxxbhqk_product_list .kombos-tag--dark {
  padding: 0.125rem 0.5rem;
  border-radius: var(--kombos-radius);
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
}

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

/* ===== Category List Section ===== */
.cc_0gxxbhqk_product_list .kombos-category-list {
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-category-list__prev-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Top: Breadcrumb + Title */
/*
 * marla.com: breadcrumb TAM GENİŞLİKTE gri bir şeritte duruyor —
 * bg rgba(245,245,245,0.7), üst boşluk 20px, yükseklik 28px,
 * liste 12px/500/#4F4F4F, dikey iç boşluk 6px, yatay kaydırılabilir.
 * Şerit container'ı taştığı için negatif margin ile tam genişliğe açılıyor.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__top {
  background: rgba(245, 245, 245, 0.7);
  margin-inline: calc(50% - 50vw);
  margin-top: 1.25rem;
  padding-inline: calc(50vw - 50%);
}

.cc_0gxxbhqk_product_list .kombos-category-list__breadcrumb {
  margin-bottom: 0;
  overflow-x: auto;
  padding-block: 0.375rem;
  scrollbar-width: none;
  white-space: nowrap;
}

.cc_0gxxbhqk_product_list .kombos-category-list__breadcrumb::-webkit-scrollbar {
  display: none;
}

/*
 * marla.com: başlık ortalı, banner'ın üstünde. Canlıdaki 18px yerine talep
 * gereği 36px varsayılan — boyut ve renk editörden gelir.
 */
/*
 * `width/align-self/display` bilinçli: kapsayıcı bir yerde flex/grid'e
 * dönüşürse başlık içeriğe daralıp sola yaslanıyor ve text-align hükümsüz
 * kalıyor. Bu üç satır her düzende tam genişlik + ortalamayı garantiler.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__title {
  align-self: stretch;
  color: var(--cl-title-color, var(--kombos-gray-900));
  display: block;
  font-size: var(--cl-title-fs-mobile, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-align: center;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-category-list__count {
  font-size: var(--cl-count-fs, 1rem);
  font-weight: 400;
  margin-left: 0.5rem;
}

/* Kategori banner'ı — oran editörden serbest metin olarak gelir. */
.cc_0gxxbhqk_product_list .kombos-category-list__banner {
  aspect-ratio: var(--cl-banner-ratio-mobile, 2 / 1);
  display: block;
  margin-top: 1rem;
  overflow: hidden;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-category-list__banner-img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cc_0gxxbhqk_product_list .kombos-category-list__banner-img--desktop {
  display: none;
}

/* Main layout */
.cc_0gxxbhqk_product_list .kombos-category-list__main {
  display: flex;
  gap: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Sidebar — hidden on mobile */
.cc_0gxxbhqk_product_list .kombos-category-list__sidebar {
  display: none;
}

/* Grid area */
.cc_0gxxbhqk_product_list .kombos-category-list__grid-area {
  flex: 1;
  min-width: 0;
}

/*
 * `dense`: ızgara içi bannerlar birden fazla sütun kapladığı için, bulunduğu
 * satırda yeterli boş hücre kalmadığında bir alt satıra iner ve üst satırın
 * kalanı boş kalırdı. Dense yerleşimle bu boşluğu banner'dan SONRAKİ kartlar
 * sırasıyla doldurur — kartların hepsi tek sütunluk olduğu için görsel sıra
 * bozulmaz, banner da kendiliğinden satır başına hizalanır. Böylece editörde
 * hangi konum yazılırsa yazılsın (tek/çift fark etmez, her kırılımda) ürün
 * ızgarasında boş hücre kalmaz.
 */
.cc_0gxxbhqk_product_list .kombos-category-list__grid {
  display: grid;
  gap: 1.25rem 0.25rem;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(var(--cl-cols-mobile, 2), minmax(0, 1fr));
}

.cc_0gxxbhqk_product_list .kombos-category-list__empty {
  color: var(--kombos-gray-900);
  text-align: center;
  padding: 3rem 0;
}

.cc_0gxxbhqk_product_list .kombos-category-list__pagination {
  margin-top: 2rem;
}

.cc_0gxxbhqk_product_list .kombos-category-list__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_list .kombos-category-list__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sentinel for IntersectionObserver (infinite scroll) */
.cc_0gxxbhqk_product_list .kombos-category-list__sentinel {
  height: 1px;
}

/* ===== Tablet (>= 768px) ===== */
@media (min-width: 768px) {
  .cc_0gxxbhqk_product_list .kombos-category-list__grid {
    gap: 1.25rem 0.25rem;
  }
}

/* ===== Desktop (>= 1024px) ===== */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_list .kombos-category-list__main {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
  }

  /*
   * Sabit filtre sütunu açıkken (canlıdaki varsayılan DEĞİL) masaüstünde
   * "Filtreler" butonu gereksiz — sütun zaten görünür. Mobilde sütun gizli
   * olduğu için buton orada kalır.
   */
  .cc_0gxxbhqk_product_list .kombos-category-list:not(.kombos-category-list--filters-inline)
    .kombos-category-list-controls__filter-btn {
    display: none;
  }

  /* Show sidebar — sticky so it stays visible while scrolling */
  .cc_0gxxbhqk_product_list .kombos-category-list__sidebar {
    width: 15rem;
    display: block;
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__title {
    font-size: var(--cl-title-fs, 2.25rem);
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__banner {
    aspect-ratio: var(--cl-banner-ratio, 5 / 1);
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__banner-img--desktop {
    display: block;
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__banner-img--mobile {
    display: none;
  }

  /*
   * Sütun sayısı editörden gelir (varsayılan 4). Kullanıcının 3/4 sütun
   * tercihi (--cols-3/4 modifier'ı) bu değeri ezer.
   */
  .cc_0gxxbhqk_product_list .kombos-category-list__grid {
    grid-template-columns: repeat(var(--cl-cols, 4), minmax(0, 1fr));
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc_0gxxbhqk_product_list .kombos-category-list__grid--cols-4 {
    grid-template-columns: repeat(var(--cl-cols, 4), minmax(0, 1fr));
  }
}