/* BE COOL — Klima uređaji (product grid) page styles */
* { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-body); background: var(--bg-page); color: var(--text-body); }

/* Modal styles (shared with product/quote modals from products.js) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(9,35,54,0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 24px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
/* Product modal — indoor/outdoor unit slots stack on mobile so the label no longer overlaps the image */
@media (max-width: 560px) { .pm-units { grid-template-columns: 1fr !important; } }

/* Product grid — 4 columns desktop, 2 on mobile */
.klima-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1080px) { .klima-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .klima-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Compact card layout for the 2-column mobile grid (overrides ProductCard inline styles) */
  .klima-grid .pc-media { height: 130px !important; }
  .klima-grid .pc-body { padding: 14px 13px 16px !important; gap: 10px !important; }
  .klima-grid .pc-brand { font-size: 11px !important; }
  .klima-grid .pc-model { font-size: 16px !important; }
  .klima-grid .pc-power { font-size: 12.5px !important; }
  .klima-grid .pc-specs { gap: 5px !important; }
  .klima-grid .pc-price span:first-child { font-size: 21px !important; }
  .klima-grid .pc-price span:last-child { font-size: 11px !important; }
}