/* Додаткові дрібниці до Bootstrap для сторінок магазину */
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #198754; color: #fff; font-weight: 700; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center; margin-right: 6px;
}

.product-card-img { height: 200px; object-fit: contain; background: #fff; padding: 8px; }
.product-card .card-title a { color: inherit; text-decoration: none; }
.product-card .card-title a:hover { color: #0d6efd; }
.product-card { transition: transform .15s, box-shadow .15s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; }

.ajax-target { transition: opacity .15s; }
.ajax-target.loading, #cart-content.loading { opacity: .45; pointer-events: none; }

.gallery-main-img { height: 420px; object-fit: contain; cursor: zoom-in; background: #fff; }
.gallery-thumb { width: 72px; height: 72px; object-fit: cover; }
.gallery-empty { height: 320px; }

.cart-thumb { width: 64px; height: 64px; object-fit: cover; }

/* Класи, які використовують categories.js та catalog.js */
.muted { color: #6c757d; }
.error { color: #dc3545; }

@media (max-width: 575.98px) {
    .gallery-main-img { height: 280px; }
}