/* Reset */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body,html,h1,h2,h3,h4,h5,h6,figure,video,ul,ol,li,menu {
    margin: 0;
    padding: 0;
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring, [type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

::-webkit-input-placeholder {
    color: #999999;
}

:-moz-placeholder {
    color: #999999;
}

::-moz-placeholder {
    color: #999999;
}

:-ms-input-placeholder {
    color: #999999;
}

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    outline: none !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

a {
    text-decoration: none;
}

a,input[type="submit"], {
    transition: 0.2s;
}

input,textarea,select,button,a {
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    background: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
}

form input:not([type="select"]):not([type="file"]):not([type="submit"]):not([type="checkbox"]),form textarea {
    padding: 5px;
    font-family: var(--font-secondary);
    border-radius: 0.5rem;
    border-width: 2px;
    padding: 0.8rem;
    border-color: #007eb8;
    border-style: solid;
}

input[type="submit"] {
    cursor: pointer;
}

img,.btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

figure img,figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

figure {
    position: relative;
    width: 100%;
}

figure video {
    width: 100%;
}

img {
    border-style: none;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    pointer-events: none;
}

::-webkit-media-controls {
    display: none !important;
}

video {
    pointer-events: none;
}

svg,video {
    vertical-align: top;
}

p:empty {
    display: none;
}

p {
    margin-top: 0.5rem;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

::selection {
    background: rgba(222,222,222,0.3);
}

::-moz-selection {
    background: rgba(222,222,222,0.3);
}

.slide video,.slide img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.img {
    position: relative;
}

.img:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: -1;
    border: 2px solid;
    border-radius: 1rem;
}

.block-text {
    margin: 1rem 0;
}

.block-text,.block-text p {
    line-height: 1.5;
}

.block-text p {
    margin-top: 0;
    font-size: 1.125rem;
}

.block-text.pxs p,.pxs p {
    font-size: 1rem;
}

.block-text h2 {
    margin-bottom: 1rem;
    line-height: 1.2;
}

.block-text:not(.figtree) p {
    font-family: var(--font-secondary);
}

.block-text h4 {
    margin-bottom: 1rem;
}

.offset-left {
    padding-left: 104px;
}

.arrow-list ul, .arrow-list.offset-left ul {
    padding: 0;
}

.arrow-list a,.block-text a {
    text-decoration: underline;
    opacity: 0.9;
    transition: 0.3s;
}

ul {
    margin: 1rem 0;
    padding-left: 1.25rem;
}

.mobile {
    display: none;
}

#main {
    position: relative;
    z-index: 2;
    background: white;
}

#content:not(.home) #main {
    overflow: hidden;
}

/* Lazy load */
.lazy,.lazyload,.slider,[loading="lazy"],.slider img {
    opacity: 0;
}

.lazy.loaded,.lazyloaded[loading="lazy"],.lazyload.loaded,img.flickity-lazyloaded,.slider.active {
    opacity: 1;
}

/* Flickity */
.carousel.flickity--no-arrows .custom-flickity-controls {
    display: none !important;
}

/* Animations */
.animate {
    transition: all 0.75s cubic-bezier(.2,.9,.45,1);
    -webkit-transition: all 0.75s cubic-bezier(.2,.9,.45,1);
    transform: translate3d(0,40px,0);
    -webkit-transform: translate3d(0,40px,0);
    opacity: 0;
}

.animated {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    opacity: 1 !important;
}

.fade {
    opacity: 0;
}

.fade-y {
    opacity: 0;
    transform: translateY(20px);
}

.fade-x {
    opacity: 0;
    transform: translateX(-40px);
}

a.slide .white-box-small {
    transition: 0.3s;
}

/* Animation for the outer mouse shape */
@keyframes mouseBounce {
    0% {
        transform: translateY(0px);
    }

    20% {
        transform: translateY(-13px);
        /* reach top */
    }

    30% {
        transform: translateY(-13px);
        /* freeze at top */
    }

    45% {
        transform: translateY(3px);
        /* overshoot down */
    }

    55% {
        transform: translateY(0px);
        /* return to base */
    }

    100% {
        transform: translateY(0px);
    }
}

/* Animation for the scroll wheel */
@keyframes wheelScroll {
    0% {
        transform: translateY(16px);
        opacity: 0;
    }

    15% {
        transform: translateY(0px);
        opacity: 1;
    }

    45% {
        transform: translateY(27px);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

:root {
    --font-main: 'Figtree', Helvetica,Arial,sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-size-xxxl: 3.5rem;
    /* 56px */
    --font-size-3rem: 3rem;
    /* 48px */
    --font-size-xxl: 2.5rem;
    /* 40px */
    --font-size-2rem: 2rem;
    /* 32px */
    --font-size-xl: 1.875rem;
    /* 30px */
    --font-size-l: 1.5rem;
    /* 24px */
    --font-size-m: 1.25rem;
    /* 20px */
    --font-size-s: 1.125rem;
    /* 18px */
    --font-size-xs: 1rem;
    /* 16px */
    --font-size-xxs: 0.875rem;
    /* 14px */
    --font-size-12: 0.75rem;
    /* 12px */
    --font-size-11: 0.6875rem;
    /* 11px */
    --font-size-10: 0.625rem;
    /* 10px */
    --font-size-xxxs: 0.5rem;
    /* 8px  */
    --color-white: #ffffff;
    --color-blue: #0029B4;
    --color-blue-2: #0094FF;
    --color-blue-3: #1285E5;
    --color-blue-4: #0199DF;
    --color-lightblue: #E5F4FF;
    --color-lightblue-2: #E5F6F9;
    --color-turquoise: #00ACC9;
    --color-pink: #D67B8B;
    --color-yellow: #FAB52A;
    --color-orange: #F36500;
    --color-orange-2: #FF9200;
    --color-orange-3: #FEF1E5;
    --color-orange-4: #FFF4E5;
    --color-straw: #FFF4DF;
    --color-button-secondary-1: #F36500;
    --border-radius-main: 12px;
    --border-radius-button: 56px;
    --border-radius-button-small: 40px;
}

/* Global */
h1 {
    font-size: var(--font-size-xxxl);
}

h2 {
    font-size: var(--font-size-xxl);
}

h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

h4 {
    font-size: var(--font-size-l);
    font-weight: 700;
    line-height: 1.2;
}

h5 {
    font-size: var(--font-size-s);
    text-transform: uppercase;
    font-weight: 500;
}

h6 {
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin: 0.5rem 0;
}

.large-title {
    font-size: var(--font-size-3rem);
}

.medium-title,.medium-title * {
    font-size: var(--font-size-2rem);
    font-weight: 700;
}

.medium-text {
    font-size: var(--font-size-m);
    font-weight: 500;
    line-height: 1.3;
}

.small-text {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    font-weight: 400;
    color: #202020
}

.font-l {
    font-size: var(--font-size-l);
}

.font-s {
    font-size: var(--font-size-s);
}

.font-xs {
    font-size: var(--font-size-xs);
}

.font-xxs {
    font-size: var(--font-size-xxs);
}

.font-xxxs {
    font-size: var(--font-size-xxxs);
}

.font-10 {
    font-size: var(--font-size-10);
}

.paragraph-xs {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    font-weight: 400;
    color: #222222;
    font-family: var(--font-secondary);
}

.alignright {
    float: right;
    margin: 0;
}

.alignleft {
    float: left;
    margin: 0 1rem 1rem 0;
}

.alignright, .alignleft {
    max-width: 50%;
    height: auto;
}

@media (max-width: 600px) {
    .alignright, .alignleft {
        float:none;
        display: block;
        margin: 0 auto 1rem;
        max-width: 100%;
    }
}

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

.bg-lightblue {
    background: var(--color-lightblue);
}

.bg-lightblue-2 {
    background: var(--color-lightblue-2);
}

.bg-orange-2 {
    background: var(--color-orange-2);
}

.bg-orange-3 {
    background: var(--color-orange-3);
}

.bg-orange-4 {
    background: var(--color-orange-4);
}

.bg-straw {
    background: var(--color-straw);
}

.white,.white * {
    color: var(--color-white);
}

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

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

.orange-2 {
    color: var(--color-orange-2);
}

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

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

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

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

.border-blue:not(.img) {
    border-color: #0029B4 !important;
}

.img.border-blue:after {
    border-color: #0029B4 !important;
}

body {
    font-family: var(--font-main);
    overflow-x: hidden;
    color: #202020;
}

.roboto {
    font-family: var(--font-secondary);
}

.figtree {
    font-family: var(--font-main);
}

section {
    position: relative;
    padding: 4rem 0;
}

.section-intro {
    position: relative;
    padding: 4rem 0;
}

.section-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
}

strong,b {
    font-weight: 700;
}

.small-images {
    margin: 1rem -.5rem 2rem;
}

.small-images .col {
    padding-left: .5rem;
    padding-right: .5rem;
}

.small-images .img figure {
    border-radius: 0.5rem;
}

.img figure {
    overflow: hidden;
    border-radius: 1rem;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
}

.r-05 {
    border-radius: 0.5rem !important;
}

.expand {
    cursor: pointer;
}

.expand-icon {
    transition: 0.3s;
}

.expand.active .expand-icon {
    transform: scale(-1);
}

.expandable {
    display: none;
}

.small-caption {
    color: #808080;
    font-size: 0.75rem;
    display: inline-block;
}

sup {
    line-height: 0;
    font-size: 60% !important;
}

.no-shadow,.no-shadow > figure {
    box-shadow: none !important;
}

.bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.no-border {
    border: 0 !important;
}

.no-border:after {
    display: none;
}

.arrow-list li {
    position: relative;
    /* display:flex; */
    list-style: none;
    font-family: 'Roboto';
    font-size: var(--font-size-m);
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-left: 2.5rem;
}

.arrow-list li:before {
    content: '';
    background: url(../img/areas/2/list-arrow.svg);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    position: relative;
    top: 0.15rem;
    position: absolute;
    left: 0;
    top: -2px;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

.post-excerpt {
    font-size: var(--font-size-12);
}

.suptitle {
    font-size: var(--font-size-xs);
    font-weight: 400 !important;
}

.adnotation {
    padding: 0 10px;
    position: absolute;
    color: #808080;
    display: inline-block;
    font-size: var(--font-size-11);
}

.review {
    margin-bottom: 24px;
}

.linked-product .post-excerpt {
    font-size: 10px;
}

.linked-product .white-box-small {
    border-radius: 0.5rem;
}

.linked-product .product {
    margin-top: -4rem;
}

.linked-product {
    z-index: 2;
    position: relative;
    text-align: left;
    max-width: 400px;
    margin-bottom: 2rem;
}

.linked-product {
    margin: 0 16px 24px 0;
}

.linked-product .product {
    margin-top: 0;
}

.linked-product .product-image img {
    max-width: none;
    max-height: none;
}

.linked-product .product.white-box-small {
    position: relative;
    width: 400px;
    min-height: 178px;
    padding: 20px 12px;
    padding-left: calc(var(--reserve, 220px) + 12px);
    display: flex;
    align-items: center;
    overflow: visible;
    border-radius: .5rem;
}

.linked-product .product-image {
    position: absolute;
    left: var(--img-left, 0px);
    top: 50%;
    transform: translate(0, calc(-50% + var(--img-dy, 0px)));
    width: var(--img-w, 220px);
    pointer-events: none;
    z-index: 1;
}

.linked-product .product-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

.linked-product .product-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    width: var(--text-w, 184px);
    margin-left: auto;
}

.linked-product .product-info h4 {
    margin: 0 0 6px;
}

.linked-product .product-info .post-excerpt {
    line-height: 1.35;
    margin-bottom: 10px;
}

.linked-product--maculoft {
    --img-w: 204px;
    --img-left: -26px;
    --img-dy: -10px;
    --reserve: 192px;
}

.linked-product--demoxoft-plus-lipozel {
    --img-w: 120px;
    --img-left: 30px;
    --img-dy: -24px;
    --reserve: 188px;
}

.linked-product--demoxoft-plus-clean {
    --img-w: 220px;
    --img-left: -30px;
    --img-dy: -8px;
    --reserve: 192px;
}

.linked-product--palpederm {
    --img-w: 115px;
    --img-left: 38px;
    --img-dy: -28px;
    --reserve: 184px;
}

.linked-product--dexoftyal-zel {
    --img-w: 224px;
    --img-left: -36px;
    --img-dy: 0px;
    --reserve: 190px;
}

.linked-product--dexoftyal-md {
    --img-w: 138px;
    --img-left: 32px;
    --img-dy: -30px;
    --reserve: 188px;
}

.linked-product--demoxoft-clean {
    --img-w: 250px;
    --img-left: -50px;
    --img-dy: -28px;
    --reserve: 186px;
    --text-w: 184px;
}

.linked-product--dexoftyal-ud {
    --img-w: 210px;
    --img-left: -22px;
    --img-dy: -10px;
    --reserve: 210px;
}

.linked-product--demoxoft-plyn {
    --img-w: 152px;
    --img-left: 22px;
    --img-dy: -30px;
    --reserve: 188px;
}

.advices {
    position: relative;
    overflow: hidden;
}

.col-1-3 {
    width: 100%;
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
    box-sizing: border-box;
    padding: 1rem;
}

.symptom-grid::after {
    content: '';
    flex: 0 0 calc(33.333% - 0rem);
    max-width: calc(33.333% - 0rem);
    visibility: hidden;
}

.mw-250 {
    max-width: 250px;
}

.mw-300 {
    max-width: 300px;
}

.mw-400 {
    max-width: 400px;
}

.mw-450 {
    max-width: 450px;
}

.mw-500 {
    max-width: 500px;
}

.mw-600 {
    max-width: 600px;
}

.mw-800 {
    max-width: 800px;
    margin: 0 auto;
}

.mw-1000 {
    max-width: 1000px;
    margin: 0 auto;
}

.mw-1080 {
    max-width: 1080px;
    margin: 0 auto;
}

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

.border-h4 h4 {
    position: relative;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}

.border-h4 h4:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-pink);
    max-width: 340px;
    width: 70%;
}

.p-absolute {
    position: absolute !important;
}

.pos-rc {
    top: 50%;
    right: -25%;
    transform: translate(0,-50%);
}

.pos-lc {
    top: 50%;
    left: -25%;
    transform: translate(0,-50%);
}

.pos-rb {
    right: 0;
    bottom: 0;
}

.pos-rt {
    right: 0;
    top: 0;
}

.pos-lb {
    left: 0;
    bottom: 0;
}

.pos-lt {
    left: 0;
    top: 0;
}

.mt--1 {
    margin-top: -1rem !important;
}

.mt--15 {
    margin-top: -1.5rem !important;
}

.mt--2 {
    margin-top: -2rem !important;
}

.mt--3 {
    margin-top: -3rem !important;
}

.mt--4 {
    margin-top: -4rem !important;
}

.mt--5 {
    margin-top: -5rem !important;
}

.mt-05 {
    margin-top: 0.5rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-15 {
    margin-top: 1.5rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mt-4 {
    margin-top: 4rem !important;
}

.mt-5 {
    margin-top: 5rem !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

.mt-7 {
    margin-top: 7rem !important;
}

.mt-8 {
    margin-top: 8rem !important;
}

.mb-05 {
    margin-bottom: 0.5rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-15 {
    margin-bottom: 1.5rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.mb-4 {
    margin-bottom: 4rem !important;
}

.mb-5 {
    margin-bottom: 5rem !important;
}

.mb-6 {
    margin-bottom: 6rem !important;
}

.mb-7 {
    margin-bottom: 7rem !important;
}

.mb-8 {
    margin-bottom: 8rem !important;
}

.mr-05 {
    margin-right: 0.5rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}

.mr-15 {
    margin-right: 1.5rem !important;
}

.mr-2 {
    margin-right: 2rem !important;
}

.ml--1 {
    margin-left: -1rem !important;
}

.ml--2 {
    margin-left: -2rem !important;
}

.ml-05 {
    margin-left: 0.5rem !important;
}

.ml-1 {
    margin-left: 1rem !important;
}

.ml-15 {
    margin-left: 1.5rem !important;
}

.ml-2 {
    margin-left: 2rem !important;
}

.ml-3 {
    margin-left: 3rem !important;
}

.ml-4 {
    margin-left: 4rem !important;
}

.ml-5 {
    margin-left: 5rem !important;
}

.ml-6 {
    margin-left: 6rem !important;
}

.p-1 {
    padding: 1rem !important;
}

.p-2 {
    padding: 2rem !important;
}

.p-3 {
    padding: 3rem !important;
}

.pt-1 {
    padding-top: 1rem !important;
}

.pt-15 {
    padding-top: 1.5rem !important;
}

.pt-2 {
    padding-top: 2rem !important;
}

.pt-3 {
    padding-top: 3rem !important;
}

.pt-4 {
    padding-top: 4rem !important;
}

.pt-5 {
    padding-top: 5rem !important;
}

.pb-1 {
    padding-bottom: 1rem !important;
}

.pb-15 {
    padding-bottom: 1.5rem !important;
}

.pb-2 {
    padding-bottom: 2rem !important;
}

.pb-3 {
    padding-bottom: 3rem !important;
}

.pb-4 {
    padding-bottom: 4rem !important;
}

.pb-5 {
    padding-bottom: 5rem !important;
}

.pl-05 {
    padding-left: 0.5rem !important;
}

.pl-1 {
    padding-left: 1rem !important;
}

.pl-15 {
    padding-left: 1.5rem !important;
}

.pl-2 {
    padding-left: 2rem !important;
}

.pl-3 {
    padding-left: 3rem !important;
}

.pl-4 {
    padding-left: 4rem !important;
}

.pl-5 {
    padding-left: 5rem !important;
}

.pl-6 {
    padding-left: 6rem !important;
}

.pr-05 {
    padding-right: 0.5rem !important;
}

.pr-1 {
    padding-right: 1rem !important;
}

.pr-15 {
    padding-right: 1.5rem !important;
}

.pr-2 {
    padding-right: 2rem !important;
}

.pr-3 {
    padding-right: 3rem !important;
}

.pr-4 {
    padding-right: 4rem !important;
}

.pr-5 {
    padding-right: 5rem !important;
}

.pr-6 {
    padding-right: 6rem !important;
}

.gap-05 {
    gap: 0.5rem !important;
}

.gap-1 {
    gap: 1rem !important;
}

.gap-15 {
    gap: 1.5rem !important;
}

.gap-2 {
    gap: 2rem !important;
}

.gap-3 {
    gap: 3rem !important;
}

.gap-4 {
    gap: 4rem !important;
}

.gap-5 {
    gap: 5rem !important;
}

.gap-6 {
    gap: 6rem !important;
}

.uppercase {
    text-transform: uppercase;
}

.fw-300,.fw-300 * {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500,.fw-500 * {
    font-weight: 500;
}

.fw-600,.fw-600 * {
    font-weight: 600;
}

.fw-700,.fw-700 * {
    font-weight: 700;
}

.fw-800,.fw-800 * {
    font-weight: 800;
}

.lh-1 {
    line-height: 1;
}

.lh-11 {
    line-height: 1.1;
}

.lh-12 {
    line-height: 1.2;
}

.lh-13 {
    line-height: 1.3;
}

.lh-14 {
    line-height: 1.4;
}

.lh-15 {
    line-height: 1.5;
}

.lh-16 {
    line-height: 1.6;
}

.lh-17 {
    line-height: 1.7;
}

.lh-18 {
    line-height: 1.8;
}

.lh-19 {
    line-height: 1.9;
}

.lh-2 {
    line-height: 2;
}

.br-1 {
    border-radius: 1rem;
}

.br-2 {
    border-radius: 2rem;
}

.br-3 {
    border-radius: 3rem;
}

.br-4 {
    border-radius: 4rem;
}

.br-5 {
    border-radius: 5rem;
}

.b-1 {
    border-style: solid;
    border-width: 1px;
}

.b-2 {
    border-style: solid;
    border-width: 2px;
}

.b-3 {
    border-style: solid;
    border-width: 3px;
}

.center {
    text-align: center;
    margin: 0 auto;
}

.center-flex {
    justify-content: center;
}

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

.align-end {
    align-items: flex-end;
}

.align-right {
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex {
    display: flex;
}

.row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
}

.align-self-end {
    align-self: flex-end;
    width: 100%;
}

.half {
    width: 50%;
}

.img-text-block .img {
    flex: 1 0 40%;
    padding-right: 1rem;
}

.img-text-block .block-text {
    margin: 0;
}

.white-box {
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
    border-radius: 1rem;
    box-shadow: 0px 12px 24px 0px #00000033;
    padding: 2.25rem 2.5rem;
    flex: 1 0 100%;
}

.white-box-small {
    background: white;
    box-shadow: 0px 4px 12px 0px #0000001A;
    border-radius: 1rem;
    padding: 1rem 1.2rem;
}

.small-box {
    border-radius: 1rem;
    padding: 1rem 1.2rem;
}

.small-box-outer {
    width: 100%;
}

.small-box-outer .small-box {
    box-shadow: 0px 12px 24px 0px #0000001A;
    flex: 1 1 auto;
}

.arrow-headline {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.arrow-headline:before {
    content: '';
    display: inline-flex;
    background: url(../img/arrow.svg);
    margin-right: 0.7rem;
    width: 17px;
    height: 17px;
}

.single-product .breadcrubms {
    margin-top: 100px;
    color: #AAAAAA;
}

.breadcrubms a {
    transition: 0.3s;
}

.single-product .breadcrubms span:not(:first-child):before {
    content: '/ ';
    margin: 0 6px;
}

.single-product .breadcrubms span.active {
    color: #222;
}

.single-product .section-1 {
    padding-bottom: 6rem;
}

.single-product .section-1 p + h6 {
    margin-top: -1rem;
}

.breadcrubms .category-label {
    color: #0A4A7F;
    border: 1px solid #0A4A7F;
    background: transparent;
    margin: 0;
}

.tags {
    margin-bottom: 1rem;
}

.tags .tag {
    border: 2px solid;
    border-radius: 2.2rem;
    padding: 0.3rem 0.7rem;
    pointer-events: none;
}

/* Button */
.btns {
    align-items: flex-start;
}

.btn,button:not(.close-modal),input[type="submit"] {
    display: inline-block;
    padding: 10px 48px;
    padding: 0.6rem 3rem;
    border-radius: var(--border-radius-button);
    /* background: #fff; */
    font-weight: 700;
    font-size: var(--font-size-s);
    line-height: 1.5;
    box-shadow: 0 2px 12px 0 #0000001f;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.75rem;
    text-transform: uppercase;
    position: relative;
    /* Needed for pseudo-element */
    overflow: hidden;
    /* Ensure the pseudo-element stays within button */
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}

.btn[class*="border"] {
    padding: calc(0.6rem - 2px) 2.4rem;
}

.label {
    margin: 0;
    border-radius: 0.75rem;
    padding: 0.6rem 1rem;
    white-space: normal;
    text-align: left;
    cursor: default;
}

.btn-border {
    border: 3px solid;
}

.bg-lightgrey {
    background: #F2F2F2;
}

.btn.bg-white {
    background: white;
}

.btn.blue-2 span {
    color: var(--color-blue-2);
}

.btn.orange,.btn.orange span {
    color: var(--color-orange-2);
}

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

.btn.bg-blue-4 {
    background: var(--color-blue-4);
    color: white;
}

.btn.blue-4 {
    color: var(--color-blue-4);
    border-color: var(--color-blue-4);
}

.img.border-orange:after, .border-orange, .btn.border-orange {
    border-color: var(--color-orange-2) !important;
}

.btn.border-orange {
    color: var(--color-orange-2);
}

.btn.border-turquoise {
    border-color: var(--color-turquoise) !important;
    color: var(--color-turquoise);
}

.border-transparent {
    border-color: transparent !important;
}

.img.border-pink:after, .border-pink {
    border-color: var(--color-pink);
}

.btn.border-pink {
    color: var(--color-pink);
}

.btn.small {
    padding: 0.4rem 1.75rem;
    font-size: 0.75rem;
}

.btn.small span {
    font-weight: 600;
}

.btn,.btn span {
    transition: 0.2s;
}

button.orange-gradient,.btn.orange-gradient,.btn.orange-gradient span {
    color: white !important;
}

.btn-orange {
    /*background: #F39200;*/
    border-color: #F39200 !important;
    color: #F39200 !important;
}

.bg-orange {
    background: #F39200;
}

.btn-blue {
    /*background: var(--color-blue) !important;*/
    border-color: var(--color-blue) !important;
    color: var(--color-blue);
}

.btn-turquoise {
    background: #00ABC8;
}

.orange-gradient {
    background: linear-gradient(91.93deg, #FFB046 0%, #FF9200 100%);
}

.grey-gradient {
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
}

button.orange-gradient,.btn.orange-gradient {
    background: linear-gradient(90deg, #F36500 0%, #FF9200 100%);
    border: 0 !important;
}

/* Button gradients */
.btn.orange-gradient {
    background: linear-gradient(90deg, #F36500 0%, #FF9200 100%);
    color: #fff;
}

.btn.turquoise-gradient {
    background: linear-gradient(91.73deg, #2F6978 -0.54%, #04B9D9 100%);
    color: #fff;
}

.btn.orange2-gradient {
    background: linear-gradient(91.93deg, #FFB046 0%, #FF9200 100%);
    color: #fff;
}

.turquoise-gradient-dark {
    background: linear-gradient(91.73deg, #2F6978 -0.54%, #04B9D9 100%);
    color: #fff;
}

.turquoise-gradient-dark-2 {
    background: linear-gradient(271.53deg, #2A849D 0%, #1A3E48 89.24%);
    color: #fff;
}

.dark-blue-gradient {
    background: linear-gradient(90deg, #0029B4 0%, #3965F8 100%);
}

.turquoise-gradient-2 {
    background: linear-gradient(91.73deg, #00ACC9 -0.54%, #50E6FF 100%);
}

.turquoise-gradient-3 {
    background: linear-gradient(283.19deg, #D2FAFF 0.34%, #7EDAE5 100.31%);
}

.turquoise-gradient-4 {
    background: linear-gradient(91.73deg, #04B9D9 -0.54%, #193F49 100%);
}

.turquoise-gradient-5 {
    background: linear-gradient(270.94deg, #50E6FF 0%, #00ACC9 79.01%);
}

.lightblue-gradient {
    background: linear-gradient(135.6deg, #EEFDFF 14.38%, #D2FAFF 105.78%);
}

.lightblue-gradient-2 {
    background: linear-gradient(135.6deg, #EEFDFF 14.38%, #6FCDE5 105.78%);
}

.lightblue-gradient-3 {
    background: linear-gradient(335.35deg, #CCEBF9 -8.2%, #FFFFFF 88.7%);
}

.lightblue-gradient-4 {
    background: linear-gradient(178.12deg, #FFFFFF 1.59%, #CCEBF9 95.52%);
}

.lightblue-pink-gradient {
    background: linear-gradient(146.05deg, #CCEBF9 51.79%, #FDEEF1 92.25%);
}

.pink-gradient {
    background: linear-gradient(268.93deg, #F4AAB7 4.79%, #D67B8B 74.15%);
    color: #fff;
}

.maculoft-gradient {
    background: linear-gradient(91.93deg, #FAB52A 0%, #F8A900 100%);
}

.yellow-gradient {
    background: linear-gradient(135.6deg, #FFFAF0 14.38%, #FFD88B 105.78%);
}

.yellow-gradient-2 {
    background: linear-gradient(283.19deg, #FFDF9D 0.34%, #FFF4DF 100.31%);
}

.pink-yellow-gradient {
    background: linear-gradient(107.15deg, #FDEEF1 0%, #FEF0D4 100%);
}

.blue-gradient {
    background: linear-gradient(90deg, #0A4A7F 0%, #1285E5 100%);
}

.section-tips .btn.small {
    align-self: flex-start;
}

.section-tips .btn.small span {
    font-weight: 800;
}

.btn.center {
    display: block;
    width: fit-content;
    margin: 3rem auto 0 auto;
    /* keeps your margin-top */
}

.btn.border-blue {
    box-shadow: inset 0 0 0 3px #0199DF;
    /* inset border */
}

.btns .btn-border {
    border-width: 2px;
}

.btns .btn.orange {
    box-shadow: inset 0 0 0 2px var(--color-orange-2);
}

.btns .btn.turquoise {
    box-shadow: inset 0 0 0 2px var(--color-turquoise);
}

.btns .btn.pink {
    box-shadow: inset 0 0 0 2px var(--color-pink);
}

.btn.bg-white:before, .btn.bg-transparent:before, button.bg-transparent:before {
    content: '';
    position: absolute;
    left: -2px;
    /* match border width */
    right: -2px;
    top: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: inherit;
    transform: translateX(-100%);
    transition: transform 0.2s cubic-bezier(.7,0,.3,1);
}

.btn.blue:before {
    background: var(--color-blue-3);
}

.btn.blue-2:before {
    background: var(--color-blue-2);
}

.btn.orange:before {
    background: var(--color-orange-2);
}

.btn.blue-4:before {
    background: var(--color-blue-4);
}

.btn.turquoise:before {
    background: var(--color-turquoise);
}

.btn.pink:before {
    background: var(--color-pink);
}

.btn.yellow:before {
    background: var(--color-yellow);
}

button.btn-orange:before {
    background: #F39200;
}

button.btn-blue:before {
    background: var(--color-blue);
}

.btn.border-pink:before {
    background: var(--color-pink);
}

.btn[class*="gradient"] {
    --angle: 90deg;
    --s1: 0%;
    --s2: 100%;
    --g1: transparent;
    --g2: transparent;
    background: none !important;
    background-image: linear-gradient(var(--angle), var(--g1) var(--s1), var(--g2) var(--s2)) !important;
    transition: --g1 450ms ease, --g2 450ms ease;
    color: #fff;
}

.btn > * {
    position: relative;
    z-index: 1;
}

.btn-secondary {
    background: linear-gradient(90deg, var(--color-button-secondary-1) 0%, var(--color-orange-2) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease;
}

.btn-secondary span {
    color: white;
}

.btn.gradient-blue {
    --angle: 133.03deg;
    --s1: 1.72%;
    --s2: 98.28%;
    --g1: #0029B4;
    --g2: #0094FF;
    background: none;
    background-image: linear-gradient(var(--angle), var(--g1) var(--s1), var(--g2) var(--s2));
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: --g1 450ms ease, --g2 450ms ease;
    color: #fff;
}

.dark {
    visibility: hidden;
}

.dark-mode section {
    background: #202020;
}

.dark-mode .section-symptoms .section-title, .dark-mode .section-symptoms .symptom h4, .dark-mode h3, .dark-mode .advice-text, .dark-mode .advice-text *, .dark-mode .arrow-list, .dark-mode .arrow-list *, .dark-mode .advice-3, .dark-mode .advice-3 *, .dark-mode .advice-4 .advice, .dark-mode .advice-4 h3, .dark-mode .advice-4 .advice-title *, .dark-mode .section-products .section-title, .dark-mode .section-products .subtitle, .dark-mode .faq *, .dark-mode .bibliography, .dark-mode .bibliography *, .dark-mode footer, .dark-mode footer * {
    color: white !important;
}

.dark-mode .adv-text {
    color: #D0D0D0;
}

.dark-mode .section-symptoms .white-box-small {
    background: linear-gradient(90.91deg, #181818 0%, #222222 100%) !important;
    color: white;
}

.dark-mode .light {
    visibility: hidden;
}

.dark-mode .dark {
    visibility: visible;
}

.dark-mode .blink-circle circle {
    stroke: #002C4C;
}

.dark-mode .blink-svg path {
    fill: #0094FF;
}

.dark-mode .advice-2, .dark-mode .advice-4 {
    background: #002C4C;
}

.dark-mode .custom-flickity-controls .flickity-prev-next-button::before {
    background: linear-gradient(289.08deg, #0029B4 0.09%, #3965F8 99.91%) !important;
}

.dark-mode .custom-flickity-controls path {
    fill: #0029B4
}

.dark-mode .custom-flickity-controls .flickity-page-dot::after {
    background: white;
}

.dark-mode .custom-flickity-controls .flickity-page-dot.is-selected::after {
    background: #0029B4;
}

.dark-mode .faq-question {
    border-color: white;
}

.dark-mode .faq-question img {
    filter: invert(1);
}

.dark-mode footer {
    background: #222222;
}

/* Header */
.logo {
    z-index: 2;
    display: inline-block;
    position: absolute;
    left: 84px;
    top: 50%;
    transform: translate(0,-50%);
    transition: 0.5s;
}

.home .logo {
    opacity: 0;
    pointer-events: none;
}

.scrolled-150 .logo {
    opacity: 1;
    pointer-events: all;
}

.logo img {
    height: 2.75rem;
    max-height: 48px;
    width: auto;
}

#menu {
    position: absolute;
    top: 0;
    right: 0;
}

#menu div,#menu .menu {
    height: 100%;
}

#menu ul {
    margin: 0;
    display: flex;
    color: #222222;
    list-style: none;
    text-transform: uppercase;
}

header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: white;
    box-shadow: 0px 2px 8px 0px #0000000A;
}

header .container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.menu li {
    list-style: none;
}

#menu {
    position: absolute;
    top: 0;
    right: 59px;
    height: 100%;
    display: flex;
    align-items: center;
}

#menu div,#menu .menu {
    height: 100%;
}

.where-buy {
    top: -6px;
}

.single-product #menu {
    justify-content: space-between;
}

ul.menu {
    display: flex;
    height: 100%;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.menu > li {
    position: relative;
    margin: 0 25px;
    display: flex;
    align-items: center;
    min-height: 100px;
}

ul.menu > li > a {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

ul.menu > li > a:before {
    content: '';
    width: 100%;
    z-index: 2;
    height: 2px;
    background: #0199DF;
    position: absolute;
    align-self: flex-end;
    bottom: -5px;
    transition: 0.2s;
    opacity: 1;
}

ul.menu > li:nth-child(2n) > a:before {
    background: #0A4A7F;
}

.menu-item-has-children > a:after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 8px;
    background: url(../img/arrow-submenu.svg);
    margin-left: 10px;
    transition: 0.2s;
}

ul.menu > li.current-menu-item > a:before {
    opacity: 1;
}

ul.menu > li.current-menu-item > a:before {
    height: 3px;
}

ul.menu > li:nth-child(2n+1) .sub-menu .current-menu-item a {
    color: #0199DF;
}

ul.menu > li:nth-child(2n) .sub-menu .current-menu-item a {
    color: #0A4A7F;
}

.menu-item-has-children.current-menu-item > a:after {
    transform: scale(-1);
}

.sub-menu {
    position: absolute;
    visibility: hidden;
    top: 94px;
    background: white;
    left: -27px;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
    box-shadow: 0px 4px 12px 0px #0000001A;
}

.menu .sub-menu {
    flex-direction: column;
    border-radius: 1rem;
    padding: 1.25rem 1.75rem;
}

.sub-menu li {
    margin: 0.4rem 0;
}

.sub-menu a {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: 0.2s;
}

/* Mega panel (only for the parent with class is-mega) */
#menu .is-mega {
    position: relative;
}

#menu .is-mega > .mega {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: -251px;
    background: #fff;
    border-radius: 14px;
    padding: 0.85rem 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    z-index: 1000;
    display: flex;
    flex-direction: row;
    width: 638px;
}

#menu .is-mega:hover > .mega {
}

.mega-col {
    padding: 0 28px;
    align-content: center;
}

.mega-col:not(:last-child) {
    border-right: 2px solid #0A4A7F;
}

#menu .mega-col:last-child .mega-list:after {
    content: '';
    width: 150px;
    height: 2px;
    background: #0A4A7F;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

#menu .mega-col .mega-list li {
    margin: 0.4rem 0;
}

#menu .mega-col .mega-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

#menu .mega-col:last-child .mega-list {
    position: relative;
    justify-content: space-between;
    height: 102px;
}

/* Mobile */
@media (max-width: 900px) {
    #menu .is-mega > .mega {
        position: static;
        box-shadow: none;
        padding: 0;
        margin: 0;
        text-align: center;
        width: auto;
        display: block;
        boder-radius: 0;
    }

    #menu .mega-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #menu .mega-inner::before, #menu .mega-inner::after {
        display: none;
    }

    #menu .mega-col {
        padding: 10px 0;
    }

    #menu .mega-col:not(:last-child) {
        border: 0;
        border-bottom: 2px solid #0A4A7F;
    }

    #menu .mega-col .mega-list {
        height: auto !important;
    }

    #menu .mega-col:last-child .mega-list:after {
        display: none;
    }
}

/* Section Container */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(287.36deg, #0A4A7F 0.56%, #1285E5 100.28%);
    color: #fff;
    font-family: var(--font-main);
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 60px;
    display: flex;
    align-items: center;
}

/* Layout */
.hero-row {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: calc(100vh - 160px);
}

.hero-content {
    width: 64%;
}

.logo-box {
    position: relative;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 14px;
    justify-self: flex-start;
}

.logo-box:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    transform: translate(-100%,0);
    display: block;
    width: 100px;
    height: 100%;
    background: white;
}

.logo-box img {
    height: 55px;
}

/* Headline */
.hero-title {
    font-weight: 700;
    font-style: normal;
    font-size: var(--font-size-xxxl);
    color: #fff;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
}

/* Text */
.hero-text {
    font-weight: 400;
    font-style: normal;
    color: #fff;
    margin-bottom: 28px;
}

/* Gallery/Thumbnails */
.hero-gallery {
    position: absolute;
    right: 0;
    transform: translate(11vw,0);
    width: 45vw;
    max-width: 900px;
    gap: 1vw;
    top: 100px;
}

.hero-gallery > div {
    width: 50%;
    gap: 1vw;
}

.hero-gallery-1 {
    margin-top: -100px;
}

.hero-thumb {
    border-radius: var(--border-radius-main);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(32,116,212,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-thumb img {
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.4);
}

/* Home - Section 2 */
.section-areas {
    z-index: 3;
    padding-bottom: 8rem;
}

.section-areas .product-slider .btn {
    align-self: flex-start;
}

.areas-content {
    position: relative;
    margin-top: 5rem;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 60px;
    z-index: 2;
    position: relative;
}

.areas-top {
    z-index: 3;
}

.area-header {
    position: relative;
    box-shadow: 0px 12px 24px 0px #0000001A;
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
    min-height: 8rem;
    border-radius: 1rem;
    transition: 0.3s;
    cursor: pointer;
}

.area-header img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-60%);
}

.expand-content {
    position: absolute;
    /* display:none; */
    margin-top: -1rem;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

.area-description {
    box-shadow: 0px 12px 24px 0px #0000001A;
    background: linear-gradient(97.13deg, #FFFFFF 0.65%, #F5F5F5 100%);
    border-radius: 1rem;
    padding: 2.5rem 1.5rem 1.5rem;
}

.area-description .small-text {
    text-align: left;
    font-family: var(--font-secondary);
    margin-bottom: 0.5rem;
}

.area-inner {
    position: relative;
}

.area-header {
    position: relative;
    border-radius: 1rem;
    z-index: 1;
    text-align: center;
}

/* Base layer (default background) */
.area-header::before, .area-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.area-item .slider {
    padding-left: 0.25rem;
    margin-top: 1rem;
}

.area-item .slider .product-img {
    flex: 1 0 46%;
    display: flex;
    align-items: center;
}

.area-item .slider .product-img img {
    object-fit: contain;
}

.area-item .slider .product-info {
    padding-left: 1.5rem;
}

/* .area-item .product-slider .custom-flickity-controls{position:absolute;left:50%;transform:translate(-50%,16px);} */
.product-slider .flickity-viewport {
    overflow: visible;
}

.product-slider .custom-flickity-controls {
    margin-top: 0;
}

.product-slider .custom-flickity-controls .flickity-page-dots {
    gap: 0;
}

.eye {
    margin: 3vw 0 6vw;
}

.eyeball {
    will-change: transform;
}

.area-item .area-description .btn {
    color: white;
}

/* Register animatable custom properties (once) */
@property --g1 {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

@property --g2 {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

/* Button builds gradient from the vars and animates just the colors */
.area-description .btn {
    --angle: 180deg;
    /* default angle */
    --s1: 0%;
    --s2: 100%;
    background-image: linear-gradient(var(--angle), var(--g1) var(--s1), var(--g2) var(--s2));
    transition: --g1 750ms ease, --g2 750ms ease;
}

/* ---------- BASE (non-hover) values per area ---------- */
/* TOP */
.areas-top .area-item:nth-child(1) .area-description .btn {
    --angle: 180deg;
    --s1: 0%;
    --s2: 100%;
    --g1: #FF9303;
    --g2: #F36500;
}

.areas-top .area-item:nth-child(2) .area-description .btn {
    --angle: 114.91deg;
    --s1: 13.42%;
    --s2: 100%;
    --g1: #0029B4;
    --g2: #3965F8;
}

.areas-top .area-item:nth-child(3) .area-description .btn {
    --angle: 180deg;
    --s1: 0%;
    --s2: 100%;
    --g1: #FFB400;
    --g2: #EFA722;
}

/* BOTTOM */
.areas-bottom .area-item:nth-child(1) .area-description .btn {
    --angle: 115.92deg;
    --s1: 0%;
    --s2: 100%;
    --g1: #1A3E48;
    --g2: #0D91B5;
}

.areas-bottom .area-item:nth-child(2) .area-description .btn {
    --angle: 91.73deg;
    --s1: -0.54%;
    --s2: 100%;
    --g1: #00ACC9;
    --g2: #50E6FF;
}

.areas-bottom .area-item:nth-child(3) .area-description .btn {
    --angle: 268.93deg;
    --s1: 4.79%;
    --s2: 74.15%;
    --g1: #F4AAB7;
    --g2: #D67B8B;
}

/* Default background */
.area-header::before {
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
    opacity: 1;
}

.area-header::after {
    background: var(--area-gradient, transparent);
    opacity: 0;
}

.areas-top .area-item:nth-child(1) .area-header {
    --area-gradient: linear-gradient(180deg, #FF9303 0%, #F36500 100%);
}

.areas-top .area-item:nth-child(2) .area-header {
    --area-gradient: linear-gradient(114.91deg, #0029B4 13.42%, #3965F8 100%);
}

.areas-top .area-item:nth-child(3) .area-header {
    --area-gradient: linear-gradient(180deg, #FFB400 0%, #EFA722 100%);
}

.areas-bottom .area-item:nth-child(1) .area-header {
    --area-gradient: linear-gradient(115.92deg, #1A3E48 0%, #0D91B5 100%);
}

.areas-bottom .area-item:nth-child(2) .area-header {
    --area-gradient: linear-gradient(91.73deg, #00ACC9 -0.54%, #50E6FF 100%);
}

.areas-bottom .area-item:nth-child(3) .area-header {
    --area-gradient: linear-gradient(268.93deg, #F4AAB7 4.79%, #D67B8B 74.15%);
}

/* Small gradient buttons use animatable CSS vars (same @property --g1/--g2 as before) */
.btn.small {
    /* fallback defaults */
    --angle: 90deg;
    --s1: 0%;
    --s2: 100%;
    /* build the gradient from vars */
    background: none;
    /* neutralize any earlier background */
    background-image: linear-gradient(var(--angle), var(--g1) var(--s1), var(--g2) var(--s2));
    transition: --g1 450ms ease, --g2 450ms ease;
    color: #fff;
}

/* -------- base values per gradient variant -------- */
/* case 5: orange-gradient */
.btn.small.orange-gradient {
    --angle: 90deg;
    --g1: #F36500;
    /* left/start */
    --g2: #FF9200;
    /* right/end */
}

/* case 6: turquoise-gradient */
.btn.small.turquoise-gradient {
    --angle: 91.73deg;
    --g1: #2F6978;
    --g2: #04B9D9;
}

/* case 7: pink-gradient */
.btn.small.pink-gradient {
    --angle: 268.93deg;
    --g1: #F4AAB7;
    --g2: #D67B8B;
}

/* case 8: orange2-gradient */
.btn.small.orange2-gradient {
    --angle: 91.93deg;
    --g1: #FFB046;
    --g2: #FF9200;
}

/* case 9: turquoise-gradient-dark */
.btn.small.turquoise-gradient-dark {
    --angle: 91.73deg;
    --g1: #2F6978;
    --g2: #04B9D9;
}

.btn.orange-gradient {
    --angle: 90deg;
    --g1: #F36500;
    --g2: #FF9200;
}

.btn.blue-gradient {
    --angle: 90deg;
    --g1: #0A4A7F;
    --g2: #1285E5;
}

.btn.dark-blue-gradient {
    --angle: 90deg;
    --g1: #0029B4;
    --g2: #3965F8;
}

.btn.turquoise-gradient {
    --angle: 91.73deg;
    --g1: #2F6978;
    --g2: #04B9D9;
}

.btn.orange2-gradient {
    --angle: 91.93deg;
    --g1: #FFB046;
    --g2: #FF9200;
}

.btn.pink-gradient {
    --angle: 268.93deg;
    --g1: #F4AAB7;
    --g2: #D67B8B;
}

.btn.turquoise-gradient-dark {
    --angle: 91.73deg;
    --g1: #2F6978;
    --g2: #04B9D9;
}

/* Home - Section 3 */
.section-tips {
    background: linear-gradient(291.69deg, #0A4A7F 0%, #1285E5 91.16%);
}

.eye-blue {
    position: absolute;
    left: 0;
    top: 0;
}

.section-tips .section-title {
    margin: 1rem 0 2rem;
}

.section-tips .products-carousel {
    margin-top: 0;
}

.tip-right-col img {
    box-shadow: 0px 12px 24px 0px #0000001A;
    border-radius: 1rem;
}

.tip-right-col p {
    margin: 0;
    padding: 1rem 0 0 2.5rem;
}

.symptom-causes {
    margin-top: 0;
}

.symptom-cause {
    width: 50%;
    gap: 1rem;
    margin: 0.5rem 0;
}

.symptom-cause p {
    margin: 0;
    padding-right: 2rem;
}

.symptom-cause .img-wrapper {
    flex: 1 0 25%;
}

.sticky-placeholder {
    display: none !important;
    height: 0;
}

.sticky-headings {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
}

.sticky-headings-inner {
    width: 100%;
}

.tip-scroll-anchor {
    position: relative;
    top: -150px;
    /* offset so when scrolled, the tip lines up correctly */
    height: 0;
}

.tip {
    position: sticky;
    will-change: transform;
    margin-bottom: 75px;
    z-index: 1;
}

.tip-1 {
    top: calc(100px + 32px + var(--sticky-height, 0px));
}

.tip-2 {
    top: calc(100px + 32px + var(--sticky-height, 0px) + 75px);
    z-index: 2;
}

.tip-3 {
    top: calc(100px + 32px + var(--sticky-height, 0px) + 150px);
    z-index: 3;
    margin-bottom: 0;
}

.tip-end-anchor {
    height: calc(100px + 24px + var(--sticky-height, 0px) + 150px + 32px);
}

@media (min-width: 1201px) {
    .section-tips .tip-1::after, .section-tips .tip-2::after, .section-tips .tip-3::after {
        content:'';
        display: block;
        height: 0;
    }

    .section-tips .tip-1::after {
        height: calc(150px + 20px) !important;
    }

    .section-tips .tip-2::after {
        height: calc(75px + 0px) !important;
    }

    .section-tips .tip-3::after {
        height: 40px !important;
    }
}

@media (min-width: 1300px) {
    .tip-1 {
        top: calc(100px + 42px + var(--sticky-height, 0px));
    }

    .tip-2 {
        top: calc(100px + 42px + var(--sticky-height, 0px) + 75px);
    }

    .tip-3 {
        top: calc(100px + 42px + var(--sticky-height, 0px) + 150px);
    }

    .section-tips .tip-3::after {
        height: 32px !important;
    }
}

@media (min-width: 1441px) {
    .tip-1 {
        top: calc(100px + 72px + var(--sticky-height, 0px));
    }

    .tip-2 {
        top: calc(100px + 72px + var(--sticky-height, 0px) + 75px);
    }

    .tip-3 {
        top: calc(100px + 72px + var(--sticky-height, 0px) + 150px);
    }

    .section-tips .tip-1::after {
        height: calc(150px - 4px) !important;
    }

    .section-tips .tip-2::after {
        height: calc(75px + 0px) !important;
    }
}

@media (min-width: 1800px) {
    .tip-1 {
        top: calc(100px + 82px + var(--sticky-height, 0px));
    }

    .tip-2 {
        top: calc(100px + 82px + var(--sticky-height, 0px) + 75px);
    }

    .tip-3 {
        top: calc(100px + 82px + var(--sticky-height, 0px) + 150px);
    }

    .section-tips .tip-1::after {
        height: calc(150px + 14px) !important;
    }
}

.tip .arrow-headline {
    cursor: pointer;
}

.tip .arrow-headline sup{
    position:relative;
    top:-0.25rem;
}

.tip .white-box {
    padding: 1.75rem 2rem;
}

.tip-1 .white-box {
    position: relative;
    z-index: 2;
    flex: 1 0 70%;
    margin-right: -20px;
}

.tip-2 .bottom-text {
    font-weight: 600;
    max-width: 24rem;
    display: block;
}

.tip-2 .white-box {
    padding-left: 5rem;
    padding-right: 5rem;
}

.bottom-content {
    justify-content: space-between;
    margin-top: 2rem;
}

.eye-cares {
    justify-content: space-between;
    padding-top: 10px;
}

.eye-care {
    flex: 0 0 auto;
}

.eye-care .img-wrapper {
    border-radius: 8px;
    overflow: hidden;
    width: 170px;
}

.eye-care .img-wrapper figure {
    border-radius: 0.5rem;
}

.eye-care .small-text {
    margin-top: 0.75rem;
    max-width: 11rem;
}

.products-grid .img-wrapper {
    height: 8rem;
    text-align: center;
}

.products-grid .img-wrapper img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    object-position: center;
}

.products-grid {
    gap: 10px;
    flex-wrap: nowrap;
}

.products-grid.products-carousel .slide {
    width: 20%;
}

.products-grid .custom-flickity-controls {
    display: none;
}

.products-grid.products-carousel {
    margin-bottom: 0;
}

.products-grid .img-wrapper img[src*="dexoftyal-md"] {
    object-position: center;
}

.products-grid .img-wrapper img[src*="dexoftyal-ud"] {
    max-width: 70%;
}

.products-grid .img-wrapper img[src*="dexoftyal-zel"] {
    object-position: 90% 60%;
    max-width: 80%;
}

.products-grid .img-wrapper img[src*="demoxoft-clean"] {
    object-position: 0 100%;
    max-width: 90%;
}

.products-grid .img-wrapper img[src*="demoxoft-plyn"] {
    max-width: 42%;
}

.products-grid .img-wrapper img[src*="Demoxoft-Plus-Clean"] {
    max-width: 70%;
}

/* Home - Section 4 */
.section-knowledge h5 {
    margin-bottom: 1rem;
}

.home-posts {
    width: 1240px;
    max-width: 100%;
    gap: 10px;
    margin: 0 auto;
    margin-top: 3rem;
}

.home-posts + .btn {
    margin-bottom: 8rem;
}

.post {
    display: block;
    transition: 0.3s;
}

.home-posts .post {
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
    padding: 1.2rem;
    border-radius: 1rem;
    box-shadow: 0px 12px 24px 0px #0000001A;
    overflow: hidden;
}

.ft-post .post-excerpt {
    margin: 0.25rem 0;
}

.ft-post .category-label {
    margin: 1.25rem 0 1rem;
}

.post .post-excerpt {
    transition: 0.3s;
}

.post {
    display: block;
}

.posts-index .col {
    margin-bottom: 20px;
}

.posts-index .col:not(.first-post) figure {
    padding-bottom: 75% !important;
}

.home-posts .post:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(90deg, #0A4A7F 0%, #1285E5 100%);
    color: white;
    opacity: 0;
    transition: 0.3s;
}

.post .post-tb,.post .post-details {
    position: relative;
    z-index: 1;
}

.post figure {
    border-radius: 1rem;
    overflow: hidden;
}

.two-posts .post-excerpt {
    display: none;
}

.category-label {
    color: #0A4A7F;
    background: #DBE7F2;
    border-radius: 2.5rem;
    padding: 0.35rem 0.75rem;
    display: inline-block;
    font-weight: 600;
    margin: 0 0 1rem;
    pointer-events: none;
}

.read-more {
    font-weight: 600;
    align-items: center;
    margin-top: 1.5rem;
    flex-direction: row !important;
}

.read-more svg {
    transition: 0.3s;
}

.read-more span {
    margin-right: 0.75rem;
}

.two-posts {
    gap: 10px;
}

.two-posts .post-tb {
    flex: 1 0 50%;
}

.two-posts .post .category-label {
    margin-top: 0;
}

.two-posts .post figure {
    padding-bottom: 75% !important;
}

.two-posts .post-details {
    flex: 1 1 auto;
}

.two-posts .post {
    display: flex;
    gap: 10px;
    flex: 1 0 auto;
}

.read-more svg path {
    fill: black;
}

.verco-logo {
    width: 100px;
}

.verco-post .img {
    max-width: 600px;
    margin-left: auto;
}

/*  Section products */
.home .section-products,.blog .section-products {
    background: linear-gradient(248.28deg, #DBE7F2 15.96%, #B5D3F0 90.3%);
}

.home .products-carousel .flickity-prev-next-button path {
    fill: #0A4A7F;
}

.section-products .section-title {
    margin-bottom: 1.5rem;
}

.products-carousel {
    margin: 2rem -10px;
}

.products-carousel .slide {
    width: 25%;
    padding: 10px;
}

.products-carousel .btn {
    align-self: flex-start;
    padding: 0.3rem 2rem;
    margin-top: 1rem;
}

.products-carousel .product-image {
    height: 16rem;
    max-width: 80%;
    margin: 0 auto;
    padding: 2.2rem 0;
}

.products-carousel .product-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product-info h4 {
    font-weight: 500;
    margin-bottom: 2px;
}

.pink-nav .flickity-prev-next-button path {
    fill: #D67B8B;
}

/* Section bibliography */
.bibliography {
    background: #F5F5F5;
    padding: 3rem 0;
}

.bibliography .refs * {
    font-size: 0.75rem;
}

.bibliography a {
    text-decoration: underline;
}

.bibliography ol {
    padding-left: 20px;
}

.bibliography li {
    word-wrap: break-word;
    margin-bottom: 0.3rem;
}

/* Linked products */
.product.dexoftyal-md .product-img {
    flex: 1 0 150px;
}

.product.dexoftyal-md .product-img figure {
    margin-top: -3rem;
}

.product.dexoftyal-ud .product-img {
    flex: 1 0 176px;
    margin-left: -1rem;
    margin-right: 0.5rem;
}

.product.dexoftyal-ud .product-img figure {
    margin-top: -0.5rem;
}

.product.dexoftyal-zel .product-img {
    flex: 1 0 230px;
    margin-left: -3rem;
}

.product.dexoftyal-zel .product-img figure {
    margin-top: -1.5rem;
}

.product.demoxoft-plus-clean .product-img {
    flex: 1 0 180px;
    margin-left: -1rem;
}

.product.demoxoft-plus-clean .product-img figure {
    margin-top: -2rem;
}

.product.demoxoft-clean .product-img {
    flex: 1 0 200px;
    margin-left: -1.5rem;
}

.product.demoxoft-clean .product-img figure {
    margin-top: -1rem;
}

.product.demoxoft-plyn .product-img {
    flex: 1 0 130px;
    margin-right: 1rem;
}

.product.demoxoft-plyn .product-img figure {
    margin-top: -2rem;
}

.product.demoxoft-plus-lipozel .product-img {
    flex: 1 0 114px;
    margin-right: 0.5rem;
}

.product.demoxoft-plus-lipozel .product-img figure {
    margin-top: -2.5rem;
}

.product.palpederm .product-img {
    flex: 1 0 120px;
    margin-right: 0.5rem;
    margin-left: 1rem;
}

.product.palpederm .product-img figure {
    margin-top: -2rem;
}

.product.maculoft .product-img {
    flex: 1 0 150px;
    margin-left: -1rem;
}

.product.maculoft .product-img figure {
    margin-top: -2.5rem;
}

/* Area page */
.area-section {
    overflow: visible;
}

.area-section:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000033;
    z-index: 0;
    position: absolute;
}

.area-section h1 {
    font-weight: 300;
}

.area-section .hero-content {
    position: relative;
    width: auto;
    z-index: 2;
}

/* Suche Oczy */
.p-suche_oczy .advice-title {
    max-width: 55%;
}

.p-suche_oczy .advice-1 .advice {
    gap: 2.5rem;
    align-items: flex-start;
}

.p-suche_oczy .advice-1 .advice .img {
    position: relative;
    flex: 1 1 50%;
}

.p-suche_oczy .advice-1 .advice-text {
    flex: 1 1 50%;
    margin-top: 2rem;
}

.p-suche_oczy .advice-1 .advice:not(.last-advice) .advice-text p {
    margin: 0 0 0.5rem;
}

.p-suche_oczy .advice-1 .advice:nth-child(2) {
    flex-direction: row-reverse;
}

.p-suche_oczy .advice-1 .advice:nth-child(1) .img:after {
    border-color: #0029B4;
}

.p-suche_oczy .advice-2 {
    background: #FEF1E5;
}

.p-suche_oczy .advice-2 .col-r {
    align-items: flex-end;
}

.p-suche_oczy .advice-2 .col-r .img {
    max-width: 340px;
    width: 100%;
}

.p-suche_oczy .symptom {
    /* max-width:400px; */
}

.p-suche_oczy .advice-4 .advice:nth-child(4n+1), .p-suche_oczy .advice-4 .advice:nth-child(4n+2) {
    padding-right: 18%;
}

.p-suche_oczy .advice-4 .advice:nth-child(4n+3), .p-suche_oczy .advice-4 .advice:nth-child(4n+4) {
    padding-left: 18%;
}

.p-suche_oczy .advice-1 .advices-inner:nth-child(2) .advice-text {
    padding-left: 104px;
}

.p-suche_oczy .linked-product--demoxoft-clean {
    margin-top: -80px;
}

.p-suche_oczy .advice-3 .linked-product {
    align-self: flex-end;
    margin-top: -60px;
    margin-right: 30px;
}

.section-symptoms {
    position: relative;
    overflow: hidden;
}

.p-suche_oczy.section-symptoms *, .cracks-container + .container {
    pointer-events: none;
}

.cracks-container + .container .btn {
    pointer-events: all !important;
}

.cracks-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cracks-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cracks-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    pointer-events: none;
}

.cracks-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto;
}

.cracks-1, .cracks-2 {
    position: absolute;
    object-fit: cover;
    width: 45%;
    height: 50%;
    top: 0;
    left: 0;
    z-index: 0;
}

.cracks-2 {
    width: 60%;
    height: 80%;
    right: 0;
    bottom: 0;
    transform: scale(-1, -1);
    left: auto;
    top: auto;
}

.section-symptoms .cracks-1 {
    opacity: 0.4;
}

.section-symptoms .cracks-2 {
    opacity: 0.6;
}

.advice-1 .cracks-1 {
    height: 1000px;
    width: 1000px;
    left: 20%;
    top: calc(100% - 400px);
    transform: rotate(192deg);
    opacity: 0.8
}

.advice-1 .cracks-2 {
    height: 600px;
    width: 600px;
    bottom: auto;
    right: -100px;
    top: 0;
    transform: rotate(-220deg);
    opacity: 0.6;
}

.advice-3 .cracks-1 {
    bottom: 0;
    top: auto;
    left: auto;
    right: -100px;
    transform: rotate(180deg);
    opacity: 0.7;
}

.container {
    position: relative;
    z-index: 2;
}

.bottom-right-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34%;
    max-width: 500px;
}

.bottom-right-img figure {
    border-radius: 0;
    border-top-left-radius: 1rem;
}

.section-guide {
    overflow: hidden;
}

.eye-img {
    position: absolute;
    right: -10rem;
    bottom: 9rem;
    width: 25rem;
}

.pink-gradient .eye-img {
    right: initial;
    left: -10rem;
}

.advice {
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.advice .expand {
    border-bottom: 3px solid;
    display: inline-flex;
}

.advice .expandable {
    padding-left: 3.7rem;
}

.letter {
    font-size: 2.5rem;
}

.adv-intro {
    margin: 0;
    padding-left: 107px;
}

.advice-2 .advices-inner {
    padding-left: 40px;
}

.advice-2 .expandable {
    max-width: 40rem;
}

.advice-2 .img {
    position: relative;
}

/* Container (centered, optional) */
.grid-blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    /* tune spacing */
    align-items: start;
    /* top-align cards */
    grid-auto-flow: row dense;
    /* backfill gaps where possible */
}

/* Card */
.grid-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* space between image and text */
    min-width: 0;
    /* allow content to shrink nicely */
}

.grid-block .img {
    max-width: 240px;
}

.grid-block ul {
    margin-top: -1rem;
}

.grid-block--promo {
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: -3rem;
}

.grid-block--promo .linked-product {
    top: 60px;
}

.grid-block.grid-block--promo .img {
    max-width: 100%;
}

/* Optional: image niceties (adapt to your helpers) */
.grid-block .img figure, .grid-block--promo .img figure {
    border-radius: 16px;
    overflow: hidden;
}

.grid-block .img img, .grid-block--promo .img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Optional: clamp text to keep rows visually aligned */
.grid-block__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    min-height: calc(1.5em * 3);
    /* 3 lines */
}

.grid-block:nth-child(4), .grid-block:nth-child(5) {
    margin-top: -5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .grid-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-block--promo {
        grid-column: auto;
        grid-row: auto;
        /* becomes normal card on tablet */
    }

    .grid-block:nth-child(4), .grid-block:nth-child(5) {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .grid-blocks {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.linked-product {
    z-index: 2;
    position: relative;
    text-align: left;
    max-width: 400px;
    margin-bottom: 2rem;
}

.last-advice .advice-text {
    padding-left: 1rem;
    flex: 1 1 70%;
}

.last-advice .advice-text .row {
    padding-left: 82px;
}

.last-advice .img {
    flex: 1 1 30%;
}

.last-advice h4 p {
    margin-top: 0;
}

.last-advice li{
    margin-bottom:1rem;
}

.advice-2 .advice-last .advice-inner {
    padding-left: 5.4rem;
}

.advice-last .advice-img {
    position: absolute;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    transform: translate(-67%,0);
}

.dust {
    position: absolute;
    width: 50vw;
    transform: rotate(25deg);
    left: 11%;
    bottom: 0;
}

.quiz-body {
    width: 100%;
}

.quiz {
    border: 3px solid #F36500;
    border-radius: 1.5rem;
    overflow: hidden;
    margin: 4rem 0 4.5rem;
    box-shadow: 0px 12px 24px 0px #0000001A;
}

.quiz-text {
    padding: 1.5rem 3rem 2rem;
}

.quiz h4 {
    max-width: 400px;
}

.quiz-img {
    position: relative;
}

.quiz-img img {
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-position: center;
}

.quiz-open header {
    opacity: 0;
    pointer-events: none;
}

.show-results {
    border: 0 !important;
}

/* Quiz form */
.custom-quiz-row {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.custom-quiz-left {
    flex: 0 0 500px;
    /* fixed width */
    max-width: 500px;
    /* prevents stretching */
}

.custom-quiz-left figure {
    padding-bottom: 100%;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    overflow: hidden;
}

.custom-quiz-right {
    position: relative;
    padding: 3rem 2rem;
    flex: 1;
    min-width: 0;
}

.forminator-image {
    position: relative;
    padding-bottom: 100%;
}

.question-step {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.answers {
    margin-top: 1.5rem;
}

/* Modal Base */
.quiz-modal {
    display: flex;
    visibility: hidden;
    transition: 0.5s;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.95);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 0 3rem;
    transform: translate(0,-40px);
}

.quiz-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

.quiz-modal .quiz-content {
    background: linear-gradient(162.36deg, #FFFFFF 3.63%, #F5F5F5 86.97%);
    max-width: 1240px;
    width: 100%;
    border-radius: 1rem;
    position: relative;
    display: flex;
    flex-direction: row;
    border: 3px solid;
    box-shadow: 0px 12px 24px 0px #0000001A;
}

.quiz-step, .quiz-result {
    display: none;
    flex: 1;
}

.quiz-step.active, .quiz-result.active {
    display: flex;
}

.quiz-step h3 {
    color: #FF9200;
    margin-bottom: 0.5rem;
}

.quiz-step p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.quiz-step label input {
    margin-right: 0.75rem;
}

.quiz-result[data-result="B"] {
    align-items: flex-start;
}

.quiz-result .linked-product {
    position: absolute;
    bottom: -70px;
    transform: translate(0,50%) !important;
    margin: 0;
}

.quiz-result .linked-product:nth-child(1) {
    left: -200px;
}

.quiz-result .linked-product:nth-child(2) {
    right: -40px;
}

/* Wrapper label styling */
.answers label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: block;
    user-select: none;
    margin: 1.2rem 0;
    font-size: 1rem;
}

/* Hide native radio */
.answers label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Custom outer circle */
.custom-radio {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Inner circle shown when selected */
.custom-radio::after {
    content: "";
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgb(243, 101, 0) 0%, rgb(255, 146, 0) 100%);
}

/* Show inner circle when checked */
.answers label input[type="radio"]:checked + .custom-radio::after {
    display: block;
}

.quiz-step button {
    margin-top: 1rem;
    background: transparent;
    cursor: pointer;
    border: 3px solid;
    transition: 0.3s;
}

.quiz-step button[disabled] {
    pointer-events: none;
}

/* Close Button */
.close-modal {
    position: absolute;
    z-index: 3;
    top: 0.75rem;
    right: 1.5rem;
    line-height: 1;
    font-size: 2.5rem;
    background: none;
    color: #FF9200;
    border: none;
    cursor: pointer;
}

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

.quiz-result {
    align-items: center;
}

.quiz-result figure img {
    object-position: 75% 50%;
}

[data-result="A"].quiz-result figure img {
    object-position: 100% 50%;
    height: 140%;
    width: 100%;
    top: -20%;
}

.quiz-result p {
    margin: 2rem 0;
    max-width: 520px;
}

.advice-3 .advice-title {
    max-width: none;
    margin-bottom: 1.5rem;
}

.advice-3 .advice {
    padding-left: 50px;
    margin-bottom: 1rem;
}

.advice-3 .adv-text {
    padding-left: 3.4rem;
}

.advice-4 .step-num {
    font-size: 2.25rem;
}

.p-suche_oczy .advice-4 .advice:not(:first-child) .advice-step:before {
    content: '';
    width: 38px;
    height: 30px;
    display: block;
    position: absolute;
    background: url(../img/areas/1/list-arrow.svg);
    transform: translate(-130px,7px);
}

/* FAQ */
.faq {
    padding: 5rem 0 6rem;
    background: white;
}

.section-products.bg-white + .faq, .faq + .section-products.bg-white {
    padding-top: 0;
}

.faq-columns {
    display: flex;
    gap: 20px;
    margin-top: 4rem;
}

.faq-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.faq-item {
    width: calc(100% - 40px);
    padding-bottom: 1rem;
    position: relative;
}

.faq-item:last-child {
    border-bottom: 1px solid #202020;
    ;}

.faq-question {
    width: 100%;
    border-top: 1px solid #202020;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.faq-question h4 {
    padding-right: 10px;
}

/* fixed alert (yours) */
section.alert {
    box-shadow: 0px 4px 26px rgba(0,0,0,0.12);
    padding: 20px 0;
    height: 10vh;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

section.alert.alert-ghost {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: auto;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
}

.scroll-icon {
    overflow: visible;
    animation: mouseBounce 2.4s ease-in-out infinite;
    transform-origin: center;
}

.scroll-wheel {
    animation: wheelScroll 2.4s ease-in-out infinite;
    transform-origin: center;
    opacity: 0;
}

/* Page - Cyfrowe zmeczenie */
.p-cyfrowe_zmeczenie .faq {
    /* padding-bottom: 0; */
}

.p-cyfrowe_zmeczenie .section-symptoms {
    padding-top: 6rem;
}

.p-cyfrowe_zmeczenie .section-symptoms .linked-product {
    position: absolute;
    right: 60px;
    bottom: -40px;
}

.p-cyfrowe_zmeczenie .section-symptoms .bg-img {
    width: 56vw;
    right: -12.5%;
    top: 25%;
    height: 80vh;
    z-index: 2;
}

.p-cyfrowe_zmeczenie .section-symptoms .container {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.p-cyfrowe_zmeczenie .section-symptoms .white-box-small {
    max-width: 46rem;
    padding: 1rem 2rem;
    background: linear-gradient(126.41deg, #FFFFFF 0%, #F5F5F5 98.61%);
}

.p-cyfrowe_zmeczenie .section-symptoms .white-box-small span {
    display: inline-block
}

.p-cyfrowe_zmeczenie .section-guide .section-intro h2 {
    max-width: 800px;
    margin: 0 auto;
}

.p-cyfrowe_zmeczenie .advice-1 {
    overflow: hidden;
}

.p-cyfrowe_zmeczenie .advice-1 .advice {
    gap: 2.5rem;
    align-items: flex-start;
}

.p-cyfrowe_zmeczenie .advice-1 .advice:nth-child(2n) {
    flex-direction: row-reverse;
}

.p-cyfrowe_zmeczenie .advice-1 .advice .img {
    position: relative;
    flex: 1 1 50%;
}

.p-cyfrowe_zmeczenie .advice-1 .advice-text {
    flex: 1 1 50%;
    margin-top: 2rem;
}

.p-cyfrowe_zmeczenie .advice-1 .advices-inner {
    margin: 0 auto;
    padding-right: 10rem;
    padding-bottom: 6rem;
}

.p-cyfrowe_zmeczenie .advice-1 .grid-bg {
    bottom: 0;
    opacity: 0.5;
}

.p-cyfrowe_zmeczenie .advice-1 .linked-product {
    position: absolute;
    margin-top: -80px;
    margin-left: -40px;
}

.p-cyfrowe_zmeczenie .advice-1 .advice:nth-child(2) .img:after {
    border-color: var(--color-orange-2) !important;
}

.p-cyfrowe_zmeczenie .advice-2 .grid-bg {
    top: 0;
    opacity: 0.5;
    transform: scale(-1);
}

.p-cyfrowe_zmeczenie .advice-2 .advice-title {
    max-width: none;
    margin-bottom: 3rem;
}

.p-cyfrowe_zmeczenie .advice-2 .row-top {
    margin-bottom: 4rem;
}

.p-cyfrowe_zmeczenie .advice-2 .row-top .col:nth-child(2) {
    margin-top: 2rem;
}

.p-cyfrowe_zmeczenie .row-top .col:first-child .arrow-list {
    padding-left: 4rem;
}

.p-cyfrowe_zmeczenie .row-bottom {
    /* align-items: flex-end; */
}

.p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: -30px;
}

.p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) .linked-product:nth-child(1) {
    right: -60px;
}

.p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) .linked-product:nth-child(2) {
    position: absolute;
    left: 0;
    top: 160px;
}

.p-cyfrowe_zmeczenie .row-bottom .arrow-list {
    padding-left: 5rem;
    padding-right: 5rem;
}

.p-cyfrowe_zmeczenie .circuits {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;
}

.dark-mode-switch-outer {
    z-index: 10 !important;
    pointer-events: all !important;
}

.dark-mode-switch {
    right: 30px;
    top: -70px;
    z-index: 2;
}

.switcher {
    cursor: pointer;
}

.switcher.on .circle {
    transform: translate(16px,0);
}

.blink {
    display: flex;
    position: absolute;
    right: 20px;
    top: 0;
    z-index: -1;
}

.blink-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blink-svg svg {
    position: absolute;
}

/* was: visibility:hidden (remove it) */
.blink-svg .eye-closed {
    opacity: 0;
}

/* blink twice quickly every 3s */
.blink-svg .eye-open {
    animation: eyeOpenBlink 3s steps(1, end) infinite;
}

.blink-svg .eye-closed {
    animation: eyeClosedBlink 3s steps(1, end) infinite;
    margin-top: 38px;
}

/* Open is visible except during two short â€ÅââÃÆÃÆââ‚Â¬Ã¢â€žÂ¢ÃƒÆ’ƒâ€ Ã¢â‚¬â„¢ÃƒÆ’‚¢Ã¢â€šÂ¬Ã¢â€žÂ¢ÃƒÆ’ƒâ€šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ã…¡Ã‚¬Ã…“closedâ€ÃââÃƒÆ’ƒÆ’ƒÆ’ƒÆ’ƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬Ã…¡Ãƒâ€šÃ‚ windows */
@keyframes eyeOpenBlink {
    0% {
        opacity: 1;
    }

    18% {
        opacity: 0;
    }

    /* blink 2 close */
    22% {
        opacity: 1;
    }

    /* blink 2 open  */
    100% {
        opacity: 1;
    }
}

/* Closed is the inverse */
@keyframes eyeClosedBlink {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    22% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .blink-svg .eye-open, .blink-svg .eye-closed {
        animation: none;
    }
}

.p-cyfrowe_zmeczenie .advice-3 {
    padding-top: 0;
    padding-bottom: 2rem;
}

.p-cyfrowe_zmeczenie .advice-3 .container {
    padding-top: 4rem;
}

.p-cyfrowe_zmeczenie .advice-3 .bg-img {
    opacity: 0.5;
    transform: scale(-1);
    object-fit: cover;
}

.p-cyfrowe_zmeczenie .quiz h4 {
    max-width: none;
}

.p-cyfrowe_zmeczenie .advice-3 .advice-title {
    max-width: 600px;
}

.p-cyfrowe_zmeczenie .custom-radio::after {
    background: linear-gradient(90deg, #0029B4 0%, #3965F8 100%);
}

.p-cyfrowe_zmeczenie .advice-4 .advice-inner {
    padding-left: 3rem;
    margin-top: 2rem;
}

.p-cyfrowe_zmeczenie .advice-4 .adv-text {
    padding-left: 3.4rem
}

.p-cyfrowe_zmeczenie .advice-4 .advice-title {
    max-width: none;
}

.p-cyfrowe_zmeczenie .advice-4 .linked-product {
    align-self: flex-end;
    margin-top: -84px;
    margin-right: -12px;
}

/* Page - Zdrowie powiek */
.p-zdrowie_powiek .hero-section h1 {
    max-width: 47rem;
}

.p-zdrowie_powiek .section-guide {
    position: relative;
    z-index: 0;
    background: #FFF1F3;
}

.p-zdrowie_powiek .section-symptoms {
    padding-bottom: 7rem;
    overflow: visible;
}

.p-zdrowie_powiek .symptom-grid .symptom {
    margin-bottom: 5rem;
}

.p-zdrowie_powiek .section-symptoms .row-bottom .img {
    margin-left: -80px;
}

.p-zdrowie_powiek .reveal-wrapper .linked-product {
    position: absolute;
    right: -30px;
    z-index: 4;
    pointer-events: none;
}

.reveal-wrapper:hover .linked-product.ready .product {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.reveal-wrapper:hover .top-label {
    opacity: 1;
}

.p-zdrowie_powiek .reveal-wrapper .product {
    opacity: 0;
    transition: 0.3s;
    visibility: hidden;
    pointer-events: none;
    margin-top: -3rem;
}

.p-zdrowie_powiek .symptom-causes {
    margin-top: 2rem;
}

.p-zdrowie_powiek .symptom-text:before {
    content: '';
    display: block;
    width: 33px;
    height: 32px;
    background: url(../img/areas/3/dot.svg);
    margin-bottom: 16px;
}

.p-zdrowie_powiek .symptom-causes .col {
    margin: 2.5rem 0 1rem;
}

.p-zdrowie_powiek .advice-1 {
    padding-bottom: 0;
}

.p-zdrowie_powiek .advice-1 .advices-inner {
    margin-top: 3rem;
}

.p-zdrowie_powiek .advice-1 .advice-text {
    margin: 0 0 2rem;
}

.p-zdrowie_powiek .advice-1 .advice .img:after {
    border-color: #D67B8B;
}

.p-zdrowie_powiek .advice-1 .advice:nth-child(2) {
    flex-direction: column-reverse;
}

.p-zdrowie_powiek .advice-1 .advice:nth-child(2) .advice-text {
    margin-top: 3rem;
}
}

.p-zdrowie_powiek .img:after {
    border-color: #D67B8B !important;
}

.symptom-text p {
    font-family: var(--font-secondary);
    line-height: 1.5;
}

.p-zdrowie_powiek .advice-2 {
    padding-top: 2rem;
}

.p-zdrowie_powiek .advice-2 .linked-product {
    align-self: flex-end;
    margin-top: -126px;
}

.p-zdrowie_powiek .top-label {
    position: absolute;
    z-index: 3;
    top: 1rem;
    left: 0.8rem;
    width: 83%;
    transition: 0.3s;
    pointer-events: none;
}

.p-zdrowie_powiek .advice-3 .advice-title {
    margin-bottom: 0.5rem;
}

.p-zdrowie_powiek .advice-3 .linked-product {
    margin-top: -60px;
    margin-left: -60px;
}

.p-zdrowie_powiek .advice-3 .linked-product img {
    filter: none;
}

.p-zdrowie_powiek .advice-4 {
    padding-top: 0;
}

.flowers-1 {
    width: 20vw;
    height: 50vw;
    object-fit: contain;
    top: 0;
    left: 0;
}

.flowers-2 {
    width: 20vw;
    height: 50vw;
    object-fit: contain;
    top: 50%;
    right: 0;
}

.flowers-3 {
    width: 20vw;
    height: 25vw;
    object-fit: contain;
    object-position: top right;
    top: 0;
    right: 0;
}

.flowers-4 {
    width: 80vw;
    height: 40vw;
    object-fit: contain;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
}

/*
.after-image {
  visibility: hidden;
  z-index: 2;
  transition: none !important;
}

.reveal-circle {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: none;
}
*/
/* Wrapper z ratio */
/* Figure with ratio */
.reveal-figure {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 87.5%;
}

/* Children fill the box */
.reveal-figure > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* no effect on <canvas>, but fine for <img> fallback */
}

/* Fallback img visible until canvas is ready */
.reveal-figure .reveal-fallback {
    z-index: 0;
}

.reveal-figure.is-ready .reveal-fallback {
    display: none;
}

/* Canvas on top */
#reveal-canvas {
    z-index: 1;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

.circuits-overlay {
    position: absolute;
    z-index: 1;
    pointer-events: auto;
    background: transparent;
}

img.circuits {
    display: block;
    opacity: 0;
}

.use-cream {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translate(-50%,50%);
    bottom: 0;
    pointer-events: none;
}

/* Page Nuzence  */
.p-nuzence .section-about {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 7rem;
}

/* Background glow stays behind everything */
.p-nuzence .section-about:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-50%,50%);
    width: 100vw;
    height: 70vw;
    background: radial-gradient(50% 50% at 50% 50%, #D2FAFF 0%, rgba(210, 250, 255, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Worm layer: created by JS */
.bg-elements {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* under content */
    pointer-events: none;
    /* never intercepts */
}

/* Real content stacks above worms */
.p-nuzence .section-about > *:not(.bg-elements) {
    position: relative;
    z-index: 2;
}

/* Clickability policy: keep most inert; opt-in buttons (adjust as needed) */
.p-nuzence .section-about .btn, .p-nuzence .section-about .btn * {
    pointer-events: auto;
}

/* Worms */
.nuz-walker {
    position: absolute;
    width: 69px;
    height: 69px;
    will-change: transform, left, top;
    pointer-events: none;
    transform-origin: 50% 50%;
}

/* Your placements & rotations */
.nuzence-animowane {
    bottom: -30px;
    left: -28px;
    height: 100px;
    width: 200px;
    display: block;
}

.nuzence-animowane:nth-child(1) {
    bottom: initial;
    left: initial;
    right: -20px;
    top: -28px;
    transform: rotate(-180deg);
}

.nuz-walker:nth-child(1) {
    transform: rotate(18deg);
    left: 0;
    bottom: 0;
}

.nuz-walker:nth-child(2) {
    transform: rotate(46deg);
    left: 40px;
    bottom: -20px;
}

.nuz-walker:nth-child(3) {
    transform: rotate(60deg);
    left: 92px;
    bottom: -14px;
}

.nuz-walker:nth-child(4) {
    transform: rotate(73deg);
    left: 72px;
    bottom: 22px;
}

.nuz-walker:nth-child(5) {
    transform: rotate(237deg);
    right: -5px;
    top: 20px;
}

.nuz-walker:nth-child(6) {
    transform: rotate(280deg);
    right: -2px;
    top: -18px;
}

.nuz-walker:nth-child(7) {
    transform: rotate(270deg);
    right: 125px;
    top: 5px;
}

.nuz-walker:nth-child(8) {
    transform: rotate(288deg);
    right: 66px;
    top: -12px;
}

.nuz-walker:nth-child(9) {
    transform: rotate(239deg);
    right: 50px;
    top: 20px;
}

.dwa-nuzence {
    left: -110px;
    bottom: -100px;
    z-index: 3;
}

.p-nuzence .section-guide {
    background: linear-gradient(180deg, #EFFDFF 0%, #D2FAFF 100%);
}

.p-nuzence .advice-2 .col-l {
    align-items: center;
}

.p-nuzence .advice-2 .col-l .img {
    max-width: 500px;
    width: 100%;
}

.p-nuzence .advice-2 .linked-product {
    align-self: flex-end;
    margin-top: -60px;
}

.p-nuzence .small-images {
    margin-bottom: 3rem;
}

.p-nuzence .advice-4 .advices-inner {
    max-width: 100%;
    width: 1200px;
    margin: 0 auto;
}

.p-nuzence .advice-4 .advice {
    padding-left: 40px;
    padding-right: 40px;
}

.p-nuzence .advice-4 .img {
    width: 100%;
}

.p-nuzence .advice-4 .col-r {
    position: relative;
    top: 50px;
}

.p-nuzence .advice-4 .linked-product:nth-child(1) {
    position: absolute;
    top: -150px;
    right: -20px;
}

.p-nuzence .advice-4 .linked-product:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 15%;
}

.ingredients-list {
    padding-left: 4rem;
    margin-top: 2.5rem;
}

.list-element {
    margin-bottom: 2rem;
    width: 100%;
}

.list-element > div {
    flex: 1 0 50%;
}

.list-ingredient {
    padding-right: 20px;
}

.list-ingredient h4 {
    cursor: pointer;
    transition: 0.3s;
}

.list-ingredient:hover h4 {
    transform: translate(20px,0);
}

/* Page Higiena brzegw */
.p-higiena_brzegow .section-2 {
    padding: 6rem 0;
}

.p-higiena_brzegow .row-top .col:nth-child(2) .img {
    right: -80px;
}

.p-higiena_brzegow .arrow-list li:before {
    content: '';
    background: url(../img/areas/5/list-arrow.svg);
    width: 24px;
    height: 30px;
}

.p-higiena_brzegow .section-guide {
    background: linear-gradient(180deg, #EFFDFF 0%, #D2FAFF 100%);
}

.p-higiena_brzegow .advice-1 .linked-product {
    margin-top: -160px;
}

.p-higiena_brzegow .advice-2 .block-text {
    margin: 0;
}

.p-higiena_brzegow .advice-2 .blocks {
    width: 100%;
}

.p-higiena_brzegow .advice-2 .blocks .img {
    flex: 1 0 50%;
}

.p-higiena_brzegow .advice-2 .blocks p {
    font-size: var(--font-size-xs);
}

.p-higiena_brzegow .advice-2 .block:nth-child(2n) {
    padding-left: 320px;
}

.p-higiena_brzegow .advice-2 .linked-product {
    position: absolute;
    right: 0;
    margin-top: -120px;
}

.p-higiena_brzegow .col-45.offset-left {
    padding: 0;
}

.p-higiena_brzegow .col-45.offset-left figure {
    filter: none;
}

/* Wsparcie widzenia */
.p-wsparcie_widzenia .section-2 .blocks {
    margin-top: 30px;
}

.p-wsparcie_widzenia .section-2 .block .img {
    flex: 0 0 85px;
}

.p-wsparcie_widzenia .section-2 .block:nth-child(2n) {
    padding-left: 100px;
}

.p-wsparcie_widzenia .section-2 .block-text {
    margin-top: 0;
    max-width: 38rem;
}

.p-wsparcie_widzenia .section-2 .bg-img {
    width: 800px;
    right: -300px;
    height: 600px;
    object-fit: contain;
    top: 0;
}

.p-wsparcie_widzenia .advice-1 .blocks .img {
    flex: 1 0 150px;
}

.p-wsparcie_widzenia .advice-1 .block .img {
    flex: 1 0 160px;
}

.p-wsparcie_widzenia .advice-1 .block-text {
    margin: 0;
}

.p-wsparcie_widzenia .advice-1 .block:nth-child(2n + 1) {
    flex-direction: row-reverse;
}

.p-wsparcie_widzenia .advice-2 .block .img {
    max-width: 240px;
}

.p-wsparcie_widzenia .arrow-list li:before {
    background: url(../img/areas/6/list-arrow.svg);
}

/* Single Product */
.product-img {
    position: relative;
}

.product-img .img {
    padding-right: 25%;
}

.dexoftyal-symptoms .icon {
    max-width: 122px;
}

.dexoftyal-symptoms .col {
    margin-bottom: 1rem;
}

.dexoftyal-symptoms .col:nth-child(3), .dexoftyal-symptoms .col:nth-child(4) {
    padding-left: 220px;
}

.product-thumb {
    position: absolute;
    right: 0;
    bottom: -5vw;
    min-width: 10vw;
}

.product-demoxoft-clean .product-thumb {
    width: 22vw;
    bottom: -7vw;
}

.product-demoxoft-plyn .product-thumb {
    width: 14vw;
}

.product-demoxoft-plus-clean .product-thumb {
    width: 22vw;
    bottom: -7vw
}

.product-demoxoft-plus-lipozel .product-thumb {
    width: 13vw;
    right: 5vw;
}

.product-dexoftyal-md .product-thumb {
    width: 17vw;
    right: 2vw;
}

.product-dexoftyal-zel .product-thumb {
    width: 23vw;
    bottom: -1vw;
    right: 4vw;
}

.product-dexoftyal-ud .product-thumb {
    width: 20vw;
    right: 2vw;
}

.product-palpederm .product-thumb {
    width: 14vw;
    right: 3vw;
}

.product-maculoft .product-thumb {
    width: 19vw;
    right: 2vw;
    bottom: -3vw;
}

.dexoftyal-symptoms .figure {
    flex: 1 0 40%;
}

.seria-dexoftyal .how-to .col:nth-child(2n+1) .img:after {
    border-color: #FF9200;
}

.seria-dexoftyal .how-to .col:nth-child(2n) .img:after {
    border-color: #0029B4;
}

.seria-dexoftyal .how-to .col:nth-child(2n+1) h4 {
    color: #FF9200;
}

.seria-dexoftyal .how-to .col:nth-child(2n) h4 {
    color: #0029B4;
}

.seria-dexoftyal .how-to .col:nth-child(2n+1) .block-text {
    max-width: 560px;
}

.seria-dexoftyal .how-to .col:nth-child(2n) .block-text {
    max-width: 500px;
}

.seria-dexoftyal .section-products {
    background: linear-gradient(131.12deg, #E5F6F9 49.6%, #FDEEF1 93.96%);
}

.seria-dexoftyal .reviews {
    background: #E5EAF7
}

.stars {
    flex-direction: row !important;
}

.stars img {
    margin-right: 4px;
}

.product-infos {
    padding-bottom: 0;
    z-index: 2;
}

.product-infos .product-info {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.product-infos .product-info:not(.active) {
    cursor: pointer;
}

.product-infos .expand-icon {
    position: relative;
    top: 6px;
    transform: scale(-1);
}

.product-infos .expand {
    min-width: 200px;
    align-items: flex-start;
}

.product-infos .expand span {
    max-width: 150px;
}

.product-info-expand {
    display: none;
}

.info-desc h6 {
    font-size: 0.75rem;
}

.product-info.active .expand .expand-icon {
    transform: scale(1);
}

.knowledge {
    transform: translate(0,50%);
}

.knowledge-outer {
    width: 874px;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem;
    text-align: center;
    border-radius: 1.5rem;
}

.single-product .has-knowledge {
    padding-top: 220px;
}

/* Single - Palpederm */
.product-palpederm .section-3 {
    background: #FFF1F3;
    padding-top: 5rem;
}

.calm-complex {
    background: #F2F2F2;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.calm-complex .block p {
    margin-bottom: 0;
}

.product-palpederm .row-bottom .col {
    margin-bottom: 4rem;
}

.product-palpederm .row-bottom .block {
    gap: 2rem;
}

.product-palpederm .row-bottom .block .img {
    flex: 1 1 50%;
}

.product-palpederm .row-bottom .block .block-text {
    flex: 1 0 50%;
}

.product-palpederm .row-bottom .col:last-child {
    margin-left: auto;
    margin-bottom: 0;
}

.product-palpederm .row-bottom .col-65 .block .img {
    flex: 0 0 50%;
    max-width: 290px;
}

.product-palpederm .reviews {
    background: linear-gradient(325.06deg, #FDDEE3 22.19%, #DE8797 112.83%);
}

.product-palpederm .section-products {
    background: linear-gradient(124.68deg, #E7C5CB -2.42%, #FDEEF1 54.17%, #FFF6F8 98.19%);
}

/* Single Demoxoft */
.seria-demoxoft .section-3 li {
    margin-bottom: 0.5rem;
}

.seria-demoxoft .section-3 .blocks {
    align-items: center;
}

.seria-demoxoft .section-3 .block-text {
    margin: 0;
}

.seria-demoxoft .section-3 .block .img {
    max-width: 300px;
}

.seria-demoxoft .section-3 .block:nth-child(1) .block-text {
    margin-top: -30px;
}

.seria-demoxoft .section-3 .block:nth-child(2) {
    margin-top: 2rem;
}

.seria-demoxoft .section-3 .block:nth-child(2) .block-text {
    margin-top: 21px;
}

.seria-demoxoft .section-3 .block:nth-child(3) .img {
    max-width: 137px;
}

.seria-demoxoft .section-3 .block:nth-child(3) .block-text {
    margin-top: 19px;
}

.seria-demoxoft .section-products {
    background: linear-gradient(300.75deg, #6ECADA 5.56%, #D2FAFF 100%);
}

/* Single Demoxoft Plus */
.seria-demoxoft-plus .tri-complex .col-50 .block > div {
    flex: 1 1 50%;
    align-content: center;
}

.seria-demoxoft-plus .tri-complex .col:not(.box-outer):not(.col-50) .img {
    max-width: 10rem;
}

.seria-demoxoft-plus .tri-complex .block-1 .img {
    left: -3rem;
}

.seria-demoxoft-plus .tri-complex .block-2 .img {
    padding-right: 1rem;
}

.seria-demoxoft-plus .tri-complex .block-3 {
    margin-top: 1rem;
}

.seria-demoxoft-plus .tri-complex .block-4 .img {
    max-width: 9rem !important;
}

.seria-demoxoft-plus .tri-complex .block-5 .img {
    max-width: 8rem !important;
}

.seria-demoxoft-plus .small-box strong {
    font-weight: 700;
}

.seria-demoxoft-plus .section-products {
    background: linear-gradient(300.75deg, #6ECADA 5.56%, #D2FAFF 100%);
}

.product-demoxoft-plus-lipozel .section-3 .col-40 .img {
    max-width: 300px;
}

/* Seria - Maculoft */
.seria-maculoft .section-3 .row-top .block .img {
    flex: 1 0 160px;
}

.seria-maculoft .section-3 .row-top .block-text {
    margin: 0;
}

.seria-maculoft .section-3 .row-top .block:nth-child(2n) {
    flex-direction: row-reverse;
}

.seria-maculoft .block-text p {
    font-family: var(--font-secondary);
    margin-top: 1rem;
}

.seria-maculoft .section-3 .row-bottom .block {
    position: relative;
}

.seria-maculoft .section-3 .row-bottom .block .img {
    max-width: 140px;
}

.seria-maculoft .section-3 .row-bottom .block:nth-child(2) {
    top: 4rem;
}

.seria-maculoft .section-3 .row-bottom .block:nth-child(2) .img {
    max-width: 240px;
}

.seria-maculoft .section-3 .row-bottom .block:nth-child(4) {
    top: 5rem;
}

.ingredients-details {
    margin-bottom: 2rem;
}

.ingredients-details .row {
    margin-bottom: 1.5rem;
}

/* Strona Produkty */
.start-section {
    padding-top: 75px;
    padding-bottom: 0;
}

.start-content {
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
}

.products-section-top {
    align-items: flex-end;
}

.palpederm-maculoft .products-section-top {
    max-width: 600px;
}

.palpederm-maculoft .products-section-top .btn {
    flex: 1 0 auto;
    max-width: 300px;
}

.palpederm-maculoft .slide {
    width: 50% !important;
}

.partner {
    padding-bottom: 8rem;
}

.partner .block-text {
    margin: 0;
}

.partner .block-text p {
    font-family: var(--font-secondary);
}

.partner .block-text h2 {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.ellipse {
    right: -9vw;
    bottom: -10vw;
    width: 32vw;
    height: 32vw;
    z-index: 2;
}

.ellipse img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Strona - Kontakt */
.p-kontakt .linked-product .product-info h4 {
    font-size: 24px;
}

.p-kontakt .linked-product .post-excerpt {
    font-size: 12px;
}

.p-kontakt .linked-product .product.white-box-small {
    width: 450px;
}

.p-kontakt .linked-product--palpederm {
    --img-w: 140px;
    --img-left: 44px;
    --img-dy: -36px;
    --reserve: 184px;
    --text-w: 208px;
}

.p-kontakt .linked-product--dexoftyal-md {
    --img-w: 190px;
    --img-left: 6px;
    --img-dy: -40px;
    --reserve: 210px;
    --text-w: 208px;
}

.about-verco {
    padding-bottom: 10rem;
}

.about-verco .block-text h4 {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.about-verco .block:nth-child(1) {
    flex-direction: row-reverse;
}

.about-verco .block:nth-child(2) .block-text {
    padding-left: 3rem;
    margin-top: 5rem;
}

.about-verco .block .img-outer {
    position: relative;
    flex: 1 0 50%;
}

.about-verco .blocks .block .linked-product {
    position: absolute;
    right: 50px;
    margin-top: -130px;
}

.values .blocks .block {
    flex: 1 1 0;
}

.values .img {
    max-width: 230px;
    margin: 0 auto;
}

.p-kontakt .ellipse {
    right: -3vw;
    width: 22vw;
    height: 22vw;
    bottom: -19vw;
}

.contact-details a {
    text-decoration: underline;
}

.wpcf7 input:not([type="submit"]):not([type="checkbox"]),.wpcf7 textarea {
    background: white;
    width: 100%;
}

.wpcf7-list-item {
    margin: 0 !important;
}

.wpcf7-list-item-label {
    font-size: 10px;
    line-height: 1.5;
    display: inline-block;
    padding-left: 0.75rem;
}

.wpcf7-acceptance label {
    display: flex;
}

.wpcf7-acceptance [type="checkbox"] {
    flex: 1 0 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
}

.wpcf7 input[type="submit"] {
    background: linear-gradient(133.03deg, #0029B4 1.72%, #0094FF 98.28%);
    ;color: white;
    border: 0 !important;
    border-radius: 3.5rem !important;
    font-weight: 700;
    text-transform: uppercase;
}

.acf-map {
    width: 100%;
    height: 500px;
    border-radius: 1rem;
}

.acf-map img {
    max-width: none;
}

.carousel-full .slide {
    width: 22%;
}

.slide-inner {
    height: 100%;
}

.carousel .product-info {
    flex: 1 0 auto;
    justify-content: space-between;
}

/* Contact Form 7 submit gradient + hover swap */
.wpcf7 input[type="submit"] {
    /* gradient vars */
    --angle: 133.03deg;
    --s1: 1.72%;
    --s2: 98.28%;
    --g1: #0029B4;
    --g2: #0094FF;
    /* visual */
    background: none !important;
    background-image: linear-gradient(var(--angle), var(--g1) var(--s1), var(--g2) var(--s2)) !important;
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: --g1 450ms ease, --g2 450ms ease, background-position .4s ease;
    color: #fff;
    border: 0 !important;
    border-radius: 3.5rem !important;
    font-weight: 700;
    text-transform: uppercase;
}

/* swap colors on hover/focus (matches .btn.gradient-blue behavior) */
@media(hover: hover) {
    .wpcf7 input[type="submit"]:hover {
        --g1: #0094FF;
        --g2: #0029B4;
    }
}

.wpcf7 input[type="submit"]:focus-visible {
    --g1: #0094FF;
    --g2: #0029B4;
}

.arrow-list a:hover,.block-text a:hover {
    opacity: 1;
}

/* Blog */
.post .category-label {
    margin: 1.25rem 0 1rem;
}

.blog .post {
    margin-bottom: 2rem;
}

.blog .blog-start {
    margin-top: 76px;
    padding: 3rem 0;
}

.blog .eye-img {
    bottom: -2rem;
    right: -4rem;
}

.blog .post-excerpt {
    margin: 0.25rem 0;
}

.blog .read-more {
    color: #0A4A7F;
}

.blog .read-more svg path {
    fill: #0A4A7F;
}

.blog .category-label {
    background: transparent;
    border: 1px solid #0A4A7F;
    color: #0A4A7F;
}

.post-categories {
    padding: 0;
    font-family: var(--font-secondary);
    font-weight: 600;
}

.post-categories li {
    list-style: none;
}

.post-categories a {
    padding: 1rem;
    display: block;
    border-left: 4px solid transparent;
    transition: 0.3s;
}

.post-categories li.active a {
    background: #F2F2F2;
    border-left: 4px solid #0C5A9B
}

.verco-banner {
    position: relative;
    margin: 6rem 0;
}

.verco-text {
    z-index: 2;
    top: 0;
    right: 100px;
    max-width: 36rem;
    height: 100%;
    justify-content: center;
}

.verco-text h2 {
    margin-bottom: 1.5rem;
}

.verco-text img {
    align-self: flex-end;
}

.verco-text .btn {
    margin: 0;
}

/* Single Post */
.single-post .start-section {
    padding: 150px 0;
}

.single-post .start-section .col-left {
    justify-content: space-between;
}

.single-post .breadcrubms-inner {
    align-items: center;
    gap: 8px;
}

.single-post .eye {
    margin: 0;
    top: 20rem;
}

.single-post .socials {
    display: flex;
    gap: 8px;
}

.share .share-copy.copied img {
    filter: invert(18%) sepia(40%) saturate(2781%) hue-rotate(184deg) brightness(96%) contrast(96%);
    transform: scale(1.1);
    transition: transform .15s ease, filter .15s ease;
}

.post-text {
    max-width: 768px;
    margin: 0 auto;
    font-family: var(--font-secondary);
    line-height: 1.5;
}

.post-text img[class*="wp-image"] {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.post-text h1,.post-text h2,.post-text h3,.post-text h4 {
    font-family: var(--font-main);
    line-height: 1.2;
    margin: 1.25rem 0;
}

.post-text h2 {
    font-size: 2rem;
}

.post-text h3,.post-text h4 {
    font-size: 1.5rem;
}

.post-text li {
    margin: 0.5rem 0;
}

.post-text a[href*="/produkt/"] span {
    text-decoration: underline;
}

.single-post .bibliography {
    background: linear-gradient(96.9deg, #FFFFFF 10.4%, #F5F5F5 65.44%);
    padding: 2rem 0 5rem;
}

.single-post .bibliography h2 {
    margin-top: 0;
    font-style: italic;
}

.single-post .bibliography .refs {
    font-size: 1rem;
    line-height: 1.5;
    font-family: var(--font-secondary);
    font-style: italic;
}

.related {
    padding: 6rem 0 4rem;
    background: linear-gradient(248.28deg, #DBE7F2 15.96%, #B5D3F0 90.3%);
}

.related .row-top .btn {
    margin: 0;
}

.related .posts-loop {
    margin-top: 3rem;
}

.related .post figure {
    padding-bottom: 75% !important;
}

.posts-loop .post {
    margin-bottom: 2rem;
}

.posts-loop .post figure {
    transition: 0.5s;
}

.posts-loop .read-more {
    color: #0A4A7F;
}

.posts-loop .read-more svg path {
    fill: #0A4A7F;
}

.product-popover-host {
    position: absolute;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity .18s ease;
    will-change: transform, opacity;
}

.product-popover {
    min-width: 330px;
}

.product-popover .linked-product img {
    width: 100%;
    height: auto;
    display: block;
}

/* Skeleton */
.product-popover--loading .product-popover-skeleton {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
}

.product-popover-skeleton .s-img {
    width: 120px;
    height: 80px;
    background: linear-gradient(90deg,#eee,#f5f5f5,#eee);
    background-size: 200% 100%;
    animation: sk 1.2s infinite;
    border-radius: 8px;
}

.product-popover-skeleton .s-lines {
    flex: 1 1 auto;
}

.product-popover-skeleton .s-line {
    height: 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg,#eee,#f5f5f5,#eee);
    background-size: 200% 100%;
    animation: sk 1.2s infinite;
    border-radius: 6px;
}

.product-popover-skeleton .s-line.short {
    width: 70%;
}

.product-popover-skeleton .s-btn {
    width: 120px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg,#eee,#f5f5f5,#eee);
    background-size: 200% 100%;
    animation: sk 1.2s infinite;
}

@keyframes sk {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 200% 0
    }
}

/* Mobile tweak: full width */
@media (max-width: 640px) {
    .product-popover-host {
        left: 8px !important;
        right: 8px !important;
    }

    .product-popover {
        width: calc(100vw - 16px);
        max-width: none !important;
    }
}

/* Footer */
.footer-info {
    display: none;
}

footer {
    position: relative;
    z-index: 3;
    background: white;
}

.footer-content {
    box-shadow: 0px 0px 20px 0px #00000012;
    padding: 2.5rem 0;
}

.footer-logo {
    margin-bottom: 1.5rem;
}

footer p {
    margin: 0;
}

footer h4 {
    margin-bottom: 0.4rem;
    min-height: 1.8rem;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-content .container {
    justify-content: space-between;
}

.footer-content .footer-col:nth-child(4) {
    min-width: 12rem;
}

.footer-content .footer-col:nth-child(4) h4:before {
    content: ' ';
    display: block;
}

.footer-bottom {
    background: #0A4A7F;
    color: white;
    padding: 1.2rem 0;
}

.footer-bottom a {
    text-decoration: underline;
}

.p-cyfrowe_zmeczenie .footer-info, .p-suche_oczy .footer-info, .single-post .footer-info, .p-kontakt .footer-info, .p-produkty .footer-info, .home .footer-info {
    display: block;
}

/* Main content covers the fixed footer until the end */
#content {
    position: relative;
    z-index: 2;
    background: #fff;
    /* ensure it actually hides the footer */
}

/* Fixed footer behind everything */
footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* below #content */
    transform: translateY(var(--footer-shift, 24px));
    will-change: transform;
    background: #fff;
    /* subtle inner top shadow (from your earlier request) */
    box-shadow: inset 0 1px 0 rgba(0,0,0,.06), inset 0 14px 24px -18px rgba(0,0,0,.18);
}

footer::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom);
}

/* Optional: reduce parallax for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
    footer {
        transform: none !important;
    }
}

@media (min-width: 1000px) {
    html {
        font-size:14px;
    }
}

@media (min-width: 1201px) {
    html {
        font-size:15px;
    }

    .single-product #menu {
        min-width: 62rem;
    }

    .areas-bottom .expand-content {
        bottom: 100%;
        padding-bottom: 12px;
        z-index: 2;
    }
}

@media (min-width: 1300px) {
    html {
        font-size:16px;
    }
}

@media (min-width: 1441px) {
    html {
        font-size:17px;
    }

    section {
        padding: 6rem 0;
    }

    .single-product .section-1 {
        padding-bottom: 10rem;
    }
}

@media (min-width: 1800px) {
    html {
        font-size:18px;
    }

    .logo-box:before {
        display: none;
    }

    .logo-box {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        padding: 16px 22px;
    }

    .single-product .section-1 {
        padding-bottom: 12rem;
    }
}

/* Hovers */
@media(hover: hover) {
    .breadcrubms a:hover {
        color:#222;
    }

    ul.menu > li:hover > a:before {
        opacity: 1;
    }

    ul.menu > li:nth-child(2n+1) .sub-menu a:hover {
        color: #0199DF;
    }

    ul.menu > li:nth-child(2n) .sub-menu a:hover {
        color: #0A4A7F;
    }

    .menu-item-has-children:hover > a:after {
        transform: scale(-1);
    }

    ul.menu > li:hover > a:before {
        height: 3px;
    }

    .menu-item-has-children:hover .sub-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

    .home-posts .post:hover:after {
        opacity: 1;
    }

    .home-posts .post:hover {
        color: white;
    }

    .home-posts .post:hover .post-excerpt {
        color: white;
    }

    .home-posts .post:hover .read-more svg path {
        fill: white;
    }

    .post:hover .read-more svg {
        transform: translate(4px,0);
    }

    /* On hover/focus: slide background in, swap text color */
    .btn:not(.bg-white):hover span, .btn:not(.bg-white):focus span {
        color: #fff;
    }

    .btn.bg-white:hover::before, .btn.bg-transparent:hover::before, button.bg-transparent:hover::before, button.bg-transparent:hover::before {
        transform: translateX(0);
    }

    button.bg-transparent:hover, .btn.bg-white:hover, .btn.bg-white:hover span {
        color: white !important;
    }

    .post-categories a:hover {
        background: #F2F2F2;
        border-left: 4px solid #0C5A9B
    }

    /* 3) Hover swaps */
    .btn.orange-gradient:hover {
        --g1: #FF9200;
        --g2: #F36500;
    }

    .btn.blue-gradient:hover {
        --g1: #1285E5;
        --g2: #0A4A7F;
    }

    .btn.dark-blue-gradient:hover {
        --g1: #3965F8;
        --g2: #0029B4;
    }

    .btn.turquoise-gradient:hover {
        --g1: #04B9D9;
        --g2: #2F6978;
    }

    .btn.orange2-gradient:hover {
        --g1: #FF9200;
        --g2: #FFB046;
    }

    .btn.pink-gradient:hover {
        --g1: #D67B8B;
        --g2: #F4AAB7;
    }

    .btn.turquoise-gradient-dark:hover {
        --g1: #04B9D9;
        --g2: #2F6978;
    }

    .btn.gradient-blue:hover {
        --g1: #0094FF;
        --g2: #0029B4;
    }

    .posts-loop .post .post-tb {
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
    }

    .posts-loop .post:hover figure {
        transform: scale(1.05);
    }

    a.slide:hover .white-box-small {
        box-shadow: 0px 4px 12px 1px #0000002A;
    }
}

@media (hover: hover) and (min-width:1201px) {
    .area-inner:hover .expand-content {
        visibility:visible;
        opacity: 1;
    }

    .area-item:hover .area-header {
        color: white;
    }

    .area-item:hover .area-header::before {
        opacity: 0;
    }

    .area-item:hover .area-header::after {
        opacity: 1;
    }

    .areas-top .area-item:nth-child(1) .area-description .btn:hover {
        --area-gradient: linear-gradient(180deg, #F36500 0%, #FF9303 100%);
    }

    .areas-top .area-item:nth-child(2) .area-description .btn:hover {
        --area-gradient: linear-gradient(114.91deg, #3965F8 13.42%, #0029B4 100%);
    }

    .areas-top .area-item:nth-child(3) .area-description .btn:hover {
        --area-gradient: linear-gradient(180deg, #EFA722 0%, #FFB400 100%);
    }

    .areas-bottom .area-item:nth-child(1) .area-description .btn:hover {
        --area-gradient: linear-gradient(115.92deg, #0D91B5 0%, #1A3E48 100%);
    }

    .areas-bottom .area-item:nth-child(2) .area-description .btn:hover {
        --area-gradient: linear-gradient(91.73deg, #50E6FF -0.54%, #00ACC9 100%);
    }

    .areas-bottom .area-item:nth-child(3) .area-description .btn:hover {
        --area-gradient: linear-gradient(268.93deg, #D67B8B 4.79%, #F4AAB7 74.15%);
    }

    /* ---------- HOVER: just swap the colors ---------- */
    .areas-top .area-item:nth-child(1) .area-description .btn:hover {
        --g1: #F36500;
        --g2: #FF9303;
    }

    .areas-top .area-item:nth-child(2) .area-description .btn:hover {
        --g1: #3965F8;
        --g2: #0029B4;
    }

    .areas-top .area-item:nth-child(3) .area-description .btn:hover {
        --g1: #EFA722;
        --g2: #FFB400;
    }

    .areas-bottom .area-item:nth-child(1) .area-description .btn:hover {
        --g1: #0D91B5;
        --g2: #1A3E48;
    }

    .areas-bottom .area-item:nth-child(2) .area-description .btn:hover {
        --g1: #50E6FF;
        --g2: #00ACC9;
    }

    .areas-bottom .area-item:nth-child(3) .area-description .btn:hover {
        --g1: #D67B8B;
        --g2: #F4AAB7;
    }
}

@media (max-width: 1000px) {
    .footer-content .container {
        flex-wrap:wrap;
    }

    .footer-content .footer-col {
        width: 50%;
        margin-bottom: 30px;
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .logo {
        left:25px;
    }

    h1,.hero-title {
        font-size: 48px;
    }

    .medium-title, .medium-title *,h3 {
        font-size: 24px;
    }

    .font-l {
        font-size: 20px;
    }

    .hero-text {
        font-size: 18px;
    }

    .arrow-list li {
        font-size: 18px;
    }

    .btn, button:not(.close-modal), input[type="submit"] {
        font-size: 16px;
    }

    .section-title {
        font-size: 32px;
    }

    .small-text,.btn.label {
        font-size: 14px;
    }

    .post-excerpt {
        font-size: 10px;
    }

    .block-text p {
        font-size: 16px;
    }

    .bibliography .refs * {
        font-size: 10px;
    }

    .btns {
        flex-direction: column;
    }

    .custom-flickity-controls {
        justify-content: space-between;
    }

    .area-item .slider .custom-flickity-controls {
        justify-content: center;
    }

    .last-advice .advice-text .row {
        flex-direction: column;
    }

    .last-advice .advice-text .col {
        width: 100%;
        max-width: 100%;
    }

    .faq-col:nth-child(2) .faq-item:first-child .faq-question {
        border-top: 0;
    }

    .faq-columns {
        flex-direction: column;
        gap: 0;
    }

    .faq-item {
        padding-right: 0;
        width: 100%;
    }

    .tip-end-anchor {
        display: none;
    }

    .p-cyfrowe_zmeczenie .advice-1 .advices-inner {
        padding-right: 0;
        padding-bottom: 50px;
    }

    .p-cyfrowe_zmeczenie .advice-1 .linked-product {
        margin-top: -10px;
        margin-left: -20px;
    }

    .p-cyfrowe_zmeczenie .advice-2 .advice-title {
        margin-bottom: 2rem;
    }

    .p-cyfrowe_zmeczenie .advice-2 .row-top {
        gap: 30px;
        margin-bottom: 30px;
    }

    .p-cyfrowe_zmeczenie .advice-4 .advice-inner {
        margin-top: 20px;
    }

    .p-cyfrowe_zmeczenie .advice-4 .btns {
        flex-direction: column;
    }

    .p-cyfrowe_zmeczenie .advice-4 .btns .btn {
        min-width: 280px;
    }

    .p-wsparcie_widzenia .section-2 .block:nth-child(2n) {
        padding: 0;
    }

    .p-wsparcie_widzenia .section-2 .col-65 {
        padding-left: 20px !important;
    }

    .p-wsparcie_widzenia .section-2 .blocks {
        margin-top: 0;
    }

    .p-wsparcie_widzenia .advice-1 .row {
        flex-direction: column;
    }

    .p-wsparcie_widzenia .advice-1 .col {
        width: 100%;
        max-width: 100%;
    }

    .p-wsparcie_widzenia .advice-1 .col:nth-child(2) .img {
        max-width: 400px;
        padding: 0 !important;
        margin: 0 auto;
        margin-top: 60px;
    }

    .p-wsparcie_widzenia .advice-2 .row-top .col:nth-child(1) {
        margin-top: 0 !important;
    }

    .p-zdrowie_powiek .section-symptoms {
        padding-bottom: 30px;
    }

    .p-zdrowie_powiek .section-symptoms .row-bottom .img {
        margin: 0 auto;
        max-width: 400px;
    }

    .p-zdrowie_powiek .section-symptoms .row-bottom {
        flex-direction: column;
    }

    .p-zdrowie_powiek .top-label {
        position: relative;
    }

    .p-zdrowie_powiek .section-symptoms .row-bottom .col {
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
    }

    .p-zdrowie_powiek .reveal-wrapper .linked-product {
        right: -200px;
        margin-top: -40px;
    }

    .p-zdrowie_powiek .section-symptoms .row-bottom > .col:first-child {
        margin-bottom: 80px;
    }

    .p-zdrowie_powiek .advice-2 .linked-product {
        margin-top: -30px;
    }

    .p-zdrowie_powiek .advice-3 {
        padding-top: 0;
        padding-bottom: 6rem;
    }

    .p-zdrowie_powiek .advice-3 .offset-left {
        padding: 0;
    }

    .p-zdrowie_powiek .advice-3 .linked-product {
        margin-left: 10px;
        margin-top: -50px;
    }

    .p-zdrowie_powiek .advice-4 .offset-left {
        padding: 0;
    }

    .p-zdrowie_powiek .advice-4 .row:first-child .col:nth-child(2) {
        margin-top: 0 !important;
    }

    .p-zdrowie_powiek .advice-4 .row-bottom .col {
        flex-direction: column-reverse;
    }

    .p-zdrowie_powiek .advice-4 .row-bottom .img {
        margin-top: 20px;
    }

    .p-nuzence .section-about {
        padding: 60px 0;
    }

    .p-nuzence .symptoms h2 {
        font-size: 24px;
    }

    .dwa-nuzence {
        max-width: 260px;
    }

    .p-nuzence .symptoms .container > .row {
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
    }

    .p-nuzence .symptoms .container > .row > .col-50 {
        width: 100%;
        max-width: 100%;
    }

    .p-nuzence .advice-1 .advices-inner {
        flex-wrap: wrap;
        align-content: center;
        margin: 0 -38px;
        justify-content: center;
    }

    .p-nuzence .advice-1 .advices-inner .col-2 {
        max-width: 400px;
        width: 50%;
        flex-basis: 50%;
        margin-bottom: 0;
        padding: 40px;
    }

    .p-nuzence .advice-1 h4 {
        font-size: 18px;
    }

    .p-nuzence .advice-2 {
        padding-top: 0;
    }

    .p-nuzence .advice-2 .linked-product {
        margin-top: -40px;
        margin-right: -10px;
    }

    .p-nuzence .advice-2 .offset-left {
        padding-left: 0;
    }

    .p-nuzence .advice-2 .col:nth-child(2) {
        padding-left: 20px;
    }

    .p-nuzence .advice-2 .advices-inner,.advice .expandable {
        padding: 0;
    }

    .p-nuzence .advice-2 {
        padding-bottom: 0;
    }

    .p-nuzence .advice-3 .offset-left {
        padding: 0;
    }

    .p-nuzence .advice-3 {
        padding-bottom: 0;
    }

    .p-nuzence .advice-4 .advice-title {
        margin-bottom: 20px !important;
    }

    .p-nuzence .advice-4 .advice {
        padding-left: 15px;
        padding-right: 15px;
    }

    .list-element {
        flex-direction: column;
    }

    .list-element > div {
        flex: 1;
    }

    .p-nuzence .advice-4 .linked-product:nth-child(1) {
        top: -120px;
    }

    .p-nuzence .advice-4 .linked-product:nth-child(2) {
        bottom: -80px;
    }

    .p-nuzence .advice-4 .row:last-child .col:nth-child(2) {
        margin-top: 130px !important;
    }

    .list-ingredient h4 {
        margin-bottom: 6px;
    }

    .faq {
        padding: 50px 0 60px;
    }

    .p-higiena_brzegow .section-2 .row-top {
        flex-direction: column;
    }

    .p-higiena_brzegow .section-2 .row-top .col {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 40px;
    }

    .p-higiena_brzegow .section-2 .row-top .block-text img {
        max-width: 160px;
    }

    .p-higiena_brzegow .row-top .col:nth-child(2) .img {
        right: initial;
        max-width: 400px;
        margin: 0 auto;
    }

    .p-higiena_brzegow .section-2 .row-bottom {
        flex-direction: column-reverse;
    }

    .p-higiena_brzegow .section-2 .row-bottom .col {
        width: 100%;
        max-width: 500px;
        flex-basis: 100%;
        margin: 0 auto 20px;
    }

    .p-higiena_brzegow .section-2 {
        padding: 60px 0 40px;
    }

    .p-higiena_brzegow .advice-1 .row-bottom .col:nth-child(2) {
        padding-left: 20px;
    }

    .p-higiena_brzegow .advice-1 .row-bottom .offset-left {
        padding-left: 0;
    }

    .p-higiena_brzegow .advice-1 .linked-product {
        margin-top: -50px;
        margin-left: 10px;
    }

    .p-higiena_brzegow .advice-2 {
        padding-top: 0;
    }

    .p-higiena_brzegow .advice-2 .block:nth-child(2n) {
        padding: 0;
    }

    .p-higiena_brzegow .advice-2 .linked-product {
        position: relative;
        margin-top: -100px;
        margin-left: auto;
    }

    .p-higiena_brzegow .advice-2 .blocks {
        padding: 0;
    }

    .p-higiena_brzegow .advice-3 {
        padding: 20px 0 20px;
    }

    .p-higiena_brzegow .advice-3 .offset-left {
        padding-left: 0;
    }

    .arrow-list li:before {
        width: 20px;
        height: 20px;
        background-size: contain !important;
    }

    .linked-product {
        max-width: 300px;
    }

    .linked-product .product.white-box-small {
        width: 300px;
        min-height: 148px;
        padding: 16px 12px;
        padding-left: calc(var(--reserve, 180px) + 12px);
    }

    .p-kontakt .linked-product .product.white-box-small {
        width: 320px;
    }

    .p-kontakt .linked-product .product-info h4 {
        font-size: 20px;
    }

    .p-kontakt .linked-product .post-excerpt {
        font-size: 10px;
    }

    .p-kontakt .linked-product--palpederm {
        --img-w: 105px;
        /* 140 * 0.75 */
        --img-left: 33px;
        /* 44 * 0.75 */
        --img-dy: -27px;
        /* -36 * 0.75 */
        --reserve: 138px;
        /* 184 * 0.75 */
        --text-w: 156px;
        /* 208 * 0.75 */
    }

    .p-kontakt .linked-product--dexoftyal-md {
        --img-w: 143px;
        /* 190 * 0.75 */
        --img-left: 5px;
        --img-dy: -30px;
        /* -40 * 0.75 */
        --reserve: 158px;
        /* 210 * 0.75 */
        --text-w: 156px;
        /* 208 * 0.75 */
    }

    .linked-product--maculoft {
        --img-w: 153px;
        --img-left: -19.5px;
        --img-dy: -7.5px;
        --reserve: 144px;
    }

    .linked-product--demoxoft-plus-lipozel {
        --img-w: 90px;
        --img-left: 22.5px;
        --img-dy: -18px;
        --reserve: 141px;
    }

    .linked-product--demoxoft-plus-clean {
        --img-w: 165px;
        --img-left: -22.5px;
        --img-dy: -6px;
        --reserve: 144px;
    }

    .linked-product--palpederm {
        --img-w: 86.25px;
        --img-left: 28.5px;
        --img-dy: -21px;
        --reserve: 138px;
    }

    .linked-product--dexoftyal-zel {
        --img-w: 168px;
        --img-left: -27px;
        --img-dy: 0px;
        --reserve: 142.5px;
    }

    .linked-product--dexoftyal-md {
        --img-w: 103.5px;
        --img-left: 24px;
        --img-dy: -22.5px;
        --reserve: 141px;
    }

    .linked-product--demoxoft-clean {
        --img-w: 187.5px;
        --img-left: -37.5px;
        --img-dy: -21px;
        --reserve: 139.5px;
        --text-w: 138px;
    }

    .linked-product--dexoftyal-ud {
        --img-w: 157.5px;
        --img-left: -16.5px;
        --img-dy: -7.5px;
        --reserve: 157.5px;
    }

    .linked-product--demoxoft-plyn {
        --img-w: 114px;
        --img-left: 16.5px;
        --img-dy: -22.5px;
        --reserve: 141px;
    }

    .custom-quiz-left {
        position: absolute;
    }

    .question-title span {
        font-size: 16px;
    }

    .quiz-modal {
        padding: 0 10px;
    }

    .custom-quiz-right {
        padding: 20px;
    }

    .close-modal {
        top: 7px;
        right: 10px;
    }

    .answers label {
        font-size: 14px;
    }

    .quiz-step button {
        font-size: 12px;
        border-width: 2px;
    }

    /* Single product */
    .large-title {
        font-size: 40px;
    }

    .tags .tag {
        font-size: 14px;
    }

    .seria-demoxoft .section-3 .medium-title {
        margin-top: 30px !important;
    }

    .verco-banner h2 {
        font-size: 3vw;
    }

    .verco-text {
        top: -15px;
    }

    .section-areas .eye {
        position: absolute;
        justify-content: flex-start;
        width: 420px;
        left: -130px;
        top: 100px;
    }

    .section-areas h3 {
        font-size: 18px;
    }

    .area-header {
        min-height: 70px;
    }

    .section-areas .area-item {
        margin-bottom: 20px;
    }

    .areas-bottom {
        margin-top: 40px;
    }

    .area-item .slider .product-img {
        transform: scale(0.75);
    }

    .area-item .slider .product-info {
        padding-left: 1rem;
        flex: 1 0 110px;
    }

    .area-header img {
        transform: translate(-50%,-88%);
        width: 65px;
    }

    .areas-grid {
        display: flex;
        flex-direction: column;
        width: 286px;
        position: static;
    }

    .areas-content {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }

    .area-item.active .expand-content {
        visibility: visible;
        opacity: 1;
    }

    /* Linked products (scaled 75%) */
    .product.dexoftyal-md .product-img {
        flex: 1 0 112.5px;
    }

    .product.dexoftyal-md .product-img figure {
        margin-top: -2.25rem;
    }

    .product.dexoftyal-ud .product-img {
        flex: 1 0 132px;
        margin-left: -0.75rem;
        margin-right: 0.375rem;
    }

    .product.dexoftyal-ud .product-img figure {
        margin-top: -0.375rem;
    }

    .product.dexoftyal-zel .product-img {
        flex: 1 0 172.5px;
        margin-left: -2.25rem;
    }

    .product.dexoftyal-zel .product-img figure {
        margin-top: -1.125rem;
    }

    .product.demoxoft-plus-clean .product-img {
        flex: 1 0 135px;
        margin-left: -0.75rem;
    }

    .product.demoxoft-plus-clean .product-img figure {
        margin-top: -1.5rem;
    }

    .product.demoxoft-clean .product-img {
        flex: 1 0 150px;
        margin-left: -1.125rem;
    }

    .product.demoxoft-clean .product-img figure {
        margin-top: -0.75rem;
    }

    .product.demoxoft-plyn .product-img {
        flex: 1 0 97.5px;
        margin-right: 0.75rem;
    }

    .product.demoxoft-plyn .product-img figure {
        margin-top: -1.5rem;
    }

    .product.demoxoft-plus-lipozel .product-img {
        flex: 1 0 85.5px;
        margin-right: 0.375rem;
    }

    .product.demoxoft-plus-lipozel .product-img figure {
        margin-top: -1.875rem;
    }

    .product.palpederm .product-img {
        flex: 1 0 90px;
        margin-right: 0.375rem;
        margin-left: 0.75rem;
    }

    .product.palpederm .product-img figure {
        margin-top: -1.5rem;
    }

    .product.maculoft .product-img {
        flex: 1 0 112.5px;
        margin-left: -0.75rem;
    }

    .product.maculoft .product-img figure {
        margin-top: -1.875rem;
    }

    /* MENU */
    #menu {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transform: translate(0,-20px);
        transition: 0.5s;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
    }

    .menu {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    ul.menu > li {
        min-height: auto;
        flex-direction: column;
        margin: 10px 0;
    }

    ul.menu > li > a {
        height: auto;
        font-size: 20px;
        min-height: 30px;
    }

    .sub-menu a {
        font-size: 16px;
    }

    ul.menu > li > a:before {
        opacity: 0;
    }

    ul.menu .menu-item-has-children.active > a:before {
        opacity: 1;
    }

    .menu-item-has-children.active > a:after {
        transform: scale(-1);
    }

    .menu-open #menu {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
        pointer-events: all;
    }

    .menu-open .logo {
        opacity: 1;
    }

    .menu-trigger {
        display: flex;
        flex-direction: column;
        width: 26px;
        height: 17px;
        justify-content: space-between;
        position: absolute;
        right: 25px;
        cursor: pointer;
    }

    .menu-trigger span {
        background: #0199DF;
        width: 100%;
        height: 2px;
        transition: 0.3s;
    }

    .menu-trigger span:nth-child(1),.menu-trigger span:nth-child(3) {
        transform-origin: 0 0;
    }

    .menu-open .menu-trigger span:nth-child(2) {
        opacity: 0;
    }

    .menu-open .menu-trigger span:nth-child(1) {
        transform: rotate(45deg) translate(1px,-5px);
    }

    .menu-open .menu-trigger span:nth-child(3) {
        transform: rotate(-45deg) translate(1px,2px);
        width: 100%;
    }

    /* Default collapsed state */
    .menu .sub-menu {
        position: relative;
        top: 0;
        text-align: center;
        left: initial;
        max-height: 0;
        visibility: visible;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        pointer-events: none;
        box-shadow: none;
        padding: 0;
    }

    .menu-item-has-children.active > .sub-menu {
        opacity: 1;
        pointer-events: all;
        padding: 1.5rem 0 0.5rem;
    }

    .section-areas {
        position: relative;
        --active-top: 0;
        /* parked slot vertical offset */
        --active-right: 350px;
        /* parked slot horizontal offset */
        --active-width: 320px;
        /* parked slot width */
        padding-bottom: 30px;
    }

    .areas-content {
        position: relative;
    }

    body {
        font-size: 14px;
    }

    h4 {
        font-size: 20px;
    }

    .font-s,.medium-text {
        font-size: 16px;
    }

    h2 {
        font-size: 32px;
    }

    .tip {
        position: relative;
        margin-bottom: 20px;
    }

    .tip {
        top: initial !important;
    }

    .tip-2 .white-box {
        padding-left: 30px;
        padding-right: 30px;
    }

    .tip .btn:not(.small) {
        font-size: 14px;
    }

    .home-posts {
        flex-direction: column;
        width: 760px;
    }

    .home-posts .ft-post, .home-posts .two-posts {
        width: 100%;
    }

    .two-posts .post .category-label {
        margin-top: 0;
    }

    .products-grid.products-carousel {
        margin-top: 20px;
    }

    .products-grid.products-carousel .slide {
        width: 30%;
    }

    .products-grid .custom-flickity-controls {
        display: flex;
        justify-content: space-between;
        margin-top: 0;
    }

    .tip-3 .white-box {
        padding: 30px 60px;
    }

    .products-grid .white-box-small {
        padding: 10px 15px;
    }

    .verco-post .half:nth-child(1) {
        width: 66%;
    }

    .verco-post .half:nth-child(2) {
        margin-right: -120px;
    }

    .verco-post .half:nth-child(2) .img:after {
        display: none;
    }

    .products-carousel .product-image {
        height: 160px;
    }

    .products-carousel .slide {
        width: 33.333%;
    }

    .p-cyfrowe_zmeczenie .section-symptoms .linked-product {
        position: relative;
        right: initial;
    }
}

@media (max-width: 1023px) {
    .container {
        padding:0 25px;
    }

    #content {
        overflow-x: hidden;
    }

    .p-zdrowie_powiek .advice-1 .advice-text {
        margin-left: 15px;
    }

    .btn, button:not(.close-modal), input[type="submit"] {
        padding: 8px 30px;
    }

    .seria-demoxoft .section-3 .blocks {
        flex-direction: column;
        margin: 0 auto;
    }

    .seria-demoxoft .section-3 .block {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .seria-demoxoft-plus .tri-complex .block-1 .img {
        left: 0;
    }

    .tri-complex {
        max-width: 600px;
        margin: 0 auto;
    }

    .tri-complex > .col {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .tri-complex .block {
        flex-direction: column;
    }

    .tri-complex .block .img {
        max-width: 200px;
    }

    .tri-complex-box {
        margin-bottom: 40px;
    }

    .seria-demoxoft-plus .tri-complex .block-2 .img {
        padding: 0;
        max-width: 240px;
    }

    .dexoftyal-symptoms .icon {
        max-width: 90px;
    }

    .dexoftyal-symptoms .col:nth-child(3), .dexoftyal-symptoms .col:nth-child(4) {
        padding-left: 100px;
    }

    .seria-dexoftyal .section-3 .col {
        flex-direction: column;
        align-items: flex-start;
    }

    .dexoftyal-symptoms .figure {
        width: 100%;
        max-width: 200px;
    }

    .seria-dexoftyal .how-to .block-text {
        padding: 0;
    }

    .stars img {
        margin-right: 2px;
        width: 14px;
        height: 14px;
    }

    .review .font-s {
        font-size: 14px;
    }

    .reviews h2 {
        margin-bottom: 20px !important;
    }

    .reviews .review-inner {
        padding: 20px !important;
    }

    .review {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .calm-complex p {
        font-size: 14px;
    }

    .product-palpederm .row-bottom .block .block-text {
        margin: 0;
        flex: 1 0 50%;
    }

    .product-palpederm .row-bottom .block {
        gap: 14px;
        align-items: flex-start;
    }

    .product-palpederm .block-text h4 {
        margin-bottom: 10px;
    }

    .product-palpederm .how-to .col {
        padding-left: 20px;
        padding-right: 20px;
    }

    .product-maculoft .section-3 .block {
        flex-direction: column !important;
    }

    .product-maculoft .section-3 .col:nth-child(2) {
        align-content: center;
    }

    .posts-section .col-20 {
        width: 30%;
        max-width: 30%;
        flex-basis: 30%;
    }

    .posts-section .col-80 {
        width: 70%;
        max-width: 70%;
        flex-basis: 70%;
    }

    .verco-text img {
        max-width: 120px;
    }

    .p-kontakt .hero-heading {
        margin: 0 !important;
    }

    .p-kontakt .start-content {
        margin-top: 20px;
        width: 100%;
        padding: 0 25px;
    }

    .contact-form .container {
        margin: 0 auto;
        max-width: 600px;
    }

    .contact-form .container > .row {
        flex-direction: column;
        margin: 0;
    }

    .contact-form .container > .row > .col {
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .contact-form .wpcf7 {
        max-width: 500px;
    }

    .contact-details {
        margin: 40px 0;
    }

    .partner {
        padding-bottom: 40px;
    }

    .about-verco .blocks .block .linked-product {
        margin-top: -70px;
    }

    .p-suche_oczy .linked-product--demoxoft-clean {
        position: absolute;
        top: 70px;
        right: 0;
    }

    .p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) .linked-product:nth-child(1) {
        right: 0;
    }

    .p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) .linked-product:nth-child(2) {
        top: 200px;
    }

    .dust {
        left: -40px;
    }
}

@media (min-width: 768px) and (max-width:1200px) {
    /* Park ANY active card in the slot */ .section-areas .area-item.active, .section-areas .area-item.collapsing {
        position: absolute;
        top: var(--active-top);
        right: var(--active-right);
        width: var(--active-width);
        z-index: 3;
        /* active above; collapsing below via next rule */
        pointer-events: none;
        padding-top: 60px;
    }

    /* Ensure the outgoing (collapsing) card sits UNDER the new active */
    .section-areas .area-item.collapsing {
        z-index: 2;
    }

    /* Re-enable interaction for the active card’s inner UI */
    .section-areas .area-item.active .area-inner, .section-areas .area-item.active .area-header, .section-areas .area-item.active .area-description, .section-areas .area-item.active .expand-content {
        pointer-events: auto;
    }

    /* Prevent hover visuals on touch */
    .area-inner:hover .expand-content {
        visibility: hidden;
        opacity: 0;
    }

    .area-item:hover .area-header {
        color: inherit;
    }

    .area-item:hover .area-header::before {
        opacity: 1;
    }

    .area-item:hover .area-header::after {
        opacity: 0;
    }

    /* Active state text/icon visuals */
    .area-item .area-header, .area-item .area-header::after {
        transition: none !important;
    }

    .area-item.active .area-header {
        color: white;
    }

    .area-item.active .area-header::before {
        opacity: 0;
    }

    .area-item.active .area-header::after {
        opacity: 1;
    }

    /* Content gating to avoid flashes:
     - Active but NOT settled: keep content hidden until after absolute positioning.
     - Collapsing: force-hide content while dropping back into flow (prevents flash). */
    .area-item.active .expand-content {
        visibility: hidden;
        opacity: 0;
    }

    .area-item.active.settled .expand-content {
        visibility: visible;
        opacity: 1;
    }

    .area-item.collapsing .expand-content {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Optional: kill any child fades that could cause flashes during collapse */
    .area-item.collapsing .expand-content img, .area-item.collapsing .expand-content video, .area-item.collapsing .expand-content figure {
        transition: none !important;
        animation: none !important;
    }

    /* Button gradient per position (unchanged) */
    .areas-top .area-item:nth-child(1) .area-description .btn.active {
        --g1: #F36500;
        --g2: #FF9303;
    }

    .areas-top .area-item:nth-child(2) .area-description .btn.active {
        --g1: #3965F8;
        --g2: #0029B4;
    }

    .areas-top .area-item:nth-child(3) .area-description .btn.active {
        --g1: #EFA722;
        --g2: #FFB400;
    }

    .areas-bottom .area-item:nth-child(1) .area-description .btn.active {
        --g1: #0D91B5;
        --g2: #1A3E48;
    }

    .areas-bottom .area-item:nth-child(2) .area-description .btn.active {
        --g1: #50E6FF;
        --g2: #00ACC9;
    }

    .areas-bottom .area-item:nth-child(3) .area-description .btn.active {
        --g1: #D67B8B;
        --g2: #F4AAB7;
    }
}

/* ---------- Desktop (≥1201px & hover-capable): hover-only ---------- */
@media (hover: hover) and (min-width:1201px) {
    .area-item:hover .area-header {
        color: white;
    }

    .area-item:hover .area-header::before {
        opacity: 0;
    }

    .area-item:hover .area-header::after {
        opacity: 1;
    }

    .area-inner:hover .expand-content {
        visibility: visible;
        opacity: 1;
    }

    /* Button gradient on hover (unchanged) */
    .areas-top .area-item:nth-child(1) .area-description .btn:hover {
        --g1: #F36500;
        --g2: #FF9303;
    }

    .areas-top .area-item:nth-child(2) .area-description .btn:hover {
        --g1: #3965F8;
        --g2: #0029B4;
    }

    .areas-top .area-item:nth-child(3) .area-description .btn:hover {
        --g1: #EFA722;
        --g2: #FFB400;
    }

    .areas-bottom .area-item:nth-child(1) .area-description .btn:hover {
        --g1: #0D91B5;
        --g2: #1A3E48;
    }

    .areas-bottom .area-item:nth-child(2) .area-description .btn:hover {
        --g1: #50E6FF;
        --g2: #00ACC9;
    }

    .areas-bottom .area-item:nth-child(3) .area-description .btn:hover {
        --g1: #D67B8B;
        --g2: #F4AAB7;
    }
}

/* =========================
   ANTI-FLASH PATCH (append at end)
   ========================= */
/* Mobile + tablet logic only */
@media (min-width: 768px) and (max-width:1200px) {
    /* Nuke any fades/transitions that might fight the gating */ .section-areas .expand-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
        /* <- key */
    }

    /* While an item is active but BEFORE it's settled in absolute slot: keep hidden */
    .area-item.active .expand-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Show ONLY after your JS adds .settled */
    .area-item.active.settled .expand-content {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Force-hide during collapse and immediately after losing .active */
    .area-item.collapsing .expand-content, .area-item:not(.active) .expand-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Put outgoing card under incoming one, avoid z-fight flashes */
    .section-areas .area-item.collapsing {
        z-index: 2 !important;
    }

    /* Any media inside expand shouldn't animate while collapsing */
    .section-areas .expand-content img, .section-areas .expand-content video, .section-areas .expand-content figure {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 767px) {
    /* Fonts */ h1,.large-title {
        font-size:36px;
    }

    .medium-text,.area-header h3,h3 {
        font-size: 18px;
    }

    .section-title,h2 {
        font-size: 28px;
    }

    h4 {
        font-size: 20px;
    }

    .font-s,.btn, button:not(.close-modal), input[type="submit"] {
        font-size: 16px;
    }

    .area-description .small-text,h5,.font-xs {
        font-size: 14px;
    }

    .post-excerpt {
        font-size: 10px;
    }

    section {
        padding: 50px 0;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
    }

    .custom-flickity-controls {
        gap: 20px;
    }

    .custom-flickity-controls .flickity-prev-next-button {
        flex: 1 0 auto;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    .custom-flickity-controls .flickity-page-dots {
        flex: 0 1 auto;
    }

    .btn, button:not(.close-modal), input[type="submit"] {
        padding: 0.5rem 1.6rem;
    }

    .flickity-page-dot {
        margin: 0 5px;
    }

    .img:after {
        left: 5px;
        top: 5px;
    }

    .flex,.row {
        flex-direction: column;
    }

    .list-ingredient h4 {
        flex-direction: row;
    }

    .p-nuzence .advice-4 {
        padding-bottom: 100px;
    }

    .col {
        max-width: 100%;
    }

    .mobile-center {
        display: flex;
        justify-self: center;
        text-align: center;
    }

    .mobile-fade {
        opacity: 0;
    }

    .mobile-fade-y {
        transform: translateY(14px);
    }

    .fade-y {
        transform: translateY(14px);
    }

    .fade-y.mobile-fade, .fade-x.mobile-fade {
        transform: none;
    }

    .single-product #menu {
        flex-direction: column;
        justify-content: center;
    }

    .single-product #menu > div {
        height: auto;
    }

    .hero-content {
        width: 100%;
        margin-top: 70px;
        height: calc(100vh - 100px);
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo {
        left: 24px;
    }

    .logo-box:before {
        display: none;
    }

    .logo-box {
        border-radius: 1rem;
        margin: 0 auto;
        margin-bottom: 1rem;
        display: block;
    }

    .hero-title {
        font-size: 36px;
        text-align: center;
        max-width: calc(100% - 50px);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-row {
        min-height: initial;
        /* no forced min-height */
        align-items: flex-start;
        /* text sits at top */
    }

    .hero-section {
        padding-bottom: 0;
        padding-top: 0;
        overflow: visible;
    }

    .hero-gallery {
        position: absolute;
        left: 50%;
        bottom: calc(-30px + env(safe-area-inset-bottom,0px));
        bottom: -18px;
        transform: translate(-50%,50%) !important;
        width: min(100vw, 560px);
        max-width: 560px;
        display: grid;
        grid-auto-flow: row;
        grid-template-rows: repeat(2, auto);
        gap: 12px;
        z-index: 0;
        top: initial;
    }

    .hero-row {
        min-height: 100vh;
        align-items: flex-start;
    }

    .hero-gallery > div {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .hero-gallery-1 {
        margin-top: 0 !important;
    }

    .hero-gallery .hero-thumb {
        flex: 0 0 90px;
        width: 90px;
    }

    .hero-gallery .hero-thumb figure {
        width: 100%;
        padding-bottom: 80% !important;
        /* keep square-ish ratio */
    }

    .hero-gallery .hero-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .section-areas {
        padding-top: 140px;
        padding-bottom: 30px;
    }

    .areas-content {
        display: flex;
        flex-direction: column;
        margin: -40px 0 0;
    }

    .areas-content .eye {
        order: 1;
        margin: 0;
        position: relative;
        width: 100%;
        max-width: 300px;
        left: auto;
        top: auto;
        margin: 0 auto;
        margin-bottom: -40px;
    }

    .areas-content .eye svg {
        width: 100%;
    }

    .areas-content .areas-top {
        order: 2;
    }

    .areas-content .areas-bottom {
        order: 3;
    }

    .areas-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        position: relative;
        margin-top: 46px;
    }

    .area-item {
        margin-bottom: 50px;
    }

    .expand-content {
        position: relative;
    }

    .area-inner.active .expand-content {
        visibility: visible;
        opacity: 1;
    }

    .area-inner.active .area-header {
        color: white;
    }

    .area-inner.active .area-header::after {
        opacity: 1;
    }

    .area-header {
        min-height: 70px;
    }

    .area-header img {
        transform: translate(-50%,-80%);
    }

    .expand-content {
        overflow: hidden;
        visibility: visible;
        opacity: 1;
        display: none;
    }

    .area-inner.active .expand-content {
        opacity: 1;
        visibility: visible;
    }

    .area-description, .white-box-small {
        box-shadow: 0px 7px 10px 0px #0000000F;
    }

    .area-item .slider {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Linked products */
    .product.dexoftyal-md .product-img {
        flex: 1 0 110px;
    }

    .product.dexoftyal-md .product-img figure {
        margin-top: -1.5rem;
    }

    .product.dexoftyal-ud .product-img {
        flex: 1 0 135px;
        margin-left: 0;
    }

    .product.dexoftyal-ud .product-img figure {
        margin-top: -1.5rem;
    }

    .product.dexoftyal-zel .product-img {
        flex: 1 0 170px;
        margin-left: -2rem;
    }

    .product.dexoftyal-zel .product-img figure {
        margin-top: -1.5rem;
    }

    .product.demoxoft-plus-clean .product-img {
        flex: 1 0 140px;
        margin-left: 0;
    }

    .product.demoxoft-plus-clean .product-img figure {
        margin-top: -2rem;
    }

    .product.demoxoft-clean .product-img {
        flex: 1 0 150px;
        margin-left: 0;
    }

    .product.demoxoft-clean .product-img figure {
        margin-top: -1rem;
    }

    .product.demoxoft-plyn .product-img {
        flex: 1 0 105px;
    }

    .product.demoxoft-plyn .product-img figure {
        margin-top: -1rem;
        margin-left: 1rem;
    }

    .product.demoxoft-plus-lipozel .product-img {
        flex: 1 0 114px;
        margin-right: 0.5rem;
    }

    .product.demoxoft-plus-lipozel .product-img figure {
        margin-top: -2.5rem;
    }

    .product.palpederm .product-img {
        flex: 1 0 90px;
        margin-left: 1rem;
    }

    .product.palpederm .product-img figure {
        margin-top: -1rem;
    }

    .product.maculoft .product-img {
        flex: 1 0 130px;
        margin-left: 0;
    }

    .product.maculoft .product-img figure {
        margin-top: -1.5rem;
    }

    .eye-img {
        right: -60px;
        bottom: 80px;
        width: 200px;
    }

    /* Home Areas Slider */
    .area-item .slide {
        flex-direction: row;
    }

    .area-item .slider .product-img {
        transform: scale(0.9);
    }

    .area-item .slider .palpederm .product-img {
        transform: scale(0.75);
        margin-top: -30px;
    }

    .area-item .slider .product-info {
        padding-left: 1rem;
        flex: 1 0 110px;
    }

    .area-item .product-slider .custom-flickity-controls {
        justify-content: center;
    }

    .arrow-headline:before {
        display: none;
    }

    .tip {
        position: relative;
        top: initial !important;
        margin-bottom: 30px;
    }

    .tip-inner {
        flex-direction: column;
    }

    .tip-inner > div {
        flex: 1 1 100% !important;
    }

    .symptom-causes {
        flex-direction: column;
    }

    .symptom-cause {
        width: 100%;
        margin: 1.5rem 0;
        flex-direction: row;
    }

    .symptom-cause:nth-child(2n) {
        flex-direction: row-reverse;
    }

    .symptom-cause p {
        padding: 0;
    }

    .tip-1 .white-box {
        margin: 0 0 30px;
    }

    .tip-right-col p {
        padding: 20px;
        text-align: center;
    }

    .tip .white-box {
        padding: 30px 20px !important;
    }

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

    .eye-cares {
        width: 100%;
        justify-content: center;
    }

    .eye-care {
        margin: 1.5rem 0;
    }

    .bottom-content {
        flex-direction: column;
    }

    .bottom-content .bottom-text {
        margin-bottom: 10px;
    }

    .half {
        width: 100%;
        padding: 0 !important;
        margin-bottom: 1rem;
    }

    .home-posts,.two-posts .post {
        flex-direction: column;
        gap: 0;
    }

    .post .category-label {
        margin: 1rem 0 !important;
    }

    .home-posts + .btn {
        margin-bottom: 60px;
    }

    .verco-post {
        flex-direction: column;
    }

    .verco-post .post-top img {
        width: 120px;
    }

    .products-carousel .slide {
        width: calc(100% - 60px) !important;
        max-width: 320px;
    }

    .products-carousel .product-image {
        height: 12rem;
        max-width: 80%;
        margin: 0 auto;
        padding: 2rem 0;
    }

    .symptom-grid {
        margin-top: 40px !important;
    }

    .p-suche_oczy .symptom {
        max-width: 100%;
        padding: 0;
        margin-bottom: 2rem !important;
    }

    .bottom-right-img figure {
        border-radius: 0 !important;
    }

    .bottom-right-img {
        width: 110%;
        position: relative;
        margin-left: -5%;
    }

    .section-symptoms {
        padding-bottom: 0;
    }

    .eye-blue svg {
        max-width: 200px;
        max-height: 300px;
    }

    .p-suche_oczy .advice-title {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .advice-title {
        flex-direction: row;
    }

    .advice-title h3 {
        font-size: 22px;
    }

    .p-suche_oczy .advice-1 .advices-inner:nth-child(2) .advice-text {
        padding: 0;
    }

    .p-suche_oczy .advice-1 .advice:nth-child(2) {
        flex-direction: column;
    }

    .p-suche_oczy .last-advice > .img {
        position: absolute !important;
        transform: translate(-65%,0);
        width: 45vw;
        min-width: 170px;
        margin-top: 80px;
    }

    .last-advice .computer {
        position: absolute;
    }

    .last-advice .computer + p {
        padding-left: 22vw;
    }

    .p-suche_oczy .advice-1 .advice-text {
        padding: 0;
        margin-top: 0;
    }

    .last-advice .advice-text .row {
        flex-direction: column;
        padding-left: 22vw;
    }

    .last-advice .advice-text .row .col {
        max-width: 100%;
    }

    .dust {
        width: 1000px;
        left: -50%;
        bottom: 100px;
    }

    .quiz {
        border-radius: 0;
        width: calc(100% + 50px);
        margin: 60px -25px 50px;
        border-left: 0;
        border-right: 0;
    }

    .quiz-inner {
        position: relative;
        display: block;
    }

    .quiz .col {
        max-width: 100%;
        display: block;
        width: 100%;
    }

    .quiz .col:nth-child(1) {
        position: relative;
        z-index: 2;
        color: white;
    }

    .quiz .col:nth-child(1) * {
        color: white;
    }

    .quiz-text h4 {
        margin: 10px 0;
    }

    .quiz-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 100%;
        filter: blur(7px);
    }

    .quiz-img:after {
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        display: block;
        z-index: 2;
    }

    .btn-form.orange-gradient {
        background: white !important;
    }

    .btn-form.orange-gradient span {
        color: #F36500 !important;
    }

    .advice-title > .flex {
        flex-direction: row;
    }

    .adv-intro {
        padding: 0;
        margin: 20px 0;
    }

    .advice-2 .row {
        display: block;
    }

    .advice-2 .row .col {
        max-width: 100%;
    }

    .advice-2 .advices-inner {
        padding: 0;
    }

    .advice-2 .expand > div {
        flex-direction: row;
        align-items: flex-start;
    }

    .advice-2 .expand > div .flex {
        flex-direction: row;
    }

    .p-suche_oczy .advice-2 .col-r .img {
        width: 60%;
        max-width: 300px;
    }

    .p-suche_oczy .advice-2 .col-r {
        align-items: flex-start;
        margin-top: 40px !important;
    }

    .advice .expand {
        padding-bottom: 6px;
    }

    .advice-2 .expandable {
        max-width: 100%;
        padding: 0;
    }

    .letter {
        margin-right: 1rem !important;
    }

    .advice-2 .advice-last .advice-inner {
        padding-left: 76px;
    }

    .advice-2 .linked-product {
        margin-left: 30px;
        margin-top: -10px;
    }

    .advice-3 .advice {
        padding: 0;
        margin: 1.5rem 0 1rem;
    }

    .advice-3 .advice h4 {
        align-items: flex-start;
    }

    .advice-3 .row {
        flex-direction: column-reverse;
    }

    .advice-3 .adv-text {
        padding-left: 45px;
    }

    .advice-inner div {
        flex-direction: row;
    }

    .advice-3 .btn:not(.btn-form):not(.small) {
        margin: 2rem auto !important;
        display: block;
        max-width: 280px;
    }

    .advice-3 .img:not(.quiz-img) {
        width: 66vw;
        margin: 0 auto;
    }

    .linked-product .product-image {
        text-align: center;
    }

    .linked-product .product-info {
        /* flex: 0 1 131px; */
    }

    .linked-product .btn {
        margin: 1rem 0 0 !important;
    }

    .linked-product .product {
        margin-top: -20px;
        flex-direction: row;
    }

    .p-suche_oczy .advice-3 .linked-product {
        margin: 0;
        left: 30px;
        align-self: auto;
    }

    .p-suche_oczy .advice-4 .advice {
        padding: 0 !important;
    }

    .p-suche_oczy .advice-4 .advice:nth-child(2n+1) .img {
        justify-self: flex-end;
    }

    .p-suche_oczy .advice-4 .advice .img {
        min-width: 240px;
        width: 70vw;
    }

    .advice-step {
        flex-direction: row;
    }

    .p-suche_oczy .advice-4 .advice-step:before {
        display: none;
    }

    .faq {
        padding-top: 20px;
    }

    .faq-question {
        flex-direction: row;
    }

    .single-product .section-1 {
        padding-top: 20px;
    }

    .single-product .section-1 .col:first-child {
        margin-bottom: 100px;
    }

    .single-product h1 {
        margin-bottom: 1rem;
    }

    .single-product .section-1 .row {
        display: block;
    }

    .single-product .section-3 .col, .single-product .section-4:not(.product-infos) .col {
        width: 100% !important;
        margin: 0 0 20px;
    }

    .product-infos .product-info {
        padding-bottom: 10px;
    }

    .single-product .how-to .col {
        margin: 0 auto;
        display: block;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .single-product .how-to .col > * {
        width: 100%;
        text-align: center;
    }

    .single-product .product-img .img {
        padding: 0;
        margin-bottom: 60px;
        width: calc(100% - 50px);
        max-width: 300px;
    }

    .single-product .product-thumb {
        position: absolute;
        margin: 0;
        bottom: -50px;
        right: -10px;
    }

    .tags {
        flex-direction: row;
    }

    .tags .tag {
        font-size: 12px;
        border-width: 1px;
    }

    .btns {
        flex-direction: row;
    }

    .reviews {
        text-align: center;
    }

    .review {
        text-align: left;
    }

    .reviews .btn {
        display: inline-block;
        margin: 0 auto;
    }

    .seria-demoxoft .section-3 .medium-title {
        margin: 0 0 20px !important;
    }

    .product-thumb {
        position: absolute;
        right: 0;
        bottom: -50px;
        /* -5vw */
        min-width: 100px;
        /* 10vw */
    }

    .product-demoxoft-clean .product-thumb {
        width: 220px;
        /* 22vw */
        bottom: -70px;
        /* -7vw */
    }

    .product-demoxoft-plyn .product-thumb {
        width: 140px;
        /* 14vw */
    }

    .product-demoxoft-plus-clean .product-thumb {
        width: 220px;
        /* 22vw */
        bottom: -70px;
        /* -7vw */
    }

    .product-demoxoft-plus-lipozel .product-thumb {
        width: 130px;
        /* 13vw */
        right: 50px;
        /* 5vw */
    }

    .product-dexoftyal-md .product-thumb {
        width: 170px;
        /* 17vw */
        right: 20px;
        /* 2vw */
    }

    .product-dexoftyal-zel .product-thumb {
        width: 230px;
        /* 23vw */
        bottom: 0px;
        /* 0vw */
        right: 40px;
        /* 4vw */
    }

    .product-dexoftyal-ud .product-thumb {
        width: 200px;
        /* 20vw */
        right: 20px;
        /* 2vw */
    }

    .product-palpederm .product-thumb {
        width: 140px;
        /* 14vw */
        right: 30px;
        /* 3vw */
    }

    .product-maculoft .product-thumb {
        width: 190px;
        /* 19vw */
        right: 20px;
        /* 2vw */
        bottom: -30px;
        /* -3vw */
    }

    .dexoftyal-symptoms .icon {
        max-width: 80px;
    }

    .dexoftyal-symptoms .col:nth-child(3), .dexoftyal-symptoms .col:nth-child(4) {
        padding-left: 10px;
    }

    .seria-dexoftyal .how-to .col:nth-child(2n+1) .block-text, .seria-dexoftyal .how-to .col:nth-child(2n) .block-text {
        padding: 0;
    }

    .review {
        margin-bottom: 30px;
    }

    .reviews h2 {
        align-items: center;
        margin: 0 !important;
    }

    .reviews img {
        margin-top: 10px;
    }

    .product-infos .expand {
        width: 100%;
        flex-direction: row;
        margin-bottom: 1rem;
    }

    .knowledge {
        transform: none;
    }

    .knowledge-outer {
        background-size: cover !important;
        border-radius: 0;
    }

    .single-product .has-knowledge {
        padding-top: 40px;
    }

    .single-product .faq {
        padding-top: 50px;
    }

    .products-grid .white-box-small {
        text-align: center;
        align-items: center;
        margin: 0 auto;
        margin-bottom: 30px;
        max-width: 220px;
    }

    .section-tips .btn.small {
        align-self: center;
    }

    .products-grid .img-wrapper {
        height: 6rem;
        width: 86%;
        margin: 0 auto;
        text-align: center;
    }

    .products-grid .img-wrapper img {
        object-position: center !important;
    }

    .p-cyfrowe_zmeczenie .section-symptoms {
        padding-top: 50px;
    }

    .dark-mode-switch {
        position: relative !important;
        top: initial;
        right: initial;
        flex-direction: row;
        margin: 0 auto;
        margin-bottom: 40px;
        align-items: center;
        max-width: 250px;
    }

    .dark-mode-switch span {
        font-size: 14px;
        margin-right: 10px !important;
    }

    .p-cyfrowe_zmeczenie .section-symptoms .white-box-small {
        /* background: none; */
        /* box-shadow: none; */
        margin-bottom: 60px;
    }

    .p-cyfrowe_zmeczenie .advice-1 .advices-inner {
        padding-right: 0;
    }

    .p-cyfrowe_zmeczenie .advice-1 {
        top: 0;
    }

    .p-cyfrowe_zmeczenie .advice-1 .advice-title {
        padding-top: 130px;
    }

    .blink {
        top: -75px;
        right: -30px;
        transform: scale(0.6);
    }

    .p-cyfrowe_zmeczenie .advice-1 .advice:nth-child(2n) {
        flex-direction: column;
    }

    .p-cyfrowe_zmeczenie .advice-1 .advice {
        display: block;
    }

    .p-cyfrowe_zmeczenie .advice-1 .advice .img {
        margin: 2rem 0;
    }

    .p-cyfrowe_zmeczenie .advice-1 .linked-product {
        left: initial;
        right: -10px;
    }

    .p-cyfrowe_zmeczenie .advice-1 .linked-product .product-image {
        margin-top: 20px;
    }

    .p-cyfrowe_zmeczenie .section-symptoms .bg-img {
        width: 85vw;
        height: auto;
        top: 40%;
        bottom: 240px;
    }

    .p-cyfrowe_zmeczenie .row-top .col:first-child .arrow-list {
        padding: 0;
    }

    .p-cyfrowe_zmeczenie .row-bottom .arrow-list {
        padding: 0;
        padding-left: 10px;
    }

    .p-cyfrowe_zmeczenie .advice-3 .bg-img {
        width: 100%;
        height: auto;
    }

    .p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) {
        margin: 0 0 0 -10px;
        flex-direction: column;
        justify-content: flex-start;
    }

    .p-cyfrowe_zmeczenie .row-bottom .linked-product {
        margin-top: 40px;
    }

    .p-cyfrowe_zmeczenie .advice-2 {
        padding-top: 90px;
    }

    .p-cyfrowe_zmeczenie .row-bottom .col:nth-child(2) .linked-product:nth-child(2) {
        position: relative;
        top: initial;
    }

    .faq-col:nth-child(2) .faq-item:first-child .faq-question {
        border-top: 0;
    }

    .products-grid.products-carousel .slide, .verco-post .half:nth-child(1) {
        width: 100%;
    }

    .products-grid.products-carousel .white-box-small {
        max-width: none;
    }

    .p-suche_oczy .advice-1 .advice {
        align-items: normal;
    }

    .quiz-result .linked-product {
        display: none !important;
    }

    .p-cyfrowe_zmeczenie .advice-4 .advice-inner {
        padding-left: 0;
        margin-top: 30px;
    }

    .p-cyfrowe_zmeczenie .advice-4 .advice-inner .flex {
        align-items: flex-start;
        text-align: left;
    }

    .p-cyfrowe_zmeczenie .advice-4 .advice-inner .letter {
        top: -10px;
        position: relative;
    }

    .p-cyfrowe_zmeczenie .advice-4 .adv-text {
        text-align: left;
        padding-left: 44px;
    }

    .p-cyfrowe_zmeczenie .advice-4 .col-55 {
        text-align: center;
        margin-top: 0 !important;
    }

    .p-cyfrowe_zmeczenie .advice-4 .btn {
        margin: 0 !important;
        display: inline-block;
    }

    .p-cyfrowe_zmeczenie .advice-4 .col-45 {
        width: 100%;
    }

    .p-cyfrowe_zmeczenie .advice-4 .btns {
        margin-left: 2.5rem;
    }

    .p-wsparcie_widzenia .section-2 .block-text {
        max-width: 100%;
    }

    .p-wsparcie_widzenia .section-2 .row .col:first-child {
        flex: 1;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
        max-width: 400px;
    }

    .p-wsparcie_widzenia .section-2 .block .img {
        max-width: 120px;
    }

    .p-wsparcie_widzenia .advice-1 .block:nth-child(2n) {
        flex-direction: column;
    }

    .p-wsparcie_widzenia .advice-2 .img {
        margin-top: 20px;
        padding: 0 !important;
    }

    .p-wsparcie_widzenia .advice-2 .grid-blocks {
        text-align: center;
        display: block;
    }

    .p-wsparcie_widzenia .advice-2 .grid-block .img {
        margin: 0 auto;
        width: 100%;
    }

    .p-wsparcie_widzenia .advice-2 .grid-block {
        margin-bottom: 2rem;
    }

    .grid-block ul {
        list-style: none;
        padding: 0;
    }

    .grid-block__text {
        min-height: auto;
    }

    .grid-block--promo .linked-product {
        top: 70px;
    }

    .p-wsparcie_widzenia .advice-3 .col:nth-child(2) {
        margin-top: 0px !important;
    }

    .p-zdrowie_powiek .advice-2 .row .col:nth-child(2) {
        margin-top: 60px;
    }

    .p-zdrowie_powiek .advice-4 .row:first-child .col-50:nth-child(2) {
        padding-top: 50px;
    }

    .p-zdrowie_powiek .advice-4 .col-50:nth-child(2) .block-text {
        margin-top: 20px !important;
    }

    .p-zdrowie_powiek .reveal-wrapper .linked-product {
        right: -30px;
    }

    .p-zdrowie_powiek .top-label {
        width: 100%;
        left: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .small-images .col {
        margin-bottom: 20px !important;
    }

    .expand {
        flex-direction: row;
    }

    .p-nuzence .section-about .col:nth-child(1) {
        padding-top: 0 !important;
    }

    .p-nuzence .section-about .col {
        width: 100%;
        margin-top: 20px;
    }

    .p-nuzence .advice-1 .advices-inner .col-2 {
        width: 100%;
        padding: 20px;
    }

    .p-nuzence .advice-1 .advice-title {
        margin-bottom: 0 !important;
    }

    .ingredients-list {
        padding: 0;
    }

    .list-ingredient h4 {
        align-items: flex-start;
    }

    .p-nuzence .advice-4 .linked-product:nth-child(1) {
        top: -150px;
    }

    .p-nuzence .advice-4 .row:last-child .col:nth-child(2) {
        width: 100%;
        padding-bottom: 160px;
    }

    .p-nuzence .advice-4 .linked-product:nth-child(2) {
        bottom: -40px;
        left: 0;
    }

    .p-higiena_brzegow .advice-2 .linked-product {
        margin-top: 30px;
    }

    .p-higiena_brzegow .advice-3 .block {
        margin-bottom: 20px !important;
    }

    .p-higiena_brzegow .advice-1 .col-50 {
        width: 100%;
    }

    .advice-num {
        width: 67px;
    }

    .product-demoxoft-plus-clean .section-3 .col-40 .img {
        max-width: 200px;
        margin: 0 auto;
    }

    .single-product .block-text ul {
        padding: 0;
        list-style: none;
    }

    .seria-maculoft .section-3 .row-bottom .block:nth-child(4) {
        top: auto;
    }

    /* Blog */
    .posts-section .col-80, .posts-section .col-20 {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .posts-index .col figure {
        padding-bottom: 75% !important;
    }

    .verco-banner {
        height: 70vw;
        margin: 0;
    }

    .verco-text img {
        align-self: auto;
    }

    .verco-banner > img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: 100% 50%
    }

    .single-post .breadcrubms-inner {
        flex-direction: row;
    }

    .single-post .start-section {
        padding: 100px 0 0;
    }

    .single-post .start-section .col-left {
        padding: 0 0 30px !important;
    }

    .start-section .share {
        margin-top: 20px;
        text-align: right;
    }

    .single-post .start-section .socials {
        justify-content: flex-end;
    }

    .start-section .col-60 {
        width: 100%;
    }

    .single-post .eye {
        top: 150px;
        width: 170px;
    }

    .post-text {
        font-size: 16px;
    }

    .related {
        padding: 50px 0;
    }

    .related .row-top .btn {
        margin-top: 20px;
    }

    .related .btn-outer {
        justify-content: center;
    }

    /* Produkty */
    .p-produkty .start-section figure {
        padding-bottom: 66% !important;
    }

    .p-produkty .start-content {
        width: 100%;
    }

    .products-section-top {
        align-items: flex-start;
    }

    .products-section .btn {
        margin-top: 20px;
    }

    .partner .post-top .block-text {
        margin-top: 20px;
    }

    /* O Nas */
    .p-kontakt .start-section figure {
        padding-bottom: 66% !important;
    }

    .p-kontakt .about-verco {
        text-align: center;
        padding-bottom: 40px;
    }

    .p-kontakt .block {
        display: block;
    }

    .p-kontakt .block-text {
        padding: 0 !important;
        text-align: left;
    }

    .p-kontakt .values .block-text {
        text-align: center;
    }

    .about-verco .blocks .block .linked-product {
        position: relative;
        right: auto;
        margin-top: -32px;
    }

    .about-verco .block:nth-child(2) .block-text {
        margin-top: 40px;
    }

    .p-kontakt .values .blocks {
        gap: 20px !important;
    }

    .p-kontakt .ellipse {
        width: 150px;
        height: 150px;
        bottom: -20px;
        right: -50px;
    }

    .contact-details {
        text-align: center;
        align-items: center;
    }

    .p-kontakt .carousel .custom-flickity-controls {
        padding: 0 34px;
    }

    section.alert {
        font-size: 1rem !important;
        padding: 5px 0;
    }

    /* Footer */
    footer {
        position: relative;
    }

    .footer-content .container {
        flex-direction: column;
        text-align: center;
    }

    .footer-content .footer-col {
        width: 100%;
    }

    .footer-col {
        margin: 1rem 0;
    }

    footer h4 {
        min-height: auto;
    }

    .footer-content {
        padding-bottom: 20px;
    }

    .footer-logo {
        max-width: 180px;
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .btns {
        flex-direction:column;
    }
}