@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?w4mw59");
    src: url("../fonts/icomoon.eot?w4mw59#iefix") format("embedded-opentype"),
        url("../fonts/icomoon.ttf?w4mw59") format("truetype"),
        url("../fonts/icomoon.woff?w4mw59") format("woff"),
        url("../fonts/icomoon.svg?w4mw59#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "vorwerk-icons";
    src: url("../fonts/vorwerk-icons.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --parnad-header-height: 96px;
}


/* Single offset for all templates — set dynamically in header-tauria.js */
body {
    padding-top: var(--parnad-header-height);
}

/* tmp_Spoznaj_me.php scrolls with Locomotive Scroll, which derives its scroll
   limit from the container's own height alone (offsetHeight - viewport) and
   assumes the container starts at the top of the document. The header offset
   above pushes it down by the header's height, so at maximum scroll the
   container's bottom lands exactly that much BELOW the viewport — the last
   ~160px of the footer can never be reached. Carry the same offset on the
   container itself instead: identical rendering, but now it's part of the
   height Locomotive measures, so the limit lands the bottom edge correctly. */
body.page-template-tmp_Spoznaj_me-php {
    padding-top: 0;
}

body.page-template-tmp_Spoznaj_me-php [data-scroll-container] {
    padding-top: var(--parnad-header-height);
}

#main,
main.l-page,
main.l-single,
.page-wrapper {
    padding-top: 0 !important;
}

main.l-page.product_page.fullwidth_product_page {
    margin-top: calc(0px - var(--parnad-fullwidth-header-gap, 0px));
    transition-property: opacity, visibility;
}

header.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 !important;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.21);
}

/* WP core pushes the whole page down for its own fixed admin toolbar
   (32px desktop, 46px below its 783px breakpoint) via margin-top on html,
   but that doesn't shift OUR OWN position:fixed header — it stays glued to
   the real viewport top and renders behind the (higher z-index) toolbar,
   so for any logged-in editor the header, and therefore the header-height
   measurement everything else's spacing is based on, sits above where it
   visually ends up. Only matters for logged-in views; visitors never see
   the toolbar. */
body.admin-bar header.header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar header.header {
        top: 46px;
    }
}

header.header .custom-logo-link,
header.header .custom-logo-link img {
    width: 100%;
    height: auto;
    display: block;
}

.promo-pasica.active .close-parent .action.close {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.promo-pasica.active .close-parent .action.close::before {
    content: none;
}

.header-wrapper,
.header-mobile-wrapper {
    display: none !important;
}

/*
 * Fix: opening the mobile hamburger menu allowed horizontal scrolling.
 * The off-canvas submenus (nav.main_menu li ul) sit at left:0 and are
 * pushed out of view with transform: translateX(100%) when inactive —
 * that still counts toward the page's scrollable width since nothing
 * clips it. Contain it at the source and add a global safety net.
 */
html,
body {
    overflow-x: clip;
    /* document.documentElement.scrollWidth never actually exceeds
       window.innerWidth here — there is no real overflow content — so the
       "horizontal scroll" some users feel is the OS/trackpad elastic
       rubber-band bounce at the page edge, not genuine overflow. overflow-x
       doesn't govern that at all; overscroll-behavior-x does. */
    overscroll-behavior-x: none;
}

@media only screen and (max-width: 767px) {
    header.header nav.main_menu {
        overflow-x: hidden;
    }
}

/*
 * Fix: search submit button rendered as the browser's native button chrome
 * (gray box, blue tint on Android/Chrome mobile) because nothing reset its
 * default appearance/background/border. It also had no width, so it could
 * overflow the space reserved for it in the input's right padding.
 */
header.header .header_bottom .search_wrap button.icon-search {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Align primary menu to the same .wrap width as header_top (logo / icons). */
header.header nav.main_menu > ul.header_menu,
header.header ul#menu-header-primary-menu {
    padding-left: 0 !important;
    margin: 0;
    list-style: none;
	display: block;
}

@media only screen and (min-width: 768px) {
	header.header nav.main_menu > ul.header_menu,
    header.header ul#menu-header-primary-menu {
        display: flex;
    }
	
    header.header .header_bottom .wrap {
        width: 100%;
        max-width: 1150px;
        margin-left: auto;
        margin-right: auto;
    }

    header.header nav.main_menu {
        width: 100%;
        flex: 1 1 auto;
    }

    header.header nav.main_menu > ul.header_menu {
        width: 100%;
        justify-content: space-between;
    }

    header.header nav.main_menu > ul.header_menu > li > a {
        padding-left: 0;
        padding-right: 0;
    }

    header.header nav.main_menu > ul.header_menu > li:first-of-type > a {
        padding-left: 0;
    }

    /* Match Tauria desktop menu labels: Source Sans Pro, bold, 18px */
    header.header nav.main_menu > ul.header_menu > li > a > span:not(.more):not(.click) {
        font-family: "Source Sans Pro", sans-serif !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        line-height: 1.2;
        color: #4b4a4b;
    }
}

/* The Vorwerk "Official Distributor" badge (another_logo) sits right next to
   the search/login/cart icons with no gap of its own, so it visually crowds
   the last icon. Push the icon group left instead of touching the badge. */
header.header .header_top .right .shop_links_wrap {
    margin-right: 30px;
}

/* The generic .wrap is capped at 1150px (above_the_fold.css / header-tauria.css).
   This selector is far more specific, so it wins on specificity alone and does
   not depend on which stylesheet happens to load last. */
header.header .header_top .wrap {
    max-width: 1520px;
}

/* Submenu cards, matched to the live site.
 *
 * On parnad.si each card is a quarter of the row — `width: calc(25% - 30px)`
 * with `margin: 0 15px` from 768px up — and the card itself is 128px tall with
 * a 2px #b1b2b3 border. This build ships `flex-basis: 30%` and `min-height:
 * 180px`, so the cards come out both wider and noticeably taller.
 *
 * Only the box metrics are copied. Production lays the card out with flex and
 * top padding, while this theme positions .content absolutely at the bottom —
 * bringing that across too would break the card's internals for no visual gain.
 *
 * Selectors carry the header.header prefix purely so they outrank the compiled
 * parnad-theme.min.css rules, whose own selectors are already 4 classes deep.
 */
@media only screen and (min-width: 768px) {
    header.header nav.header-nav ul li .mega-menu .mega-menu-inner ul.sub-menu > * {
        flex-basis: calc(25% - 30px);
        margin: 0 15px;
    }

    header.header nav.header-nav ul li .mega-menu .mega-menu-inner ul.sub-menu li.sub-menu-item a.sub-menu-link {
        min-height: 128px;
        border: 2px solid #b1b2b3;
    }
}