/**
 * UEB (Universal Elements Builder) - Базовые стили
 * Универсальная система без привязки к месту использования
 */

/* ========== Брендовые цвета соцсетей ========== */
:root {
    --light_gray: #f1f5f9;
    --social_telegram: #2AABEE;
    --social_whatsapp: #25D366;
    --social_vk: #0077FF;
    --social_youtube: #FF0000;
    --social_pinterest: #E60023;
    --social_rutube: #100943;
    --color_purple: #7276fd;
    --color_orange: #FF7700;
    --full_border_radius: 9999px;
}

/* ========== Обертка ========== */
.ueb-wrap {
    width: 100%;
}

/* ========== Пустая шапка (placeholder) ========== */
.ueb-empty-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ueb-empty-placeholder:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.ueb-empty-placeholder span {
    color: var(--text_color);
    opacity: 0.5;
    font-size: 14px;
}

/* ========== Ряды ========== */
.ueb-row {
    width: 100%;
}


.ueb-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

/* Стили для рядов теперь задаются через настройки ряда (floor settings) */

/* ========== Элементы (контакты) ========== */
.ueb-item {
    display: flex;
    align-items: center;
    color: var(--text_color);
}

.ueb-item svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--ueb-icon-color, currentColor);
}

.ueb-item span {
    white-space: nowrap;
    color: var(--ueb-text-color, inherit);
    font-size: var(--ueb-font-size, inherit);
    font-weight: var(--ueb-font-weight, inherit);
    text-transform: var(--ueb-text-transform, none);
    opacity: var(--ueb-opacity, 1);
}

/* ========== Город (выбор региона) ========== */
.ueb-city-changer {
    color: var(--second_color);
    font-weight: 700;
}

.ueb-city-changer svg path {
    stroke: var(--second_color) !important;
}

/* ========== Соцсети ========== */
.ueb-social-wrap {
    display: flex;
    align-items: center;
    gap: var(--ueb-social-gap, 20px);
}

.ueb-social {
    display: flex;
    align-items: center;
    font-size: var(--ueb-social-font-size, 14px);
    font-weight: var(--ueb-social-font-weight, 700);
    text-transform: var(--ueb-social-text-transform, lowercase);
}

.ueb-social svg {
    width: 24px;
    height: 24px;
}

.ueb-social-label {
    margin-left: 7px;
}

/* Цвета соцсетей */
.ueb-social-telegram { color: #20A0E1; }
.ueb-social-telegram svg path { fill: #20A0E1 !important; }

.ueb-social-whatsapp { color: #51C85D; }
.ueb-social-whatsapp svg path { fill: #51C85D !important; }

.ueb-social-vk { color: #0077FF; }
.ueb-social-vk svg path { fill: #0077FF !important; }

/* ========== Меню ========== */
.ueb-menu-wrap {
    display: flex;
    align-items: center;
}

.ueb-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--ueb-gap, 16px);
}

.ueb-menu li {
    list-style: none;
}

.ueb-menu a {
    display: block;
    border-radius: var(--button_border_radius);
    color: var(--ueb-text-color, inherit);
    font-size: var(--ueb-font-size, 14px);
    font-weight: var(--ueb-font-weight, 400);
    text-transform: var(--ueb-text-transform, none);
    transition: all 0.2s ease;
}

/* Прозрачность, padding и фон — только первый уровень */
.ueb-menu > li > a,
.ueb-menu > li > .ueb-menu-link {
    opacity: var(--ueb-opacity, 1);
    padding: var(--ueb-item-padding-y, 0) var(--ueb-item-padding-x, 0);
    transition: all 0.2s ease;
}

.ueb-menu > li:hover > a,
.ueb-menu > li:hover > .ueb-menu-link,
.ueb-menu > li.current-menu-item > a,
.ueb-menu > li.current-menu-item > .ueb-menu-link {
    color: var(--ueb-text-hover-color, var(--main_color));
    background: var(--ueb-item-bg-hover, transparent);
}

/* Многоуровневое меню (до 3 уровней) */
.ueb-menu .ueb-menu-item {
    position: relative;
}

/* Ссылка с шевроном */
.ueb-menu .ueb-menu-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Шеврон — размер зависит от размера шрифта */
.ueb-menu-chevron {
    flex-shrink: 0;
    width: var(--ueb-menu-chevron-size, 0.75em);
    height: var(--ueb-menu-chevron-size, 0.75em);
    transition: transform 0.2s ease;
}

.ueb-menu .ueb-has-children:hover > .ueb-menu-link .ueb-menu-chevron {
    transform: rotate(180deg);
}

/* Wrapper подменю — позиционирование и фальшивый отступ */
.ueb-submenu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1001;
}

/* Подменю */
.ueb-submenu {
    min-width: 211px;
    background: var(--white_color, #fff);
    border-radius: var(--big_border_radius, 8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    margin: 0;
    list-style: none;
}

/* Показать подменю при hover */
.ueb-menu .ueb-has-children:hover > .ueb-submenu-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Элементы подменю */
.ueb-submenu .ueb-menu-item {
    display: block;
}

.ueb-submenu .ueb-menu-link {
    padding: 8px 16px;
    white-space: nowrap;
    justify-content: space-between;
    font-size: clamp(11px, var(--ueb-font-size, 14px), 14px) !important;
    color: var(--ueb-submenu-text-color, var(--text_color));
}

.ueb-submenu .ueb-menu-link:hover {
    background: var(--main_color_opacity_10, rgba(0, 0, 0, 0.05));
    color: var(--ueb-submenu-hover-color, var(--main_color));
}

/* Шеврон в подменю - вправо */
.ueb-submenu .ueb-menu-chevron {
    transform: rotate(-90deg);
}

.ueb-submenu .ueb-has-children:hover > .ueb-menu-link .ueb-menu-chevron {
    transform: rotate(-90deg);
}

/* Вложенные подменю 2 и 3 уровня - wrapper открывается вправо */
.ueb-submenu-wrap-nested {
    top: 0;
    left: 100%;
    padding-top: 0;
    padding-left: 12px;
}

/* Если не хватает места справа - открыть влево */
.ueb-submenu-wrap-nested.open-left {
    left: auto;
    right: 100%;
    padding-left: 0;
    padding-right: 12px;
}

/* ========== Логотип ========== */
.ueb-logo {
    flex-shrink: 0;
}

.ueb-logo img {
    max-height: 50px;
    width: auto;
}

.ueb-logo-with-name {
    display: flex;
    align-items: center;
}

.ueb-logo-name-wrap {
    margin-left: 12px;
}

/* ========== Поиск ========== */
/* CSS переменные из UEB_VISUAL_FIELDS_STANDARD (config-driven):
   --ueb-width: ширина контейнера (default: 432px)
   --ueb-border-color: цвет рамки (default: text_color)
   --ueb-border-opacity: прозрачность рамки в % (default: 20%)
*/
.ueb-search {
    flex: 0 0 auto;
    width: var(--ueb-width, 432px);
    max-width: 100%;
    min-width: 200px;
}

.ueb-search form {
    position: relative;
    display: flex;
    align-items: center;
}

.ueb-search input[type="search"] {
    width: 100%;
    height: var(--ueb-height, 48px);
    padding: 0 48px 0 16px;
    background: var(--ueb-input-bg, transparent);
    color: var(--ueb-input-color, var(--text_color));
    /* --ueb-border-opacity хранится как % (например 20%) */
    border: 1px solid color-mix(
        in srgb,
        var(--ueb-border-color, var(--text_color)) var(--ueb-border-opacity, 20%),
        transparent
    );
    border-radius: var(--button_border_radius);
    font-family: var(--font);
}

.ueb-search input[type="search"]::placeholder {
    color: var(--ueb-input-color, var(--text_color));
    opacity: 0.6;
}

.ueb-search button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ueb-icon-color, var(--text_color));
    opacity: var(--ueb-icon-opacity, 0.6);
    transition: opacity 0.2s ease;
}

.ueb-search button:hover {
    opacity: 1;
}

.ueb-search button svg {
    display: block;
}

/* ========== Кнопка каталога ========== */
/* CSS variables set on .ueb-catalog-wrap via inline style:
   --ueb-catalog-bg, --ueb-catalog-color, --ueb-catalog-hover, --ueb-catalog-color-hover,
   --ueb-catalog-font-size, --ueb-catalog-font-weight, --ueb-catalog-transform,
   --ueb-catalog-justify, --ueb-catalog-height, --ueb-catalog-width
*/
.ueb-catalog-wrap {
    position: static;
}


.ueb-catalog-trigger {
    display: flex;
    align-items: center;
    justify-content: var(--ueb-catalog-justify, center);
    height: var(--ueb-catalog-height, 48px);
    min-width: var(--ueb-catalog-width, 120px);
    padding: 0 18px;
    background-color: var(--ueb-catalog-bg, var(--main_color_hover));
    color: var(--ueb-catalog-color, var(--white_color));
    font-weight: var(--ueb-catalog-font-weight, 600);
    font-size: var(--ueb-catalog-font-size, 14px);
    text-transform: var(--ueb-catalog-transform, uppercase);
    border-radius: var(--ueb-catalog-radius, var(--button_border_radius));
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.ueb-catalog-trigger:hover,
.ueb-catalog-trigger.active {
    background-color: var(--ueb-catalog-hover, var(--second_color));
    color: var(--ueb-catalog-color-hover, var(--white_color));
}

/* CSS Animated Burger Icon */
.ueb-burger-icon {
    position: relative;
    width: 14px;
    height: 10px;
    margin-right: 8px;
    transform: translateZ(0);
}

.ueb-burger-icon span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform-origin: center;
    transition: top 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Позиции: 0, 4.25, 8.5 */
.ueb-burger-icon span:nth-child(1) { top: 0; }
.ueb-burger-icon span:nth-child(2) { top: 4.25px; }
.ueb-burger-icon span:nth-child(3) { top: 8.5px; }

/* Active state: burger → X */
.ueb-catalog-trigger.active .ueb-burger-icon span:nth-child(1) {
    top: 4.25px;
    transform: rotate(45deg);
}

.ueb-catalog-trigger.active .ueb-burger-icon span:nth-child(2) {
    opacity: 0;
}

.ueb-catalog-trigger.active .ueb-burger-icon span:nth-child(3) {
    top: 4.25px;
    transform: rotate(-45deg);
}

/* ========== Выпадающий каталог ========== */
/* Позиционируется относительно .ueb-row-inner на всю ширину */
.ueb-catalog-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    width: 100%;
    background-color: #fff;
    border-radius: var(--middle_border_radius, 12px);
    box-shadow: 0 5px 30px rgba(34, 34, 34, 0.1);
    overflow: hidden;
    z-index: 1000;
    /* Анимация появления */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.ueb-catalog-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.ueb-catalog-inner {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    max-height: calc(80vh - 100px);
    padding: 40px 40px 12px;
}

.ueb-catalog-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.ueb-catalog-item {
    position: relative;
    width: var(--ueb-catalog-col-width, 25%);
    padding: 0 24px 0 70px;
    margin: 0 0 24px;
    list-style: none;
}

.ueb-catalog-item-img {
    position: absolute;
    left: 0;
    top: 0;
}

.ueb-catalog-item-img img {
    width: 50px;
    height: 50px;
    border-radius: var(--button_border_radius);
    object-fit: cover;
}

.no-image-radius .ueb-catalog-item-img img {
    border-radius: 0;
}

.ueb-catalog-item-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 50px;
}

.ueb-catalog-item-in > a {
    width: 100%;
    font-weight: 600;
    font-size: var(--ueb-catalog-title-size, 16px);
}

.ueb-catalog-item-in > a:hover {
    color: var(--main_color_hover);
}

.ueb-catalog-item-in > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.ueb-catalog-item-in > ul > li {
    list-style: none;
}

.ueb-catalog-item-in > ul > li > a {
    font-size: var(--ueb-catalog-sub-size, 13px);
    opacity: 0.7;
    padding: 2px 0 3px;
    display: block;
}

.ueb-catalog-item-in > ul > li > a:hover {
    color: var(--main_color_hover);
    opacity: 1;
}

/* Скрываем подкатегории после 3-й */
.ueb-catalog-item-in > ul > li:nth-child(n+4) {
    display: none;
}

.ueb-catalog-show-more {
    cursor: pointer;
    font-size: 14px;
    color: var(--main_color);
    width: 100%;
    margin-top: 4px;
    font-weight: 500;
}

.ueb-catalog-show-more:hover {
    opacity: 0.8;
}

/* Скрытие изображений в каталоге */
.ueb-catalog-item.no-image {
    padding-left: 0;
}

.ueb-catalog-item.no-image .ueb-catalog-item-in {
    min-height: auto;
}

/* ========== Двухпанельное меню каталога (classic) ========== */
.ueb-catalog-dropdown--classic {
    display: flex;
    overflow: visible;
    right: auto;
    margin-top: 0;
    border-radius: 0;
    transform: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ueb-catalog-dropdown--classic.active {
    transform: none;
    transition: opacity 0.25s ease, visibility 0s;
}

/* Левая колонка — категории */
.ueb-classic-sidebar {
    flex-shrink: 0;
    width: 300px;
    border-left: 1px solid rgba(0,0,0,0.06);
    border-right: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.ueb-classic-sidebar .ueb-classic-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.ueb-classic-item {
    list-style: none;
}

.ueb-classic-item > a {
    display: flex;
    align-items: center;
    padding: 8px 36px 8px 20px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.ueb-classic-item > a:hover,
.ueb-classic-item.active > a {
    background: var(--main_color_opacity_10, rgba(0,0,0,0.04));
    color: var(--main_color);
}

.ueb-classic-item.has-children > a::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -3px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.4;
}

/* Правая колонка — подкатегории */
.ueb-classic-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 20px 28px;
}

/* Панели */
.ueb-classic-panel {
    display: none;
}

.ueb-classic-panel.active {
    display: block;
    column-count: 3;
    column-gap: 32px;
}

/* Группа подкатегории */
.ueb-classic-group {
    break-inside: avoid;
    margin-bottom: 24px;
}

.ueb-classic-group:last-child {
    margin-bottom: 0;
}

.ueb-classic-group-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    transition: color 0.15s;
}

.ueb-classic-group-title:hover {
    color: var(--main_color);
}

/* Дочерние ссылки — простой вертикальный список */
.ueb-classic-group-items a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.15s;
}

.ueb-classic-group-items a:hover {
    color: var(--main_color);
}

/* ========== Кнопка связи ========== */
.ueb-btn-contact .order_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button_height);
    padding: 0 24px;
    background-color: var(--main_color);
    color: #fff;
    border-radius: var(--button_border_radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.ueb-btn-contact .order_button:hover {
    background-color: var(--main_color_hover);
}

/* ========== Виджеты (корзина, избранное, сравнение) ========== */
/* CSS variables set on .ueb-widget via inline style:
   --ueb-widget-bg, --ueb-widget-bg-opacity, --ueb-widget-pt, --ueb-widget-pb, --ueb-widget-pl, --ueb-widget-pr
   --ueb-icon-color, --ueb-icon-opacity, --ueb-icon-size, --ueb-text-color, --ueb-font-size, --ueb-font-weight
*/
.ueb-widget {
    /* Контейнер только для позиционирования и flex-поведения в группах */
    position: relative;
    display: inline-flex;
    opacity: var(--ueb-widget-opacity, 1);
}

/* Все визуальные стили на .ueb-widget-link */
.ueb-widget-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: var(--ueb-icon-gap, 4px);
    /* Фон и отступы */
    background-color: color-mix(in srgb, var(--ueb-widget-bg, transparent) var(--ueb-widget-bg-opacity, 100%), white);
    padding-top: var(--ueb-widget-pt, 0);
    padding-bottom: var(--ueb-widget-pb, 0);
    padding-left: var(--ueb-widget-pl, 0);
    padding-right: var(--ueb-widget-pr, 0);
    border-radius: var(--ueb-widget-radius-left, var(--button_border_radius)) var(--ueb-widget-radius-right, var(--button_border_radius)) var(--ueb-widget-radius-right, var(--button_border_radius)) var(--ueb-widget-radius-left, var(--button_border_radius));
    transition: background-color 0.2s ease;
}

.ueb-widget-link:hover {
    background-color: color-mix(in srgb, var(--ueb-widget-bg-hover, var(--ueb-widget-bg, transparent)) var(--ueb-widget-bg-hover-opacity, var(--ueb-widget-bg-opacity, 100%)), white);
}

/* Icon position variants */
.ueb-widget[data-icon-position="left"] .ueb-widget-link {
    flex-direction: row;
}

.ueb-widget[data-icon-position="right"] .ueb-widget-link {
    flex-direction: row-reverse;
}

.ueb-widget[data-icon-position="bottom"] .ueb-widget-link {
    flex-direction: column-reverse;
}

/* Виджеты с иконкой вне <a> (phone_callback и подобные) —
   flex-контейнер сам .ueb-widget, не .ueb-widget-link */
.ueb-widget:has(> .ueb-widget-icon-wrap) {
    gap: var(--ueb-icon-gap, 4px);
    align-items: center;
    flex-direction: column;
}

.ueb-widget[data-icon-position="left"]:has(> .ueb-widget-icon-wrap) {
    flex-direction: row;
    align-items: flex-start;
}

.ueb-widget[data-icon-position="right"]:has(> .ueb-widget-icon-wrap) {
    flex-direction: row-reverse;
    align-items: flex-start;
}

.ueb-widget[data-icon-position="bottom"]:has(> .ueb-widget-icon-wrap) {
    flex-direction: column-reverse;
}

.ueb-widget-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ueb-widget-icon-wrap:empty {
    display: none;
}

.ueb-widget svg {
    width: var(--ueb-icon-size, 26px);
    height: var(--ueb-icon-size, 26px);
    opacity: var(--ueb-icon-opacity, 1);
}

/* Стандартные иконки — stroke/currentColor */
.ueb-widget:not(.has-colored-icon):not(.has-fill-icon) svg {
    color: var(--ueb-icon-color, var(--text_color));
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.ueb-widget:not(.has-colored-icon):not(.has-fill-icon) svg path,
.ueb-widget:not(.has-colored-icon):not(.has-fill-icon) svg circle {
    stroke: currentColor;
}

/* Fill-иконки — используют fill вместо stroke */
.ueb-widget.has-fill-icon:not(.has-colored-icon) svg {
    color: var(--ueb-icon-color, var(--text_color));
    fill: currentColor;
    stroke: none;
}

/* Цветные иконки (Telegram, WhatsApp, VK) — сохраняем оригинальный fill */
.ueb-widget.has-colored-icon svg {
    stroke: none;
}

.ueb-widget-count {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 3;
    min-width: var(--ueb-counter-size, 18px);
    height: var(--ueb-counter-size, 18px);
    padding: 0 4px;
    background-color: var(--ueb-counter-bg, var(--main_color));
    color: var(--ueb-counter-color, var(--white_color));
    font-size: var(--ueb-counter-font-size, 11px);
    font-weight: var(--ueb-counter-font-weight, 600);
    border-radius: var(--ueb-counter-radius, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Без иконки — скрыть icon-wrap и убрать лишний gap */
.ueb-widget.no-icon .ueb-widget-icon-wrap {
    display: none;
}

.ueb-widget.no-icon .ueb-widget-link {
    flex-direction: row;
}

.ueb-widget.no-icon .ueb-widget-count {
    position: static;
}

/* Счётчик на уровне виджета (не на иконке) - теперь внутри link */
.ueb-widget.counter-on-widget .ueb-widget-link > .ueb-widget-count {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
}

/* Счётчик после текста (inline) */
.ueb-widget.counter-inline .ueb-widget-text > .ueb-widget-count {
    position: static;
    top: 0;
    right: 0;
    margin-left: 8px;
}

/* Без текста */
.ueb-widget.no-text .ueb-widget-text {
    display: none;
}

/* Без текста + счётчик на виджете — inline рядом с иконкой */
.ueb-widget.no-text.counter-on-widget .ueb-widget-link {
    flex-direction: row-reverse;
    gap: 5px;
}

.ueb-widget.no-text.counter-on-widget .ueb-widget-link > .ueb-widget-count {
    position: relative;
    top: 0;
    right: 0;
}

/* Фиксированный размер виджета - применяем к link */
.ueb-widget.fixed-size .ueb-widget-link {
    width: var(--ueb-fixed-width, 140px);
    height: var(--ueb-fixed-height, 48px);
    justify-content: var(--ueb-content-align, center);
}
.ueb-widget.fixed-size .ueb-widget-content .ueb-widget-text {
    white-space: normal;
    word-wrap: break-word;
}

/* Адрес + подпись: fixed_size = max-width (без фиксации высоты) */
.ueb-address_label.fixed-size {
    max-width: var(--ueb-fixed-width, 220px);
}
.ueb-address_label.fixed-size .ueb-widget-link {
    width: auto;
    height: auto;
}

/* Обрамление виджета - на link */
.ueb-widget.has-border .ueb-widget-link {
    border: var(--ueb-widget-border-width, 1px) solid color-mix(in srgb, var(--ueb-widget-border-color, var(--text_color)) calc(var(--ueb-widget-border-opacity, 0.2) * 100%), transparent);
}

.ueb-widget-text {
    display: flex;
    align-items: center;
    font-size: var(--ueb-font-size, 12px);
    font-weight: var(--ueb-font-weight, 400);
    line-height: 1;
    color: var(--ueb-text-color, var(--text_color));
    text-transform: var(--ueb-text-transform, none);
    white-space: nowrap;
}

/* Контейнер для текста с подписью */
.ueb-widget-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* text_align: выравнивание элементов и текста */
    align-items: var(--ueb-text-align-flex, flex-start);
    text-align: var(--ueb-text-align, left);
}

.ueb-widget-content .ueb-widget-text {
    white-space: nowrap;
}
.ueb-widget:has(> .ueb-widget-icon-wrap) .ueb-widget-text {
    line-height: 146%;
}
.ueb-widget[style*="max-width"] .ueb-widget-content .ueb-widget-text {
    white-space: normal;
    word-wrap: break-word;
}

/* Лейбл над текстом (захардкоженный) */
.ueb-widget-label {
    display: block;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.7;
    color: inherit;
}

/* Подпись под текстом */
.ueb-widget-subtitle {
    display: block;
    line-height: 1.3;
    font-size: var(--ueb-subtitle-font-size, 15px);
    font-weight: var(--ueb-subtitle-font-weight, 400);
    opacity: var(--ueb-subtitle-opacity, 0.7);
    color: var(--ueb-subtitle-color, inherit);
    text-transform: var(--ueb-subtitle-text-transform, none);
}

/* Префикс (inline перед текстом) */
.ueb-widget-prefix {
    font-size: var(--ueb-prefix-font-size, 14px);
    font-weight: var(--ueb-prefix-font-weight, 400);
    opacity: var(--ueb-prefix-opacity, 0.6);
    color: var(--ueb-prefix-color, inherit);
    text-transform: var(--ueb-prefix-text-transform, none);
    margin-right: 4px;
}

/* ========== Фиксированная шапка ========== */
header.ueb-wrap.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: uebSlideDown 0.3s ease;
}

@keyframes uebSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ========== Группы элементов ========== */
.ueb-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Вложенные элементы в группе наследуют flex */
.ueb-group > .ueb-item,
.ueb-group > .ueb-social-wrap,
.ueb-group > .ueb-menu-wrap,
.ueb-group > .ueb-btn-contact,
.ueb-group > .ueb-catalog-wrap {
    flex-shrink: 0;
}

/* ========== Разделители рядов ========== */
/* CSS переменные для разделителей (дефолты) */
.ueb-row {
    --ueb-separator-color: var(--text_color);
    --ueb-separator-opacity: 0.1;
    --ueb-separator-width: 1px;
}

/* Без разделителя (убираем дефолтный border у ueb-row-1) */
.ueb-row.ueb-separator-none {
    border-bottom: none;
}
.ueb-row.ueb-separator-none .ueb-row-inner {
    border-bottom: none;
}

/* Линия в контейнере */
.ueb-separator-line_inner .ueb-row-inner {
    position: relative;
}
.ueb-separator-line_inner .ueb-row-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ueb-separator-width);
    background: var(--ueb-separator-color);
    opacity: var(--ueb-separator-opacity);
}

/* Линия на всю ширину */
.ueb-separator-line_full {
    position: relative;
}
.ueb-separator-line_full::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ueb-separator-width);
    background: var(--ueb-separator-color);
    opacity: var(--ueb-separator-opacity);
}

/* Пунктирная линия в контейнере */
.ueb-separator-dashed_inner .ueb-row-inner {
    position: relative;
}
.ueb-separator-dashed_inner .ueb-row-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: var(--ueb-separator-width) dashed var(--ueb-separator-color);
    opacity: var(--ueb-separator-opacity);
}

/* Пунктирная линия на всю ширину */
.ueb-separator-dashed_full {
    position: relative;
}
.ueb-separator-dashed_full::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: var(--ueb-separator-width) dashed var(--ueb-separator-color);
    opacity: var(--ueb-separator-opacity);
}

/* Тень на всю ширину */
.ueb-separator-shadow {
    position: relative;
}
.ueb-separator-shadow::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--ueb-separator-width) * -1);
    height: var(--ueb-separator-width);
    background: linear-gradient(to bottom, var(--ueb-separator-color), transparent);
    opacity: var(--ueb-separator-opacity);
    pointer-events: none;
}

/* Тень в контейнере */
.ueb-separator-shadow_inner .ueb-row-inner {
    position: relative;
}
.ueb-separator-shadow_inner .ueb-row-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--ueb-separator-width) * -1);
    height: var(--ueb-separator-width);
    background: linear-gradient(to bottom, var(--ueb-separator-color), transparent);
    opacity: var(--ueb-separator-opacity);
    pointer-events: none;
}

/* Обрамление контейнера линией */
.ueb-separator-border_inner .ueb-row-inner {
    border: var(--ueb-separator-width) solid color-mix(in srgb, var(--ueb-separator-color) calc(var(--ueb-separator-opacity) * 100%), transparent);
}

/* Обрамление контейнера тенью */
.ueb-separator-border_shadow_inner .ueb-row-inner {
    box-shadow: 0 4px var(--ueb-separator-width) 0 color-mix(in srgb, var(--ueb-separator-color) calc(var(--ueb-separator-opacity) * 100%), transparent);
}

/* ========== Шапка поверх баннера (overlay mode) ========== */
/* Работает когда первый блок — main_banner с container_off */
/* Два режима: автоматический (всегда) ИЛИ только при включенной настройке (.ueb-overlay-banner) */
/* Только для десктопа (от 991px), на мобильных UEB-шапка скрыта */
@media screen and (min-width: 991px) {
    /* Позиционирование шапки поверх баннера */
    body:has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap.ueb-overlay-banner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    /* Компенсация высоты шапки — увеличиваем высоту баннера */
    body:has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) #wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off .main_banner_in {
        height: calc(var(--visual_banner_height) + var(--ueb-header-offset, 190px));
    }

    /* Сдвигаем контент баннера вниз */
    body:has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) #wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off .main_banner_content {
        padding-top: var(--ueb-header-offset, 190px);
    }
}

/* ========== Альтернативные цвета (при full-width баннере) ========== */
/* Когда включена настройка "Поверх баннера" И первый блок — main_banner с container_off, применяем alt-цвета к виджетам с .has-alt-colors */
/* Отключаем когда sticky-wrap видим (при скролле) */
/* !important нужен чтобы перебить inline styles (text color задаётся инлайном) */
body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors .ueb-widget-link {
    background-color: var(--ueb-alt-bg) !important;
}

body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors .ueb-widget-link:hover {
    background-color: var(--ueb-alt-bg-hover) !important;
}

body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors:not(.has-colored-icon) svg {
    color: var(--ueb-alt-icon) !important;
}

body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors .ueb-widget-text {
    color: var(--ueb-alt-text) !important;
}

body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors .ueb-widget-subtitle {
    color: var(--ueb-alt-subtitle) !important;
}

body:not(:has(.ueb-sticky-wrap.is-visible)):has(header.ueb-wrap.ueb-overlay-banner):has(#wrapper_all_redcoder > .section-system-container.section-system-layout-main_banner:first-child .main_banner_out.container_off) header.ueb-wrap .ueb-widget.has-alt-colors .ueb-widget-prefix {
    color: var(--ueb-alt-prefix) !important;
}

/* ========== Адаптивность ========== */
@media screen and (max-width: 1490px) {
    .ueb-search {
        width: var(--ueb-width-1490, var(--ueb-width, 432px));
    }
}

@media screen and (max-width: 1240px) {
    .ueb-search {
        max-width: 320px;
    }
}

@media screen and (max-width: 990px) {
    .ueb-wrap {
        display: none !important;
    }
}

/* ========== Blocksee Logo Component ========== */
.blocksee-logo {
    display: inline-flex;
    align-items: center;
    opacity: var(--blocksee-logo-opacity, 1);
}

.blocksee-logo__link {
    display: inline-flex;
    align-items: center;
    gap: var(--blocksee-logo-gap, 18px);
    text-decoration: none;
    color: inherit;
}

.blocksee-logo__image {
    width: var(--blocksee-logo-width, 180px);
    height: auto;
    flex-shrink: 0;
}

.blocksee-logo__svg {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--main_color);
}

.blocksee-logo__svg svg {
    width: var(--blocksee-logo-width, 180px);
    height: auto;
}

.blocksee-logo__svg svg path {
    fill: var(--main_color) !important;
}

.blocksee-logo__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
    min-width: 0;
}

.blocksee-logo__title {
    font-weight: var(--blocksee-logo-title-weight, 600);
    font-size: var(--blocksee-logo-title-size, 16px);
    line-height: 1.2;
    color: var(--blocksee-logo-title-color, var(--text_color));
    opacity: var(--blocksee-logo-title-opacity, 1);
}

.blocksee-logo__subtitle {
    font-size: var(--blocksee-logo-subtitle-size, 12px);
    font-weight: var(--blocksee-logo-subtitle-weight, 400);
    color: var(--blocksee-logo-subtitle-color, var(--text_color));
    opacity: var(--blocksee-logo-subtitle-opacity, 1);
}

@media screen and (max-width: 768px) {
    .blocksee-logo__image {
        width: var(--blocksee-logo-mobile-width, 120px);
    }

    .blocksee-logo__svg svg {
        width: var(--blocksee-logo-mobile-width, 120px);
    }
}