/* ==================== Safari & iOS Fixes ==================== */
/* Safari-specific fixes for mobile compatibility */

/* Fix 100vh issue in Safari mobile - accounts for address bar */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
}

/* Prevent auto-zoom on input focus in Safari iOS */
/* Apply 16px only on mobile viewports to prevent zoom */
@media (max-width: 768px) {
    input[type="text"]:not(.sell-form__input),
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 14px !important;
    }
}

/* Fix sticky positioning in Safari */
.sticky-element {
    position: -webkit-sticky;
    position: sticky;
}

/* Smooth scrolling for Safari */
* {
    -webkit-overflow-scrolling: touch;
}

/* Fix backdrop-filter for Safari */
.top-nav {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Fallback for older Safari versions */
    background-color: rgba(13, 13, 13, 0.85);
}

/* Fix flexbox bugs in Safari */
.flex-container {
    min-height: 0;
    min-width: 0;
}

/* Prevent text size adjustment in Safari */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix appearance for form elements in Safari */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* iOS Safari: Prevent tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari: Fix for position fixed elements */
body.ios-fix {
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

/* iOS Safari: Fix viewport width calculation */
@supports (-webkit-touch-callout: none) {
    .site-content-shell,
    main {
        width: 100%;
        max-width: 100%;
    }
}

/* iOS Safari: Fix for transform and position fixed */
@supports (-webkit-touch-callout: none) {
    .top-nav {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }
}

/* iOS Safari: Better flex container handling */
@supports (-webkit-touch-callout: none) {
    body {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

/* iOS Safari: Fix for overflow issues */
@supports (-webkit-touch-callout: none) {
    body, html {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
}

/* Force hardware acceleration for smoother animations on iOS - targeted elements only */
@supports (-webkit-touch-callout: none) {
    body,
    main,
    .site-content-shell,
    .top-nav,
    .nav-wrapper,
    .site-footer,
    .modal-window {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* iOS Safari: Fix safe area insets (notch) */
@supports (-webkit-touch-callout: none) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==================== End Safari Fixes ==================== */

/* Ikona s firemnou žltou farbou #ffb703 */
.icon--accent-yellow {
    filter: invert(77%) sepia(97%) saturate(7492%) hue-rotate(1deg) brightness(104%) contrast(101%);
}
/* About page styles moved from about.html */
.about-featured__list--bullets {
    list-style: disc inside;
    gap: 8px;
}
.about-featured__item {
    margin: 0;
    padding: 0 0 0 8px;
}
.about-featured__link {
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s;
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}
.about-featured__link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}
.about-featured__link-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px;
}

.faq-cookie-list {
    list-style: disc inside;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #f6e9c2;
    margin-bottom: 12px;
}

.faq-cookie-item {
    margin: 0;
    color: inherit;
}

.faq-cookie-link {
    color: #f6e9c2;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s;
}

.faq-cookie-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.faq-cookie-intro {
    margin-bottom: 0;
}
/* Zvýraznené odkazy v headeri (ako buttony) */
.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.header-actions .header-action-link {
    background: var(--accent-color);
    color: #222 !important;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(255,183,3,0.10);
    transition: background 0.18s, box-shadow 0.18s, color 0.18s;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.header-actions .header-action-link:hover,
.header-actions .header-action-link:focus-visible {
    background: var(--accent-hover);
    color: #111 !important;
    box-shadow: 0 4px 16px 0 rgba(255,183,3,0.18);
    text-decoration: none;
}
/* Zvýraznené tlačidlá v headeri */
.header-actions button.nav-link-button {
    background: var(--accent-color);
    color: #222;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(255,183,3,0.10);
    transition: background 0.18s, box-shadow 0.18s, color 0.18s;
}
.header-actions button.nav-link-button:hover,
.header-actions button.nav-link-button:focus-visible {
    background: var(--accent-hover);
    color: #111;
    box-shadow: 0 4px 16px 0 rgba(255,183,3,0.18);
}
/* Theme Variables */
:root {
    /* Dark theme variables (default) */
    --bg-color: #0d0d0d;
    --bg-secondary: #161616;
    --bg-card: #1d1d1d;
    --text-color: #f5f5f5;
    --text-secondary: #9c9c9c;
    --accent-color: #ffb703;
    --accent-hover: #ffd166;
    --border-color: #262626;
    --shadow-color: rgba(0, 0, 0, 0.65);
    --card-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
    --input-bg: #151515;
    --accent-color-rgb: 255, 183, 3;
    --accent-color-deep: #f59e0b;
    --accent-soft: rgba(255, 183, 3, 0.14);
    --accent-glow: rgba(255, 183, 3, 0.45);
    --bg-gradient: radial-gradient(650px circle at 20% 18%, rgba(255, 183, 3, 0.08), transparent 58%), radial-gradient(800px circle at 80% 74%, rgba(0, 119, 182, 0.12), transparent 65%);
    --success-color: #90ba3c;
    --error-color: #e63946;
    --layout-max-width: 1600px;
    --layout-gutter: clamp(16px, 5vw, 10px);
}

[data-theme="light"] {
    /* Light theme variables */
    --bg-color: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-color: #1f1f1f;
    --text-secondary: #555555;
    --accent-color: #ffb703;
    --accent-hover: #ffa62b;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    --input-bg: #f0f0f0;
    --accent-color-rgb: 255, 183, 3;
    --accent-color-deep: #f59e0b;
    --accent-soft: rgba(255, 183, 3, 0.16);
    --accent-glow: rgba(255, 183, 3, 0.3);
    --bg-gradient: radial-gradient(720px circle at 16% 22%, rgba(255, 183, 3, 0.12), transparent 62%), radial-gradient(860px circle at 82% 72%, rgba(0, 119, 182, 0.1), transparent 68%);
    --success-color: #90ba3c;
    --error-color: #e63946;
}

[data-theme="light"] body.landing-page {
    /* Force landing page to keep dark palette even in light theme */
    --bg-color: #0d0d0d;
    --bg-secondary: #161616;
    --bg-card: #1d1d1d;
    --text-color: #f5f5f5;
    --text-secondary: #9c9c9c;
    --accent-color: #ffb703;
    --accent-hover: #ffd166;
    --border-color: #262626;
    --shadow-color: rgba(0, 0, 0, 0.65);
    --card-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
    --input-bg: #151515;
    --accent-color-rgb: 255, 183, 3;
    --accent-color-deep: #f59e0b;
    --accent-soft: rgba(255, 183, 3, 0.14);
    --accent-glow: rgba(255, 183, 3, 0.45);
    --bg-gradient: radial-gradient(650px circle at 20% 18%, rgba(255, 183, 3, 0.08), transparent 58%), radial-gradient(800px circle at 80% 74%, rgba(0, 119, 182, 0.12), transparent 65%);
    --success-color: #90ba3c;
    --error-color: #e63946;
    --layout-max-width: 1600px;
    --layout-gutter: clamp(16px, 5vw, 10px);
}

html {
    height: 100%;
}


/* Base styles */
body {
    min-height: 100vh;
    /* iOS Safari fix: use CSS variable for viewport height */
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

main {
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 12px var(--layout-gutter);
    box-sizing: border-box;
}

.site-content-shell {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.site-footer {
    width: 100%;
    padding: 10px 0 0 0;
    background: none;
    border-top: none;
    box-shadow: none;
    margin-top: auto;
}

.footer-shell {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--layout-gutter) 8px var(--layout-gutter);
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: clamp(12px, 3vw, 48px);
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
}

.footer-column {
    display: flex;
    flex-direction: column;
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-column p {
    margin: 0;
}

.footer-column--meta {
    align-items: flex-start;
    text-align: left;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}


.footer-column--meta p:first-child {
    font-size: 1rem;
    font-weight: 500;
}

.footer-column--meta p:last-child {
    font-size: .77rem;
}

.footer-column--social {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
    gap: 20px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    min-width: fit-content;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    transition: transform 0.15s ease-out, color 0.2s ease;
}

.footer-social::after {
    content: "";
    display: block;
    background-color: currentColor;
    mask: var(--footer-icon) center / contain no-repeat;
    -webkit-mask: var(--footer-icon) center / contain no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background-color 0.2s ease;
}

.footer-social--twitter::after {
    width: 26px;
    height: 26px;
}

.footer-social--facebook::after {
    width: 32px;
    height: 32px;
}

.footer-social--steam::after {
    width: 29px;
    height: 29px;
}

.footer-social:hover,
.footer-social:focus-visible {
    transform: translateY(-2px);
    color: var(--accent-color);
}

.footer-social:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
    border-radius: 50%;
}


.footer-social::before {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 6px);
    opacity: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
    max-width: calc(100vw - 24px);
    text-align: center;
}

.footer-social:hover::before,
.footer-social:focus-visible::before {
    opacity: 1;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 0);
}
.footer-column--social .footer-social {
    color: var(--text-secondary)
}
[data-theme="light"] .footer-column--social {
    color: var(--text-secondary);
}
[data-theme="light"] .footer-column--social .footer-social {
    color: var(--text-secondary);
}
.footer-column--social .footer-social:hover,
.footer-column--social .footer-social:focus-visible {
    color: var(--accent-color);
}

.footer-social--facebook {
    --footer-icon: url("../images/facebook.svg");
}

.footer-social--steam {
    --footer-icon: url("../images/steam.svg");
}

.footer-social--twitter {
    --footer-icon: url("../images/twitter.svg");
}

@media (max-width: 900px) {
    .footer-column--meta {
        align-items: flex-start;
        text-align: left;
    }

    .footer-column--social {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-link {
        transform: none;
    }

    .footer-link:hover,
    .footer-link:focus-visible {
        transform: none;
    }

    .top-nav {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        row-gap: 12px;
        padding: 8px clamp(4px, 4vw, 10px) 8px 2px;
    }

    .site-primary-nav {
        grid-column: 1 / -1;
        position: static;
        left: auto;
        top: auto;
        transform: none;
        height: auto;
        justify-self: center;
    }

    .site-primary-nav__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .nav-controls {
        justify-self: end;
    }

}

@media (max-width: 600px) {
    .site-footer {
        padding: 10px 0 0 0;
    }

    .footer-shell {
        padding: 0 16px 8px 16px;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .footer-column--meta {
        align-items: flex-start;
        text-align: left;
        flex-shrink: 1;
        min-width: 0;
    }

    .footer-column--meta p {
        font-size: 13px;
    }

    .footer-column--meta p:last-child {
        font-size: 11px;
    }

    .footer-column--social {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
        flex-shrink: 0;
    }

    .footer-social {
        width: 36px;
        height: 36px;
    }
}

/* Top Navigation Bar */
.top-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    padding: 0 clamp(4px, 1.2vw, 10px) 0 2px;
    box-sizing: border-box;
    background: rgba(6, 7, 12, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);   
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    animation: slideIn 0.6s ease-out;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

[data-theme="light"] .top-nav {
    background: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    justify-self: start;
    margin-right: auto;
}

.site-logo {
    height: 50px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

.site-branding a {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.site-branding a::before,
.site-branding a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    pointer-events: none;
}

.site-branding a::before {
    background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), 0.45) 0%, rgba(var(--accent-color-rgb), 0.12) 38%, rgba(var(--accent-color-rgb), 0) 65%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
    filter: blur(6px);
}

.site-branding a::after {
    box-shadow: 0 0 0 rgba(var(--accent-color-rgb), 0);
    transition: box-shadow 0.2s ease;
}

.site-branding a:focus-visible {
    outline: none;
    transform: translateY(-2px);
}

.site-branding a:hover,
.site-branding a:focus-visible {
    transform: translateY(-2px);
}

.site-branding a:hover::after,
.site-branding a:focus-visible::after {
    box-shadow: 0 12px 28px rgba(var(--accent-color-rgb), 0.22);
}

.site-branding a:hover::before,
.site-branding a:focus-visible::before {
    opacity: 1;
    transform: scale(1.05);
}

.site-branding a:hover .site-logo {
    transform: scale(1.05);
    filter: brightness(1.08);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: end;
}

.nav-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.15s ease-out, color 0.2s ease;
    position: relative;
}

.nav-icon-btn:hover,
.nav-icon-btn:focus-visible {
    color: var(--accent-color);
    background-color: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}

.nav-icon-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.nav-cart {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-cart::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -40px;
    right: 0;
    height: 18px;
    display: none;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}

.nav-cart::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: -20px;
    right: 0;
    height: 14px;
    display: none;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}

.nav-cart:not(.nav-cart--empty)::after {
    display: block;
}

.nav-cart:not(.nav-cart--empty)::before {
    display: block;
}

.nav-cart.nav-cart--empty .nav-cart-preview {
    display: none;
}

.nav-cart-btn::after {
    content: none !important;
}

.nav-cart-preview {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(320px, 80vw);
    box-sizing: border-box;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow: hidden;
    --nav-cart-item-height: 62px;
    --nav-cart-item-gap: 10px;
}

.nav-cart:hover .nav-cart-preview,
.nav-cart:focus-within .nav-cart-preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-cart-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.nav-cart-preview__title {
    font-size: 14px;
    font-weight: 600;
}

.nav-cart-preview__total {
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-cart-preview__total-label {
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-cart-preview__total-label::after {
    content: none;
}

.nav-cart-preview__total-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-cart-preview__list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    margin-right: -4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    max-height: calc(var(--nav-cart-item-height) * 5 + var(--nav-cart-item-gap) * 4 + 4px);
    min-height: 0;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-cart-preview__list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.nav-cart-preview__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-right: 2px;
    min-height: var(--nav-cart-item-height);
    position: relative;
}

.nav-cart-preview__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-cart-preview__thumb img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    display: block;
}

.nav-cart-preview__info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px;
    padding-right: 64px;
}

.nav-cart-preview__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
}

.nav-cart-preview__meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.nav-cart-preview__meta-text {
    color: var(--text-secondary);
    white-space: nowrap;
}

.nav-cart-preview__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}

.nav-cart-preview__badge--stattrak {
    color: #ff782c;
}

.nav-cart-preview__badge--souvenir {
    color: #ffe14a;
}

.nav-cart-preview__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    position: absolute;
    right: 8px;
    bottom: 6px;
}

.nav-cart-preview__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.15s ease;
}

.nav-cart-preview__remove:hover,
.nav-cart-preview__remove:focus-visible {
    color: var(--accent-color);
}

.nav-cart-preview__remove:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.nav-cart-preview__empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.nav-cart-preview__footer {
    margin-top: auto;
    width: 100%;
}

.nav-cart-preview__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--accent-color);
    color: #111;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.nav-cart-preview__cta:hover,
.nav-cart-preview__cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.nav-cart-preview__cta:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

.nav-icon-btn__icon {
    width: 24px;
    height: 24px;
    display: block;
    background-color: currentColor;
    -webkit-mask: url('../images/cart.svg') center/contain no-repeat;
    mask: url('../images/cart.svg') center/contain no-repeat;
    transition: background-color 0.2s ease;
}

.nav-icon-btn__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    background: var(--accent-color);
    color: #111;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.45);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-icon-btn__badge[hidden] {
    display: none;
}

.nav-icon-btn:hover .nav-icon-btn__badge,
.nav-icon-btn:focus-visible .nav-icon-btn__badge {
    transform: translateY(-2px);
}

.mobile-nav-cart--controls .nav-icon-btn__badge,
.mobile-nav-cart .nav-icon-btn__badge {
    top: 2px;
    right: 2px;
    transform: none;
}

.cart-flyer {
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 60;
}

.locale-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

.locale-switcher:hover .locale-switcher__button,
.locale-switcher:focus-within .locale-switcher__button {
    color: var(--accent-color);
}

.locale-switcher:hover .locale-switcher__divider,
.locale-switcher:focus-within .locale-switcher__divider {
    opacity: 0.6;
}

.locale-switcher__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease-out, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    position: relative;
}

.locale-switcher__button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    transform: translateY(-2px);
}

.locale-switcher__button:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

[data-theme="dark"] .locale-switcher:hover .locale-switcher__button,
[data-theme="dark"] .locale-switcher:focus-within .locale-switcher__button {
    color: var(--accent-color);
}

[data-theme="light"] .locale-switcher__button {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

[data-theme="light"] .locale-switcher__button:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .locale-switcher:hover .locale-switcher__button,
[data-theme="light"] .locale-switcher:focus-within .locale-switcher__button {
    color: var(--accent-color);
}

.locale-switcher__currency-symbol {
    font-weight: 700;
    margin-right: -4px;
}

.locale-switcher__language-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.locale-switcher__language-flag img {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.locale-switcher__divider {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.locale-switcher__panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 200px;
    padding: 20px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1200;
    overflow: visible;
}

.locale-switcher__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.locale-switcher__close::before,
.locale-switcher__close::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.locale-switcher__close::before {
    transform: rotate(45deg);
}

.locale-switcher__close::after {
    transform: rotate(-45deg);
}

.locale-switcher__close:hover,
.locale-switcher__close:focus-visible {
    color: var(--accent-color);
    outline: none;
}

[data-theme="light"] .locale-switcher__panel {
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16);
}

.locale-switcher__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    padding-right: 32px;
}

.locale-switcher__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.locale-switcher__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.locale-switcher__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.locale-switcher__dropdown {
    position: relative;
    width: 100%;
}

.locale-switcher__dropdown .sort-dropdown__toggle {
    width: 100%;
}

.locale-switcher__options {
    left: 0;
    right: 0;
    width: max(100%, 220px);
    max-width: calc(100vw - 32px);
    z-index: 1500;
}

.locale-switcher__option {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
}

.locale-switcher__option::after {
    margin-left: auto;
}

.locale-switcher__option[aria-selected="true"]::after {
    border-color: rgba(var(--accent-color-rgb), 0.85);
    background: rgba(var(--accent-color-rgb), 0.4);
}

.locale-switcher__option[aria-selected="true"] {
    background: rgba(var(--accent-color-rgb), 0.16);
    border-color: rgba(var(--accent-color-rgb), 0.65);
}

.locale-switcher__toggle-label {
    flex: 1;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.locale-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.locale-switcher__select--native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.locale-switcher__disclaimer {
    font-size: 11px;
    margin: 0;
    color: var(--accent-color);
    line-height: 1.5;
}

.locale-switcher__actions {
    display: flex;
    justify-content: center;
}

.locale-switcher__confirm {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent-color);
    border: none;
    color: #1f1f1f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.locale-switcher__confirm:hover,
.locale-switcher__confirm:focus-visible {
    background: var(--accent-hover);
    box-shadow: 0 10px 24px rgba(var(--accent-color-rgb), 0.35);
}

.locale-switcher__panel[hidden] {
    display: none;
}

/* Global first-visit locale overlay */
.global-locale-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    isolation: isolate;
}

.global-locale-overlay[hidden] {
    display: none;
}

body.global-locale-overlay-active {
    transform: none !important;
    -webkit-transform: none !important;
}

.global-locale-overlay__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    pointer-events: none;
}

.global-locale-overlay__panel {
    position: relative;
    z-index: 2;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    pointer-events: auto;
    box-sizing: border-box;
}

.global-locale-overlay__title {
    margin: 0 0 24px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.global-locale-overlay__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.global-locale-overlay__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.global-locale-overlay__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Dropdowns in global overlay inherit locale-switcher styles */
.global-locale-overlay .locale-switcher__dropdown {
    position: relative;
    width: 100%;
}

.global-locale-overlay .locale-switcher__options {
    z-index: 10001;
}

.global-locale-overlay__disclaimer {
    font-size: 12px;
    color: var(--accent-color);
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.global-locale-overlay__actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.global-locale-overlay__confirm {
    padding: 14px 32px;
    border-radius: 999px;
    background: var(--accent-color);
    border: none;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
}

.global-locale-overlay__confirm:hover,
.global-locale-overlay__confirm:focus-visible {
    background: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.4);
    transform: translateY(-2px);
}

.global-locale-overlay__confirm:active {
    transform: translateY(0);
}

@media (max-width: 576px) {
    .global-locale-overlay__panel {
        padding: 24px;
    }
    
    .global-locale-overlay__title {
        font-size: 20px;
    }
}

.nav-logout-form {
    margin: 0;
}

.nav-logout-form,
.nav-logout-form button {
    display: inline-flex;
    align-items: center;
}

.nav-link-button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.nav-link-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.site-primary-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
}

.landing-page .site-primary-nav {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    padding: 0;
    height: auto;
    justify-content: center;
}

.site-primary-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(16px, 4vw, 32px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-primary-nav__link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease;
}

@media (max-width: 1180px) {
    .header-actions {
        gap: clamp(6px, 2vw, 12px);
    }

    .header-actions .header-action-link {
        padding: 8px clamp(12px, 2.6vw, 16px);
        font-size: 14px;
    }

    .site-primary-nav__list {
        gap: clamp(12px, 3vw, 24px);
    }

    .site-primary-nav__link {
        font-size: 14px;
    }
}

.site-primary-nav__link:hover,
.site-primary-nav__link:focus-visible {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.landing-page .site-primary-nav__link {
    color: var(--text-secondary);
}

.landing-page .site-primary-nav__link:hover,
.landing-page .site-primary-nav__link:focus-visible {
    color: var(--accent-color);
}

.auth-card {
    max-width: 420px;
    margin: 60px auto;
    padding: 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.auth-description {
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 15px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-field label {
    font-weight: 600;
    color: var(--text-color);
}

.auth-field input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 15px;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
}

.auth-field .errorlist {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--error-color);
    font-size: 13px;
}

.auth-error {
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.4);
    color: var(--error-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
}

.primary-btn {
    align-self: flex-start;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    background: var(--accent-color);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.primary-btn:hover,
.primary-btn:focus-visible {
    background: var(--accent-hover);
}

.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-link:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Theme Switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle,
.mobile-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; /* Reduced from 40px */
    height: 28px; /* Reduced from 40px */
    border-radius: 50%;
    padding: 0;
    transition: transform 0.15s ease-out, color 0.2s ease;
    font-size: 0;
    position: relative;
    color: #0c0c0c;
    --theme-toggle-icon: url("../images/icon-sun.svg");
    --theme-toggle-size: 26px;
}

.theme-toggle__icon {
    width: var(--theme-toggle-size);
    height: var(--theme-toggle-size);
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--theme-toggle-icon);
    mask-image: var(--theme-toggle-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .mobile-theme-toggle {
    color: #f5f5f5;
    --theme-toggle-icon: url("../images/icon-sun.svg");
    --theme-toggle-size: 30px;
}

[data-theme="light"] .theme-toggle,
[data-theme="light"] .mobile-theme-toggle {
    color: #0c0c0c;
    --theme-toggle-icon: url("../images/icon-moon.svg");
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.nav-icon-btn::after,
.locale-switcher__button::after,
.theme-toggle::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), -6px);
    opacity: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    max-width: calc(100vw - 24px);
    text-align: center;
}

.nav-icon-btn:hover::after,
.nav-icon-btn:focus-visible::after,
.locale-switcher__button:hover::after,
.locale-switcher__button:focus-visible::after,
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
    opacity: 1;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 0);
}

/* Page Header */
.page-header {
    animation: fadeIn 0.6s ease-out;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--text-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
    display: inline-block;
}

.page-hero-metric {
    text-align: center;
    margin: 0px auto 0px;
    max-width: 480px;
    display: grid;
    animation: fadeIn 0.6s ease-out;
}

.page-hero-metric__value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.page-hero-metric__number {
    color: var(--accent-color);
}

.page-hero-metric__label {
    font-weight: 600;
    color: var(--text-color);
}

.page-hero-metric__caption {
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.015em;
}

/* Search and Filter */
.search-filter-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.search-filter-container--inline {
    max-width: 360px;
    order: 2;
}

.search-filter-container--inline input[type="text"],
.search-filter-container--inline input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

.search-filter-container--inline .filter-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-controls-container .search-filter-container--inline {
    width: 100%;
}

.stats-controls-container.justify-end .search-filter-container--inline {
    margin-right: auto;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sort-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.sort-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}

.sort-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sort-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
    justify-content: space-between;
    text-align: left;
    min-width: 140px;
}

.sort-dropdown__toggle::after {
    content: "";
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23ffb703'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffb703' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
    transform-origin: center;
}

.sort-dropdown__toggle:hover,
.sort-dropdown__toggle:focus-visible {
    border-color: rgba(var(--accent-color-rgb), 0.45);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    outline: none;
}

.sort-dropdown.is-open .sort-dropdown__toggle {
    border-color: rgba(var(--accent-color-rgb), 0.6);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
    transform: translateY(-1px);
}

.sort-dropdown.is-open .sort-dropdown__toggle::after {
    transform: rotate(180deg);
}

.locale-switcher .sort-dropdown__panel,
.locale-switcher__options.sort-dropdown__panel {
    width: 230px;
    max-width: calc(100vw - 32px);
}

.sort-dropdown__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 180px;
    padding: 14px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.4);
    display: grid;
    gap: 8px;
    z-index: 900;
    text-align: left;
}

[data-theme="light"] .sort-dropdown__toggle {
    background: #f9f9f9;
    border-color: rgba(17, 24, 39, 0.12);
    color: #1f1f1f;
}

[data-theme="light"] .sort-dropdown.is-open .sort-dropdown__toggle {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .sort-dropdown__panel {
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16);
}

.sort-dropdown__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
    /* Safari-specific fixes */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.sort-dropdown__option::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.sort-dropdown__option:hover,
.sort-dropdown__option:focus-visible {
    background: rgba(var(--accent-color-rgb), 0.12);
    border-color: rgba(var(--accent-color-rgb), 0.5);
    outline: none;
}

.sort-dropdown__option.is-active::after {
    border-color: rgba(var(--accent-color-rgb), 0.85);
    background: rgba(var(--accent-color-rgb), 0.4);
}

.sort-dropdown__option.is-active {
    background: rgba(var(--accent-color-rgb), 0.16);
    border-color: rgba(var(--accent-color-rgb), 0.65);
}

.sort-dropdown__panel[hidden] {
    display: none;
}

#search-box {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-color);
    font-size: 14px !important;
    transition: all 0.2s ease;
}

#search-box:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.1);
}

#search-box::placeholder {
    color: var(--text-secondary);
}

#filter-panel-toggle {
    position: absolute;
    right : 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px; 
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23aaaaaa'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    z-index: 4;
}

/* X icon when panel is open */
#filter-panel-toggle.panel-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23aaaaaa'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#filter-panel-toggle:hover,
#filter-panel-toggle:active,
#filter-panel-toggle:focus {
    background-color: transparent;
}

/* Filter Panel */
#filter-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin: 24px auto 24px;
    max-width: 1200px;
    display: none;
}

#filter-panel.show {
    display: block;
}

#filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    align-items: start;
}
.filter-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 345px;
    background: var(--bg-primary);
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box;
    min-height: 0;
}

.filter-group h3 {
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 1;
}

/* Grid container for filter options */
.filter-options-grid {
    display: grid;
    gap: 4px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    flex: 1 1 auto;
    min-height: 0;
}

/* Adjust grid columns based on filter group */
.filter-group[data-type="weapon_types"] .filter-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (max-width: 1024px) and (min-width: 769px) {
    .filter-group[data-type="weapon_types"] .filter-options-grid {
        gap: 18px 24px;
    }
}

.filter-group[data-type="item_types"] .filter-options-grid {
    grid-template-columns: 1fr 1fr;
}

.filter-group[data-type="tradable"] .filter-options-grid {
    grid-template-columns: 1fr;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 4px;
}

.filter-option:hover {
    background: var(--bg-hover);
}

.filter-option input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-primary);
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
}

.filter-option input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    background-image: url('../images/check.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.filter-option label {
    flex: 1;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-color);
}

.filter-count {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 2px 8px;
    background: var(--bg-primary);
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
    align-self: flex-start;
}

.filter-button {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-button:hover,
.filter-button.active {
    color: var(--accent-color);
    background: var(--bg-secondary);
}

.manual-import {
    margin: 12px auto 14px;
    max-width: 860px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manual-import[hidden] {
    display: none !important;
}

.manual-import * {
    box-sizing: border-box;
}

.manual-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.manual-field {
    flex: 1 1 calc(50% - 9px);
    max-width: calc(50% - 9px);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 720px) {
    .manual-field {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

.manual-import-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.manual-import-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.manual-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 0;
}

.manual-import textarea {
    width: 100%;
    min-height: 64px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-color);
    padding: 10px;
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    resize: none;
    overflow: auto;
    box-sizing: border-box;
}

.manual-import textarea#inventory-json-protected,
.manual-import textarea#inventory-json-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-color-rgb), 0.45) transparent;
}

.manual-import textarea#inventory-json-protected::-webkit-scrollbar,
.manual-import textarea#inventory-json-main::-webkit-scrollbar {
    width: 8px;
}

.manual-import textarea#inventory-json-protected::-webkit-scrollbar-track,
.manual-import textarea#inventory-json-main::-webkit-scrollbar-track {
    background: transparent;
}

.manual-import textarea#inventory-json-protected::-webkit-scrollbar-thumb,
.manual-import textarea#inventory-json-main::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-color-rgb), 0.35);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.manual-import textarea#inventory-json-protected::-webkit-scrollbar-thumb:hover,
.manual-import textarea#inventory-json-main::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-color-rgb), 0.55);
}

.manual-import textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.15);
}

.manual-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.manual-hint {
    margin: 0;
    font-size: 12px;
    color: var(--warning-color, var(--accent-color));

}

.open-steam {
    padding: 6px 16px;
    font-size: 13px;
    text-decoration: none;
}

.stats-controls-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto 0;
    padding: 0 50px;
}

/* Selection controls - now on left */
.selection-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1;
}
/* Stats row - now on right */
.stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 3;
    flex-wrap: wrap;
}

/* Inventory Stats */
.inventory-stats {
    color: var(--text-secondary);
    font-size: 14px;    
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.inventory-stats strong {
    color: var(--text-color);
    font-weight: 500;
    margin: 0 1px;
}

.inventory-counters {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.inventory-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inventory-counter strong {
    color: var(--text-color);
    font-weight: 500;
}

/* Buttons */
.button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.button:hover {
    background-color: var(--accent-hover);
}

/* Selection buttons */
.selection-btn {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selection-btn:hover {
    background-color: var(--bg-hover);
}

/* Save button - just different color */
.save-btn {
    background-color: var(--success-color);
    color: white;
    border: 1px solid var(--success-color);
    min-width: 120px;
}

.save-btn:hover {
    background-color: var(--success-color);
    filter: brightness(115%);
    border-color: transparent;
}

/* Refresh Button */
.refresh-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 6px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.refresh-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b949e'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.refresh-btn:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.refresh-btn:hover::before {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffb703'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-controls-container {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .selection-controls {
        order: 2;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .selection-btn {
        font-size: 12px;
        padding: 7px 10px;
        flex: 1 1 auto;
        min-width: calc(50% - 3px);
        white-space: nowrap;
    }

    .refresh-btn {
        flex: 0 0 auto;
        min-width: 34px;
    }

    .save-btn {
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
    }

    .stats-row {
        order: 3;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .search-filter-container--inline {
        order: 1;
        max-width: 100%;
        width: 100%;
    }

    .search-filter-container {
        order: 1;
        width: 100%;
    }

    .stats-row .sort-controls {
        width: auto;
        justify-content: flex-end;
        flex: 0 0 auto;
    }

    .stats-row .sort-select {
        width: auto;
        min-width: 110px;
    }

    .inventory-stats {
        justify-content: flex-start;
        text-align: left;
        flex: 0 0 auto;
    }

    #filters {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #filter-panel {
        margin: 0 16px 2px;
        padding: 2px;
    }

    .filter-group {
        gap: 8px;
    }
}

/* Inventory Grid */
#admin-form .inventory-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0px;
}

.inventory-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.inventory-tab.is-active {
    background: rgba(var(--accent-color-rgb, 255, 183, 3), 0.16);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

#inventory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 40px; 
    max-width: 1500px;
    margin: 6px auto;
}

#inventory[data-inventory-hydrating="true"] {
    visibility: hidden;
}

.inventory-section-heading {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    padding: 16px 4px 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: 1px solid rgba(var(--accent-color-rgb), 0.2);
}

.skin-item {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: visible;
    position: relative;
    animation: popIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    margin: 0;
    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    /* Smoother transition with fewer properties */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.skin-item:hover,
.skin-item:focus-within {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 15;
}

.skin-item.admin-selectable {
    cursor: pointer;
}

#reserved-skins-section {
    scroll-margin-top: clamp(72px, 10vh, 120px);
}

.inventory-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px 16px 60px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
}

.skin-item--readonly {
    cursor: default;
    opacity: 0.92;
}

.skin-item--readonly,
.skin-item--readonly *,
.skin-item--readonly:hover {
    cursor: default !important;
}

.skin-item--readonly .skin-price-input input,
.skin-item--readonly textarea,
.skin-item--readonly .skin-deal-toggle__input {
    cursor: default;
    opacity: 0.7;
}

.skin-deal-toggle--readonly {
    pointer-events: none;
}

/* Reserved skins scroll toggle */
.reserved-scroll-toggle,
.inventory-scroll-top {
    position: fixed;
    bottom: clamp(20px, 5vh, 72px);
    right: clamp(10px, 3.75vw, 44px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    z-index: 400;
}
.reserved-scroll-toggle:hover,
.reserved-scroll-toggle:focus-visible,
.inventory-scroll-top:hover,
.inventory-scroll-top:focus-visible {
    color: var(--accent-hover);
    filter: drop-shadow(0 0 8px rgba(var(--accent-color-rgb, 255, 183, 3), 0.65));
    transform: translateY(-2px);
    outline: none;
}

.reserved-scroll-toggle:active,
.inventory-scroll-top:active {
    transform: translateY(1px) scale(0.98);
}

.reserved-scroll-toggle[hidden],
.inventory-scroll-top[hidden] {
    display: none;
}

.reserved-scroll-toggle__icon {
    width: 300px;
    height: 300px;
    background: currentColor;
    mask: url("../images/float-indicator.svg") center / contain no-repeat;
    -webkit-mask: url("../images/float-indicator.svg") center / contain no-repeat;
    transition: transform 0.18s ease;
}

.reserved-scroll-toggle[data-direction="top"] .reserved-scroll-toggle__icon {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .reserved-scroll-toggle,
    .inventory-scroll-top {
        width: 42px;
        height: 42px;
        bottom: 18px;
        right: 12px;
    }
    
    .skin-footer {
        padding: 0 6px 14px 6px !important;
    }
}

.inventory-scroll-top__icon {
    width: 300px;
    height: 300px;
    background: currentColor;
    mask: url("../images/float-indicator.svg") center / contain no-repeat;
    -webkit-mask: url("../images/float-indicator.svg") center / contain no-repeat;
    transition: transform 0.18s ease;
}

.inventory-scroll-top[data-direction="up"] .inventory-scroll-top__icon {
    transform: rotate(180deg);
}

.inventory-scroll-top__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes inventory-scroll-top-enter {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.85);
    }
    70% {
        opacity: 1;
        transform: translateY(-8px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.inventory-scroll-top--enter {
    animation: inventory-scroll-top-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes inventory-scroll-top-exit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    40% {
        opacity: 0.4;
        transform: translateY(-6px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translateY(32px) scale(0.85);
    }
}

.inventory-scroll-top--exit {
    animation: inventory-scroll-top-exit 0.3s ease forwards;
}

.skin-item.selected {
    border-color: var(--accent-color) !important;
    /* Keep width unchanged and rely on shadow for emphasis */
    box-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.4) !important;
}

.skin-item.selected:hover {
    transform: translateY(-4px) translateZ(0);
    /* Simplified shadow effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 8px rgba(var(--accent-color-rgb), 0.4) !important;
}

.skin-image {
    flex: 0 0 170px;
    height: 170px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 0;
}


.skin-header .skin-copy-button {
    position: absolute;
    top: 8px;
    right: 6px;
    width: 30px;
    height: 30px;
    border: none;
    padding: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease-out;
    z-index: 25;
}

.skin-copy-button:hover,
.skin-copy-button:focus-visible {
    transform: translateY(-1px);
}

.skin-copy-button:focus-visible {
    outline: 2px solid rgba(var(--accent-color-rgb, 255, 183, 3), 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

.skin-copy-button--copied {
    outline: none;
}

.skin-copy-button__glyph {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
    background-color: var(--text-secondary);
    mask-image: url("../images/copy.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("../images/copy.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.skin-copy-button:hover .skin-copy-button__glyph,
.skin-copy-button:focus-visible .skin-copy-button__glyph {
    background-color: var(--accent-color);
}

.skin-copy-button[data-tooltip]::after {
    content: none;
    display: none;
}

.skin-copy-button--copied .skin-copy-button__glyph {
    background-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(var(--accent-color-rgb, 255, 183, 3), 0.65);
    mask-image: url("../images/check.svg");
    -webkit-mask-image: url("../images/check.svg");
}

[data-theme="light"] .skin-copy-button {
    background: transparent;
}

[data-theme="light"] .skin-copy-button:hover,
[data-theme="light"] .skin-copy-button:focus-visible {
    background: transparent;
}

[data-theme="light"] .skin-copy-button__glyph {
    background-color: var(--text-secondary);
}

.skin-image::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--rarity-color, transparent);
    opacity: 0.85;
    border-radius: 0;
    z-index: 2;
    pointer-events: none;
}


.skin-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--rarity-color, rgba(0, 0, 0, 0.45)));
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    z-index: 0;
}

.skin-item:hover .skin-image::after {
    opacity: 0.45;
}

[data-theme="light"] .skin-image::before {
    opacity: 0.6;
    mix-blend-mode: multiply;
}

[data-theme="light"] .skin-image::after {
    opacity: 0.2;
    mix-blend-mode: multiply;
}

.skin-image img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.sticker-stack-group {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: auto;
    z-index: 3;
}

.sticker-stack {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 4px;
}

@media (max-width: 768px) {
    .sticker-stack {
        gap: 3px;
    }
}

.sticker-stack--top {
    padding-bottom: 0;
}

.sticker-stack--bottom {
    padding-top: 0;
}
.sticker-stack-group:has(.sticker-stack--top):not(:has(.sticker-stack--bottom)) .sticker-stack--top {
    padding-top: 10px;
    padding-bottom: 10px;
}

.sticker-thumb {
    position: relative;
    width: 30px;
    height: 24px;
    padding: 2px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateZ(0);
    transform-origin: bottom left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

[data-theme="light"] .sticker-thumb {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.sticker-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.18s ease;
}

.sticker-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 0;
}

.sticker-thumb:hover,
.sticker-thumb:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    filter: brightness(1.02);
}

.sticker-thumb:hover::before,
.sticker-thumb:focus-visible::before {
    opacity: 1;
}

.sticker-thumb:hover img,
.sticker-thumb:focus-visible img {
    transform: scale(1.04);
}

.skin-item:hover .skin-image img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.skin-details {
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
}

.skin-collection {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    min-height: 34px;
}

.skin-header {
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex: 0 0 auto;
    padding: 12px 16px 12px 12px;
    background: var(--bg-secondary);
    height: 80px;
}

.skin-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.15;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-height: calc(1.15em * 3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.skin-title:hover {
    color: var(--primary-color);
}

.skin-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    min-height: 17.5px;
}

.skin-exterior {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.1px;
}

.skin-exterior:empty::before {
    content: '\00a0';
}

.skin-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.skin-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 40;
}

.skin-info-icon__glyph {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--text-secondary);
    -webkit-mask-image: url("../images/info-circle.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../images/info-circle.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background-color 0.15s ease;
}

.skin-info-icon:hover .skin-info-icon__glyph,
.skin-info-icon:focus-visible .skin-info-icon__glyph {
    background-color: var(--accent-color);
}

.skin-info-icon:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 2px;
}

 .skin-deal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    z-index: 40;
}

.skin-deal-badge:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.skin-deal-icon,
.skin-deal-toggle__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    z-index: 10;
    background-image: url("../images/discount-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: grayscale(1) brightness(0.65);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.skin-deal-icon--active {
    filter: none;
}

.skin-deal-badge:hover .skin-deal-icon,
.skin-deal-badge:focus-visible .skin-deal-icon {
    transform: translateY(-1px) scale(1.05);
    filter: none;
}

.skin-deal-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 40;
}

.skin-deal-toggle__icon {
    cursor: pointer;
}

.skin-deal-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

.skin-deal-toggle__input:checked + .skin-deal-toggle__icon {
    filter: none;
}

.skin-deal-toggle__input:focus-visible + .skin-deal-toggle__icon {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.skin-deal-toggle:hover .skin-deal-toggle__icon {
    filter: none;
}

.skin-deal-toggle--saving .skin-deal-toggle__icon {
    opacity: 0.35;
    cursor: progress;
}

.skin-stattrak {
    display: inline-block;
    padding: 0;
    color: #ff782c;
    font-weight: 600;
    font-size: 12px;
}

.skin-souvenir {
    display: inline-block;
    padding: 0;
    color: #FFD700;
    font-weight: 600;
    font-size: 12px;
}

.meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-secondary);
}

.meta-icon {
    margin-bottom: 2px;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    background-color: var(--text-secondary);
    -webkit-mask-image: url("../images/padlock-unlocked.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../images/padlock-unlocked.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.meta-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.meta--locked .meta-icon {
    background-color: var(--error-color);
    -webkit-mask-image: url("../images/padlock-locked.svg");
    mask-image: url("../images/padlock-locked.svg");
}

.meta--locked .meta-text {
    color: var(--error-color);
    font-weight: 600;
}

.meta--unlocked .meta-icon {
    background-color: var(--success-color);
    -webkit-mask-image: url("../images/padlock-unlocked.svg");
    mask-image: url("../images/padlock-unlocked.svg");
}

.meta--unlocked .meta-text {
    color: var(--success-color);
    font-weight: 600;
}

.float-bar-container {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin: 8px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.float-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: visible;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    position: relative;
}

.float-segment {
    height: 100%;
}

.float-segment:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.float-segment:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.segment-fn { background: #2ecc71; flex: 0 0 7%; }
.segment-mw { background: #9acd32; flex: 0 0 8%; }
.segment-ft { background: #f1c40f; flex: 0 0 23%; }
.segment-ww { background: #e67e22; flex: 0 0 7%; }
.segment-bs { background: #e74c3c; flex: 0 0 55%; }

.float-indicator {
    position: absolute;
    bottom: 10px;
    left: calc(var(--float-value, 0) * 100%);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
}


.float-indicator::after {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    background: var(--text-color);
    mask: url("../images/float-indicator.svg") center / contain no-repeat;
    -webkit-mask: url("../images/float-indicator.svg") center / contain no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.float-stats {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.float-value,
.paint-seed {
    color: var(--text-color);
}

.float-value--notable {
    color: var(--accent-color);
    text-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.45);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.float-value--notable::after {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
}

.paint-seed {
    text-align: right;
}


.skin-actions .meta {
    margin-right: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.skin-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}

.skin-actions .action-btn {
    display: inline-flex;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-color);
    border-radius: 0;
    transition: color 0.2s ease;
    box-shadow: none;
    flex: 0 0 auto;
}

.skin-actions .action-btn:hover,
.skin-actions .action-btn:focus-visible {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: none;
    box-shadow: none;
}

.inspect-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: none;
    border: none;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    margin-bottom: 2px;
}

.skin-actions .inspect-btn {
    flex: 0 0 auto;
}

.inspect-btn .inspect-icon {
    display: block;
    width: 28px;
    height: 28px;
    background-color: var(--text-secondary);
    -webkit-mask-image: url("../images/magnifying-glass-inspect-ingame.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../images/magnifying-glass-inspect-ingame.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background-color 0.15s ease;
}

.skin-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.18), rgba(var(--accent-color-rgb), 0.05));
    color: var(--text-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.skin-price__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
}

.skin-price__value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
}

.skin-price__currency {
    font-size: 20px;
    line-height: 1;
}

.skin-price--display {
    pointer-events: none;
}

.skin-price--editable {
    background: var(--bg-secondary);
    border-style: dashed;
    border-color: rgba(var(--accent-color-rgb), 0.35);
    gap: 12px;
}

.skin-price--editable .skin-price__label {
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.skin-price--empty {
    background: transparent;
    border-style: dashed;
    border-color: rgba(var(--accent-color-rgb), 0.18);
    color: var(--text-secondary);
    justify-content: center;
    margin-top: auto;
}

.skin-price--empty .skin-price__label,
.skin-price--empty .skin-price__value,
.skin-price--empty .skin-price__currency {
    color: var(--text-secondary);
}

.skin-price--empty .skin-price__value {
    font-weight: 500;
}

.skin-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 14px;
}

.skin-price-input {
    flex: 1 1 160px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.skin-price-input__currency {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
    flex-shrink: 0;
}

.skin-price-input input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 8px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.skin-price-input input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
}

.skin-price-input input::placeholder {
    color: var(--text-secondary);
    font-weight: 500;
}

.skin-price-input input::-webkit-outer-spin-button,
.skin-price-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.skin-price-input input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.skin-note {
    margin: 8px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skin-note__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
}

.skin-note__field {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.skin-note textarea {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 6px;
    font-family: inherit;
    font-size: 13px !important;
    resize: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 90px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-color-rgb), 0.35) transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.skin-note textarea::-webkit-scrollbar {
    width: 6px;
}

.skin-note textarea::-webkit-scrollbar-track {
    background: transparent;
}

.skin-note textarea::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-color-rgb), 0.35);
    border-radius: 10px;
}

.skin-note textarea:focus {
    outline: none;
    border-color: rgba(var(--accent-color-rgb), 0.55);
    background: rgba(var(--accent-color-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
}

.skin-note textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}

.skin-note__display {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 6px 6px;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 13px;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 90px;
    overflow-y: auto;
    cursor: text;
    user-select: text;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-color-rgb), 0.35) transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.skin-note__display::-webkit-scrollbar {
    width: 6px;
}

.skin-note__display::-webkit-scrollbar-track {
    background: transparent;
}

.skin-note__display::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-color-rgb), 0.35);
    border-radius: 10px;
}

.skin-note__display a {
    color: rgb(var(--accent-color-rgb));
    text-decoration: underline;
    word-break: break-all;
}

.skin-note__field--display-mode textarea {
    visibility: hidden;
}

.skin-note__field--display-mode .skin-note__display {
    opacity: 1;
    pointer-events: auto;
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.skin-note__field--display-mode .skin-note__display a {
    color: rgb(var(--accent-color-rgb));
}

.admin-form--history .skin-note__field--display-mode .skin-note__display {
    opacity: 0.7;
}


.inspect-btn:hover,
.inspect-btn:focus-visible {
    transform: translateY(-2px);
    background: none;
}

.inspect-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.35);
    border-radius: 50%;
}

.inspect-btn:hover .inspect-icon,
.inspect-btn:focus-visible .inspect-icon {
    background-color: var(--accent-color);
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 6px);
    opacity: 0;
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;

    display: inline-block;
    width: auto;
    min-width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left;
}

@media (max-width: 768px) {
    [data-tooltip]::after {
        width: fit-content;
        min-width: min(160px, calc(100vw - 64px));
        max-width: min(220px, calc(100vw - 48px));
        padding: 8px 10px;
    }
}

@supports (text-wrap: balance) {
    [data-tooltip]::after {
        text-wrap: balance;
    }
}

.float-segment[data-tooltip]::after,
.float-value[data-tooltip]::after,
.paint-seed[data-tooltip]::after,
.float-value[data-label]::after,
.paint-seed[data-label]::after {
    min-width: max-content;
    max-width: max-content;
    width: max-content;
    white-space: nowrap;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 0);
}

/* Cart page */
.cart-page {
    display: grid;
    gap: clamp(24px, 4vw, 40px);
    padding-top: clamp(12px, 2.5vw, 24px);
    padding-right: clamp(24px, 5vw, 48px);
    padding-bottom: clamp(24px, 5vw, 48px);
    padding-left: clamp(24px, 5vw, 48px);
}

.cart-shell {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
}

.cart-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: clamp(20px, 4vw, 28px);
    box-shadow: var(--card-shadow);
    display: grid;
    gap: 16px;
    overflow: visible;
}

.cart-summary-card h2,
.cart-summary-card h3 {
    margin: 0;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cart-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2rem);
}

.cart-subtitle {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.cart-layout {
    display: grid;
    gap: clamp(20px, 4vw, 36px);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
}

.cart-items-card {
    padding: 0px clamp(22px, 4vw, 32px) 0px clamp(12px, 2.5vw, 18px);
    display: grid;
    gap: clamp(8px, 3vw, 10px);
    justify-items: stretch;
    align-content: start;
}

.cart-items-card--empty {
    min-height: clamp(260px, 32vh, 340px);
    align-content: center;
    justify-items: center;
    align-self: center;
}

.cart-empty-card {
    display: none;
    text-align: center;
    gap: 18px;
    max-width: min(480px, 100%);
}

.cart-items-card--empty .cart-empty-card {
    display: grid;
}

.cart-items-list {
    display: grid;
    gap: clamp(14px, 3vw, 18px);
    width: 100%;
}

.cart-items-card--empty .cart-items-list {
    display: none;
}

.cart-items-list[hidden] {
    display: none;
}

.cart-disclaimer {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 0;
}

.cart-items-card--empty .cart-disclaimer {
    display: none;
}

.cart-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    padding: 16px 18px;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.16);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
    position: relative;
}

.cart-item__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item__media img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    background-image: radial-gradient(circle at 50% 50%, var(--rarity-glow, rgba(var(--accent-color-rgb), 0.26)) 0%, rgba(0, 0, 0, 0) 55%);
}

.cart-item__body {
    display: grid;
    gap: 10px;
}

.cart-item__title {
    margin: 0;
    font-size: 1.05rem;
}

.cart-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.cart-item__meta span {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--text-secondary);
}

.cart-item__meta-stattrak {
    color: #ff782c;
}

.cart-item__meta span.cart-item__meta-stattrak {
    color: #ff782c;
}

.cart-item__meta .skin-souvenir {
    color: #ffe14a;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--accent-color-rgb), 0.12);
}

.cart-item__note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--accent-color);
}

.cart-item__actions {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 12px;
    gap: 12px;
}

.cart-item__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(var(--accent-color-rgb), 0.18);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
    min-width: 0;
}

[data-theme="light"] .cart-item__price {
    background: rgba(var(--accent-color-rgb), 0.22);
    color: #1f1f1f;
}

.cart-remove-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cart-remove-icon:hover,
.cart-remove-icon:focus-visible {
    color: var(--accent-color);
    transform: scale(1.05);
    outline: none;
}

.cart-sidebar {
    display: grid;
    gap: clamp(10px, 3vw, 18px);
    align-content: start;
    position: sticky;
    top: clamp(84px, 8vh, 72px);
    height: fit-content;
    z-index: 50; /* keep sidebar dropdowns above footer icons */
}

.cart-totals {
    margin: 0;
    display: grid;
    gap: 12px;
}

.cart-totals__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.cart-note {
    margin: 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.cart-clear-link {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-clear-link:hover,
.cart-clear-link:focus-visible {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
    outline: none;
}

.cart-items-card__toolbar {
    display: flex;
    justify-self: end;
    align-items: center;
    align-self: start;
    gap: 12px;
    margin-bottom: -6px;
}

.cart-items-card__toolbar[hidden] {
    display: none;
}

.cart-primary-action--surface {
    font-size: 0.95rem;
}

.cart-primary-action.cart-primary-action--surface {
    background: var(--accent-color);
    color: #222;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(var(--accent-color-rgb), 0.10);
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.cart-primary-action.cart-primary-action--surface:hover,
.cart-primary-action.cart-primary-action--surface:focus-visible {
    transform: translateY(-2px);
    background: var(--accent-hover);
    color: #111 !important;
    box-shadow: 0 4px 16px 0 rgba(var(--accent-color-rgb), 0.18);
    text-decoration: none;
}

.cart-primary-action.cart-primary-action--surface:active {
    transform: translateY(-1px);
    background: var(--accent-hover);
    color: #111;
    box-shadow: 0 3px 12px 0 rgba(var(--accent-color-rgb), 0.24);
}

.cart-clear-link--surface {
    padding: 6px 12px;
}

.cart-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: var(--accent-color);
    color: #101010;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.cart-primary-action:hover,
.cart-primary-action:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(var(--accent-color-rgb), 0.38);
}

.cart-primary-action--success {
    background: #14b8a6;
    color: #062925;
}

.cart-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cart-secondary-action__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.cart-secondary-action:hover,
.cart-secondary-action:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.cart-secondary-action[aria-disabled="true"] {
    opacity: 0.48;
    pointer-events: none;
    cursor: not-allowed;
}

.cart-send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.cart-send-button__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.cart-send-button:hover,
.cart-send-button:focus-visible {
    transform: translateY(-2px);
}

.cart-contact-card {
    background: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.18), rgba(0, 119, 182, 0.18));
    overflow: visible;
    position: relative;
    z-index: 10; /* ensures dropdown panels render above footer icons */
}

.cart-contact-intro {
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.cart-contact-steps {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
}

.cart-contact-steps p {
    margin: 0;
}

.cart-summary-action {
    display: grid;
    justify-items: center;
    border-radius: 18px;
}

.cart-copy-feedback {
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 4px 0;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cart-contact-footer {
    display: grid;
    gap: 0;
    overflow: visible;
}

.cart-contact-status {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cart-contact-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow: visible;
}

.cart-contact-method-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    transition: opacity 0.3s ease, filter 0.3s ease;
    overflow: visible;
}

.cart-contact-method-wrapper--locked {
    opacity: 0.5;
    filter: grayscale(1);
    pointer-events: none;
}

.cart-contact-method-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-contact-method-row {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: visible;
}

.cart-contact-method-dropdown {
    position: relative;
    flex: 1;
    overflow: visible;
}

.cart-contact-method-dropdown__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease;
    text-align: left;
}

.cart-contact-method-dropdown__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--accent-color);
    flex-shrink: 0;
    position: relative;
}

.cart-contact-method-dropdown__toggle-icon::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: var(--contact-method-icon) center / contain no-repeat;
    -webkit-mask: var(--contact-method-icon) center / contain no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.cart-contact-method-dropdown__toggle-icon--messenger {
    --contact-method-icon: url("../images/messenger-icon.svg");
}

.cart-contact-method-dropdown__toggle-icon--facebook {
    --contact-method-icon: url("../images/facebook.svg");
}

.cart-contact-method-dropdown__toggle-icon--email {
    --contact-method-icon: url("../images/email.svg");
}

.cart-contact-method-dropdown__toggle:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
}

.cart-contact-method-dropdown__toggle:focus {
    outline: none;
    border-color: var(--accent-color);
}

.cart-contact-method-dropdown.is-open .cart-contact-method-dropdown__toggle {
    border-color: var(--accent-color);
}

.cart-contact-method-dropdown__value {
    flex: 1;
}

.cart-contact-method-dropdown__icon {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.cart-contact-method-dropdown.is-open .cart-contact-method-dropdown__icon {
    transform: rotate(180deg);
}

.cart-contact-method-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background:
        linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.18), rgba(0, 119, 182, 0.18)),
        var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    overflow: hidden;
    z-index: 9000;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .cart-contact-method-dropdown__panel {
    background:
        linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.18), rgba(0, 119, 182, 0.18)),
        #f9f9f9;
    border-color: rgba(17, 24, 39, 0.12);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
}

.cart-contact-method-dropdown__option {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-contact-method-dropdown__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--accent-color);
    flex-shrink: 0;
    position: relative;
}


.cart-contact-method-dropdown__option-icon::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: var(--contact-method-icon) center / contain no-repeat;
    -webkit-mask: var(--contact-method-icon) center / contain no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.cart-contact-method-dropdown__option-icon--messenger {
    --contact-method-icon: url("../images/messenger-icon.svg");
    transform: scale(0.96);
}

.cart-contact-method-dropdown__option-icon--facebook {
    --contact-method-icon: url("../images/facebook.svg");
}

.cart-contact-method-dropdown__option-icon--email {
    --contact-method-icon: url("../images/email.svg");
}

.cart-contact-method-dropdown__option:hover {
    background: rgba(var(--accent-color-rgb), 0.12);
}

.cart-contact-method-dropdown__option.is-active {
    background: rgba(var(--accent-color-rgb), 0.18);
    font-weight: 600;
}

.cart-contact-method-dropdown__option:not(:last-child) {
    border-bottom: 1px solid rgba(var(--text-color-rgb, 255, 255, 255), 0.05);
}

.cart-empty-card {
    text-align: center;
    align-items: center;
    justify-items: center;
}

.cart-empty-card p {
    margin: 0;
    color: var(--text-secondary);
}

.cart-empty-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cart-empty-icon::before {
    content: '';
    width: 36px;
    height: 36px;
    background: var(--accent-color);
    mask: url('../images/cart.svg') center/contain no-repeat;
    -webkit-mask: url('../images/cart.svg') center/contain no-repeat;
}

.cart-empty-card h2 {
    margin: 8px 0;
    font-size: 1.4rem;
}

@media (max-width: 1080px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-sidebar {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        position: static;
        top: auto;
    }
}

@media (max-width: 780px) {
    .cart-item {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
        gap: 14px;
    }

    .cart-item__media img {
        margin: 0 auto;
    }

    .cart-item__actions {
        align-items: flex-end;
        padding-top: 8px;
    }

}

@media (max-width: 520px) {
    .cart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-primary-action,
    .cart-secondary-action,
    .cart-clear-link {
        width: 100%;
        justify-content: center;
    }

    .cart-items-card__toolbar {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 0;
    }

    .cart-item__actions {
        align-items: flex-start;
    }

    .cart-item__price {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Admin-specific styles */
.select-checkbox {
    display: flex;
    align-items: center;
    margin-top: 8px;
    cursor: pointer;
}

#inventory-form {
    display: inline-flex;
    margin-left: 10px;
}

/* Modal */
.modal-shell {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 9, 14, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-shell.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.modal-window {
    position: relative;
    z-index: 1;
    width: min(480px, 92vw);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    box-shadow: 0 24px 60px rgba(8, 12, 20, 0.55);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.modal-shell.visible .modal-window {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.modal-close::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23c7ccd6' stroke-linecap='round' stroke-width='1.5' d='M6 6l12 12M6 18L18 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.modal-close:hover,
.modal-close:focus-visible {
    border-color: rgba(var(--accent-color-rgb), 0.6);
    outline: none;
}

.modal-content {
    padding: 30px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.modal-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-btn {
    flex: 1;
    min-width: 120px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.modal-btn:hover,
.modal-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
    border-color: rgba(var(--accent-color-rgb), 0.4);
    outline: none;
}

.modal-btn-primary {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.95), rgba(var(--accent-color-rgb), 0.55));
    border-color: rgba(var(--accent-color-rgb), 0.8);
}

.modal-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
}

.modal-btn-ghost {
    background: rgba(120, 125, 135, 0.16);
    border-color: rgba(120, 125, 135, 0.4);
}

.modal-message p {
    margin: 0;
}

.modal-status {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.85;
}

[data-theme="light"] .modal-window {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .modal-btn {
    border-color: rgba(15, 23, 42, 0.15);
}

#inventory-form button {
    margin-left: 5px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

.top-nav {
    animation: slideIn 0.6s ease-out;
}

/* Light mode specific overrides */
[data-theme="light"] .filter-items {
    scrollbar-color: #aaa #f0f0f0;
}

[data-theme="light"] .filter-items::-webkit-scrollbar-track {
    background: #f0f0f0;
}

[data-theme="light"] .filter-items::-webkit-scrollbar-thumb {
    background-color: #aaa;
}

[data-theme="light"] .filter-group {
    background: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

[data-theme="light"] .filter-group h4 {
    color: #3949ab;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .filter-item input[type="checkbox"] {
    background: white;
    border: 1.5px solid #bbbbbb;
}

[data-theme="light"] .filter-count {
    color: #777;
}

[data-theme="light"] .skin-item {
    background: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

[data-theme="light"] .skin-image {
    height: 170px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 0;
}


[data-theme="light"] #filter-panel {
    background: #f8f9fa;
}

/* Responsive Design */
@media (max-width: 1200px) {
    main {
        width: 95%;
    }
    
    #inventory {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    main {
        width: 98%;
    }

    .top-nav {
        padding: 0 12px;
        height: 48px;
    }

    .site-branding h1 {
        font-size: 18px;
    }

    #inventory {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }

    .skin-image {
    height: 170px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

    .skin-details {
        padding: 10px 10px 6px;
    }

    .skin-collection {
        padding: 10px;
        min-height: 44px;
    }

    .button {
        padding: 6px 12px;
    }
}

/* Controls Bar */
.controls-bar {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.controls-left {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action Buttons */
.action-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.action-btn:hover svg {
    opacity: 1;
}

/* Selection Buttons */
.selection-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selection-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.save-btn {
    background: var(--accent-color);
    color: white;
    border: none;
}

.save-btn:hover {
    background: var(--accent-hover);
    filter: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .controls-bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .controls-left {
        width: 100%;
        margin-right: 0;
        justify-content: space-between;
    }

    .controls-right {
        width: 100%;
        justify-content: flex-end;
    }

    .selection-btn,
    .action-btn {
        flex: 1;
    }
}

.justify-end {
    justify-content: flex-end !important;
}


/* Landing Page */
.landing-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(48px, 10vh, 120px) clamp(32px, 7vw, 180px);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-color);
}

.landing-page .landing-hero {
    padding-bottom: clamp(48px, 10vh, 120px);
    padding-top: calc(clamp(48px, 10vh, 120px) - 60px);
}

.landing-hero::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--landing-bg, url('../images/thumbnail.webp'));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: brightness(0.55);
    z-index: -2;
    width: 100vw;
    height: 100vh;
}

.landing-hero::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(125deg, rgba(13, 17, 23, 0.92) 0%, rgba(13, 17, 23, 0.78) 45%, rgba(13, 17, 23, 0.94) 100%);
    z-index: -1;
    width: 100vw;
    height: 100vh;
}

.landing-hero__panel-group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 5vw, 44px);
    width: min(100%, 720px);
    text-align: center;
}

.landing-hero__panel {
    width: 100%;
}

.landing-hero__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f8fafc;
    text-align: center;
    position: relative;
}

.landing-hero__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: clamp(4px, 0.4vw, 10px);
}

.landing-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(var(--accent-color-rgb), 0.12);
    border: 1px solid rgba(var(--accent-color-rgb), 0.36);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-hover);
}

.landing-hero__title {
    margin: 0;
    position: relative;
    font-size: clamp(2.6rem, 4.8vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 1.9px;
    text-align: center;
    color: var(--accent-hover);
    text-shadow: 0 22px 60px rgba(12, 18, 26, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-hero__title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + clamp(26px, 5vw, 46px));
    width: clamp(160px, 28vw, 360px);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(var(--accent-color-rgb), 0.96) 0%, rgba(255, 255, 255, 0.55) 100%);
    box-shadow: 0 0 18px rgba(var(--accent-color-rgb), 0.4);
    pointer-events: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .landing-hero__title {
        background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.landing-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1rem, 1.9vw, 1.28rem);
    line-height: 1.7;
}

.landing-hero__actions {
    display: flex;
    gap: clamp(12px, 2.4vw, 24px);
    flex-wrap: wrap;
    justify-content: center;
}

.landing-page main {
    position: relative;
    min-height: 100vh;
}

body.landing-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-page .top-nav,
.landing-page .landing-nav-spacer {
    flex: 0 0 auto;
}

.landing-page main {
    flex: 1 0 auto;
}

.landing-page .landing-nav-spacer {
    display: none;
    height: 0;
}

.landing-page .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 12;
}

.landing-page .footer-column {
    color: var(--text-secondary);
}

.landing-page .footer-link {
    color: var(--text-secondary);
}

.landing-page .footer-column--meta {
    color: var(--text-secondary);
}

.landing-page .footer-social {
    color: var(--text-secondary)
}

.landing-page .footer-social:hover,
.landing-page .footer-social:focus-visible {
    color: var(--accent-color);
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 14px 30px;
    border-radius: 16px;
    font-size: 0.92rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.3s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(var(--accent-color-rgb), 0.55);
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.95) 0%, rgba(var(--accent-color-rgb), 0.7) 100%);
    color: #071019;
    box-shadow: 0 16px 36px rgba(var(--accent-color-rgb), 0.28), 0 6px 16px rgba(8, 12, 18, 0.55);
}

.landing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(var(--accent-color-rgb), 0.35), 0 10px 22px rgba(8, 12, 18, 0.55);
}

.landing-btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.landing-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-color-rgb), 0.8);
    outline-offset: 3px;
}

.landing-btn:hover::after,
.landing-btn:focus-visible::after {
    opacity: 1;
}

.landing-btn--primary,
.landing-btn--ghost {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.95) 0%, rgba(var(--accent-color-rgb), 0.7) 100%);
    color: #071019;
}

.landing-btn--primary:hover,
.landing-btn--ghost:hover {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 1) 0%, rgba(var(--accent-color-rgb), 0.82) 100%);
}

.placeholder-card {
    margin: clamp(72px, 18vh, 160px) auto;
    max-width: 560px;
    padding: clamp(36px, 6vw, 56px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    text-align: center;
}

.placeholder-title {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 2.6rem);
}

.placeholder-copy {
    margin: 0 0 32px;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.placeholder-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-page {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(64px, 10vw, 120px);
}

.about-section {
    display: grid;
    gap: 18px;
}

.about-section__title {
    margin: 0 0 12px 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

.about-section__title::after {
    content: "";
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-color);
}

.about-section__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .about-section__lead {
    color: var(--text-secondary);
}

.about-values {
    display: grid;
    gap: clamp(18px, 3vw, 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-card {
    background: rgba(18, 18, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: clamp(12px, 4vw, 20px);
    display: grid;
    gap: 12px;
    box-shadow: var(--card-shadow);
}

[data-theme="light"] .about-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.about-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-color);
}

.about-card__body {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 0.98rem;
}

[data-theme="light"] .about-card__body {
    color: var(--text-secondary);
}

.about-timeline {
    display: grid;
    gap: 16px;
    padding-left: 18px;
    border-left: 2px solid rgba(var(--accent-color-rgb), 0.4);
}

.about-timeline__item {
    position: relative;
    padding-left: 18px;
}

.about-timeline__item::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--accent-color-rgb), 0.9);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
}

.about-timeline__heading {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
}

.about-timeline__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 0.96rem;
}

[data-theme="light"] .about-timeline__text {
    color: var(--text-secondary);
}

.about-featured,
.about-bio {
    background: rgba(18, 18, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: clamp(24px, 4.5vw, 32px);
    display: grid;
    gap: 14px;
    box-shadow: var(--card-shadow);
}

[data-theme="light"] .about-featured,
[data-theme="light"] .about-bio {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.about-bio__title {
    margin: 0;
    font-size: 1.35rem;
}

.about-bio__body,
.about-featured__item {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    font-size: 0.98rem;
}

[data-theme="light"] .about-bio__body,
[data-theme="light"] .about-featured__item {
    color: var(--text-secondary);
}

.about-featured__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.about-cta {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.32);
    padding: clamp(28px, 5vw, 40px);
    background: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.18), rgba(0, 119, 182, 0.18));
    display: grid;
    gap: 16px;
    box-shadow: var(--card-shadow);
    --cta-title-color: rgba(255, 255, 255, 0.96);
    --cta-copy-color: rgba(243, 244, 246, 0.85);
}

[data-theme="light"] .about-cta {
    background: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.12), rgba(0, 119, 182, 0.16));
    border-color: rgba(var(--accent-color-rgb), 0.26);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    --cta-title-color: #2a1600;
    --cta-copy-color: rgba(45, 21, 0, 0.78);
}

.about-cta__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    color: var(--cta-title-color);
}

.about-cta__copy {
    margin: 0;
    color: var(--cta-copy-color);
    line-height: 1.7;
    font-size: 1rem;
}

.about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.about-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.96rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-cta__btn--fill {
    background: var(--accent-color);
    color: #111;
    box-shadow: 0 12px 24px rgba(var(--accent-color-rgb), 0.28);
}

.about-cta__btn--ghost {
    border: 1px solid rgba(var(--accent-color-rgb), 0.45);
    color: var(--accent-color);
    background: transparent;
}

[data-theme="dark"] .about-cta__btn--ghost {
    color: rgba(255, 249, 230, 0.92);
    background: rgba(var(--accent-color-rgb), 0.12);
    border-color: rgba(var(--accent-color-rgb), 0.38);
}

[data-theme="light"] .about-cta__btn--ghost {
    color: rgba(119, 79, 0, 0.88);
    background: rgba(var(--accent-color-rgb), 0.08);
}

.about-cta__btn:hover {
    transform: translateY(-2px);
}

.about-cta__btn:focus-visible {
    outline: 2px solid rgba(var(--accent-color-rgb), 0.85);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .about-values {
        grid-template-columns: 1fr;
    }

    .about-timeline {
        border-left-width: 1px;
    }

    .about-timeline__item {
        padding-left: 14px;
    }

.about-timeline__item::before {
        left: -24px;
    }
}


.contact-page {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: -20px;
}

.contact-card {
    width: min(480px, 100%);
    padding: clamp(28px, 6vw, 40px);
    display: grid;
    gap: clamp(20px, 4vw, 28px);
    margin: 0 auto;
}

[data-theme="light"] .contact-intro__text {
    color: var(--text-color);
}

.contact-intro {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.contact-intro__icon {
    width: 50px;
    height: 50px;
    color: var(--accent-color);
}

.contact-intro__text {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

.contact-intro__accent {
    color: var(--accent-color);
    font-weight: 600;
}

.contact-card__header {
    display: grid;
    gap: 8px;
}

.contact-card__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    font-weight: 600;
    color: var(--text-color);
}

.contact-card__subtitle {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.68);
}

[data-theme="light"] .contact-card__subtitle {
    color: var(--text-secondary);
}

.contact-card__highlight {
    color: var(--accent-color);
    font-weight: 600;
}

.contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.contact-list__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
}

.contact-list__item:hover,
.contact-list__item:focus-visible {
    transform: translateY(-2px);
    background: rgba(var(--accent-color-rgb), 0.12);
    border-color: rgba(var(--accent-color-rgb), 0.6);
    color: var(--accent-color);
}

[data-theme="light"] .contact-list__item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .contact-list__item:hover,
[data-theme="light"] .contact-list__item:focus-visible {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-color: rgba(var(--accent-color-rgb), 0.45);
}

.contact-list__item:focus-visible {
    outline: 2px solid rgba(var(--accent-color-rgb), 0.65);
    outline-offset: 4px;
}

.contact-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.18);
    flex-shrink: 0;
    position: relative;
}

[data-theme="light"] .contact-list__icon {
    background: rgba(var(--accent-color-rgb), 0.16);
}

.contact-list__icon::after {
    content: "";
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: var(--contact-icon) center / contain no-repeat;
    -webkit-mask: var(--contact-icon) center / contain no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.contact-list__icon--facebook::after,
.contact-list__icon--steam::after,
.contact-list__icon--twitter::after,
.contact-list__icon--discord::after,
.contact-list__icon--email::after {
    display: block;
}

.contact-list__icon--facebook {
    --contact-icon: url("../images/facebook.svg");
}

.contact-list__icon--steam {
    --contact-icon: url("../images/steam.svg");
}

.contact-list__icon--twitter {
    --contact-icon: url("../images/twitter.svg");
}

.contact-list__icon--discord {
    --contact-icon: url("../images/discord.svg");
}

.contact-list__icon--email {
    --contact-icon: url("../images/email.svg");
}

.contact-list__icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.contact-list__label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: 1.03rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.contact-intro__accent--full {
    display: block;
    margin-top: 4px;
}
.contact-intro__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================
   BOOTSTRAP CUSTOMIZATIONS & MOBILE STYLES
   ========================================== */

/* Navigation wrapper */
.nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Mobile burger toggle button */
.navbar-toggler {
    padding: 8px 8px;
    z-index: 1001;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    position: relative;
}

.navbar-toggler .nav-icon-btn__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    background: var(--accent-color);
    color: #111;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.45);
    z-index: 1;
}

.navbar-toggler .nav-icon-btn__badge[hidden] {
    display: none;
}

[data-theme="light"] .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 22px;
    height: 22px;
    display: block;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Desktop: Hide burger menu */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }
}

/* Mobile navigation collapse */
.mobile-nav-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(6, 7, 12, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1000;
}

[data-theme="light"] .mobile-nav-collapse {
    background: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.mobile-nav-content {
    padding: 12px;
}

/* Mobile action links */
.mobile-action-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 24px);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

[data-theme="light"] .mobile-action-links {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.mobile-action-links .header-action-link {
    min-width: 140px;
    align-content: center;
    text-align: center;
    justify-content: center;
    padding: 8px 18px;
    background: var(--accent-color);
    color: #222 !important;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(255,183,3,0.10);
    transition: background 0.18s, box-shadow 0.18s, color 0.18s;
}

/* Mobile nav list */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    text-align: center;
}

.mobile-nav-list li {
    width: 100%;
}

.mobile-nav-link {
    display: block;
    padding: 14px 0;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.2s ease;
    text-align: center;
}

[data-theme="light"] .mobile-nav-link {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: var(--accent-color);
}

/* Mobile nav controls */
.mobile-nav-controls {
    padding-top: 12px;
}

.mobile-nav-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.mobile-nav-tools--controls {
    width: 100%;
    justify-content: space-between;
}

.mobile-nav-tools--controls .locale-switcher {
    flex: 1;
    display: flex;
    justify-content: center;
}

.mobile-nav-tools--controls .locale-switcher .locale-switcher__button {
    width: 100%;
    max-width: 220px;
}

.mobile-nav-tools--controls .mobile-theme-toggle-control {
    width: 45px;
    height: 45px;
}

.mobile-nav-cart--controls .nav-icon-btn {
    width: 40px;
    height: 40px;
}

/* Use original locale switcher styling in mobile */
.mobile-nav-tools .locale-switcher {
    flex: 0 0 auto;
}

.mobile-nav-tools .locale-switcher .locale-switcher__button {
    padding: 10px 14px;
}

.mobile-nav-tools .locale-switcher .locale-switcher__button:hover {
    background: transparent;
    border-color: var(--border-color);
}

.mobile-nav-tools .locale-switcher {
    overflow: visible;
}

.mobile-nav-tools .locale-switcher__dropdown {
    width: auto;
}

.mobile-nav-tools .locale-switcher__options {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Disable tooltips in mobile menu */
.mobile-nav-tools .locale-switcher__button::after,
.mobile-nav-tools .theme-toggle::after,
.mobile-nav-tools .nav-icon-btn::after {
    display: none !important;
}

/* Cart in mobile - original icon style */
.mobile-nav-cart {
    flex: 0 0 auto;
    position: relative;
}

.mobile-nav-cart .nav-icon-btn {
    width: 50px;
    height: 50px;
}

.mobile-nav-cart .nav-icon-btn__icon {
    width: 28px;
    height: 28px;
}

/* Theme toggle in mobile - original style */
.mobile-theme-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

.mobile-theme-toggle .theme-toggle__icon {
    width: var(--theme-toggle-size);
    height: var(--theme-toggle-size);
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mobile-action-links {
        flex-direction: row;
        justify-content: center;
    }
    
    .mobile-action-links .header-action-link {
        width: auto;
        min-width: 150px;
    }
    
    /* iPad Air and tablet fixes for stats-row */
    .stats-controls-container {
        gap: 16px !important;
    }
    
    .stats-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .inventory-stats {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    
    .sort-controls {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Mobile locale switcher panel positioning */
/* Mobile inline locale switcher */
.mobile-locale-inline {
    position: relative;
}

.mobile-locale-options {
    display: none;
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    background: rgba(20, 22, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

[data-theme="light"] .mobile-locale-options {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

.mobile-locale-options:not([hidden]) {
    display: block !important;
}

.mobile-locale-section {
    margin-bottom: 16px;
}

.mobile-locale-section:last-child {
    margin-bottom: 0;
}

.mobile-locale-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .mobile-locale-section h4 {
    color: rgba(0, 0, 0, 0.7);
}

.mobile-locale-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-locale-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

[data-theme="light"] .mobile-locale-option {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.mobile-locale-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .mobile-locale-option:hover {
    background: rgba(0, 0, 0, 0.06);
}

.mobile-locale-option img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    /* Make nav-controls visible only for panel */
    .nav-controls {
        display: contents !important;
    }
    
    .nav-controls > *:not(.locale-switcher) {
        display: none !important;
    }
    
    .nav-controls .locale-switcher__button {
        display: none !important;
    }
    
    /* Show desktop locale panel on mobile */
    #locale-switcher-panel.locale-switcher__panel--mobile-open {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 50vh !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 80vh;
        overflow: visible;
        z-index: 10000 !important;
    }
    
    #locale-switcher-panel.locale-switcher__panel--mobile-open .locale-switcher__close {
        display: flex !important;
    }
    
    #locale-switcher-panel.locale-switcher__panel--mobile-open .locale-switcher__dropdown {
        overflow: visible;
    }
    
    /* Add backdrop for locale panel */
    body.locale-switcher-panel-open::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9999;
    }

}

/* Hide mobile nav on desktop */
@media (min-width: 992px) {
    .mobile-nav-collapse {
        display: none !important;
    }
}

/* Responsive containers and grids */
@media (max-width: 991.98px) {
    /* Mobile top nav layout */
    .top-nav {
        position: relative;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 12px;
    }
    
    .site-branding {
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        z-index: 2;
    }

    .site-branding a,
    .site-logo {
        position: relative;
        z-index: 3;
    }
    
    /* Hide desktop navigation on mobile/tablet */
    .site-primary-nav {
        display: none !important;
    }
    
    /* Hide desktop header actions on mobile */
    .header-actions {
        display: none !important;
    }
    
    /* Hide desktop nav controls on mobile */
    .nav-controls {
        display: none !important;
    }
    
    .site-logo {
        height: 42px;
    }
}

@media (max-width: 768px) {
    main {
        padding: 16px 12px;
    }
    
    .page-header {
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
    
    /* Disable hover effect on theme toggle for mobile */
    .theme-toggle:hover,
    .theme-toggle:focus-visible,
    .mobile-theme-toggle:hover,
    .mobile-theme-toggle:focus-visible {
        color: inherit;
        transform: none;
    }
    
    .theme-toggle:hover::after,
    .theme-toggle:focus-visible::after,
    .mobile-theme-toggle:hover::after,
    .mobile-theme-toggle:focus-visible::after {
        opacity: 0;
    }
    
    .page-hero-metric {
        margin-bottom: 20px;
    }
    
    .stats-controls-container {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
        align-items: stretch;
    }
    
    .stats-controls-container.justify-end {
        justify-content: flex-start;
    }
    
    .search-filter-container {
        order: 1;
        width: 100%;
    }
    
    .search-input-wrapper {
        width: 100%;
    }
    
    .stats-row {
        order: 2;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    
    .inventory-stats {
        font-size: 12px;
        white-space: nowrap;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    
    .sort-controls {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    
    .sort-dropdown__toggle {
        min-width: 110px;
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Make filter panel more mobile friendly */
    #filter-panel {
        padding: 12px;
        margin-top: 12px;
    }
    
    .filter-group {
        margin-bottom: 16px;
    }

    .filter-options-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filter-group[data-type="weapon_types"] .filter-options-grid,
    .filter-group[data-type="item_types"] .filter-options-grid,
    .filter-group[data-type="tradable"] .filter-options-grid {
        grid-template-columns: 1fr;
    }

    /* Responsive inventory grid */
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .skin-card {
        padding: 10px;
    }
    
    /* Modal adjustments */
    .modal-window {
        width: calc(100% - 32px);
        max-width: 100%;
        margin: 16px;
    }
    
    /* Footer responsive */
    .site-footer {
        padding: 10px 0 0 0;
    }

    .footer-shell {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        padding: 0 16px 8px 16px;
    }

    .footer-column--meta {
        align-items: flex-start;
        text-align: left;
    }

    .footer-column--meta p {
        font-size: 13px;
    }

    .footer-column--meta p:last-child {
        font-size: 11px;
    }

    .footer-column--social {
        gap: 12px;
    }

    .footer-social {
        width: 36px;
        height: 36px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .site-logo {
        height: 38px;
    }
    
    .header-actions .header-action-link {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .page-header {
        font-size: 1.5rem;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    
    .nav-controls {
        gap: 8px;
    }
    
    .locale-switcher__button {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .nav-link,
    .header-action-link,
    button,
    .skin-card {
        min-height: 28px;
        min-width: 28px;
    }
    
    .filter-option {
        min-height: 24px;
        padding: 8px;
    }
}

/* About page responsive */
@media (max-width: 768px) {
    .about-section {
        padding: 24px 16px;
    }
    
    .about-section__title {
        font-size: 1.8rem;
    }
    
    .about-values {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .about-timeline {
        padding-left: 20px;
    }
    
    .about-cta__actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .about-cta__btn {
        width: 100%;
        text-align: center;
    }
}

/* Contact page responsive */
@media (max-width: 768px) {
    .contact-card {
        padding: 20px;
    }
    
    .contact-list__item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .contact-list__item:hover,
    .contact-list__item:focus-visible {
        transform: translateX(2px);
    }
    
    .contact-list__icon {
        width: 32px;
        height: 32px;
    }
}

/* FAQ page responsive */
@media (max-width: 768px) {
    .faq-shell {
        padding: 0 16px 48px;
        gap: 16px;
    }
    
    .faq-intro h3 {
        font-size: 24px;
    }
    
    .faq-intro p {
        font-size: 16px;
    }
    
    .faq-group-toggle {
        padding: 14px 16px;
        font-size: 15px;
    }
    
    .faq-item-body {
        padding: 0 16px 16px;
    }
}

/* Cart page responsive */
@media (max-width: 991.98px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .cart-sidebar {
        order: -1;
    }
    
    .cart-summary-card {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .cart-shell {
        padding: 16px 12px;
    }
    
    .cart-items-card {
        padding: 16px;
    }
    
    .cart-contact-steps {
        font-size: 14px;
    }
}

/* Sell page responsive */
@media (max-width: 768px) {
    .sell-intro {
        padding: 0 16px;
    }
    
    .sell-form {
        padding: 0 12px;
    }
    
    .sell-form__controls {
        flex-direction: column;
    }
    
    .sell-form__input {
        width: 100%;
        min-width: 100%;
    }
    
    .sell-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}

/* Reviews page responsive */
@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .review-card {
        padding: 16px;
    }
}

/* Landing page responsive */
@media (max-width: 768px) {
    .landing-hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .landing-hero::before {
        background-position: 76% center;
    }
    
    .landing-hero__title {
        font-size: 2rem;
    }
    
    .landing-hero__tags {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .landing-hero__tag {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    .landing-hero__actions {
        flex-direction: row;
        gap: 12px;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .landing-btn {
        flex: 1;
        min-width: 140px;
        padding: 14px 24px;
    }
}

/* Mobile-specific improvements */
@media (max-width: 575.98px) {
    /* Locale switcher mobile */
    .locale-switcher__button {
        padding: 8px 12px;
        font-size: 13px;
        gap: 6px;
    }
    
    .locale-switcher__language-code,
    .locale-switcher__currency-code {
        display: none;
    }

    .mobile-nav-tools .locale-switcher__language-code,
    .mobile-nav-tools .locale-switcher__currency-code {
        display: inline;
    }
    
    .locale-switcher__panel {
        right: -10px;
        width: calc(100vw - 32px);
        max-width: 280px;
    }
    
    /* Cart preview mobile */
    .nav-cart-preview {
        right: -10px;
        width: calc(100vw - 32px);
        max-width: 320px;
    }
    
    /* Theme toggle mobile */
    .theme-toggle {
        padding: 8px;
        font-size: 18px;
    }
    
    /* Inventory grid ultra small screens */
    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Modal full screen on mobile */
    .modal-window {
        width: calc(100% - 16px);
        margin: 8px;
        max-height: calc(100vh - 16px);
    }
    
    /* Page headers */
    .page-header {
        font-size: 1.4rem;
        padding: 12px 0;
    }
    
    /* Button adjustments */
    .primary-button,
    .secondary-button {
        width: 100%;
        padding: 12px 20px;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .landing-hero {
        min-height: 100vh;
    }
    
    .top-nav {
        min-height: 56px;
    }
    
    .site-logo {
        height: 36px;
    }
    
    /* Safari landscape fix */
    @supports (-webkit-touch-callout: none) {
        .landing-hero {
            min-height: -webkit-fill-available;
        }
    }
}

/* Print styles */
@media print {
    .top-nav,
    .nav-controls,
    .navbar-toggler,
    .theme-toggle,
    .nav-cart,
    .locale-switcher,
    .site-footer {
        display: none !important;
    }
    
    main {
        padding: 0 !important;
    }
}

/* ==================== Skin Info Panel ==================== */
.skin-info-panel {
    position: fixed;
    background: var(--bg-primary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 16px;
    width: 320px;
    max-width: calc(100vw - 40px);
    max-height: 400px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: none;
}

.skin-info-panel.active {
    display: block;
}

.skin-info-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #333);
}

.skin-info-panel__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
}

.skin-info-panel__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Hide close button in readonly mode on desktop only (not on mobile) */
@media (min-width: 769px) {
    .skin-info-panel.readonly-mode .skin-info-panel__close {
        display: none;
    }
}

.skin-info-panel__close:hover,
.skin-info-panel__close:focus-visible {
    color: var(--accent-color);
    transform: scale(1.05);
    outline: none;
}

.skin-info-panel__content {
    margin-bottom: 16px;
}

.skin-info-panel.readonly-mode .skin-info-panel__content {
    margin-bottom: 0;
}

.skin-info-panel__textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: var(--bg-secondary, #252525);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    transition: border-color 0.2s ease;
}

.skin-info-panel__textarea:focus {
    outline: none;
    border-color: var(--accent-color, #007acc);
}

.skin-info-panel__textarea:read-only {
    background: var(--bg-tertiary, #1f1f1f);
    cursor: text;
    user-select: text;
}

/* Custom scrollbar for textarea */
.skin-info-panel__textarea::-webkit-scrollbar {
    width: 8px;
}

.skin-info-panel__textarea::-webkit-scrollbar-track {
    background: var(--bg-primary, #1a1a1a);
    border-radius: 4px;
}

.skin-info-panel__textarea::-webkit-scrollbar-thumb {
    background: var(--border-color, #444);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.skin-info-panel__textarea::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #666);
}

.skin-info-panel__display {
    display: none;
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: var(--bg-tertiary, #1f1f1f);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    line-height: 1.4;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.skin-info-panel.readonly-mode .skin-info-panel__textarea {
    display: none;
}

.skin-info-panel.readonly-mode .skin-info-panel__display {
    display: block;
}

.skin-info-panel__link {
    color: var(--accent-color, #ffb703);
    text-decoration: underline;
    word-break: break-all;
}

.skin-info-panel__link:hover,
.skin-info-panel__link:focus-visible {
    color: var(--accent-hover, #ffd166);
}

.skin-info-panel__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.skin-info-panel__btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.skin-info-panel__btn--primary {
    background: var(--accent-color, #007acc);
    color: #fff;
}

.skin-info-panel__btn--primary:hover {
    background: var(--accent-hover, #005a9e);
}

.skin-info-panel__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.skin-info-panel__btn--secondary {
    background: var(--bg-secondary, #252525);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border-color, #333);
}

.skin-info-panel__btn--secondary:hover {
    background: var(--bg-hover, #2a2a2a);
}

.skin-info-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
}

.skin-info-panel-overlay.active {
    display: block;
}

/* Hide overlay on desktop */
@media (min-width: 769px) {
    .skin-info-panel-overlay {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .skin-info-panel {
        min-width: 90vw;
        padding: 16px;
    }
    
    /* Mobile centering similar to locale-switcher */
    .skin-info-panel.readonly-mode.active {
        position: fixed !important;
        top: 50vh !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 80vh;
        overflow: visible;
        z-index: 10000 !important;
    }
    
    /* Backdrop blur only on mobile */
    .skin-info-panel-overlay.active {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Additional Safari iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix viewport height issues in Safari */
    .modal-window,
    .skin-info-panel {
        max-height: -webkit-fill-available;
    }
    
    /* Fix scrolling issues */
    body {
        position: relative;
    }
    
    /* Prevent elastic scrolling */
    body.modal-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    
    /* Fix skin-info-panel positioning on Safari iOS - only on mobile */
    @media (max-width: 768px) {
        .skin-info-panel.readonly-mode.active {
            transform: translate(-50%, -50%) translateZ(0);
            -webkit-transform: translate(-50%, -50%) translateZ(0);
            will-change: transform;
        }
        
        /* Fix backdrop-filter for skin-info-panel overlay on mobile */
        .skin-info-panel-overlay.active {
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }
    }
}

/* Safari-only fixes using @media */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        /* Safari 10.1+ specific styles */
        .inventory-grid {
            display: -webkit-box;
            display: grid;
        }
        
        .flex-container {
            display: -webkit-box;
            display: flex;
        }
    }
}