:root {
        --bagon-font-family: 'Rubik';
        --bagon-accent: #fbd38d;
        /* Цвета этапов — сплошные */
        --color-gallery: #fbd38d;
        --color-mandatory: #6c9;
        --color-optional: #69c;
        --color-calculator: #c66;
        --color-description: #b9a;
        /* Расширенная палитра */
        --text-primary: #f0f0f0;
        --text-secondary: #b0b0b0;
        --bg-deep: #0a0a0a;
        --bg-surface: #151515;
        --border-light: rgba(255, 255, 255, 0.1);
        /* Системные переменные */
        --border-width: 4px;
        --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* ФИКС РОДИТЕЛЕЙ (чтобы sticky работал) */
    .bagon-force-visible {
        overflow: visible !important;
    }
    .bagon-main-container {
        font-family: var(--bagon-font-family) !important;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 20px;
       
        position: relative;
    }
    /* Лёгкий шум на фоне для текстуры */
    .bagon-main-container::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBudW1PY3RhdmVzPSIzIiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNmKSIgb3BhY2l0eT0iMC4wMjUiIC8+PC9zdmc+');
        pointer-events: none;
        z-index: 9999;
        opacity: 0.4;
    }
    .bagon-fullwidth-header {
        width: 100%;
        margin-bottom: 28px;
        animation: fadeInDown 0.5s ease-out;
    }
    /* ГРИД */
    .bagon-top-grid {
        display: grid;
        grid-template-columns: 47% 51%;
        gap: 2%;
        align-items: stretch;
    }
    .bagon-sticky-side {
        position: sticky;
        top: 80px;
        align-self: start;
        z-index: 10;
        margin-bottom: 0;
        animation: slideInLeft 0.5s ease-out;
    }
    .bagon-scroll-side {
        display: flex;
        flex-direction: column;
    }
    /* ========== АНИМАЦИИ ========== */
    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInLeft {
        from { opacity: 0; transform: translateX(-20px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pillPop {
        0% { opacity: 0; transform: scale(0.8); }
        80% { transform: scale(1.02); }
        100% { opacity: 1; transform: scale(1); }
    }
    /* ========== СПОЙЛЕРЫ ========== */
    .bagon-step-spoiler {
        margin-bottom: 12px;
        width: 100%;
        border-radius: 0px;
        overflow: hidden;
        background: var(--bg-surface);
        transition: var(--transition-smooth);
		border-radius: 0px 14px 14px 0px;
    }
    /* Эффект приподнятия УБРАН */
    .bagon-step-spoiler:hover {
        /* transform: translateY(-2px); – удалено */
        background: var(--bg-surface); /* можно добавить лёгкое изменение фона, если нужно */
    }
    /* ЗАГОЛОВКИ — СПЛОШНОЙ ЦВЕТ */
    .bagon-step-header {
    display: none !important;
    background: #1e1e1e;
    color: #fbd28cba;
    padding: 16px 24px 16px 20px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
    box-sizing: border-box;
    font-weight: 100;
    letter-spacing: 0.03em;
    line-height: 1;
		
		


        border-left: var(--border-width) solid transparent;
    }
    #main-gallery-title {
        border-left-color: #c84bed;
    }
    #mandatory-builder-title {
        border-left-color: var(--color-mandatory);
    }
    #optional-builder-title {
        border-left-color: var(--color-optional);
    }
    .bagon-step-header.has-selection,
    .bagon-step-header.active {
        display: flex !important;
        flex-direction: column;
        gap: 0px;
    }
    .bagon-step-header:hover {
        background: #252525;
        border-left-width: calc(var(--border-width) + 0px);
    }
    /* Стрелочка — изящная */
    .bagon-step-header::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--bagon-accent);
        border-bottom: 2px solid var(--bagon-accent);
        transform: translateY(-50%) rotate(45deg);
        transition: var(--transition-smooth);
        opacity: 0.6;
    }
    .bagon-step-header.active::after {
        transform: translateY(-50%) rotate(-135deg);
        opacity: 1;
    }
    /* Фокус для клавиатуры */
    .bagon-step-header:focus-visible {
        outline: 2px solid var(--bagon-accent);
        outline-offset: 2px;
    }
    /* КОНТЕНТ ВНУТРИ ЭТАПА */
    .bagon-step-content {
        padding: 16px 12px 12px 20px;
        border-left: 2px solid transparent;
        transition: border-color 0.3s ease;
        background: rgb(23 23 23);
        /* border-top: 1px solid var(--border-light);*/
    }
    /* Тонкая подсветка границы при открытии */
    #bagon-gallery-trigger {
        border-left-color: #c84bed59;
    }
    #mandatory-builder-content {
        border-left-color: rgba(102, 204, 153, 0.3);
    }
    #optional-builder-content {
        border-left-color: rgba(105, 153, 204, 0.3);
    }
    /* ========== ПЛАШКИ (PILLS) ========== */
    .selected-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 0px;
    }
    .bagon-selected-item-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        /* background: #1e1e1e;*/
        border: 0px solid var(--border-light);
        padding: 0px 20px 0px 0px;
        border-radius: 8px;
        transition: var(--transition-smooth);
       /* animation: pillPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);*/
    }
    .bagon-selected-item-pill:hover {
         /*border-color: #1e1e1e;*/
       /* background: #2a2a2a;*/
        /* Приподнятие УБРАНО, оставлено только масштабирование */
        /*transform: scale(1.02);*/
    }
    .bagon-header-thumb {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: 8px;
        border: 0px solid var(--bagon-accent);
        background: #00000000;
        transition: var(--transition-smooth);
    }
    .bagon-selected-item-pill:hover .bagon-header-thumb {
        transform: scale(1);
        border-color: #fff;
    }
    .bagon-pill-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .bagon-pill-text {
        font-size: 0.8rem;
        color: var(--text-primary);
        font-weight: 200;
        line-height: 1;
        text-transform: uppercase;
		
    }
    .bagon-pill-price {
        font-size: 0.8rem;
        color: var(--bagon-accent);
        font-weight: 500;
        opacity: 0.95;
    }
    /* ========== ДИНАМИЧЕСКИЙ БИЛДЕР (изначально скрыт) ========== */
    #bagon-dynamic-builder-wrapper {
        display: none;
        opacity: 0;
    }
    #bagon-dynamic-builder-wrapper.is-visible {
        display: block;
        animation: bagonFadeIn 0.6s forwards;
    }
    @keyframes bagonFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* ========== КАЛЬКУЛЯТОР И НИЗ ========== */
    .bagon-calc-row {
    display: grid;
    grid-template-columns: 50% 48%;
    gap: 2%;
    margin-top: 0px;
    padding-left: 0px;
    transition: var(--transition-smooth);
    border-radius: 0 0px 0px 0;
    }
.bagon-future-content {
    /*background: rgba(255, 255, 255, 0.03);*/
    border-radius: 0px;
    min-height: 100px;
    border: 0px dashed var(--border-light);
	
}

.bccgc-calc-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.bccgc-calc-selectors-group {
    order: 1;
	
}

.bccgc-calc-result {
    order: 2;
}

.bccgc-calc-readonly-box {
    order: 3;
}

.bagon-future-content {
    order: 4;
}

.bccgc-calc-input-wrapper {
    order: 5;
    margin-top: 20px !important;
}
    .bagon-description-under-calc {
        margin-top: 40px;
        border-left: var(--border-width) solid var(--color-description);
        padding-left: 24px;
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.8;
        opacity: 0.9;
        border-radius: 0 20px 20px 0;
        padding: 16px 24px;
    }
    /* ========== ГЛОБАЛЬНЫЕ УЛУЧШЕНИЯ ДЛЯ ЭЛЕМЕНТОВ КАЛЬКУЛЯТОРА ========== */
    .bccgc-super-calculator {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    .bccgc-calc-wrapper {
        background: transparent !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: var(--border-width, 4px) solid var(--color-calculator, #c66) !important;
    }
    .bccgc-calc-variation-selector,
    .bccgc-calc-component-selector {
        background: #1a1a1a !important;
        border-bottom: 0px solid var(--border-light) !important;
        border-radius: 0px !important;
        padding: 8px !important;
        transition: var(--transition-smooth) !important;
    }
    .bccgc-calc-variation-selector:hover,
    .bccgc-calc-component-selector:hover {
        background: #222 !important;
    }
    .bccgc-calc-result-toggle {
        background: #1a1a1a !important;
        border-radius: 0px !important;
        padding: 8px 16px !important;
    }
    .bccgc-calc-button-group .single_add_to_cart_button {
    background: #fad28cb8 !important;
    border: 0px solid var(--bagon-accent) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: var(--transition-smooth) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    }
    .bccgc-calc-button-group .single_add_to_cart_button:hover {
        background: var(--bagon-accent) !important;
        color: #0a0a0a !important;
        border-color: var(--bagon-accent) !important;
        /* Приподнятие УБРАНО, только масштабирование */
        transform: scale(1.02);
    }
    .bccgc-calc-button-group .single_add_to_cart_button:active {
        transform: scale(0.98);
    }
    
    
    .bccgc-item-image-wrapper {
        border-radius: 0px 0px 0px 0px;
        overflow: hidden;
    }
    .bccgc-item-text-wrapper {
        background: transparent;
        padding: 4px 4px;
        border-top: 1px solid var(--border-light);
    }
    /* ========== ЗАГОТОВКИ ДЛЯ КАСТОМНОГО СКРОЛЛА (ЕСЛИ ПОНАДОБЯТСЯ) ========== */
    .bagon-scroll-container {
        position: relative;
        overflow: hidden;
    }
    .bagon-scroll-content {
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .bagon-scroll-content::-webkit-scrollbar {
        display: none;
    }
    .bagon-scrollbar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 6px;
        background: rgba(255,255,255,0.05);
        border-radius: 20px;
    }
    .bagon-scrollbar-thumb {
        width: 100%;
        background: #444;
        border-radius: 20px;
        transition: background 0.2s;
        cursor: grab;
    }
    .bagon-scrollbar-thumb:hover {
        background: var(--bagon-accent);
    }
    /* ========== АДАПТАЦИЯ ========== */
    @media (max-width: 1330px) {
        .bagon-main-container {
            padding: 0 12px;
        }
        .bagon-top-grid,
        .bagon-calc-row {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .bagon-sticky-side {
            position: static;
            margin-bottom: 20px;
        }
        .bagon-step-header {
            padding: 14px 18px;
        }
        .bagon-step-content {
            padding: 12px 8px 8px 16px;
        }
        .bagon-header-thumb {
            width: 40px;
            height: 40px;
        }
        .bagon-calc-row {
            padding-left: 0px;
        }
        .bagon-description-under-calc {
            padding-left: 18px;
            margin-top: 32px;
        }
    }
    @media (max-width: 480px) {
        .bagon-main-container {
            padding: 0 8px;
        }
        .bagon-step-header {
            padding: 12px 14px;
            font-size: 0.9rem;
        }
        .bagon-step-header::after {
            right: 12px;
        }
        .bagon-selected-item-pill {
            width: 100%;
            padding: 0px 12px 0px 0px;
        }
        .bagon-pill-text {
            font-size: 0.85rem;
        }
        .bagon-pill-price {
            font-size: 0.7rem;
        }
        .bagon-calc-row {
            padding-left: 10px;
        }
    }
    /* Прекрасный скролл */
    ::-webkit-scrollbar {
        width: 1px;
        height: 1px;
    }
    ::-webkit-scrollbar-track {
        background: var(--bg-deep);
    }
    ::-webkit-scrollbar-thumb {
        background: #fbd38d;
        border-radius: 20px;
        border: 0px solid #2a2a2a;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--bagon-accent);
    }
    /* Для пользователей, которые предпочитают меньше движений */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
/* ========== ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ ========== */
/* Очень большие экраны (от 1600px) */
@media (min-width: 1600px) {
    .bagon-main-container {
        max-width: 1600px;
        padding: 4px 23px 6px 18px;
    }
    .bagon-step-header {
        padding: 8px 30px 8px 26px;
    }
    .bagon-step-content {
        padding: 20px 16px 16px 26px;
    }
    .bagon-calc-row {
        margin-top: 8px;
    }
}
/* Десктопы среднего размера (1200–1599px) — можно ничего не менять, но оставим как есть */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* уже работает */
}
/* Планшеты в альбомной ориентации и небольшие ноутбуки (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .bagon-main-container {
        padding: 0 16px;
    }
    .bagon-step-header {
        padding: 14px 20px 14px 16px;
    }
    .bagon-step-content {
        padding: 14px 10px 10px 16px;
    }
    .bagon-calc-row {
        grid-template-columns: 58% 40%; /* чуть уже правая колонка */
        gap: 2%;
    }
}
/* Планшеты в портретной ориентации (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .bagon-main-container {
        padding: 0 16px;
    }
    .bagon-top-grid,
    .bagon-calc-row {
        gap: 20px;
    }
    .bagon-step-header {
        padding: 14px 18px;
    }
    .bagon-step-content {
        padding: 14px 10px 10px 16px;
    }
    .bagon-calc-row {
        grid-template-columns: 1fr; /* в одну колонку */
        padding-left: 0px;
    }
    .bagon-future-content {
        min-height: 80px;
    }
}
/* Телефоны (до 767px) — дополняем существующий @media (max-width: 480px) */
@media (max-width: 767px) {
    .bagon-main-container {
        padding: 0 12px;
    }
    .bagon-step-header {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    .bagon-step-content {
        padding: 12px 8px 8px 14px;
    }
    .bagon-selected-item-pill {
        gap: 8px;
        padding-right: 12px;
    }
    .bagon-header-thumb {
        width: 36px;
        height: 36px;
    }
    .bagon-pill-text {
        font-size: 0.9rem;
    }
    .bagon-pill-price {
        font-size: 0.7rem;
    }
    .bagon-calc-row {
        padding-left: 0px;
    }
}
/* Очень узкие экраны (до 480px) — уже есть, но можно дополнить */
@media (max-width: 480px) {
    .bagon-step-header {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    .bagon-step-header::after {
        right: 30px;
    }
    .bagon-selected-item-pill {
        width: 100%;
        padding: 0 8px 0 0;
    }
    .bagon-pill-text {
        font-size: 0.8rem;
    }
    .bagon-pill-price {
        font-size: 0.65rem;
    }
}
/* Квадратные мониторы (например, 1:1, где высота почти равна ширине) */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) and (min-width: 992px) {
    /* На квадратных мониторах можно уменьшить отступы, чтобы больше контента влезало */
    .bagon-main-container {
        padding: 0 15px;
    }
    .bagon-step-header {
        padding: 12px 18px;
    }
    .bagon-step-content {
        padding: 12px 8px 8px 18px;
    }
    .bagon-calc-row {
        margin-top: 20px;
    }
}
/* Для устройств с высоким DPI (ретина) — если нужно, можно подкорректировать */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Например, чуть тоньше границы */
    .bagon-step-header {
        border-left-width: calc(var(--border-width) - 1px);
    }
}


.bagon-step-header .header-text {
    font-size: 1rem;
    color: #fbe5be;
    font-weight: 100;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-block: 14px;
}