/* Start:/configurator/style.css?177910491535404*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #07090c;
    --surface: #11141a;
    --surface-light: #1a1f28;
    --accent: #b8ff00;
    --accent-muted: #b8ff0069;
    --accent-glow: rgba(184, 255, 0, 0.2);
    --danger: #ff4d4d;
    --danger-red: #dc130d;
    --info: #00d1ff;
    --border: rgba(255, 255, 255, 0.08);
    --border-gray: rgba(255, 255, 255, 0.12);
    --text-dim: #64748b;
    --text-light: #9ca3af;
    --btn-gray: #1c212a;
    --highlight: #6c5ce7;
    --tour-highlight: #6c5ce7;
    --neon-green: #a7e205;
    --bg-dark: #0e0e0e;
    --bg-card: #161616;
}

body {
    font-family: 'Manrope', sans-serif;
    background: var(--bg);
    color: #f1f5f9;
    line-height: 1.5;
    overflow-x: hidden;
}


.save-build-btn {
    background: rgb(25 25 26);
    border: 1px solid rgb(111 111 111 / 30%);
}

.save-build-btn:hover {
    background: var(--accent);
    color: #000;
}

.save-build-btn:hover svg { stroke: #000; }

.menu-btn-white {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.menu-btn-white span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    transition: all 0.3s;
}

.menu-btn-white:hover { background: rgba(255, 255, 255, 0.1); }
.menu-btn-white.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn-white.active span:nth-child(2) { opacity: 0; }
.menu-btn-white.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.overlay-menu {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--neon-green);
    display: flex;
    align-items: center;
    padding-left: 10%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}
.overlay-menu.active { right: 0; }
.nav-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 25px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateX(30px);
}
.overlay-menu.active .nav-links a { opacity: 1; transform: translateX(0); }
.nav-links a:hover { color: var(--neon-green); padding-left: 15px; }

.comp-card.highlight { animation: highlightFlash 1.6s ease-out; }
@keyframes highlightFlash {
    0% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
    15% { border-color: var(--highlight); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.3); }
    30% { border-color: var(--highlight); box-shadow: 0 0 0 8px rgba(108, 92, 231, 0.15); }
    60% { border-color: var(--highlight); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.08); }
    100% { border-color: var(--border); box-shadow: none; }
}

.comp-card {
    position: relative;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 28px;
    padding: 28px 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
    scroll-margin-top: 120px;
}

/* Базовый кружок-индикатор в правом верхнем углу */
.comp-card::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    background: var(--surface-light);
    color: var(--text-dim);
    transition: all 0.2s ease;
    z-index: 5;
}

.comp-card.selected::before {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(184, 255, 0, 0.4);
}

.comp-card.not-selected::before {
    background: rgba(255, 255, 255, 0.05);
}

.comp-card.out-of-stock::before {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.4);
}

.comp-card.selected { background: rgba(184, 255, 0, 0.02); border-color: var(--border); }
.comp-card.out-of-stock { background: rgba(255, 77, 77, 0.02); border-color: var(--border); }

/* Стили для не выбранных карточек — компактные, в одну строку */
.comp-card.not-selected {
    background: rgba(255, 255, 255, 0.01);
    border-color: var(--border);
    padding: 12px 20px;
}
.comp-card.not-selected .card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
.comp-card.not-selected .comp-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}
.comp-card.not-selected .comp-img svg {
    width: 24px;
    height: 24px;
}
.comp-card.not-selected .comp-details {
    flex: 1;
    min-width: auto;
}
.comp-card.not-selected .body-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}
.comp-card.not-selected .cat-label {
    font-size: 11px;
}
.comp-card.not-selected .comp-name-wrapper {
    margin: 0;
}
.comp-card.not-selected .comp-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: var(--text-light);
}
.comp-card.not-selected .body-footer {
    display: none;
}
.comp-card.not-selected .butn-group {
    margin-left: auto;
}
.comp-card.not-selected .butn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}
.comp-card.not-selected::before {
    top: 14px;
    right: 18px;
    width: 10px;
    height: 10px;
}

.performance-card {
    background: linear-gradient(135deg, var(--surface) 0%, #0d0f15 100%);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 24px 28px;
    margin-bottom: 20px;
}
.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.performance-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}
.game-selector {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.game-selector:hover {
    background: rgba(184,255,0,0.1);
    border-color: var(--accent);
}
.game-dropdown {
    position: relative;
    display: inline-block;
}
.game-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    min-width: 200px;
    z-index: 100;
    overflow: hidden;
}
.game-dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: 0.2s;
}
.game-dropdown-content a:hover {
    background: rgba(184,255,0,0.1);
    color: var(--accent);
}
.game-dropdown.active .game-dropdown-content {
    display: block;
}
.fps-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-around;
    margin: 20px 0;
}
.fps-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
}
.fps-resolution {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.fps-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.fps-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dim);
}
.bottleneck-warning {
    background: rgba(0, 209, 255, 0.05);
    border: 1px solid rgba(0, 209, 255, 0.1);
    border-radius: 16px;
    padding: 12px 20px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.bottleneck-icon { font-size: 18px; }
.bottleneck-text { flex: 1; color: var(--info); }

.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    display: none;
    pointer-events: auto;
}
.tour-overlay.active { display: block; }
.tour-tooltip {
    position: fixed;
    background: var(--surface);
    border: 2px solid var(--tour-highlight);
    border-radius: 20px;
    padding: 16px 20px;
    max-width: 340px;
    min-width: 260px;
    z-index: 10000;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    pointer-events: auto;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
}
.tour-tooltip.top::before {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--tour-highlight) transparent transparent transparent;
}
.tour-tooltip.bottom::before {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent var(--tour-highlight) transparent;
}
.tour-tooltip.left::before {
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent var(--tour-highlight);
}
.tour-tooltip.right::before {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent var(--tour-highlight) transparent transparent;
}
.tour-title { font-size: 15px; font-weight: 700; color: var(--tour-highlight); margin-bottom: 8px; padding-right: 24px; }
.tour-text { font-size: 13px; line-height: 1.5; color: #cbd5e1; margin-bottom: 16px; }
.tour-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.tour-btn { padding: 6px 16px; border-radius: 30px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.tour-btn-next { background: var(--tour-highlight); color: #000; }
.tour-btn-prev { background: transparent; color: var(--text-light); border: 1px solid var(--border); }
.tour-btn-skip { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.tour-close { position: absolute; top: 12px; right: 16px; font-size: 18px; cursor: pointer; color: var(--text-dim); transition: 0.2s; line-height: 1; }
.tour-close:hover { color: var(--danger); }
.tour-highlight-element {
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 0 3px var(--tour-highlight), 0 0 0 8px rgba(108, 92, 231, 0.2);
    border-radius: 16px;
    transition: all 0.2s;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 32px;
    max-width: 550px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    transform: scale(0.95);
    transition: 0.3s;
}
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 20px; right: 24px; font-size: 28px; cursor: pointer; color: var(--text-dim); transition: 0.2s; }
.modal-close:hover { color: var(--accent); }
.modal-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-right: 30px; color: var(--accent); }

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-dim);
}
.info-icon:hover { background: var(--accent); color: #000; }

.tour-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--info);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin-left: 16px;
    transition: 0.2s;
    text-decoration: none;
}
.tour-trigger:hover { color: var(--accent); }

.psu-load-bar { background: rgba(255,255,255,0.1); border-radius: 10px; height: 8px; width: 100%; margin: 12px 0 8px; overflow: hidden; }
.psu-load-fill { background: linear-gradient(90deg, #00d1ff, #6c5ce7); border-radius: 10px; height: 100%; width: 0%; transition: width 0.3s ease; }
.psu-load-text { font-size: 12px; color: var(--text-light); display: flex; justify-content: space-between; }

.mobile-navbar {
    display: none;
    position: sticky;
    top: 65px;
    z-index: 1000;
    background: rgba(7, 9, 12, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.mobile-navbar.hidden { display: none; }
.mobile-show-menu-btn {
    display: none;
    position: sticky;
    top: 80px;
    z-index: 1000;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    gap: 8px;
    align-items: center;
}

.scrollable-wrapper { position: relative; }
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--accent);
    font-size: 16px;
    backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    transition: 0.2s;
    opacity: 0;
    pointer-events: none;
}
.scroll-arrow.visible-left { opacity: 0.8; pointer-events: auto; left: 0; }
.scroll-arrow.visible-right { opacity: 0.8; pointer-events: auto; right: 0; }
.scroll-arrow.visible-left:hover, .scroll-arrow.visible-right:hover { opacity: 1; background: var(--accent); color: #000; }

.mobile-groups { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-behavior: smooth; }
.mobile-groups-list { display: flex; gap: 4px; padding: 0 12px; list-style: none; white-space: nowrap; }
.mobile-groups-list li a { display: inline-block; padding: 12px 14px; font-size: 13px; font-weight: 600; color: #a0aec0; cursor: pointer; border-bottom: 2px solid transparent; }
.mobile-groups-list li.active a { color: var(--accent); border-bottom-color: var(--accent); }

.mobile-subgroups { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-behavior: smooth; border-top: 1px solid var(--border); background: rgba(0,0,0,0.3); }
.mobile-subgroups-list { display: flex; gap: 6px; padding: 8px 12px; list-style: none; white-space: nowrap; }
.mobile-subgroups-list li a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; color: #cbd5e1; font-size: 12px; font-weight: 500; border-radius: 20px; cursor: pointer; background: rgba(255,255,255,0.04); }
.mobile-subgroups-list li.active a { background: rgba(184,255,0,0.15); color: var(--accent); }
.mobile-subgroups-list li a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.app-container {
    max-width: 1760px;
    margin: 0 auto;
    padding: 0px 0px;
    display: grid;
    grid-template-columns: 300px 1fr 360px;
    gap: 32px;
    align-items: start;
}
.sidebar-nav {
    background: var(--surface);
    border-radius: 28px;
    border: 1px solid var(--border);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    padding: 0;
}
.sidebar-scroll-content {
    height: 100%;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 24px 20px;
}
.sidebar-scroll-content::-webkit-scrollbar {
    width: 22px;
}
.sidebar-scroll-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 15px;
    margin-bottom: 15px;
}
.sidebar-scroll-content::-webkit-scrollbar-thumb {
    background-color: #484f58;
    border-radius: 12px;
    border: 10px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}
.sidebar-scroll-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--neon-green, #a7e205);
}
.sidebar-scroll-content {
    scrollbar-width: thin;
    scrollbar-color: #484f58 transparent;
}
.nav-group { margin-bottom: 28px; }
.nav-title { font-size: 11px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 14px; font-weight: 800; }
.nav-item {
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #a0aec0;
    transition: 0.2s;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.nav-item .item-icon { width: 20px; height: 20px; flex-shrink: 0; margin-right: 8px; }
.nav-item .item-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nav-item .item-text { flex: 1; }
.nav-item:hover { background: rgba(255,255,255,0.03); color: #fff; }
.nav-item.active { background: rgba(184,255,0,0.12); color: var(--accent); font-weight: 700; }
.nav-item.done::after { content: '✓'; color: var(--accent); font-weight: 800; font-size: 13px; }
.nav-item.not-selected::after { content: '○'; color: var(--text-dim); font-size: 13px; }
.nav-item.out-of-stock::after { content: '✕'; color: var(--danger); font-size: 12px; }

.content-main { display: flex; flex-direction: column; gap: 30px; }
.page-title-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.page-title { font-size: 28px; font-weight: 800; }

.group-header { margin-top: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.group-header h2 { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }

.card-row { display: flex; gap: 24px; flex-wrap: wrap; }
.comp-img {
    width: 100px; height: 100px;
    background: #0a0e14;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comp-img img { width: 100%; object-fit: cover; }
.comp-img svg { width: 48px; height: 48px; fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.comp-card.selected .comp-img svg { stroke: var(--accent); }

.comp-details { flex: 1; min-width: 200px; }
.body-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.cat-label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); font-weight: 800; letter-spacing: 1.5px; }
.art-label { font-family: monospace; font-size: 12px; color: var(--text-light); opacity: 0.9; }
.comp-name-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px 0; }
.comp-name { font-size: 20px; font-weight: 700; line-height: 1.4; color: #fff; }

.advice-banner {
    background: rgba(0, 209, 255, 0.05);
    border: 1px solid rgba(0, 209, 255, 0.1);
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
.advice-banner>span{
    position: absolute;
    top: 10px;
    left: 10px;
}
.advice-text { font-size: 14px; color: var(--info); font-weight: 500; }

.quantity-control { display: flex; align-items: center; background: #00000040; border: 1px solid var(--border); border-radius: 44px; width: fit-content; overflow: hidden; margin: 12px 0 0; }
.q-btn { width: 40px; height: 40px; background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.q-input { width: 50px; text-align: center; background: transparent; border: none; color: #fff; font-weight: 700; font-size: 16px; outline: none; }

.body-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
}
.price { font-size: 32px; font-weight: 800; white-space: nowrap; }
.price.out-of-stock { opacity: 0.5; }
.butn-group { display: flex; gap: 12px; flex-wrap: wrap; }
.butn {
    height: 48px;
    border-radius: 40px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    padding: 0 24px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-gray);
    color: #fff;
    border: 1px solid var(--border);
    transition: 0.2s;
}
.butn-accent { background: var(--accent); color: #000; border: none; }
.butn-delete { width: 48px; padding: 0; justify-content: center; }
.butn-delete svg { width: 20px; height: 20px; fill: var(--text-dim); }

.summary-sidebar { position: sticky; top: 100px; }
.visual-box { background: var(--surface); border-radius: 28px; border: 1px solid var(--border); padding: 24px; text-align: center; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.case-img { width: 100%; max-width: 300px; height: auto; border-radius: 16px; object-fit: contain; }
.summary-card { background: var(--surface); border-radius: 28px; border: 1px solid var(--border); padding: 32px; }
.total-price { font-size: 44px; font-weight: 800; margin: 16px 0 24px; }
.butn-order { width: 100%; height: 50px; background: var(--accent); border: none; border-radius: 60px; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px var(--accent-glow); display: flex; align-items: center; justify-content: center; gap: 10px; }
.butn-order svg { width: 20px; height: 20px; stroke: #000; stroke-width: 1.8; fill: none; }
.butn-clear { width: 100%; margin-top: 14px; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 60px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Новый стиль для кнопок в правой панели — иконка сверху */
.tool-bar {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
.tool-btn {
    flex: 1;
    background: var(--btn-gray);
    border-radius: 40px;
    padding: 12px 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    text-align: center;
    line-height: 1.2;
}
.tool-btn:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.tool-btn:hover svg {
    stroke: #000;
}
.tool-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.history-bar {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
.history-btn {
    background: var(--btn-gray);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.history-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.saved-badge {
    background: var(--accent);
    color: #000;
    border-radius: 30px;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: 700;
    margin-left: -10px;
    margin-bottom: 10px;
}
.recent-builds {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.recent-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 8px;
}
.recent-item:hover { background: rgba(255,255,255,0.03); }
.recent-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.recent-load {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 20px;
    transition: 0.2s;
}
.recent-load:hover { background: rgba(184,255,0,0.1); }
.view-all-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--info);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}
.view-all-link:hover { color: var(--accent); }

.builds-list {
    max-height: 400px;
    overflow-y: auto;
}
.build-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: 0.2s;
}
.build-item:hover { background: rgba(255,255,255,0.05); }
.build-info { flex: 1; }
.build-name { font-weight: 700; margin-bottom: 4px; }
.build-date { font-size: 11px; color: var(--text-dim); }
.build-price { font-size: 14px; color: var(--accent); font-weight: 700; }
.build-actions { display: flex; gap: 8px; }
.build-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-dim);
    transition: 0.2s;
}
.build-action-btn:hover { background: rgba(255,255,255,0.1); color: var(--accent); }
.compare-table {
    width: 100%;
    border-collapse: collapse;
}
.compare-table th, .compare-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.compare-table th {
    text-align: left;
    color: var(--accent);
    font-weight: 700;
    width: 140px;
}
.compare-header {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    background: rgba(184,255,0,0.1);
}
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 40px;
    padding: 12px 24px;
    color: var(--accent);
    font-weight: 600;
    z-index: 2001;
    animation: fadeOut 2s ease forwards;
    pointer-events: none;
}
@keyframes fadeOut {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table td { padding: 12px 8px; vertical-align: top; }
.specs-table td:first-child { width: 40%; color: var(--text-dim); font-weight: 500; }
.specs-table td:last-child { color: #fff; }

.save-modal-option {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.save-modal-option:hover {
    background: rgba(184,255,0,0.08);
    border-color: var(--accent-muted);
}
.save-modal-option.selected {
    background: rgba(184,255,0,0.12);
    border-color: var(--accent);
}
.save-modal-option-title {
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.save-modal-option-desc {
    font-size: 12px;
    color: var(--text-dim);
}
.completion-bar {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    height: 6px;
    width: 100%;
    margin: 12px 0;
    overflow: hidden;
}
.completion-fill {
    background: var(--accent);
    border-radius: 20px;
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.build-preview {
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    padding: 12px;
    margin: 16px 0;
}
.build-preview-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.build-preview-item:last-child { border-bottom: none; }

.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(17, 20, 26, 0.96);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mobile-price { font-size: 20px; font-weight: 800; white-space: nowrap; }
.mobile-actions { display: flex; gap: 12px; align-items: center; }
.mobile-icon-btn {
    background: var(--btn-gray);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}
.mobile-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-icon-btn.accent { background: var(--accent); }
.mobile-icon-btn.accent svg { stroke: #000; }
.mobile-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent);
    color: #000;
    border-radius: 30px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

/* Мобильное оверлей меню */
.mobile-overlay-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-card);
    border-left: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    padding: 40px 20px;
}
.mobile-overlay-menu.active {
    right: 0;
}
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 300px;
}
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 60px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.mobile-menu-item:hover {
    background: rgba(184,255,0,0.1);
    border-color: var(--accent);
    color: var(--accent);
}
.mobile-menu-item.danger {
    color: var(--danger-red);
}
.mobile-menu-item.danger:hover {
    background: rgba(220,19,13,0.1);
    border-color: var(--danger-red);
}
.mobile-menu-badge {
    background: var(--accent);
    color: #000;
    border-radius: 30px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 700;
    margin-left: auto;
}
.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 32px;
    cursor: pointer;
    color: var(--text-dim);
    transition: 0.2s;
}
.mobile-menu-close:hover {
    color: var(--accent);
}

@media (min-width: 881px) {
    .mobile-navbar, .mobile-show-menu-btn, .mobile-bottom-bar, .mobile-overlay-menu { display: none !important; }
}
@media (max-width: 880px) {
    /*  .header {position: relative;top: 0 !important;}*/
    /* Уменьшаем отступ сверху для контента */
    .app-container {padding-top: 20px !important;}
    .app-container { grid-template-columns: 1fr; padding: 16px; padding-bottom: 70px; padding-top: 80px; }
    .sidebar-nav, .summary-sidebar { display: none; }
    .mobile-navbar, .mobile-show-menu-btn { display: block; }
    .mobile-bottom-bar { display: flex; }
    .comp-card { padding: 20px; scroll-margin-top: 140px; }
    .comp-card::before { top: 10px; right: 12px; width: 10px; height: 10px; }
    .comp-card.not-selected { padding: 10px 16px; }
    .comp-card.not-selected .comp-img { width: 32px; height: 32px; }
    .comp-card.not-selected .comp-img svg { width: 18px; height: 18px; }
    .comp-card.not-selected .comp-name { font-size: 13px; }
    .comp-card.not-selected .butn { height: 30px; padding: 0 12px; font-size: 12px; }
    .comp-img { width: 70px; height: 70px; }
    .comp-name { font-size: 16px; }
    .price { font-size: 24px; }
    .butn { padding: 0 16px; height: 42px; font-size: 13px; }
    .tour-tooltip { max-width: 280px; min-width: 220px; padding: 12px 16px; }
    .tour-title { font-size: 14px; }
    .tour-text { font-size: 12px; }
    .tour-btn { padding: 5px 12px; font-size: 11px; }
    .header-inner { padding: 0 20px; gap: 12px; }
    .header { height: 65px; }
    .phone-number { display: none; }
    .save-build-btn span { display: none; }
    .save-build-btn { padding: 8px; border-radius: 50%; }
    .header-actions { gap: 12px; }
    .header-actions .save-build-btn,
    .header-actions .saved-badge {
        display: none !important;
    }
    .search-wrapper { max-width: 200px; margin: 0 10px; }
    .search-container { width: 60%; }
    .search-container.expanded { width: 100%; }
    .logo-full { display: none; }
    .logo-short { display: block; }
    .logo-container svg { height: 35px; }
    .overlay-menu { width: 100%; right: -100%; border-left: none; }
    .nav-links a { font-size: 1.8rem; }
    .performance-card { padding: 16px; }
    .fps-value { font-size: 28px; }
    .fps-stats { gap: 12px; }
    .fps-item { min-width: 80px; }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; border: 2px solid var(--bg-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
* { scrollbar-width: thin; scrollbar-color: #333 var(--bg-dark); }
.status-badge.out-of-stock { color:#ff0000; font-size: 14px; font-weight: 500;}

@media (max-width: 880px) {
    /* Существующие стили */

    /* Скрыть кнопку "Мои сборки" в шапке на мобилке */
    .header-actions #showBuildsBtn {
        display: none !important;
    }
}
/* Хлебные крошки */
.breadcrumbs {
    margin-bottom: 16px;
    padding: 8px 0;
}

.breadcrumbs-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
}

.breadcrumb-link {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

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

.breadcrumb-separator {
    color: var(--border-gray);
    font-size: 12px;
}

.breadcrumb-current {
    color: var(--accent);
    font-weight: 600;
    pointer-events: none;
}

/* Мобильная версия */
@media (max-width: 880px) {
    .breadcrumbs {
        margin-bottom: 12px;
        padding: 6px 0;
    }
    .breadcrumbs-inner {
        font-size: 12px;
    }
}

.card-item+.card-empty{
    display: none;
}
.comp-card.not-selected .butn:hover{
    color: #000;
}

.mobile-navbar .mobile-groups-list li,.mobile-navbar .mobile-groups-list{
    margin: 0;
}
.mobile-subgroups .mobile-subgroups-list li,.mobile-subgroups .mobile-subgroups-list{
    margin: 0;
}
.mobile-subgroups .mobile-subgroups-list li:before, .mobile-navbar .mobile-groups-list li:before{
    content: '';
    display: none;
}
#assembly_order {
    color: #000;
}
#toastModalContent li{
    position: relative;
}
#toastModalContent li:before{
    position: absolute;
}
@media (max-width: 767px) {
    body .bottom-icons-panel {
        display: none !important;
    }
}
/* End */


/* Start:/bitrix/templates/aspro_max/components/webprostor/configurator.onepage/template_26_new/style.css?177910490810066*/
body #bx-panel
{
	z-index: 985 !important;
}

#webprostor_configurator
{
	margin-bottom: 20px;
}

#webprostor_configurator ul#platforms_navigation > li:before,
#webprostor_configurator #platforms_list ul > li:before
{
	display: none;
}

#webprostor_configurator ul#platforms_navigation > li
{
	padding-left: 0;
}

#webprostor_configurator #platforms_list .panel-heading
{
	border-radius: 0;
}

#webprostor_configurator #platforms_list .panel-heading > .row
{
	display: flex;
	align-items: center;
}

#webprostor_configurator #platforms_list .panel-heading a,
#webprostor_configurator #platforms_list .panel-heading h4
{
	margin: 0;
}

#webprostor_configurator .sticky-top,
#modalProducts .sticky-top
{
	position: sticky;
	top: 10px;
	z-index: 103;
}

#webprostor_configurator .sticky-bottom
{
	position: sticky;
	bottom: 0;
}

#webprostor_configurator #steps_groups .list-group-item h3
{
	margin-top: 5px;
	margin-bottom: 15px;
}

#webprostor_configurator #steps_groups .list-group-item.parent > h3 > svg
{
	max-height: 24px;
}

#webprostor_configurator .steps h4,
#webprostor_configurator .steps .products h5,
#webprostor_configurator .steps .price
{
	margin-top: 15px;
	margin-bottom: 15px;
}

#webprostor_configurator .steps .price
{
	white-space: nowrap;
}

#webprostor_configurator.compact-view .steps h4,
#webprostor_configurator.compact-view .steps .products h5,
#webprostor_configurator.compact-view .steps h3.price
{
	margin-top: 5px;
	margin-bottom: 10px;
	overflow-wrap: break-word;
}

#webprostor_configurator .steps .picture,
#webprostor_configurator .steps .description
{
	margin-bottom: 15px;
}

#webprostor_configurator .steps .picture svg
{
	max-width: 100%;
}

#webprostor_configurator .steps .properties
{
	word-wrap: break-word;
}

#webprostor_configurator.compact-view .steps .picture,
#webprostor_configurator.compact-view .steps .description
{
	margin-bottom: 10px;
}

#webprostor_configurator .steps .list-group-item button
{
	margin-bottom: 15px;
}

#webprostor_configurator.compact-view .steps .list-group-item button
{
	margin-bottom: 5px;
}

#webprostor_configurator .steps .quantity-wrapper
{
	margin-top: 10px;
	display: flex;
}

#webprostor_configurator .steps .quantity-wrapper a
{
	display: inline-block;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	border: 1px solid #f3f6f8;
	color: #cfd5d9;
	width: 18px;
	vertical-align: top;
	text-decoration: none;
}

#webprostor_configurator .steps .quantity-wrapper a:not(.disabled):hover
{
	color: #222;
    box-shadow: 0px 2px 7px 0px rgba(57, 74, 83, 0.2);
}

#webprostor_configurator .steps .quantity-wrapper a.disabled
{
	cursor: not-allowed;
}

#webprostor_configurator .steps input[data-type="quantity"]
{
	max-width: 40px;
	display: inline-block;
	
	border-width: 0 !important;
	box-shadow: none !important;
	
	font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

#webprostor_configurator .steps .products > div:not(:last-of-type, .deleted)
{
	padding-bottom: 15px;
}

#webprostor_configurator #order_wrapper
{
	display: flex;
}

#webprostor_configurator #order_wrapper #assembly_quantity
{
	max-width: 60px;
}

#webprostor_configurator #order_wrapper #assembly_quantity + a
{
	margin-left: 5px;
}

#webprostor_configurator.compact-view h3,
#webprostor_configurator.compact-view h4,
#webprostor_configurator.compact-view h5,
#webprostor_configurator.compact-view strong
{
	font-weight: 500;
}

#webprostor_configurator.compact-view .parent .alerts
{
	padding-top: 15px;
}

#webprostor_configurator.compact-view .parent .alerts .alert
{
	margin-bottom: 0;
}

#webprostor_configurator.print .webprostor-configurator-items-list table .th-mobile
{
	display: none;
}

#webprostor_configurator #assembly_quantity
{
	margin-bottom: 0px;
}

#webprostor_configurator #assembly_quantity.form-control-sm
{
	padding: 3px 6px !important;
    height: 28px;
}

#webprostor_configurator .panel-secondary
{
    border: 1px solid rgba(0,0,0,0.125);
}

#webprostor_configurator .panel-secondary > .panel-heading
{
	background-color: rgba(0,0,0,0.03);
	border-bottom: 1px solid rgba(0,0,0,0.125);
}

#webprostor_configurator .progress-bar-secondary
{
    background-color: #6c757d !important;
}

#webprostor_configurator .btn-secondary,
#modalProducts .btn-secondary
{
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

#modalProducts #sortPanel.sticky-top
{
	top: 0;
	z-index: 102;
}

#modalProducts #quick_search
{
	border-color: #ccc;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#modalProducts #sort li,
#modalProducts #views li
{
	margin-bottom: 0;
}

#modalProducts #sort li > a
{
	display: flex;
	align-items: center;
    padding-left: 10px;
    padding-right: 5px;
}

#modalProducts #sort li > a span + i
{
	margin-left: 3px;
}

#modalProducts .navbar ul li,
#modalProducts .webprostor-configurator-pagination ul li
{
	padding-left: 0;
}

#modalProducts .navbar ul li:before,
#modalProducts .webprostor-configurator-pagination ul li:before,
#modalProducts .webprostor-configurator-catalog-section ul li:before
{
	content: "";
}

#modalProducts .navbar-text
{
	margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

#modalProducts #productFilterRight .bx-filter .bx-filter-popup-result,
#modalProducts #productFilterRight .smart-filter-popup-result
{
	left: 97%;
	border-width: 2px 2px 2px 10px;
	-webkit-border-image: url(/bitrix/images/webprostor.configurator/result_popup_right.png) 4 4 4 20 repeat;
	-moz-border-image: url(/bitrix/images/webprostor.configurator/result_popup_right.png) 4 4 4 20 repeat;
	-o-border-image: url(/bitrix/images/webprostor.configurator/result_popup_right.png) 4 4 4 20 repeat;
	border-image: url(/bitrix/images/webprostor.configurator/result_popup_right.png) 4 4 4 20 fill repeat;
}

#modalProducts .webprostor-configurator-catalog-section .description h5
{
	margin-top: 0;
}

#modalProducts .webprostor-configurator-catalog-section .raiting
{
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: center !important;
}

.webprostor-configurator-modal .owl-carousel .owl-dots
{
	z-index: 3;
}

.modal-backdrop
{
	z-index: 985;
}

.webprostor-configurator-modal
{
	z-index: 990;
}

@media (min-width: 992px)
{
	#modalProducts .modal-xl,
	#modalProductInfo .modal-xl
	{
		width: 800px;
	}
}

@media(min-width: 1200px)
{
	#modalProducts .modal-xl,
	#modalProductInfo .modal-xl
	{
		width: 1140px;
	}
}

@media(min-width: 992px)
{
	#productFilterRight
	{
		display: block !important;
	}
}

@media(max-width: 992px)
{
	#modalProducts .sticky-top
	{
		position: relative;
		top: 0;
	}
	
	#modalProducts #sortPanel .navbar-text
	{
		clear: left;
	}
	
	#modalProducts #sortPanel .navbar-nav
	{
		clear: left;
		float: left !important;
	}
	
	#webprostor_configurator #assembly_info #platform_info img
	{
		max-width: 300px;
		margin: 0 auto;
	}
}

@media(min-width: 768px)
{
	#webprostor_configurator .text-sm-right
	{
		text-align: right;
	}
}

@media(max-width: 768px)
{
	
	#webprostor_configurator .steps
	{
		text-align: center;
	}
	
	#webprostor_configurator .steps .picture img
	{
		max-height: 150px;
		margin: 0 auto;
	}
	
	#webprostor_configurator .steps .sticky-bottom > div
	{
		width: 100%;
		text-align: center;
	}

	#webprostor_configurator .steps .quantity-wrapper
	{
		justify-content: center;
	}
	
	#webprostor_configurator .steps h3.price,
	#webprostor_configurator .steps .real-balance
	{
		margin-bottom: 10px !important;
	}

	#webprostor_configurator .steps .quantity-wrapper a
	{
		color: #222;
		box-shadow: 0 none;
	}
	
	#modalProducts #sortPanel .navbar-text
	{
		display: none !important;
	}
	
	#modalProducts #sortPanel .navbar-nav
	{
		clear: none;
	}
	
	#modalProducts #sort.navbar-nav
	{
		padding-left: 7.5px;
	}
	
	#modalProducts #views.navbar-nav
	{
		float: right !important;
		padding-right: 7.5px;
	}
	
	#modalProducts #sortPanel .navbar-nav > li
	{
		float: left !important;
	}
	
	#modalProducts #productFilterRight .bx-filter .bx-filter-popup-result,
	#modalProducts #productFilterRight .smart-filter-popup-result
	{
		position: absolute;
		bottom: auto;
		left: auto;
		right: 0;
		width: auto;
		padding: 15px;
		margin: 0;
		border: 0 none;
		background: #fff;
		z-index: 99999;
		border: 1px solid #dee2e6;
		border-right: 0;
		
		text-align: center;
		font-size: 18px;
		line-height: 28px;
	}
	
	#modalProducts #productFilterRight .bx-filter .bx-filter-popup-result a,
	#modalProducts #productFilterRight .smart-filter-popup-result a
	{
		border-radius: 4px;
		border: 1px solid #cecece;
		padding: 15px 25px;
		display: inline-block;
		margin-top: 3px;
	}
}

/*static styles*/
.top_info{
	background: #222222;
	padding: 16px;
	margin: 0 0 8px;
}
.top_info-text{
	display: flex;
	align-items: center;

}
.top_info-text .icon{
	width: 24px;
	height: 24px;
}
.top_info-text p{
	margin-bottom: 0;
	padding-left: 16px;
}
.top_grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -4px;
	margin-right: -4px;
}

.top_grid .grid .text {
	padding-left: 0;
	font-size: 12px;
}

.top_grid .grid .text p {
	margin-bottom: 0;
}

/* вместо иконки */
.grid .title h4 {
	margin: 0;
	font-size: 16px;
	margin-bottom: 8px;
	/*font-size: 90%;*/
}

.grid .title h4 span {
	color: #a7e205;
}
.top_grid .grid {
	margin: 4px;
	background: #222222;
	padding: 16px;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.top_grid .grid {
		width: calc(33.3% - 8px);
	}
}

/* End */


/* Start:/bitrix/components/bitrix/iblock.vote/templates/bootstrap_v4/style.min.css?1726651943200*/
.bx-rating{display:block;text-align:center}.bx-rating-icon-container{margin-right:3px;cursor:pointer}.bx-rating .bx-rating-icon-container:last-child{margin-right:0}.bx-rating-icon{fill:var(--primary)}
/* End */


/* Start:/bitrix/components/bitrix/catalog.product.subscribe/templates/.default/style.min.css?17266519741413*/
.bx-catalog-subscribe-button{margin-bottom:6px;display:inline-block}.bx-catalog-popup-content{width:90%;max-width:280px}.bx-catalog-subscribe-form-container-label{font-size:13px;color:#5a6c77;padding-bottom:2px}.bx-catalog-subscribe-form-container-input{position:relative}.bx-catalog-subscribe-form-container-input input[type="text"]{display:block;width:100%;font-size:18px;height:38px;margin:0;padding:0 4px;border:1px solid #ccd5db;border-radius:2px;background:#f8fafc;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-catalog-subscribe-form-star-required{color:#d93333}.bx-catalog-subscribe-form-container .bx-captcha{margin-bottom:10px}.bx-catalog-popup-message{font-weight:bold;min-width:240px;margin:0}.bx-catalog-subscribe-alert{background-color:#edf6fc;color:#000;font-size:15px;min-height:45px;text-align:center;padding:12px 40px 12px 60px;position:relative;width:280px}.bx-catalog-subscribe-aligner{display:inline-block;height:45px;margin-left:-1px;vertical-align:middle;width:1px}.bx-catalog-subscribe-alert-text{display:inline-block;vertical-align:middle}.bx-catalog-subscribe-alert-footer{text-align:center}.bx-catalog-subscribe-alert-popup{background-color:#edf6fc!important;border:1px solid #edf6fc!important;border-radius:3px!important;-webkit-box-shadow:0 19px 24px rgba(88,112,118,0.17)!important;box-shadow:0 19px 24px rgba(88,112,118,0.17)!important}
/* End */


/* Start:/bitrix/templates/aspro_max/components/bitrix/catalog.smart.filter/main_config_new/style.min.css?17773983861274*/
.bx_filter .bx_filter_parameter_biz{font-size:15px;display:inline-block;margin-right:10px;text-decoration:none;color:#215968;border-bottom:1px dashed}.bx_filter .bx_filter_parameter_biz:hover{text-decoration:none;border-bottom:1px solid}.bx_filter .bx_filter_parameter_biz.active{position:relative;padding-left:20px;color:#d54a4a;border-bottom:1px solid}.bx_filter .bx_filter_parameter_biz.active:hover{border-bottom:1px dashed}.bx_filter .bx_filter_parameter_biz.active:before{position:absolute;top:4px;left:1px;display:block;width:13px;height:13px;content:' ';background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAABFElEQVQoz2NgIBJcl+Qzui7J33Vdgo+RWA38NxQknwDp/zekhRoIarghyc94Q15iC5D+f1NJ5v/n7dumE7ZFWqgYbANQ08c1a37+///fAL8GCT7L6zLCf0CaXjbUAdX/j0aWdAJKTACaxookJnJTUeoFyIaHIYH////8ORHZzdw35MTegyRvSAkeAdISYH8oSu4Fid0x0f//5/nzo0BbWOCagBzur0ePvrujp/kf5Aygc54DbZkDYt9UkPj/7czpl0A1ohhuBwra/Lp//809Zwewh8GagfSHpUt+A+VMcXoaKKn45+PHK0/iY8EaX1SUgzyeRDB4gYp4//3+veX9/Hn//379OpPY1ALSyAzEOUDMhksNAKf2po+AEPuKAAAAAElFTkSuQmCC) center left no-repeat}.bx_filter_parameters_box.set{overflow:hidden}.bx_filter_parameters_box.set:before{content:"";display:block!important;position:absolute;left:-6px!important;top:17px;width:11px;height:11px;border-radius:100%}
/* End */


/* Start:/bitrix/components/webprostor/configurator.quick.view/templates/.default/style.min.css?17504181733238*/
#configurator_quick_view #quick_view_picture_wrapper {padding: 20px;border: 1px solid #f3f6f8;margin-bottom: 20px;}#configurator_quick_view #quick_view_picture {width: 100%;height: 400px;background-repeat: no-repeat;background-position: 50% 50%;background-size: contain;}#configurator_quick_view #quick_view_picture_wrapper .configurator-product-carousel.owl-carousel {height: 450px;background-image: url(/bitrix/images/webprostor.configurator/preloader.gif);background-repeat: no-repeat;background-position: 50% 50%;padding-bottom: 30px;}#configurator_quick_view #quick_view_picture_wrapper .owl-carousel .owl-dots {position: absolute;bottom: 0;width: 100%;margin-top: 0 !important;}#configurator_quick_view #quick_view_picture_wrapper .owl-carousel .owl-nav [class*='owl-'] {color: inherit;border: none;padding: 0 !important;font: inherit;outline: none;width: 40px;height: 40px;background: #f3f6f8;border-radius: 0;line-height: 40px;text-align: center;}#configurator_quick_view #quick_view_picture_wrapper .image-item {padding: 5px;}#configurator_quick_view #quick_view_picture_wrapper .image-wrapper {display: block;height: 400px;background-image: url(/bitrix/images/webprostor.configurator/preloader.gif);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;}#configurator_quick_view #quick_view_right_block {padding: 20px;background: #f3f6f8;margin-bottom: 20px;}#configurator_quick_view #quick_view_description {margin-bottom: 15px;}#configurator_quick_view #quick_view_rating > * {margin: 0 auto;}#configurator_quick_view #quick_view_price {font-size: 200%;margin-top: 20px;}#configurator_quick_view #quick_view_properties .quick_view_property {padding: 7px 0 8px;}#configurator_quick_view #quick_view_properties .quick_view_property_key {font-weight: 400;font-size: 13px;line-height: 18px;color: #667482;}#configurator_quick_view #quick_view_properties .quick_view_property_value {font-weight: 400;font-size: 13px;line-height: 18px;word-break: break-word;}#configurator_quick_view .nav.nav-tabs {margin: 0;}#configurator_quick_view .nav.nav-tabs li {margin-left: 0;padding-left: 0;}#configurator_quick_view .nav.nav-tabs li:before {display: none;}#configurator_quick_view .tab-content .tab-pane {padding-top: 20px;}.webprostor-configurator-catalog-section .photo {position: relative;}.webprostor-configurator-catalog-section .quick-view {display: none;background: rgba(255,255,255,0.5) url(/bitrix/images/webprostor.configurator/theme/view.svg) no-repeat 50% 50% / 30px 30px;position: absolute;z-index: 2;width: 60px;height: 60px;top: 50%;left: 50%;margin-left: -30px;margin-top: -30px;border-radius: 30px;}.webprostor-configurator-catalog-section .photo:hover .quick-view {display: block;}@media(max-width: 992px) {#configurator_quick_view #quick_view_picture_wrapper .image-wrapper, #configurator_quick_view #quick_view_picture_wrapper .configurator-product-carousel.owl-carousel, #configurator_quick_view #quick_view_picture {height: 300px;}}@media(max-width: 768px) {#configurator_quick_view #quick_view_picture_wrapper .image-wrapper, #configurator_quick_view #quick_view_picture_wrapper .configurator-product-carousel.owl-carousel, #configurator_quick_view #quick_view_picture {height: 200px;}}
/* End */
/* /configurator/style.css?177910491535404 */
/* /bitrix/templates/aspro_max/components/webprostor/configurator.onepage/template_26_new/style.css?177910490810066 */
/* /bitrix/components/bitrix/iblock.vote/templates/bootstrap_v4/style.min.css?1726651943200 */
/* /bitrix/components/bitrix/catalog.product.subscribe/templates/.default/style.min.css?17266519741413 */
/* /bitrix/templates/aspro_max/components/bitrix/catalog.smart.filter/main_config_new/style.min.css?17773983861274 */
/* /bitrix/components/webprostor/configurator.quick.view/templates/.default/style.min.css?17504181733238 */