/* ZONES Gaming v2.0 */

:root {
    --bg-deep: #000000;
    --bg-base: #050505;
    --bg-card: #0a0a0a;
    --bg-elevated: #131313;
    --bg-hover: #1a1a1a;
    --bg-overlay: rgba(0, 0, 0, 0.92);
    --bg-product: #0a1820;
    --bg-product-dark: #050b14;

    /* CYAN ACCENT - matching logo */
    --accent: #5dd5e8;
    --accent-bright: #7df5ff;
    --accent-deep: #3a8bbf;
    --accent-dark: #001824;
    --accent-glow: rgba(93, 213, 232, 0.5);
    --accent-soft: rgba(93, 213, 232, 0.15);
    --accent-bg: rgba(93, 213, 232, 0.05);

    --rgb-pink: #ff0080;
    --rgb-cyan: #00ffff;
    --rgb-orange: #ff8000;
    --rgb-purple: #a020f0;

    --warning: #ef9f27;
    --danger: #ff4757;

    --text: #e8eaed;
    --text-bright: #ffffff;
    --text-muted: #98a4b3;
    --text-dim: #5a6478;

    --border: rgba(93, 213, 232, 0.15);
    --border-bright: rgba(93, 213, 232, 0.5);
    --border-subtle: rgba(255, 255, 255, 0.05);

    --font-display: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --container-width: 1440px;
    --container-pad: 32px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #000000;
    color: var(--text);
    font-family: var(--font-body); font-size: 15px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-bright); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display); font-weight: 700; line-height: 1.2;
    margin: 0 0 16px; color: var(--text-bright); letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }

/* Section titles with cyan glow like logo */
.zones-section-title,
.zones-shop-title,
.zones-product-title {
    color: var(--accent-bright);
    text-shadow:
        0 0 20px var(--accent-glow),
        0 0 40px rgba(93, 213, 232, 0.2);
    font-weight: 300;
    letter-spacing: 0.05em;
}
p { margin: 0 0 16px; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }

.zones-container {
    max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-pad);
}

/* UTILITY BAR */
.zones-utility-bar {
    background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 50%, var(--accent-bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-muted);
}
.zones-utility-bar .zones-container {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.zones-utility-left, .zones-utility-right {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.zones-utility-right a { color: var(--text-muted); font-size: 12px; }
.zones-utility-right a:hover { color: var(--accent); }
.zones-status {
    display: flex; align-items: center; gap: 6px;
    color: var(--accent-bright); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px;
    text-shadow: 0 0 8px var(--accent-glow);
}
.zones-status-dot {
    width: 6px; height: 6px; background: var(--accent-bright); border-radius: 50%;
    animation: zones-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 12px var(--accent-bright);
}
.zones-utility-sep { color: rgba(255, 255, 255, 0.15); }

/* HEADER */
.zones-site-header {
    background: rgba(5, 8, 16, 0.85);
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.zones-header-main {
    padding: 16px 0;
}
.zones-header-main .zones-container {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 56px;
}
.zones-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: var(--transition);
    height: 56px;
}
.zones-logo:hover { transform: scale(1.02); }
.zones-logo .logo-svg {
    width: auto;
    height: 56px;
    max-height: 56px;
    filter: drop-shadow(0 0 16px rgba(93, 213, 232, 0.3));
    display: block;
}
.zones-logo .logo-png {
    width: auto;
    height: 56px;
    max-height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(93, 213, 232, 0.4));
    display: block;
}
.zones-logo .custom-logo {
    max-height: 56px;
    width: auto;
    display: block;
}

.zones-primary-nav { display: flex; align-items: center; flex: 1; }
.zones-primary-nav ul {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.zones-primary-nav > ul > li > a {
    color: var(--text-bright);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition);
}
.zones-primary-nav > ul > li > a:hover {
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-primary-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.3s ease;
}
.zones-primary-nav > ul > li > a:hover::after { width: 100%; }

/* Gaming highlight */
.zones-primary-nav > ul > li.gaming > a {
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-primary-nav > ul > li.gaming > a::after {
    width: 100%;
    opacity: 0.5;
}

/* PC Builder - same outlined style as Contacts */
.zones-primary-nav > ul > li.nav-builder > a {
    color: var(--accent-bright);
    background: transparent;
    padding: 0 16px;
    height: 40px;
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: none;
    text-shadow: 0 0 12px var(--accent-glow);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    line-height: 1;
}
.zones-primary-nav > ul > li.nav-builder > a:hover {
    color: var(--accent-bright);
    background: rgba(93, 213, 232, 0.1);
    border-color: var(--accent-bright);
    box-shadow: 0 0 16px var(--accent-glow);
    transform: none;
    text-shadow: 0 0 16px var(--accent-bright);
}
.zones-primary-nav > ul > li.nav-builder > a::after {
    display: none;
}

/* Same for Contacts - ensure consistency */
.zones-primary-nav > ul > li.nav-contact > a {
    color: var(--accent-bright);
    padding: 0 16px;
    height: 40px;
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.zones-primary-nav > ul > li.nav-contact > a:hover {
    background: rgba(93, 213, 232, 0.1);
    border-color: var(--accent-bright);
    box-shadow: 0 0 16px var(--accent-glow);
    text-shadow: 0 0 16px var(--accent-bright);
}
.zones-primary-nav > ul > li.nav-contact > a::after {
    display: none;
}

.zones-search {
    flex: 0 0 auto;
    width: 280px;
    position: relative;
    padding: 2px;
    border-radius: 12px;
    isolation: isolate;
    overflow: hidden;
}

@keyframes search-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.zones-search::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d
    );
    animation: search-border-rotate 8s linear infinite;
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.4s;
}

.zones-search:hover::before,
.zones-search:focus-within::before {
    opacity: 1;
    animation-duration: 4s;
}

.zones-search form {
    position: relative;
    z-index: 2;
    margin: 0;
}

.zones-search input {
    width: 100%;
    height: 40px;
    background: #060a14;
    border: none;
    color: var(--text-bright);
    padding: 0 16px 0 44px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: var(--transition);
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(93, 213, 232, 0.2);
    box-sizing: border-box;
}
.zones-search input::placeholder { color: var(--text-dim); }
.zones-search input:focus {
    background: #0a1018;
    box-shadow:
        inset 0 0 0 1px var(--accent-bright),
        0 0 16px var(--accent-glow);
}
.zones-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-bright);
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

.zones-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.zones-header-icon {
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    background: transparent;
    transition: var(--transition);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.zones-header-icon:hover {
    background: rgba(93, 213, 232, 0.1);
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    box-shadow: 0 0 16px var(--accent-glow);
    filter: drop-shadow(0 0 12px var(--accent-bright));
}
.zones-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 0 12px var(--accent-glow), 0 0 0 2px #000;
    border: 1px solid var(--accent-bright);
}

/* TICKER */
.zones-ticker {
    background:
        linear-gradient(180deg, rgba(10, 20, 36, 0.85) 0%, rgba(5, 10, 20, 0.95) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: stretch;
}

/* LIVE Badge - left side */
.zones-ticker-live-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff2d55 0%, #ff4757 100%);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.18em;
    position: relative;
    z-index: 3;
    box-shadow:
        0 0 24px rgba(255, 71, 87, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes live-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, 0.8),
            0 0 8px rgba(255, 71, 87, 0.6);
    }
    70% {
        box-shadow:
            0 0 0 8px rgba(255, 255, 255, 0),
            0 0 8px rgba(255, 71, 87, 0.6);
    }
}

.zones-ticker-live-badge .live-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
}

.zones-ticker-live-badge .live-text {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.25em;
}

.zones-ticker-live-badge .live-time {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Edge fade */
.zones-ticker::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 80px;
    background: linear-gradient(270deg, rgba(5, 10, 20, 0.95), transparent);
    z-index: 2;
    pointer-events: none;
}

/* Ticker track */
.zones-ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: zones-ticker 80s linear infinite;
    padding: 0 24px;
    flex: 1;
    min-width: 0;
}

/* Individual news item */
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.ticker-item .ticker-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-bright);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

.ticker-item .ticker-label {
    color: var(--text-bright);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ticker-item .ticker-status {
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
}

.ticker-item .ticker-status.green {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.ticker-item .ticker-status.amber {
    color: var(--warning);
    background: rgba(239, 159, 39, 0.12);
    box-shadow: 0 0 12px rgba(239, 159, 39, 0.2);
    text-shadow: 0 0 8px rgba(239, 159, 39, 0.5);
}

.ticker-item .ticker-status.red {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.15);
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.3);
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
    animation: critical-pulse 1.5s ease-in-out infinite;
}

@keyframes critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* Cyan glowing divider between items */
.ticker-divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent, var(--accent-bright), transparent);
    box-shadow: 0 0 8px var(--accent-glow);
    opacity: 0.5;
}

/* HERO */
.zones-hero {
    position: relative;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(93, 213, 232, 0.22) 0%,
            rgba(93, 213, 232, 0.08) 35%,
            transparent 70%),
        #000000;
    padding: 40px 0;
    overflow: hidden;
}
.zones-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(93, 213, 232, 0.15), transparent 50%);
    pointer-events: none;
}
.zones-hero::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at top, transparent 70%, #000000 100%),
        radial-gradient(ellipse at bottom, transparent 70%, #000000 100%);
    pointer-events: none;
    z-index: 1;
}
.zones-hero-grid {
    display: grid; grid-template-columns: 2fr 1fr;
    gap: 20px; position: relative; z-index: 1;
}
@media (max-width: 968px) { .zones-hero-grid { grid-template-columns: 1fr; } }

.zones-hero-main {
    background: transparent;
    border: 1px solid var(--border-bright); border-radius: 20px;
    padding: 56px 48px; min-height: 480px;
    position: relative; overflow: hidden;
    box-shadow:
        0 0 80px rgba(93, 213, 232, 0.15),
        inset 0 0 100px rgba(93, 213, 232, 0.05);
    display: flex; flex-direction: column; justify-content: center;
}
.zones-hero-main::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(93, 213, 232, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 213, 232, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.3; pointer-events: none;
    z-index: 2;
}
.zones-hero-main .corner {
    position: absolute; width: 28px; height: 28px;
    border: 2px solid var(--accent); opacity: 0.7;
}
.zones-hero-main .corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.zones-hero-main .corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

.zones-hero-decor {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    width: 320px; height: 320px; opacity: 0.25; pointer-events: none;
}

.zones-hero-tag {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 24px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-hero-tag .blink { animation: zones-blink 1.5s step-end infinite; }

.zones-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: 0.04em;
    margin: 0 0 24px;
    color: var(--accent-bright);
    font-weight: 300;
    position: relative; z-index: 1; max-width: 60%;
    text-shadow:
        0 0 20px var(--accent-glow),
        0 0 40px rgba(93, 213, 232, 0.3),
        0 0 80px rgba(93, 213, 232, 0.15);
    text-transform: uppercase;
}
.zones-hero-title .accent {
    color: var(--accent-bright);
    font-weight: 400;
    text-shadow:
        0 0 30px var(--accent-bright),
        0 0 60px var(--accent-glow);
}
.zones-hero-title .muted {
    color: #ffffff;
    opacity: 0.35;
    font-size: 0.65em;
    font-weight: 200;
    text-shadow: none;
}

.zones-hero-subtitle {
    color: var(--text-muted); font-size: 17px; line-height: 1.7;
    max-width: 520px; margin-bottom: 32px; position: relative; z-index: 1;
}
.zones-hero-subtitle .highlight { color: var(--accent); font-weight: 700; }

.zones-hero-actions {
    display: flex; gap: 12px; align-items: center;
    flex-wrap: wrap; position: relative; z-index: 1;
}

.zones-hero-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.zones-hero-side > .zones-hero-card {
    min-height: 480px;
}
.zones-hero-side .zones-card-content {
    justify-content: space-between;
    padding: 24px;
}
.zones-hero-side .zones-card-title {
    font-size: 24px;
    margin-bottom: 8px;
}
.zones-hero-side .zones-card-desc {
    font-size: 13px;
    margin-bottom: 16px;
}
.zones-hero-side .zones-btn-small {
    padding: 12px 22px;
    font-size: 12px;
}

/* PC Builder visual - animated component icons */
.pc-builder-visual {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 16px 0;
}
.pc-builder-visual svg {
    width: 100%;
    height: 100%;
}

@keyframes component-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes data-flow {
    0% { stroke-dashoffset: 100; opacity: 0; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes spec-blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.pcb-component {
    transform-origin: center;
}
.pcb-component.c1 { animation: component-pulse 2s ease-in-out infinite; }
.pcb-component.c2 { animation: component-pulse 2s ease-in-out infinite 0.4s; }
.pcb-component.c3 { animation: component-pulse 2s ease-in-out infinite 0.8s; }
.pcb-component.c4 { animation: component-pulse 2s ease-in-out infinite 1.2s; }

.pcb-line {
    stroke-dasharray: 4 4;
    animation: data-flow 2s linear infinite;
}
.pcb-line.l2 { animation-delay: 0.5s; }
.pcb-line.l3 { animation-delay: 1s; }
.pcb-line.l4 { animation-delay: 1.5s; }

.pcb-spec {
    font-family: var(--font-mono);
    font-size: 8px;
    fill: var(--accent-bright);
    letter-spacing: 1.5px;
    animation: spec-blink 3s ease-in-out infinite;
}

.zones-hero-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.zones-hero-card:hover {
    transform: translateY(-4px);
}

/* RGB animated border (cyan palette) */
@keyframes rgb-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rgb-border-fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.zones-card-rgb {
    background: var(--bg-card);
    border: none;
    padding: 2px;
    isolation: isolate;
}

/* The animated rotating gradient border layer */
.zones-card-rgb::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d
    );
    animation: rgb-border-rotate 6s linear infinite;
    z-index: 0;
    opacity: 0.8;
}

/* Glow that pulses */
.zones-card-rgb .rgb-border-glow {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        #5dd5e8 90deg,
        #7df5ff 180deg,
        #5dd5e8 270deg,
        transparent 360deg
    );
    animation: rgb-border-rotate 4s linear infinite;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Inner content (the actual card) */
.zones-card-rgb .zones-card-content {
    background: linear-gradient(160deg, #0d1420 0%, #060a14 100%);
    border-radius: 14px;
    padding: 22px;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.zones-card-rgb:hover::before {
    animation-duration: 2s;
    opacity: 1;
}
.zones-card-rgb:hover .rgb-border-glow {
    opacity: 0.9;
    animation-duration: 2s;
}
.zones-card-rgb:hover {
    transform: translateY(-6px) scale(1.01);
}

/* Old .ai background gradient kept for PC Builder accent */
.zones-hero-card.ai .zones-card-content {
    background:
        radial-gradient(circle at top right, rgba(93, 213, 232, 0.18) 0%, transparent 60%),
        linear-gradient(160deg, #0d1420 0%, #060a14 100%);
}
.zones-hero-card.ai::before {
    content: ''; position: absolute; inset: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d
    );
    animation: rgb-border-rotate 6s linear infinite;
    z-index: 0;
    opacity: 0.8;
}

.zones-card-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--accent);
    letter-spacing: 0.25em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 12px;
    font-family: var(--font-mono);
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-card-label.amber {
    color: var(--warning);
    text-shadow: 0 0 12px rgba(239, 159, 39, 0.5);
}

.zones-card-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    color: var(--text-bright); margin: 0 0 8px; line-height: 1.2;
}
.zones-card-title .accent { color: var(--accent); }

.zones-card-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
    margin: 0 0 16px; flex: 1;
}

.zones-mini-product {
    display: flex; gap: 12px; align-items: center; margin-top: auto;
}
.zones-mini-product.compact {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.zones-mini-product.compact .image {
    width: 100%;
    height: 80px;
}
.zones-mini-product.compact .name {
    font-size: 12px;
    -webkit-line-clamp: 2;
}
.zones-mini-product .image {
    width: 64px; height: 64px; background: var(--bg-product);
    border-radius: 8px; padding: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.zones-mini-product .image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zones-mini-product .info { min-width: 0; flex: 1; }
.zones-mini-product .name {
    font-size: 13px; color: var(--text-bright);
    margin: 0 0 4px; line-height: 1.3; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zones-mini-product .price {
    color: var(--accent); font-weight: 700; font-size: 15px;
    font-family: var(--font-display);
}
.zones-mini-product .price del {
    color: var(--text-dim); font-size: 12px; font-weight: 400; margin-right: 4px;
}

/* BUTTONS */
.zones-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 10px;
    font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
    border: 1px solid transparent; cursor: pointer;
    transition: var(--transition); text-decoration: none;
    font-family: var(--font-display); line-height: 1;
}
.zones-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000000;
    box-shadow:
        0 0 0 1px var(--accent-bright),
        0 0 24px var(--accent-glow),
        0 4px 32px rgba(93, 213, 232, 0.4);
    font-weight: 800;
}
.zones-btn-primary:hover {
    color: #000000; transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--accent-bright),
        0 0 32px var(--accent-bright),
        0 8px 40px rgba(93, 213, 232, 0.7);
}
.zones-btn-primary:disabled {
    background: var(--bg-card); color: var(--text-dim);
    box-shadow: none; cursor: not-allowed; transform: none;
}
.zones-btn-secondary {
    background: rgba(93, 213, 232, 0.05);
    color: var(--accent-bright);
    border-color: var(--border);
    backdrop-filter: blur(10px);
}
.zones-btn-secondary:hover {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    background: rgba(93, 213, 232, 0.1);
    box-shadow: 0 0 20px var(--accent-glow);
}
.zones-btn-large { padding: 16px 32px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; }
.zones-btn-small { padding: 10px 18px; font-size: 12px; }

/* CATEGORIES - new bigger style with product backgrounds */
.zones-categories-strip { padding: 48px 0 32px; }
.zones-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) {
    .zones-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .zones-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.zones-cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 0;
    text-align: left;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Background product image */
.zones-cat-card .cat-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: saturate(0.7) brightness(0.8);
}

/* Dark gradient overlay */
.zones-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.95) 100%);
    transition: var(--transition);
    z-index: 1;
}

/* Top cyan accent line - hidden by default */
.zones-cat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
    box-shadow: 0 0 12px var(--accent-glow);
}

.zones-cat-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-8px);
    box-shadow:
        0 0 40px rgba(93, 213, 232, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.6);
}
.zones-cat-card:hover .cat-bg-image {
    opacity: 0.55;
    transform: scale(1.1);
    filter: saturate(1) brightness(1);
}
.zones-cat-card:hover::after {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.92) 100%);
}
.zones-cat-card:hover::before { opacity: 1; }

.zones-cat-card.featured {
    border-color: var(--border-bright);
    box-shadow: 0 0 24px rgba(93, 213, 232, 0.1);
}
.zones-cat-card.featured .cat-bg-image { opacity: 0.35; }

/* Card content layout */
.zones-cat-card-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* SVG icon container */
.zones-cat-icon-svg {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 12px var(--accent-glow));
    transition: var(--transition);
}
.zones-cat-card:hover .zones-cat-icon-svg {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 20px var(--accent-bright));
    transform: scale(1.1);
}
.zones-cat-icon-svg svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

/* Old emoji fallback */
.zones-cat-icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(93, 213, 232, 0.4));
}

.zones-cat-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0;
    letter-spacing: 0.02em;
}

.zones-cat-count {
    font-size: 11px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Arrow that slides in on hover */
.zones-cat-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    background: rgba(93, 213, 232, 0.1);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
    z-index: 2;
}
.zones-cat-card:hover .zones-cat-arrow {
    opacity: 1;
    transform: translateX(0);
    border-color: var(--accent-bright);
    background: var(--accent-bright);
    color: #000;
    box-shadow: 0 0 16px var(--accent-glow);
}

/* SECTIONS */
.zones-section {
    padding: 80px 0;
    position: relative;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(93, 213, 232, 0.06), transparent 70%),
        radial-gradient(ellipse at top, rgba(93, 213, 232, 0.025), transparent 50%);
    overflow: hidden;
}

/* Decorative cyan line at top of section */
.zones-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    box-shadow: 0 0 12px var(--accent-glow);
    opacity: 0.4;
}
.zones-categories-strip {
    background:
        radial-gradient(ellipse at top, rgba(93, 213, 232, 0.03), transparent 60%);
}
.zones-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
}

/* Eyebrow with cyan dot + line */
.zones-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 700;
    text-shadow: 0 0 12px var(--accent-glow);
    padding: 6px 14px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 100px;
    width: fit-content;
}

.zones-section-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-bright);
    animation: zones-pulse 2s ease-in-out infinite;
}

/* Title with RGB animated gradient */
.zones-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
    position: relative;
    display: inline-block;

    /* Animated cyan gradient text */
    background: linear-gradient(
        90deg,
        #0a1f3d 0%,
        #1e4a8e 12%,
        #3a8bbf 25%,
        #5dd5e8 45%,
        #7df5ff 55%,
        #5dd5e8 65%,
        #3a8bbf 80%,
        #1e4a8e 92%,
        #0a1f3d 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: section-title-rgb 8s linear infinite;
    filter: drop-shadow(0 0 24px rgba(93, 213, 232, 0.3))
            drop-shadow(0 0 60px rgba(93, 213, 232, 0.15));
}

@keyframes section-title-rgb {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Cyan underline accent under title */
.zones-section-title-wrap {
    position: relative;
}
.zones-section-title-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-bright), transparent);
    border-radius: 3px;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Section link → button-ish */
.zones-section-link {
    color: var(--accent-bright);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    padding: 10px 18px;
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    text-decoration: none;
    background: rgba(93, 213, 232, 0.05);
    height: 40px;
    text-shadow: 0 0 8px var(--accent-glow);
}
.zones-section-link:hover {
    background: rgba(93, 213, 232, 0.12);
    box-shadow: 0 0 16px var(--accent-glow);
    text-shadow: 0 0 12px var(--accent-bright);
    gap: 12px;
}

/* PRODUCT CARDS - Gaming/Futuristic */
.zones-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) {
    .zones-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .zones-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.zones-product-card {
    background:
        linear-gradient(135deg, #0a1622 0%, #050a14 50%, #02060c 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}

/* Animated cyan top accent line - on hover */
.zones-product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    box-shadow: 0 0 16px var(--accent-bright);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 6;
}

/* Cyan inner glow on hover */
.zones-product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(93, 213, 232, 0.12), transparent 50%),
        radial-gradient(circle at bottom left, rgba(93, 213, 232, 0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
}

.zones-product-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px rgba(93, 213, 232, 0.3),
        0 0 32px rgba(93, 213, 232, 0.2),
        0 24px 48px rgba(0, 0, 0, 0.6);
}
.zones-product-card:hover::before {
    width: 80%;
}
.zones-product-card:hover::after {
    opacity: 1;
}

/* CORNER BRACKETS - tech/gaming UI vibe */
.zones-product-card .image-wrap {
    aspect-ratio: 1;
    padding: 24px;
    background:
        radial-gradient(circle at 30% 30%, rgba(93, 213, 232, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(58, 139, 191, 0.18) 0%, transparent 50%),
        linear-gradient(135deg, #0a1820 0%, #050b14 50%, #020608 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* 4 corner brackets like gaming UI */
.zones-product-card .image-wrap::before,
.zones-product-card .image-wrap::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--accent-bright);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
    z-index: 3;
}
.zones-product-card .image-wrap::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}
.zones-product-card .image-wrap::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}
.zones-product-card:hover .image-wrap::before,
.zones-product-card:hover .image-wrap::after {
    opacity: 1;
    width: 26px;
    height: 26px;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Scan line animation on hover */
.zones-product-card .image-wrap > .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    opacity: 0;
    box-shadow: 0 0 8px var(--accent-bright);
    z-index: 4;
    pointer-events: none;
}
.zones-product-card:hover .image-wrap > .scan-line {
    opacity: 0.6;
    animation: card-scan 1.8s linear infinite;
}
@keyframes card-scan {
    0% { top: 0; opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { top: 100%; opacity: 0; }
}

.zones-product-card img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 8px 24px rgba(93, 213, 232, 0.25));
}
.zones-product-card:hover img {
    transform: scale(1.12) rotate(-2deg);
    filter: drop-shadow(0 12px 32px rgba(93, 213, 232, 0.4));
}

/* INFO section - gaming card body */
.zones-product-card .info {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, transparent 0%, rgba(93, 213, 232, 0.04) 100%);
    position: relative;
    z-index: 3;
}

/* Cyan separator line between image and info */
.zones-product-card .info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    opacity: 0.4;
    transition: opacity 0.4s;
}
.zones-product-card:hover .info::before {
    opacity: 1;
    box-shadow: 0 0 12px var(--accent-glow);
}

.zones-product-card .vendor {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 0 8px var(--accent-glow);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.zones-product-card .vendor::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-bright);
}

.zones-product-card .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
    transition: color 0.3s;
}
.zones-product-card:hover .name {
    color: var(--text-bright);
}

.zones-product-card .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(93, 213, 232, 0.15);
}

.zones-product-card .price {
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    text-shadow: 0 0 14px var(--accent-glow);
    letter-spacing: -0.02em;
    line-height: 1;
}
.zones-product-card .price del {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 400;
    margin-right: 6px;
    text-shadow: none;
    opacity: 0.7;
}
.zones-product-card .price ins {
    text-decoration: none;
}

.zones-product-card .stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 5px 10px;
    background: rgba(93, 213, 232, 0.05);
    border-radius: 100px;
    border: 1px solid rgba(93, 213, 232, 0.1);
}
.zones-product-card .stock-indicator .stock-dot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 6px #4ade80;
}
.zones-product-card .stock-indicator .stock-dot.low {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
    animation: zones-pulse 1.5s ease-in-out infinite;
}

/* BADGES - hexagonal gaming style */
.zones-product-card .badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 5;
    font-family: var(--font-display);
    box-shadow:
        0 0 16px var(--accent-glow),
        0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--accent-bright);
    /* Subtle clip-path corner cut for gaming feel */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
}
.zones-product-card .badge.new {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    border-color: var(--accent-bright);
}
.zones-product-card .badge.sale {
    background: linear-gradient(135deg, var(--warning) 0%, #ffb955 100%);
    color: #2a1a04;
    border-color: var(--warning);
    box-shadow:
        0 0 16px rgba(239, 159, 39, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4);
}
.zones-product-card .badge.hot {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b6b 100%);
    color: #fff;
    border-color: #ff6b6b;
    box-shadow:
        0 0 16px rgba(255, 71, 87, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4);
    animation: badge-hot-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-hot-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 71, 87, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 28px rgba(255, 71, 87, 0.9), 0 4px 12px rgba(0, 0, 0, 0.4); }
}
.zones-product-card .badge.hot { background: #ff4d2a; color: white; }

.zones-product-card .stock-indicator {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.zones-product-card .stock-dot {
    width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
}
.zones-product-card .stock-dot.low { background: var(--warning); box-shadow: 0 0 8px var(--warning); }

/* SHOP / ARCHIVE */
.zones-shop-wrap { background: var(--bg-deep); padding-bottom: 80px; }
.zones-shop-header {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 32px;
    background: linear-gradient(180deg, rgba(93, 213, 232, 0.04) 0%, transparent 100%);
}
.zones-shop-title {
    font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
    margin: 8px 0; color: var(--text-bright);
}
.zones-shop-count {
    color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; margin: 0;
}

.zones-shop-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 32px; flex-wrap: wrap;
}
.zones-shop-toolbar-left { flex: 1; min-width: 0; }
.zones-shop-toolbar-right { flex-shrink: 0; }

.zones-subcategory-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.zones-sub-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; background: var(--bg-card);
    border: 1px solid var(--border-subtle); border-radius: 20px;
    color: var(--text); font-size: 11px; font-weight: 500;
    transition: var(--transition); text-decoration: none; white-space: nowrap;
}
.zones-sub-pill:hover {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent); transform: translateY(-2px);
}
.zones-sub-pill .count {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); background: var(--bg-elevated);
    padding: 2px 6px; border-radius: 10px;
}

form.woocommerce-ordering select,
.zones-shop-toolbar select {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    color: var(--text); padding: 10px 16px; border-radius: 8px;
    font-size: 13px; cursor: pointer; outline: none;
    min-width: 200px; font-family: inherit;
}
form.woocommerce-ordering select:focus { border-color: var(--accent); }

.zones-pagination { margin-top: 48px; display: flex; justify-content: center; }
nav.woocommerce-pagination ul {
    display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;
    border: none;
}
nav.woocommerce-pagination ul li { border: none !important; }
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 14px;
    background: var(--bg-card); border: 1px solid var(--border-subtle) !important;
    color: var(--text); border-radius: 10px; text-decoration: none;
    font-weight: 600; font-size: 14px; transition: var(--transition);
    margin: 0 !important;
}
nav.woocommerce-pagination ul li a:hover {
    border-color: var(--accent) !important;
    color: var(--accent); background: var(--accent-soft);
}
nav.woocommerce-pagination ul li .current {
    background: var(--accent) !important; color: var(--accent-dark) !important;
    border-color: var(--accent) !important;
}

/* SINGLE PRODUCT */
.zones-single-product { background: var(--bg-deep); }
.zones-breadcrumbs {
    display: flex; align-items: center; gap: 8px;
    padding: 24px 0; font-size: 13px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    flex-wrap: wrap; font-family: var(--font-mono);
}
.zones-breadcrumbs a { color: var(--text-muted); }
.zones-breadcrumbs a:hover { color: var(--accent); }
.zones-breadcrumbs .sep { color: var(--text-dim); }

.zones-product-hero { position: relative; padding: 16px 0 80px; }
.zones-product-hero::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80%; height: 60%;
    background: radial-gradient(ellipse at top, rgba(93, 213, 232, 0.1), transparent 70%);
    pointer-events: none;
}
.zones-product-layout {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
    position: relative; z-index: 1;
}
@media (max-width: 968px) { .zones-product-layout { grid-template-columns: 1fr; gap: 32px; } }

.zones-gallery { position: sticky; top: 120px; align-self: start; }
.zones-gallery-main {
    background: radial-gradient(circle at center, var(--bg-product) 0%, var(--bg-product-dark) 100%);
    border: 1px solid var(--border); border-radius: 20px;
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    padding: 64px; position: relative; overflow: hidden; margin-bottom: 16px;
}
.zones-gallery-main::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 50%);
    pointer-events: none;
}
.zones-gallery-main img {
    max-width: 90%; max-height: 90%; object-fit: contain;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s ease; position: relative; z-index: 1;
}
.zones-gallery-main:hover img { transform: scale(1.05); }

.zones-gallery-thumbs {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.zones-gallery-thumb {
    background: var(--bg-product); border: 2px solid var(--border-subtle);
    border-radius: 10px; aspect-ratio: 1; padding: 8px;
    cursor: pointer; transition: var(--transition); overflow: hidden;
}
.zones-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.zones-gallery-thumb:hover, .zones-gallery-thumb.active {
    border-color: var(--accent); transform: scale(1.05);
}

.zones-product-info { padding-top: 8px; }
.zones-product-vendor-badge {
    display: inline-block; padding: 7px 14px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--border-bright); border-radius: 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.25em; text-transform: uppercase;
    margin-bottom: 18px; font-family: var(--font-mono);
}
.zones-product-title {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800; color: var(--text-bright);
    margin: 0 0 14px; letter-spacing: -0.02em; line-height: 1.15;
}
.zones-product-sku {
    font-family: var(--font-mono); color: var(--text-dim);
    font-size: 13px; margin-bottom: 28px;
}
.zones-product-shortdesc {
    color: var(--text-muted); font-size: 15px; line-height: 1.7;
    border-left: 2px solid var(--accent); padding: 4px 0 4px 16px;
    margin: 0 0 32px;
}

.zones-price-block {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--border); border-radius: 16px;
    padding: 28px; margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.zones-price-block::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1e4a8e, #3a8bbf, #5dd5e8, #7df5ff, #5dd5e8, #3a8bbf, #1e4a8e);
    background-size: 300% 100%; animation: zones-rgb 8s linear infinite;
}
.zones-price-label {
    font-family: var(--font-mono); color: var(--text-muted);
    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    margin-bottom: 8px; font-weight: 600;
}
.zones-price-main {
    font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800; color: var(--text-bright);
    line-height: 1; letter-spacing: -0.03em;
}
.zones-price-main del {
    color: var(--text-dim); font-size: 0.5em; font-weight: 400; margin-right: 12px;
}
.zones-price-main ins { text-decoration: none; color: var(--accent); }
.zones-price-vat {
    color: var(--text-dim); font-size: 12px; margin-top: 10px;
    font-family: var(--font-mono); letter-spacing: 0.05em;
}

.zones-stock-status {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px; padding: 14px 18px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 10px; font-size: 14px;
}
.zones-stock-dot {
    width: 10px; height: 10px; background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 14px var(--accent);
    animation: zones-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
.zones-stock-dot.out {
    background: var(--danger); box-shadow: 0 0 14px var(--danger); animation: none;
}
.zones-stock-dot.low {
    background: var(--warning); box-shadow: 0 0 14px var(--warning);
}
.zones-stock-text { color: var(--text); font-weight: 500; }

.zones-quantity {
    display: inline-flex; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 10px; overflow: hidden;
}
.zones-quantity button {
    width: 48px; height: 56px; color: var(--text);
    font-size: 20px; transition: var(--transition);
}
.zones-quantity button:hover { background: var(--bg-hover); color: var(--accent); }
.zones-quantity input {
    background: transparent; border: none; color: var(--text-bright);
    width: 60px; height: 56px; text-align: center;
    font-size: 16px; font-weight: 700; -moz-appearance: textfield;
}
.zones-quantity input::-webkit-inner-spin-button,
.zones-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; }

.zones-product-actions { display: flex; gap: 12px; margin-bottom: 28px; }
.zones-add-to-cart {
    flex: 1; height: 56px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: var(--accent-dark); border: none; border-radius: 10px;
    font-size: 14px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    cursor: pointer; transition: var(--transition);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 4px 24px rgba(93, 213, 232, 0.3);
    font-family: var(--font-display);
}
.zones-add-to-cart:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(93, 213, 232, 0.5); }

.zones-wishlist-btn {
    width: 56px; height: 56px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    color: var(--text-muted); border-radius: 10px;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.zones-wishlist-btn:hover { border-color: var(--rgb-pink); color: var(--rgb-pink); }
.zones-wishlist-btn.active { background: var(--rgb-pink); color: white; border-color: var(--rgb-pink); }

.zones-features-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; margin-bottom: 32px;
}
.zones-feature-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--bg-card);
    border: 1px solid var(--border-subtle); border-radius: 10px;
}
.zones-feature-icon {
    width: 32px; height: 32px; background: var(--accent-soft);
    color: var(--accent); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.zones-feature-text { font-size: 13px; color: var(--text); font-weight: 500; }

.zones-specs-section {
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
    padding: 80px 0; border-top: 1px solid var(--border-subtle);
}
.zones-specs-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.zones-spec-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 22px; transition: var(--transition);
}
.zones-spec-card:hover { border-color: var(--border-bright); transform: translateY(-3px); }
.zones-spec-label {
    font-family: var(--font-mono); color: var(--text-muted);
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 8px; font-weight: 600;
}
.zones-spec-value {
    color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.4;
}

.zones-description-section {
    padding: 80px 0; border-top: 1px solid var(--border-subtle);
}
.zones-description-content {
    color: var(--text-muted); font-size: 16px; line-height: 1.8; max-width: 800px;
}
.zones-description-content h2, .zones-description-content h3 {
    color: var(--text); margin-top: 32px;
}

.zones-related-section {
    padding: 80px 0; border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, var(--bg-deep) 0%, #080d1c 100%);
}

/* PC BUILDER */
/* ============================================
   PC BUILDER - Premium Gaming Style
   ============================================ */

.zones-pc-builder {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(93, 213, 232, 0.08), transparent 70%),
        #000000;
    padding: 32px 0 80px;
    position: relative;
    overflow: hidden;
}

/* HERO */
.zones-builder-hero {
    text-align: center;
    padding: 56px 0 64px;
    position: relative;
}
.zones-builder-hero .builder-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 24px;
    font-weight: 700;
    text-shadow: 0 0 12px var(--accent-glow);
    padding: 8px 18px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 30px;
}
.zones-builder-hero .builder-h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 900;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    display: inline-block;

    /* RGB cyan animated gradient text */
    background: linear-gradient(
        90deg,
        #0a1f3d 0%,
        #1e4a8e 15%,
        #3a8bbf 30%,
        #5dd5e8 50%,
        #7df5ff 60%,
        #5dd5e8 70%,
        #3a8bbf 85%,
        #1e4a8e 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: builder-title-rgb 6s linear infinite;

    /* Glow halo behind text */
    filter: drop-shadow(0 0 24px rgba(93, 213, 232, 0.4))
            drop-shadow(0 0 60px rgba(93, 213, 232, 0.2));
}

@keyframes builder-title-rgb {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.zones-builder-hero .builder-h1 .accent {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 900;
}
.zones-builder-hero .builder-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* PRESETS - RGB animated borders */
.zones-builder-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 64px;
}

@keyframes preset-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.zones-preset {
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 16px;
    padding: 2px;
    isolation: isolate;
    overflow: hidden;
}

.zones-preset::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d
    );
    animation: preset-border-rotate 8s linear infinite;
    z-index: 0;
    opacity: 0.35;
    transition: opacity 0.4s;
}

.zones-preset .preset-rgb-border {
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--accent) 90deg,
        var(--accent-bright) 180deg,
        var(--accent) 270deg,
        transparent 360deg
    );
    animation: preset-border-rotate 5s linear infinite;
    filter: blur(12px);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.4s;
}

.zones-preset .preset-inner {
    background: linear-gradient(160deg, #0d1420 0%, #050810 100%);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    transition: background 0.3s;
}

.zones-preset:hover::before {
    opacity: 0.85;
    animation-duration: 3s;
}
.zones-preset:hover .preset-rgb-border {
    opacity: 0.8;
}
.zones-preset:hover {
    transform: translateY(-6px) scale(1.02);
}
.zones-preset:hover .preset-inner {
    background: linear-gradient(160deg,
        rgba(93, 213, 232, 0.08) 0%,
        #0d1420 50%,
        #050810 100%);
}

.zones-preset.active::before {
    opacity: 1;
    animation-duration: 3s;
}
.zones-preset.active .preset-rgb-border {
    opacity: 0.9;
}
.zones-preset.active .preset-inner {
    background:
        radial-gradient(circle at center, rgba(93, 213, 232, 0.12) 0%, transparent 70%),
        linear-gradient(160deg, #0d1420 0%, #050810 100%);
}

.zones-preset-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 12px var(--accent-glow));
    transition: var(--transition);
}
.zones-preset:hover .zones-preset-icon,
.zones-preset.active .zones-preset-icon {
    color: var(--accent-bright);
    filter: drop-shadow(0 0 20px var(--accent-bright));
    transform: scale(1.1);
}
.zones-preset-icon svg {
    width: 100%;
    height: 100%;
}

.zones-preset-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 6px;
    letter-spacing: 0.12em;
}
.zones-preset:hover .zones-preset-name,
.zones-preset.active .zones-preset-name {
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-preset-desc {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* MAIN LAYOUT */
.zones-builder-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}
@media (max-width: 1024px) {
    .zones-builder-layout { grid-template-columns: 1fr; }
}

/* PROGRESS BAR */
.zones-builder-progress {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.zones-builder-progress.complete {
    border-color: var(--accent-bright);
    box-shadow: 0 0 24px var(--accent-glow);
}
.zones-builder-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}
.zones-builder-progress .progress-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 12px var(--accent-glow);
}
.zones-builder-progress .progress-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.zones-builder-progress .progress-stats {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-bright);
    font-family: var(--font-display);
    font-weight: 700;
}
.zones-builder-progress .progress-current {
    font-size: 24px;
    color: var(--accent-bright);
    font-weight: 900;
    text-shadow: 0 0 12px var(--accent-glow);
    line-height: 1;
}
.zones-builder-progress .progress-divider {
    color: var(--text-dim);
    font-size: 18px;
    margin: 0 4px;
}
.zones-builder-progress .progress-total {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
}
.zones-builder-progress .progress-suffix {
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-left: 6px;
}

.zones-builder-progress .progress-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.zones-builder-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 12px var(--accent-glow),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
    position: relative;
}
.zones-builder-progress .progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
    animation: progress-shine 2s ease-in-out infinite;
}

@keyframes progress-shine {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* MODERN COMPONENT CARDS - 1 column horizontal */
.zones-builder-components {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zones-component {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 80px;
}

/* Background glow on hover */
.zones-component .component-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(93, 213, 232, 0.12),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.zones-component:hover {
    border-color: var(--border-bright);
    transform: translateX(4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.zones-component:hover .component-bg-glow {
    opacity: 1;
}

.zones-component.selected {
    border-color: var(--accent);
    background:
        radial-gradient(circle at left center, rgba(93, 213, 232, 0.12), transparent 60%),
        linear-gradient(135deg, #0d1622 0%, #060a14 100%);
    box-shadow:
        0 0 24px rgba(93, 213, 232, 0.2),
        inset 4px 0 0 var(--accent);
}

/* Icon */
.zones-component-icon {
    width: 48px;
    height: 48px;
    background: rgba(93, 213, 232, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    transition: var(--transition);
    flex-shrink: 0;
}
.zones-component-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.zones-component:hover .zones-component-icon {
    background: rgba(93, 213, 232, 0.1);
    border-color: var(--accent);
    transform: scale(1.05);
}
.zones-component.selected .zones-component-icon {
    background: rgba(93, 213, 232, 0.15);
    border-color: var(--accent-bright);
    box-shadow: 0 0 16px var(--accent-glow);
}

/* Info area */
.zones-component-info {
    min-width: 0;
    overflow: hidden;
}
.zones-component-info .type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
}
.zones-component-info .type-name {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 8px var(--accent-glow);
    white-space: nowrap;
}
.zones-component-info .required-badge {
    color: var(--warning);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 6px rgba(239, 159, 39, 0.5);
}
.zones-component-info .required-badge::before {
    content: '*';
}
.zones-component-info .required-badge {
    font-size: 0;
}
.zones-component-info .required-badge::before {
    font-size: 16px;
}
.zones-component-info .optional-badge {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    font-weight: 600;
    text-transform: lowercase;
    font-style: italic;
}
.zones-component-info .optional-badge::before {
    content: 'опц.';
}
.zones-component-info .optional-badge {
    font-size: 0;
}
.zones-component-info .optional-badge::before {
    font-size: 10px;
}
.zones-component-info .name {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zones-component-info .name.empty {
    color: var(--text-dim);
    font-style: italic;
    font-weight: 400;
}
.zones-component-info .specs {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zones-component-info .specs.warning {
    color: var(--warning);
}

/* Action - right side with price */
.zones-component-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    border: none;
    padding: 0;
    margin: 0;
}

.zones-component-price {
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    text-shadow: 0 0 12px var(--accent-glow);
    white-space: nowrap;
    line-height: 1;
}

/* Modern pick button */
.zones-pick-btn-modern {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    border: none;
    padding: 8px 14px;
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    box-shadow:
        0 0 14px var(--accent-glow),
        0 0 0 1px var(--accent-bright);
    white-space: nowrap;
    justify-content: center;
}
.zones-pick-btn-modern:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 0 20px var(--accent-bright),
        0 0 0 1px var(--accent-bright),
        0 4px 12px rgba(93, 213, 232, 0.4);
}
.zones-pick-btn-modern:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    box-shadow: none;
    cursor: not-allowed;
}
.zones-pick-btn-modern .btn-arrow {
    width: 12px;
    height: 12px;
    display: inline-flex;
    transition: transform 0.3s;
}
.zones-pick-btn-modern .btn-arrow svg {
    width: 100%;
    height: 100%;
}
.zones-pick-btn-modern:hover .btn-arrow {
    transform: translateX(3px);
}
.zones-pick-btn-modern.zones-pick-change {
    background: transparent;
    color: var(--accent-bright);
    border: 1px solid var(--border-bright);
    box-shadow: none;
    padding: 8px 14px;
    font-size: 11px;
    min-width: auto;
}
.zones-pick-btn-modern.zones-pick-change:hover {
    background: rgba(93, 213, 232, 0.1);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: none;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .zones-component {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 16px;
    }
    .zones-component-icon {
        width: 48px;
        height: 48px;
    }
    .zones-component-action {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px dashed rgba(93, 213, 232, 0.12);
    }
    .zones-pick-btn-modern {
        min-width: auto;
    }
}

/* SUMMARY - with RGB border */
.zones-builder-summary {
    position: sticky;
    top: 120px;
    height: fit-content;
    border-radius: 16px;
    padding: 2px;
    isolation: isolate;
    overflow: hidden;
}

.zones-builder-summary::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d
    );
    animation: preset-border-rotate 10s linear infinite;
    z-index: 0;
    opacity: 0.5;
}

.zones-builder-summary .summary-rgb-border {
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--accent) 90deg,
        var(--accent-bright) 180deg,
        var(--accent) 270deg,
        transparent 360deg
    );
    animation: preset-border-rotate 6s linear infinite;
    filter: blur(14px);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

.zones-builder-summary .summary-inner {
    background: linear-gradient(160deg, #0a1018 0%, #050810 100%);
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
    z-index: 2;
}

.zones-summary-title {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    color: var(--accent-bright);
    text-shadow: 0 0 16px var(--accent-glow);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.02em;
}
.zones-summary-title .title-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.zones-summary-title .title-icon svg {
    width: 100%;
    height: 100%;
}

.zones-summary-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 32px 0;
    font-size: 13px;
    font-style: italic;
}

.zones-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: 13px;
}
.zones-summary-row:last-of-type { border-bottom: none; }
.zones-summary-row .label {
    color: var(--text-muted);
    flex: 1;
    padding-right: 12px;
}
.zones-summary-row .value {
    color: var(--text-bright);
    font-weight: 600;
    white-space: nowrap;
}

.zones-summary-total {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 -1px 12px var(--accent-glow);
}
.zones-summary-total .label {
    color: var(--text-bright);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    flex-shrink: 0;
}
.zones-summary-total .value {
    font-family: var(--font-display);
    color: var(--accent-bright);
    font-size: 26px;
    font-weight: 800;
    text-shadow: 0 0 20px var(--accent-glow);
    text-align: right;
    line-height: 1;
    white-space: nowrap;
}

.zones-build-cart-btn {
    width: 100%;
    margin-top: 24px;
    justify-content: center;
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.zones-build-cart-btn .btn-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}
.zones-build-cart-btn .btn-icon svg {
    width: 100%;
    height: 100%;
}

.summary-note {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 14px;
    letter-spacing: 0.05em;
}

.zones-picker-overlay {
    position: fixed; inset: 0; background: var(--bg-overlay);
    backdrop-filter: blur(12px); z-index: 9998;
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.zones-picker-overlay.active { display: flex; }
.zones-picker-modal {
    background: var(--bg-card); border: 1px solid var(--border-bright);
    border-radius: 20px; width: 100%; max-width: 920px;
    max-height: 85vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7);
}
.zones-picker-header {
    padding: 22px 28px; border-bottom: 1px solid var(--border-subtle);
    display: flex; justify-content: space-between; align-items: center;
}
.zones-picker-header h2 { margin: 0; font-size: 20px; color: var(--text-bright); }
.zones-picker-close {
    width: 36px; height: 36px; color: var(--text-muted);
    font-size: 24px; border-radius: 50%; transition: var(--transition);
}
.zones-picker-close:hover { background: var(--bg-hover); color: var(--text-bright); }
.zones-picker-search { padding: 16px 28px; border-bottom: 1px solid var(--border-subtle); }
.zones-picker-search input {
    width: 100%; background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); color: var(--text);
    padding: 12px 18px; border-radius: 10px; font-size: 14px; outline: none;
}
.zones-picker-search input:focus { border-color: var(--accent); }
.zones-picker-list { flex: 1; overflow-y: auto; padding: 12px 20px; }
.zones-picker-item {
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 16px; align-items: center; padding: 12px;
    border-radius: 10px; cursor: pointer; transition: var(--transition);
}
.zones-picker-item:hover { background: var(--bg-hover); }
.zones-picker-item .image {
    width: 64px; height: 64px; background: var(--bg-product);
    border-radius: 10px; padding: 8px;
    display: flex; align-items: center; justify-content: center;
}
.zones-picker-item .image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zones-picker-item .info .vendor {
    font-family: var(--font-mono); color: var(--accent);
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.zones-picker-item .info .name {
    font-size: 14px; color: var(--text); font-weight: 600; margin: 4px 0;
}
.zones-picker-item .info .sku {
    font-family: var(--font-mono); color: var(--text-dim); font-size: 11px;
}
.zones-picker-item .price {
    color: var(--accent); font-family: var(--font-display);
    font-size: 16px; font-weight: 800;
}
.zones-picker-loading { text-align: center; padding: 64px; color: var(--text-muted); }

/* FOOTER */
.zones-site-footer {
    background:
        radial-gradient(ellipse 70% 100% at 50% 100%,
            rgba(93, 213, 232, 0.16) 0%,
            rgba(58, 139, 191, 0.06) 35%,
            rgba(30, 74, 142, 0.02) 60%,
            var(--bg-deep) 90%),
        linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    border-top: 1px solid var(--border-bright); margin-top: 80px;
    padding: 64px 0 24px; position: relative; overflow: hidden;
}
.zones-site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    box-shadow: 0 0 12px var(--accent-glow);
}
.zones-site-footer::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 100%, rgba(93, 213, 232, 0.1), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.zones-site-footer > * {
    position: relative;
    z-index: 1;
}
.zones-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px; padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
}
@media (max-width: 768px) {
    .zones-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.zones-footer-brand { max-width: 360px; }
.zones-footer-tagline {
    color: var(--text-muted); font-size: 13px; line-height: 1.7; margin: 16px 0;
}
.zones-footer-widget-title {
    font-family: var(--font-display); color: var(--text-bright);
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em;
    margin: 0 0 18px; font-weight: 800;
}
.zones-footer-widget ul { padding: 0; margin: 0; list-style: none; }
.zones-footer-widget li { margin-bottom: 10px; }
.zones-footer-widget a {
    color: var(--text-muted); font-size: 13px; transition: color 0.2s;
}
.zones-footer-widget a:hover { color: var(--accent); }
.zones-footer-bottom {
    padding-top: 24px; display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 16px;
}
.zones-footer-copyright {
    color: var(--text-dim); font-size: 12px;
    font-family: var(--font-mono); letter-spacing: 0.05em;
}

/* ANIMATIONS */
@keyframes zones-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.6; }
}
@keyframes zones-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}
@keyframes zones-rgb {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes zones-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* HERO ANIMATIONS */
@keyframes float-particle-1 {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    50% { transform: translate(20px, -30px); opacity: 0.8; }
}
@keyframes float-particle-2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(-25px, 20px); opacity: 0.7; }
}
@keyframes float-particle-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(30px, 30px) scale(1.2); opacity: 0.9; }
}
@keyframes zones-grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}
@keyframes zones-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-glow);
    }
    50% {
        text-shadow: 0 0 50px var(--accent-bright), 0 0 100px var(--accent-glow);
    }
}
@keyframes showcase-rotate {
    0% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
    20% { transform: scale(1) rotate(0deg); opacity: 1; }
    80% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(10deg); opacity: 0; }
}
@keyframes label-cycle {
    0%, 20% { opacity: 0; transform: translateY(10px); }
    25%, 95% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes showcase-glow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* RGB animated bar */
.zones-rgb-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #0a1f3d,
        #1e4a8e,
        #3a8bbf,
        #5dd5e8,
        #7df5ff,
        #5dd5e8,
        #3a8bbf,
        #1e4a8e,
        #0a1f3d);
    background-size: 400% 100%;
    animation: zones-rgb 4s linear infinite;
    z-index: 5;
    box-shadow: 0 0 12px rgba(93, 213, 232, 0.5);
}

/* Particles */
.zones-hero-bg-particles {
    display: none;
}
.zones-hero-bg-particles .particle {
    display: none;
}

/* Animated grid bg */
.zones-grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(93, 213, 232, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 213, 232, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: zones-grid-move 8s linear infinite;
    pointer-events: none;
    opacity: 0.25;
    z-index: 2;
}

/* Animated glow text */
.zones-glow-text {
    display: inline-block;
    animation: zones-glow-pulse 3s ease-in-out infinite;
}

/* Hero content layout for animated mode */
.zones-hero-animated .zones-hero-main {
    overflow: hidden;
}
.zones-hero-animated .zones-hero-content {
    position: relative;
    z-index: 3;
    max-width: 60%;
}

/* Rotating product showcase */
.zones-hero-showcase {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
    z-index: 2;
}
.zones-showcase-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent,
        var(--accent-glow),
        var(--rgb-pink),
        var(--rgb-cyan),
        var(--accent-glow),
        transparent
    );
    opacity: 0.4;
    filter: blur(40px);
    animation: showcase-glow-rotate 12s linear infinite;
}
.zones-showcase-item {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    padding: 40px;
}
.zones-showcase-item img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(93, 213, 232, 0.3));
}
.zones-showcase-item.active {
    animation: showcase-rotate 5s ease-in-out;
}

/* Showcase label badge */
.zones-showcase-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 8, 16, 0.85);
    border: 1px solid var(--border-bright);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 10px 18px;
    min-width: 160px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.zones-showcase-label .label-item {
    display: none;
}
.zones-showcase-label .label-item.active {
    display: block;
    animation: label-cycle 5s ease-in-out;
}
.zones-showcase-label .vendor {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}
.zones-showcase-label .price {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
}
.zones-showcase-label .price del {
    color: var(--text-dim); font-size: 12px; font-weight: 400; margin-right: 4px;
}

@media (max-width: 968px) {
    .zones-hero-animated .zones-hero-content { max-width: 100%; }
    .zones-hero-showcase { display: none; }
    .zones-floating-stat { display: none; }
    .zones-scan-beam { display: none; }
    .zones-hero-media { display: none; }
}

/* ===== HERO MEDIA (video or animated fallback) ===== */

.zones-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    border-radius: 20px;
    pointer-events: none;
}

.zones-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 2;
    pointer-events: none;
}

.zones-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 2;
    pointer-events: none;
}

.zones-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: none;
}

/* Animated fallback */
.zones-hero-fallback {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cyber-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(93, 213, 232, 0.3) 0%,
            rgba(93, 213, 232, 0.1) 30%,
            transparent 70%);
    animation: cyber-pulse 4s ease-in-out infinite;
}

@keyframes cyber-pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.cyber-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(93, 213, 232, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 213, 232, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: grid-shift 20s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

@keyframes grid-shift {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

.cyber-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@keyframes scan-line-1 {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    20%, 80% { opacity: 0.6; }
    50% { transform: translateX(0); }
}
@keyframes scan-line-2 {
    0%, 100% { transform: translateX(100%); opacity: 0; }
    20%, 80% { opacity: 0.8; }
    50% { transform: translateX(0); }
}

.scan-lines .line-1 {
    animation: scan-line-1 4s ease-in-out infinite;
}
.scan-lines .line-2 {
    animation: scan-line-2 5s ease-in-out infinite 0.5s;
}
.scan-lines .line-3 {
    animation: scan-line-1 6s ease-in-out infinite 1s;
}
.scan-lines .line-4 {
    animation: scan-line-2 7s ease-in-out infinite 1.5s;
}

.hero-alien {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    animation: alien-float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(93, 213, 232, 0.5));
}

.hero-alien svg {
    width: 100%;
    height: 100%;
}

@keyframes alien-float {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -52%) scale(1.03); opacity: 0.9; }
}

@media (max-width: 968px) {
    .zones-hero-media { display: none; }
}

/* Scanning beam effect */
@keyframes scan-beam {
    0%, 100% { transform: translateX(-100%) rotate(15deg); opacity: 0; }
    50% { transform: translateX(100%) rotate(15deg); opacity: 0.4; }
}
.zones-scan-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.zones-scan-beam::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 80px;
    height: 200%;
    background: linear-gradient(90deg,
        transparent,
        rgba(93, 213, 232, 0.2),
        rgba(93, 213, 232, 0.4),
        rgba(93, 213, 232, 0.2),
        transparent);
    filter: blur(8px);
    animation: scan-beam 6s ease-in-out infinite;
}

/* Floating stats badges */
@keyframes float-stat-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes float-stat-2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes float-stat-3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

.zones-floating-stat {
    position: absolute;
    background: rgba(10, 20, 36, 0.85);
    border: 1px solid var(--border-bright);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent-soft);
    z-index: 4;
    transition: all 0.3s ease;
}
.zones-floating-stat:hover {
    transform: scale(1.05) translateY(-4px) !important;
    border-color: var(--accent-bright);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--accent-glow);
    animation: none !important;
}
.zones-floating-stat .stat-icon {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.zones-floating-stat .stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.zones-floating-stat .stat-label {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.zones-floating-stat .stat-value {
    font-family: var(--font-display);
    color: var(--text-bright);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.zones-floating-stat.stat-1 {
    top: 18%;
    right: 18%;
    animation: float-stat-1 5s ease-in-out infinite;
}
.zones-floating-stat.stat-2 {
    top: 50%;
    right: 5%;
    animation: float-stat-2 6s ease-in-out infinite 1s;
}
.zones-floating-stat.stat-3 {
    bottom: 18%;
    right: 22%;
    animation: float-stat-3 5.5s ease-in-out infinite 0.5s;
}

/* Hero content needs proper z-index */
.zones-hero-animated .zones-hero-content {
    position: relative;
    z-index: 3;
    max-width: 60%;
}

/* WOOCOMMERCE OVERRIDES */
body.zones-theme.woocommerce .price { color: var(--accent); font-weight: 700; }
body.zones-theme.woocommerce .price del { color: var(--text-dim); }
body.zones-theme.woocommerce .price ins { text-decoration: none; color: var(--accent); }

body.zones-theme input[type="text"],
body.zones-theme input[type="email"],
body.zones-theme input[type="tel"],
body.zones-theme input[type="password"],
body.zones-theme input[type="number"],
body.zones-theme textarea,
body.zones-theme select {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    color: var(--text); padding: 11px 16px; border-radius: 8px;
    font-size: 14px; outline: none; transition: var(--transition);
}
body.zones-theme input:focus, body.zones-theme textarea:focus, body.zones-theme select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

body.zones-theme.woocommerce-page .woocommerce-message,
body.zones-theme.woocommerce-page .woocommerce-info {
    background: var(--bg-card); border-top: 3px solid var(--accent);
    color: var(--text); padding: 16px 20px;
}
body.zones-theme.woocommerce-page .woocommerce-error {
    background: var(--bg-card); border-top: 3px solid var(--danger);
    color: var(--text);
}

/* Disable WC default product wrappers that conflict */
body.zones-theme.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.zones-theme.woocommerce ul.products li.product .price,
body.zones-theme.woocommerce ul.products li.product img,
body.zones-theme.woocommerce ul.products li.product .button {
    display: none !important;
}

/* MOBILE */
@media (max-width: 1024px) {
    .zones-primary-nav { display: none; }
    .zones-search { width: 200px; }
}
@media (max-width: 768px) {
    .zones-utility-bar { font-size: 11px; padding: 6px 0; }
    .zones-utility-left .zones-utility-sep:nth-of-type(2),
    .zones-utility-left span:last-child { display: none; }
    .zones-search { display: none; }
    .zones-mobile-menu-toggle { display: flex; }
    .zones-hero-main { padding: 32px 24px; min-height: 320px; }
    .zones-hero-decor { display: none; }
    .zones-hero-title { max-width: 100%; }
    .zones-product-layout { grid-template-columns: 1fr; }
    .zones-gallery { position: relative; top: 0; }
    .zones-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .zones-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .zones-product-card .info { padding: 12px; }
    .zones-product-card .name { font-size: 13px; }
    .zones-product-card .price { font-size: 16px; }
}

.zones-mobile-menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; color: var(--text);
    background: var(--bg-card); border-radius: 10px;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99999; }
.skip-link:focus { left: 0; background: var(--accent); color: var(--accent-dark); padding: 8px 16px; }

::selection { background: var(--accent); color: var(--accent-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }

/* ============================================
   v4.1 - Trust signals, Sticky bar, Wishlist, Brand filter
   ============================================ */

/* TRUST SIGNALS - close to price */
.zones-price-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-subtle);
}
.zones-price-trust .trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}
.zones-price-trust .trust-item svg {
    width: 20px;
    height: 20px;
    color: var(--accent-bright);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--accent-glow));
    margin-top: 1px;
}
.zones-price-trust .trust-item strong {
    color: var(--text-bright);
    font-weight: 700;
    display: block;
    font-size: 13px;
}
.zones-price-trust .trust-item small {
    color: var(--text-dim);
    font-size: 11px;
}
@media (max-width: 600px) {
    .zones-price-trust { grid-template-columns: 1fr; }
}

/* STICKY BUY BAR */
.zones-sticky-buy-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(10, 18, 28, 0.98) 0%, rgba(5, 10, 18, 0.98) 100%);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    padding: 12px 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
}
.zones-sticky-buy-bar.visible {
    transform: translateY(0);
}
.zones-sticky-buy-bar .zones-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.zones-sticky-buy-bar .sticky-product-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.zones-sticky-buy-bar .sticky-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(93, 213, 232, 0.08), rgba(10, 24, 32, 0.5));
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}
.zones-sticky-buy-bar .sticky-text {
    min-width: 0;
    overflow: hidden;
}
.zones-sticky-buy-bar .sticky-vendor {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent-bright);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
    text-shadow: 0 0 8px var(--accent-glow);
}
.zones-sticky-buy-bar .sticky-name {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.zones-sticky-buy-bar .sticky-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.zones-sticky-buy-bar .sticky-price {
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-shadow: 0 0 12px var(--accent-glow);
    white-space: nowrap;
}
.zones-sticky-buy-bar .sticky-price del {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 400;
    margin-right: 6px;
    text-shadow: none;
}
.zones-sticky-buy-bar .sticky-price ins { text-decoration: none; }
.zones-sticky-buy-bar .sticky-add-cart {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow:
        0 0 16px var(--accent-glow),
        0 0 0 1px var(--accent-bright);
    white-space: nowrap;
}
.zones-sticky-buy-bar .sticky-add-cart:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 24px var(--accent-bright),
        0 0 0 1px var(--accent-bright),
        0 6px 16px rgba(93, 213, 232, 0.4);
}
@media (max-width: 600px) {
    .zones-sticky-buy-bar { padding: 10px 0; }
    .zones-sticky-buy-bar .sticky-img { width: 44px; height: 44px; }
    .zones-sticky-buy-bar .sticky-name { font-size: 12px; }
    .zones-sticky-buy-bar .sticky-vendor { display: none; }
    .zones-sticky-buy-bar .sticky-price { font-size: 16px; }
    .zones-sticky-buy-bar .sticky-add-cart {
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 0.05em;
    }
    .zones-sticky-buy-bar .sticky-add-cart span { display: none; }
}

/* WISHLIST HEART on cards */
.zones-card-wishlist,
.zones-card-wishlist-wrap {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
}
.zones-card-wishlist {
    width: 36px;
    height: 36px;
    background: rgba(10, 15, 28, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
    padding: 0;
}
.zones-card-wishlist svg {
    width: 18px;
    height: 18px;
    transition: var(--transition);
}
.zones-card-wishlist:hover {
    background: rgba(93, 213, 232, 0.15);
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    transform: scale(1.1);
    box-shadow: 0 0 16px var(--accent-glow);
}
.zones-card-wishlist.active {
    background: rgba(255, 71, 87, 0.15);
    border-color: #ff4757;
    color: #ff4757;
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.4);
}
.zones-card-wishlist.active svg {
    fill: #ff4757;
}
/* YITH wishlist wrap fallback styling */
.zones-card-wishlist-wrap .yith-wcwl-add-to-wishlist {
    margin: 0 !important;
    padding: 0 !important;
}
.zones-card-wishlist-wrap a {
    width: 36px;
    height: 36px;
    background: rgba(10, 15, 28, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
    text-decoration: none;
    font-size: 0;
}
.zones-card-wishlist-wrap a::before {
    content: '♡';
    font-size: 18px;
    line-height: 1;
}
.zones-card-wishlist-wrap a.exists::before {
    content: '♥';
    color: #ff4757;
}

/* WISHLIST BUTTON on product page */
.zones-wishlist-btn {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--border-bright);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
}
.zones-wishlist-btn:hover {
    background: rgba(93, 213, 232, 0.1);
    box-shadow: 0 0 12px var(--accent-glow);
}
.zones-wishlist-btn.active {
    background: rgba(255, 71, 87, 0.1);
    border-color: #ff4757;
    color: #ff4757;
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.3);
}
.zones-wishlist-btn.active svg { fill: #ff4757; }

/* BRAND FILTER */
.zones-brand-filter {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
.zones-brand-filter .brand-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 8px var(--accent-glow);
    white-space: nowrap;
}
.zones-brand-filter .brand-filter-label svg {
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.zones-brand-filter .brand-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zones-brand-filter .brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(93, 213, 232, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    padding: 6px 14px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.zones-brand-filter .brand-pill:hover {
    background: rgba(93, 213, 232, 0.1);
    border-color: var(--border-bright);
    color: var(--accent-bright);
    transform: translateY(-1px);
}
.zones-brand-filter .brand-pill.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
    color: #000;
    border-color: var(--accent-bright);
    box-shadow: 0 0 16px var(--accent-glow);
    font-weight: 800;
}
.zones-brand-filter .brand-pill .brand-count {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.zones-brand-filter .brand-pill.active .brand-count {
    background: rgba(0, 0, 0, 0.3);
    color: #000;
}
@media (max-width: 768px) {
    .zones-brand-filter {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Add padding to body when sticky bar visible so footer not hidden */
body.has-sticky-buy {
    padding-bottom: 80px;
}

/* ============================================
   v4.1.4 - MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent body scroll when drawer open */
body.no-scroll {
    overflow: hidden;
}

/* MOBILE DRAWER */
.zones-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    transition: visibility 0s 0.4s;
}
.zones-mobile-drawer.active {
    visibility: visible;
    transition: visibility 0s;
}

.zones-mobile-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s;
}
.zones-mobile-drawer.active .zones-mobile-drawer-overlay {
    opacity: 1;
}

.zones-mobile-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88%;
    max-width: 380px;
    background:
        linear-gradient(180deg, #0a1018 0%, #050810 100%);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.zones-mobile-drawer.active .zones-mobile-drawer-panel {
    transform: translateX(0);
}

.zones-mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.zones-mobile-drawer-header .drawer-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-bright);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--accent-glow);
}
.zones-mobile-drawer-close {
    background: transparent;
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    color: var(--accent-bright);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.zones-mobile-drawer-close:hover {
    background: rgba(93, 213, 232, 0.1);
}

.zones-mobile-search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.zones-mobile-search form {
    position: relative;
    margin: 0;
}
.zones-mobile-search input {
    width: 100%;
    background: #060a14;
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 12px 44px 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.zones-mobile-search input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 12px var(--accent-glow);
}
.zones-mobile-search button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--accent-bright);
    cursor: pointer;
    padding: 8px;
    display: flex;
}

.zones-mobile-nav {
    flex: 1;
    padding: 12px 0;
}
.zones-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.zones-mobile-nav li {
    margin: 0;
}
.zones-mobile-nav li.separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 12px 20px;
}
.zones-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    justify-content: space-between;
}
.zones-mobile-nav a > svg {
    color: var(--accent-bright);
    flex-shrink: 0;
}
.zones-mobile-nav a > svg:first-child {
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.zones-mobile-nav a:active,
.zones-mobile-nav a:hover {
    background: rgba(93, 213, 232, 0.08);
    color: var(--accent-bright);
    border-left-color: var(--accent-bright);
}
.zones-mobile-nav .count {
    background: rgba(93, 213, 232, 0.1);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 700;
    text-shadow: none;
}
.zones-mobile-nav li.gaming a {
    color: var(--accent-bright);
}
.zones-mobile-nav li.builder a {
    background: rgba(93, 213, 232, 0.06);
    color: var(--accent-bright);
    text-shadow: 0 0 8px var(--accent-glow);
}

.zones-mobile-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border-subtle);
}
.drawer-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-bright);
    border-radius: 10px;
    color: var(--accent-bright);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: var(--transition);
    position: relative;
    background: rgba(93, 213, 232, 0.04);
}
.drawer-icon-link:hover {
    background: rgba(93, 213, 232, 0.12);
    box-shadow: 0 0 12px var(--accent-glow);
}
.drawer-cart-count {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: 4px;
}

/* RESPONSIVE FIXES */

/* Tablet (768-1024px) */
@media (max-width: 1024px) {
    .zones-container { padding: 0 20px; }
    .zones-section { padding: 56px 0; }
    .zones-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }
}

/* Tablet portrait & large phones */
@media (max-width: 900px) {
    /* Header layout - hide nav, show only logo + icons + hamburger */
    .zones-header-main .zones-container {
        gap: 16px;
    }
    .zones-logo {
        height: 44px;
    }
    .zones-logo .logo-png,
    .zones-logo .logo-svg {
        height: 44px;
        max-height: 44px;
    }
    .zones-header-actions {
        gap: 6px;
    }

    /* PC Builder responsive */
    .zones-builder-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .zones-builder-summary {
        position: static;
    }
    .zones-builder-presets {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Section headers */
    .zones-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .zones-section-link {
        align-self: stretch;
        justify-content: center;
    }
}

/* Phone (max 600px) */
@media (max-width: 600px) {
    body { font-size: 14px; }

    .zones-container { padding: 0 14px; }
    .zones-section { padding: 40px 0; }

    /* Header */
    .zones-header-main { padding: 12px 0; }
    .zones-header-main .zones-container {
        min-height: 48px;
        gap: 8px;
    }
    .zones-logo { height: 38px; }
    .zones-logo .logo-png,
    .zones-logo .logo-svg {
        height: 38px;
        max-height: 38px;
    }
    .zones-header-icon {
        width: 38px;
        height: 38px;
    }
    .zones-header-icon svg {
        width: 18px;
        height: 18px;
    }
    .zones-mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }
    .zones-cart-count {
        font-size: 9px;
        min-width: 18px;
        height: 18px;
        top: -5px;
        right: -5px;
    }

    /* Utility bar hide more */
    .zones-utility-bar {
        font-size: 10px;
        padding: 4px 0;
    }
    .zones-utility-right { display: none; }

    /* Products grid - 2 columns on phone */
    .zones-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .zones-product-card .image-wrap {
        padding: 14px;
    }
    .zones-product-card .image-wrap::before,
    .zones-product-card .image-wrap::after {
        width: 14px;
        height: 14px;
    }
    .zones-product-card .info {
        padding: 12px 14px;
    }
    .zones-product-card .vendor {
        font-size: 9px;
        letter-spacing: 0.18em;
    }
    .zones-product-card .name {
        font-size: 12px;
        margin-bottom: 10px;
    }
    .zones-product-card .price {
        font-size: 16px;
    }
    .zones-product-card .stock-indicator {
        font-size: 9px;
        padding: 3px 7px;
    }
    .zones-product-card .badge {
        font-size: 8px;
        padding: 3px 8px;
        top: 8px;
        left: 8px;
    }
    .zones-card-wishlist {
        width: 30px;
        height: 30px;
        top: 8px;
        right: 8px;
    }
    .zones-card-wishlist svg {
        width: 14px;
        height: 14px;
    }

    /* Single product page */
    .zones-product-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .zones-product-title {
        font-size: 22px !important;
    }
    .zones-price-main {
        font-size: 32px !important;
    }
    .zones-price-trust {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .zones-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .zones-product-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .zones-product-actions .zones-quantity {
        align-self: center;
    }

    /* PC Builder mobile */
    .zones-builder-presets {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .zones-preset .preset-inner {
        padding: 20px 12px;
    }
    .zones-preset-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    .zones-preset-name {
        font-size: 13px;
    }
    .zones-preset-desc {
        font-size: 10px;
    }

    /* PC Builder hero */
    .zones-builder-hero {
        padding: 32px 0 40px;
    }
    .zones-builder-hero .builder-h1 {
        font-size: 2.5rem;
    }
    .zones-builder-hero .builder-subtitle {
        font-size: 13px;
    }

    /* Components */
    .zones-component {
        padding: 14px;
        gap: 12px;
        grid-template-columns: 44px 1fr auto;
    }
    .zones-component-icon {
        width: 44px;
        height: 44px;
    }
    .zones-component-icon svg {
        width: 22px;
        height: 22px;
    }
    .zones-component-info .type-name {
        font-size: 10px;
        letter-spacing: 0.18em;
    }
    .zones-component-info .name {
        font-size: 12px;
    }
    .zones-pick-btn-modern {
        padding: 7px 10px;
        font-size: 10px;
    }

    /* Section titles */
    .zones-section-title {
        font-size: 1.75rem !important;
    }
    .zones-section-eyebrow {
        font-size: 10px;
        padding: 5px 11px;
    }

    /* Categories */
    .zones-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .zones-cat-card {
        padding: 18px 14px !important;
    }

    /* Hero on phone */
    .zones-hero-main {
        padding: 24px 16px !important;
        min-height: 280px !important;
    }
    .zones-hero-title {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .zones-hero-eyebrow {
        font-size: 10px;
    }
    .zones-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* Brand filter mobile */
    .zones-brand-filter {
        padding: 14px;
    }
    .zones-brand-filter .brand-pill {
        padding: 5px 12px;
        font-size: 11px;
    }

    /* Sticky bar mobile already optimized but tweak */
    .zones-sticky-buy-bar .zones-container {
        padding: 0 10px;
        gap: 10px;
    }
}

/* Tiny phones (max 380px) */
@media (max-width: 380px) {
    .zones-products-grid {
        grid-template-columns: 1fr;
    }
    .zones-builder-presets {
        grid-template-columns: 1fr;
    }
    .zones-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
    /* On touch devices, scan-line animations etc are subtle */
    .zones-product-card:hover {
        transform: none;
    }
    /* Ensure buttons big enough */
    .zones-btn,
    .zones-pick-btn-modern,
    .zones-add-to-cart {
        min-height: 44px;
    }
}

/* ============================================
   v4.2.0 - HERO BANNER SLOTS (dual rotating)
   ============================================ */

.zones-hero-banners {
    padding: 32px 0 48px;
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(93, 213, 232, 0.04), transparent 70%);
}

.zones-banners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 360px;
}

.zones-banner-slot {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    min-height: 360px;
    background: #050810;
    border: 1px solid var(--border-subtle);
}

/* Empty placeholder */
.banner-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    min-height: 360px;
}

/* Individual slide (each product banner) */
.banner-slide {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, var(--accent, #5dd5e8) 0%, transparent 60%),
        linear-gradient(135deg, var(--bg-from, #001a33) 0%, var(--bg-to, #003366) 100%);
    text-decoration: none;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: block;
}
.banner-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Background decorations - subtle pattern */
.banner-slide .banner-bg-decor {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(255, 255, 255, 0.02) 30px,
            rgba(255, 255, 255, 0.02) 31px
        );
    pointer-events: none;
}

/* Dark overlay for readability */
.banner-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Content layout */
.banner-slide .banner-content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 100%;
    padding: 32px;
    gap: 20px;
}

.banner-slide .banner-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 4;
}

.banner-slide .banner-brand {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.35em;
    font-weight: 800;
    color: var(--accent, #5dd5e8);
    text-shadow: 0 0 16px currentColor;
    text-transform: uppercase;
    line-height: 1;
}

.banner-slide .banner-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.banner-slide .banner-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}
.banner-slide .banner-price .price-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.banner-slide .banner-price .price-value {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.banner-slide .banner-price del {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 400;
    margin-right: 6px;
    text-shadow: none;
}
.banner-slide .banner-price ins {
    text-decoration: none;
}

.banner-slide .banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent, #5dd5e8);
    color: #000;
    padding: 12px 20px;
    border-radius: 100px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow:
        0 0 24px var(--accent, rgba(93, 213, 232, 0.5)),
        0 6px 20px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    width: fit-content;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.banner-slide:hover .banner-cta {
    transform: translateY(-2px);
    box-shadow:
        0 0 32px var(--accent, rgba(93, 213, 232, 0.8)),
        0 10px 24px rgba(0, 0, 0, 0.5);
    gap: 12px;
}

/* Product image */
.banner-slide .banner-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12px;
}
.banner-slide .banner-image::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 60%);
    filter: blur(40px);
}
.banner-slide .banner-image img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-slide:hover .banner-image img {
    transform: scale(1.05) rotate(-2deg);
}

/* NEW tag */
.banner-slide .banner-new-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
}

/* Dots indicator */
.zones-banner-slot .banner-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.zones-banner-slot .banner-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.zones-banner-slot .banner-dots .dot.active {
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    width: 24px;
    border-radius: 4px;
}
.zones-banner-slot .banner-dots .dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Hover on whole slot */
.zones-banner-slot:hover {
    border-color: var(--border-bright);
}

/* RESPONSIVE */
@media (max-width: 968px) {
    .zones-banners-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .zones-banner-slot {
        min-height: 280px;
    }
    .banner-slide .banner-content {
        padding: 24px;
    }
    .banner-slide .banner-image img {
        max-height: 200px;
    }
}
@media (max-width: 600px) {
    .zones-hero-banners {
        padding: 20px 0 32px;
    }
    .zones-banner-slot {
        min-height: 380px;
    }
    .banner-slide .banner-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        padding: 20px;
        gap: 12px;
    }
    .banner-slide .banner-text {
        order: 2;
        gap: 10px;
    }
    .banner-slide .banner-image {
        order: 1;
        height: auto;
        padding: 0;
    }
    .banner-slide .banner-image img {
        max-height: 150px;
    }
    .banner-slide::before {
        background:
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    }
    .banner-slide .banner-title {
        font-size: 1.1rem;
        -webkit-line-clamp: 2;
    }
    .banner-slide .banner-price .price-value {
        font-size: 1.5rem;
    }
    .banner-slide .banner-cta {
        padding: 10px 16px;
        font-size: 11px;
    }
}

/* ============================================
   v4.2.1 - Brand banner + PC Builder card hero
   ============================================ */

/* Override grid - 2fr/1fr like original hero */
.zones-hero-banners .zones-banners-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    min-height: 420px;
}

/* Brand banner specific layout */
.banner-slide.brand-banner {
    display: flex;
    align-items: center;
}

.banner-slide.brand-banner .banner-content {
    grid-template-columns: 1fr !important;
    padding: 48px 56px !important;
    width: 100%;
}

.banner-slide .banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow: 0 0 12px currentColor;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    width: fit-content;
    backdrop-filter: blur(8px);
}
.banner-slide .banner-tag .tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px currentColor;
    animation: zones-pulse 2s ease-in-out infinite;
}

.banner-slide .banner-brand-big {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-top: 16px;
    text-shadow:
        0 0 32px var(--accent),
        0 4px 24px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.banner-slide.brand-banner .banner-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    line-height: 1.25;
    margin: 8px 0 0;
    -webkit-line-clamp: unset !important;
    display: block !important;
    max-width: 480px;
}

.banner-slide .banner-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 0 24px;
    max-width: 420px;
}

/* Geometric shapes for brand pattern */
.banner-geometric {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.banner-geometric .geo-shape {
    position: absolute;
    border: 2px solid var(--accent);
    opacity: 0.15;
    transition: opacity 0.6s;
}
.banner-slide.active .banner-geometric .geo-shape {
    opacity: 0.25;
}
.banner-geometric .s1 {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    right: -80px;
    top: -80px;
    border-width: 1px;
}
.banner-geometric .s2 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: 80px;
    bottom: -40px;
    border-width: 1px;
    transform: rotate(45deg);
}
.banner-geometric .s3 {
    width: 60px;
    height: 60px;
    right: 200px;
    top: 80px;
    border-width: 1px;
    transform: rotate(45deg);
    border-radius: 8px;
}

/* Accent glow line right side */
.banner-slide.brand-banner::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 20px var(--accent);
    opacity: 0.6;
}

/* Restore hero card (PC Builder) for the right column */
.zones-hero-banners .zones-hero-card {
    position: relative;
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    isolation: isolate;
    min-height: 420px;
    display: block;
}
.zones-hero-banners .zones-hero-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 0 32px rgba(93, 213, 232, 0.15);
}

.zones-hero-banners .zones-hero-card .rgb-border-glow {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(93, 213, 232, 0) 30deg,
        rgba(93, 213, 232, 0.4) 60deg,
        rgba(125, 245, 255, 0.6) 90deg,
        rgba(93, 213, 232, 0.4) 120deg,
        rgba(93, 213, 232, 0) 150deg,
        transparent 180deg,
        transparent 360deg
    );
    animation: pcb-border-rotate 8s linear infinite;
    z-index: -1;
    pointer-events: none;
    filter: blur(20px);
}

@keyframes pcb-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.zones-hero-banners .zones-card-content {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    padding: 32px 28px;
    border-radius: 19px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.zones-hero-banners .zones-card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--accent-glow);
    padding: 5px 12px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 100px;
    width: fit-content;
}

.zones-hero-banners .zones-card-label .zones-status-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-bright);
    animation: zones-pulse 2s ease-in-out infinite;
}

.zones-hero-banners .zones-card-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}
.zones-hero-banners .zones-card-title .accent {
    color: var(--accent-bright);
    text-shadow: 0 0 16px var(--accent-glow);
}

.zones-hero-banners .zones-card-desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 0;
}

.zones-hero-banners .pc-builder-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
}
.zones-hero-banners .pc-builder-visual svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.zones-hero-banners .pcb-component {
    animation: pcb-pulse 3s ease-in-out infinite;
}
.zones-hero-banners .pcb-component.c2 { animation-delay: 0.6s; }
.zones-hero-banners .pcb-component.c3 { animation-delay: 1.2s; }
.zones-hero-banners .pcb-component.c4 { animation-delay: 1.8s; }
@keyframes pcb-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.zones-hero-banners .pcb-line {
    stroke-dasharray: 4 4;
    animation: pcb-flow 1.5s linear infinite;
    opacity: 0.5;
}
@keyframes pcb-flow {
    to { stroke-dashoffset: -8; }
}

.zones-hero-banners .pcb-spec {
    fill: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

/* Responsive */
@media (max-width: 968px) {
    .zones-hero-banners .zones-banners-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .zones-banner-slot {
        min-height: 320px;
    }
    .zones-hero-banners .zones-hero-card {
        min-height: 320px;
    }
    .banner-slide.brand-banner .banner-content {
        padding: 32px !important;
    }
    .banner-slide .banner-brand-big {
        font-size: 2.5rem;
    }
}
@media (max-width: 600px) {
    .banner-slide.brand-banner .banner-content {
        padding: 24px !important;
    }
    .banner-slide .banner-brand-big {
        font-size: 2rem;
    }
    .banner-slide.brand-banner .banner-title {
        font-size: 1.1rem;
    }
    .banner-slide .banner-subtitle {
        font-size: 12px;
    }
    .banner-geometric .s1 {
        width: 200px;
        height: 200px;
    }
    .zones-hero-banners .zones-card-content {
        padding: 24px 20px;
    }
}

/* ============================================
   v4.2.2 - FULL-WIDTH HERO CAROUSEL (MSI-style)
   ============================================ */

.zones-hero-carousel {
    padding: 0;
    position: relative;
    background: #000;
    overflow: hidden;
}

.zones-carousel-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 21 / 9; /* Cinematic ratio like MSI */
    background: #000;
}

.zones-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.carousel-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Navigation arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}
.carousel-arrow:hover {
    background: rgba(93, 213, 232, 0.2);
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    box-shadow: 0 0 24px var(--accent-glow);
}
.carousel-prev {
    left: 20px;
}
.carousel-next {
    right: 20px;
}

/* Dots indicator */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.carousel-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 0;
}
.carousel-dots .dot.active {
    background: #fff;
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
.carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Tablet/mobile */
@media (max-width: 968px) {
    .zones-carousel-wrap {
        aspect-ratio: 16 / 9;
    }
    .carousel-arrow {
        width: 40px;
        height: 40px;
    }
    .carousel-prev { left: 12px; }
    .carousel-next { right: 12px; }
}
@media (max-width: 600px) {
    .zones-carousel-wrap {
        aspect-ratio: 4 / 3;
    }
    .carousel-arrow {
        width: 36px;
        height: 36px;
        opacity: 0.7;
    }
    .carousel-arrow svg {
        width: 16px;
        height: 16px;
    }
    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }
    .carousel-dots {
        bottom: 12px;
        padding: 6px 12px;
        gap: 6px;
    }
    .carousel-dots .dot {
        width: 6px;
        height: 6px;
    }
    .carousel-dots .dot.active {
        width: 20px;
    }
}

/* ============================================
   v4.2.5 - CONTACT PAGE
   ============================================ */

.zones-contact-page {
    background: #000;
    min-height: 100vh;
}

/* HERO */
.contact-hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}
.contact-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.contact-bg-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(93, 213, 232, 0.15), transparent 60%);
    filter: blur(80px);
}
.contact-hero-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 7px 16px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-shadow: 0 0 12px var(--accent-glow);
    margin-bottom: 24px;
}
.contact-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-bright);
    animation: zones-pulse 2s ease-in-out infinite;
}
.contact-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
.contact-title .accent {
    background: linear-gradient(90deg, #0a1f3d 0%, #1e4a8e 15%, #3a8bbf 30%, #5dd5e8 50%, #7df5ff 60%, #5dd5e8 70%, #3a8bbf 85%, #1e4a8e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: section-title-rgb 8s linear infinite;
    filter: drop-shadow(0 0 24px rgba(93, 213, 232, 0.4));
}
.contact-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    max-width: 560px;
    margin: 0 auto;
}

/* MAIN */
.contact-main {
    padding: 40px 0 80px;
}

/* Primary contact cards */
.contact-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 56px;
}
@media (max-width: 968px) {
    .contact-primary-grid {
        grid-template-columns: 1fr;
    }
}

.contact-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    padding: 2px;
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-card:hover {
    transform: translateY(-6px);
}

.contact-card .card-rgb-border {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--accent) 90deg,
        var(--accent-bright) 180deg,
        var(--accent) 270deg,
        transparent 360deg
    );
    animation: pcb-border-rotate 8s linear infinite;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 0.4s;
}
.contact-card:hover .card-rgb-border {
    opacity: 1;
    animation-duration: 4s;
}

.contact-card .card-inner {
    background: linear-gradient(160deg, #0a1018 0%, #050810 100%);
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.contact-card .card-icon {
    width: 64px;
    height: 64px;
    background: rgba(93, 213, 232, 0.08);
    border: 1px solid var(--border-bright);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px var(--accent-glow));
    transition: var(--transition);
}
.contact-card:hover .card-icon {
    background: rgba(93, 213, 232, 0.15);
    transform: scale(1.05);
    box-shadow: 0 0 24px var(--accent-glow);
}

.contact-card .card-label {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-size: 11px;
    letter-spacing: 0.25em;
    font-weight: 800;
    text-shadow: 0 0 8px var(--accent-glow);
}

.contact-card .card-value {
    font-family: var(--font-display);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.contact-card .card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.contact-card .card-meta .meta-dot {
    width: 6px;
    height: 6px;
    background: var(--text-dim);
    border-radius: 50%;
}
.contact-card .card-meta .meta-dot.online {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: zones-pulse 2s ease-in-out infinite;
}

.contact-card .card-arrow {
    margin-top: auto;
    color: var(--accent-bright);
    align-self: flex-end;
    transition: transform 0.3s;
}
.contact-card:hover .card-arrow {
    transform: translateX(6px);
}

/* Section title */
.contact-section {
    margin-bottom: 56px;
}
.contact-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.contact-section-title .title-bar {
    width: 4px;
    height: 28px;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border-radius: 4px;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Department cards */
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.dept-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.dept-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent-bright);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 0 12px var(--accent-glow);
}
.dept-card:hover {
    border-color: var(--border-bright);
    transform: translateX(4px);
    background: linear-gradient(135deg, #0d1622 0%, #060a14 100%);
}
.dept-card:hover::before {
    opacity: 1;
}
.dept-icon {
    width: 44px;
    height: 44px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.dept-content {
    min-width: 0;
}
.dept-name {
    font-family: var(--font-display);
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.dept-email {
    color: var(--accent-bright);
    font-size: 12px;
    font-family: var(--font-mono);
    word-break: break-all;
    text-shadow: 0 0 6px var(--accent-glow);
}

/* Info grid (hours + location) */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 56px;
}
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 28px;
}
.info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent-bright);
}
.info-header svg {
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.info-header h3 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-subtle);
    color: var(--text);
    font-size: 14px;
}
.hours-row:last-child { border-bottom: none; }
.hours-row .hours-time {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 0 6px var(--accent-glow);
}
.hours-row.closed .hours-time {
    color: var(--danger);
    text-shadow: 0 0 6px rgba(255, 71, 87, 0.4);
}

.address {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}
.address strong {
    color: var(--text-bright);
    font-family: var(--font-display);
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}
.text-muted {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

/* Social cards */
.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 768px) {
    .social-grid { grid-template-columns: repeat(2, 1fr); }
}

.social-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-bright);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition);
}
.social-card svg {
    width: 28px;
    height: 28px;
    color: var(--accent-bright);
    transition: var(--transition);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.social-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-bright);
    box-shadow: 0 0 24px var(--accent-glow);
}
.social-card.facebook:hover { color: #1877f2; }
.social-card.facebook:hover svg { color: #1877f2; filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.5)); }
.social-card.instagram:hover { color: #e4405f; }
.social-card.instagram:hover svg { color: #e4405f; filter: drop-shadow(0 0 8px rgba(228, 64, 95, 0.5)); }
.social-card.tiktok:hover { color: #ff0050; }
.social-card.tiktok:hover svg { color: #ff0050; filter: drop-shadow(0 0 8px rgba(255, 0, 80, 0.5)); }
.social-card.youtube:hover { color: #ff0000; }
.social-card.youtube:hover svg { color: #ff0000; filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.5)); }

/* Mobile */
@media (max-width: 600px) {
    .contact-hero { padding: 40px 0 30px; }
    .contact-main { padding: 20px 0 60px; }
    .contact-card .card-inner { padding: 24px 22px; }
    .contact-card .card-value { font-size: 18px; }
    .info-card { padding: 22px 20px; }
    .dept-card { padding: 14px 16px; }
    .social-card { padding: 18px; font-size: 11px; }
    .social-card svg { width: 24px; height: 24px; }
}

/* ============================================
   v4.2.6 - INFO PAGES (Доставка, Гаранция, Връщане, B2B, За нас, Условия, GDPR)
   ============================================ */

.zones-info-page {
    background: #000;
    min-height: 100vh;
}

/* HERO (shared with contact page style) */
.zones-info-page .info-hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}
.info-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.info-bg-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(93, 213, 232, 0.15), transparent 60%);
    filter: blur(80px);
}
.info-hero-inner {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 7px 16px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-shadow: 0 0 12px var(--accent-glow);
    margin-bottom: 24px;
}
.info-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-bright);
    animation: zones-pulse 2s ease-in-out infinite;
}
.info-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.info-subtitle {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 620px;
}

/* CONTENT WRAPPER */
.zones-info-page .info-content {
    padding: 20px 0 80px;
}

.info-block {
    margin-bottom: 56px;
}

/* SECTION TITLE */
.info-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.info-section-title .title-bar {
    width: 4px;
    height: 28px;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border-radius: 4px;
    box-shadow: 0 0 12px var(--accent-glow);
    flex-shrink: 0;
}

.info-lead {
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
    max-width: 720px;
    margin: 0 0 24px;
}

/* CARDS GRID */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.info-cards-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .info-cards-grid.two-col {
        grid-template-columns: 1fr;
    }
}

/* FEATURE CARD */
.info-feature-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 24px 22px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.info-feature-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-4px);
    box-shadow: 0 0 24px rgba(93, 213, 232, 0.12);
}
.info-feature-card.highlight {
    background:
        radial-gradient(circle at top right, rgba(93, 213, 232, 0.08), transparent 60%),
        linear-gradient(135deg, #0a1622 0%, #050810 100%);
    border-color: var(--border-bright);
}
.info-feature-card .feature-icon {
    width: 52px;
    height: 52px;
    background: rgba(93, 213, 232, 0.08);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    margin-bottom: 14px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.info-feature-card .feature-title {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-size: 11px;
    letter-spacing: 0.25em;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 6px var(--accent-glow);
}
.info-feature-card .feature-value {
    font-family: var(--font-display);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.info-feature-card .feature-desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* COURIER CARD */
.info-courier-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 28px;
    transition: var(--transition);
}
.info-courier-card:hover {
    border-color: var(--border-bright);
    box-shadow: 0 0 24px rgba(93, 213, 232, 0.1);
}
.courier-name {
    font-family: var(--font-display);
    color: var(--accent-bright);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    text-shadow: 0 0 12px var(--accent-glow);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.courier-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.courier-features li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.courier-features li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--accent-bright);
    border-bottom: 2px solid var(--accent-bright);
    transform: rotate(45deg);
    transform-origin: top left;
}

/* PRICING TABLE */
.info-pricing-table {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.pricing-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    padding: 16px 22px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 14px;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-row.pricing-header {
    background: rgba(93, 213, 232, 0.04);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 0 6px var(--accent-glow);
}
.pricing-row .price {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-weight: 700;
    text-shadow: 0 0 6px var(--accent-glow);
}
.pricing-row .price.free {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
    font-weight: 900;
}
.pricing-row .time {
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-mono);
}
.pricing-row.highlight {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.05), transparent);
    border-left: 3px solid #4ade80;
}
@media (max-width: 600px) {
    .pricing-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 18px;
    }
    .pricing-row.pricing-header { display: none; }
}

/* PAYMENT GRID */
.info-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.payment-method {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--transition);
}
.payment-method:hover {
    border-color: var(--border-bright);
    transform: translateX(4px);
}
.payment-icon {
    width: 44px;
    height: 44px;
    background: rgba(93, 213, 232, 0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.payment-info {
    min-width: 0;
}
.payment-name {
    font-family: var(--font-display);
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.payment-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* CHECKLIST */
.info-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
}
.info-checklist li {
    padding: 14px 18px 14px 48px;
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}
.info-checklist.positive li::before {
    content: '✓';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid #4ade80;
    border-radius: 50%;
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}
.info-checklist.negative li::before {
    content: '✕';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid #ff4757;
    border-radius: 50%;
    color: #ff4757;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}

/* STEPS */
.info-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.step-item {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: var(--transition);
}
.step-item:hover {
    border-color: var(--border-bright);
    transform: translateX(4px);
}
.step-num {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background:
        radial-gradient(circle, rgba(93, 213, 232, 0.2), transparent 70%),
        linear-gradient(135deg, #0a1622 0%, #050810 100%);
    border: 2px solid var(--accent-bright);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent-glow);
    box-shadow: 0 0 16px var(--accent-glow);
}
.step-content {
    flex: 1;
    min-width: 0;
}
.step-title {
    font-family: var(--font-display);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.step-content p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}
.step-content strong {
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}

/* CALLOUT */
.info-callout {
    background:
        radial-gradient(circle at top right, rgba(93, 213, 232, 0.06), transparent 60%),
        linear-gradient(135deg, #0a1622 0%, #050810 100%);
    border: 1px solid var(--border-bright);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.info-callout.cyan {
    border-color: var(--accent-bright);
    box-shadow: 0 0 32px rgba(93, 213, 232, 0.15);
}
.callout-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(93, 213, 232, 0.08);
    border: 1px solid var(--border-bright);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 12px var(--accent-glow));
}
.callout-content {
    flex: 1;
    min-width: 0;
}
.callout-content h3 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.callout-content p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 6px;
}
.callout-content a {
    color: var(--accent-bright);
    text-decoration: none;
    text-shadow: 0 0 6px var(--accent-glow);
    transition: var(--transition);
}
.callout-content a:hover {
    color: #fff;
}
.callout-content strong {
    color: var(--accent-bright);
}

/* STATS GRID */
.info-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .info-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
    background:
        radial-gradient(circle at top, rgba(93, 213, 232, 0.06), transparent 60%),
        linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 28px 18px;
    text-align: center;
    transition: var(--transition);
}
.stat-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-4px);
    box-shadow: 0 0 24px rgba(93, 213, 232, 0.15);
}
.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    color: var(--accent-bright);
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 20px var(--accent-glow);
    letter-spacing: -0.03em;
}
.stat-label {
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* COMPANY INFO CARD */
.info-company-card {
    background: linear-gradient(135deg, #0a1018 0%, #050810 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 8px 28px;
}
.company-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--border-subtle);
    align-items: center;
}
.company-row:last-child { border-bottom: none; }
.row-label {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-size: 11px;
    letter-spacing: 0.25em;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 6px var(--accent-glow);
}
.row-value {
    color: var(--text-bright);
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}
.row-value a {
    color: var(--accent-bright);
    text-decoration: none;
    text-shadow: 0 0 6px var(--accent-glow);
}
.row-value a:hover {
    color: #fff;
}
@media (max-width: 600px) {
    .company-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* LEGAL PAGE (Условия, Поверителност) */
.legal-page .legal-content {
    max-width: 920px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(10, 16, 24, 0.5) 0%, transparent 100%);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    padding: 40px 48px;
}
.legal-content h2 {
    font-family: var(--font-display);
    color: var(--accent-bright);
    font-size: 22px;
    font-weight: 800;
    margin: 36px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    letter-spacing: -0.01em;
    text-shadow: 0 0 8px var(--accent-glow);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 12px;
}
.legal-content p {
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 14px;
}
.legal-content ul {
    margin: 12px 0 18px;
    padding-left: 24px;
}
.legal-content ul li {
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 6px;
}
.legal-content ul li::marker {
    color: var(--accent-bright);
}
.legal-content strong {
    color: var(--text-bright);
    font-weight: 700;
}
.legal-content a {
    color: var(--accent-bright);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
    transition: var(--transition);
}
.legal-content a:hover {
    color: #fff;
    border-bottom-color: #fff;
}
.legal-contacts {
    background: rgba(93, 213, 232, 0.04);
    border-left: 3px solid var(--accent-bright);
    padding: 18px 24px;
    border-radius: 8px;
    margin: 16px 0;
}
.legal-date {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    font-style: italic;
    text-align: right;
}

@media (max-width: 768px) {
    .legal-page .legal-content {
        padding: 28px 22px;
        border-left: none;
        border-right: none;
    }
    .legal-content h2 { font-size: 19px; }
    .step-item { padding: 18px; gap: 14px; }
    .step-num { width: 44px; height: 44px; font-size: 20px; }
    .info-callout { padding: 22px; gap: 16px; }
    .callout-icon { width: 48px; height: 48px; }
    .callout-content h3 { font-size: 17px; }
    .info-cards-grid { gap: 12px; }
    .info-feature-card { padding: 20px 18px; }
}

/* Mobile hero */
@media (max-width: 600px) {
    .zones-info-page .info-hero { padding: 40px 0 30px; }
    .zones-info-page .info-content { padding: 10px 0 60px; }
    .info-block { margin-bottom: 36px; }
}