@font-face {
   font-family: 'Montserrat';
   src: url('./../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}

/* @font-face {
   font-family: 'Roboto';
   src: url('./../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Roboto-Bold';
   src: url('./../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
} */

@font-face {
   font-family: 'Play-Bold';
   src: url('./../fonts/Play/Play-Bold.ttf') format('truetype');
}

@font-face {
   font-family: 'Play';
   src: url('./../fonts/Play/Play-Regular.ttf') format('truetype');
}

:root {
   --bodyW: 120rem; /* 1920px */
   --contentW: 101.875rem; /* 1600px */
   --contentWProduct: 83.75rem; /* 1340px */
   --contentW-s: 75rem; /* 1200px */
   --headerHStart: 3.75rem; /* 3.75rem = 60px, 5.69rem = 90px */
   --headerH: var(--headerHStart);
   --sideMenu: 100svw; /* 250px */
   --text: #3a3a3a;
   --footer: #cecfcf;
   --accent-l: #0067aa;
   --accent-d: #054194;
   --accent-hover: #009cff;
   --menu-hover: #04cdff;
   --Hn: #3a3a3a;
   --background-color: hsl(0deg 0% 92% / 30%);
   --footer-h: 683px;

   --blue-main: #002d90;
   --blue-l-1: #1a4aa2;  /* світліший і менш насичений за --blue-main */
   --blue-l-2: #4d6fbb;  /* ще світліший і менш насичений */
   --blue-d-1: #00206b;  /* темніший за --blue-main */
   --blue-d-2: #001447;  /* ще темніший */

   --button-color: var(--blue-main);

   --red-main: #e41e25;
   --red-l-1: #ea4a50;  /* світліший і менш насичений за --red-main */
   --red-l-2: #f07d81;  /* ще світліший і менш насичений */
   --red-d-1: #c10c13;  /* темніший за --red-main */
   --red-d-2: #8f0006;  /* ще темніший */
   --green-main: #48a648;
   /* --background-img: url(../images/2.png); */
   --background-img: url(../images/wall.png);
   --background-img-footer: url('../images/background-footer.png'),
      linear-gradient(0deg, #a8a9ac 0%, var(--footer) 100%);
}

html {
   scroll-behavior: smooth;
}

.site-content {
   max-width: var(--contentW);
   margin: auto;
   padding: 0 15px;
}
.main-wrapper {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
   grid-template-areas:
      'main-top-section'
      'footer';
   min-height: 100svh;
}

.top-main-section {
   grid-area: main-top-section;
   display: grid;
   grid-template-rows: auto var(--headerH) 1fr;
   grid-template-columns: 1fr;
   grid-template-areas:
      'button'
      'header'
      'main';
   background: #fff;
   z-index: 1;
}

.open-popup-btn-wrapper {
   grid-area: button;
   display: grid;
   justify-content: center;
}

.open-popup-btn {
   margin: 10px 0;
}


@media (max-width: 1020px) {
   .top-main-section {
      --headerH: 2.5rem;
   }
}

header {
   grid-area: header;
}

main {
   grid-area: main;
}

body {
   position: relative;
   font-family: 'Play';
   /* max-width: var(--bodyW); */
   font-weight: 400;
   margin: 0 auto !important;
   color: var(--text);
}

/* body:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   background-image: url(../___images/img/1.png);
   opacity: 0.25;
} */

main {
   display: grid;
   height: 100%;
   width: 100%;
   margin: auto;
}

.global-inner-content {
   max-width: var(--contentW);
   width: 100%;
   height: 100%;
   margin: auto;
   padding: 0 20px;
}

footer {
   grid-area: footer;
   box-shadow: inset 0px 8px 20px -15px #000;
}

h1 {
   font-family: sans-serif;
   color: var(--Hn);
   font-size: clamp(31px, 4vw, 50px);
   line-height: clamp(41px, 4vw, 60px);
}

@media (min-width: 1025px) {
   .top-main-section {
      margin-bottom: var(--footer-h);
      box-shadow: 0px 8px 20px -15px #000;
   }

   footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
   }
}

.go-to-top-button {
   position: fixed;
   right: 40px;
   bottom: 40px;
   z-index: 99;

   display: none;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 4px;
   background-color: hsl(0deg 0% 100% / 100%);
   background: linear-gradient(180deg, #fafcf6 0%, #ffffff00 100%);
   backdrop-filter: blur(13px) grayscale(1);
   box-shadow: 0 2px 7px 0px rgba(0, 0, 0, 0.1);
}
.go-to-top-button svg {
   width: 20px;
   height: 20px;
   fill: var(--red-main);
   opacity: 0.8;
}
/* ======================== */

/* =========== contact form 7 =========== */
.wpcf7-spinner {
   display: none;
}
/* =========== contact form 7 =========== */

/* =========== Основні стилі для контенту woocommerce =========== */
.woocommerce-Tabs-panel--description {
   max-width: var(--contentW); /* Використовуємо вашу змінну ширини контенту */
   margin: 0 auto;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text);
}

/* Заголовки */
.woocommerce-Tabs-panel--description h1,
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4,
.woocommerce-Tabs-panel--description h5,
.woocommerce-Tabs-panel--description h6 {
   color: var(--Hn);
   margin-bottom: 1rem;
}

.woocommerce-Tabs-panel--description h1 {
   font-size: 2rem;
}
.woocommerce-Tabs-panel--description h2 {
   font-size: 1.75rem;
}
.woocommerce-Tabs-panel--description h3 {
   font-size: 1.5rem;
}
.woocommerce-Tabs-panel--description h4 {
   font-size: 1.25rem;
}
.woocommerce-Tabs-panel--description h5 {
   font-size: 1.1rem;
}
.woocommerce-Tabs-panel--description h6 {
   font-size: 1rem;
}

/* Абзаци */
.woocommerce-Tabs-panel--description p {
   margin-bottom: 1.5rem;
}

/* Списки */
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
   margin: 1rem 0;
   padding-left: 1.5rem;
}

.woocommerce-Tabs-panel--description ul {
   list-style: disc;
}

.woocommerce-Tabs-panel--description ol {
   list-style: decimal;
}

.woocommerce-Tabs-panel--description ul li,
.woocommerce-Tabs-panel--description ol li {
   margin-bottom: 0.5rem;
}

/* Виділений текст */
.woocommerce-Tabs-panel--description strong {
   font-weight: bold;
}

.woocommerce-Tabs-panel--description em {
   font-style: italic;
}

/* Цитати */
.woocommerce-Tabs-panel--description blockquote {
   border-left: 4px solid var(--accent-d);
   padding-left: 1rem;
   font-style: italic;
   color: var(--Hn);
   margin: 1rem 0;
}

/* Посилання */
.woocommerce-Tabs-panel--description a {
   color: var(--accent-l);
   text-decoration: underline;
   transition: color 0.3s ease;
}

.woocommerce-Tabs-panel--description a:hover {
   color: var(--accent-hover);
}

/* Зображення */
.woocommerce-Tabs-panel--description img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 1rem auto;
   border-radius: 8px;
   width: auto;
   max-width: 700px;
}

/* Вирівнювання зображень */
.woocommerce-Tabs-panel--description img.alignleft {
   float: left;
   margin: 0 1rem 1rem 0;
}

.woocommerce-Tabs-panel--description img.alignright {
   float: right;
   margin: 0 0 1rem 1rem;
}

.woocommerce-Tabs-panel--description img.aligncenter {
   display: block;
   margin: 1rem auto;
}

/* Відео (якщо є) */
.woocommerce-Tabs-panel--description iframe,
.woocommerce-Tabs-panel--description video {
   max-width: 100%;
   display: block;
   margin: 1rem auto;
}

/* Код */
.woocommerce-Tabs-panel--description pre {
   background: #f4f4f4;
   padding: 1rem;
   border-radius: 5px;
   overflow: auto;
}

.woocommerce-Tabs-panel--description code {
   background: #f4f4f4;
   padding: 2px 5px;
   border-radius: 3px;
}

/* Чітке вирівнювання після плаваючих елементів */
.woocommerce-Tabs-panel--description::after {
   content: '';
   display: table;
   clear: both;
}
/* =========== /Основні стилі для контенту woocommerce =========== */

/* =========== Основні стилі для контенту - page, post =========== */
/* Блок main.type-page та main.type-post */
.main-content-wrapper {
   padding: clamp(45px, 5vw, 95px) 10px clamp(45px, 5vw, 95px) 10px;
   padding-top: clamp(10px, 2.6vw, 50px);
}

.main-title-content {
   /* max-width: var(--contentW-s); */
   max-width: var(--contentWProduct);
   width: 100%;
   margin: auto;
}

.main-title-content h1 {
   border-bottom: solid 1px;
   border-image: linear-gradient(to right, var(--blue-main), transparent) 1;
   padding-bottom: clamp(10px, 2vw, 25px);
}

main.type-page article.post,
main.type-page article.page,
main.type-post article.post,
main.type-post article.page {
   max-width: 800px;
   margin: 0 auto;
   padding: 20px;
   background-color: #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

main.type-page article > * + *,
main.type-post article > * + * {
   margin-top: 20px;
}

main.type-page h1,
main.type-page h2,
main.type-page h3,
main.type-page h4,
main.type-page h5,
main.type-page h6,
main.type-post h1,
main.type-post h2,
main.type-post h3,
main.type-post h4,
main.type-post h5,
main.type-post h6 {
   font-weight: bold;
   margin: 20px 0 10px;
}

main.type-page h2,
main.type-post h2 {
   font-size: 2em;
}

main.type-page h3,
main.type-post h3 {
   font-size: 1.75em;
}

main.type-page h4,
main.type-post h4 {
   font-size: 1.5em;
}

main.type-page h5,
main.type-post h5 {
   font-size: 1.25em;
}

main.type-page h6,
main.type-post h6 {
   font-size: 1em;
}

main.type-page p,
main.type-post p {
   font-size: 1em;
   margin: 0 0 15px;
}

main.type-page img,
main.type-post img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 4px;
}

main.type-page .wp-block-image figcaption,
main.type-post .wp-block-image figcaption {
   font-size: 0.9em;
   color: #666;
   text-align: center;
   margin-top: 5px;
}

main.type-page blockquote,
main.type-post blockquote {
   font-style: italic;
   font-size: 1.2em;
   color: #444;
   border-left: 5px solid #ddd;
   padding: 10px 20px;
   margin: 20px 0;
   background-color: #f9f9f9;
}

main.type-page blockquote cite,
main.type-post blockquote cite {
   display: block;
   font-style: normal;
   font-size: 0.9em;
   margin-top: 10px;
   color: #666;
}

main.type-page button,
main.type-page .wp-block-button__link,
main.type-post button,
main.type-post .wp-block-button__link {
   display: inline-block;
   padding: 10px 20px;
   font-size: 1em;
   color: #fff;
   background-color: var(--button-color);
   border: none;
   border-radius: 5px;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

main.type-page button:hover,
main.type-page .wp-block-button__link:hover,
main.type-post button:hover,
main.type-post .wp-block-button__link:hover {
   background-color: var(--accent-d);
}

main.type-page a,
main.type-post a {
   color: var(--button-color);
   text-decoration: none;
   transition: color 0.3s ease;
}

main.type-page a:hover,
main.type-post a:hover {
   color: var(--red-main);
}

main.type-page ul,
main.type-page ol,
main.type-post ul,
main.type-post ol {
   margin: 15px 0 15px 24px;
   padding-left: 20px;
}

main.type-page ul li,
main.type-post ul li {
   list-style-type: disc;
}

main.type-page ol li,
main.type-post ol li {
   list-style-type: decimal;
}

main.type-page li,
main.type-post li {
   margin-bottom: 5px;
}

main.type-page table,
main.type-post table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px 0;
}

main.type-page table th,
main.type-page table td,
main.type-post table th,
main.type-post table td {
   padding: 10px;
   border: 1px solid #ddd;
   text-align: left;
}

main.type-page table th,
main.type-post table th {
   background-color: #f4f4f4;
   font-weight: bold;
}

main.type-page table tr:nth-child(even),
main.type-post table tr:nth-child(even) {
   background-color: #f9f9f9;
}

main.type-page .wp-block-embed,
main.type-post .wp-block-embed {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   max-width: 100%;
   margin: 20px 0;
}

main.type-page .wp-block-embed iframe,
main.type-post .wp-block-embed iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

main.type-page pre,
main.type-post pre {
   background-color: #f4f4f4;
   padding: 10px;
   border-radius: 5px;
   overflow-x: auto;
   font-family: 'Courier New', monospace;
   font-size: 0.9em;
   white-space: pre-wrap;
}

main.type-page code,
main.type-post code {
   background-color: #f4f4f4;
   padding: 2px 5px;
   border-radius: 3px;
   font-family: 'Courier New', monospace;
   font-size: 0.9em;
}

main.type-page .wp-block-columns,
main.type-post .wp-block-columns {
   display: flex;
   flex-wrap: wrap;
   margin-top: 20px;
   margin-bottom: 20px;
}

main.type-page .wp-block-column,
main.type-post .wp-block-column {
   flex: 1;
   margin: 0 10px;
}

main.type-page .wp-block-separator,
main.type-post .wp-block-separator {
   border: none;
   border-top: 1px solid #ddd;
   margin: 20px 0;
}

body main .content-width {
   max-width: var(--contentWProduct);
   width: 100%;
   margin: auto;
}
/* =========== /Основні стилі для контенту - page, post =========== */


/* -- textLikeBackground -- */
.textLikeBackground {
   --circleD: 0.7em;
   position: relative;
   font-family: 'Montserrat';
   font-size: clamp(2.6rem, 6.2vw, 5rem);
   line-height: 1.3;
   letter-spacing: clamp(0rem, 1vw, 0.2rem);
   font-weight: 900;
   text-align: center;
   color: #b9b9b9;
   padding-left: calc(var(--circleD) * 2);
   opacity: 0.4;
   margin: auto;
   width: fit-content;
   text-align: left;
}

@media (max-width: 1024px) {
   .textLikeBackground {
      /* display: none; */
   }
}

.textLikeBackground:before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   display: inline-block;
   width: var(--circleD);
   height: var(--circleD);
   margin-right: 0.5em;
   border-radius: 100%;
   background: #b9b9b9;
   vertical-align: bottom;
   transform: scale(1);
}
/* -- /textLikeBackground -- */

/* -- opacityText -- */
.opacityText {
   display: inline;
   font-size: 50px;
   font-weight: 700;
   font-family: 'Montserrat';
   line-height: 1;
   color: #fff;
   mix-blend-mode: overlay;
}
/* -- /opacityText -- */

/* -- block with gray back -- */
.blocl-w-gray-back {
   position: relative;
   display: grid;
   align-items: center;
   background-image: var(--background-img);
}
/* -- /block with gray back -- */

/* -- buttons -- */
/* ? go to - button */
.button-more {
   font-size: clamp(0.9rem, 3.5vw, 1.2rem);
   display: grid;
   align-items: center;
   align-content: center;
   gap: 1em;
   grid-template-columns: auto auto;
   width: fit-content;
   padding: 0.5em 0.9em 0.5em 1.6em;
   text-decoration: none;
   color: white;
   background: var(--button-color);
   transition: 0.35s;
   border: none;
   cursor: pointer;
   margin-top: 10px;
   border-radius: 50px;
}

.button-more:focus {
   outline: none;
}

.button-more .second {
   transition: 0.35s;
}

.button-more .span {
   transition: transform 0.35s;
}

.button-more .second-svg {
   height: 0.7em;
}

.button-more .one {
   transition: 0.4s;
   transform: translateX(-60%);
}

.button-more .two {
   transition: 0.5s;
   transform: translateX(-30%);
}

.button-more:hover .three {
   animation: color_anim 1s infinite 0.2s;
}

.button-more:hover .one {
   transform: translateX(0%);
   animation: color_anim 1s infinite 0.6s;
}

.button-more:hover .two {
   transform: translateX(0%);
   animation: color_anim 1s infinite 0.4s;
}

@keyframes color_anim {
   0% {
      fill: white;
   }

   50% {
      fill: var(--red-main);
   }

   100% {
      fill: white;
   }
}

/* ? /go to - button */

/* ? button push */
.button-push {
   position: relative;
   background: transparent;
   padding: 0px;
   border: none;
   cursor: pointer;
   outline-offset: 4px;
   outline-color: deeppink;
   transition: filter 250ms;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.button-push .shadow {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: hsl(226, 25%, 69%);
   border-radius: 8px;
   filter: blur(2px);
   will-change: transform;
   transform: translateY(2px);
   transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.button-push .edge {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   border-radius: 8px;
   background: linear-gradient(
      to right,
      hsl(248, 39%, 39%) 0%,
      hsl(248, 39%, 49%) 8%,
      hsl(248, 39%, 39%) 92%,
      hsl(248, 39%, 29%) 100%
   );
}

.button-push .front {
   display: block;
   position: relative;
   border-radius: 8px;
   background: hsl(248, 53%, 58%);
   padding: 16px 32px;
   color: white;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-size: 1rem;
   transform: translateY(-4px);
   transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.button-push:hover {
   filter: brightness(110%);
}

.button-push:hover .front {
   transform: translateY(-6px);
   transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-push:active .front {
   transform: translateY(-2px);
   transition: transform 34ms;
}

.button-push:hover .shadow {
   transform: translateY(4px);
   transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-push:active .shadow {
   transform: translateY(1px);
   transition: transform 34ms;
}

.button-push:focus:not(:focus-visible) {
   outline: none;
}
/* ? /button push */

/* ? button send */
.wpcf7-submit {
   background-color: var(--button-color);
   color: #fff;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}
.wpcf7-submit:hover {
   background-color: var(--blue-d-2);
}
.wpcf7-submit:focus {
   outline: none;
}
/* ? /button send */

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
   background-color: hsl(0deg 0% 0% / 30%);
   width: 40px;
   height: 40px;
}
/* -- /buttons -- */

input.qty {
   width: 60px;
   height: 30px;
   border: 1px solid #ccc;
   font-size: 16px;
   padding: 5px;
   border-radius: 5px;
   outline: none;
}

.woocommerce div.product form.cart .button {
   background: var(--blue-main);
   border: 1px solid var(--blue-main);
   border-radius: 4px;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.25s;
   color: #fff;
}
.woocommerce div.product form.cart .button:hover {
   background: var(--blue-d-2);
   border-color: var(--blue-d-2);
}
.woocommerce div.product form.cart .button:active {
   background: var(--blue-d-2);
   border-color: var(--blue-d-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
   background-color: var(--button-color);
   transition: all 0.25s;
   border: 1px solid #ccc;
   padding: 0;
}
.woocommerce .woocommerce-tabs ul.tabs li:not(.active):hover {
   background-color: var(--blue-d-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
   display: grid;
   color: #fff;
   transition: all 0.25s;
   padding: .5em 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after, 
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
   content: none;
}


@media (max-width: 768px) {
   .woocommerce div.product .woocommerce-tabs ul.tabs li a {
      background-repeat: no-repeat;
      color: transparent !important;!i;!;
      width: 60px;
      height: 40px;
      background-position: center;
      overflow: hidden;
   }

   div.product .woocommerce-tabs li.description_tab a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='30' fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.5 14c.2761 0 .5.2239.5.5 0 .2454222-.1769086.4496-.4101355.4919429l-.0898645.0080571h-10c-.27614 0-.5-.2239-.5-.5 0-.2454222.17687704-.4496.41012499-.4919429l.08987501-.0080571zm5-3c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-15c-.27614 0-.5-.2239-.5-.5s.22386-.5.5-.5zm0-3c.2761 0 .5.22386.5.5 0 .24545778-.1769086.4496079-.4101355.49194425l-.0898645.00805575h-15c-.27614 0-.5-.22386-.5-.5 0-.24545778.17687704-.4496079.41012499-.49194425l.08987501-.00805575zm0-3c.2761 0 .5.22386.5.5 0 .24545778-.1769086.4496079-.4101355.49194425l-.0898645.00805575h-15c-.27614 0-.5-.22386-.5-.5 0-.24545778.17687704-.4496079.41012499-.49194425l.08987501-.00805575z' /%3E%3C/svg%3E");
   }
   div.product .woocommerce-tabs li.description_tab.active a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='30' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.5 14c.2761 0 .5.2239.5.5 0 .2454222-.1769086.4496-.4101355.4919429l-.0898645.0080571h-10c-.27614 0-.5-.2239-.5-.5 0-.2454222.17687704-.4496.41012499-.4919429l.08987501-.0080571zm5-3c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-15c-.27614 0-.5-.2239-.5-.5s.22386-.5.5-.5zm0-3c.2761 0 .5.22386.5.5 0 .24545778-.1769086.4496079-.4101355.49194425l-.0898645.00805575h-15c-.27614 0-.5-.22386-.5-.5 0-.24545778.17687704-.4496079.41012499-.49194425l.08987501-.00805575zm0-3c.2761 0 .5.22386.5.5 0 .24545778-.1769086.4496079-.4101355.49194425l-.0898645.00805575h-15c-.27614 0-.5-.22386-.5-.5 0-.24545778.17687704-.4496079.41012499-.49194425l.08987501-.00805575z' /%3E%3C/svg%3E");
   }

   div.product .woocommerce-tabs li.additional_information_tab a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='23' fill='white' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.005 0c-.194-.002-.372.105-.458.276l-2.197 4.38-4.92.7c-.413.06-.578.56-.278.846l3.805 3.407-.953 4.81c-.07.406.363.715.733.523L22 12.67l4.286 2.273c.37.19.8-.118.732-.522l-.942-4.81 3.77-3.408c.3-.286.136-.787-.278-.846l-4.916-.7-2.2-4.38C22.368.11 22.195.002 22.005 0zM22 1.615l1.863 3.71c.073.148.216.25.38.273l4.168.595-3.227 2.89c-.12.112-.173.276-.145.436l.813 4.08-3.616-1.927c-.147-.076-.322-.076-.47 0l-3.59 1.926.823-4.08c.028-.16-.027-.325-.145-.438l-3.262-2.89 4.166-.594c.165-.023.307-.125.38-.272zM16.5 18c-.822 0-1.5.678-1.5 1.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5zM1.5 3C.678 3 0 3.678 0 4.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5zm0 14c-.822 0-1.5.678-1.5 1.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5z'/%3E%3C/svg%3E");
   }
   div.product .woocommerce-tabs li.additional_information_tab.active a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='23' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.005 0c-.194-.002-.372.105-.458.276l-2.197 4.38-4.92.7c-.413.06-.578.56-.278.846l3.805 3.407-.953 4.81c-.07.406.363.715.733.523L22 12.67l4.286 2.273c.37.19.8-.118.732-.522l-.942-4.81 3.77-3.408c.3-.286.136-.787-.278-.846l-4.916-.7-2.2-4.38C22.368.11 22.195.002 22.005 0zM22 1.615l1.863 3.71c.073.148.216.25.38.273l4.168.595-3.227 2.89c-.12.112-.173.276-.145.436l.813 4.08-3.616-1.927c-.147-.076-.322-.076-.47 0l-3.59 1.926.823-4.08c.028-.16-.027-.325-.145-.438l-3.262-2.89 4.166-.594c.165-.023.307-.125.38-.272zM16.5 18c-.822 0-1.5.678-1.5 1.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5zM1.5 3C.678 3 0 3.678 0 4.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5zm0 14c-.822 0-1.5.678-1.5 1.5v9c0 .822.678 1.5 1.5 1.5h9c.822 0 1.5-.678 1.5-1.5v-9c0-.822-.678-1.5-1.5-1.5zm0 1h9c.286 0 .5.214.5.5v9c0 .286-.214.5-.5.5h-9c-.286 0-.5-.214-.5-.5v-9c0-.286.214-.5.5-.5z'/%3E%3C/svg%3E");
   }

   div.product .woocommerce-tabs li.downloads_tab_tab a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='25' fill='white' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m30 25-1.414-1.414-2.586 2.586v-8.172h-2v8.172l-2.586-2.586-1.414 1.414 5 5z'/%3E%3Cpath d='m18 28h-10v-24h8v6a2.0058 2.0058 0 0 0 2 2h6v3h2v-5a.9092.9092 0 0 0 -.3-.7l-7-7a.9087.9087 0 0 0 -.7-.3h-10a2.0058 2.0058 0 0 0 -2 2v24a2.0058 2.0058 0 0 0 2 2h10zm0-23.6 5.6 5.6h-5.6z'/%3E%3Cpath d='m0 0h32v32h-32z' fill='none'/%3E%3C/svg%3E");
   }
   div.product .woocommerce-tabs li.downloads_tab_tab.active a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='25' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m30 25-1.414-1.414-2.586 2.586v-8.172h-2v8.172l-2.586-2.586-1.414 1.414 5 5z'/%3E%3Cpath d='m18 28h-10v-24h8v6a2.0058 2.0058 0 0 0 2 2h6v3h2v-5a.9092.9092 0 0 0 -.3-.7l-7-7a.9087.9087 0 0 0 -.7-.3h-10a2.0058 2.0058 0 0 0 -2 2v24a2.0058 2.0058 0 0 0 2 2h10zm0-23.6 5.6 5.6h-5.6z'/%3E%3Cpath d='m0 0h32v32h-32z' fill='none'/%3E%3C/svg%3E");
   }
   
   div.product .woocommerce-tabs li.video_tab_tab a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='27' fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='m8.76512 7.07608c-.15413-.09639-.34843-.10154-.50744-.01344-.15901.08811-.25768.25557-.25768.43736v5.15c0 .1841.10118.3533.26337.4405.1622.0871.35915.078.51266-.0236l3.99997-2.6484c.1418-.0939.2262-.2534.224-.42342-.0022-.17003-.0907-.32728-.2349-.41744z'/%3E%3Cpath d='m4.5 3c-1.38071 0-2.5 1.11929-2.5 2.5v9c0 1.3807 1.11929 2.5 2.5 2.5h11c1.3807 0 2.5-1.1193 2.5-2.5v-9c0-1.38071-1.1193-2.5-2.5-2.5zm-1.5 2.5c0-.82843.67157-1.5 1.5-1.5h11c.8284 0 1.5.67157 1.5 1.5v9c0 .8284-.6716 1.5-1.5 1.5h-11c-.82843 0-1.5-.6716-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E");
   }
   div.product .woocommerce-tabs li.video_tab_tab.active a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='27' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='m8.76512 7.07608c-.15413-.09639-.34843-.10154-.50744-.01344-.15901.08811-.25768.25557-.25768.43736v5.15c0 .1841.10118.3533.26337.4405.1622.0871.35915.078.51266-.0236l3.99997-2.6484c.1418-.0939.2262-.2534.224-.42342-.0022-.17003-.0907-.32728-.2349-.41744z'/%3E%3Cpath d='m4.5 3c-1.38071 0-2.5 1.11929-2.5 2.5v9c0 1.3807 1.11929 2.5 2.5 2.5h11c1.3807 0 2.5-1.1193 2.5-2.5v-9c0-1.38071-1.1193-2.5-2.5-2.5zm-1.5 2.5c0-.82843.67157-1.5 1.5-1.5h11c.8284 0 1.5.67157 1.5 1.5v9c0 .8284-.6716 1.5-1.5 1.5h-11c-.82843 0-1.5-.6716-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E");
   }

   div.product .woocommerce-tabs li.delivery_payment_tab_tab a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='32' fill='white' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.48 12c-.13.004-.255.058-.347.152l-2.638 2.63-1.625-1.62c-.455-.474-1.19.258-.715.712l1.983 1.978c.197.197.517.197.715 0l2.995-2.987c.33-.32.087-.865-.367-.865zM.5 16h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3c-.277 0-.5-.223-.5-.5s.223-.5.5-.5zm0-4h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3c-.277 0-.5-.223-.5-.5s.223-.5.5-.5zm0-4h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3C.223 9 0 8.777 0 8.5S.223 8 .5 8zm24 11c-1.375 0-2.5 1.125-2.5 2.5s1.125 2.5 2.5 2.5 2.5-1.125 2.5-2.5-1.125-2.5-2.5-2.5zm0 1c.834 0 1.5.666 1.5 1.5s-.666 1.5-1.5 1.5-1.5-.666-1.5-1.5.666-1.5 1.5-1.5zm-13-1C10.125 19 9 20.125 9 21.5s1.125 2.5 2.5 2.5 2.5-1.125 2.5-2.5-1.125-2.5-2.5-2.5zm0 1c.834 0 1.5.666 1.5 1.5s-.666 1.5-1.5 1.5-1.5-.666-1.5-1.5.666-1.5 1.5-1.5zm-5-14C5.678 6 5 6.678 5 7.5v11c0 .822.678 1.5 1.5 1.5h2c.676.01.676-1.01 0-1h-2c-.286 0-.5-.214-.5-.5v-11c0-.286.214-.5.5-.5h13c.286 0 .5.214.5.5V19h-5.5c-.66 0-.648 1.01 0 1h7c.66 0 .654-1 0-1H21v-9h4.227L29 15.896V18.5c0 .286-.214.5-.5.5h-1c-.654 0-.654 1 0 1h1c.822 0 1.5-.678 1.5-1.5v-2.75c0-.095-.027-.19-.078-.27l-4-6.25c-.092-.143-.25-.23-.422-.23H21V7.5c0-.822-.678-1.5-1.5-1.5z'/%3E%3C/svg%3E");
   }
   div.product .woocommerce-tabs li.delivery_payment_tab_tab.active a {
      background-image: url("data:image/svg+xml,%0A%3Csvg height='32' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.48 12c-.13.004-.255.058-.347.152l-2.638 2.63-1.625-1.62c-.455-.474-1.19.258-.715.712l1.983 1.978c.197.197.517.197.715 0l2.995-2.987c.33-.32.087-.865-.367-.865zM.5 16h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3c-.277 0-.5-.223-.5-.5s.223-.5.5-.5zm0-4h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3c-.277 0-.5-.223-.5-.5s.223-.5.5-.5zm0-4h3c.277 0 .5.223.5.5s-.223.5-.5.5h-3C.223 9 0 8.777 0 8.5S.223 8 .5 8zm24 11c-1.375 0-2.5 1.125-2.5 2.5s1.125 2.5 2.5 2.5 2.5-1.125 2.5-2.5-1.125-2.5-2.5-2.5zm0 1c.834 0 1.5.666 1.5 1.5s-.666 1.5-1.5 1.5-1.5-.666-1.5-1.5.666-1.5 1.5-1.5zm-13-1C10.125 19 9 20.125 9 21.5s1.125 2.5 2.5 2.5 2.5-1.125 2.5-2.5-1.125-2.5-2.5-2.5zm0 1c.834 0 1.5.666 1.5 1.5s-.666 1.5-1.5 1.5-1.5-.666-1.5-1.5.666-1.5 1.5-1.5zm-5-14C5.678 6 5 6.678 5 7.5v11c0 .822.678 1.5 1.5 1.5h2c.676.01.676-1.01 0-1h-2c-.286 0-.5-.214-.5-.5v-11c0-.286.214-.5.5-.5h13c.286 0 .5.214.5.5V19h-5.5c-.66 0-.648 1.01 0 1h7c.66 0 .654-1 0-1H21v-9h4.227L29 15.896V18.5c0 .286-.214.5-.5.5h-1c-.654 0-.654 1 0 1h1c.822 0 1.5-.678 1.5-1.5v-2.75c0-.095-.027-.19-.078-.27l-4-6.25c-.092-.143-.25-.23-.422-.23H21V7.5c0-.822-.678-1.5-1.5-1.5z'/%3E%3C/svg%3E");
   }
}
/* ------------------- */




.swiper-button-prev:after,
.swiper-button-next:after {
   content: '';
}

/* ============ page pages ============ */
main.type-page {
   background-color: var(--background-color);
   min-height: 100dvh;
}

main.type-page p {
   margin-bottom: 15px;
}

iframe {
   width: 100%;
}
/* ============ /page page ============ */

/* ============ woocommerce ============ */
.xoo-wsc-modal .xoo-wsc-container .xoo-wsc-basket {
   display: none !important;
}
/* ============ /woocommerce ============ */

/* ============ delivery and payment ============ */
.custom-style-content-1 .wp-block-column {
   background-color: #ddd;
   background-color: color-mix(in srgb, #ccc, transparent 50%);
   border-radius: 8px;
   padding: 0px 20px;
   color: #333;
   background-image: url(../images/4.png);
}
.custom-style-content-1 h2 {
   color: var(--blue-d-1);
}
.custom-style-content-1 .wp-block-column h3 {
   font-size: clamp(1.3rem, 1.4vw, 1.4rem);
   line-height: clamp(1.7rem, 1.6vw, 1.8rem);
}
/* ============ /delivery and payment ============ */

/* ============ contact page ============ */
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-response-output {
   /* display: none; */
}

body .wpcf7 form.invalid .wpcf7-response-output, 
body .wpcf7 form.unaccepted .wpcf7-response-output, 
body .wpcf7 form.payment-required .wpcf7-response-output {
   border-color: var(--red-main);
   margin: 0;
}

.wpcf7-form .wpcf7-not-valid {
   border-color: var(--red-l-2);
   box-shadow: inset 0 0 0px 3px var(--red-l-2);
}
/* ============ /contact page ============ */

/* ============ side block - cart ============ */
.xoo-wsc-product .xoo-wsc-pprice {
   display: flex;
   flex-direction: column;
}
/* ============ /side block - cart ============ */

/* ============ 404 ============ */
main.error-404 {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 520px;
   background-color: #f9f9f9;
   font-family: Arial, sans-serif;
   text-align: center;
}

main.error-404 .error-content {
   max-width: 600px;
   padding: 40px;
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

main.error-404 h1 {
   font-size: 8em; /* Великий розмір тексту "404" */
   color: var(--button-color); /* Червоний колір для акценту */
   margin-bottom: 40px;
   font-weight: bold;
   letter-spacing: -2px; /* Легше розширення букв */
}

main.error-404 p {
   font-size: 1.2em;
   color: #555;
   margin-bottom: 30px;
   line-height: 1.5;
}

main.error-404 a.back-to-home {
   display: inline-block;
   padding: 12px 24px;
   font-size: 1em;
   color: #fff;
   background-color: var(--button-color); /* Голубий колір кнопки */
   text-decoration: none;
   border-radius: 4px;
   transition: background-color 0.3s ease;
}

main.error-404 a.back-to-home:hover {
   background-color: #025aa5; /* Темніший варіант голубого при наведенні */
}
/* ============ /404 ============ */


/* --- stock status --- */
.product_cat-vsi-tovary:has(.onbackorder) .custom-qty-wrapper,
.product_cat-vsi-tovary:has(.discontinued) .custom-qty-wrapper,
.product_cat-vsi-tovary:has(.out-of-stock) .custom-qty-wrapper {
   /* display: none; */
   filter: grayscale(1);
   pointer-events: none;
}

/* --- /stock status --- */




.search-section {
   grid-area: search;
   position: relative;
   justify-self: center;
   max-width: 1000px;
   width: 100%;
   height: inherit;
   overflow: hidden;
}

.main-header {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   margin: auto;
   width: 100%;
   z-index: 80;
   height: 100%;
   background-color: hsl(0deg 0% 100% / 100%);
   background: linear-gradient(180deg, #fafcf6 0%, #ffffff00 100%);
   backdrop-filter: blur(13px) grayscale(1);
   box-shadow: 0 2px 7px 0px rgba(0, 0, 0, 0.08);
}
.main-header:before {
   /* content: ''; */
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background-image: var(--background-img-footer);
   opacity: 0.4;
}
.main-header a {
   color: var(--mainColor);
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
   padding-bottom: 2px;
   transition: all 0.25s;
}

.top-menu-body > .current-menu-item > a,
#top-nav-ul > .menu-item > a:hover {
   color: var(--red-main);
}

.header-box-desctop {
   position: relative;
   display: grid;
   justify-items: right;
   align-items: center;
   margin: auto;
   height: 100%;
   max-width: var(--contentW);
   padding: 0 15px;
   transition: all 0.3s ease-in-out;
   align-self: baseline;
}
.header__logo {
   grid-area: logo;
   justify-self: left;
   font-size: clamp(18px, 2vw, 22px);
   height: 100%;
   max-height: 100%;
}
.header__logo-item {
   max-width: 190px;
   transition: all 0.1s linear;
   object-fit: contain;
   !i;!;
   height: var(--headerHStart) !important;!i;!;
   padding: 5px 0;
}
.logo__textVersion {
   color: var(--accent);
}

header .navbar-header {
   grid-area: menu;
}

.header-cart {
   grid-area: cart;
}

.header-cart .search--show {
   display: grid;
   align-items: center;
   justify-content: center;
   padding: 0;
   background-color: transparent;
   cursor: pointer;
}

.header-cart {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 20px;
}

.header-cart .search--show svg {
   --size: 23px;
   width: var(--size);
   height: var(--size);
}

.header-cart .search--show svg,
.xoo-wsc-icon-cart1:before,
.xoo-wsc-sc-count {
   transition: all 0.25s ease-in-out;
}

@media (hover: hover) {
   .header-cart .search--show svg:hover {
      fill: var(--red-main);
   }
   .xoo-wsc-icon-cart1:hover:before {
      color: var(--red-main);
   }

   .xoo-wsc-icon-cart1:hover + .xoo-wsc-sc-count {
      background-color: var(--blue-main);
   }
}

.show-search .header-cart .search--show svg {
   fill: var(--red-main);
}

.show-top-menu .toggle-inner,
.show-top-menu .toggle-inner:before,
.show-top-menu .toggle-inner:after {
   border-color: var(--red-main);
}

.header-cart .xoo-wsc-sc-subt {
   display: none;
}

.xoo-wsc-sc-cont .xoo-wsc-cart-trigger > * {
   margin-right: 10px;
}

.top-main-section {
   transition: all 0.3s ease-in-out;
}

.show-search .header-box-desctop {
   grid-template-rows: 1fr 1fr;
}

@media (min-width: 1021px) {
   .header-box-desctop {
      grid-template-areas:
         'search search search'
         'logo menu cart';
      grid-template-rows: 0fr auto;
      grid-template-columns: 190px 1fr auto;
      column-gap: clamp(1rem, 10vw, 2rem);
      row-gap: 0;
   }

   .show-search .top-main-section {
      /* grid-template-rows: auto 1fr; */
      --headerH: 10.5rem;
   }
}
@media (max-width: 1020px) {
   .show-search .top-main-section {
      --headerH: 8.5rem;
   }

   .main-header a {
      font-size: 1.2rem;
   }
   .top-menu .sub-menu .menu-item a {
      position: relative;
      font-size: 1rem;
   }
   .top-menu .sub-menu .menu-item a:before {
      content: '-';
      position: absolute;
      left: 0;
   }
   .header__logo-item {
      max-height: 40px;
   }
   .top-main-section {
      grid-template-rows: auto var(--headerH) 1fr;
   }
   .header-box-desctop {
      grid-template-areas:
         'search search search'
         'logo menu cart';
      grid-template-rows: 0fr auto;
      grid-template-columns: 190px 1fr auto;
      /* align-items: center; */
      justify-content: space-between;
      justify-items: unset;
      row-gap: 0;
      column-gap: 25px;
   }
   .header__logo {
      display: grid;
      justify-self: stretch;
   }
   .header-box-desctop .navbar-header {
      display: none;
   }
}
/* -- menu -- */
.mobile-navigation-toggle {
   display: none;
   position: relative;
   background: #f5f5f5;
   align-items: center;
   justify-content: center;
   z-index: 1;
   overflow: visible;
   height: 100%;
   margin: 0;
   padding: 0;
   font-size: 0;
   cursor: pointer;
   text-align: center;
   vertical-align: middle;
}
@media (max-width: 1020px) {
   .mobile-navigation-toggle {
      display: grid;
      justify-self: right;
      background: transparent;
      justify-content: end;
   }
}
.toggle-box {
   position: relative;
   display: inline-block;
   width: 25px;
   height: 24px;
   vertical-align: middle;
}
.toggle-inner {
   top: 50%;
   display: block;
   margin-top: -1px;
}
.toggle-inner,
.toggle-inner:before,
.toggle-inner:after {
   position: absolute;
   width: 25px;
   height: 0;
   border-top: 2px solid;
   /* border-color: var(--button-color); */
   transition: all 0.22s ease;
}
.toggle-inner:before,
.toggle-inner:after {
   display: block;
   content: '';
}
.toggle-inner:before {
   top: -9px;
}
.toggle-inner:after {
   bottom: -7px;
}
.mobile-navigation-toggle.is-active .toggle-inner {
   transform: rotate(45deg);
}
.mobile-navigation-toggle.is-active .toggle-inner:before {
   top: 0;
   opacity: 0;
}
.mobile-navigation-toggle.is-active .toggle-inner:after {
   bottom: 0;
   transform: rotate(-90deg);
}
@media (min-width: 1021px) {
   .top-menu-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(1.875rem, 5vw, 3.125rem);
      gap: clamp(1.875rem, 3vw, 3.125rem);
   }
}

.top-menu .sub-menu {
   margin-left: 0;
   z-index: 555;
   text-align: left;
}
/* @media (max-width: 1020px) {
   .top-menu .sub-menu {
      display: none;
   }
} */

.top-menu .sub-menu .menu-item a {
   position: relative;
   display: block;
   line-height: 24px;
   padding-left: 15px;
   transition: 0.22s;
    padding: 8px 15px 8px;
}
@media (hover: hover) {
   .top-menu .sub-menu .menu-item:hover a {
      background-color: hsl(0deg 2% 83% / 60%);
   }
}
@media (min-width: 1021px) {
   .top-menu .menu-item-has-children > a::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 12px;
      height: 12px;
      margin-left: 5px;
      background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='%236e6d6d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L4 3.5L7 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      padding-bottom: 10px;
   }
}
.top-menu .menu-item-has-children {
   cursor: pointer;
}
.top-menu .menu-item-has-children > a {
   /* pointer-events: none; */
}

@media (min-width: 1021px) {
   .top-menu .menu-item-has-children {
      perspective: 500px;
   }
   .top-menu .menu-item-has-children .sub-menu {
      margin-top: 18px;
      text-align: left;
      position: absolute;
      left: -10px;
      width: 250px;
      box-shadow: 6px 6px 5px rgb(77 77 77 / 20%);
      border-bottom: 3px solid var(--blue-main);
      opacity: 0;
      transform: rotate3d(1, 0, 0, -90deg);
      transform-origin: 0 0 0;
      transition: opacity 0.3s, transform 0.5s;
      background-image: url(../images/2.png);
      background-color: #ebebeb;
      overflow: hidden;
   }
   .top-menu .menu-item-has-children:hover > .sub-menu {
      opacity: 1;
      transform: rotate3d(0, 0, 0, 0);
   }
   .top-menu .menu-item-has-children:hover:before {
      content: '';
      position: absolute;
      bottom: -100%;
      display: block;
      width: 100%;
      height: 100%;
   }

   /* ^ ------------------- */
   .top-menu .custom-submenu:has(.sub-menu .current-menu-item) > a,
   .top-menu .sub-menu .current-menu-item a {
      color: var(--red-main);
   }

   .top-menu .menu-item-has-children .sub-menu a {
      font-weight: 100;
   }
   .top-menu .menu-item-has-children .sub-menu a:hover {
      background-color: hsl(0deg 2% 83% / 60%);
   }

   .top-menu .menu-item-has-children .sub-menu a::before {
      content: '';
      position: absolute;
      width: 100px;
      height: 100%;
      background-image: linear-gradient(
         120deg,
         rgba(255, 255, 255, 0) 30%,
         rgba(255, 255, 255, 0.8),
         rgba(255, 255, 255, 0) 70%
      );
      top: 0;
      left: -100px;
      opacity: 0.6;
   }

   .top-menu .menu-item-has-children .sub-menu a:hover::before {
      animation: shineMenu 1.25s ease-out;
   }

   @keyframes shineMenu {
      0% {
         left: -100px;
      }

      60% {
         left: 100%;
      }

      to {
         left: 100%;
      }
   }
}

/* -- ================================ -- */

.header-box-media {
   overflow: hidden;
   padding: 10px 20px;
}

@media (max-width: 1020px) {
   main,
   .header-box-media,
   .header-box-desctop {
      transition: all 0.5s;
   }

   .header-box-media {
      width: var(--sideMenu);
      background-color: #fff;
      height: 100svh;
      transform: translateX(calc(0px - var(--sideMenu)));
   }

   body.show-top-menu {
      overflow: hidden;
   }

   .show-top-menu .header-box-media {
      transform: translateX(0px);
      box-shadow: 6px 6px 5px rgb(77 77 77 / 20%);
      background-color: #ebebeb;
      background-image: url(../images/2.png);
      padding-top: 30px;
   }

   /* .show-top-menu .header-box-desctop {
    grid-template-columns: calc(var(--sideMenu) - 15px) 1fr auto;
  } */

   .for-header-mobile-menu-wrapper .top-menu-body {
      display: grid;
      gap: 20px;
   }
}

@media (min-width: 1021px) {
   .header-box-media {
      pointer-events: none;
   }
}
/* -- /menu -- */

/* --- header search --- */
.dgwt-wcas-style-pirx.dgwt-wcas-search-filled
   .dgwt-wcas-sf-wrapp
   input[type='search'].dgwt-wcas-search-input {
   padding-right: 90px;
}

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






/* --- form popup --- */
:root {
    /* Кольори */
    --popup-overlay-bg: rgba(0, 0, 0, 0.6);
    --popup-bg: #ffffff;
    --popup-text-color: #333333;
    --popup-close-color: #666666;
    --popup-close-hover: #000000;
    
    /* Розміри */
    --popup-max-width: 600px;
    --popup-padding: 50px 60px 30px 30px;
    --popup-border-radius: 12px;
    
    /* Анімація */
    --popup-animation-duration: 0.3s;
    --popup-animation-timing: ease-out;
    
    /* Z-index */
    --popup-z-index: 1000;
}

/* Кнопка відкриття popup */
.open-popup-btn {
    padding: 12px 24px;
    font-size: 16px;
    background-color: var(--button-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.open-popup-btn:hover {
    background-color: var(--blue-d-2);
}

/* Overlay (затемнений фон) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--popup-overlay-bg);
    z-index: var(--popup-z-index);
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Початковий стан - сховано */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--popup-animation-duration) var(--popup-animation-timing),
                visibility var(--popup-animation-duration) var(--popup-animation-timing);
}

/* Активний стан overlay */
.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Контейнер popup */
.popup-container {
    position: relative;
    max-width: var(--popup-max-width);
    width: 90%;
    background-color: var(--popup-bg);
    border-radius: var(--popup-border-radius);
    padding: var(--popup-padding);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    
    /* Анімація - початкова позиція зверху */
    transform: translateY(-100px);
    transition: transform var(--popup-animation-duration) var(--popup-animation-timing);
}

.popup-container .wpcf7-form input:not([type='submit']) {
   background-color: var(--background-color);
}

/* Активний стан popup - випливає вниз */
.popup-overlay.active .popup-container {
    transform: translateY(0);
}

/* Кнопка закриття */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--popup-close-color);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.popup-close:hover {
    color: var(--popup-close-hover);
}

/* Контент popup */
.popup-content {
    color: var(--popup-text-color);
}

.popup-content h2 {
    margin-bottom: 15px;
    font-size: 24px;
}

.popup-content p {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Блокування прокрутки body при відкритому popup */
body.popup-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
}

/* Адаптив */
@media (max-width: 768px) {
    :root {
        --popup-padding: 20px;
    }
    
    .popup-container {
        width: 95%;
    }
}
/* --- form popup --- */



footer {
   background-color: var(--footer);
   background-image: var(--background-img-footer);
   padding: clamp(41px, 5vw, 74px) 15px 20px;
   margin: auto;
   width: 100%;
}

footer .global-inner-content {
   display: grid;
   gap: clamp(30px, 5vw, 60px);
}

.footer-top {
   display: grid;
   align-items: start;
   gap: 40px;
}

@media (max-width: 768px) {
   .footer-top {
      grid-template-areas:
         'logo'
         'time-work'
         'contacts'
         'form'
         'menu'
         'cat-menu';
      justify-content: center;
   }
}

@media (min-width: 769px) and (max-width: 1023px) {
   .footer-top {
      grid-template-areas:
         'logo logo logo'
         'contacts time-work time-work'
         'menu cat-menu cat-menu'
         'form form form';

      grid-template-columns: 1fr 1fr 0fr;
   }
}

@media (min-width: 1024px) {
   .footer-top {
      grid-template-areas:
         'logo logo logo'
         'contacts time-work form'
         'menu cat-menu form';
      grid-template-columns: 1.1fr 1fr 2fr;
   }
}

.footer-top__logo {
   grid-area: logo;
}

.footer-top__contacts {
   grid-area: contacts;
}

.footer-top__time-work {
   grid-area: time-work;
}

.footer-bottom__menu {
   grid-area: menu;
}

.footer-top__cat-menu {
   grid-area: cat-menu;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~ */

footer ul,
footer ol {
   display: grid;
   list-style: none;
   padding: 0;
   margin: 0;
   row-gap: 0.3rem;
   column-gap: 1.4rem;
}

footer h3,
footer h4,
footer h5,
footer h6 {
   font-size: 1.6rem;
}

.footer-top__contacts,
.footer-top__time-work,
.footer-top__info,
.footer-bottom__menu {
   display: grid;
   gap: 12px;
}

.call-back-form {
   grid-area: form;
}
.footer-top__contacts .contacts-list {
   display: flex;
   flex-wrap: wrap;
}

.footer-top__contacts .social-item {
   margin-top: 0.4rem;
   transition: all .2s;
}
.footer-top__contacts .social-item:hover {
   transform: scale(1.15);
}
.footer-top__contacts .contacts-list li.row-item {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 5px;
   width: 100%;
}

.footer-top__contacts .contacts-list .row-item__link {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 10px;
   align-items: start;
   width: fit-content;
   text-decoration: none;
}

.footer-top__contacts .contacts-list .row-item__icon {
   position: relative;
   top: 5px;
}

.footer-bottom__menu .bottom-menu {
   display: grid;
   gap: 6px;
   padding-left: 20px;
   padding: 0;
}

footer a {
   color: var(--text);
   transition: all 0.25s;
}

footer .current-menu-item a {
   color: var(--red-main);
   font-weight: bold;
}

footer a:hover {
   color: var(--red-main);
}

footer svg {
   fill: var(--text);
   transition: all 0.25s;
}
.copyright__text {
   text-align: center;
}

/* ============ call back ============ */
.call-back-form {
   display: grid;
   gap: 12px;
   max-width: 500px;
}

.wpcf7-form {
   display: grid;
   gap: 15px;
}

.wpcf7-form input:not([type='submit']) {
   border-radius: 4px;
   padding: 10px 10px 10px 50px;
   background-repeat: no-repeat;
   background-position: 10px center;
   background-size: 20px;
   width: 100%;
}

.wpcf7-form input[name='your-name'] {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 0c-1.1 0-2 1.12-2 2.5s.9 2.5 2 2.5 2-1.12 2-2.5-.9-2.5-2-2.5zm-2.09 5c-1.06.05-1.91.92-1.91 2v1h8v-1c0-1.08-.84-1.95-1.91-2-.54.61-1.28 1-2.09 1s-1.55-.39-2.09-1z'/%3E%3C/svg%3E%0A");
}
.wpcf7-form input[name='phone'] {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m497.39 361.8-112-48a24 24 0 0 0 -28 6.9l-49.6 60.6a370.66 370.66 0 0 1 -177.19-177.19l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112a24.16 24.16 0 0 0 -27.5-13.9l-104 24a24 24 0 0 0 -18.6 23.39c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0 -14.01-27.6z'/%3E%3C/svg%3E%0A");
}
.wpcf7-form input[name='your-email'] {
   background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' width='80px' height='80px' viewBox='0 0 56.223 36.223' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='email_unread' data-name='email unread' d='M798.377,169.859h.012a2.16,2.16,0,0,0,1.181-.346l.092-.059.063-.039,1.071-.887,25.563-21.094a.3.3,0,0,0-.239-.123H770.492a.291.291,0,0,0-.183.066l26.745,22.045A2.1,2.1,0,0,0,798.377,169.859ZM770.2,150.3v31.268l19.159-15.476Zm37.084,15.9,19.139,15.38V150.4Zm-6.085,5.021a4.559,4.559,0,0,1-5.619.005l-4.388-3.619L770.2,184.558v.053a.3.3,0,0,0,.3.3h55.625a.3.3,0,0,0,.3-.3v-.049l-20.974-16.852Z' transform='translate(-770.195 -147.311)'/%3E%3C/svg%3E");
}
/* ============ /call back ============ */