@import '_content/Sutz.Food.Shared.UI/Sutz.Food.Shared.UI.3td5g83pzw.bundle.scp.css';

/* /Components/Account/Profile.razor.rz.scp.css */
.page[b-qwo59vtrzl] {
    padding-block: var(--sutz-space-32);
}

.muted[b-qwo59vtrzl] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.cards[b-qwo59vtrzl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sutz-space-16);
    align-items: start;
}

.cards h2[b-qwo59vtrzl] {
    margin-bottom: var(--sutz-space-8);
    font-size: var(--sutz-text-lg);
}

.field__input:disabled[b-qwo59vtrzl] {
    color: var(--sutz-color-text-muted);
    background: var(--sutz-color-surface-muted, var(--sutz-color-surface));
    cursor: not-allowed;
}

.profile-links[b-qwo59vtrzl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
}
/* /Components/Account/SellerLocation.razor.rz.scp.css */
.location-grid[b-5sz2jdzwzd] {
    display: grid;
    gap: var(--sutz-space-24);
    align-items: start;
}

.location-grid__map[b-5sz2jdzwzd] {
    padding: var(--sutz-space-12);
}

@media (min-width: 900px) {
    .location-grid[b-5sz2jdzwzd] {
        grid-template-columns: minmax(320px, 420px) 1fr;
    }
}
/* /Components/Account/SellerPayment.razor.rz.scp.css */
.payment-card[b-zrp7as1733] {
    max-width: 480px;
    margin: 0 auto;
}

.muted[b-zrp7as1733] {
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.payment-status[b-zrp7as1733] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-16);
}

.payment-status--ok[b-zrp7as1733] {
    color: var(--sutz-color-success-dark, var(--sutz-color-text));
}

.payment-status strong[b-zrp7as1733] {
    display: block;
    margin-bottom: 2px;
}

.payment-note[b-zrp7as1733] {
    margin: 0 0 var(--sutz-space-12);
    padding: var(--sutz-space-8) var(--sutz-space-12);
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-sm);
}

.payment-frame[b-zrp7as1733] {
    min-height: 420px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site[b-3d5guesore] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sutz-color-surface);
}

/* ---------------- Header ---------------- */

.site-header[b-3d5guesore] {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sutz-color-border);
}

.site-header__inner[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-24);
    min-height: 68px;
}

.brand[b-3d5guesore] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-8);
    text-decoration: none;
    color: var(--sutz-color-text);
    font-weight: var(--sutz-font-weight-bold);
    font-size: var(--sutz-text-lg);
    letter-spacing: var(--sutz-tracking-tight);
    white-space: nowrap;
}

.brand__mark[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: #ffe5db;
    font-size: 1.1rem;
}

.site-nav[b-3d5guesore] {
    display: none;
    gap: var(--sutz-space-24);
    margin-inline-start: var(--sutz-space-16);
}

.site-nav a[b-3d5guesore] {
    color: var(--sutz-color-text-muted);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    transition: color var(--sutz-transition-fast);
}

.site-nav a:hover[b-3d5guesore] {
    color: var(--sutz-color-primary-dark);
}

.site-header__actions[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-8);
    margin-inline-start: auto;
}

.logout-form[b-3d5guesore] {
    display: inline;
}

.site-user[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-weight: var(--sutz-font-weight-semibold);
    font-size: var(--sutz-text-sm);
}

/* ---------------- Main ---------------- */

.site-main[b-3d5guesore] {
    flex: 1 1 auto;
}

/* ---------------- Footer ---------------- */

.site-footer[b-3d5guesore] {
    margin-top: var(--sutz-space-48);
    padding-block: var(--sutz-space-32) var(--sutz-space-16);
    background: var(--sutz-color-text);
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__inner[b-3d5guesore] {
    display: flex;
    flex-direction: column;
    gap: var(--sutz-space-24);
}

.site-footer__brand[b-3d5guesore] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

.site-footer__name[b-3d5guesore] {
    margin: 0;
    font-weight: var(--sutz-font-weight-bold);
    color: #fff;
}

.site-footer__tagline[b-3d5guesore] {
    margin: 2px 0 0;
    font-size: var(--sutz-text-sm);
    color: rgba(255, 255, 255, 0.66);
}

.site-footer__links[b-3d5guesore] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-16);
}

.site-footer__links a[b-3d5guesore] {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: var(--sutz-text-sm);
}

.site-footer__links a:hover[b-3d5guesore] {
    color: #fff;
    text-decoration: underline;
}

.site-footer__social[b-3d5guesore] {
    display: flex;
    gap: var(--sutz-space-8);
}

.site-footer__social a[b-3d5guesore] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sutz-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    transition: background var(--sutz-transition-fast), color var(--sutz-transition-fast);
}

.site-footer__social a:hover[b-3d5guesore] {
    background: var(--sutz-color-primary);
    color: #fff;
}

.site-footer__legal[b-3d5guesore] {
    margin: var(--sutz-space-24) auto 0;
    padding-top: var(--sutz-space-16);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--sutz-text-xs);
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 860px) {
    .site-nav[b-3d5guesore] {
        display: flex;
    }

    .site-footer__inner[b-3d5guesore] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-u5eqy0zoxp],
.components-reconnect-repeated-attempt-visible[b-u5eqy0zoxp],
.components-reconnect-failed-visible[b-u5eqy0zoxp],
.components-pause-visible[b-u5eqy0zoxp],
.components-resume-failed-visible[b-u5eqy0zoxp],
.components-rejoining-animation[b-u5eqy0zoxp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-retrying[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-failed[b-u5eqy0zoxp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-u5eqy0zoxp] {
    display: block;
}


#components-reconnect-modal[b-u5eqy0zoxp] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-u5eqy0zoxp 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-u5eqy0zoxp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-u5eqy0zoxp 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-u5eqy0zoxp]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-u5eqy0zoxp 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-u5eqy0zoxp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-u5eqy0zoxp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-u5eqy0zoxp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-u5eqy0zoxp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-u5eqy0zoxp] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-u5eqy0zoxp] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-u5eqy0zoxp] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-u5eqy0zoxp] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-u5eqy0zoxp] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-u5eqy0zoxp] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-u5eqy0zoxp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-u5eqy0zoxp] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-u5eqy0zoxp {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-1ygvplfyfy] {
    position: relative;
}

.user-menu__trigger[b-1ygvplfyfy] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-8);
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--sutz-radius-pill);
    background: none;
    cursor: pointer;
    color: var(--sutz-color-text);
    font: inherit;
    max-width: 220px;
}

.user-menu__trigger:hover[b-1ygvplfyfy],
.user-menu--open .user-menu__trigger[b-1ygvplfyfy] {
    border-color: var(--sutz-color-border);
    background: var(--sutz-color-surface-alt);
}

.user-menu__avatar[b-1ygvplfyfy] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-weight: var(--sutz-font-weight-semibold);
    font-size: var(--sutz-text-sm);
}

.user-menu__avatar--lg[b-1ygvplfyfy] {
    width: 40px;
    height: 40px;
    font-size: var(--sutz-text-base);
}

.user-menu__label[b-1ygvplfyfy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
}

@media (max-width: 640px) {
    .user-menu__label[b-1ygvplfyfy] {
        display: none;
    }
}

.user-menu__chevron[b-1ygvplfyfy] {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--sutz-color-text-muted);
    transition: transform var(--sutz-transition-fast);
}

.user-menu--open .user-menu__chevron[b-1ygvplfyfy] {
    transform: rotate(180deg);
}

.user-menu__scrim[b-1ygvplfyfy] {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: transparent;
}

.user-menu__panel[b-1ygvplfyfy] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: var(--sutz-space-8);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-lg);
}

.user-menu__id[b-1ygvplfyfy] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-8);
}

.user-menu__id-text[b-1ygvplfyfy] {
    min-width: 0;
}

.user-menu__id-title[b-1ygvplfyfy] {
    margin: 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.user-menu__id-mail[b-1ygvplfyfy] {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-semibold);
}

.user-menu__sep[b-1ygvplfyfy] {
    margin: var(--sutz-space-4) 0;
    border: none;
    border-top: 1px solid var(--sutz-color-border);
}

.user-menu__item[b-1ygvplfyfy] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
    width: 100%;
    padding: 10px var(--sutz-space-8);
    border: none;
    border-radius: var(--sutz-radius-md);
    background: none;
    color: var(--sutz-color-text);
    text-decoration: none;
    font: inherit;
    font-size: var(--sutz-text-sm);
    text-align: left;
    cursor: pointer;
}

.user-menu__item:hover[b-1ygvplfyfy] {
    background: var(--sutz-color-surface-alt);
}

.user-menu__item--danger[b-1ygvplfyfy] {
    color: var(--sutz-color-danger);
}

.user-menu__item--danger:hover[b-1ygvplfyfy] {
    background: var(--sutz-color-danger-light);
}

.user-menu__glyph[b-1ygvplfyfy] {
    flex: none;
    width: 20px;
    text-align: center;
}

.user-menu__logout[b-1ygvplfyfy] {
    margin: 0;
}
/* /Components/Pages/Directory.razor.rz.scp.css */
/* Public food directory — same warm, soft-card language as the landing page. */

.directory__head[b-0q1cw1mbw4] {
    max-width: 60ch;
}

/* ---------------- Filters ---------------- */

.filters[b-0q1cw1mbw4] {
    display: grid;
    gap: var(--sutz-space-16);
    padding: var(--sutz-space-16);
    margin-bottom: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface-alt);
}

.filters__row[b-0q1cw1mbw4] {
    display: grid;
    gap: var(--sutz-space-8);
}

.filters__row--near[b-0q1cw1mbw4] {
    padding-top: var(--sutz-space-16);
    border-top: 1px dashed var(--sutz-color-border-strong);
}

.filters__label[b-0q1cw1mbw4] {
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sutz-color-text-muted);
}

.filters__note[b-0q1cw1mbw4] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.chips[b-0q1cw1mbw4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
}

.chip[b-0q1cw1mbw4] {
    display: inline-flex;
    align-items: center;
    gap: var(--sutz-space-4);
    padding: 8px 14px;
    border: 1px solid var(--sutz-color-border-strong);
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-surface);
    color: var(--sutz-color-text);
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    line-height: 1.1;
    cursor: pointer;
    transition: border-color var(--sutz-transition-fast), background var(--sutz-transition-fast),
        color var(--sutz-transition-fast);
}

.chip:hover[b-0q1cw1mbw4] {
    border-color: var(--sutz-color-primary);
    color: var(--sutz-color-primary-darker);
}

.chip:focus-visible[b-0q1cw1mbw4] {
    outline: 2px solid var(--sutz-color-primary);
    outline-offset: 2px;
}

.chip--on[b-0q1cw1mbw4] {
    border-color: var(--sutz-color-primary);
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast);
}

.chip--on:hover[b-0q1cw1mbw4] {
    background: var(--sutz-color-primary-dark);
    border-color: var(--sutz-color-primary-dark);
    color: var(--sutz-color-primary-contrast);
}

.chip--clear[b-0q1cw1mbw4] {
    border-style: dashed;
    color: var(--sutz-color-text-muted);
}

.chip__icon[b-0q1cw1mbw4] {
    font-size: 1rem;
}

.near-btn[b-0q1cw1mbw4] {
    padding-block: 8px;
    border-radius: var(--sutz-radius-pill);
}

/* ---------------- Results ---------------- */

.results__count[b-0q1cw1mbw4] {
    margin: 0 0 var(--sutz-space-12);
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.results[b-0q1cw1mbw4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--sutz-space-16);
}

.results__more[b-0q1cw1mbw4] {
    display: flex;
    justify-content: center;
    margin-top: var(--sutz-space-24);
}

.seller-card[b-0q1cw1mbw4] {
    display: flex;
    flex-direction: column;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-16);
    color: var(--sutz-color-text);
    text-decoration: none;
    transition: transform var(--sutz-transition-base), box-shadow var(--sutz-transition-base),
        border-color var(--sutz-transition-base);
}

.seller-card:hover[b-0q1cw1mbw4] {
    transform: translateY(-2px);
    border-color: var(--sutz-color-primary);
    box-shadow: var(--sutz-shadow-md);
}

.seller-card:focus-visible[b-0q1cw1mbw4] {
    outline: 2px solid var(--sutz-color-primary);
    outline-offset: 2px;
}

.seller-card__head[b-0q1cw1mbw4] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

/* Photo renders its own <img>/placeholder <div>, outside this component's CSS scope. */
[b-0q1cw1mbw4] .seller-card__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-primary-light);
    font-size: 1.4rem;
    object-fit: cover;
}

.seller-card__id[b-0q1cw1mbw4] {
    min-width: 0;
}

.seller-card__name[b-0q1cw1mbw4] {
    margin: 0;
    font-size: var(--sutz-text-lg);
    font-weight: var(--sutz-font-weight-semibold);
    line-height: 1.25;
}

.seller-card__meta[b-0q1cw1mbw4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-4);
    margin: 4px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.seller-card__rating[b-0q1cw1mbw4] {
    font-weight: var(--sutz-font-weight-semibold);
    color: var(--sutz-color-warning);
}

.seller-card__cats[b-0q1cw1mbw4] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    color: var(--sutz-color-primary-darker);
}

.seller-card__address[b-0q1cw1mbw4] {
    display: flex;
    gap: var(--sutz-space-4);
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.seller-card__badges[b-0q1cw1mbw4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-8);
    margin-top: auto;
}

.seller-card__cta[b-0q1cw1mbw4] {
    padding-top: var(--sutz-space-12);
    border-top: 1px solid var(--sutz-color-border);
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-semibold);
    color: var(--sutz-color-primary-dark);
}

/* ---------------- Empty + loading states ---------------- */

.empty[b-0q1cw1mbw4] {
    display: grid;
    justify-items: center;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-48) var(--sutz-space-24);
    text-align: center;
}

.empty__icon[b-0q1cw1mbw4] {
    font-size: 2.5rem;
}

.empty h2[b-0q1cw1mbw4] {
    margin: 0;
    font-size: var(--sutz-text-xl);
}

.empty p[b-0q1cw1mbw4] {
    max-width: 44ch;
    margin: 0;
    color: var(--sutz-color-text-muted);
}

.skeleton[b-0q1cw1mbw4] {
    display: grid;
    gap: var(--sutz-space-12);
    min-height: 168px;
}

.skeleton__line[b-0q1cw1mbw4] {
    height: 12px;
    border-radius: var(--sutz-radius-pill);
    background: linear-gradient(90deg, var(--sutz-color-surface-alt), var(--sutz-color-border), var(--sutz-color-surface-alt));
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-0q1cw1mbw4 1.4s ease-in-out infinite;
}

.skeleton__line--title[b-0q1cw1mbw4] {
    width: 60%;
    height: 20px;
}

.skeleton__line--short[b-0q1cw1mbw4] {
    width: 40%;
}

@keyframes skeleton-shimmer-b-0q1cw1mbw4 {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton__line[b-0q1cw1mbw4] {
        animation: none;
    }

    .seller-card:hover[b-0q1cw1mbw4] {
        transform: none;
    }
}

@media (min-width: 720px) {
    .filters[b-0q1cw1mbw4] {
        padding: var(--sutz-space-24);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------------- Hero ---------------- */

.hero[b-hnwh5t3ikb] {
    position: relative;
    overflow: hidden;
    padding-block: var(--sutz-space-48);
    background:
        radial-gradient(1200px 400px at 85% -10%, var(--sutz-color-primary-light), transparent 70%),
        var(--sutz-color-surface);
}

.hero__inner[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-48);
    align-items: center;
}

.hero__eyebrow[b-hnwh5t3ikb] {
    display: inline-block;
    margin-bottom: var(--sutz-space-12);
    padding: 6px 12px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero__title[b-hnwh5t3ikb] {
    margin: 0 0 var(--sutz-space-16);
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
}

.hero__lede[b-hnwh5t3ikb] {
    max-width: 52ch;
    margin: 0 0 var(--sutz-space-24);
    font-size: var(--sutz-text-lg);
    color: var(--sutz-color-text-muted);
}

.hero__actions[b-hnwh5t3ikb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sutz-space-12);
    margin-bottom: var(--sutz-space-24);
}

.hero__points[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.hero__points li[b-hnwh5t3ikb] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-8);
}

/* Floating preview cards */

.hero__art[b-hnwh5t3ikb] {
    position: relative;
    display: grid;
    gap: var(--sutz-space-16);
}

.hero__card[b-hnwh5t3ikb] {
    padding: var(--sutz-space-16);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-lg);
}

.hero__card--two[b-hnwh5t3ikb] {
    margin-inline-start: var(--sutz-space-24);
    opacity: 0.96;
}

.hero__card-head[b-hnwh5t3ikb] {
    display: flex;
    align-items: center;
    gap: var(--sutz-space-12);
}

.hero__avatar[b-hnwh5t3ikb] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sutz-radius-md);
    background: var(--sutz-color-surface-alt);
    font-size: 1.4rem;
}

.hero__card-title[b-hnwh5t3ikb] {
    margin: 0;
    font-weight: var(--sutz-font-weight-semibold);
}

.hero__card-meta[b-hnwh5t3ikb] {
    margin: 2px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.hero__card-head .sutz-badge[b-hnwh5t3ikb] {
    margin-inline-start: auto;
}

.hero__card-dish[b-hnwh5t3ikb] {
    margin: var(--sutz-space-12) 0 0;
    font-weight: var(--sutz-font-weight-medium);
}

.hero__card-tags[b-hnwh5t3ikb] {
    display: flex;
    gap: var(--sutz-space-8);
    margin-top: var(--sutz-space-12);
}

/* ---------------- Generic section ---------------- */

.section[b-hnwh5t3ikb] {
    padding-block: var(--sutz-space-48);
}

.section--alt[b-hnwh5t3ikb] {
    background: var(--sutz-color-surface-alt);
}

.section__head[b-hnwh5t3ikb] {
    max-width: 60ch;
    margin-bottom: var(--sutz-space-32);
}

.section__head h2[b-hnwh5t3ikb] {
    margin-bottom: var(--sutz-space-8);
}

.section__head p[b-hnwh5t3ikb] {
    margin: 0;
    color: var(--sutz-color-text-muted);
}

/* ---------------- Steps ---------------- */

.steps[b-hnwh5t3ikb] {
    display: grid;
    gap: var(--sutz-space-24);
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps__item[b-hnwh5t3ikb] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    transition: transform var(--sutz-transition-base), box-shadow var(--sutz-transition-base);
}

.steps__item:hover[b-hnwh5t3ikb] {
    transform: translateY(-2px);
    box-shadow: var(--sutz-shadow-md);
}

.steps__num[b-hnwh5t3ikb] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--sutz-space-12);
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast);
    font-weight: var(--sutz-font-weight-bold);
}

.steps__item h3[b-hnwh5t3ikb] {
    margin-bottom: var(--sutz-space-8);
    font-size: var(--sutz-text-lg);
}

.steps__item p[b-hnwh5t3ikb] {
    margin: 0;
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

/* ---------------- Categories ---------------- */

.categories[b-hnwh5t3ikb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sutz-space-12);
}

.category[b-hnwh5t3ikb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sutz-space-8);
    padding: var(--sutz-space-16);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    color: var(--sutz-color-text);
    text-decoration: none;
    transition: border-color var(--sutz-transition-fast), transform var(--sutz-transition-fast);
}

.category:hover[b-hnwh5t3ikb] {
    border-color: var(--sutz-color-primary);
    transform: translateY(-2px);
}

.category__icon[b-hnwh5t3ikb] {
    font-size: 1.75rem;
}

.category__name[b-hnwh5t3ikb] {
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
}

/* -------- App store badges (coming soon) -------- */

.store-badges[b-hnwh5t3ikb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sutz-space-16);
    margin-top: var(--sutz-space-24);
}

/* Styled after the two real store badges' proportions and layout, drawn from scratch — not the
   official trademarked artwork — and dimmed + disabled since neither app is published yet. */
.store-badge[b-hnwh5t3ikb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: var(--sutz-radius-md);
    background: #1b1b1f;
    color: #fff;
    opacity: 0.72;
    cursor: default;
    user-select: none;
}

.store-badge__glyph[b-hnwh5t3ikb] {
    width: 26px;
    height: 26px;
    flex: none;
    color: #fff;
}

.store-badge__glyph--play[b-hnwh5t3ikb] {
    width: 22px;
    height: 22px;
}

.store-badge__text[b-hnwh5t3ikb] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.store-badge__eyebrow[b-hnwh5t3ikb] {
    font-size: 10px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}

.store-badge__name[b-hnwh5t3ikb] {
    font-size: var(--sutz-text-base);
    font-weight: var(--sutz-font-weight-semibold);
}

@media (min-width: 900px) {
    .hero__inner[b-hnwh5t3ikb] {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .steps[b-hnwh5t3ikb] {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-stores[b-hnwh5t3ikb] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Vender.razor.rz.scp.css */
/* ---------------- Hero ---------------- */

.vhero[b-m5xcklg41t] {
    padding-block: var(--sutz-space-48);
    background:
        radial-gradient(1000px 360px at 15% -10%, var(--sutz-color-primary-light), transparent 70%),
        var(--sutz-color-surface);
    text-align: center;
}

.vhero__inner[b-m5xcklg41t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 68ch;
    margin-inline: auto;
}

.vhero__title[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-16);
    font-size: clamp(2rem, 5.5vw, 3rem);
    line-height: 1.1;
}

.vhero__lede[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-24);
    font-size: var(--sutz-text-lg);
    color: var(--sutz-color-text-muted);
}

.vhero .hero__actions[b-m5xcklg41t] {
    justify-content: center;
}

.vhero__note[b-m5xcklg41t] {
    margin: var(--sutz-space-16) 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Generic section (mirrors Home.razor's) ---------------- */

.section[b-m5xcklg41t] {
    padding-block: var(--sutz-space-48);
}

.section--alt[b-m5xcklg41t] {
    background: var(--sutz-color-surface-alt);
}

.section__head[b-m5xcklg41t] {
    max-width: 60ch;
    margin-bottom: var(--sutz-space-32);
}

.section__head h2[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-8);
}

.section__head p[b-m5xcklg41t] {
    margin: 0;
    color: var(--sutz-color-text-muted);
}

/* ---------------- Pain points ---------------- */

.pain-grid[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
}

.pain[b-m5xcklg41t] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.pain__icon[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-8);
    font-size: 1.5rem;
}

.pain h3[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
    font-size: var(--sutz-text-base);
}

.pain p[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Comparison table ---------------- */

.compare[b-m5xcklg41t] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.compare__row[b-m5xcklg41t] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-12) var(--sutz-space-16);
    border-bottom: 1px solid var(--sutz-color-border);
    align-items: center;
}

.compare__row:last-child[b-m5xcklg41t] {
    border-bottom: none;
}

.compare__row--head[b-m5xcklg41t] {
    background: var(--sutz-color-surface-alt);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--sutz-color-text-muted);
}

.compare__label[b-m5xcklg41t] {
    font-weight: var(--sutz-font-weight-medium);
    font-size: var(--sutz-text-sm);
}

.compare__cell[b-m5xcklg41t] {
    display: flex;
    align-items: baseline;
    gap: var(--sutz-space-8);
    font-size: var(--sutz-text-sm);
}

.compare__cell--bad[b-m5xcklg41t] {
    color: var(--sutz-color-text-muted);
}

.compare__cell--bad span[aria-hidden][b-m5xcklg41t] {
    color: var(--sutz-color-danger);
}

.compare__cell--good[b-m5xcklg41t] {
    color: var(--sutz-color-text);
    font-weight: var(--sutz-font-weight-medium);
}

.compare__cell--good span[aria-hidden][b-m5xcklg41t] {
    color: var(--sutz-color-success);
    font-weight: var(--sutz-font-weight-bold);
}

/* ---------------- Benefits ---------------- */

.benefits[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
}

.benefit[b-m5xcklg41t] {
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    transition: transform var(--sutz-transition-base), box-shadow var(--sutz-transition-base);
}

.benefit:hover[b-m5xcklg41t] {
    transform: translateY(-2px);
    box-shadow: var(--sutz-shadow-md);
}

.benefit__icon[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-8);
    font-size: 1.5rem;
}

.benefit h3[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
    font-size: var(--sutz-text-base);
}

.benefit p[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

/* ---------------- Pricing / plan comparison ---------------- */

.pricing__badge[b-m5xcklg41t] {
    display: inline-block;
    margin-bottom: var(--sutz-space-12);
    padding: 6px 14px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary-light);
    color: var(--sutz-color-primary-darker);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    letter-spacing: 0.02em;
}

.pricing__note[b-m5xcklg41t] {
    max-width: 60ch;
    margin: var(--sutz-space-32) auto 0;
    text-align: center;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.periodicity-toggle[b-m5xcklg41t] {
    display: flex;
    width: fit-content;
    margin: 0 auto var(--sutz-space-32);
    padding: 4px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-surface-alt);
    border: 1px solid var(--sutz-color-border);
}

.periodicity-toggle__input[b-m5xcklg41t] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.periodicity-toggle__label[b-m5xcklg41t] {
    padding: 8px 20px;
    border-radius: var(--sutz-radius-pill);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
    font-weight: var(--sutz-font-weight-medium);
    cursor: pointer;
    user-select: none;
    transition: background var(--sutz-transition-fast), color var(--sutz-transition-fast);
}

.periodicity-toggle__input:checked + .periodicity-toggle__label[b-m5xcklg41t] {
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast, #fff);
}

.periodicity-toggle__input:focus-visible + .periodicity-toggle__label[b-m5xcklg41t] {
    outline: 2px solid var(--sutz-color-primary);
    outline-offset: 2px;
}

.plans-grid[b-m5xcklg41t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sutz-space-24);
    /* stretch (the grid default), not start — every card in a row matches the tallest one's height,
       so .plan-card's own flex-column + the CTA's margin-top:auto push every button to the same
       bottom edge regardless of how much description/feature text a given plan has. */
    align-items: stretch;
}

.plan-card[b-m5xcklg41t] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sutz-space-32);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
}

.plan-card--popular[b-m5xcklg41t] {
    border-color: var(--sutz-color-primary);
    box-shadow: var(--sutz-shadow-md);
}

.plan-card__badge[b-m5xcklg41t] {
    align-self: flex-start;
    margin-bottom: var(--sutz-space-12);
    padding: 4px 12px;
    border-radius: var(--sutz-radius-pill);
    background: var(--sutz-color-primary);
    color: var(--sutz-color-primary-contrast, #fff);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
}

.plan-card__name[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-8);
}

.plan-card__description[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-16);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.plan-card__price[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-16);
}

/* Only one of these is ever visible: annual by default, monthly once #freq-monthly is checked —
   see the sibling-selector rules below. Both render server-side so the toggle is pure CSS, no
   interactivity/circuit needed on an otherwise-static marketing page. */
.price[b-m5xcklg41t] {
    display: none;
    align-items: baseline;
    gap: var(--sutz-space-8);
}

.price--annual[b-m5xcklg41t] {
    display: flex;
}

.plan-card__amount[b-m5xcklg41t] {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: var(--sutz-font-weight-bold);
    color: var(--sutz-color-primary-darker);
    font-variant-numeric: tabular-nums;
}

.plan-card__currency[b-m5xcklg41t] {
    margin-right: 1px;
    font-size: 0.55em;
    font-weight: var(--sutz-font-weight-semibold);
    vertical-align: top;
}

.plan-card__cents[b-m5xcklg41t] {
    margin-left: 1px;
    font-size: 0.5em;
    font-weight: var(--sutz-font-weight-semibold);
}

.plan-card__period[b-m5xcklg41t] {
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.plan-card__annual-only[b-m5xcklg41t] {
    margin: 4px 0 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

/* #freq-monthly itself is nested inside .periodicity-toggle, not a sibling of .plans-grid — so the
   ":has()" check happens on the wrapper, which *is* .plans-grid's sibling inside .sutz-container,
   and reaches every card's price blocks at once. */
.periodicity-toggle:has(#freq-monthly:checked) ~ .plans-grid .price--annual[b-m5xcklg41t] {
    display: none;
}

.periodicity-toggle:has(#freq-monthly:checked) ~ .plans-grid .price--monthly[b-m5xcklg41t] {
    display: flex;
}

.plan-card__group[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-12);
}

.plan-card__group-title[b-m5xcklg41t] {
    margin: 0 0 var(--sutz-space-4);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-xs);
    font-weight: var(--sutz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.plan-card__features[b-m5xcklg41t] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sutz-text-sm);
    text-align: left;
}

.plan-card__features li .sutz-icon[b-m5xcklg41t] {
    margin-right: 6px;
}

.plan-card .sutz-btn[b-m5xcklg41t] {
    margin-top: auto;
    width: 100%;
}

/* ---------------- Seller CTA (mirrors Home.razor's) ---------------- */

.seller-cta[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-32);
    align-items: center;
}

.seller-cta__copy h2[b-m5xcklg41t] {
    margin-bottom: var(--sutz-space-16);
}

.seller-cta__note[b-m5xcklg41t] {
    margin: 0;
    font-size: var(--sutz-text-xs);
    color: var(--sutz-color-text-muted);
}

.seller-cta__panel[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-12);
    padding: var(--sutz-space-24);
    border: 1px solid var(--sutz-color-border);
    border-radius: var(--sutz-radius-lg);
    background: var(--sutz-color-surface);
    box-shadow: var(--sutz-shadow-sm);
}

.seller-cta__row[b-m5xcklg41t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sutz-space-16);
    padding-bottom: var(--sutz-space-12);
    border-bottom: 1px dashed var(--sutz-color-border-strong);
    font-size: var(--sutz-text-sm);
    color: var(--sutz-color-text-muted);
}

.seller-cta__row:last-child[b-m5xcklg41t] {
    padding-bottom: 0;
    border-bottom: none;
}

.seller-cta__row strong[b-m5xcklg41t] {
    color: var(--sutz-color-text);
}

.seller-cta__row--muted[b-m5xcklg41t] {
    font-size: var(--sutz-text-xs);
}

/* ---------------- Sell steps ---------------- */

.vsteps[b-m5xcklg41t] {
    display: grid;
    gap: var(--sutz-space-16);
    margin: 0 0 var(--sutz-space-24);
    padding-inline-start: var(--sutz-space-24);
    color: var(--sutz-color-text-muted);
    font-size: var(--sutz-text-sm);
}

.vsteps strong[b-m5xcklg41t] {
    display: block;
    margin-bottom: 2px;
    color: var(--sutz-color-text);
    font-size: var(--sutz-text-base);
}

@media (min-width: 700px) {
    .pain-grid[b-m5xcklg41t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits[b-m5xcklg41t] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .seller-cta[b-m5xcklg41t] {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

@media (max-width: 640px) {
    .compare__row[b-m5xcklg41t] {
        grid-template-columns: 1fr;
        gap: var(--sutz-space-8, 4px);
    }

    .compare__row--head[b-m5xcklg41t] {
        display: none;
    }

    .compare__label[b-m5xcklg41t] {
        margin-bottom: 2px;
    }
}