.market_content {
    display: flex;
    width: 100%;
    gap: clamp(0.1vh, 2vw, 2vh);
    overflow: hidden; /* Предотвращает выход содержимого за пределы контейнера */
    padding-top: 20px;
}

/*        Меню товаров!!!!!!!!!!          */
.trade_container {
    flex-basis: 70%; /* Задает начальную ширину в 70% от родительского контейнера */
    flex-grow: 1;    /* Позволяет этому элементу занимать оставшееся пространство */
    display: flex;
    flex-direction: column;
    background-color: #ecebf3; /* Опционально: цвет фона контейнера */
    border-radius: 16px;
}
/*        Настройки корзины располагаются в cart.css!!!!!!!!!!          */


.product_container {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку при нехватке места */
    gap: 10px; /* Зазор между элементами, можно настроить по желанию */
    justify-content: flex-start; /* Выравнивание по левому краю */
    padding: 10px;
}

/* Каждый отдельный товар */
.product_item {
    flex: 1 1 49%; /* Ширина адаптируется от 50% до 33.33% */
    box-sizing: border-box;         /* Включает внутренние отступы и границы в ширину элемента */
    border: 1px solid #ccc;         /* Граница вокруг каждого товара */
    border-radius: 10px;            /* Скругление углов */
    padding: 15px;                  /* Внутренний отступ */
    background-color: #f9f9f9;      /* Цвет фона */
    transition: transform 0.3s ease; /* Анимация при наведении */
    width: 100%;
    min-width: 200px; /* Установите минимальную ширину по своему усмотрению */

    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.product_item.show {
    opacity: 1;
    transform: scale(1);
}

/* Стили изображений внутри товаров */
.product_item img {
    width: 100%;           /* Изображение занимает всю ширину блока товара */
    height: auto;          /* Автоматическая высота для сохранения пропорций */
    border-radius: 12px;    /* Скругление углов изображения */
}

/* Стили заголовка и текста описания */
.product_item h2 {
    font-size: 1.5em;
    margin: 4px 0;
    color: #333;
}

.product_item p {
    font-size: 1em;
    color: #666;
    margin: 10px auto;
}
/* Стили для ценника!*/
.product_item .market_price {
    font-weight: bold; /* Жирность текста */
}

/* Эффект при наведении на товар*/
.product_item:hover {
    transform: scale(1.03); /* Легкое увеличение при наведении */
}






/* Офрмление вариантов!!!!!!!!!!!!! */
.variants-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap; /* Позволяем элементам переноситься на новую строку */
    justify-content: flex-start; /* Выравнивание по левому краю */
    box-sizing: border-box; /* Включаем padding в ширину */
}

/* Варианты товаров */
.variant-item {
    height: 70px;
    width: 70px; 
    text-align: center;
    background-color: #f9f9f9;
    cursor: pointer;
    flex: 1; /* Варианты растягиваются на всю доступную ширину */
    box-sizing: border-box; /* Включаем padding в ширину */
    
}

.variant-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    background: linear-gradient(45deg, #e7e7e7, #f8f6f6); /* Мягкие градиентные цвета */
    padding: 4px; /* Пространство для видимости градиента */
}



/* Красивое оформление при выделении */
.variant-item.selected img {
    border: 2px solid #6a5acd; /* Нежный фиолетовый оттенок */
    border-radius: 12px; /* Немного большее скругление углов */
    box-shadow: 0 4px 15px rgba(106, 90, 205, 0.3), 0 0 20px rgba(0, 0, 0, 0.1); /* Мягкая тень */
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Плавный переход эффектов */
}

/* Стиль для иконки при наведении */
.variant-item img:hover {
    padding: 2px; /* Пространство для видимости градиента */
    border: 2px solid #ffd700; /* Золотистый цвет рамки при наведении */
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.1); /* Яркая мягкая тень */
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Плавная анимация */
}

/* Градиентная рамка для выбранного элемента */
.variant-item.selected img {
    border-radius: 15px; /* Более скругленные углы */
    border: 3px solid transparent; /* Прозрачная основа для градиента */
    background: linear-gradient(45deg, #ffeb3b, #64b5f6); /* Мягкие градиентные цвета */
    padding: 4px; /* Пространство для видимости градиента */
    background-clip: padding-box; /* Градиент внутри границ */
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); /* Мягкая тень для сглаживания */
    transition: 0.2s ease; /* Плавный переход для всех изменений */
}

/* Эффекты для иконки */
.variant-item img {
    transition: border 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы для всех изменений */
    cursor: pointer; /* Курсор в виде указателя */
}

/* Можно установить фиксированную высоту для контейнера, чтобы избежать смещения */
.variants-container {
    max-height: 300px; /* Пример высоты, установите под свои нужды */
    overflow: hidden; /* Скрыть переполнение */
}
.variant-item.selected {
    transform: translateX(-2px); /* Сдвигаем элемент немного влево */
}






/* Контейнер для заголовка и иконки!!!! */
.title-container {
    display: flex; /* Используем Flexbox */
    align-items: center; /* Вертикальное выравнивание по центру */
    justify-content: space-between;
}

/* Стили для заголовка */
.title-container h2 {
    margin: 0;
    font-size: 25px;
}

/* Стили кнопки info!!!!!!!!! */
.info-icon {
    max-width: 35px; /* Ширина иконки */
    max-height: 35px; /* Высота иконки */
    cursor: pointer; /* Изменяет курсор при наведении */
    margin-left: 10px; /* Отступ слева, чтобы отделить от текста */
    vertical-align: middle; /* Выравнивание по вертикали с текстом */
}

/* Стили для состояния при наведении */
.info-icon:hover {
    filter: brightness(1.7); /* Осветление иконки при наведении */
}



/* Анимация перелистывания при нажатии на выбор категории*/
#product-container {
    opacity: 1;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#product-container.fade-out {
    opacity: 0;
    transform: translateX(-5px); /* Сдвиг контейнера влево для эффекта */
}

#product-container.fade-in {
    opacity: 1;
    transform: translateX(0); /* Возвращаем контейнер на место */
}







@media (max-width: 768px) {
    .market_content {
        padding-top: 10px;
    }
}
@media (max-width: 425px) {
    .market_content {
        padding-top: 0px;
    }
    
    /* Уменьшим главное изображение, чтобы освободить место*/
    .product_item {
        padding-top: 10px;
    }

    .product_item p {
        padding: 0;
        margin: 0 auto;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    /* Стили заголовка и текста описания */

    .product_item h2 {
        font-size: 1.2em;
        margin: 4px 0;
        color: #333;
    }

    .product_item p {
        font-size: 0.9em;
        color: #666;
    }

}