/* ============================================================
   VÁSÁRCSARNOK — izolált prémium látványréteg
   Eltávolítható a vasarcsarnok.html egyetlen stylesheet-linkjével.
   ============================================================ */

body[data-shell-active="vasarcsarnok"] {
    --vsp-accent: 231, 189, 89;
    --vsp-accent-solid: #e7bd59;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 76% 15%, rgba(41, 105, 139, .11), transparent 38%),
        radial-gradient(ellipse at 18% 36%, rgba(113, 68, 164, .08), transparent 35%),
        linear-gradient(145deg, #050911 0%, #02050a 46%, #07101a 100%);
    background-attachment: fixed;
}

body[data-shell-active="vasarcsarnok"]::before {
    position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none;
    background-image: linear-gradient(rgba(125,181,205,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(125,181,205,.018) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

#vshop-shell {
    width: min(100%, 1760px); margin: 0 auto; padding: 20px 34px 70px; box-sizing: border-box;
}

/* ---- Aukciósház-fejléc ---- */

.vshop-premium-hero {
    position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 42px;
    min-height: 205px; margin-bottom: 17px; padding: 30px 46px; box-sizing: border-box; overflow: hidden;
    border: 1px solid rgba(var(--vsp-accent), .24); border-radius: 4px;
    background: linear-gradient(112deg, rgba(13,19,31,.97), rgba(6,11,20,.92) 58%, rgba(15,22,29,.96));
    box-shadow: 0 24px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
}
.vshop-premium-hero::before {
    position: absolute; z-index: -1; inset: 0; content: "";
    background: radial-gradient(circle at 86% 50%, rgba(var(--vsp-accent),.12), transparent 25%), linear-gradient(90deg, transparent 0 62%, rgba(var(--vsp-accent),.025));
}
.vshop-premium-hero::after {
    position: absolute; top: 0; left: 44px; width: 320px; height: 2px; content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--vsp-accent),.95), rgba(105,220,255,.65), transparent);
    box-shadow: 0 0 18px rgba(var(--vsp-accent),.42);
}
.vshop-premium-hero-grid {
    position: absolute; z-index: -1; top: -120px; right: -30px; width: 620px; height: 460px; opacity: .22; transform: perspective(420px) rotateX(64deg) rotateZ(-9deg);
    background-image: linear-gradient(rgba(var(--vsp-accent),.16) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--vsp-accent),.16) 1px, transparent 1px); background-size: 32px 32px;
    mask-image: radial-gradient(circle, #000, transparent 68%);
}
.vshop-premium-copy { position: relative; z-index: 2; max-width: 770px; }
.vshop-premium-eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(var(--vsp-accent),.78); font-size: .57rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vshop-premium-eyebrow i { width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.vshop-premium-copy h1 { margin: 8px 0 5px; color: #fff5df; font-family: "AOW", serif; font-size: clamp(2.1rem, 3.6vw, 3.8rem); font-weight: 400; letter-spacing: .06em; line-height: 1; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.vshop-premium-copy > p { max-width: 700px; min-height: 1.5em; margin: 0; color: rgba(183,200,212,.7); font-size: .78rem; line-height: 1.55; }
.vshop-premium-assurances { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.vshop-premium-assurances span { display: flex; align-items: center; gap: 7px; color: rgba(211,221,228,.58); font-size: .51rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.vshop-premium-assurances b { width: 5px; height: 5px; border: 1px solid rgba(var(--vsp-accent),.76); transform: rotate(45deg); box-shadow: 0 0 7px rgba(var(--vsp-accent),.4); }

.vshop-premium-sigil { position: relative; display: grid; flex: 0 0 172px; width: 172px; height: 150px; place-items: center; }
.vshop-premium-icon { position: relative; z-index: 2; display: grid; width: 91px; height: 91px; place-items: center; border: 1px solid rgba(var(--vsp-accent),.38); border-radius: 50%; background: radial-gradient(circle, rgba(var(--vsp-accent),.13), rgba(3,7,13,.85) 67%); box-shadow: 0 0 36px rgba(var(--vsp-accent),.15), inset 0 0 25px rgba(var(--vsp-accent),.08); animation: vspSigilPulse 4s ease-in-out infinite; }
.vshop-premium-icon img { width: 67px; height: 67px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(255,184,32,.36)); }
.vshop-premium-orbit { position: absolute; border: 1px solid rgba(var(--vsp-accent),.19); border-radius: 50%; }
.vshop-premium-orbit::before { position: absolute; top: 50%; left: -3px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: rgb(var(--vsp-accent)); box-shadow: 0 0 9px rgb(var(--vsp-accent)); }
.vshop-premium-orbit.orbit-one { width: 126px; height: 126px; animation: vspOrbit 18s linear infinite; }
.vshop-premium-orbit.orbit-two { width: 150px; height: 104px; transform: rotate(24deg); animation: vspOrbitReverse 25s linear infinite; }
.vshop-premium-sigil > span { position: absolute; right: 0; bottom: -1px; left: 0; color: rgba(var(--vsp-accent),.47); font-size: .46rem; font-weight: 700; letter-spacing: .25em; text-align: center; text-transform: uppercase; }

/* ---- Kategória-szalag ---- */

#vshop-category-nav {
    position: relative; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 0; margin: 0 0 18px; padding: 0 12px;
    border: 1px solid rgba(140,172,194,.14); border-radius: 3px;
    background: linear-gradient(180deg, rgba(10,17,27,.92), rgba(4,8,14,.96)); box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
#vshop-category-nav::before, #vshop-category-nav::after { position: absolute; top: 50%; width: 6px; height: 6px; border: 1px solid rgba(var(--vsp-accent),.48); content: ""; transform: translateY(-50%) rotate(45deg); }
#vshop-category-nav::before { left: -4px; } #vshop-category-nav::after { right: -4px; }
.vshop-category-btn { position: relative; min-width: 0; min-height: 57px; padding: 10px 18px; border: 0; color: rgba(167,185,199,.6); font-size: .68rem; letter-spacing: .14em; white-space: nowrap; }
.vshop-category-btn + .vshop-category-btn::before { position: absolute; top: 14px; bottom: 14px; left: 0; width: 1px; content: ""; background: linear-gradient(transparent, rgba(255,255,255,.09), transparent); }
.vshop-category-btn::after { position: absolute; right: 25%; bottom: -1px; left: 25%; height: 2px; content: ""; background: transparent; transition: right var(--t-mid), left var(--t-mid), background var(--t-mid), box-shadow var(--t-mid); }
.vshop-category-btn:hover:not(:disabled) { color: #e9f0f4; background: linear-gradient(180deg, transparent, rgba(var(--vsp-accent),.035)); }
.vshop-category-btn.is-active { border: 0; color: #f5d986; text-shadow: 0 0 16px rgba(var(--vsp-accent),.33); }
.vshop-category-btn.is-active::after { right: 12%; left: 12%; background: linear-gradient(90deg, transparent, rgb(var(--vsp-accent)), transparent); box-shadow: 0 0 13px rgba(var(--vsp-accent),.52); }

/* ---- Szűrőpult és katalógusfejléc ---- */

.codex-browse-layout { grid-template-columns: 270px minmax(0,1fr); gap: 20px; }
#vshop-filter-sidebar {
    top: 82px; gap: 17px; padding: 24px 20px 22px; overflow: hidden;
    border-color: rgba(var(--vsp-accent),.18); border-radius: 3px;
    background: linear-gradient(160deg, rgba(11,18,28,.95), rgba(4,8,14,.97));
    box-shadow: 0 20px 45px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.03);
}
#vshop-filter-sidebar::before { position: absolute; top: 0; left: 19px; width: 92px; height: 1px; content: ""; background: linear-gradient(90deg, rgb(var(--vsp-accent)), transparent); box-shadow: 0 0 10px rgba(var(--vsp-accent),.45); }
.vshop-stat-row { padding: 2px 0 4px; }
.vshop-stat-row .codex-stat-num { color: #f9e8bb; font-family: "AOW", serif; font-size: 1.75rem; text-shadow: 0 0 20px rgba(var(--vsp-accent),.2); }
.vshop-stat-row .codex-stat-label { color: rgba(168,187,201,.52); font-size: .5rem; letter-spacing: .12em; }
.vshop-stat-sep, .vshop-sidebar-divider { background: linear-gradient(90deg, transparent, rgba(var(--vsp-accent),.18), transparent); }
.vshop-stat-sep { background: linear-gradient(transparent, rgba(var(--vsp-accent),.2), transparent); }
.codex-search-wrap { padding-top: 3px; border: 0; }
.codex-search-wrap input { height: 40px; border-color: rgba(139,175,198,.16); border-radius: 2px; background: rgba(1,5,10,.58); color: #e7eff4; font-size: .73rem; }
.codex-search-wrap input:focus { border-color: rgba(var(--vsp-accent),.52); box-shadow: 0 0 0 2px rgba(var(--vsp-accent),.06), 0 0 18px rgba(var(--vsp-accent),.08); }
.codex-search-icon { color: rgba(var(--vsp-accent),.64); }
.vshop-filter-section-label { color: rgba(var(--vsp-accent),.7); font-size: .55rem; letter-spacing: .2em; }
.codex-filter-group label { color: rgba(165,184,198,.55); font-size: .55rem; font-weight: 700; letter-spacing: .13em; }
#vshop-filter-sidebar .settings-select { min-height: 37px; border-color: rgba(140,172,194,.15); border-radius: 2px; background-color: rgba(2,6,11,.72); color: rgba(226,234,239,.82); font-size: .67rem; }
#vshop-filter-sidebar .settings-select:hover, #vshop-filter-sidebar .settings-select:focus { border-color: rgba(var(--vsp-accent),.4); }
.backpack-open-trigger { min-height: 39px; border: 1px solid rgba(var(--vsp-accent),.3); border-radius: 2px; background: linear-gradient(105deg, rgba(var(--vsp-accent),.1), rgba(4,9,15,.78)); color: #e8d69f; font-size: .59rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; text-transform: uppercase; transition: border-color var(--t-mid), background var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid); }
.backpack-open-trigger:hover { border-color: rgba(var(--vsp-accent),.7); background: linear-gradient(105deg, rgba(var(--vsp-accent),.18), rgba(4,9,15,.82)); box-shadow: 0 0 18px rgba(var(--vsp-accent),.1); transform: translateY(-1px); }

.vshop-catalog-stage { min-width: 0; }
.vshop-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 62px; margin-bottom: 12px; padding: 0 4px 12px; border-bottom: 1px solid rgba(143,174,195,.13); }
.vshop-catalog-kicker { color: rgba(var(--vsp-accent),.55); font-size: .48rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.vshop-catalog-heading h2 { margin: 4px 0 0; color: #f6eddd; font-family: "AOW", serif; font-size: 1.5rem; font-weight: 400; letter-spacing: .055em; }
.vshop-visual-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 6px 10px; border: 1px solid rgba(var(--vsp-accent),.35); border-radius: 3px; background: rgba(var(--vsp-accent),.08); color: #e8d9f3; font-size: .68rem; cursor: pointer; }
.vshop-visual-toggle[hidden] { display: none; }
.vshop-visual-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--vsp-accent-solid); cursor: pointer; }
.vshop-card-visuals { display: contents; }
#vshop-shell.vshop-visuals-hidden .vshop-card-visuals { display: none; }
.vshop-live-status { display: flex; align-items: center; gap: 8px; padding-bottom: 5px; color: rgba(164,210,187,.64); font-size: .49rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vshop-live-status i { width: 6px; height: 6px; border-radius: 50%; background: #6ce0a7; box-shadow: 0 0 9px rgba(108,224,167,.72); animation: vspLivePulse 2.2s ease-in-out infinite; }

/* ---- Prémium termékkártyák ---- */

.vshop-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 13px; }
.vshop-card-wrap { min-width: 0; }
.vshop-card {
    isolation: isolate; border-color: rgba(var(--vsp-accent),.2); border-radius: 3px;
    background: #050a12; box-shadow: 0 13px 28px rgba(0,0,0,.28), inset 0 0 24px rgba(var(--vsp-accent),.018);
    transition: transform 420ms var(--ease-premium), border-color var(--t-mid), box-shadow 420ms var(--ease-premium);
}
.vshop-card::before { position: absolute; z-index: 5; top: -1px; left: -1px; width: 31px; height: 31px; border-top: 1px solid rgba(var(--vsp-accent),.72); border-left: 1px solid rgba(var(--vsp-accent),.72); content: ""; pointer-events: none; }
.vshop-card::after { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(3,7,13,.02) 38%, rgba(3,7,13,.36) 65%, rgba(2,5,9,.9) 100%), linear-gradient(90deg, rgba(3,7,13,.12), transparent 30% 70%, rgba(3,7,13,.12)); pointer-events: none; }
.vshop-card-wrap:not(.is-owned):hover .vshop-card { border-color: rgba(var(--vsp-accent),.65); transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.43), 0 0 25px rgba(var(--vsp-accent),.1); }
.vshop-card-img { filter: saturate(.9) contrast(1.035); transition: transform 750ms var(--ease-premium), filter var(--t-mid), opacity var(--t-mid); }
.vshop-card-wrap:not(.is-owned):hover .vshop-card-img { transform: scale(1.065); filter: saturate(1.07) contrast(1.045) brightness(1.04); }
.vshop-card-wrap.is-owned .vshop-card { border-color: rgba(103,213,158,.24); }
.vshop-card-wrap.is-owned .vshop-card-img { filter: saturate(.62) brightness(.58) contrast(1.03); }
.vshop-card-info { z-index: 3; align-items: flex-start; gap: 4px; padding: 34px 12px 10px; background: linear-gradient(0deg, rgba(2,5,9,.98) 22%, rgba(3,7,13,.78) 62%, transparent); text-align: left; }
.vshop-card-name { width: 100%; overflow: hidden; color: #f5ede0; font-family: "AOW", serif; font-size: .78rem; font-weight: 400; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.vshop-card-price-row { gap: 7px; color: #f1cf70; font-size: .69rem; }
.vshop-card-price-row img { width: 17px; height: 17px; border: 1px solid rgba(var(--vsp-accent),.2); box-shadow: 0 0 8px rgba(var(--vsp-accent),.12); }
.vshop-card-owned-badge { color: #76dfa9; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.vshop-card-tier-badge { top: 9px; left: 9px; width: 36px; height: 36px; z-index: 4; filter: drop-shadow(0 0 8px rgba(var(--vsp-accent),.22)) drop-shadow(0 3px 5px rgba(0,0,0,.85)); }
.vshop-card-class-icon { top: 11px; right: 11px; z-index: 4; width: 23px; height: 23px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(3,7,13,.64); backdrop-filter: blur(5px); }
.vshop-card-type-badge, .vshop-card-skin-theme { z-index: 4; border-color: rgba(var(--vsp-accent),.3); border-radius: 2px; background: rgba(3,7,13,.72); color: rgba(var(--vsp-accent),.78); font-size: .5rem; letter-spacing: .09em; backdrop-filter: blur(5px); }
.vshop-card-skin-tierbadges { z-index: 4; }
.vshop-card-skin-hero { color: rgba(171,191,205,.55); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; }
.vshop-card-owned-count-badge { z-index: 4; border-color: rgba(108,224,167,.48); background: rgba(3,13,10,.76); color: #78e2ac; }
.vshop-card-img--contain { padding: 20px; background: radial-gradient(circle at 50% 42%, rgba(var(--vsp-accent),.13), transparent 64%); }
.vshop-grid--avatars { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.vshop-grid--avatars .vshop-card-wrap { max-width: 220px; }
.vshop-grid--stickers { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vshop-grid--stickers .vshop-card-wrap { max-width: 260px; }
.vshop-card--sticker { background: radial-gradient(circle at 50% 38%, rgba(169, 89, 230, .2), transparent 54%), linear-gradient(145deg, #0d0717, #040711 75%); }
.vshop-sticker-art { position: absolute; inset: 5px 5px 50px; display: grid; place-items: center; overflow: hidden; }
.vshop-sticker-art::before { position: absolute; inset: 9%; border: 1px solid rgba(201, 137, 244, .12); border-radius: 50%; content: ""; box-shadow: 0 0 35px rgba(170, 89, 229, .14), inset 0 0 25px rgba(170, 89, 229, .08); }
.vshop-sticker-art .vshop-card-img { box-sizing: border-box; padding: 12px; filter: drop-shadow(0 13px 14px rgba(0,0,0,.58)) saturate(.96); }
.vshop-sticker-card-wrap:not(.is-owned):hover .vshop-sticker-art .vshop-card-img { filter: drop-shadow(0 16px 18px rgba(0,0,0,.62)) drop-shadow(0 0 13px rgba(191,104,239,.2)) saturate(1.08); }
.vshop-sticker-card-wrap.is-owned .vshop-sticker-art .vshop-card-img { filter: saturate(.72) brightness(.7) drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.vshop-card--sticker .vshop-card-type-badge { color: #d9a3f5; border-color: rgba(194,112,238,.38); }
.sticker-purchase-window { border-color: rgba(192, 112, 238, .5); background: radial-gradient(circle at 50% 24%, rgba(143,68,190,.18), transparent 38%), rgba(4,7,14,.98); }
.sticker-purchase-window .hero-purchase-modal-body { padding-top: 40px; }
.sticker-purchase-preview { position: relative; width: 190px; height: 158px; display: grid; place-items: center; margin: 0 auto 27px; }
.sticker-purchase-preview::before { position: absolute; inset: 8px; border: 1px solid rgba(202,137,242,.26); border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(165,83,220,.14), transparent 64%); box-shadow: 0 0 30px rgba(165,83,220,.13); }
.sticker-purchase-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 11px rgba(0,0,0,.52)); }
.sticker-purchase-window .hero-purchase-modal-eyebrow,
.sticker-purchase-window .hero-purchase-modal-title { position: relative; z-index: 2; }
.sticker-purchase-preview--success img { animation: vspStickerUnlock 850ms var(--ease-premium) both; }
.codex-empty-state { min-height: 260px; padding: 90px 20px; box-sizing: border-box; border: 1px dashed rgba(var(--vsp-accent),.16); background: radial-gradient(circle, rgba(var(--vsp-accent),.035), transparent 62%); color: rgba(173,192,205,.57); font-size: .74rem; }

#vshop-shell[data-category="skins"] { --vsp-accent: 197, 122, 255; --vsp-accent-solid: #c57aff; }
#vshop-shell[data-category="packages"] { --vsp-accent: 86, 213, 238; --vsp-accent-solid: #56d5ee; }
#vshop-shell[data-category="cosmetics"] { --vsp-accent: 255, 162, 98; --vsp-accent-solid: #ffa262; }
#vshop-shell[data-category="avatars"] { --vsp-accent: 104, 190, 255; --vsp-accent-solid: #68beff; }
#vshop-shell[data-category="stickers"] { --vsp-accent: 193, 111, 239; --vsp-accent-solid: #c16fef; }

@keyframes vspOrbit { to { transform: rotate(360deg); } }
@keyframes vspOrbitReverse { from { transform: rotate(24deg); } to { transform: rotate(-336deg); } }
@keyframes vspSigilPulse { 0%,100% { box-shadow: 0 0 29px rgba(var(--vsp-accent),.12), inset 0 0 22px rgba(var(--vsp-accent),.07); } 50% { box-shadow: 0 0 45px rgba(var(--vsp-accent),.25), inset 0 0 30px rgba(var(--vsp-accent),.13); } }
@keyframes vspLivePulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes vspStickerUnlock { 0% { opacity: 0; transform: scale(.66) rotate(-8deg); } 65% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }

@media (max-width: 1450px) {
    #vshop-shell { padding-inline: 22px; }
    .vshop-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1120px) {
    .vshop-premium-hero { min-height: 185px; padding-inline: 32px; }
    .vshop-premium-sigil { flex-basis: 145px; transform: scale(.88); }
    .codex-browse-layout { grid-template-columns: 240px minmax(0,1fr); }
    .vshop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .codex-browse-layout { grid-template-columns: 1fr; }
    #vshop-filter-sidebar { position: relative; top: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .vshop-stat-row, .codex-search-wrap, .backpack-open-trigger, .vshop-filter-section, #vshop-filter-sidebar > .codex-filter-group { grid-column: 1 / -1; }
    .vshop-sidebar-divider { display: none; }
}
@media (max-width: 760px) {
    #vshop-shell { padding: 12px 12px 55px; }
    .vshop-premium-hero { min-height: 190px; padding: 26px 22px; }
    .vshop-premium-copy h1 { font-size: 2.15rem; }
    .vshop-premium-sigil { display: none; }
    #vshop-category-nav { grid-template-columns: repeat(7, max-content); overflow-x: auto; justify-content: start; padding-inline: 4px; }
    .vshop-category-btn { min-width: 120px; }
    .vshop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
    .vshop-premium-assurances span:nth-child(2), .vshop-premium-assurances span:nth-child(3), .vshop-live-status { display: none; }
    #vshop-filter-sidebar { display: flex; }
    .vshop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .vshop-card-info { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .vshop-premium-icon, .vshop-premium-orbit, .vshop-live-status i, .vshop-user-skin-mascot, .sticker-purchase-preview--success img { animation: none; }
    .vshop-card, .vshop-card-img { transition: none; }
}