/* Caramel by Impasta - собственные стили поверх вёрстки Битрикса.
 *
 * Перенесено из самописных HTML-блоков, которые лежали внутри страницы
 * в конструкторе. Смысл сохранён дословно, вычищено лишнее:
 *   - селекторы по сгенерированным номерам (.landing-block-node-button-6328
 *     и десяток таких же) заменены одним селектором по префиксу класса;
 *   - «нет в наличии» больше не вычисляется из текста кнопки, а приходит
 *     атрибутом data-out-of-stock прямо из базы.
 */

:root {
    --brand: #7e1329;
    --brand-glow: rgba(126, 19, 41, 0.18);
    --accent: #c0dd92;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------ кнопка «Добавить» */
.landing-block-card a[class*="landing-block-node-button"] {
    font-family: "Nunito", sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: var(--brand) !important;
    background: rgba(126, 19, 41, 0.05) !important;
    border: 1.5px solid rgba(126, 19, 41, 0.15) !important;
    border-radius: 16px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

.landing-block-card a[class*="landing-block-node-button"]:hover {
    background: rgba(126, 19, 41, 0.09) !important;
    border-color: rgba(126, 19, 41, 0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(126, 19, 41, 0.06) !important;
    color: var(--brand) !important;
}

.landing-block-card a[class*="landing-block-node-button"]:active {
    transform: scale(0.97) !important;
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(126, 19, 41, 0.1);
    transform: scale(0);
    animation: rippleOut 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleOut {
    to { transform: scale(3.5); opacity: 0; }
}

/* --------------------------------------------------- нет в наличии */
.landing-block-card a[class*="landing-block-node-button"].oos-btn {
    color: #999 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1.5px dashed rgba(0, 0, 0, 0.15) !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
}

.landing-block-card[data-out-of-stock="1"] {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.landing-block-card[data-out-of-stock="1"]:hover { opacity: 0.7; }

.landing-block-card[data-out-of-stock="1"] .landing-block-node-img {
    filter: grayscale(60%) brightness(0.9);
    transition: filter 0.3s ease;
}

/* Диагональная лента поверх фото. Раньше её вставлял скрипт после
   загрузки страницы, из-за чего она заметно «доезжала». Теперь блок
   рисуется сразу, потому что наличие известно на сервере. */
.landing-block-card[data-out-of-stock="1"] .landing-block-node-img-container {
    position: relative;
    overflow: hidden;
}

.landing-block-card[data-out-of-stock="1"] .landing-block-node-img-container::before {
    content: attr(data-sold-out);
    position: absolute;
    top: 18px;
    left: -32px;
    width: 130px;
    text-align: center;
    padding: 5px 0;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.6px;
    color: #fff;
    background: rgba(126, 19, 41, 0.78);
    transform: rotate(-35deg);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(126, 19, 41, 0.3);
}

/* --------------------------------- цена и кнопка по одной линии в ряду
 *
 * В исходной вёрстке цена и кнопка шли сразу за описанием, поэтому в одном
 * ряду они оказывались на разной высоте: у одного блюда описание в строку,
 * у другого в четыре. Bootstrap уже растягивает колонки ряда до общей
 * высоты, оставалось прижать низ карточки.
 *
 * Карточка становится вертикальным флексом, а пустая распорка, которая
 * и так была в разметке между описанием и ценой, забирает весь свободный
 * остаток. Цена и кнопка уезжают вниз и выстраиваются по одной линии.
 */
.landing-block-card {
    display: flex;
    flex-direction: column;
}

.landing-block-card > .c-card__push {
    margin-top: auto;
}

/* Картинка не должна растягиваться по высоте вслед за флексом. */
.landing-block-card > .landing-block-node-img-container {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ прочее */
.cat-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 70px;
}