﻿/* Restaurant list (Views/Shop/ShopList.cshtml, category/{id}/) */
.sm-shop-hero {
    margin-bottom: var(--sm-space-4);
}
.sm-shop-hero__title {
    margin: 0 0 var(--sm-space-2);
    font-size: var(--sm-font-size-xl);
}
.sm-shop-hero__address {
    display: inline-flex;
    align-items: center;
    gap: var(--sm-space-2);
    max-width: 100%;
    padding: var(--sm-space-2) var(--sm-space-3);
    border-radius: var(--sm-radius-pill);
    background: var(--sm-color-primary-soft);
    color: var(--sm-color-primary-dark);
    font-size: var(--sm-font-size-sm);
}
.sm-shop-hero__address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-filter-bar {
    position: sticky;
    top: var(--sm-header-offset, var(--sm-header-height));
    z-index: var(--sm-z-sticky);
    margin: 0 0 var(--sm-space-4);
    padding: var(--sm-space-2) 0 0;
    background: var(--sm-color-bg);
}
.sm-filter-bar .sm-chips {
    scroll-snap-type: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.sm-shop-count {
    margin: 0 0 var(--sm-space-3);
}
[data-shop-grid].is-loading {
    opacity: 0.5;
    pointer-events: none;
}
@media (min-width: 768px) {
    .sm-shop-hero__title {
        font-size: var(--sm-font-size-2xl);
    }
}

.sm-restaurant-card__heading {
    display: flex;
    align-items: center;
    gap: var(--sm-space-2);
}
.sm-restaurant-card__heading .sm-restaurant-card__title {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.sm-restaurant-card__heading .sm-fav-btn {
    flex-shrink: 0;
}

/* Image categories use a circular image and centered label without a card. */
.sm-filter-bar .sm-shop-category {
    align-items: center;
    justify-content: flex-start;
    flex-basis: 96px;
    width: 96px;
    height: 112px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sm-color-text);
    box-shadow: none;
}
.sm-filter-bar .sm-shop-category__image {
    width: 72px;
    height: 72px;
    padding: 0;
    background: transparent;
}
.sm-filter-bar .sm-shop-category > span:last-child {
    text-align: center;
}
.sm-filter-bar .sm-shop-category:hover,
.sm-filter-bar .sm-shop-category.is-active {
    background: transparent;
    color: var(--sm-color-primary);
}
.sm-filter-bar .sm-shop-category:hover .sm-shop-category__image,
.sm-filter-bar .sm-shop-category.is-active .sm-shop-category__image {
    outline: 2px solid var(--sm-color-primary);
    outline-offset: 2px;
}
.sm-filter-bar .sm-shop-category.is-active > span:last-child {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sm-filter-bar .sm-shop-category__image--icon {
    background: var(--sm-color-primary-soft);
    color: var(--sm-color-primary);
}

.sm-filter-bar .sm-shop-category__image svg {
    width: 32px;
    height: 32px;
}
