/* ============================================
   HIBRAPRINT PRODUCT CARDS - DÜZENLENMİŞ SÜRÜM
   (Tüm çakışmalar giderildi, her ekranda düzgün)
============================================ */

/* ---- 1. ANA LİSTE (FLEX ile 3'lü düzen) ---- */
.woocommerce ul.products {
    display: flex !important;          /* Grid'i kaldırdık, flex kullanıyoruz */
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* Tüm ürünleri SOLDAN hizala */
    align-items: stretch !important;   /* Tüm kartların boyunu eşitle */
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    list-style: none !important;
}

/* ---- 2. HER BİR ÜRÜN KARTI (%33.33 genişlik) ---- */
.woocommerce ul.products li.product {
    /* 3'lü sütun hesaplaması: (3 sütun için 2 boşluk var, 20x2=40 çıkar) */
    flex: 0 0 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
    min-width: 0 !important;

    /* KART İÇİ DÜZEN (Resim, başlık, fiyat, buton hizası) */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* İçerik kadar esner, stretch ile eşitlenir */

    /* SAĞA KAYDIRAN TÜM ETKİLERİ SIFIRLA */
    margin: 0 !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    text-align: left !important;

    /* --- TASARIM STİLLERİ (Sizin stilleriniz aynen korundu) --- */
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: .25s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* Hover efekti */
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

/* ---- 3. KART İÇİ ÖĞELERİN HİZALANMASI (Butonlar en altta) ---- */
.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 12px;
    background: #fafafa;
    flex-shrink: 0; /* Resimlerin küçülmesini engelle */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 42px;
    margin-top: 10px;
    margin-bottom: 8px;
    color: #222;
    flex-shrink: 0; /* Başlıkların ezilmesini engelle */
}

/* Fiyat alanı: Butonları en alta itmek için margin-top:auto kullan */
.woocommerce ul.products li.product .price {
    margin-top: auto !important;  /* Bu satır butonların aşağıda kalmasını sağlar */
    margin-bottom: 10px !important;
    flex-shrink: 0;
}

.woocommerce ul.products li.product .price del {
    color: #999;
    font-size: 13px;
}

.woocommerce ul.products li.product .price ins {
    color: #ff6000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}

/* Butonlar (Hepsi aynı hizada) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .hibra-buy-now {
    width: 100%;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px !important;
    transition: .25s;
    flex-shrink: 0; /* Butonların ezilmesini engeller */
    box-sizing: border-box;
}

.woocommerce ul.products li.product .button {
    background: #111 !important;
    color: #fff !important;
}

.woocommerce ul.products li.product .hibra-buy-now {
    background: #ff6000 !important;
    color: #fff !important;
}

.woocommerce ul.products li.product .button:hover {
    background: #000 !important;
}

.woocommerce ul.products li.product .hibra-buy-now:hover {
    background: #e35500 !important;
}

/* Yıldızlar */
.woocommerce .star-rating {
    margin: 5px 0 10px;
    flex-shrink: 0;
}

/* İndirim Rozeti */
.woocommerce span.onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff6000;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    min-height: auto;
    line-height: 1;
    padding: 8px 10px;
    z-index: 2;
}

/* ---- 4. MOBİL GÖRÜNÜM (2'li düzen) ---- */
@media (max-width: 768px) {

    .woocommerce ul.products {
        gap: 10px !important;
    }

    .woocommerce ul.products li.product {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        padding: 8px;
        border-radius: 12px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
        min-height: 38px;
    }

    .woocommerce ul.products li.product .price ins {
        font-size: 16px;
    }

    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .hibra-buy-now {
        font-size: 12px;
        padding: 10px 5px;
    }

    .woocommerce span.onsale {
        font-size: 10px;
        padding: 6px 8px;
    }
}

/* ---- 5. GEREKSİZ EKLENTİ BUTONLARINI GİZLE (Compare, Wishlist) ---- */
.compare,
.compare-button,
.compare-btn,
.add-to-compare,
.yith-compare,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse,
.tinv-wraper,
.tinvwl_add_to_wishlist_button,
.woosc-btn,
.woosc-btn-wrap,
.woosw-btn,
.wpc-button-compare,
.wpc-button-wishlist,
.wpcwl-btn,
.wishlist,
.add-to-wishlist {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
css resim değiştirmek 
.wc-buy-now-btn,
.wc-buy-now-btn-single {
    background: #ff6000 !important;
    border-color: #ff6000 !important;
    color: #ffffff !important;
}

ödeme yöntemleri düzenleme 
.hibra-payment-icons{
    margin-top:20px;
    margin-bottom:20px;
}

.hibra-payment-icons img{
    max-width:320px;
    width:100%;
    height:auto;
    display:block;
}

.hibra-payment-icons img{
    max-width:260px;
    width:100%;
    height:auto;
    display:block;
}

.hibra-payment-icons{
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}
 log in icon 

.hibra-header-account{
    float:right;
    margin-right:20px;
    margin-top:8px;
}

.hibra-header-account a{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#333;
    font-weight:600;
}

.hibra-header-account .dashicons{
    font-size:22px;
    width:22px;
    height:22px;
}

.hibra-header-account a:hover{
    color:#ff6b00;
}

@media (max-width:768px){
    .hibra-header-account .account-text{
        display:inline;
    }
}