/**
 * PRODUCTS FONT SIZE - CSS เดียว ไม่มั่ว
 * ห้ามใช้ JS set font-size
 */

/* ============================================
   PRODUCT TITLE - 11px
   ============================================ */
.card-title {
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-title {
  font-size: 11px !important;
}

.product-name {
  font-size: 11px !important;
}

.compact-card-title {
  font-size: 11px !important;
}

/* ============================================
   PRODUCT DESCRIPTION - 11px
   ============================================ */
.card-text {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #6b7280 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.product-desc,
.product-description {
  font-size: 11px !important;
}

/* ============================================
   PRODUCT PRICE - 12px (Bold)
   ============================================ */
.product-price,
.card-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
}

/* ============================================
   BADGE/DISCOUNT - 10px
   ============================================ */
.badge {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.discount-badge {
  font-size: 10px !important;
}

/* ============================================
   HEADING TAGS (h3-h6)
   ============================================ */
h3.card-title,
h4.card-title,
h5.card-title,
h6.card-title {
  font-size: 11px !important;
}

h3.product-title,
h4.product-title,
h5.product-title,
h6.product-title {
  font-size: 11px !important;
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
  .card-title,
  .product-title,
  .product-name,
  .compact-card-title {
    font-size: 10px !important;
  }

  .card-text,
  .product-desc,
  .product-description {
    font-size: 10px !important;
  }
}