/* 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;
}


/* ============= 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;
}