/* ═══════════════════════════════════════════════════════════
   Ürün listesi — öğe boyutları

   Değerler editörden --m-<öğe>-<özellik> olarak gelir.
   Ayarlanmayanlar buradaki varsayılanda kalır.
   ═══════════════════════════════════════════════════════════ */

/* ── Bölüm başlığı ─────────────────────────────────── */
.pg-heading {
  font-size:      var(--m-heading-size, 26px);
  font-weight:    var(--m-heading-weight, 800);
  color:          var(--m-heading-color, var(--primary_dark, var(--text)));
  text-align:     var(--m-heading-align, left);
  text-transform: var(--m-heading-transform, none);
  margin: 0;
}

@media (min-width: 768px) {
  .pg-heading { font-size: var(--m-heading-size, 32px); }
}

/* ── Ürün kartı öğeleri ────────────────────────────── */
/* Kart dört modülde ortak kullanılıyor; her modül kendi
   değişkenlerini verdiği için aynı sınıflar farklı
   bölümlerde farklı görünebilir. */

.pc-brand {
  font-size:      var(--m-brand-size, 11.5px);
  font-weight:    var(--m-brand-weight, 600);
  color:          var(--m-brand-color, var(--primary));
  text-transform: var(--m-brand-transform, none);
  letter-spacing: var(--m-brand-spacing, 0);
}

.pc-name {
  font-size:   var(--m-name-size, 15px);
  font-weight: var(--m-name-weight, 800);
  color:       var(--m-name-color, var(--text));
  line-height: var(--m-name-line, 1.3);
  letter-spacing: -.01em;
  margin: 0;
}

/* Fiyat kartın en güçlü öğesi: karar burada veriliyor */
.pc-price {
  font-size:   var(--m-price-size, 21px);
  font-weight: var(--m-price-weight, 800);
  color:       var(--m-price-color, var(--text));
  letter-spacing: -.02em;
}

/* Buton çerçeveli — kart beyaz olduğu için dolu renk fazla
   baskındı. Üzerine gelince doluyor. */
.pc-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size:     var(--m-cart_btn-size, 14px);
  font-weight:   var(--m-cart_btn-weight, 700);
  color:         var(--m-cart_btn-color, var(--primary));
  background:    var(--m-cart_btn-bg, transparent);
  border: 1.5px solid var(--primary);
  border-radius: var(--m-cart_btn-radius, 6px);
  padding:       var(--m-cart_btn-padding-y, 12px) 16px;

  cursor: pointer;
  line-height: 1;
  transition: background .15s, color .15s;
}

.pc-cart-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
}