/* =================================================================== */
/* ============== BAGON CONFIGURATOR GALLERY v7.18.0 ============== */
/* (v5.4 - Добавлена настройка "dimmed" эффекта) */
/* (v5.5 - Исправлена прозрачность картинки при :hover на dimmed) */
/* (v7.16.0 - Support for Hover Scroll & Etalon Fix) */
/* (v7.17.0 - Support for Lock Height Logic) */
/* (v7.18.0 - Support for Mixed Media Sequence) */
/* =================================================================== */


/* --- 1. Основные контейнеры галереи --- */
/* --- 1. Основные контейнеры галереи --- */
.bccgc-wrapper {
    --main-font-family: 'Rubik', sans-serif;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    
    /* ИЗМЕНЕНИЕ ДЛЯ ЗАДАЧИ: Ставим 100%, чтобы блок всегда занимал всю ширину */
    /* Было: ширина по контенту */
    /* width: -moz-fit-content; */
    /* width: fit-content; */
    width: 100%;
    
    /* БЫЛО: margin: 0 auto; (Центрировало) */
    /* СТАЛО: Прижимаем влево */
    margin: 0; 
    
    font-family: var(--main-font-family);
    
    /* CSS-переменные из PHP (блок) */
    max-width: var(--block-max-width, none);
    background-color: var(--block-bg-color, transparent);
    border-radius: var(--block-border-radius, 0);
    padding: var(--block-padding, 0);
    margin-top: var(--block-margin-top, 0);
    margin-bottom: var(--block-margin-bottom, 0);
    
    /* Если в админке задан margin-left, он перекроет наш margin: 0 */
    margin-left: var(--block-margin-left, 0); 
    margin-right: var(--block-margin-right, 0);
}

.bccgc-gallery {
    display: flex;
    /* justify-content, gap, width - устанавливаются инлайн из PHP */
    padding: 0px 0px;
    
    flex-wrap: wrap; 
}


/* --- 2. Сетка Карточки (внешний контейнер) --- */
.bccgc-item {
    /* Это ширина по умолчанию (для layout="grid") */
    flex: 0 0 calc((100% - ( (var(--columns) - 1) * var(--gallery-gap, 8px)) ) / var(--columns));
    
    display: flex; 
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    background-color: #20202000;
}

/* * Логика для разных LAYOUT */
 
/* 1. Режим "Горизонтальная прокрутка" (GIF) */
.bccgc-gallery.layout-horizontal {
    flex-wrap: nowrap;     /* Не переносить */
}
.bccgc-gallery.layout-horizontal .bccgc-item {
    /* Игнорируем "Колонки", используем "Ширину карточки" из админки */
    flex: 0 0 var(--item-css-width, 200px); 
    max-width: none;
}

/* 2. Режим "Вертикальный список" */
.bccgc-gallery.layout-vertical {
    flex-direction: column;  /* В столбец */
    align-items: stretch;    /* Растянуть на всю ширину */
}
.bccgc-gallery.layout-vertical .bccgc-item {
    /* Игнорируем "Колонки", растягиваем на 100% */
    flex-basis: 100% !important; 
    max-width: 100% !important;
}


/* --- 3. Внутренняя обертка (Главный блок карточки) --- */
.bccgc-item-inner {
    width: var(--item-css-width, 100%);
    height: var(--item-css-height, auto);
    position: relative;
    overflow: hidden;
    background-color: inherit;
    border-radius: var(--item-border-radius, 8px);
    transition: all var(--transition-duration, 0.3s) cubic-bezier(0.25, 0.8, 0.25, 1);
    
    .layout-horizontal & {
        width: 100%;
    }
}


/* --- 4. Обертка Изображения --- */
.bccgc-item-image-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: var(--image-border-radius, 0);
    padding-top: var(--image-padding-top, 0);
    padding-bottom: var(--image-padding-bottom, 0);
    padding-left: var(--image-padding-left, 0);
    padding-right: var(--image-padding-right, 0);
    box-sizing: border-box;
    /* box-shadow: var(--image-box-shadow, none);*/
}

/* --- 5. Само Изображение --- */
.bccgc-item img.bccgc-item-image {
    width: var(--image-css-width, 100%);
    height: var(--image-css-height, 160px); 
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease, opacity 0.15s ease-in-out; /* ДОБАВЛЕНО 'opacity' */
    will-change: transform, opacity; /* Для оптимизации анимации */
    
    /* Логика выравнивания (image_align) */
    margin-left: var(--image-margin-left, auto);
    margin-right: var(--image-margin-right, auto);
    
    border-radius: var(--image-border-radius, 0);
    object-position: var(--image-position, center center);
    transform: scale(var(--image-scale, 1));
    
    /* (!!) ОПТИМИЗАЦИЯ: will-change для плавного скролла + зума */
    will-change: transform;
    transition: transform 0.3s ease; 
}
/* Вычисляем margin для image-align */
.bccgc-wrapper[style*="--image-align: left"] img.bccgc-item-image { --image-margin-left: 0; --image-margin-right: auto; }
.bccgc-wrapper[style*="--image-align: right"] img.bccgc-item-image { --image-margin-left: auto; --image-margin-right: 0; }
.bccgc-wrapper[style*="--image-align: center"] img.bccgc-item-image { --image-margin-left: auto; --image-margin-right: auto; }


/* --- 6. Обертка Текста --- */
.bccgc-item-text-wrapper {
    padding-top: var(--text-padding-top, 5px);
    padding-bottom: var(--text-padding-bottom, 5px);
    padding-left: var(--text-padding-left, 5px);
    padding-right: var(--text-padding-right, 5px);
    box-sizing: border-box; 
}

/* --- 7. Текстовые блоки (Стилизация) --- */
.bccgc-item-attribute-value {
    text-align: var(--text-align, left);
    color: var(--text-font-color, #ffffff9c);
    font-size: var(--text-font-size, 14px);
    font-family: var(--text-font-family, var(--main-font-family));
    text-transform: var(--text-transform, none);
    font-weight: 400;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    text-shadow: var(--text-shadow, none);
}

.bccgc-item-name {
    text-align: var(--text-align, left);
    color: var(--text-font-color, #ffffff9c);
    font-size: var(--text-font-size, 14px);
    font-family: var(--text-font-family, var(--main-font-family));
    text-transform: var(--text-transform, none);
    font-weight: 400;
    transition: all 0.3s ease;
    padding-top: var(--text-padding-top, 5px);
    padding-bottom: var(--text-padding-bottom, 5px);
    padding-left: var(--text-padding-left, 5px);
    padding-right: var(--text-padding-right, 5px);
    margin: 0;
    text-shadow: var(--text-shadow, none);
}


.bccgc-item-attribute-first,
.bccgc-item-attribute-second,
.bccgc-item-name-first,
.bccgc-item-name-second {
    display: block;
}

.bccgc-item-meta {
    font-size: 14px;
    margin: 4px 0 0 0;
    color: #666;
    text-align: var(--text-align, left);
    text-shadow: var(--text-shadow, none);
}


/* --- 8. Эффекты Hover/Selected --- */
.bccgc-item:hover .bccgc-item-inner {
    transform: var(--hover-translate, translateY(-5px));
    box-shadow: var(--hover-box-shadow, 0 10px 20px rgba(0,0,0,0.2));
    background-color: var(--hover-bg-color, #7d7d7d26);
    border-radius: var(--hover-item-border-radius, var(--item-border-radius, 8px));
}

.bccgc-item.selected .bccgc-item-inner {
    transform: var(--selected-translate, translateY(-5px));
    box-shadow: var(--selected-box-shadow, 0 10px 20px rgba(0,0,0,0.2));
    background-color: var(--selected-bg-color, #fff1d81a);
    border-radius: var(--selected-item-border-radius, var(--item-border-radius, 8px));
}

.bccgc-item:hover .bccgc-item-inner img.bccgc-item-image,
.bccgc-item.selected .bccgc-item-inner img.bccgc-item-image {
    transform: scale(var(--image-zoom, 0));
}

.bccgc-item.selected .bccgc-item-attribute-value,
.bccgc-item.selected .bccgc-item-name {
    color: var(--text-font-color-selected, #fbd38d);
    font-weight: 400;
}

/* --- 9. Галочка (✔) --- */
.bccgc-item.selected .bccgc-item-image-wrapper::after {
        content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
     width: 50%;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 3vw, 40px);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    z-index: 10;
}

@keyframes bccgcFadeInScale {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* --- 10. Системные стили (Приглушение, Скрытие) --- */

/* (!! ОБНОВЛЕНО v5.4: Логика "Dimmed" !!) */

/* "Приглушение" для селекторов "Один из" */
.bccgc-item.bccgc-dimmed {
    /* --dimmed-enabled: 1 (включено) или 0 (выключено)
      --dimmed-opacity: 0.3 (значение прозрачности)
      --dimmed-grayscale: 1 (ч/б вкл) или 0 (ч/б выкл)
    */
    
    /* Если --dimmed-enabled = 1: calc( (1 - 1) + 1 * var(--dimmed-opacity) ) = var(--dimmed-opacity)
      Если --dimmed-enabled = 0: calc( (1 - 0) + 0 * var(--dimmed-opacity) ) = 1 (полная непрозрачность)
    */
    opacity: calc( (1 - var(--dimmed-enabled, 1)) + var(--dimmed-enabled, 1) * var(--dimmed-opacity, 0.3) );
    
    /* Если --dimmed-grayscale = 1: calc( 1 * 100% ) = 100%
      Если --dimmed-grayscale = 0: calc( 0 * 100% ) = 0%
    */
    filter: grayscale( calc( var(--dimmed-grayscale, 0) * 100% ) );
    
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* При наведении на "соседа" - временно отменяем эффект */
.bccgc-item.bccgc-dimmed:hover {
    
    /* (!!) ВОТ ИСПРАВЛЕНИЕ: (!!) */
    /* Было: opacity: 0.8; (делало картинку прозрачной) */
    /* Стало: opacity: 1; (картинка 100% непрозрачна) */
    opacity: 1; 
    
    filter: grayscale(0); /* Всегда убираем Ч/Б */
    transform: none; 
    background-color: transparent;
}
.bccgc-item.bccgc-dimmed:hover .bccgc-item-inner {
    transform: var(--hover-translate, translateY(-5px));
    box-shadow: var(--hover-box-shadow, 0 10px 20px rgba(0,0,0,0.2));
    background-color: var(--hover-bg-color, #7d7d7d26);
}
/* (!! Конец v5.4 / v5.5 !!) */


/* **ВАЖНО**: Скрываем галереи вариаций по умолчанию */
.bccgc-variation-gallery-wrapper {
    display: none;
}

/* --- 11. (!!) НОВОЕ: Блок "Сводка" [bagon_selector_variation_selected] (v5.17.4) --- */
.bccgc-summary-wrapper {
    /* Стили контейнера (фон, рамка, отступы) приходят из PHP */
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос, если не влезает */
    gap: var(--gallery-gap, 8px); /* Используем тот же отступ, что и в галереях */
    align-items: flex-start;
    justify-content: var(--gallery-justify-content, flex-start); /* Используем тот же align */
    
    /* (!!) ИЗМЕНЕНО: Добавляем отступы по умолчанию, если PHP их не задал */
    padding: var(--calc-padding, 10px);
    border-radius: var(--calc-border-radius, 12px);
}

/* * (!!) ИСПРАВЛЕНИЕ (v5.7.4):
 * Мы нацеливаемся ТОЛЬКО на карточки, которым JS добавил класс .bccgc-summary-item.
 * Это предотвращает блокировку кликов в ОРИГИНАЛЬНЫХ галереях.
*/
.bccgc-summary-wrapper .bccgc-item.bccgc-summary-item {
    /* Отменяем flex-grow/shrink из сетки, чтобы карточки имели свой размер */
    flex: 0 0 auto; 
    
    /* (!!) ВОТ ИСПРАВЛЕНИЕ ГЛЮКА: Делаем карточку некликабельной (!!) */
    cursor: default;
    pointer-events: none; 
}

/* Внутренняя обертка ВНУТРИ сводки */
.bccgc-summary-wrapper .bccgc-item.bccgc-summary-item .bccgc-item-inner {
    /* Отменяем hover-эффекты */
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--selected-bg-color, #fff1d81a) !important; /* Всегда "выбранный" фон */
}

/* Убираем "галочку" (✔) в сводке, она там не нужна */
.bccgc-summary-wrapper .bccgc-item.bccgc-summary-item .bccgc-item-image-wrapper::after {
    display: none !important;
}

/* Убираем зум картинки при наведении */
.bccgc-summary-wrapper .bccgc-item.bccgc-summary-item:hover .bccgc-item-inner img.bccgc-item-image {
    transform: scale(var(--image-scale, 1)) !important; /* Отменяем image_zoom */
}


/* --- 12. Системные уведомления --- */
.bccgc-error, .bccgc-notice {
    padding: 15px;
    border-radius: 8px;
    width: 100%;
}
.bccgc-error {
    color: #d9534f;
    font-weight: bold;
    background: #f8d7da;
}
.bccgc-notice {
    color: #856404;
    background-color: #fff3cd;
}

/* --- 13. (!!) НОВОЕ: Стили для Hover Video (Mixed Media) --- */
/*
   Видео должно перекрывать картинку, но сохранять её пропорции и размеры.
   Используем object-fit: cover, как и у основной картинки.
*/
video.bccgc-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5; /* Поверх картинки (z-index картинки обычно auto, галочки - 10) */
    display: none; /* Скрыто по умолчанию */
    border-radius: inherit; /* Наследуем скругление родителя */
    pointer-events: none; /* Клики должны проходить сквозь видео к ссылке/карточке */
}

/* Класс, который добавляется JS, когда видео должно быть видно */
video.bccgc-hover-video.active {
    display: block;
}

.bagon-section-title {
    color: #e0e0e0;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 42%);
    border-bottom: 0px dashed #444;
    padding-bottom: 5px;
	font-weight: 100; 
	
}


/* ---------------------------------------------------------------------------------------------------------------------------*/



/* =========================================
   Hover Zone Indicators (Визуализация зон ховера)
   ========================================= */

/* Контейнер для индикаторов */
.bccgc-img-container {
     /* Убеждаемся, что контейнер имеет позиционирование,
        чтобы абсолютные индикаторы были внутри него */
    position: relative;
}

.bccgc-hover-indicators {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    height: 3px;
    z-index: 5;
    pointer-events: none;
    
    /* (!!) FIX: Скрыто по умолчанию (на ПК) */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* (!!) FIX: Показываем при наведении (ПК) */
.bccgc-item:hover .bccgc-hover-indicators {
    opacity: 1;
}

/* Отдельный сегмент (зона) */
.bccgc-indicator-segment {
    flex: 1; /* Все сегменты делят ширину поровну */
    /* (!!) ВКЛЮЧЕНО: Цвет неактивной зоны (полупрозрачный белый) */
    background: rgba(255, 255, 255, 0.3); 
    border-radius: 2px;
    transition: background-color 0.2s ease; /* Плавная смена цвета */
    /*box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Небольшая тень для контраста */
}

/* Активный сегмент */
.bccgc-indicator-segment.active {
    background-color: #fbd38d;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 37%);
    border-radius: 2px;
    opacity: 1;

}

/* (Опционально) Если фон сайта светлый, раскомментируйте этот блок для лучшего контраста неактивных зон:
.bccgc-indicator-segment {
    background: rgba(0, 0, 0, 0.2);
}
*/

/* --- Стили для Кнопки-Полоски (Collapse Bar) --- */
.bccgc-collapse-bar {
    width: 100%;
    background-color: #2d2d2d; /* Фон окна */
    cursor: pointer;
    text-align: center;
    padding: 6px 0;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bccgc-collapse-bar:hover {
    background-color: #383838; /* Чуть светлее при наведении */
}

.bccgc-collapse-icon {
    color: #fbd38d; /* Акцентный цвет */
    display: flex;
    align-items: center;
}

/* Текст "Згорнути" */
.bccgc-collapse-text {
    font-size: 13px;           /* Размер шрифта */
    font-weight: 500;          /* Немного жирнее обычного */
    color: #fbd38d;            /* Ваш акцентный цвет (как иконка) */
    margin-right: 10px;
    margin-left: 10px;/* Отступ справа до стрелки */
    text-transform: uppercase; /* Заглавные буквы (опционально) */
    letter-spacing: 0.5px;    /* Разрядка букв */
    transition: color 0.2s ease;
}

/* При наведении на всю кнопку можно менять цвет текста (опционально) */
.bccgc-collapse-bar:hover .bccgc-collapse-text {
    color: #fff;              /* Например, белый при наведении */
}


/* ========================================================= */
/* === ЖЕЛЕЗОБЕТОННОЕ ЗАТЕМНЕНИЕ (CSS STATE MACHINE) === */
/* ========================================================= */

/* 1. Если у ГАЛЕРЕИ включен режим "is-dimmed-mode"... */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item {
    /* ...то по умолчанию ВСЕ элементы становятся тусклыми */
    opacity: var(--dimmed-opacity, 0.1);
    filter: grayscale(calc(var(--dimmed-grayscale, 0) * 100%));
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* 2. ...КРОМЕ того элемента, который ВЫБРАН (Selected) */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item.selected {
    opacity: 1 !important;
    filter: none !important;
    z-index: 2; /* Приподнимаем над остальными */
}

/* 3. ...И КРОМЕ того, на который навели МЫШКУ (Предпросмотр) */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item:hover {
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer;
}

/* 4. Отключаем старый класс .bccgc-dimmed, чтобы он не мешал новой логике */
.bccgc-item.bccgc-dimmed {
    opacity: 1; /* Сбрасываем старое поведение */
    filter: none;
}

/* ========================================================= */
/* === FIX: ВЕЧНАЯ ГАЛОЧКА (PERSISTENT CHECKMARK) === */
/* ========================================================= */

/* 1. Галочка появляется, если товар ВЫБРАН (.selected) ИЛИ УЖЕ КУПЛЕН (.bccgc-variation-chosen) */
.bccgc-item.selected .bccgc-item-image-wrapper::after,
.bccgc-item.bccgc-variation-chosen .bccgc-item-image-wrapper::after {
       content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
     width: 50%;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 3vw, 40px);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* 2. Подсвечиваем текст для купленного товара тоже */
.bccgc-item.bccgc-variation-chosen .bccgc-item-attribute-value,
.bccgc-item.bccgc-variation-chosen .bccgc-item-name {
    color: var(--text-font-color-selected, #fbd38d);
    font-weight: 400;
}

/* 3. Если включен режим затемнения, но этот товар "Куплен" - не даем ему стать тусклым */
/* Это сохранит его ярким, даже если мы лазим по другим товарам (Опционально, но логично) */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item.bccgc-variation-chosen {
    opacity: 1 !important;
    filter: none !important;
}

/* ========================================================= */
/* === FIX: СКРЫТИЕ ГАЛОЧКИ ДЛЯ УНИВЕРСАЛЬНОГО СЕЛЕКТОРА === */
/* ========================================================= */

/* В шорткоде [bagon_universal_select] (обычно слева или сверху)
   галочка не нужна, так как это "Обложка" конфигуратора.
   Мы скрываем её только там.
*/
.bagon-universal-selected-block .bccgc-item-image-wrapper::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Также убираем цветовое выделение текста в этом блоке, если нужно,
   чтобы он выглядел просто как карточка товара */
.bagon-universal-selected-block .bccgc-item.selected .bccgc-item-attribute-value,
.bagon-universal-selected-block .bccgc-item.selected .bccgc-item-name {
    color: var(--text-font-color, #ffffff9c); /* Возвращаем обычный цвет */
    font-weight: 400;
}



/* ========================================================= */
/* === ЖЕЛЕЗОБЕТОННОЕ ЗАТЕМНЕНИЕ (CSS STATE MACHINE) === */
/* ========================================================= */

/* 1. Если у ГАЛЕРЕИ включен режим "is-dimmed-mode"... */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item {
    opacity: var(--dimmed-opacity, 0.1);
    filter: grayscale(calc(var(--dimmed-grayscale, 0) * 100%));
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* 2. ...КРОМЕ того элемента, который ВЫБРАН (Selected) */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item.selected {
    opacity: 1 !important;
    filter: none !important;
    z-index: 2; 
}

/* 3. ...И КРОМЕ того, на который навели МЫШКУ (Предпросмотр) */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item:hover {
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer;
}

/* 4. Отключаем старый класс .bccgc-dimmed */
.bccgc-item.bccgc-dimmed {
    opacity: 1; 
    filter: none;
}

/* ========================================================= */
/* === FIX: ВЕЧНАЯ ГАЛОЧКА (PERSISTENT CHECKMARK) === */
/* ========================================================= */

.bccgc-item.selected .bccgc-item-image-wrapper::after,
.bccgc-item.bccgc-variation-chosen .bccgc-item-image-wrapper::after {
        content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
     width: 50%;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 3vw, 40px);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    z-index: 10;
}

.bccgc-item.bccgc-variation-chosen .bccgc-item-attribute-value,
.bccgc-item.bccgc-variation-chosen .bccgc-item-name {
    color: var(--text-font-color-selected, #fbd38d);
    font-weight: 400;
}

/* Если товар КУПЛЕН, он остается ярким даже в режиме затемнения */
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item.bccgc-variation-chosen {
    opacity: 1 !important;
    filter: none !important;
}

/* ========================================================= */
/* === FIX: ИСКЛЮЧЕНИЕ ДЛЯ "НЕТ В НАЛИЧИИ" === */
/* ========================================================= */

/* ВАЖНО: Если товар "Нет в наличии", мы НЕ применяем к нему прозрачность контейнера.
   Причина: stock-display.css уже делает картинку прозрачной (0.3). 
   Если мы наложим сверху еще opacity 0.3 от галереи, то надпись "- НЕМАЄ В НАЯВНОСТІ -"
   станет почти невидимой (0.3 * 0.3 = 0.09).
*/
.bccgc-gallery.is-dimmed-mode .bccgc-selector-item.bccgc-out-of-stock-item {
    opacity: 1 !important;
    filter: none !important;
}

/* ========================================================= */
/* === FIX: СКРЫТИЕ ГАЛОЧКИ ДЛЯ УНИВЕРСАЛЬНОГО СЕЛЕКТОРА === */
/* ========================================================= */

.bagon-universal-selected-block .bccgc-item-image-wrapper::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

.bagon-universal-selected-block .bccgc-item.selected .bccgc-item-attribute-value,
.bagon-universal-selected-block .bccgc-item.selected .bccgc-item-name {
    color: var(--text-font-color, #ffffff9c); /* Возвращаем обычный цвет */
    font-weight: 400;
}

/* ========================================= */
/* (!!) АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ (ПОЛОСКИ) */
/* ========================================= */
@media (max-width: 768px) {
    /* На мобильном показываем полоски всегда, даже без наведения */
    .bccgc-hover-indicators {
        opacity: 1 !important;
    }
}


/* --- СКРЫВАЕМ РОДНУЮ КНОПКУ СВОРАЧИВАНИЯ --- */
    .bccgc-collapse-bar {
        display: none !important;
    }












/* --- СТИЛИ ДЛЯ ПЛАВНОЙ СМЕНЫ КАДРОВ --- */

/* Контейнер должен позиционироваться относительно */
.bccgc-item-image-wrapper {
    position: relative;
}

/* Стили для дополнительных слоев (кадров) */
.bccgc-hover-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-position, center center);
    border-radius: var(--image-border-radius, 0);
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Время и тип плавности */
    pointer-events: none; /* Чтобы не перекрывали клики */
    z-index: 2; /* Поверх основной картинки */
}

/* Видео тоже должно плавно появляться */
video.bccgc-hover-video {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
}

/* Класс для активного кадра (картинки или видео) */
.bccgc-hover-frame.active,
video.bccgc-hover-video.active {
    opacity: 1;
    display: block !important;
}