/* ==========================================================================
   Responsive — Products listing page (/products)
   Loaded after components-pages.css. Uses :root tokens from responsive.css.
   ========================================================================== */

/* Grid + img-fit handled in responsive.css §31b. This file holds only
   /products-specific layout (sidebar + card internals). */

.products-list-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 992px) {
    .products-list-layout { grid-template-columns: clamp(220px, 22vw, 300px) 1fr; }
}

.products-sidebar,
.products-main { min-width: 0; }

/* Card internals — fluid sizing */
.products-grid > div,
.products-grid .product-item { padding: var(--space-xs); }
.products-grid .product-title { font-size: var(--fs-base); line-height: 1.3; }
.products-grid .price { font-size: var(--fs-md); font-weight: 600; }
.products-grid .button { width: 100%; padding-block: var(--space-xs); }

@media (max-width: 991.98px) {
    .products-sidebar { order: 2; }
    .products-sidebar .sidebar-widget { margin-bottom: var(--space-md); }
}