/* Ürün kartı: Hızlı Gözat + Hemen Al buton arka planı */

.product-item {
    padding-bottom: 20px;
}

.product-item .list-action .ws-ec-quickview-btn,
.product-item .list-action .ws-ec-quickshop-btn {
    background-color: rgba(255, 255, 255, 0.45);
}

.product-item .list-action .ws-ec-quickview-btn:hover,
.product-item .list-action .ws-ec-quickshop-btn:hover {
    background-color: var(--black, #1f1f1f);
}

/* Kart gölgesi — tüm kutu (tema ayarı: product_card_shadow_enabled) */
.product-item.product-item--shadow .product-main {
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 12px 28px -8px rgba(15, 23, 42, 0.14);
    border-radius: 1rem;
    transition: box-shadow 0.35s ease;
    overflow: hidden;
    background-color: var(--white, #fff);
}

.product-item.product-item--shadow:hover .product-main {
    box-shadow:
        0 8px 12px -2px rgba(15, 23, 42, 0.08),
        0 20px 40px -12px rgba(15, 23, 42, 0.18);
}

/* Gölgeli kartta metin alanı kenar boşluğu */
.product-item.product-item--shadow.grid-type .product-infor {
    padding: 0.75rem 0.875rem 1rem;
    margin-top: 0;
}

.product-item.product-item--shadow.list-type .product-infor {
    padding: 0.5rem 0.75rem 0.75rem 0;
}

/*
 * Renk / ek görsel şeridi absolute (top/left:0) — parent padding’i etkilemez.
 * Gölge açıkken sol ve üst boşluk.
 */
.product-item.product-item--shadow.grid-type .product-main .product-infor .list-color,
.product-item.product-item--shadow.grid-type .product-main .product-infor .list-color-image {
    top: 0.5rem;
    left: 0.875rem;
    right: 0.875rem;
}

/* Görsel gecikince alt metin flash’ını gizle; yumuşak placeholder zemin */
.product-item .product-thumb {
    background-color: var(--surface, #f5f5f5);
}

.product-item .product-thumb .ws-product-card-img img,
.product-item .product-thumb .product-img img {
    color: transparent;
    font-size: 0;
    line-height: 0;
    background-color: var(--surface, #f5f5f5);
}

/* Fiyat bloğu link — underline / mavi renk yok */
.product-item a.product-price-block {
    color: inherit;
    text-decoration: none;
}

.product-item a.product-price-block:hover {
    color: inherit;
    text-decoration: none;
}

/* Kategori adı — ürün adının üstünde */
.product-item .product-category {
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.35;
    text-transform: capitalize;
    transition: opacity .3s ease, visibility .3s ease;
}

/* Ürün adı: tek satır + ellipsis, bold değil (yalnızca kart) */
.product-item .product-name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
}

/* Hover renk / ek fotoğraf şeridi: tek satır, +X taşması */
.product-item .list-color {
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Renk/galeri önizlemesinde kartın 2. görsel hover geçişini kilitle */
.product-item.is-color-preview.grid-type:hover .product-thumb .product-img img:first-child {
    opacity: 1;
    visibility: visible;
}
.product-item.is-color-preview.grid-type:hover .product-thumb .product-img img:last-child {
    opacity: 0;
    visibility: hidden;
}

.product-item .list-color .ws-card-swatch-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    background: var(--surface, #f5f5f5);
    color: var(--black, #1f1f1f);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

/* Yorum yıldızları — ürün adı altında; sayı olsa da yükseklik sabit */
.product-item .product-rate {
    min-height: 1.25rem;
    transition: opacity .3s ease, visibility .3s ease;
}

.product-item .product-rate .rate {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 1.25rem;
}

.product-item .product-rate .ph-star {
    line-height: 1;
    font-size: 0.875rem;
}

.product-item .product-rate__score {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    color: var(--secondary, #777);
}

.product-item .product-rate__count {
    font-size: 0.75rem;
    line-height: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
}

.product-item .product-category:hover {
    color: var(--black, #1f1f1f);
}

.product-item.list-type .product-category {
    margin-bottom: 0.375rem;
}

/*
 * Liste: renk kartları her zaman görünür (normal akış).
 * Tema CSS’i absolute+opacity:0 + yalnızca grid hover — listede kartlar görünmezken
 * isim üzerinde görünmez swatch’lara gelince ana görsel değişiyordu.
 */
.product-item.list-type .product-main .product-infor .list-color,
.product-item.list-type .product-main .product-infor .list-color-image,
.product-item.list-type.has-card-colors .product-main .product-infor .list-color {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    height: auto;
    min-height: var(--ws-card-swatch-h, 32px);
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
    pointer-events: auto;
}

.product-item.list-type.has-card-colors .product-main .product-infor {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .product-item.list-type.has-card-colors:hover .product-category,
    .product-item.list-type.has-card-colors:hover .product-rate,
    .product-item.list-type:hover .product-main .product-infor .product-name {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .product-item.list-type:hover .product-main .product-infor .product-price-block,
    .product-item.list-type.has-card-colors:hover .product-main .product-infor .product-price-block {
        transform: none;
    }
}

/* Liste: renk önizlemesinde 2. görsel hover geçişini kilitle */
.product-item.is-color-preview.list-type .product-thumb .product-img img:first-child,
.product-item.is-color-preview.list-type .product-thumb:hover .product-img img:first-child {
    opacity: 1;
    visibility: visible;
}

.product-item.is-color-preview.list-type .product-thumb .product-img img:not(:first-child),
.product-item.is-color-preview.list-type .product-thumb:hover .product-img img:not(:first-child) {
    opacity: 0;
    visibility: hidden;
}

@media (min-width: 1024px) {
    /*
     * Hover + renk swatch: kategori/isim/yıldız sadece soluklaşır (yükseklik korunur),
     * swatch görünür, fiyat alta kayar. max-height:0 kullanma — kart kısalıp “çekme” yapar.
     */
    .product-item.has-card-colors:hover .product-category,
    .product-item.has-card-colors:hover .product-rate {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Renk yokken tema ismi gizler; yıldız görünür kalsın */
    .product-item.grid-type:not(.has-card-colors):hover .product-main .product-infor .product-rate {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* İndirim rozeti: hover’da fiyatla birlikte kayar (görünür kalır).
     * Link + iç wrapper’a birlikte translate verme — iç içe transform boşluk yaratır. */
    .product-item.grid-type.has-card-colors .product-main .product-infor > .ec-discount-price-badges,
    .product-item.grid-type.has-card-colors .product-main .product-infor > .ec-discount-price-badges-link {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .product-item.grid-type.has-card-colors:hover .product-main .product-infor > .ec-discount-price-badges,
    .product-item.grid-type.has-card-colors:hover .product-main .product-infor > .ec-discount-price-badges-link {
        transform: translateY(var(--ws-card-price-shift, 12px));
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* İç rozet: dış link zaten kayıyor; margin-top (fiyat–duyuru boşluğu) korunur */
    .product-item.grid-type.has-card-colors:hover .product-main .product-infor .ec-discount-price-badges-link .ec-discount-price-badges {
        transform: none;
    }
}

/* Sepette indirim geri sayımı — görsel altı */
.product-item .product-thumb .countdown-time-block {
    background: rgba(255, 255, 255, 0.43);
}

.product-item .product-thumb .countdown-time-block.ws-offer-countdown {
    z-index: 1;
    pointer-events: none;
}

.product-item.grid-type:hover .product-thumb .countdown-time-block.ws-offer-countdown {
    z-index: 0;
}

.product-item .product-thumb .list-action {
    z-index: 2;
}

.product-item .ws-offer-countdown-card {
    color: #ef4444;
    letter-spacing: 0.02em;
}

/* Hover efektleri (tema kategori ayarı) — varsayılan tema CSS’ini geçersiz kılar */

/*
 * Tek görsel: :first-child ve :last-child aynı element.
 * last-child { opacity:0 } tek görseli gizleyip beyaz alan bırakır.
 */
.product-item.grid-type:hover .product-thumb .product-img img:only-child,
.product-item.list-type .product-thumb:hover .product-img img:only-child,
.product-item--hover-none.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-none.list-type .product-thumb:hover .product-img img:only-child,
.product-item--hover-zoom.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-zoom.list-type .product-thumb:hover .product-img img:only-child,
.product-item--hover-second.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-second.list-type .product-thumb:hover .product-img img:only-child,
.product-item--hover-second-zoom.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-second-zoom.list-type .product-thumb:hover .product-img img:only-child {
    opacity: 1;
    visibility: visible;
}

.product-item--hover-none.grid-type:hover .product-thumb .product-img img,
.product-item--hover-none.list-type .product-thumb:hover .product-img img {
    transform: none;
}

.product-item--hover-none.grid-type:hover .product-thumb .product-img img:first-child,
.product-item--hover-none.list-type .product-thumb:hover .product-img img:first-child {
    opacity: 1;
    visibility: visible;
}

.product-item--hover-none.grid-type:hover .product-thumb .product-img img:not(:first-child),
.product-item--hover-none.list-type .product-thumb:hover .product-img img:not(:first-child) {
    opacity: 0;
    visibility: hidden;
}

.product-item--hover-zoom.grid-type:hover .product-thumb .product-img img:first-child,
.product-item--hover-zoom.list-type .product-thumb:hover .product-img img:first-child,
.product-item--hover-zoom.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-zoom.list-type .product-thumb:hover .product-img img:only-child {
    opacity: 1;
    visibility: visible;
    transform: scale(1.05);
}

.product-item--hover-zoom.grid-type:hover .product-thumb .product-img img:not(:first-child),
.product-item--hover-zoom.list-type .product-thumb:hover .product-img img:not(:first-child) {
    opacity: 0;
    visibility: hidden;
    transform: none;
}

.product-item--hover-second.grid-type:hover .product-thumb .product-img img,
.product-item--hover-second.list-type .product-thumb:hover .product-img img {
    transform: none;
}

.product-item--hover-second.grid-type:hover .product-thumb .product-img img:first-child,
.product-item--hover-second.list-type .product-thumb:hover .product-img img:first-child {
    opacity: 0;
}

.product-item--hover-second.grid-type:hover .product-thumb .product-img img:nth-child(2),
.product-item--hover-second.list-type .product-thumb:hover .product-img img:nth-child(2) {
    opacity: 1;
    visibility: visible;
}

.product-item--hover-second.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-second.list-type .product-thumb:hover .product-img img:only-child {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.product-item--hover-second-zoom.grid-type:hover .product-thumb .product-img img:first-child,
.product-item--hover-second-zoom.list-type .product-thumb:hover .product-img img:first-child {
    opacity: 0;
}

.product-item--hover-second-zoom.grid-type:hover .product-thumb .product-img img:nth-child(2),
.product-item--hover-second-zoom.list-type .product-thumb:hover .product-img img:nth-child(2) {
    opacity: 1;
    visibility: visible;
    transform: scale(1.05);
}

.product-item--hover-second-zoom.grid-type:hover .product-thumb .product-img img:only-child,
.product-item--hover-second-zoom.list-type .product-thumb:hover .product-img img:only-child {
    opacity: 1;
    visibility: visible;
    transform: scale(1.05);
}

/* second_zoom: 2+ görselde varsayılan tema + yukarıdaki kurallar */

/*
 * Akordeon: output-scss’teki first↔last hover geçişinden daha yüksek özgüllük.
 * Görseller her zaman alt katmanda (z-index: 0); rozet / aksiyonlar üstte kalır —
 * aksi halde slayt değişirken üst öğeler göz kırpar.
 */
.product-item.product-item--hover-accordion .product-thumb .product-img.ws-product-card-img {
    position: relative;
    display: block;
    z-index: 0;
    isolation: isolate;
}

.product-item.product-item--hover-accordion .product-thumb .product-img img,
.product-item.product-item--hover-accordion .product-thumb .product-img img:nth-child(n) {
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transform: none !important;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Kart yüksekliğini ilk görsel tutar (visibility kullanma — layout/üst katman titremez) */
.product-item.product-item--hover-accordion .product-thumb .product-img img:first-child {
    position: relative;
    opacity: 1;
    z-index: 0;
}

/* Temel tema hover (scale + first gizle / last göster) iptal */
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb .product-img img,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb .product-img img:first-child,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb .product-img img:last-child,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb .product-img img:nth-child(n),
.product-item.product-item--hover-accordion.list-type .product-thumb:hover .product-img img,
.product-item.product-item--hover-accordion.list-type .product-thumb:hover .product-img img:first-child,
.product-item.product-item--hover-accordion.list-type .product-thumb:hover .product-img img:last-child,
.product-item.product-item--hover-accordion.list-type .product-thumb:hover .product-img img:nth-child(n) {
    opacity: 0;
    visibility: visible;
    transform: none !important;
    z-index: 0;
    pointer-events: none;
}

.product-item.product-item--hover-accordion.grid-type:hover .product-thumb .product-img img.is-accordion-visible,
.product-item.product-item--hover-accordion.list-type .product-thumb:hover .product-img img.is-accordion-visible {
    opacity: 1;
    z-index: 0;
    transform: none !important;
}

/* Rozet ve aksiyonlar her zaman görsellerin üstünde */
.product-item.product-item--hover-accordion .product-thumb > .ec-product-labels,
.product-item.product-item--hover-accordion .product-thumb > .product-tag,
.product-item.product-item--hover-accordion .product-thumb > .list-action-right,
.product-item.product-item--hover-accordion .product-thumb > .list-action,
.product-item.product-item--hover-accordion .product-thumb > .countdown-time-block,
.product-item.product-item--hover-accordion .product-thumb > .ws-offer-countdown,
.product-item.product-item--hover-accordion .product-thumb > .marquee-sale-block,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .ec-product-labels,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .product-tag,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .list-action-right,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .list-action,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .countdown-time-block,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .countdown-time-block.ws-offer-countdown,
.product-item.product-item--hover-accordion.grid-type:hover .product-thumb > .marquee-sale-block {
    z-index: 3;
}