/* =====================================================
   PRODUCTS.CSS - Стили карточек товаров, сетки и категорий
   ===================================================== */

/* ------------------- 1. СЕТКА ТОВАРОВ ------------------- */
.products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/* ------------------- 2. КАРТОЧКА ТОВАРА ------------------- */
.product {
    background-color: #21222B;
    margin: 10px 10px;
    padding-top: 30px;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(21, 23, 28, 0.7);
    text-align: center;
    position: relative;
    transition: transform 0.4s;
    cursor: pointer;
}

.product:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    transition: transform 0.4s;
}

/* ------------------- 3. ЦЕНА НА КАРТОЧКЕ ------------------- */
.product .price {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    max-width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------- 4. НАЗВАНИЕ ТОВАРА ПРИ НАВЕДЕНИИ ------------------- */
.item-name {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.product:hover .item-name {
    opacity: 1;
}

/* ------------------- 5. БЕЙДЖ КОЛИЧЕСТВА (ДЛЯ РЕСУРСОВ, ЕДЫ, ПАТРОНОВ) ------------------- */
.item-amount-badge {
    position: absolute;
    bottom: 45px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFD700;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
}

/* ------------------- 6. КОНТЕЙНЕР ИЗОБРАЖЕНИЯ ------------------- */
.image-container {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.image-container img {
    transform: scale(0.6);
    border-radius: 5px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------- 7. ЦВЕТОВЫЕ ГРАДИЕНТЫ ДЛЯ КАТЕГОРИЙ ------------------- */

/* Наборы (kits) */
.kits .image-container {
    background: linear-gradient(to top, rgba(123, 201, 82, 0.5) 0%, rgba(123, 201, 82, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(123, 201, 82, 1);
}

/* Базовые постройки (basic-buildings) */
.basic-buildings .image-container {
    background: linear-gradient(to top, rgba(169, 169, 169, 0.5) 0%, rgba(169, 169, 169, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(169, 169, 169, 1);
}

/* Оружие (weapons) */
.weapons .image-container {
    background: linear-gradient(to top, rgba(235, 75, 75, 0.5) 0%, rgba(235, 75, 75, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(235, 75, 75, 1);
}

/* Боеприпасы (ammo) */
.ammo .image-container {
    background: linear-gradient(to top, rgba(75, 75, 235, 0.5) 0%, rgba(75, 75, 235, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(75, 75, 235, 1);
}

/* Ресурсы (resources) */
.resources .image-container {
    background: linear-gradient(to top, rgba(0, 123, 255, 0.5) 0%, rgba(0, 123, 255, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(0, 123, 255, 1);
}

/* Одежда (clothes) */
.clothes .image-container {
    background: linear-gradient(to top, rgba(255, 193, 7, 0.5) 0%, rgba(255, 193, 7, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(255, 193, 7, 1);
}

/* Инструменты (tools) */
.tools .image-container {
    background: linear-gradient(to top, rgba(0, 150, 136, 0.5) 0%, rgba(0, 150, 136, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(0, 150, 136, 1);
}

/* Медикаменты (medicines) */
.medicines .image-container {
    background: linear-gradient(to top, rgba(34, 177, 76, 0.5) 0%, rgba(34, 177, 76, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(34, 177, 76, 1);
}

/* Еда (eat) */
.eat .image-container {
    background: linear-gradient(to top, rgba(255, 140, 0, 0.5) 0%, rgba(255, 140, 0, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(255, 140, 0, 1);
}

/* Прочее (other) */
.other .image-container {
    background: linear-gradient(to top, rgba(128, 128, 128, 0.5) 0%, rgba(128, 128, 128, 0.3) 20%, rgba(0, 0, 0, 0) 90%);
    border-bottom: 4px solid rgba(128, 128, 128, 1);
}