/* =========================================================
   Elitspot — projeye özel stil override'ları
   (themes.css'ten SONRA yüklenir)
   ========================================================= */

/* Aktif menü öğesi, hover durumundaki alt çizgi efektinin aynısını alır. */
.main-header .main-menu .nav-item.active .nav-link::before {
  width: 100%;
}

/* Mobil yan menüde aktif öğe vurgusu */
.sidenav .main-menu .nav-item.active > .nav-link {
  font-weight: 700;
  color: #000;
}

/* Anasayfa ürün karoları (masonry): mobilde başlık/kategori görselin
   üzerine binmesin. Overlay yerine görselin altında normal akışta göster;
   rozeti köşede tut. Masaüstünde overlay davranışı korunur. */
@media (max-width: 575.98px) {
  /* Başlık + kategori görselin altında, normal akışta */
  .home-product-info {
    position: static;
    padding: 0.5rem 0 0 !important;
  }
  .home-product-info .font-weight-bold {
    font-size: 0.9rem;
  }
  /* Rozet görselin sağ üst köşesinde sabit kalsın */
  .home-product-info .badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }
  /* Görsel kareyi içeriğe bırak: .ratio'nun height:100%'i metni hücre
     dışına taşırıp bir alt satırın görseliyle kırpıyordu. ::before ile
     kare oran korunur. */
  .home-product .card-img.ratio {
    height: auto;
  }
  /* Tanıtım bloğu mobilde 2 satır kaplamasın; tek satır tam genişlik banner */
  .home-feature {
    grid-row: auto !important;
  }
}

/* =========================================================
   Ürünler sayfası — mobil kategori filtresi
   md altında dikey sidebar tüm ekranı kaplıyordu; bunun yerine
   yatay kaydırılabilir "çip" (pill) çubuğu gösteriyoruz.
   Masaüstünde (md+) dikey sidebar aynen korunur.
   ========================================================= */
@media (max-width: 767.98px) {
  /* Sidebar kompakt; ürünler hemen altında başlasın */
  #sidebar.primary-sidebar {
    margin-bottom: 1.25rem !important;
  }
  #sidebar .card {
    margin-bottom: 0 !important;
  }
  #sidebar .card-title {
    font-size: 1rem;
  }
  #sidebar .card-body {
    padding-top: 0.75rem !important;
  }

  /* Listeyi tek satır, yatay kaydırılabilir çip çubuğuna çevir */
  #sidebar ul.list-unstyled {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    scrollbar-width: none;            /* Firefox: kaydırma çubuğunu gizle */
  }
  #sidebar ul.list-unstyled::-webkit-scrollbar {
    display: none;                    /* WebKit: kaydırma çubuğunu gizle */
  }
  #sidebar ul.list-unstyled > li {
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }

  /* Her bağlantı = çip */
  #sidebar ul.list-unstyled > li > a {
    display: inline-block;
    white-space: nowrap;
    padding: 0.4rem 0.9rem;
    border: 1px solid #e3e3e3 !important;   /* tema border-bottom/white sınıflarını ezer */
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary, #777) !important;
    line-height: 1.2;
  }

  /* Aktif çip: dolu siyah */
  #sidebar ul.list-unstyled > li > a.text-primary {
    background: var(--primary, #000);
    border-color: var(--primary, #000) !important;
    color: #fff !important;
  }
  /* Aktif çipte ürün adedi okunur kalsın */
  #sidebar ul.list-unstyled > li > a.text-primary .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
  }
}