@charset "utf-8";
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "Roboto Condensed", sans-serif;
      background: #fff;
      color: #333;
      line-height: 1.6;
    }

	  	 /* Запрещает прокрутку при открытии мобильного меню*/ 
body.no-scroll {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}  
	/* Кнопка бургер открытия и закрытия мобильного меню*/  
	#btn  {
    display: flex;
	position: absolute;
	padding: 0;
    margin-top: 0px;	
	margin-left: 8px;	
	z-index: 9000;
	}	  
	  
  
.wishlist i {
  color: #999;
  transition: color 0.3s;
 }

.wishlist.active i {
  color: red;
 }	  
	  
  
	  
/*НАЧАЛО текстовый блок под header*/	  
    section {
      padding: 20px 10px;
    }
    .section-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
    }
  
    .about-block {
      max-width: 1050px;
      margin: 0 auto;
      font-size: 16px;
	  text-align: justify; 	
    }	  
/*Конец текстовый блок под header*/		  
	  

	

/*------------------------footer-------------------------------------*/
/* === Footer: 4/2/1 одинаковых колонок, с переносом текста === */
footer{
  /* визуал */
  background: #f1f1f1;
  padding: 40px 40px;
  
  /* сетка */
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  gap: 20px;
  /*align-items: baseline;*/
  justify-content: center;
   
}

footer .footer-column{
  min-width: 0;           /* чтобы длинный текст не растягивал колонку */
  margin: 0;              /* сетка управляет отступами через gap */
}
footer .footer-column,
footer .footer-column *{
  overflow-wrap: anywhere; /* перенос любых длинных кусочков */
  word-break: break-word;  /* fallback */
  hyphens: auto;           /* мягкие переносы */
}
	  
.footer-column h3{
  text-align: left;
  font-size: 18px;
  margin-bottom: 10px;
}
/* Фото под заголовками в footer */
.footer-image {
  margin: 10px 0 15px;
}

.footer-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;       /* чуть скруглить углы */
  object-fit: cover;        /* обрезка под формат */
  aspect-ratio: 3 / 2;      /* задаём горизонтальный формат */
}	  
	  

.footer-column ul{
  list-style: none;
  padding: 0;
  line-height: 2;
}
.footer-column a:link,
.footer-column a:visited,
.footer-column a:hover,
.footer-column a:active{
  color: #000000;
  text-decoration: none;
}
.footer-column a:hover{
  color: mediumvioletred;
  text-decoration: none;
}
   /* .social-icons {
      display: flex;
      justify-content: flex-start;
      gap: 20px;
      font-size: 18px;
      flex-wrap: wrap;
    }*/
	  
	  
  .social-icons {  
   background: #f1f1f1;
   padding: 10px 0px;
   display: grid !important;
   grid-template-columns: 1fr;
   gap: 10px;
   align-items: start; 
   } 
	  
	  
      /*кнопки инствграм , ютуб, фейс бук в footer*/
    .social-icons a {
      color: #333;
		text-decoration: none;
		font-size: 16px;
    }
     /*кнопка написать нам*/
    .whatsapp-button {
      display: inline-block;
      margin-top: 10px;
      padding: 5px 10px;
      background: grey;
      color: #fff;
      border-radius: 5px;
     }


    
	
	  
	  

/*новое меню для мобильных устройств*/	  
.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 25px;

  background: none;
  border: none;
  cursor: pointer;
  position: absolute; /* фиксированное положение — всегда видима */
  top: 15px;
  left: 15px;
  z-index: 8000; /* выше меню */
}
	  /*это влияет на бургер палочки внутри */
.mobile-nav-toggle span {
  display: block;
  width: 28px;
  height: 4px;
  background-color: grey;/*цвет палочек*/
  margin: 2px 0; /*Это влияет на толщину палочки*/
  transition: 0.4s;
  
}
.mobile-nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.mobile-nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5.7px, -5px);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0; 
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 1100;
}


	  
.mobile-nav {
  position: fixed; /* Это влияет на положение открывающегося мобильного меню !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
  top: 0.3%;
  left: 0.6%;
  height: 99.1%;/*Высота раскрываюшегося меню по высоте экрана*/
  width: 98.8%;
  background: #fff;
  padding: 100px 10px 10px 40px;
  border-radius: 5px 5px 5px 5px;	
  transform: translateX(-104%);
  transition: transform 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 7px; /*расстояние между строк в мобильно навигации*/
  z-index: 1102;/*было 1102*/
}
.mobile-nav a {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.1s ease;
  text-decoration: none;
  transition-delay: 0ms;                 /* база без задержки */
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-nav.show {
  transform: translateX(0);
}
.mobile-nav.show a {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--i, 0) * 20ms); /* ступенчатое появление */
} 
	  
/* Когда не показано — не перехватываем клики и не «лежим» над хедером */
.mobile-nav { pointer-events: none; visibility: hidden; }
.mobile-nav.show { pointer-events: auto; visibility: visible; }

/* На всякий случай фиксируем приоритет хедера над интерфейсом страницы,
   но ниже слоя оверлея/меню когда они открыты */
.site-header { z-index: 1000; position: sticky; top: 0; }	  
	  
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none;
  background-color: burlywood;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}

#scrollTopBtn:hover {
  background-color: #555;
}	  
	  
.product-section {
  display: flex;
  flex-wrap: wrap;
  padding: 20px; /* это оступы большой фото в гаререе */
  gap: 20px;
}

.product-gallery {
  flex: 1 1 70%;
  max-width: 60vw;
  /*height: 87vh;*/
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
   	
}

.product-info {
  flex: 1 1 28%;
  max-width: 28%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-image-wrapper {
  position: relative;
  width: 85%;
  height: 85%;
  overflow: hidden;
  border-radius: 10px;
}

.main-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
	  

.gallery-arrows {
  position: absolute;
  top: 94%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}

.gallery-arrows button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

	  
.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  flex-wrap: wrap;

}

.thumbnails img.thumb {
  width: 60px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
}

.thumbnails img.active {
  border-color: #333;
}

	  


.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}


.product-details {
  display: flex;
  gap: 20px;
  font-size: 15px;
}
.details-labels,
.details-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-price {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}

.product-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  
}
.product-actions a{
padding: 10px 10px;

}
.product-actions button {
  /*width: 50%;*/
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  gap: 4px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.add-to-cart {
  background-color: #e67e22;
  color: white;
	padding: 10px 10px;
	
}
.add-to-cart:hover {
  background-color: #cf5c0d;
}
.ask-question {
  
  align-items: center;
  gap: 8px;
  background-color: #25D366;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  font-weight: normal;
  
  cursor: pointer;
  transition: background 0.3s ease;
}


.ask-question:hover {
  background-color: #1ebe5b;
}

.product-note {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

.product-materials h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.product-materials ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-materials li {
  flex: 1 1 calc(50% - 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.product-materials img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}


	  
	  
	  
  
	  
/*-------------------------блок "Похожие товары" или "Рекомендуем"-----------------------*/	  
.related-products {
  padding: 40px 20px;
  background: #f9f9f9;
}

.products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 15px;
  width: 230px;
  text-align: center;


  position: relative;
  transition: transform 0.3s;
}

.product-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

.product-card h3 {
  font-size: 16px;
  margin: 10px 0 5px;
}

.product-card .price {
  font-weight: bold;
  margin-bottom: 10px;
}

  
/* блок стилей для section id="related-products"*/	  
.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.related-card {
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.3s;
  background: #fff;
}
.related-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.related-card h3 {
  margin: 10px 0 5px;
  font-size: 16px;
}
.related-card p {
  font-weight: bold;
  margin-bottom: 10px;
}
.related-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}	
	  
/* === ОБЩИЙ СТИЛЬ ДЛЯ ВКЛАДОК === */	  
.product-tabs {
  width: 95%;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  box-sizing: border-box;
}
/* === КНОПКИ ВКЛАДОК === */
.tabs-buttons {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}
.tab-btn {
  padding: 10px 20px;
  background-color: #eee;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: 500;
}
	  
.tab-btn:hover {
  background-color: #ddd;
}	  

.tab-btn.active {
  background-color: #333;
  color: #fff;
}
	  /* === justify выравниваем текст в блоке ровно слева и справа === */
.tab-content {
  display: none;
  animation: fade 0.5s ease;
  text-align: justify;
}
.tab-content.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === ТЕКСТ В БЛОКАХ === */
.tab-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}
/* === ГАЛЕРЕЯ РАЗМЕРОВ там фоторгафии под текстом 4 шт=== */

.size-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}


.size-gallery img {
  width: calc(100% - 10px);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.size-gallery img:hover {
  transform: scale(1.05);
}	
	  
.transform-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}


.transform-gallery img {
  width: calc(100% - 10px);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.transform-gallery img:hover {
  transform: scale(1.05);
}	  

.care-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}


.care-gallery img {
  width: calc(100% - 10px);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.care-gallery img:hover {
  transform: scale(1.05);
}		  

/* Сетка тканей */
.fabric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  text-align: center;
}
	  
.fabric-item {
  text-align: center;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}	  

	  
.fabric-thumb {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
}

.fabric-thumb:hover {
  transform: scale(1.05);
}

.fabric-item p {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

	  
/*----------------------------------------------------------------------------------*/	  
	  
/* === ОБЩИЙ СТИЛЬ МОДАЛЬНОГО ОКНА === */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

/* === ОБЁРТКА СОДЕРЖИМОГО === */
/*это влияет на положение просматриваемой картинки по центру экрана в модальном окне*/
.modal-content-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {

  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  animation: zoomIn 0.3s ease;
}

/* === СТРЕЛКИ УПРАВЛЕНИЯ === */
.modal-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  
}

.modal-controls button {
  margin: 0em 0.5em;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 32px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50%;
  transition: background 0.3s;
  pointer-events: all;
}

.modal-controls button:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* === КНОПКА ЗАКРЫТИЯ === */
.close-modal,
.modal-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s;
}

.close-modal:hover,
.modal-close:hover {
  color: #ff6b6b;
}

/* === АНИМАЦИЯ === */
@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



/* === ПЛАВНЫЕ ПЕРЕХОДЫ === */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}
  


.fabrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}
.fabrics-grid div {
  width: calc(20% - 10px);
  text-align: center;
}
.fabrics-grid img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s;
}
.fabrics-grid img:hover {
  transform: scale(1.05);
}
.fabrics-grid p {
  font-size: 14px;
  margin-top: 6px;
}

/* Размер логотипа ANGELICA в хедере */
.angelica-logo{
  display:inline-block;
  height:41px;   /* увеличь до 34–36px, если хочешь крупнее */
  width:auto;
  vertical-align:middle;
  object-fit:contain;
}

/* Angelica: фиксируем поведение без hover-эффектов */
.catalog-grid .angelica-link img.angelica-logo{
  transition: none !important;
  transform: none !important;
}

/* отключаем любые наведения на саму ссылку Angelica */
.catalog-grid .angelica-link:hover,
.catalog-grid .angelica-link:hover img.angelica-logo{
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  text-decoration: none !important;
}

/* На мобильных сделаем чуть меньше */
@media (max-width: 768px){
  .angelica-logo{ height:40px; }

	/* Angelica: фиксируем поведение без hover-эффектов */
.catalog-grid .angelica-link img.angelica-logo{
  transition: none !important;
  transform: none !important;
}

/* отключаем любые наведения на саму ссылку Angelica */
.catalog-grid .angelica-link:hover,
.catalog-grid .angelica-link:hover img.angelica-logo{
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  text-decoration: none !important;
   }
}

/* Размер логотипа ANGELICA 2 в каталоге */
.angelica-logo2{
  display:inline-block;
  height:80px;   /* увеличь до 60–80px, если хочешь крупнее */
  width:auto;
  vertical-align:middle;
  object-fit:contain;
}

/* Angelica: фиксируем поведение без hover-эффектов */
.catalog-grid .angelica-link img.angelica-logo2{
  transition: none !important;
  transform: none !important;
}

/* отключаем любые наведения на саму ссылку Angelica */
.catalog-grid .angelica-link:hover,
.catalog-grid .angelica-link:hover img.angelica-logo2{
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  text-decoration: none !important;
}

/* На мобильных сделаем чуть меньше */
@media (max-width: 768px){
  .angelica-logo2{ height:70px; }

	/* Angelica: фиксируем поведение без hover-эффектов */
.catalog-grid .angelica-link img.angelica-logo2{
  transition: none !important;
  transform: none !important;
}

/* отключаем любые наведения на саму ссылку Angelica */
.catalog-grid .angelica-link:hover,
.catalog-grid .angelica-link:hover img.angelica-logo2{
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  text-decoration: none !important;
}
	
	
}


/* --------------Для мобильных устройств — свайп и серые полоски -------------------------*/
	  
@media (max-width: 768px) {
.gallery-arrows {
  position: absolute;
  top: 92%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 8px;
}

.gallery-arrows button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}  
	
	/* -------------- ГАЛЕРЕЯ ГЛАВНОГО ФОТО , ЗАГОЛОВОК И РАЗМЕРЫ -------------------------*/
  .product-gallery {
  max-width: 100%;
  height: auto;
  }
  .product-info {
  max-width: 100%;
  }
 .product-title {
  font-size: 24px;
  }	
 .product-details {
  display: flex;
  gap: 50px;
  font-size: 14px;
  line-height: 90%;	 
  }	
  .main-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  }

  .main-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  }	
	
  .thumbnails {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }

  .thumbnails img {
    display: none;
  }

  .mobile-indicators {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
  }

  .mobile-indicators span {
    width: 10px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
  }

  .mobile-indicators .active {
    background: #333;
  }
	
	
}	
@media (max-width: 768px) {
  .product-materials li {
    flex: 1 1 calc(50% - 10px);
  }
}	  

/* --------------Конец медиа запроса для мобильных устройств — свайп и серые полоски -------------------------*/





/*----------------------начало медиа запроса ----------------------------- */	  
@media (min-width: 1200px) {
  .mobile-nav-toggle,.mobile-menu-overlay,.mobile-nav {
    display: none !important;
  }
 }
  
/*-----------------------------планшеты---------------------------------------*/ 	  
@media (min-width: 769px) and (max-width: 1199px) {
  .mobile-nav-toggle,.mobile-menu-overlay,.mobile-nav {
    display: none !important;
	   }

  .product-gallery {
  flex: 1 1 60%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
}
  .product-info {
  max-width: 100%;
  }
.main-image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;	
}

.product-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}	
 .product-details {
  display: flex;
  gap: 50px;
  font-size: 14px;
  line-height: 90%;	 
  }	
	

	
 }
	  
  
/*------------------конец медиа запросы для планшетов--------------------------------*/	


/*----------------------------------------------------------------------------------*/		  
	  
@media (max-width: 1024px) {
  .fabrics-grid div {
    width: calc(33.333% - 10px);
  }
  footer{
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }	
	
}
@media (max-width: 768px) {
  .fabrics-grid div {
    width: calc(50% - 10px);
  }
	  footer{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
	  .footer-column {
    font-size: 13px;   /* уменьшаем текст */
  }

  .footer-column h3 {
    font-size: 16px;   /* уменьшаем заголовки */
  }
	  .social-icons a {
    font-size: 15px;   /* уменьшаем заголовки */
  }
}	  

/* === АДАПТИВНОСТЬ мобильные устройства === */
@media (max-width: 600px) {
  .modal-content {
    max-width: 100%;
    max-height: 100%;
  }

  .modal-controls button {
    font-size: 24px;
    padding: 8px 16px;
  }
	
.modal-content-wrapper {

  width: 100%;
  height: 100%;
}	
.modal-controls {
   top: 75%;
}	
.modal-controls button {
  font-size: 26px;
  padding: 8px 16px;
	margin: 2em 2em 0em 2em;
}
}	


/*---начало медиа запроса для кнопок корзина  и задать вопрос для мобильных устройств----*/	
@media (max-width: 768px) {
  .product-actions {
  display: inline-flex;/*было flex;*/
  gap: 12px;/*было 12*/
  flex-wrap: nowrap;/*было wrap*/
	  
  }
.product-actions a{
padding: 10px 10px;

}
.add-to-cart {

	padding: 10px 10px;
	
}	
  .product-actions button{

  font-size: 13px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.3s ease; 
  }
	

	/*это разметка где информация о размерах */
 
	
	
  .product-tabs {
    width: 95%;
    padding: 15px;
  }

  .tab-btn {
    font-size: 14px;
    padding: 8px 16px;
  }

  .size-gallery img {
    width: calc(100% - 10px);
  }
	
  .care-gallery img {
    width: calc(100% - 10px);
  }	
 .transform-gallery img {
    width: calc(100% - 10px);
  }	
	
}	 
	  
/*-----------------------------конец медиа запроса для мобильных устройств -----------------------------*/	  
	  


/*---------------------мобильные устройства ------------------------------*/  
@media (max-width: 768px) {



    .section-title  {
    align-items: center;
	font-size: 20px;
		
	}	
	.about-block{
	text-align: justify;
    padding: 0 20px;
		
	}


 /*Размер текста кнопок - Описание - Размеры - Ткани - Уход за мебелью*/ 
	  
  .tab-btn {
  padding: 6px 12px;
  background-color: #eee;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: 500;
}  
	
  .product-tabs {
  width: 96%;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  box-sizing: border-box;
}
	  
}		  
/*медиа запрос конец мобильные устройства*/  

/* Для мобильных устройств */
	  
@media (min-width: 769px) and (max-width: 1199px) {
 
    .modal-content {
    max-width: 100%;
    max-height: 100%;
  }

}
  
	  
@media (max-width: 768px) {

	.product-actions {
  display: inline-flex;/*было flex;*/
  gap: 12px;/*было 12*/
  flex-wrap: nowrap;/*было wrap*/
	  
  }
}
  
.four-images {
  padding: 30px 20px;
  background: #fff;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.image-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.image-grid img:hover {
  transform: scale(1.03);
}

/* планшеты */
@media (max-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* мобильные */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}
	  
	  
/* ===== HEADER (JSON-driven) ===== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
  padding: 5px 16px;
}
	  
/* Кнопка закрытия внутри мобильного меню */
.mobile-nav .menu-close{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0,0,0,0.06);
  color: #333;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2; /* поверх ссылок меню */
}
.mobile-nav .menu-close:hover { background: rgba(0,0,0,0.1); }
.mobile-nav .menu-close:active { transform: scale(0.98); }

/* важно: меню кликабельно только когда открыто */
.mobile-nav { pointer-events: none; visibility: hidden; }
.mobile-nav.show { pointer-events: auto; visibility: visible; }
	  
	  
	  

/* Сетка с областями: desktop/tablet — logo | nav | actions | burger */
.site-header .header-row{
  display: grid; align-items: center; gap: 16px; min-height: 56px;
  grid-template-areas: "logo nav actions burger";
  grid-template-columns: auto 1fr auto auto;
}

.site-header a.logo{ grid-area: logo; display: inline-block; }
.site-header .logo img{ height:45px; width:auto; display:block; }

.site-header .desktop-nav{ 
	grid-area: nav;
	justify-self: center;
    display:flex;
	align-items:center;
	/*gap: clamp(12px, 2vw, 28px);*/
	gap: clamp(12px, 2vw, 18px);
	font-weight: 450;
}
.site-header .desktop-nav .nav-link{
  display:inline-flex;
  align-items:center;
  /*gap:8px;*/
  gap:5px;
  color:#333;
  text-decoration:none;
  /*padding:6px 4px;*/
  padding:4px 2px;	
  transition: transform .18s ease, opacity .18s ease;
  white-space:nowrap;
	line-height: 0.9;     /* “высота строки” внутри пункта, если текст переносится */
}
.site-header .desktop-nav .nav-link:hover{ color:mediumvioletred; transform:scale3d(1.06,1.06,1); }
.site-header .desktop-nav .nav-link.active{ color:mediumvioletred; }

.site-header .icon-group{ grid-area: actions; justify-self:end;
  display:inline-flex; align-items:center; gap:0px;
}
/* Корзина */
.site-header .icon-group a[aria-label="Корзина"] { margin-right: -2px; margin-top: 8px;}

/* Избранное */
.site-header .icon-group a[aria-label="Избранное"] { margin-right: 3px; margin-top: 8px; }

/* WhatsApp (можно дать отступ слева, чтобы отлип от края) */
.site-header .icon-group a[aria-label="WhatsApp"] { margin-left: 1px; }	  
	  
	  

.site-header .icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:35px; height:35px; border-radius:10px; text-decoration:none; color:#2c3e50;
  transition: background .18s ease;
}
	  
.site-header .icon-btn:hover{ background: none; transform: none; }
.site-header .count-badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding: 0 6px;
  background:#e67e22; color:#fff; font-size:10px; line-height:18px; border-radius:50%; text-align:center;
}


	  
#favoriteCount.count-badge {
  background: #e74c3c;
  color: #fff;
}	  


/* Бургер (по умолчанию скрыт) */
.site-header .burger{
  grid-area: burger;
  display:none; width:42px; height:42px; border:0; border-radius:10px;
  background:transparent; cursor:pointer; position:relative;
}
.site-header .burger span{
  position:absolute; left:9px; right:9px; height:3px; background:#333; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.site-header .burger span:nth-child(1){ top:12px; }
.site-header .burger span:nth-child(2){ top:20px; }
.site-header .burger span:nth-child(3){ top:28px; }
.site-header .burger[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.site-header .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.site-header .burger[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }
	  
	  
	  
/* === ИКОНКИ СПРАВА — стиль как в старом шаблоне === */

/* Размер и цвет самих значков */
.site-header .icon-btn i { font-size: 20px; }

/* Корзина: цвет как раньше */
.site-header .icon-btn i.fa-shopping-cart { color: #2c3e50; }

/* Избранное: красное сердце как раньше */
.site-header .icon-btn i.fa-heart,
.site-header .icon-btn i.far.fa-heart,
.site-header .icon-btn i.fas.fa-heart { color: #e74c3c; }

/* Бейджи-счётчики (и для корзины, и для избранного) как в старом файле */
 /*.site-header .count-badge{
  top: -8px;
  right: -10px;
  font-size: 12px;
  padding: 1.5px 6.6px 1px 6.6px;  
  min-width: auto;
  height: auto;
  line-height: 16px;
  border-radius: 50%;
  background: #e67e22;  
}*/

	  

/* WhatsApp — та же “кнопка” на самом значке */
.site-header .icon-btn i.fa-whatsapp{
  color: #fff;
  background: linear-gradient(to bottom left, green, green, green, white);
  border: 1px solid wheat;
  border-radius: 7px;
  box-shadow: 1px 1px 2px #000000;
  padding: 4px 5px 4px 5px;             /* как было */
  font-size: 20px;         /* как было в старом #WAPP .fab */
  	
}

/* Ховер WhatsApp — как раньше (чуть прозрачнее) */
.site-header .icon-btn:hover i.fa-whatsapp { opacity: 0.7; }

/* Чтобы hover-фон у .icon-btn не перекрывал градиент WhatsApp */
@supports selector(:has(*)) {
  .site-header .icon-btn:has(.fa-whatsapp) { background: transparent; box-shadow: none; }
  .site-header .icon-btn:has(.fa-whatsapp):hover { background: transparent; transform: none; }
}
	  
	  
	  
	  
	  
	  

/* ===== Планшеты (>=769px и <=1199px): как на desktop — логотип, затем nav, справа иконки. Бургер скрыт */
@media (min-width: 769px) and (max-width: 1199px){
  /*.site-header{ padding:5px 12px; }*/
	.site-header{ padding:3px 10px; }
  .site-header .header-row{
    grid-template-areas: "logo nav actions burger";
    grid-template-columns: auto 1fr auto auto;
  }
    .site-header .desktop-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;         /* центрируем по ширине */
    /*gap: 10px 18px; */                 /* вертикальный/горизонтальный зазоры */
	gap: 5px 10px;	
	font-size: 13px; 	
  }
	
  .site-header .icon-group { gap: 0; }

  .site-header .desktop-nav .nav-link{
    flex: 0 1 calc(33.333% - 12px);  /* 3 элемента на строку */
    justify-content: center;         /* текст/иконку по центру ячейки */
    text-align: center;
    white-space: nowrap;             /* не переносим слова внутри пункта */
  }
  .site-header .burger{ display:none; }
}

/* ===== Мобильные (<=768px): слева бургер, по центру логотип, справа иконки; nav скрыт */
@media (max-width: 768px){
  /*.site-header{ padding:5px 10px; }*/
    .site-header{ padding:2px 5px; }
  .site-header .header-row{
    grid-template-areas: "burger logo actions";
    grid-template-columns: auto 1fr auto;
  }

  .site-header .desktop-nav{ display:none; }
  .site-header .burger{ display:inline-flex; }
  .site-header a.logo{ justify-self:center; }     /* логотип по центру */
  .site-header .icon-group{ justify-self:end; gap:0px; } /* иконки справа, немного ближе друг к другу */
}

/* Предотвращаем «дёрганье» при быстрой подмене DOM */
#siteHeader{ contain: layout style; }

/* ============== ХЛЕБНЫЕ КРОШКИ (фикс для mobile/tablet) ============== */
/* === BREADCRUMBS: фикс специфичности и mobile/tablet === */
:root { --breadcrumbs-color: #555; }

body .breadcrumbs{
  font-size:14px;
  margin:10px 30px 0 30px;
  white-space:nowrap;
  overflow:auto;              /* чтобы не ломалось при длинных путях */
}

body .breadcrumbs a:link,
body .breadcrumbs a:visited,
body .breadcrumbs a:active,
body .breadcrumbs a,
body .breadcrumbs a:focus{
  color: var(--breadcrumbs-color) !important;
  text-decoration: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

body .breadcrumbs a:hover{
  text-decoration: underline !important;
}

body .breadcrumbs span{ margin:0 8px; }

/* планшеты */
@media (max-width: 1024px){
  body .breadcrumbs{
    font-size:13px;
    margin:8px 18px 0 18px;
  }
}

/* мобильные */
@media (max-width: 768px){
  body .breadcrumbs{
    font-size:13px;
    margin:6px 12px 0 12px;
  }
}

/* Конец хлебных крошек */


/* ANGELICA в мобильном меню: размер логотипа */
.mobile-nav .angelica-logo{
  display:inline-block;
  height:26px;   /* при желании 28–30px */
  width:auto;
  margin-left: -5px;	
  vertical-align:middle;
  object-fit:contain;
}

/* Отключаем hover-эффекты в мобильном меню */
@media (hover:none){
  .mobile-nav a:hover,
  .mobile-nav a:hover .angelica-logo{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }
}