/* GRID — сітка карток товару.
 * Підключається там, де є перелік товарів:
 * головна, каталог, категорія, картка товару (блок "схожі"). */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.card:hover .card-title { color: var(--accent); }
.card-link { text-decoration: none; color: inherit; }
/* Квадрат: реальні фото товару зазвичай квадратні, і продукт
   у такій рамці видно краще, ніж у широкій 4:3. */
.card-img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
    background: var(--photo-bg); display: block;
    border-bottom: 1px solid var(--border);
}
.card-title { font-size: 16px; margin: 14px 16px 6px; transition: color .15s ease; }
.card-short { font-size: 14px; color: var(--muted); margin: 0 16px 14px; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 16px; }