/* ========================================= */
/* STOCK DISPLAY FOR CONFIGURATOR (BCCGC)   */
/* ========================================= */

.bccgc-item-image-wrapper {
    position: relative !important;
    overflow: hidden; 
}

/* (!!) ИСПРАВЛЕННОЕ: Стили для затемненных (нет в наличии) плиток */
.bccgc-item.bccgc-out-of-stock-item .bccgc-item-image-wrapper {
    /* На этом враппере opacity не ставим, чтобы не затрагивать точку и метку */
    cursor: default;
    pointer-events: auto; /* Позволяем кликнуть */
}

/* (!!) ГЛАВНЫЙ ФИКС: Затемнение самой картинки (сохраняет цвет) */
.bccgc-item.bccgc-out-of-stock-item .bccgc-item-image-wrapper img.bccgc-item-image {
    opacity: 0.3; /* Только затемнение, цвет сохраняется */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* (!!) ФИКС: Снимаем затемнение при наведении */
.bccgc-item.bccgc-out-of-stock-item:hover .bccgc-item-image-wrapper img.bccgc-item-image {
    opacity: 1;
}


/* (!!) Стили для метки количества готовой продукции (X шт) */
.bccgc-ready-stock-label {
    position: absolute;
    top: 80%; 
    left: 10%;
    background-color: #d94452; /* Красный для акцента */
    color: #e0e0e0; /* Твой цвет шрифта */
    font-size: 11px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 15; /* Важно: должен быть выше картинки/затемнения */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Красная точка */
.bccgc-stock-dot.bccgc-dot-out-of-stock {
    position: absolute;
    bottom: 40px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 20; /* Важно: должен быть выше затемнения и метки количества */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    border: 2px solid #2d2d2d;
    background-color: #d94452; /* Красный */
    transition: transform 0.2s ease;
}

.bccgc-stock-dot:hover {
    transform: scale(1.2);
}

/* Сообщение в калькуляторе */
.bccgc-out-of-stock-message {
    color: #f9f9f9;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    margin-top: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    display: block;
    width: 100%;
    text-transform: uppercase;
    background-color: #ff2f4e78;
    padding: 4px;
    margin-top: 4px;
    border-radius: 10px;
}

/* Стили для временного сообщения о корректировке (зеленый/акцент) */
.bccgc-limit-corrected-message {
    color: #fbd38d; /* Твой цвет акцента */
    font-weight: bold;
    font-size: 0.95em;
    text-align: center;
    margin-top: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    display: block;
    width: 100%;
    text-transform: uppercase;
    animation: fadeOut 3s forwards; /* Анимация исчезновения */
}

@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; display: none; }
}


/* ЖЕСТКИЕ Стили для заблокированных кнопок */
button.bccgc-disabled-by-stock {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #444 !important;
    color: #888 !important;
    border-color: #444 !important;
    box-shadow: none !important;
}


/* [V7.52.0 CSS FIX] Управление видимостью лупы и inner для всех состояний */

/* 1. БАЗОВОЕ СОСТОЯНИЕ (по умолчанию, когда нет наведения)
   Устанавливаем прозрачность 0 для иконки лупы, чтобы она не была видна, 
   и не трогаем inner-элемент.
*/
.fabric-item .magnifier-icon {
    opacity: 0 !important;

}