:root {
    --red: #ff1d24;
    --black: #000;
    --light-gray: #e5e5e5;
    --dark-gray: #666666;
    --cold-gray: #555;
    --white: #fff;
    --deep-red: #c3171d;
    --off-white: #f9f9f9;
    --dark-slate: #2f3036;
}



.no-scroll { overflow: hidden; }
.container-page {  height: 100%;  position: relative; width: 100%;     padding-top: 115px;  }
.main-title {font-size: 45px;  margin: 40px 0;}

.wrapper { width: 100%; max-width: 1540px; padding: 0 80px; box-sizing: border-box; margin: 0 auto; position: relative; }
.wrapper .catalogueWrapper { display: flex; flex-direction: column; }
.wrapper .text-block { margin: -26px 0 16px 0; }


.img-right { float: right; padding: 0 0 40px 40px; }
.img-left { float: left; padding: 0 40px 40px 0; }

.btn { display: inline-block; justify-items: center; align-items: center; justify-content:center; padding: 10px 15px; font-size: 15px; transition: all 0.3s ease-in; box-sizing: border-box; cursor: pointer; gap: 10px;text-align: center;}
.btn img {margin-left: 10px}
.btn--red { background: var(--red); color: #fff;}
.btn--black  {background: #000; color: #fff;}
.btn--border { background: #fff; border: 1px solid #000; color: #000; }
.btn:hover { opacity: 0.9; }
.btn--full { width: 100%; }



    /* --------------------------------- */
.header {box-sizing: border-box;  width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #fff; transition: all 0.3s ease-in; position: fixed; top: 0; left: 0; z-index: 100;  padding: 0 50px ;}
.header__wrapper {  width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-sizing: border-box; color: #fff;  max-width: 1800px;  margin: 0 auto;  transition: all 0.3s ease-in;}
.header--border {border-bottom: 1px solid #ccc;}
.header > a {  text-decoration: none; color: var(--black);}
.header__left { display: flex;  align-items: center;  gap: 50px;     padding-top: 14px;}
.header__logotype {display: flex; flex-direction: row; gap: 20px;}
a.header__logo  { height: 60px; display: flex; align-items: center; color: #d9d9d9; font-size: 13px; line-height: 100%; text-transform: lowercase; }
.header__logo  img { width: 100%; height: 100%; object-fit: contain;}
.header__menu { display: flex; flex-direction: row;  }
.header__menu a {    text-decoration: none;  color: #333; font-weight: 500;  font-size: 14px;  text-transform: uppercase; transition: color 0.3s ease;  display: block; padding: 55px 20px 35px; white-space: nowrap;}
.header__menu a:hover, .header__menu a.is-active { background-color: var(--red); color: #fff;}
.header__languages { padding-right: 10px;}
.header__languages { list-style: none; margin: 0; padding: 0; display: flex;}
.header__languages a {  }
.header__languages a {display: inline-block; padding: 0 8px; font-size: 13px; text-transform: uppercase; background: transparent; color: #000;}
.header__languages a.current  { font-weight: 500;}
.header__burger { display: none; width: 62px; padding: 18px 13px; text-align: left; cursor: pointer;  box-sizing: border-box; flex-direction: column; opacity: 0.6; background-color: transparent; border: none;}
.header__burger-line { width: 100%; height: 4px; background: #000; border-radius: 50px; transition: width 300ms;}
.header__burger-line:not(:last-child) { margin-bottom: 7px;}
.header__burger-line--short {width: 65%;}
.header__burger:hover .header__burger-line--short { width: 100%;}
.header__right { display: flex; align-items: center; padding-right: 20px; gap: 30px; }
.header__phone { position: relative; display: inline-block; cursor: pointer; }

.header__phone-toggle { width: 40px; height: 40px; position: relative; }
.header__phone-toggle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: url('/templates/img/phone.png') no-repeat center; background-size: contain; }
.header__phone-dropdown { position: absolute; top: 50px; right: 0; background: #ffffff; box-shadow: 0 8px 24px rgba(0 0 0 / 0.15); border-radius: 8px; padding: 12px 16px; display: none; flex-direction: column; gap: 10px; min-width: 170px; z-index: 100; }
.header__phone-dropdown a { display: block; color: #000000; text-decoration: none; font-size: 14px; transition: 0.3s; }
.header__phone-dropdown a:hover { color: #2f8c00; }
.header__client-block { float: right; padding: 24px 0; display: flex; gap: 10px;  flex-direction: row; align-items: center;}

.header__client, .header__basket { width: 24px; height: 24px; color: #000;}
.header__basket svg path, .header__client svg path {color: #000;}
.header__client-block img { width: 100%; object-fit: contain; }
.header__client-block .header__client span { display: block; width: 5px; height: 5px;  background-color: #fff; border-radius: 50px;}
.header__client-block .header__basket .block-count { display: block; width: 5px;  height: 5px; margin-top: 5px; border: 1px solid #fff; border-radius: 50px;}

/* -------------МЕНЮ-БУРГЕР-------------------- */
.menu { overflow: scroll; opacity: 0.5; position: fixed; top: 0; left: -100%; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.85); transition: all 300ms ease; display: flex; align-items: center; justify-content: center;}
.menu__container { width: 100%;  margin-block: 40px; text-align: center; display: inline-grid; justify-content: center; align-content: start; }
.menu__close { position: absolute; top: 0; right: 14px; padding: 20px 10px; font-size: 60px; cursor: pointer; color: #fff; font-weight: 300; transition: rotate 2s; }
.menu__content { position: relative; display: inline-block; text-align: left; margin-bottom: -200px; opacity: 0; visibility: hidden; transition: all 0.3s; }
.menu__content--active { margin-bottom: 0; opacity: 1; visibility: visible; }
.menu__content a { display: block; color: #fff; font-size: 22px; font-weight: 300; padding: 10px 0; border-bottom: 1px solid #ffffff47; }
.menu__content ul li ul li a { font-size: 18px; padding: 7px 0 7px 30px; color: rgba(255, 255, 255, 0.7); }
.menu__content a:last-child { border-bottom: none; }



/* --------------------------------- */
.footer { position: relative; background: #ffffff; overflow: hidden; padding-top: 95px; padding-bottom: 120px; }
.footer a { color: var(--black);}
.footer__bg { position: absolute; inset: 0; pointer-events: none; background: url("/templates/img/logo-fon-grey.png") no-repeat; opacity: 1; top: 0; left: 25%; }
.footer__inner { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; width: 70%; }
.footer__col { display: flex; flex-direction: column; }
.footer__link { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #2b2b2b; transition: color .2s ease, transform .2s ease; }
.footer__link:hover { color: #e31b23; transform: translateX(2px); }
.footer__info { display: flex; flex-direction: column; gap: 18px; justify-self: end; }
.footer__brand { display: inline-flex; align-items: center; justify-content: flex-end; }
.footer__logo { width: 190px; height: auto; display: block; }
.footer__contacts { text-align: right; }
.footer__text {  color: var(--dark-gray); margin-bottom: 0; }
a.footer__mail { display: inline-block; margin-bottom: 14px;  color: var(--dark-gray); transition: color .2s ease;  }
.footer__mail:hover { color: #e31b23; }
.footer__phone {display: flex; flex-direction: column; padding-left: 35px; position: relative; font-weight: 500; font-size: 17px; }
.footer__phone span { font-weight: 400;}
.footer__phone:before {display: block; content: ''; width: 20px; height: 20px; position: absolute; top: 30%; left: unset;  right: 50%; background: url("/templates/img/phone.png") center no-repeat; background-size: contain;}
.footer__copyright a {color: var(--red);}


/* --------------ГОЛОВНА СТОРІНКА------------------- */
.logo-fon { position: absolute; inset: 0; pointer-events: none; background: url("/templates/img/logo-fon-grey.png") no-repeat; opacity: 1; top: 175px; left: 25%;     z-index: 0;    background-size: contain;}


.main-logos {display: flex; flex-direction: row; margin-bottom: 50px;}
.main-logos__text { padding:  10px 10px 10px 105px; position: relative; white-space: nowrap;}
.main-logos__text:before {content: ''; width: 70px; height: calc( 100% - 20px); background-color: var(--red); position: absolute; left: 0; top: 10px; }
.main-logos__text span {color: var(--red); font-weight: 500; font-size: 55px; line-height: 105%;}
.main-logos__images { width: 100%; overflow: hidden; display: flex;  white-space: nowrap;  position: relative;}
.main-logos__track { display: flex; animation: scroll 60s linear infinite;}
.main-logos__track a { display: flex; align-items: center; justify-content: center; padding: 0 30px; opacity: 0.3;}
.main-logos__track a:hover { opacity: 1;}
.main-logos__track img { height: 60px; width: auto;}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% {  transform: translateX(-100%); }
}

.main-about { padding: 80px 0;  }
.main-about__container {  padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;  z-index: 1; position: relative; }
.main-about__content h2 { font-size: 45px;  margin-bottom: 30px;  }
.main-about__content p { font-size: 16px; line-height: 1.2; color: #666; margin-bottom: 20px;   }
.main-about__img { width: 100%; border-radius: 8px;     overflow: hidden;;  }
.main-about__img img {height: 100%; object-fit: cover;}
.main-cards {margin-left: -10px; }
.main-card {  overflow: hidden;  color: var(--black); font-size: 30px; margin: 0 10px;  }
.main-card:hover { text-decoration: none;  }
.main-card__media {   }
.main-card__content { padding: 45px 100px 15px 15px;  }
.main-card__title { margin: 0; line-height: 1.15; font-weight: 400; transition: 0.3s ease; }
.main-card__title:hover { color: var(--red); }
.main-card__title b { font-weight: 800; }
.main-card__text { color: var(--light-gray); font-size: 8px; line-height: 100%; margin-top: 30px;}
.main-slider .slick-slide { opacity: 0.3; }
.main-slider .slick-active.slick-slide { opacity: 1; }
.main-slider .slick-next { top: 101%;  right: 80px;}
.main-slider .slick-next:before, .main-slider .slick-prev:before,
.reviews .slick-next:before, .reviews .slick-prev:before{background: url("/templates/img/arrow.png") no-repeat center; content: ''; width: 80px;  height: 20px; display: inline-block;  background-size: contain;  }
.main-slider .slick-next:hover:before, .main-slider .slick-prev:hover:before,
.reviews .slick-next:hover::before, .reviews .slick-prev:hover::before{ opacity: 1;  }
.main-slider .slick-prev { left: unset; top: 101%;  right: 200px;}
.main-slider .slick-prev:before, .reviews .slick-prev:before {transform: rotate(180deg); }



.main-list {display: flex; flex-direction: column; flex-wrap: wrap; height: 90px; margin: 40px 10px;}
.main-list__item {color: var(--light-gray); transition: 0.3s ease-in;}
.main-list__item:hover {color: var(--red); transform: translateX(5px); text-decoration: none;}
.main-list__item:before {display: inline-block; content: ''; width: 40px; height: 30px; background: url("/templates/img/arrow-grey.png") no-repeat center; background-size: contain;   margin-right: 15px; vertical-align: middle;}


.main-category { display:flex; width:100%; overflow:hidden; }
.main-category__item { display:flex; flex-direction:column; flex:1 1 0%; position:relative; overflow:hidden; transition:flex 0.3s ease; min-width:0; }
.main-category__item:hover { flex: 1.8 1 0%; text-decoration: none;}
.main-category__media { position:relative; height:600px; overflow:hidden; }
.main-category__media img { height:100%; width:auto; max-width:none; display:block; margin:0 auto; }
.main-category__content {  padding:16px; max-width:350px; color:var(--black); min-height: 175px; }
.main-category__title { text-transform: uppercase; font-size: 25px; font-weight: 400; }
.main-category__text {color: var(--light-gray); font-size: 8px; line-height: 100%; margin-top: 30px;}
.main-category__title:hover  {color: var(--red); text-decoration: none;}


.reviews {padding-bottom: 25px  }
.reviews__item { border: 1px solid #f4f8fc; background: #fff; padding: 35px; margin: 25px; box-sizing: border-box;  }
.reviews__content {   display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; color: #666666;  }
.reviews__content p:last-child {margin-block-end: 0;  }
.reviews .slick-next { top: 95%;  right: 80px;}
.reviews .slick-prev { left: unset; top: 95%;  right: 200px;}
.reviews .slick-slide { opacity: 0.3; }
.reviews .slick-active.slick-slide { opacity: 1; }

/* ------------Контакти--------------------- */
.contacts__map iframe { width: 100%; }
.contacts__map { position: relative; overflow-y: hidden; display: flex; justify-content: right; margin-top: 80px; }

.contacts__info { position: absolute; top: 0; left: 0; width: 55%; height: 800px; padding: 24px; display: flex; flex-direction: column; justify-content: center; z-index: 2;  background: rgba(233, 233, 233, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%);/* -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%,  rgba(0,0,0,0.6) 85%, rgba(0,0,0,0) 100%);*/}
.contacts__icon { display: flex; flex-direction: row; align-items: flex-start; font-size: 20px }
.contacts__icon a { text-decoration: none; }
.contacts__icon img { width: 24px; height: 24px; margin-right: 10px; }

.contacts__details { font-size: 20px; }
.contacts__details p { margin: 10px 0 10px 0; }
.contacts__details:last-child { max-width: 330px; }

.contacts__title { display: flex; justify-content: center; align-items:center; }


/* --------------------------------- */
.containerSorting { grid-column: 1 / span 2; grid-row: 1 / span 1;  }
.containerFilters { grid-column: 1 / span 1; grid-row: 2 / span 1; }
.containerContent--catalogue--container.main { grid-column: 2 / span 1; grid-row: 2 / span 1; }
.containerStatic { position: relative; }



.content-header__bread { font-size: 11px; color: #c3c3c3; margin-bottom: 30px; }
.content-header__title {margin-bottom: 20px;}
.content__view { max-width: 1540px; margin: 100px auto; }
.content-header__bread span:last-of-type {  color: #0F0F0B;}
.content-header__bread a { color: var(--light-gray); padding-bottom: 3px; }


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

.content { padding: 0 0 70px 0; overflow: hidden; background: #fff; min-height: 100vh; }
.content .content__left { float: left; width: 240px; }
.content .content__left .containerCategories { position: relative;  margin-bottom: 30px; }
.content .content__left .containerCategories a {display: block; padding: 14px 20px 14px 10px; border-bottom: 1px solid #ddd; color: #175D46; transition: all .2s ease-in; position: relative; text-transform: uppercase; line-height: 115%;}
.content .content__left .containerCategories a:hover { padding: 14px 0 14px 30px; font-weight: 600; text-decoration: none;}
.content .content__header,
.content .content__right .content__header.order { }
.content .content__header .content__header--title h1 {  font-size: 36px; margin-bottom: 40px;  }
.content .wrapper .filter--block--filters,
.content .wrapper .filter--block--sorting { margin-top: 11px;  width: fit-content; line-height: 21px; display: none; padding: 10px; border-radius: 10px; background: #fff; box-sizing: border-box; position: relative; border: 1px solid #efefef;}
.content .wrapper .filter--block--filters span,
.content .wrapper .filter--block--sorting span { margin-left: 14px; color: #0F0F0B; }



/* -----------CATALOGUE__ISSUE---------------------- */
.product-list__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; column-gap: 20px; row-gap: 24px; }
.product-list__grid--main { display: grid; grid-template-columns: repeat(3, 325px); justify-content: end; column-gap: 20px; row-gap: 24px; }

.product-tile { position: relative; width: 100%; height: 100%; margin: auto; box-sizing: border-box; border: 1px solid #efefef; resize: none; }
.product-tile__content { display: flex; flex-direction: column; height: 100%; }
.product-tile__main { display: flex; flex-direction: column; flex-grow: 1; }

.product-tile__media { width: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff;  overflow: hidden; position: relative; }
.product-tile__media:hover .product-tile__img { scale: 1.1; }
.product-tile__media-link { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.product-tile__img { position: relative; width: 100%; height: 100%; max-width: 100%; transition: scale 0.5s;    object-fit: contain; }
.product-tile__ral {position: absolute; top: 5px; left: 5px; z-index: 10;}
.product-tile__title { font-weight: 600; padding: 20px 15px 20px; }
.product-tile__title a { font-size: 20px; line-height: 22px;color: #000;}
.product-tile__title a:hover { color: var(--red); text-decoration: none;}

.product-tile__meta { display: flex; padding: 20px 15px; justify-content: space-between; align-items: center; margin-top: auto;  }
.product-tile__prices { }
.product-tile__price { font-size: 22px; font-weight: 600; }
.product-tile__currency { }

.product-tile__price-old { display: flex; justify-content: space-between; margin-top: 21px; margin-bottom: 20px; }
.product-tile__price-old span { font-size: 20px; font-weight: 600; color: #E43838; }

.product-tile__status { }
.product-tile__status--sold { }

.product-tile__buy { position: relative; padding: 14px; transition: all 0.5s; background-color: #999999; display: flex; justify-content: center; align-items: center;}
.product-tile__buy  svg { color: #fff; width: 24px; height: 24px;}
.product-tile__buy:hover { background-color: var(--red); }
.product-tile__buy:hover svg { transform: scale(1.04); }




/* -----------CATALOGUE---------------------- */
.catalog-page { padding: 0 0 70px 0; overflow: hidden; background: #fff; min-height: 100vh; }
.catalog-page__header { }
.catalog-page__breadcrumbs { font-size: 11px; color: var(--dark-gray); margin-bottom: 30px; }
.catalog-page__breadcrumbs span:last-of-type { color: #0F0F0B; }
.catalog-page__breadcrumbs a { color: var(--black); padding-bottom: 3px; }

.catalog-page__toolbar { width: 100%; padding-bottom: 23px; display: flex; gap: 16px; }

.catalog-toolbar__btn { margin-top: 11px; width: fit-content; line-height: 21px; padding: 10px; border-radius: 10px; background: #fff; box-sizing: border-box; position: relative; border: 1px solid #efefef; }
.catalog-toolbar__text { margin-left: 14px; color: #0F0F0B; }
.catalog-toolbar__btn--filters { }
.catalog-toolbar__btn--sort { }

.catalog-layout { display: flex;  gap: 30px; position: relative; }

.catalog-sort {  }
.catalog-sort__inner { display: flex; flex-direction: row; gap: 10px;     padding: 15px 0;}
.catalog-sort__label { }
.catalog-sort__list a {padding: 10px; }
.catalog-sort__list a {transition: 0.3s ease-in; border: 1px solid transparent; color: #666666;}
.catalog-sort__list a:hover, .catalog-sort__list a.active  {text-decoration: none; color: var(--red);  }
.catalog-sort__link { }

.catalog-page__pagination { }
.catalog-page__intro { }

.catalog-categories { position: relative; margin-bottom: 30px; }
.catalog-categories__link { display: block; padding: 14px 20px 14px 10px; border-bottom: 1px solid #ddd; color: #175D46; transition: all .2s ease-in; position: relative; text-transform: uppercase; line-height: 115%; }
.catalog-categories__link:hover { padding: 14px 0 14px 30px; font-weight: 600; text-decoration: none; }

.catalog-page__view { max-width: 1540px; margin: 100px auto; }
.catalog-static { position: relative; }


/* -----------CATALOGUE__ITEM---------------------- */
.product-page__breadcrumbs a { color: var(--dark-gray); font-size: 11px;}

.product-page__grid { position: relative; width: 100%; display: flex; margin: 46px 0 40px 0; }
.product-page__grid {}
.product-page__gallery { width: 40%; position: relative; }
.product-page__wishlist .wishlist-btn__icon { right: 66px; width: 24px; height: 24px; background-size: cover; filter: invert(1); }
.product-card__title { font-size: 20px; font-weight: 400; padding-top: 4px; }
.product-page__media { max-width: 550px; position: relative; display: block; padding: 0 0 0 5px; box-sizing: border-box; }
.product-page__media-img { width: 100%; position: relative; max-width: 100%; object-fit: cover; }
.product-page__thumbs { text-align: center; margin-top: 20px; }
.product-page__thumbs-list .product-page__thumb { float: left; background: #fff; padding: 0 5px 10px 5px; box-sizing: border-box; }
.product-page__thumbs-list .product-page__thumb img { width: 100%; object-fit: cover; }
.product-page__summary { width: 50%; padding-left: 30px; }
.product-card__rating { margin-top: 36px; margin-bottom: 22px; display: flex; gap: 6px; }
.product-card__rating span { margin-left: 8px; }
.product-card__sku { font-size: 11px; color: var(--dark-gray); }
.product-card__title h2 { line-height: 37px; color: #000; font-weight: 600; }
.product-price { margin-top: 32px; margin-bottom: 30px; }
.product-price { overflow: hidden; }
.product-price__current { float: left; box-sizing: border-box; padding: 10px 0; text-align: right; }
.product-price__current h3 { font-size: 32px; font-weight: 600; }

.product-accordion__item { border-bottom: 1px solid #DEDEDA; }
.product-accordion__arrow { position: relative; float: right; width: 20px; height: 20px; cursor: pointer;  background-size: 22px; }
.product-accordion__arrow img {width: 100%; object-fit: contain; color: var(--black);}
.product-accordion__arrow  svg { color: var(--black);}
.product-accordion__arrow:hover  svg { color: var(--red);}
.product-accordion__arrow.rotated { transform: rotate(180deg); }
.product-accordion__title { padding: 25px 20px 25px 0; color: #000; font-weight: 500; position: relative; cursor: pointer; font-size: 16px; text-transform: uppercase; }
.product-accordion__body { box-sizing: border-box; height: auto; position: relative; width: 100%; padding: 0 20px 4px 0; border-bottom: 1px solid #eee; display: none;  }
.product-accordion__body p {  font-size: 16px; line-height: 25px; color: #5F5F5C; }
.product-accordion__body h3 { margin-bottom: 20px; }
.product-accordion__body h3 strong { font-weight: 600; }
.product-accordion__item.product-accordion__item--desc {display: block!important;}
.product-accordion__item.product-accordion__item--desc  .product-accordion__body {display: block!important;}
.product-accordion__head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

.product-actions .wishlist-btn { width: 20%; padding: 13px 0; display: block; text-align: center; border: 1px solid #efefef; }
.product-actions .wishlist-btn img { filter: opacity(0.5); transition: transform 300ms; }
.product-actions .wishlist-btn:hover img { transform: scale(1.2); }
.product-actions .wishlist-btn span { height: 24px; line-height: 24px; font-size: 14px; color: rgb(64, 64, 64); display: inline-block; vertical-align: middle; margin-left: 20px; }

.product-options { position: relative; display: inline-block; width: calc(100% + 20px); left: -10px; }
.product-options__item { float: left; width: 33.3333%; padding: 0 10px; box-sizing: border-box; }
.product-options__title { padding-bottom: 5px; color: #999; font-size: 13px; position: relative; }
.product-options__title:hover > .product-options__tooltip { opacity: 1; visibility: visible; }
.product-options__tooltip { opacity: 0; visibility: hidden; transition: all .2s; position: absolute; left: 0; bottom: 35px; width: 400px; background: #fff; padding: 15px; border-radius: 4px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #ffcc00; }
.product-options__tooltip span { font-weight: 700; color: #000; }

.product-actions .btn--buy { width: 200px; margin: 20px 0; gap: 15px; display: flex;     align-items: center; justify-content: center; transition: all 0.5s; }
.product-actions { display: block; margin-block: 30px; }
.product-actions .btn--buy:hover { background-color: #fff; color: var(--red); border: 1px solid var(--red); }
.product-actions .btn--buy:hover img { transform: scale(1.04); }
.product-accordion__title { font-size: 17px; font-weight: 500; }

.product-tile__price { font-size: 22px; font-weight: 600; }
.product-tile__price-old span { font-size: 14px; }
.product-tile__price-old { display: flex; justify-content: space-between; margin-top: 21px; margin-bottom: 20px; }
.product-tile__price-old span { font-size: 20px; font-weight: 600; color: #E43838; }
.product-tile__price-old .old-price { color: #0F0F0B; position: relative; font-size: 14px; }

.product-tile__media::after { position: absolute; top: 16px; left: 16px; padding: 4px 13px; font-size: 14px; font-weight: 400; color: #fff; }
.product-tile__media--h::after { content: 'TOP'; background-color: #e49c38; }
.product-tile__media--n::after { content: 'NEW'; background-color: #556046; }
.product-tile__media--z::after { content: 'SALE'; background-color: #990000; }


.product-section  { margin: 50px auto;}
.product-section__link  {color: #000; }
.product-section__link img {width: 24px; vertical-align: middle;}
.product-section__head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 25px; }

/*

/* --------------Про компанію ВСТУП------------------- */

.intro-company {display: flex; flex-direction: column; justify-content: center; position: relative; text-align: center; padding: 0 9em; min-height: 600px;}
.intro-company-cont {display: flex; flex-direction: row; position: absolute; bottom: 0; width: 100%; height: 70px; background: var(--white); z-index: 10; left: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);}
.intro-company-tabs {flex: 1; display: flex; justify-content: center; align-items: center; color: var(--black); font-size: 0.9rem; transition: all 0.3s ease;}
.intro-company-tabs:hover {background: var(--deep-red);color: var(--white);text-decoration: none;}
.intro-company-tabs__slider {position: absolute; bottom: 0; height: 6px; background: var(--deep-red); transition: left 0.3s ease, width 0.3s ease;}
.intro-company-text {max-width: 600px; text-align: left;}
.intro-company-text h1 {font-size: 3rem; margin-bottom: 0.3em;}
.intro-company-text h3 {font-size: 1.5rem; margin-bottom: 0.5em; opacity: 0.9;}
.intro-company-text p {font-size: 1.1rem; line-height: 1.6;}
.intro-company h3, .approach-slider h3 {font-size: 1.2rem; letter-spacing: 0.05rem; color: var(--cold-gray); opacity: 0.8; margin-top: 20px; margin-bottom: 30px;}
.intro-company-img {position: absolute; right: 0; width: 100%; height: 100%; overflow: hidden; margin-right: 15%;}
.background-img {position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center;}


/* ----------------Продукція----------------- */

.approach-main p {text-align: left;}
.approach-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; padding: 40px 0; margin: 0 auto; max-height: 600px;}
.approach-slider {display: flex; flex-direction: column; height: 100%; position: relative; text-align: center; padding: 30px 0; font-family: "Poppins", sans-serif; var(--black); margin-top: 30px;}
.approach-slider h1 {font-size: 3rem; text-align: center; color: var(--black); margin-bottom: 10px;}
.approach-focus {display: flex; align-items: center; gap: 2em; padding: 50px;}
.approach-focus img {max-width: 400px; height: auto;border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); object-fit: cover;}
.approach-img {display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 10px; width: 100%; height: 100%;}
.approach-img .photo-big {grid-row: span 2; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);}
.approach-img .photo-small {width: 100%;min-width: 300px;aspect-ratio: 1 / 1; object-fit: cover;border-radius: 12px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}
.approach-blocks {display: flex; flex-direction: column; justify-content: space-around; padding: 1.5em; border-radius: 16px; background: var(--off-white); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);}
.approach-blocks ul.rounded-list {list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 30px;}
.approach-blocks ul.rounded-list li {background: var(--red); color: var(--white); padding: 1.2em 1em; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; font-weight: 500; font-size: 17px; transition: transform 0.3s ease, background 0.3s ease;}
.approach-blocks ul.rounded-list li:hover {transform: translateX(5px); background: var(--deep-red);}
.approach-blocks div:nth-child(2) ul.rounded-list li:nth-child(3) {grid-column: span 2;}
.approach-blocks h2 {text-align: left;}


/* ----------------Матеріали----------------- */

.products-row {display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; margin-top: 20px;}
.product-category {position: relative; background: var(--white); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); padding: 25px 25px 25px 40px; flex: 1 1 300px; max-width: 350px; overflow: hidden;  transition: transform 0.4s ease, box-shadow 0.4s ease;}
.product-category:hover {transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);}
.product-category h3::after {content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 4px; background: var(--deep-red); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;}
.product-category:hover h3::after {transform: scaleX(1);}
.product-category ul {list-style: none; padding-left: 0; margin-top: 30px; text-align: left;}
.product-category li {position: relative; margin-bottom: 12px; font-size: 17px; line-height: 1.7; background: var(--red); padding: 8px 12px 8px 28px; border-radius: 8px; transition: transform 0.3s ease, background 0.3s ease; cursor: default; color: var(--white);}
.product-category li::before {content: "✔"; position: absolute; left: 10px; font-weight: bold;}
.product-category li:hover {transform: translateX(5px); background: var(--deep-red);}
.product-category p {margin-top: 70px; font-style: italic; color: var(--dark-gray);}

.category-bar ul {text-align: left; padding-left: 20px; margin-top: 15px;}
.category-bar ul li {margin-bottom: 8px; position: relative; padding-left: 15px;}
.category-bar {position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: var(--red); border-radius: 16px 0 0 16px;}


/* ----------------Переваги----------------- */

.advantages-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; list-style: none; margin-top: 30px;}
.advantage-item {position: relative; padding: 64px 34px 42px; background: var(--white); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); text-align: center; transition: transform 0.45s ease, box-shadow 0.45s ease;}
.advantage-item:hover {transform: translateY(-12px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);}
.advantage-item p {margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--dark-slate); text-align: center;}
.advantage-item::after {content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(195, 23, 29, 0.15); border-radius: 12px; pointer-events: none;}

/* ---------------Переваги-Іконки----------------- */
.adv-icon {position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: var(--white); border: 2px solid var(--deep-red); border-radius: 14px; display: flex; align-items: center;justify-content: center; z-index: 2;}
.adv-icon img {width: 34px; height: 34px;object-fit: contain;}
.advantage-item:hover .adv-icon {transform: translate(-50%, -50%) scale(1.08); transition: transform 0.35s ease;}



/* --------------------------------- */
.not_in_stock .containerContent--catalogue--image a { opacity: 0.3}
.containerContent--catalogue--image:hover .sizesMain { bottom: 0; }
.not_in_stock:hover .sizesMain { display: none; }
.containerContent--catalogue--element.not_in_stock .containerContent--catalogue--prise { display: none;}
.code--element.notInStock { display: inline; }

.pdf--generate .pdf--generate--content { margin: 100px auto; max-width: 1300px; background: #fff; overflow: hidden; }
.pdf--generate .pdf--generate--content .image--static { padding: 30px; }
.pdf--generate .pdf--generate--content .image--generate { padding: 30px; text-align: center; }
.pdf--generate .pdf--generate--close { position: fixed; top: 80px; right: 0; width: 60px; height: 60px; background: rgba(255,255,255,0.2); text-align: center; color: #fff; font-size: 32px; line-height: 60px; cursor: pointer; }

.containerCategories {display: flex; flex-direction: row; justify-content: flex-end; gap: 20px; margin-right: 20px;}
.containerCategories a {width: 32px;}
.containerCategories a img {opacity: 50%; width: 100%; object-fit: contain;}
.cabinet--container  .containerContent--header--title h1 { font-size: 36px; margin-bottom: 40px; }
.cabinet--container {margin-top: 50px;}


/* --------------------------------- */
.blBut { background: #a2cde5; }
.containerModal { display: none; }
.result { max-width: 700px; margin-left: auto; margin-right: auto; }
.is-open > .arrow:before { transform: translate(-2px, 0) rotate(45deg); }
.is-open > .arrow:after { transform: translate(2px, 0) rotate(-45deg); }
.filter--block { width: 100%; padding-bottom: 23px; display: flex; gap: 16px; }


/* --------------------------------- */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }


/* --------------------------------- */
.pageTable { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 15px; }
.pageTable tr { border-bottom: 1px solid #e7e7e7; }
.pageTable td { padding: 5px; }

table {max-width: 100%!important; overflow-x: auto!important; font-size: 15px; margin-bottom: 15px; border-collapse: collapse; border-spacing: 0;display: table;width: 100%;}
table tbody {border: 1px solid #efefef;}
table thead tr  {background: var(--light-gray); text-align: center;}
table tbody tr:first-child {border-bottom: 2px solid #fff;}
table tbody tr:nth-child(even) {background: #E7E7E7;}
table tbody tr:nth-child(1) td:not(:last-child),
table tbody tr:nth-child(2) td:not(:last-child) {border-right: 2px solid #fff;}
table tbody tr:nth-child(odd) td:not(:last-child) {border-right: 2px solid #efefef;}
table tbody tr td:first-child {font-weight: bold;}
table tbody tr td:not(:first-child) {text-align: center;}
table td {padding: 10px 15px;font-size: 14px;color: #000;}
table td:not(:last-child) {border-right: 2px solid #fff;}
table tr td p {margin: 0;}


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

.faq-item { border-bottom: 1px solid #ccc;}
.faq-question { cursor: pointer; padding: 10px;  font-weight: bold;  background: #f0f0f0;  position: relative;  user-select: none; display: flex; justify-content: space-between;  align-items: center;}
.faq-answer {display: none; padding: 10px;  border-left: 3px solid #ccc;  background: #fafafa;}
.faq-answer ul li {border: none;}
.faq-toggle-icon { font-weight: bold;  font-size: 18px;  width: 20px;  text-align: center;  user-select: none;  transition: transform 0.3s ease;}
.faq-item.open .faq-toggle-icon { transform: rotate(45deg); }



@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes growLine {
    to {
        width: 100%;
    }
}

@keyframes dropText {
    to {
        padding-top: 1em;
        opacity: 1;
    }
}


@keyframes pulse {
     0% {
      transform: scale(1);
     }
     50% {
      transform: scale(1.03);
     }
     100% {
      transform: scale(1);
     }
}




@media screen and (max-width: 1440px){

}


@media screen and (max-width: 1281px) {
    .main-card {font-size: 22px;}
    .header {padding-bottom: 0;}
    .main-logos__text span {font-size: 38px;}
    .main-logos {margin-bottom: 30px;}
    .main-card__media { max-height: 400px;  overflow: hidden;}
    .main-category__title {font-size: 20px;}

}

@media screen and (max-width: 1200px) {
    .header__burger{display: flex;}
    .header__menu { display: none;}
    .header__wrapper{ padding-top: 30px; padding-bottom: 30px;}
    .container-page {padding-top: 175px;}
    .wrapper { padding: 0 50px; }
    .main-list {height: 140px;}
    .main-about__container {display: flex; flex-direction: column-reverse; padding: 0;}
    .main-about__container img {width: 100%}
    .product-tile__title a {font-size: 18px;}
    .main-card__media {max-height: 500px; overflow: hidden;}

}

@media screen and (max-width: 1100px) {
    .intro-company-img { margin-right: 0%; }
    .intro-company { padding: 0 4em; }
    .approach-img { gap: 15px; width: 100%; height: auto; grid-row: 2; grid-template-columns: 3fr 2fr;}
    .approach-img .photo-big { min-width: 300px; aspect-ratio: 1 / 1; }
    .approach-grid { grid-template-columns: 1fr; grid-template-rows: auto auto; max-height: 100%; }
    .approach-blocks { grid-row: 1; }
    .advantages-grid { grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 1025px) {
    .header__logo img {width: 200px;}

}

@media screen and (max-width: 900px) {
    .main-list {height: 200px;}
    .approach-focus img { max-width: 300px; }
    .product-list__grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .product-page__grid {flex-direction: column;}
    .product-page__gallery, .product-page__summary {width: 100%; box-sizing: border-box; padding-left: 0; }

}

@media screen and (max-width: 800px) {
    .approach-focus { flex-direction: column-reverse; }
    .approach-focus img { max-width: 100%; }
    .approach-grid { padding: 0; }
    .approach-slider h1 { line-height: 45px;}
    .focus-title { text-align: center;}

}

@media screen and (max-width: 769px) {
    h1 {font-size: 1.5em;}
    a.header__logo:last-child {display: none;}
    .product-list__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .footer__inner {grid-template-rows: 1fr 1fr; grid-template-columns: unset;}
    .footer__nav {width: 100%;}
    .header__wrapper { padding-top: 15px;  padding-bottom: 15px;}
    .container-page {padding-top: 145px;}
    .product-page__media-img {height: 100%; max-height: 400px; width: unset; object-fit: contain;}
    .product-card__title {font-size: 16px;}
    .product-page__gallery {display: flex; align-items: center;justify-content: center;}
    .main-card__content { padding: 20px 60px 15px 15px;  }
    .main-card__text {margin-top: 15px;}
    .main-logos__text:before {width: 40px;}
    .main-logos__text { padding: 10px 10px 10px 70px;}
    .main-about {padding: 80px 0 40px 0;}
    .main-about__content h2, .main-title {font-size: 35px;}
}

@media screen and (max-width: 700px) {
    .approach-img .photo-small { width: 100%; min-width: auto; }
    .approach-img .photo-big { width: 100%; }
    .intro-company-img { margin-right: -24%; }
    .header__logo img {width: 150px;}

}
@media screen and (max-width: 620px) {
    .header__left {  gap: 30px; }
    .header__languages {flex-direction: column;}
    .product-tile__price {font-size: 16px;}
    .product-tile__buy {padding: 10px;}
    .wrapper { padding: 0 30px; }
    .main-card__media { max-height: 300px; }
}
@media screen and (max-width: 600px) {
    .advantages-grid { grid-template-columns:  1fr; justify-content: center; padding: 0 10px; }
    .background-img { opacity: 0; }
    .product-tile__title {padding: 20px 15px 0;}
    .content {padding: 0;}
}

@media screen and (max-width: 576px) {
    .main-list {height: unset;}
    .approach-img { grid-template-columns: 2fr 1fr;}
    .approach-img .photo-big { min-width: 200px; }
    .header__logo img {width: 120px;}
    .header__burger {width: 50px;}
    .header__burger-line:not(:last-child) {margin-bottom: 5px;}
    .product-card__title { font-size: 12px; }
    .product-card__title h2 {line-height: 120%;}
    .product-price {margin: 20px 0;}
    .product-price__current h3 {font-size: 25px;padding: 0;}
    .product-price__current {padding: 0;}
    .main-slider .slick-next:before, .main-slider .slick-prev:before,
    .reviews .slick-next:before, .reviews .slick-prev:before {width: 50px;}
}

@media screen and (max-width: 500px) {
    .intro-company { padding: 0 2em; min-height: 500px; }
    .intro-company-text { margin-bottom: 30px; }
    .intro-company-text h1 { font-size: 2.5rem; }
    .intro-company-text p { margin-bottom: 30px; }
    .approach-focus { gap: 1em; padding: 20px 0; }
    .approach-slider h1 { font-size: 2.5rem; }
    .approach-blocks h2 { text-align: center; margin-top: 10px; }
    .approach-slider { padding:0; margin-top: 30px; }
    .advantage-item { padding: 64px 29px 42px 29px; }
    .advantage-item p { font-size: 18px; }
    .divider-line { width: 300px; }
    .intro-company-cont { bottom: -20px; }
    .header { padding: 0 30px; }
    .header__client-block {flex-direction: column; gap: 8px;padding:0;}
}
@media screen and (max-width: 420px)  {
    .wrapper, .header { padding: 0 15px; }
    .container-page{padding-top: 100px;}
    .approach-img .photo-big { min-width: 100px; }
    .approach-slider h1 {font-size: 2rem;}
    .product-category { padding: 25px 25px 25px 40px; flex: 1 1 200px; }
    .intro-company h3 { font-size: 0.9rem; }
    .header__left {gap: 15px;}
    .header__right {gap: 0;}
    .header__logo img {  width: 100px; }
    .header__client, .header__basket {width: 20px; height: 20px;}



}
@media screen and (max-width: 376px)  {
    .header__client, .header__basket {width: 16px; height: 16px;}

}