/* ============================================================
   03-urun-karti.css — Ürün kartı (Flatsome .product-small → Sephora)
   Etki: shop, kategori, anasayfa ürün blokları, ilgili ürünler.
   ------------------------------------------------------------
   GERÇEK ÖLÇÜ ile YENİDEN doğrulandı (2026-06-01 ~10:55 TR):
   sephora.com.tr /sephora-collection-makyaj-urunleri/ (Makyaj, 171 ürün),
   Chrome DOM computed-style. Ölçülen düğüm:
   li.grid-tile > div.product-tile.omnibus-tile
     ├ div.product-tile-top  → div.tile-wishlist.show-on-hover > button.heart-icon
     ├ div.product-image > a.product-tile-link > div.product-imgs > img.product-first-img
     ├ div.product-info-wrapper > div.product-info
     │   ├ a.product-tile-link
     │   │   ├ span.product-brand "SEPHORA COLLECTION"
     │   │   └ h3.product-title > span.title-line(.title-line-bold)
     │   ├ div.product-rating-wrapper.hide-on-hover (img.product-rating-icon ×5 + span.amount-of-reviews)
     │   └ div.product-pricing > span.price-sales-standard "999 TL"
     ├ div.product-tile-bottom.show-on-hover > button.quickviewbutton.button-revamp.fullwidth "Sepete ekle"
     └ div.producttile-flag > .text-flag-wrapper > .text-flag > .text-flag-label
   EN ÖNEMLİ DÜZELTMELER (eski varsayımlar yanlıştı):
     • Kart: KENARLIK YOK + RADIUS 0 + GÖLGE YOK + padding 20px  (eski 1px kenar / r8 / hover-gölge DÜZELTİLDİ → 09 sepet kartı kalıbıyla aynı)
     • Marka: 14px / **400** ls **1px** BÜYÜK-HARF #000  (eski 700 DÜZELTİLDİ)
     • Görsel: **KARE 1/1 (240×240) radius 0**  (eski 5/6 aspect DÜZELTİLDİ); Sephora object-fit:fill → Bisso contain (kare olmayan katalog görselini korur)
     • Fiyat (normal): **16px / 500** #000  (eski 17/700 DÜZELTİLDİ)
     • Başlık satırı: 14px lh16.8 ls .5px #0a0a0a (Sephora bold satırı özel font; Bisso 500 ile yaklaşır)
     • Yıldız ikonu 12×12; yorum adedi 12/400
     • Alt CTA "Sepete ekle": SİYAH dolgu + beyaz metin, 2px #000, **radius 8px, h48**, 16/400 ls .3px, tam-genişlik, hover'da görünür (Sephora hover'da beyaz-outline'a döner; Bisso hover Bisso kırmızı)
     • Rozet "İndirim/flag": SİYAH, sol-üste YAPIŞIK (top0 left0), radius 0 4px 4px 0, padding 4px 8px, 14/400 beyaz ls .4px
   İndirim alt-stili (bu koleksiyonda indirimli ürün YOKTU): 05/PDP + 09/sepet
   ölçümlerinden ve görev kuralından taşındı (indirimli fiyat KIRMIZI, üstü-çizili
   eski fiyat gri, % rozeti).
   NOT: Sütun sayısı (masaüstü ~5-6 / mobil 2) Flatsome Customizer'dan ayarlanır.
   ============================================================ */

/* === Kart gövdesi — DÜZ beyaz, KENARLIKSIZ, RADIUS 0, GÖLGESİZ, sola hizalı === */
.product-small.box,
.products .product-small{
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  padding:20px !important;            /* Sephora ölçülen iç boşluk */
  text-align:left !important;
  box-shadow:none !important;
  overflow:visible;
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
}
/* Sephora kartında hover gölgesi YOK; ayrım boşlukla (1:1). Hover = alt CTA + kalp belirir. */
.product-small.box:hover{box-shadow:none !important;}
.products .product-small .box-text{padding-bottom:0;}

/* === Görsel alanı — beyaz KARE (1/1), radius 0 === */
.product-small .box-image{
  background:transparent !important;
  border-radius:0 !important;
  margin:0 0 12px !important;
  position:relative;
  aspect-ratio:1/1 !important;        /* Sephora 240×240 kare (eski 5/6 DÜZELTİLDİ) */
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.product-small .box-image img{
  border-radius:0 !important;
  object-fit:contain !important;      /* Sephora fill; Bisso contain → kare olmayan görsel taşmasın */
  width:100% !important;height:100% !important;
  transition:opacity var(--bks-t-slow),transform var(--bks-t-slow) !important;
}
/* Flatsome "fade in back" — hover'da ikinci görsel */
.product-small .box-image .back-image,
.product-small .box-image .image-fade_in_back{opacity:0;transition:opacity var(--bks-t-slow) !important;}
.product-small.box:hover .box-image .back-image,
.product-small.box:hover .box-image .image-fade_in_back{opacity:1;}

/* === İndirim/öne-çıkan rozeti → SİYAH flag, sol-üste YAPIŞIK === */
.product-small .badge-container{top:0 !important;left:0 !important;right:auto !important;margin:0 !important;}
.product-small .badge-container .badge .badge-inner,
.product-small .out-of-stock-label,
.product-small span.onsale,
.product-small .onsale{
  background:var(--bks-black) !important;
  color:#fff !important;
  border-radius:0 4px 4px 0 !important;   /* sol kenara yapışık, sağ köşeler 4px */
  font-size:14px !important;font-weight:400 !important;
  letter-spacing:.4px !important;text-transform:none !important;
  line-height:20px !important;
  padding:4px 8px !important;
  min-height:0 !important;min-width:0 !important;
  box-shadow:none !important;
}

/* === Kalp (favori) — sağ üst, hover'da belirir === */
.product-small .yith-wcwl-add-to-wishlist,
.product-small .wishlist-button,
.product-small .wishlist-button-loop{
  position:absolute !important;top:6px;right:6px;left:auto;z-index:4;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border-radius:50%;margin:0 !important;
  opacity:0;transition:opacity var(--bks-t) !important;
}
.product-small.box:hover .yith-wcwl-add-to-wishlist,
.product-small.box:hover .wishlist-button,
.product-small.box:hover .wishlist-button-loop{opacity:1;}
.product-small .yith-wcwl-add-to-wishlist a i,
.product-small .wishlist-button i{font-size:18px;color:var(--bks-black) !important;}
.product-small .yith-wcwl-add-to-wishlist a:hover i,
.product-small .wishlist-button:hover i{color:var(--bks-red) !important;}

/* === Yazı alanı === */
.product-small .box-text{
  padding:0 !important;
  text-align:left !important;
  display:flex;flex-direction:column;flex:1;
}

/* Marka/kategori → 14px / 400, BÜYÜK HARF, ls 1px, siyah */
.product-small .category.product-cat,
.product-small .product-cat{
  font-size:14px !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  line-height:1.2 !important;
  color:var(--bks-black) !important;
  opacity:1 !important;
  margin:0 0 6px !important;
  order:1;
}

/* Ürün adı → 14px, lh 16.8 (~1.2), ls .5px, #0a0a0a, 2 satır.
   Sephora ilk satırı özel BOLD font ile vurgular → Bisso sistem fontunda 500 ile yaklaşır. */
.product-small .name.product-title,
.product-small .woocommerce-loop-product__title{
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--bks-black) !important;
  line-height:1.2 !important;
  letter-spacing:.5px !important;
  margin:0 0 6px !important;
  min-height:34px;                    /* 2 × 16.8px */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  order:2;
}
.product-small .name.product-title a{color:inherit !important;font-weight:inherit !important;}

/* Yıldız (12px) + yorum adedi (12/400). Sephora yıldızı siyah → Bisso altın. */
.product-small .star-rating{
  font-size:12px !important;width:auto;margin:0 0 6px !important;order:3;
}
.product-small .star-rating:before,
.product-small .star-rating span:before{color:var(--bks-gold) !important;}
.product-small .review-count,
.product-small .amount-of-reviews,
.product-small .count{
  font-size:12px !important;font-weight:400 !important;
  letter-spacing:.5px !important;color:var(--bks-black) !important;
}

/* === Fiyat — normal 16px/500 siyah; indirimli KIRMIZI === */
.product-small .price{
  order:4;
  font-size:16px !important;
  font-weight:500 !important;
  color:var(--bks-black) !important;
  line-height:20px !important;
  letter-spacing:.4px !important;
  margin:0 0 4px !important;
}
.product-small .price del,
.product-small .price del .amount{
  color:var(--bks-mid) !important;font-weight:400 !important;font-size:13px !important;
}
.product-small .price ins,
.product-small .price ins .amount{
  color:var(--bks-red) !important;text-decoration:none !important;font-weight:700 !important;
}
/* "Fiyat: X TL  -%50" satırı (PHP bks_price_with_badge çıktısı):
   eski fiyat küçük gri + yüzde pill (pembe zemin, kırmızı yazı). */
.product-small .bks-oldprice{ font-size:13px;color:var(--bks-mid);margin-top:3px;display:block;text-decoration:line-through; }
.product-small .bks-pct,
.product-small .price .bks-pct{
  display:inline-block;background:var(--bks-pink);color:var(--bks-red);
  font-weight:700;font-size:12px;line-height:1;padding:3px 7px;border-radius:4px;margin-left:8px;
}

/* === Alt "Sepete ekle" butonu — tam genişlik, SİYAH dolgu, en altta, hover'da belirir === */
.product-small .box-text .add-to-cart-button,
.product-small .add-to-cart-button{
  order:5;margin-top:auto !important;
  position:static !important;transform:none !important;
  width:100% !important;padding-top:12px;
  opacity:0;transition:opacity var(--bks-t) !important;
}
.product-small.box:hover .add-to-cart-button{opacity:1;}
.product-small .add-to-cart-button .button,
.product-small .button.ajax_add_to_cart,
.product-small .add-to-cart-button .button.ajax_add_to_cart{
  display:block !important;width:100% !important;text-align:center !important;
  border:2px solid var(--bks-black) !important;border-radius:8px !important;
  background:var(--bks-black) !important;color:#f2f2f2 !important;
  font-size:16px !important;font-weight:400 !important;letter-spacing:.3px !important;
  line-height:1 !important;height:48px !important;
  padding:0 10px !important;margin:0 !important;
  display:flex !important;align-items:center;justify-content:center;
  transition:background var(--bks-t),color var(--bks-t),border-color var(--bks-t) !important;
}
/* Sephora hover'da beyaz-outline'a döner; Bisso marka kuralı: hover Bisso kırmızı dolgu. */
.product-small .add-to-cart-button .button:hover,
.product-small .button.ajax_add_to_cart:hover{
  background:var(--bks-red) !important;border-color:var(--bks-red) !important;color:#fff !important;
}
/* "Sepete eklendi" / loading durumları da aynı kalıpta */
.product-small .button.added,
.product-small .button.loading{background:var(--bks-black) !important;color:#f2f2f2 !important;}
.product-small .button.added:after{color:#f2f2f2 !important;}

/* === Mobil — kart iç boşluğu ve tipografi biraz küçülür === */
@media (max-width:549px){
  .product-small.box,
  .products .product-small{padding:14px !important;}
  .product-small .box-image{margin-bottom:10px !important;}
  .product-small .category.product-cat{font-size:13px !important;letter-spacing:.6px !important;}
  .product-small .name.product-title{font-size:13px !important;min-height:32px;}
  .product-small .price{font-size:15px !important;}
  .product-small .add-to-cart-button{opacity:1;padding-top:10px;}  /* mobilde hover yok → her zaman görünür */
  .product-small .add-to-cart-button .button,
  .product-small .button.ajax_add_to_cart{height:44px !important;font-size:15px !important;}
}