/* Ürün kartı çift-görsel hover stilleri — ortak kaynak.
 * Kullanan sayfalar: index.php (ana sayfa), kategoriler.php, arama.php.
 * Kurallar ana sayfadaki birebir karşılığıyla aynıdır; tek yerden yönetilir. */
.product-card::before,
.product-card::after,
.product-image::before,
.product-image::after,
.product-img-link::before,
.product-img-link::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important; /* Dış CSS'teki padding-top: 100% alanını sıfırlar */
    margin: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #f8f9fa !important;
}

.product-img-link {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.product-img-link img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.product-img-link .primary-img {
    z-index: 1 !important;
    opacity: 1 !important;
}

.product-img-link .secondary-img {
    z-index: 2 !important;
    opacity: 0 !important;
}

/* Fare üzerine geldiğinde 2. resim yumuşakça belirir */
.product-card:hover .product-img-link .secondary-img {
    opacity: 1 !important;
}

.product-card:hover .product-img-link img {
    transform: scale(1.05) !important;
}

/* Bakım rozet CSS'i merkezi: css/style.css (.image-care-badges, .icon-badge) */