/* ==========================================================================
   ОКРУГЛЕНИЕ КАРТОЧЕК ТОВАРА (референс FlowWow) — v3
   Полностью заменяет предыдущий файл.
   ========================================================================== */

/* --- Сама карточка товара (каталог + карусель) --- */
.catalog .element{
    border-radius: 18px !important;
}

/* --- Картинка товара: скругляем только верхние углы --- */
.catalog .element .img-wrapper{
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
}
.catalog .element .img-wrapper img{
    border-radius: 18px 18px 0 0 !important;
}

/* --- Нижний контентный блок (название/цена) --- */
.catalog .element .element-content{
    border-radius: 0 0 18px 18px !important;
}
.catalog .element .hidden-block{
    border-radius: 0 0 18px 18px !important;
}

/* --- Кнопка "избранное" (сердечко) — круглая, иконка строго по центру
   через absolute+transform — не зависит от формы/размера самого SVG --- */
.catalog .element .msfavorites{
    border-radius: 50% !important;
    padding: 0 !important;
}
.catalog .element .msfavorites svg{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* --- Бейдж с размерами (Ш/В) на фото --- */
.size-box{
    border-radius: 10px !important;
}

/* ==========================================================================
   ФЛАЖОК "ХИТ" / СКИДКА — превращаем в пилюлю без хвостов,
   ВАЖНО: текст (span) НЕ трогаем, скрываем только псевдо-элементы-хвосты
   ========================================================================== */

/* Позиция на ПК — внизу карточки (как в оригинале) */
.catalog .element .label-block{
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
}

.label-block > div{
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
}

/* Убираем только хвосты-треугольники, текст внутри span остаётся видимым */
.label-block > div:before,
.label-block > div:after,
.label-block span:before,
.label-block span:after{
    display: none !important;
    content: none !important;
    border: none !important;
}
.label-block > div,
.label-block span{
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* --- Кнопки внутри карточки (Купить / Заказать / В корзине) --- */
.catalog .btn,
.btn-cart,
.btn.btn-checkout{
    border-radius: 24px !important;
}

/* Блок с кнопкой "Купить/В корзине" (.hidden-block) в оригинальной теме
   сделан как всплывающий элемент, который на ПК при наведении вылетает
   ЗА карточку (position:absolute; bottom:-64px) — это было задумано как
   hover-эффект. Возвращаем его в обычный поток внутри карточки —
   работает одинаково и на ПК, и на мобильной версии */
.catalog .element .hidden-block{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    display: block !important;
    padding: 0 20px 20px !important;
    box-shadow: none !important;
    background: #fff !important;
    margin-top: auto !important;
}
.catalog .element .hidden-block:before{
    display: none !important;
}
.catalog .element .hidden-block .btn,
.catalog .element .hidden-block .btn-cart{
    margin-top: 0 !important;
}

/* ==========================================================================
   ВЫРАВНИВАНИЕ КАРТОЧКИ: кнопка всегда прижата к низу,
   независимо от длины названия товара — карточки в ряду не "гуляют"
   ========================================================================== */
.catalog .element{
    display: flex !important;
    flex-direction: column !important;
}
.catalog .element .img-wrapper{
    flex-shrink: 0 !important;
}
.catalog .element .element-content{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
/* Кнопка (Заказать / В корзине / Купить) — прижимаем к низу content-блока
   и делаем ОДИНАКОВОЙ высоты независимо от наличия иконки внутри */
.catalog .element .element-content .btn,
.catalog .element .element-content .btn-cart{
    margin-top: auto !important;
    height: 46px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Приводим кнопку "В КОРЗИНЕ" (зелёная, .btn-checkout) к тому же виду,
   что и "ЗАКАЗАТЬ": текст в одну строку, иконка рядом с текстом */
.catalog .element .btn.btn-checkout{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}
.catalog .element .btn.btn-checkout svg{
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Жёстко фиксируем ОДИНАКОВУЮ высоту у ВСЕХ кнопок карточки —
   "Заказать" и "В корзине" (с иконкой) теперь одной высоты */
.catalog .element .btn,
.catalog .element .btn-cart{
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- Карусель товаров: стрелки листания --- */
.catalog-carousel .slick-next,
.catalog-carousel .slick-prev{
    border-radius: 50% !important;
}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================================== */
@media (max-width: 767px){
    .catalog .element{
        border-radius: 14px !important;
    }
    .catalog .element .img-wrapper,
    .catalog .element .img-wrapper img{
        border-radius: 14px 14px 0 0 !important;
    }
    .catalog .element .element-content,
    .catalog .element .hidden-block{
        border-radius: 0 0 14px 14px !important;
    }

    /* Флажок переносим наверх карточки */
    .catalog .element .label-block{
        top: 10px !important;
        bottom: auto !important;
        left: 10px !important;
        z-index: 25 !important;
    }
    /* ГЛАВНЫЙ ФИКС: контейнер флажков растягивал все флажки по ширине
       самого широкого (например, "НОВИНКА" длиннее "ХИТ") — из-за
       этого одиночный "ХИТ" был узким, а рядом с "НОВИНКА" вдруг
       становился такой же широкий. align-items:flex-start заставляет
       каждый флажок занимать только свою собственную ширину.
       БЕЗ привязки к .catalog — на страницах "Похожие"/"Избранное"
       карточка не обёрнута в класс .catalog, поэтому правило должно
       работать универсально, на любой странице. */
    .label-block{
        align-items: flex-start !important;
    }
    .label-block.label-block.label-block > div{
        padding: 4px 10px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    .label-block.label-block.label-block > div span{
        font-size: 11px !important;
        padding: 0 !important;
    }
    /* Реальные классы плашек-фонов (найдены через инспектор):
       .label-block-hit, .label-block-new, .label-block-sale.
       ВАЖНО: display НЕ трогаем — флажки должны оставаться друг под
       другом (block), а не вставать в один ряд (inline-block ломает это).
       Специфичность усилена (класс .label-block повторён 3 раза), чтобы
       гарантированно перебить более специфичные правила темы сайта. */
    .label-block.label-block.label-block .label-block-hit,
    .label-block.label-block.label-block .label-block-new,
    .label-block.label-block.label-block .label-block-sale{
        width: auto !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    /* Убираем блок "ширина/высота" — только в КАРТОЧКАХ КАТАЛОГА
       (на месте флажка). На странице отдельного товара (.product-gallery)
       этот бейдж должен остаться на месте, в правом верхнем углу фото */
    .catalog .element .size-box{
        display: none !important;
    }

    /* Единая высота фото у всех карточек — чтобы карточки в ряду
       были одной высоты и кнопка не "гуляла" по вертикали.
       (было 200px изначально, затем ужато до 130px — это оказалось
       слишком мало, букет обрезался; 165px — компромисс) */
    .catalog .element .img-wrapper{
        height: 165px !important;
        overflow: hidden !important;
    }
    .catalog .element .img-wrapper img{
        height: 165px !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Уменьшаем отступ между карточками по вертикали (между рядами) */
    .catalog .element{
        margin-bottom: 12px !important;
    }

    /* Блок с кнопкой "Купить/В корзине" (.hidden-block) на десктопе
       вылетает ЗА карточку при наведении (position:absolute; bottom:-64px).
       На мобильной версии наведения нет — принудительно возвращаем его
       внутрь карточки в обычный поток, иначе кнопка "висит" под карточкой */
    .catalog .element .hidden-block{
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        display: block !important;
        padding: 0 10px 10px !important;
        box-shadow: none !important;
        background: #fff !important;
        margin-top: auto !important;
    }
    .catalog .element .hidden-block:before{
        display: none !important;
    }
    .catalog .element .hidden-block .btn,
    .catalog .element .hidden-block .btn-cart{
        margin-top: 0 !important;
    }

    /* Сердечко/избранное — уменьшаем до аккуратного размера */
    .catalog .element .msfavorites{
        width: 32px !important;
        height: 32px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .catalog .element .msfavorites svg{
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- ВОЗВРАТ 2 КОЛОНОК НА МОБИЛЬНОЙ ВЕРСИИ ---
   ВАЖНО: исключаем инициализированные Slick-карусели (.slick-initialized) —
   у них ширина слайдов уже точно посчитана и проставлена самим JS,
   наше правило только мешало и ломало позиционирование карусели */
@media (max-width: 767px){
    .catalog > .row:not(.slick-initialized){
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .catalog > .row:not(.slick-initialized) > div{
        width: 50% !important;
        float: none !important;
    }
}
@media (max-width: 499px){
    .catalog > .row:not(.slick-initialized) > .col-xs-6{
        width: 50% !important;
    }
}

/* ==========================================================================
   СЕТКА ТЕКСТА И КНОПКИ "ЗАКАЗАТЬ" НА МОБИЛЬНОЙ ВЕРСИИ
   ========================================================================== */
@media (max-width: 499px){
    /* Компактный контентный блок — уменьшены паддинги, чтобы карточка
       была короче и на экране помещалось больше карточек за раз */
    .catalog .element .element-content{
        padding: 10px 10px 12px !important;
        text-align: center !important;
    }

    /* Название товара — СТРОГО фиксированная высота (не min, а именно
       height), чтобы 1-строчные, 2-строчные и длинные названия
       занимали ОДИНАКОВОЕ место и не сдвигали цену/кнопку вниз.
       overflow:hidden обязателен — без него line-clamp не обрезает текст. */
    .catalog .element .element-title{
        font-size: 13px !important;
        line-height: 1.3 !important;
        height: 34px !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
    }

    .catalog .element .price{
        font-size: 18px !important;
        line-height: 22px !important;
        display: block !important;
        margin-bottom: 3px !important;
    }
    .catalog .element .old-price{
        display: block !important;
        font-size: 13px !important;
        line-height: 17px !important;
        margin: 0 0 6px !important;
    }
    /* Если скидки нет (старой цены сразу после текущей нет) —
       резервируем ТО ЖЕ САМОЕ место (17px строка + 6px отступ = 23px,
       плюс обычный отступ цены 3px = 26px), чтобы карточки не "прыгали" */
    .catalog .element .price:not(:has(+ .old-price)){
        margin-bottom: 26px !important;
    }

    /* Кнопка "Заказать" / "В корзине" — компактнее исходной (была 42px) */
    .catalog .element .btn,
    .catalog .element .btn-cart{
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        font-size: 12px !important;
        padding: 0 6px !important;
        margin-bottom: 0 !important;
        letter-spacing: 0.2px !important;
    }
}

/* ==========================================================================
   ФИКС: класс .hidden (служебный, из Bootstrap) должен полностью скрывать
   неактивную кнопку (Заказать / В корзине). Наши же правила стилизации
   кнопок оказались более специфичными и случайно "включали" обратно
   скрытую кнопку — из-за этого под видимой кнопкой оставалась пустота
   ровно на высоту второй, невидимой кнопки.
   ========================================================================== */
.catalog .element .btn.hidden,
.catalog .element .hidden-block .hidden{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}



/* ==========================================================================
   ФИКС: клик по кнопке "Заказать"/"В корзине" открывал страницу товара
   вместо добавления в корзину. Причина — невидимая ссылка на всю карточку
   (a.absolute, лежит ВНУТРИ <form class="ms2_form">, не прямым потомком
   .element) перехватывала клик. НЕ отключаем её полностью (иначе ломается
   клик по фото/названию) — приподнимаем по z-index только сам блок
   с кнопкой, чтобы именно в этой области клик попадал по кнопке,
   а остальная карточка по-прежнему вела на страницу товара.
   ========================================================================== */
.catalog .element{
    position: relative !important;
}
.catalog .element a.absolute{
    z-index: 1 !important;
}
.catalog .element .hidden-block{
    position: relative !important;
    z-index: 10 !important;
}
.catalog .element .hidden-block .btn,
.catalog .element .hidden-block a{
    position: relative !important;
    z-index: 11 !important;
}

/* ==========================================================================
   ЕДИНЫЙ СТИЛЬ КНОПОК И СЕРДЕЧКА НА СТРАНИЦЕ ТОВАРА
   (application-buttons-block: "Заказать" / "Купить в 1 клик" / избранное)
   ========================================================================== */
.application-buttons-block a,
.application-buttons-block button{
    border-radius: 24px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.application-buttons-block .msfavorites{
    border-radius: 50% !important;
    padding: 0 !important;
}
.application-buttons-block .msfavorites svg{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* ==========================================================================
   ТЕКСТ КНОПКИ В КАРТОЧКАХ (.catalog .element) — ВЕЗДЕ "Купить":
   главная, категории, "Похожие", избранное. Плюс убираем КАПС.
   ========================================================================== */
.catalog .element .btn,
.catalog .element .btn-cart,
.catalog .element .btn.btn-checkout{
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Прячем оригинальный текст "Заказать" и подставляем "Купить" через ::after */
.catalog .element .btn-cart{
    font-size: 0 !important;
}
.catalog .element .btn-cart::after{
    content: "Купить";
    font-size: 14px;
    text-transform: none;
}

@media (max-width: 499px){
    .catalog .element .btn-cart::after{
        font-size: 14px;
    }
}

/* ==========================================================================
   СТРАНИЦА ТОВАРА (.application-buttons-block, кнопка .btn_to_cart) —
   единственное место с текстом "Добавить в корзину". Плюс убираем КАПС.
   ========================================================================== */
.application-buttons-block .btn,
.application-buttons-block a,
.application-buttons-block button{
    text-transform: none !important;
    letter-spacing: normal !important;
}

.application-buttons-block .btn_to_cart{
    font-size: 0 !important;
}
.application-buttons-block .btn_to_cart::after{
    content: "Добавить в корзину";
    font-size: 16px;
    text-transform: none;
    margin-left: 6px;
}

/* ==========================================================================
   ТЕКСТ "Вы сохраните X ₽ (Y%)" — только на странице товара, там где
   есть скидка. Сам расчёт делает JS (см. отдельный код ниже в чате),
   здесь только визуальное оформление вставленного текста.
   ========================================================================== */
.product-info .save-amount{
    font-size: 14px;
    color: #76A900;
    margin-top: 6px;
}

/* ==========================================================================
   Цвет текста "Вы сохраните" — меняем с зелёного (сливался с "Артикул")
   на акцентный красный/розовый, как у зачёркнутой старой цены
   ========================================================================== */
.product-info .save-amount{
    color: #E57171;
}

/* ==========================================================================
   ФЛАЖКИ ("ХИТ", "-7%") НА СТРАНИЦЕ ТОВАРА — уменьшаем ещё раз
   ========================================================================== */
.product-gallery .label-block > div{
    font-size: 14px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}
.product-gallery .size-box{
    font-size: 16px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
}

@media (max-width: 767px){
    .product-gallery .label-block > div{
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    /* Блок "ширина/высота" на мобилке — уменьшаем ВЕСЬ блок целиком
       (вместе с иконками) через scale, а не только шрифт внутри —
       у внутренних элементов фиксированный размер 40×40px в теме,
       menяя только шрифт/паддинг саму "коробку" было не уменьшить */
    .product-gallery .size-box{
        transform: scale(0.6) !important;
        transform-origin: top right !important;
    }
}

/* ==========================================================================
   КНОПКА "Поделиться ссылкой на товар"
   ========================================================================== */

.application-buttons-block .share-page-link {
    position: absolute !important;
    top: 90px !important;
    right: 0 !important;
    z-index: 30 !important;
    width: 55px !important;
    height: 55px !important;
}

/* Мобильная версия — кнопки на мобильных выше десктопных
   (перенос текста/паддинги), нужен отдельный сдвиг вниз.
   Значение примерное — уточним по скриншоту после проверки. */
@media (max-width: 767px){
    .application-buttons-block .share-page-link {
        top: 70px !important;
    }
}

.share-page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #e57171 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(229, 113, 113, 0.15) !important;
}

.share-page-link:hover {
    background: #fff0f3 !important;
    border-color: #e34d6a !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(229, 113, 113, 0.25) !important;
}

.share-page-link svg {
    width: 24px !important;     /* чуть больше, но всё равно аккуратно */
    height: 24px !important;
    fill: none !important;
    stroke: #e57171 !important;
    stroke-width: 2.1 !important;
    transition: all 0.25s ease !important;
}

.share-page-link:hover svg {
    stroke: #e34d6a !important;
    transform: rotate(15deg) !important;   /* лёгкая анимация */
}

/* Тултип */
.share-page-link .share-page-link__tooltip {
    position: absolute !important;
    top: 50% !important;
    right: 120% !important;
    transform: translateY(-50%) !important;
    background: #2c2c2c !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
}

.share-page-link:hover .share-page-link__tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    right: 130% !important;
}

.share-page-link.copied {
    background: #e8f5e9 !important;
    border-color: #4caf50 !important;
}

.share-page-link.copied svg {
    stroke: #4caf50 !important;
}

/* ==========================================================================
   МОБИЛЬНАЯ ШАПКА — делаем компактнее (референс UFLOR), НО ТОЛЬКО НЕ
   на главной странице (там оставляем шапку как было, полностью).
   .index-template — класс на <body>, который стоит только на главной.
   Десктоп НЕ трогаем вообще, только @media max-width:767px.
   ========================================================================== */
@media (max-width: 767px){
    body:not(.index-template) .header-bottom{
        min-height: auto !important;
    }
    body:not(.index-template) .logo{
        padding: 10px 0 !important;
    }
    body:not(.index-template) .logo img{
        max-height: 32px !important;
        width: auto !important;
    }

    /* Крупный номер телефона под лого — дублирует иконку звонка вверху */
    body:not(.index-template) .header-phones{
        display: none !important;
    }

    /* Кружки WhatsApp/Telegram под лого — дублируют функциональность,
       доступную через иконку звонка / карточку товара */
    body:not(.index-template) .messagers-btns{
        display: none !important;
    }
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА В КОРЗИНЕ — редизайн под референс FlowWow:
   скруглённое фото, аккуратные кнопки количества, мягкая карточка
   ========================================================================== */
.cart-body .element{
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.cart-body .element .element-img{
    border-radius: 12px !important;
    overflow: hidden !important;
    width: 90px !important;
    height: 90px !important;
}

.cart-body .subelement2{
    padding-left: 108px !important;
    min-height: 90px !important;
}

/* Кнопки количества (+/-) — круглые, в акцентном цвете сайта */
.cart-body .element-counter button{
    border-radius: 50% !important;
    border: 1px solid #E9E9E9 !important;
    background: #F8F8F8 !important;
    width: 30px !important;
    height: 30px !important;
}
.cart-body .element-counter button:hover{
    background: #E57171 !important;
    border-color: #E57171 !important;
}
.cart-body .element-counter .form-control{
    font-weight: 700 !important;
}

/* Кнопка удаления товара — аккуратный круглый значок */
.cart-body .element-delete{
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #FFF3F3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cart-body .element-delete svg{
    width: 16px !important;
    height: 16px !important;
}

/* Название товара — акцентным цветом, как ссылка */
.cart-body .element a{
    font-weight: 600 !important;
}

@media (max-width: 767px){
    /* --------------------------------------------------------------------
       МОБИЛЬНАЯ КАРТОЧКА ТОВАРА В КОРЗИНЕ (референс FlowWow):
         Ряд 1: [фото] [название — может занимать 2 строки]
         Ряд 2: [цена]                              [счётчик: - 1 +]

       Раскладка обеспечивается скриптом cart-item-mobile-layout.js — он
       физически создаёт .mcart-row-1 (фото+название) и .mcart-row-2
       (цена+счётчик), т.к. Bootstrap-сетка темы (.row/.col-sm-8/.col-sm-4)
       на мобильной ширине разваливается сама по себе.

       Кнопка удаления (.element-delete) сюда не входит — она уже штатно
       позиционируется темой сайта (position:absolute) и корректно встаёт
       в правый верхний угол карточки сама по себе. Именно поэтому у .element
       увеличен ПРАВЫЙ паддинг — чтобы длинное название не наезжало под неё.
       -------------------------------------------------------------------- */
    .cart-body .element{
        display: flex !important;
        flex-direction: column !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    /* Обёртка (<form>) вокруг кнопки удаления остаётся первым потомком
       .element и, будучи теперь flex-элементом, могла отъедать немного
       места. Сама кнопка позиционируется absolute относительно .element
       независимо от размера этой формы — поэтому безопасно обнулить её */
    .cart-body .element > form{
        flex: 0 0 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .cart-body .element .mcart-row{
        display: flex !important;
        align-items: center !important;
    }

    /* Ряд 1: фото сверху не растягиваем по высоте — название может
       занимать 2 строки и быть выше фото, выравниваем по верхнему краю */
    .cart-body .element .mcart-row-1{
        align-items: flex-start !important;
        gap: 14px !important;
    }

    /* Фото товара — увеличено до 72px */
    .cart-body .element .element-img{
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 72px !important;
        margin: 0 !important;
    }

    /* Название товара — занимает всё оставшееся место в ряду 1,
       может спокойно переноситься на 2 строки */
    .cart-body .element .subelement2{
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Ряд 2: цена слева, счётчик справа — раздвигаем по краям.
       БЕЗ дополнительных сдвигов — счётчик естественно заканчивается
       на том же отступе (14px), что и у .element, чтобы совпадать
       с крестиком удаления (см. правило .element-delete ниже) */
    .cart-body .element .mcart-row-2{
        justify-content: space-between !important;
    }

    /* Цена — крупнее, сбрасываем паддинги/margin у вложенных технических
       обёрток темы (.table/.table-cell/.product_cost), чтобы текст
       начинался строго от левого края карточки (по границе фото) */
    .cart-body .element .element-price{
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        font-weight: 700 !important;
        font-size: 22px !important;
        white-space: nowrap !important;
    }
    .cart-body .element .element-price .table,
    .cart-body .element .element-price .table-cell,
    .cart-body .element .element-price .product_cost{
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        font-size: 18px !important;
    }

    /* Кнопка удаления — жёстко фиксируем отступ от края = отступу
       карточки (14px), чтобы крестик визуально совпадал по правой
       границе со счётчиком (- 1 +) в ряду ниже */
    .cart-body .element .element-delete{
        width: 30px !important;
        height: 30px !important;
        top: 14px !important;
        right: 14px !important;
    }

    /* Счётчик количества — правая часть ряда 2 */
    .cart-body .element .element-counter{
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Скрываем служебную кнопку-заглушку (сабмит "cart/change" на случай
       отключенного JS) — она не нужна визуально, т.к. количество и так
       меняется через кнопки -/+ на JS */
    .cart-body .element .element-counter button[name="ms2_action"]{
        display: none !important;
    }

    /* Кнопки минус/плюс — ТОЛЬКО размер, БЕЗ смены display! Внутри они
       лежат в классическом Bootstrap .input-group, где раскладка держится
       на display:table-cell — если его перебить на flex, минус/число/плюс
       "рассыпаются" каждый на свою строку */
    .cart-body .element .element-counter .btn-number{
        width: 30px !important;
        height: 30px !important;
    }
}

/* ==========================================================================
   СОБСТВЕННЫЙ ТОСТ "Вы должны заполнить требуемые поля" — визуально
   повторяет стандартное сообщение темы, но вызывается нашим JS
   (нативная HTML5-валидация required блокировала бы отправку раньше,
   чем успевал сработать штатный тост темы для этих полей)
   ========================================================================== */
.custom-required-toast{
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
    background: #b94a48;
    color: #fff;
    padding: 14px 40px 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    max-width: 320px;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.custom-required-toast-close{
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
@media (max-width: 767px){
    .custom-required-toast{
        left: 16px;
        right: 16px;
        max-width: none;
    }
}
.order-wrapper #msOrder input[type="text"],
#msCart input[type="text"]{
    border-radius: 10px !important;
}

/* ==========================================================================
   БЛОК "Добавить к букету подарок?" (.cart-cross-sell) — ПЕРЕНОС ВНУТРЬ КОРЗИНЫ
   Физически переставляется JS-ом (cart-cross-sell-move.js) внутрь .cart-body,
   сразу после карточки товара и перед блоком промокода.
   Здесь только стили — визуально "встраиваем" блок в карточку корзины:
   убираем прежний внешний отступ секции, делаем как раздел ВНУТРИ карточки.
   ========================================================================== */
.cart-body .cart-cross-sell{
    margin: 20px 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #EDEDED !important;
}

@media (max-width: 767px){
    .cart-body .cart-cross-sell{
        margin: 16px 0 !important;
        padding-top: 16px !important;
    }

    /* --------------------------------------------------------------------
       МОБИЛЬНАЯ ВЕРСИЯ: карусель "Добавить к букету подарок?" остаётся
       ЛЕНТОЙ (горизонтальный слайдер, листается свайпом — этим уже
       занимается скрипт-слайдер в футере), НО ширина карточки = ровно
       половина контейнера, чтобы помещались РОВНО 2 полные карточки без
       обрезки третьей. Именно это отличает от обычной "сетки в столбик":
       лента остаётся лентой, просто с шириной шага в 2 карточки.
       -------------------------------------------------------------------- */
    .cart-body .cart-cross-sell .cross-sell-grid{
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        overflow: hidden !important;
        width: auto !important;
    }

    .cart-body .cart-cross-sell .cross-item{
        flex: 0 0 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Без этого картинка внутри карточки (со своей собственной шириной)
       не даёт flex-элементу сжаться до положенных 50% — именно из-за неё
       "вторая карточка" вылезала за пределы экрана */
    .cart-body .cart-cross-sell .cross-item img,
    .cart-body .cart-cross-sell .cross-img{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Строка "цена + кнопка Добавить" — раньше при 4-значной цене (от 1000₽)
       не хватало места, и всё переносилось криво (то цена в 2 строки,
       то кнопка). Теперь: если места не хватает — переносим ЦЕЛИКОМ кнопку
       на новую строку (одинаково для любой цены), а не ломаем текст внутри */
    .cart-body .cart-cross-sell .cross-price-row{
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .cart-body .cart-cross-sell .cross-price{
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
    .cart-body .cart-cross-sell .cross-add-btn{
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    .cart-body .cart-cross-sell .slider-arrow{
        display: none !important;
    }

    /* Лишний вертикальный отступ (со стрелочкой-индикатором прокрутки)
       между заголовком "Добавить к букету подарок?" и карточками —
       сжимаем распорку .push20, которая давала эту большую паузу */
    .cart-body .cart-cross-sell .push20{
        height: 8px !important;
        margin: 0 !important;
    }
    .cart-body .cart-cross-sell .cross-sell-title-box{
        margin: 0 !important;
        min-height: 0 !important;
    }
}

/* ==========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ "Доставить получателю" / "Доставить мне"
   (страница оформления заказа, референс uFlor)
   ========================================================================== */
.delivery-target-toggle{
    display: flex;
    gap: 16px;
    margin: 10px 0;
    max-width: 520px;
}
.delivery-target-col{
    flex: 1 1 0;
    min-width: 0;
}
.delivery-target-option{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 18px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 14px;
    cursor: pointer;
    background: #fff;
    transition: border-color .2s ease, background .2s ease;
}
.delivery-target-option input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.delivery-target-option .delivery-target-icon{
    font-size: 15px;
    font-weight: 600;
    color: #B0B0B0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.delivery-target-option .delivery-target-text{
    font-size: 16px;
}
.delivery-target-option.active{
    border-color: #E8918A;
    background: #FFF6F5;
}
.delivery-target-option.active .delivery-target-icon{
    color: #E8918A;
}
.delivery-target-option.active .delivery-target-text{
    color: #E8918A;
    font-weight: 600;
}
@media (max-width: 767px){
    .delivery-target-option{
        padding: 14px 8px;
    }
    .delivery-target-option .delivery-target-text{
        font-size: 14px;
    }
}

/* ==========================================================================
   СКРУГЛЕНИЕ УГЛОВ НА СТРАНИЦЕ ОФОРМЛЕНИЯ ЗАКАЗА — единый стиль
   (первая проходка по самым очевидным элементам; пришлите скриншот
   страницы, если что-то из острых углов останется — точечно доведём)
   ========================================================================== */
.order-wrapper .form-control,
.order-wrapper textarea,
.order-wrapper input[type="text"],
.order-wrapper input[type="tel"]{
    border-radius: 10px !important;
}
.order-wrapper .customradio label,
.order-wrapper .checkbox label{
    border-radius: 10px !important;
}
.order-wrapper .well{
    border-radius: 16px !important;
}
.order-wrapper .btn#orderbutton,
.order-wrapper button#orderbutton,
#orderbutton{
    border-radius: 30px !important;
}
/* Карта доставки (Яндекс.Карты) — тоже скругляем углы через overflow:hidden,
   т.к. сама карта — это iframe/canvas, которому border-radius нужно
   "обрезать" через родительский контейнер */
.order-wrapper .deliveries{
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   msDom (msDeliveryOnMap) — уменьшаем высоту карты на мобильных,
   чтобы она не съедала весь экран в блоке оформления заказа.
   ========================================================================== */
@media (max-width: 767px) {
    #msDomMap.msdom-map-init {
        height: 200px !important;
        border-radius: 12px;
        overflow: hidden;
    }
}

/* ==========================================================================
   МИНУС → УДАЛЕНИЕ ТОВАРА при количестве 1
   Визуальное состояние кнопки "-", когда она временно работает как
   кнопка удаления товара (см. соответствующий блок в scripts.js).
   ========================================================================== */
.btn-number.btn-minus--delete {
    color: #e2807a;
}
.btn-number.btn-minus--delete:hover {
    color: #c96a64;
}
.btn-number.btn-minus--delete span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Прячем старый крестик .element-delete — теперь его роль полностью
   выполняет кнопка "-" (превращается в иконку удаления при count=1,
   см. minus-to-delete.js). Сама кнопка и её форма остаются в DOM
   (это важно: JS по-прежнему программно кликает по ней при удалении),
   просто визуально скрываем.
   ========================================================================== */
.cart-body .element-delete {
    display: none !important;
}

/* ==========================================================================
   БЛОК "Добавить к букету подарок?" — компактнее на мобильных (~20%)
   Уменьшаем фото, внутренние отступы карточек и шрифты, чтобы блок
   занимал заметно меньше места по высоте на телефоне. Раскладка
   "2 карточки в ряд" (из предыдущего фикса) не меняется — трогаем
   только размеры внутри.
   ========================================================================== */
@media (max-width: 767px){
    .cart-body .cart-cross-sell .cross-item{
        padding: 10px !important;
    }

    /* Было 110px (см. cart_candy.css) — уменьшаем примерно на 20% */
    .cart-body .cart-cross-sell .cross-img img{
        height: 88px !important;
    }

    .cart-body .cart-cross-sell .cross-name{
        font-size: 11px !important;
        min-height: 30px !important;
        margin: 8px 0 4px 0 !important;
        line-height: 1.3 !important;
    }

    .cart-body .cart-cross-sell .cross-price{
        font-size: 12px !important;
    }

    .cart-body .cart-cross-sell .cross-add-btn{
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    .cart-body .cart-cross-sell .cross-sell-grid{
        gap: 12px !important;
    }

    .cart-body .cart-cross-sell .cross-item{
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
    }
}

/* ==========================================================================
   КНОПКИ "Заказать в WhatsApp/Telegram" — приведены к единой Bootstrap-сетке
   (row/col-sm-6) и классу .btn, как у "Добавить в корзину"/"Купить в 1 клик",
   поэтому высота, скругление и отступы наследуются автоматически и все
   4 кнопки идеально выравниваются по сетке. Здесь — только цвет фона.
   ========================================================================== */
.messenger-buttons-row{
    margin-top: 20px !important;
}
.messenger-btn{
    color: #fff !important;
    font-weight: bold !important;
}
.messenger-btn--whatsapp{
    background: #25d366 !important;
    border-color: #25d366 !important;
}
.messenger-btn--whatsapp:hover{
    background: #1ebe5b !important;
    border-color: #1ebe5b !important;
    color: #fff !important;
}
.messenger-btn--telegram{
    background: #0088cc !important;
    border-color: #0088cc !important;
}
.messenger-btn--telegram:hover{
    background: #0077b3 !important;
    border-color: #0077b3 !important;
    color: #fff !important;
}

@media (max-width: 767px){
    .messenger-btn{
        font-size: 12px !important;
        padding: 10px 6px !important;
        height: auto !important;
        min-height: 46px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   СКРУГЛЕНИЕ КАРТОЧЕК БЛОГА — в едином стиле с карточками товаров
   (тот же радиус 18px на десктопе / 14px на мобильных, что и .catalog .element)
   ========================================================================== */
.blog-section .item{
    border-radius: 18px !important;
}
.blog-section .item .img-wrapper{
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
}
.blog-section .item .img-wrapper img{
    border-radius: 18px 18px 0 0 !important;
}
.blog-section .item .item-content{
    border-radius: 0 0 18px 18px !important;
}

@media (max-width: 767px){
    .blog-section .item{
        border-radius: 14px !important;
    }
    .blog-section .item .img-wrapper,
    .blog-section .item .img-wrapper img{
        border-radius: 14px 14px 0 0 !important;
    }
    .blog-section .item .item-content{
        border-radius: 0 0 14px 14px !important;
    }
}

/* ==========================================================================
   ЗАГОЛОВКИ СЕКЦИЙ ГЛАВНОЙ ("ХИТЫ ПРОДАЖ"/"НОВИНКИ"/"УЖЕ СОБРАН") —
   убираем острые треугольные "флажки" по краям, делаем скруглённую
   таблетку (pill), в едином стиле со скруглениями по всему сайту.
   ========================================================================== */
.catalog-section-title .left-figure,
.catalog-section-title .left-figure:before,
.catalog-section-title .left-figure:after,
.catalog-section-title .right-figure,
.catalog-section-title .right-figure:before,
.catalog-section-title .right-figure:after{
    display: none !important;
}

.catalog-section-title{
    padding: 4px 30px !important;
}
.catalog-section-title:before{
    left: 0 !important;
    right: 0 !important;
    border-radius: 30px !important;
}

@media (max-width: 767px){
    .catalog-section-title{
        padding: 4px 20px !important;
    }
    .catalog-section-title:before{
        border-radius: 24px !important;
    }
}

/* ==========================================================================
   СКРУГЛЕНИЕ МОДАЛЬНЫХ ОКОН (Fancybox) — "Обратный звонок",
   "Быстрый заказ" (Купить в 1 клик) и любые другие всплывающие формы,
   использующие тот же плагин/класс .modal
   ========================================================================== */
.modal,
.fancybox-skin{
    border-radius: 20px !important;
}
.modal .form-control{
    border-radius: 10px !important;
}

@media (max-width: 767px){
    .modal,
    .fancybox-skin{
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   KAKAOTALK — замена Viber. Фирменный жёлтый (#FEE500), тёмная иконка
   (у остальных мессенджеров иконка белая на цветном фоне — у KakaoTalk
   наоборот, тёмная на жёлтом, это официальный бренд-стиль)
   ========================================================================== */
.messagers-btns .element.el-kakaotalk,
.header .element.el-kakaotalk{
    background: #FEE500 !important;
    color: #191919 !important;
}

/* ==========================================================================
   ЦЕНТРИРОВАНИЕ ИКОНКИ КОРЗИНЫ В КНОПКЕ "-" — ИСПРАВЛЕННАЯ ВЕРСИЯ
   ВАЖНО: НЕ трогаем display самой кнопки (.btn-number) — она лежит внутри
   Bootstrap .input-group, где раскладка держится на display:table-cell.
   Смена display на flex (как было в прошлой версии фикса) ломает
   выравнивание с соседними элементами (число, кнопка "+").
   Центрируем через position:absolute у внутреннего <span> — это работает
   независимо от display родителя.
   ========================================================================== */
.btn-number.btn-minus--delete{
    position: relative !important;
}
.btn-number.btn-minus--delete span{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.btn-number.btn-minus--delete svg{
    display: block !important;
    margin: 0 !important;
}

/* ==========================================================================
   ОКОНЧАТЕЛЬНЫЙ ФИКС "ЗАЛИПАНИЯ" ПОДСВЕТКИ КНОПОК СЧЁТЧИКА (-/+)
   Раньше подсветка держалась на :hover, который на touch-устройствах
   (а иногда и в эмуляции DevTools) может не корректно сниматься —
   там просто нет курсора, которым можно "увести" в сторону.
   :active — состояние "кнопка физически нажата прямо сейчас" — всегда
   корректно снимается сразу при отпускании пальца/кнопки мыши, на любом
   устройстве, без каких-либо условий и медиа-запросов.
   ========================================================================== */
.element-counter button:hover{
    color: inherit !important;
    background: inherit !important;
    border-color: #DBDBDB !important;
}
.element-counter button:active{
    color: #fff !important;
    background: #E57171 !important;
    border-color: #E57171 !important;
}