/* Header-top megjelenésének igazítása a nyitólapi (manufacturer sablon) #sp-header stílusához: */
/* áttetsző, elmosott hátterű ("frosted glass") sáv kemény árnyék helyett. */
.header-top {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
    border-bottom: 1px solid rgba(29, 29, 29, 0.2);
}

.header-fixed .affix-on-scroll .header-top {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Magasság igazítása az sp-header 60px-es magasságához (border-box, az */
/* 1px aljvonallal együtt, ahogy az sp-header#height:60px is számolja). */
#vpf-header .inner-container {
    padding: 0;
   /* margin: 0 -8px!important;*/
}

.header-top {
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.header-top .row.row-condensed {
    display: flex;
    align-items: center;
}


.header-top .item-141 .row.row-condensed {
    display: block;
    align-items: center;
}



.header-top .site-logo {
    display: block;
    max-height: 36px;
    width: auto;
}

/* A globális .brand{margin:20px 0 0} szabály a régi, nem-flex elrendezéshez */
/* készült; a flex-es középre igazítással együtt feleslegesen megnövelte a */
/* fejléc magasságát (63-64px-re) - nullázva pontosan 60px lesz a végeredmény. */
.header-top .brand,
.header-top .header-add-margin,
.header-top .last-group {
    margin-top: 0;
}

/* A logó/menü blokkok méretét a nyitólapi sp-header ténylegesen mért */
/* méreteire állítjuk (a Bootstrap oszlópszélességek/col-md-3/6/3 helyett): */
/* a logó doboz kívülről 337.5px (border-box), 0 15px paddinggel - a */
/* .row-condensed által adott 10px "gutter" helyett -, ami 307.5px belső */
/* tartalom-szélességet ad, megegyezően az sp-logo-val. */
.header-top .row.row-condensed > .vpf-logo {
    flex: 0 0 337.5px;
    width: 337.5px;
    max-width: none;
    height: 60px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.header-top .row.row-condensed > .header-add-margin {
    flex: 0 0 941.47px;
    width: 941.47px;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
}

/* Maga a menülista (.sp-megamenu-parent megfelelője a webshopon) legyen */
/* pontosan 941.47px, megegyezően a nyitólapi méréssel - a webshop */
/* menüpontjainak paddingje (12px) miatt a lista természetes szélessége */
/* enélkül nem egyezne pontosan a nyitólapéval. */
.header-top .navbar-nav {
    width: 941.47px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top:-5px;
}



/* justify-content:space-between helyett explicit margóval osztjuk el a */
/* helyet a menüpontok között - a böngésző a space-between-et 9 egyenlő */
/* résre bontotta (a széleken is), nem a specifikáció szerinti 7 belső */
/* résre, ezért kiszámolt fix margóval kényszerítjük ki az sp-header-hez */
/* hasonló, a szélekhez flush illeszkedő elosztást. */
.header-top .navbar-nav > li {
    float: none;
    margin: 0 6.854px 0 0;
}

.header-top .navbar-nav > li:last-child {
    margin-right: 0;
}

.header-top .row.row-condensed > .last-group {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

/* Szélesség igazítása: az sp-header tartalma ténylegesen max. 1350px-re */
/* van korlátozva (a manufacturer sablon compiled CSS-ében egy második, */
/* később betöltött .container szabály 1350px-re írja felül az 1140px-es */
/* Bootstrap-alapértelmezést), míg a header-top eddig teljes szélességben */
/* (container-fluid) futott ki. */
.header-top .container-fluid {
    width: 100%;
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Betűtípus igazítása: a webshop eddig a Google "Open Sans"-t töltötte be, */
/* a nyitólap (manufacturer sablon) viszont nem tölt be egyedi webfontot, */
/* a böngésző/OS rendszerbetűtípusát használja (Bootstrap 5 alapértelmezés). */
/* Az ikonbetűtípusokat (fa, VPFrameworkIcon) ez nem érinti, mert azok */
/* saját font-family-t deklarálnak, ami felülírja az öröklött értéket. */
.header-top {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Szín igazítása: a menüpontok eddig mindig #333-mal jelentek meg, hover/ */
/* aktív állapotban pedig egy fehér/fekete csík jelezte a kijelölést, ami */
/* fehér fejlécen gyakorlatilag láthatatlan volt. A nyitólap dizájnjában */
/* használt narancs kiemelőszín és a márka szivárvány-színátmenet most a */
/* webshop fejlécén is megjelenik az aktív menüpontnál. */
/* (!important szükséges: a vpframework system plugin a themes/default.css */
/* fájlt futásidőben, a mi CSS-ünk UTÁN fűzi be, azonos specificitással.) */
.header-top .navbar-nav > li > a,
.header-top .navbar-nav > li > span {
    color: #252525 !important;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.5;
}

.header-top .navbar-nav > li:hover > a,
.header-top .navbar-nav > li:focus > a,
.header-top .navbar-nav > li:hover > span,
.header-top .navbar-nav > li:focus > span,
.header-top .navbar-nav > li.open > a,
.header-top .navbar-nav > li.open > span,
.header-top .navbar-nav > li.active > a,
.header-top .navbar-nav > li.active > span {
    color: #252525 !important;
    opacity: 1;
}

.header-top .navbar-nav > li > a:after,
.header-top .navbar-nav > li > span:after,
.header-top .navbar-nav > li.active > a:after,
.header-top .navbar-nav > li.active > span:after,
.header-top .navbar-nav > li.open > a:after,
.header-top .navbar-nav > li.open > span:after {
    background-color: #e94b26;
}

.header-top .navbar-nav > li.active > a,
.header-top .navbar-nav > li.active > span {
    background: linear-gradient(135deg, #fde402, #ec673c, #b24a95, #3e7bbe) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Hamburger ikon (mobil offcanvas-nyitó) igazítása a nyitólap (manufacturer) */
/* #offcanvas-toggler-éhez: az fa-2x miatt eddig jóval nagyobb volt és a */
/* .offcanvas-toggle-container top:50%;margin-top:-14px pozicionálása miatt */
/* lentebb ült, mint a manufacturer 20px-es, header-hez képest középre */
/* igazított ikonja - emellett sima szürke volt a márka-gradiens helyett. */
.navbar-toggle.vpf-offcanvas-toggle {
    margin: -15px 0 0 0;
}
.vpf-offcanvas-toggle .fa {
    font-size: 20px !important;
    background: linear-gradient(135deg, #fde402, #ec673c, #b24a95, #3e7bbe) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}