/* Горизонтальное отображение изображений атрибутов */

/* Основные стили для всех контейнеров с атрибутами */
.product-data {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Прямое селекторование всех элементов с изображениями */
.product-data__item:has(img),
.product-data__item.has-image {
    float: left !important;
    margin: 0 10px 10px 0 !important;
    width: auto !important;
    border: none !important;
}

/* Прямое воздействие на структуру в вашем HTML */
.product-data__item-div {
    text-align: left !important;
}

.product-data__item-div:has(img) {
    border: none !important;
    background: none !important;
}

/* Скрываем текстовую часть в блоках с изображениями */
.product-data__item:has(img) .product-data__item-div:empty,
.product-data__item:has(img) .product-data__item-div:not(:has(img)) {
    display: none !important;
}

/* Прямые стили для самих изображений */
.product-data__item-div img {
    max-width: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    transition: transform 0.2s !important;
}

/* Эффект при наведении */
.product-data__item-div img:hover {
    transform: scale(1.1) !important;
    cursor: help;
}

/* Чтобы изображения не были разделены текстом */
.product-data h4 {
    width: 100% !important;
    clear: both !important;
}

/* Прямая настройка расположения внутренних дивов */
.product-data__item {
    text-align: left !important;
}

/* Устранение центрирования и вертикального отображения */
#tab-specification .product-data {
    flex-direction: row !important;
    align-items: flex-start !important;
}

#tab-specification .product-data > div {
    display: inline-block !important;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 767px) {
    .product-data__item:has(img) {
        margin: 0 5px 5px 0 !important;
    }
    
    .product-data__item-div img {
        max-width: 40px !important;
        max-height: 40px !important;
    }
}
