html, body, header, footer, div, p, h1, h2, h3, h4, h5, h6, ul, li {
    margin:0;
    padding:0;
    font-size: 16px;
    font-weight: normal;
    box-sizing: border-box;
    font-family: "Sofia Sans", Arial, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
html {
    overflow-y: scroll;
}
:root {
    --colorLight: #ffffff;
    --colorMedium: #cccccc;
    --colorDark: #000000;
    --backgroundLight: #ffffff;
    --backgroundMedium: #e5e5e5;
    --backgroundDark: #353535;
    --maxwidthParagraph: 800px;
    --maxwidthMinimal: 1200px;
    --maxwidthMedium: 1600px;
    --headerHeight: 68px;
    --paddingSite: 0 16px;
}
@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6R-LCVXSLy9uPBwlATrOF6kg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6R-LCVXSLy9uPBwlATrO96kigt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6R-LCVXSLy9uPBwlATrOJ6kigt.woff2') format('woff2');
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6R-LCVXSLy9uPBwlATrOV6kigt.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6R-LCVXSLy9uPBwlATrOx6kigt.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Sofia Sans';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6T-LCVXSLy9uPBwlATrORKkDAp.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6T-LCVXSLy9uPBwlATrORKnjApcb8.woff2') format('woff2');
    unicode-range: U+0100-02FF, U+1D00-1DBF, U+1E00-1EFF;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6T-LCVXSLy9uPBwlATrORKkzApcb8.woff2') format('woff2');
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6T-LCVXSLy9uPBwlATrORKlDApcb8.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url('/assets/fonts/Yq6T-LCVXSLy9uPBwlATrORKnTApcb8.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

header > div > div:first-child{display:flex;}
.logo{display:inline-flex;}
.logo img{width:100%;max-width:160px}
header {
    width: 100%;
    background-color: var(--backgroundDark);
    height: var(--headerHeight);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding:var(--paddingSite);
}
header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%; /* важно */
    max-width: var(--maxwidthMinimal);
    margin: 0 auto;
}
header nav{height:100%;margin:auto}
.menu {
    list-style: none;
    display: flex;
    gap: 20px;
    height: 100%;
}
.menu-item {
    position: relative;
    height: 100%;
}
.menu-item > a, .menu-item > span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    color: var(--colorLight);
    text-decoration: none;
    cursor:pointer;
}

.menu-item > a:hover, .menu-item > span:hover {
    color: var(--colorMedium);
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--backgroundLight);
    list-style: none;
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid var(--backgroundMedium);
    border-bottom: 4px solid var(--backgroundDark);
    z-index: 999;
}
.menu-item:hover .submenu {
    display: block;
}
.submenu li a {
    display: block;
    padding: 8px 15px;
    color: var(--colorDark);
    text-decoration: none;
    white-space: nowrap;
}

.submenu li a:hover {
    background: var(--backgroundMedium);
}
.lang-switcher{display:flex;gap:10px}
.lang-switcher > *{margin:auto;display: inline-flex;}
.lang-switcher a img{width:24px}
.video-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.video-banner video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1440 / 580;
    object-fit: cover;
}
.video-intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--colorLight);
    text-align: center;
}
.video-intro p {
    font-size: 48px;
    margin-bottom: 10px;
}
.video-intro span {
    font-size: 24px;
}
footer {
    width: 100%;
    background-color: var(--backgroundDark);
    height: var(--headerHeight);
    display: flex;
    padding:var(--paddingSite);
    flex-direction: column;
    height:auto;
}
footer p {
    color: var(--colorLight);
    text-align: center;
    margin: 14px auto 6px auto;
}
footer div{text-align: center;margin-bottom:10px}
.nf-settings-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: var(--colorMedium);
    text-decoration: none;
    cursor: pointer;
}
.nf-settings-link:hover {
    text-decoration: underline;
}
main > div{margin-bottom:80px}
.intro {padding:var(--paddingSite);}
.intro > div{width:100%;max-width: var(--maxwidthParagraph);margin:0 auto;}
.intro h1{font-size: 32px;margin-bottom:44px;text-align: center;}
.intro p{text-align: justify;line-height: 28px;font-size: 18px;}
.productsHome {background: var(--backgroundMedium);padding:var(--paddingSite);}
.productsHome > div{width:100%; max-width: var(--maxwidthMedium);margin:0 auto;}
.productsHome > div > div{padding-bottom:20px;}
.productsHome h2{font-size: 28px;padding:36px 0;text-align: center;}
.product-card{background: var(--backgroundLight);margin-bottom:36px;}
.product-card > div{display:flex;}
.product-card > div > *{width:50%}
.product-card > div > img, .descImg img{
    height: auto;
    display: block;
    aspect-ratio: 800 / 533;
    object-fit: cover;
}
.product-card > div > div{
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
    padding: 0 20px;
}

.product-card:nth-child(even) img{order:2}
.product-card > div > div h3{font-size:24px;margin-bottom:20px;}
.product-card > div > div p{font-size:18px;margin-bottom:30px;}
.product-card > div > div a, .product-card > div > div button{padding:8px 12px;background: var(--backgroundDark);color:var(--colorLight);border:1px solid var(--colorMedium);text-decoration: none;cursor:pointer}
.product-card > div > div a:hover, .product-card > div > div button:hover{background: var(--colorMedium);color:var(--colorDark);border:1px solid var(--colorDark)}
.catalogueHome{width:100%;position:relative}
.catalogueHome img{width:100%}
.catalogueHome > div{position:absolute;top: 50%;left: 0;transform: translate(0, -50%);width:100%}
.catalogueHome > div > div{margin:auto;width:100%;max-width:var(--maxwidthMinimal);display:flex;}
.catalogueHome > div > div > div{background: rgba(255, 255, 255, 0.5);backdrop-filter: blur(6px);padding:20px;}
.catalogueHome h4{color:var(--colorDark);font-size: 26px;margin-bottom:16px;}
.catalogueHome p{color:var(--colorDark);font-size: 18px;margin-bottom:24px;}
.catalogueHome a{padding:8px 12px;background: var(--backgroundDark);color:var(--colorLight);border:1px solid var(--colorMedium);text-decoration: none;}
.catalogueHome a:hover{background: var(--colorMedium);color:var(--colorDark);border:1px solid var(--colorDark)}
.servicesHome{width:100%;padding:var(--paddingSite);}
.servicesHome > div{margin:0 auto;width:100%;max-width:var(--maxwidthMinimal)}
.servicesHome > div > div{display:flex;}
.service-card{width:25%;border-right:1px solid var(--colorMedium);padding:20px;text-align: center;display: flex;} 
.service-card:last-child{border-right:none}
.service-card a {text-decoration: none;color:var(--colorDark);display: flex;flex-direction: column;flex:1;}
.service-card a h5{margin-bottom:20px;}
.service-card a span{font-size:12px;margin-top: auto;}
.service-card a img{width:100%;max-width:80px;margin:0 auto 10px auto;opacity:0.9}
#mobile, #mobileMunu{display:none;}
.topM{margin-top:80px}
.mapC {
    width: 100%;
    max-width: var(--maxwidthMinimal);
    margin: 0 auto 80px auto;
    display:flex;
    padding:var(--paddingSite)
}
#sidebar{width:100%; max-width: 320px;padding: 0 10px 0 20px;margin-right:10px;}
#sidebar select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--colorMedium);
}
#addressList{height:480px;overflow-x: auto;overflow-y: scroll;}
#sidebar ul li{list-style: none;padding: 16px 10px 36px 10px;margin-bottom:10px;}
#sidebar ul li:hover{background: var(--backgroundMedium);}
.detailsBox{height:525px;}
.detailsBox a{text-decoration: none; color:var(--colorDark)}
.detailsBox a:hover{text-decoration: underline;}
#map{width:100%}
.showMoreBtn, #closeDetails, form button{
    padding: 8px 12px;
    background: var(--backgroundDark);
    color: var(--colorLight);
    border: 1px solid var(--colorMedium);
    cursor:pointer;
    float: right;
}
.showMoreBtn:hover, #closeDetails:hover, form button:hover {
    background: var(--colorMedium);
    color: var(--colorDark);
    border: 1px solid var(--colorDark);
}
.notFound {
    width: 100%;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.notFound h1 {
    font-size: 120px;
    font-weight: 700;
    color: var(--colorDark);
    margin: 0 0 20px 0;
}

.notFound p {
    font-size: 26px;
    margin-bottom: 10px;
}

.notFound span {
    font-size: 18px;
    color: var(--colorMedium);
}

.notFound small {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    color: var(--colorDark);
}

.notFound a {
    margin-top: 30px;
    padding: 8px 12px;
    background: var(--backgroundDark);
    color: var(--colorLight);
    border: 1px solid var(--colorMedium);
    cursor:pointer;
    text-decoration: none;
}

.notFound a:hover {
    background: var(--colorMedium);
    color: var(--colorDark);
    border: 1px solid var(--colorDark);
}
.pdf-container{width:100%}
.pdf-container > div{
    padding:0 26px;
    width:100%;
    max-width: var(--maxwidthMinimal);
    margin:0 auto;
}
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}
.modal-content {
    position: relative;
    margin: 3% auto;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 60px 20px 10px 20px;
}
#gdprModal .modal-content{
    display: flex;
    flex-direction: column;
    padding: 0;
}
.close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
}
#closeGdprBtn{
    position: sticky;
    align-self: flex-end;
}
#modalGdprViewer {
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 20px;
    flex: 1;
    padding:20px;
}
.contentUslovia h2 {font-weight: bold;font-size: 22px;}
.contentUslovia h3 {font-weight: bold;font-size: 18px;}
.contentUslovia ol, .contentUslovia ul{padding:0 30px}
.contentUslovia li, .contentUslovia h2, .contentUslovia h3, .contentUslovia p{margin:0 0 10px 0}
.contentUslovia ol > li {margin: 0 0 20px 0}
.form {width: 100%;}
.form > div{width:100%;max-width: var(--maxwidthMinimal);margin:0 auto;padding:var(--paddingSite)}
.form > div form{width:100%; max-width:400px;margin:0 auto;display:flex;flex-direction: column;gap:12px}

.form > div form input:not(#gdpr), .form > div form textarea{width:100%;border:1px solid var(--colorMedium);font-family: "Sofia Sans", Arial, sans-serif;font-size: 16px;padding: 10px;box-sizing: border-box;} 
.form > div form input + label, .form > div form textarea + label {
        position: absolute;
        left: 60px;
        top: -32px;
        background: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 13px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
        transform-origin: top;
    }
.form > div form > div{position: relative;}
.form > div form input:hover + label,
.form > div form textarea:hover + label,
.form > div form input:hover + label,
.form > div form textarea:hover + label {opacity: 1;transform: translateX(-46px) translateY(0);}
.form form .checkbox {display:flex;align-items: center;gap:10px;}
.form form .checkbox label input, .form form .checkbox b{cursor:pointer}
.form form .captcha {display: flex;gap: 10px;}
.form form #formResponse .error {color: red;}
#formResponseSuccess{width:100%;max-width:400px;margin:0 auto;text-align: center;padding:20px 0;}
#formResponseSuccess .success {color: green;text-align: center;font-size: 18px;}

.contactData {width:100%; padding: var(--paddingSite)}
.contactData > div{width:100%; max-width: var(--maxwidthMinimal);margin:0 auto; text-align: center;display:flex;gap:20px;justify-content: center;}
.contactData > div > div{padding:20px;text-align: left;border:1px solid var(--colorMedium);border-radius:8px;width:100%; max-width: 340px; display:flex; flex-direction:column;gap:20px;}
.contactData p{display:flex;flex-direction: column;gap:4px;text-transform: uppercase;color:var(--backgroundDark);font-size: 14px;}
.contactData p span:not(:first-child){color:var(--colorDark);text-transform: none;font-size: 16px;}
.contactData p a{text-transform: none;text-decoration: none;color:var(--colorDark);font-size: 16px;}

.prodContent{width:100%;padding:var(--paddingSite);max-width: var(--maxwidthMinimal);margin:80px auto;display:flex;gap:40px}
.prodContent > div {width: 50%;}
.main-image a{display:flex;aspect-ratio: 640 / 480;}
.main-image img{width:100%;border: 1px solid var(--colorMedium);height: auto;display: block;}
.additional-images{margin-top:20px;display:flex;gap:20px;flex-wrap:wrap}
.additional-images a{display:block}

.additional-images img{border: 1px solid var(--colorMedium);width: 100%;height: auto;display: block;aspect-ratio: 1 / 1;box-sizing: border-box;}

.right h1{font-size: 32px;margin-bottom:20px}

.btu-selector {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.btu-selector button, p.buy a {
    padding:8px 12px;
    background: var(--colorMedium);
    color:var(--colorDark);
    border:1px solid var(--colorDark);
    text-decoration: none;
    cursor:pointer
}

.btu-selector button:hover, .btu-selector button.active, p.buy a{
    background: var(--backgroundDark);
    color:var(--colorLight);
    border:1px solid var(--colorMedium)
}
.btu-selector button.active:hover{
    background: var(--backgroundDark);
    color:var(--colorLight);
    border:1px solid var(--colorMedium)
}
p.buy a:hover{
    background: var(--colorMedium);
    color:var(--colorDark);
    border:1px solid var(--colorDark);
}
.right .models h2{font-size: 24px;margin-bottom:40px}
.right p.icons {display: flex;gap:10px;margin-bottom:20px}
p.icons img {width: 100px;}
p.icons span{display:inline-flex;align-items: center;cursor:pointer}
p.priceText{font-size: 18px;margin-bottom:10px;margin-top: 40px;}
p.price{font-size: 38px;font-weight: bold;margin-bottom:20px;color:var(--colorDark)}
p.buy{margin-bottom:40px}
p.productManuals{display:flex;flex-wrap:wrap;}
p.productManuals span{display:inline-flex;width:50%;box-sizing: border-box;padding:0 10px;cursor:pointer;margin-bottom:20px; text-decoration: underline;}

.description {background: var(--backgroundMedium);padding:var(--paddingSite);}
.description h2{font-size: 28px;padding:36px 0;text-align: center;}
.description > div{width:100%; max-width: var(--maxwidthMedium);margin:0 auto;padding-bottom: 40px;}
.description > div div{display:flex}
.description > div > div{background: var(--backgroundLight);margin-bottom:36px;}
.description > div > div > *{width:50%}
.description .descText{
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
    padding: 20px;
}
.description .descText h3{font-size:24px;margin-bottom:20px;}
.description .descText p{font-size:18px;margin-bottom:30px;}
.description > div > div:nth-child(even) .descImg{order:2}
.descImg img {width:100%}
.technical {padding:var(--paddingSite);}
.technical h2{font-size: 28px;padding:36px 0;text-align: center;}
.technical .btu-selector.second-selector {text-align: center;margin: 0 auto 40px auto;justify-content: center;}
.technical table{width:100%;max-width: var(--maxwidthParagraph);margin:0 auto;border-collapse: collapse;border:1px solid var(--colorMedium);}
.technical table td{border:1px solid var(--colorMedium);padding: 8px 12px;;font-size: 16px;}
.technical table tr:nth-child(odd){background: var(--backgroundMedium)}
/* Бял фон на галерията */
.lg-backdrop,.lg-toolbar {
    background-color: #fff !important;
}

/* Цвят на всички иконки */
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-close,
.lg-fullscreen,
#lg-counter,
.lg-zoom-in,
.lg-zoom-out {
    color: #353535 !important;
}

/* Hover – по-светъл сив */
.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover,
.lg-close:hover,
#lg-counter:hover,
.lg-fullscreen:hover,
.lg-zoom-in:hover,
.lg-zoom-out:hover {
    color: #666 !important;
}

.lg-actions .lg-next, .lg-actions .lg-prev{
    background-color: unset !important;
}
.lg-actions .lg-next,
.lg-actions .lg-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.lg-sub-html{color:#000 !important}
.nf-bubble {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #2b2b2b;
    color: #fff;
    padding: 12px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: all 0.3s ease;
}

.nf-bubble:hover {
    background: #3a3a3a;
}

.nf-panel {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    display: none;
    z-index: 9999;
}

.nf-panel h3 {
    font-size: 18px;
}
#nfPanel > p {
    margin-top: 20px;
}
.nf-check {
    display: flex;
    align-items: center;
    margin: 15px 0;
    font-size: 15px;
}

#nfSave {
    width: 100%;
    padding: 10px;
    background: #2b2b2b;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
}

#nfSave:hover {
    background: #3a3a3a;
}
.zIntro{width:100%;background: #e8e0dd;}
.zIntro > div{width:100%;max-width:var(--maxwidthMinimal);display:flex;margin:0 auto}
.zIntrol {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    gap:30px;
    width:34%;
    padding:20px;
}
.zIntrol h1{font-size: 40px;}
.zIntrol h2{font-size: 24px;}
.zIntrol p{font-size: 18px; line-height: 22px;color:var(--backgroundDark)}
.zIntror{width:66%;display:flex;aspect-ratio: 800 / 533;}
.zIntror img{width:100%; height:auto;display:block}
.zIntroSec.catalogueHome > div > div > div{width:50%}
.zIntroTr .service-card div {text-decoration: none;color:var(--colorDark);display: flex;flex-direction: column;flex:1;}
.zIntroTr .service-card div h5{margin-bottom:20px;}
.zIntroTr .service-card div span{font-size:12px;margin-top: auto;}
.zIntroTr .service-card div img{width:100%;max-width:80px;margin:0 auto 10px auto;opacity:0.9}
.zIntroTrTitle {margin-bottom: 20px;}
.zIntroTrTitle h3{width:100%;max-width:var(--maxwidthMinimal);font-size:24px;margin:0 auto;padding: 0 0 0 40px;}
.garan img{width:220px;border: 1px solid var(--colorMedium);cursor:pointer}
.garanImage {width: 100%;}
.garanImage > div {width: 100%;max-width: var(--maxwidthParagraph);margin: 0 auto;padding: 0 20px;}
.garanImage > div img{width:100%;border:1px solid var(--colorDark);}
.garanOutro p{text-align: center;}
.garanOutro p a{color: var(--colorDark);}
@media (max-width: 1024px) {
    #mobile {
        width: 32px;
        height: 32px;
        display: inline-block;
        cursor: pointer;
        position: relative;
    }
    
    header nav {
        position: fixed;
        top: 0;
        left: -41%;
        width: 40%;
        height: 100vh;
        background: var(--backgroundMedium);
        transition: none; 
        z-index: 999;
        box-sizing: border-box;
        backface-visibility: hidden;
        transform: translateZ(0);

    }
        header nav.open {
        left: 0;

    }
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease;
        z-index: 998; /* под менюто (999), над всичко друго */
    }

    #overlay.open {
        opacity: 1;
        visibility: visible;
    }
    #mobileMunu{
        display:flex;
        height:var(--headerHeight);
        background: var(--backgroundDark);
        padding:0 10px;
        justify-content: space-between;
    }
    #mobileMunu > * {margin:auto 0}
    #menuClose {
        width: 36px;
        height: 36px;
        display: inline-block;
        cursor: pointer;
        position: relative;
    }

    #menuClose::before {
        content: "";
        width: 36px;
        height: 36px;
        display: block;
        background: url("/images/icon-close.svg") center/30px no-repeat;
    }
    #mobileMunu span{color:var(--colorLight);font-size: 24px;}
    header nav ul.menu{
        flex-wrap:wrap;
        gap:unset;
        padding:40px 20px;
        overflow-y: auto;
        overflow-x: hidden;
        display:block
    }
    header nav ul.menu > li{
        width:100%;
        color:var(--colorDark);
        font-size: 20px;
        height: auto;
        border-bottom:1px solid var(--colorMedium)
    }
    header nav ul.menu > li:last-child{margin-bottom:60px;}
    header nav ul.menu > li:hover{background: var(--backgroundDark);}
    header nav ul.menu > li:hover span{color:var(--colorLight)}
    header nav ul.menu > li > a, header nav ul.menu > li > span{
        color:var(--colorDark);
        width:100%;
        display: inline-flex;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 10px;
    }
    header nav ul.menu > li > a:hover, header nav ul.menu > li > span:hover{
        color:var(--backgroundMedium);
        background: var(--backgroundDark);
    }
    header nav ul.menu > li > span:after{
        content:'+';
        font-size: 28px;
        line-height: 18px;
        display: inline-block;
        transition: transform .3s ease;
    }
    header nav ul.menu > li > span.opensubicon:after {
        transform: rotate(45deg);
    }
    .open .submenu, .menu-item:hover .submenu{display:none;}
    .open .submenu.opensub{display:block;position:relative;border-bottom:none}
    .open .submenu.opensub li{padding:0 10px;}
    .open .submenu.opensub li > a{border-bottom:1px solid var(--backgroundMedium);padding:8px}
    .mapC{flex-direction: column;}
    #sidebar {width:100%;order:5;max-width: none;margin-top:40px;}
    #map{height:400px}
    #addressList {height: 300px;}
    .detailsBox{height:auto}
    .product-card > div > div button{display:flex;flex-direction:column;gap:10px;margin-top:20px}
    .additional-images {gap:10px}
    .additional-images img{max-width: 100px;}
    .nf-panel {
        width: calc(100% - 40px); /* винаги остава в екрана */
        left: 20px;
        right: 20px; /* за landscape */
        bottom: 20px;
        max-height: 70vh; /* да не излиза нагоре */
        overflow-y: auto; /* скрол ако е нужно */
    }
    .zIntrol, .zIntror{width:50%;}
    .zIntror img{object-fit: cover;}
    .zIntroSec.catalogueHome img {
        height: 400px;
        object-fit: cover;
    }
}
@media (max-width: 768px) {
    header nav {
        left: -86%;
        width: 85%;
    }
    .video-banner video{
        object-fit: cover;
        min-height: 400px;
    }
    .video-intro{
        left:0;
        transform: translate(0, -50%);
        right:0;
    }
    .video-intro p{
        font-size: 32px;
        line-height: 34px;
        margin-bottom: 30px;
    }
    .video-intro span{
        font-size: 22px;
    }
    .product-card > div{
        flex-direction: column;
    }
    .product-card > div > *{
        width:100%;
        order:0;
    }
    .product-card:nth-child(even) img{
        order:0;
    }
    .product-card > div > div{
        padding:40px 20px;
    }
    .servicesHome > div > div{
        flex-wrap: wrap;
    }
    .service-card{
        width:50%;
    }
    .service-card:nth-child(-n + 2) {
        margin-bottom: 40px;
    }
    .service-card:nth-child(odd) {
        border-right: 1px solid var(--colorMedium);
    }
    .service-card:nth-child(even) {
        border-right: none;
    }
    .logo img{max-width:120px}
        .catalogueHome img {
        height: 300px;
        object-fit: cover;
    }
    .prodContent{flex-direction: column;gap:20px;margin:40px auto}
    .prodContent > div {width: 100%;}
    .left{order:2}
    .description > div > div{flex-direction: column;gap:20px}
    .description > div > div > *{width:100%}
    .description > div > div:nth-child(even) .descImg{order:0}
    .zIntro > div{flex-direction: column;gap:20px}
    .zIntrol, .zIntror{width:100%;}
    .zIntrol{order:2;}
    .zIntroSec.catalogueHome > div > div > div{width:100%;}
    .contactData > div{flex-direction: column;}
    .contactData > div > div{margin:0 auto}
    p.icons img{width:80px}
}