/* /Components/Layout/MainLayout.razor.rz.scp.css */
footer[b-379i9kt8gu] {
    background-color: #000000;
    border-top: var(--thick-border);
    padding: 4rem 0 2rem;
    margin-top: 5rem;
    /* Positioning context + clip for the Halloween web in the bottom-right corner (below). */
    position: relative;
    overflow: hidden;
}

/* Halloween cobweb in the footer's bottom-right corner — i.e. the bottom-right of the PAGE. It's
   absolutely positioned inside the footer, so unlike the top-left web (fixed to the screen) it
   scrolls with the page and only comes into view when you reach the bottom. Hidden outside the
   Halloween theme. */
.halloween-footer-web[b-379i9kt8gu] {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(100px, 15vw, 170px);
    height: clamp(100px, 15vw, 170px);
    transform: rotate(180deg);
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(255, 122, 0, 0.3));
    pointer-events: none;
}

:root[data-theme="halloween"] .halloween-footer-web[b-379i9kt8gu] {
    display: block;
}
.footer-grid[b-379i9kt8gu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 768px) {
    .footer-grid[b-379i9kt8gu] {
        grid-template-columns: 2fr 1fr 1fr;
    }
}
.footer-logo[b-379i9kt8gu] {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5rem;
    color: var(--neon-green);
    margin-bottom: 1rem;
}
.footer-links-list[b-379i9kt8gu] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.footer-links-list a[b-379i9kt8gu] {
    color: var(--text-muted);
}
.footer-links-list a:hover[b-379i9kt8gu] {
    color: var(--neon-green);
}
.newsletter-form[b-379i9kt8gu] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.newsletter-input[b-379i9kt8gu] {
    flex: 1;
    background-color: #121212;
    border: 3px solid #333333 !important;
    color: #ffffff;
    padding: 0.8rem 1rem;
    font-family: inherit;
    min-width: 0;
}
.newsletter-input:focus[b-379i9kt8gu] {
    outline: none;
    border-color: var(--neon-purple) !important;
}
.newsletter-btn[b-379i9kt8gu] {
    padding: 0.8rem 1.2rem;
    flex-shrink: 0;
}
.footer-disclaimer[b-379i9kt8gu] {
    border-top: 1px solid #1a1a1a;
    padding-top: 2rem;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.85rem;
    color: #555555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
/* Deliberately quiet — this is a fallback for the rare visitor whose HDR display isn't caught by
   app.css's automatic dynamic-range detection, not something everyone needs to notice or use. */
.hdr-pref-toggle[b-379i9kt8gu] {
    background: none;
    border: 1px solid #262626;
    color: #555555;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.hdr-pref-toggle:hover[b-379i9kt8gu] {
    color: var(--neon-green);
    border-color: var(--neon-green);
}

/* Site Passcode Lock Overlay */
.site-lock-overlay[b-379i9kt8gu] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(4, 4, 6, 0.97);
    /* Nothing but body's static background sits behind this overlay now (see MainLayout.razor),
       so a light blur is purely decorative rather than something the browser has to keep
       recomputing against a live, animating page every frame. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.site-lock-box[b-379i9kt8gu] {
    background: #0a0a0e;
    border: 3px solid var(--neon-purple);
    box-shadow: 0 0 60px rgba(var(--neon-purple-rgb), 0.35), 8px 8px 0px #000000;
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: fadeIn 0.4s ease-out forwards;
}

.site-lock-box[b-379i9kt8gu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-green), var(--neon-purple));
}

.site-lock-privacy-link[b-379i9kt8gu] {
    color: #6b6b78;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-decoration: none;
}

.site-lock-privacy-link:hover[b-379i9kt8gu] {
    color: #fff;
}

.site-lock-input-row[b-379i9kt8gu] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
}

.site-lock-input[b-379i9kt8gu] {
    flex: 1;
    background-color: #111118;
    border: 2px solid #333;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    letter-spacing: 3px;
    text-align: center;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.site-lock-input:focus[b-379i9kt8gu] {
    outline: none;
    border-color: var(--neon-green);
    box-shadow: 0 0 12px rgba(var(--neon-green-rgb), 0.2);
}

.site-lock-input[b-379i9kt8gu]::placeholder {
    letter-spacing: 1px;
    color: #444;
}

@media (max-width: 480px) {
    .site-lock-box[b-379i9kt8gu] {
        padding: 2rem 1.25rem;
    }
    .site-lock-input-row[b-379i9kt8gu] {
        flex-direction: column;
    }
    .site-lock-input[b-379i9kt8gu] {
        width: 100%;
    }
}

/* Snack gate content — the overlay/modal shell itself (.snack-gate-overlay, .snack-gate-modal)
   stays in app.css since ProductDetail.razor's review modal reuses those same two classes. */
.gate-wink-disclaimer[b-379i9kt8gu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: rgba(255, 214, 51, 0.1);
    border: 1px dashed var(--neon-yellow);
    color: var(--neon-yellow);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}
.gate-feedback[b-379i9kt8gu] { letter-spacing: 0.5px; font-weight: bold; }
.gate-heading[b-379i9kt8gu] { letter-spacing: -1px; line-height: 1.1; }
.gate-desc[b-379i9kt8gu] { line-height: 1.5; }
.gate-btn-primary[b-379i9kt8gu] {
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
.gate-btn-secondary[b-379i9kt8gu] {
    border: 3px solid #333;
    box-shadow: 4px 4px 0px #222;
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
@media (max-width: 480px) {
    .gate-btn-primary[b-379i9kt8gu],
    .gate-btn-secondary[b-379i9kt8gu] {
        width: 100%;
        white-space: normal !important;
        font-size: 0.85rem;
        line-height: 1.3;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
header[b-vuff4zg9aj] {
    background-color: rgba(6, 6, 6, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: var(--thick-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-wrapper[b-vuff4zg9aj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}
.logo-text[b-vuff4zg9aj] {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.2rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -2px;
    display: flex;
    align-items: center;
    position: relative;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.logo-text[b-vuff4zg9aj]::after {
    content: 'THAT HITS!';
    position: absolute;
    left: 2px;
    top: 2px;
    color: var(--neon-purple);
    z-index: -1;
}
.logo-text span[b-vuff4zg9aj] {
    color: var(--neon-green);
    font-family: 'Syne', sans-serif;
    margin-left: 0.3rem;
}
.nav-links[b-vuff4zg9aj] {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    margin-right: auto;
    margin-left: 2.5rem;
}
.nav-link-item[b-vuff4zg9aj] {
    font-family: 'Space Grotesk', 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px !important;
    color: var(--neon-green) !important;
    position: relative;
    white-space: nowrap;
    padding: 0.25rem 0;
}
/* The hover underline. "header ::deep" (not a plain .nav-link-item) so it also reaches the links
   Blazor's <NavLink> renders — those anchors belong to the NavLink component, not this one, so a
   plain scoped rule never matched them and Shop / The Plug / Support / Snack Intel had no underline. */
header[b-vuff4zg9aj]  .nav-link-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background-color: var(--neon-green);
    transition: width 0.2s ease;
}
header[b-vuff4zg9aj]  .nav-link-item:hover::after {
    width: 100%;
}
.nav-link-underground[b-vuff4zg9aj] {
    color: var(--neon-purple) !important;
    text-shadow: 0 0 6px rgba(var(--neon-purple-rgb), 0.65), 0 0 14px rgba(var(--neon-purple-rgb), 0.35);
    letter-spacing: 0.5px;
    animation: undergroundFlicker-b-vuff4zg9aj 4.5s infinite;
}
header[b-vuff4zg9aj]  .nav-link-underground::after {
    background-color: var(--neon-purple);
    box-shadow: 0 0 8px var(--neon-purple);
}
@keyframes undergroundFlicker-b-vuff4zg9aj {
    0%, 88%, 91%, 93%, 100% { opacity: 1; }
    89%, 90%, 92% { opacity: 0.5; }
}
.header-actions[b-vuff4zg9aj] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Standalone Nav Cart Trigger */
.btn-cart-trigger[b-vuff4zg9aj] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-cart-trigger:hover[b-vuff4zg9aj] {
    transform: scale(1.15);
    color: var(--neon-green);
}

.cart-badge-count[b-vuff4zg9aj] {
    position: absolute;
    top: -2px;
    right: -4px;
    background-color: var(--neon-green);
    color: #000000;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1px solid #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

/* Responsive adjustments for header between mobile breakpoint (768px) and 1150px */
@media (min-width: 768px) and (max-width: 1150px) {
    .header-wrapper[b-vuff4zg9aj] {
        padding: 0.85rem 1.25rem;
    }
    .logo-text[b-vuff4zg9aj] {
        font-size: 1.8rem;
    }
    .nav-links[b-vuff4zg9aj] {
        gap: 1.25rem;
    }
    .nav-link-item[b-vuff4zg9aj] {
        font-size: 1.35rem !important;
    }
    .header-actions[b-vuff4zg9aj] {
        gap: 0.75rem;
    }
}

/* Tighten header on narrow phones so the cart button isn't clipped off-screen */
@media (max-width: 480px) {
    .header-wrapper[b-vuff4zg9aj] {
        padding: 0.75rem 1rem;
    }
    .logo-text[b-vuff4zg9aj] {
        font-size: 1.5rem;
        letter-spacing: -1px;
    }
    .header-actions[b-vuff4zg9aj] {
        gap: 0.5rem;
    }
}

.mobile-menu-dropdown[b-vuff4zg9aj] {
    background-color: var(--dark-bg);
    border-top: var(--thick-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    border-bottom: var(--thick-border);
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* Tab buttons keep the street-button color scheme but shouldn't lift/pop on hover — they're
   persistent navigation, not one-off action buttons, so the same site-wide hover animation
   read as distracting here. */
.admin-nav-tabs button.btn-street-green:hover[b-eyrumr0i3x],
.admin-nav-tabs button.btn-street-dark:hover[b-eyrumr0i3x] {
    transform: none;
    box-shadow: var(--street-shadow);
}
/* /Components/Pages/Admin/AdminLogin.razor.rz.scp.css */
.lockout-alert[b-nt39179bad] { background-color: #ff3385; color: #1a0008; }
.error-alert[b-nt39179bad] { background-color: var(--neon-purple); color: white; }
/* /Components/Pages/Admin/MarkdownEditor.razor.rz.scp.css */
/* The Preview tab renders through the shared .intel-post-body rules in app.css (also used by
   the live IntelPost.razor page) so what you see while writing matches what publishes.
   Fullscreen is a plain CSS overlay (not the browser Fullscreen API) so it needs no permission
   prompt and behaves the same across browsers. */
.markdown-preview-pane[b-cew8e020gk] {
    background: #0d0d10;
    border: 1px solid #222;
    padding: 1.25rem;
    min-height: 200px;
    overflow-y: auto;
}

.markdown-product-picker[b-cew8e020gk] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    background: #0d0d10;
    border: 1px solid #333;
    padding: 0.5rem;
    width: 260px;
    margin-top: 0.25rem;
}

.markdown-editor-fullscreen[b-cew8e020gk] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #050505;
    padding: 2rem;
    overflow-y: auto;
}
/* /Components/Pages/CartDrawer.razor.rz.scp.css */
.cart-overlay[b-djr7j7q2n5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cart-overlay.open[b-djr7j7q2n5] {
    opacity: 1;
    pointer-events: auto;
}
.cart-drawer[b-djr7j7q2n5] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background-color: #0b0b0b;
    border-left: var(--thick-border);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.cart-overlay.open .cart-drawer[b-djr7j7q2n5] {
    transform: translateX(0);
}
.cart-header[b-djr7j7q2n5] {
    padding: 1.5rem;
    border-bottom: var(--thick-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #121212;
}
.cart-close-btn[b-djr7j7q2n5] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}
.cart-close-btn:hover[b-djr7j7q2n5] {
    color: var(--neon-green);
}
.cart-items-list[b-djr7j7q2n5] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-item-card[b-djr7j7q2n5] {
    background-color: var(--dark-card);
    border: 2px solid #222222;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    position: relative;
    transition: border-color 0.2s ease;
}
.cart-item-card:hover[b-djr7j7q2n5] {
    border-color: var(--neon-purple);
}
.cart-item-img[b-djr7j7q2n5] {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 2px solid #000;
}
.cart-item-details[b-djr7j7q2n5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cart-item-title[b-djr7j7q2n5] {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}
.cart-item-variant[b-djr7j7q2n5] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.cart-item-price[b-djr7j7q2n5] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--neon-green);
}
.cart-item-qty[b-djr7j7q2n5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cart-item-remove[b-djr7j7q2n5] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.cart-item-remove:hover[b-djr7j7q2n5] {
    color: #ff3333;
}
/* A line the live catalog says can't be bought right now. Red border + a notice with the next step,
   so the customer sees why checkout is blocked and can fix it in place. */
.cart-item-card-unavailable[b-djr7j7q2n5] {
    border-color: #ff3333;
}
.cart-item-card-unavailable:hover[b-djr7j7q2n5] {
    border-color: #ff3333;
}
.cart-item-card-unavailable .cart-item-img[b-djr7j7q2n5] {
    opacity: 0.45;
}
.cart-item-notice[b-djr7j7q2n5] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background-color: rgba(255, 51, 51, 0.1);
    border: 1px solid #ff3333;
}
.cart-item-notice-text[b-djr7j7q2n5] {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
}
.cart-item-notice-actions[b-djr7j7q2n5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cart-footer[b-djr7j7q2n5] {
    padding: 1.5rem;
    border-top: var(--thick-border);
    background-color: #121212;
}
.cart-summary-row[b-djr7j7q2n5] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
}
.checkout-btn[b-djr7j7q2n5] {
    width: 100%;
}
/* Greyed out and not clickable while an out-of-stock line is still in the cart. */
.checkout-btn:disabled[b-djr7j7q2n5] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   CASE-FILE DIVIDER
   Marks the handoff from the product grid above to the two "engagement"
   cards below — a plain rule with a stamped tab centered on it, in the
   page's monospace/intel voice rather than another street-badge.
   ============================================================ */
.case-divider[b-6h26h97cf8] {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2a2a2a 12%, #2a2a2a 88%, transparent);
    margin: 3.5rem 0 3rem;
}

.case-divider-tab[b-6h26h97cf8] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    border: 2px solid var(--neon-purple);
    color: var(--neon-purple);
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .case-divider[b-6h26h97cf8] {
        margin: 2.25rem 0 2rem;
    }

    .case-divider-tab[b-6h26h97cf8] {
        font-size: 0.6rem;
        letter-spacing: 2px;
        padding: 0.4rem 0.85rem;
    }
}

/* ============================================================
   DOSSIER CARD
   Used by the "Meet The Snack Plug" promo and the "Tap In / Join" combo
   CTA. Deliberately NOT the product-card shape (photo box, then a
   separate solid info panel below it) — the photo is the whole card,
   full-bleed, with the copy sitting directly on top of it behind a dark
   gradient scrim. That's what makes this pair read as its own zone
   instead of two oversized product tiles.

   Border is a thin accent-colour ring + glow instead of the product
   grid's thick black border + hard offset shadow, for the same reason.
   ============================================================ */
.dossier-card[b-6h26h97cf8] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 440px;
    background-color: #000;
    border: 2px solid #000;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
}

.dossier-card:hover[b-6h26h97cf8] {
    transform: translateY(-6px);
}

.dossier-card-purple[b-6h26h97cf8] {
    box-shadow: 0 0 0 2px var(--neon-purple), 0 22px 50px -18px rgba(var(--neon-purple-rgb), 0.55);
}

.dossier-card-purple:hover[b-6h26h97cf8] {
    box-shadow: 0 0 0 2px var(--neon-purple), 0 0 32px rgba(var(--neon-purple-rgb), 0.45), 0 26px 55px -16px rgba(var(--neon-purple-rgb), 0.6);
}

.dossier-card-green[b-6h26h97cf8] {
    box-shadow: 0 0 0 2px var(--neon-green), 0 22px 50px -18px rgba(var(--neon-green-rgb), 0.45);
}

.dossier-card-green:hover[b-6h26h97cf8] {
    box-shadow: 0 0 0 2px var(--neon-green), 0 0 32px rgba(var(--neon-green-rgb), 0.4), 0 26px 55px -16px rgba(var(--neon-green-rgb), 0.5);
}

.dossier-card-photo[b-6h26h97cf8] {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.dossier-card:hover .dossier-card-photo[b-6h26h97cf8] {
    transform: scale(1.06);
}

/* Keeps each source photo's actual subject in frame once object-fit:cover
   is cropping a square (800x800) image down into this card's wider box. */
.dossier-photo-plug[b-6h26h97cf8] { object-position: center 18%; }
.dossier-photo-spin[b-6h26h97cf8] { object-position: center 38%; }
.dossier-photo-member[b-6h26h97cf8] { object-position: center 32%; }

.dossier-card-scrim[b-6h26h97cf8] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.93) 32%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.05) 82%, transparent 100%);
}

/* Stamped corner tag, rotated to match the hero section's own badge tilt
   (.hero-badge-tag) so this card visually rhymes with the page above it. */
.dossier-card-tag[b-6h26h97cf8] {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 3;
    transform: rotate(-2deg);
}

.dossier-card-content[b-6h26h97cf8] {
    position: relative;
    z-index: 2;
    padding: 1.75rem 1.75rem 2rem;
}

.dossier-card-title[b-6h26h97cf8] {
    font-size: 1.7rem;
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.dossier-card-copy[b-6h26h97cf8] {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 46ch;
    margin-bottom: 0.75rem;
}

.dossier-card-author[b-6h26h97cf8] {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
}

.dossier-card-btn[b-6h26h97cf8] {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    margin-top: 0.15rem;
}

/* Replaces an inline style="margin-bottom: 90px !important" that used to sit
   on the CTA section. An inline !important can't be overridden by any
   stylesheet rule, which is a problem now that .home-duo-row needs to zero
   this out at the side-by-side breakpoint — so the spacing moved into a
   class instead. */
.home-cta-section[b-6h26h97cf8] {
    margin-bottom: 90px;
}

/* ============================================================
   SIDE-BY-SIDE PAIR (desktop, >=992px)
   Below 992px .home-duo-row is a plain block — the two cards stack full
   width, one above the other. From 992px up it becomes a two-column grid.
   Unlike the old split-panel layout, .dossier-card doesn't need its own
   internal direction flip at this breakpoint — the photo is a full-bleed
   background at every width, so only the row layout changes.
   ============================================================ */
@media (min-width: 992px) {
    .home-duo-row[b-6h26h97cf8] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 90px;
        /* Caps how wide each column is allowed to grow on wide viewports,
           shrinking the whole card. */
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-duo-row .home-duo-item[b-6h26h97cf8] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .home-duo-row .dossier-card[b-6h26h97cf8] {
        min-height: 480px;
        /* Grid stretches the <section> item to match the taller card, but
           that height doesn't propagate to this inner div on its own —
           block-level children don't inherit a stretched ancestor's height
           without being told to. */
        height: 100%;
    }
}

@media (max-width: 575px) {
    .dossier-card[b-6h26h97cf8] {
        min-height: 400px;
    }

    .dossier-card-content[b-6h26h97cf8] {
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .dossier-card-tag[b-6h26h97cf8] {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.55rem !important;
    }

    .dossier-card-title[b-6h26h97cf8] {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }

    .dossier-card-copy[b-6h26h97cf8] {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }

    .dossier-card-author[b-6h26h97cf8] {
        font-size: 0.65rem;
        margin-bottom: 0.75rem;
    }

    .dossier-card-btn[b-6h26h97cf8] {
        display: block;
        text-align: center;
        font-size: 0.85rem;
        padding: 0.65rem 1rem;
    }
}

/* Hero Section */
.hero-section[b-6h26h97cf8] {
    padding: 5rem 0 3rem;
    position: relative;
}
.hero-badge-tag[b-6h26h97cf8] {
    background-color: var(--neon-purple);
    color: #ffffff;
    padding: 0.5rem 1rem;
    display: inline-block;
    font-weight: 800;
    margin-bottom: 1.5rem;
    border: var(--thick-border);
    transform: rotate(-2deg);
}
.hero-title[b-6h26h97cf8] {
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-family: 'Archivo Black', sans-serif;
    color: #ffffff;
    line-height: 0.9;
    letter-spacing: -4px;
    margin-bottom: 2rem;
}
.hero-title span[b-6h26h97cf8] {
    color: var(--neon-green);
    text-shadow: 0 0 20px rgba(var(--neon-green-rgb), 0.4);
}
.hero-desc[b-6h26h97cf8] {
    font-size: 1.3rem;
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}
.hero-buttons[b-6h26h97cf8] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Mobile Hero Compact Fitting (max-width: 767px) */
@media (max-width: 767px) {
    .hero-section[b-6h26h97cf8] {
        padding: 1.25rem 0 1.5rem !important;
    }
    .hero-badge-tag[b-6h26h97cf8] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 0.6rem !important;
    }
    .hero-title[b-6h26h97cf8] {
        font-size: 2.45rem !important;
        line-height: 0.95 !important;
        letter-spacing: -2px !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-desc[b-6h26h97cf8] {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
        max-width: 100% !important;
    }
    .hero-buttons[b-6h26h97cf8] {
        gap: 0.75rem !important;
        margin-bottom: 0.85rem !important;
    }
    .hero-buttons .btn-street[b-6h26h97cf8] {
        padding: 0.65rem 1.3rem !important;
        font-size: 0.88rem !important;
    }
    .hero-img-col[b-6h26h97cf8] {
        margin-top: 0.75rem !important;
    }
    .hero-featured-img[b-6h26h97cf8] {
        max-height: 255px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* Home CTA Tab Switcher */
.home-cta-tab-switcher[b-6h26h97cf8] {
    display: flex;
    background-color: #000000;
    border: 3px solid #333333 !important;
    padding: 4px;
    gap: 6px;
}
.home-cta-tab-btn[b-6h26h97cf8] {
    flex: 1;
    border: 2px solid transparent !important;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    background-color: #121216;
    color: #888888;
    outline: none !important;
    box-shadow: none !important;
}
.home-cta-tab-btn:hover[b-6h26h97cf8] {
    color: #ffffff;
    background-color: #1a1a22;
}
.home-cta-tab-btn.active-green[b-6h26h97cf8] {
    background-color: var(--neon-green) !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 0 12px rgba(var(--neon-green-rgb), 0.4) !important;
}
.home-cta-tab-btn.active-purple[b-6h26h97cf8] {
    background-color: var(--neon-purple) !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 0 12px rgba(var(--neon-purple-rgb), 0.4) !important;
}

/* Uses the shared @keyframes blinking-light defined globally in app.css
   (also used by LiveWinnerFeed's .live-pulse-dot). */
.blinking-dot[b-6h26h97cf8] {
    width: 8px;
    height: 8px;
    background-color: var(--neon-green);
    border-radius: 50%;
    display: inline-block;
    animation: blinking-light 2.5s infinite ease-in-out;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Pre-drop state of .blinking-dot above (see countdown.js) — same dot element, toggled between
   the two classes depending on whether the drop has gone live yet. */
.countdown-dot[b-6h26h97cf8] {
    width: 6px;
    height: 6px;
    background-color: #ff3838;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot-red-b-6h26h97cf8 1.2s infinite alternate;
    box-shadow: 0 0 5px #ff3838;
}
@keyframes pulse-dot-red-b-6h26h97cf8 {
    from { opacity: 0.3; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes flame-flicker-b-6h26h97cf8 {
    0% {
        filter: drop-shadow(0px 1px 2px rgba(255, 60, 0, 0.3)) drop-shadow(0px -1px 3px rgba(255, 120, 0, 0.2));
        transform: scale(0.96) rotate(-2deg) translateY(0px);
    }
    50% {
        filter: drop-shadow(0px 2px 3px rgba(255, 70, 0, 0.45)) drop-shadow(0px -3px 6px rgba(255, 180, 0, 0.35));
        transform: scale(1.06) rotate(2deg) translateY(-2px);
    }
    100% {
        filter: drop-shadow(0px 1px 2px rgba(255, 60, 0, 0.3)) drop-shadow(0px -1px 3px rgba(255, 120, 0, 0.2));
        transform: scale(0.96) rotate(-1deg) translateY(0px);
    }
}
.flaming-emoji[b-6h26h97cf8] {
    display: inline-block;
    animation: flame-flicker-b-6h26h97cf8 0.8s ease-in-out infinite;
    line-height: 1;
    vertical-align: middle;
}

/* Home hero section */
.hero-badge-tag-active[b-6h26h97cf8] {
    background-color: var(--neon-green);
    color: #000000;
    padding: 0.5rem 1.25rem;
    border: 4px solid #000000 !important;
    outline: 1px solid #000000;
    box-shadow: 4px 4px 0px #000000;
    transform: rotate(-2deg) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0;
    font-weight: 800;
}
.hero-badge-tag-dark[b-6h26h97cf8] {
    background-color: #0b0b0b;
    border: 3px solid #333333 !important;
    box-shadow: 3px 3px 0px #000000;
    transform: none !important;
    border-radius: 0;
    color: #fff;
}
.hero-image-backdrop[b-6h26h97cf8] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    background: radial-gradient(circle, rgba(var(--neon-purple-rgb), 0.2) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: -1;
}
@keyframes hero-float-b-6h26h97cf8 {
    0% { transform: translateY(0px) rotate(-5deg); }
    50% { transform: translateY(-12px) rotate(-3deg); }
    100% { transform: translateY(0px) rotate(-5deg); }
}
.hero-featured-img[b-6h26h97cf8] {
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(var(--neon-green-rgb), 0.3));
    transform: rotate(-5deg);
    animation: hero-float-b-6h26h97cf8 4s ease-in-out infinite;
}
/* /Components/Pages/HowMysteryCratesWork.razor.rz.scp.css */
.crate-intro[b-4wl0zz9xoc] {
    max-width: 640px;
    line-height: 1.6;
}

/* Deliberately a flat dark step card (numeral + text) rather than the product card's photo-box look,
   so this reads as an explainer panel, not more tiles in the product grid. */
.crate-step[b-4wl0zz9xoc] {
    position: relative;
    background-color: #0c0c0c;
    border: 2px solid #1f1f1f;
    border-top: 3px solid var(--neon-green);
    padding: 1.5rem 1.25rem 1.5rem;
}

.crate-step-num[b-4wl0zz9xoc] {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--neon-green);
    text-shadow: 0 0 14px rgba(var(--neon-green-rgb), 0.45);
    margin-bottom: 0.6rem;
}

.crate-step-title[b-4wl0zz9xoc] {
    font-size: 1.05rem;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 0.9rem;
}

.crate-step-copy[b-4wl0zz9xoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
/* /Components/Pages/Intel.razor.rz.scp.css */
.intel-hub-card[b-r7d8vfaqyq] {
    min-height: 380px;
}

.intel-hub-card-accent-bar[b-r7d8vfaqyq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
/* /Components/Pages/IntelArticles.razor.rz.scp.css */
@media (max-width: 767.98px) {
    .intel-article-img[b-sg70yu9oig] {
        height: 110px !important;
        object-fit: cover !important;
    }

    .intel-article-img-placeholder[b-sg70yu9oig] {
        height: 110px !important;
    }

    .intel-badge-mobile[b-sg70yu9oig] {
        font-size: 0.58rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    .intel-article-title[b-sg70yu9oig] {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.25 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .intel-article-summary[b-sg70yu9oig] {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* /Components/Pages/IntelPost.razor.rz.scp.css */
/* Reading progress bar — fixed to the very top of the viewport, width driven by scroll position
   (see wwwroot/js/reading-progress.js). Sits above the site's sticky header. */
.reading-progress-bar[b-1npvm0ef80] {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--post-accent, var(--neon-purple));
    z-index: 1100;
    transition: width 0.1s linear;
}

.back-to-top-btn[b-1npvm0ef80] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--post-accent, var(--neon-green));
    border: 2px solid #000000;
    color: #000000;
    font-size: 1.2rem;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.back-to-top-btn:hover[b-1npvm0ef80] {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000000;
}
/* /Components/Pages/IntelSocial.razor.rz.scp.css */
.hover-glow[b-4bf82zvgea] {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hover-glow-purple:hover[b-4bf82zvgea] {
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 20px rgba(var(--neon-purple-rgb), 0.25);
    transform: translateY(-2px);
}

.hover-glow-green:hover[b-4bf82zvgea] {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 20px rgba(var(--neon-green-rgb), 0.25);
    transform: translateY(-2px);
}

.hover-glow-red:hover[b-4bf82zvgea] {
    border-color: #ff3366 !important;
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.25);
    transform: translateY(-2px);
}

.hover-glow-yellow:hover[b-4bf82zvgea] {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.25);
    transform: translateY(-2px);
}
/* /Components/Pages/LiveWinnerFeed.razor.rz.scp.css */
/* Uses the shared @keyframes blinking-light defined globally in app.css
   (also used by Home's .blinking-dot). */
.live-pulse-dot[b-z02c5lgigd] {
    width: 8px;
    height: 8px;
    background-color: var(--neon-green);
    border-radius: 50%;
    display: inline-block;
    animation: blinking-light 1.5s infinite ease-in-out;
    box-shadow: 0 0 8px var(--neon-green);
    vertical-align: middle;
}

.winner-feed-scroll[b-z02c5lgigd] { max-height: 250px; overflow-y: auto; padding-right: 0.25rem; }
.winner-feed-row[b-z02c5lgigd] { background-color: #0d0d0d; border-radius: 0; }
.player-name-tag[b-z02c5lgigd] { color: var(--neon-purple) !important; font-weight: 700; }
.tier-badge-muted[b-z02c5lgigd] { background-color: #222; color: #aaa; }
/* /Components/Pages/PlugPreLaunch.razor.rz.scp.css */
/* The dossier look, copied from ThePlug.razor.css (a page's scoped stylesheet applies only to that page's own
   markup, and the real Plug page is left untouched). Only the parts the pre-launch page uses. */
.plug-dossier-card[b-2tsdqua450] {
    box-shadow: 0 0 30px rgba(var(--neon-purple-rgb), 0.2), var(--street-shadow-purple);
}

.plug-photo-stage[b-2tsdqua450] {
    box-shadow: 0 0 20px rgba(var(--neon-purple-rgb), 0.3);
    max-width: 440px;
    width: 100%;
}

.plug-trench-img[b-2tsdqua450] {
    border: 2px solid #000;
    filter: contrast(1.05) saturate(1.1);
}

.confidential-stamp[b-2tsdqua450] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff3838;
    color: #ffffff;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.8rem;
    padding: 4px 12px;
    transform: rotate(12deg);
    border: 2px solid #000;
    box-shadow: 3px 3px 0px #000;
    z-index: 10;
    user-select: none;
    letter-spacing: 1.5px;
}

.plug-manifesto-container[b-2tsdqua450] {
    box-shadow: 0 0 25px rgba(255, 251, 0, 0.15);
}

.manifesto-grid[b-2tsdqua450] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manifesto-line[b-2tsdqua450] {
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.3;
}

.plug-prelaunch-privacy[b-2tsdqua450] {
    color: #6b6b78;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-decoration: none;
}

.plug-prelaunch-privacy:hover[b-2tsdqua450] {
    color: #fff;
}

@media (min-width: 768px) {
    .manifesto-line[b-2tsdqua450] {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .plug-photo-stage[b-2tsdqua450] {
        max-width: 280px !important;
        margin: 0 auto 0.5rem auto !important;
    }

    .confidential-stamp[b-2tsdqua450] {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        top: 10px !important;
        right: 10px !important;
    }

    .manifesto-line[b-2tsdqua450] {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.5px !important;
    }

    .plug-manifesto-container[b-2tsdqua450] {
        padding: 1.25rem 0.85rem !important;
    }
}
/* /Components/Pages/PolicyPage.razor.rz.scp.css */
.policy-short[b-ku2445pa94] {
    border: 2px dashed var(--neon-purple);
    background-color: rgba(var(--neon-purple-rgb), 0.08);
}

.policy-short[b-ku2445pa94]  ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #ffffff;
    line-height: 1.7;
}

.policy-body[b-ku2445pa94]  h2 {
    font-family: 'Archivo Black', sans-serif;
    color: #ffffff;
    font-size: 1.3rem;
    margin: 2.5rem 0 0.9rem;
}

.policy-body[b-ku2445pa94]  h2:first-child {
    margin-top: 0;
}

.policy-body[b-ku2445pa94]  p,
.policy-body[b-ku2445pa94]  li {
    color: var(--text-muted);
    line-height: 1.7;
}

.policy-body[b-ku2445pa94]  ul {
    padding-left: 1.25rem;
}

.policy-body[b-ku2445pa94]  strong {
    color: #ffffff;
}

.policy-body[b-ku2445pa94]  a,
.policy-links a[b-ku2445pa94] {
    color: var(--neon-green);
}
/* /Components/Pages/ProductCard.razor.rz.scp.css */
.product-card[b-88y54uqejt] {
    background-color: var(--dark-card);
    border: var(--thick-border);
    box-shadow: var(--street-shadow);
    /* Only transform/box-shadow animate the hover "pop" — background/border color swap instantly.
       Same fix as the pagination buttons: the overshoot bezier below is meant for the bounce, but
       driving background-color/border-color through it via `transition: all` risks an out-of-range
       intermediate hue, and on a paginated grid every card can also get its badge/lock/sale styling
       swapped when the page changes — with `all`, each of those differences would try to animate
       too, which is what read as the grid "shaking" on page change. */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.product-card:hover[b-88y54uqejt] {
    transform: translate(-5px, -5px);
    box-shadow: 11px 11px 0px var(--neon-green);
    border-color: #000000;
}
.product-card-img-wrapper[b-88y54uqejt] {
    position: relative;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background-color: #0d0d0d;
    border-bottom: var(--thick-border);
    overflow: hidden;
}
.product-card-img[b-88y54uqejt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .product-card-img[b-88y54uqejt] {
    transform: scale(1.08) rotate(1deg);
}
.product-card-badge[b-88y54uqejt] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    /* Static labels: the Halloween theme's flicker on .street-badge-* shouldn't hit these. */
    animation: none !important;
}
.product-card-info[b-88y54uqejt] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* line-clamp + matching min/max-height so every card's title/description block occupies exactly
   the same space regardless of content length — short text gets padded out to it (min-height),
   long text gets truncated with an ellipsis at 2 lines (max-height + clamp) instead of growing
   the card. Without this, cards of different heights make whichever grid row they land in taller,
   which in turn made the pagination bar underneath jump up/down page to page. This used to only
   apply below 575px; the jumpiness shows up at every width, so it's now the base rule everywhere,
   with the mobile block below just resizing it. */
.product-card-title[b-88y54uqejt] {
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    color: #ffffff;
    min-height: 2.5em;
    max-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-desc[b-88y54uqejt] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.4;
    min-height: 2.8em;
    max-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Rating line only renders when a product actually has reviews — reserving its height whether
   shown or not (see the wrapping .product-card-rating-slot in ProductCard.razor) keeps everything
   below it (price, button) landing in the same spot on every card. */
.product-card-rating-slot[b-88y54uqejt] {
    min-height: 1.2rem;
    margin-bottom: 0.5rem;
}
.product-card-footer[b-88y54uqejt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
    gap: 0.8rem;
}
.product-card-footer .btn-street[b-88y54uqejt] {
    width: 100% !important;
    margin-right: 0;
}
.product-card-price-container[b-88y54uqejt] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
}
.product-card-price[b-88y54uqejt] {
    font-size: 1.5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: var(--neon-green);
}
.product-card-old-price[b-88y54uqejt] {
    font-size: 0.9rem;
    color: #666;
    text-decoration: line-through;
}

/* Mobile 2-Column Compact Sizing */
@media (max-width: 575px) {
    .product-card-info[b-88y54uqejt] {
        padding: 0.75rem !important;
    }
    .product-card-title[b-88y54uqejt] {
        font-size: 0.88rem !important;
        margin-bottom: 0.35rem !important;
        line-height: 1.2 !important;
        min-height: 2.4em !important;
        max-height: 2.4em !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card-desc[b-88y54uqejt] {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        min-height: 2.6em !important;
        max-height: 2.6em !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card-price[b-88y54uqejt] {
        font-size: 1.1rem !important;
    }
    .product-card-footer[b-88y54uqejt] {
        gap: 0.4rem !important;
    }
    .product-card-badge[b-88y54uqejt] {
        top: 6px !important;
        left: 6px !important;
        font-size: 0.65rem !important;
        padding: 0.2rem 0.45rem !important;
    }
    .product-card-footer .btn-street[b-88y54uqejt] {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.78rem !important;
    }
}

/* Black Market / Stash Markdowns clearance-gating (Level 4 members only) */
.product-card-bm-unlocked[b-88y54uqejt] {
    border: 2px solid var(--neon-purple) !important;
    box-shadow: 0 0 20px rgba(var(--neon-purple-rgb), 0.25), 4px 4px 0px #000000 !important;
}
.product-card-bm-locked[b-88y54uqejt] {
    border: 2px solid #33144d !important;
    background: #09060f !important;
    opacity: 0.95;
}
.bm-img-blur[b-88y54uqejt] {
    filter: blur(12px) grayscale(80%);
    opacity: 0.4;
    transition: filter 0.3s ease;
}
.bm-lock-overlay[b-88y54uqejt] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    width: 90%;
    pointer-events: none;
}
.bm-lock-icon[b-88y54uqejt] {
    font-size: 2.2rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 10px rgba(var(--neon-purple-rgb), 0.8));
}
.bm-lock-text[b-88y54uqejt] {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--neon-purple);
    background: rgba(0, 0, 0, 0.85);
    padding: 4px 8px;
    border: 1px solid var(--neon-purple);
    text-transform: uppercase;
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
/* Product Details Spin Vault Button High-Specificity Override */
a.btn-street.product-spin-vault-btn[b-eiyo17gttr],
button.btn-street.product-spin-vault-btn[b-eiyo17gttr],
.btn-street.product-spin-vault-btn[b-eiyo17gttr] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    padding: 0.7rem 0.5rem !important;
}

/* Color emojis ignore `color`/text-stroke, so a thin outline has to be faked with stacked
   text-shadow offsets instead — kept small (1.5px) so it reads as an outline, not a glow. */
.spin-btn-emoji[b-eiyo17gttr] {
    text-shadow:
        -1.5px -1.5px 0 #000000,
        1.5px -1.5px 0 #000000,
        -1.5px 1.5px 0 #000000,
        1.5px 1.5px 0 #000000;
}

/* The default .street-badge-* modifiers are solid full-saturation fills with black text — a
   fine small accent elsewhere, but this badge sits static next to the price on every visit to
   this page, and a flat neon block that size reads as glaring. All four stock states (in stock,
   low stock, last unit, sold out) get the same treatment instead: dark fill, colored text/border,
   gentle glow — same color story per state, much easier to look at.
   (LAST UNIT previously used .street-badge-red-border, which actually set a *green* background
   with a brown border — a copy-paste leftover, not an intentional color. Rebuilding all four
   states here fixes that along with the rest.) */
.product-stock-badge[b-eiyo17gttr] {
    background-color: var(--dark-card);
    border-width: 2px;
    border-style: solid;
}
.product-stock-badge-green[b-eiyo17gttr] {
    color: var(--neon-green);
    border-color: var(--neon-green);
    box-shadow: 0 0 8px rgba(var(--neon-green-rgb), 0.25);
}
.product-stock-badge-yellow[b-eiyo17gttr] {
    color: var(--neon-yellow);
    border-color: var(--neon-yellow);
    box-shadow: 0 0 8px rgba(255, 251, 0, 0.25);
}
.product-stock-badge-red[b-eiyo17gttr] {
    color: #ff5c5c;
    border-color: #ff5c5c;
    box-shadow: 0 0 8px rgba(255, 92, 92, 0.25);
}

/* Checkout trust badge — moved to app.css (global): also used by CartDrawer.razor, and Blazor's
   scoped .razor.css files don't share styles across components. */

/* Social Share Block — moved to ProductShareBlock.razor.css (CSS isolation) */

/* ── Mobile Optimization for Product Detail ──────────────────── */
@media (max-width: 991.98px) {
    a.btn-street.product-spin-vault-btn[b-eiyo17gttr],
    button.btn-street.product-spin-vault-btn[b-eiyo17gttr],
    .btn-street.product-spin-vault-btn[b-eiyo17gttr] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
        font-size: 0.78rem !important;
        padding: 0.65rem 0.5rem !important;
        line-height: 1.35 !important;
    }
}
/* /Components/Pages/ProductShareBlock.razor.rz.scp.css */
/* ── Social Share Block ────────────────────────────────────────── */
.share-block[b-g14rgufrb7] {
    border: 1px solid #222;
    background: #0a0a0a;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.share-block-header[b-g14rgufrb7] {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 8px;
}

/* Row 1: direct platform buttons (X, FB, Snapchat, Copy Link) */
.share-row-direct[b-g14rgufrb7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.share-creator-title[b-g14rgufrb7] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #1e1e1e;
    padding-top: 10px;
}

.share-creator-card[b-g14rgufrb7] {
    background: #000;
    border: 1px solid #1e1e1e;
    padding: 10px;
}

/* ── Creator Tools info tooltip ───────────────────────────────────
   IG/TikTok have no share-intent URL like the other 3 platforms, so the
   flow is forced into two disconnected steps (open app, paste caption).
   This icon explains why so it doesn't read as broken. Shows on hover for
   mouse users; toggles on click/tap since hover isn't reliable on the
   touch devices this section is mostly used from. */
.caption-info-wrap[b-g14rgufrb7] {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.caption-info-icon[b-g14rgufrb7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 50%;
    background: transparent;
    color: #555;
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.caption-info-icon:hover[b-g14rgufrb7],
.caption-info-icon:focus-visible[b-g14rgufrb7] {
    border-color: var(--neon-green);
    color: var(--neon-green);
    outline: none;
}
.caption-info-popover[b-g14rgufrb7] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 240px;
    max-width: 70vw;
    padding: 10px 12px;
    background: #000;
    border: 1px solid #2e2e2e;
    color: #999;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2px;
    text-transform: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.caption-info-wrap:hover .caption-info-popover[b-g14rgufrb7],
.caption-info-popover.is-open[b-g14rgufrb7] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fixed label column so Open/Copy buttons align perfectly */
.share-app-label[b-g14rgufrb7] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    width: 96px;
    flex-shrink: 0;
}
.share-label-ig[b-g14rgufrb7] { color: #e1306c; }
.share-label-tt[b-g14rgufrb7] { color: #69c9d0; }

/* Base button */
.share-btn[b-g14rgufrb7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 11px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #2e2e2e;
    background: #111;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 30px;
}
/* Per-platform hover colours */
.share-btn-snap:hover[b-g14rgufrb7]{ border-color: #fffc00; color: #fffc00; box-shadow: 0 0 6px rgba(255,252,0,0.2);   }
.share-btn-x:hover[b-g14rgufrb7]   { border-color: #ddd;    color: #ddd;    box-shadow: 0 0 6px rgba(255,255,255,0.1); }
.share-btn-fb:hover[b-g14rgufrb7]  { border-color: #1877f2; color: #1877f2; box-shadow: 0 0 6px rgba(24,119,242,0.2); }
.share-btn-copy:hover[b-g14rgufrb7],
.share-btn-copy:focus[b-g14rgufrb7]{
    border-color: var(--neon-green);
    color: var(--neon-green);
    box-shadow: 0 0 6px rgba(var(--neon-green-rgb), 0.15);
    outline: none;
}

/* Instagram/TikTok buttons reuse the global .btn-street-dark look, but that class's default
   hover (translate + big offset shadow) is the "pop out" effect we don't want here — these
   should just light up like the .share-btn links above instead, so the glow uses the same
   low-alpha rgba() treatment those use (e.g. .share-btn-copy's rgba(--neon-green-rgb, 0.15))
   rather than a solid currentColor glow, which read as too bright/outward by comparison.
   Split by platform since rgba() can't take currentColor as its color argument.
   border-color needs !important: these buttons also carry Bootstrap's .border-secondary
   utility, which sets border-color with !important, so anything less doesn't win. */
.share-creator-card .btn-street-dark.text-neon-purple:hover[b-g14rgufrb7],
.share-creator-card .btn-street-dark.text-neon-purple:focus[b-g14rgufrb7] {
    transform: none;
    box-shadow: 0 0 6px rgba(var(--neon-purple-rgb), 0.15);
    border-color: currentColor !important;
    background-color: var(--dark-card);
}
.share-creator-card .btn-street-dark.text-neon-green:hover[b-g14rgufrb7],
.share-creator-card .btn-street-dark.text-neon-green:focus[b-g14rgufrb7] {
    transform: none;
    box-shadow: 0 0 6px rgba(var(--neon-green-rgb), 0.15);
    border-color: currentColor !important;
    background-color: var(--dark-card);
}
.share-creator-card .btn-street-dark.text-neon-purple:active[b-g14rgufrb7] {
    transform: none;
    box-shadow: 0 0 4px rgba(var(--neon-purple-rgb), 0.25);
}
.share-creator-card .btn-street-dark.text-neon-green:active[b-g14rgufrb7] {
    transform: none;
    box-shadow: 0 0 4px rgba(var(--neon-green-rgb), 0.25);
}

/* ── Mobile Optimization ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .share-block[b-g14rgufrb7] {
        padding: 14px 12px !important;
        gap: 12px !important;
    }
    .share-row-direct[b-g14rgufrb7] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .share-row-direct .share-btn[b-g14rgufrb7] {
        width: 100% !important;
        margin: 0 !important;
    }
}
/* /Components/Pages/Shop.razor.rz.scp.css */
.builder-steps-container[b-t0boip1pqj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
/* Was 2fr/1fr — with the step cards edge-to-edge in that wide a column and no product photo to
   fill them out (see .builder-option-icon below), they read as oversized/sparse next to the
   much narrower summary card. 3fr/2fr keeps both columns full-bleed (no dead space) but brings
   them close enough in width that the page reads as one balanced two-column layout instead of a
   wide strip next to a thin one. */
@media (min-width: 992px) {
    .builder-steps-container[b-t0boip1pqj] {
        grid-template-columns: 3fr 2fr;
    }
}
@media (max-width: 767px) {
    .builder-steps-container.animate-fade-in[b-t0boip1pqj] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
.builder-options-grid[b-t0boip1pqj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 576px) {
    .builder-options-grid[b-t0boip1pqj] {
        grid-template-columns: repeat(3, 1fr);
    }
    .builder-options-grid-2[b-t0boip1pqj] {
        grid-template-columns: repeat(2, 1fr);
    }
}
.builder-option[b-t0boip1pqj] {
    border: var(--thick-border);
    background-color: #0b0b0b;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.builder-option.active[b-t0boip1pqj] {
    border-color: var(--neon-green);
    box-shadow: var(--street-shadow-green);
    transform: translate(-3px, -3px);
    background-color: #121212;
}
.builder-option.disabled[b-t0boip1pqj] {
    cursor: not-allowed;
    opacity: 0.4;
}
.builder-option.disabled:hover[b-t0boip1pqj] {
    transform: none;
}
/* Small/Large Box used to lead with a product photo; replaced with an icon (same 📦, scaled up
   for Large) so Step 1's cards open with a visual the same way Step 2 (🌶️/🚫) and Step 3 (price)
   already do, instead of jumping straight to bold title text. */
.builder-option-icon[b-t0boip1pqj] {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
}
.builder-option-icon-lg[b-t0boip1pqj] {
    font-size: 3.5rem;
}
.builder-option-title[b-t0boip1pqj] {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.builder-option-desc[b-t0boip1pqj] {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.builder-summary-card[b-t0boip1pqj] {
    background-color: var(--neon-purple);
    color: #ffffff;
    border: var(--thick-border);
    box-shadow: var(--street-shadow);
    padding: 2rem;
    position: sticky;
    top: 100px;
    height: fit-content;
}
.builder-summary-title[b-t0boip1pqj] {
    color: #ffffff;
    font-family: 'Archivo Black', sans-serif;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.builder-summary-row[b-t0boip1pqj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.5rem;
}
.builder-summary-total[b-t0boip1pqj] {
    font-size: 1.8rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 3px solid #ffffff;
}

/* Black Market & Stash Markdowns category headers/tab */
.black-market-header-card[b-t0boip1pqj] {
    border: 2px solid var(--neon-purple) !important;
    box-shadow: 0 0 25px rgba(var(--neon-purple-rgb), 0.25);
    background: radial-gradient(circle at top left, #1a0033 0%, #000000 70%) !important;
}
/* Blurred Black Market Tab for signed-in non-Level 4 members */
.filter-tab-bm[b-t0boip1pqj] {
    border-color: #551a8b !important;
    color: var(--neon-purple) !important;
}

/* Step Crate Builder summary line */
.summary-row-noborder[b-t0boip1pqj] { border: none; }
.total-suffix[b-t0boip1pqj] { font-family: sans-serif; font-weight: normal; margin-left: 3px; }

/* Sort / Rarity bar — sits between the category tabs and the product grid. Deliberately built
   to read as a smaller, quieter *utility* row underneath the category tabs, not a second row of
   the same buttons: .filter-tab above is Archivo Black, dark-card, thick black borders, offset
   box-shadows, and a bounce-hover. These are the fine-tune controls you reach for after you're
   already in an aisle, so they're deliberately smaller (28px vs the tabs' ~44px), flat (no
   box-shadow, no hover-lift), and set in the site's lighter body face instead of the tabs'
   display face. The white-fill/black-text treatment is its own separate flip from the tabs'
   dark-on-dark — a plain block of white is the one thing on this dark page nothing else looks
   like, so the row still reads instantly even at a fraction of the tabs' size. */
.sort-filter-bar[b-t0boip1pqj] {
    margin-bottom: 2rem;
}
.sort-filter-row[b-t0boip1pqj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.6rem;
}
.select-group[b-t0boip1pqj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.select-label[b-t0boip1pqj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #666666;
}
.street-select[b-t0boip1pqj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    height: 28px;
    padding: 0 1.6rem 0 0.65rem;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
    border-radius: 0;
    cursor: pointer;
    appearance: none;
    /* Plain chevron drawn inline so the native OS dropdown arrow (which can't be recolored)
       never clashes with the rest of the box's hand-styled, borderless-select look. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 9px 6px;
    transition: border-color 0.15s ease;
}
.street-select:hover[b-t0boip1pqj] {
    border-color: var(--neon-green);
}
.street-select:focus[b-t0boip1pqj] {
    outline: none;
    border-color: var(--neon-green);
}
.street-select option[b-t0boip1pqj] {
    background-color: #ffffff;
    color: #000000;
}
.advsearch-trigger[b-t0boip1pqj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    height: 28px;
    padding: 0 0.75rem;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: border-color 0.15s ease;
}
.advsearch-trigger:hover[b-t0boip1pqj] {
    border-color: var(--neon-green);
}
@media (max-width: 480px) {
    .sort-filter-row[b-t0boip1pqj] {
        gap: 0.4rem;
    }
    .street-select[b-t0boip1pqj],
    .advsearch-trigger[b-t0boip1pqj] {
        height: 26px;
        font-size: 0.64rem;
    }
    .street-select[b-t0boip1pqj] {
        padding: 0 1.4rem 0 0.55rem;
    }
    .advsearch-trigger[b-t0boip1pqj] {
        padding: 0 0.6rem;
    }
}

/* Advanced Search modal — a genuine popped-up dialog, not a quiet utility control like the
   sort/rarity row above. It gets the site's full "street" treatment (dark card, thick black
   border, offset neon shadow) because opening it is a deliberate, infrequent action that should
   feel like its own moment, not a subtle inline tweak. backdrop-filter blurs whatever's behind
   it live as the page scrolls, so no JS scroll-lock or body-class interop is needed to sell the
   "everything else stepped back" effect. */
/* align-items: flex-start (not center) is deliberate — centering re-measures every time the
   result count changes (typing narrows/widens the feed, "No drops match" collapses it, etc.),
   which was making the whole box drift up and down as you typed. Anchoring the top edge a fixed
   distance down means the box only ever grows/shrinks from the bottom; the top never moves. */
.advsearch-overlay[b-t0boip1pqj] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}
.advsearch-modal[b-t0boip1pqj] {
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    margin-top: 7vh;
    display: flex;
    flex-direction: column;
    background-color: var(--dark-card);
    border: var(--thick-border);
    box-shadow: var(--street-shadow-green);
    padding: 1.75rem;
    position: relative;
}
.advsearch-close[b-t0boip1pqj] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.advsearch-close:hover[b-t0boip1pqj] {
    color: #ffffff;
}
.advsearch-title[b-t0boip1pqj] {
    font-family: 'Archivo Black', sans-serif;
    color: #ffffff;
    margin: 0 0 1rem;
    font-size: 1.3rem;
    padding-right: 1.5rem;
}
.advsearch-input[b-t0boip1pqj] {
    width: 100%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    background-color: #0b0b0b;
    color: #ffffff;
    border: 2px solid #222222;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.advsearch-input:focus[b-t0boip1pqj] {
    outline: none;
    border-color: var(--neon-green);
}
.advsearch-options[b-t0boip1pqj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
}
.advsearch-toggle[b-t0boip1pqj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    color: #ffffff;
    cursor: pointer;
}
.advsearch-toggle input[type="checkbox"][b-t0boip1pqj] {
    width: 16px;
    height: 16px;
    accent-color: var(--neon-green);
    cursor: pointer;
}
.advsearch-price-range[b-t0boip1pqj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.advsearch-price-input[b-t0boip1pqj] {
    width: 68px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    background-color: #0b0b0b;
    color: #ffffff;
    border: 1px solid #2a2a2a;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.advsearch-price-input:focus[b-t0boip1pqj] {
    outline: none;
    border-color: var(--neon-green);
}
.advsearch-price-sep[b-t0boip1pqj] {
    color: var(--text-muted);
}
.advsearch-results[b-t0boip1pqj] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #222222;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.advsearch-hint[b-t0boip1pqj] {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    margin: 1rem 0;
}
.advsearch-result-row[b-t0boip1pqj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.advsearch-result-row:hover[b-t0boip1pqj] {
    border-color: var(--neon-green);
    background-color: #0b0b0b;
}
.advsearch-result-img[b-t0boip1pqj] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #0b0b0b;
}
.advsearch-result-name[b-t0boip1pqj] {
    flex: 1;
    font-size: 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.advsearch-result-price[b-t0boip1pqj] {
    font-family: 'Archivo Black', sans-serif;
    color: var(--neon-green);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.advsearch-more[b-t0boip1pqj] {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
    margin: 0.5rem 0 0;
}
@media (max-width: 480px) {
    .advsearch-modal[b-t0boip1pqj] {
        padding: 1.25rem;
        max-height: 88vh;
        margin-top: 3vh;
    }
    .advsearch-title[b-t0boip1pqj] {
        font-size: 1.1rem;
    }
    .advsearch-options[b-t0boip1pqj] {
        gap: 0.75rem;
    }
}

/* Product grid pagination — deliberately the plainest control on the page. Every other button on
   this site (filter tabs, btn-street, the old boxed/shaped pagination attempts) leans on thick
   borders, offset shadows, and bounce transitions for its "street" identity; stacked at the
   bottom of a grid that's already busy with badges/prices/images, that same treatment on 5+
   buttons in a row read as loud and "weird" rather than confident. Flat text with just a color
   change and a small underline dot is deliberately the opposite move — quiet enough that the
   product grid above it stays the visual focus. */
.pagination-bar[b-t0boip1pqj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 2.5rem;
}
.pagination-btn[b-t0boip1pqj] {
    font-size: 0.95rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.35rem;
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Just a color fade — no transform, no shadow, nothing that can affect an ancestor's
       scrollable overflow region or need a bounce curve tuned around. */
    transition: color 0.15s ease;
}
.pagination-btn:hover:not(:disabled):not(.active)[b-t0boip1pqj] {
    color: #ffffff;
}
.pagination-btn:focus[b-t0boip1pqj] {
    outline: none;
}
.pagination-btn:focus-visible[b-t0boip1pqj] {
    outline: 2px solid var(--neon-green);
    outline-offset: 2px;
}
.pagination-btn.active[b-t0boip1pqj] {
    color: var(--neon-green);
    font-weight: 800;
    cursor: default;
}
/* Small centered dot under the current page instead of a filled/boxed "active" button — reads
   clearly as a state indicator without adding any more visual weight than the number itself. */
.pagination-btn.active[b-t0boip1pqj]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--neon-green);
}
.pagination-btn:disabled[b-t0boip1pqj] {
    opacity: 0.3;
    cursor: not-allowed;
}
.pagination-ellipsis[b-t0boip1pqj] {
    color: #555555;
    padding: 0 0.15rem;
    user-select: none;
}
@media (max-width: 480px) {
    .pagination-btn[b-t0boip1pqj] {
        min-width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    .pagination-bar[b-t0boip1pqj] {
        gap: 0.2rem;
    }
}

/* Monthly boxes switched off by an admin (SiteSections.MonthlyCratesEnabled): the option is dimmed
   and unselectable, with a COMING SOON banner running across it. .disabled alone would fade the whole
   option (banner included), so the dimming here is applied to everything EXCEPT the banner. */
.builder-option.builder-option-coming-soon[b-t0boip1pqj] {
    opacity: 1;
    overflow: hidden;
}

.builder-option.builder-option-coming-soon > *:not(.coming-soon-banner)[b-t0boip1pqj] {
    opacity: 0.35;
    filter: blur(1.5px);
}

.coming-soon-banner[b-t0boip1pqj] {
    position: absolute;
    top: 50%;
    left: -8%;
    width: 116%;
    transform: translateY(-50%) rotate(-6deg);
    padding: 0.55rem 0;
    text-align: center;
    background-color: var(--neon-purple);
    color: #ffffff;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
    font-size: 1.05rem;
    letter-spacing: 3px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
}
/* /Components/Pages/Speakeasy.razor.rz.scp.css */
.speakeasy-minimal-stage[b-a6zjyo95cp] {
    position: relative;
    min-height: calc(100vh - 4rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505;
    padding: 3rem 1.5rem;
}

.speakeasy-minimal-container[b-a6zjyo95cp] {
    max-width: 520px;
    width: 100%;
    text-align: left;
}

.speakeasy-dashboard[b-a6zjyo95cp] {
    display: flex;
    flex-direction: column;
}

.speakeasy-main-empty[b-a6zjyo95cp] {
    margin-top: 1.5rem;
}

/* Above mobile/tablet, the single 520px column wastes most of the viewport, so the portal
   switches to a sticky identity rail (status + account + actions) beside a wider content
   column (Snack-o-meter, level progression, order history, claimed prizes). */
@media (min-width: 992px) {
    .speakeasy-minimal-stage[b-a6zjyo95cp] {
        align-items: flex-start;
        padding-top: 4rem;
    }

    .speakeasy-minimal-container[b-a6zjyo95cp] {
        max-width: 1100px;
    }

    .speakeasy-dashboard[b-a6zjyo95cp] {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .speakeasy-sidebar[b-a6zjyo95cp] {
        flex: 0 0 340px;
        position: sticky;
        top: 2rem;
    }

    .speakeasy-main[b-a6zjyo95cp] {
        flex: 1 1 0%;
        min-width: 0;
    }

    .speakeasy-main-empty[b-a6zjyo95cp] {
        margin-top: 0;
        height: 100%;
    }
}

.minimal-level-tag[b-a6zjyo95cp] {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(var(--neon-green-rgb), 0.3);
    margin-bottom: 0.5rem;
}

.minimal-title[b-a6zjyo95cp] {
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #ffffff;
    letter-spacing: -2px;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}

.minimal-subtitle[b-a6zjyo95cp] {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 0.75rem;
}

.status-console[b-a6zjyo95cp] {
    background-color: #0a0a0a;
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.status-console-header[b-a6zjyo95cp] {
    color: var(--neon-purple);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #1c1c1c;
    padding-bottom: 0.6rem;
    margin-bottom: 0.15rem;
}

/* Label stacked above its value (not side-by-side) — a label/value pair sharing one line left
   too little room for longer values like "1 SPIN AVAILABLE (REQ. EMAIL)", which wrapped into a
   cramped second line. Stacking gives every value the console's full width to itself. */
.console-line[b-a6zjyo95cp] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0;
}

.console-line + .console-line[b-a6zjyo95cp] {
    border-top: 1px solid #161616;
}

.line-label[b-a6zjyo95cp] {
    color: #555;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
}

.line-val[b-a6zjyo95cp] {
    font-weight: bold;
    font-size: 0.85rem;
}

.line-val-row[b-a6zjyo95cp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.text-neon-green[b-a6zjyo95cp] {
    color: var(--neon-green) !important;
    text-shadow: 0 0 6px rgba(var(--neon-green-rgb), 0.2);
}

.text-neon-purple[b-a6zjyo95cp] {
    color: var(--neon-purple) !important;
    text-shadow: 0 0 6px rgba(186, 85, 211, 0.2);
}

.btn-minimal-green[b-a6zjyo95cp] {
    background: #000;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(var(--neon-green-rgb), 0.1);
    transition: all 0.2s ease;
}
.btn-minimal-green:hover[b-a6zjyo95cp] {
    background: var(--neon-green);
    color: #000;
    box-shadow: 0 0 20px rgba(var(--neon-green-rgb), 0.3);
}
.btn-minimal-green:active[b-a6zjyo95cp] {
    transform: scale(0.98);
}

.btn-minimal-dark[b-a6zjyo95cp] {
    background: #000;
    color: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.btn-minimal-dark:hover[b-a6zjyo95cp] {
    background: #111;
    border-color: #555;
}
.btn-minimal-dark:active[b-a6zjyo95cp] {
    transform: scale(0.98);
}

.btn-minimal-purple[b-a6zjyo95cp] {
    background: #000;
    color: var(--neon-purple);
    border: 2px solid var(--neon-purple);
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(186, 85, 211, 0.1);
    transition: all 0.2s ease;
}
.btn-minimal-purple:hover[b-a6zjyo95cp] {
    background: var(--neon-purple);
    color: #000;
    box-shadow: 0 0 20px rgba(186, 85, 211, 0.3);
}
.btn-minimal-purple:active[b-a6zjyo95cp] {
    transform: scale(0.98);
}

/* "Under maintenance" variant of the .btn-minimal-* family above. Reads as the real button still
   sitting there, working, just taped over — not as a different, dead button — so it keeps the same
   green shape/border .btn-minimal-green has, with its real label still visible underneath, just
   blurred out of legibility. A rotated caution-tape ribbon (.caution-ribbon) sits on top of that,
   carrying the actual "under maintenance" message. This is a genuinely disabled <button> now (see
   Speakeasy.razor) — cursor: not-allowed matches that real state, it's not just styling. */
.btn-minimal-caution[b-a6zjyo95cp] {
    position: relative;
    background: #000;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: not-allowed;
    /* No overflow: hidden — the ribbon and its fold tabs below are meant to visibly overhang the
       button's edges, not be clipped flush to it, so the tape reads as wrapped around the button
       rather than a flat sticker cut exactly to fit it. */
}

/* The real label, left in place and still readable-shaped, just blurred — this is what makes the
   ribbon below read as tape stuck over something, rather than a blank warning button. */
.caution-label[b-a6zjyo95cp] {
    display: block;
    filter: blur(3px);
    opacity: 0.6;
    user-select: none;
}

/* The tape's main strip, rotated slightly off-axis above the blurred label. The diagonal
   black/yellow hazard pattern now lives in the background itself (two thin gradient bands pinned
   to the top/bottom edges, solid black everywhere else) instead of on ::before/::after — those are
   freed up below for the fold tabs that sell the "wrapped around the edge" look. */
.caution-ribbon[b-a6zjyo95cp] {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) rotate(-4deg);
    background:
        repeating-linear-gradient(45deg, #000 0px, #000 6px, var(--neon-yellow) 6px, var(--neon-yellow) 12px) top / 100% 5px no-repeat,
        repeating-linear-gradient(45deg, #000 0px, #000 6px, var(--neon-yellow) 6px, var(--neon-yellow) 12px) bottom / 100% 5px no-repeat,
        #000;
    color: var(--neon-yellow);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-align: center;
    padding: 0.45rem 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

/* Fold tabs at each end — small dark triangular points tapering past the ribbon's own edges, as if
   the tape is being pinched and tucked around behind the button rather than ending in a flat cut.
   Darkened relative to the ribbon body so they read as the shadowed underside of the fold, the same
   trick physical ribbon/banner badges use to suggest they wrap around a corner. */
.caution-ribbon[b-a6zjyo95cp]::before,
.caution-ribbon[b-a6zjyo95cp]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    background: #000;
    filter: brightness(0.55);
}
.caution-ribbon[b-a6zjyo95cp]::before {
    left: -11px;
    clip-path: polygon(100% 0, 100% 100%, 0% 50%);
}
.caution-ribbon[b-a6zjyo95cp]::after {
    right: -11px;
    clip-path: polygon(0% 0, 0% 100%, 100% 50%);
}

.btn-street-dark[b-a6zjyo95cp] {
    background: #0d0d0d;
    color: #888;
    border: 1px solid #222;
    border-radius: 0px;
    padding: 0.5rem;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.btn-street-dark:hover[b-a6zjyo95cp] {
    background: #151515;
    color: #fff;
    border-color: #444;
}

.text-danger[b-a6zjyo95cp] {
    color: #ff3333 !important;
}
.minimal-level-tag.text-danger[b-a6zjyo95cp] {
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.3);
}

.table-responsive[b-a6zjyo95cp] {
    border: 1px solid #1c1c1c;
    background-color: #050505;
}

.table[b-a6zjyo95cp] {
    margin: 0;
}

.table-bordered th[b-a6zjyo95cp], .table-bordered td[b-a6zjyo95cp] {
    border-color: #1c1c1c !important;
    vertical-align: middle;
}

.table th[b-a6zjyo95cp] {
    font-family: 'Archivo', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.bg-success-dark[b-a6zjyo95cp] {
    background-color: rgba(var(--neon-green-rgb), 0.1) !important;
    border: 1px solid var(--neon-green) !important;
    color: var(--neon-green) !important;
}

.bg-warning-dark[b-a6zjyo95cp] {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid #ffc107 !important;
    color: #ffc107 !important;
}

.font-bold[b-a6zjyo95cp] {
    font-weight: 700;
}

.tracking-wider[b-a6zjyo95cp] {
    letter-spacing: 2px;
}
/* /Components/Pages/SpeakeasySnackMeter.razor.rz.scp.css */
/* Locked (Level 1) state — a real, blurred-out preview of the meter sitting behind a clearance
   gate, so the payoff is visible but unreadable rather than the panel simply being absent. */
.snackmeter-locked-card[b-k6rmq7f6yl] {
    border: 2px dashed #2a2a3a !important;
    min-height: 340px;
}

.snackmeter-locked-preview[b-k6rmq7f6yl] {
    filter: blur(6px) grayscale(60%);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.snackmeter-lock-overlay[b-k6rmq7f6yl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: rgba(5, 5, 8, 0.72);
}

.snackmeter-lock-icon[b-k6rmq7f6yl] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 10px rgba(var(--neon-purple-rgb), 0.6));
}

.snackmeter-lock-copy[b-k6rmq7f6yl] {
    max-width: 420px;
    line-height: 1.5;
}

.snackmeter-lock-progress-wrap[b-k6rmq7f6yl] {
    width: 100%;
    max-width: 340px;
}
/* /Components/Pages/SpeakeasyWelcomeModal.razor.rz.scp.css */
.speakeasy-welcome-overlay[b-9dei6im8gi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.speakeasy-welcome-card[b-9dei6im8gi] {
    background: #0a0a0a;
    border: 2px solid var(--neon-green);
    box-shadow: 0 0 30px rgba(var(--neon-green-rgb), 0.15);
    max-width: 440px;
    width: 100%;
    padding: 2rem;
    text-align: left;
}

.welcome-perk-list[b-9dei6im8gi] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1.4;
}
/* /Components/Pages/SpinnerReelPanel.razor.rz.scp.css */
.spinner-outer[b-gokgv0jra5] {
    background-color: #121212;
    border: var(--thick-border);
    box-shadow: var(--street-shadow-purple);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.spinner-track-container[b-gokgv0jra5] {
    border: 2px solid #222;
    background-color: #080808;
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 1rem 0;
}
.spinner-pointer[b-gokgv0jra5] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: var(--neon-green);
    z-index: 3;
    box-shadow: 0 0 10px var(--neon-green);
    transform: translateX(-50%);
}
.spinner-reel[b-gokgv0jra5] {
    position: absolute;
    display: flex;
    gap: 15px;
    left: 50%;
    width: max-content;
}
.spinner-card[b-gokgv0jra5] {
    flex: 0 0 120px;
    width: 120px;
    height: 110px;
    background-color: #111;
    border: 2px solid #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    position: relative;
    transition: all 0.3s ease;
}
.spinner-card.rare[b-gokgv0jra5] {
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 5px rgba(var(--neon-purple-rgb), 0.4);
}
.spinner-card.ultra-rare[b-gokgv0jra5] {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 5px rgba(var(--neon-green-rgb), 0.4);
}
.spinner-card-name[b-gokgv0jra5] {
    font-size: 0.7rem;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}
/* Applied to a .spinner-card while the reel highlights it as the winning card
   (see SpinnerReelPanel.razor's isWinnerCard). */
.winner-glow-pulse[b-gokgv0jra5] {
    animation: winnerGlow-b-gokgv0jra5 1s ease-in-out infinite alternate;
    border-color: var(--neon-green) !important;
    z-index: 10;
    transform: scale(1.08);
    box-shadow: 0 0 20px var(--neon-green), inset 0 0 10px rgba(var(--neon-green-rgb), 0.5);
}
@keyframes winnerGlow-b-gokgv0jra5 {
    from {
        box-shadow: 0 0 15px var(--neon-green), inset 0 0 5px rgba(var(--neon-green-rgb), 0.3);
    }
    to {
        box-shadow: 0 0 30px var(--neon-green), inset 0 0 20px rgba(var(--neon-green-rgb), 0.7);
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* Link cards to the full policy pages, shown at the top of the FAQs & Policies tab. A plain border
   highlight on hover (no movement) so they read as links without becoming a "pop out" card. */
.policy-link-card[b-a1wptpqxqc] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1rem;
    background-color: #000000;
    border: 2px solid #2a2a2a;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.policy-link-card:hover[b-a1wptpqxqc],
.policy-link-card:focus-visible[b-a1wptpqxqc] {
    border-color: var(--neon-green);
}

.policy-link-icon[b-a1wptpqxqc] {
    font-size: 1.4rem;
    line-height: 1;
}

.policy-link-title[b-a1wptpqxqc] {
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.policy-link-desc[b-a1wptpqxqc] {
    color: var(--text-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .policy-link-card[b-a1wptpqxqc] {
        transition: none;
    }
}
/* /Components/Pages/SyndicateGateCard.razor.rz.scp.css */
.terminal-glow-card[b-t3tl7w6ajm]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-green));
    z-index: -1;
    opacity: 0.15;
}
.gate-card[b-t3tl7w6ajm] {
    max-width: 900px;
    width: 100%;
    background-color: #050505;
    border: 3px solid #111;
    box-shadow: 0 0 30px rgba(var(--neon-purple-rgb), 0.15);
}
.gate-badge-spaced[b-t3tl7w6ajm] {
    letter-spacing: 2px;
}
.gate-warning-text[b-t3tl7w6ajm] {
    font-size: 0.7rem;
    color: #ff3385 !important;
    letter-spacing: 0.5px;
}
.gate-terminal-block[b-t3tl7w6ajm] {
    background-color: #0b0b0b;
    border: 1px solid #222;
    font-size: 0.8rem;
    color: var(--neon-green);
    line-height: 1.6;
}
.gate-spinner-icon[b-t3tl7w6ajm] {
    color: var(--neon-green) !important;
}
.gate-email-input[b-t3tl7w6ajm] {
    border: 2px solid #333;
    font-size: 0.9rem;
}
/* Friendly heads-up (not an error) — dashed border + soft tint reads as "just so you know," distinct
   from .gate-error-box's solid red styling below for actual failures. */
.maintenance-notice[b-t3tl7w6ajm] {
    background-color: rgba(var(--neon-purple-rgb), 0.08);
    border: 1px dashed var(--neon-purple);
    border-radius: 2px;
}
.maintenance-notice-icon[b-t3tl7w6ajm] {
    font-size: 1.5rem;
    line-height: 1;
}
.gate-error-box[b-t3tl7w6ajm] {
    background-color: #260011;
    border-color: #ff0055;
    color: #ff3385;
    font-size: 0.75rem;
}
.shake-error[b-t3tl7w6ajm] {
    animation: shake-b-t3tl7w6ajm 0.4s ease-in-out;
}
.shake-error label[b-t3tl7w6ajm] {
    color: #ff0055 !important;
}
.shake-error input[b-t3tl7w6ajm] {
    border-color: #ff0055 !important;
    box-shadow: 0 0 8px #ff0055 !important;
}
@keyframes shake-b-t3tl7w6ajm {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.scanlines-overlay[b-t3tl7w6ajm] {
    pointer-events: none;
    opacity: 0.08;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06)
    );
    background-size: 100% 4px, 6px 100%;
}
/* /Components/Pages/TestimonialCard.razor.rz.scp.css */
.testimonial-card[b-28wtizu6fz] { background-color: var(--dark-card); box-shadow: var(--street-shadow); }
.testimonial-card-green[b-28wtizu6fz] { border-left: 5px solid var(--neon-green) !important; }
.testimonial-card-purple[b-28wtizu6fz] { border-left: 5px solid var(--neon-purple) !important; }
.testimonial-card-yellow[b-28wtizu6fz] { border-left: 5px solid var(--neon-yellow) !important; }
/* /Components/Pages/ThePlug.razor.rz.scp.css */
.plug-dossier-card[b-0ncyauiiin] {
    box-shadow: 0 0 30px rgba(var(--neon-purple-rgb), 0.2), var(--street-shadow-purple);
}

.plug-photo-stage[b-0ncyauiiin] {
    box-shadow: 0 0 20px rgba(var(--neon-purple-rgb), 0.3);
    max-width: 440px;
    width: 100%;
}

.plug-trench-img[b-0ncyauiiin] {
    border: 2px solid #000;
    filter: contrast(1.05) saturate(1.1);
}

.confidential-stamp[b-0ncyauiiin] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff3838;
    color: #ffffff;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.8rem;
    padding: 4px 12px;
    transform: rotate(12deg);
    border: 2px solid #000;
    box-shadow: 3px 3px 0px #000;
    z-index: 10;
    user-select: none;
    letter-spacing: 1.5px;
}

/* Manifesto Lines */
.plug-manifesto-container[b-0ncyauiiin] {
    box-shadow: 0 0 25px rgba(255, 251, 0, 0.15);
}

.manifesto-grid[b-0ncyauiiin] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manifesto-line[b-0ncyauiiin] {
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .manifesto-line[b-0ncyauiiin] {
        font-size: 2rem;
    }
}

.top5-card[b-0ncyauiiin] {
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.top5-card:hover[b-0ncyauiiin] {
    transform: translateY(-4px);
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 15px rgba(var(--neon-purple-rgb), 0.2);
}

@media (max-width: 767.98px) {
    .plug-photo-stage[b-0ncyauiiin] {
        max-width: 280px !important;
        margin: 0 auto 0.5rem auto !important;
    }

    .confidential-stamp[b-0ncyauiiin] {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        top: 10px !important;
        right: 10px !important;
    }

    .manifesto-line[b-0ncyauiiin] {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.5px !important;
    }

    .plug-manifesto-container[b-0ncyauiiin] {
        padding: 1.25rem 0.85rem !important;
    }
}
/* /Components/Pages/Ticker.razor.rz.scp.css */
.ticker-container[b-zymaejsda1],
.ticker-container-reverse[b-zymaejsda1] {
    border-top: var(--thick-border);
    border-bottom: var(--thick-border);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.8rem 0;
    display: flex;
    /* scale() is purely visual (doesn't affect layout/scrollWidth) — it's what
       covers the tiny corner gap the rotation would otherwise leave, without
       needing viewport-unit bleed tricks that overflow past the scrollbar. */
    position: relative;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.ticker-container[b-zymaejsda1] {
    background-color: #000000;
    transform: rotate(-1.5deg) scale(1.02);
    z-index: 10;
}
.ticker-container-reverse[b-zymaejsda1] {
    background-color: var(--neon-green);
    color: #000000;
    transform: rotate(1.5deg) scale(1.02);
    z-index: 9;
}
.ticker-content[b-zymaejsda1],
.ticker-content-reverse[b-zymaejsda1] {
    display: inline-flex;
    gap: 2rem;
}
.ticker-content[b-zymaejsda1] {
    animation: marquee-b-zymaejsda1 16s linear infinite;
}
.ticker-content-reverse[b-zymaejsda1] {
    animation: marquee-reverse-b-zymaejsda1 16s linear infinite;
}
.ticker-item[b-zymaejsda1] {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}
.ticker-dot[b-zymaejsda1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--neon-green);
    display: inline-block;
}
.ticker-container-reverse .ticker-dot[b-zymaejsda1] {
    background-color: #000000;
}

/* -16.6667% = -100%/6, matching Ticker.razor's RepeatCount — shifts by exactly one Items-set
   width per cycle (not one of the 6 rendered copies' worth), keeping the loop seamless. */
@keyframes marquee-b-zymaejsda1 {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-16.6667%, 0, 0); }
}
@keyframes marquee-reverse-b-zymaejsda1 {
    0% { transform: translate3d(-16.6667%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 480px) {
    .ticker-container[b-zymaejsda1],
    .ticker-container-reverse[b-zymaejsda1] {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        transform: rotate(-1deg) scale(1.01);
    }
    .ticker-container-reverse[b-zymaejsda1] {
        transform: rotate(1deg) scale(1.01);
    }
}

/* No !important needed here — div.ticker-content's element+class specificity already beats
   the plain .ticker-content rule above, and this rule also comes later in source order. Both
   were left over from before the real fix (Ticker.razor's ShouldRender() override, below),
   back when the animation kept getting reset and every attempt at a CSS-only fix seemed to
   fail regardless of specificity. */
@media (max-width: 991.98px) {
    .ticker-content[b-zymaejsda1],
    div.ticker-content[b-zymaejsda1] {
        animation: marquee-b-zymaejsda1 160s linear infinite;
        animation-duration: 160s;
    }
    .ticker-content-reverse[b-zymaejsda1],
    div.ticker-content-reverse[b-zymaejsda1] {
        animation: marquee-reverse-b-zymaejsda1 160s linear infinite;
        animation-duration: 160s;
    }
}
/* /Components/Pages/UndergroundComingSoon.razor.rz.scp.css */
.coming-soon-card[b-4blll4qs9k] {
    max-width: 640px;
}

/* Same flicker the nav's "COMING SOON" link uses (.nav-link-underground in NavMenu.razor.css), so the
   lock here reads as the same thing the visitor just clicked. */
.coming-soon-lock[b-4blll4qs9k] {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(var(--neon-purple-rgb), 0.7));
    animation: comingSoonFlicker-b-4blll4qs9k 4.5s infinite;
}

@keyframes comingSoonFlicker-b-4blll4qs9k {
    0%, 88%, 91%, 93%, 100% { opacity: 1; }
    89%, 90%, 92% { opacity: 0.45; }
}

.coming-soon-input[b-4blll4qs9k] {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .coming-soon-lock[b-4blll4qs9k] {
        animation: none;
    }
}