/* ═══════════════════════════════════════════════════════════
   Physical Store — store.html (route: /test)
   Image tiles are a fixed pixel size regardless of source image
   dimensions, by clamping every dimension that could grow.
   ═══════════════════════════════════════════════════════════ */

/* ── Shell: sidebar + content (mirrors Stats & Strats / Skins) ── */

.shop-shell {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    text-align: left;
}

.shop-sidebar {
    position: sticky;
    top: 140px; /* below fixed site header + action bar */
    flex: 0 0 230px;
    height: calc(100vh - 242px); /* top chrome 140 + own margins 32 + footer 70 */
    overflow-y: auto;
    background: rgba(8, 8, 8, 0.82);
    border: 1px solid rgba(255, 191, 0, 0.12);
    border-radius: 14px;
    margin: 16px 0 16px 16px;
    padding: 12px 10px 18px;
    box-sizing: border-box;
    scrollbar-width: thin;
}

.shop-side-tools.hidden { display: none; }

/* main.css sets a global `nav { display:flex; justify-content:center }` —
   override so the category list stacks vertically. */
.shop-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

.shop-nav-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.shop-nav-group-label {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(240, 236, 230, 0.32);
    padding: 14px 12px 6px;
}

.shop-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: auto; /* override global button height */
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 10px 12px;
    color: rgba(240, 236, 230, 0.55);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
}

.shop-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 191, 0, 0.45);
    transition: color 0.2s;
    flex-shrink: 0;
}

.shop-nav-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-nav-item:hover {
    color: rgba(240, 236, 230, 0.9);
    background: rgba(255, 255, 255, 0.04);
}

.shop-nav-item.active {
    background: rgba(255, 191, 0, 0.13);
    color: #ffbf00;
}

.shop-nav-item.active i {
    color: #ffbf00;
}

.shop-content {
    flex: 1;
    min-width: 0;
}

.shop-topbar {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 24px 0;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.shop-heading {
    font-family: 'DragonSlayer', serif;
    color: #ffbf00;
    font-size: 1.5rem;
    letter-spacing: 4px;
    margin: 0;
    flex: 1;
    text-align: left;
    text-shadow: 0 0 14px rgba(255, 191, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Page wrapper ──────────────────────────────────────── */

.shop-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem 6rem;
    overflow: hidden; /* belt-and-suspenders: never let a child push width */
}

.shop-loading,
.shop-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: rgba(240, 236, 230, 0.45);
    font-family: 'HwyGothic', sans-serif;
    font-size: 1rem;
}

.shop-empty i {
    display: block;
    font-size: 2.2rem;
    color: rgba(255, 191, 0, 0.3);
    margin-bottom: 0.9rem;
}

.shop-empty p { margin: 0 0 1.2rem; }

.shop-clear-filters {
    background: transparent;
    border: 1px solid rgba(255, 191, 0, 0.55);
    color: #ffbf00;
    border-radius: 50px;
    padding: 0.5rem 1.4rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.shop-clear-filters:hover { background: rgba(255, 191, 0, 0.15); }

/* ── Sidebar search ─────────────────────────────────────── */

.shop-search {
    position: relative;
    margin: 2px 2px 4px;
}

.shop-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 191, 0, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
}

.shop-search input {
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 191, 0, 0.2);
    border-radius: 50px;
    padding: 0.6rem 2.2rem 0.6rem 2.4rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.88rem;
    color: rgba(240, 236, 230, 0.92);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.shop-search input::placeholder { color: rgba(240, 236, 230, 0.35); }

.shop-search input:focus {
    outline: none;
    border-color: rgba(255, 191, 0, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.shop-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.45);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.shop-search-clear.shown { display: block; }
.shop-search-clear:hover { color: #ffbf00; }

.shop-count {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(240, 236, 230, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Link to /retailers (physical stock in local game stores). Sits at the far right of the topbar. */
.shop-retailers-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #c9a96e;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 169, 110, 0.35);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.shop-retailers-link:hover {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

@media only screen and (max-width: 767px), only screen and (hover: none) {
    .shop-topbar { flex-wrap: wrap; }
    .shop-retailers-link { margin-left: 0; width: 100%; }
}

/* ── Responsive: sidebar becomes a top block with wrapping chips ── */
@media only screen and (max-width: 1024px), only screen and (hover: none) {
    .shop-shell {
        flex-direction: column;
    }

    .shop-sidebar {
        position: static;
        flex: none;
        width: auto;
        height: auto;
        max-height: none;
        overflow: visible;
        margin: 10px 10px 0;
        padding: 8px;
        border-radius: 12px;
    }

    .shop-search {
        margin: 0 0 6px;
    }

    .shop-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .shop-nav-group {
        display: contents;
    }

    .shop-nav-group-label {
        display: none;
    }

    .shop-nav-item {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 12px;
        gap: 6px;
        font-size: 0.62rem;
        border: 1px solid rgba(255, 191, 0, 0.14);
        border-radius: 999px;
    }

    .shop-nav-item.active {
        border-color: rgba(255, 191, 0, 0.55);
    }

    .shop-nav-item i {
        width: auto;
    }

    .shop-topbar {
        padding: 12px 12px 0;
    }

    .shop-heading {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }
}

/* ── Loading skeletons ─────────────────────────────────── */

.shop-skel-tile {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.shop-skel-image {
    height: 240px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.shop-skel-body { padding: 1rem 1.1rem 1.3rem; }

.shop-skel-line {
    height: 0.85rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 0.6rem;
    position: relative;
    overflow: hidden;
}

.shop-skel-line.w70 { width: 70%; }
.shop-skel-line.w40 { width: 40%; }

.shop-skel-image::after,
.shop-skel-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shopShimmer 1.4s infinite;
}

@keyframes shopShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (max-width: 720px) {
    .shop-skel-image { height: 200px; }
}

/* ── In-game reward pills on tiles ─────────────────────── */

.shop-tile-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.shop-tile-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border-radius: 50px;
    padding: 0.22rem 0.65rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.64rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.shop-tile-reward i { font-size: 0.62rem; }
.shop-tile-reward .gem-ico { margin-right: 3px; }

.shop-tile-reward.gold   { background: rgba(255, 191, 0, 0.12);   color: #ffbf00;  border: 1px solid rgba(255, 191, 0, 0.3); }
.shop-tile-reward.green  { background: rgba(62, 201, 107, 0.1);   color: #3ec96b;  border: 1px solid rgba(62, 201, 107, 0.3); }
.shop-tile-reward.purple { background: rgba(167, 121, 255, 0.12); color: #a779ff;  border: 1px solid rgba(167, 121, 255, 0.32); }

/* ── Grid ──────────────────────────────────────────────── */

.shop-grid {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    /* minmax(0, 1fr) prevents a wide intrinsic image from expanding its column */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ── Tile ──────────────────────────────────────────────── */

.shop-tile {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;            /* allow grid track to constrain content */
    background: #1c1c1c;
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.shop-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 191, 0, 0.42);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.shop-tile:hover .shop-tile-image > img {
    transform: scale(1.045);
}

/* ── Image area — square (1:1), image contained ── */

.shop-tile-image {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* Square: the image box always matches the tile width 1:1. */
    aspect-ratio: 1 / 1;
    flex: none;
    background: #0e0e0e;
    overflow: hidden;
}

.shop-tile-image > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    /* contain: never crop. Tall images shrink to fit height; wide images shrink to fit width.
       The container size stays fixed; any spare space appears as a letterbox on the sides. */
    object-fit: contain;
    object-position: center;
    transition: transform 0.25s ease;
}

.shop-tile-fallback {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 191, 0, 0.18);
    font-size: 3rem;
}

.shop-tile-oos {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(200, 50, 50, 0.92);
    color: #fff;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    pointer-events: none;
}

/* In-cart count badge — corner of the image area, hidden until > 0 */
.shop-tile-incart {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    background: #ffbf00;
    color: #0e0e0e;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transform-origin: center;
    animation: shopBadgePop 0.18s ease-out;
}

.shop-tile-incart.shown {
    display: inline-block;
}

@keyframes shopBadgePop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Tile action area: hosts ADD button OR stepper ─────── */

.shop-tile-action {
    display: flex;
    align-items: center;
}

.shop-tile-stepper {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 191, 0, 0.55);
    background: #1c1c1c;
}

.shop-step-btn {
    background: transparent;
    border: none;
    color: #ffbf00;
    font-family: 'HwyGothic', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 0.7rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.shop-step-btn:hover  { background: rgba(255, 191, 0, 0.18); }
.shop-step-btn:active { background: rgba(255, 191, 0, 0.32); }

.shop-step-count {
    min-width: 1.9rem;
    text-align: center;
    align-self: center;
    color: #ffbf00;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.88rem;
    font-weight: bold;
    padding: 0.4rem 0.2rem;
    border-left: 1px solid rgba(255, 191, 0, 0.28);
    border-right: 1px solid rgba(255, 191, 0, 0.28);
    user-select: none;
}

/* The image area stays square (aspect-ratio) at every breakpoint — no fixed-height override. */

/* ── Tile body ─────────────────────────────────────────── */

.shop-tile-body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.shop-tile-category {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 191, 0, 0.55);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.shop-tile-name {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1rem;
    color: rgba(240, 236, 230, 0.95);
    font-weight: bold;
    letter-spacing: 0.01em;
    word-break: break-word;
}

.shop-tile-desc {
    margin: 0;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.82rem;
    color: rgba(240, 236, 230, 0.62);
    line-height: 1.4;
    flex: 1;
    word-break: break-word;
}

.shop-tile-foot {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.shop-tile-price {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1.1rem;
    color: #ffbf00;
    font-weight: bold;
}

/* Sale: struck-through original + red sale price + percent badge, both on the tile and the
   item page. Wrap keeps them on one line with the badge. */
.shop-tile-pricewrap {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.shop-tile-price-was,
.shop-item-price-was {
    text-decoration: line-through;
    color: #888;
    font-weight: normal;
}
.shop-tile-price-was {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.9rem;
}
.shop-tile-price-sale,
.shop-item-price-sale {
    color: #ff5252;
}
.shop-item-price-was {
    font-size: 1rem;
    margin-right: 0.5rem;
}
.shop-item-price-sale {
    font-family: 'HwyGothic', sans-serif;
    font-weight: bold;
}
.shop-tile-sale-badge {
    display: inline-block;
    background: #ff5252;
    color: #fff;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.shop-tile-add {
    background: #ffbf00;
    color: #0e0e0e;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 0.95rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.shop-tile-add:hover:not(:disabled) { background: #ffd040; }

.shop-tile-add:disabled {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(240, 236, 230, 0.35);
    cursor: not-allowed;
}

/* ── Action-bar cart toggle (absolute so it doesn't shift the centered title) ─── */

.shop-cart-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: #ffbf00;
    color: #0e0e0e;
    border: none;
    border-radius: 50px;
    padding: 0.35rem 1rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s ease;
    z-index: 2;
}

.shop-cart-toggle:hover { background: #ffd040; }
.shop-cart-toggle.hidden { display: none; }

/* On appearance: gold-glow pulse for ~3 seconds then settle to a subtle ambient pulse */
.shop-cart-toggle.shop-cart-toggle-attn {
    animation: shopCartAppear 0.45s ease-out, shopCartPulse 1.6s ease-in-out 0.45s 3;
}

@keyframes shopCartAppear {
    0%   { transform: translate(60%, -50%) scale(0.6); opacity: 0; box-shadow: 0 0 0 rgba(255, 191, 0, 0); }
    60%  { transform: translateY(-50%) scale(1.1); opacity: 1; box-shadow: 0 0 24px rgba(255, 191, 0, 0.85); }
    100% { transform: translateY(-50%) scale(1); opacity: 1; box-shadow: 0 0 12px rgba(255, 191, 0, 0.55); }
}

@keyframes shopCartPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 191, 0, 0.0), 0 0 6px rgba(255, 191, 0, 0.25); }
    50%      { box-shadow: 0 0 14px rgba(255, 191, 0, 0.6), 0 0 24px rgba(255, 191, 0, 0.35); }
}

.shop-cart-badge {
    background: #0e0e0e;
    color: #ffbf00;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

/* ── Cart drawer ───────────────────────────────────────── */

.shop-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.shop-cart-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.shop-cart-drawer {
    position: fixed;
    top: 140px; /* below header (70px) + action-bar (70px) */
    right: 0;
    height: calc(100% - 140px);
    width: 380px;
    max-width: 100vw;
    background: #161616;
    border-left: 1px solid rgba(255, 191, 0, 0.22);
    z-index: 101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.shop-cart-drawer.open { transform: translateX(0); }

.shop-cart-head {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 191, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-cart-head h3 {
    margin: 0;
    font-family: 'DragonSlayer', sans-serif;
    color: #ffbf00;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.shop-cart-close {
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.6);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.shop-cart-close:hover { color: #ffbf00; }

.shop-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.shop-cart-empty {
    text-align: center;
    padding: 2rem 0;
    color: rgba(240, 236, 230, 0.4);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.9rem;
}

.shop-cart-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-cart-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.shop-cart-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 191, 0, 0.25);
    font-size: 1.2rem;
}

.shop-cart-info {
    flex: 1;
    min-width: 0;
}

.shop-cart-name {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.88rem;
    color: rgba(240, 236, 230, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-cart-line-price {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    color: #ffbf00;
    margin-top: 2px;
}

.shop-cart-qty {
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.shop-qty-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(240, 236, 230, 0.85);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-qty-btn:hover {
    background: rgba(255, 191, 0, 0.25);
    color: #ffbf00;
}

.shop-cart-qty span {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.88rem;
    color: rgba(240, 236, 230, 0.92);
    min-width: 18px;
    text-align: center;
}

.shop-cart-remove {
    background: none;
    border: none;
    color: rgba(240, 236, 230, 0.32);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.shop-cart-remove:hover { color: #ff4444; }

.shop-cart-foot {
    padding: 1.2rem 1.5rem;
    border-top: 1px solid rgba(255, 191, 0, 0.16);
}

.shop-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
    font-family: 'HwyGothic', sans-serif;
    color: rgba(240, 236, 230, 0.7);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.shop-cart-total span:last-child {
    font-family: 'DragonSlayer', sans-serif;
    color: #ffbf00;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.shop-free-ship-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.55rem;
    border-radius: 50px;
    padding: 0.3rem 0.75rem;
    background: rgba(62, 201, 107, 0.1);
    color: #3ec96b;
    border: 1px solid rgba(62, 201, 107, 0.3);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.shop-free-ship-badge i { font-size: 0.66rem; }

.shop-cart-tax-note {
    margin: 0 0 0.85rem;
    color: rgba(240, 236, 230, 0.45);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* Discount line under the subtotal when a gift code is applied. */
.shop-cart-discount span:last-child {
    color: #ff5252;
    font-size: 1.1rem;
}

/* ── Gift / discount code box in the cart ── */
.shop-gift-box {
    margin-bottom: 0.85rem;
}

.shop-gift-row {
    display: flex;
    gap: 0.5rem;
}

.shop-gift-input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 6px;
    color: #f0ece6;
    padding: 0.5rem 0.7rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.shop-gift-input::placeholder {
    color: rgba(240, 236, 230, 0.4);
    text-transform: none;
}

.shop-gift-apply {
    background: none;
    border: 1px solid rgba(255, 191, 0, 0.45);
    color: #ffbf00;
    border-radius: 6px;
    padding: 0 0.9rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s;
}

.shop-gift-apply:hover {
    background: rgba(255, 191, 0, 0.14);
}

.shop-gift-msg {
    margin-top: 0.35rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.55);
    min-height: 0.9rem;
}

.shop-gift-msg.error {
    color: #ff6b6b;
}

.shop-gift-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(62, 201, 107, 0.1);
    border: 1px solid rgba(62, 201, 107, 0.35);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.82rem;
    color: #d8f5e2;
}

.shop-gift-applied strong {
    color: #fff;
    letter-spacing: 0.04em;
}

.shop-gift-remove {
    background: none;
    border: none;
    color: rgba(255, 120, 120, 0.85);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}

.shop-checkout-btn {
    width: 100%;
    background: #ffbf00;
    color: #0e0e0e;
    border: none;
    border-radius: 6px;
    padding: 0.75rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.shop-checkout-btn:hover:not(:disabled) { background: #ffd040; }
.shop-checkout-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(240, 236, 230, 0.3);
    cursor: not-allowed;
}

.shop-cart-error {
    margin-bottom: 0.5rem;
    color: #ff6b6b;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.78rem;
    min-height: 0;
}

.shop-cart-error:empty {
    display: none;
}

.shop-cart-note {
    margin: 0.6rem 0 0;
    text-align: center;
    color: rgba(240, 236, 230, 0.45);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* ── Mobile cart adjustments ───────────────────────────── */

@media only screen and (max-width: 767px), only screen and (hover: none) {
    body.cart-open .action-bar { display: none; }

    .shop-cart-overlay { z-index: 1003; }

    .shop-cart-drawer {
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: 100%;
        max-width: 100vw;
        z-index: 1004;
    }

    .shop-modal {
        top: 0;
        bottom: 70px; /* above mobile action-bar */
    }

    .shop-modal-box {
        max-height: calc(100vh - 70px - 2rem);
    }
}

/* ── Checkout modal ────────────────────────────────────── */

.shop-modal {
    position: fixed;
    top: 140px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.shop-modal.open {
    opacity: 1;
    pointer-events: all;
}

.shop-modal-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    background: #1c1c1c;
    border: 1px solid rgba(255, 191, 0, 0.26);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    max-height: calc(100vh - 140px - 2rem);
    overflow-y: auto;
}

.shop-modal-box h2 {
    margin: 0 0 0.75rem;
    font-family: 'DragonSlayer', sans-serif;
    color: #ffbf00;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}

.shop-modal-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0.5rem 0 0.75rem;
}

.shop-modal-section {
    margin: 0 0 0.65rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.5);
    letter-spacing: 0.06em;
}

.shop-form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.shop-form-field {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 0.65rem;
}

.shop-form-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.78rem;
    color: rgba(240, 236, 230, 0.6);
    letter-spacing: 0.05em;
}

.shop-form-field input {
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 0.55rem 0.75rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.9rem;
    color: rgba(240, 236, 230, 0.92);
    transition: border-color 0.15s ease;
}

.shop-form-field input:focus {
    outline: none;
    border-color: rgba(255, 191, 0, 0.5);
}

.shop-summary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.6rem 1rem;
}

.shop-summary-title {
    margin-bottom: 0.5rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    color: rgba(240, 236, 230, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    color: rgba(240, 236, 230, 0.82);
}

.shop-summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.95rem;
    color: #ffbf00;
    font-weight: bold;
}

.shop-error {
    margin: 0.75rem 0;
    color: #ff6b6b;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.82rem;
    min-height: 1.2em;
}

.shop-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.shop-modal-btn {
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 5px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.shop-modal-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(240, 236, 230, 0.7);
}

.shop-modal-btn.cancel:hover { background: rgba(255, 255, 255, 0.14); }

.shop-modal-btn.submit {
    background: #ffbf00;
    color: #0e0e0e;
}

.shop-modal-btn.submit:hover:not(:disabled) { background: #ffd040; }

.shop-modal-btn.submit:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(240, 236, 230, 0.3);
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   store-success.html (route: /test/success) — preserved
   These classes are referenced by the success template.
   ═══════════════════════════════════════════════════════════ */

.phys-success-page {
    max-width: 560px;
    margin: 3rem auto;
    padding: 3rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(120% 80% at 50% -5%, rgba(255, 191, 0, 0.16), transparent 60%),
        linear-gradient(180deg, #17140e, #0d0c0a);
    border: 1px solid rgba(255, 191, 0, 0.35);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 191, 0, 0.08);
    animation: physSuccessIn 0.5s cubic-bezier(0.16, 1.2, 0.3, 1) both;
}

.phys-success-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.6rem;
    color: #ffbf00;
    background: radial-gradient(circle at 50% 32%, rgba(255, 191, 0, 0.32), rgba(255, 191, 0, 0.05) 70%);
    border: 2px solid rgba(255, 191, 0, 0.6);
    box-shadow: 0 0 28px rgba(255, 191, 0, 0.35), inset 0 0 18px rgba(255, 191, 0, 0.2);
    animation: physSuccessMedal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.phys-success-icon i {
    filter: drop-shadow(0 0 10px rgba(255, 191, 0, 0.7));
}

.phys-success-page h2 {
    font-family: 'DragonSlayer', sans-serif;
    font-weight: normal;
    color: #ffbf00;
    font-size: 2rem;
    letter-spacing: 2px;
    margin: 0 0 1rem;
    text-shadow: 0 2px 12px rgba(255, 191, 0, 0.3);
}

.phys-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.8rem;
}

.phys-success-actions .phys-back-link {
    margin-top: 0;
}

/* Secondary actions: outlined, so VIEW MY ORDERS reads as the main way on */
.phys-success-actions .phys-back-link + .phys-back-link {
    background: transparent;
    color: #ffbf00;
    border: 1px solid rgba(255, 191, 0, 0.45);
}

.phys-success-actions .phys-back-link + .phys-back-link:hover {
    background: rgba(255, 191, 0, 0.12);
    color: #ffbf00;
}

@keyframes physSuccessIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes physSuccessMedal {
    0%   { opacity: 0; transform: scale(2) rotate(-20deg); filter: blur(8px); }
    60%  { opacity: 1; transform: scale(0.93) rotate(2deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

@media (max-width: 767px) {
    .phys-success-page { margin: 1.5rem 16px; padding: 2.2rem 1.4rem; }
    .phys-success-page h2 { font-size: 1.6rem; }
}

.phys-success-page p {
    font-family: 'HwyGothic', sans-serif;
    color: rgba(240, 236, 230, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.phys-back-link {
    display: inline-block;
    margin-top: 2rem;
    background: #ffbf00;
    color: #0e0e0e;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 0.7rem 1.8rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.phys-back-link:hover { background: #ffd040; }

/* ═══════════════════════════════════════════════════════════
   Item detail page (/test/item/{id})
   ═══════════════════════════════════════════════════════════ */

.shop-item-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: rgba(240, 236, 230, 0.55);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.shop-item-back:hover { color: #ffbf00; }

.shop-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    background: #1c1c1c;
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 12px;
    padding: 1.5rem;
    box-sizing: border-box;
}

@media (max-width: 820px) {
    .shop-item-layout { grid-template-columns: 1fr; }
    /* Single-column: the gallery already eats most of the viewport, so cap the
       description tighter to keep options + ADD TO CART within easy reach. */
    .shop-item-desc { max-height: 140px; }
}

.shop-item-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.shop-item-main-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0e0e0e;
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 10px;
    overflow: hidden;
}

.shop-item-main-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.shop-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(14, 14, 14, 0.7);
    border: 1px solid rgba(255, 191, 0, 0.35);
    color: #ffbf00;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.shop-gallery-nav:hover { background: rgba(255, 191, 0, 0.25); }
.shop-gallery-nav.prev { left: 10px; }
.shop-gallery-nav.next { right: 10px; }

.shop-item-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shop-item-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    background: #0e0e0e;
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.shop-item-thumb:hover { border-color: rgba(255, 191, 0, 0.45); }
.shop-item-thumb.active { border-color: #ffbf00; box-shadow: 0 0 0 1px #ffbf00 inset; }
.shop-item-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-item-detail {
    min-width: 0;
}

.shop-item-name {
    margin: 0.25rem 0 0.5rem;
    font-family: 'DragonSlayer', sans-serif;
    font-size: 1.8rem;
    color: rgba(240, 236, 230, 0.95);
    letter-spacing: 0.03em;
    word-break: break-word;
}

.shop-item-price {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1.4rem;
    color: #ffbf00;
    font-weight: bold;
    margin-bottom: 1rem;
}

.shop-item-desc {
    color: rgba(240, 236, 230, 0.82);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    /* Long descriptions scroll inside the box instead of pushing the option
       selectors and ADD TO CART button below the fold. */
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 191, 0, 0.35) transparent;
}

.shop-item-desc::-webkit-scrollbar {
    width: 6px;
}

.shop-item-desc::-webkit-scrollbar-thumb {
    background: rgba(255, 191, 0, 0.35);
    border-radius: 3px;
}

.shop-item-desc::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Digital Bundle contents (skins/packs granted by the item) ── */

.shop-item-bundle {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 191, 0, 0.18);
    border-radius: 8px;
}

.shop-item-bundle-title {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #ffbf00;
    margin-bottom: 0.5rem;
}

.shop-item-bundle-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-item-bundle-row img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.shop-item-bundle-name {
    color: rgba(240, 236, 230, 0.88);
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.88rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-item-bundle-kind {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: rgba(240, 236, 230, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 0.14rem 0.5rem;
    flex-shrink: 0;
}

.shop-item-bundle-qty {
    color: #ffbf00;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

.shop-item-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.shop-item-option {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.shop-item-option-label {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.68rem;
    color: rgba(240, 236, 230, 0.55);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shop-item-option select {
    /* Explicit dark background — without it the OS-default would render the closed
       select with a light system color, making the gold text unreadable. */
    background-color: #141414;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffbf00'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 6px;
    padding: 0.55rem 2rem 0.55rem 0.8rem;
    color: #f0ece6;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.shop-item-option select option {
    background-color: #141414;
    color: #f0ece6;
}
.shop-item-option select:focus { outline: none; border-color: rgba(255, 191, 0, 0.6); }
.shop-item-option select:hover { border-color: rgba(255, 191, 0, 0.5); }

.shop-item-actions {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.shop-item-actions .shop-tile-add {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    /* HwyGothic's metrics are top-heavy — its glyphs render high in the line box, so even
       with align-items:center the label looks like it's sitting too high. Flex centering
       can't compensate for the font's own baseline, so nudge it down with slightly more top
       than bottom padding (total stays 1.4rem, so the button height is unchanged). */
    padding: 0.82rem 1.6rem 0.58rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.shop-item-meta {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.74rem;
    color: rgba(240, 236, 230, 0.55);
    letter-spacing: 0.04em;
    min-height: 1.2em;
}

/* Price/name sit directly on the dark layout surface; bump opacity so they pop. */
.shop-item-detail .shop-item-name { color: #ffffff; }
.shop-item-detail .shop-tile-category { color: rgba(255, 191, 0, 0.7); margin-bottom: 0.25rem; }

/* ── Per-account purchase limits ─────────────────────── */
/* "LIMIT N PER ACCOUNT" corner badge (gold, informational). Once the signed-in player has hit the
   cap the tile reuses .shop-tile-oos with .shop-tile-purchased for a muted "PURCHASED" badge. */
.shop-tile-limit {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 191, 0, 0.92);
    color: #0e0e0e;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    pointer-events: none;
}
.shop-tile-purchased {
    background: rgba(90, 90, 90, 0.92);
}
.shop-item-limit {
    margin-top: 8px;
    color: #ffbf00;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}