@font-face { font-family: "PF Bulletin Sans Pro"; font-display: swap; src: local("PFBulletinSansPro-Regular"), url("../fonts/PFBulletinSansPro-Regular_subset.woff2") format("woff2"), url("../fonts/PFBulletinSansPro-Regular_subset.woff") format("woff"), url("../fonts/PFBulletinSansPro-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: "PF Bulletin Sans Pro"; font-display: swap; src: local("PFBulletinSansPro-Medium"), url("../fonts/PFBulletinSansPro-Medium_subset.woff2") format("woff2"), url("../fonts/PFBulletinSansPro-Medium_subset.woff") format("woff"), url("../fonts/PFBulletinSansPro-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; }
@font-face { font-family: "PF Bulletin Sans Pro"; font-display: swap; src: local("PFBulletinSansPro-Bold"), url("../fonts/PFBulletinSansPro-Bold_subset.woff2") format("woff2"), url("../fonts/PFBulletinSansPro-Bold_subset.woff") format("woff"), url("../fonts/PFBulletinSansPro-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }
@font-face { font-family: "Gravity Light"; font-display: swap; src: local("Gravity Light"), url("../fonts/Gravity Light.woff2") format("woff2"), url("../fonts/Gravity Light.woff") format("woff"); font-weight: 400; font-style: normal; }
:root { --scale-factor: 0; --scale-factor-480: 0; --scale-factor-640: 0; --scale-factor-980: 0; --ink-900: #0b2b2a; --ink-700: #22403e; --ink-400: #7c9997; --ink-500: #4d6a67; --teal-100: #e3f9f5; --teal-400: #2fd3c4; --teal-500: #14a89c; --teal-600: #0f8b82; --accent: #ff4d6d; --accent2: #ffd400; --ease-out: cubic-bezier(.16, 1, .3, 1); --text-secondary: var(--ink-400); }
/* ==================== BASE AND GLOBAL ELEMENTS ==================== */
body { margin: 0 auto; color: #060606; position: relative; font-family: "PF Bulletin Sans Pro"; font-weight: 500; background: rgba(167, 235, 249, 0.2); }
.wrap { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 calc(5px + 1%); height: 100%; }
a { color: #0099cc; text-decoration: none; }
a:hover { text-decoration: none; }
/* ==================== TYPOGRAPHY UTILITIES ==================== */
.px18 { font-size: 18px; }
.px20 { font-size: 20px; }
.px24 { font-size: 24px; }
.px28 { font-size: 28px; }
.px30 { font-size: 30px; }
.px32 { font-size: 32px; }
.px35 { font-size: 35px; }
.px40 { font-size: 40px; }
.px45 { font-size: 45px; }
.px50 { font-size: 50px; }
.px57 { font-size: 57px; }
.px68 { font-size: 68px; }
.px80 { font-size: 80px; }
.px90 { font-size: 90px; }
sup { font-size: 70%; line-height: 100%; vertical-align: top; }
img { display: block; height: auto; }
h2, h3 { font-weight: 500; }
.upp { text-transform: uppercase; }
.bold { font-weight: bold; }
.regular { font-weight: 400; }
.center { text-align: center; }
.lh120 { line-height: 120%; }
.lh140 { line-height: 140%; }
.teal-500 { color: var(--teal-500); }
.ink-500 { color: var(--ink-500); }
.red2 { color: #a50606; }
.black { color: #060606; }
.white { color: #fff; }
.rel { position: relative; }
.w100 { width: 100%; height: auto; }
.nowrap { white-space: nowrap; }
/* ==================== FLEX UTILITIES ==================== */
.flex { display: flex; }
.flex-between { justify-content: space-between; }
.flex-center { justify-content: center; }
.flex-left { justify-content: flex-start; }
.flex-right { justify-content: flex-end; }
.flex-top { align-items: flex-start; }
.flex-mid { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
/* ==================== COMMON FORMS ==================== */
.order form input { width: 100%; padding: 1em 0.5em 1em 3em; box-sizing: border-box; outline: none; transition: all 1s; color: var(--ink-400); box-shadow: rgba(76, 194, 207, 0.4) 0px 0px 0.3em, rgba(76, 194, 207, 0.2) 0px 0px 1em; backdrop-filter: blur(0.8em); text-decoration: none; margin: 0.5em 0px; border-radius: 1em 0px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255); border-image: initial; background-color: rgba(255, 255, 255, 0.1); }
.order .field-icon { position: absolute; left: 1em; top: 50%; transform: translateY(-50%); width: 1.8em; height: 1.8em; color: var(--ink-400); pointer-events: none; transition: color .3s; }
.order input:focus ~ .field-icon { color: var(--teal-500); }
.order .btn { position: relative; margin: 0.5em 0; display: inline-block; outline: none; border: 0; background: #e91735; color: #fff; padding: 1.2em 2.5em 1.05em; border-radius: 0.4em; cursor: pointer; transition: transform 0.3s; }
.order .btn:hover { transform: scale(0.98); }
form .overlay-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
form .call-privacy { display: inline-block; opacity: 0.8; margin: 0 auto; padding: 1em 0 2em; text-align: left; column-gap: 0.5em; }
form .call-privacy .privacy { width: calc(100% - 3em); }
form .call-privacy a { color: #024ea2; text-decoration: underline; }
form .call-privacy a:hover { text-decoration: none; }
form .checkbox-custom { opacity: 0; position: absolute; display: none; }
form .checkbox-custom + .checkbox-custom-label:before { content: ""; background: #fff; border: 0.1em solid #0099cc; cursor: pointer; display: inline-block; vertical-align: middle; width: 1em; height: 1em; border-radius: 50%; padding: 0.15em; margin-right: 0.5em; text-align: center; transition: border 0.3s, box-shadow 0.3s; }
form .checkbox-custom + .checkbox-custom-label.attension:before { content: ""; background: #fff; border: 0.1em solid #ff0000; cursor: pointer; display: inline-block; vertical-align: middle; width: 1em; height: 1em; border-radius: 50%; padding: 0.15em; margin-right: 0.5em; text-align: center; box-shadow: 0 0 1em #ff0000; }
form .checkbox-custom:checked + .checkbox-custom-label:before { content: ""; background: #fff url(../new_images/check-policy.png) no-repeat 50% 50%; background-size: 75%; color: #fff; box-shadow: 0 0 1em rgba(255, 255, 255, 0.5); }
/* ==================== PAGE SHELL ==================== */
.content { position: relative; width: 100%; max-width: 2560px; background: radial-gradient(ellipse 120% 80% at 50% -10%, #f7fffe 0%, #f4faf9 45%, #eef7f6 100%); overflow: hidden; margin: 0 auto; box-shadow: 0 0 1.5em rgba(13, 43, 98, 0.3); }
/* ==================== SCROLL TO TOP ==================== */
#scrollToTop { display: none; position: fixed; left: 2%; bottom: 2%; width: 3em; height: 3em; background: #cef9f8; z-index: 10; border-radius: 50%; cursor: pointer; transition: opacity 0.3s; }
#scrollToTop.show:hover { opacity: 0.8; }
#scrollToTop.show { display: block; animation: fadeIn 1.5s ease 1; opacity: 0.5; }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.5; }
}
/* ==================== HEADER AND NAVIGATION ==================== */
header { padding: 0.8em 0; position: absolute; width: 100%; top: 0; left: 0; z-index: 100; }
header .logo { width: 15%; min-width: 180px; opacity: 1; }
header .right_block { width: 80%; }
header nav { width: 96%; padding-top: 0.5em; column-gap: 1.5em; }
header a { color: #0e46ad; font-weight: 500; padding: 0.5em 0; position: relative; text-decoration: none; }
header nav a p { margin-bottom: 0; }
header nav .link { display: inline-block; color: #fff; background: var(--teal-500); padding: 0.4em 0.65em; border-radius: 0.5em; transition: background 0.3s; }
header nav .link:hover { background: #fff; color: #4d95b3; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); }
header .order_btn { font-size: 22px; display: block; text-decoration: none; padding: 0.4em 1em; border-radius: 0.3em; background: #e91735; transition: transform 0.3s; color: #fff; }
header .order_btn:hover { transform: scale(1.05); }
header .menu_item_mob { display: none; }
header .mobile-nav-expand { display: none; position: relative; width: 3em; height: 2.5em; max-width: 40px; max-height: 35px; }
header .menu-button { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: block; transition: transform 0.3s; }
header .menu-button .bar { position: absolute; width: 100%; height: 0.4em; background-color: #024ea2; border-radius: 0.4em; transition: transform 0.3s, opacity 0.3s; }
header .menu-button .bar-1 { top: 0; }
header .menu-button .bar-2 { top: 50%; transform: translate(0, -50%); }
header .menu-button .bar-3 { bottom: 0; }
header .menu-button.open { transform: rotate(180deg); }
header .menu-button.open .bar-2 { opacity: 0; }
header .menu-button.open .bar-1 { transform: rotate(45deg) translate(-5%, -40%); position: absolute; top: 50%; }
header .menu-button.open .bar-3 { transform: rotate(-45deg) translate(-4%, 40%); position: absolute; bottom: 50%; }
header.fixed { position: fixed; height: calc(5em + 0.15em); max-width: 2560px; left: 50%; transform: translate(-50%, 0); border-bottom: 0.15em solid #fff; box-shadow: 0 0.2em 1em rgba(13, 43, 98, 0.5); background: #d3faf9; z-index: 1000; }
header.fixed .logo { visibility: visible; opacity: 1; transition: all 0.3s; }
.bg_scale { background-size: 2560px; }
.bg_object { position: absolute; width: 2560px; left: 50%; transform: translateX(-50%); pointer-events: none; }
/* ==================== REVIEW MODAL ==================== */
#review-form { max-width: 750px; width: 100%; padding: calc(20px + 2%) 0; margin: 0 auto; }
#review-form label { display: block; text-align: left; padding: 0.5em 0; }
#review-form form { max-width: 600px; margin: 0 auto; padding: 2em 1em 0; }
#review-form form input { padding: calc(12px + 1%) 0; border-radius: 30px; border: 0.1em solid #ccc; outline: none; text-indent: 1em; }
#review-form form textarea { width: 100%; padding: 1.5em 1em; resize: none; border-radius: 20px; background: #fff; border: 0.1em solid #ccc; outline: none; }
#review-form .rating { padding: 10px 0 calc(10px + 1%); }
#review-form .rating-area { padding-left: 10px; }
#review-form .rating-area label { padding: 0 !important; }
#review-form .rating-area:not(:checked) > input { display: none; }
#review-form .rating-area:not(:checked) > label { float: right; width: 25px; padding: 0; cursor: pointer; font-size: 28px; line-height: 120%; color: lightgrey; text-shadow: 1px 1px #bbb; }
#review-form .rating-area:not(:checked) > label:before { content: "★"; }
#review-form .rating-area > input:checked ~ label { color: gold; text-shadow: 1px 1px #c60; }
#review-form .rating-area:not(:checked) > label:hover, #review-form .rating-area:not(:checked) > label:hover ~ label { color: gold; }
#review-form .rating-area > input:checked + label:hover, #review-form .rating-area > input:checked + label:hover ~ label, #review-form .rating-area > input:checked ~ label:hover, #review-form .rating-area > input:checked ~ label:hover ~ label, #review-form .rating-area > label:hover ~ input:checked ~ label { color: gold; text-shadow: 1px 1px goldenrod; }
#review-form .half { width: 46%; }
#review-form .half input { width: 100%; }
#review-form .full { width: 100%; text-align: center; }
#review-form .button { width: calc(50% - 1em); margin: 1em 0; display: inline-block; padding: 0.4em 0.6em; border-radius: 0.3em; background: #fff; color: #293a8e; border: 0.1em solid #293a8e; cursor: pointer; transition: all 0.5s; }
#review-form .button:hover { background: #293a8e; color: #fff; transform: scale(1.05); box-shadow: 0 0.2em 1em rgba(13, 43, 98, 0.5); }
#review-send { width: 100%; max-width: 640px; color: #000; text-align: center; padding: calc(10px + 2%) 3%; position: relative; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); background: #fff; }

#success-send {width: 100%; max-width: 720px; line-height: 120%; text-align: center; padding: calc(30px + 3%) 5%; position: relative; box-shadow: 0 5px 10px rgba(0,0,0,0.1); background: #f0f7f6; color: var(--teal-500);}
#success-send .fancybox-close-small {background: transparent; color: #ff0000;}

#policy { max-width: 1200px; width: 100%; padding: calc(20px + 2%) 0; margin: 0 auto; background: #fff;}
#policy h1 {padding-bottom: 0.8em}
#policy p {padding: 0.5em 0; font-weight: 400;}
#policy ul {padding: 0.5em 0; list-style-type: disc; margin-left: calc(1em + 2%); font-weight: 400;}
#policy .info_text h3 {padding: 1.5em 0 0.5em;}
#policy .info_text h3:nth-child(1) {padding: 0em 0 0.5em;}

/* Окно политики обработки в Fancybox */
.fancybox__container .fancybox__slide.has-iframe {padding: 0 !important; overflow: hidden;}

.fancybox__container .fancybox__slide.has-iframe > .fancybox__content {
    width: min(1200px, calc(100vw - 32px)) !important;
    height: min(80vh, calc(100vh - 32px)) !important;

    /* Убираем стандартные внутренние отступы Fancybox */
    padding: 0 !important;
    overflow: hidden;

    /* Стили как у .doc-section */
    border: 2px solid #fff;
    border-radius: 1.5em;
    box-shadow:
        0 0 0.8em rgba(76, 194, 207, 0.4),
        0 0 2em rgba(76, 194, 207, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.fancybox__container .fancybox__slide.has-iframe
    > .fancybox__content
    > .fancybox__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}


/* ==================== HERO ==================== */
.block1 { background-image: url("../new_images/bg/bg_header.webp"); background-position: 50% 0%; background-repeat: no-repeat; padding: 8em 0 0em; }
.block1 .bg_object .img_left { width: 30%; bottom: 0; left: 0; transform: translate(0%, 0%); }
.block1 .bg_object { bottom: 0; }
.block1 .bg_object .leaf { width: 130%; position: absolute; bottom: 0; left: 0; opacity: 1; transform: translate(-30%, 0%) scaleY(-1); z-index: -1; }
.block1 .pre_title { display: inline-flex; align-items: center; padding: 0.6em 1.2em 0.5em; border-radius: 999px; background: var(--teal-100); border: 1px solid rgba(20, 168, 156, 0.2); letter-spacing: 0.05em; margin-bottom: 1em; }
.block1 .pre_title span { padding: 0 0.5em; }
.block1 h2 { width: 100%; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8); padding-bottom: 0.8em}
.block1 .text { width: 50%; row-gap: 1.6em; }
.block1 .text h3 { padding-top: 1.2em; }
.block1 .text ul .ico { width: 2em; height: 2em; border-radius: 50%; background: rgba(255, 255, 255, 1); backdrop-filter: blur(6px); border: 1px solid #fff; box-shadow: 0 0 1em rgba(255, 255, 255, 1); }
.block1 .text ul p {text-shadow: 0.03em 0.03em 0.04em rgba(255, 255, 255, 0.6); }
.block1 .text ul { position: relative; width: 100%; padding-bottom: 0.5em; row-gap: 0.5em; }
.block1 .text ul li { width: 100%; padding: 0.4em; column-gap: 0.5em; backdrop-filter: blur(10px); background: linear-gradient(90deg, rgba(47, 211, 196, 0.25) 0%, rgba(47, 211, 196, 0) 90%); border-radius: 2em 0 0 2em; border-left: 1px solid #fff; }
.block1 .text ul li svg { width: 1em; height: auto; fill: none; stroke: #3beac7; -webkit-filter: drop-shadow( 0 0 0.3em rgba(255, 255, 255, 0.5)); filter: drop-shadow( 0px 0px 0.3em rgba(255, 255, 255, 0.5)); stroke-linecap: round; stroke-linejoin: round; stroke-width: 66.67px; }
.block1 .text div { width: 50%; }
.block1 .text div span { display: inline-block; }
.block1 .text .info-text { width: calc(100% - 4em); }
.block1 .pack { width: 50%; padding-top: 60%; }
.block1 .pack .img { position: absolute; top: 0; left: 0; width: 120%; }
.block1 .pack .img img { max-width: 100%; transform: translate(0, -20%); }
.block1 .img { width: 56%; }
/* ==================== ABOUT PRODUCT ==================== */
.about_block { padding: 3em 0 0; background: transparent; }
.about_block h2 { width: 100%; padding-bottom: 0.25em; }
.about_block .about_text { width: 55%; }
.about_block .about_text p { padding: 0.5em; font-weight: 400; }
.about_block .order { width: 40%; }
.about_block .order a { display: inline-block; padding: 0.8em 2.5em 0.65em; transform: translate(0, -50%); }
.about_block .order a:hover { transform: translate(0, -50%) scale(1.05); }
.about_block .wrap .order .order_add { display: none; }
/* ==================== COMPOSITION ==================== */
.sostav_block { padding: 0 0 3em 0; }
.sostav_block h2 { width: 100%; padding-bottom: 0.5em; }
.sostav_block .ing { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-top: 1rem; }
.sostav_block .ing li { width: 100%; border-radius: 1em 0; padding: 1em; border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); }
.sostav_block .ing li .img { width: 90%; margin: 0 auto; aspect-ratio: 1; }
.sostav_block .ing li .img img { width: 100%; height: 100%; object-fit: contain; }
.sostav_block .ing li p { padding: 0.5em 0; }
/* ==================== PRODUCT COMPARISON ==================== */
.sravnenie { padding: 2em 0 5em; }
.sravnenie h2 { padding-bottom: 1.5em; }
.versus { width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; align-items: stretch; position: relative; z-index: 2; }
.versus .product_name { width: calc(100% - 15em); position: relative; z-index: 2; }
.versus .product_img { width: 15em; aspect-ratio: 1; position: relative; z-index: 1; }
.versus .product_img img { width: 140%; position: absolute; right: 0; bottom: 0; transform: translate(10%, 0%); }
.panel { border-radius: 1.5em; padding: 2em; position: relative; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.panel:hover { transform: translateY(-6px); }
.panel-klareol { color: #fff; backdrop-filter: blur(1.5em); background: linear-gradient(165deg, rgba(20, 168, 156, 0.15), rgba(143, 233, 223, 0.25) 60%, rgba(255, 255, 255, 0.8)); border: 1px solid rgba(20, 168, 156, 0.28); box-shadow: 0 40px 90px -40px rgba(15, 139, 130, 0.45); }
.panel-klareol .panel-tag { background: rgba(255, 255, 255, 1); color: var(--teal-400); }
.panel-klareol .panel-title { letter-spacing: .6px; color: var(--teal-500); text-shadow: 0 0 1.5em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 0.6); }
.panel-others { background: rgba(255, 255, 255, 0.8); border: 1.5px solid #E8D5D5; box-shadow: 0 0.3em 1em rgba(235, 87, 87, 0.2); backdrop-filter: blur(1.5em); }
.panel-others .panel-tag { background: #FFF0F0; color: #EB5757; padding: 0.4em 0.8em; }
.panel-others .panel-title { color: #1A2B23; letter-spacing: -.6px; }
.panel-tag { display: inline-flex; align-items: center; gap: 6px; padding: 0.3em 0.5em; border-radius: 100px; letter-spacing: .6px; margin-bottom: 1em; }
.panel-title { margin-bottom: 0.5em; position: relative; }
.feat { display: flex; align-items: flex-start; gap: 0.8em; padding: 1.5em 0.8em; margin-bottom: 1em; border-radius: 1em; position: relative; transition: transform .35s var(--ease-out), background .35s; }
.panel-klareol .feat { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(20, 168, 156, 0.25); }
.panel .feat:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.85); }
.panel-klareol .feat-icon { width: 2em; height: 2em; border-radius: 0.3em; background: rgba(255, 255, 255, 1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 0.5em 1em -0.5em rgba(15, 139, 130, 0.5); border: 1px solid rgba(20, 168, 156, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-klareol .feat-icon svg { color: #B8F5D8; }
.panel-klareol .feat-label { color: var(--teal-500); text-transform: uppercase; margin-bottom: 0.3em; }
.panel-klareol .feat-text { color: var(--ink-500); letter-spacing: 0.5px; font-size: 18px; font-weight: 500; line-height: 120%; }
.panel-others .feat { background: #FFF0F0; border: 1px solid #F5D0D0; }
.panel-others .feat-icon { width: 2em; height: 2em; border-radius: 0.3em; background: rgba(235, 87, 87, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-others .feat-icon svg { color: #EB5757; }
.panel-others .feat-label { color: #EB5757; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 0.3em; }
.panel-others .feat-text { color: #3D5A4B; font-size: 18px; font-weight: 500; line-height: 120%; }
.sravnenie .btn { display: inline-block; padding: 1em 1.2em; color: #fff; border-radius: 0.5em; background: linear-gradient(110deg, var(--teal-500), var(--teal-400)); cursor: pointer; transition: all 0.5s; text-decoration: none; }
.sravnenie .btn:hover { transform: scale(1.05); box-shadow: 0 0.5em 1.2em rgba(143, 233, 223, 1); }
/* ==================== RESULTS ==================== */
.results { padding: 3em 0 0; }
.results h2 { padding-bottom: 0.2em; }
.results h3 { padding-bottom: 1em; color: var(--ink-500); }
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 20px; }
.result-card { position: relative; border-radius: 26px; padding: 16px 16px 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45)); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 25px 60px -32px rgba(9, 60, 55, 0.3); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.result-card:hover { transform: translateY(-6px); box-shadow: 0 34px 76px -30px rgba(9, 60, 55, 0.42); }
.result-slider { position: relative; width: 100%; aspect-ratio: 1/1.2; border-radius: 18px; overflow: hidden; cursor: ew-resize; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.result-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.result-slider .img-after { z-index: 1; }
.result-slider .img-before { z-index: 2; clip-path: inset(0 77% 0 0); }
.result-handle { position: absolute; top: 0; bottom: 0; left: 75%; width: 0; z-index: 3; transform: translateX(-50%); pointer-events: none; }
.result-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2.5px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(9, 60, 55, 0.15); transform: translateX(-50%); }
.result-handle .handle-knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-500), var(--teal-600)); box-shadow: 0 10px 24px -8px rgba(15, 139, 130, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; }
.handle-knob svg { width: 16px; height: 16px; }
.result-tag { position: absolute; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; z-index: 4; pointer-events: none; }
.result-tag.tag-before { left: 12px; background: rgba(11, 43, 42, 0.55); color: #fff; backdrop-filter: blur(4px); }
.result-tag.tag-after { right: 12px; background: linear-gradient(110deg, var(--teal-600), var(--teal-400)); color: #fff; }
.result-label { display: flex; align-items: center; gap: 0.5em; margin-top: 1em; padding: 0 0.2em; font-weight: 800; color: var(--ink-900); }
.result-label .rl-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); flex-shrink: 0; }
.results-hint { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-400); margin-bottom: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.results-hint svg { width: 15px; height: 15px; }
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn { padding-top: 0px !important; }
.fancybox__slide { padding: 0 !important; }
.fancybox__content>.f-button.is-close-btn { top: 1em !important; right: 1em !important; }
/* ==================== REVIEWS ==================== */
.block5 .bg_object { bottom: 0; }
.block5 .bg_object .img_left { width: 24%; position: relative; transform: translate(0%, 30%); }
.block5 .bg_object .bg { width: 140%; position: absolute; top: 0; left: 0; opacity: 0.55; transform: translate(0%, -30%); z-index: -1; }
.block5 .wrap { row-gap: 1.5em; padding-bottom: 3em; }
.block5 .text { width: 40%; }
.block5 .text h2 { padding-bottom: 0.5em; }
.block5 .text .info { width: 90%; padding-bottom: 1.5em; }
.block5 .text .rating { position: relative; text-decoration: none; margin: 0.5em 0; display: inline-block; width: 18em; border-radius: 1em 0; padding: 1em; border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); color: rgba(76, 194, 207, 0.8); transition: transform 0.3s; }
.block5 .text .rating .rev { gap: 0.2em; font-family: "Gravity Light"; }
.block5 .text .rating .rev .icon { width: 1em; }
.block5 .text .rating .rev .feed { width: 0.75em; }
.block5 .text .rating .rev p { margin-top: 0.1em; text-shadow: 0 0 0.2em rgba(255, 255, 255, 1); }
.block5 .text .rating .link { font-family: "PF Bulletin Sans Pro"; position: absolute; display: inline-block; padding: 0.2em 0.7em; border-radius: 1em 0em 1em 0; color: #fff; background: rgba(76, 194, 207, 0.8); bottom: -2px; right: -2px; transition: all 0.3s; }
.block5 .text .rating:hover { transform: scale(1.05); }
.block5 .text .rating:hover .link { background: #8adc58; padding: 0.4em 1em; }
.block5 .rev-btn { width: 18em; margin-top: 2em; }
.block5 .rev-btn .btn { display: inline-block; padding: 0.4em 0.6em; border-radius: 0.3em; color: #fff; border: 0.1em solid #e91735; background: #e91735; cursor: pointer; transition: all 0.5s; }
.block5 .rev-btn .btn:hover { color: #e91735; background: #fff; transform: scale(1.05); box-shadow: 0 0.2em 1em rgba(13, 43, 98, 0.5); }
.block5 .reviews-wrapper { width: 60%; }
.block5 .tabs-container { background: rgba(76, 194, 207, 0.05); border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); border-radius: 1.5em; padding: 0.5em; display: flex; gap: 0.5em; overflow-x: auto; margin-bottom: 2em; }
.block5 .tabs-container .tab-btn { border: none; background: transparent; padding: 0.3em 1em; border-radius: 1.6em; cursor: pointer; display: flex; align-items: center; gap: 0.3em; transition: all 0.2s ease; }
.block5 .tabs-container .tab-btn:hover { background-color: rgba(255, 255, 255, 0.6); }
.block5 .tabs-container .tab-btn.active { background-color: #ffffff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); }
.block5 .tabs-container .tab-btn .rating-icon { width: 1.8em; height: 1.8em; border-radius: 50%; }
.block5 .reviews-header { margin-bottom: 1em; }
.block5 .reviews { background: rgba(76, 194, 207, 0.05); border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); border-radius: 1em; overflow: hidden; }
.block5 .reviews-grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; max-height: 30em; overflow-y: auto; padding: 0.8em; }
.block5 .reviews-grid-container::-webkit-scrollbar { width: 6px; }
.block5 .reviews-grid-container::-webkit-scrollbar-track { background: transparent; }
.block5 .reviews-grid-container::-webkit-scrollbar-thumb { background-color: rgba(76, 194, 207, 0.4); border-radius: 10px; }
.block5 .review-card { background: rgba(255, 255, 255, 1); border-radius: 1em; padding: 1em; box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 12px; }
.block5 .review-card .review-header { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; }
.block5 .review-card .review-header .author { gap: 0.4em; }
.block5 .review-card .review-header .author .icon { width: 1.8em; height: 1.8em; border-radius: 50%; }
.block5 .review-card .review-header .author .user-info h3 { margin: 0; font-size: 0.8em; }
.block5 .review-card .review-header .author .review-date { margin: 2px 0 0 0; font-size: 0.6em; color: var(--text-secondary); }
.block5 .review-card .review-header .stars { display: flex; gap: 0.1em; color: #ffc515; font-size: 0.8em; }
.block5 .review-text { font-size: 0.7em; line-height: 140%; font-weight: 400; color: #4a4a4a; flex-grow: 1; }
/* ==================== PRODUCTION ==================== */
.production { padding: 3em 0; }
.production h2 { width: 100%; padding-bottom: 0.5em; }
.production .about { gap: 1.5em; }
.production .about .block { border-radius: 1.5em; padding: 1em; border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); }
.production .about span { display: inline-block; letter-spacing: 0.06em; color: var(--teal-600); background: var(--teal-100); padding: 0.5em 1em; border-radius: 999px; margin-bottom: 1em; box-shadow: 0 0.1em 0.3em rgba(20, 168, 156, 0.2); }
.production .about p { padding: 0.5em 0; color: var(--ink-500); }
.production .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2em; }
.production .grid .grid_card { position: relative; border-radius: 1.5em; padding: 1em; border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); }
.production .grid .grid_card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; transform: translate(30%, -30%); background: radial-gradient(circle, rgba(47, 211, 196, 0.15), transparent 70%); }
.production .grid .grid_card .icon { position: relative; gap: 1em; z-index: 5; }
.production .grid .grid_card .icon img { width: 8em; }
.production .grid .grid_card .icon p { color: var(--teal-500); text-shadow: 0 0 0.15em rgba(255, 255, 255, 1); }
.production .grid .grid_card .text { padding: 1.5em 1em 1em; }
.production .grid .grid_card ul li { position: relative; padding-left: 1.5em; margin: 0.25em; }
.production .grid .grid_card ul li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.6em; height: 0.6em; border-radius: 0.1em; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); transform: rotate(45deg); }
/* ==================== CERTIFICATE ==================== */
.doc-section { margin-top: 2em; border-radius: 1.5em; padding: 3em 1.5em; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); }
.doc-section::before { content: ""; position: absolute; top: 0; left: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(47, 211, 196, 0.22), transparent 70%); filter: blur(1em); transform: translate(-30%, -30%); pointer-events: none; }
.doc-grid { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2em; align-items: center; }
.doc-frame-wrap { position: relative; display: flex; justify-content: center; }
.doc-frame { position: relative; width: 100%; max-width: 16em; border-radius: 1em; padding: 0.6em; cursor: pointer; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), var(--teal-100)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1.5em 3em -1em rgba(15, 139, 130, 0.45); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.doc-frame::before { content: ""; position: absolute; inset: 0; border-radius: 1em; padding: 1.5px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(20, 168, 156, 0.4) 45%, rgba(255, 255, 255, 0) 75%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.doc-frame:hover { transform: translateY(-0.5em) rotate(-0.8deg); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1.5em 3em 0em rgba(15, 139, 130, 0.45); }
.doc-frame .doc-frame-inner { position: relative; border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 0.2em 1em rgba(9, 60, 55, 0.18); }
.doc-frame .doc-frame-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(47, 211, 196, 0.10), transparent 40%); pointer-events: none; }
.doc-frame .doc-badge-float { position: absolute; bottom: 0; right: 0; width: 6em; height: 6em; transform: translate(20%, 20%); transition: transform 0.6s; }
.doc-frame .doc-badge-float img { width: 100%; height: 100%; object-fit: contain; }
.doc-frame:hover .doc-badge-float { transform: translate(20%, 20%) scale(1.1) rotate(2deg); }
.doc-copy .icon { position: relative; gap: 1em; z-index: 5; }
.doc-copy .icon img { width: 6em; }
.doc-copy .icon h3 { color: var(--teal-500); text-shadow: 0 0 0.15em rgba(255, 255, 255, 1); }
.doc-copy p { color: var(--ink-500); padding: 1.5em 0; }
.doc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.doc-fact { padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(15, 60, 58, 0.08); transition: transform .35s var(--ease-out), background .35s; }
.doc-fact:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.9); }
.doc-fact .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-600); font-weight: 800; margin-bottom: 6px; }
.doc-fact .v { font-size: 14px; font-weight: 700; color: var(--ink-900); line-height: 1.4; }
.doc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--teal-600); text-decoration: none; border-bottom: 1px solid rgba(15, 139, 130, 0.35); padding-bottom: 2px; transition: color .3s, border-color .3s, gap .3s; }
.doc-link:hover { color: var(--teal-500); border-color: var(--teal-400); gap: 12px; }
.doc-link svg { width: 16px; height: 16px; }
/* ==================== FAQ ==================== */
.faq { padding: 0 0 3em; }
.faq h2 { width: 100%; padding-bottom: 0.5em; }
.faq-list { width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1em; }
.faq-list .faq-item { position: relative; border-radius: 1em; background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(0.8em); -webkit-backdrop-filter: blur(0.8em); box-shadow: 0 0.8em 1.5em -1em rgba(9, 60, 55, 0.25); overflow: hidden; transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out); }
.faq-list .faq-item:hover { transform: translateY(-2px); box-shadow: 0 1em 2em -1em rgba(9, 60, 55, 0.35); }
.faq-list .faq-item.is-open { border-color: rgba(20, 168, 156, 0.35); box-shadow: 0 1.5em 3.2em -1.5em rgba(15, 139, 130, 0.4); }
.faq-list .faq-item .question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.2em; background: none; border: none; cursor: pointer; }
.faq-list .faq-item .question .q-text { text-align: left; color: var(--ink-900); letter-spacing: -0.005em; line-height: 1.45; }
.faq-list .faq-item.is-open .question .q-text { color: var(--teal-600); }
.faq-list .question .faq-toggle { position: relative; width: 1.5em; height: 1.5em; border-radius: 0.5em; flex-shrink: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), var(--teal-100)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 0.5em 1em -0.5em rgba(15, 139, 130, 0.5); transition: transform .45s var(--ease-out), background .45s var(--ease-out); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--teal-600); border-radius: 2px; transition: background .45s var(--ease-out); }
.faq-toggle::before { width: 0.6em; height: 0.1em; transform: translate(-50%, -50%); }
.faq-toggle::after { width: 0.1em; height: 0.6em; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-toggle::before, .faq-item.is-open .faq-toggle::after { background: #fff; }
.faq-item.is-open .faq-toggle { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); transform: rotate(135deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out), padding .5s var(--ease-out); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; padding-bottom: 0.5em; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 1em 1em; color: var(--ink-500); }
.faq-answer-inner ul { padding: 0 1em 1em 2em; color: var(--ink-500); display: grid; grid-template-rows: 1fr; gap: 0.5em; }
.faq-answer-inner ul li { position: relative; padding-left: 1.5em; }
.faq-answer-inner ul li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 0.5em; height: 0.5em; border-radius: 0.1em; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); transform: rotate(45deg); }
/* ==================== ORDER ==================== */
.block6 .bg_object { bottom: 0; transform: translate(28%, 40%); }
.block6 .bg_object .img_right { width: 29%; position: relative; }
.block6 .bg_object .bg { width: 100%; position: absolute; top: 0; right: 0; opacity: 0.55; transform: translate(-30%, -95%); }
.block6 .bg_object .leaf { transform: rotate(15deg); }
.block6 .wrap { padding-bottom: 2em; }
.block6 .pack { width: 48%; }
.block6 .pack .space { width: 100%; padding-top: 105%; }
.block6 .pack img { position: absolute; top: 0; left: 50%; transform: translate(-49%, 0); width: 280%; }
.block6 .order { width: calc(50% - 1em); row-gap: 1em; }
.block6.new h2 { width: 100%; padding: 0.5em 0 0.8em; font-weight: bold; }
.block6.new .order { z-index: 10; }
.block6.new .pack img { position: absolute; top: 0; left: 50%; transform: translate(-45%, 0); width: 100%; }
.block6.new .pack .space { width: 100%; padding-top: 90%; }
.order .title { display: inline-flex; align-items: center; padding: 0.5em 1.2em; border-radius: 999px; background: var(--teal-100); border: 1px solid rgba(20, 168, 156, 0.2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 1em; }
.order input:focus { border-color: var(--teal-400); background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 4px rgba(47, 211, 196, 0.15); }
.order input::placeholder { color: var(--ink-400); opacity: 1; }
.order-points { width: 100%; gap: 1.5em; }
.order-point { position: relative; color: var(--ink-500); display: flex; align-items: center; gap: 0.5em; padding: 1em; border-radius: 0.8em; background: rgba(255, 255, 255, 1); border: 1px solid rgba(15, 60, 58, 0.08); box-shadow: 0 0.5em 1.5em -0.8em rgba(9, 60, 55, 0.3); transition: transform .35s var(--ease-out), background .35s; }
.order-point .op-icon { width: 1.8em; height: 1.8em; border-radius: 50%; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-point .op-icon svg { width: 1em; height: 1em; }
/* ==================== MARKETPLACES AND PHARMACIES ==================== */
.home_market { display: block; padding: 1em 0 5em 0; position: relative; z-index: 2; }
.home_market .wrap { column-gap: 1.25em; row-gap: 1.5em; }
.home_market .wrap h3 { width: 100%; padding-bottom: 0.5em; text-align: center; }
.home_market .wrap h3.apteki { padding-top: 1em; }
.home_market .wrap a { display: block; width: calc(20% - 1em); box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); padding: 0 1em; border-radius: 1em; transition: all 0.3s; background: rgba(255, 255, 255, 0.8); }
.home_market .wrap a.marketplace { display: flex; width: calc(33.3% - 1em); padding: 0 2em; border-radius: 0.8em; aspect-ratio: 1 / 0.5; }
.home_market .wrap a.ozon { background: #0059ff; }
.home_market .wrap a.wildberries { background: linear-gradient(97.26deg, #ed3cca .49%, #df34d2 14.88%, #d02bd9 29.27%, #bf22e1 43.14%, #ae1ae8 57.02%, #9a10f0 70.89%, #8306f7 84.76%, #7c1af8 99.15%), linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05)); }
.home_market .wrap a img { width: 100%; transition: all 1s; }
.home_market .wrap a:hover { transform: scale(1.05); box-shadow: 0em 0.2em 0.5em rgba(0, 0, 0, 0.2); }
.home_market .wrap a:hover img { transform: scale(1.1); }
/* ==================== FOOTER ==================== */
.footer_nav { width: 100%; padding: 3em 2em; background: var(--ink-700); font-weight: 300; }
.footer_nav p { opacity: 0.8; }
.footer_nav a { text-decoration: none; color: #fff; opacity: 0.8; cursor: pointer; padding: 0.2em 0; }
.footer_nav a:hover { opacity: 1; }
.footer_nav .left_nav { width: 40%; }
.footer_nav .left_nav p { width: 100%; }
.footer_nav .right_nav { width: 55%; column-gap: 2em; }
/* ==================== MAP ==================== */
.ya_map { padding-bottom: 4em; }
.ya_map .title { padding-bottom: 1em; }
.ya_map .map_block { width: 100%; padding-top: 50%; overflow: hidden; border-radius: 1.5em; border: 1px solid #fff; box-shadow: 0 0 0.3em rgba(76, 194, 207, 0.4), 0 0 1em rgba(76, 194, 207, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.8em); }
.ya_map #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; }
/* ==================== VIDEO POPUP ==================== */
.video-popup { position: fixed; top: 24px; right: 24px; width: 340px; max-width: calc(100vw - 48px); z-index: 10; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transform: translate(120%, -40%) scale(0.6); opacity: 0; pointer-events: none; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease; }
.video-popup.open { transform: translate(0, 0) scale(1); opacity: 1; pointer-events: auto; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; }
.close-btn { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; z-index: 2; }
.close-btn:hover { background: var(--accent); transform: scale(1.1); }
.popup-badge { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; font-size: 17px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #111; background: linear-gradient(90deg, var(--accent2) 0%, #ffae00 50%, var(--accent2) 100%); background-size: 200% 100%; animation: badgeGlow 3s ease-in-out infinite; border-top: 2px solid #fff; cursor: pointer; user-select: none; }
.popup-badge .spark { font-size: 20px; animation: spark 1.2s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}
@keyframes spark {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(25deg) scale(1.3); }
}
.sound-btn { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s, transform 0.2s, opacity 0.2s; }
.sound-btn:hover { background: var(--accent, #ff4d6d); transform: scale(1.1); }
.sound-btn:active { transform: scale(0.95); }
.sound-btn svg { display: block; }
.sound-btn .icon-sound { display: none; }
.sound-btn.is-on .icon-muted { display: none; }
.sound-btn.is-on .icon-sound { display: block; }
/* ==================== RESPONSIVE ==================== */
@media (max-width: 2000px) {
  .px18 { font-size: 16px; }
  .px20 { font-size: 18px; }
  .px24 { font-size: 21px; }
  .px28 { font-size: 24px; }
  .px30 { font-size: 26px; }
  .px32 { font-size: 28px; }
  .px35 { font-size: 30px; }
  .px40 { font-size: 35px; }
  .px45 { font-size: 40px; }
  .px50 { font-size: 44px; }
  .px57 { font-size: 50px; }
  .px68 { font-size: 60px; }
  .px80 { font-size: 70px; }
  .px90 { font-size: 78px; }
  .wrap { max-width: 1400px; padding: 0 calc(5px + 1%); }
  .bg_scale { background-size: 2000px; }
  .bg_object { width: 2000px; }
}
@media (max-width: 1600px) {
  :root { --scale-factor: calc((100vw - 1280px)/(1600 - 1280)); }
  .bg_scale { background-size: 126.5%; }
  .bg_object { width: 126.5%; }
  .wrap { width: 100%; max-width: 100%; padding: 0 calc(5px + 10.5%); }
  .px18 { font-size: calc(var(--scale-factor) * (14 - 12) + 12px); }
  .px20 { font-size: calc(var(--scale-factor) * (18 - 16) + 16px); }
  .px24 { font-size: calc(var(--scale-factor) * (20 - 16) + 16px); }
  .px28 { font-size: calc(var(--scale-factor) * (22 - 17.6) + 17.6px); }
  .px30 { font-size: calc(var(--scale-factor) * (23 - 18.4) + 18.4px); }
  .px32 { font-size: calc(var(--scale-factor) * (25 - 20) + 20px); }
  .px35 { font-size: calc(var(--scale-factor) * (27 - 21.6) + 21.6px); }
  .px40 { font-size: calc(var(--scale-factor) * (30 - 24) + 24px); }
  .px45 { font-size: calc(var(--scale-factor) * (35 - 28) + 28px); }
  .px50 { font-size: calc(var(--scale-factor) * (40 - 32) + 32px); }
  .px57 { font-size: calc(var(--scale-factor) * (45 - 36) + 36px); }
  .px68 { font-size: calc(var(--scale-factor) * (53 - 42.4) + 42.4px); }
  .px80 { font-size: calc(var(--scale-factor) * (62 - 49.6) + 49.6px); }
  .px90 { font-size: calc(var(--scale-factor) * (70 - 56) + 56px); }
  header .logo { width: 12%; min-width: 100px; }
  header .right_block { width: 88%; }
}
@media (max-width: 1400px) {
  header { padding: 0; }
  header .wrap { padding-top: 0.8em; padding-bottom: 0.8em; }
  header.fixed { height: auto; padding: 0; }
  header .logo { width: 15%; min-width: 180px; transform: translate(0, 0); }
  header.fixed .logo { transform: translate(0, 0); }
  header nav { width: 100%; max-width: 400px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left: 100%; top: calc(100% + 0.5em); transform: translate(0%, 0); transition: transform 0.2s, box-shadow 0.4s, background 0.4s, opacity 0.4s; opacity: 0; background: #fff; padding-top: 0; }
  header.fixed nav { top: 100%; }
  header nav a p { transform: translate(30%, 0); opacity: 0; transition: transform 0.8s, opacity 0.5s; }
  header nav.open a p { transform: translate(0, 0); opacity: 1;  }
  header nav.open { transform: translate(-100%, 0); opacity: 1; box-shadow: 0 0.8em 0.8em rgba(13, 43, 98, 0.4); }
  header .mobile-nav-expand { display: block; }
  header nav a, header nav a.link { font-weight: bold; background: #fff; color: var(--teal-500); font-size: 20px; display: block; text-align: center; padding: 1.3em calc(1em + 5%); width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0; }
  header nav a:hover, header nav a.link:hover { background: rgba(184, 244, 250, 0.3); box-shadow: none; }
  header .right_block { column-gap: 2em; }
  header nav .order_btn { display: none; }
  header .menu_item_mob { display: block; font-size: 25px; }
  header .order_btn { padding: 0.58em 1em; }
  header .right_block .mob_right { column-gap: 2em; }
}
@media (max-width: 1280px) {
  :root { --scale-factor-1280: calc((100vw - 280px)/(1280 - 280)); }
  .px20 { font-size: calc(var(--scale-factor-1280) * (20 - 16) + 16px); }  
  .sravnenie { padding: 0em 0 4em; }
  .versus { max-width: 100%; padding: 0; }
  .sostav_block .ing {grid-template-columns: 1fr 1fr; font-size: calc(var(--scale-factor-1280) * (30 - 14) + 14px);}
  .sostav_block .ing li .img {max-width: 250px;}
  
  .versus .feat-text {font-size: calc(var(--scale-factor-1280) * (18 - 11) + 11px);}
  .versus .feat-label {font-size: calc(var(--scale-factor-1280) * (24 - 14) + 14px);}

}
@media (max-width: 980px) {
  .sravnenie { padding: 0em 0 3.5em; }
  .versus { grid-template-columns: 1fr; gap: 2em; padding: 0; }
  .versus .product_name {width: 66%;}
  .versus .product_img {width: 34%;}
  .versus .feat { gap: 1.5em; }
  .panel-klareol .feat-icon {width: 2.5em; height: 2.5em; border-radius: 0.8em;}
  .panel-others .feat-icon {width: 2.5em; height: 2.5em; border-radius: 0.8em;}
   .results-grid { grid-template-columns: repeat(2, 1fr); }
  :root { --scale-factor-980: calc((100vw - 280px)/(980 - 280)); }
  .wrap { padding: 0 calc(5px + 6%); }
  .px18 { font-size: calc(var(--scale-factor-980) * (18 - 10) + 10px); }  
  .px20 { font-size: calc(var(--scale-factor-980) * (18 - 10) + 10px); }
  .px24 { font-size: calc(var(--scale-factor-980) * (20 - 14) + 14px); }
  .px28 { font-size: calc(var(--scale-factor-980) * (24 - 14) + 14px); }
  .px30 { font-size: calc(var(--scale-factor-980) * (26 - 14) + 14px); }
  .px32 { font-size: calc(var(--scale-factor-980) * (26 - 14) + 14px); }
  .px35 { font-size: calc(var(--scale-factor-980) * (28 - 12) + 12px); }
  .px40 { font-size: calc(var(--scale-factor-980) * (32 - 14) + 14px); }
  .px45 { font-size: calc(var(--scale-factor-980) * (35 - 14) + 14px); }
  .px50 { font-size: calc(var(--scale-factor-980) * (40 - 14) + 14px); }
  .px57 { font-size: calc(var(--scale-factor-980) * (48 - 15) + 15px); }
  .px68 { font-size: calc(var(--scale-factor-980) * (50 - 24) + 24px); }
  .px80 { font-size: calc(var(--scale-factor-980) * (38 - 12) + 12px); }
  .px90 { font-size: calc(var(--scale-factor-980) * (68 - 24) + 24px); }
  .bg_scale { background-size: 60em; }
  header .menu_item_mob.order_btn { font-size: calc(var(--scale-factor-980) * (25 - 14) + 14px); padding: 0.65em 1.5em; }
  header .menu_item_mob { font-size: calc(var(--scale-factor-980) * (25 - 14) + 14px); }
  header.fixed .logo { display: block; }
  header.fixed .right_block { width: 85%; justify-content: flex-end; }
  .block1 { padding-top: 8em; background-position: 50% 0%; background-size: cover; }
  .block1 .wrap { z-index: 2; }
  .block1 .bg_object { display: none; }
  .block1 .bg_object .img_left { position: absolute; left: 0; width: 65%; transform: translate(-35%, 0%); opacity: 0.2; }
  .block1 .pre_title { display: none; }
  .block1 h2 { width: 100%; text-align: center; }
  .block1 .pack { display: none;}
  .block1 .text { width: 100%; max-width: 640px; margin: 0 auto; order: 1; padding-top: 0em; }
  .block1 .text h3 { width: 100%; text-align: center; }
  .about_block {padding: 2em 0 0;}
  .about_block .wrap .about_text {order: 2; width: 100%; }
  .about_block .wrap .order {order: 1; padding: 1.5em 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .about_block .wrap .order .link_web { display: none; }
  .about_block .wrap .order .img { width: 40%; }
  .about_block .wrap .order .order_add { display: block; width: 58%; }
  .about_block .wrap .order .order_add a { transform: translate(0, 0); }
  .block5 .text { width: 100%; display: flex; flex-wrap: wrap; column-gap: 2em; }
  .block5 .text .info { width: 100%; }
  .block5 .text .market_rating {width: 100%;}
  .block5 .text .rating { background: rgba(255, 255, 255, 0.3); width: calc(50% - 1em);  }
  .block5 .px80 { font-size: calc(var(--scale-factor-980) * (68 - 24) + 24px); }
  .block5 .reviews-wrapper { width: 100%; }
  .block5 .reviews-wrapper .tabs-container { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(0.8em); }
  .block5 .reviews-wrapper .reviews { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(0.8em); font-size: calc(var(--scale-factor-980) * (24 - 11) + 11px); }
  .block5 .rev-btn { display: none; }
  .block5 .bg_object .img_left { width: 80%; transform: translate(0%, 0%); }
  .block5 .bg_object .bg { position: relative; width: 100%; }
  .block5 .bg_object .img_left .leaf { display: none; }
  .block6 .pack {display: none;}
  .block6 .order {width: 100%;}
  .results { padding: 1.5em 0 0; }
  .production {padding: 1.5em 0;}
  .production .grid {grid-template-columns: repeat(1, 1fr);}
  .production .img {display: none;}
  .production .grid .grid_card .icon {justify-content: start;}
  .production .grid .grid_card .icon img {width: 6em;}

  .home_market { padding-top: 3em; }
  .home_market .wrap a { width: calc(25% - 1em); }
  .footer_nav .wrap { flex-wrap: wrap; }
  .footer_nav .right_nav { width: 100%; justify-content: space-between; padding-top: 1em; }
  .footer_nav .right_nav div { width: 100%; text-align: center; }
  .footer_nav .left_nav { width: 100%; text-align: center; row-gap: 1em; }
}
@media (max-width: 900px) {
  .doc-section { padding: 2em 1em; }
  .doc-grid { grid-template-columns: 1fr; gap: 1.5em; }
}
@media (max-width: 768px) {
  .block5 .reviews-grid-container { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sravnenie { padding: 0em 0 3em; }
  .versus {gap: 1.5em; }
}
@media (max-width: 640px) {
  :root { --scale-factor-640: calc((100vw - 280px)/(640 - 280)); }
  header .menu_item_mob.order_btn { font-size: calc(var(--scale-factor-640) * (22 - 14) + 14px); padding: 0.65em 1.5em; }
  header .menu_item_mob { font-size: calc(var(--scale-factor-640) * (22 - 14) + 14px); }
  header.fixed .menu_item_mob.order_btn { font-size: calc(var(--scale-factor-640) * (18 - 9) + 9px); padding: 0.65em 1.5em; }
  header.fixed .menu_item_mob { font-size: calc(var(--scale-factor-640) * (18 - 9) + 9px); }
  header .logo { width: 40%; max-width: 180px; min-width: 80px; }
  header .right_block, header .right_block .mob_right { column-gap: 2em; }
  header.fixed .right_block, header.fixed .right_block .mob_right { column-gap: 1em; }
  header .mobile-nav-expand { width: 2.2em; height: 2em; }
  #scrollToTop { width: 5em; height: 5em; }
  #review-form .px24 { font-size: calc(var(--scale-factor-640) * (20 - 16) + 16px); }
  #review-form .px35 { font-size: calc(var(--scale-factor-640) * (25 - 18) + 18px); }
  #review-form .px50 { font-size: calc(var(--scale-factor-640) * (35 - 24) + 24px); }
  #review-form .button { width: auto; }
  .block1 .pack { width: 90%; }
  .block1 .bg_object { top: 18em; }
  .block1 .bg_object .img_left { width: 60%; transform: translate(-50%, 0%); }
  .block5 .reviews-wrapper .reviews { font-size: calc(var(--scale-factor-640) * (20 - 16) + 16px); }
  .block5 .px30 { font-size: calc(var(--scale-factor-640) * (25 - 16) + 16px); }
  .sostav_block .ing {grid-template-columns: 1fr; font-size: calc(var(--scale-factor-640) * (30 - 18) + 18px);}
  .sostav_block .ing .px20 {grid-template-columns: 1fr; font-size: calc(var(--scale-factor-640) * (20 - 12) + 12px);}
  .sostav_block .ing li .img {max-width: 150px; width: 50%;}
  .versus .panel {padding: 2em 1em 1em;}
  #scrollToTop { bottom: 5em; }
  .home_market .wrap a.marketplace { padding: 0 4%; }
  .ya_map .map_block {padding-top: 100%;}
}
@media (max-width: 560px) {
  .results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .doc-facts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .versus { gap: 1.25em; padding: 0; }
  :root { --scale-factor-480: calc((100vw - 280px)/(480 - 280)); }
  header nav a { font-size: 22px; padding: 1em calc(1em + 5%); }
  #review-form .half { width: 100%; }
  #review-form .rating { flex-wrap: wrap; }
  #review-form .rating p { width: 100%; }
  #review-form .rating-area { margin: 0 auto; padding: 0; }
  .is-compact .fancybox__content>.f-button.is-close-btn { top: 0 !important; right: 0 !important; }
  .block1 .bg_object .img_left { width: 52%; transform: translate(-30%, 50%) rotate(-45deg); }
    .about_block .wrap .order {padding: 0 0 1.5em;}
  .about_block .wrap .order .img img {width: 135%; transform: translate(-20%,0);}
  .block5 .px80 { font-size: calc(var(--scale-factor-480) * (45 - 26) + 26px); }
  .block5 .px18 { font-size: calc(var(--scale-factor-480) * (12 - 8) + 8px); }
  .block5 .text .rating { padding: 1.4em 0.5em; }
  .block5 .text .rating .rev .feed { display: none; }
  .block5 .tabs-container .tab-btn:nth-child(1) span { display: none; }
  .block5 .tabs-container .tab-btn:nth-child(1) { padding: 0.3em 1em; }
  .block5 .tabs-container .tab-btn { padding: 0.3em 0.5em; }
  .block5 .reviews-grid-container::-webkit-scrollbar { width: 3px; }
  .block5 .reviews-grid-container::-webkit-scrollbar-thumb { border-radius: 6px; }
  .production .grid .grid_card .icon .px68 {font-size: calc(var(--scale-factor-480) * (30 - 20) + 20px);}
  .production .grid .grid_card .icon img {width: 4em;}
  .production .grid .grid_card .text {padding: 1.5em 0 0;}
  .order-point {padding: 1.4em 0.5em 0.8em; font-size: calc(var(--scale-factor-480) * (12 - 8) + 8px); text-align: center;}
  .order-point .op-icon {position: absolute; top:0; left: 50%; transform: translate(-50%,-50%);}
  .home_market {padding: 1em 0 2em;}
  .home_market .wrap { column-gap: 0.9em; row-gap: 0.9em; }
  .home_market .wrap a { width: calc(33.3% - 0.6em); border-radius: 0.8em; }
  .production {padding-top: 0;}
  .block5 .text .rating {width: calc(50% - 0.5em);}
  .faq-list .faq-item .question .q-text {font-size: calc(var(--scale-factor-480) * (16 - 11) + 11px); line-height: 120%;}
  .footer_nav a { padding: 0.5em 0; }
  .video-popup { width: 280px; top: 14px; right: 14px; }
  .popup-badge { font-size: 14px; padding: 11px 12px; }
  .ya_map {padding-bottom: 2em;}
  .ya_map .map_block {padding-top: 150%;}
}
@media (max-width: 360px) {
  .block5 .tabs-container .tab-btn span { display: none; }
  .block5 .reviews-grid-container { padding: 0.8em 0.5em; }
  .block5 .review-card { border-radius: 0.5em; padding: 0.5em; }
}