.topmn3-ext {position:relative; margin:0 auto; display:table; overflow:hidden;}
.topmn3-d {position:absolute; visibility:hidden; width:100%; height:100%;}
.topmn3-cbut
{
position:absolute; right:-225px; width:220px; height:34px; background:#ffffff; opacity:0; 
transition:opacity 1.0s, right 1.0s; border-radius:0 0 0 0;
color:#0170a6; font:bold 13px/15px arial; text-align:center; padding-top:9px;
}
.topmn3-p1 {top:4px;} .topmn3-p2 {bottom:4px;}
.topmn3-vis {opacity:1; right:0;}
.topmn3-dtop {top:0;left:0;position:absolute;width:100%;height:100%;border:4px solid #b0b0c0;}


/* =======================================================
   СОВРЕМЕННЫЙ РЕДИЗАЙН ШАПКИ И МЕНЮ (TUDAR.RU)
   (Цвет шапки не меняем, оставляем черным)
   ======================================================= */

/* 1. Глобальное улучшение шрифтов для всего сайта */
body, div, table, input, textarea, a, p, h1, h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* 2. Номер телефона (делаем крупнее и читаемее) */
.topic-phone {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.topic-phone-2 {
    color: #e0f2fe !important; 
    font-size: 13px !important;
}

/* 3. Поле поиска (современный вид с плавной анимацией) */
input.topic-src-text {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

input.topic-src-text:focus {
    border-color: #fe6000 !important;
    box-shadow: 0 0 0 3px rgba(254, 96, 0, 0.2) !important;
    outline: none !important;
}

/* 4. Боковое меню каталога (плавность и современность) */
.item-div-cat {
    border-radius: 6px !important;
    margin: 4px 8px !important;
    border: 1px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    text-align: left !important;
    padding-left: 12px !important;
}

.item-div-cat:hover {
    background: #fe6000 !important;
    color: #ffffff !important;
    transform: translateX(6px) !important; 
    box-shadow: 0 4px 8px rgba(254, 96, 0, 0.3) !important;
    border-color: #fe6000 !important;
}

/* Иконки категорий (скругляем и улучшаем) */
img.item-ico-cats {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px !important;
    background: #ffffff !important;
    transition: transform 0.3s ease !important;
}

.item-div-cat:hover img.item-ico-cats {
    transform: scale(1.1) !important;
    border-color: #ffffff !important;
}

/* 5. Подменю категорий (выпадающие списки) */
a.item-a-sub, a.item-par, a.item-ven {
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    padding: 6px 10px !important;
}

a.item-a-sub:hover, a.item-par:hover, a.item-ven:hover {
    background: #f1f5f9 !important; 
    color: #fe6000 !important; 
    text-decoration: none !important;
    transform: translateX(4px) !important;
}

/* 6. Кнопка "Наверх" (делаем её стильной) */
.topic-but-top-scr {
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(254, 96, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.topic-but-top-scr:hover {
    transform: translateY(-3px) !important;
    opacity: 1 !important;
    box-shadow: 0 6px 16px rgba(254, 96, 0, 0.6) !important;
}

/* 7. Улучшение читаемости ссылок в футере и шапке (ИСПРАВЛЕНА ОШИБКА СО СКОБКОЙ) */
.topic-nav {
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}
.topic-nav:hover {
    border-radius: 4px !important;
}

/* =======================================================
   УСИЛЕННЫЕ КАРТОЧКИ ТОВАРОВ (TUDAR.RU)
   ======================================================= */

div.crm-block, 
div.crm-block-1, 
[class*="crm-block"] {
    border: 2px solid #e2e8f0 !important;
    border-top: 5px solid #0170a6 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 15px !important;
    padding: 20px !important;
    height: auto !important;
    min-height: 300px !important;
}

div.crm-block:hover, 
div.crm-block-1:hover, 
[class*="crm-block"]:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-top-color: #fe6000 !important;
    border-color: #fe6000 !important;
}

div.crm-block a.crm-nmod, 
div.crm-block-1 a.crm-nmod, 
[class*="crm-block"] a.crm-nmod,
.crm-nmod {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin-bottom: 12px !important;
    min-height: 48px !important;
}

div.crm-block:hover a.crm-nmod, 
div.crm-block-1:hover a.crm-nmod, 
[class*="crm-block"]:hover a.crm-nmod,
.crm-nmod:hover {
    color: #0170a6 !important;
    text-decoration: none !important;
}

div.crm-block span.crm-price, 
div.crm-block-1 span.crm-price, 
[class*="crm-block"] span.crm-price,
.crm-price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fe6000 !important;
    letter-spacing: -0.5px !important;
    display: block !important;
    margin: 15px 0 !important;
    text-shadow: 0 2px 4px rgba(254, 96, 0, 0.2) !important;
}

div.crm-block div.crm-descr, 
div.crm-block-1 div.crm-descr, 
[class*="crm-block"] div.crm-descr,
.crm-descr {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin-bottom: 15px !important;
}

div.crm-block div.crm-add-order, 
div.crm-block-1 div.crm-add-order, 
[class*="crm-block"] div.crm-add-order,
.crm-add-order,
.crm-add-order table,
.crm-add-order td {
    background: linear-gradient(135deg, #fe6000 0%, #ff8533 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(254, 96, 0, 0.4) !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

div.crm-block div.crm-add-order:hover, 
div.crm-block-1 div.crm-add-order:hover, 
[class*="crm-block"] div.crm-add-order:hover,
.crm-add-order:hover {
    background: linear-gradient(135deg, #e55500 0%, #fe6000 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(254, 96, 0, 0.5) !important;
}

div.crm-block div.crm-add-order:active, 
div.crm-block-1 div.crm-add-order:active, 
[class*="crm-block"] div.crm-add-order:active,
.crm-add-order:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(254, 96, 0, 0.4) !important;
}

div.crm-block div.crm-no-order, 
div.crm-block-1 div.crm-no-order, 
[class*="crm-block"] div.crm-no-order,
.crm-no-order {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 12px !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
    border: 2px dashed #cbd5e1 !important;
}

div.crm-block img, 
div.crm-block-1 img, 
[class*="crm-block"] img {
    border-radius: 10px !important;
    transition: transform 0.4s ease !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important;
}

div.crm-block:hover img, 
div.crm-block-1:hover img, 
[class*="crm-block"]:hover img {
    transform: scale(1.05) !important;
}

@media (max-width: 980px) {
    div.crm-block, 
    div.crm-block-1, 
    [class*="crm-block"] {
        width: 45% !important;
        margin: 10px !important;
    }
}

@media (max-width: 600px) {
    div.crm-block, 
    div.crm-block-1, 
    [class*="crm-block"] {
        width: 92% !important;
        margin: 10px auto !important;
        display: block !important;
    }
    
    .crm-price {
        font-size: 24px !important;
    }
    
    .crm-add-order {
        padding: 14px 20px !important;
    }
}


/* =======================================================
   ИСПРАВЛЕНИЕ ВЛОЖЕННЫХ КАРТОЧЕК НА ГЛАВНОЙ СТРАНИЦЕ
   ======================================================= */

/* 1. Сбрасываем стили для вложенных карточек (убираем двойные рамки) */
.crm-block .crm-block,
.crm-block-1 .crm-block-1,
.crm-block .crm-block-1,
.crm-block-1 .crm-block,
[class*="crm-block"] [class*="crm-block"] {
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
}

/* 2. Убираем эффекты наведения для вложенных карточек */
.crm-block:hover .crm-block,
.crm-block-1:hover .crm-block-1,
[class*="crm-block"]:hover [class*="crm-block"] {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* 3. Фиксируем расположение картинки товара (чтобы она была вверху) */
.crm-block img,
.crm-block-1 img,
[class*="crm-block"] img {
    order: -1 !important; /* Перемещаем картинку в начало */
    display: block !important;
    margin: 0 auto 15px auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 4. Исправляем высоту карточек на главной странице */
.crm-block,
.crm-block-1,
[class*="crm-block"] {
    min-height: auto !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* 5. Убеждаемся, что контент внутри карточки идет в правильном порядке */
.crm-block > *,
.crm-block-1 > *,
[class*="crm-block"] > * {
    position: relative !important;
}


/* =======================================================
   ИСПРАВЛЕНИЕ РАЗДЕЛЕННОЙ ЦЕНЫ
   ======================================================= */

/* 1. Возвращаем цену в одну строку */
.crm-price,
div.crm-block .crm-price,
div.crm-block-1 .crm-price,
[class*="crm-block"] .crm-price {
    display: inline-block !important; /* Было block, меняем на inline-block */
    white-space: nowrap !important; /* Запрещаем перенос */
    margin: 15px 0 !important;
}

/* 2. Если цена разбита на несколько элементов, объединяем их */
.crm-price span,
.crm-price div,
.crm-price b,
.crm-price strong {
    display: inline !important;
    white-space: nowrap !important;
}

/* 3. Альтернативное решение - делаем контейнер цены flex-контейнером */
div.crm-block div[class*="price"],
div.crm-block-1 div[class*="price"],
[class*="crm-block"] div[class*="price"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 5px !important;
}


/* =======================================================
   ИСПРАВЛЕНИЕ ЦЕНЫ - УМЕНЬШАЕМ И ДЕЛАЕМ В ОДНУ СТРОКУ
   ======================================================= */

/* 1. Уменьшаем размер цены, чтобы она помещалась */
.crm-price,
div.crm-block .crm-price,
div.crm-block-1 .crm-price,
[class*="crm-block"] .crm-price {
    font-size: 20px !important; /* Было 26px, уменьшаем */
    font-weight: 700 !important;
    color: #fe6000 !important;
    white-space: nowrap !important; /* Запрещаем перенос */
    display: inline-block !important;
    margin: 10px 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 2. Убираем слово "руб." полностью (если хотите оставить - пропустите этот блок) */
.crm-price + *,
div.crm-block .crm-price + *,
div.crm-block-1 .crm-price + * {
    display: none !important;
}

/* Альтернатива: если хотите оставить "руб." в одну строку с ценой, 
   используйте этот код вместо пункта 2: */
/*
.crm-price + *,
div.crm-block .crm-price + *,
div.crm-block-1 .crm-price + * {
    display: inline !important;
    font-size: 14px !important;
    color: #64748b !important;
    margin-left: 5px !important;
    white-space: nowrap !important;
}
*/

/* 3. Убеждаемся, что все элементы внутри цены не переносятся */
.crm-price *,
div.crm-block .crm-price *,
div.crm-block-1 .crm-price *,
[class*="crm-block"] .crm-price * {
    display: inline !important;
    white-space: nowrap !important;
}


/* =======================================================
   ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ЦЕНЫ - БЕЗ ОБРЕЗКИ
   ======================================================= */

/* 1. Разрешаем цене занимать всю ширину и переноситься при необходимости */
.crm-price,
div.crm-block .crm-price,
div.crm-block-1 .crm-price,
[class*="crm-block"] .crm-price {
    font-size: 18px !important; /* Уменьшаем еще немного */
    font-weight: 700 !important;
    color: #fe6000 !important;
    white-space: normal !important; /* Разрешаем перенос */
    display: block !important;
    margin: 10px 0 !important;
    max-width: 100% !important;
    overflow: visible !important; /* Убираем обрезку */
    text-overflow: clip !important; /* Убираем многоточие */
    word-wrap: break-word !important;
    line-height: 1.3 !important;
}

/* 2. Убираем слово "руб." полностью */
div.crm-block .crm-price + *,
div.crm-block-1 .crm-price + *,
[class*="crm-block"] .crm-price + * {
    display: none !important;
}

/* 3. Убеждаемся, что все элементы внутри цены видны полностью */
.crm-price *,
div.crm-block .crm-price *,
div.crm-block-1 .crm-price *,
[class*="crm-block"] .crm-price * {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
}


/* =======================================================
   ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ЦЕНЫ - КОМПАКТНАЯ С ЗНАКОМ ₽
   ======================================================= */

/* 1. Делаем контейнер цены компактным и в одну строку */
.crm-price,
div.crm-block .crm-price,
div.crm-block-1 .crm-price,
[class*="crm-block"] .crm-price {
    font-size: 14px !important; /* Уменьшаем в два раза */
    font-weight: 700 !important;
    color: #fe6000 !important;
    display: flex !important; /* Flex для выравнивания */
    flex-wrap: nowrap !important; /* Запрещаем перенос */
    align-items: baseline !important;
    gap: 4px !important; /* Небольшой отступ между частями цены */
    margin: 10px 0 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* 2. Все элементы внутри цены делаем строчными */
.crm-price *,
div.crm-block .crm-price *,
div.crm-block-1 .crm-price *,
[class*="crm-block"] .crm-price * {
    display: inline !important;
    white-space: nowrap !important;
    font-size: 14px !important;
}

/* 3. Скрываем слово "руб." */
div.crm-block .crm-price + *,
div.crm-block-1 .crm-price + *,
[class*="crm-block"] .crm-price + *,
.crm-price + br,
.crm-price + p {
    display: none !important;
}

/* 4. Добавляем знак ₽ после цены */
.crm-price::after,
div.crm-block .crm-price::after,
div.crm-block-1 .crm-price::after,
[class*="crm-block"] .crm-price::after {
    content: ' ₽' !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fe6000 !important;
    margin-left: 4px !important;
}


/* =======================================================
   АБСОЛЮТНОЕ ИСПРАВЛЕНИЕ ЦЕНЫ (РАСШИРЯЕМ КОНТЕЙНЕР)
   ======================================================= */

/* 1. Расширяем узкий контейнер, в котором застряла цена */
.crm-block-2b, .crm-block-3b {
    width: auto !important;
    min-width: 120px !important; /* Даем достаточно места для цены */
    display: inline-block !important;
}

/* 2. Делаем цену компактной и в одну строку */
.crm-price {
    font-size: 15px !important; /* Оптимальный размер */
    font-weight: bold !important;
    color: #fe6000 !important;
    display: inline !important; /* Запрещаем быть блочным */
    white-space: nowrap !important; /* Запрещаем перенос */
    margin: 5px 0 !important;
    line-height: 1 !important;
}

/* 3. Убираем невидимые переносы строк <br> внутри цены */
.crm-price br {
    display: none !important;
}

/* 4. Скрываем слово "руб." (если оно идет сразу после цены) */
.crm-price + br, 
.crm-price + p, 
.crm-price + div, 
.crm-price + span {
    display: none !important;
}

/* 5. Добавляем знак рубля ₽ в конец */
.crm-price::after {
    content: " ₽";
    font-size: 15px;
    font-weight: bold;
    color: #fe6000;
    margin-left: 2px;
}


/* =======================================================
   УДАЛЕНИЕ СЛОВА "РУБ." (УСИЛЕННЫЙ ВАРИАНТ)
   ======================================================= */

/* 1. Скрываем все элементы, идущие после цены в карточке */
.crm-price ~ *,
div.crm-block .crm-price ~ *,
div.crm-block-1 .crm-price ~ *,
[class*="crm-block"] .crm-price ~ * {
    display: none !important;
}

/* 2. Если "руб." находится в отдельном блоке с классом */
[class*="rub"],
[class*="RUB"],
[class*="руб"] {
    display: none !important;
}

/* 3. Альтернатива: скрываем через прозрачность (если display не сработал) */
.crm-price + * {
    visibility: hidden !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* === ЛОГОТИП TUDAR — ФИНАЛЬНЫЙ ВАРИАНТ === */

/* Убираем серый фон у контейнера логотипа */
.vout-top-main .vout-abs-div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Оптимальный размер и отступы логотипа */
img[src="design/logo.png"] {
    max-height: 85px !important;
    height: auto !important;
    width: auto !important;
    display: block;
    background: transparent !important;
    padding: 5px 20px !important;
    margin: 0 !important;
}


/* === ОСОБЕННОСТИ ТОВАРА В ОДНУ СТРОКУ === */

p b + a.crm-nmod,
p a.crm-nmod {
    display: inline !important;
    white-space: nowrap !important;
}

/* Запрещаем перенос строк в блоке с особенностями */
.obzf-td-info p {
    white-space: nowrap !important;
    overflow: visible !important;
}