/* =======================================================================
   KANO — STORE cards -> HOME bestsellers look (square image stage)
   Hedef: mağaza kartları, ana sayfadaki bestsellers gibi kare görsel panel + ortalı ürün
   ======================================================================= */

/* 1) Görsel paneli kare yap (home hissi) */
.store-main #product-list .product-card .product-image-wrap{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;   /* <-- kare */
  background: #efefef !important;   /* home’daki panel tonu */
  border-radius: 0 !important;      /* daha “dikdörtgen / net” */
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

/* Eski tarayıcı fallback (aspect-ratio yoksa) */
@supports not (aspect-ratio: 1 / 1){
  .store-main #product-list .product-card .product-image-wrap::before{
    content: "" !important;
    display: block !important;
    padding-top: 100% !important;
  }
}

/* 2) Mağaza kartındaki img’leri home gibi “dolgun + contain” yap
   store.js iki görsel basıyor: .product-img-main + .product-img-hover :contentReference[oaicite:2]{index=2} */
.store-main #product-list .product-card .product-image-wrap .product-img{
  position: absolute !important;
  inset: 4% !important;            /* kenarlardan boşluk: 92% görünür alan */
  width: 92% !important;
  height: 92% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: translateZ(0) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Placeholder div varsa taşmasın */
.store-main #product-list .product-card .product-image-wrap .product-img-placeholder{
  position: absolute !important;
  inset: 0 !important;
}

/* 3) Metinleri home’a yaklaştır (daha naif + düzgün boşluk) */
.store-main #product-list .product-card .product-name{
  margin: 12px 0 6px 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #111 !important;
}

.store-main #product-list .product-card .product-price{
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* 4) Kalp (fav) butonu: home’daki gibi üstte, biraz daha “oturaklı” */
.store-main #product-list .product-card .fav-btn{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
}

.store-main #product-list .product-card .fav-btn svg{
  width: 22px !important;
  height: 22px !important;
}

/* 5) Kartın genel “kutu” hissini sadeleştir (home’daki gibi) */
.store-main #product-list .product-card{
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* (İsteğe bağlı) Hover’da görsel “zoom” varsa kapat */
.store-main #product-list .product-card:hover .product-image-wrap .product-img{
  transform: translateZ(0) !important;
}

/* =========================================================
   KANO — Fav (kalp) görünür + custom SVG via CSS mask
   ========================================================= */

/* 1) Senin satın aldığın kalp svg path’i: BURAYI DEĞİŞTİR */
:root{
  --kano-heart-svg: url("../assets/img/icons/heart.svg"); /* ör: assets/img/ui/heart.svg */
}

/* 2) Kalp butonu her zaman üstte görünsün */
.store-main #product-list .product-card .fav-btn{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 50 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  color: #111 !important; /* ikon rengi (mask currentColor ile çalışır) */
}

/* 3) store.js içindeki inline svg’yi gizle (mask’i biz basacağız) */
.store-main #product-list .product-card .fav-btn svg{
  display: none !important;
}

/* 4) Asıl ikon: mask ile SVG’den çiz */
.store-main #product-list .product-card .fav-btn::before{
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;

  -webkit-mask: var(--kano-heart-svg) center / contain no-repeat !important;
  mask: var(--kano-heart-svg) center / contain no-repeat !important;
}

/* 5) Favoriye eklenince kırmızı olsun */
.store-main #product-list .product-card .fav-btn.is-faved{
  color: #D92A29 !important;
  border-color: rgba(217,42,41,.25) !important;
}

/* 6) Hover hissi */
.store-main #product-list .product-card .fav-btn:hover{
  transform: translateY(-1px) !important;
}

/* KANO — Fav kalp SVG kaynağı (absolute URL) */
:root{
  --kano-heart-svg: url("/assets/img/icons/heart.svg");
}

/* Fav butonu kesin görünür */
.store-main #product-list .product-card .fav-btn{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 50 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  color: #111 !important;
}

/* store.js'in bastığı inline svg varsa gizle */
.store-main #product-list .product-card .fav-btn svg{
  display: none !important;
}

/* Kalbi senin SVG ile çiz (mask) */
.store-main #product-list .product-card .fav-btn::before{
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;

  -webkit-mask-image: var(--kano-heart-svg) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--kano-heart-svg) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  -webkit-mask-mode: alpha !important;
  mask-mode: alpha !important;
}

/* Favoride kırmızı */
.store-main #product-list .product-card .fav-btn.is-faved{
  color: #D92A29 !important;
  border-color: rgba(217,42,41,.25) !important;
}

/* =========================================================
   MAGAZA — Kart köşelerini TAM sivri yap (curved kalsın istemiyoruz)
   ========================================================= */

/* Kartın dışı + görsel panelin köşesi */
.store-main #product-list .product-card,
.store-main #product-list .product-card .product-image-wrap{
  border-radius: 0 !important;
  clip-path: none !important;   /* bazı temalarda round buradan gelir */
  mask: none !important;        /* nadir ama olabiliyor */
}

/* Görsel panelin pseudo/fallback elemanları da yuvarlak olmasın */
.store-main #product-list .product-card .product-image-wrap::before,
.store-main #product-list .product-card .product-image-wrap::after{
  border-radius: 0 !important;
  clip-path: none !important;
}

/* İçteki img’ler yuvarlak basılıysa onu da kır */
.store-main #product-list .product-card .product-image-wrap img,
.store-main #product-list .product-card .product-image-wrap .product-img,
.store-main #product-list .product-card .product-image-wrap .product-img-main,
.store-main #product-list .product-card .product-image-wrap .product-img-hover{
  border-radius: 0 !important;
  clip-path: none !important;
}
/* =========================================================
   MAGAZA — Kart köşelerini TAM sivri yap (curved'ü öldür)
   Hedef: dış kabuk (a.product-link) + varsa pseudo katmanlar
   ========================================================= */

/* Kartın tıklanabilir kabuğu genelde radius'u buradan alıyor */
.store-main #product-list .product-card > a.product-link{
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  overflow: hidden !important; /* köşeler keskin dursun */
}

/* Bazı tasarımlarda round görünüm pseudo elementten gelir */
.store-main #product-list .product-card > a.product-link::before,
.store-main #product-list .product-card > a.product-link::after{
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
}

/* Yine de garanti: image-wrap + spreadshirt-image sınıfı */
.store-main #product-list .product-card .product-image-wrap,
.store-main #product-list .product-card .product-image-wrap.spreadshirt-image{
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
}

/* =========================================================
   KANO STORE — Card image tuning (yukarı al + design center)
   Dosya: kano_store_cards_square.css (EN ALTA EKLE)
   ========================================================= */

.page-magaza .store-grid .product-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* img’ler contain kalsın, ama ürün görünümünde hafif yukarı */
.page-magaza .store-main:not(.is-design-view) .store-grid .product-image-wrap .product-img{
  object-fit: contain !important;
  object-position: 50% 42% !important; /* biraz yukarı */
  transform: translateY(-3%) !important;
}

/* Tasarım görünümünde: tam ortala (sağ-alt yapışmayı öldür) */
.page-magaza .store-main.is-design-view .store-grid .product-image-wrap .product-img{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Bazı temalarda wrap background-position ile de kayıyor, garanti olsun */
.page-magaza .store-main.is-design-view .store-grid .spreadshirt-image{
  background-position: center !important;
}