/*
 * Редизайн карточек товаров для CoffeeRanks
 * ЭТАП 3: Визуальная иерархия, вкусовые ноты, современный дизайн
 * Дата: 2025-07-07
 */

/* =============================================================================
   ОСНОВНЫЕ СТИЛИ КАРТОЧЕК КОФЕ
   ============================================================================= */

/* Переопределяем старые стили карточек */
.coffee-card {
    background: var(--white) !important;
    border-radius: var(--border-radius-lg, 16px) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.08)) !important;
    transition: var(--transition-normal, all 0.3s ease) !important;
    position: relative !important;
    height: auto !important;
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--gray-200) !important;
}

.coffee-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.12)) !important;
    border-color: var(--gray-300) !important;
}

.coffee-card a {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* =============================================================================
   ИЗОБРАЖЕНИЯ ТОВАРОВ
   ============================================================================= */

.coffee-image {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.coffee-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.coffee-card:hover .coffee-image img {
    transform: scale(1.05) !important;
}

/* Бейджи (Новинка, Популярное и т.д.) */
.coffee-image .badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: var(--primary-coffee) !important;
    color: var(--white) !important;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px) !important;
    border-radius: var(--border-radius-sm, 6px) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.badge-new {
    background: var(--warning) !important;
}

.badge-popular {
    background: var(--success) !important;
}

.badge-sale {
    background: var(--error) !important;
}

/* =============================================================================
   ИНФОРМАЦИЯ О ТОВАРЕ
   ============================================================================= */

.coffee-info {
    padding: 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Название кофе */
.coffee-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6rem !important;
}

/* Обжарщик */
.coffee-roaster {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* Только степень обжарки */
.coffee-details {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.coffee-roast {
    background: var(--neutral-cream) !important;
    color: var(--text-secondary) !important;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px) !important;
    border-radius: var(--border-radius-sm, 6px) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
}

/* Убираем происхождение из карточек */
.coffee-origin {
    display: none !important;
}

/* =============================================================================
   РЕЙТИНГ И ОЦЕНКИ
   ============================================================================= */

.coffee-rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

/* Звезды вместо Q-оценки */
.stars {
    display: flex !important;
    gap: 2px !important;
}

.stars i {
    color: var(--accent-gold) !important;
    font-size: 0.85rem !important;
}

.stars i.far {
    color: var(--gray-300) !important;
}

.rating-value {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Скрываем рейтинг если его нет */
.coffee-rating:empty,
.coffee-rating:has(.stars:empty) {
    display: none !important;
}

/* Убираем Q-оценку */
.q-grade {
    display: none !important;
}

/* =============================================================================
   ВКУСОВЫЕ НОТЫ
   ============================================================================= */

.taste-notes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 8px 0 !important;
}

.taste-note {
    display: inline-block !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.2px !important;
}

/* Цветовая схема для вкусовых нот */
.taste-note.fruity,
.taste-note.berry,
.taste-note.citrus {
    background: var(--taste-fruity) !important;
    color: var(--taste-fruity-text) !important;
}

.taste-note.nutty,
.taste-note.almond,
.taste-note.hazelnut {
    background: var(--taste-nutty) !important;
    color: var(--taste-nutty-text) !important;
}

.taste-note.chocolate,
.taste-note.cocoa,
.taste-note.dark-chocolate {
    background: var(--taste-chocolate) !important;
    color: var(--taste-chocolate-text) !important;
}

.taste-note.floral,
.taste-note.jasmine,
.taste-note.rose {
    background: var(--taste-floral) !important;
    color: var(--taste-floral-text) !important;
}

.taste-note.spicy,
.taste-note.cinnamon,
.taste-note.cardamom {
    background: var(--taste-citrus) !important;
    color: var(--taste-citrus-text) !important;
}

.taste-note.caramel,
.taste-note.vanilla,
.taste-note.honey {
    background: var(--taste-caramel) !important;
    color: var(--taste-caramel-text) !important;
}

.taste-note.wine,
.taste-note.winey,
.taste-note.red-wine {
    background: var(--taste-wine) !important;
    color: var(--taste-wine-text) !important;
}

.taste-note.earthy,
.taste-note.woody,
.taste-note.cedar {
    background: var(--taste-earthy) !important;
    color: var(--taste-earthy-text) !important;
}

/* =============================================================================
   УБИРАЕМ ЛИШНИЕ ЭЛЕМЕНТЫ
   ============================================================================= */

/* Убираем цену из карточек */
.coffee-price {
    display: none !important;
}

/* Убираем описание из карточек */
.coffee-flavor,
.coffee-description {
    display: none !important;
}

/* Кнопка "В корзину" */
.add-to-cart {
    margin: auto 16px 16px 16px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* =============================================================================
   СЕТКА КАРТОЧЕК
   ============================================================================= */

.coffee-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin: 24px 0 !important;
}

.coffee-carousel {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding: 0 0 16px 0 !important;
    margin: 24px 0 !important;
}

.coffee-slide {
    flex: 0 0 280px !important;
    min-width: 280px !important;
}

/* =============================================================================
   АДАПТИВНЫЕ СТИЛИ
   ============================================================================= */

/* Планшет */
@media (min-width: 768px) and (max-width: 1024px) {
    .coffee-card {
        min-height: 300px !important;
    }
    
    .coffee-image {
        height: 180px !important;
    }
    
    .coffee-name {
        font-size: 1rem !important;
    }
    
    .coffee-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 16px !important;
    }
    
    .coffee-slide {
        flex: 0 0 250px !important;
        min-width: 250px !important;
    }
}

/* Мобильные устройства */
@media (max-width: 767px) {
    .coffee-card {
        min-height: 280px !important;
        border-radius: 12px !important;
    }
    
    .coffee-image {
        height: 160px !important;
    }
    
    .coffee-info {
        padding: 12px !important;
        gap: 6px !important;
    }
    
    .coffee-name {
        font-size: 0.95rem !important;
        min-height: 2.3rem !important;
    }
    
    .coffee-roaster {
        font-size: 0.8rem !important;
    }
    
    .taste-note {
        font-size: 0.65rem !important;
        padding: 2px 5px !important;
    }
    
    .coffee-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 12px !important;
    }
    
    .coffee-carousel {
        gap: 12px !important;
    }
    
    .coffee-slide {
        flex: 0 0 200px !important;
        min-width: 200px !important;
    }
    
    .add-to-cart {
        margin: auto 12px 12px 12px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* =============================================================================
   АНИМАЦИИ
   ============================================================================= */

.coffee-card {
    animation: fadeInUp 0.6s ease-out !important;
}

/* Задержки для каруселей */
.coffee-carousel .coffee-slide:nth-child(1) { animation-delay: 0.1s !important; }
.coffee-carousel .coffee-slide:nth-child(2) { animation-delay: 0.2s !important; }
.coffee-carousel .coffee-slide:nth-child(3) { animation-delay: 0.3s !important; }
.coffee-carousel .coffee-slide:nth-child(4) { animation-delay: 0.4s !important; }

/* Задержки для сетки */
.coffee-grid .coffee-card:nth-child(1) { animation-delay: 0.1s !important; }
.coffee-grid .coffee-card:nth-child(2) { animation-delay: 0.15s !important; }
.coffee-grid .coffee-card:nth-child(3) { animation-delay: 0.2s !important; }
.coffee-grid .coffee-card:nth-child(4) { animation-delay: 0.25s !important; }
.coffee-grid .coffee-card:nth-child(5) { animation-delay: 0.3s !important; }
.coffee-grid .coffee-card:nth-child(6) { animation-delay: 0.35s !important; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   УЛУЧШЕНИЯ ДОСТУПНОСТИ
   ============================================================================= */

.coffee-card a:focus {
    outline: 2px solid var(--primary-coffee) !important;
    outline-offset: 2px !important;
}

.coffee-card a:focus-visible {
    box-shadow: 0 0 0 4px rgba(192, 89, 42, 0.2) !important;
}

/* Улучшение контрастности */
@media (prefers-contrast: high) {
    .coffee-name {
        color: var(--black) !important;
    }
    
    .coffee-roaster {
        color: var(--text-secondary) !important;
    }
    
    .rating-value {
        color: var(--black) !important;
    }
}

/* =============================================================================
   ПЕРЕОПРЕДЕЛЕНИЕ СТАРЫХ СТИЛЕЙ
   ============================================================================= */

/* Отключаем старые стили которые могут конфликтовать */
.coffee-card .product-title,
.coffee-card .product-details,
.coffee-card .product-description,
.coffee-card .product-price {
    display: none !important;
}

/* Исправляем конфликты с другими CSS */
.coffee-card .coffee-meta {
    display: block !important;
    margin: 0 !important;
}

.coffee-card .coffee-details span:not(.coffee-roast) {
    display: none !important;
}