/* Стили для цветовых опций товаров */

.color-options {
    margin-top: 1rem;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: translateY(-2px);
}

.color-option.active .pallete-color {
    border-color: transparent !important;
    transform: scale(1.1);
}

.color-option.active .color-check {
    display: none !important; /* Скрыто: оставляем только обводку */
}

.pallete-color {
    width: 26px;
    height: 26px;
    border-radius: 10%;
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pallete-color:hover {
    border-color: transparent;
    transform: scale(1.1);
}

.color-check {
    display: none !important; /* Скрыто: оставляем только обводку для выбранного цвета */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.color-name {
    font-size: 10px;
    text-align: center;
    color: #666;
    margin-top: 0.25rem;
}

/* Дополнительные цвета для русских названий */
.pallete-color-красный {
    background: #e31e2b;
}

.pallete-color-белый {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.pallete-color-черный {
    background: #000000;
}

.pallete-color-синий {
    background: #008cda;
}

.pallete-color-голубой {
    background: #b6e9f2;
}

.pallete-color-зеленый {
    background: #08b423;
}

.pallete-color-желтый {
    background: #ebb40c;
}

.pallete-color-оранжевый {
    background: #f26622;
}

.pallete-color-розовый {
    background: #ea398c;
}

.pallete-color-фиолетовый {
    background: #a04ce4;
}

.pallete-color-серый {
    background: #afafaf;
}

.pallete-color-коричневый {
    background: #966127;
}

.pallete-color-бежевый {
    background: #f4eee8;
}

.pallete-color-кремовый {
    background: #ffefde;
}

.pallete-color-лавандовый {
    background: #dac6ef;
}

.pallete-color-мятный {
    background: #90f2c3;
}

.pallete-color-бирюзовый {
    background: #d8ecef;
}

.pallete-color-бордовый {
    background: #a70055;
}

.pallete-color-темно-синий {
    background: #2d2d66;
}

.pallete-color-светло-серый {
    background: #e2e2e7;
}

.pallete-color-платиновый {
    background: #e2e2e7;
}

.pallete-color-золотой {
    background: #ffd700;
}

.pallete-color-серебристый {
    background: #c0c0c0;
}

.pallete-color-молочный {
    background: #f5f5dc;
    border: 1px solid #e0e0d0;
}

.pallete-color-антрацит {
    background: #383e42;
}

.pallete-color-слоновая-кость {
    background: #f4eee8;
    border: 1px solid #e8e0d8;
}

.pallete-color-бордо {
    background: #800020;
}

.pallete-color-капучино {
    background: #C19A6B;
    border: 1px solid #b88a5a;
}

/* Английские названия цветов */
.pallete-color-red {
    background: #e31e2b;
}

.pallete-color-white {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.pallete-color-black {
    background: #000000;
}

.pallete-color-blue {
    background: #008cda;
}

.pallete-color-sky {
    background: #b6e9f2;
}

.pallete-color-green {
    background: #08b423;
}

.pallete-color-yellow {
    background: #ebb40c;
}

.pallete-color-orange {
    background: #f26622;
}

.pallete-color-pink {
    background: #ea398c;
}

.pallete-color-purple {
    background: #a04ce4;
}

.pallete-color-silver {
    background: #afafaf;
}

.pallete-color-brown {
    background: #966127;
}

.pallete-color-ivory {
    background: #f4eee8;
}

.pallete-color-cream {
    background: #ffefde;
}

.pallete-color-lavender {
    background: #dac6ef;
}

.pallete-color-mint {
    background: #90f2c3;
}

.pallete-color-aqua {
    background: #d8ecef;
}

.pallete-color-maroon {
    background: #a70055;
}

.pallete-color-navy {
    background: #2d2d66;
}

.pallete-color-platinum {
    background: #e2e2e7;
}

.pallete-color-gold {
    background: #ffd700;
}

.pallete-color-milk {
    background: #f5f5dc;
    border: 1px solid #e0e0d0;
}

.pallete-color-anthracite {
    background: #383e42;
}

.pallete-color-bordeaux {
    background: #800020;
}

.pallete-color-cappuccino {
    background: #C19A6B;
    border: 1px solid #b88a5a;
}

/* Адаптивность */
@media (max-width: 768px) {
    .pallete-color {
        width: 24px;
        height: 24px;
    }
    
    .color-name {
        font-size: 9px;
    }
}

/* ===== Product Card Color Swatches ===== */
.product-card .color-options { margin-top: 10px; margin-bottom: 8px; }
.product-card .color-dot,
.card-product .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 10%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
    position: relative;
}
.product-card .color-dot:hover, .card-product .color-dot:hover { box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.product-card .color-dot.active, .card-product .color-dot.active { box-shadow: inset 0 0 0 3px #111; }

.product-card .color-row, .card-product .color-row { display: flex; align-items: center; gap: 6px; }
.product-card .swatches-scroll, .card-product .swatches-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.product-card .swatches-scroll::-webkit-scrollbar, .card-product .swatches-scroll::-webkit-scrollbar { display: none; }
.product-card .swatch-next { border: none; background: #fff; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: pointer; line-height: 1; }
.product-card .swatch-next:hover { box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* Крупные свотчи в фильтрах */
.filters-color .swatches-scroll {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px;
}
.filters-color .swatches-scroll::-webkit-scrollbar { display: none; }
.filters-color .color-dot { box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.filters-color { display: flex; align-items: center; }

/* Horizontal scroller for "Другие товары" */
.other-products-scroller { overflow-x: auto; padding-bottom: 6px; }
.other-products-scroller::-webkit-scrollbar { height: 6px; }
.other-products-track { width: 100%; }
.other-products-scroller .other-card { width: calc(25% - 0.75rem); }
.other-products-scroller .product-image-container { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3/4; }
.other-products-scroller .product-image { width: 100%; height: 100%; }
.other-products-scroller .product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1199.98px) {
    .other-products-scroller .other-card { width: calc(33.333% - 0.75rem); }
}
@media (max-width: 767.98px) {
    .other-products-scroller .other-card { width: calc(50% - 0.75rem); }
}