/* ===============================================
   ÜRÜN KARTLARI RESİM DÜZELTME - GLOBAL
   Tüm sayfalarda ürün resimlerini tam dolduracak
   =============================================== */

/* Ana Sayfa Renk Kategorileri - Özel Düzeltme */
.color-category-img-wrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
}

.color-category-img-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Shop ve Kategori Sayfaları - Product Card */
.product-card .product-image-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
}

.product-card .product-image-wrapper img.product-image,
.product-card .product-image-wrapper img.product-main-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Template'teki standart product-box için - SADECE gerekli yerler */
.product-box .img-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
}

.product-box .img-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Hover Efektleri */
.product-box:hover .img-wrapper img,
.product-card:hover .product-image-wrapper img,
.color-category-img-wrapper:hover img {
    transform: scale(1.05);
}

/* Video Overlay */
.product-image-wrapper .product-video,
.product-image-wrapper .product-hover-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Mobil Responsive */
@media (max-width: 768px) {
    .product-box .img-wrapper,
    .product-card .product-image-wrapper,
    .color-category-img-wrapper {
        padding-bottom: 100% !important;
    }
}