/* ============================================================================
   Enhancements — layered on top of the original theme (theme.css).
   ----------------------------------------------------------------------------
   Nothing here restyles the existing design. It adds what a static site had no
   way to express: signed-in navigation states, a scroll-reactive navbar, form
   feedback, and the accessibility basics the original CSS was missing.

   Every colour below is taken from the existing palette:
     accent  #EA9C22   surface  #141313 / #1A1919
     border  rgba(255,255,255,.08)      muted  #8A8585
   ========================================================================= */

/* ── Accessibility ──────────────────────────────────────────────────────── */

/* The original stylesheet suppressed focus outlines site-wide, which made
   every page unusable by keyboard. Restored, in brand amber. */
:focus-visible {
    outline: 2px solid #EA9C22;
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
    padding: 10px 18px;
    background: #EA9C22;
    color: #0F0E0E;
    font-weight: 700;
    border-radius: 10px;
}

[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Navbar: scroll state ───────────────────────────────────────────────── */

/* Transparent over the hero, solid once scrolled — the original was solid
   always, which fought with the hero artwork. */
nav.navbar {
    transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
nav.navbar.navbar-scrolled {
    background: rgba(15, 14, 14, .92);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(255, 255, 255, .08);
}

/* Active page marker. */
nav.navbar .navbar-menu > li > a.is-active {
    color: #fff;
}
nav.navbar .navbar-menu > li > a.is-active::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 5px;
    border-radius: 2px;
    background: #EA9C22;
}

/* ── Navbar: unverified nudge ───────────────────────────────────────────── */

.nav-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, .35);
    background: rgba(249, 115, 22, .10);
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.nav-verify-badge:hover { background: rgba(249, 115, 22, .18); }

.nav-verify-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F97316;
}

/* ── Navbar: account dropdown ───────────────────────────────────────────── */

.nav-account { position: relative; }

.nav-account-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px 6px 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    color: #C9C5C5;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.nav-account-trigger:hover {
    color: #fff;
    border-color: rgba(234, 156, 34, .45);
    background: rgba(255, 255, 255, .03);
}
.nav-account-trigger i { font-size: 16px; transition: transform .2s ease; }
.nav-account-trigger i.is-flipped { transform: rotate(180deg); }

.nav-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EA9C22;
    color: #0F0E0E;
    font-size: 12px;
    font-weight: 800;
}

.nav-account-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 232px;
    padding: 6px 0;
    background: #141313;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
    z-index: 1200;
    overflow: hidden;
}

.nav-dropdown-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav-dropdown-head strong { font-size: 14px; color: #fff; }
.nav-dropdown-head span {
    font-size: 12px;
    color: #8A8585;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-dropdown a,
.nav-dropdown-signout {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    color: #C9C5C5;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.nav-dropdown a:hover,
.nav-dropdown-signout:hover { background: rgba(255, 255, 255, .05); color: #fff; }

.nav-dropdown-accent { color: #EA9C22 !important; font-weight: 600; }
.nav-dropdown form { border-top: 1px solid rgba(255, 255, 255, .07); }

/* ── Flash messages ─────────────────────────────────────────────────────── */

.flash-message {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 100px 0 -60px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
}
.flash-message i { font-size: 18px; flex-shrink: 0; }

.flash-success {
    color: #22C55E;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .35);
}
.flash-error {
    color: #EF4444;
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .35);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 968px) {
    /* The original toggled a class from an inline onclick; Alpine sets
       .is-open instead. Same visual result, no global function. */
    nav.navbar .navbar-menu.is-open { display: flex; }

    .nav-account { width: 100%; }
    .nav-account-trigger { width: 100%; justify-content: center; }
    .nav-dropdown {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }
    .nav-account-name { max-width: none; }
    .flash-message { margin: 90px 0 -40px; }
}

/* ============================================================================
   Auth overlay
   ----------------------------------------------------------------------------
   Replaces the standalone /auth/login and /auth/register pages. Same visual
   language as the rest of the theme — near-black surfaces, amber accent,
   Outfit — so it reads as part of the site rather than a bolted-on widget.
   ========================================================================= */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
}

.auth-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, .78);
    backdrop-filter: blur(6px);
}

.auth-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 32px;
    background: #121111;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
    animation: authModalIn .22s ease;
}

@keyframes authModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #8A8585;
    font-size: 19px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.auth-modal-close:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }

.auth-modal-head { text-align: center; margin-bottom: 22px; }
.auth-modal-logo { height: 34px; width: auto; margin-bottom: 16px; }
.auth-modal-head h2 { font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.auth-modal-head p  { font-size: 13.5px; color: #8A8585; }

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
}
.auth-tab {
    padding: 9px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #8A8585;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.auth-tab.is-active { background: #EA9C22; color: #0F0E0E; }
.auth-tab:not(.is-active):hover { color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 15px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 13px; font-weight: 600; color: #C9C5C5; }
.auth-field input {
    width: 100%;
    padding: 11px 13px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    transition: border-color .2s ease, background-color .2s ease;
}
.auth-field input:focus {
    border-color: #EA9C22;
    background: rgba(255, 255, 255, .06);
    outline: none;
}
.auth-field input::placeholder { color: #6A6666; }
.auth-field small { font-size: 11.5px; color: #6A6666; }

.auth-field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #C9C5C5;
    cursor: pointer;
}
.auth-checkbox input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: #EA9C22;
    cursor: pointer;
}
.auth-terms { line-height: 1.5; }
.auth-terms a { color: #EA9C22; text-decoration: underline; }

.auth-link { font-size: 13px; color: #EA9C22; text-decoration: none; white-space: nowrap; }
.auth-link:hover { text-decoration: underline; }

.auth-submit {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: 11px;
    color: #EF4444;
    font-size: 13px;
    line-height: 1.45;
}
.auth-error i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.auth-switch { text-align: center; font-size: 13px; color: #8A8585; }
.auth-switch button {
    background: none;
    border: 0;
    padding: 0;
    color: #EA9C22;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Navbar Register/Login are <button> now, not <a> — the theme styles the
   anchors, so normalise the button box model to match exactly. */
nav.navbar .navbar-actions button.btn-primary,
nav.navbar .navbar-actions button.btn-secondary {
    font: inherit;
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 520px) {
    .auth-modal { padding: 26px 20px; }
    .auth-field-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Standalone auth panels (verify email, reset password) ──────────────── */
/* Same visual language as the auth overlay, but as a page — these are reached
   from an email link, so they cannot be a modal. */

.auth-panel {
    max-width: 520px;
    margin: 0 auto;
    padding: 36px;
    background: #121111;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    text-align: center;
}
.auth-panel h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.auth-panel p  { font-size: 14.5px; color: #C9C5C5; line-height: 1.6; margin-bottom: 14px; }
.auth-panel strong { color: #EA9C22; }
.auth-panel .auth-form { text-align: left; margin: 22px 0; }
.auth-panel form { margin: 20px 0; }

.auth-panel-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(234, 156, 34, .12);
    border: 1px solid rgba(234, 156, 34, .3);
    color: #EA9C22;
    font-size: 27px;
}

.auth-panel-muted { font-size: 13px !important; color: #8A8585 !important; }
.auth-panel-muted a { color: #EA9C22; text-decoration: underline; }

.auth-panel input[readonly] { opacity: .65; cursor: not-allowed; }

/* ==========================================================================
   Discord CTA
   ==========================================================================
   No rule needed. The original theme styled .btn-discord for a <button> that
   no script ever wired up — clicking it did nothing on every page that had
   one — and every ported page still renders a <button>, opening the invite
   from an @click handler. Rendering an <a> instead would need both the
   underline reset the theme never had to write AND width: fit-content, since
   .btn-discord (theme.css) sets no width and centres itself with
   margin-inline: auto, which is a no-op on a full-width block box. */

/* ==========================================================================
   Related products: rows that are not a multiple of three
   ==========================================================================
   product.css lays .products-grid out as three fixed 1fr tracks, because the
   original product pages hardcoded exactly three related cards on every page —
   including one for a product that was not in the catalog. This grid is driven
   by the catalog instead, so the row can hold two cards, or one.

   Three fixed tracks with two cards leaves a visibly empty cell on the right.
   These rules keep each card at exactly the width it has at three-up — the
   same track maths, (100% - 2 * 30px gap) / 3 — and centre the short row
   instead of left-aligning it against a hole. Card proportions are untouched;
   only the leftover space moves.

   Scoped to .related-products and bounded by min-width so product.css's own
   1024px (two-up) and 768px (single column) breakpoints still win below them.
   Browsers without :has() fall through to the current three-track behaviour. */

@media (min-width: 1025px) {
    .related-products .products-grid:has(> .related-product-card:last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, calc((100% - 60px) / 3)));
        justify-content: center;
    }
    .related-products .products-grid:has(> .related-product-card:only-child) {
        grid-template-columns: minmax(0, calc((100% - 60px) / 3));
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .related-products .products-grid:has(> .related-product-card:only-child) {
        grid-template-columns: minmax(0, calc((100% - 25px) / 2));
        justify-content: center;
    }
}

/* The original's related-card blurbs were one line each ("Kernel ESP + Aim
   with Vischeck"). These come from products.description_short, which is
   written for the store card and runs to a full sentence, so without a clamp
   one card in a row grows two lines taller than its neighbours. Two lines
   reserved, two lines shown — the row stays level whatever the catalog says.
   Nothing is truncated in the database, and the full text is still on the
   product's own page. */
.related-products .related-product-card .product-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.5 * 13px);   /* 2 lines at product.css's 13px/1.5 */
}