*{
  margin: 0;
  padding: 0;
   scroll-behavior: smooth;
   font-family: "Roboto", sans-serif;

}


/* ТСТИЛИЗАЦИЯ КНОПКИ ОБРАТНОГО ЗВОНКА*/
.callback-bt {
  background:#38a3fd;
  border:2px solid #38a3fd;
  border-radius:50%;
  box-shadow:0 8px 10px rgba(56,163,253,0.3);
  cursor:pointer;
  height:68px;
  text-align:center;
  width:68px;
  position: fixed;
  right: 2%;
  bottom: 13%;
  z-index:9999;
  transition:.3s;
  -webkit-animation:hoverWave linear 1s infinite;
  animation:hoverWave linear 1s infinite;
}

.callback-bt .text-call{
  height:68px;
  width:68px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  z-index:9999;
}

.callback-bt .text-call span {
  text-align: center;
  color:#38a3fd;
  opacity: 0;
  font-size: 0;
  position:absolute;
  right: 4px;
  top: 22px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: opacity .3s linear;
  font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
  opacity: 1;
  font-size: 11px;
    z-index:9999;
}
.callback-bt:hover i {
  display:none;
    z-index:9999;
}

.callback-bt:hover {
  z-index:1;
  background:#fff;
  color:transparent;
  transition:.3s;
    z-index:9999;
}
.callback-bt:hover i {
  color:#38a3fd;
  font-size:40px;
  transition:.3s;
    z-index:9999;
}
.callback-bt i {
  color:#fff;
  font-size:34px;
  transition:.3s;
  line-height: 66px;
  transition: .5s ease-in-out;
  animation: shake 1.2s ease infinite;
    z-index:9999;
}

/* Волны */
@keyframes hoverWave {
  0% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),
               0 0 0 0 rgba(56,163,253,0.2),
               0 0 0 0 rgba(56,163,253,0.2)
  }
  40% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),
               0 0 0 15px rgba(56,163,253,0.2),
               0 0 0 0 rgba(56,163,253,0.2)
  }
  80% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),
               0 0 0 30px rgba(56,163,253,0),
               0 0 0 26.7px rgba(56,163,253,0.067)
  }
  100% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),
               0 0 0 30px rgba(56,163,253,0),
               0 0 0 40px rgba(56,163,253,0)
  }
}

/* Анимация трубки */
@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-30deg); }
  20% { transform: rotate(15deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(7deg); }
  50% { transform: rotate(-6deg); }
  60% { transform: rotate(5deg); }
  70% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
  90% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* --- Модальное окно --- */
.callback-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);

}

.callback-modal-content {
  position: relative;
  background: #fff;
  margin: 10% auto;
  flex-direction: column;
  padding:  10px;
  border-radius: 12px;
  width: 320px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.4s ease;

}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.callback-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 28px;
  color: #333;
  cursor: pointer;
    z-index:9999;
}

.callback-modal-img{
  position: absolute;
  width: 320px;
  height: 150px;
}

.buy_form_modal{
width: 320px;
height: 415px;
border: none;

}

/* Анимация загрузки */

#loader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
      }

      .button{
      height: 300px;
      width: 300px;
      background: rgba(148,0,211, 0);
      border-radius: 50%;
      border-top: 6px solid #9400D3;
      border-right: 2px solid transparent;
      border-bottom:none;
      border-left:none;
      animation: spinner5 1.5s linear infinite;
      }
      @keyframes spinner5 {
      to {
      transform: rotate(360deg);
      }
      }
.zagruzka_img{
position: absolute;
}

/* Полноэкранный просмотр */
.fullscreen {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen img {
    max-width: 90%;
    max-height: 90%;
}

.close, .prev, .next {
    position: absolute;
    color: #9400D3;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
}

.close {
    top: 20px;
    right: 30px;
}

.prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

/*Квноопка вверх  */
.scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width:50px;
    height: 50px;
    display: none; /* Скрываем кнопку по умолчанию */
    background-color: #404040;
    color: white;
    border: none;
    border-radius:5px;

    cursor: pointer;
    font-size: 35px;
    z-index: 7999;
}

.scrollToTopBtn:hover {
    background-color: #a957cc;
}


/* шапка */
.container_header{
  display: grid;
  background-position: center ;
  background-repeat: no-repeat;
  grid-template-columns: 300px 620px  ;
  grid-template-rows:  70px ;
  justify-content: center;
  grid-gap: 20px;
}

.logo{
width: 300px;
height: 70px;
 }

 .logo_img{
 padding-top:20px;
 }

 .search{
 width: 620px;
 height: 70px;
  }

.logo{
 grid-column:  1/ span 1;
 grid-row: 1/ span  1;
 }
.search{
 grid-column:  2/ span 1;
 grid-row: 1/ span  1;
 }

.menu{
  display: none;
}

/* Каталог товаров */





.container_katalog-tovarov{
  position: relative;
  padding: 20px 0px 0px 0px;
  display: grid;
  background-position: center ;
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-columns: 300px 620px ;
  grid-template-rows:  ;
  grid-gap: 20px;
  justify-content:center;

}


.container_catalog{
  width: 300px;
  height:50px;
}

.container_info_header{
  width: 620px;
  height:50px;
}






.container_catalog{
 grid-column:  1/ span 1;
 grid-row: 1/ span  1;
 }

 .container_info_header{
  grid-column:  2/ span 1;
  grid-row: 1/ span  1;
  }
  .container_info_header{
   grid-column:  2/ span 1;
   grid-row: 1/ span  1;
   }

.container_katalog{
  grid-column:  1/ span 2;
  grid-row: 2/ span  1;
  }


/* каталог кнопка  */
.container_catalog{
background-color: #404040;
  border-radius: 5px;

}
.catalog_button{
  width: 300px;
  height: 50px;
  text-decoration: none;

}
.container_catalog:hover{
background-color:  #535554;
}


.catalog_link{
  padding: 6px;
vertical-align: middle;
text-align: center;
text-decoration: none;
color:white;
font-size: 15px;
font-weight: bold;
 white-space: pre;
}

img.catalog_link {
width: 25px;
height: 25px;
}


/* информация на шапке */

.container_info_header{
  display: grid;
  background-position: center ;
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-columns:  100px 104px 104px 104px 104px 104px;
  grid-template-rows: 50px;
  justify-content:center;
  background-color: #9400D3;
  border-radius: 5px;
}
.info_header_link{
color: white;
position: relative;
top:15px;
}
.info_header_1,.info_header_2,
.info_header_3,.info_header_4{
font-size: 15px;
text-align: center;
text-decoration: none;
}

.info_header_1:hover,.info_header_2:hover,
.info_header_3:hover,.info_header_4:hover{
background-color: #a957cc;
}

.info_header_1:hover{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}




/* каталог  */

.container_katalog{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 940px;

}



/* Заголовок */
.katalog_zag_h1{
font-size: 27px;
padding: 10px 0px 10px 0px;

}



/* Хлебные крошки*/

.container_nav{
padding: 0px 0px 10px 0px;
position: relative;
color: white;
width: 920px;
height: 17px;
font-size: 15px;
}

.breadcrumbs {
  list-style: none;
  text-decoration: none;
  position:relative;
  left: ;
}

.breadcrumbs-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
}


.breadcrumbs-item:not(:last-child):after {
  content: ">";
  color:#404040;
  margin-left: 2px;
}

.breadcrumbs-link {
  color: #9400D3;
  text-decoration: none;
}

.breadcrumbs-link:hover{
color:#404040;
}

.breadcrumbs-link:not(span):hover {
  text-decoration: underline;
  text-decoration: none;
}

.breadcrumbs-link.current{
  color: #404040;
  justify-content: center;
}





/* товар */
.bestsellers_content{
  padding: 10px 0px 20px 0px;
display: flex;
flex-direction: row;
width: 940px;
 gap: 5px;
justify-content:center;
}

.product-gallery {
  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
  gap: 5px;
  max-width: 470px;
  height: 1060px;
overflow: hidden;
}

/* Вертикальная колонка миниатюр */
.product-gallery-thumbs {
  width: 90px;
  height:555px;
  display: flex;
  flex-direction: column;
overflow-y: scroll;
scrollbar-width: none;
gap:5px;
}

.thumb {
  min-width: 80px;
  min-height: 80px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
    border:2px solid white ;
  opacity: 0.6;
  /* transition: all 0.2s ease; */
  background-color: #dad8db ;
}

.thumb.active {
  border:2px solid #9400D3;
  opacity: 1;

}

.thumb:hover {
  opacity: 1;

}


.thumb img {
  width: 100%;
 height: 100%;
  object-fit: cover;
}


/*  Блок с большим изображением/видео  */

.product-gallery-main {
position: relative;
  border-radius: 8px;
  width:375px;
    height:555px;
    /* border:2px solid white ; */
}

.main-slide {
  display: none;
  width:375px;

}

.main-slide.active {
  display: block;
width:375px;

}

.main-media {
 width:375px;
  height: 555px;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 5px;
  object-fit: cover;
}

.video-horizont{
  width:375px;;
  height: 550px;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 5px;

}



/* Модальное окно */
.fullscreen-modal {
  display: none;
  position: fixed;
z-index: 8500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  position: relative;
  width: 100%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Кнопка закрытия */
.modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #9400D3;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
  transition: 0.3s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
    opacity: 0.8;
}

.modal-close:hover {
  color: #9400D3;
  transform: scale(1.1);
  opacity: 1;
}

/* Кнопки навигации */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background-color: #9400D3;
  border: none;
  padding: 20px 15px;
  cursor: pointer;
  font-size: 24px;
  transition: 0.3s;
  z-index: 1001;
  border-radius: 4px;
  opacity: 0.8;

}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-nav:hover {
  background-color: #9400D3;
  opacity: 1;
}

/* Контейнер слайдов */
.modal-slides-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Слайды в модальном окне */
.modal-slide {
  display: none;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.modal-slide.active {
  display: block;
}

.modal-slide img,
.modal-slide video {
  width: 100%;
  height: 90vh;
  border-radius: 8px;        /* ← авто-высота */
  max-width: none;      /* ← снимаем ограничения */
  max-height: none;     /* ← снимаем ограничения */
  object-fit: contain;
  border-radius: 8px;
}


.main-slide video {
  position: relative;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}


/* Индикатор слайда */
.slide-indicator {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  background-color: #9400D3;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 1001;
    opacity: 0.7;
}


/* отзывы */


.otzuvu{
  display: flex;
  flex-direction: column;
  width: 460px;
height: 144px;
}


.otzuv_content_img_video{
 width: 80px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
}

.container_otzuv-promezutok{
    padding: 15px 0px 0px 0px;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 460px;
  height: 80px;
  gap:10px;
  justify-content: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width:none;
  scrollbar-color: #9400D3 #f0f0f0;

}

/* Контейнер отзывов с позиционированием для стрелок */
.container_otzuv {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 380px;
    height: 80px;
    gap:10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width:none;
    scrollbar-color: #9400D3 #f0f0f0;
}

/* Скрываем скроллбар для Webkit браузеров */
.container_otzuv::-webkit-scrollbar {
    height: 4px;
}

.container_otzuv::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
}

.container_otzuv::-webkit-scrollbar-thumb {
    background: #9400D3;
    border-radius: 2px;
}

/* Кнопки навигации */
.otzuv-nav-btn {
    position: absolute;
    top: 55px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #9400D3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.otzuv-nav-btn:hover {
    opacity: 1;
    transform: translateY(-50%) ;
    background: #7a00b5;
}

.otzuv-nav-btn.prev {
    left: 0px;
}

.otzuv-nav-btn.next {
    right: 0px;
}

/* Полноэкранный просмотр (добавь этот блок) */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    flex-direction: column;
}

.fullscreen-media-container {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.fullscreen-media-container img,
.fullscreen-media-container video {
    width: 100%;
    height: 90vh;
    max-width: none;      /* ← снимаем ограничения */
    max-height: none;     /* ← снимаем ограничения */
    border-radius: 8px;
    object-fit: contain;
}

/* Кнопки управления полноэкранным режимом */
.fs-control-btn {
    position: absolute;
    background: #9400D3;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index:951;
        opacity: 0.8;
}

.fs-control-btn:hover {
    background: #9400D3;

    opacity: 1;

}

.fs-close-btn {
    top: 20px;
    right: 20px;
}

.fs-prev-btn {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.fs-next-btn {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.fs-media {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* Индикатор текущего медиа */
.media-counter {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  background-color:#9400D3;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 1001;
    opacity: 0.7;
}







/* Вам может понравиться */
.container_vam_mozhet_ponravitsa {
    width:460px;
    padding: 15px 0px 10px 0px;
}

.vam_mozhet_ponravitsa_zag_h2 {
    text-align: center;
    font-size: 24px;
    color: #333;
}

/* Контейнер для 3 карточек */
.vam_mozhet_ponravitsa_content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  padding: 15px 0px 0px 0px;
}

/* Карточка товара */
.vam_mozhet_ponravitsa_link{
    width: 135px;
    height: 280px;
    background: white;
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: transform 0.8s ease;
    display: flex;
    flex-direction: column;
}

.vam_mozhet_ponravitsa_link:hover{
  transform: scale(0.95);
  transition: transform 0.8s ease;
}

/* Изображение */
.vam_mozhet_ponravitsa_link_cont {
    width: 135px;
    height: 180px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.vam_mozhet_ponravitsa_link_cont img {
    width: 135px;
  height: 160px;
    object-fit:  cover;
    transition: transform 0.4s ease;
}



.vam_mozhet_ponravitsa_link_img{

}

/* Описание */
.vam_mozhet_ponravitsa_link_discripription {

    margin-bottom: 15px;
    text-align: center;
}

.link_discripription_name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.link_discripription_price {
    font-size: 13px;
    font-weight: bold;
}

.link_discripription_price s {
    color: #888888;
    font-size: 13px;

}

.link_discripription_price b {
    color: #388E3C;
}

/* Кнопка */
.vam_mozhet_ponravitsa_link_buttom {
    margin-top: auto;
}

.link_buttom {
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #9400D3 0%, #7a00b5 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.link_buttom:hover {
    background: linear-gradient(135deg, #a520e3 0%, #8a10c5 100%);

    box-shadow: 0 4px 12px rgba(148, 0, 211, 0.3);
}

.link_buttom_but {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    text-align: center;
    padding: 12px;
}




/* Описание и характеристики и прочее */
.container_info{
display: flex;
flex-direction: column;
width: 460px;
}



.katalog_zag_h2_info{
  font-size: 27px;
  text-align: center;
}



/* Хорактеристики и прочее */

/* Контейнер аккордеона */
.product-accordion {
    width: 440px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

/* Каждый элемент аккордеона */
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
    border-bottom: none;
}

/* Заголовок (кнопка) */
.accordion-header {
    width: 100%; /* Занимает всю ширину родителя */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #f9f9f9;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: background-color 0.3s ease;
    box-sizing: border-box; /* Важно! */
}

.accordion-header:hover {
    background-color: #a957cc;
}

/* Иконка стрелки */
.accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Поворот стрелки при открытом состоянии */
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* Контент (скрыт по умолчанию) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: white;
    width: 100%; /* Занимает всю ширину */
    box-sizing: border-box; /* Важно! */
}

/* Контент при открытом состоянии */
.accordion-item.active .accordion-content {
    max-height: 1000px;
}

/* Стили для внутреннего содержимого */
.accordion-content > div {
    padding: 20px;
    width: 100%; /* Занимает всю ширину .accordion-content */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* Стили для таблицы */
.characteristics {
    width: 100%; /* Таблица на всю ширину контейнера */
    border-collapse: collapse;
    table-layout: fixed; /* Фиксированная ширина колонок */
}

.characteristics td {
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    vertical-align: top; /* Выравнивание по верху */
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word; /* Современный аналог */
}

.tabl_horiz_1 {
    font-weight: bold;
    width: 40%; /* Первая колонка занимает 40% ширины */
    padding-right: 20px;
}

.tabl_horiz_2 {
    width: 60%; /* Вторая колонка занимает 60% ширины */
}

.tabl_horiz_bottom {
    font-size: 14px;
    color: #666;
    font-style: italic;
    padding: 12px 8px;
    text-align: center;
}





.delivery p, .seller_details address {
    margin: 0;
    line-height: 1.5;
}





/* Стили селектов */
.custom-selects {
padding: 0px  0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 460px;
  align-items: center;
justify-content: center;
}


/* Выбор цвета */
.color-selector {
    /* margin-bottom: 0px; */
    width: 460px;
}

.color-selector-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
}

.color-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px; /* Увеличил gap для лучшего вида */
    width: 460px;
    justify-content: center;
}

.color-option {
    display: flex;
    flex-direction: column; /* Текст ПОД цветом */
    align-items: center;
    gap: 8px;
      width: 70px;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.color-option:hover {
    background-color: #f5f5f5;
}

.color-option.selected {
    background-color: #f0e6f7;

}

/* Кружочки цвета БЕЗ бордера по умолчанию */
.color-circle_1,
.color-circle_2,
.color-circle_3,
.color-circle_4{
    width: 40px; /* Немного больше */
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent; /* Прозрачный бордер */
    transition: all 0.2s ease;
        border: 3px solid gray;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-circle-img{
width: 40px;
height: 40px;
  border-radius: 50%;

}

.color-circle_1 {
    /* background-color: #0ab259; */
}

.color-circle_2 {
    /* background-color: #fc5997; */
}

.color-circle_3 {
    /* background-color: #1f272a; */
}

/* Бордер появляется ТОЛЬКО при выборе */
.color-option.selected .color-circle_1,
.color-option.selected .color-circle_2,
.color-option.selected .color-circle_3,
.color-option.selected .color-circle_4  {
    border-color: #9400D3;
    box-shadow: 0 0 0 3px rgba(148, 0, 211, 0.2);
    transform: scale(1.05); /* Легкое увеличение при выборе */
}

.color-name {
    font-size: 14px;
    color: #333;
    text-align: center;
}

.color-option.selected .color-name {
    color: #9400D3;
    font-weight: 600;
}





/* Размер */
.custom-select {
  width: 350px;
  position: relative;
  user-select: none;

}

.select-trigger {
  text-align: center;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
}

.select-trigger:active {

}

.options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  padding-top: 6px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: none;
  flex-direction: column;
align-items: center;
text-align:center;
  z-index: 10;
}

.option {
  padding: 10px;
  cursor: pointer;
}

.option-faq{
padding-bottom: 10px;
}

.option:hover {
  background: #eee;
    width: 328.5px;
}

.custom-select.open .options {
  display: flex;
}






/* кнопка покупки */
.container_buy_form{
display: flex;
flex-direction:row;

  justify-content: center;
}


.buy_form_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 440px;
  height: 460px;
  box-shadow: 1px 2px 6px #9e9f9f;
  border-radius: 5px;

}

.buy_form{
width: 405px;
height: 430px;
border: none;
}

.kurs{
padding: 0px 0px 15px 0px;
font-size: 15px;
text-align: center;
}

.tovar-no{
  font-size: 35px;
}



/*наложенный платеж*/
.nalozhennyy-platezh{
  margin: 20px  20px 0px 20px ;
display: flex;
flex-direction:row;
justify-content: center;
}

.nalozhennyy-platezh-content{
  display: flex;
  flex-direction: row;
    justify-content: center;
  width: 440px;
  height: 100px;
  box-shadow: 1px 2px 6px #9e9f9f;
    border-radius: 5px;


}

.nalozhennyy-platezh-img{
display: block;
width: 100px;
height: 100px;
  border-radius: 5px;
}

.nalozhennyy-platezh-text{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-weight: bold;
font-size: 22px;
max-width: 240px;
min-width: 240px;
}

.nalozhennyy-platezh-text_bottom{
font-size: 14px;
font-weight:  normal;
}






/* Стили для счётчика заказов */
.real_time_shopping {
  padding: 20px 0px 0px 0px;
  display: flex;
  justify-content: center;
  width: 460px;
  font-family: Arial, sans-serif;
}

.orders-counter {
  width: 400px;
  background: linear-gradient(135deg, #fff5f5, #ffecec);
  border: 2px solid #ff6b6b;
  border-radius: 5px;
  padding: 15px 5px 15px 5px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
  position: relative;
  overflow: hidden;
}



.counter-icon {
  font-size: 40px;
  margin-bottom: 8px;
  animation: pulse 2s infinite;
}

.counter-text {
  margin: 10px 0;
}

.counter-label {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}

.counter-number {
  font-size: 32px;
  font-weight: bold;
  color: #ff6b6b;
  margin: 0 5px;
  display: inline-block;
  min-width: 40px;
  transition: all 0.3s ease;
}

.counter-unit {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.counter-subtext {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

/* Анимация пульсации */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Анимация появления нового числа */
@keyframes numberPop {
  0% { transform: scale(1); color: #ff6b6b; }
  50% { transform: scale(1.3); color: #ff4757; }
  100% { transform: scale(1); color: #ff6b6b; }
}





 /*футер*/
.container_footer{
   position: relative;
 display: grid;
 background-position: center ;
 background-repeat: no-repeat;
 background-size: cover;
 grid-template-columns:100%;
 grid-template-rows:200px 200px 20px;
 justify-content:center;

}


.footer_mail{
  top:0px;
   position: relative;
 display: grid;
 background-position: center ;
 background-repeat: no-repeat;
 background-size: cover;
 grid-template-columns:;
 grid-template-rows: 198px;
 justify-content:center;
 background-color:#9400D3;

}



.container_footer_contnent{
  top:20px;
   position: relative;
 display: grid;
 background-position: center ;
 background-repeat: no-repeat;
 background-size: cover;
 grid-template-columns:320px 320px ;
 grid-template-rows:200px;
 justify-content:center;
}

.foter_info_zag{
padding-top: 10px;
color: #797878;
}

.info_foter_link{
text-decoration: none;
color: #404040;

}
.info_foter{
padding-top: 15px;
}

.social_network_content{
padding-top: 10px;
}
.social_network{
  color: #404040;
text-decoration: none;
 vertical-align: middle;
}
.prava_zashishenu{
  top:20px;
   position: relative;
font-size: 15px;
text-align: center;
}
.politika-konfidencialnosti{
  color: black;
  text-decoration:underline solid ;
   text-underline-offset: 4px;
}

.footer_mail{
grid-column:  1/ span 1;
grid-row: 1/ span  1;
}
.foter_info{
grid-column:  1/ span 1;
grid-row: 1/ span  1;
}
.social_network_foter{
 grid-column:  2/ span 1;
 grid-row: 1 span  1;
 }



@media (max-width:946px) {
  *{
    margin: 0;
    padding: 0;
     scroll-behavior: smooth;
     font-family: "Roboto", sans-serif;

  }




  /* шапка */
  .container_header{
    display: grid;
    background-position: center ;
    background-repeat: no-repeat;
    grid-template-columns: 300px 320px  ;
    grid-template-rows:  70px ;
    justify-content: center;
    grid-gap: 20px;
  }

  .logo{
  width: 300px;
  height: 70px;
   }

   .logo_img{
   padding-top:20px;
   }

   .search{
   width: 320px;
   height: 70px;
    }

  .logo{
   grid-column:  1/ span 1;
   grid-row: 1/ span  1;
   }
  .search{
   grid-column:  2/ span 1;
   grid-row: 1/ span  1;
   }

   .menu{
     display: none;
   }

  /* Каталог товаров */





  .container_katalog-tovarov{
    position: relative;
      padding: 20px 0px 0px 0px;
    display: grid;
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns: 300px 320px ;
    grid-template-rows:  ;
    grid-gap: 20px;
    justify-content:center;

  }


  .container_catalog{
    width: 300px;
    height:50px;
  }

  .container_info_header{
    width: 320px;
    height:50px;
  }

  /* .container_katalog{
    width: 620px;
    height:1370px;
  } */




  .container_catalog{
   grid-column:  1/ span 1;
   grid-row: 1/ span  1;
   }

   .container_info_header{
    grid-column:  2/ span 1;
    grid-row: 1/ span  1;
    }
    .container_info_header{
     grid-column:  2/ span 1;
     grid-row: 1/ span  1;
     }



  /* каталог кнопка  */
  .container_catalog{
  background-color: #404040;
    border-radius: 5px;

  }
  .catalog_button{
    width: 300px;
    height: 50px;
    text-decoration: none;

  }
  .container_catalog:hover{
  background-color:  #535554;
  }


  .catalog_link{
    padding: 6px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color:white;
  font-size: 15px;
  font-weight: bold;
   white-space: pre;
  }

  img.catalog_link {
  width: 25px;
  height: 25px;
  }


  /* информация на шапке */

  .container_info_header{
    display: grid;
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns:  53px 53px 74px 74px 66px;
    grid-template-rows: 50px;
    justify-content:center;
    background-color: #9400D3;
    border-radius: 5px;
  }
  .info_header_link{
  text-decoration: none;
  color: white;
  position: relative;
  top:18px;
  }
  .info_header_1,.info_header_2,
  .info_header_3,.info_header_4{
  font-size: 11px;
  text-align: center;
  }

  .info_header_1:hover,.info_header_2:hover,
  .info_header_3:hover,.info_header_4:hover{
  background-color: #a957cc;
  }

  .info_header_1:hover{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }




  /* каталог  */

  .container_katalog{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 664px;
  }





  /* Заголовок */
  .katalog_zag_h1{
  font-size: 19px;
/* width: 640px; */
  }


  /* Хлебные крошки*/

  .container_nav{

  position: relative;
  color: white;
  width: 620px;
  height: 17px;
  font-size: 14px;
  }

  .breadcrumbs {
    list-style: none;
    text-decoration: none;
    position:relative;
    left: ;
  }

  .breadcrumbs-item {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px;
  }



  .breadcrumbs-item:not(:last-child):after {
    content: ">";
    color:#404040;
    margin-left: 2px;
  }

  .breadcrumbs-link {
    color: #9400D3;
    text-decoration: none;
  }

  .breadcrumbs-link:hover{
  color:#404040;
  }

  .breadcrumbs-link:not(span):hover {
    text-decoration: underline;
    text-decoration: none;
  }

  .breadcrumbs-link.current{
    color: #404040;
    justify-content: center;
  }




  /* Товар */

  .bestsellers_content{
    padding: 10px 0px 20px 0px;
  display: flex;
  flex-direction: row;
  width: 640px;
   gap: 5px;
  justify-content:center;
  }



  .product-gallery {
    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
    gap:5px;
    max-width: 320px;
      height: 830px;
  overflow: hidden;
  }

  /* Вертикальная колонка миниатюр */
  .product-gallery-thumbs {
    width: 55px;
    height:370px;
    display: flex;
    flex-direction: column;
  overflow-y: scroll;
  scrollbar-width: none;
  gap:5px;
  }

  .thumb {
    min-width: 50px;
    min-height: 50px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
      border:2px solid white ;
    opacity: 0.6;
    /* transition: all 0.2s ease; */
    background-color: #dad8db ;
  }

  .thumb.active {
    border:2px solid #9400D3;
    opacity: 1;

  }

  .thumb:hover {
    opacity: 1;

  }


  .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /*  Блок с большим изображением/видео  */

  .product-gallery-main {
  position: relative;
    border-radius: 8px;
    width:250px;
      height:370px;
      /* border:2px solid white ; */
  }

  .main-slide {
    display: none;
      width:250px;

  }

  .main-slide.active {
    display: block;
    width:250px;

  }

  .main-media {
    width:250px;
      height:370px;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 5px;
    object-fit: cover;
  }

  .video-horizont{
    width:250px;
      height:370px;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 5px;

  }



  /* Модальное окно */
  .fullscreen-modal {
    display: none;
    position: fixed;
  z-index: 8500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .modal-content {
    position: relative;
    width: 100%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Кнопка закрытия */
  .modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #9400D3;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: 0.3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
  }

  .modal-close:hover {
    color:#9400D3;
    transform: scale(1.1);
    opacity: 1;
  }

  /* Кнопки навигации */
  .modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background-color:#9400D3;
    border: none;
    padding: 20px 15px;
    cursor: pointer;
    font-size: 24px;
    transition: 0.3s;
    z-index: 1001;
    border-radius: 4px;
    opacity: 0.8;

  }

  .modal-prev {
    left: 5px;
  }

  .modal-next {
    right: 5px;
  }

  .modal-nav:hover {
    background-color: #9400D3;
    opacity: 1;
  }

  /* Контейнер слайдов */
  .modal-slides-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Слайды в модальном окне */
  .modal-slide {
    display: none;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
  }

  .modal-slide.active {
    display: block;
  }

  .modal-slide img,
  .modal-slide video {
    width: 100%;
    height: 90vh;
    border-radius: 8px;        /* ← авто-высота */
    max-width: none;      /* ← снимаем ограничения */
    max-height: none;     /* ← снимаем ограничения */
    object-fit: contain;
    border-radius: 8px;
  }


  .main-slide video {
    position: relative;
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
    z-index: 2;
  }


  /* Индикатор слайда */
  .slide-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    background-color: #9400D3;
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 1001;
    opacity: 0.7;
  }

  /* отзывы */


  .otzuvu{
    display: flex;
    flex-direction: column;
    width: 305px;
    height: 100px;
  }


  .otzuv_content_img_video{
  max-width: 50px;
    max-height: 50px;
    border-radius: 5px;
    object-fit: cover;
  }

  .container_otzuv-promezutok{
      padding: 15px 0px 0px 0px;
    position: relative;
    display: flex;
    flex-direction: row;
    width: 305px;
    height: 50px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width:none;
    scrollbar-color: #9400D3 #f0f0f0;

  }

  /* Контейнер отзывов с позиционированием для стрелок */
  .container_otzuv {
      position: relative;
      display: flex;
      flex-direction: row;
     width: 240px;
      height: 50px;
      gap:5px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width:none;
      scrollbar-color: #9400D3 #f0f0f0;
  }

  /* Скрываем скроллбар для Webkit браузеров */
  .container_otzuv::-webkit-scrollbar {
      height: 4px;
  }

  .container_otzuv::-webkit-scrollbar-track {
      background: #f0f0f0;
      border-radius: 2px;
  }

  .container_otzuv::-webkit-scrollbar-thumb {
      background: #9400D3;
      border-radius: 2px;
  }


  /* Кнопки навигации */
  .otzuv-nav-btn {
      position: absolute;
      top: 40px;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background: #9400D3;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.3s ease;
      opacity: 0.8;
  }



  .otzuv-nav-btn:hover {
      opacity: 1;
      transform: translateY(-50%) ;
      background: #7a00b5;
  }

  .otzuv-nav-btn.prev {
      left: 0px;
  }

  .otzuv-nav-btn.next {
      right: 0px;

  }

  /* Полноэкранный просмотр (добавь этот блок) */
  .fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9000;
      flex-direction: column;
  }

  .fullscreen-media-container {
      max-width: 100%;
      max-height: 100%;
      position: relative;
  }

  .fullscreen-media-container img,
  .fullscreen-media-container video {
      width: 100%;
      height: 90vh;
      max-width: none;      /* ← снимаем ограничения */
      max-height: none;     /* ← снимаем ограничения */
      border-radius: 8px;
      object-fit: contain;
  }

  /* Кнопки управления полноэкранным режимом */
  .fs-control-btn {
      position: absolute;
      background: #9400D3;
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index:951;
      opacity: 0.8;

  }

  .fs-control-btn:hover {
      background: #9400D3;
      opacity: 1;

  }

  .fs-close-btn {
      top: 20px;
      right: 20px;
  }

  .fs-prev-btn {
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
  }

  .fs-next-btn {
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
  }

  .fs-media {
      max-width: 90vw;
      max-height: 80vh;
      width: auto;
      height: auto;
      border-radius: 8px;
      object-fit: contain;
  }

  /* Индикатор текущего медиа */
  .media-counter {
    position: absolute;
      bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    background-color: #9400D3;
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 1001;
    opacity: 0.7;
  }







  /* Вам может понравиться */
  .container_vam_mozhet_ponravitsa {
      width:460px;
      padding: 15px 0px 10px 0px;
  }

  .vam_mozhet_ponravitsa_zag_h2 {
      text-align: center;
      font-size: 24px;
      color: #333;
  }

  /* Контейнер для 3 карточек */
  .vam_mozhet_ponravitsa_content{
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    padding: 15px 0px 0px 0px;
  }

  /* Карточка товара */
  .vam_mozhet_ponravitsa_link{
      width: 135px;
      height: 280px;
      background: white;
      border-radius: 12px;
      padding: 5px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08);
      transition: transform 0.8s ease;
      display: flex;
      flex-direction: column;
  }

  .vam_mozhet_ponravitsa_link:hover{
    transform: scale(0.95);
    transition: transform 0.8s ease;
  }

  /* Изображение */
  .vam_mozhet_ponravitsa_link_cont {
      width: 135px;
      height: 180px;
      overflow: hidden;
      border-radius: 5px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
  }



  .vam_mozhet_ponravitsa_link_cont img {
      width: 135px;
    height: 160px;
      object-fit:  cover;
      transition: transform 0.4s ease;
  }



  .vam_mozhet_ponravitsa_link_img{

  }

  /* Описание */
  .vam_mozhet_ponravitsa_link_discripription {

      margin-bottom: 15px;
      text-align: center;
  }

  .link_discripription_name {
      font-size: 12px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.3;
      max-height: 40px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }

  .link_discripription_price {
      font-size: 13px;
      font-weight: bold;
  }

  .link_discripription_price s {
      color: #888888;
      font-size: 13px;

  }

  .link_discripription_price b {
      color: #388E3C;
  }

  /* Кнопка */
  .vam_mozhet_ponravitsa_link_buttom {
      margin-top: auto;
  }

  .link_buttom {
      width: 100%;
      height: 40px;
      background: linear-gradient(135deg, #9400D3 0%, #7a00b5 100%);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
  }

  .link_buttom:hover {
      background: linear-gradient(135deg, #a520e3 0%, #8a10c5 100%);

      box-shadow: 0 4px 12px rgba(148, 0, 211, 0.3);
  }

  .link_buttom_but {
      color: white;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      width: 100%;
      text-align: center;
      padding: 12px;
  }




  /* Описание и характеристики и прочее */
  .container_info{
  display: flex;
  flex-direction: column;
  width: 310px;
  }



  .katalog_zag_h2_info{
    font-size: 27px;
    text-align: center;
  }



  /* Хорактеристики и прочее */

  /* Контейнер аккордеона */
  .product-accordion {
      width: 290px;
      margin: 20px auto;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      overflow: hidden;
  }

  /* Каждый элемент аккордеона */
  .accordion-item {
      border-bottom: 1px solid #e0e0e0;
  }

  .accordion-item:last-child {
      border-bottom: none;
  }

  /* Заголовок (кнопка) */
  .accordion-header {
      width: 100%; /* Вместо 290px - занимает всю ширину родителя */
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background-color: #f9f9f9;
      border: none;
      cursor: pointer;
      text-align: left;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      transition: background-color 0.3s ease;
      box-sizing: border-box; /* Важно! */
  }

  .accordion-header:hover {
      background-color: #a957cc;
  }

  /* Иконка стрелки */
  .accordion-icon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
  }

  /* Поворот стрелки при открытом состоянии */
  .accordion-item.active .accordion-icon {
      transform: rotate(180deg);
  }

  /* Контент (скрыт по умолчанию) */
  .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      background-color: white;
      width: 100%; /* Занимает всю ширину */
      box-sizing: border-box; /* Важно! */
  }

  /* Контент при открытом состоянии */
  .accordion-item.active .accordion-content {
      max-height: 1000px;
  }

  /* Стили для внутреннего содержимого */
  .accordion-content > div {
      padding: 15px;
      width: 100%; /* Занимает всю ширину */
      box-sizing: border-box;
  }

  /* Таблица */
  .characteristics {
      width: 100%; /* На всю ширину контейнера */
      border-collapse: collapse;
      table-layout: fixed; /* Фиксируем ширину колонок */
  }

  .characteristics td {
      font-size: 13px;
      padding: 10px 8px;
      border-bottom: 1px solid #eee;
      vertical-align: top; /* Выравниваем по верху */
      word-wrap: break-word; /* Перенос длинных слов */
      overflow-wrap: break-word; /* Современный вариант */
  }

  .tabl_horiz_1 {
      font-weight: bold;
      width: 40%; /* Первая колонка 40% */
      padding-right: 15px;
  }

  .tabl_horiz_2 {
      width: 60%; /* Вторая колонка 60% */
  }

  .tabl_horiz_bottom {
      font-size: 12px;
      color: #666;
      font-style: italic;
      padding: 10px;
      text-align: center;
      width: 100%;
  }

  .delivery p, .seller_details address {
      margin: 0;
      line-height: 1.5;
  }





  /* Стили селектов */
  .custom-selects {
  padding: 0px  0px 20px 0px;
    display: flex;
    flex-direction: column;

    gap: 10px;
    width: 310px;
    align-items: center;
  justify-content: center;
  }


  /* Выбор цвета */
  .color-selector {
      /* margin-bottom: 0px; */
      width: 310px;
  }

  .color-selector-title {
      font-size: 20px;
      text-align: center;
      margin-bottom: 10px;
      color: #333;
      font-weight: 600;
  }

  .color-options {
      display: flex;
      flex-direction: row;
          flex-wrap: wrap;
      gap: 5px; /* Увеличил gap для лучшего вида */
      width: 310px;
      justify-content: center;
  }

  .color-option {
      display: flex;
      flex-direction: column; /* Текст ПОД цветом */
      align-items: center;
      gap: 8px;
        width: 70px;
      cursor: pointer;
      padding: 10px 2px 5px 2px;
      border-radius: 5px;
      transition: all 0.2s ease;
  }

  .color-option:hover {
      background-color: #f5f5f5;
  }

  .color-option.selected {
      background-color: #f0e6f7;

  }

  /* Кружочки цвета БЕЗ бордера по умолчанию */
  .color-circle_1,
  .color-circle_2,
  .color-circle_3,
   .color-circle_4{
      width: 40px; /* Немного больше */
      height: 40px;
      border-radius: 50%;
        border: 3px solid gray;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .color-circle_1 {
      /* background-color: #0ab259; */
  }

  .color-circle_2 {
      /* background-color: #fc5997; */
  }

  .color-circle_3 {
      /* background-color: #1f272a; */
  }

  /* Бордер появляется ТОЛЬКО при выборе */
  .color-option.selected .color-circle_1,
  .color-option.selected .color-circle_2,
  .color-option.selected .color-circle_3,
    .color-option.selected .color-circle_4
  {
      border-color: #9400D3;
      box-shadow: 0 0 0 3px rgba(148, 0, 211, 0.2);
      transform: scale(1.05); /* Легкое увеличение при выборе */
  }

  .color-name {
      font-size: 12px;
      color: #333;
      text-align: center;
  }

  .color-option.selected .color-name {
      color: #9400D3;
      font-weight: 600;
  }





  /* Размер */
  .custom-select {
    width: 270px;
    position: relative;
    user-select: none;

  }

  .select-trigger {
    text-align: center;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }

  .select-trigger:active {

  }

  .options {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    padding-top: 6px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: none;
    flex-direction: column;
  align-items: center;
  text-align:center;
    z-index: 10;
  }

  .option {
    padding: 10px;
    cursor: pointer;
  }

  .option-faq{
  padding: 0px 10px 10px 10px
  }

  .option:hover {
    background: #eee;
      width: 248.5px;s
  }

  .custom-select.open .options {
    display: flex;
  }






  /* кнопка покупки */
  .container_buy_form{
  display: flex;
  flex-direction:row;
    justify-content: center;
  }


  .buy_form_content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 310px;
    height: 470px;
    box-shadow: 1px 2px 6px #9e9f9f;
    border-radius: 5px;

  }

  .buy_form{
  width: 290px;
  height: 430px;
  border: none;
  }

  .kurs{
  padding: 0px 5px 9px 5px;
  font-size: 13px;
  text-align: center;
  }

  .tovar-no{
    font-size: 28px;
  }



  /*наложенный платеж*/
  .nalozhennyy-platezh{
    margin: 20px  20px 0px 20px ;
  display: flex;
  flex-direction:row;
  justify-content: center;
  }

  .nalozhennyy-platezh-content{
    display: flex;
    flex-direction: row;
      justify-content: center;
    width: 310px;
    height: 70px;
    box-shadow: 1px 2px 6px #9e9f9f;
      border-radius: 5px;


  }

  .nalozhennyy-platezh-img{
  display: block;
  width: 70px;
  height: 70px;
    border-radius: 5px;
  }

  .nalozhennyy-platezh-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  max-width: 170px;
  min-width: 170px;
  }


  .nalozhennyy-platezh-text_bottom{
 font-size: 10px;
  font-weight:  normal;

  }


  /* Стили для счётчика заказов */
  .real_time_shopping {
    padding: 20px 0px 0px 0px;
    display: flex;
    justify-content: center;
    width: 310px;
    font-family: Arial, sans-serif;
  }

  .orders-counter {
    width: 400px;
    background: linear-gradient(135deg, #fff5f5, #ffecec);
    border: 2px solid #ff6b6b;
    border-radius: 5px;
    padding: 15px 5px 15px 5px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
    position: relative;
    overflow: hidden;
  }



  .counter-icon {
    font-size: 40px;
    margin-bottom: 8px;
    animation: pulse 2s infinite;
  }

  .counter-text {
    margin: 10px 0;
  }

  .counter-label {
    display: block;
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
  }

  .counter-number {
    font-size: 32px;
    font-weight: bold;
    color: #ff6b6b;
    margin: 0 5px;
    display: inline-block;
    min-width: 40px;
    transition: all 0.3s ease;
  }

  .counter-unit {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .counter-subtext {
    font-size: 11px;
    color: #888;
    margin-top: 8px;
    font-style: italic;
  }

  /* Анимация пульсации */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  /* Анимация появления нового числа */
  @keyframes numberPop {
    0% { transform: scale(1); color: #ff6b6b; }
    50% { transform: scale(1.3); color: #ff4757; }
    100% { transform: scale(1); color: #ff6b6b; }
  }













   /*футер*/
  .container_footer{

   position: relative;
    display: grid;
   background-position: center ;
    background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:100%;
   grid-template-rows:200px 200px 20px;
   justify-content:center;

  }


  .footer_mail{
    top:0px;
     position: relative;
   display: grid;
   background-position: center ;
   background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:;
   grid-template-rows: 198px;
   justify-content:center;
   background-color:#9400D3;

  }



  .container_footer_contnent{
    top:20px;
     position: relative;
   display: grid;
   background-position: center ;
   background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:300px 300px ;
   grid-template-rows:200px;
   justify-content:center;
  }

  .foter_info_zag{
  padding-top: 10px;
  color: #797878;
  }

  .info_foter_link{
  text-decoration: none;
  color: #404040;

  }
  .info_foter{
  padding-top: 15px;
  }

  .social_network_content{
  padding-top: 10px;
  }
  .social_network{
    color: #404040;
  text-decoration: none;
   vertical-align: middle;
  }
  .prava_zashishenu{
    top:20px;
     position: relative;
  font-size: 15px;
  text-align: center;
  }


  .footer_mail{
  grid-column:  1/ span 1;
  grid-row: 1/ span  1;
  }
  .foter_info{
  grid-column:  1/ span 1;
  grid-row: 1/ span  1;
  }
  .social_network_foter{
   grid-column:  2/ span 1;
   grid-row: 1 span  1;
   }
}







@media (max-width:654px) {
  *{
    margin: 0;
    padding: 0;
     scroll-behavior: smooth;
     font-family: "Roboto", sans-serif;

  }



  /* шапка */
  .container_header{
    display: grid;
    background-position: center ;
    background-repeat: no-repeat;
    grid-template-columns: 100% ;
    grid-template-rows:  70px ;
    justify-content: center;
    background-color: white;
border-bottom: 1px solid #9400D3;
  }

  .logo{
    position: relative;
    left: 80px;
  width: 180px;
  height: 40px;
   }

   .logo_img{

   width: 230px;
   height: 40px;
   }

   .search{
   width: 0px;
   height: 70px;
    }

  .logo{
   grid-column:  1/ span 1;
   grid-row: 1/ span  1;
   }
  .search{
   grid-column:  2/ span 1;
   grid-row: 1/ span  1;
   }


/* бургер меню */

      .menu{
   display: block;
   position: absolute;
   top: 15px;
   }


   .burger-checkbox {
     position: absolute;
     visibility: hidden;

   }

   .burger {
     position: relative;
     z-index: 1;
   left: 5px;
     top: 5px;
     cursor: pointer;
     display: block;
     position: relative;
     border: none;
     background: transparent;
     width: 40px;
     height: 26px;

   }

   .burger::before,
   .burger::after {
     content: '';
     left: 0;
     position: absolute;
     display: block;
     width: 40px;
     height: 4px;
     border-radius: 10px;
     background: #9400D3;
   }

   .burger::before {
     top: 0;
     box-shadow: 0 11px 0  #9400D3;
     transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
   }
   .burger::after {

     bottom: 0;
     transition: bottom .3s .15s, transform .3s;
   }
   .burger-checkbox:checked + .burger::before {
     top: 11px;
     transform: rotate(45deg);
     box-shadow: 0 6px 0 rgba(0,0,0,0);
     transition: box-shadow .15s, top .3s, transform .3s .15s;
   }
   .burger-checkbox:checked + .burger::after {
     bottom: 11px;
     transform: rotate(-45deg);
     transition: bottom .3s, transform .3s .15s;
   }

   .menu-list {
border-bottom: 1px solid #9400D3;
border-right: 1px solid #9400D3;
     top: 56px;
     right: 100%;
     position: absolute;
     display: grid;
     width: 225px;
     height: 405px;
     gap: 0px;
     margin: 0;
     background-color: white;
     list-style-type: none;
     transform: translateX(-100%);
     transition: .3s;
   justify-content: left;
   z-index:1;
   border-bottom-right-radius:  5px;
   }

   .menu-item {
     position: relative;
     display: block;
     color:#404040;
     font-size: 20px;
     height: 27px;
     width: 225px;
     padding-top: 5px;
      padding-bottom: 5px;
    border-bottom: 1px solid #e6e6e6;
     font-weight: ;
     text-decoration: none;
      background-color: white;
      vertical-align: middle;
   }



.menu-item_menu{
   height: 36px;
  position: relative;
  top: -2px;
  display: block;
  background-color: #f0eeee;
 padding-top: 5px;
  padding-bottom: 5px;
  height:27px ;
   width: 225px;
  color:#404040;
  font-size: 20px;
  font-weight: ;
  text-decoration: none;
    vertical-align: middle;

}

.menu-item_x{
background-color: #f0eeee;
height: 36px;
position: relative;
top: -2px;
display: block;
background-color: #ddbff1;
padding-top: 5px;
padding-bottom: 5px;
height:27px ;
width: 225px;
color:#404040;
font-size: 20px;
font-weight: ;
text-decoration: none;
 vertical-align: middle;
}
.menu-item_x2{
background-color: #f0eeee;
height: 36px;
position: relative;
top: -2px;
display: block;
background-color: #838383;
padding-top: 5px;
padding-bottom: 5px;
height:27px ;
width: 225px;
color:#404040;
font-size: 20px;
font-weight: ;
text-decoration: none;
 vertical-align: middle;
}

.menu-item-middle_1{
  vertical-align: middle;
  position: relative;
  left: 69px;
}
.menu-item-middle_2{
  vertical-align: middle;
  position: relative;
  left:118px;
}
.menu-item-middle_3{
  vertical-align: middle;
  position: relative;
left: 6px;
}
.menu-item-middle_4{
  vertical-align: middle;
  position: relative;
  left: 80px;
}
.menu-item-middle_5{
  vertical-align: middle;
  position: relative;
  left: 116px;
}
.menu-item-middle_6{
  vertical-align: middle;
  position: relative;
  left: 117px;
}
.menu-item-middle_7{
  vertical-align: middle;
  position: relative;
  left: 85px;
}
.menu-item-middle_8{
  vertical-align: middle;
  position: relative;
  left: 124px;
}.menu-item-middle_9{
  vertical-align: middle;
  position: relative;
  left: 102px;
}
.menu-item-middle_10{
  vertical-align: middle;
  position: relative;
  left: 100px;
}




.social_network_burger{
  position: relative;
width:22px;
height: 22px;
left: 2px;
}

   .menu-item:hover {
     background: rgba(255,255,255,.2)
   }
   .burger-checkbox:checked ~ .menu-list {
   transform:translateX(100%);
   }


  /* Каталог товаров */





  .container_katalog-tovarov{
    position: relative;
   padding: 0px 0px 0px 0px;
    display: grid;
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns:  320px ;
    grid-template-rows:  ;
    grid-gap: 0px;
    justify-content:center;
    align-items: center;

  }


  .container_catalog{
    width: 300px;
    height:50px;
  }

  .container_info_header{
    width: 320px;
    height:50px;
  }





  .container_catalog{
   grid-column:  1/ span 1;
   grid-row: 1/ span  1;
   }

   .container_info_header{
    grid-column:  2/ span 1;
    grid-row: 1/ span  1;
    }
    .container_info_header{
     grid-column:  2/ span 1;
     grid-row: 1/ span  1;
     }



  /* каталог кнопка  */
  .container_catalog{
    display: none;
  background-color: #404040;
    border-radius: 5px;

  }
  .catalog_button{
    width: 300px;
    height: 50px;
    text-decoration: none;

  }
  .container_catalog:hover{
  background-color:  #535554;
  }


  .catalog_link{
    padding: 6px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color:white;
  font-size: 15px;
  font-weight: bold;
   white-space: pre;
  }

  img.catalog_link {
  width: 25px;
  height: 25px;
  }


  /* информация на шапке */

  .container_info_header{
    display: none;
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns:  53px 53px 74px 74px 66px;
    grid-template-rows: 50px;
    justify-content:center;
    background-color: #9400D3;
    border-radius: 5px;
  }
  .info_header_link{
  text-decoration: none;
  color: white;
  position: relative;
  top:18px;
  }
  .info_header_1,.info_header_2,
  .info_header_3,.info_header_4{
  font-size: 11px;
  text-align: center;
  }

  .info_header_1:hover,.info_header_2:hover,
  .info_header_3:hover,.info_header_4:hover{
  background-color: #a957cc;
  }

  .info_header_1:hover{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }




  /* каталог  */

  .container_katalog{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    width: 320px;
  }
  .katalog_zag_h1{
   grid-column:  1/ span 2;
   grid-row: 1/ span  1;
   }

   /* .container_nav{
    grid-column: 1/ span 2;
    grid-row: 2/ span  1;
    }
    .container_bestsellers{
     grid-column:  1/ span 2;
     grid-row: 3/ span  1;
     }
     .container_buy{
      grid-column:  1/ span 2;
      grid-row: 4/ span  1;
      }
      .container_harakteristiki{
       grid-column:  1/ span 2;
       grid-row: 5/ span  1;
       }
       .container_vam_mozhet_ponravitsa{
        grid-column:  1/ span 2;
        grid-row: 6/ span  1;
        } */




  /* Заголовок */
  .katalog_zag_h1{
  font-size: 15px;

  }


  /* Хлебные крошки*/

  .container_nav{

  position: relative;
  color: white;
  width: 320px;
  height: 20px;
  font-size: 12px;
  }

  .breadcrumbs {
    list-style: none;
    text-decoration: none;
    position:relative;
    left: ;
  }

  .breadcrumbs-item {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px;
  }



  .breadcrumbs-item:not(:last-child):after {
    content: ">";
    color:#404040;
    margin-left: 2px;
  }

  .breadcrumbs-link {
    color: #9400D3;
    text-decoration: none;
  }

  .breadcrumbs-link:hover{
  color:#404040;
  }

  .breadcrumbs-link:not(span):hover {
    text-decoration: underline;
    text-decoration: none;
  }

  .breadcrumbs-link.current{
    color: #404040;
    justify-content: center;
  }




  /* Товар */


  .bestsellers_content{
    padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction:column;
  width: 320px;
   gap: 5px;
  justify-content:center;
  }


  /* Описание и характеристики и прочее */
  .container_info{
    padding: 20px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  width: 310px;
  }



   /*футер*/
  .container_footer{
     position: relative;
   display: grid;
   background-position: center ;
   background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:100%;
   grid-template-rows:200px 300px 20px;
   justify-content:center;

  }


  .footer_mail{
    top:0px;
     position: relative;
   display: grid;
   background-position: center ;
   background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:;
   grid-template-rows: 198px;
   justify-content:center;
   background-color:#9400D3;

  }



  .container_footer_contnent{
    top:20px;
     position: relative;
   display: grid;
   background-position: center ;
   background-repeat: no-repeat;
   background-size: cover;
   grid-template-columns:300px  ;
   grid-template-rows:200px 100px ;
   justify-content:center;
  }

  .foter_info_zag{
  padding-top: 10px;
  color: #797878;
  }

  .info_foter_link{
  text-decoration: none;
  color: #404040;

  }
  .info_foter{
  padding-top: 15px;
  }

  .social_network_content{
  padding-top: 10px;
  }
  .social_network{
    color: #404040;
  text-decoration: none;
   vertical-align: middle;
  }
  .prava_zashishenu{
    top:20px;
     position: relative;
  font-size: 15px;
  text-align: center;
  }


  .footer_mail{
  grid-column:  1/ span 1;
  grid-row: 1/ span  1;
  }
  .foter_info{
  grid-column:  1/ span 1;
  grid-row: 1/ span  1;
  }
  .social_network_foter{
   grid-column:  1/ span 1;
   grid-row: 2 span  1;
   }
   .prava_zashishenu{
     grid-column:  1/ span 1;
     grid-row: 4 span  1;
   }
}