/* ===== Base ===== */
.mm-wcts-wrap,
.mm-wcts-wrap *{
  box-sizing: border-box !important;
  font-family: "Kalameh", sans-serif !important;
}

/* ===== Search Field (button INSIDE input) ===== */
.mm-wcts-field{
  width: 250px !important;
  position: relative !important;
}

.mm-wcts-input{
  width: 100% !important;
  height: 44px !important;
  padding: 10px 44px 10px 10px !important; /* جای آیکن */
  border: 1px solid #F0F0F0 !important;
  border-radius: 10px !important;
  outline: none !important;
  background: #fff !important;
  line-height: 24px !important;
}

.mm-wcts-icon-btn{
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;

  border: 0 !important;
  background: #F44B88 !important;
  color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  padding: 0 !important;
}

.mm-wcts-icon-btn:hover,
.mm-wcts-icon-btn:active,
.mm-wcts-icon-btn:focus{
  background: #F44B88 !important;
  color: #fff !important;
  outline: none !important;
  border: 0 !important;
}

.mm-wcts-icon{
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* ===== Results ===== */
.mm-wcts-results{ margin-top: 16px !important; }

.mm-wcts-empty{
  padding: 10px !important;
  border: 1px solid #F0F0F0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
}

/* ===== Grid ===== */
.mm-wcts-grid{
  display: grid !important;
  font-family:Kalameh;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* ===== Card Box ===== */
.mm-wcts-card{
  border: 1px solid #F0F0F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;

  display: flex !important;
  flex-direction: column !important;

  /* یک‌سان شدن ارتفاع کلی باکس‌ها */
  height: 100% !important;
}

/* ✅ عکس‌ها مثل قبل: دست نزن (aspect-ratio) */
.mm-wcts-card-media{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #fafafa !important;
}

.mm-wcts-card-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Padding داخلی باکس: 10 */
.mm-wcts-card-body{
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 auto !important; /* کمک به یکسان شدن ارتفاع */
}

/* Title 16 */
.mm-wcts-card-title{
  text-decoration: none !important;
  font-family:Kalameh;
  color: #1E2023 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;

  /* ثابت ماندن ارتفاع متن برای یکسان شدن باکس‌ها */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 52px !important; /* حدود دو خط */
}

/* Price 14 */
.mm-wcts-card-price{
  color: #1E2023 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  min-height: 22px !important;
}

/* Button 13 - no border - pink */
.mm-wcts-card-btn{
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 40px !important;

  border-radius: 10px !important;
  border: 0 !important;

  background: #F44B88 !important;
  color: #fff !important;

  font-weight: 600 !important;
  font-size: 13px !important;

  text-decoration: none !important;
  cursor: pointer !important;
  padding: 0 10px !important;
}

.mm-wcts-card-btn:hover,
.mm-wcts-card-btn:active,
.mm-wcts-card-btn:focus{
  background: #F44B88 !important;
  color: #fff !important;
  outline: none !important;
  border: 0 !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .mm-wcts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px){
  .mm-wcts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mm-wcts-field{ width: 100% !important; }
}
@media (max-width: 480px){
  .mm-wcts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}