/* ---------- Generic ---------- */
.muted { color: #888; }
.btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background-color: #005bff; color: #fff; }
.btn-secondary { background-color: #666; color: #fff; }

/* ---------- Product card (kept semantic) ---------- */
.cs-card .cs-card-content h3 { margin: 0; }
.cs-card .cs-card-content p { margin: 0; }

/* ---------- Modal ---------- */
.custom-product-modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
  transition: opacity .2s ease-out; z-index: 9999;
}
.custom-product-modal.active { opacity: 1; pointer-events: auto; }
.custom-product-modal-content {
  width: min(620px, 92vw); background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 20px 20px 22px; position: relative;
}
.custom-product-modal-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer; color: #666;
}
.custom-product-modal-body {
  display: flex; align-items: center; gap: 20px;
}
.modal-product-icon {
  width: 120px; height: 120px; display: grid; place-items: center;
  border-radius: 12px; background: #f3f5f8; font-size: 56px; color: #2b2f36;
}
.modal-product-image {
  width: 120px; height: auto; border-radius: 8px; display:block;
}
.custom-product-modal-actions {
  display: flex; gap: 10px; margin-top: 10px;
}

/* ---------- Pagination (optional polish) ---------- */
#pageIndicators { font-size: 14px; color: #666; }
#prevPage, #nextPage { min-width: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 480px){
  .custom-product-modal-body { flex-direction: column; align-items: flex-start; }
  .modal-product-icon { width: 96px; height: 96px; font-size: 44px; }
  .modal-product-image { width: 96px; }
}