/*----------службове----------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@charset "UTF-8";


/*	
    01. Загальні
    02. Теги
    03. Header
    04. Карусель
    05. Класи
    06. Адаптивні стилі
    07. 
    08. 
    09. 
    10. 
    11. 
    12. Blog
    13. Testimonial
    14. Brand
    15. About
    16. Shop
    17. Sidebar
    18. Contact
    19. FAQ
    20. Modal
    21. Breadcrumb
    22. My Account
    23. Login Register
    24. Cart
    25. Compare
    26. Wishlist
    27. Checkout
    28. 404

-----------------------------------------------------------------------------------*/

/*
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
 */

:root {
  --red: #f22b29;
  --green: #45cb85;
  --blue: #07a0c3;
  --dark: #153243;
  --yellow: #ffbf00;
  --white: #fff;
  --gray: #c9c9c9;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none;
}


/*----------службове----------*/

/*----------теги----------*/


h1,
.h1 {
  font-size: 50px;
  font-weight: 800;
}

h2,
.h2,
h3,
.h3 {
  font-size: 35px;
  font-weight: 800;
  padding: 20px;
}

h4,
.h4{
  font-size: 25px;
  font-weight: 800;
  padding: 30px 0 12px;
}

h5,
.h5 {
  font-size: 22px;
  font-weight: 800;
  padding: 20px 0 15px;
}

h6,
.h6 {
  font-size: 18px;
  font-weight: 800;
  padding: 5px 0;
}

.h-g-5 {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}



body {
  height: 100%;
  width: 100%;
  min-width: 320px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #153243;
  overflow-x: hidden;
}


button,
.button {
  background: var(--red);
  color: var(--white);
  border: 0;
  cursor: pointer;
  padding: 13px 23px 12px;
  border-radius: 24px;
  font-size: 17px;
  font-weight: 700;
  margin: 20px 5px 0 0;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  outline: none;
}

.button-g-5 {
  background: var(--yellow);
  color: var(--dark);
  border: 0;
  cursor: pointer;
  padding: 11px 20px 10px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  margin: 13px 5px 0 0;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


button:hover,
.button:hover,
a.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--blue);
  transition: color 0.3s ease;
}

p {
  padding: 15px 0 5px 0;
}

.p{
  font-size: 16px;
  font-weight: 400;
}
.p-700 {
  max-width: 760px;
  margin: 0 auto;
  padding: 15px 30px 5px 30px;
}

ol.list{
	padding: 20px;
}

.svg-red {
  fill: var(--red);
}

.svg-white {
  fill: var(--white);
}
.svg-dark {
  fill: var(--dark);
}

 .svg-fff {
    fill: var(--dark);
  }

/*----------теги----------*/

/*----------header----------*/

.mw-1200 {
	width: 1150px;
	margin: 0 auto;
}


.menu {
  height: 33px;
  width: 100%;
  background-color: var(--dark);
}

.menu ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 25px;
}

.ul-none {
list-style: none;
}

.menu>ul>li {
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--white);
}

.has-submenu {
  position: relative;
  padding: 2px 0 8px 0;
  cursor: pointer;
}

.has-submenu a {
  text-decoration: none;
  color: var(--white);
}

.has-submenu:hover .submenu {
  visibility: visible;
  opacity: 1;
  padding: 0;
  transform: rotateX(0deg);
}

.submenu {
  position: absolute;
  flex-direction: column;
  top: 100%;
  left: -25px;
  width: 210px;
  background: var(--dark);
  border: none;
  transition: 0.22s linear;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
  visibility: hidden;
  opacity: 0;
  z-index: 4;
}

.submenu li:last-child {
  padding-bottom: 10px;
}

.submenu a {
  color: var(--white);
  margin: 0;
  padding: 10px 20px 10px 25px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  width: 210px;
}

.submenu a:hover {
  color: var(--dark);
  background-color: var(--yellow);
  font-weight: 700;
}

.header_logo_box {
  height: 110px;
  max-width: 1200px;
  margin: 0px auto;
  padding: 24px 25px;
  align-items: center;
  font-weight: 500;
}

.main_tel {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 900;
}

.header_logo_box ul,
.logo_items ul,
.logo_items_basket ul {	
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.logo_catalog button {
  background: var(--yellow);
  color: var(--dark);
  border: 0;
  cursor: pointer;
  padding: 18px;
  font-size: 18px;
  border-radius: 30px;
  font-weight: 700;
  margin: 3px;
}

.logo_basket button {
  background: var(--yellow);
  color: var(--dark);
  border: 0;
  cursor: pointer;
  padding: 11px 13px 8px;
  border-radius: 30px;
  margin-top: 6px;
}

.logo_basket{
  position: relative; /* Для позиціонування лічильника кількості товарів */
}
/* Стиль для кількості товарів у кошику */
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px; /* Зміщення в правий верхній кут */
  background-color: var(--red);
  color: var(--white);
  font-size: 13px; /* Розмір шрифту для цифри */
  width: 20px; /* Ширина кружечка */
  height: 20px; /* Висота кружечка */
  border-radius: 50%; /* Округлення для створення форми кола */
  display: flex;
  justify-content: center; /* Вирівнювання тексту по горизонталі */
  align-items: center; /* Вирівнювання тексту по вертикалі */
  font-weight: bold; /* Жирний шрифт */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1; /* Встановлення пріоритету поверх інших елементів */
}

.logo_items>ul,
.logo_items_basket>ul {
  gap: 0 30px;
}

.header_logo_box a {
  text-decoration: none;
  font-size: 13px;
  color: var(--dark);
}

.decal_nav {
  list-style: none; /* Прибираємо стандартні маркери списку */
  padding: 0 0 0 30px;
}

.decal_nav>li {
  position: relative;
  margin: 5px 0; /* Відступи між елементами */
  font-weight: bold;
	text-align: left;
}

.decal_nav>li>a {
  text-decoration: none; /* Прибираємо підкреслення */
  color: var(--dark);
  display: block;
  transition: all 0.3s ease; /* Додаємо плавний перехід */
}

.decal_nav>li>a:hover {
  color: var(--red);
}

.decal_nav>li::before {
  content: '▶'; /* Іконка перед елементом */
  position: absolute;
  left: -20px;
	top: 4px;
  color: var(--red); /* Початковий колір іконки */
  transition: all 0.3s ease; /* Плавний перехід для іконки */
  font-size: 9px;
}

.decal_nav>li:hover::before {
  transform: translateX(-10px); /* Іконка рухається при наведенні */
}

.decal_nav>li>a:active {
  color: var(--red);
}

/*----------header----------*/
/* --------Карусель------- */

.carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 2000px;
  margin: 0 auto;
}

.carusel_texts {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.carousel img {
  width: 50%;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.carousel p {
  padding: 50px 20px 10px;
  max-width: 70%;
  font-size: 20px;
  margin: 0 auto;
  justify-content: space-between;
  transition: opacity 0.5s ease, transform 0.75s ease;
}

.carousel h1 {
  max-width: 70%;
  margin: 0 auto;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel p::before {
  background-color: var(--red);
  width: 150px;
  height: 3px;
  content: '';
  position: relative;
  top: -25px;
  transform: translateX(-50%);
  left: 50%;
  display: block;
}

.carousel span {
  display: block;
  transition: opacity 0.5s ease, transform 1s ease;
  margin-top: 30px;
}



/*----------карусель----------*/
/*----------загальні класи----------*/
.input__wrapper {
  width: 100%;
  position: relative;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;	
}
.input__wrapper2 {
  max-width: 350px;
  position: relative;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;	
}
 
.input__file {
  opacity: 0;
  visibility: hidden;
  position: absolute;
	left: 40px;
}
 
.input__file-icon-wrapper {
  height: 40px;
  width: 45px;
  padding: 12px;
  margin-right: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  border-right: 1px solid #fff;
}
 
.input__file-button-text {
  line-height: 1;
  margin-top: 1px;
	padding-left: 10px;
}
 
.input__file-button {
  width: 100%;
  height: 40px;
  background: var(--dark);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  cursor: pointer;
  margin: 0 auto;
}


.grid-calculator{
	

	display: grid;
	grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto; /* Рядки автоматичної висоти */
	column-gap: 20px;
	align-items: center;
}

.calculator{
    width: 100%;
	height: 40px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 16px;
	color: var(--dark);
    transition: border-color 0.3s, box-shadow 0.3s;	
}
.calculator:focus {
	border-color: var(--dark);
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 16px;
}


.label{
	font: 14px sans-serif;
    padding: 10px;
}

select.calculator{
	margin-bottom: 20px;
}

.rounded_block {
/*    border: 2px solid var(--red); */
    border-radius: 20px; 
    padding: 15px;
	margin: 15px 0;
}

.green {
  color: var(--green);
}

.dark {
  color: var(--dark);
}

.yellow {
  color: var(--yellow);
}

.blue {
  color: var(--blue);
}

.red {
  color: var(--red);
}
.gray{
  color: var(--gray);
}

.bg-green, .button.bg-green {
  background: var(--green);
  color: var(--dark);
}

.bg-dark, .button.bg-dark {
  background: var(--dark);
  color: var(--white);
}

.bg-yellow, .button.bg-yellow{
  background: var(--yellow);
  color: var(--dark);
}

.bg-blue, .button.bg-blue {
  background: var(--blue);
  color: var(--white);
}

.bg-red, .button.bg-red {
  background: var(--red);
  color: var(--white);
}

.bg-gray {
	background: var(--gray);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.mt-0{
	margin-top: 0;
}

.mt-5{
	margin-top: 5px;
}

.mt-10{
	margin-top: 10px;
}
.mt-6{
	margin-top: 6px;
	 width: 100%;
	justify-content: center;
	display: block;
}
.mt--10{
	margin-top: -10px;
}
.mt--20{
	margin-top: -20px;
}
.mt--40{
	margin-top: -40px;
}
.mt-20{
	margin-top: 20px;
}

.mt-30{
	margin-top: 30px;
}
.mb-30{
	margin-bottom: 30px;
}

.p-50-30{
	padding: 30px 50px 15px;
}
.form-filds{
	padding: 18px 40px 33px;
}

.title {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}

.section .title-2 {
  padding: 0 0 5px;
  font-size: 25px;
  font-weight: 800;	
}

.title::after {
  background-color: var(--red);
  width: 200px;
  height: 3px;
  content: '';
  position: relative;
  top: 20px;
  box-sizing: border-box;
  transform: translateX(-50%);
  left: 50%;
  display: block;
}

.section {
  padding: 60px 20px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.section-calculator {
  padding: 60px 0 0;
  max-width: 1200px;
  margin: 0 auto;
}
.section-top {
  padding: 0 10px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.section-dark {
  background-color: var(--dark);
  margin: 70px 0 0;
	padding: 40px;
  max-width: 100%;
	text-align: center;
	color: var(--white);
}

.section-green {
  background-color: var(--green);
  margin: 70px 0 0;
  padding: 40px;
  max-width: 100%;
  text-align: center;
  color: var(--dark);
}

.section-yellow {
  background-color: var(--yellow);
  margin: 70px 0 0;
  padding: 40px;
  max-width: 100%;
  text-align: center;
  color: var(--dark);
}

.grid-3 {
  padding: 50px 0 0 0;
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 0 auto;
  text-align: center;
}

.grid-3-icons {
  padding: 10px 0 0 0;
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-items: center;	
  margin: 0 auto;
}

.grid-6 {
  padding: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  margin: 0 auto;
  text-align: center;
}

.grid-5 {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
  margin: 0 auto;
  text-align: center;
}

.grid-4 {
  padding: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  margin: 0 auto;
  text-align: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 35% 1fr;
  grid-gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 0 0;
}

.grid-2-1200 {
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 0;
}

.grid-2-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.grid-2-1-1200 {
  display: grid;
  grid-template-columns: 70% 1fr;

  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0 0;
}

.grid-2-20-1200 {
  display: grid;
  grid-template-columns: 210px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 0;
}


footer {
  background-color: #f2f2f2;
}

.info-container {
  max-width: 1200px;
  margin: 70px auto 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* 4 колонки */
  gap: 15px;
  /* Відступ між колонками */
  padding: 40px 20px 20px;
}

.footer {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* 4 колонки */
  gap: 15px;
  /* Відступ між колонками */
  padding: 0 20px;
  text-align: center;
}


.footer ul {
  list-style: none;
  padding: 0;
  align-items: center;
}

.footer ul li {
  display: inline-block;
  margin-right: 10px;
}

.info-container form {
  display: flex;
  flex-wrap: wrap;
}

.info-container form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 10px;
}



/*----------загальні класи----------*/
/*----------адаптивні стилі----------*/


/* Мобільні */
@media (max-width: 767px) {
	
  .logo_catalog,
  .menu,
  .contact-text,
  .logo_items_basket{
    display: none;
  }

  .menu-toggle {
    display: block;
    position: fixed;
    top: 8px;
    right: 20px;
    z-index: 2;
    cursor: pointer;
    border: none;
    outline: none;
    background: var(--yellow);
    color: var(--dark);
    padding: 9px 10px 11px;
    font-size: 18px;
    border-radius: 30px;
    font-weight: 700;
    min-width: 45px;
  }
	

	
.logo_basket button {
    display: block;
    position: fixed;
    top: 28px;
    right: 80px;
    z-index: 2;
    cursor: pointer;
    border: none;
    outline: none;
    background: var(--dark);
    padding: 9px 10px 7px;
    font-size: 18px;
    border-radius: 30px;
    font-weight: 700;
    min-width: 45px;
	margin: 0;
}
	
/* Стиль для кількості товарів у кошику */
.cart-count {
    position: fixed;
    top: 23px; 
    right: 73px; 
    background-color: var(--red);
    color: var(--white);white;
    font-size: 13px;
    width: 20px; /* Ширина кружечка */
    height: 20px; /* Висота кружечка */
    border-radius: 50%; /* Округлення для створення кружечка */
    display: flex; /* Для вирівнювання тексту всередині */
    justify-content: center; /* Горизонтальне вирівнювання */
    align-items: center; /* Вертикальне вирівнювання */
    font-weight: bold; /* Жирний шрифт */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	z-index: 3;
}
	
  .mobile {
    position: fixed;
    top: 0;
    left: -100%;
    margin: 97px 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark);
    z-index: 3;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
  }

  .mobile.active {
    left: 0;
  }

  .mobile a {
    text-decoration: none;
    color: var(--white);
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    position: relative;
    border-bottom: solid 1px #09161c;
    border-top: solid 1px #224f66;
  }

  .mobile_submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height .8s ease-out;
  }

  .mobile_submenu a {
    padding: 10px 50px;
  }

  .mobile_submenu a::before {
    content: "•";
    color: var(--red);
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
  }

  .mobile>ul>li:target .mobile_submenu {
    max-height: 20rem;
  }

  .mob_menu_tel>a {
    color: var(--red);
    padding: 40px 20px;
    font-weight: 700;
    border: 0;
    font-size: 25px;
  }

  .mob_menu_address {
    color: var(--white);
    padding: 0 20px;
  }

  /* -----під меню------ */

  .svg-fff {
    fill: var(--white);
  }


  .logo_raz {
    min-width: 100%;
    padding: 14px 30px;
  }
	
	.logo_raz.basket {
    padding: 14px 30px 0;
}
	

  .logo_items ul {
    background-color: var(--dark);
    color: var(--white);
    padding: 10px 20px;
    margin: 0 auto;

  }

  .logo_items a {
    color: var(--white);
    font-size: 11px;
  }

  .header_logo_box>ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-around;
  }

  .header_logo_box {
    margin: 0;
    padding: 0;
	height: 110px;
  }

  .logo_items>ul {
    gap: 0 10px;
  }

  /* -----під меню------ */
  .carusel_texts {
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
  }

  .carousel img {
    width: 100%;
  }

  .carousel p {
    padding: 38px 20px 5px;
    max-width: 100%;
    font-size: 18px;
  }

  .carousel h1 {
    width: 100%;
    font-size: 35px;
    margin: 0 auto;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }


  .carousel {
    flex-direction: column-reverse;
    margin-top: 70px;
  }

.carousel.mt-0 {
    margin-top: -8px;
}


  .carousel p::before {
    width: 150px;
    height: 3px;
    position: relative;
    top: -20px;
    transform: translateX(-50%);
    left: 50%;
  }

  .grid-3 {
      grid-template-columns: repeat(1, 1fr);
  }
	
.grid-6 {
     grid-template-columns: repeat(2, 1fr);
  }
	
 .grid-5 {
     grid-template-columns: repeat(2, 1fr);
  }
.grid-4 {
     grid-template-columns: repeat(2, 1fr);
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

.grid-2-1200 {
    grid-template-columns: 1fr;
  }
	
	.grid-calculator{
	grid-template-columns: repeat(1, 1fr);

}
	
	.grid-2-1-1200 {
  display: grid;
  grid-template-columns: 1fr;
}
	
	.grid-2-20-1200 {
  grid-template-columns: 1fr;
}
	
	.form-filds{
	padding: 20px 30px 35px;
}
	
	.decal_nav>li {
font-size: 18px;
}
	
}

/* Планшети */
@media (min-width: 768px) and (max-width: 991px) {
  .menu>ul>li {
    font-size: 11px;
    margin-top: 2px;
  }

  .submenu {
    left: -20px;
    width: 170px;
  }

  .submenu a {
    padding: 7px 15px 7px 20px;
    font-size: 13px;
    width: 170px;
  }

  .logo_raz>a>svg {
    height: 60px;
  }

  .menu-toggle,
  .mobile,
  .logo_catalog {
    display: none;
  }

  .carousel h1 {
    font-size: 35px;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
	.grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
	
	.grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
	.grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
		.grid-2-1-1200 {
  display: grid;
  grid-template-columns: 1fr;
}
	
	.form-filds{
	padding: 20px 40px 35px;
}

}

/* Малі ПК */
@media (min-width: 992px) and (max-width: 1999px) {

  .mobile,
  .menu-toggle {
    display: none;
  }

}

/* Великі екрани*/
@media (min-width: 1200px) {

  .mobile,
  .menu-toggle {
    display: none;
  }

}

/*----------адаптивні стилі----------*/
/*----------кнопка скролу----------*/


.scroll-to-top {
    position: fixed;
    bottom: 20px; /* Відступ від нижнього краю */
    left: 50%; /* По горизонталі центр */
    transform: translate(-50%, -50%); /* Вирівнювання по центру */
    padding: 8px 12px 11px;
    background-color: #153243;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: none; /* Спочатку кнопка прихована */
    z-index: 1000; /* Поверх усього контенту */
}

.scroll-to-top:hover {
    background-color: #f22b29;
}

/*----------кнопка скролу----------*/
/*----------нова пошта----------*/


.suggestion-item {
/*    padding: 10px;*/
    cursor: pointer;
    border-bottom: 1px solid #eee;

}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

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

#citySuggestions, #warehouseSuggestions {
    max-height: 100px; /* Максимальна висота для списку */
    overflow-y: auto;  /* Вертикальна смуга прокрутки */
    width: 100%; /* Ширина відповідно до ширини батьківського контейнера */
}


/*----------нова пошта----------*/
/*----------хлібні крихти----------*/

.breadcrumb {
	
    display: flex;
    align-items: center;
    font-size: 13px;
    background-color: #f9f9f9;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.breadcrumb a {
    text-decoration: none;
    margin-right: 3px;
    position: relative;
   
}

.breadcrumb a:hover {
    color: var(--blue);
	transition: color 0.3s ease;
}

.breadcrumb a:hover svg {
    fill: var(--blue);
    transition: fill 0.3s ease;
}

.breadcrumb a::after {
    content: '>';
    margin-left: 6px;
    color: var(--dark);
}

.breadcrumb span {
    color: #6c757d;
}

.breadcrumb a:last-child::after {
    content: '';
}



/* Модальне вікно */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: absolute;
    background-color: white;
    padding: 10px 20px 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}


.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Розташування модалки на ПК та телефонах */
@media (min-width: 768px) {
    .modal-content {
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
    }
}

@media (max-width: 767px) {
    .modal-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Таблиця */
.cart-table {
    width: 100%;
    border-collapse: collapse;
	border-bottom: 1px solid #ddd;
}

.cart-table th, .cart-table td {
    padding: 0 5px 14px;
    text-align: left;
	font-size: 15px;
}

.product-img {
    width: 85px;
    height: auto;
}

.qty-btn {
    margin: 0 5px;
    cursor: pointer;
    background-color: #ddd;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
}
.modal-body {
  max-height: 60vh;
  overflow-y: auto; /* Додання прокрутки до контенту */
}


 .video-container {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16; /* Співвідношення 9:16 */
      overflow: hidden;
      background: #000;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin: 20px auto;
      max-width: 400px;
    }

    /* Iframe для відео */
    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Медіа-запити для кращої адаптації на різних екранах */
    @media (min-width: 768px) {
      .video-container {
        max-width: 450px;
      }
    }

    @media (min-width: 1024px) {
      .video-container {
        max-width: 400px;
      }
    }

    .video-container-horizontal {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9; /* Співвідношення 16:9 */
      overflow: hidden; /* Прибирає будь-які зайві відступи */
      background-color: transparent; /* Прозорий фон */
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin: 20px auto;
      max-width: 800px; /* Максимальна ширина для ПК */
    }

    /* Iframe для відео */
    .video-container-horizontal iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 5px; /* Додаємо заокруглення кутів також для iFrame */
    }

    /* Медіа-запити для коригування на різних екранах */
    @media (min-width: 768px) {
      .video-container-horizontal {
        max-width: 640px;
      }
    }

    @media (min-width: 1024px) {
      .video-container-horizontal {
        max-width: 800px;
      }
    }


/*----*/

.ratio {
  position: relative;
  width: 100%;
	  margin: 20px auto;
	border-radius: 12px;
	      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      max-width: 800px; /* Максимальна ширина для ПК */
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
	

}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
		border: 0;
	border-radius: 12px;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

/* Загальні стилі таблиці */
table.table {
  width: 100%; /* Розтягує таблицю на всю ширину контейнера */
  border-collapse: collapse; /* Видаляє подвійні лінії між осередками */
  margin: 20px 0; /* Відступи зверху і знизу таблиці */
  font-size: 16px; /* Розмір шрифту */
}

table.table th {
  font-weight: bold; /* Жирний шрифт */
  padding: 12px; /* Внутрішній відступ */
  border: 1px solid #ddd; /* Тонка рамка */
}

table.table td {
  padding: 10px; /* Внутрішній відступ */
  border: 1px solid #ddd; /* Тонка рамка */
}

table.table tr:hover {
  background-color: #f2f2f2; /* Світло-сірий фон при наведенні */
}

/* Чергування кольорів для рядків */
table.table tr:nth-child(even) {
  background-color: #f2f2f2; /* Світло-сірий фон для парних рядків */
}

  .no-shadow {
    box-shadow: none;
	  }

.responsive {
max-width: 100%;
  height: auto;
  display: block;
}

.order-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}



.cart-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}