/**
 * Ecommerce Category Grid
 * Neutral WooCommerce category navigation. Keep visual treatment minimal so
 * project themes can add cards, backgrounds, shadows, or image treatments.
 */

.ecommerce-category-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-8);
}

.ecommerce-category-grid__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: inherit;
    text-decoration: none;
}

.ecommerce-category-grid__media {
    aspect-ratio: 1;
    overflow: hidden;
}

.ecommerce-category-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecommerce-category-grid__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    text-align: center;
}

.ecommerce-category-grid__count {
    font: inherit;
}

.ecommerce-category-grid__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: lightgrey;
}

.ecommerce-category-grid__placeholder svg {
    width: 25%;
    height: 25%;
}