/* ============================================================
   ITEM V2 BOLT (SHOP) MODAL — LoL Hextech kliens stílusú 3-paneles bolt
   Megosztott modul: armory.html (sandbox szerkesztés) + battlev2.html
   (valódi arany/leltár, kézi vásárlás/eladás/kombinálás).

   Vizuális nyelv: sötét, üveges panelek egy halvány, átlátszó kék
   ködréteg felett (image/gui_challange/background-collection.png),
   Montserrat tipográfia, kék kiemelések (arany csak az arany-értékeknél).
   ============================================================ */

#shopv2-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 4, 8, 0.86);
    backdrop-filter: blur(3px);
    opacity: 1;
    transition: opacity var(--t-fast, 0.15s) ease;

    --sv2-blue: #46dcef;
    --sv2-blue-bright: #8ff2ff;
    --sv2-blue-soft: rgba(70, 220, 239, 0.14);
    --sv2-blue-line: rgba(120, 210, 226, 0.22);
    --sv2-blue-dim: rgba(70, 220, 239, 0.4);
    --sv2-blue-glow: rgba(70, 220, 239, 0.5);
    --sv2-panel: rgba(6, 15, 22, 0.86);
    --sv2-panel-soft: rgba(255, 255, 255, 0.025);
    --sv2-text: #eef7fb;
    --sv2-text-dim: #93b2c0;
    --sv2-gold: #ffd24c;
    --sv2-gold-soft: #e0c98a;
    --sv2-buff: #6df7c1;
    --sv2-debuff: #ff6b6a;
    --sv2-r-s: 7px;
    --sv2-r-m: 12px;
    --sv2-r-l: 20px;
    --sv2-btn-r: 6px;
    --sv2-font: "Montserrat", "Outfit", sans-serif;
}

#shopv2-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#shopv2-modal {
    position: relative;
    width: min(1872px, 98vw);
    height: min(1080px, 96vh);
    display: flex;
    border-radius: var(--sv2-r-l);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(3, 8, 13, 0.28), rgba(3, 10, 15, 0.38)),
        url("../image/gui_challange/background-collection.png") center / cover no-repeat,
        #050c13;
    border: 1px solid var(--sv2-blue-line);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 30px 90px rgba(0, 0, 0, 0.75),
        0 0 70px rgba(70, 220, 239, 0.1);
    font-family: var(--sv2-font);
    color: var(--sv2-text);
}

#shopv2-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sv2-blue-line);
    background: rgba(6, 15, 22, 0.75);
    color: var(--sv2-blue);
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease, border-color var(--t-fast, 0.15s) ease;
}

#shopv2-close:hover {
    background: var(--sv2-blue-soft);
    border-color: var(--sv2-blue);
    transform: scale(1.08) rotate(90deg);
}

/* ---------------- ITEM-KERET RENDSZER (abilityframe_*.png) ---------------- */
/* Minden itemet ábrázoló ikon (rács, tárgy-készlet, leltár, recept, tárgy-infó)
   ezt a közös overlay-rendszert használja. A JS a --sv2-frame-img /
   --sv2-frame-img-hover változókat állítja be tier szerint (silver/gold/
   prismatic), a keret pedig ::before-ként rétegződik az ikon fölé, hogy a
   ::after pszeudo-elemet szabadon hagyja más jelölőknek (pl. kezdő tárgy "K"). */

.shopv2-frame {
    position: relative;
}

.shopv2-frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    background-image: var(--sv2-frame-img, none);
    /* A forrás PNG-k (image/itemsv2/item_*keret*.png) a tényleges keret-gyűrű
       körül kb. 12%-nyi átlátszó margót tartalmaznak minden oldalon (114px-es
       vásznon a gyűrű kb. a 14-100px sávban van) — 133%-os nagyítással és
       középre igazítással ez a margó "kivágódik", így a gyűrű pontosan az
       ikon szélére kerül 100% helyett a kép közepére. */
    background-size: 133% 133%;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.shopv2-frame:hover::before,
.shopv2-cell.is-selected .shopv2-cell-icon.shopv2-frame::before,
.shopv2-slot.shopv2-frame.is-target::before,
.shopv2-slot.shopv2-frame.is-selected::before {
    background-image: var(--sv2-frame-img-hover, var(--sv2-frame-img, none));
}

@keyframes shopv2-frame-blink {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.5; filter: brightness(1.8); }
}

.shopv2-cell.is-selected .shopv2-cell-icon.shopv2-frame::before {
    animation: shopv2-frame-blink 1.1s ease-in-out infinite;
}

/* ---------------- BAL PANEL ---------------- */

#shopv2-left {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 24px 19px;
    background: rgba(4, 10, 16, 0.18);
    border-right: 1px solid var(--sv2-blue-line);
    overflow-y: auto;
}

.shopv2-left-block {
    flex: 0 0 auto;
    border: 1px solid var(--sv2-blue-line);
    background: var(--sv2-panel-soft);
    overflow: hidden;
}

.shopv2-left-block-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sv2-blue);
    padding: 10px 13px;
    background: var(--sv2-blue-soft);
    border-bottom: 1px solid var(--sv2-blue-line);
}

.shopv2-left-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 16px;
}

.shopv2-slot {
    position: relative;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: var(--sv2-r-s);
    background: linear-gradient(180deg, rgba(30, 48, 58, 0.5), rgba(8, 14, 20, 0.55));
    border: 1px solid var(--sv2-blue-line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    transition: border-color var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease, box-shadow var(--t-fast, 0.15s) ease;
}

.shopv2-slot img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sv2-r-s);
}

.shopv2-slot:hover {
    transform: scale(1.06);
}

.shopv2-slot.shopv2-frame {
    border-color: transparent;
    background: transparent;
}

.shopv2-slot.is-target {
    box-shadow: 0 0 0 2px var(--sv2-blue-dim), 0 0 14px var(--sv2-blue-glow);
}

.shopv2-slot.is-selected {
    box-shadow: 0 0 0 2px rgba(255, 210, 76, 0.35), 0 0 12px rgba(255, 210, 76, 0.4);
}

.shopv2-slot-index {
    font-size: 13px;
    font-weight: 700;
    color: var(--sv2-text-dim);
}

.shopv2-slot-starter {
    border-color: rgba(255, 210, 76, 0.3);
}

.shopv2-slot-starter::after {
    content: "K";
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: #061218;
    background: var(--sv2-gold);
    padding: 2px 4px 1px;
    border-radius: 0 0 6px 0;
    pointer-events: none;
    z-index: 2;
}

.shopv2-itemset-starter-row {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shopv2-itemset-starter-label {
    font-size: 11px;
    color: var(--sv2-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shopv2-set-divider {
    flex: 1 1 100%;
    height: 0;
    border-top: 1px solid var(--sv2-blue-line);
    margin: 4px 0 2px;
}

.shopv2-consumable-slotwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.shopv2-maxcount-input {
    width: 58px;
    padding: 5px 6px;
    border-radius: var(--sv2-r-s);
    background: rgba(6, 14, 20, 0.6);
    border: 1px solid var(--sv2-blue-line);
    color: var(--sv2-text);
    font-family: var(--sv2-font);
    font-size: 12px;
    text-align: center;
}

.shopv2-maxcount-input:focus {
    outline: none;
    border-color: var(--sv2-blue);
    box-shadow: 0 0 6px var(--sv2-blue-soft);
}

.shopv2-hero-avatar {
    width: 55px;
    height: 55px;
    border-radius: var(--sv2-r-s);
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--sv2-blue-line);
    transition: border-color var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease;
}

.shopv2-hero-avatar:hover {
    transform: scale(1.08);
    border-color: var(--sv2-blue);
}

.shopv2-hero-avatar.is-active {
    border-color: var(--sv2-gold);
    box-shadow: 0 0 10px rgba(255, 210, 76, 0.55);
}

.shopv2-hero-avatar.is-dead {
    opacity: 0.3;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* ---------------- KÖZÉP PANEL ---------------- */

#shopv2-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--sv2-blue-line);
    background: rgba(3, 9, 14, 0.14);
}

#shopv2-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--sv2-blue-line);
}

.shopv2-tab {
    flex: 1 1 auto;
    padding: 16px 10px;
    text-align: center;
    font-family: var(--sv2-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sv2-text-dim);
    background: transparent;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast, 0.15s) ease, background var(--t-fast, 0.15s) ease, border-color var(--t-fast, 0.15s) ease;
}

.shopv2-tab:hover {
    color: var(--sv2-text);
    background: rgba(255, 255, 255, 0.03);
}

.shopv2-tab.is-active {
    color: var(--sv2-blue-bright);
    border-color: var(--sv2-blue);
    background: var(--sv2-blue-soft);
}

#shopv2-searchbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 19px;
    border-bottom: 1px solid var(--sv2-blue-line);
}

#shopv2-searchbar svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--sv2-text-dim);
    stroke-width: 2;
}

#shopv2-search-input {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sv2-text);
    font-family: var(--sv2-font);
    font-size: 1rem;
}

#shopv2-search-input::placeholder {
    color: var(--sv2-text-dim);
}

#shopv2-classfilters {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
    padding: 10px 19px;
    border-bottom: 1px solid var(--sv2-blue-line);
    flex-wrap: wrap;
    align-items: center;
}

.shopv2-chip {
    width: 38px;
    height: 38px;
    padding: 5px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--t-fast, 0.15s) ease, box-shadow var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease;
}

.shopv2-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(0.5);
    transition: opacity var(--t-fast, 0.15s) ease, filter var(--t-fast, 0.15s) ease;
}

.shopv2-chip:hover {
    transform: translateY(-1px);
}

.shopv2-chip:hover img {
    opacity: 0.85;
    filter: grayscale(0);
}

.shopv2-chip.is-active {
    background: var(--sv2-blue-soft);
    box-shadow: 0 0 0 1.5px var(--sv2-blue), 0 0 10px var(--sv2-blue-soft);
}

.shopv2-chip.is-active img {
    opacity: 1;
    filter: grayscale(0);
}

.shopv2-chip.is-all {
    font-family: var(--sv2-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--sv2-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
}

#shopv2-grid-area {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

#shopv2-statfilters {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 9px;
    border-right: 1px solid var(--sv2-blue-line);
    overflow-y: auto;
}

.shopv2-statchip {
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--t-fast, 0.15s) ease, box-shadow var(--t-fast, 0.15s) ease;
}

.shopv2-statchip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(0.5);
    transition: opacity var(--t-fast, 0.15s) ease, filter var(--t-fast, 0.15s) ease;
}

.shopv2-statchip:hover img {
    opacity: 0.85;
    filter: grayscale(0);
}

.shopv2-statchip.is-active {
    background: var(--sv2-blue-soft);
    box-shadow: 0 0 0 1.5px var(--sv2-blue), 0 0 10px var(--sv2-blue-soft);
}

.shopv2-statchip.is-active img {
    opacity: 1;
    filter: grayscale(0);
}

#shopv2-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 88px);
    grid-auto-rows: min-content;
    gap: 16px;
    align-content: start;
    padding: 19px;
}

.shopv2-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.shopv2-cell-lock-badge {
    position: absolute;
    top: -5px;
    left: 4px;
    width: 20px;
    height: 20px;
    z-index: 3;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
    pointer-events: none;
}

.shopv2-cell.is-locked .shopv2-cell-icon {
    box-shadow: 0 0 10px rgba(255, 210, 76, 0.6);
}

.shopv2-cell-icon {
    position: relative;
    width: 88px;
    height: 88px;
    overflow: visible;
    transition: transform var(--t-fast, 0.15s) ease;
}

.shopv2-cell-icon img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kijelöletlen rács-elemek nem kapnak tier-keretet (kép), csak egy halvány,
   tisztán CSS-sel rajzolt szürke szegélyt — a színes/csillogó keret csak a
   kiválasztott tárgynál jelenik meg (lásd .shopv2-frame). */
.shopv2-cell-icon-plain {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--sv2-r-s);
}

.shopv2-cell:hover .shopv2-cell-icon {
    transform: scale(1.04);
}

.shopv2-cell.is-selected .shopv2-cell-icon {
    box-shadow: 0 0 14px rgba(255, 210, 76, 0.45);
}

.shopv2-cell.is-owned .shopv2-cell-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--sv2-buff);
    pointer-events: none;
    z-index: 2;
}

.shopv2-cell-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--sv2-text);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 0 4px;
    z-index: 2;
}

.shopv2-cell-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--sv2-gold-soft);
    text-align: center;
}

.shopv2-cell-price.is-discounted,
#shopv2-detail-price span.is-discounted {
    color: #7df77d;
}

.shopv2-price-original {
    color: var(--sv2-text-dim);
    text-decoration: line-through;
    font-size: 0.85em;
    margin-right: 4px;
}

.shopv2-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--sv2-text-dim);
    font-size: 0.9rem;
    padding: 40px 10px;
}

/* ---------------- ALSÓ SÁV ---------------- */

#shopv2-bottombar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 19px;
    border-top: 1px solid var(--sv2-blue-line);
    background: rgba(4, 10, 16, 0.5);
}

.shopv2-bottombtn {
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: var(--sv2-btn-r);
    background: linear-gradient(180deg, rgba(70, 220, 239, 0.1), rgba(70, 220, 239, 0.03));
    border: 1px solid var(--sv2-blue-line);
    color: var(--sv2-text);
    font-family: var(--sv2-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--t-fast, 0.15s) ease, background var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease;
}

.shopv2-bottombtn:hover:not(:disabled) {
    border-color: var(--sv2-blue);
    background: linear-gradient(180deg, rgba(70, 220, 239, 0.22), rgba(70, 220, 239, 0.08));
    box-shadow: 0 0 12px var(--sv2-blue-soft);
    transform: translateY(-1px);
}

.shopv2-bottombtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* Eladás — LoL kliens mintájára erősebb, telt kék, hogy elváljon a többi gombtól */
#shopv2-sell-btn {
    background: linear-gradient(180deg, #3a86ff, #1f5fd9);
    border-color: #3a86ff;
    color: #f2f8ff;
}

#shopv2-sell-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #5a9cff, #2f6fef);
    border-color: #5a9cff;
    box-shadow: 0 0 14px rgba(58, 134, 255, 0.55);
}

#shopv2-gold {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px;
    border-radius: var(--sv2-btn-r);
    border: 1px solid var(--sv2-blue-line);
    background: linear-gradient(180deg, rgba(70, 220, 239, 0.08), rgba(70, 220, 239, 0.02));
}

#shopv2-gold-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 210, 76, 0.45));
}

#shopv2-gold-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sv2-gold);
    letter-spacing: 0.5px;
}

/* ---------------- JOBB PANEL ---------------- */

#shopv2-right {
    flex: 0 0 456px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 22px;
    background: rgba(4, 10, 16, 0.18);
    overflow-y: auto;
}

/* Recept-kártya — vizuálisan elkülönítve a tárgy-infótól */
#shopv2-buildtree {
    flex: 0 0 auto;
}

#shopv2-buildtree:not(:empty) {
    padding: 17px;
    background: var(--sv2-panel-soft);
    border: 1px solid var(--sv2-blue-line);
}

.shopv2-buildtree-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sv2-blue);
    margin-bottom: 12px;
    text-align: center;
}

.shopv2-tree-into {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 7px;
    padding: 4px 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--sv2-blue-dim) transparent;
}

.shopv2-tree-into::-webkit-scrollbar {
    height: 5px;
}

.shopv2-tree-into::-webkit-scrollbar-thumb {
    background: var(--sv2-blue-dim);
    border-radius: 3px;
}

.shopv2-tree-main {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.shopv2-tree-lines {
    height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shopv2-tree-lines svg {
    width: 100%;
    height: 100%;
    stroke: var(--sv2-blue-line);
    stroke-width: 1.5;
}

.shopv2-tree-components {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shopv2-tree-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--sv2-r-s);
    cursor: pointer;
    flex: 0 0 auto;
    overflow: visible;
    transition: transform var(--t-fast, 0.15s) ease;
}

.shopv2-tree-icon.shopv2-tree-main-icon {
    width: 65px;
    height: 65px;
    box-shadow: 0 0 16px var(--sv2-blue-glow);
}

.shopv2-tree-icon img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopv2-tree-icon:hover {
    transform: scale(1.08);
}

.shopv2-tree-qty {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.75);
    color: var(--sv2-text);
    padding: 0 3px;
    border-radius: 3px 0 0 0;
    z-index: 2;
}

/* Tárgy-infó kártya */
#shopv2-detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    background: var(--sv2-panel-soft);
    border: 1px solid var(--sv2-blue-line);
}

#shopv2-detail-icon-wrap {
    position: relative;
    width: 106px;
    height: 106px;
    margin: 0 auto 12px;
}

#shopv2-detail-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#shopv2-lock-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border: none;
    background: url("../image/gui_config/icon-lock-large-inactive.png") no-repeat center / contain;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--t-fast, 0.15s) ease, transform var(--t-fast, 0.15s) ease;
    z-index: 4;
}

#shopv2-lock-btn:hover {
    opacity: 1;
    transform: scale(1.08);
    background-image: url("../image/gui_config/icon-lock-large-click.png");
}

#shopv2-lock-btn.is-active {
    opacity: 1;
    background-image: url("../image/gui_config/icon-lock-large-hover.png");
}

#shopv2-lock-btn.is-active:hover {
    background-image: url("../image/gui_config/icon-lock-large-hover.png");
}

#shopv2-detail-name {
    text-align: center;
    font-family: var(--sv2-font);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--sv2-text);
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

#shopv2-detail-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    margin-bottom: 16px;
}

.shopv2-detail-price-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sv2-gold);
}

.shopv2-inline-gold {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

#shopv2-detail-price .shopv2-sell-value {
    font-weight: 500;
    color: var(--sv2-buff);
    font-size: 0.82rem;
}

#shopv2-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.shopv2-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--sv2-r-s);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sc, var(--sv2-blue-line));
    border-left-width: 3px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sv2-text);
}

.shopv2-stat-card img {
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex: 0 0 auto;
}

#shopv2-detail-gated-classes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

#shopv2-detail-gated-classes img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    padding: 4px;
    border-radius: 50%;
    background: var(--sv2-blue-soft);
    border: 1px solid var(--sv2-blue-line);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

#shopv2-detail-passive {
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--sv2-blue-bright);
    margin-bottom: 14px;
    text-align: center;
}

#shopv2-detail-cooldown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -6px 0 14px;
}

.shopv2-cooldown-die {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(70, 220, 239, 0.22), rgba(70, 220, 239, 0.06));
    border: 1px solid var(--sv2-blue-dim);
    color: var(--sv2-blue-bright);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 0 8px var(--sv2-blue-soft);
}

.shopv2-cooldown-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--sv2-text-dim);
    text-transform: uppercase;
}

.shopv2-inline-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: -4px;
    margin: 0 1px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

.shopv2-divider {
    height: 1px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, transparent, var(--sv2-blue-line) 20%, var(--sv2-blue-line) 80%, transparent);
}

#shopv2-detail-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sv2-text-dim);
    overflow-y: auto;
    flex: 1 1 auto;
}

#shopv2-detail-empty {
    color: var(--sv2-text-dim);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 50px;
}

#shopv2-purchase-hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--sv2-debuff);
    text-align: center;
    min-height: 17px;
    margin-top: 6px;
}

#shopv2-purchase-btn {
    flex: 0 0 auto;
    margin-top: 14px;
    width: 100%;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: url('../image/gui_buttons/button-lockin.png') center / 100% 100% no-repeat;
    color: #eaffff;
    font-family: var(--sv2-font);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: transform var(--t-fast, 0.15s) ease;
}

#shopv2-purchase-btn:hover:not(:disabled) {
    background-image: url('../image/gui_buttons/button-lockin-hover.png');
    transform: translateY(-1px);
}

#shopv2-purchase-btn:active:not(:disabled) {
    background-image: url('../image/gui_buttons/button-lockin-click.png');
    transform: translateY(0);
}

#shopv2-purchase-btn:disabled {
    background-image: url('../image/gui_buttons/button-lockin-disable.png');
    color: #9aa0a6;
    text-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ---------------- Reszponzív minimum ---------------- */

@media (max-width: 1320px) {
    #shopv2-modal {
        flex-wrap: wrap;
        height: 94vh;
        overflow-y: auto;
        border-radius: 0;
    }

    #shopv2-left,
    #shopv2-center,
    #shopv2-right {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--sv2-blue-line);
    }

    #shopv2-grid-area {
        min-height: 340px;
    }
}