body {
    font-family: 'GOTHIC';
    height:600px;
}

@font-face {
    font-family: 'GOTHIC';
	src: url(../fonts/gothic.ttf);
    font-weight: normal;
}


.h1, h1 {
        font-size: 1.8rem;
    }
    
    .h2, h2 {
    font-size: 1.5rem
    }
    
    .h3, h3 {
    font-size: 1.3rem;
    }

 /*центровка*/
    
    .cent1 {
        text-align: center;
    }
    
    .cent2 {
        text-align: justify;
    }
    
    .cent3 {
        float: none;
        margin: 0 auto;
    }
    
    
    /*растягивающая картинка*/
    
    article img {
        max-width: 100%;
        height: auto;
        /*width: auto;*/
        padding: 0 7px 7px 7px;
    }
    
    iframe {
        max-width: 100%;
    }
    
    
    .navv1 .dropdown:hover > .dropdown-menu {
        display: block;
        left: 50px;
    }
    
    .dropdown-menu-right {
  right: auto;
  left: 60px;
}
    
    .fr-name {
    display: none;
    }
    
    .container-fluid {
        padding-left: 1px;
        padding-right: 1px;
    }

/*менюшка*/

.men1 {
border-bottom: 1px solid #E2DBC9;
}

.navbar {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}


/* Общий стиль кнопки */
.navbar-toggler {
  border: 1px solid white !important;
  padding: 0.25rem 0.5rem;
}

/* Стиль иконки "гамбургера" */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Активное состояние (если используется JS-класс .collapsed или .show) */
.navbar-toggler:not(.collapsed) {
  border-color: white !important;
}

/* На всякий случай — если Bootstrap меняет иконку при открытии */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/*шапка*/

.sha1 {
font-size: 2.8rem; 
padding-bottom: 30px;
padding-top: 10px
}

.sha2 {
padding-top: 40px
}

.sha3 {
padding-top: 10px;
}

.sha4 {
padding-bottom: 50px;
}

.image-container {
      border-top-left-radius: 50% 25%; /* Закругление только сверху */
      border-top-right-radius: 50% 25%;
      display: inline-block; /* Чтобы контейнер не растягивался */
      
    }

    .rounded-top-half {
    border-top: 2px solid #7A6D63;
    border-left: 2px solid #7A6D63;
    border-right: 2px solid #7A6D63;
  padding: 5px;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-top-left-radius: 50% 25%; /* Закругление картинки, чтобы совпало с контейнером */
      border-top-right-radius: 50% 25%;
    }
    
.hero-img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

   

    /* === Контакты === */
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .contact-item i {
      width: 24px;
      text-align: center;
      margin-right: 12px;
      color: #6c757d;
    }
    
    .color-btn:hover,
.color-btn.active {
  filter: brightness(0.9);
}
    

/* Принудительно задаём белый цвет для ВСЕХ ссылок в меню kon8 */
.kon8 .nav-link,
.kon8 .nav-link:not(.active) {
  color: #ffffff !important;
  transition: color 0.2s ease;
}

/* Наведение — жёлтый */
.kon8 .nav-link:hover {
  color: yellow !important;
}

/* Активный пункт — тоже белый (и, например, жирный) */
.kon8 .nav-link.active {
  color: #ffffff !important;
  font-weight: bold;
}

.social-link {
  display: inline-block !important;
  padding: 10px !important;
  margin: 10px !important;
  text-decoration: none !important;
  background: transparent !important; /* ← прозрачный фон */
  border: none !important;
}

.social-icon {
  font-size: 0.9rem !important;
  transform: scale(3.0);
  color: #1877F2 !important;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s !important;
  display: block !important;
  cursor: pointer !important;
  background: transparent !important; /* ← иконка тоже без фона */
}

a[href*="facebook"] .social-icon { color: #1877F2 !important; }
a[href*="instagram"] .social-icon { color: #E1306C !important; }
a[href*="youtube"] .social-icon { color: #FF0000 !important; }

/* Эффект при наведении — прозрачный фон + тень */
.social-link:hover {
  background: transparent !important; /* ← точно прозрачно */
}

.social-link:hover .social-icon {
  transform: scale(3.15) !important;
  box-shadow: 0 6px 16px rgba(3, 25, 61, 0.25) !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important; /* ← на всякий случай */
}


/* === Кнопки фильтра цветов === */
.color-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}
.color-btn {
    display: inline-block;
    padding: 2px 5px;
    margin: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: transparent;
    color: #333;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.color-btn.active,
.color-btn:hover {
    background-color: #03193D;
    color: white;
    border-color: #03193D;
}


/* === Карточки товаров === */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* ← это и есть отступы между карточками */
  margin-top: 20px;
  padding: 0 10px; /* небольшой отступ от краёв на мобильных */
}
.product {
  flex: 1 1 140px; /* растягивается, но не меньше 140px */
  max-width: 160px; /* ограничим максимум */
  height: 260px;
  padding: 12px;
  border: 1px solid #03193D;
  border-radius: 8px;
  background: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  box-sizing: border-box; /* чтобы padding не увеличивал высоту */
}
.product.show {
  display: flex;
}
.product:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(3, 25, 61, 0.25);
  z-index: 2;
  position: relative;
}

/* Цветной кружок над картинкой */
.product-color-sample {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 1px solid #ddd;
}

/* 🔑 Адаптивная картинка в карточке */
.product-image-wrapper {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}
.product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}


/* Название товара — адаптивное */
/* Название товара — по центру */
.product-name {
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
  width: 100%;
  height: 36px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: break-word;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center; /* ← центрируем текст */
}

@media (max-width: 480px) {
  .product {
    flex: 1 1 120px;
    max-width: 180px;
    height: 240px;
  }
  .product-name {
    font-size: 13px;
    height: 32px;
  }
  
  .color-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
  
  }
}
/* Модальное окно — адаптивный заголовок */
#productModal .modal-header {
  padding: 12px 16px 8px; /* отступы: сверху, по бокам, снизу */
  border: none;
}
#productModal .modal-title {
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0;
  /* Ограничиваем высоту, если очень длинное название */
  max-height: 80px; /* ~4 строки */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  padding: 0 8px; /* небольшой отступ по бокам */
}
#productModal .btn-close {
  margin-top: 4px;
}

@media (max-width: 576px) {
  #productModal .modal-title {
    font-size: 1rem;
    padding: 0 6px;
  }
  #productModal .modal-header {
    padding: 10px 12px 6px;
  }
}



/*футер*/

.fut1 {
    padding-top: 48px;
}

.fut2 a {
color: #fff;
text-decoration: none;
}

.fut3 {
padding-bottom: 48px;
}

.fut4 a:hover {
color: yellow;
}

.fut5 p {
margin-bottom: 0.2rem;
}

.fut6 {
padding-top: 10px;
}



 /* Скрыть контент для мобильных */
  .mobile-content {
    display: none;
  }

  /* Показывать контент для ПК только на десктопах */
  @media (min-width: 768px) {
    .desktop-content {
      display: block;
    }
    /* Скрыть мета-тег для мобильных версий на десктопах */
    .mobile-robots {
      display: none;
    }
  }

  /* Скрыть контент для ПК только на мобильных */
  @media (max-width: 767px) {
    .desktop-content {
      display: none;
    }
    .mobile-content {
      display: block;
    }
    /* Скрыть мета-тег для десктопных версий на мобильных */
    .desktop-robots {
      display: none;
    }
  }