/*
 * Arcanne 2026 — refresh global inspirado en interfaces gaming limpias.
 * Esta capa mantiene toda la estructura existente y sustituye el acabado
 * recargado por superficies planas, contraste claro y brillo controlado.
 */

:root {
    --bg: #070a0e;
    --bg-soft: #0a0e14;
    --panel: #0d1219;
    --panel-solid: #10161e;
    --panel-strong: #141c26;
    --line: #202a36;
    --line-strong: #2b3846;
    --text: #f5f8fb;
    --muted: #8d99a8;
    --muted-strong: #bdc7d2;
    --cyan: #55d9ec;
    --violet: #9184ff;
    --gold: #f3c96b;
    --danger: #ff7373;
    --success: #63dfa0;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    --soft-glow: 0 0 28px rgba(85, 217, 236, 0.07);
    --radius: 10px;
    --max: 1240px;
}

html {
    color-scheme: dark;
    background: var(--bg);
}

body {
    color: var(--text);
    background: var(--bg) !important;
    background-image: none !important;
    font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
    letter-spacing: -0.005em;
}

body::before {
    inset: -180px auto auto -160px !important;
    width: 520px;
    height: 520px;
    background: #15333b !important;
    border-radius: 50%;
    opacity: 0.24;
    filter: blur(150px);
}

body::after {
    display: none !important;
}

::selection {
    color: #061015;
    background: #72e4f2;
}

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

/* Navegación */

.site-header {
    min-height: 68px;
    padding-inline: clamp(18px, 4vw, 44px);
    background: rgba(7, 10, 14, 0.94) !important;
    background-image: none !important;
    border-bottom: 1px solid #1b2530 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24) !important;
}

.brand {
    gap: 0.68rem;
}

.brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    padding: 5px;
    background: #0c1219 !important;
    background-image: none !important;
    border: 1px solid #23303c;
    border-radius: 9px !important;
    box-shadow: 0 0 22px rgba(85, 217, 236, 0.08);
}

.brand-copy strong {
    font-size: 0.93rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.brand-copy small {
    color: #687585;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.site-nav {
    gap: 0.22rem;
}

.site-nav a {
    position: relative;
    min-height: 36px;
    padding: 0.48rem 0.75rem;
    color: #919dab;
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: 7px !important;
    font-size: 0.84rem;
    font-weight: 700;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: #eaf8fb;
    background: #0e151d !important;
    border-color: #1e2a35 !important;
}

.site-nav a.is-active {
    color: var(--text);
    background: #111922 !important;
    border-color: #263440 !important;
}

.site-nav a.is-active::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    content: "";
    background: var(--cyan);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(85, 217, 236, 0.38);
}

.nav-menu,
.account-menu {
    padding: 0.42rem;
    background: #0c1118 !important;
    background-image: none !important;
    border: 1px solid #26323e !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.52) !important;
    backdrop-filter: none !important;
}

.nav-menu a,
.account-menu a {
    border-radius: 7px !important;
}

.nav-menu a:hover,
.account-menu a:hover {
    background: #131c25 !important;
}

/* Botones: colores sólidos, sin degradados */

.primary-button,
.ghost-button,
.subtle-button,
.header-tool,
button.primary-button,
button.ghost-button,
button.subtle-button {
    min-height: 42px;
    padding: 0.68rem 1rem;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: none !important;
    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.primary-button,
button.primary-button {
    color: #041217 !important;
    background: var(--cyan) !important;
    background-image: none !important;
    border: 1px solid #6ce1ef !important;
}

.primary-button:hover,
.primary-button:focus-visible,
button.primary-button:hover,
button.primary-button:focus-visible {
    color: #020b0e !important;
    background: #7be7f3 !important;
    border-color: #a1eff7 !important;
    box-shadow: 0 0 24px rgba(85, 217, 236, 0.18) !important;
    transform: translateY(-1px);
}

.ghost-button,
.subtle-button,
.header-tool,
button.ghost-button,
button.subtle-button {
    color: #d4dce4 !important;
    background: #111821 !important;
    background-image: none !important;
    border: 1px solid #283542 !important;
}

.ghost-button:hover,
.subtle-button:hover,
.header-tool:hover,
button.ghost-button:hover,
button.subtle-button:hover {
    color: #ffffff !important;
    background: #17212b !important;
    border-color: #3b4b5a !important;
}

.compact {
    min-height: 36px;
    padding: 0.48rem 0.78rem;
}

button:disabled,
.primary-button:disabled,
.ghost-button:disabled {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Portada */

.hero {
    min-height: calc(90svh - 68px);
    padding-top: clamp(5rem, 11vh, 8rem);
    padding-bottom: clamp(4rem, 9vh, 7rem);
    isolation: isolate;
    border-bottom: 1px solid #18212b;
    background: #070a0e;
}

.hero-visual {
    z-index: 0 !important;
    background-image: url("../assets/arcanne-hero.png") !important;
    background-position: center right !important;
    background-size: cover !important;
    opacity: 0.48;
    filter: saturate(0.88) contrast(1.08);
    transform: scale(1.01);
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: rgba(7, 10, 14, 0.42);
}

.hero::after {
    inset: auto 13% 12% auto !important;
    width: 310px !important;
    height: 180px;
    background: #6154cf !important;
    border-radius: 50%;
    opacity: 0.16;
    filter: blur(110px) !important;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
}

.hero-logo {
    width: 86px;
    height: 86px;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 0 20px rgba(85, 217, 236, 0.12));
}

.eyebrow,
.card-label {
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.hero h1 {
    font-size: clamp(4rem, 11vw, 8rem);
    font-weight: 950;
    line-height: 0.85;
    letter-spacing: -0.065em;
    text-shadow: none !important;
}

.hero-text {
    max-width: 52ch;
    margin-block: 1.45rem 1.8rem;
    color: #b5c0cb;
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    line-height: 1.7;
}

.hero-actions {
    gap: 0.65rem;
}

.session-line {
    width: fit-content;
    min-height: 34px;
    margin-top: 1.4rem;
    padding: 0.42rem 0.7rem;
    color: #9eabb8;
    background: #0b1117 !important;
    background-image: none !important;
    border: 1px solid #202c37;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.pulse {
    width: 7px;
    height: 7px;
    background: var(--success);
    box-shadow: 0 0 10px rgba(99, 223, 160, 0.52);
}

.network-strip {
    width: min(var(--max), calc(100% - 36px));
    margin: -34px auto 0;
    padding: 0;
    overflow: hidden;
    background: #0d131b !important;
    background-image: none !important;
    border: 1px solid #202c38 !important;
    border-radius: 11px !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.36) !important;
}

.network-strip article {
    min-height: 94px;
    padding: 1.2rem 1.35rem;
    background: transparent !important;
    background-image: none !important;
    border-color: #202a35 !important;
}

.network-strip span {
    color: #718090;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.network-strip strong {
    color: #edf4f8;
    font-size: 0.96rem;
}

/* Secciones y superficies */

.section,
.page-section {
    width: min(var(--max), calc(100% - 36px));
}

.page-section {
    padding-top: clamp(4.5rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
}

.page-section::before {
    inset: 2.5rem 0 auto !important;
    height: 1px !important;
    background: #1d2832 !important;
    opacity: 1 !important;
}

.section-heading {
    max-width: 760px;
}

.section-heading h1,
.section-heading h2 {
    color: #f5f8fa;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-shadow: none !important;
}

.section-heading h1 {
    font-size: clamp(2.55rem, 6vw, 5rem);
}

.section-heading p:not(.eyebrow) {
    color: #97a5b3;
    line-height: 1.7;
}

.account-card,
.command-card,
.category-panel,
.cart-panel,
.staff-card,
.auth-option,
.modal,
.player-search-panel,
.player-profile-view,
.cart-page-panel,
.modes-grid article,
.rank-stage,
.account-overview > section,
.support-compose,
.my-ticket-list,
.staff-workspace,
.ticket-detail,
.admin-workspace,
.admin-activity,
.staff-console > aside,
.skin-stage,
.game-stat-menu,
.team-member,
.data-table,
.admin-form-collapse,
.bonus-panel,
.glass-card {
    color: var(--text);
    background: var(--panel) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    box-shadow: var(--shadow) !important;
}

.account-card:hover,
.command-card:hover,
.staff-card:hover,
.team-member:hover,
.modes-grid article:hover {
    border-color: #30404f !important;
}

.modes-grid {
    gap: 0.85rem;
}

.modes-grid article {
    min-height: 168px;
    padding: 1.25rem;
    overflow: hidden;
}

.modes-grid article::before,
.team-member::before,
.staff-card::before,
.game-stat-menu::before,
.profile-stat-grid article::before {
    display: none !important;
}

.mode-card {
    transform: none !important;
}

.mode-card.is-active {
    background: #101a22 !important;
    border-color: #3b7680 !important;
    box-shadow: inset 3px 0 var(--cyan), var(--shadow) !important;
}

/* Formularios */

input,
select,
textarea,
.admin-form input,
.admin-form select,
.admin-form textarea,
.ticket-form input,
.ticket-form select,
.ticket-form textarea,
.ticket-reply textarea,
.admin-toolbar input,
.admin-toolbar select,
.staff-roster-row select,
.ticket-action-panel select,
.gift-field input,
.gift-field textarea,
.player-search-form input,
.rank-upgrade-form input,
.admin-upgrade-grid input {
    color: var(--text) !important;
    background: #080d12 !important;
    background-image: none !important;
    border: 1px solid #273441 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #354553 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #4a9aa6 !important;
    box-shadow: 0 0 0 3px rgba(85, 217, 236, 0.08) !important;
    outline: none;
}

/* Rangos */

.billing-switch {
    padding: 3px;
    background: #0b1118 !important;
    background-image: none !important;
    border: 1px solid #25313d;
    border-radius: 9px !important;
}

.billing-switch button {
    min-height: 36px;
    color: #8795a4;
    background: transparent !important;
    background-image: none !important;
    border: 0;
    border-radius: 6px !important;
}

.billing-switch button.is-active {
    color: #eefbfd;
    background: #17242d !important;
    box-shadow: inset 0 0 0 1px #2b4850 !important;
}

.rank-stage {
    background: #0a0f15 !important;
}

.rank-stage::before,
.rank-card::before,
.rank-card::after,
.rank-upgrade-glow {
    display: none !important;
}

.rank-card {
    background: #0f151d !important;
    background-image: none !important;
    border: 1px solid #27333f !important;
    border-top: 3px solid var(--rank-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3) !important;
}

.rank-card:hover,
.rank-card:focus-within,
.rank-card.is-open {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--rank-color), #27333f 52%) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
}

.rank-emblem,
.upgrade-head {
    background: #111923 !important;
    background-image: none !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.ranks-section .rank-card .rank-emblem {
    right: 0.45rem;
    bottom: 0.35rem;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: scale(0.82);
    transform-origin: right bottom;
}

.minecraft-line,
.benefit-list li,
.comparison-table,
.comparison-table-label,
.comparison-table-rank,
.comparison-table-value,
.comparison-column-row {
    border-radius: 7px !important;
}

.comparison-table-panel,
.rank-upgrade-panel,
.upgrade-option {
    background: #0e151d !important;
    background-image: none !important;
    border: 1px solid #26323e !important;
    border-radius: 11px !important;
    box-shadow: var(--shadow) !important;
}

.rank-upgrade-panel {
    overflow: visible;
}

.upgrade-option {
    border-top: 2px solid var(--rank-color) !important;
}

/* Tienda */

.store-section > .section-heading h1 {
    font-style: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
}

.store-jump,
.store-cat,
.store-cat-grid,
.cart-panel {
    background: #0d131a !important;
    background-image: none !important;
    border: 1px solid #222e39 !important;
    border-radius: 11px !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: none !important;
}

.store-jump::before {
    color: #6f7d8b;
}

.store-jump-link {
    border-radius: 7px !important;
}

.store-jump [data-jump].is-active {
    color: #f4fbfc;
    background: #14212a !important;
    background-image: none !important;
    border-left-color: var(--cyan) !important;
    box-shadow: none !important;
}

.store-cat {
    padding: 0.8rem;
}

.store-cat::before,
.catalog-product::before {
    display: none !important;
}

.store-cat-title {
    font-style: normal !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

.store-cat-title::before {
    width: 3px;
    background: var(--category-color) !important;
}

.catalog-product {
    background: #101720 !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--product-color), #2a3642 72%) !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
}

.catalog-product:hover,
.catalog-product:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--product-color), #dffbff 35%) !important;
    box-shadow: 0 17px 42px rgba(0, 0, 0, 0.36) !important;
}

.catalog-product-shade {
    background: rgba(5, 9, 13, 0.38) !important;
    background-image: none !important;
}

.catalog-product-copy {
    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.72);
}

.catalog-product-action button {
    border-radius: 7px !important;
    box-shadow: none !important;
}

.store-cat-pages .catalog-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #3a4652 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.store-cat-pages .catalog-dot.is-active {
    width: 24px;
    background: var(--category-color) !important;
}

.store-atmosphere {
    opacity: 0.28;
}

.cart-item,
.cart-item.is-gift {
    background: #0a1016 !important;
    background-image: none !important;
    border-color: #202b36 !important;
    border-radius: 8px !important;
}

/* Cuenta, soporte y administración */

.account-tabs,
.ticket-groups {
    gap: 0.25rem;
    border-color: #1f2a34;
}

.account-tabs button,
.ticket-groups button,
.season-mode,
.lb-page {
    color: #8e9ba8;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent;
    border-radius: 7px !important;
}

.account-tabs button:hover,
.ticket-groups button:hover,
.season-mode:hover,
.lb-page:hover {
    color: #e9f2f5;
    background: #111922 !important;
    border-color: #283541;
}

.account-tabs button.is-active,
.ticket-groups button.is-active,
.season-mode.is-active,
.lb-page.is-active {
    color: #eafcff !important;
    background: #16232b !important;
    border-color: #31535a !important;
}

.support-categories button,
.staff-sidebar button,
.ticket-list-item,
.admin-sidebar button,
.player-result,
.admin-metrics article,
.admin-toolbar,
.admin-section-tools,
.admin-rank-card,
.admin-category-card,
.admin-tile,
.profile-stat-grid article,
.lb-row,
.ticket-message,
.ticket-action-panel,
.quick-reply-list article,
.support-options a {
    background: #0f151d !important;
    background-image: none !important;
    border: 1px solid #222e39 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.support-categories button:hover,
.support-categories button.is-active,
.staff-sidebar button:hover,
.staff-sidebar button.is-active,
.ticket-list-item:hover,
.admin-sidebar button:hover,
.admin-sidebar button.is-active,
.player-result:hover {
    color: #eefbfc;
    background: #141f28 !important;
    border-color: #33505a !important;
    box-shadow: inset 3px 0 var(--cyan) !important;
}

.admin-rank-card,
.admin-category-card {
    border-top: 2px solid var(--rank-color, var(--category-color)) !important;
}

.admin-tile:hover {
    transform: translateY(-2px);
    border-color: var(--product-color, var(--cyan)) !important;
    box-shadow: 0 15px 36px rgba(0, 0, 0, 0.34) !important;
}

.admin-tile-info {
    background: rgba(5, 9, 13, 0.88) !important;
    background-image: none !important;
}

.admin-tile-actions button {
    background: #0a1016 !important;
    background-image: none !important;
}

.admin-tile-actions button:hover {
    background: var(--product-color, var(--cyan)) !important;
}

.data-head {
    background: #111923 !important;
    background-image: none !important;
}

.ticket-message.is-own {
    background: #101d24 !important;
    border-color: #294751 !important;
}

.lb-row.rank-1,
.lb-row.rank-2,
.lb-row.rank-3 {
    background: #0f151d !important;
    background-image: none !important;
}

.skin-controls {
    background: #0a1016;
    border-color: #26333f;
    border-radius: 8px;
}

.skin-controls button {
    border-radius: 6px;
}

.skin-controls button.is-active {
    color: #e9fbfd;
    background: #15242c;
}

/* Modal, avisos y pie */

.modal-backdrop {
    background: rgba(2, 5, 8, 0.82);
    backdrop-filter: blur(8px);
}

.modal {
    background: #0d131a !important;
}

.modal-close {
    color: #9da9b5;
    background: #111922 !important;
    background-image: none !important;
    border: 1px solid #283541;
    border-radius: 7px;
}

.toast {
    color: #eaf5f7;
    background: #111922 !important;
    background-image: none !important;
    border: 1px solid #30404c;
    border-radius: 8px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
}

.store-announcement,
.upgrade-sync-note,
.upgrade-loading {
    background: #111821 !important;
    background-image: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.site-footer {
    min-height: 90px;
    color: #778594;
    background: #070a0e;
    border-top: 1px solid #18222c;
}

.site-footer span:first-child {
    color: #c3cdd6;
    font-weight: 800;
}

/* Adaptación móvil */

@media (max-width: 900px) {
    .site-header {
        min-height: 62px;
        padding-inline: 14px;
    }

    .brand-copy {
        display: none;
    }

    .site-nav {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        white-space: nowrap;
    }

    .hero {
        min-height: 760px;
        align-items: end;
        padding: 7rem 20px 5rem;
    }

    .hero-visual {
        background-position: 66% center !important;
        opacity: 0.34;
    }

    .hero::before {
        background: rgba(7, 10, 14, 0.56);
    }

    .network-strip {
        margin-top: -24px;
    }
}

@media (max-width: 620px) {
    .site-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .site-nav a {
        padding-inline: 0.62rem;
        font-size: 0.78rem;
    }

    .header-actions .compact {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero {
        min-height: 690px;
    }

    .hero-logo {
        width: 70px;
        height: 70px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions a {
        justify-content: center;
        width: 100%;
    }

    .network-strip {
        grid-template-columns: 1fr;
    }

    .network-strip article {
        min-height: 74px;
        border-right: 0;
        border-bottom: 1px solid #202a35;
    }

    .network-strip article:last-child {
        border-bottom: 0;
    }

    .section,
    .page-section {
        width: min(100% - 28px, var(--max));
    }
}

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

/* Composición 2026: marketplace compacto inspirado en clientes gaming */

.hero {
    width: min(var(--max), calc(100% - 36px));
    min-height: 520px;
    margin: 24px auto 0;
    padding: 64px clamp(28px, 6vw, 72px);
    overflow: hidden;
    border: 1px solid #242d39;
    border-radius: 8px;
}

.hero h1 {
    font-size: clamp(3.8rem, 8vw, 6.2rem);
}

.hero-content {
    max-width: 580px;
}

.network-strip {
    margin-top: 14px;
}

body[data-page="tienda"] {
    background: #0b0d13 !important;
}

body[data-page="tienda"] .store-atmosphere {
    display: none;
}

.market-alert {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.5rem 18px;
    color: #ffb4bd;
    background: #381119;
    border-bottom: 1px solid #571a25;
    font-size: 0.76rem;
    text-align: center;
}

.market-alert strong {
    color: #ff6f80;
}

.market-shell {
    width: min(1180px, calc(100% - 36px));
    margin: 24px auto 0;
    padding: 0 0 72px;
}

.market-feature {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 330px;
    padding: clamp(24px, 5vw, 54px);
    overflow: hidden;
    isolation: isolate;
    background-color: #10131b;
    background-image: url("../assets/arcanne-hero.png");
    background-position: 69% 56%;
    background-size: cover;
    border: 1px solid #2a303b;
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.market-feature::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgba(7, 8, 13, 0.42);
}

.market-feature-copy {
    max-width: 570px;
}

.market-feature h1 {
    max-width: 680px;
    margin: 0.3rem 0 0.65rem;
    color: #ffffff;
    font-size: clamp(2.1rem, 5vw, 4.15rem);
    font-weight: 950;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.market-feature-copy > p:not(.eyebrow) {
    max-width: 54ch;
    margin: 0;
    color: #c1c5d0;
    font-size: 0.94rem;
    line-height: 1.6;
}

.market-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: #f2f4f8;
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
}

.market-feature-link:hover {
    color: var(--cyan);
}

.market-feature-mark {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 64px;
    height: 64px;
    padding: 8px;
    object-fit: contain;
    background: rgba(8, 10, 16, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.market-search-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 22px;
}

.market-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: min(600px, calc(100% - 52px));
    height: 42px;
    padding: 0 0.85rem;
    color: #788392;
    background: #171a23;
    border: 1px solid #252a36;
    border-radius: 7px;
}

.market-search:focus-within {
    border-color: #4c5a69;
    box-shadow: 0 0 0 3px rgba(85, 217, 236, 0.07);
}

.market-search input {
    width: 100%;
    height: 100%;
    padding: 0;
    color: #eef2f7;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 0.78rem;
}

.market-search input::placeholder {
    color: #76808d;
}

.market-search-clear {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #8d97a5;
    background: #171a23;
    border: 1px solid #252a36;
    border-radius: 7px;
}

.market-search-clear:hover,
.market-search-clear.is-active {
    color: #ecf9fb;
    border-color: #3e5962;
    background: #1a222b;
}

.market-search-clear svg {
    width: 17px;
    height: 17px;
}

.market-category-rail.store-jump {
    position: static;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0 0 24px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #222732 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.market-category-rail.store-jump::before {
    display: none;
}

.market-category-card.store-jump-link {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
    min-height: 118px;
    padding: 0;
    color: #aab2be;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.market-category-card.store-jump-link:hover,
.market-category-card.store-jump-link:focus-visible,
.market-category-card.store-jump-link.is-active {
    color: #ffffff;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.market-category-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 84px;
    overflow: hidden;
    color: var(--category-color);
    background: #12161e;
    border: 1px solid #232a35;
    border-radius: 7px;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.market-category-card:hover .market-category-art,
.market-category-card:focus-visible .market-category-art,
.market-category-card.is-active .market-category-art {
    transform: translateY(-2px);
    background: #171c25;
    border-color: color-mix(in srgb, var(--category-color), #39424e 62%);
}

.market-category-art img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.32));
}

.market-category-icon svg {
    width: 38px;
    height: 38px;
    stroke-width: 1.55;
}

.market-category-card .store-jump-name {
    font-size: 0.74rem;
    font-weight: 800;
}

.market-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin: 25px 0 16px;
}

.market-section-heading h2 {
    margin: 0.16rem 0 0;
    color: #f4f6f9;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.market-kicker {
    color: #768190;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-section-heading > a {
    color: #9ca6b4;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}

.market-section-heading > a:hover {
    color: #ffffff;
}

.market-catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 16px;
    align-items: start;
}

.market-catalog-layout .store-feed {
    gap: 22px;
}

.market-catalog-layout .store-cat {
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.market-catalog-layout .store-cat-head {
    margin-bottom: 10px;
}

.market-catalog-layout .store-cat-bar {
    width: 3px;
    height: 20px;
    box-shadow: none;
}

.market-catalog-layout .store-cat-head h2 {
    font-family: inherit;
    font-size: 0.86rem;
    letter-spacing: 0;
    text-transform: none;
}

.market-catalog-layout .store-cat-count {
    color: #697483;
    font-size: 0.65rem;
    letter-spacing: 0;
    text-transform: none;
}

.market-catalog-layout .store-cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 284px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    gap: 10px;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.market-catalog-layout .catalog-product {
    display: grid;
    grid-template-rows: 154px minmax(0, 1fr);
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 284px;
    overflow: hidden;
    background: #11151d !important;
    border: 1px solid #242b35 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.market-catalog-layout .catalog-product:hover,
.market-catalog-layout .catalog-product:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--product-color), #5a6570 58%) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32) !important;
}

.market-catalog-layout .catalog-product-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 154px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--product-color), #18202a 86%);
    border-bottom: 1px solid #252c36;
}

.market-catalog-layout .catalog-product-media img {
    padding: 9px !important;
    object-fit: contain !important;
}

.market-catalog-layout .catalog-product-shade {
    display: none;
}

.market-catalog-layout .catalog-product-copy {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: auto minmax(30px, auto) 1fr auto;
    gap: 0.3rem;
    min-height: 0;
    padding: 11px;
    color: #f2f4f7;
    background: #11151d;
    text-shadow: none;
}

.market-catalog-layout .catalog-product-copy > div:first-child {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 9px);
    left: 8px;
    z-index: 2;
}

.market-catalog-layout .product-badge {
    padding: 0.28rem 0.45rem;
    color: #ffffff;
    background: var(--product-color);
    border: 0;
    border-radius: 5px;
    font-size: 0.58rem;
}

.market-catalog-layout .catalog-rating {
    color: #ffe27b;
    font-size: 0.62rem;
}

.market-catalog-layout .catalog-product h3 {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.2;
}

.market-catalog-layout .catalog-product p,
.market-catalog-layout .catalog-product.size-1x1 p,
.market-catalog-layout .catalog-product.size-1x2 p {
    display: -webkit-box !important;
    margin: 0;
    color: #8893a2;
    font-size: 0.67rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-catalog-layout .catalog-product-action {
    align-self: end;
    padding-top: 5px;
    border-top: 1px solid #242b35;
}

.market-catalog-layout .catalog-product-action strong {
    color: #f5f7fa;
    font-size: 0.74rem;
}

.market-catalog-layout .catalog-product-action button {
    width: 26px;
    height: 26px;
    color: #dce5eb;
    background: #1c222c;
    border: 1px solid #2b3440;
    border-radius: 6px !important;
    font-size: 0.95rem;
}

.market-catalog-layout .catalog-product-action button:hover {
    color: #071016;
    background: var(--cyan);
    border-color: var(--cyan);
}

.market-catalog-layout .store-cat-pages {
    padding-bottom: 0;
}

.market-catalog-layout .cart-panel {
    grid-column: auto;
    top: 84px;
    padding: 18px;
    background: #11151d !important;
    border: 1px solid #252c37 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.market-cart-title {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.market-cart-title h2 {
    margin: 0.22rem 0 0;
    font-size: 1.25rem;
}

.market-cart-count {
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    color: #8d98a5;
    background: #191e27;
    border: 1px solid #2b333f;
    border-radius: 6px;
    font-size: 0.76rem;
}

.market-cart-count.has-items {
    color: #071016;
    background: var(--cyan);
    border-color: var(--cyan);
}

.market-catalog-layout .cart-items {
    min-height: 74px;
}

.market-catalog-layout .cart-item {
    align-items: center;
    padding: 0.55rem;
}

.market-catalog-layout .cart-item-icon {
    width: 32px;
    height: 32px;
}

.market-catalog-layout .cart-note {
    color: #727d8a;
    font-size: 0.68rem;
    line-height: 1.45;
}

@media (max-width: 1050px) {
    .market-catalog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .market-catalog-layout .cart-panel {
        position: static;
    }

    .market-catalog-layout .store-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: 560px;
        margin-top: 14px;
        padding: 48px 26px;
    }

    .market-alert {
        align-items: flex-start;
        font-size: 0.68rem;
    }

    .market-alert span:last-child {
        display: none;
    }

    .market-shell {
        width: min(100% - 24px, 1180px);
        margin-top: 12px;
    }

    .market-feature {
        min-height: 280px;
        padding: 26px;
        background-position: 68% center;
    }

    .market-feature-mark {
        width: 48px;
        height: 48px;
    }

    .market-feature-copy > p:not(.eyebrow) {
        max-width: 40ch;
        font-size: 0.82rem;
    }

    .market-category-rail.store-jump {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-catalog-layout .store-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 470px) {
    .market-feature {
        min-height: 300px;
    }

    .market-feature h1 {
        font-size: 2.25rem;
    }

    .market-section-heading {
        align-items: start;
    }

    .market-section-heading > a {
        display: none;
    }

    .market-category-art {
        height: 72px;
    }

    .market-catalog-layout .store-cat-grid {
        grid-template-columns: 1fr;
    }
}