/**
 * Frontend CSS for iHerb Week Block shortcode
 */
.ihb {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    margin: 40px 0;
}

/* ИСПРАВЛЕНО: Убрано дублирование, заменен display: table на block */
.ihb_item {
    width: 100%;
    height: auto;
    display: block;
    /* Убрано избыточное использование композитных слоев для статичных элементов */
}

.ihb_image {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    display: block;
    height: 180px; /* фиксированная высота карточки */
    overflow: hidden; /* обрезаем излишки, чтобы все были одной высоты */
    /* ИСПРАВЛЕНО: will-change только при hover, не постоянно */
}

.ihb_image:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: #0aa88c;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.2s ease;
    /* ДОБАВЛЕНО: pointer-events: none чтобы не блокировать клики */
    pointer-events: none;
    /* УБРАНО: избыточные display, width, height, transform, will-change */
}

.ihb_image:hover:after {
    opacity: 0.4;
}

/* ИСПРАВЛЕНО: добавляем will-change только при hover */
.ihb_image:hover {
    will-change: transform;
}

/* ДОБАВЛЕНО: убираем will-change после анимации */
.ihb_image:not(:hover) {
    will-change: auto;
}

.ihb_image img {
    width: 100%;
    height: 100%; /* заполняем контейнер по высоте */
    object-fit: cover; /* одинаковая высота без «обрубышей» */
    object-position: 50% 50%;
    display: block;
    /* УБРАНО: избыточный transform для статичного элемента */
}

.ihb_image > .ihb-label {
    position: absolute;
    right: 0;
    top: 5px;
    background: #28a745;
    font-size: 14px;
    line-height: 20px;
    padding: 0 10px;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    border-radius: 3px;
    /* УБРАНО: избыточный transform для статичного элемента */
}

.ihb_image > .ihb-label:nth-child(3) {
    top: 30px;
}

.ihb_text1 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 22px;
}

.ihb_text1 a {
    color: #0aa88c;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ihb_text1 a:hover {
    text-decoration: underline;
}

/* Stable width for animated numbers */
.ihb-discount {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

.ihb_text2 {
    width: 100%;
    height: auto;
    display: block;
    color: #6d6d6e;
    font-size: 16px;
    margin: 0 0 15px;
}

.ihb_text3 {
    display: inline-block;
    padding: 10px;
    color: rgb(51, 51, 51);
    background-color: #f7f7f7;
    border-radius: 5px;
    font-size: 12px;
    width: auto;
    max-width: 100%;
}

.ihb_text4 a {
    color: #0aa88c;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ihb_text4 a:hover {
    text-decoration: underline;
}

/* Responsive styles for mobile devices */
@media screen and (max-width: 767px) {
    .ihb {
        grid-template-columns: 1fr;
    }
    /* на мобиле также оставляем фиксированную высоту 180px */
}

/* Specific styles for small mobile devices */
@media screen and (max-width: 479px) {
    .ihb_text1 {
        font-size: 18px;
    }
    
    .ihb_text2 {
        font-size: 14px;
    }
}

/* Дополнительные стили для совместимости семантической разметки */
figure.ihb_item {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}

figure.ihb_item figcaption {
    display: block;
    margin: 0;
    padding: 0;
}

figure.ihb_item .ihb_text1,
figure.ihb_item .ihb_text2,
figure.ihb_item .ihb_text4 {
    display: block;
}

figure.ihb_item .ihb_text3 {
    display: inline-block;
}

figure.ihb_item time {
    font-style: normal;
    font-weight: normal;
}

figure.ihb_item strong {
    font-weight: 600;
}

/* ИСПРАВЛЕНО: Оптимизированные анимации только там где нужно */
@media (prefers-reduced-motion: no-preference) {
    .ihb_image {
        transition: transform 0.2s ease;
    }
    
    /* ИСПРАВЛЕНО: Композитный слой создается только при hover */
    .ihb_image:hover {
        transform: translateZ(0) scale(1.02);
        will-change: transform;
    }
    
    /* Автоматически убираем will-change после hover */
    .ihb_image:not(:hover) {
        will-change: auto;
    }
}

/* Отключаем анимации для пользователей с ограничениями */
@media (prefers-reduced-motion: reduce) {
    .ihb_image,
    .ihb_image:after,
    .ihb_text1 a,
    .ihb_text4 a {
        transition: none;
    }
    
    .ihb_image:hover {
        transform: none;
        will-change: auto;
    }
}

/* Мобильная версия */
@media (max-width: 767px) {
    .ihb_image > .ihb-label {
        top: 3px;
        font-size: 12px;
        line-height: 18px;
        padding: 0 8px;
    }
    
    .ihb_image > .ihb-label:nth-child(3) {
        top: 25px;
    }
}