@import '_content/WebAppComponents/WebAppComponents.rpdprsg4ut.bundle.scp.css';

/* /Components/Chatbot/Chatbot.razor.rz.scp.css */
/* The interactive panel fills the dock wrapper that ShowChatbotButton renders.
   Dock geometry/visibility lives in ShowChatbotButton.razor.css so its scoped
   attribute matches the [data-chat-dock] element. */
.floating-pane[b-f9yf407v8m] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    font-weight: 400;
}

/* Header doubles as the drag handle. The left padding reserves room for the launcher,
   which docks into the header's top-left as the assistant avatar (replacing a separate
   icon) while the panel is open. */
.chatbot-header[b-f9yf407v8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 3.5rem;
    padding: 0.75rem 0.75rem 0.75rem 3.4rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.chatbot-header:active[b-f9yf407v8m] {
    cursor: grabbing;
}

.chatbot-title[b-f9yf407v8m] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
}

.chatbot-close[b-f9yf407v8m] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease);
}

.chatbot-close:hover[b-f9yf407v8m] {
    background: var(--color-surface-3);
    color: var(--color-ink);
}

.chatbot-close:focus-visible[b-f9yf407v8m] {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

.chatbot-close svg[b-f9yf407v8m] {
    width: 1rem;
    height: 1rem;
}

/* Right-aligned header control cluster: size toggle + close. */
.chatbot-header-actions[b-f9yf407v8m] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

/* Wide/condensed size toggle. Shares the ghost icon-button language with close.
   Only meaningful on non-mobile, where the dock is a floating panel; hidden on
   the phone/tablet sheet layouts (see the max-width guard below). */
.chatbot-size[b-f9yf407v8m] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease);
}

.chatbot-size:hover[b-f9yf407v8m] {
    background: var(--color-surface-3);
    color: var(--color-ink);
}

.chatbot-size:focus-visible[b-f9yf407v8m] {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

.chatbot-size svg[b-f9yf407v8m] {
    width: 1rem;
    height: 1rem;
}

/* Show the outward glyph when condensed, the inward glyph when wide. */
.chatbot-size .chatbot-size-condense[b-f9yf407v8m] {
    display: none;
}

.chatbot-size[aria-pressed="true"] .chatbot-size-expand[b-f9yf407v8m] {
    display: none;
}

.chatbot-size[aria-pressed="true"] .chatbot-size-condense[b-f9yf407v8m] {
    display: block;
}

@media only screen and (max-width: 768px) {
    .chatbot-size[b-f9yf407v8m] {
        display: none;
    }
}

.chatbot-chat[b-f9yf407v8m] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--color-surface-2);
}

.chatbot-chat .message[b-f9yf407v8m] {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: break-spaces;
    overflow-x: clip;
}

.chatbot-chat .message-assistant[b-f9yf407v8m] {
    margin-right: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-bottom-left-radius: var(--radius-sm);
    color: var(--color-ink-2);
}

.chatbot-chat .message-user[b-f9yf407v8m] {
    margin-left: auto;
    background: var(--color-ink);
    border-bottom-right-radius: var(--radius-sm);
    color: #fff;
}

.chatbot-chat .message code[b-f9yf407v8m] {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85em;
    background: var(--color-surface-3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.chatbot-chat.is-centered[b-f9yf407v8m] {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.chatbot-notice[b-f9yf407v8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 20rem;
    margin: auto;
    padding: 1.5rem 1.35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.chatbot-notice-icon[b-f9yf407v8m] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.15rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-3);
    color: var(--color-ink-2);
}

.chatbot-notice-icon svg[b-f9yf407v8m] {
    width: 1.4rem;
    height: 1.4rem;
}

.chatbot-notice-title[b-f9yf407v8m] {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.chatbot-notice p[b-f9yf407v8m] {
    margin: 0;
}

.chatbot-chat[b-f9yf407v8m]  img {
    max-height: 10rem;
    border-radius: var(--radius-sm);
    margin-top: 0.35rem;
}

.thinking[b-f9yf407v8m] {
    margin: 0;
    padding-left: 0.35rem;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
    .thinking[b-f9yf407v8m] {
        animation: fade-in-and-out-b-f9yf407v8m 1.4s infinite;
    }
}

@keyframes fade-in-and-out-b-f9yf407v8m {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}

.chatbot-input[b-f9yf407v8m] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.75rem;
    border-top: 1px solid var(--color-line);
    background: var(--color-surface);
}

.chatbot-input textarea[b-f9yf407v8m] {
    flex: 1 1 auto;
    min-height: 2.75rem;
    max-height: 8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color var(--dur-1) var(--ease),
                box-shadow var(--dur-1) var(--ease);
}

.chatbot-input textarea[b-f9yf407v8m]::placeholder {
    color: var(--color-muted);
}

.chatbot-input textarea:focus[b-f9yf407v8m] {
    border-color: var(--color-ink);
    box-shadow: 0 0 0 3px var(--color-surface-3);
}

.chatbot-send[b-f9yf407v8m] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
}

.chatbot-send:hover:not(:disabled)[b-f9yf407v8m] {
    background: var(--color-ink-2);
}

.chatbot-send:active:not(:disabled)[b-f9yf407v8m] {
    transform: scale(0.94);
}

.chatbot-send:focus-visible[b-f9yf407v8m] {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

/* Intentional muted disabled state (not a faded ink circle that reads as broken). */
.chatbot-send:disabled[b-f9yf407v8m] {
    background: var(--color-surface-3);
    color: var(--color-muted);
    cursor: not-allowed;
}

.chatbot-send svg[b-f9yf407v8m] {
    width: 1.15rem;
    height: 1.15rem;
}

/* Resize handles: every edge and corner. The strips sit just inside the pane
   (which clips its overflow) so they overlap the border without being cut off.
   Corners sit above the edges so their diagonal cursor wins in the shared zone. */
.chatbot-grip[b-f9yf407v8m] {
    position: absolute;
    z-index: 4;
    touch-action: none;
}

.chatbot-grip-n[b-f9yf407v8m] { top: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.chatbot-grip-s[b-f9yf407v8m] { bottom: 0; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.chatbot-grip-e[b-f9yf407v8m] { right: 0; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.chatbot-grip-w[b-f9yf407v8m] { left: 0; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }

.chatbot-grip-nw[b-f9yf407v8m],
.chatbot-grip-ne[b-f9yf407v8m],
.chatbot-grip-sw[b-f9yf407v8m],
.chatbot-grip-se[b-f9yf407v8m] {
    width: 15px;
    height: 15px;
    z-index: 5;
}

.chatbot-grip-nw[b-f9yf407v8m] { top: 0; left: 0; cursor: nwse-resize; }
.chatbot-grip-ne[b-f9yf407v8m] { top: 0; right: 0; cursor: nesw-resize; }
.chatbot-grip-sw[b-f9yf407v8m] { bottom: 0; left: 0; cursor: nesw-resize; }
.chatbot-grip-se[b-f9yf407v8m] { bottom: 0; right: 0; cursor: nwse-resize; }

/* Visible grip mark, kept only on the bottom-right corner. */
.chatbot-grip-mark[b-f9yf407v8m] {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-line-strong);
    border-bottom: 2px solid var(--color-line-strong);
    border-bottom-right-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-send:active:not(:disabled)[b-f9yf407v8m] {
        transform: none;
    }
}

/* Small screens: the dock becomes a wide sheet (geometry in
   ShowChatbotButton.razor.css); disable drag/resize affordances on the pane. */
@media only screen and (max-width: 768px) {
    .chatbot-header[b-f9yf407v8m] {
        cursor: default;
    }

    .chatbot-grip[b-f9yf407v8m] {
        display: none;
    }
}
/* /Components/Chatbot/ShowChatbotButton.razor.rz.scp.css */
.show-chatbot[b-ypy1rra0gw] {
    /* Persistent floating launcher. It floats at the bottom-right corner while the
       page scrolls, then DOCKS onto the content/footer divider as the footer rises
       into view, so on tablet and desktop it never drifts down over the dark footer.
       js/chat-fab.js drives --fab-bottom from the footer's live top edge each frame;
       with no JS it simply floats at the corner gap. Right-aligned to the content
       column; the surface ring keeps it legible over the light content and the dark
       footer it straddles at rest. */
    position: fixed;
    bottom: var(--fab-bottom, 1.5rem);
    right: var(--fab-right, max(var(--page-pad, 1.5rem), calc((100vw - var(--content-max, 120rem)) / 2 + var(--page-pad, 1.5rem))));
    z-index: 50;
    display: grid;
    place-items: center;
    --orb: 3.5rem;
    width: var(--orb);
    height: var(--orb);
    padding: 0;
    border: none;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-ink, #141414);
    color: #ffffff;
    /* Surface-coloured ring keeps the FAB legible on any background,
       including the dark footer where a plain ink circle disappears. */
    box-shadow:
        0 0 0 4px var(--color-surface, #fff),
        0 14px 30px rgba(20, 20, 20, 0.30);
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--dur-2, 220ms) var(--ease, ease),
        box-shadow var(--dur-2, 220ms) var(--ease, ease);
}

/* While the panel opens or closes, the launcher TRAVELS between its floating corner and
   the panel's top-left, where it becomes the assistant avatar. Only that open/close flip
   eases: chat-fab.js adds .is-morphing just for the beat, so scroll- and drag-driven
   position updates stay 1:1 with no lag. */
.show-chatbot.is-morphing[b-ypy1rra0gw] {
    transition:
        bottom var(--dur-3, 360ms) cubic-bezier(0.16, 1, 0.3, 1),
        right var(--dur-3, 360ms) cubic-bezier(0.16, 1, 0.3, 1),
        width var(--dur-3, 360ms) cubic-bezier(0.16, 1, 0.3, 1),
        height var(--dur-3, 360ms) cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--dur-2, 220ms) var(--ease, ease),
        box-shadow var(--dur-2, 220ms) var(--ease, ease);
}

/* Docked as the panel's avatar: shrink to sit neatly inside the header's top-left (in
   place of a separate title icon), sit above the dock, soften the resting shadow, and
   drop the hover/press bounce so it reads as a fixed avatar rather than a button.
   chat-fab.js pins it centred in the header band; chat-eyes.js re-seats the eyes to the
   smaller radius. */
.show-chatbot[aria-expanded="true"][b-ypy1rra0gw] {
    --orb: 2.15rem;
    z-index: 60;
    box-shadow:
        0 0 0 3px var(--color-surface, #fff),
        0 6px 16px rgba(20, 20, 20, 0.22);
}

.show-chatbot[aria-expanded="true"]:hover[b-ypy1rra0gw],
.show-chatbot[aria-expanded="true"]:active[b-ypy1rra0gw] {
    transform: none;
}

/* Eyes ride the FAB like it is a sphere: chat-eyes.js projects each eye onto the orb
   surface and foreshortens it toward the limb (see that file). The plane below fills
   the button so the JS translate is measured from the orb centre; each .chatbot-eye
   is absolutely centred there and the inner .chatbot-pupil is the white slit that
   owns the blink, so gaze and blink never fight over one transform. */
.chatbot-eyes[b-ypy1rra0gw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chatbot-eye[b-ypy1rra0gw] {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Sized as fractions of the orb (--orb) so the eyes shrink with it when the launcher
       docks as the smaller avatar. At the 3.5rem rest size these resolve to the original
       0.62rem x 1rem box centred on the orb. */
    width: calc(var(--orb) * 0.1771);
    height: calc(var(--orb) * 0.2857);
    margin: calc(var(--orb) * -0.1429) 0 0 calc(var(--orb) * -0.0886);
    transform-origin: center;
    transition: width var(--dur-3, 360ms) var(--ease, ease),
                height var(--dur-3, 360ms) var(--ease, ease),
                margin var(--dur-3, 360ms) var(--ease, ease);
    will-change: transform;
}

/* No-JS / pre-hydration rest: hold the eyes apart. chat-eyes.js overrides this with
   the exact, foreshortened surface transform each frame. */
.chatbot-eye:first-child[b-ypy1rra0gw] {
    transform: translate(calc(var(--orb) * -0.14), calc(var(--orb) * -0.0286));
}

.chatbot-eye:last-child[b-ypy1rra0gw] {
    transform: translate(calc(var(--orb) * 0.14), calc(var(--orb) * -0.0286));
}

/* The pupil is a bespoke curved slit (an intentional character mark, so the inline
   SVG here is deliberate rather than a hand-rolled icon). A stroked curve with round
   caps keeps an even thickness and soft, non-pointy ends. It owns the blink: a
   vertical collapse to a curved point. */
.chatbot-pupil[b-ypy1rra0gw] {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 5.5;
    stroke-linecap: round;
    transform-origin: center;
    animation: chatbot-blink-b-ypy1rra0gw 5.6s var(--ease, ease) infinite;
}

.chatbot-eye:last-child .chatbot-pupil[b-ypy1rra0gw] {
    animation-delay: 120ms;
}

@keyframes chatbot-blink-b-ypy1rra0gw {
    0%, 91%, 100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.08);
    }
}

/* Excited on hover: a quick blink burst. Gated to true hover devices so a sticky
   :hover left after a tap on touch never swaps the calm blink for the burst — on mobile
   the eyes just blink normally. The gaze eases to centre in chat-eyes.js as the pointer
   settles on the button, so the eyes look straight ahead. */
@media (hover: hover) {
    .show-chatbot:hover .chatbot-pupil[b-ypy1rra0gw] {
        animation: chatbot-blink-excited-b-ypy1rra0gw 1.6s var(--ease, ease) infinite;
    }
}

@keyframes chatbot-blink-excited-b-ypy1rra0gw {
    0% {
        transform: scaleY(1);
    }

    8% {
        transform: scaleY(0.08);
    }

    16% {
        transform: scaleY(1.06);
    }

    24% {
        transform: scaleY(0.08);
    }

    32% {
        transform: scaleY(1.06);
    }

    40% {
        transform: scaleY(0.08);
    }

    48%, 100% {
        transform: scaleY(1.06);
    }
}

/* Calm, half-closed rest while the assistant panel is open (chat-eyes.js rests the
   gaze at centre when aria-expanded is true). */
.show-chatbot[aria-expanded="true"] .chatbot-pupil[b-ypy1rra0gw] {
    animation: none;
    transform: scaleY(0.55);
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-pupil[b-ypy1rra0gw] {
        animation: none;
        transform: none;
    }
}

.show-chatbot:hover[b-ypy1rra0gw] {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 0 0 4px var(--color-surface, #fff),
        0 20px 44px rgba(20, 20, 20, 0.38);
}

.show-chatbot:active[b-ypy1rra0gw] {
    transform: translateY(0) scale(0.97);
}

.show-chatbot:focus-visible[b-ypy1rra0gw] {
    outline: none;
    box-shadow:
        0 0 0 3px var(--color-surface, #fff),
        0 0 0 6px var(--color-ink, #141414),
        0 14px 30px rgba(20, 20, 20, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .show-chatbot[b-ypy1rra0gw] {
        transition: box-shadow var(--dur-1, 140ms) linear;
    }

    .show-chatbot:hover[b-ypy1rra0gw],
    .show-chatbot:active[b-ypy1rra0gw] {
        transform: none;
    }
}

/* Dock wrapper for the assistant panel. Owns fixed positioning, default size and
   visibility; chat-dock.js toggles .is-open and manages drag/resize geometry.
   These rules must live here (not in Chatbot.razor.css) because the
   [data-chat-dock] element is part of THIS component's markup. */
.chatbot-dock[b-ypy1rra0gw] {
    position: fixed;
    right: clamp(1.25rem, 4vw, 2rem);
    bottom: calc(clamp(1.25rem, 4vw, 2rem) + 4.25rem);
    width: 24rem;
    height: 34rem;
    min-width: 20rem;
    min-height: 24rem;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    z-index: 55;
    display: none;
}

.chatbot-dock.is-open[b-ypy1rra0gw] {
    display: block;
}

/* Wide preset (non-mobile only): a roomier panel for longer conversations.
   chat-dock.js toggles .is-wide from the header size button and clears any
   free-form drag/resize geometry so the dock snaps cleanly to this preset. */
@media only screen and (min-width: 769px) {
    .chatbot-dock.is-wide[b-ypy1rra0gw] {
        width: min(40rem, calc(100vw - 3rem));
        height: min(44rem, calc(100dvh - 4rem));
    }
}

/* Ease the width/height change from the toggle only (a discrete user action).
   The .is-sizing class is added for the length of the transition and removed
   after, so free-form drag/resize (which mutates the same properties every
   frame) stays instant. Never on the phone sheet, never under reduced motion. */
@media only screen and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .chatbot-dock.is-sizing[b-ypy1rra0gw] {
        transition: width var(--dur-2, 220ms) var(--ease, ease),
                    height var(--dur-2, 220ms) var(--ease, ease);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .chatbot-dock.is-open[b-ypy1rra0gw] {
        animation: chatbot-in-b-ypy1rra0gw var(--dur-3, 360ms) var(--ease, ease);
    }
}

@keyframes chatbot-in-b-ypy1rra0gw {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Tablets and large phones: widen the dock to use most of the viewport rather
   than a narrow corner panel, while still anchored to the bottom-right. */
@media only screen and (max-width: 768px) {
    .chatbot-dock[b-ypy1rra0gw] {
        right: clamp(0.75rem, 3vw, 1.25rem);
        left: auto;
        top: auto;
        width: min(30rem, calc(100vw - 1.75rem));
        height: min(38rem, calc(100dvh - 5rem));
        max-width: none;
    }
}

/* Phones: full-width bottom sheet. */
@media only screen and (max-width: 480px) {
    .chatbot-dock[b-ypy1rra0gw] {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        height: min(34rem, 82dvh);
    }
}
/* /Components/Layout/CartMenu.razor.rz.scp.css */
/* Cart affordance.
   When the bag has items it becomes a solid ink pill with the count set inline
   next to the glyph, so the number never overlaps the icon the way the old
   corner badge did. Empty, it stays a ghost icon-button that matches the account
   control. The filled pill also reads as the primary commerce action in the bar. */
.cart-button[b-nlhk6krequ] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.75rem;
    padding: 0 0.95rem 0 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    border: 1px solid var(--color-ink);
    color: #fff;
    text-decoration: none;
    transition: background-color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
}

.cart-button:hover[b-nlhk6krequ] {
    background: var(--color-ink-2);
    border-color: var(--color-ink-2);
}

.cart-button:active[b-nlhk6krequ] {
    transform: translateY(1px);
}

.cart-button:focus-visible[b-nlhk6krequ] {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.cart-button-icon[b-nlhk6krequ] {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    /* Recolour the black stroke SVG to white for the dark pill. */
    filter: brightness(0) invert(1);
}

.cart-button-count[b-nlhk6krequ] {
    display: inline-block;
    min-width: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* The count element is re-keyed on quantity change, so this replays as a small
   confirmation each time the bag total changes. Motivated: state-change feedback. */
@media (prefers-reduced-motion: no-preference) {
    .cart-button-count[b-nlhk6krequ] {
        animation: cart-count-bump-b-nlhk6krequ var(--dur-3) var(--ease);
    }

    @keyframes cart-count-bump-b-nlhk6krequ {
        0% {
            transform: scale(0.55);
            opacity: 0;
        }

        60% {
            transform: scale(1.14);
            opacity: 1;
        }

        100% {
            transform: scale(1);
        }
    }
}
/* /Components/Layout/FooterBar.razor.rz.scp.css */
.eshop-footer[b-26bscbdcoa] {
  margin-top: 5rem;
  background-color: var(--color-ink);
  width: 100%;
}

.eshop-footer-content[b-26bscbdcoa] {
  max-width: var(--content-max);
  margin: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--page-pad) 2rem;
  color: #fff;
}

.eshop-footer-main[b-26bscbdcoa] {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Brand column */
.eshop-footer-brand-col[b-26bscbdcoa] {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 24rem;
}

.eshop-footer-brand[b-26bscbdcoa] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.eshop-footer .logo-footer[b-26bscbdcoa] {
  width: 116px;
  height: auto;
}

.eshop-footer-tagline[b-26bscbdcoa] {
  margin: 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.eshop-footer-social[b-26bscbdcoa] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}

.eshop-footer-social a[b-26bscbdcoa] {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.eshop-footer-social svg[b-26bscbdcoa] {
  width: 1.05rem;
  height: 1.05rem;
}

.eshop-footer-social a:hover[b-26bscbdcoa] {
  color: var(--color-ink);
  background-color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

.eshop-footer-social a:focus-visible[b-26bscbdcoa] {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-ink), 0 0 0 5px rgba(255, 255, 255, 0.75);
}

/* Link columns */
.eshop-footer-col h2[b-26bscbdcoa] {
  margin: 0 0 1.1rem;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eshop-footer-col ul[b-26bscbdcoa] {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eshop-footer-col a[b-26bscbdcoa] {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}

.eshop-footer-col a:hover[b-26bscbdcoa] {
  color: #fff;
}

/* Bottom bar */
.eshop-footer-bottom[b-26bscbdcoa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
}

.eshop-footer-copy[b-26bscbdcoa] {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-xs);
}

.eshop-footer-legal[b-26bscbdcoa] {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eshop-footer-legal a[b-26bscbdcoa] {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-xs);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}

.eshop-footer-legal a:hover[b-26bscbdcoa] {
  color: #fff;
}

/* Placeholder entries are not wired to a route yet; without an href they do not
   navigate, so keep the default cursor instead of implying a click target. */
.eshop-footer-social a:not([href])[b-26bscbdcoa],
.eshop-footer-col a:not([href])[b-26bscbdcoa],
.eshop-footer-legal a:not([href])[b-26bscbdcoa] {
  cursor: default;
}

@media only screen and (max-width: 900px) {
  .eshop-footer-main[b-26bscbdcoa] {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .eshop-footer-brand-col[b-26bscbdcoa] {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media only screen and (max-width: 560px) {
  .eshop-footer-main[b-26bscbdcoa] {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .eshop-footer-bottom[b-26bscbdcoa] {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eshop-footer-social a[b-26bscbdcoa] {
    transition: none;
  }

  .eshop-footer-social a:hover[b-26bscbdcoa] {
    transform: none;
  }
}
/* /Components/Layout/HeaderBar.razor.rz.scp.css */
/* ==========================================================================
   Sticky top bar
   ========================================================================== */
.eshop-topbar[b-lxozenkqb7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-line);
}

.eshop-topbar-inner[b-lxozenkqb7] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--content-max);
    margin: 0 auto;
    height: 4.25rem;
    padding: 0 var(--page-pad);
}

.eshop-brand[b-lxozenkqb7] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.eshop-brand img[b-lxozenkqb7] {
    display: block;
    height: 1.7rem;
    width: auto;
}

.eshop-topnav[b-lxozenkqb7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eshop-topnav-link[b-lxozenkqb7] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.eshop-topnav-link:hover[b-lxozenkqb7] {
    background: var(--color-surface-2);
    color: var(--color-ink);
}

.eshop-topnav-link.is-current[b-lxozenkqb7] {
    background: var(--color-surface-2);
    color: var(--color-ink);
    font-weight: 700;
}

.eshop-topbar-actions[b-lxozenkqb7] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Subtle elevation as the page scrolls under the bar (enhancement only). */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .eshop-topbar[b-lxozenkqb7] {
            animation: eshop-topbar-elevate-b-lxozenkqb7 linear both;
            animation-timeline: scroll();
            animation-range: 0 6rem;
        }

        @keyframes eshop-topbar-elevate-b-lxozenkqb7 {
            to {
                background: rgba(255, 255, 255, 0.94);
                box-shadow: var(--shadow-sm);
            }
        }
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.eshop-hero[b-lxozenkqb7] {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto 2.5rem;
    min-height: clamp(17rem, 28vw, 23rem);
}

.eshop-hero.is-home[b-lxozenkqb7] {
    min-height: clamp(24rem, 44vw, 34rem);
}

/* Product detail: a shorter banner so the shot and buy box sit near the top of the
   viewport instead of below a tall hero. */
.eshop-hero.is-compact[b-lxozenkqb7] {
    min-height: clamp(9rem, 15vw, 12.5rem);
    margin-bottom: 1.5rem;
}

.eshop-hero-media[b-lxozenkqb7] {
    position: absolute;
    inset: 0;
}

.eshop-hero-media img[b-lxozenkqb7] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Scrim + edge fades. The bottom-up white gradient keeps the dark title legible;
   the added left/right and gentle bottom fades melt the full-bleed photo into the
   page so it never ends on a hard rectangle. Fades to the surface colour, so it
   reads as the photograph dissolving into the page rather than a boxed banner. */
.eshop-hero[b-lxozenkqb7]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            #fff 0,
            rgba(255, 255, 255, 0) 7%,
            rgba(255, 255, 255, 0) 93%,
            #fff 100%),
        linear-gradient(to top,
            #fff 0,
            rgba(255, 255, 255, 0) 22%),
        linear-gradient(0deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0) 44%);
    pointer-events: none;
}

.eshop-hero-content[b-lxozenkqb7] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) clamp(1.5rem, 3vw, 3rem);
}

.eshop-hero-intro[b-lxozenkqb7] {
    max-width: 48rem;
}

.eshop-hero-intro h1[b-lxozenkqb7] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-hero);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;
}

.eshop-hero-intro p[b-lxozenkqb7] {
    margin: 0.6rem 0 0;
    color: var(--color-ink-2);
    font-size: clamp(1.125rem, 2.2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
}

.eshop-hero-intro p:empty[b-lxozenkqb7] {
    display: none;
}

/* Subtle scroll parallax on the home hero: the photograph drifts slowly while
   the intro copy lifts and fades faster, so "Ready for a new adventure?" reads
   with depth as you scroll toward the products. Native scroll-driven animation
   (transform/opacity only); collapses to a static hero without support or under
   reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .eshop-hero.is-home .eshop-hero-media img[b-lxozenkqb7] {
            animation: eshop-hero-zoom-b-lxozenkqb7 linear both;
            animation-timeline: scroll(root);
            animation-range: 0 34rem;
            will-change: transform;
        }

        @keyframes eshop-hero-zoom-b-lxozenkqb7 {
            from {
                transform: scale(1.12) translateY(0);
            }

            to {
                transform: scale(1.2) translateY(3%);
            }
        }

        .eshop-hero.is-home .eshop-hero-intro[b-lxozenkqb7] {
            animation: eshop-hero-lift-b-lxozenkqb7 linear both;
            animation-timeline: scroll(root);
            animation-range: 0 24rem;
            will-change: transform, opacity;
        }

        @keyframes eshop-hero-lift-b-lxozenkqb7 {
            from {
                transform: translateY(0);
                opacity: 1;
            }

            to {
                transform: translateY(-2rem);
                opacity: 0.35;
            }
        }
    }
}

@media only screen and (max-width: 560px) {
    .eshop-topbar-inner[b-lxozenkqb7] {
        height: 3.75rem;
        gap: 0.5rem;
    }

    .eshop-brand img[b-lxozenkqb7] {
        height: 1.45rem;
    }

    .eshop-topnav[b-lxozenkqb7] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-pui3qmsk44] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-pui3qmsk44] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-yymsmxsc7f] {
    position: relative;
    display: inline-flex;
}

.user-menu-panel[b-yymsmxsc7f] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    padding: 0.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                visibility var(--dur-2);
    z-index: 200;
}

/* Revealed on hover and on keyboard focus (focus-within keeps it accessible without JS). */
.user-menu:hover .user-menu-panel[b-yymsmxsc7f],
.user-menu:focus-within .user-menu-panel[b-yymsmxsc7f] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-name[b-yymsmxsc7f] {
    margin: 0 0 0.35rem;
    padding: 0.5rem 0.65rem;
    max-width: 14rem;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-item[b-yymsmxsc7f] {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease);
}

.user-menu-item:hover[b-yymsmxsc7f] {
    background: var(--color-surface-2);
}

.user-menu-item button[b-yymsmxsc7f] {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* /Components/Pages/Admin/CatalogVisibility.razor.rz.scp.css */
.catalog-admin[b-sfomg01n2x] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.catalog-admin-table[b-sfomg01n2x] {
    width: 100%;
    max-width: 64rem;
    border-collapse: collapse;
}

.catalog-admin-table th[b-sfomg01n2x],
.catalog-admin-table td[b-sfomg01n2x] {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: middle;
}

.catalog-admin-table th[b-sfomg01n2x] {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.catalog-admin-table .price[b-sfomg01n2x] {
    text-align: right;
}

.catalog-admin-table a[b-sfomg01n2x] {
    color: var(--color-ink);
}

.catalog-admin-table tr.is-disabled td[b-sfomg01n2x] {
    color: var(--color-muted);
}

.catalog-admin-table form[b-sfomg01n2x] {
    margin: 0;
}

.status[b-sfomg01n2x] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
}

.status.enabled[b-sfomg01n2x] {
    background: var(--color-success-tint);
    color: var(--color-success);
}

.status.disabled[b-sfomg01n2x] {
    background: var(--color-danger-tint);
    color: var(--color-danger-strong);
}

.visually-hidden[b-sfomg01n2x] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.catalog-admin-pager[b-sfomg01n2x] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.5rem;
}
/* /Components/Pages/Cart/CartPage.razor.rz.scp.css */
.cart[b-hye5arey4f] {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 4rem);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.cart-empty[b-hye5arey4f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    max-width: 28rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 2.5rem 1.5rem 3rem;
}

.cart-empty-icon[b-hye5arey4f] {
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-muted);
}

.cart-empty-icon svg[b-hye5arey4f] {
    width: 2.1rem;
    height: 2.1rem;
}

.cart-empty h2[b-hye5arey4f] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cart-empty p[b-hye5arey4f] {
    margin: 0;
    max-width: 34ch;
    color: var(--color-muted);
    font-size: var(--text-base);
    line-height: 1.55;
}

.cart-empty .button[b-hye5arey4f] {
    align-self: center;
    margin-top: 0.85rem;
}

.cart .cart-items[b-hye5arey4f] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 1 0 0;
    min-width: 0;
}

.cart-items .cart-item-header[b-hye5arey4f] {
    display: flex;
    padding: 0 0 0.75rem;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-items .cart-item[b-hye5arey4f] {
    display: flex;
    padding: 1.25rem 0;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--color-line);
}

.cart-items .cart-item .catalog-item-info[b-hye5arey4f] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-basis: 60%;
}

.cart-items .cart-item-header .catalog-item-info[b-hye5arey4f] {
    flex-basis: 60%;
}

.cart-items .cart-item .catalog-item-quantity[b-hye5arey4f],
.cart-items .cart-item-header .catalog-item-quantity[b-hye5arey4f] {
    flex-grow: 1;
}

.cart-items .cart-item .catalog-item-total[b-hye5arey4f] {
    font-weight: 700;
    color: var(--color-ink);
}

.cart-items .cart-item .catalog-item-quantity .cart-quantity[b-hye5arey4f] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

/* Segmented [-] [number] [+] stepper. Custom buttons replace the native number
   spinners, so the increment controls are obvious and use cursor: pointer. */
.quantity-stepper[b-hye5arey4f] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.quantity-stepper:focus-within[b-hye5arey4f] {
    border-color: var(--color-ink);
    box-shadow: var(--ring);
}

.quantity-step[b-hye5arey4f] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.quantity-step svg[b-hye5arey4f] {
    width: 1.05rem;
    height: 1.05rem;
}

.quantity-step:hover[b-hye5arey4f] {
    background: var(--color-surface-3);
}

.quantity-step:disabled[b-hye5arey4f] {
    color: var(--color-line-strong);
    background: transparent;
    cursor: not-allowed;
}

.quantity-value[b-hye5arey4f] {
    width: 2.75rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-inline: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.quantity-value[b-hye5arey4f]::-webkit-outer-spin-button,
.quantity-value[b-hye5arey4f]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-value:focus[b-hye5arey4f] {
    outline: none;
}

/* Visually hidden submitter that cart-quantity.js triggers to commit a typed value. */
.cart-quantity-apply[b-hye5arey4f] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Low-friction remove control: icon + label, destructive hover from the status token. */
.cart-remove[b-hye5arey4f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.cart-remove svg[b-hye5arey4f] {
    width: 1.05rem;
    height: 1.05rem;
}

.cart-remove:hover[b-hye5arey4f] {
    background: var(--color-danger-tint);
    color: var(--color-danger);
}

.cart-remove:focus-visible[b-hye5arey4f] {
    outline: 2px solid var(--color-danger);
    outline-offset: 2px;
}

/* Framed product thumbnail, matching the catalog card language. */
.cart-items .cart-item .catalog-item-info img[b-hye5arey4f] {
    width: 5rem;
    height: 5rem;
    padding: 0.4rem;
    object-fit: contain;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    flex-shrink: 0;
}

.catalog-item-content .name[b-hye5arey4f] {
    margin: 0 0 0.25rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.35;
}

.catalog-item-content .price[b-hye5arey4f] {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

/* ==========================================================================
   Summary (sticky card on desktop)
   ========================================================================== */
.cart-summary[b-hye5arey4f] {
    flex-shrink: 0;
    width: 22rem;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--topbar-h) + 1.5rem);
}

.cart-summary-container[b-hye5arey4f] {
    display: flex;
    padding: 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.cart-summary-header[b-hye5arey4f] {
    display: flex;
    padding-bottom: 0.9rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-line);
    gap: 0.5rem;
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 700;
}

.cart-summary-header img[b-hye5arey4f] {
    width: 1.35rem;
    height: 1.35rem;
}

.cart-summary-total[b-hye5arey4f] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--color-ink);
    font-weight: 700;
    font-size: var(--text-lg);
}

.cart-summary-total > div:last-child[b-hye5arey4f] {
    font-size: var(--text-xl);
}

.cart-summary .button-primary[b-hye5arey4f] {
    align-self: stretch;
}

.cart-summary .cart-summary-link[b-hye5arey4f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-ink-2);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color var(--dur-1) var(--ease);
}

.cart-summary .cart-summary-link:hover[b-hye5arey4f] {
    color: var(--color-ink);
}

.cart-summary .cart-summary-link img[b-hye5arey4f] {
    width: 1rem;
    height: 1rem;
}

.cart-summary .cart-summary-link p[b-hye5arey4f] {
    margin: 0;
}

.cart-summary .filter-badge[b-hye5arey4f] {
    background: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    border-radius: var(--radius-pill);
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 0.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

@media only screen and (max-width: 1024px) {
    .cart[b-hye5arey4f] {
        gap: 1.75rem;
        flex-direction: column-reverse;
    }

    .cart-summary[b-hye5arey4f] {
        width: 100%;
        position: static;
    }
}

@media only screen and (max-width: 480px) {
    .cart-item-header div[b-hye5arey4f] {
        display: none;
    }

    .cart-items .cart-item[b-hye5arey4f] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .cart-items .cart-item .catalog-item-info[b-hye5arey4f] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Catalog/Catalog.razor.rz.scp.css */
.catalog[b-rh6ttyu1z4] {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.catalog-results[b-rh6ttyu1z4] {
    flex-grow: 1;
    min-width: 0;
}

.catalog-toolbar[b-rh6ttyu1z4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0;
    position: relative;
    z-index: 3;
}

.catalog-count[b-rh6ttyu1z4] {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.catalog-sort[b-rh6ttyu1z4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.catalog-sort-label[b-rh6ttyu1z4] {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.catalog-sort-field[b-rh6ttyu1z4] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.catalog-sort-trigger[b-rh6ttyu1z4] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 8.75rem;
    margin: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.catalog-sort-value[b-rh6ttyu1z4] {
    flex: 1 1 auto;
    white-space: nowrap;
}

.catalog-sort-trigger:hover[b-rh6ttyu1z4] {
    border-color: var(--color-ink);
}

.catalog-sort-trigger:focus-visible[b-rh6ttyu1z4] {
    outline: none;
    border-color: var(--focus);
    box-shadow: var(--ring);
}

.catalog-sort-caret[b-rh6ttyu1z4] {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--dur-2) var(--ease);
}

.catalog-sort.is-open .catalog-sort-caret[b-rh6ttyu1z4] {
    transform: rotate(180deg);
}

.catalog-sort-listbox[b-rh6ttyu1z4] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 40;
    min-width: 100%;
    width: max-content;
    max-width: 17rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: catalog-sort-pop-b-rh6ttyu1z4 var(--dur-1) var(--ease);
}

.catalog-sort-listbox[hidden][b-rh6ttyu1z4] {
    display: none;
}

.catalog-sort-option[b-rh6ttyu1z4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    cursor: pointer;
}

.catalog-sort-option[b-rh6ttyu1z4]::after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    opacity: 0;
    background: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3.5 3.5L13 5'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3.5 3.5L13 5'/%3E%3C/svg%3E");
}

.catalog-sort-option[aria-selected="true"][b-rh6ttyu1z4]::after {
    opacity: 1;
}

.catalog-sort-option:hover[b-rh6ttyu1z4],
.catalog-sort-option.is-active[b-rh6ttyu1z4] {
    background: var(--color-surface-2);
}

@keyframes catalog-sort-pop-b-rh6ttyu1z4 {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-sort-listbox[b-rh6ttyu1z4] {
        animation: none;
    }

    .catalog-sort-caret[b-rh6ttyu1z4] {
        transition: none;
    }
}

@media (max-width: 32rem) {
    .catalog-sort-label[b-rh6ttyu1z4] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

.catalog-items[b-rh6ttyu1z4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}

/* ==========================================================================
   Empty state (no results for the active filters)
   ========================================================================== */
.catalog-empty[b-rh6ttyu1z4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    max-width: 26rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 2.5rem 1.5rem;
}

.catalog-empty-icon[b-rh6ttyu1z4] {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-muted);
}

.catalog-empty-icon svg[b-rh6ttyu1z4] {
    width: 2rem;
    height: 2rem;
}

.catalog-empty h2[b-rh6ttyu1z4] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
}

.catalog-empty p[b-rh6ttyu1z4] {
    margin: 0 0 0.75rem;
    color: var(--color-muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* ==========================================================================
   Loading skeleton (mirrors the results grid shape)
   ========================================================================== */
.catalog-count-skeleton[b-rh6ttyu1z4] {
    display: block;
    width: 5.5rem;
    height: 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
}

.catalog-card-skeleton[b-rh6ttyu1z4] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.skeleton-media[b-rh6ttyu1z4] {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.skeleton-line[b-rh6ttyu1z4] {
    height: 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
}

.skeleton-line.short[b-rh6ttyu1z4] {
    width: 40%;
}

.catalog-count-skeleton[b-rh6ttyu1z4],
.skeleton-media[b-rh6ttyu1z4],
.skeleton-line[b-rh6ttyu1z4] {
    position: relative;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .catalog-count-skeleton[b-rh6ttyu1z4]::after,
    .skeleton-media[b-rh6ttyu1z4]::after,
    .skeleton-line[b-rh6ttyu1z4]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
        animation: catalog-skeleton-shimmer-b-rh6ttyu1z4 1.4s var(--ease) infinite;
    }
}

@keyframes catalog-skeleton-shimmer-b-rh6ttyu1z4 {
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.catalog-pagination[b-rh6ttyu1z4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 3rem;
}

.page-numbers[b-rh6ttyu1z4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-number[b-rh6ttyu1z4],
.page-nav[b-rh6ttyu1z4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-1) var(--ease),
                background-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease);
}

.page-number:hover[b-rh6ttyu1z4],
.page-nav:hover[b-rh6ttyu1z4] {
    border-color: var(--color-ink);
}

.page-number.active-page[b-rh6ttyu1z4] {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-surface);
    cursor: default;
}

.page-nav.is-disabled[b-rh6ttyu1z4] {
    color: var(--color-muted);
    border-color: var(--color-line);
    background: var(--color-surface-2);
    cursor: not-allowed;
}

.page-nav img[b-rh6ttyu1z4],
.page-number img[b-rh6ttyu1z4] {
    width: 1rem;
    height: 1rem;
}

.page-nav img.flip[b-rh6ttyu1z4] {
    transform: scaleX(-1);
}

.page-ellipsis[b-rh6ttyu1z4] {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 0.25rem;
    color: var(--color-muted);
}

/* Compact "current / total" shown only on phones, in place of the numbered tokens. */
.page-status[b-rh6ttyu1z4] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media only screen and (max-width: 1024px) {
    .catalog[b-rh6ttyu1z4] {
        flex-direction: column;
    }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
    .catalog-items[b-rh6ttyu1z4] {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
}

@media only screen and (max-width: 480px) {
    .catalog-items[b-rh6ttyu1z4] {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    /* Keep pagination to a single row: swap the numbered tokens for a compact
       "current / total" indicator flanked by Prev / Next, so it never wraps. */
    .catalog-pagination[b-rh6ttyu1z4] {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .page-numbers[b-rh6ttyu1z4] {
        display: none;
    }

    .page-status[b-rh6ttyu1z4] {
        display: inline-flex;
    }
}
/* /Components/Pages/Checkout/Checkout.razor.rz.scp.css */
.checkout[b-ekak8lzpb0] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.checkout .form[b-ekak8lzpb0] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 44rem;
}

.checkout .form-section[b-ekak8lzpb0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-self: stretch;
}

.checkout h2[b-ekak8lzpb0] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid var(--color-line);
    width: 100%;
    padding-bottom: 0.75rem;
}

.checkout label[b-ekak8lzpb0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.checkout[b-ekak8lzpb0]  input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.checkout[b-ekak8lzpb0]  input:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: var(--ring);
}

.checkout[b-ekak8lzpb0]  .validation-message {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-danger);
    font-size: var(--text-xs);
    font-weight: 600;
}

.form-group[b-ekak8lzpb0] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    align-self: stretch;
}

.form-group .form-group-item[b-ekak8lzpb0] {
    flex: 1 0 0;
}

.checkout .form-buttons[b-ekak8lzpb0] {
    display: flex;
    padding-top: 1.5rem;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
    border-top: 1px solid var(--color-line);
    max-width: 44rem;
}

.checkout .form-buttons .button img[b-ekak8lzpb0] {
    width: 1.1rem;
    height: 1.1rem;
}

@media only screen and (max-width: 640px) {
    .form-group[b-ekak8lzpb0] {
        flex-direction: column;
        gap: 1.25rem;
    }

    .checkout .form-buttons[b-ekak8lzpb0] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* /Components/Pages/Item/ItemPage.razor.rz.scp.css */
.item-page[b-day7kai9gc] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.item-back[b-day7kai9gc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.item-back:hover[b-day7kai9gc] {
    color: var(--color-ink);
}

.item-back img[b-day7kai9gc] {
    width: 1.1rem;
    height: 1.1rem;
}

.item-details[b-day7kai9gc] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
}

/* Framed product shot, matching the catalog card language. */
.item-media[b-day7kai9gc] {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    overflow: hidden;
}

.item-media-trigger[b-day7kai9gc] {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}

.item-media-img[b-day7kai9gc] {
    width: 100%;
    max-width: 26rem;
    max-height: 24rem;
    height: auto;
    object-fit: contain;
}

/* Affordance badge so the zoom is discoverable; recedes while magnifying. */
.item-zoom-hint[b-day7kai9gc] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--color-line);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-ink);
    opacity: 0.85;
    transition: opacity var(--dur-2, 220ms) var(--ease, ease);
}

.item-zoom-hint svg[b-day7kai9gc] {
    width: 1.05rem;
    height: 1.05rem;
}

.item-buy[b-day7kai9gc] {
    position: sticky;
    top: calc(var(--topbar-h) + 1.5rem);
    align-self: start;
}

.item-desc[b-day7kai9gc] {
    margin: 0;
    color: var(--color-ink-2);
    font-size: var(--text-lg);
    line-height: 1.65;
}

.item-meta[b-day7kai9gc] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.item-meta dt[b-day7kai9gc] {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.item-meta dd[b-day7kai9gc] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.add-to-cart[b-day7kai9gc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
}

.price[b-day7kai9gc] {
    color: var(--color-ink);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.add-to-cart .button[b-day7kai9gc] {
    align-self: stretch;
}

.add-to-cart .button svg[b-day7kai9gc] {
    width: 1.35rem;
    height: 1.35rem;
}

.in-cart[b-day7kai9gc] {
    margin: 1.1rem 0 0;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.in-cart a[b-day7kai9gc] {
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.item-notfound[b-day7kai9gc] {
    color: var(--color-ink-2);
    font-size: var(--text-lg);
}

@media only screen and (max-width: 1024px) {
    .item-details[b-day7kai9gc] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .item-buy[b-day7kai9gc] {
        position: static;
    }
}

/* ==========================================================================
   Lightbox (native <dialog>, opened from the product shot)
   ========================================================================== */
.item-lightbox[b-day7kai9gc] {
    width: auto;
    max-width: 92vw;
    max-height: 92vh;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    overflow: visible;
}

.item-lightbox[b-day7kai9gc]::backdrop {
    background: rgba(20, 20, 20, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.item-lightbox img[b-day7kai9gc] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-line);
}

.item-lightbox-close[b-day7kai9gc] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-ink, #141414);
    color: #ffffff;
    box-shadow: 0 0 0 3px var(--color-surface, #fff), var(--shadow-md, 0 14px 30px rgba(20, 20, 20, 0.3));
    cursor: pointer;
    transition: transform var(--dur-2, 220ms) var(--ease, ease);
}

.item-lightbox-close svg[b-day7kai9gc] {
    width: 1.25rem;
    height: 1.25rem;
}

.item-lightbox-close:hover[b-day7kai9gc] {
    transform: scale(1.06);
}

.item-lightbox-close:active[b-day7kai9gc] {
    transform: scale(0.96);
}

.item-lightbox-close:focus-visible[b-day7kai9gc] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-surface, #fff), 0 0 0 6px var(--color-ink, #141414);
}

@media (prefers-reduced-motion: no-preference) {
    .item-lightbox[open][b-day7kai9gc] {
        animation: item-lightbox-in-b-day7kai9gc var(--dur-3, 360ms) var(--ease, ease);
    }

    @keyframes item-lightbox-in-b-day7kai9gc {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .item-lightbox-close:hover[b-day7kai9gc],
    .item-lightbox-close:active[b-day7kai9gc] {
        transform: none;
    }
}

@media only screen and (max-width: 560px) {
    .item-lightbox-close[b-day7kai9gc] {
        top: 0.5rem;
        right: 0.5rem;
    }
}
/* /Components/Pages/User/Orders.razor.rz.scp.css */
.orders[b-tkhhwqlbn2] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--page-pad) 4rem;
}

.orders > p[b-tkhhwqlbn2] {
    color: var(--color-ink-2);
    font-size: var(--text-lg);
}

/* ==========================================================================
   Empty state (no orders yet)
   ========================================================================== */
.orders-empty[b-tkhhwqlbn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    max-width: 28rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 2.5rem 1.5rem 3rem;
}

.orders-empty-icon[b-tkhhwqlbn2] {
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-muted);
}

.orders-empty-icon svg[b-tkhhwqlbn2] {
    width: 2.1rem;
    height: 2.1rem;
}

.orders-empty h2[b-tkhhwqlbn2] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.orders-empty p[b-tkhhwqlbn2] {
    margin: 0;
    max-width: 34ch;
    color: var(--color-muted);
    font-size: var(--text-base);
    line-height: 1.55;
}

.orders-empty .button[b-tkhhwqlbn2] {
    align-self: center;
    margin-top: 0.85rem;
}

.orders-list[b-tkhhwqlbn2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 56rem;
}

.orders-item[b-tkhhwqlbn2] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    align-self: stretch;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--color-line);
}

.orders-item > div[b-tkhhwqlbn2] {
    flex: 1 0 0;
}

.orders-header[b-tkhhwqlbn2] {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0;
    padding-bottom: 0.75rem;
}

.total-header[b-tkhhwqlbn2] {
    text-align: right;
}

.order-number[b-tkhhwqlbn2] {
    font-weight: 700;
    color: var(--color-ink);
}

.order-date[b-tkhhwqlbn2] {
    color: var(--color-ink-2);
}

.order-total[b-tkhhwqlbn2] {
    color: var(--color-ink);
    text-align: right;
    font-size: var(--text-base);
    font-weight: 700;
}

.order-status .status[b-tkhhwqlbn2] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line-strong);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.85rem;
}

.order-status .status.cancelled[b-tkhhwqlbn2] {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-tint);
}

.order-status .status.paid[b-tkhhwqlbn2] {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-tint);
}

@media only screen and (max-width: 480px) {
    .orders-item[b-tkhhwqlbn2] {
        gap: 1rem;
        flex-wrap: wrap;
    }
}