/* Унифицированные стили для карточек товаров */
/* 
 * Этот файл содержит все стили для визуального отображения карточек товаров
 * включая стили, перенесенные из catalog.css для лучшей организации кода
 */
@import url('shared-utilities.css');

/* Основные стили карточки */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: fadeInUp 0.3s ease-out;
    /* Унификация размеров карточек - уменьшил для 4 колонок */
    min-height: 440px;
    max-height: 480px;
}

/* Фиксированная высота для сеточного режима */
.grid-view .product-card {
    min-height: 440px;
    max-height: 480px;
}

/* Универсальные сетки для карточек */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

/* Автоматическая адаптация колонок в grid для разных экранов */
@media (min-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
}

/* Ховер эффект */
.product-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    z-index: 2;
    position: relative;
}

/* Изображение товара */
.product-card .product-image {
    flex-shrink: 0;
    height: 200px;
    position: relative;
}

/* Изображение товара в сетке */
.grid-view .product-image {
    flex-shrink: 0;
    height: 200px;
}

.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Контентная область карточки */
.product-card > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    padding: 0.875rem;
}

/* Контентная область карточки в сетке */
.grid-view .product-card > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
}

/* Заголовок товара */
.product-card h3 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
    /* Ограничиваем до 2 строк */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5rem;
    line-height: 1.4;
    font-size: 0.9rem;
}

/* Мета-информация */
.product-card .meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.product-card .meta-info span {
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Блок атрибутов с фиксированной высотой */
.product-card .product-attributes-container,
.product-card .attribute-container {
    background: rgba(30, 41, 59, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    flex-grow: 1;
    /* Увеличенная высота для отображения 3 атрибутов */
    height: 140px;
    overflow: hidden;
    position: relative;
}

/* Блок атрибутов с ограниченной высотой для сетки */
.grid-view .product-attributes-container {
    max-height: 140px;
    overflow: hidden;
    position: relative;
}

/* Градиент для скрытия лишних атрибутов */
.product-card .product-attributes-container::after,
.product-card .attribute-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: linear-gradient(transparent, rgba(30, 41, 59, 0.6));
    pointer-events: none;
}

/* Градиент для скрытия лишних атрибутов в сетке */
.grid-view .product-attributes-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: linear-gradient(transparent, rgba(30, 41, 59, 0.6));
    pointer-events: none;
}

/* Группы атрибутов */
.product-card .attribute-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
}

/* Ограничение количества атрибутов в сетке */
.grid-view .attribute-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
}

/* Ограничение количества видимых атрибутов */
.product-card .attribute-group:nth-child(n+4) {
    display: none;
}

.grid-view .attribute-group:nth-child(n+4) {
    display: none;
}

/* Лейблы атрибутов */
.product-card .attribute-group > span:first-child {
    color: rgba(139, 92, 246, 1);
    margin-right: 0.5rem;
    width: 4rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Значения атрибутов */
.product-card .attribute-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.product-card .attribute-group span[class*="text-xs"] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

/* Стили для атрибутов с ограничением текста */
.attribute-group .text-xs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стили для заглушки атрибутов */
.product-attributes-container .text-white\/40 {
    font-style: italic;
}

/* Кнопка "Подробнее" всегда внизу */
.product-card .product-details-btn,
.product-card a[href*="product"] {
    margin-top: auto;
    display: block;
    width: 100%;
    text-align: center;
    background: rgba(139, 92, 246, 0.2);
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Кнопка "Подробнее" всегда внизу в сетке */
.grid-view .product-details-btn {
    margin-top: auto;
}

.product-card .product-details-btn:hover,
.product-card a[href*="product"]:hover {
    background: rgba(139, 92, 246, 1);
    color: rgba(30, 41, 59, 1);
}

/* Индикатор наличия */
.product-card .availability-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
}

/* Цена на изображении */
.product-card .price-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(139, 92, 246, 0.9);
    color: rgba(30, 41, 59, 1);
    font-weight: bold;
    padding: 0.5rem 1rem;
    text-align: center;
}

/* Метки товара (новинка, скидка) */
.product-card .product-labels,
.product-labels {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.product-card .product-label,
.product-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-card .product-label.new,
.product-label.new {
    background: rgba(34, 197, 94, 0.9);
    color: white;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(255, 235, 59, 0.9));
    color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.product-card .product-label.sale,
.product-label.sale {
    background: rgba(239, 68, 68, 0.9);
    color: white;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(248, 113, 113, 0.9));
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.product-label:hover {
    transform: scale(1.05);
}

/* Иконки для меток - используем Font Awesome */
.product-label.new .label-icon {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.25rem;
}

.product-label.new .label-icon::before {
    content: "\f005"; /* fa-star */
}

.product-label.sale .label-icon {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.25rem;
}

.product-label.sale .label-icon::before {
    content: "\f06d"; /* fa-fire */
}

/* Компактные метки для планшетов */
@media (max-width: 768px) {
    .product-labels {
        top: 0.25rem;
        left: 0.25rem;
        gap: 0.125rem;
    }
    
    .product-label {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
        border-radius: 0.25rem;
        height: 1.25rem;
        line-height: 1;
    }
    
    .product-label .label-icon {
        margin-right: 0.125rem;
        font-size: 0.75rem;
    }
}

/* Круглые значки для мобильных устройств в сетке */
@media (max-width: 640px) {
    .grid-view .product-labels {
        top: 0.25rem;
        right: 0.25rem;
        left: auto;
        flex-direction: row;
        gap: 0.25rem;
    }
    
    .grid-view .product-label {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        padding: 0;
        font-size: 0.75rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        min-width: 1.5rem;
    }
    
    .grid-view .product-label.new {
        background: radial-gradient(circle, rgba(255, 193, 7, 0.95), rgba(255, 235, 59, 0.85));
    }
    
    .grid-view .product-label.sale {
        background: radial-gradient(circle, rgba(239, 68, 68, 0.95), rgba(248, 113, 113, 0.85));
    }
    
    /* Скрываем текст в круглых значках */
    .grid-view .product-label .label-text {
        display: none;
    }
    
    /* Центрируем иконки в круглых значках */
    .grid-view .product-label .label-icon {
        margin: 0;
        font-size: 0.75rem;
    }
    
    /* Адаптивные размеры карточек */
    .grid-view .product-card {
        min-height: 400px;
        max-height: 440px;
    }
    
    .grid-view .product-image {
        height: 180px;
    }
    
    .grid-view .product-card > div:last-child {
        min-height: 200px;
    }
    
    .grid-view .product-attributes-container {
        max-height: 90px;
    }
    
    /* Уменьшаем размеры атрибутов на мобильных */
    .product-card .attribute-group > span:first-child {
        width: 2.5rem !important;
        font-size: 0.5rem !important;
        margin-right: 0.25rem !important;
    }
    
    .product-card .attribute-group span[class*="text-xs"] {
        font-size: 0.5rem !important;
        padding: 0.125rem 0.25rem !important;
        line-height: 1.2 !important;
    }
    
    .product-card .attribute-group {
        margin-bottom: 0.125rem !important;
    }
    
    .product-card .attribute-group > div {
        gap: 0.125rem !important;
    }
}

/* Очень маленькие экраны - минимальные круглые значки */
@media (max-width: 480px) {
    .product-labels {
        top: 0.125rem;
        left: 0.125rem;
    }
    
    .product-label {
        padding: 0.125rem 0.25rem;
        font-size: 0.5rem;
        height: 1rem;
        min-width: 1rem;
        border-radius: 0.1875rem;
    }
    
    .grid-view .product-label {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
    }
    
    .grid-view .product-label .label-icon {
        font-size: 0.625rem;
    }
    

}

/* Альтернативные стили - простые CSS фигуры (fallback) */
.product-label.style-simple.new {
    background: #ffc107;
    color: #000;
    position: relative;
}

.product-label.style-simple.new::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid #000;
}

.product-label.style-simple.sale {
    background: #dc3545;
    color: white;
    position: relative;
}

.product-label.style-simple.sale::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 6px;
    background: white;
    border-radius: 2px 2px 0 0;
}

/* Анимация появления меток */
@keyframes labelFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.product-label {
    animation: labelFadeIn 0.3s ease-out;
}

.product-label.new {
    animation-delay: 0.1s;
}

.product-label.sale {
    animation-delay: 0.2s;
}



/* Fallback стили с простыми символами, если Font Awesome не загружается */
.product-label.new .label-icon:not([class*="fa"]):empty::before {
    content: "★";
    color: inherit;
    font-family: inherit;
    font-weight: bold;
}

.product-label.sale .label-icon:not([class*="fa"]):empty::before {
    content: "%";
    color: inherit;
    font-family: inherit;
    font-weight: bold;
}

/* Альтернативные Unicode символы */
.product-label.new.style-unicode .label-icon::before {
    content: "✨";
    font-family: inherit;
}

.product-label.sale.style-unicode .label-icon::before {
    content: "🔥";
    font-family: inherit;
}

/* Минималистичные варианты для очень слабых устройств */
.product-label.style-minimal {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.product-label.style-minimal .label-icon {
    display: none;
}

.product-label.style-minimal.new {
    background: #ffc107;
    color: #000;
}

.product-label.style-minimal.sale {
    background: #dc3545;
    color: white;
}

/* Адаптивность для больших экранов */
@media (min-width: 1280px) {
    .grid-view .product-card {
        min-height: 460px;
        max-height: 500px;
    }
    
    .grid-view .product-image {
        height: 220px;
    }
    
    .grid-view .product-card > div:last-child {
        min-height: 240px;
    }
    
    .grid-view .product-attributes-container {
        max-height: 120px;
    }
}

/* Цветовые круги */
.product-card .color-circle {
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.product-card .color-circle:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

/* Базовые цвета */
.color-black {
    background: linear-gradient(135deg, #000000 0%, #374151 100%);
}

.color-white {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    border-color: rgba(0, 0, 0, 0.3) !important;
}

.color-blue {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
}

.color-red {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.color-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.color-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

.color-pink {
    background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
}

.color-yellow {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.color-orange {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
}

.color-gray {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

.color-gold {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 50%, #f59e0b 100%);
}

.color-silver {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 50%, #e5e7eb 100%);
}

/* Специальные цвета из БД */
.color-midnight-gold {
    background: linear-gradient(135deg, #1f2937 0%, #d97706 50%, #f59e0b 100%);
}

.color-midnight-red {
    background: linear-gradient(135deg, #1f2937 0%, #dc2626 50%, #ef4444 100%);
}

.color-rainbow-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #ec4899 50%, #f97316 75%, #fbbf24 100%);
}

.color-sapphire-blue {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
}

.color-sunset-red {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 50%, #fbbf24 100%);
}

.color-teal-blue {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #5eead4 100%);
}

.color-rose-gold {
    background: linear-gradient(135deg, #f43f5e 0%, #fbbf24 50%, #ec4899 100%);
}

.color-space-gray {
    background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
}

.color-midnight-blue {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3730a3 100%);
}

.color-forest-green {
    background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #047857 100%);
}

.color-cosmic-purple {
    background: linear-gradient(135deg, #581c87 0%, #7c3aed 50%, #8b5cf6 100%);
}

/* Дополнительные цвета из БД */
.color-aqua-green {
    background: linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #22d3ee 100%);
}

.color-aquamarine {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 50%, #a7f3d0 100%);
}

.color-camo-star {
    background: linear-gradient(135deg, #365314 0%, #4d7c0f 25%, #65a30d 50%, #84cc16 75%, #a3e635 100%);
}

.color-camouflage {
    background: linear-gradient(135deg, #365314 0%, #4d7c0f 33%, #a3a3a3 66%, #525252 100%);
}

.color-dawn-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #f59e0b 100%);
}

.color-golden-brown {
    background: linear-gradient(135deg, #92400e 0%, #d97706 50%, #fbbf24 100%);
}

.color-graphite-black {
    background: linear-gradient(135deg, #111827 0%, #374151 50%, #4b5563 100%);
}

.color-navy-blue {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
}

.color-icy-silver {
    background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #ffffff 100%);
    border-color: rgba(0, 0, 0, 0.3) !important;
}

.color-kong {
    background: linear-gradient(135deg, #1f2937 0%, #4b5563 50%, #6b7280 100%);
}

.color-lemon-yellow {
    background: linear-gradient(135deg, #fbbf24 0%, #facc15 50%, #fde047 100%);
}

.color-lilac-purple {
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #ddd6fe 100%);
}

.color-motor-race {
    background: linear-gradient(135deg, #000000 0%, #dc2626 25%, #fbbf24 50%, #000000 75%, #ffffff 100%);
}

.color-neon {
    background: linear-gradient(135deg, #22d3ee 0%, #a7f3d0 25%, #facc15 50%, #f472b6 75%, #c084fc 100%);
}

.color-phantom-gold {
    background: linear-gradient(135deg, #1f2937 0%, #d97706 50%, #fbbf24 100%);
    opacity: 0.9;
}

.color-phantom-green {
    background: linear-gradient(135deg, #1f2937 0%, #059669 50%, #10b981 100%);
    opacity: 0.9;
}

.color-pink-city {
    background: linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f9a8d4 100%);
}

.color-race-track {
    background: linear-gradient(135deg, #000000 0%, #374151 25%, #ffffff 50%, #dc2626 75%, #000000 100%);
}

.color-rose-pink {
    background: linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #fda4af 100%);
}

.color-rosy {
    background: linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%);
}

.color-shiny-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #6ee7b7 100%);
}

.color-sky-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
}

.color-starry-night {
    background: linear-gradient(135deg, #111827 0%, #1e3a8a 50%, #7c3aed 100%);
}

.color-titanium-silver {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 50%, #d1d5db 100%);
}

.color-twilight-purple {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #a855f7 100%);
}

.color-word-pop {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 25%, #3b82f6 50%, #10b981 75%, #f59e0b 100%);
}

.color-word-pop-blue {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%);
}

.color-word-pop-yellow {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

.color-bondi-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 50%, #67e8f9 100%);
}

.color-camo-red {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 33%, #365314 66%, #4d7c0f 100%);
}

.color-camo-silver {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 33%, #365314 66%, #4d7c0f 100%);
}

.color-camo-yellow {
    background: linear-gradient(135deg, #facc15 0%, #fde047 33%, #365314 66%, #4d7c0f 100%);
}

.color-champagne-gold {
    background: linear-gradient(135deg, #f7e7ce 0%, #f59e0b 50%, #d97706 100%);
}

.color-cyber-lime {
    background: linear-gradient(135deg, #84cc16 0%, #a3e635 50%, #d9f99d 100%);
}

.color-ice-green {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 50%, #10b981 100%);
}

.color-ocean-blue {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #0ea5e9 100%);
}

.color-sakura-pink {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 25%, #fbcfe8 50%, #f9a8d4 75%, #ec4899 100%);
}

/* Специальные эффекты для металлических цветов */
.color-silver,
.color-gold,
.color-rose-gold,
.color-phantom-gold,
.color-phantom-green,
.color-icy-silver,
.color-titanium-silver,
.color-champagne-gold {
    position: relative;
    overflow: hidden;
}

.color-silver::after,
.color-gold::after,
.color-rose-gold::after,
.color-phantom-gold::after,
.color-phantom-green::after,
.color-icy-silver::after,
.color-titanium-silver::after,
.color-champagne-gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    animation: metallic-shine 3s infinite;
    pointer-events: none;
}

@keyframes metallic-shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Анимация для неоновых и радужных цветов */
.color-neon,
.color-rainbow-purple,
.color-word-pop {
    animation: color-pulse 2s ease-in-out infinite alternate;
}

@keyframes color-pulse {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

/* Адаптивность */
@media (max-width: 640px) {
    .product-card .color-circle {
        width: 12px !important;
        height: 12px !important;
    }
    
    .product-card .color-circle:hover {
        transform: scale(1.3);
    }
}

/* Компактные карточки для похожих товаров */
.product-card-small {
    min-height: 320px;
    max-height: 360px;
}

.product-card-small .product-image {
    height: 180px;
}

.product-card-small > div:last-child {
    min-height: 140px;
    padding: 0.75rem;
}

.product-card-small .product-attributes-container,
.product-card-small .attribute-container {
    height: 80px;
    margin-bottom: 0.5rem;
}

.product-card-small .attribute-group > span:first-child {
    width: 3rem;
}

/* Отключаем ограничения высоты для маленьких карточек в мобильной версии */
@media (max-width: 640px) {
    .product-card-small .attribute-container {
        height: auto;
        max-height: 60px;
    }
}

/* Анимации */

/* Дополнительные стили для атрибутов */
.product-card .bg-green-400,
.product-card .text-green-400 {
    background-color: rgba(34, 197, 94, 0.8) !important;
    color: white !important;
}

.product-card .bg-accent-smoke\/20,
.product-card .text-accent-smoke {
    background-color: rgba(139, 92, 246, 0.2) !important;
    color: rgba(139, 92, 246, 1) !important;
}

.product-card .bg-main\/30 {
    background-color: rgba(30, 41, 59, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Для цветов атрибутов */
.product-card .text-blue-400 {
    background-color: rgba(59, 130, 246, 0.8) !important;
    color: white !important;
}

.product-card .text-purple-400 {
    background-color: rgba(168, 85, 247, 0.8) !important;
    color: white !important;
}

.product-card .text-yellow-400 {
    background-color: rgba(251, 191, 36, 0.8) !important;
    color: rgba(30, 41, 59, 1) !important;
}

/* Заглушка для товаров без атрибутов */
.product-card .no-attributes-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    text-align: center;
}

/* ========================================
   СТИЛИ ДЛЯ РАЗВЕРНУТОГО БАЯНА В РЕЖИМЕ СПИСКА
   ======================================== */

/* Основная сетка деталей товара */
.details-grid {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Левая колонка - увеличенное изображение */
.details-image-column {
    display: flex;
    flex-direction: column;
}

.expanded-product-image {
    position: relative;
    transition: all 0.3s ease;
    min-height: 200px;
}

.expanded-product-image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.2);
}

.expanded-product-image img {
    transition: transform 0.3s ease;
}

.expanded-product-image:hover img {
    transform: scale(1.05);
}

/* Средняя колонка - атрибуты */
.details-attributes-column h4 {
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.details-attribute-group {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.details-attribute-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.details-attribute-group:hover::before {
    transform: translateX(100%);
}

.details-attribute-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
}

/* Специальные стили для типов атрибутов */
.details-flavors {
    border-left: 3px solid #10b981;
}

.details-strength {
    border-left: 3px solid #8b5cf6;
}

.details-colors {
    border-left: 3px solid #f59e0b;
}

/* Значения атрибутов в деталях */
.details-attribute-value {
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.details-attribute-value:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Анимация для значений вкусов */
.details-flavors .details-attribute-value:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Анимация для значений крепости */
.details-strength .details-attribute-value:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Правая колонка - цена и действия */
.details-actions-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Секция цены */
.price-section {
    position: relative;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.price-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

.price-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.price-section:hover::before {
    opacity: 1;
}

/* Индикатор наличия - улучшенный */
.availability-badge {
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}

.availability-badge.available {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.availability-badge.unavailable {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
}

.availability-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.availability-status-dot {
    flex-shrink: 0;
}

/* Действия в деталях */
.details-actions button,
.details-actions a {
    position: relative;
    overflow: hidden;
    transform-origin: center;
}

.details-actions button::before,
.details-actions a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.details-actions button:hover::before,
.details-actions a:hover::before {
    left: 100%;
}

/* Анимация появления развернутого блока */
.product-details:not(.hidden) .details-grid {
    animation: expandDetailsEnhanced 0.4s ease-out forwards;
}

@keyframes expandDetailsEnhanced {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 1000px;
    }
}

/* Улучшенная анимация collapse */
.product-details.collapsing .details-grid {
    animation: collapseDetailsEnhanced 0.3s ease-in forwards;
}

@keyframes collapseDetailsEnhanced {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 1000px;
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        max-height: 0;
    }
}

/* Hover эффекты для цветных кружков в деталях */
.details-colors .details-attribute-value:hover .color-circle {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Эффект пульсации для индикатора наличия */
@keyframes pulse-availability {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.availability-badge.available .availability-status-dot {
    animation: pulse-availability 2s infinite;
}

/* Загрузочное состояние для деталей */
.details-grid.loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.details-grid.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Hover эффект для всего блока деталей */
.product-details:not(.hidden):hover .details-grid {
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Улучшенная типографика для деталей */
.details-attribute-title {
    letter-spacing: 0.025em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.price-section .text-2xl {
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Фокус состояния для доступности */
.details-actions button:focus,
.details-actions a:focus {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

.details-attribute-value:focus {
    outline: 1px solid #8b5cf6;
    outline-offset: 1px;
}

/* Адаптивность для развернутых деталей */
@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
    }
    
    .expanded-product-image {
        max-height: 200px;
    }
    
    .details-attributes-column h4 {
        font-size: 1rem;
    }
    
    .details-attribute-group {
        padding: 0.75rem;
    }
    
    .details-attribute-value {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .price-section {
        padding: 1rem;
    }
    
    .price-section .text-2xl {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .details-grid {
        padding: 0.75rem;
        gap: 1rem;
    }
    
    .details-attribute-values {
        gap: 0.375rem !important;
    }
    
    .details-attribute-value {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
    }
    
    .details-actions button,
    .details-actions a {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Анимация для загрузки */

/* ===== КОМПАКТНЫЙ СПИСОЧНЫЙ ВИД ===== */
.product-list-item {
    transition: all 0.2s ease;
    will-change: background-color, border-color;
    animation: fadeInLeft 0.3s ease-out;
}

.product-list-item:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

/* Компактное изображение */
.product-image-compact {
    transition: all 0.2s ease;
}

.product-image-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.product-list-item:hover .product-image-compact img {
    transform: scale(1.05);
}

/* Компактные метки товара */
.product-list-item .bg-green-500,
.product-list-item .bg-red-500 {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Цветовые круги в списочном режиме */
.product-list-item .w-3.h-3 {
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-list-item .w-3.h-3:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

/* Кнопка в списочном режиме */
.product-list-item a[class*="bg-accent-smoke"] {
    transition: all 0.2s ease;
    white-space: nowrap;
}

.product-list-item a[class*="bg-accent-smoke"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.2);
}

/* Анимация появления */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== МОБИЛЬНЫЕ СТИЛИ ДЛЯ СПИСОЧНОГО РЕЖИМА ===== */

/* Очень маленькие экраны (до 480px) */
@media (max-width: 479px) {
    .product-list-item {
        margin-bottom: 0.5rem;
    }
    
    .product-list-item .flex.items-center.p-3 {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .product-image-compact {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    .product-list-item h3 {
        font-size: 0.875rem;
        line-height: 1.2;
    }
    
    .product-list-item .flex.items-center.gap-3 {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .product-list-item .flex.items-center.gap-2 {
        gap: 0.375rem;
        flex-wrap: wrap;
    }
    
    .product-list-item .text-xs {
        font-size: 0.625rem;
    }
    
    .product-list-item .w-3.h-3 {
        width: 0.625rem;
        height: 0.625rem;
    }
    
    /* Адаптация для очень узких экранов */
    .product-list-item .flex.items-center.justify-between {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .product-list-item .flex-1.min-w-0.mr-4 {
        margin-right: 0;
    }
    
    .product-list-item .flex.items-center.gap-3.flex-shrink-0 {
        justify-content: space-between;
        flex-shrink: 1;
    }
}

/* Маленькие экраны (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
    .product-list-item .flex.items-center.p-3 {
        padding: 1rem;
        gap: 1rem;
    }
    
    .product-image-compact {
        width: 4rem !important;
        height: 4rem !important;
    }
    
    .product-list-item h3 {
        font-size: 0.9375rem;
    }
    
    .product-list-item .flex.items-center.gap-3 {
        gap: 0.625rem;
    }
    
    .product-list-item .flex.items-center.gap-2 {
        gap: 0.5rem;
    }
}

/* Средние экраны (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
    .product-list-item .flex.items-center.p-3 {
        padding: 1rem;
        gap: 1.25rem;
    }
    
    .product-image-compact {
        width: 5rem !important;
        height: 5rem !important;
    }
    
    .product-list-item .flex.items-center.gap-2 {
        gap: 0.75rem;
    }
}

/* Планшеты (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-list-item .flex.items-center.p-3 {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .product-image-compact {
        width: 6rem !important;
        height: 6rem !important;
    }
    
    .product-list-item h3 {
        font-size: 1rem;
    }
}

/* Десктоп (1024px и больше) */
@media (min-width: 1024px) {
    .product-list-item .flex.items-center.p-3 {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .product-image-compact {
        width: 6rem !important;
        height: 6rem !important;
    }
    
    .product-list-item h3 {
        font-size: 1.125rem;
    }
    
    .product-list-item .flex.items-center.gap-2 {
        gap: 1rem;
    }
}

/* Touch устройства */
@media (hover: none) and (pointer: coarse) {
    .product-list-item:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    }
    
    .product-list-item:hover .product-image-compact img {
        transform: none;
    }
    
    .product-list-item a[class*="bg-accent-smoke"] {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
    }
    
    .product-list-item .w-3.h-3 {
        min-width: 24px;
        min-height: 24px;
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Горизонтальная ориентация на мобильных */
@media (max-width: 767px) and (orientation: landscape) {
    .product-list-item .flex.items-center.p-3 {
        padding: 0.75rem;
        gap: 1rem;
    }
    
    .product-image-compact {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    
    .product-list-item h3 {
        font-size: 0.875rem;
    }
    
    .product-list-item .flex.items-center.gap-3 {
        gap: 0.5rem;
    }
    
    .product-list-item .flex.items-center.gap-2 {
        gap: 0.375rem;
    }
    
    .product-list-item .text-xs {
        font-size: 0.625rem;
    }
}

/* Высокая плотность пикселей */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-list-item .bg-green-500,
    .product-list-item .bg-red-500 {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
    }
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .product-list-item {
        background: rgba(15, 23, 42, 0.4);
        border-color: rgba(139, 92, 246, 0.15);
    }
    
    .product-list-item:hover {
        background: rgba(15, 23, 42, 0.6);
        border-color: rgba(139, 92, 246, 0.4);
    }
    
    .product-image-compact {
        background: rgba(15, 23, 42, 0.6);
    }
}

/* Удаляем старые стили для list карточек, которые больше не используются */
.product-card-list,
.product-image-list,
.product-info-list,
.product-attributes-list-container,
.attribute-group-list {
    /* Эти стили больше не используются с новым компактным дизайном */
    display: none !important;
}

.product-list-item {
    animation: fadeInLeft 0.3s ease-out;
}

/* === СТИЛИ ДЛЯ ОТОБРАЖЕНИЯ ЦЕН В GRID-РЕЖИМЕ === */

/* Стили для блока цены в контентной части карточки */
.price-content-single,
.price-content-sale {
    /* Убираем фон и рамку - они есть у родительского контейнера */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    transition: none !important;
    box-shadow: none !important;
    /* Центрирование содержимого */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Стили для основной цены в карточках */
.price-content-single .price-main,
.price-content-sale .price-main,
.grid-price-display .price-main,
.grid-price-display .price-sale {
    color: #fbbf24 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3) !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.price-content-sale .price-old,
.grid-price-display .price-old {
    color: #f87171 !important;
    font-size: 0.875rem !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

.price-content-sale .price-old {
    margin-top: 0.25rem !important;
}

.grid-price-display .price-old {
    margin-left: 0.5rem !important;
}

.price-content-single .price-range,
.grid-price-display .price-range {
    color: #d1d5db !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.price-content-single .price-range {
    margin-top: 0.25rem !important;
}

.grid-price-display .price-range {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Основной контейнер для отображения цены в grid */
.grid-price-display {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 2px solid rgba(147, 51, 234, 0.6) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    margin-top: 0.25rem !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    /* Центрирование содержимого */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.grid-price-display::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transition: left 0.6s ease !important;
}

.grid-price-display:hover::before {
    left: 100% !important;
}

.grid-price-display:hover {
    border-color: rgba(147, 51, 234, 0.8) !important;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.2), 0 0 20px rgba(147, 51, 234, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Индикатор наличия */
.grid-price-display .availability-badge {
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}

.grid-price-display .availability-badge.available {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.grid-price-display .availability-badge.unavailable {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
}

.grid-price-display .availability-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.grid-price-display .availability-status-dot {
    flex-shrink: 0;
}

/* Контейнер для цены со скидкой */
.grid-price-display .sale-price-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Заглушка для отсутствующей цены */
.grid-price-display .price-unavailable {
    color: #9ca3af !important;
    font-style: italic !important;
    font-size: 0.875rem !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
    .grid-price-display {
        padding: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .price-content-single .price-main,
    .price-content-sale .price-main,
    .grid-price-display .price-main,
    .grid-price-display .price-sale {
        font-size: 1rem !important;
    }
    
    .price-content-sale .price-old,
    .grid-price-display .price-old {
        font-size: 0.8rem !important;
    }
    
    .price-content-single .price-range,
    .grid-price-display .price-range {
        font-size: 0.875rem !important;
    }
}

/* Специфичные стили только для grid-view */
.grid-view .grid-price-display {
    z-index: 1 !important;
}

.grid-view .product-card:hover .grid-price-display {
    z-index: 3 !important;
}

/* ===== ЦВЕТОВЫЕ АТРИБУТЫ НА КАРТОЧКАХ ===== */
/* Объем - синий */
.attribute-volume {
    background: rgba(59, 130, 246, 0.2) !important;
    color: rgb(96, 165, 250) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.attribute-volume:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* Крепость - красный */
.attribute-strength {
    background: rgba(239, 68, 68, 0.2) !important;
    color: rgb(248, 113, 113) !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.attribute-strength:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

/* Вкус - зеленый */
.attribute-flavor {
    background: rgba(34, 197, 94, 0.2) !important;
    color: rgb(74, 222, 128) !important;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.attribute-flavor:hover {
    background: rgba(34, 197, 94, 0.3) !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}