/*
 * Mobil sabit sepete ekle çubuğu. Sayfadaki asıl buton ekrandayken gizli
 * kalır; görünür olduğunda aşağıdan kayarak gelir.
 *
 * Çubuk komple bordo tek blok: zemin bordo, içindeki TÜM yazılar beyaz
 * (buton dahil — buton ayrı bir kutu gibi durmuyor, zeminle aynı renkte).
 * Buradaki değerler yalnızca varsayılan; renk ve px'lerin hepsi editör
 * propları üzerinden CSS değişkeniyle eziliyor.
 *
 * Düzen: solda ürün adı (+ seçili ölçü) ve altında fiyat, sağda buton.
 * Ölçü seçilmemişken fiyat basılmaz — bileşen o satırı hiç render etmez.
 */

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc {
  align-items: center;
  background: var(--satc-bar-bg, var(--marla-primary));
  border-top: 1px solid var(--satc-bar-border, var(--satc-bar-bg, var(--marla-primary)));
  bottom: 0;
  color: var(--kombos-white);
  display: none;
  gap: 0.75rem;
  left: 0;
  padding: 0.625rem 1rem;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.2s ease;
  z-index: var(--kombos-z-header);
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc--visible {
  transform: translateY(0);
}

/* Kapalıyken (ör. açılır sepet açıkken) tıklama da geçmemeli. */
.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc:not(.marla-sticky-atc--visible) {
  pointer-events: none;
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__top {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  min-width: 0;
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__name {
  color: var(--satc-name-color, var(--kombos-white));
  font-size: var(--satc-name-fs, 0.8125rem);
  font-weight: var(--satc-name-fw, 500);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seçilen ölçü ürün adının yanında küçük bir etiket olarak durur; çerçevesi
   yazı rengini izler ki renk prop'u değiştiğinde ikisi ayrışmasın. */
.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__option {
  border: 1px solid currentColor;
  color: var(--satc-opt-color, var(--kombos-white));
  flex: 0 0 auto;
  font-size: var(--satc-opt-fs, 0.75rem);
  font-weight: var(--satc-opt-fw, 600);
  line-height: 1.3;
  padding: 0.0625rem 0.375rem;
  white-space: nowrap;
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__price {
  color: var(--satc-price-color, var(--kombos-white));
  font-size: var(--satc-price-fs, 1.25rem);
  font-weight: var(--satc-price-fw, 800);
  line-height: 1.2;
  white-space: nowrap;
}

/* Buton zeminle aynı renkte — çubuk tek parça görünür. Ayrı bir renk
   isteniyorsa "Buton Arka Planı" prop'u devreye girer. */
.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__btn {
  background: var(--satc-bg, transparent);
  border: 0;
  color: var(--satc-color, var(--kombos-white));
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--satc-btn-fs, 0.875rem);
  font-weight: var(--satc-btn-fw, 700);
  line-height: 1.4;
  min-width: var(--satc-btn-min-w, 10rem);
  padding: 0.625rem 0.75rem;
  text-align: center;
}

/*
 * Kutu zemini açıkken buton ayrı bir blok gibi görünür: varsayılan beyaz
 * zemin + bordo yazı. "Buton Arka Planı" / "Buton Yazı Rengi" / "Buton
 * Çerçeve Rengi" propları bu varsayılanları ezer.
 */
.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__btn--boxed {
  background: var(--satc-bg, var(--kombos-white));
  border: 1px solid var(--satc-btn-border, transparent);
  color: var(--satc-color, var(--marla-primary));
}

.cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc__btn:disabled {
  cursor: default;
  opacity: 0.5;
}

@media (max-width: 1023px) {
  .cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .cc_0gxxbhqk_j1TqEDgU9M .marla-sticky-atc--desktop {
    display: flex;
  }
}