/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    .beer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Десктоп */
@media (min-width: 1025px) {
    .beer-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Для Android (WebView) */
@media (max-width: 480px) {
    .beer-card .meta {
        flex-wrap: wrap;
    }
    
    .beer-card .actions {
        flex-direction: column;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .filters select, .filters input {
        min-width: 100%;
    }
}

/* Тёмная тема для Android WebView */
@media (prefers-color-scheme: dark) {
    :root {
        --dark: #0d0d1a;
        --darker: #1a1a2e;
    }
}

/* Сглаживание на мобильных */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.beer-card {
    animation: fadeIn 0.5s ease;
}

/* Скелетон загрузки */
.skeleton {
    background: linear-gradient(90deg, var(--darker) 25%, var(--gray) 50%, var(--darker) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}