/* Konfigurátor gomb - fejléc (asztali + sticky) és mobil menü
   A gomb maga a site saját ".theme-btn.btn-style-four" stílusát használja
   (ugyanaz, mint pl. a grill-elem.html adatlap "Telepítés / Forgalmazók" gombjai) */

.nav-outer{
    display:flex;
    align-items:flex-start;
}
.konfigurator-btn-box{
    margin-left:30px;
    margin-top:27px;
}
.konfigurator-btn-box .theme-btn{
    margin-bottom:0;
}
.konfigurator-btn-box .btn-title{
    padding:8px 22px;
    font-size:16px;
}
.sticky-header .konfigurator-btn-box{margin-left:25px;}

/* Hosszú a menülista, ezért itt hamburger menüre váltunk, hogy a logó +
   menü + Konfigurátor gomb sose törjön/csússzon szét. FONTOS: ez a törés
   valós Safari-ban hamarabb bekövetkezik, mint amit ez a fejlesztői
   böngésző (Chromium) szimulációval mutat - egy 1468px logikai
   ablakszélességű valós Mac képernyőn is törött. Mivel viszont a
   legtöbb mai laptop logikai szélessége is kb. 1280-1512px körül van,
   a hamburgert csak a valóban keskeny (≤1300px) tartományra korlátozzuk,
   1301-1600px között pedig egy összébb húzott (kisebb betűméretű,
   szűkebb margójú) teljes menüt mutatunk, ami már beférjen ilyen
   szélességeknél is. */
@media only screen and (max-width:1300px){
    .main-header .nav-outer .main-menu{
        display:none !important;
    }
    /* A téma saját responsive.css-e 1139px alatt teljesen kikapcsolja
       a sticky headert (display:none), így mobilon görgetéskor az
       egész fejléc (a Konfigurátor gombbal együtt) eltűnt. Itt
       visszakapcsoljuk - a láthatóságot (opacity/visibility) továbbra
       is a script.js-es "fixed-header" osztály vezérli, ugyanúgy mint
       asztali nézetben. */
    .main-header .sticky-header{
        display:block !important;
    }
    .nav-outer .mobile-nav-toggler{
        display:block !important;
        order:2;
    }
    /* A gomb mostantól nem tűnik el mobil/tablet nézetben, hanem
       kis méretben a hamburger menü ikon mellett marad látható a
       fejléc sávjában (nem csak a kicsúszó menüben). A logó és a
       nav-outer alapból float-tal van egymás mellé rakva a témában -
       ha a kettő együtt szélesebb, mint a konténer, a float automatikusan
       új sorba töri a nav-outer-t (ez történt valós telefonon). Flexbe
       tesszük a szülőt, hogy biztosan egy sorban maradjanak. */
    .header-upper .inner-container,
    .sticky-header .inner-container{
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:nowrap;
    }
    /* A téma "clearfix" trükkje (:after{content:"";display:block}) a
       float-os elrendezéshez kellett - flexben viszont ez egy láthatatlan
       harmadik flex-elemként viselkedik, ezért a "space-between" a logó +
       nav-outer helyett 3 elemet oszt szét, és a nav-outer a jobb szél
       helyett középre csúszik. Flexben már nincs szükség a clearfixre. */
    .header-upper .inner-container:after,
    .sticky-header .inner-container:after{
        content:none !important;
    }
    .header-upper .logo-box,
    .sticky-header .logo-box{
        float:none;
        flex:0 0 auto;
    }
    .nav-outer{
        float:none;
        flex:0 0 auto;
        align-items:center;
    }
    .konfigurator-btn-box{
        display:flex !important;
        align-items:center;
        margin-left:10px;
        margin-top:0;
        order:1;
    }
    .konfigurator-btn-box .theme-btn{
        margin-bottom:0;
    }
    .konfigurator-btn-box .btn-title{
        padding:6px 12px;
        font-size:12px;
    }
}

/* Keskeny telefonokon (kb. 575px alatt) a logó (194px, fix méret) +
   gomb + hamburger együtt túl szoros volt - valós készüléken (nem csak
   az asztali böngésző mobil-szimulációjában) ez néhol két sorba törte
   a fejlécet (logó fent, gomb+hamburger alul). Itt kicsit kisebbre
   vesszük a logót és még kompaktabbra a gombot, hogy biztosan
   elférjenek egy sorban. */
@media only screen and (max-width:575px){
    .header-upper .logo-box .logo img,
    .sticky-header .logo-box .logo img{
        width:150px;
        height:auto;
    }
    .konfigurator-btn-box{
        margin-left:8px;
    }
    .konfigurator-btn-box .btn-title{
        padding:5px 10px;
        font-size:11px;
    }
}

/* 1301-1700px között a teljes (nem hamburger) menü látszik. A téma
   a fejléc konténerét (.auto-container) mindenhol 1200px-re korlátozza,
   FÜGGETLENÜL attól, hogy az ablak ennél szélesebb - vagyis eddig a
   menü egy feleslegesen szűk, 1200px-es dobozba lett bezsúfolva akkor
   is, ha 1301-1700px közötti szélesebb ablak volt. Itt felszabadítjuk
   ezt a konténert (a teljes ablakszélességet használja), és csak egy
   alig észrevehető, apró térköz-csökkentést hagyunk biztonsági
   tartaléknak (a valós Safari-s törés miatt) - nem kicsinyített betűt
   és nem összezsúfolt menüt. */
@media only screen and (min-width:1301px) and (max-width:1700px){
    .header-style-two .header-upper .auto-container,
    .header-style-two .sticky-header .auto-container{
        max-width:none;
    }
    .main-menu .navigation{
        margin-left:20px;
    }
    .main-menu .navigation>li{
        margin-right:32px;
    }
    .main-menu .navigation>li>a{
        font-size:16px;
    }
    .konfigurator-btn-box{
        margin-left:20px;
    }
    .konfigurator-btn-box .btn-title{
        padding:8px 20px;
        font-size:16px;
    }
}

/* Mobil menü CTA - ugyanaz a méret/rádiusz mint az asztali gombnál,
   csak fehér alapszín, a barna hover a theme-btn.btn-style-four saját
   beépített hover-effektjéből jön (ugyanaz mint a többi gombnál) */
.mobile-konfigurator-box{
    position:relative;
    padding:0 25px 35px;
    text-align:center;
}
.mobile-konfigurator-box .theme-btn{
    margin-bottom:0;
}
.mobile-konfigurator-box .theme-btn.btn-style-four{
    background-image:none;
    background-color:#ffffff;
}
.mobile-konfigurator-box .btn-title{
    padding:8px 22px;
    font-size:16px;
    color:#212121;
}
.mobile-konfigurator-box .theme-btn.btn-style-four:hover .btn-title{
    color:#ffffff;
}

/* Termékoldal jobb oldali "Hasznos információk" doboz (widget_contact)
   - fotó háttér + sötétítő overlay a jobb olvashatóságért
   - cím + réz alávonás
   - a gombok alap állapotban is látszódjanak a fotón (félig átlátszó keret/háttér) */
.widget_contact{
    overflow:hidden;
}
.widget_contact:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,13,11,0.62) 0%, rgba(15,13,11,0.72) 45%, rgba(15,13,11,0.92) 100%);
}
.widget_contact .widget-content{
    position:relative;
    z-index:1;
}
.widget_contact .widget-content-title{
    color:#ffffff;
    font-size:20px;
    font-weight:600;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin:0 0 26px;
}
.widget_contact .widget-content-title:after{
    content:"";
    display:block;
    width:36px;
    height:2px;
    background:#B87333;
    margin:14px auto 0;
}
.widget_contact .widget-content-buttons{
    display:grid;
    grid-template-columns:max-content;
    justify-content:center;
    row-gap:16px;
    max-width:100%;
}
.widget_contact .link-btn{
    display:block;
    text-align:center;
    max-width:100%;
}
.widget_contact .link-btn .theme-btn{
    display:inline-flex;
    width:100%;
    max-width:100%;
}
.widget_contact .btn-style-four .btn-title{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 20px;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.2px;
    white-space:nowrap;
    text-transform:none;
    background-color:#ffffff;
    border:none;
    border-radius:8px;
    color:#212121;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    transition:transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.widget_contact .btn-style-four .btn-title i{
    position:static;
    top:0;
    display:inline-flex;
    align-items:center;
    line-height:1;
    margin-right:0;
    margin-left:0;
    font-size:17px;
    color:#B87333;
    transition:color 0.25s ease;
}
.widget_contact .btn-style-four:hover .btn-title{
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(0,0,0,0.28);
    background-color:#B87333;
    color:#ffffff;
}
.widget_contact .btn-style-four:hover .btn-title i{
    color:#ffffff;
}
.widget_contact .btn-style-four .btn-title:before{
    display:none;
}