/* PWA-friendly tweaks on top of Tailwind CDN. */

html, body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

input[type="search"]::-webkit-search-cancel-button { display: none; }

.product-card img {
  background-color: #f1f5f9;
  background-image: linear-gradient(135deg, #f1f5f9 25%, #e2e8f0 25%, #e2e8f0 50%, #f1f5f9 50%, #f1f5f9 75%, #e2e8f0 75%);
  background-size: 16px 16px;
}

img.broken-img { object-fit: contain; padding: 1rem; opacity: 0.4; }

.qty-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #cbd5e1; font-weight: 600;
  user-select: none;
}
.qty-btn:active { transform: scale(0.94); }

@media (max-width: 480px) {
  .grid-cards { grid-template-columns: 1fr 1fr !important; }
}

.fade-in { animation: fade 200ms ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }