/* ALL  */

h2 {display:flex; width:100%; margin:5px 0 0 0; padding:10px 0 0 0; }
h3 {display:flex;  width:100%; margin:5px 0 0 0; padding:10px 0 0 0;}
h4 {display:flex;  width:100%; margin:5px 0 0 0; padding:10px 0 0 0;}


/* ============= MAINPAGE  
================================ */

.category-extend__name {font-size:18px;}
li.category-extend__subcategory {color:#1392d1 ; text-decoration:underline;}

/* Main Mobile categories  */
.category-thumb_mobile {
    padding: 10px;
    
}

.category-thumb__image-box {
    width: 100% !important;
    height: 80px !important;
    padding: 0;
}

.categories-thumbs__wrapper {
    gap: 15px;
}



/* ============= ШАПКА САЙТА
================================ */


/* Выбранный город в шапке */
.header-top-bar__container-region {
    font-size: 16px;
}

.header-top-bar__container-region-icon {
    width: 18px;
    height: 18px;
}

/* Города в модальном окне */
.shop-regions-cities__city {
    color: #2b6cb0 !important;
    font-size: 17px !important;
    line-height: 1.4;
    text-decoration: underline !important;
    cursor: pointer;
}

.shop-regions-cities__city:hover {
    color: #174f91 !important;
    text-decoration: none !important;
}


/* Заказать Звонок */
.header-top-bar .ordercall-button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #63418a;
    border-radius: 7px;
    color: #63418a !important;
    text-decoration: none !important;
}

.header-top-bar .ordercall-button:hover {
    background: #63418a;
    color: #fff !important;
}

/* Телефон в шапке */
.header-top-bar-contacts__phone-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.header-top-bar-contacts__phone-link:hover {
    color: #63418a !important;
}

/* Телефон и выпадающее меню контактов */
@media (max-width: 1023px) {
    .r-header__list-item-link_phone {
        background-color: #63418a !important;
        border-color: #63418a !important;
        color: #fff !important;
    }

    .r-header__list-item-link_phone .icon-box__icon,
    .r-header__list-item-link_phone svg {
        color: #fff !important;
    }
}

@media (max-width: 768px) {
    .r-header-contacts__block {
        border: 1px solid #63418a;
    }

    .r-header-contacts__phone {
        font-size: 16px;
    }

    .call-back-button {
        background-color: #63418a;
    }

    .call-back-button .pseudo-link {
        color: #fff;
    }
}



/* Инфо меню */
@media (min-width: 1024px) {
    .header-bottom-bar__container-links {
        width: 100%;
    }

    .header-bottom-bar-links__swiper {
        flex: 1;
        width: 100%;
    }

    .header-bottom-bar-links__swiper .swiper-wrapper {
        width: 100%;
    }

    .header-bottom-bar-links__item-container {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .header-bottom-bar-links__link {
        justify-content: center;
    }
}




/* КАТАЛОГ МЕНЮ */
.catalog-columns__link_bold {
    color: #63418a !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.catalog-columns__link_bold:hover {
    color: #452968 !important;
    text-decoration: underline;
}


/* Логотип в шапке */
.header-middle-bar .header-middle-bar__logo {
    width: 140px !important;
    height: auto !important;
    object-fit: contain;
}


/* ============= CATEGORY
================================ */

.category-mini {background-color:#EBF2FC; border-radius:5px;}
.category-mini__name {color:#556; text-decoration:underline; text-decoration-style: dotted; }


.content-decorator.category-desc.description-block__content-wrapper {color:#334;} 
.content-decorator a {color:#5786d5; text-decoration:underline;}
.content-decorator img { margin:5px 15px 10px 0;}





/* --- Category listing product thumb foto full frame  --- */
.products-thumbs .product-thumb__image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}


/* Купить в 1 клик — только в листинге товаров */

.page_buy1click .products-thumbs
.product-thumb__buy-one-click
.buy1click-decorator_button
.buy1click-open-button.buy1click-button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    line-height: 1.2 !important;
}

.products-thumbs .product-thumb__buy-one-click .buy1click-open-button {
    background: #f3f3f3 !important;
    border: 1px solid #d9d9d9 !important;
    color: #666 !important;

}

.products-thumbs .product-thumb__buy-one-click .buy1click-open-button:hover {
    background: #ebebeb !important;
    border-color: #cfcfcf !important;
    color: #444 !important;
}



/* Table  */
table#products { width:100%; margin:10px 0 5px 0; }
table#products tbody tr td { min-width:50px; margin:0; padding:5px 7px 5px 10px; border:1px solid #a6c5f7; color:#665; font-size:13px;}
table#products tbody tr td p { margin:2px 0; padding:2px 0; color:#665; font-size:14px; text-align:left;}
table#products tbody tr td img { margin:0 0; padding:0 0; }
table#products tbody tr td strong a, table#products tbody tr td a strong {color:#069;  font-weight:bold;} 
table#products tr:nth-child(odd) td { background:#fff !important; }
table#products tr:nth-child(even) td { background:#e6edf7 !important; }
table#products tbody tr td div.price {min-width:90px; padding:3px 2px; margin:2px 0;  text-align:center; color:#fff; background-color:#FF6823; border-radius:5px; }
table#products tbody tr td div.price a {color:#fff;}
table#products tbody tr td div.price img {  margin: 0 0 0 5px;}




/* Main Categories Photo  */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.photo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border:1px solid #CCC;
}

.photo-item img {
    width: 100%;
    height: auto;
    max-height:100px;
    border-radius: 8px;
    margin:0 0;
}

.photo-item p {
    margin: 5px 0 5px 0;
    font-size: 14px;
    color: #333;
    text-align: center;
}





/* Gallery Photo  */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); /* Останавливаем растягивание на max-content */
    gap: 10px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 5px;
    max-width: 210px; /* Ограничиваем ширину контейнера до 200px */
    width: 100%; /* Контейнер занимает всю доступную ширину, но не более 200px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 135px; /* Фиксированная высота */
    object-fit: cover; /* Изображение сохраняет пропорции, но обрезается по необходимости */
    margin: 0 0 3px 0;
    border-radius: 3px;
    cursor: pointer;
}

.gallery-item:hover {
    transform: scale(1.01);  
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.foto-click {
    cursor: pointer;
    transition: transform 0.4s ease;
}
.foto-click:hover {
    transform: scale(1.02); 
}


/* Модальное окно для галереи и видео */
.gallery-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.gallery-modal.active {
    opacity: 1;
    visibility: visible;
}

.gallery-modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    transform: scale(0.5);
    transition: transform 0.5s ease;
    border: 1px solid white;
}

.gallery-modal.active .gallery-modal-content {
    transform: scale(1);
}

/* Закрытие модального окна */
.gallery-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Размеры для окна видео */
#modal-video {
    width: 90%;  
    height: 70%; 
    max-width: 700px; 
    max-height: 500px; 
    border-radius: 5px;
}


.video-thumbnail {
    position: relative; /* Необходим для позиционирования кнопки внутри */
    display: inline-block; /* Поддерживаем форму контейнера */
    cursor: pointer; /* Показать, что это кликабельный элемент */
}

/* Стили для кнопки "Play" */
.play-button-container {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 60px;
    height: 40px;
    background-color: rgba(255, 0, 0, 0.8); /* Красный полупрозрачный фон */
    border-radius: 20%; /* Закругленный фон */
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Поднятие кнопки над изображением */
    opacity: 0.9; /* Делаем кнопку видимой */
}

/* Треугольник "Play" поверх круга */
.play-button {
    position: relative;
    width: 0;
    height: 0;
    border-left: 20px solid white; /* Левый край треугольника */
    border-top: 10px solid transparent; /* Верхний край прозрачный */
    border-bottom: 10px solid transparent; /* Нижний край прозрачный */
}




/* ==== Products
   =========== */ 
   
   
   
   /* Купить в 1 клик */
.product-add-to-cart__buy-one-click .buy1click-open-button {
    width: 100% !important;
    min-height: 38px;
    padding: 7px 18px !important;

    background: transparent !important;
    border: 1px solid #63418a !important;
    border-radius: 14px !important;

    color: #63418a !important;
    font-size: 14px;
    font-weight: 500;
}




/* Блок цены и покупки */
.product-add-to-cart {
    border: 1px solid #ded6e8 !important;
}

/* Кнопки мессенджеров */
.product-cart-form__blocks-soc .items-list__soc-item {
    border: 1px solid #d6cce2 !important;
}

/* Нижний блок преимуществ */
.product-cart-form__advantages {
    border: 1px solid #ded6e8 !important;
}



/* Хочу дешевле */
.specprice-button {
    display: block !important;
    width: 100% !important;
    margin-top: 16px;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    color: #999 !important;
    font-size: 12px !important;
    line-height: 1.4;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Плагин «Хочу дешевле» — корректное наложение модального окна */
.product-page .product-cart-form__columns-additional:has(
    #specprice-parent[style*="display: flex"]
) {
    position: relative !important;
    z-index: 1000000 !important;
}

/* Затемнение страницы */
#specprice-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000001 !important;
}

/* Контейнер модального окна */
#specprice-parent {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000002 !important;
}

/* Само белое окно */
#modal-specprice {
    position: relative !important;
    z-index: 1000003 !important;
}




/* ==== INFOPAGES
   =========== */

/* Webforms  */
.calc_zayavka_button {border:1px solid #334; background-color:#f5a442; border-radius:15px; }
.calc_option_fon {border:1px solid #ccc; background-color:#fff; border-radius:10px; }
.multiform-wrap .radio__mark {border:1px solid #999;}

/* Akcii  */
.promo-box {display : inline-block;  margin:3px 1% 3px 0; width:48%;}
.promo-tabs-box {margin: 0 0 20px 0; padding:0 0; border-bottom:1px solid #dfdfdf;  
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	}	
		
.promo-tabs { 
    width: auto;   font-size:14px;  display:flex;
	flex-flow: row wrap;
	
	 vertical-align: middle; height:35px; margin: 5px 5px 0 0 ; padding:7px 20px;
border-top-left-radius:5px; border-top-right-radius:5px; }



/* Montazh  */
.montaj-baner { margin:10px 0; padding:10px 0 0 18px; width:100%; height:360px; background: url(/public/userfiles/montaj/montaj5.jpg) no-repeat left top;  }
.montaj-baner h2 {margin:10px 0 0 0; padding:0 0;}
.montaj-baner p { margin:0 0 !important; padding:0 0;}
.montaj-baner ul {margin:0 0 0 20px; padding:0 0; list-style-type:none; }
.montaj-baner ul li {margin:4px 0; padding:0 0 0 5px; font-weight:bolder; }
.montaj-price {float:left; margin:8px 0 0 15px; padding:3px 10px 3px 10px; background-color:#FFAD33; color:#fff; font-size:14px; border-radius:5px; }
.montaj-price a {color:#fff; text-decoration:none; text-align:center;}


.cards {
  display: grid;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 10px;
}

/* Одна колонка - всегда */
.cards.one-column {
  grid-template-columns: 1fr;
}

/* Две колонки - если экран больше 768px, иначе одна колонка */
.cards.two-columns {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cards.two-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Три колонки - если экран больше 1024px, две колонки при 768px - 1023px, иначе одна колонка */
.cards.three-columns {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) and (max-width: 1150px) {
  .cards.three-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1150px) {
  .cards.three-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Дизайн карточек */
.card {
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f7faff;
}

.card-icon {
  object-fit: cover;
  border-radius: 10px;
}

.card-text {
  font-size: 14px;
  color: #333;
}

.card-text strong {
  font-weight: bold;
}

/* Изображение сверху */
.card.image-above {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.card.image-above .card-icon {
  
  height: auto;
}




/* ТАБЛИЦА КОНТАКТОВ — десктоп */
#contacts {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#contacts th,
#contacts td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

#contacts thead {
    background-color: #bcd748;
}

#contacts tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

#contacts tbody tr:nth-child(even) {
    background-color: #eaf2c8;
}

.office-title a {
    margin: 0;
    color: #2a5d9f;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}


/* ТАБЛИЦА КОНТАКТОВ — мобильная версия */
@media (max-width: 768px) {
    #contacts {
        border: 0;
    }

    #contacts thead {
        display: none;
    }

    #contacts tr {
        display: block;
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    #contacts tbody tr:nth-child(odd) {
        background: #fff;
    }

    #contacts tbody tr:nth-child(even) {
        background: #f0f8ff;
    }

    #contacts td {
        display: block;
        position: relative;
        padding: 5px 0;
        border: 0;
        background: transparent !important;
        text-align: left;
    }

    #contacts td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #333;
        font-weight: bold;
    }

    .office-title a {
        margin-bottom: 10px;
        font-size: 16px;
    }
}






/* =====================================
   MOBILE BURGER MENU
   ===================================== */

/* =========================================
   МОБИЛЬНОЕ БУРГЕР-МЕНЮ NOVASHOP
   компактный дизайн в стиле Megashop
   ========================================= */

@media (max-width: 1023px) {

    /* Общий фон меню */
    .r-header-menu__dropdown,
    .r-header-menu__subdropdown,
    .r-subdropdown__main {
        background-color: #f7f7f7;
    }


    /* =====================================
       ШАПКА КАТАЛОГА
       ===================================== */

    .r-subdropdown__header {
        background-color: #ffffff;
    }

    /* В корне каталога оставляем только крестик */
    .r-subdropdown__header-back_hide {
        display: none;
    }


    /* Небольшой отступ после шапки */
    .r-subdropdown__main {
        padding-top: 6px;
    }


    /* =====================================
       КАРТОЧКИ КАТЕГОРИЙ
       ===================================== */

    .r-subdropdown__main .r-header-menu__dropdown-list {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

        margin: 0 6px 4px 6px;
        padding: 2px 8px;
    }


    /* Строка категории */
    .r-subdropdown__main
    .r-header-menu__dropdown-list
    > .list-rows__item {
        gap: 8px;
        padding: 2px 5px;
        height: 50px;
    }


    /* Название */
    .r-subdropdown__main .list-rows__item-name {
        font-size: 15px;
        font-weight: 500;
        color: #000000;
        flex-grow: 1;
    }


    /* =====================================
       ВЛОЖЕННОСТЬ

       Было 10px — слишком много на глубоких
       уровнях. Теперь всего 5px за уровень.
       ===================================== */

    .r-subdropdown__main .list-rows_children {
        padding-left: 5px;
    }


    /* =====================================
       "ПОСМОТРЕТЬ ВСЕ ТОВАРЫ"
       ===================================== */

    .r-subdropdown__main
    .r-header-menu__dropdown-list_parent
    > .list-rows__item {
        height: 42px;
    }

    .r-subdropdown__main
    .r-header-menu__dropdown-list_parent
    > .list-rows__item
    > .list-rows__item-name {
        font-size: 13px;
        font-weight: 600;
        color: #63418a;
    }


    /* =====================================
       УБИРАЕМ HOVER / ACTIVE НА МОБИЛЬНОМ

       При свайпе пальцем ничего не подсвечивается
       ===================================== */

    .r-subdropdown__main
    .r-header-menu__dropdown-list:hover,
    .r-subdropdown__main
    .r-header-menu__dropdown-list:active {
        background-color: #ffffff;
    }

    .r-subdropdown__main
    .r-header-menu__dropdown-list
    > .list-rows__item:hover,
    .r-subdropdown__main
    .r-header-menu__dropdown-list
    > .list-rows__item:active {
        background-color: transparent;
    }


    /* =====================================
       СТРЕЛКИ
       ===================================== */

    .r-subdropdown__main .list-rows__item-arrow,
    .r-subdropdown__main .list-rows__item-arrow svg {
        color: #63418a;
        fill: #63418a;
    }


    /* =====================================
       СКИДКИ
       ===================================== */

    .r-subdropdown__main .list-rows__item-badge {
        color: #ff3131 !important;
        border-color: #ff3131 !important;
        background-color: #ffffff !important;

        font-size: 11px;
        font-weight: 500;
        line-height: 1;

        padding: 3px 7px;

        border: 1px solid #ff3131;
        border-radius: 5px;

        white-space: nowrap;
    }




    /* =====================================
       ГЛАВНОЕ БУРГЕР-МЕНЮ
       Каталог / Москва / Сравнение...
       ===================================== */

    .r-header-menu__dropdown-main {
        padding: 6px 8px;
    }

    .r-header-menu__dropdown-main
    .r-header-menu__dropdown-list {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

        margin-bottom: 4px;
        padding: 2px 8px;
    }

    .r-header-menu__dropdown-main
    .list-rows__item {
        gap: 8px;
        padding: 2px 5px;
        height: 50px;
    }

    .r-header-menu__dropdown-main
    .list-rows__item-icon svg {
        width: 18px;
        height: 18px;
        color: #63418a;
        fill: #63418a;
    }

    .r-header-menu__dropdown-main
    .list-rows__item-name {
        font-size: 15px;
        font-weight: 500;
        color: #000000;
        flex-grow: 1;
    }


    /* В главном бургер-меню тоже никакого hover при свайпе */
    .r-header-menu__dropdown-main
    .r-header-menu__dropdown-list:hover,
    .r-header-menu__dropdown-main
    .r-header-menu__dropdown-list:active {
        background-color: #ffffff;
    }

    .r-header-menu__dropdown-main
    .r-header-menu__dropdown-list
    > .list-rows__item:hover,
    .r-header-menu__dropdown-main
    .r-header-menu__dropdown-list
    > .list-rows__item:active {
        background-color: transparent;
    }

}