/**
 * Category page — page-specific layout ONLY.
 * All card styles live in customer.css (canonical block).
 * Clean rewrite 2026-04-19.
 */

.category-page { padding: 2rem 0; min-height: 60vh; }
.category-page .container { max-width: 100%; padding: 0 3rem; box-sizing: border-box; }

.category-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 2rem;
    text-align: center;
    color: #0F172A;
    padding: 0 1rem;
}
html.dark .category-title { color: #F1F5F9; }

#products-container { margin: 2rem 0; width: 100%; box-sizing: border-box; }

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 0;
    width: 100%;
    align-items: stretch;
}
.products-grid > div { display: flex; align-self: stretch; }

@media (max-width: 1200px) {
    .category-page .container { padding: 0 2rem; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .category-page .container { padding: 0 1rem; }
    #products-container { margin: 1rem 0; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .category-title { font-size: 1.5rem; padding: 0 1rem; }
}
@media (max-width: 480px) {
    .category-page .container { padding: 0 .5rem; }
    .products-grid { gap: .75rem; }
}

/* Infinite-scroll UI */
.loading-indicator { text-align: center; padding: 2rem; }
.spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #E2E8F0;
    border-top-color: #7C3AED;
    border-radius: 50%;
    animation: category-spin 0.8s linear infinite;
}
@keyframes category-spin { to { transform: rotate(360deg); } }
.no-more-products { text-align: center; padding: 2rem; color: #94A3B8; display: none; }

html.dark .spinner { border-color: #334155; border-top-color: #A78BFA; }
html.dark .no-more-products { color: #64748B; }