.navbar-fixed-top{
position:fixed;
right: 0;
left: 0;
z-index:1000;
}
.navbar-default{
height:48px;
border-bottom:1px solid #aaa;
background-color:#f2f3f3;
}
.navbar-brand{
margin-top:-5px;
}
.city-chooser{
margin:0;
}
.city-chooser__city,.city-chooser__city:hover{
font-size:11px;
text-transform:uppercase;
color:#000 !important;
border:none;
}
.nav-catalog{
font-size:15px;
color:#bd282e !important;
font-weight:600;
text-transform:uppercase;
}
.city-chooser__city{
color:#000 !important;
}
.menu-icon{
width:24px;
height:auto;
margin-right:8px;
}
.navbar-form{

position:relative;
margin-top:8px;
}
.navbar-form .form-controls{
min-width: 360px;
}

.main-basket{
padding: 0 4px;
border:none !important;
margin-top:8px;
font-size:11px;
height:36px;
position:relative;
text-align:center;
}
.nav-msg-img{
text-align:center;
width: 24px;
height: 24px;
}
.feedback-link{
text-transform:uppercase;
font-size:13px;
color:crimson !important;
}
.main-basket-row .svg-shop {
width: 24px;
height: 24px;
float: left;
stroke: #000;
margin: 0 8px 0 0;
}
.no-products-text{
display:none;
}
.main-content{
margin-top:48px;
}
.subcat, .subcat option{
font-size: 16px;
}
.footer-m{
position:relative;
bottom:0;
width:100%;
text-align:center;
background-color:#525559;
color:#fff;
padding:1rem 0 1rem 0;
}
.footer-logo-col{
text-align:left;
width:160px;
}
.footer-logo-cell{
margin-bottom:6px;
}

.footer-logo{
text-align:left;
width:120px;
padding:0;
}
.footer-phone a,.footer-email a{
display:inline-block;
color:#fff;
text-decoration:none;
margin-bottom:8px;
}
.footer-phone{
text-align:left;
font-size:15px;
font-weight:600;
}
.footer-phone img, .footer-email img{
margin-right:10px;
height:16px;
width:auto;
}
.footer-time{
padding:0;
font-size:15px;
font-weight:400;
text-align:left;
}

.footer-email{
text-align:left;
font-size:15px;
font-weight:600;
}


.x_menu{
text-align:center;
vertical-align:top;
}
.x_menu_list{
display:table;
margin:0 auto;
padding-top:.5rem;
}
.x_menu_col{
list-style-type:none;
float:left;
}
.x_menu_col a{
border:0;
}
.x_menu_item{
text-align:left;
padding:.125rem;
}
.x_menu_title{
font-size:15px;
font-weight:700;
text-align:left;
padding:.125rem;
padding-bottom:.25em;
}
.x_menu_item{
font-size:14px;
}
.x_menu_item a:link,.x_menu_item a:visited,.x_menu_title a:link,.x_menu_title a:visited{
text-decoration:none;
color:#fff;
border:none;
}
.sn-img{
height:36px;
width:auto;
margin:0 4px;
}
.sn-img:hover{
transform:scale(1.2);
}


.copy{
text-align:left;
color:#fff;
font-size:12px;
margin:6px 0;
}
.copy a:link,.copy a:visited,.copy a:link,.copy a:visited{
color:#fff;
border:none;
}

.up-to-top{
position:fixed;
bottom:3rem;
left:.75rem;
padding:.5rem;
opacity:0.5;
height:2.5rem;
text-align:center;
width:4rem;
overflow:hidden;
background-color:rgba(205,53,77,.8);
color:#fff;
border-radius:.5rem;
text-decoration:none;
display:none;
z-index:1000;
cursor:pointer;
transition:all .1s ease;
}
.up-to-top:hover{
opacity:1;
}
.up-to-top i{
font-size:1.5rem;
color:#fff;
}


@media (max-width: 896px) {
.navbar-default{
height:auto;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
max-height:none;
}
.navbar-nav .open .dropdown-menu{
font-size:large;
}

.main-basket{
float:left;
}
#basket_items_txt{
display:block;
position:absolute;
margin-top:20px;
}
.h1{
font-size:20px;
}

.subcat{

}
.x_menu_col{
width:100%;
padding-left:24px;
}
.item-card{
width:90%;
}

.mat-card-cover,.item-card-cover{
width:90%;
}
.mat-card-cover img{
width:100%;
}

}


nav#menu-container {
display:none;
}
@media (max-width: 896px) {
.main-content{
padding:0;
}
nav#menu-container {
    display:block;
	font-size:14px;
	background:#fff;
    position:relative;
    width:100%;
    height: 56px;
}
#btn-nav-previous {
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    left: 0px;
    padding: 9px 12px;
    background: #fff;
    fill:#F00;
}
#btn-nav-next{
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    right: 0px;
    padding: 9px 12px;
    background: #fff;
    fill:#F00;
}
.menu-inner-box
{ 
    width: 100%;
    white-space: nowrap;
    margin: 0 auto;
    overflow: hidden;
    padding: 0px 54px;
    box-sizing: border-box;
}
.menu
{  
    padding:0;
    margin: 0;
    list-style-type: none;
    display:block;
    text-align: center;
}
.menu-item
{
    height:100%;
    padding:10px;
    color:#000;
    display:inline;
    margin:0 auto;
    line-height:52px;
    text-decoration:none;
    text-align:center;
    white-space:no-wrap;
}

.menu-item:hover {
    text-decoration:underline;
}
.last-item{
  margin-right: 50px;
}
}
 
/* ==========================================================================
   FINAL FIX v9: MOBILE SLIDER TEXT FIX + STABLE LAYOUT
   ========================================================================== */

/* --- 1. ОТКЛЮЧЕНИЕ СТАРОЙ АНИМАЦИИ --- */
.owl-carousel .product-col > a,
.product-col > a {
    background-image: none !important;
    background-color: #fff !important;
}

/* --- 2. СЛАЙДЕР (Фиксированный, по центру) --- */
.slider-top {
    position: relative;
    display: block;
    width: 100%;
    height: 290px !important;     /* Железобетонная высота */
    overflow: hidden !important;  /* Обрезаем всё лишнее */
    background: #fff;
    margin-bottom: 20px;
}

/* Картинки внутри слайдера */
div#slider_top img {
    width: auto !important;       
    max-width: 100% !important;   
    height: 100% !important;      
    object-fit: contain !important; 
    display: block !important;
    margin: 0 auto !important;    
    border: none !important;
}

/* --- КНОПКА СЛАЙДЕРА (DESKTOP) --- */
.slider-top .construct-btn {
    background-color: #ffdb4d !important; 
    color: #000 !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 35px !important;
    box-shadow: none !important;
    width: auto !important; 
    display: inline-block !important; 
    max-width: none !important;
    margin-top: 25px !important;
    text-decoration: none !important;
    line-height: normal !important;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.slider-top .construct-btn:hover {
    background-color: #ffe019 !important;
}


/* --- 3. СЕТКА ТОВАРОВ (Ряд до загрузки) --- */
.catalogue-products:not(.owl-loaded) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    margin: 0 -10px;
    height: 460px; 
}

.catalogue-products:not(.owl-loaded) .product-col {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
    display: block;
}

/* Адаптив сетки */
@media (max-width: 1200px) { .catalogue-products:not(.owl-loaded) .product-col { flex: 0 0 25%; max-width: 25%; } }
@media (max-width: 992px) { .catalogue-products:not(.owl-loaded) .product-col { flex: 0 0 33.33%; max-width: 33.33%; } }
@media (max-width: 768px) { .catalogue-products:not(.owl-loaded) .product-col { flex: 0 0 100%; max-width: 100%; } }


/* --- 4. СЕРЫЙ СКЕЛЕТОН --- */
@keyframes gray-shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.product-col > a {
    display: block;
    position: relative;
    background: #f0f2f5 !important;
    background-image: linear-gradient(to right, #f0f2f5 0%, #ffffff 50%, #f0f2f5 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 100% !important; 
    animation: gray-shimmer 1.5s infinite linear; 
    min-height: 220px;
    border-radius: 4px;
}

.product-col > a > img {
    position: relative;
    z-index: 5;
    background: #fff; 
    width: auto;
    max-width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
}

/* --- 5. ДИЗАЙН КАРТОЧЕК --- */

.product-col {
    position: relative;
    background: #fff;
    border: 1px solid #ececec; 
    border-radius: 8px; 
    margin: 10px 5px;
    padding: 15px 15px 60px 15px; 
    overflow: visible !important; 
    min-height: 410px;            
    /* УБИРАЕМ transition отсюда, чтобы при загрузке не было движения */
    transition: none !important;
}

.product-col:hover {
    z-index: 100; 
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    transform: translateY(-5px); 
    border-radius: 8px 8px 0 0;
    /* Переносим анимацию сюда - она сработает только когда вы наведете мышку */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-title {
    height: 38px;
    overflow: hidden;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    position: relative;
    z-index: 10;
    background: #fff;
}

.product-title a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.product-col:hover .product-title a {
    color: #ffdb4d; 
}

.product-price {
    margin-top: 10px;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    color: #000;
    position: relative;
    z-index: 10;
    background: #fff;
}

/* Кнопка товара (скрытая) */
.product-col .display-on-hover {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%; 
    left: 0;
    right: 0;
    background: #fff;
    z-index: 90;
    padding: 0 15px 20px 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.12); 
    border-radius: 0 0 8px 8px;
    transition: opacity 0.2s;
    margin-top: -1px;
}

.product-col:hover .display-on-hover {
    opacity: 1;
    visibility: visible;
}

.product-col .buy-item {
    width: 100%;
    margin: 10px auto 0;
    display: block;
    background-color: #ffdb4d;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 12px 0;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.product-col .buy-item:hover {
    background-color: #ffe019;
}

.product-frame { display: none !important; }
.product-characteristics { display: none; }
.main-article { min-height: 250px; }


/* --- 6. СТАБИЛИЗАЦИЯ ОТЗЫВОВ --- */
.slider-bottom {
    min-height: 340px; 
    overflow: hidden;
    width: 100%;
    display: block;
}

.review-card {
    height: 290px;
    background-color: #f3f3f3;
    padding: 15px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.review-card .review-name {
    min-height: 20px;
    display: block;
    font-weight: bold;
}
.review-card img.la {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin-right: 15px;
    background: #e0e0e0;
    border-radius: 50%;
}

body#body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* --- 7. МОБИЛЬНАЯ ВЕРСИЯ СЛАЙДЕРА (УВЕЛИЧЕНИЕ ТЕКСТА) --- */

@media (max-width: 900px) {
    /* Расширяем блок текста, чтобы он не был узким (128px) */
    .construct-center {
        width: 90% !important;
        margin-top: 60px !important; /* Опускаем текст чуть ниже */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Увеличиваем заголовок (было 10px) */
    .construct-h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
    
    /* Увеличиваем подзаголовок (было 8px) */
    .construct-h3 {
        font-size: 14px !important;
        font-weight: normal !important;
        margin-bottom: 15px !important;
    }
    
    /* Делаем кнопку аккуратной на мобильном */
    .slider-top .construct-btn {
        margin-top: 10px !important;
        padding: 8px 20px !important;
        font-size: 12px !important;
        width: auto !important;
        display: inline-block !important;
    }
}

/* =====================================================================
   SEARCH RESULTS GRID — стабильные карточки 5 в ряд
   ===================================================================== */

/* Базовая карточка в результатах поиска */
.search-product-card {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin: 10px 12px 30px;         /* расстояние между карточками как на главной */
    padding: 15px 15px 60px;
    min-height: 410px;
    box-sizing: border-box;
    overflow: visible;
    float: left;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* 1) УБИРАЕМ СЕРЫЙ СКЕЛЕТОН И ФОН У ФОТО В ПОИСКЕ */
.search-product-card > a {
    display: block;
    background: #fff !important;
    background-image: none !important;
    animation: none !important;
}

/* Фиксированная высота изображения, чтобы все карточки были ровные */
.search-product-card > a img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 220px;
    object-fit: contain;
    margin: 0 auto;
}

/* Заголовок и цена занимают фиксированное место */
.search-product-card .product-title {
    min-height: 38px;
    margin-top: 15px;
}

.search-product-card .product-price {
    margin-top: 10px;
}

/* Цветные кружки компактно под фото */
.search-product-card .photos-wrapper {
    margin: 10px auto 0;
}

/* Не даём появляться лишней рамке внутри карточки поиска */
.search-product-card .product-frame {
    display: none !important;
}

/* Ховер: лёгкий подъём и тень, но без изменения высоты строки */
.search-product-card:hover {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* Кнопка "Купить в 1 клик" — выпадает вниз, не раздвигая ряд */
.search-product-card .display-on-hover {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0 15px 20px;
    margin-top: -1px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    border-radius: 0 0 8px 8px;
    transition: opacity 0.2s;
    z-index: 90;
}

.search-product-card.catalog-col:hover .display-on-hover {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
}

/* 2) КАРТОЧКА "БОЛЬШЕ ТОВАРОВ"
      убираем нашу рамку/тень, оставляем только её внутренний стиль */
.pagination-product-next {
    float: left;
    margin: 10px 12px 30px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* 3) СЕТКА: 5 / 4 / 3 / 2 / 1 с учётом отступов между товарами */
@media (min-width: 1200px) {
    .search-product-card,
    .pagination-product-next {
        width: calc(20% - 24px);        /* 5 в ряд, минус 2×12px внешних отступов */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .search-product-card,
    .pagination-product-next {
        width: calc(25% - 24px);        /* 4 в ряд */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .search-product-card,
    .pagination-product-next {
        width: calc(33.3333% - 24px);   /* 3 в ряд */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .search-product-card,
    .pagination-product-next {
        width: calc(50% - 24px);        /* 2 в ряд */
    }
}

@media (max-width: 479px) {
    .search-product-card,
    .pagination-product-next {
        width: 100%;
        margin: 10px 0 30px;
    }
}


/* --- СТИЛИ ДЛЯ МЕТОК (ХИТ, НОВИНКА И Т.Д.) --- */
.labels-block {
    position: absolute;
    top: 15px;       /* Отступ сверху, совпадает с padding карточки */
    left: 15px;      /* Отступ слева */
    z-index: 200;    /* Высокий z-index, чтобы быть поверх картинки товара */
    width: auto;
    display: flex;
    flex-direction: column; /* Если меток несколько, они встанут в столбик */
    gap: 5px;        /* Расстояние между значками */
    pointer-events: none; /* Чтобы клик по значку пробивал на ссылку товара */
}

.bestseller, 
.new_label, 
.fast-shipping, 
.3d {
    display: block;
    width: 30px;
    height: 30px;
}

.bestseller img, 
.new_label img, 
.fast-shipping img, 
.3d img {
    width: 100%;
    height: auto;
    display: block;
}






/* FIX: Жестко фиксируем высоту карточки до загрузки JS (полное устранение CLS) */
.catalogue-products .product-col {
    min-height: 410px !important;
    height: 410px !important;
}

/* FIX: Высота блока текста в верхнем слайдере — предотвращает дергание */
.construct-center {
    min-height: 110px; /* сейчас у тебя там около 90–120px */
    display: block;
}

.owl-carousel,
.owl-stage,
.owl-item {
    will-change: transform;
}

/* ==========================================================================
   FIX: МОБИЛЬНОЕ МЕНЮ И ЗНАЧКИ
   ========================================================================== */

/* 1. ИСПРАВЛЕНИЕ ЗНАЧКОВ (ХИТ, НОВИНКА, 3D) */
.labels-block {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 200;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.bestseller, .new_label, .fast-shipping, .model-3d, .3d {
    display: block;
    width: 30px;
    height: 30px;
}

.bestseller img, .new_label img, .fast-shipping img, .model-3d img, .3d img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. ИСПРАВЛЕНИЕ МОБИЛЬНОГО МЕНЮ (до 768px) */
@media (max-width: 767px) {
    
    /* Делаем навбар прокручиваемым, если меню длинное */
    .navbar-fixed-top .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* --- ПОИСК --- */
    .navbar-form {
        border: none !important;
        margin: 10px 0 !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    .navbar-form .form-group {
        display: block;
        margin-bottom: 10px;
    }

    /* Исправляем поле ввода: убираем 360px и делаем 100% */
    .navbar-form .form-control, 
    .navbar-form input[type="text"] {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
        height: 40px !important; /* Удобнее нажимать пальцем */
    }

    /* Кнопка "Найти" на всю ширину */
    .navbar-form .btn {
        width: 100% !important;
        margin-top: 5px;
    }

    /* --- ПРАВАЯ ЧАСТЬ МЕНЮ (Корзина, Тел, Соцсети) --- */
    .nav.navbar-nav.navbar-right {
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .nav.navbar-nav.navbar-right > li {
        float: none !important;
        display: block !important;
        border-top: 1px solid #eee;
    }
    
    /* Ссылки в меню делаем крупнее и с отступами */
    .nav.navbar-nav.navbar-right > li > a {
        padding: 15px !important;
        line-height: 24px !important;
    }

    /* --- КОРЗИНА --- */
    /* Скрываем старый блок корзины в меню, если он кривой, 
       и выводим его контент нормально */
    .main-basket {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .main-basket-row {
        display: inline-block;
        width: 100%;
        padding: 0;
    }
    
    /* Выравниваем иконку и текст корзины */
    .navbar-nav .main-basket a {
        display: flex !important;
        align-items: center;
        padding: 10px 15px;
        color: #777;
        text-decoration: none;
    }
    
    .main-basket-row .svg-shop {
        float: none !important;
        margin-right: 10px !important;
    }
    
    /* Скрываем лишние отступы у выпадающего списка городов */
    .city-chooser {
        padding: 15px !important;
    }
}



/* ==========================================================================
   FIX Z-1: ЖЕСТКИЙ СБРОС РАЗМЕРОВ ЗНАЧКОВ (ПОИСК)
   ========================================================================== */

/* 1. Контейнер значков: ставим в левый верхний угол */
.search-product-card .labels-block {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: 30px !important;        /* Ширина столбика */
    height: auto !important;       /* Высота по содержимому */
    display: flex !important;
    flex-direction: column !important; /* Строго в столбик */
    gap: 5px !important;           /* Отступ между значками */
    z-index: 500 !important;       /* Поверх всего */
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;          /* Клик сквозь значки */
}

/* 2. Сами обертки значков (span): ЖЕСТКО 30x30 */
/* Это исправит проблему с высотой 220px */
.search-product-card .labels-block > span,
.search-product-card .labels-block .new_label,
.search-product-card .labels-block .bestseller,
.search-product-card .labels-block .model-3d,
.search-product-card .labels-block .3d {
    display: block !important;
    width: 30px !important;        
    height: 30px !important;       
    min-height: 30px !important;   
    max-height: 30px !important;   /* Запрещаем растягиваться! */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    float: none !important;
}

/* 3. Картинки внутри значков */
.search-product-card .labels-block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
}