/* Ürünlerin bulunduğu bölümün konteyneri */
.product-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center; /* Grid'i yatay olarak ortalamak için */
    /*grid-template-columns: repeat(5, 1fr); /* Her zaman 5 sütun oluştur */
    gap: 20px; /* Ürünler arasındaki boşluk */
    margin-top: 20px; /* Üstten boşluk */
    width: 100%; /* Tam genişlik */
    max-width: 1200px; /* Konteynerin maksimum genişliği */
    margin-left: auto; /* Ortalamak için */
    margin-right: auto; /* Ortalamak için */
}

/* Tek bir ürün kutusu */
.woo-entry-inner {
    list-style: none;
    border: 1px solid #e1e1e1;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
    /*min-height: 400px; /* Ürün kutusuna minimum yükseklik ver */
    max-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçeriği yukarıdan aşağıya düzenler */
}


/* Ürün kutusu hover efekti */
.woo-entry-inner:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Hover sırasında hafif gölge */
}

/* Ürün resmi */
.woo-entry-inner .image-wrap img {
    max-width: 100%; /* Resmi kutu genişliğine sığdır */
    height: auto;
    margin-bottom: 10px; /* Resim ile diğer içerik arasında boşluk */
    display: block; /* Görselin taşmasını önlemek için */
}

/* Ürün başlıkları */
.woo-entry-inner .title h2 {
    font-size: 18px;
    margin: 10px 0; /* Başlığın etrafında boşluk */
    font-weight: bold;
    overflow: hidden !important; /* Taşmayı engelle */
    text-overflow: ellipsis !important; /* Uzun başlıklar için üç nokta ekle */
    //white-space: nowrap; /* Başlık satırını tek satır yap */
    min-height: 50px; /* Başlık için minimum yükseklik */
}

.woo-entry-inner .title h2 a {
    color: #333; /* Başlık rengi */
    text-decoration: none; /* Alt çizgiyi kaldır */
    transition: color 0.3s ease; /* Hover sırasında renk değişimi */
}

/* Başlık hover efekti */
.woo-entry-inner .title h2 a:hover {
    color: #0073aa; /* Hover sırasında başlık rengini değiştir */
}

/* Fiyat stili */
.woo-entry-inner .price-wrap {
    font-size: 16px;
    color: #000; /* Fiyat rengi */
    font-weight: bold;
    margin-bottom: 10px; /* Fiyatın altındaki boşluk */
}

/* Yıldız derecelendirme stili */
.woo-entry-inner .rating {
    margin-bottom: 10px; /* Derecelendirmenin altındaki boşluk */
}

/* "Daha Fazla Göster" butonu */
.see-more-btn {
    display: block;
    margin: 20px auto; /* Butonu yatayda ortalar */
    padding: 10px 20px; /* Butonun içindeki boşluk */
    background-color: #0073aa; /* WooCommerce birincil rengi */
    color: #fff; /* Buton metin rengi */
    border: none;
    cursor: pointer; /* Buton üzerine gelindiğinde imleci değiştirir */
    border-radius: 5px; /* Buton köşelerini yuvarlar */
    transition: background-color 0.3s ease; /* Hover efekti */
}

/* See More butonu */
.woo-entry-inner .btn-wrap {
    position: absolute;
    bottom: 15px; /* Butonu kutunun altından biraz yukarı yerleştir */
    left: 50%;
    transform: translateX(-50%); /* Butonu yatayda ortalar */
    width: 80%; /* Butona genişlik ayarı */
}


/* "Daha Fazla Göster" butonu hover efekti */
.see-more-btn:hover {
    background-color: #005f8d; /* Hover sırasında daha koyu bir mavi */
}

/* Responsive ayarlar (tablet ve mobil cihazlar için) */
@media (max-width: 1024px) {
    .product-section {
        grid-template-columns: repeat(5, 1fr); /* Tabletlerde 3 sütun */
    }
}

@media (max-width: 768px) {
    .product-section {
        grid-template-columns: repeat(3, 1fr); /* Mobil yatayda 2 sütun */
    }
}

@media (max-width: 480px) {
    .product-section {
        grid-template-columns: 1fr; /* Mobil dikeyde 1 sütun */
    }

    .woo-entry-inner {
        
        min-height: 400px; /* Ürün kutusuna minimum yükseklik ver */
        max-width: 300px;
        
        }
}