.store-hats-page-column {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
}

.store-hats-page {
    --sh-bg: #0b1520;
    --sh-panel: #162536;
    --sh-panel-soft: #1b2d40;
    --sh-line: rgba(102, 192, 244, .18);
    --sh-line-strong: rgba(102, 192, 244, .36);
    --sh-text: #c6d4df;
    --sh-muted: #8facc2;
    --sh-dim: #607d94;
    --sh-blue: #66c0f4;
    --sh-cyan: #57cbde;
    --sh-green: #65d48c;
    --sh-gold: #f0bc58;
    --sh-red: #ff7b7b;
    width: 100%;
    margin: 0 0 32px;
    color: var(--sh-text);
}

.store-hats-page *,
.store-hats-page *::before,
.store-hats-page *::after {
    box-sizing: border-box;
}

.store-hats-hero {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--sh-line-strong);
    border-radius: 14px;
    background: #08131d;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .28);
}

.store-hats-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--sh-cyan), var(--sh-blue), transparent);
    opacity: .72;
}

.store-hats-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.store-hats-hero:hover .store-hats-hero__image {
    transform: scale(1.025);
}

.store-hats-module-error {
    display: flex;
    margin: 14px 0;
    padding: 14px 16px;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid rgba(255, 123, 123, .45);
    border-radius: 8px;
    background: rgba(92, 24, 31, .42);
    color: #ffd0d0;
}

.store-hats-module-error > i { color: var(--sh-red); font-size: 23px; }
.store-hats-module-error strong { display: block; margin-bottom: 3px; color: #fff; }
.store-hats-module-error p { margin: 0; color: #eeb9bd; font-size: 12px; line-height: 1.55; }

.store-hats-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(5, 12, 19, .93) 0%, rgba(5, 12, 19, .7) 40%, rgba(5, 12, 19, .12) 73%),
        linear-gradient(0deg, rgba(5, 12, 19, .7), transparent 62%);
}

.store-hats-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(610px, 72%);
    min-height: 330px;
    padding: 46px 42px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.store-hats-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(87, 203, 222, .28);
    border-radius: 5px;
    background: rgba(10, 31, 44, .82);
    color: var(--sh-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.store-hats-hero__content h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 0 4px 25px rgba(0, 0, 0, .45);
}

.store-hats-hero__content p {
    max-width: 530px;
    margin: 16px 0 20px;
    color: #a8c2d4;
    font-size: 14px;
    line-height: 1.65;
}

.store-hats-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.store-hats-hero__facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(102, 192, 244, .16);
    border-radius: 5px;
    background: rgba(12, 29, 42, .74);
    color: #b9d4e6;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.store-hats-hero__facts i {
    color: var(--sh-blue);
    font-size: 15px;
}

.store-hats-account {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 14px 0 24px;
    overflow: hidden;
    border: 1px solid var(--sh-line);
    border-radius: 10px;
    background: var(--sh-line);
}

.store-hats-account__item {
    display: flex;
    min-width: 0;
    min-height: 76px;
    padding: 15px 17px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, #172839, #132131);
}

.store-hats-account__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 192, 244, .22);
    border-radius: 8px;
    background: rgba(102, 192, 244, .09);
    color: var(--sh-blue);
    font-size: 21px;
}

.store-hats-account__icon--wallet {
    border-color: rgba(240, 188, 88, .25);
    background: rgba(240, 188, 88, .09);
    color: var(--sh-gold);
}

.store-hats-account__icon--hat,
.store-hats-account__icon--owned {
    border-color: rgba(101, 212, 140, .22);
    background: rgba(101, 212, 140, .08);
    color: var(--sh-green);
}

.store-hats-account__item > span:last-child {
    min-width: 0;
}

.store-hats-account__item small,
.store-hats-account__item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-hats-account__item small {
    margin-bottom: 4px;
    color: var(--sh-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.store-hats-account__item strong {
    color: #e5f2fa;
    font-size: 13px;
    font-weight: 800;
}

.store-hats-auth-note,
.store-hats-sync-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(240, 188, 88, .24);
    border-radius: 8px;
    background: rgba(240, 188, 88, .07);
    color: #d5c39e;
    font-size: 12px;
    line-height: 1.55;
}

.store-hats-auth-note > i {
    color: var(--sh-gold);
    font-size: 21px;
}

.store-hats-auth-note strong {
    color: #ffe0a0;
}

.store-hats-section-head {
    display: flex;
    margin: 0 0 14px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.store-hats-section-head > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--sh-cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.store-hats-section-head h2 {
    margin: 0;
    color: #eef8ff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.025em;
}

.store-hats-section-head > p {
    max-width: 520px;
    margin: 0;
    color: var(--sh-dim);
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
}

.store-hats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.store-hats-kit {
    position: relative;
    min-width: 0;
    border: 1px solid var(--sh-line);
    border-radius: 10px;
    background: linear-gradient(180deg, #182a3c 0%, #121f2e 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.store-hats-kit:hover {
    z-index: 3;
    border-color: rgba(102, 192, 244, .34);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

.store-hats-kit.is-current {
    border-color: rgba(101, 212, 140, .45);
    box-shadow: 0 0 0 1px rgba(101, 212, 140, .08), 0 18px 38px rgba(0, 0, 0, .23);
}

.store-hats-kit-media {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    background: #09131d;
}

.store-hats-kit-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 18, 27, .78), transparent 52%);
    pointer-events: none;
}

.store-hats-kit-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease, filter .25s ease;
}

.store-hats-kit:not(.is-owned) .store-hats-kit-media img {
    filter: saturate(.76) brightness(.8);
}

.store-hats-kit:hover .store-hats-kit-media img {
    transform: scale(1.04);
}

.store-hats-kit-count,
.store-hats-kit-current {
    position: absolute;
    z-index: 2;
    top: 12px;
    display: inline-flex;
    min-height: 28px;
    padding: 5px 9px;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 5px;
    background: rgba(5, 13, 21, .78);
    color: #d7ebf7;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(7px);
}

.store-hats-kit-count {
    right: 12px;
}

.store-hats-kit-current {
    left: 12px;
    border-color: rgba(101, 212, 140, .34);
    background: rgba(22, 76, 49, .82);
    color: #8af0ae;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.store-hats-kit-body {
    padding: 17px;
}

.store-hats-kit-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.store-hats-kit-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--sh-dim);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.store-hats-kit-title {
    margin: 0;
    color: #edf8ff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.store-hats-status {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 27px;
    padding: 5px 8px;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(102, 192, 244, .2);
    border-radius: 5px;
    background: rgba(102, 192, 244, .07);
    color: #8dc8ea;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.store-hats-status--active {
    border-color: rgba(101, 212, 140, .25);
    background: rgba(101, 212, 140, .08);
    color: #75df9a;
}

.store-hats-kit-desc {
    min-height: 51px;
    margin: 11px 0 13px;
    color: var(--sh-muted);
    font-size: 11px;
    line-height: 1.55;
}

.store-hats-kit-meta {
    display: flex;
    padding: 10px 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid rgba(102, 192, 244, .1);
    border-bottom: 1px solid rgba(102, 192, 244, .1);
}

.store-hats-kit-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9eb8ca;
    font-size: 10px;
    font-weight: 700;
}

.store-hats-kit-meta i {
    color: var(--sh-blue);
    font-size: 14px;
}

.store-hats-kit-action {
    margin-top: 13px;
}

.store-hats-buy-btn,
.store-hats-select-btn,
.store-hats-remove-btn {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(102, 192, 244, .34);
    border-radius: 6px;
    outline: 0;
    background: linear-gradient(180deg, #4e99be, #2c6687);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.store-hats-buy-btn {
    display: flex;
    padding: 0 13px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.store-hats-buy-btn:hover,
.store-hats-buy-btn:focus {
    border-color: rgba(139, 232, 255, .65);
    background: linear-gradient(180deg, #60acd2, #337496);
    transform: translateY(-1px);
}

.store-hats-select {
    position: relative;
}

.store-hats-select-btn {
    display: flex;
    padding: 5px 9px;
    align-items: center;
    gap: 9px;
    border-color: #2c4960;
    background: #101d2a;
    color: #dcecf6;
}

.store-hats-select-btn:hover,
.store-hats-select.is-open .store-hats-select-btn {
    border-color: var(--sh-line-strong);
    background: #142536;
}

.store-hats-select-btn__icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(102, 192, 244, .1);
    color: var(--sh-blue);
    font-size: 17px;
}

.store-hats-select-btn > span:nth-child(2) {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-hats-select-btn > i:last-child {
    color: var(--sh-dim);
    font-size: 18px;
    transition: transform .2s ease;
}

.store-hats-select.is-open .store-hats-select-btn > i:last-child {
    transform: rotate(180deg);
}

.store-hats-select-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: none;
    max-height: 300px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #31536c;
    border-radius: 7px;
    background: #0d1925;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .48);
}

.store-hats-select.is-open .store-hats-select-menu {
    display: block;
}

.store-hats-option {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--sh-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.store-hats-option:hover,
.store-hats-option.is-active {
    background: rgba(102, 192, 244, .11);
}

.store-hats-option__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 192, 244, .15);
    border-radius: 5px;
    background: rgba(102, 192, 244, .07);
    color: var(--sh-blue);
    font-size: 16px;
}

.store-hats-option__copy {
    min-width: 0;
    flex: 1;
}

.store-hats-option__copy strong,
.store-hats-option__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-hats-option__copy strong {
    color: #d9eaf4;
    font-size: 11px;
    font-weight: 800;
}

.store-hats-option__copy small {
    margin-top: 2px;
    color: var(--sh-dim);
    font-size: 9px;
    font-weight: 700;
}

.store-hats-option__check {
    color: var(--sh-green);
    font-size: 17px;
}

.store-hats-remove-btn {
    min-height: 34px;
    margin-top: 7px;
    border-color: rgba(255, 123, 123, .18);
    background: rgba(255, 123, 123, .05);
    color: #d99393;
}

.store-hats-remove-btn:hover {
    border-color: rgba(255, 123, 123, .36);
    background: rgba(255, 123, 123, .1);
    color: #ffaaaa;
}

.store-hats-empty {
    padding: 22px;
    color: var(--sh-dim);
    font-size: 11px;
    text-align: center;
}

.store-hats-sync-note {
    margin: 18px 0 0;
    border-color: rgba(102, 192, 244, .18);
    background: rgba(102, 192, 244, .055);
    color: var(--sh-muted);
}

.store-hats-sync-note > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(102, 192, 244, .1);
    color: var(--sh-blue);
    font-size: 20px;
}

.store-hats-sync-note strong {
    display: block;
    margin-bottom: 2px;
    color: #dcecf6;
    font-size: 12px;
}

.store-hats-sync-note p {
    margin: 0;
}

@media (max-width: 1199px) {
    .store-hats-account {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-hats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .store-hats-hero,
    .store-hats-hero__content {
        min-height: 290px;
    }

    .store-hats-hero__content {
        width: 100%;
        padding: 28px 22px;
    }

    .store-hats-hero__veil {
        background: linear-gradient(90deg, rgba(5, 12, 19, .94), rgba(5, 12, 19, .66));
    }

    .store-hats-hero__content p {
        font-size: 12px;
    }

    .store-hats-account,
    .store-hats-grid {
        grid-template-columns: 1fr;
    }

    .store-hats-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .store-hats-section-head > p {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .store-hats-hero__facts span:last-child {
        display: none;
    }

    .store-hats-kit-media {
        height: 190px;
    }
}