/*
 * StickyAddToCart — iki duzen, tek bolum:
 *
 * MOBIL (<768px) — Stitch referansi: urun-detay.html, "Fixed Bottom Action
 * Area (Add to Cart)" (bg-surface/90 backdrop-blur-md, border-t
 * border-outline-variant/30, p-4, full-width primary button). Stitch'in kendi
 * bari isim+fiyati buton etiketine katiyor ("Sepete Ekle - ₺2.499"); bu bolum
 * spec geregi isim / fiyat / buton olarak ayirir ki fiyat kendi indirim
 * bicimini tasiyabilsin. Ekranin ALTINDA durur.
 *
 * MASAUSTU (>=768px) — Stitch bu ekrani tasarlamadi; sayfa asagi kayinca ana
 * "Sepete Ekle" gorunmez oldugu icin ayni eylem YUKARIDA, sticky navbar'in
 * hemen altinda yuzen bir kart olarak tekrarlanir: kucuk urun gorseli + isim +
 * fiyat + genis CTA + favori dairesi. Mobilde gereksiz olan gorsel ve favori
 * dugmesi orada gizlidir.
 *
 * Gorunurluk tamamen JS'ten gelir (IntersectionObserver iki ayri modifier
 * yazar): mobilde `--visible` (ana buton ekranda degil), masaustunde
 * `--passed` (ana buton YUKARI kaydi). Bu dosya sadece iki durumu tanimlar.
 *
 * Mobilde dogrudan BottomNavBar'in ustune oturur
 * (src/components/BottomNavBar/styles.css): o bar `height: 4rem` +
 * `border-top: 1px` + kendi `env(safe-area-inset-bottom)` payini tasir,
 * asagidaki `bottom` ucunu de yeniden uretir ki ust uste binmesin.
 *
 * Masaustunde ust bosluk `--sticky-atc-nav-h` ile gelir: bileşen sticky
 * navbar'in yuksekligini olcup inline yazar (logo boyutu ayarla degisiyor).
 */
/* Skipped (covered by shared chunk CSS): ../../sub-components/Button/styles.css */

.cc_t2dowgyg_ltFkp4VCac .sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4rem + 1px + env(safe-area-inset-bottom, 0px));
  z-index: var(--mh-z-header);
  width: 100%;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  border-top: 1px solid var(--mh-outline-variant);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

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

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__name {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__price {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--mh-primary);
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__price--discounted {
  color: var(--mh-accent-crimson);
  font-weight: 700;
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__btn {
  flex-shrink: 0;
  min-height: 0;
  padding: 0.75rem 1.25rem;
  /* Sag kolondaki Sepete Ekle ile ayni buton — ayni yaricap (brooklinen 1.25rem) */
  border-radius: 20px;
  font-family: var(--mh-font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__btn:hover:not(:disabled) {
  opacity: 0.9;
}

.cc_t2dowgyg_ltFkp4VCac .sticky-atc__btn:disabled {
  background-color: var(--mh-outline-variant) !important;
  border-color: var(--mh-outline-variant) !important;
  color: var(--mh-on-surface-variant) !important;
}

/* Gorsel ve favori SADECE masaustu kartinda var — mobil bar dar, Stitch
 * tasariminda ikisi de yok. */
.cc_t2dowgyg_ltFkp4VCac .sticky-atc__thumb, .cc_t2dowgyg_ltFkp4VCac .sticky-atc__fav {
  display: none;
}

/* ===== Mobil gorunurluk ===== */
@media (max-width: 767px) {
  .cc_t2dowgyg_ltFkp4VCac .sticky-atc--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===== Masaustu (>=768px) — ustte yuzen kart ===== */
@media (min-width: 768px) {
  .cc_t2dowgyg_ltFkp4VCac .sticky-atc {
    top: calc(var(--sticky-atc-nav-h, 0px) + 0.75rem);
    bottom: auto;
    /* Sticky navbar'in ALTINDAN kayarak girer, ustune binmez. */
    z-index: calc(var(--mh-z-header) - 1);
    padding-inline: 1.5rem;
    transform: translateY(calc(-100% - var(--sticky-atc-nav-h, 0px) - 1rem));
  }

  /* Sarmalayici tam genislikte ama kart max-width'li: tiklamayi KART alir,
   * yanlardaki bos serit sayfaya gecirgen kalir. */
  .cc_t2dowgyg_ltFkp4VCac .sticky-atc--passed {
    transform: translateY(0);
    opacity: 1;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc--passed .sticky-atc__bar {
    pointer-events: auto;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__bar {
    max-width: var(--mh-max-width);
    margin-inline: auto;
    gap: 1rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border-top: none;
    border: 1px solid var(--mh-outline-subtle);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__thumb {
    display: block;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--mh-surface-container-low);
  }

  /* Masaustunde isim ve fiyat yan yana; isim kisalir, fiyat kisalmaz. */
  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__info {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__name {
    flex: 0 1 auto;
    min-width: 0;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__price {
    flex-shrink: 0;
    font-weight: 600;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__btn {
    min-width: 14rem;
    padding: 0.875rem 2rem;
    /* Ustteki kart tamamen yuvarlak hap buton kullanir (gorsel referans). */
    border-radius: 999px;
    font-size: 14px;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__fav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--mh-outline-variant);
    border-radius: 50%;
    background: none;
    color: var(--mh-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__fav:hover {
    opacity: 0.7;
  }

  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__fav:active {
    transform: scale(0.95);
  }
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_ltFkp4VCac .sticky-atc__btn {
    min-width: 18rem;
  }
}