/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Header */
.site-header[b-p6mkh30chl] {
    position: sticky; top: 0; z-index: 50;
    /* Token, not a literal — it has to invert with the theme, and a hardcoded white
       sheet over a dark page is the classic way a retrofitted dark mode gives itself
       away at the top of the screen. */
    background: var(--c-header-bg);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--c-border);
}
.header-inner[b-p6mkh30chl] {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .9rem 1.25rem;
}
.brand[b-p6mkh30chl] { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand:hover[b-p6mkh30chl] { text-decoration: none; }
.brand-mark[b-p6mkh30chl] { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.brand-name[b-p6mkh30chl] { font-weight: 800; color: var(--c-text); font-size: 1.05rem; letter-spacing: -.01em; }
.brand-dot[b-p6mkh30chl] { color: var(--c-brand); }

/*  align-items: center, not the default stretch — the collections menu is a <details>,
    which is a block, and a stretched block puts its summary at a different height from the
    links beside it. */
.primary-nav[b-p6mkh30chl] { display: flex; align-items: center; gap: .25rem; margin-left: 1rem; flex: 1; }

/*  The dropdown's summary is styled by the SAME rule as the links, not a copy of it. It
    first shipped with its own font-weight and no padding, which left it a different size
    sitting at a different height in the middle of the row. Anything that looks like a nav
    item has to be in this selector list, or it will drift again the next time one of these
    values changes. The panel and caret live in app.css; only the trigger belongs here. */
.primary-nav[b-p6mkh30chl]  a,
.primary-nav[b-p6mkh30chl]  summary {
    display: inline-flex; align-items: center;
    padding: .5rem .85rem;
    color: var(--c-text); font-weight: 500; font-size: .95rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.primary-nav[b-p6mkh30chl]  a:hover,
.primary-nav[b-p6mkh30chl]  summary:hover { background: var(--c-surface-alt); color: var(--c-text); text-decoration: none; }
.primary-nav[b-p6mkh30chl]  a.active { color: var(--c-brand); background: var(--c-brand-soft); }
/* Open reads as the current location, the same way an active link does. */
.primary-nav[b-p6mkh30chl]  details[open] > summary { color: var(--c-brand); background: var(--c-brand-soft); }

.header-search[b-p6mkh30chl] { flex: 0 1 260px; }
.header-search input[b-p6mkh30chl] {
    width: 100%; padding: .45rem .85rem;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill);
    background: var(--c-surface-alt); font-size: .9rem;
}
.header-search input:focus[b-p6mkh30chl] { background: var(--c-surface); }

.header-actions[b-p6mkh30chl] { display: flex; align-items: center; gap: .5rem; }

/*  Measured at 375x812 before this existed: the header wrapped to three rows — brand, then
    search, then nav — and came to 187px. Sticky, so that was 23% of the phone screen gone
    for the whole session, on a page whose entire job is showing product cards.

    Two rows now: brand and the theme toggle, then nav and search sharing a line. The
    ::after is a flex line break — without it nav fits beside the brand at 375px and the
    rows pack in an order nobody wants. */
@media (max-width: 860px) {
    .header-inner[b-p6mkh30chl] { flex-wrap: wrap; gap: .5rem .75rem; padding: .55rem 1rem; }
    .brand[b-p6mkh30chl] { order: 1; }
    .header-actions[b-p6mkh30chl] { order: 2; margin-left: auto; }
    .header-inner[b-p6mkh30chl]::after { content: ""; flex-basis: 100%; height: 0; order: 3; }

    /*  WRAPS. This is the fix for the nav running off the side of a phone.

        The row is `white-space: nowrap` per item so a label never breaks mid-word, and it
        used to be nowrap on the container too — so when the nav outgrew the screen it
        simply overflowed and the page scrolled sideways. Measured on 2026-09-19 the five
        items came to 463px against ~358px of usable width on a 390px phone, and the last
        two were off-screen.

        It outgrew it because of a change here: "Deals" (~55px) became "Today's deals"
        (114px) plus "Featured deals" (121px) when the deal pages were split in three. The
        header had been sized for the old row and nothing re-checked it.

        Wrapping is the guarantee — whatever labels end up here, the page can never scroll
        sideways again. The secondary item below keeps it to one line in the normal case,
        so the guarantee costs no height until it is actually needed. */
    .primary-nav[b-p6mkh30chl] { order: 4; flex: 1 1 100%; margin-left: -.35rem; gap: 0; flex-wrap: wrap; row-gap: .1rem; }
    .primary-nav[b-p6mkh30chl]  a,
    .primary-nav[b-p6mkh30chl]  summary { white-space: nowrap; padding: .35rem .45rem; font-size: .9rem; }

    /*  Two links are dropped from the phone header, and both are one tap away elsewhere.

        "Featured deals" - "Today's deals" is the one whose value is being new, and this
        is reachable from it, from the footer, and from the fifth column on every page.
        "Browse" - the Categories panel ends with "Browse everything".

        The arithmetic is why, and it is tight: at 390px there are ~358px of usable width.
        Today's deals (114) + Collections (107) + Categories (107) + Blog (50) comes to 378
        at the old .6rem padding and ~340 at .45rem, so the hiding AND the tighter padding
        are both load-bearing. A sixth top-level item pushes it to two rows again - safe,
        because the container wraps, but it costs ~35px of sticky header, so measure rather
        than assume. */
    .primary-nav[b-p6mkh30chl]  .nav-secondary { display: none; }

    .header-search[b-p6mkh30chl] { order: 5; flex: 1 1 130px; }
    .header-search input[b-p6mkh30chl] { padding: .35rem .75rem; }
}

/* Main */
.site-main[b-p6mkh30chl] {
    min-height: calc(100vh - 64px - 200px);
    padding: 1rem 0 3rem;
}

/* Footer link list */
[b-p6mkh30chl] .link-list { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: .9rem; }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8jtcl6lovt],
.components-reconnect-repeated-attempt-visible[b-8jtcl6lovt],
.components-reconnect-failed-visible[b-8jtcl6lovt],
.components-pause-visible[b-8jtcl6lovt],
.components-resume-failed-visible[b-8jtcl6lovt],
.components-rejoining-animation[b-8jtcl6lovt] {
    display: none;
}

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


#components-reconnect-modal[b-8jtcl6lovt] {
    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-8jtcl6lovt 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-8jtcl6lovt {
    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;
    }
}