/* Dark Haven - Core UI System */

/* Theme Variables */
:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #050505;
    --text-primary: #ffffff;
    --text-dim: #999999;
    --text-muted-readable: #d0d0d0;
    --border-color: #ffffff;
    --border-dim: #333333;
    --card-bg: #0a0a0a;
    --anim-color: rgba(255, 255, 255, 0.15);
    --anim-stripe: rgba(255, 255, 255, 0.08);
    --accent: #ffffff;
    --transition: all 0.4s ease;
}

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

html.light-theme {
    --bg-primary: #f5f5f5;
    --bg-secondary: #e8e8e8;
    --bg-tertiary: #ffffff;
    --text-primary: #111111;
    --text-dim: #666666;
    --text-muted-readable: #111111;
    --border-color: #111111;
    --border-dim: #cccccc;
    --card-bg: #ffffff;
    --anim-color: rgba(0, 0, 0, 0.12);
    --anim-stripe: rgba(0, 0, 0, 0.08);
    --accent: #111111;
}

/* Base Resets & Transitions */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    font-family: 'Share Tech Mono', monospace;
}

/* Typography */
.font-terminal {
    font-family: 'VT323', monospace;
}

.font-share {
    font-family: 'Share Tech Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.terminal-text {
    color: var(--text-primary);
}

html.light-theme .terminal-text {
}

.terminal-text-dim {
    color: var(--text-dim);
}

/* Layout & Containers */
.whitespace-pre-wrap {
    white-space: pre-wrap !important;
}

.terminal-border-dim {
    border: 1px solid var(--border-dim);
}

.terminal-border-full {
    border: 1px solid var(--border-color);
}

.nav-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.9);
}

html.light-theme .nav-blur {
    background-color: rgba(245, 245, 245, 0.95);
}

/* Components: Buttons */
.btn-terminal {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-terminal:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

html.light-theme .btn-terminal:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.lang-flag {
    width: 28px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 4px;
}

/* Components: Cards */
.card-hover {
    transition: all 0.3s ease;
    border: 1px solid var(--border-dim);
    background: var(--card-bg);
}

.card-hover:hover {
    border-color: var(--border-color);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

html.light-theme .card-hover:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.card-image {
    transition: all 0.3s ease;
}

.card-hover:hover .card-image {
    filter: brightness(1.1);
}

html.light-theme .card-hover:hover .card-image {
    filter: brightness(1.0);
}

.slider-arrow-btn {
    background-color: var(--card-bg);
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.slider-arrow-btn:hover,
.slider-arrow-btn:active {
    border-color: var(--border-color);
    color: var(--text-primary);
    opacity: 1;
}

/* Global Animated Background */
.global-animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.binary-rain {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--anim-color);
    white-space: nowrap;
    animation: binary-fall linear infinite;
    opacity: 0.6;
    text-shadow: 0 0 2px var(--anim-color);
    will-change: transform, opacity;
    transform: translateZ(0);
}

.stripe {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--anim-stripe), transparent);
    animation: stripe-pulse 4s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.tv-scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--anim-stripe), var(--anim-stripe), transparent);
    animation: scanline-move linear infinite;
    opacity: 0.4;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Effects - scanlines disabled */

.glitch:hover {
    animation: glitch 0.3s infinite;
}

/* Animations */
@keyframes binary-fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes stripe-pulse {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes scanline-move {
    0% {
        top: -10px;
        opacity: 0;
    }

    5%,
    95% {
        opacity: 0.4;
    }

    100% {
        top: 100vh;
        opacity: 0;
    }
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Form Elements */
input,
textarea,
select {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-dim) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-color) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
    outline: none !important;
}

html.light-theme input:focus,
html.light-theme textarea:focus,
html.light-theme select:focus {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Utilities */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 2px;
}

.skeleton {
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

html.light-theme .skeleton {
    background: linear-gradient(90deg, #ddd 25%, #eee 50%, #ddd 75%);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Mega Menu Styles */
.mega-menu-content {
    background: rgba(25, 25, 25, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: none;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    /* Removed overflow to allow cascading submenus */
}

.mega-menu-content::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

html.light-theme .mega-menu-content {
    background: rgba(235, 235, 235, 0.98);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.mega-menu-category {
    position: relative;
}

.mega-menu-category:last-child {
    border-bottom: none;
}

.mega-menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--text-dim);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mega-menu-title:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    padding-left: 25px;
}

.mega-menu-title .arrow {
    font-size: 16px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.mega-menu-title:hover .arrow {
    transform: translateX(5px);
    opacity: 1;
}

html.light-theme .mega-menu-title:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Submenu Styles */
.mega-submenu-content {
    background: rgba(30, 30, 30, 0.98);
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
    padding: 8px 0;
    /* Removed overflow to allow cascading submenus */
}

.mega-submenu-content::-webkit-scrollbar {
    width: 6px;
}

.mega-submenu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

html.light-theme .mega-submenu-content {
    background: rgba(230, 230, 230, 0.98);
}

.mega-submenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: var(--text-dim);
    font-size: 12px;
    transition: all 0.3s ease;
}

.mega-submenu-link .arrow {
    font-size: 14px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.mega-submenu-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    padding-left: 25px;
}

.mega-submenu-link:hover .arrow {
    transform: translateX(5px);
    opacity: 1;
}

html.light-theme .mega-submenu-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
}

.theme-toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--text-primary);
    transition: transform 0.3s ease;
    transform: translateX(24px);
    z-index: 2;
}

html.light-theme .theme-toggle-slider {
    transform: translateX(0);
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
}

.theme-toggle-icon.moon {
    left: 5px;
}

.theme-toggle-icon.sun {
    right: 5px;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .theme-toggle {
        width: 40px;
        height: 22px;
    }

    .theme-toggle-slider {
        width: 14px;
        height: 14px;
        top: 3px;
        left: 3px;
        transform: translateX(20px);
    }

    html.light-theme .theme-toggle-slider {
        transform: translateX(0);
    }

    .theme-toggle-icon.moon {
        left: 3px;
    }

    .theme-toggle-icon.sun {
        right: 3px;
    }

    section {
        padding-top: 5.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Navigation Breakpoints & Language Adaptation */
.desktop-nav {
    display: none;
}

.mobile-menu-btn {
    display: block;
}

/* F01: center the rendered Lucide glyph inside its existing 44px owner. */
[data-mobile-menu-toggle] > svg {
    display: block;
    margin-inline: auto;
}

/* Wave 3.1: keep menu items at their natural width so we never see truncated
   labels like "Ч" instead of "ЧАТЫ". When the navbar runs out of horizontal
   space the language-specific media queries below collapse it into the
   mobile burger instead of silently clipping characters. */
.desktop-nav > * {
    flex-shrink: 0;
}

/* Wave 3.1: guarantee a visible separator between the menu links and the
   right-side controls (theme toggle / wallet badge / PRO / cart / avatar)
   so the wallet "5.00%" badge no longer appears glued to the last menu
   item ("ИГРА"). The right-side container already has ml-2 (8px); this
   adds 8px more from the menu side for a 16px total gap. */
.desktop-nav {
    padding-right: 0.5rem;
}

/* Content-aware header fitting. Capable headers start in compact mode in the
   template, then the shared controller promotes them to the complete desktop
   navigation only when the brand, every nav item and the controls actually
   fit. This deliberately overrides the older language/viewport guesses. */
html nav[data-ui-nav][data-nav-fit-capable] .desktop-nav {
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-left: 0 !important;
    max-width: none;
    width: max-content;
}

/* Tailwind's space-x utilities implement spacing with child margins. Do not
   combine those margins with the canonical gap above. */
html nav[data-ui-nav][data-nav-fit-capable] .desktop-nav > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Tailwind's transition-all must not animate viewport-driven font metrics.
   A growing label could otherwise cross into the controls after the fit
   measurement. Preserve the established visual hover transitions only. */
html nav[data-ui-nav][data-nav-fit-capable] .desktop-nav > a,
html nav[data-ui-nav][data-nav-fit-capable] .desktop-nav > .mega-menu-wrapper > a {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform !important;
}

html nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="compact"] .desktop-nav {
    display: none !important;
}

html nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="compact"] .mobile-menu-btn {
    display: block !important;
}

html nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="desktop"] .desktop-nav {
    display: flex !important;
}

html nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="desktop"] .mobile-menu-btn {
    display: none !important;
}

/* Compact toolbars keep every control visible even on a 320px viewport.
   Only horizontal spacing changes; text, icons and vertical hit areas stay. */
@media (max-width: 767px) {
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-brand] {
        margin-right: 4px !important;
    }
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] {
        column-gap: 1px !important;
        margin-left: 0 !important;
    }
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > button,
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > a,
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-fit-toggle] {
        padding-inline: 4px !important;
    }
}

/* Measure the complete natural-width navigation without cloning it or
   allowing it to participate in the header row's layout. The marker exists
   only inside one coalesced animation-frame measurement. */
html nav[data-ui-nav][data-nav-fit-capable][data-nav-measuring] .desktop-nav {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: max-content !important;
    max-width: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Managed menus are portaled to body, so they cannot inherit the fit state
   from their header. This opt-in marker lets an opened capable menu beat the
   legacy wide-screen safety hides while leaving every legacy header intact. */
html #mobile-menu[data-nav-fit-menu]:not(.hidden) {
    display: block !important;
}

/* BUG-6 (2026-05-15): iOS Safari long-press on nav links opens the iOS
   share/copy context menu instead of navigating. Disable the iOS callout
   and text selection on all navbar anchors so a tap is always interpreted
   as navigation, not text selection. */
.desktop-nav a,
#mobile-menu a,
.mega-menu a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Chinese language - adjusted to match English due to layout overlap.
   Wave 3.1: bumped 1150 → 1330 to leave room for navbar PRO button. */
@media (max-width: 1329px) {
    html[lang="zh"] .desktop-nav {
        display: none !important;
    }

    html[lang="zh"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1330px) {
    html[lang="zh"] .desktop-nav {
        display: flex !important;
    }

    html[lang="zh"] .mobile-menu-btn {
        display: none !important;
    }

    #mobile-menu {
        display: none !important;
    }
}

/* English language - medium text: switch at 1330px.
   Wave 3.1: bumped 1150 → 1330 to leave room for navbar PRO button. */
@media (max-width: 1329px) {
    html[lang="en"] .desktop-nav {
        display: none !important;
    }

    html[lang="en"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1330px) {
    html[lang="en"] .desktop-nav {
        display: flex !important;
    }

    html[lang="en"] .mobile-menu-btn {
        display: none !important;
    }

    /* Safety hide mobile menu */
    html[lang="en"] #mobile-menu {
        display: none !important;
    }
}

/* Russian language - switch at 1380px.
   Wave 3.1: bumped from 1280px → 1380px because the navbar now also carries
   the navbar PRO Boost button. With 10 Cyrillic menu labels (РАСПРОДАЖА,
   ЭКСКЛЮЗИВ etc.) plus theme/search/PRO/wallet/cart/avatar on the right,
   1280px caused the menu to overflow and clip "ЧАТЫ" → "Ч". Using the
   mobile burger below 1380px keeps the layout legible. */
@media (max-width: 1379px) {
    html[lang="ru"] .desktop-nav {
        display: none !important;
    }

    html[lang="ru"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1380px) {
    html[lang="ru"] .desktop-nav {
        display: flex !important;
    }

    html[lang="ru"] .mobile-menu-btn {
        display: none !important;
    }

    /* Safety hide mobile menu */
    html[lang="ru"] #mobile-menu {
        display: none !important;
    }
}



/* Ensure mobile menu shows correctly when toggled.
   Внутренний скролл + overscroll:contain — чтобы тач-свайп внутри
   меню не прокручивал фон (iOS Safari в т.ч.). Высота ограничена
   окном минус шапка (~104px = top-9 + h-14). */
#mobile-menu:not(.hidden) {
    display: block !important;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px); /* iOS Safari: actual visible viewport */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Explicit opt-in mobile navigation contract. The overlay is an opaque,
   independently scrollable interaction shield; legacy menus are untouched. */
[data-ui-menu] {
    --mobile-menu-top: 104px;
    --mobile-menu-viewport-height: 100dvh;
    --mobile-menu-discovery: #b7d66f;
    --mobile-menu-discovery-active: #d6ee9a;
    --mobile-menu-editorial: #d88ba2;
    --mobile-menu-editorial-active: #f1b4c6;
    position: fixed;
    z-index: 60;
    box-sizing: border-box;
    inset-inline: 0;
    top: var(--mobile-menu-top);
    height: calc(100dvh - var(--mobile-menu-top));
    height: calc(min(100dvh, var(--mobile-menu-viewport-height)) - var(--mobile-menu-top));
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-dim);
}

html.light-theme [data-ui-menu] {
    /* #5e7920 is the closest AA-readable counterpart to the home lime
       (#627d24) on the menu's #f5f5f5 surface. */
    --mobile-menu-discovery: #5e7920;
    --mobile-menu-discovery-active: #4d6812;
    --mobile-menu-editorial: #762c43;
    --mobile-menu-editorial-active: #5f1f34;
}

/* Beat the legacy #mobile-menu:not(.hidden) sizing without affecting menus
   that have not explicitly opted into the managed contract. */
#mobile-menu[data-ui-menu] {
    max-height: none;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

[data-ui-menu].hidden {
    display: none !important;
}

[data-ui-menu]:not(.hidden) {
    display: block;
}

[data-ui-menu-panel] {
    width: min(100%, 48rem);
    min-height: 100%;
    margin-inline: auto;
    outline: none;
}

/* F02: strengthen only the primary actions in the opened menu. */
[data-ui-menu] [data-ui-menu-panel] > :is(a, [data-ui-menu-handoff]) {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}
[data-ui-menu] [data-ui-menu-panel] > a.terminal-text-dim,
[data-ui-menu] [data-ui-menu-panel] > div > p.terminal-text-dim {
    color: var(--text-primary);
}
[data-ui-menu] [data-ui-menu-panel] > div > p {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
}
[data-ui-menu] [data-ui-menu-panel] > div button {
    font-weight: 700;
}

/* Keep the established cases, exclusive and game identities intact while
   replacing only the ordinary grey navigation groups with the home palette. */
[data-ui-menu] [data-ui-menu-panel] a[href^="/catalog/"]:not([href*="exclusive=true"]) {
    color: var(--mobile-menu-discovery);
}

[data-ui-menu] [data-ui-menu-panel] :is(
    a[href^="/news/"],
    a[href^="/reviews/"],
    a[href^="/chats/"],
    a[href^="/top/"]
) {
    color: var(--mobile-menu-editorial);
}

[data-ui-menu] [data-ui-menu-panel] a[href^="/catalog/"]:not([href*="exclusive=true"]):hover,
[data-ui-menu] [data-ui-menu-panel] a[href^="/catalog/"]:not([href*="exclusive=true"]):focus-visible {
    color: var(--mobile-menu-discovery-active);
}

[data-ui-menu] [data-ui-menu-panel] :is(
    a[href^="/news/"],
    a[href^="/reviews/"],
    a[href^="/chats/"],
    a[href^="/top/"]
):is(:hover, :focus-visible) {
    color: var(--mobile-menu-editorial-active);
}

[data-ui-menu] [data-ui-menu-panel] a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

[data-mobile-menu-toggle][aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 2026-10-08: carry the established discovery/editorial palette through the
   full shared navigation and fit-only legacy menus. Branded case, exclusive
   and game identities remain owned by their existing rules. */
nav[data-ui-nav][data-nav-fit-capable],
[data-nav-fit-menu] {
    --shared-nav-discovery: #b7d66f;
    --shared-nav-discovery-active: #d6ee9a;
    --shared-nav-editorial: #d88ba2;
    --shared-nav-editorial-active: #f1b4c6;
}
html.light-theme nav[data-ui-nav][data-nav-fit-capable],
html.light-theme [data-nav-fit-menu] {
    --shared-nav-discovery: #5e7920;
    --shared-nav-discovery-active: #4d6812;
    --shared-nav-editorial: #762c43;
    --shared-nav-editorial-active: #5f1f34;
}
/* R8 contrast follow-up: keep the game identity, but make its mobile-menu
   label readable against the light navigation surface. */
html.light-theme [data-nav-fit-menu] a[href^="/game/"] {
    color: #6b4f00 !important;
}
html.light-theme [data-nav-fit-menu] a[href^="/game/"]:is(:hover, :focus-visible) {
    color: #4f3900 !important;
}
nav[data-ui-nav][data-nav-fit-capable] .desktop-nav :is(#nav-home, #nav-catalog, #nav-new, #nav-sale, a[href="/ru/"], a[href="/en/"], a[href="/zh/"], a[href^="/catalog/"]:not([href*="exclusive=true"])),
[data-nav-fit-menu] :is(a[href="/ru/"], a[href="/en/"], a[href="/zh/"], a[href^="/catalog/"]:not([href*="exclusive=true"])) {
    color: var(--shared-nav-discovery) !important;
}
nav[data-ui-nav][data-nav-fit-capable] .desktop-nav :is(#nav-news, #nav-about, #nav-reviews, #nav-chats, #nav-top, a[href^="/news/"], a[href^="/reviews/"], a[href^="/chats/"], a[href^="/top/"], a[href^="#about"]),
[data-nav-fit-menu] :is(a[href^="/news/"], a[href^="/reviews/"], a[href^="/chats/"], a[href^="/top/"], a[href^="#about"]) {
    color: var(--shared-nav-editorial) !important;
}
nav[data-ui-nav][data-nav-fit-capable] .desktop-nav :is(#nav-home, #nav-catalog, #nav-new, #nav-sale, a[href="/ru/"], a[href="/en/"], a[href="/zh/"], a[href^="/catalog/"]:not([href*="exclusive=true"])):is(:hover, :focus-visible),
[data-nav-fit-menu] :is(a[href="/ru/"], a[href="/en/"], a[href="/zh/"], a[href^="/catalog/"]:not([href*="exclusive=true"])):is(:hover, :focus-visible) {
    color: var(--shared-nav-discovery-active) !important;
}
nav[data-ui-nav][data-nav-fit-capable] .desktop-nav :is(#nav-news, #nav-about, #nav-reviews, #nav-chats, #nav-top, a[href^="/news/"], a[href^="/reviews/"], a[href^="/chats/"], a[href^="/top/"], a[href^="#about"]):is(:hover, :focus-visible),
[data-nav-fit-menu] :is(a[href^="/news/"], a[href^="/reviews/"], a[href^="/chats/"], a[href^="/top/"], a[href^="#about"]):is(:hover, :focus-visible) {
    color: var(--shared-nav-editorial-active) !important;
}



/* Profile & Dashboard Styles */
.tab-btn {
    padding: 14px 32px;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Payment modal text bolder */
#payment-modal .terminal-text-dim,
#payment-modal .terminal-text,
#payment-modal label,
#payment-modal p,
#payment-modal span,
#provider-modal .terminal-text-dim,
#provider-modal .terminal-text,
#provider-modal label,
#provider-modal p,
#provider-modal span {
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}
#payment-modal h3,
#payment-modal .font-bold,
#provider-modal h3,
#provider-modal .font-bold {
    font-weight: 800;
    font-size: 1.3rem;
}
#payment-modal .text-sm,
#provider-modal .text-sm {
    font-weight: 600;
    font-size: 0.9rem;
}
#payment-modal .text-2xl,
#provider-modal .text-2xl {
    font-weight: 800;
}
#provider-modal .text-xs {
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
}
html.light-theme #payment-modal .terminal-text-dim,
html.light-theme #payment-modal .terminal-text,
html.light-theme #payment-modal label,
html.light-theme #payment-modal p,
html.light-theme #payment-modal span,
html.light-theme #provider-modal .terminal-text-dim,
html.light-theme #provider-modal .terminal-text,
html.light-theme #provider-modal label,
html.light-theme #provider-modal p,
html.light-theme #provider-modal span {
    color: rgba(0, 0, 0, 0.85);
}
html.light-theme #payment-modal h3,
html.light-theme #payment-modal .font-bold,
html.light-theme #provider-modal h3,
html.light-theme #provider-modal .font-bold {
    color: rgba(0, 0, 0, 0.9);
}
html.light-theme #provider-modal .text-xs {
    color: rgba(0, 0, 0, 0.9);
}
html.light-theme #payment-modal input,
html.light-theme #payment-modal select,
html.light-theme #payment-modal textarea,
html.light-theme #provider-modal input,
html.light-theme #provider-modal select,
html.light-theme #provider-modal textarea {
    color: rgba(0, 0, 0, 0.85);
}
html.light-theme #payment-modal input::placeholder,
html.light-theme #provider-modal input::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

/* Payment method rows: keep their p/span readable when the row inverts
   on :hover/:focus-visible. The ID-scoped rules above force a fixed text
   colour on every p/span of the modal, which used to leave white-on-white
   (dark) / black-on-black (light) text on the inverted row after a touch
   tap (sticky :hover) or keyboard focus. Inherit the row colour instead. */
#payment-modal .dh-payment-method-btn p,
#payment-modal .dh-payment-method-btn span,
#provider-modal .dh-payment-method-btn p,
#provider-modal .dh-payment-method-btn span,
html.light-theme #payment-modal .dh-payment-method-btn p,
html.light-theme #payment-modal .dh-payment-method-btn span,
html.light-theme #provider-modal .dh-payment-method-btn p,
html.light-theme #provider-modal .dh-payment-method-btn span {
    color: inherit;
}

.loyalty-step {
    position: relative;
    padding: 20px;
    border: 1px solid var(--border-dim);
    text-align: center;
}

.loyalty-step::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--text-dim);
}

.loyalty-step:last-child::after {
    display: none;
}

.telegram-badge {
    background: linear-gradient(135deg, #0088cc, #00a2e8);
    color: #fff;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-card {
    background: var(--card-bg);
    border: 1px solid var(--border-dim);
    transition: all 0.3s ease;
}

.order-card:hover {
    border-color: var(--border-color);
}

.status-pending {
    color: #fbbf24;
    border-color: #fbbf24;
}

.status-paid {
    color: #22c55e;
    border-color: #22c55e;
}

.status-shipped {
    color: var(--accent);
    border-color: var(--accent);
}

.status-cancelled {
    color: #ef4444;
    border-color: #ef4444;
}

@media (max-width: 768px) {
    .loyalty-step::after {
        display: none;
    }
}

/* News Styles */
.news-card {
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-image {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.pinned-badge {
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 2px 8px;
    font-weight: bold;
}

/* Review Styles */
.review-card {
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.rating-star {
    color: #ffd700;
}

html.light-theme .rating-star {
    color: #d4a200;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

.rating-star.empty {
    color: var(--text-dim);
    opacity: 0.3;
}

/* Review star selector */
.review-star {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 0 2px;
    transition: color 0.15s;
}
.review-star.active {
    color: #f59e0b;
}
.review-star:hover {
    color: #f59e0b;
}

/* Referral link container — keep copy button inside the gray box on narrow screens */
.ref-link-container #ref-link {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (max-width: 360px) {
    .ref-link-container .ref-link-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ref-link-container #ref-copy-btn {
        width: 100%;
        text-align: center;
    }
}

/* Review images — photos attached to a customer review */
.review-images {
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0.5rem !important;
}
.review-photo {
    width: 120px;
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-photo:hover {
    transform: translateY(-2px);
    border-color: var(--text-primary) !important;
}
.review-photo img {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 480px) {
    .review-photo {
        width: calc(33.333% - 0.5rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Payment Logos */
.payment-logo-img {
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    opacity: 0.8;
}

/* Precise Area Normalization (Visual Weight) */
/* Square/Almost Square */
.payment-logo-img[src*="image1"] {
    height: 26px;
}

.payment-logo-img[src*="image2"] {
    height: 32px;
}

.payment-logo-img[src*="image6"] {
    height: 36px;
}

/* Rectangular */
.payment-logo-img[src*="image3"] {
    height: 28px;
}

.payment-logo-img[src*="image5"] {
    height: 20px;
}

/* Wide (Visa) */
.payment-logo-img[src*="image4"] {
    height: 14px;
}

@media (min-width: 640px) {

    .payment-logo-img[src*="image1"] {
        height: 38px;
    }

    .payment-logo-img[src*="image2"] {
        height: 48px;
    }

    .payment-logo-img[src*="image6"] {
        height: 52px;
    }

    .payment-logo-img[src*="image3"] {
        height: 38px;
    }

    .payment-logo-img[src*="image5"] {
        height: 28px;
    }

    .payment-logo-img[src*="image4"] {
        height: 20px;
    }
}

.payment-logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Auth Pages */
.btn-telegram {
    background: linear-gradient(135deg, #0088cc, #00a2e8);
    border: none;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}

.btn-telegram:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 136, 204, 0.5);
}

.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-dim);
}

.back-to-shop {
    color: var(--text-dim);
    transition: color 0.3s ease;
}

.back-to-shop:hover {
    color: var(--text-primary);
}

/* Catalog Sidebar & Accordion */
.catalog-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
}

@media (min-width: 1024px) {
    .catalog-container {
        flex-direction: row;
    }
}

.catalog-sidebar {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .catalog-sidebar {
        width: 340px;
        position: sticky;
        top: 80px;
        align-self: flex-start;
        height: calc(100vh - 100px);
        overflow-y: auto;
        padding-right: 2rem;
        border-right: 1px solid var(--border-dim);
        margin-right: 2rem;
        scrollbar-width: thin;
        scrollbar-color: var(--border-dim) transparent;
    }

    /* Custom scrollbar for webkit */
    .catalog-sidebar::-webkit-scrollbar {
        width: 3px;
    }

    .catalog-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .catalog-sidebar::-webkit-scrollbar-thumb {
        background: var(--border-dim);
    }
}

.filter-accordion-item {
    border-bottom: 1px solid var(--border-dim);
}

.filter-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    color: var(--text-primary);
}

.filter-accordion-header:hover {
    color: var(--text-dim);
}

.filter-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.filter-accordion-item.active .filter-accordion-content {
    max-height: 1000px;
    padding-bottom: 1.5rem;
}

.filter-accordion-header i {
    transition: transform 0.4s ease;
}

.filter-accordion-item.active .filter-accordion-header i {
    transform: rotate(180deg);
}

.filter-option-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-select-custom {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    appearance: none;
    cursor: pointer;
}

.filter-reset-btn {
    width: 100%;
    border: 1px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.filter-reset-btn:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* Range Slider Custom Styling for Sidebar */
.sidebar-range-container {
    padding: 1.5rem 0;
}

.sidebar-price-display {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    text-align: right;
}

/* Theme adaptation for light mode */
html.light-theme .filter-accordion-header {
    color: #000;
}

html.light-theme .filter-select-custom {
    background: #fff;
    border-color: #ddd;
}

html.light-theme .filter-accordion-item {
    border-color: #eee;
}

/* Unified Dual Range Slider Styles */
.range-slider-container {
    position: relative;
    width: 100%;
    height: 32px;
    margin: 1rem 0;
}

.range-slider-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--border-dim);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.slider-track {
    position: absolute;
    height: 4px;
    background: var(--text-primary);
    box-shadow: 0 0 10px var(--text-primary);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    transition: left 0.1s ease, width 0.1s ease;
}

.range-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    height: 0;
    outline: none;
    background: transparent;
    z-index: 3;
    margin: 0;
    top: 50%;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-image: url("../images/ui/price-range-boot.de1409ccea2d.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.2s ease;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.08);
}

.range-slider-container input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.range-slider-container input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-image: url("../images/ui/price-range-boot.de1409ccea2d.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.2s ease;
}

.range-slider-container input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* AUTHENTICATION PAGES STYLES */
.card {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--border-dim);
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    margin-top: 4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

html.light-theme .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.input-field {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-dim);
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.3s ease;
    border-radius: 0;
    font-size: 1rem;
}

.input-field:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    outline: none;
    background: var(--bg-primary);
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    opacity: 0.5;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.password-toggle-btn:hover {
    opacity: 1;
    color: var(--text-primary);
}

html.light-theme .input-field:focus {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.error-msg {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 0;
    overflow: hidden;
}

.error-msg.show {
    opacity: 1;
    height: auto;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.success-msg {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 0;
    overflow: hidden;
}

.success-msg.show {
    opacity: 1;
    height: auto;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.password-strength {
    height: 4px;
    background: var(--border-dim);
    margin-top: 8px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
    background: transparent;
}

.strength-1 {
    width: 25%;
    background-color: #ef4444 !important;
}

/* Red */
.strength-2 {
    width: 50%;
    background-color: #f59e0b !important;
}

/* Amber */
.strength-3 {
    width: 75%;
    background-color: #10b981 !important;
}

/* Emerald */
.strength-4 {
    width: 100%;
    background-color: #059669 !important;
}

/* Green */

/* Product Modal Colors & Sizes */
.color-btn-default {
    border-color: var(--border-dim);
    border-width: 1px !important;
}

.color-btn-default:not(:disabled):hover {
    border-color: var(--border-color);
}

.color-btn-selected {
    border-color: var(--border-color) !important;
    border-width: 1px !important;
    box-shadow: none !important;
    transform: scale(1.1);
    z-index: 10;
}

.size-btn-default {
    border-color: var(--border-dim);
    color: var(--text-dim);
}

.size-btn-default:not(:disabled):hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.size-btn-selected {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: var(--anim-color) !important;
}

/* User Menu Logout Button Enhancement */
#user-menu-logout {
    color: #ef4444 !important;
    transition: all 0.3s ease;
    background: transparent !important;
}

#user-menu-logout:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

#user-menu-logout i {
    color: inherit;
}

/* ============ PDP — Product Detail Page ============ */

/* 09:53 readability pass: muted secondary text (breadcrumbs, brand/article
   meta, size/color labels, product description, review text/details) keeps
   the dim tier of the hierarchy but must read near-black on light surfaces
   and light grey on dark ones; the weight bump renders synthesized-bold on
   the single-weight mono faces. Deliberately scoped to muted copy only:
   headings and the dim utility keep their current weight. */
.pdp-muted {
    color: var(--text-muted-readable);
    font-weight: 600;
}

.pdp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .pdp-grid {
        grid-template-columns: 58% 38%;
        gap: 4%;
    }
}

/* Right column sticky */
.pdp-info {
    position: relative;
}

@media (min-width: 1024px) {
    .pdp-info-inner {
        position: sticky;
        top: 9rem;
        /* Right description column scrolls independently of left photo column.
           Without these, sticky + long description = description scrolls with
           the page (left photos) and tail gets cut. */
        max-height: calc(100vh - 10rem);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.5rem;
        scrollbar-width: thin;
    }
    .pdp-info-inner::-webkit-scrollbar {
        width: 6px;
    }
    .pdp-info-inner::-webkit-scrollbar-thumb {
        background: var(--border-color, rgba(0,0,0,0.25));
        border-radius: 3px;
    }
}

/* Desktop gallery images */
.pdp-desktop-img {
    overflow: hidden;
}

.pdp-desktop-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.pdp-desktop-img:hover img {
    transform: scale(1.03);
}

/* Mobile swipe gallery */
.pdp-swipe-gallery {
    position: relative;
    margin-bottom: 1.5rem;
}

.pdp-swipe-track {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.pdp-swipe-track::-webkit-scrollbar {
    display: none;
}

.pdp-swipe-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.pdp-swipe-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dots */
.pdp-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
}

.pdp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-dim);
    transition: background 0.3s;
}

.pdp-dot--active {
    background: var(--text-primary);
}

/* Color links */
.pdp-color-link {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pdp-color-link:hover {
    color: var(--text-primary);
}

.pdp-color-link--active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 1.5px solid var(--text-primary);
}

/* Size tiles */
.pdp-size-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 6px 2px;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pdp-size-tile__num {
    line-height: 1;
}

/* T02: постоянная маркировка нулевого остатка — видна в покое,
   без ховера, в том числе на тач-устройствах. Плитка остаётся
   выбираемой (клик = запрос уведомления), поэтому курсор pointer. */
.pdp-size-tile__stock {
    font-size: 0.625rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    text-align: center;
    text-transform: uppercase;
    word-break: break-word;
}

.pdp-size-tile:hover:not(:disabled) {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.pdp-size-tile:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.pdp-size-tile--selected {
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    background: var(--anim-color) !important;
}

.pdp-size-tile--unavailable {
    border-style: dashed;
    cursor: pointer;  /* остаётся выбираемой: клик → уведомление о наличии */
}

.pdp-size-tile--unavailable .pdp-size-tile__num {
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.8;
}

/* Выбранный недоступный размер остаётся читаемым: номер и лейбл
   подсвечиваются цветом темы, зачёркивание сохраняется. */
.pdp-size-tile--unavailable.pdp-size-tile--selected .pdp-size-tile__num {
    color: var(--text-primary);
    opacity: 1;
}

.pdp-size-tile--unavailable.pdp-size-tile--selected .pdp-size-tile__stock,
.pdp-size-tile--unavailable:hover .pdp-size-tile__stock {
    color: var(--text-primary);
}

/* Notify-me block: постоянное объяснение триггера и адресата (T02) */
.notify-explain {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border-dim);
    font-size: 0.78rem;
    line-height: 1.5;
}

.notify-explain__trigger {
    margin: 0 0 6px;
    color: var(--text-primary);
}

.notify-explain__dest {
    margin: 6px 0 0;
    color: var(--text-dim);
}

.notify-dest-caption {
    margin-right: 4px;
}

.notify-dest-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    padding: 2px 8px;
    word-break: break-all;
}

.notify-dest-chip__glyph {
    color: var(--text-dim);
    font-size: 0.9em;
    line-height: 1;
    /* глиф не должен мешать переносу длинного адреса */
    flex: none;
}

.notify-choice-title {
    margin: 6px 0 6px;
    color: var(--text-dim);
}

.notify-channel-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notify-channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}

.notify-channel-pill:not(:disabled):hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.notify-channel-pill[aria-pressed="true"] {
    border-color: var(--text-primary);
    background: var(--anim-color);
    color: var(--text-primary);
}

.notify-channel-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.notify-channel-pill:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.notify-channel-pill__glyph {
    font-size: 0.85em;
    line-height: 1;
    flex: none;
}

.notify-pill-dest {
    text-transform: none;
    letter-spacing: 0;
}

.notify-explain__none {
    margin: 6px 0 0;
    color: var(--text-dim);
}

.notify-settings-link {
    color: var(--text-primary);
    text-decoration: underline;
}

.notify-subscribed-detail {
    color: var(--text-dim);
    word-break: break-word;
}

/* Вопрос поддержке о заказе с Китая (2026-09-24): вторичное действие
   в блоке уведомления о поступлении — контурная кнопка с пунктиром
   (язык распроданной плитки), не спорит с основной кнопкой запроса. */
.notify-china-inquiry__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px dashed var(--border-dim);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
}

.notify-china-inquiry__cta:hover {
    border-color: var(--text-primary);
    opacity: 0.85;
}

.notify-china-inquiry__cta:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}

.notify-china-inquiry__hint {
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Preorder (T02): сильный бейдж + CTA в поддержку, без оплаты */
.pdp-preorder {
    border: 1px solid var(--text-primary);
    padding: 14px 16px;
}

.pdp-preorder__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.pdp-preorder__badge-dot {
    width: 8px;
    height: 8px;
    background: var(--text-primary);
    flex-shrink: 0;
    animation: preorder-pulse 2s ease-in-out infinite;
}

@keyframes preorder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-preorder__badge-dot { animation: none; }
}

.pdp-preorder__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 10px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pdp-preorder__cta:hover {
    opacity: 0.85;
}

.pdp-preorder__cta:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}

.pdp-preorder__note {
    margin: 12px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.pdp-preorder__hint {
    margin: 8px 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text-dim);
}

/* Add to cart button */
.pdp-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s;
}

.pdp-add-to-cart:hover:not(:disabled) {
    opacity: 0.85;
}

.pdp-add-to-cart:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* T05: весь товар распродан — заметное состояние главной кнопки
   («НЕТ В НАЛИЧИИ»): контур вместо заливки, приглушение сильнее
   обычного disabled, но текст остаётся контрастным в обеих темах. */
.pdp-add-to-cart--oos {
    background: transparent;
    border: 1px dashed var(--text-dim);
    color: var(--text-dim);
    opacity: 1;
}

.pdp-add-to-cart--oos:disabled {
    cursor: not-allowed;
    opacity: 1;
}

/* Download button */
.pdp-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
}

.pdp-download-btn:hover {
    border-color: var(--text-primary);
    background: var(--anim-color);
}

/* Accordions */
.pdp-accordions {
    border-top: 1px solid var(--border-dim);
}

.pdp-accordion {
    border-bottom: 1px solid var(--border-dim);
}

.pdp-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pdp-accordion-header:hover {
    opacity: 0.7;
}

.pdp-accordion-arrow {
    transition: transform 0.3s;
    flex-shrink: 0;
}

.pdp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.pdp-accordion-body--open {
    padding-bottom: 16px;
}

/* Lightbox */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    /* iOS Safari: own the gesture so the page underneath doesn't try to scroll
       and chain back into the document-level touchmove handlers (which froze
       the UI when the body scroll lock raced with image load). */
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
}

.pdp-lightbox.hidden {
    display: none;
}

.pdp-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transition: none;
    cursor: zoom-in;
    touch-action: none;
}

.pdp-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.pdp-lightbox-prev,
.pdp-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    z-index: 10;
    padding: 1rem;
    line-height: 1;
}

.pdp-lightbox-prev { left: 1rem; }
.pdp-lightbox-next { right: 1rem; }

/* ============ PROMO POPUP ============ */
#promo-popup-tab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--bg-primary, #000);
    border: 2px solid var(--border-color, #fff);
    padding: 16px 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #fff);
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: promo-pulse 2s ease-in-out infinite;
}
#promo-popup-tab:hover {
    transform: scale(1.05);
}
@keyframes promo-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 4px 30px rgba(255, 255, 255, 0.2); }
}
#promo-popup-tab.promo-popup-hidden { display: none; }

#promo-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--bg-primary, #000);
    border: 2px solid var(--border-color, #fff);
    padding: 24px 28px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 40px);
    font-family: 'Space Mono', monospace;
    color: var(--text-primary, #fff);
    transition: opacity 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#promo-popup.promo-popup-hidden { display: none; }

.promo-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dim, #999);
    line-height: 1;
}
.promo-popup-close:hover { color: var(--text-primary, #fff); }

#promo-popup-tab .promo-popup-close {
    position: static;
    font-size: 16px;
}

.promo-popup-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.promo-popup-desc {
    font-size: 13px;
    color: var(--text-dim, #999);
    margin-bottom: 14px;
    line-height: 1.4;
}
.promo-popup-form {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.promo-popup-form input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-dim, #333);
    color: var(--text-primary, #fff);
    padding: 10px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    outline: none;
}
.promo-popup-form input:focus {
    border-color: var(--border-color, #fff);
}
.promo-popup-form button {
    background: var(--text-primary, #fff);
    color: var(--bg-primary, #000);
    border: none;
    padding: 10px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
}
.promo-popup-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.promo-popup-hurry {
    font-size: 12px;
    color: var(--text-dim, #999);
    margin-top: 6px;
}
.promo-popup-msg {
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}
.promo-popup-error { color: #ef4444; }

@media (max-width: 480px) {
    #promo-popup-tab,
    #promo-popup {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
    }
}

/* ============ LIGHT THEME CONTRAST FIXES ============ */

/* Decorative binary-rain / scanlines / stripes render as faint ghost text on
   the white background ("белое по белому" feedback). Hide them in light theme. */
html.light-theme .binary-rain,
html.light-theme .tv-scanline,
html.light-theme .stripe {
    display: none !important;
}

/* Product/content cards blend into the light background because
   --border-dim (#cccccc) on --bg-primary (#f5f5f5) is too faint.
   Darken the dim border so separators stay visible. */
html.light-theme {
    --border-dim: #b8b8b8;
}

/* Promo popup is the primary CTA. In dark theme it's a bold black tile with
   white text; the light-theme inversion drained that contrast away. Invert
   the popup so it stays a prominent dark CTA on the light page. */
html.light-theme #promo-popup-tab,
html.light-theme #promo-popup {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
html.light-theme .promo-popup-close { color: #cccccc; }
html.light-theme .promo-popup-close:hover { color: #ffffff; }
html.light-theme .promo-popup-desc,
html.light-theme .promo-popup-hurry { color: #cccccc; }
html.light-theme .promo-popup-form input {
    background: transparent;
    border-color: #444444;
    color: #ffffff;
}
html.light-theme .promo-popup-form input::placeholder { color: #888888; }
html.light-theme .promo-popup-form input:focus { border-color: #ffffff; }
html.light-theme .promo-popup-form button {
    background: #ffffff;
    color: #111111;
}

/* "НОВИНКА" / "NEW" / "新品" badge on product cards.
   Without explicit styling the label inherits the page text colour, lacks
   a background, and wraps mid-word — on narrow cards the bracketed text
   gets clipped to "[НОВИНК…". A solid dark chip with white text reads on
   any product photo and works in both themes. */
.product-badge {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: calc(100% - 1.5rem);
    white-space: nowrap;
    line-height: 1;
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
html.light-theme .product-badge {
    background-color: rgba(0, 0, 0, 0.82);
    border-color: rgba(255, 255, 255, 0.22);
}

/* T05: «НЕТ В НАЛИЧИИ / OUT OF STOCK / 缺货» — полоса поверх нижней
   кромки фото карточки каталога. Распроданный товар остаётся в каталоге
   (статусом больше не управляет остаток) — покупку блокирует сервер,
   бейдж честно сообщает состояние. Тёмная полоса + белый текст читаются
   поверх любого фото и в обеих темах (как product-badge выше). */
.catalog-card-oos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.45rem 0.5rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.78);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* ===== Swim Run mini-game (second arcade on /game/<lang>/) ===== */
.swim-run-shell {
    width: 100%;
    max-width: min(900px, calc(100vw - 24px));
    margin: 32px auto 0;
    padding: 16px 14px 20px;
    border: 1px solid rgba(33, 212, 245, .55);
    background: linear-gradient(135deg, rgba(6, 16, 28, .98), rgba(8, 24, 38, .96));
    box-shadow: 0 0 0 2px rgba(33, 212, 245, .08) inset, 0 0 28px rgba(33, 212, 245, .18);
    color: #e6f7ff;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    text-align: center;
}
.swim-run-hero {
    margin-bottom: 14px;
}
.swim-run-hero h2 {
    font-size: 28px;
    letter-spacing: 2px;
    margin: 0 0 6px;
    color: #e6f7ff;
}
.swim-run-hero h2 .accent {
    color: #21d4f5;
    text-shadow: 0 0 12px rgba(33, 212, 245, .55);
}
.swim-run-subtitle {
    margin: 0;
    color: #9ad4e6;
    font-size: 14px;
    letter-spacing: 1px;
}
.swim-run-game-wrap {
    position: relative;
    margin: 14px auto 0;
    max-width: 800px;
}
#swim-run-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: #050a14 url("/static/images/game/swim_run/hero_swim.3e0dd1c31682.png") center / contain no-repeat;
    border: 3px solid #21d4f5;
    box-shadow: 0 0 0 2px #06121d, 0 0 24px rgba(33, 212, 245, .35);
    image-rendering: pixelated;
    touch-action: none;
}
.swim-run-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(3, 8, 16, .35);
    color: #e6f7ff;
    z-index: 4;
    border: 3px solid transparent;
    pointer-events: auto;
    padding-bottom: 30px;
}
.swim-run-overlay.hidden { display: none; }
.swim-run-overlay-inner {
    text-align: center;
    padding: 16px 20px;
    background: rgba(6, 16, 28, .92);
    border: 1px solid rgba(33, 212, 245, .55);
    box-shadow: 0 0 14px rgba(33, 212, 245, .25);
    max-width: 80%;
}
.swim-run-overlay-inner h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #21d4f5;
    letter-spacing: 1px;
}
.swim-run-overlay-inner p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.5;
}
.swim-run-attempts {
    color: #9ad4e6;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.swim-run-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #061421;
    color: #21d4f5;
    border: 2px solid #21d4f5;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    font-size: 20px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .15s ease;
    text-transform: uppercase;
}
.swim-run-btn:hover {
    background: #21d4f5;
    color: #061421;
    box-shadow: 0 0 14px rgba(33, 212, 245, .65);
}
.swim-run-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #6fb9ce;
}
.swim-run-about {
    width: 100%;
    max-width: 48rem;
    margin: 16px auto 0;
    padding: 12px 14px;
    border: 1px solid rgba(33, 212, 245, .45);
    background: linear-gradient(135deg, rgba(6, 16, 28, .96), rgba(8, 24, 38, .94));
    color: #e6f7ff;
    text-align: left;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    box-shadow: 0 0 14px rgba(33, 212, 245, .15);
}
.swim-run-about h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #21d4f5;
}
.swim-run-about p {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.5;
}
.swim-run-about p.hint {
    color: #6fb9ce;
    font-size: 13px;
}
.swim-rules {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}
.swim-rules li {
    padding: 4px 0;
    font-size: 15px;
}
@media (max-width: 480px) {
    .swim-run-shell { padding: 12px 8px 16px; }
    .swim-run-hero h2 { font-size: 22px; }
    .swim-run-overlay-inner { padding: 12px 14px; max-width: 92%; }
    .swim-run-overlay-inner h3 { font-size: 18px; }
    .swim-run-btn { padding: 8px 16px; font-size: 18px; }
}

/* ============================================================
   DH Payment Method Buttons & Modal Frame.
   Single unified pixel-mono style for the payment provider modal,
   retry-payment modal, and crypto-network picker. Mono palette
   only (no rainbow gradients or hardcoded colors).
   ============================================================ */
.dh-payment-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    padding: 1rem;
}
html.light-theme .dh-payment-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.dh-payment-contact-manager-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    border: 1px dashed var(--text-primary);
    transition: opacity .2s;
}
.dh-payment-contact-manager-link:hover {
    opacity: .7;
}

.dh-payment-modal-frame {
    position: relative;
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 2px solid var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    color: var(--text-primary);
}

.dh-payment-modal-frame--narrow {
    max-width: 28rem;
}

.dh-payment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid var(--text-primary);
    gap: 0.75rem;
    flex-shrink: 0;
}

.dh-payment-modal-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}
.dh-payment-modal-title:hover {
    opacity: 0.75;
}

.dh-payment-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0;
}
.dh-payment-modal-close:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.dh-payment-modal-body {
    padding: 1.25rem 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.dh-payment-total {
    text-align: center;
    margin-bottom: 1rem;
}
.dh-payment-total__old {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: line-through;
    margin: 0;
    font-family: inherit;
}
.dh-payment-total__amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
    font-family: inherit;
}
.dh-payment-total__stars {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0.3rem 0 0;
    font-family: inherit;
}

.dh-payment-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 2px dashed var(--text-primary);
    background: var(--bg-secondary);
    margin-bottom: 0.9rem;
    color: var(--text-primary);
}
.dh-payment-banner__pct {
    flex: 0 0 auto;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.dh-payment-banner__text {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.dh-payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dh-payment-method-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    width: 100%;
    background: var(--bg-secondary);
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    position: relative;
}
.dh-payment-method-btn:hover,
.dh-payment-method-btn:focus-visible {
    background: var(--text-primary);
    color: var(--bg-primary);
    outline: none;
}
.dh-payment-method-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dh-payment-method-btn .dh-pm-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    background: transparent;
}
.dh-payment-method-btn .dh-pm-icon img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}
.dh-payment-method-btn .dh-pm-icon i,
.dh-payment-method-btn .dh-pm-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}
.dh-payment-method-btn .dh-pm-icon__char {
    font-size: 1.5rem;
    line-height: 1;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
}

.dh-payment-method-btn .dh-pm-body {
    flex: 1;
    min-width: 0;
}
.dh-payment-method-btn .dh-pm-title {
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 1.25;
    font-family: inherit;
    overflow-wrap: anywhere;
}
.dh-payment-method-btn .dh-pm-desc {
    font-size: 0.7rem;
    margin: 0.2rem 0 0;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    font-family: inherit;
    overflow-wrap: anywhere;
}
.dh-payment-method-btn .dh-pm-extra {
    font-size: 0.7rem;
    margin: 0.2rem 0 0;
    opacity: 0.95;
    font-family: inherit;
    overflow-wrap: anywhere;
}

.dh-payment-method-btn .dh-pm-chevron {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.7;
}
.dh-payment-method-btn:hover .dh-pm-chevron {
    opacity: 1;
}

/* Inline 'discount' tag inside title */
.dh-discount-tag {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.9;
    margin-left: 0.4rem;
    letter-spacing: 0.05em;
}

/* Corner discount badge */
.dh-discount-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    padding: 0.15rem 0.45rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.dh-payment-method-btn:hover .dh-discount-badge {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Crypto network rows reuse .dh-payment-method-btn but smaller */
.dh-payment-method-btn--compact {
    padding: 0.7rem 0.75rem;
    gap: 0.75rem;
}
.dh-payment-method-btn--compact .dh-pm-icon {
    width: 2.4rem;
    height: 2.4rem;
}
.dh-payment-method-btn--compact .dh-pm-title {
    font-size: 0.85rem;
}
.dh-payment-method-btn--compact .dh-pm-amount {
    font-size: 0.75rem;
    text-align: right;
    flex-shrink: 0;
    opacity: 0.9;
    font-family: inherit;
    overflow-wrap: anywhere;
}

/* DH-balance insufficient: disabled row + topup-via-support link */
.dh-pm-insufficient-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dh-pm-topup-link {
    align-self: flex-end;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    opacity: 0.85;
    text-decoration: underline;
    padding: 0.3rem 0.2rem;
}
.dh-pm-topup-link:hover,
.dh-pm-topup-link:focus-visible {
    opacity: 1;
    outline: none;
}

/* Empty/loading states inside payment modals */
.dh-payment-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}
.dh-payment-error {
    text-align: center;
    padding: 1rem;
    color: var(--text-primary);
    border: 2px dashed var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .dh-payment-modal-body { padding: 1rem 0.75rem; }
    .dh-payment-method-btn { padding: 0.7rem 0.75rem; gap: 0.75rem; }
    .dh-payment-method-btn .dh-pm-icon { width: 2.4rem; height: 2.4rem; }
    .dh-payment-method-btn .dh-pm-title { font-size: 0.8rem; }
    .dh-payment-method-btn .dh-pm-desc,
    .dh-payment-method-btn .dh-pm-extra { font-size: 0.65rem; }
    .dh-payment-total__amount { font-size: 1.3rem; }
}

/* Light theme contrast for cart bonus (game wallet) banner */
html.light-theme .cart-game-wallet-row {
    color: #1a4d2e;
    background: rgba(46, 125, 50, 0.12);
    border-color: rgba(26, 77, 46, 0.55);
}
html.light-theme .cart-game-wallet-row strong {
    color: #0e3b1f;
}
html.light-theme .cart-game-wallet-row .ttl {
    color: #1a4d2e;
    opacity: 0.85;
}

/* Light theme contrast for cart TOTAL label/value */
html.light-theme #cart-total-label,
html.light-theme #cart-total-label.terminal-text-dim {
    color: #111111;
    font-weight: 700;
}
html.light-theme #cart-total {
    color: #111111;
    font-weight: 700;
}

/* Task L 2026-05-11: enlarge privacy consent hit-zone on desktop
   (custom cursor on PC is bigger than tiny native checkbox) */
@media (min-width: 768px) {
    #privacy-container-domestic,
    #privacy-container-international {
        cursor: pointer;
        padding: 14px;
        min-height: 56px;
        transition: background-color 0.15s ease;
    }
    #privacy-container-domestic:hover,
    #privacy-container-international:hover {
        background-color: var(--bg-tertiary) !important;
    }
    #privacy-accepted,
    #international-privacy-accepted {
        width: 22px;
        height: 22px;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 0;
    }
    #privacy-container-domestic > label[for="privacy-accepted"],
    #privacy-container-international > label[for="international-privacy-accepted"] {
        cursor: pointer;
        flex: 1 1 0%;
        padding: 2px 0;
        font-size: 0.85rem;
    }
}

/* Privacy checkbox: keep native browser appearance so the checkmark draws
   in the visible default color. Previous `accent-white` made the tick draw
   white on a light background — the box border changed on tap but the
   tick was invisible, so users thought tapping did nothing. */
#privacy-accepted,
#international-privacy-accepted {
    accent-color: #111 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
}

/* Mobile: native checkbox renders at 13×13 — too small for a finger tap, users
   miss the hit-area entirely. Enlarge to 22×22 + give the whole label a vertical
   padding so any tap inside the container toggles the box. */
@media (max-width: 767.98px) {
    #privacy-accepted,
    #international-privacy-accepted {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 0;
    }
    #privacy-container-domestic,
    #privacy-container-international {
        align-items: center !important;
        min-height: 56px;
    }
    #privacy-container-domestic > label[for="privacy-accepted"],
    #privacy-container-international > label[for="international-privacy-accepted"] {
        flex: 1 1 0%;
        padding: 8px 0;
    }
}

/* Checkout delivery-method buttons: lock font-size so iOS Safari & Chromium
   mobile text-autosizer don't blow up the selected/bold one
   (iPhone reported "Курьер по Москве" rendering ~1.7× the others).
   `text-size-adjust: none` fully disables the autosizer; the inline `<span>`
   inherits via `* { font-size: inherit }`. */
#delivery-method-container,
#catalog-delivery-method-container,
#delivery-method-container button,
#catalog-delivery-method-container button,
[id^="method-btn-"] {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}
#delivery-method-container button,
#catalog-delivery-method-container button,
[id^="method-btn-"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
}
#delivery-method-container button > *,
#catalog-delivery-method-container button > *,
[id^="method-btn-"] > * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Yandex.Доставка widget: hide eta/price line for points where the widget
   wrote "Не удалось рассчитать ...". JS tags those nodes with
   data-yax-hide-eta="1"; nodes without the attribute (successful pricing) stay. */
#yandex-map-container [data-yax-hide-eta="1"] {
    display: none !important;
}

/* Inline validation error under a field: clamp font-size so iOS Safari
   autosizer cannot re-render it as a chunky label that visually duplicates
   the actual <label> above the input. */
.field-error {
    font-size: 10px !important;
    line-height: 1.3 !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}


/* Yandex.Доставка widget container: mobile = 420px (inline style),
   desktop ≥1024px = 600px (more room without overflow into next element).
   Without this, 600px on mobile makes the map+copyright overlap the
   "Не нашли пункт..." toggle below. */
@media (min-width: 1024px) {
    #yandex-map-container {
        height: 600px !important;
    }
}

/* Yandex.Доставка widget paints its internal `.widget__wrapper` / `.widget__map`
   well past the 420px container on mobile (measured: ~813px bleed). That overflow
   visually covers the "Не нашли пункт..." toggle button below. Clip it. */
#yandex-map-container {
    overflow: hidden;
}

/* Yandex.Доставка widget detects prefers-color-scheme: dark and switches its
   text to color:rgba(255,255,255,0.85), but leaves the white card backgrounds
   intact → white-on-white in dark mode. Diagnosed live with Puppeteer +
   Moscow SOCKS in /work/shop/chat/Скрин/yax_widget_diagnose_20260515/.

   Earlier v2 used `#yandex-map-container .widget__content *` which was too
   broad — it also caught .widget__marker-count (cluster count badges that
   visually live on the map but DOM-wise are inside .widget__content), turning
   their white digits dark on dark circles → invisible (markers looked like
   thin black slivers, see TG screenshot 2026-05-15 17:53). Narrow to the
   exact text-bearing classes the widget uses on white cards, leave markers,
   buttons, and SVG/Yandex Maps elements alone. */
/* Sidebar/list classes that DO live inside #yandex-map-container on desktop. */
#yandex-map-container .widget__filters-title-text,
#yandex-map-container .widget__filters-item-title,
#yandex-map-container .widget__filters-radio-title,
#yandex-map-container .widget__start-title,
#yandex-map-container .widget__start-desc,
#yandex-map-container .widget__location-title,
#yandex-map-container .widget__location-desc,
#yandex-map-container .widget__location-detail,
#yandex-map-container .widget__location-detail-span,
#yandex-map-container .widget__location-content,
#yandex-map-container .widget__location-lead,
#yandex-map-container .widget__location-faq,
#yandex-map-container .ydw-point-desc {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* On mobile the widget hoists its header/form/input OUT of #yandex-map-container
   to the top of the modal (verified live with Puppeteer mobile viewport, see
   /work/shop/chat/Скрин/yax_test_base_20260515/global_search_input_full.png).
   Match these classes globally — `widget__` namespace is unique to the Yandex
   widget, no collision with our own styles. Keep the provider's light field
   paired with dark text after its search rerender in both site themes. */
.widget__input,
input.widget__input,
.widget__input--search {
    background: rgb(245, 244, 242) !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    color: rgba(0, 0, 0, 0.85) !important;
    caret-color: rgba(0, 0, 0, 0.85) !important;
}

.widget__input:focus,
input.widget__input:focus,
.widget__input--search:focus,
html.light-theme .widget__input:focus,
html.light-theme input.widget__input:focus,
html.light-theme .widget__input--search:focus {
    background: rgb(245, 244, 242) !important;
    border-color: rgba(0, 0, 0, 0.55) !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.85) !important;
    caret-color: rgba(0, 0, 0, 0.85) !important;
}

.widget__header,
.widget__form,
.widget__form-item,
.widget__title-text,
.widget__title-text-second,
.widget__label-text {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* Address input placeholder («Москва») — browsers paint placeholder with
   reduced opacity by default, force readable contrast on the white field. */
.widget__input::placeholder,
input.widget__input::placeholder,
.widget__input--search::placeholder {
    color: rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
}

/* Cluster count badges (.widget__marker-count) collapse to ~4px width on our
   site — verified live with Puppeteer mobile viewport (size=4x40, see
   /work/shop/chat/Скрин/yax_test_base_20260515/markers_after_load_inspect.json).
   The wildcard `#yandex-map-container [class*="widget__"] { max-width: 100% }`
   from the BUG-10 mobile clip rule strips the natural width set by the widget,
   leaving only the digit width. Force a circular pill shape with a sane min
   size — Yandex's intended design is a ~32px round badge with white digit on
   dark grey (rgb(87,89,92), already correct via widget's own color rules). */
.widget__marker-count {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

/* Hide the widget's native yellow "Продолжить" CTA — we auto-commit selection
   via JS so the user never sees/uses it.
   Off-screen-in-layout (position:absolute + left/top:-9999px) instead of
   `display:none` so the widget's Vue renderer still hydrates the button and
   its click handler can commit selection programmatically. offsetParent stays
   valid because position:absolute resolves to the nearest positioned ancestor.
   Selector is NOT scoped to #yandex-map-container because on iPhone the widget
   may render the CTA inside a floating overlay portal at body level. Globally
   scoping the class catches all locations. JS fallback in attachYandexWidget-
   Helpers re-applies these styles via setProperty(important) for the case
   where the widget overrides them with its own inline styles. */
button.widget__map-button,
.widget__map-button,
[class*="map-button"]:not(.widget__map-back) {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* Mobile fix: Yandex.Доставка checkout block UX (BUG-10, 2026-05-15).
   On mobile the embedded widget's address card / popup escapes the 420px
   container and visually overlaps the contact form below it. Keep map
   container constrained, reduced height, and ensure widget popups stay
   inside. Manual entry is now opt-in via the toggle button on both mobile
   and desktop. */
@media (max-width: 768px) {
    #yandex-map-container {
        height: 320px !important;
    }
    /* Constrain anything inside the widget so floating popups stay within
       the 100% width of the container (widget__ classes are Yandex-internal). */
    #yandex-map-container [class*="widget__"] {
        max-width: 100% !important;
    }
}

/* Manual address entry toggle button — prominent action style shared by
   the CDEK and Yandex PVZ blocks. Looks like a clear secondary button so
   users notice they can switch to manual entry instead of map selection. */
.pvz-manual-toggle-btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-dim);
    background: var(--bg-tertiary);
    color: var(--text-primary, #fff);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.pvz-manual-toggle-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent, #d4af37);
}
.pvz-manual-toggle-btn:active {
    transform: translateY(1px);
}

/* BUG-10 v2 (2026-05-15): Yandex.Доставка widget overlay escapes #yandex-map-container on iPhone.
   Probe (390x844 viewport) found .widget__header at position:absolute; top:618px; z-index:4 —
   it floats over the contact form above the delivery section. .widget__content has hardcoded
   min/max-width:400px which overflows a 390px viewport. Force the inner widget back into normal
   flow on mobile: clip overflow on container, stack wrapper vertically, full-width content,
   static header. Desktop layout unchanged (the existing @media (min-width:1024px) row-layout
   still applies). */
@media (max-width: 768px) {
    #yandex-map-container {
        overflow: hidden !important;
        position: relative !important;
    }
    #yandex-map-container .widget__wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #yandex-map-container .widget__content {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #yandex-map-container .widget__header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
    }
}

/* BUG-10 v4 (2026-05-15): final mobile layout for Yandex.Доставка.
   The widget__header (SDK search panel) is moved OUTSIDE #yandex-map-container
   via JS (forceHeaderAboveMap), so it sits as a sibling between the info banner
   and the map container in normal flow. Compress info banner font and shrink the
   map container so the map fills it without the 88px sidebar gap. */
@media (max-width: 768px) {
    /* Smaller info banner so we don't double up on text density */
    #yandex-delivery-block > p:first-of-type {
        font-size: 9px !important;
        line-height: 1.35 !important;
        padding: 6px 8px !important;
    }
    /* Map-only container — header lives outside it now */
    #yandex-map-container {
        height: 260px !important;
    }
    /* Collapse the SDK's reserved sidebar padding so the map starts at the top */
    #yandex-map-container .ydw-widget,
    #yandex-map-container .widget__wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* widget__header outside the container: give it the same border treatment
       as our other dashed-info chips so it visually belongs to the delivery section */
    #yandex-delivery-block > .widget__header {
        margin: 0 0 8px 0 !important;
        border-radius: 8px !important;
        max-width: 100% !important;
    }
}

/* BUG-10 v5 (2026-05-15): "Изменить" button on the green PVZ confirmation panel
   was not clickable after selecting a pickup point — the modal backdrop
   (.absolute inset-0 bg-black/90 inside #payment-modal) ended up on top in
   the stacking order on mobile after Yandex SDK rendered the PVZ detail panel.
   Force our confirmation box (with the Изменить button) to a higher z-index
   than the backdrop and explicitly allow pointer events. */
#yandex-selected-point {
    position: relative !important;
    z-index: 70 !important;
}
#yandex-selected-point,
#yandex-selected-point * {
    pointer-events: auto !important;
}

/* BUG-10 v6 (2026-05-15): iOS Safari tap on the Izmenit button registered as
   hover (because of class "hover:opacity-70") instead of click on first tap.
   touch-action: manipulation tells the browser this element doesn't need
   double-tap zoom — first tap = click. */
#yandex-selected-point button {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* BUG-10 v7 (2026-05-15): kill hover:opacity-70 visual state on mobile.
   iOS Safari interprets the first tap on a button with :hover styles as
   "show hover state" instead of firing the click. Force opacity:1
   regardless of state on ≤768px. */
@media (max-width: 768px) {
    #yandex-selected-point button,
    #yandex-selected-point button:hover,
    #yandex-selected-point button:active,
    #yandex-selected-point button:focus {
        opacity: 1 !important;
    }
}

html.input-focused #global-bg *,
html.input-focused .global-animated-bg * {
    animation-play-state: paused !important;
}

/* Cases nav accent (QA 2026-10-01): пункт «Кейсы» в общем меню должен
   быть заметным и цветным, особенно в мобильном бургер-меню главной. */
#nav-cases {
    color: #13b875 !important;
    border: 1px solid rgba(53, 224, 141, 0.58);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: linear-gradient(135deg,
        rgba(53, 224, 141, 0.14),
        rgba(255,255,255,0.02));
    box-shadow: 0 0 18px -12px #35e08d;
}
#nav-cases > span,
#nav-cases span {
    color: inherit !important;
}
#nav-cases:hover {
    color: var(--text-primary, #fff) !important;
    background: rgba(53, 224, 141, 0.18);
    box-shadow: 0 0 22px -10px #35e08d;
}
#mobile-nav-cases {
    color: #13b875 !important;
    border: 1px solid rgba(53, 224, 141, 0.52);
    border-left: 3px solid #35e08d;
    border-radius: 10px;
    padding: 0.62rem 0.85rem !important;
    margin: 0.2rem 0;
    background: linear-gradient(90deg,
        rgba(53, 224, 141, 0.16),
        rgba(255,255,255,0.015));
    box-shadow: 0 0 18px -12px #35e08d;
    font-weight: 800;
    letter-spacing: 0.04em;
}
#mobile-nav-cases::after {
    content: 'DROP';
    float: right;
    font-size: 0.68rem;
    line-height: 1.35;
    padding: 0.08rem 0.38rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: 0.82;
}
#mobile-nav-cases:hover {
    color: var(--text-primary, #fff) !important;
    background: rgba(53, 224, 141, 0.20);
}


/* R1 shared navigation geometry: the badge belongs to the cart hitbox and grows
   inward for multi-digit counts instead of overlapping the adjacent avatar. */
[data-nav-controls] [data-cart-control] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
    min-height: 2.75rem;
}
[data-nav-controls] [data-cart-count] {
    top: 0;
    right: 0;
    width: auto !important;
    min-width: 1.25rem;
    padding-inline: .25rem;
    line-height: 1.25rem;
    white-space: nowrap;
    pointer-events: none;
}
[data-nav-controls] #user-menu-container {
    display: flex;
    align-items: center;
}
[data-nav-controls] [data-user-avatar-control] {
    display: inline-flex;
    flex: 0 0 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
    min-height: 2.75rem;
}
@media (max-width: 767px) {
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] {
        column-gap: .25rem !important;
    }
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] [data-cart-control],
    html nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] [data-user-avatar-control] {
        padding-inline: .5rem !important;
    }
}


/* R18 deliberate two-row mobile header: utility actions and the navigation
   controls use intentional rows at phone widths.  The existing PRO/game
   stack occupies the upper nav area; the five primary actions stay together
   in one 44px row.  Cases keep their established premium geometry. */
@media (max-width: 479px) {
    html body:not(.cases-premium-skin) {
        --r18-utility-height: 2.75rem;
        --r18-nav-height: 7rem;
    }
    html body.shop-home:not(.cases-premium-skin) {
        --r18-utility-height: 5.5rem;
    }
    html body:not(.cases-premium-skin) #utility-bar > div {
        box-sizing: border-box;
        padding-inline: .5rem;
    }
    html body:not(.cases-premium-skin) #utility-bar > div > div {
        display: flex;
        height: var(--r18-utility-height);
        min-height: var(--r18-utility-height);
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: center !important;
        column-gap: 0 !important;
    }
    html body:not(.cases-premium-skin) #utility-bar > div > div > :not([hidden]) ~ :not([hidden]),
    html body:not(.cases-premium-skin) #utility-bar .space-x-1 > :not([hidden]) ~ :not([hidden]),
    html body:not(.cases-premium-skin) #utility-bar #currency-switcher > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body:not(.cases-premium-skin) #utility-bar .space-x-1,
    html body:not(.cases-premium-skin) #utility-bar #currency-switcher {
        display: flex;
        width: auto;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        column-gap: 0 !important;
    }
    html body:not(.cases-premium-skin) #utility-bar button:not(.hidden) {
        display: inline-flex;
        box-sizing: border-box;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        flex: 0 0 2.75rem;
        align-items: center;
        justify-content: center;
        padding: .25rem !important;
    }

    /* Home owns an extra seller/Orvelix action.  Keep the intended mobile
       control only and give it a separate row instead of stealing width from
       the eight language/currency touch targets. */
    html body.shop-home:not(.cases-premium-skin) #utility-bar > div > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, 2.75rem);
        justify-items: center;
    }
    html body.shop-home:not(.cases-premium-skin) #nav-sellers-btn-desktop {
        display: none !important;
    }
    html body.shop-home:not(.cases-premium-skin) #nav-sellers-btn-bar-mobile {
        grid-row: 1;
        width: max-content;
        max-width: 100%;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        flex: 0 0 auto;
        justify-self: center;
        padding-inline: .75rem !important;
        overflow: visible;
        white-space: nowrap;
    }
    html body.shop-home:not(.cases-premium-skin) #utility-bar > div > div > div:last-child {
        display: flex !important;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: center;
        column-gap: 0 !important;
    }
    html body.shop-home:not(.cases-premium-skin) #utility-bar > div > div > div:last-child > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] {
        top: var(--r18-utility-height) !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-row] {
        position: relative;
        display: block !important;
        box-sizing: border-box;
        height: var(--r18-nav-height) !important;
        min-height: var(--r18-nav-height);
        padding-block: .5rem;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-row] > :first-child {
        position: absolute;
        top: .5rem;
        left: 0;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        flex: none !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-brand] {
        width: 2.75rem;
        max-width: 2.75rem;
        height: 2.75rem;
        margin: 0 !important;
        overflow: hidden;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] #site-name-nav {
        display: none !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] {
        position: absolute;
        right: 0;
        bottom: .5rem;
        left: 0;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(2.75rem, 1fr));
        width: 100% !important;
        height: 2.75rem;
        min-width: 0 !important;
        margin: 0 !important;
        align-items: center;
        justify-items: center;
        gap: .25rem !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > :not([hidden]) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > button,
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > a,
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > #user-menu-container,
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] [data-user-avatar-control] {
        box-sizing: border-box;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        padding-inline: 0 !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .navbar-pro-wallet-stack {
        position: absolute;
        right: 0;
        bottom: calc(100% + .5rem);
        width: min(13.5rem, calc(100% - 3.25rem));
        gap: .25rem;
        margin: 0;
        z-index: 1;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .navbar-pro-btn,
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .navbar-pro-badge,
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .game-wallet-badge {
        box-sizing: border-box;
        height: 2.75rem;
        min-height: 2.75rem;
        padding-block: 0;
        font-size: .8125rem;
        line-height: 1.2;
    }
    html body:not(.cases-premium-skin):has(.navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) {
        --r18-nav-height: 10rem;
    }

    html body:not(.cases-premium-skin) > nav[data-ui-nav][data-nav-fit-capable] ~ main,
    html body:not(.cases-premium-skin) > nav[data-ui-nav][data-nav-fit-capable] ~ .cticker-slot {
        padding-top: calc(var(--r18-utility-height, 2.75rem) + var(--r18-nav-height, 7rem) + 2.75rem) !important;
    }
    html body:not(.cases-premium-skin) .info-marquee:not(.info-marquee--under-nav) {
        top: calc(var(--r18-utility-height, 2.75rem) + var(--r18-nav-height, 7rem)) !important;
    }
    html body:not(.cases-premium-skin) .info-marquee:not(.info-marquee--under-nav) ~ main,
    html body:not(.cases-premium-skin) .info-marquee:not(.info-marquee--under-nav) ~ .cticker-slot {
        padding-top: calc(var(--r18-utility-height, 2.75rem) + var(--r18-nav-height, 7rem) + 2.75rem) !important;
    }
    html body:not(.cases-premium-skin) #mobile-menu[data-ui-menu] {
        --mobile-menu-top: calc(var(--r18-utility-height, 2.75rem) + var(--r18-nav-height, 7rem));
        max-height: calc(100dvh - var(--r18-utility-height, 2.75rem) - var(--r18-nav-height, 7rem));
    }
    html body:not(.cases-premium-skin) #mobile-menu[data-nav-fit-menu]:not([data-ui-menu]) {
        max-height: calc(100dvh - var(--r18-utility-height, 2.75rem) - var(--r18-nav-height, 7rem));
    }
}

/* Three language controls plus five currency controls need 352px before the
   shell padding.  Below 368px each group gets its own centered utility row. */
@media (max-width: 367px) {
    html body:not(.cases-premium-skin) {
        --r18-utility-height: 5.5rem;
    }
    html body.shop-home:not(.cases-premium-skin) {
        --r18-utility-height: 8.25rem;
    }
    html body:not(.shop-home):not(.cases-premium-skin) #utility-bar > div > div {
        flex-wrap: wrap;
    }
    html body:not(.shop-home):not(.cases-premium-skin) #utility-bar .space-x-1,
    html body:not(.shop-home):not(.cases-premium-skin) #utility-bar #currency-switcher {
        width: 100%;
        height: 2.75rem;
        flex: 0 0 100%;
    }
    html body.shop-home:not(.cases-premium-skin) #utility-bar > div > div {
        grid-template-rows: repeat(3, 2.75rem);
    }
    html body.shop-home:not(.cases-premium-skin) #utility-bar > div > div > div:last-child {
        display: grid !important;
        grid-row: 2 / span 2;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, 2.75rem);
        justify-items: center;
    }
    html body.shop-home:not(.cases-premium-skin) #utility-bar .space-x-1,
    html body.shop-home:not(.cases-premium-skin) #utility-bar #currency-switcher {
        width: 100%;
        height: 2.75rem;
        justify-content: center;
    }
}


/* R19 visible-wallet non-phone containment. The segmented stack is two
   44px controls plus its 4px gap, so capable headers reserve exactly 92px
   whenever the authenticated wallet row is visible. */
@media (min-width: 480px) {
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) {
        --r19-nav-top: 2.25rem;
        --r19-nav-height: 5.75rem;
        --r19-marquee-height: 2.75rem;
    }
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) nav[data-ui-nav][data-nav-fit-capable] {
        top: var(--r19-nav-top) !important;
    }
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) nav[data-ui-nav][data-nav-fit-capable] [data-nav-row] {
        height: var(--r19-nav-height) !important;
        min-height: var(--r19-nav-height);
    }
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) .info-marquee:not(.info-marquee--under-nav) {
        top: calc(var(--r19-nav-top) + var(--r19-nav-height)) !important;
    }
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) > nav[data-ui-nav][data-nav-fit-capable] ~ main,
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) > nav[data-ui-nav][data-nav-fit-capable] ~ .cticker-slot,
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) .info-marquee:not(.info-marquee--under-nav) ~ main,
    html body:not(.cases-premium-skin):has(nav[data-ui-nav][data-nav-fit-capable] .navbar-pro-wallet-stack #game-wallet-badge:not([hidden])) .info-marquee:not(.info-marquee--under-nav) ~ .cticker-slot {
        padding-top: calc(var(--r19-nav-top) + var(--r19-nav-height) + var(--r19-marquee-height)) !important;
    }

    /* The compact menu is one of the five primary header actions. Keep its
       real hit target at 44px; desktop-fit mode can still hide it normally. */
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .mobile-menu-btn {
        box-sizing: border-box;
        width: 2.75rem !important;
        min-width: 2.75rem;
        height: 2.75rem !important;
        min-height: 2.75rem;
        padding: 0 !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="compact"] [data-nav-controls] .mobile-menu-btn {
        display: inline-grid !important;
        place-items: center;
    }
}

/* Cases deliberately keep their wallet-hidden 64px header. Its existing
   compact row fits at 390px once the menu target is 44px and the three
   inter-control gaps are reduced from 6px to 2px. */
@media (max-width: 480px) {
    html body.cases-premium-skin nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] {
        gap: .125rem !important;
        column-gap: .125rem !important;
        max-width: calc(100% - 2.5rem);
    }
    html body.cases-premium-skin nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] .mobile-menu-btn {
        box-sizing: border-box;
        width: 2.75rem !important;
        min-width: 2.75rem;
        height: 2.75rem !important;
        min-height: 2.75rem;
        padding: 0 !important;
    }
    html body.cases-premium-skin nav[data-ui-nav][data-nav-fit-capable][data-nav-fit="compact"] [data-nav-controls] .mobile-menu-btn {
        display: inline-grid !important;
        place-items: center;
    }
}


/* R20 cases light PRO action contrast. The cases skin makes every span
   inherit its button color; restore the buy segment's intended ivory ink
   without changing dark cases or the active disabled PRO treatment. */
html.light-theme body.cases-premium-skin nav.nav-blur #navbar-pro-btn .navbar-pro-action {
    color: #f7f7f2 !important;
}

/* R20 compact 480-767 primary target completion. Genuine 480px geometry has
   five 4px gaps: reducing them to 1px recovers 15px, enough to grow search
   from 30px to 44px without shrinking the PRO/wallet stack or wrapping. */
@media (min-width: 480px) and (max-width: 767px) {
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] {
        gap: 1px !important;
        column-gap: 1px !important;
        flex-wrap: nowrap !important;
    }
    html body:not(.cases-premium-skin) nav[data-ui-nav][data-nav-fit-capable] [data-nav-controls] > button[onclick="openSearch()"] {
        box-sizing: border-box;
        width: 2.75rem !important;
        min-width: 2.75rem;
        height: 2.75rem !important;
        min-height: 2.75rem;
        padding: 0 !important;
    }
}


/* Separate resale announcement identity; existing seller/Orvelix treatments stay untouched. */
.dh-resale-link {
    background: linear-gradient(100deg, #7c3aed 0%, #d946ef 48%, #a3e635 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 .7rem color-mix(in srgb, #d946ef 30%, transparent);
    animation: dh-resale-gradient 3.6s ease-in-out infinite alternate;
}
@keyframes dh-resale-gradient {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
.dh-resale-page {
    min-height: calc(100vh - 12rem);
    display: grid;
    place-items: center;
    padding: clamp(8rem, 18vh, 12rem) 1rem 5rem;
}
.dh-resale-card {
    width: min(100%, 48rem);
    padding: clamp(1.5rem, 5vw, 4rem);
    border: 1px solid var(--border-dim);
    background: color-mix(in srgb, var(--bg-primary) 94%, var(--text-primary) 6%);
    text-align: center;
}
.dh-resale-card h1 { margin: 0 0 1rem; font-size: clamp(1.7rem, 5vw, 3.5rem); }
.dh-resale-card p { margin: .75rem auto 0; max-width: 40rem; color: var(--text-dim); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.65; }

/* R8 semantic readability: shared account/menu and resale secondary roles only. */
#user-dropdown .terminal-text-dim,
[data-nav-fit-menu] .terminal-text-dim {
    font-size: 0.875rem;
}
#user-dropdown .terminal-text-dim,
.dh-resale-card > p:not(.dh-resale-link) {
    color: #b8b8b8;
    font-weight: 500;
}
html.light-theme #user-dropdown .terminal-text-dim,
html.light-theme .dh-resale-card > p:not(.dh-resale-link) {
    color: #4a4a4a;
}
@media (prefers-reduced-motion: reduce) {
    .dh-resale-link { animation: none; background-position: 50% 50%; }
}

/* Catalog footer: keep branding readable and navigation targets aligned. */
.dh-catalog-footer { padding-block: 24px; }
.dh-catalog-footer .dh-catalog-footer__top { align-items: flex-start; }
.dh-catalog-footer .dh-catalog-footer__brand { flex: 1 1 0; min-width: 0; }
.dh-catalog-footer #site-description-footer {
    max-width: 44rem;
    overflow-wrap: anywhere;
    line-height: 1.6;
}
.dh-catalog-footer .dh-catalog-footer__nav { flex: 0 0 auto; }
.dh-catalog-footer #footer-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
    padding: 8px 16px;
    white-space: nowrap;
}
.dh-catalog-footer .dh-catalog-footer__payments { margin-block: 16px; }
.dh-catalog-footer .dh-catalog-footer__onion { padding-top: 0; margin-top: 8px; }
.dh-catalog-footer .dh-catalog-footer__copyright { padding-top: 16px; margin-top: 16px; }
@media (max-width: 767px) {
    .dh-catalog-footer .dh-catalog-footer__top { align-items: center; }
    .dh-catalog-footer .dh-catalog-footer__brand { flex-basis: auto; }
}

/* Readable copy only: keep shared decorative and disabled-state dim colors. */
.mega-menu-title, .mega-submenu-link, .tab-btn, .back-to-shop,
.sidebar-price-display, .pdp-color-link, .pdp-size-tile__stock,
.notify-explain__dest, .notify-choice-title, .notify-explain__none,
.notify-subscribed-detail, .pdp-preorder__note, .pdp-preorder__hint,
.promo-popup-desc, .promo-popup-hurry, .dh-payment-total__old,
.dh-payment-total__stars, .dh-payment-empty, .dh-resale-card p,
p.terminal-text-dim, span.terminal-text-dim, a.terminal-text-dim,
label.terminal-text-dim, small.terminal-text-dim,
.pdp-info .pdp-condition-rating__label {
    color: var(--text-muted-readable);
    font-weight: 600;
}