/* --- Полностью обновленный style.css для витрины --- */

/* Базовые стили */
body, html {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Шапка и подвал */
.site-header, .site-footer {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}
.site-header h1 { margin: 0; color: #2c3e50; }
.site-footer { margin-top: 40px; border-top: 1px solid #e0e0e0; border-bottom: none; font-size: 0.9em; color: #777; }


/* --- ИЗМЕНЕНИЕ: Панель управления --- */
.controls-panel {
    display: flex;
    flex-direction: column; /* Элементы теперь друг под другом */
    align-items: center; /* Центрируем по горизонтали */
    gap: 15px;
    margin-bottom: 30px;
}

.search-panel {
    width: 100%;
    max-width: 500px; /* Ограничиваем максимальную ширину поля поиска */
}
#productSearch {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Важно для правильного расчета ширины */
}
#productSearch:focus { border-color: #3498db; box-shadow: 0 0 8px rgba(52, 152, 219, 0.2); }

.filter-button {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 500;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.filter-button:hover { background-color: #2980b9; }


/* --- ИЗМЕНЕНИЕ: Сетка и карточки товаров --- */
.product-grid {
    display: grid;
    /* На мобильных устройствах будет 2 колонки, на больших - больше */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; /* Немного уменьшим отступ на мобильных */
}

/* Настраиваем сетку для больших экранов (планшеты и десктопы) */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }
}

.product-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e9ecef; /* Добавляем тонкую рамку */
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.1);
}

/* Слайдер в карточке */
.product-slider {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Соотношение сторон 4:3 */
    background-color: #f8f9fa;
}
.product-slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: white; border: none; padding: 8px; cursor: pointer; opacity: 0; transition: opacity 0.3s; z-index: 1; }
.product-card:hover .slider-btn { opacity: 1; }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }


/* Содержимое карточки */
.product-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.product-content h3 { margin: 0 0 10px 0; font-size: 1.1em; }
.product-content .description { font-size: 0.9em; color: #555; flex-grow: 1; margin-bottom: 15px; }
.product-footer {
    display: flex;
    justify-content: space-between; /* На больших экранах: цена слева, статус справа */
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    /* Добавляем flex-wrap, чтобы элементы могли переноситься */
    flex-wrap: wrap; 
}

/* --- НОВЫЙ БЛОК: Адаптивность для мобильных устройств --- */
/* Этот медиа-запрос сработает на экранах шириной 767px и меньше */
@media (max-width: 767px) {
    .product-footer {
        flex-direction: column; /* Элементы теперь идут друг под другом */
        align-items: flex-start; /* Выравниваем все по левому краю */
        gap: 8px; /* Добавляем небольшой отступ между ценой и статусом */
    }

    .price {
        /* Уменьшим немного размер цены на мобильных */
        font-size: 1.1em;
    }

    .status {
        /* Можно сделать статус чуть меньше, чтобы он не был таким навязчивым */
        padding: 4px 8px;
        font-size: 0.75em;
    }
}
.price { font-size: 1.2em; font-weight: bold; color: #3498db; }
.status { padding: 5px 10px; border-radius: 15px; font-size: 0.8em; font-weight: bold; }
.status.in-stock { background-color: #2ecc71; color: white; }
.status.out-of-stock { background-color: #e7a83c; color: white; }


/* --- Стили для модального окна фильтров (без изменений) --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; }
.modal.active { display: flex; align-items: center; justify-content: center; }
.modal-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-content { position: relative; background: #fff; border-radius: 12px; width: 90%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e9ecef; }
.modal-header h2 { margin: 0; }
.close-modal-btn { font-size: 28px; font-weight: bold; border: none; background: none; cursor: pointer; color: #aaa; }
.close-modal-btn:hover { color: #333; }
.modal-body { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.filter-group h4 { margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; }
.filter-list { max-height: 250px; overflow-y: auto; padding-right: 10px; }
.filter-item { display: block; margin-bottom: 8px; }
.filter-item label { display: flex; align-items: center; cursor: pointer; }
.filter-item input { margin-right: 8px; width: 16px; height: 16px; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #e9ecef; display: flex; gap: 10px; justify-content: flex-end; }
.modal-footer button { padding: 10px 20px; border-radius: 8px; border: none; font-weight: 500; cursor: pointer; }
.apply-btn { background-color: #2ecc71; color: white; }
.apply-btn:hover { background-color: #27ae60; }
.reset-btn { background-color: #e74c3c; color: white; }
.reset-btn:hover { background-color: #c0392b; }


/* Загрузчик и модальное окно для изображений (без изменений) */
.loader { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 50px auto; grid-column: 1 / -1; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.image-lightbox-modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
.modal-content-img { margin: auto; display: block; max-width: 80%; max-height: 85vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product-tags {
    /* Контейнер для всех тегов */
    margin-top: auto; /* Прижимает блок тегов к футеру карточки */
    padding-bottom: 15px; /* Отступ снизу до футера */
    display: flex;
    flex-wrap: wrap; /* Позволяет тегам переноситься на новую строку */
    gap: 6px; /* --- ВОТ ИСПРАВЛЕНИЕ: Добавляем отступы между тегами --- */
    align-items: center; /* Выравниваем теги по вертикали */
}

.product-tag {
    /* Стили для одного тега */
    background-color: #e9ecef; /* Слегка серый фон */
    color: #495057; /* Темно-серый цвет текста для контраста */
    font-size: 12px; /* Небольшой размер шрифта */
    font-weight: 500;
    padding: 4px 10px; /* Внутренние отступы (вертикальный и горизонтальный) */
    border-radius: 15px; /* --- ВОТ ИСПРАВЛЕНИЕ: Закругленные рамки --- */
    white-space: nowrap; /* Запрещаем перенос текста внутри одного тега */
}
.brand-tag {
    /* Стили для одного тега */
    background-color: #f1ecef; /* Слегка серый фон */
	box-shadow: 0px 0px 10px #7da8ff;
	max-width: adaptive;
	text-align: center;
    color: #495057; /* Темно-серый цвет текста для контраста */
    font-size: 12px; /* Небольшой размер шрифта */
    font-weight: 500;
    padding: 4px 10px; /* Внутренние отступы (вертикальный и горизонтальный) */
    border-radius: 15px; /* --- ВОТ ИСПРАВЛЕНИЕ: Закругленные рамки --- */
    white-space: nowrap; /* Запрещаем перенос текста внутри одного тега */
}