/* ============================================================================
 * /local/assets/hit_of_day.css - виджет «Хит дня» справа от главного баннера.
 *
 * Подключается из init.php только на главной (REQUEST_URI === '/').
 * Разметку рендерит local/include/main_hit_of_day.php и впрыскивает
 * OnEndBufferContent-хук как сиблинг .banners-big__wrapper внутри
 * .maxwidth-banner.maxwidth-theme (которая у Aspro display:flex).
 *
 * Десктоп >=992px: виджет 320px справа, баннер flex:1 слева.
 * Мобила <992px: виджет display:none, баннер на всю ширину как сейчас.
 * ============================================================================ */

/* ---- layout: десктоп - виджет рядом с баннером (внутри .maxwidth-banner) ---- */
@media (min-width: 992px) {
    .banners-big .maxwidth-banner.maxwidth-theme {
        gap: 16px;
        align-items: stretch;
    }
    .banners-big .banners-big__wrapper {
        order: 1;
        flex: 1 1 auto;
        min-width: 0; /* без этого flex-child не сжимается */
    }
    .hit-of-day-widget--desktop {
        order: 2;
        flex: 0 0 320px;
        align-self: stretch;
    }
}

/* ---- виджет: общие правила (фон, шрифт, отступы) ---- */
.hit-of-day-widget {
    display: none; /* по умолчанию скрыт - показ через .--desktop / .--mobile ниже */
    background: #f9e8f6; /* светло-розовая заливка (был насыщенный #e8a2e1), без контура */
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    color: #1d1d1d;
    font-family: "Inter", "Chiron GoRound TC", Arial, sans-serif;
    flex-direction: column;
}

/* Десктопный виджет (внутри .maxwidth-banner) - показывается только >=992px,
   высота строго равна высоте баннера, фото растягивается на оставшееся. */
.hit-of-day-widget--desktop {
    height: 100%;
    max-height: var(--big-banner-height, 460px);
}
@media (min-width: 992px) {
    .hit-of-day-widget--desktop { display: flex; }
}

/* Мобильный виджет (после полосы фильтров по цене) - показывается только <992px,
   ширина 100% контейнера, высота естественная (по содержимому). */
.hit-of-day-widget--mobile {
    margin: 16px 0;
}
@media (max-width: 991px) {
    /* на мобиле виджет горизонтальный: заголовок сверху во всю ширину,
       ниже - фото слева + инфо-колонка справа (на ПК остаётся вертикальным) */
    .hit-of-day-widget--mobile {
        display: flex;
        flex-flow: row wrap; /* перебивает flex-direction:column из общего правила */
        align-items: stretch;
    }
    /* заголовок «Хит дня» - на всю ширину, верхняя строка */
    .hit-of-day-widget--mobile .hit-of-day-widget__header {
        flex: 0 0 100%;
        margin-bottom: 10px;
    }
    /* фото - слева, крупное (~50% ширины). БЕЗ фикс. аспекта: тянется на всю высоту
       инфо-колонки (align-items:stretch у виджета), поэтому фото высокое и заметное —
       товар покупают по фото. img внутри object-fit:cover заполняет бокс. */
    .hit-of-day-widget--mobile .hit-of-day-widget__photo-wrap {
        flex: 0 0 50%;
        max-width: 50%;
        min-height: 0;
        margin-bottom: 0;
        margin-right: 14px;
    }
    /* инфо-колонка - справа от фото; контент по центру по вертикали,
       кнопка сразу под ценой (НЕ растягиваем на всю высоту фото - иначе зазор) */
    .hit-of-day-widget--mobile .hit-of-day-widget__body {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    .hit-of-day-widget--mobile .hit-of-day-widget__btn {
        margin-top: 4px; /* перебивает margin-top:auto, чтобы кнопка не падала вниз */
    }
    /* промо-строка (бейдж скидки + таймер) над названием — только на мобиле.
       PHP рендерит её в инфо-колонку (на ПК бейдж/таймер по-прежнему оверлеем на фото). */
    .hit-of-day-widget--mobile .hit-of-day-widget__promo-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 2px;
        flex-wrap: wrap;
    }
    /* бейдж скидки — в потоке инфо-колонки, над названием */
    .hit-of-day-widget--mobile .hit-of-day-widget__discount-badge {
        position: static;
        background: #1d1d1d; /* розовый на розовом сливается — делаем тёмным */
    }
    /* таймер — в ВЕРХНЕМ ПРАВОМ углу виджета, на уровне заголовка «Хит дня».
       position:absolute наследуется из базового правила; ближайший позиционированный
       предок здесь — сам виджет (.hit-of-day-widget{position:relative}), т.к. таймер
       вынесен из фото в инфо-колонку. На ПК он по-прежнему внутри .photo-wrap → на фото. */
    .hit-of-day-widget--mobile .hit-of-day-widget__timer {
        top: 18px;
        right: 18px;
    }
}

.hit-of-day-widget__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.hit-of-day-widget__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #1d1d1d;
}

.hit-of-day-widget__photo-wrap {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 12px;
    flex: 1 1 auto;
    min-height: 0; /* без этого flex-child не сжимается в overflow-контейнере */
}
.hit-of-day-widget__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* бейдж скидки - розовая «таблетка» с белым шрифтом (как стикеры на товарах) */
.hit-of-day-widget__discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--theme-base-color, #e8a2e1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

/* таймер - правый верх, моноширинный, чёрные «таблетки» */
.hit-of-day-widget__timer {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hit-of-day-widget__timer-part {
    background: #1d1d1d;
    padding: 4px 5px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
    line-height: 1;
}
.hit-of-day-widget__timer-sep {
    color: #1d1d1d;
    font-weight: 700;
}

.hit-of-day-widget__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.hit-of-day-widget__name {
    color: #1d1d1d;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    margin: 0;
}
.hit-of-day-widget__name:hover {
    text-decoration: underline;
}

.hit-of-day-widget__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.hit-of-day-widget__price {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1d;
    line-height: 1;
}
.hit-of-day-widget__price-old {
    font-size: 14px;
    color: #888;
    text-decoration: line-through;
    line-height: 1;
}

/* Кнопка «В корзину» - <button>, обработчик в hit_of_day.js (fetch на
 * Bitrix ?action=ADD2BASKET + открытие чекаут-модалки). */
.hit-of-day-widget .hit-of-day-widget__btn {
    margin-top: auto;
    align-self: stretch;
    background: #1d1d1d; /* чёрная, как тёмные товарные кнопки сайта (было розовой) */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    padding: 13px 16px;
    border: none;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    transition: filter .15s ease, opacity .15s ease;
    box-sizing: border-box;
    display: block;
    width: 100%;
    cursor: pointer;
    user-select: none;
}
.hit-of-day-widget__btn:hover {
    filter: brightness(0.95);
}
.hit-of-day-widget__btn:disabled,
.hit-of-day-widget__btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}