/*================================================================
  WOO BIG PROMOS - GRID TASARIMI VE ŞABLONLAR
=================================================================*/

/* ANA GRID YAPISI (Justified Grid) */
.woopr-grid-wrapper {
    display: grid;
    gap: 20px;
    width: 100%;
    /* Elementor sayfasında arkaplanı sarı/beyaz yaparsanız burası şeffaf kalır */
}

/* Sütun Sayısı Varyasyonları (Shortcode'dan gelen cols-X) */
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }


/* TEKİL ÜRÜN KUTUSU */
.woopr-item {
    position: relative; /* Kırmızı balonun üzerine binebilmesi için gerekli */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 50px; /* Alttaki fiyat bandı için boşluk bırakıyoruz */
}

/* GÖRSEL ALANI (Dekupe PNG'lerin tam ortaya oturmasını sağlar) */
.woopr-image {
    width: 100%;
    height: 250px; /* Tüm şişeleri aynı hizaya getirecek standart yükseklik */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Şişelerin alt kısmını aynı hizaya getirir */
    margin-bottom: 10px;
}

.woopr-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Görseli bozmadan kutuya sığdırır */
    mix-blend-mode: multiply; /* Dekupe olmasa bile beyaz arkaplanı şeffaflaştırır (opsiyonel sihir!) */
}


/*================================================================
  BADGE STYLE 1: KIRMIZI YUVARLAK VE BANT TASARIMI
=================================================================*/

/* Kırmızı Arkaplan Bandı (Tüm ürünlerin altından geçen çizgi efekti) */
.badge-style1 .woopr-item::after {
    content: "";
    position: absolute;
    bottom: 40px; /* Bantın hizası */
    left: -10px;
    right: -10px;
    height: 35px;
    background-color: #E3000F; /* Enzo Kırmızısı */
    z-index: -99; /* Görselin altında kalsın */
}

/* Fiyat ve Bilgi Kapsayıcısı */
.badge-style1 .woopr-info-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px; /* Yuvarlak balonun genişliği */
    height: 110px;
    background-color: #E3000F; /* Yuvarlak balonun rengi */
    border-radius: 50%;
    border: 3px dashed #FFF; /* Etrafındaki kesik çizgiler */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFF;
    z-index: 2; /* Şeridin üzerine çıksın */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Tipografi Ayarları */
.badge-style1 .woopr-max {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.badge-style1 .woopr-price {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
z-ındex:1;
color:#ffffff;
}

.badge-style1 .woopr-packsize {
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
	padding: 0;
    line-height: 10px;
}

/* RRP, POR, SKU gibi ekstra bilgileri bu "Style 1" (yuvarlak balon) şablonunda gizlemek isterseniz: */

.badge-style1 .woopr-unit-cost {
    display: none; 
    /* Eğer o 2. görseldeki gibi sade bir yuvarlak istiyorsak diğer bilgileri gizleriz. 
       Başka bir style (örn: style2) yazıp orada gösterebiliriz. */
}


/* Balonun boyutunu yeni veriler sığsın diye 10px büyütelim */
.badge-style1 .woopr-info-container {
    width: 120px;
    height: 120px;
}

/* POR Etiketi Tasarımı (Kırmızı balonun içinde sarı dikkat çekici etiket) */
/* POR Etiketini Sağ Üste Sabitleme */
.badge-style1 .woopr-por {
    position: absolute;
    top: -35px; /* Kutunun üstünden boşluk */
    right: -37px; /* Kutunun sağından boşluk */
    font-size: 11px;
    font-weight: 800;
    background-color: #FFCC00; /* Daha canlı bir sarı */
    color: #CC0000; /* Daha koyu ve okunaklı bir kırmızı */
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 5; /* Görselin üstünde durması için */
}

/* POR etiketinin doğru konumlanması için kapsayıcıyı ayarlayalım */
.woopr-item {
    position: relative; 
    /* ... diğer kurallar aynı kalsın ... */
}

.woopr-sku {font-size: 11px;
    line-height: 11px;}
.woopr-rrp {font-size: 11px;
    line-height: 11px;font-weight:900;}
.badge-style1 .woopr-rrp,
.badge-style1 .woopr-por,
.badge-style1 .woopr-sku,{}


/* VAS (Grup) Ürünleri İçin Özel Genişlik Kuralı */
/* 5'li görsel gibi durumlarda hücrenin dar kalıp taşmasını önlemek için grid-column span atayabiliriz. 
   Ancak flexbox ile içerde sıkıştırmak daha güvenlidir. */

/* Kapsayıcı (Görselleri yan yana dizen flex kutu) */
/*================================================================
  VAS İMAJLARINI SIKIŞTIRMA VE ÜST ÜSTE BİNDİRME (GÜNCELLENDİ)
=================================================================*/

/*================================================================
  VAS İMAJLARINI SIKIŞTIRMA VE ÜST ÜSTE BİNDİRME (KESİN ÇÖZÜM)
=================================================================*/

.woopr-vas-images {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 250px; /* Konteyner yüksekliğini sabitledik */
}

.vas-child-img {
    /* Flex esnekliğini iptal ediyoruz, kendi bildiğini okusun */
    flex: none; 
    margin-left: -140px; /* Ürünleri sertçe birbirinin üstüne bindirir (Değeri artırıp azaltarak sıkışıklığı ayarlayabilirsiniz) */
    position: relative;
    transition: transform 0.3s ease;
}

.vas-child-img:first-child {
    margin-left: 0; /* İlk ürün sola kaymasın */
}

.vas-child-img:hover {
    transform: translateY(-10px);
    z-index: 10;
}

.vas-child-img img {
    height: 230px !important; /* Nescafe ile boyunu ZORLA eşitliyoruz */
    width: auto !important; /* Genişliği boyuna göre kendi ayarlasın */
    max-width: none !important; /* Konteyner onu ezmesin diye limiti kaldırdık */
    object-fit: contain;
    mix-blend-mode: normal;
    
    /* PHOTOSHOP'A GEREK YOK: Mükemmel PNG Gölgesi */
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3)); 
}

/* Photoshop'ta gölge ekleseniz bile, Z-index ile üstte kalma sırasını 
   yönetebiliriz. Genelde en sağdaki imajın en üstte kalması (left-to-right) 
   daha şık durur. Tarayıcı zaten bu sırayla dizecektir. */

/* Eğer bir grup ürün hücresinin (örneğin 5 çaylı Twinning'in) standart 1 hücreden 
   daha geniş yer kaplamasını isterseniz, bu class'ı kullanacağız. */
.woopr-item.is-vas-group {
    grid-column: span 2; /* CSS Grid'de 2 hücrelik yer kaplar  */
}



.prmvas {
     background: white;
    color: red;
    padding: 1px 5px;
    line-height: 16px;
}