/* ==========================================================================
   Storefront empty state
   ==========================================================================
   Shared empty-state callout for storefront listing pages (collections,
   search, new-in, future filtered views). Provides legible contrast on the
   dark surface, semantic spacing, and a structure ready for the Pass-2
   Figma brand skin (e.g. accent border, icon slot).

   Usage:
       <p class="storefront-empty-state">No products found matching your criteria.</p>

   Variants:
       storefront-empty-state--compact  — tighter padding for inline use.
   ========================================================================== */

.storefront-empty-state {
    margin: var(--brand-space-5) auto 0;
    padding: var(--brand-space-4) var(--brand-space-4);
    max-width: 36rem;
    text-align: center;
    color: var(--brand-text-light);
    font-family: var(--brand-font-body);
    font-size: 1rem;
    font-weight: var(--brand-font-weight-medium);
    line-height: var(--brand-line-height-normal);
    background-color: var(--brand-surface-dark-alt);
    border: 1px solid var(--brand-border-dark);
    border-radius: var(--brand-radius);
}

.storefront-empty-state--compact {
    padding: var(--brand-space-3) var(--brand-space-4);
    font-size: 0.95rem;
}