/* =========================
   ROOT
========================= */

:root {

    --bg: #090909;
    --bg-secondary: #111111;
    --bg-card: #151515;
    --bg-card-hover: #1c1c1c;

    --border: #292929;
    --border-hover: #444444;

    --text: #f5f5f5;
    --text-secondary: #9a9a9a;
    --text-muted: #666666;

    --accent: #f5c518;
    --accent-hover: #ffd84d;

    --danger: #ff5a5a;

    --radius-small: 8px;
    --radius: 14px;
    --radius-large: 22px;

    --transition: 0.2s ease;

}


/* =========================
   RESET
========================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        radial-gradient(
            circle at top,
            #171717 0%,
            var(--bg) 45%
        );

.logo {

    display: flex;

    align-items: center;

    background: #f5f5f5;

    padding: 5px 10px;

    border-radius: 8px;

}


.logo-image {

    display: block;

    height: 45px;

    width: auto;

}

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    min-height: 100vh;

}


button,
input,
select {
    font: inherit;
}


/* =========================
   HEADER
========================= */

.site-header {

    position: sticky;
    top: 0;

    z-index: 100;

    background: rgba(9, 9, 9, 0.9);

    backdrop-filter: blur(16px);

    border-bottom:
        1px solid var(--border);

}


.header-inner {

    max-width: 1500px;

    margin: 0 auto;

    padding:
        16px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================
   LOGO
========================= */

.logo {

    display: flex;

    align-items: baseline;

    gap: 7px;

    text-decoration: none;

    color: var(--text);

    white-space: nowrap;

}


.logo-main {

    font-size: 1.4rem;

    font-weight: 900;

    letter-spacing: 0.08em;

}


.logo-sub {

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.15em;

}


/* =========================
   NAVIGATION
========================= */

.category-nav {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

}


.nav-button {

    border: none;

    background: transparent;

    color: var(--text-secondary);

    padding:
        10px 16px;

    border-radius: var(--radius-small);

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition);

}


.nav-button:hover {

    color: var(--text);

    background: var(--bg-secondary);

}


.nav-button.active {

    background: var(--accent);

    color: #111;

    font-weight: 700;

}


/* =========================
   MAIN
========================= */

.main-content {

    max-width: 1500px;

    margin: 0 auto;

    padding:
        55px 28px 80px;

}


/* =========================
   INVENTORY HEADER
========================= */

.inventory-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 35px;

}


.eyebrow {

    margin: 0 0 10px;

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.15em;

}


.inventory-header h1 {

    margin: 0;

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.5rem
        );

    line-height: 1;

}


.inventory-header p {

    color: var(--text-secondary);

}


.inventory-count {

    min-width: 100px;

    text-align: right;

}


.inventory-count span {

    display: block;

    font-size: 2rem;

    font-weight: 800;

    color: var(--accent);

}


.inventory-count small {

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


/* =========================
   FILTERS
========================= */

.filters {

    display: grid;

    grid-template-columns:
        1fr
        220px
        auto;

    gap: 12px;

    margin-bottom: 35px;

}


.search-wrapper {

    position: relative;

}


.search-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    opacity: 0.5;

}


.search-wrapper input,
#set-filter {

    width: 100%;

    height: 48px;

    border:
        1px solid var(--border);

    background: var(--bg-secondary);

    color: var(--text);

    border-radius: var(--radius-small);

    outline: none;

}


.search-wrapper input {

    padding:
        0 16px 0 45px;

}


#set-filter {

    padding:
        0 15px;

    cursor: pointer;

}


.search-wrapper input:focus,
#set-filter:focus {

    border-color: var(--accent);

}


.clear-button {

    height: 48px;

    padding:
        0 20px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-small);

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

}


.clear-button:hover {

    color: var(--text);

    border-color: var(--border-hover);

}


/* =========================
   CARD GRID
========================= */

.card-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );

    gap: 18px;

}


/* =========================
   CARD
========================= */

.inventory-card {

    background: var(--bg-card);

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    cursor: pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);

}


.inventory-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--border-hover);

    background:
        var(--bg-card-hover);

}


.card-image-wrapper {

    position: relative;

    aspect-ratio:
        2.5 / 3.5;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #3d3d3d;

    overflow: hidden;

}


.card-image {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition:
        transform 0.3s ease;

}


.inventory-card:hover .card-image {

    transform:
        scale(1.04);

}


/* =========================
   CARD DETAILS
========================= */

.card-details {

    padding:
        14px;

}


.card-set {

    margin:
        0 0 6px;

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.card-name {

    margin: 0;

    font-size: 1rem;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.card-bottom {

    margin-top: 12px;

    padding-top: 10px;

    border-top:
        1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    color: var(--text-secondary);

    font-size: 0.78rem;

}


.card-quantity {

    color: var(--text);

    font-weight: 700;

}


/* =========================
   STATUS
========================= */

.status-message {

    padding: 50px;

    text-align: center;

    color: var(--text-secondary);

}


.status-message.error {

    color: var(--danger);

}


.hidden {

    display: none !important;

}


/* =========================
   EMPTY STATE
========================= */

.empty-state {

    text-align: center;

    padding:
        70px 20px;

}


.empty-icon {

    font-size: 3rem;

    margin-bottom: 15px;

}


.empty-state h2 {

    margin: 0 0 8px;

}


.empty-state p {

    color: var(--text-secondary);

}


/* =========================
   MODAL
========================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

}


.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter:
        blur(8px);

}


.modal-content {

    position: relative;

    z-index: 1;

    width: min(
        900px,
        100%
    );

    max-height: 90vh;

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(280px, 1fr);

    background:
        var(--bg-secondary);

    border:
        1px solid var(--border-hover);

    border-radius:
        var(--radius-large);

    overflow: hidden;

}


.modal-close {

    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 2;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.6);

    color: white;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

}


.modal-image-wrapper {

    min-height: 500px;

    background: #0a0a0a;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

}


.modal-image-wrapper img {

    max-width: 100%;

    max-height: 75vh;

    object-fit: contain;

}


.modal-details {

    padding: 55px 40px 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.modal-set {

    margin: 0 0 10px;

    color: var(--accent);

    font-weight: 700;

}


.modal-details h2 {

    margin:
        0 0 30px;

    font-size: 2rem;

}


.modal-meta {

    margin-bottom: 30px;

}


.meta-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        14px 0;

    border-bottom:
        1px solid var(--border);

    color: var(--text-secondary);

}


.meta-row strong {

    color: var(--text);

}


.facebook-button {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        0 20px;

    background:
        var(--accent);

    color: #111;

    text-decoration: none;

    border-radius:
        var(--radius-small);

    font-weight: 800;

    transition:
        transform var(--transition),
        background var(--transition);

}


.facebook-button:hover {

    background:
        var(--accent-hover);

    transform:
        translateY(-2px);

}


/* =========================
   FOOTER
========================= */

.site-footer {

    border-top:
        1px solid var(--border);

    padding:
        30px 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    color: var(--text-muted);

    font-size: 0.85rem;

}


.site-footer p {

    margin: 0;

}


.site-footer a {

    color: var(--text-secondary);

    text-decoration: none;

}


.site-footer a:hover {

    color: var(--accent);

}

.site-footer {
    margin-top: 60px;
    padding: 24px 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.footer-label {
    color: var(--text);
    font-weight: 600;
}

.footer-divider {
    color: var(--muted);
}

.site-footer a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--accent);
}



/* =========================
   RESPONSIVE
========================= */

@media (max-width: 850px) {

    .header-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .inventory-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .inventory-count {

        text-align: left;

    }


    .filters {

        grid-template-columns:
            1fr;

    }


    .modal-content {

        grid-template-columns:
            1fr;

    }


    .modal-image-wrapper {

        min-height: 350px;

    }

}


@media (max-width: 600px) {

    .main-content {

        padding:
            35px 16px 60px;

    }


    .header-inner {

        padding:
            14px 16px;

    }


    .category-nav {

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

    }


    .nav-button {

        padding:
            10px 6px;

        font-size: 0.75rem;

    }


    .card-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;

    }


    .card-details {

        padding:
            12px;

    }


    .card-name {

        font-size: 0.9rem;

    }


    .modal {

        padding: 10px;

    }


    .modal-details {

        padding:
            30px 24px;

    }


    .modal-image-wrapper {

        min-height: 300px;

        padding: 20px;

    }

}