/* ── Homepage: Shop by Warehouse ───────────────
   Reuses .products-grid / .product-card from product-cards.css; this file
   only adds the per-warehouse section + heading + empty-state styling. */

.warehouse-section { padding: 56px 0; }

.warehouse-group { margin-bottom: 56px; }
.warehouse-group:last-of-type { margin-bottom: 0; }

.warehouse-group__header {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 28px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.warehouse-group__name {
    font-size: 22px; font-weight: 700; color: var(--text-heading);
    margin: 0; letter-spacing: -0.01em;
}

.warehouse-group__empty {
    color: var(--text-muted); font-size: 15px;
    padding: 20px 18px; margin: 0;
    background: var(--bg-surface); border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .warehouse-section { padding: 40px 0; }
    .warehouse-group { margin-bottom: 32px; }
    .warehouse-group__name { font-size: 19px; }
}

/* Homepage product search bar (client mockup 2026-07-08) — centered, dark square button */
.warehouse-search { max-width: 480px; margin: 0 auto 36px; }
.warehouse-search input[type="search"] { width: 100%; }
.warehouse-search button { background: var(--accent); color: #fff; padding: 12px 18px; }
.warehouse-search button:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 576px) { .warehouse-search { max-width: 100%; margin-bottom: 24px; } }