/* =========================================================
   APOLL HEADER — configurable desktop menu
   PrestaShop 1.7.8.x / AngarTheme

   - Normal document flow
   - NOT fixed / NOT sticky
   - Own APOLL navigation
   - Search expands LEFT over navigation
   - Search never overlaps search button
   - Original AngarTheme desktop header hidden by CSS when APOLL markup exists
   - Original AngarTheme mobile header preserved
   ========================================================= */


/* =========================================================
   VARIABLES / SHELL
   ========================================================= */

.apoll-header-shell {
    --ah-accent: #e94e36;
    --ah-dark: #15161a;
    --ah-white: #ffffff;
    --ah-glass: rgba(235, 235, 235, 0.92);

    --ah-width: 1170px;
    --ah-height: 78px;
    --ah-button: 50px;
    --ah-cut: 18px;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 100 !important;

    display: none;

    width: 100% !important;
    height: auto !important;

    margin: 20px 0 28px !important;
    padding: 0 20px !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;

    pointer-events: none !important;

    font-family: 'Fixel', Arial, Helvetica, sans-serif !important;
}


html.apoll-header-ready .apoll-header-shell {
    display: block !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.apoll-header-shell .apoll-header {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: var(--ah-width) !important;
    height: var(--ah-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    pointer-events: auto !important;
}


/* =========================================================
   GLASS / GEOMETRY
   ========================================================= */

.apoll-header-shell .apoll-header__glass {
    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--ah-glass) !important;

    border: 1px solid rgba(255, 255, 255, 0.70) !important;

    box-shadow: none !important;

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--ah-cut)),
        calc(100% - var(--ah-cut)) 100%,
        var(--ah-cut) 100%,
        0 calc(100% - var(--ah-cut))
    );

    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);

    box-sizing: border-box !important;

    pointer-events: none !important;
}


/* =========================================================
   INNER
   ========================================================= */

.apoll-header-shell .apoll-header__inner {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 22px !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* =========================================================
   LOGO
   ========================================================= */

.apoll-header-shell .apoll-header__brand {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    height: 100% !important;

    margin: 0 44px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


.apoll-header-shell .apoll-header__logo-link {
    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    text-decoration: none !important;
}


.apoll-header-shell .apoll-header__logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 145px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: contain !important;
}


.apoll-header-shell .apoll-header__logo-text {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ah-dark) !important;

    font-family: 'Fixel', Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.apoll-header-shell .apoll-header__nav {
    position: relative !important;

    z-index: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    overflow: visible !important;
}


.apoll-header-shell .apoll-header__menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 auto !important;

    width: auto !important;
    height: 100% !important;

    gap: 25px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    list-style: none !important;

    overflow: visible !important;
}


.apoll-header-shell .apoll-header__menu-item {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    list-style: none !important;
}


.apoll-header-shell .apoll-header__menu-link {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    color: var(--ah-dark) !important;

    font-family: 'Fixel', Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    transition: color 160ms ease !important;
}


.apoll-header-shell .apoll-header__menu-link:hover {
    color: var(--ah-accent) !important;

    background: transparent !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}


.apoll-header-shell .apoll-header__menu-link:focus,
.apoll-header-shell .apoll-header__menu-link:active,
.apoll-header-shell .apoll-header__menu-link:focus-visible {
    color: var(--ah-dark) !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   MENU CHEVRONS
   ========================================================= */

.apoll-header-shell .apoll-header__menu-chevron {
    position: static !important;

    display: block !important;

    flex: 0 0 9px !important;

    width: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;

    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;

    margin: 1px 0 0 0 !important;
    padding: 0 !important;

    color: currentColor !important;

    overflow: visible !important;

    transform: none !important;

    transition: transform 160ms ease !important;

    pointer-events: none !important;
}


.apoll-header-shell .apoll-header__menu-chevron path {
    fill: none !important;
    stroke: currentColor !important;
}


/* =========================================================
   ACTIONS
   IMPORTANT:
   Above navigation so opened search covers menu text.
   ========================================================= */

.apoll-header-shell .apoll-header__actions {
    position: relative !important;

    z-index: 50 !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    height: var(--ah-button) !important;

    gap: 2px !important;

    margin: 0 0 0 38px !important;
    padding: 0 !important;

    background: transparent !important;

    overflow: visible !important;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.apoll-header-shell .apoll-header__action {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 var(--ah-button) !important;

    width: var(--ah-button) !important;
    min-width: var(--ah-button) !important;
    max-width: var(--ah-button) !important;

    height: var(--ah-button) !important;
    min-height: var(--ah-button) !important;
    max-height: var(--ah-button) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    outline: none !important;
    box-shadow: none !important;

    color: var(--ah-dark) !important;

    text-decoration: none !important;

    cursor: pointer !important;

    overflow: visible !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;

    transform: translateY(0) !important;

    transition: transform 160ms ease !important;
}


.apoll-header-shell .apoll-header__action:hover {
    transform: translateY(-2px) !important;
}


.apoll-header-shell .apoll-header__action:focus,
.apoll-header-shell .apoll-header__action:active,
.apoll-header-shell .apoll-header__action:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   ACTION SVG RESET
   ========================================================= */

.apoll-header-shell .apoll-header__action .apoll-header__svg {
    position: static !important;

    display: block !important;

    flex: 0 0 var(--ah-button) !important;

    width: var(--ah-button) !important;
    min-width: var(--ah-button) !important;
    max-width: var(--ah-button) !important;

    height: var(--ah-button) !important;
    min-height: var(--ah-button) !important;
    max-height: var(--ah-button) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    overflow: visible !important;

    transform: none !important;

    box-sizing: border-box !important;

    pointer-events: none !important;
}


.apoll-header-shell .apoll-header__svg-bg {
    fill: var(--ah-accent) !important;
}


.apoll-header-shell .apoll-header__svg-path {
    fill: var(--ah-dark) !important;
}


/* =========================================================
   SEARCH
   Opens LEFT over navigation.
   Does NOT resize the header.
   Does NOT overlap the search circle.
   ========================================================= */

.apoll-header-shell .apoll-header__search {
    position: relative !important;

    z-index: 60 !important;

    display: block !important;

    flex: 0 0 var(--ah-button) !important;

    width: var(--ah-button) !important;
    height: var(--ah-button) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    overflow: visible !important;
}


.apoll-header-shell .apoll-header__search-form {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


/*
 * Search circle stays completely separate from input.
 */
.apoll-header-shell .apoll-header__action--search {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    z-index: 30 !important;
}


/*
 * Closed search field.
 *
 * right = button width + 8px
 * Therefore the white field ends 8px BEFORE the orange circle.
 */
.apoll-header-shell .apoll-header__search-field {
    position: absolute !important;

    top: 50% !important;
    right: calc(var(--ah-button) + 8px) !important;

    z-index: 25 !important;

    display: block !important;

    width: 0 !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    transform:
        translateY(-50%)
        translateX(18px) !important;

    transition:
        width 320ms cubic-bezier(.22, .61, .36, 1),
        opacity 160ms ease,
        transform 320ms cubic-bezier(.22, .61, .36, 1) !important;
}


/*
 * OPEN SEARCH
 *
 * 440px goes left over Kontakt and O nas.
 * It does not affect flex layout because it is absolute.
 */
.apoll-header-shell
.apoll-header__search.is-open
.apoll-header__search-field {
    width: 440px !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}


.apoll-header-shell .apoll-header__search-input {
    display: block !important;

    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: rgba(255, 255, 255, 0.98) !important;

    border: 1px solid rgba(21, 22, 26, 0.12) !important;
    border-radius: 23px !important;

    outline: none !important;
    box-shadow: none !important;

    color: var(--ah-dark) !important;

    font-family: 'Fixel', Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 46px !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;
}


.apoll-header-shell .apoll-header__search-input:focus,
.apoll-header-shell .apoll-header__search-input:active {
    outline: none !important;
    box-shadow: none !important;
}


.apoll-header-shell .apoll-header__search-input::placeholder {
    color: rgba(21, 22, 26, 0.48) !important;
    opacity: 1 !important;
}


.apoll-header-shell
.apoll-header__search-input::-webkit-search-decoration,
.apoll-header-shell
.apoll-header__search-input::-webkit-search-cancel-button,
.apoll-header-shell
.apoll-header__search-input::-webkit-search-results-button,
.apoll-header-shell
.apoll-header__search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
}


/* =========================================================
   CART BADGE
   ========================================================= */

.apoll-header-shell .apoll-header__cart-count {
    position: absolute !important;

    top: -1px !important;
    right: -2px !important;

    z-index: 30 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 19px !important;

    height: 19px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    background: #ffffff !important;

    border: 2px solid var(--ah-glass) !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    color: var(--ah-dark) !important;

    font-family: 'Fixel', Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 15px !important;

    box-sizing: border-box !important;

    pointer-events: none !important;
}


.apoll-header-shell .apoll-header__cart-count.is-empty {
    display: none !important;
}


/* =========================================================
   HIDE ORIGINAL ANGARTHEME DESKTOP HEADER
   ========================================================= */

@media (min-width: 768px) {

    html.apoll-header-ready #header .header-banner,
    html.apoll-header-ready #header .header-nav,
    html.apoll-header-ready #header .header-top {
        display: none !important;
    }


    html.apoll-header-ready #header > .menu,
    html.apoll-header-ready #header > .js-top-menu,
    html.apoll-header-ready #header .menu.js-top-menu.position-static,
    html.apoll-header-ready #header .js-top-menu.position-static,
    html.apoll-header-ready #header #_desktop_top_menu {
        display: none !important;
    }


    html.apoll-header-ready body #header {
        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    html.apoll-header-ready body #header::before,
    html.apoll-header-ready body #header::after {
        display: none !important;
        content: none !important;
    }
}


/* =========================================================
   WHITE PAGE BACKGROUND
   ========================================================= */

html,
body,
body#index,
main {
    background-color: #ffffff !important;
}


/* =========================================================
   992px — 1199px
   ========================================================= */

@media (max-width: 1199px) and (min-width: 992px) {

    .apoll-header-shell {
        --ah-height: 74px;
        --ah-button: 47px;
        --ah-cut: 16px;

        margin-top: 16px !important;
        margin-bottom: 24px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .apoll-header-shell .apoll-header__inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    .apoll-header-shell .apoll-header__brand {
        margin-right: 25px !important;
    }


    .apoll-header-shell .apoll-header__logo {
        max-width: 132px !important;
        max-height: 40px !important;
    }


    .apoll-header-shell .apoll-header__menu {
        gap: 16px !important;
    }


    .apoll-header-shell .apoll-header__menu-link {
        gap: 4px !important;

        font-size: 12px !important;
        font-weight: 600 !important;
    }


    .apoll-header-shell .apoll-header__menu-chevron {
        flex-basis: 8px !important;

        width: 8px !important;
        min-width: 8px !important;
        max-width: 8px !important;

        height: 5px !important;
        min-height: 5px !important;
        max-height: 5px !important;
    }


    .apoll-header-shell .apoll-header__actions {
        gap: 1px !important;

        margin-left: 22px !important;
    }


    /*
     * Slightly shorter search on smaller desktop.
     */
    .apoll-header-shell
    .apoll-header__search.is-open
    .apoll-header__search-field {
        width: 370px !important;
    }


    .apoll-header-shell .apoll-header__search-input {
        width: 370px !important;
        min-width: 370px !important;
        max-width: 370px !important;
    }
}


/* =========================================================
   768px — 991px
   ========================================================= */

@media (max-width: 991px) and (min-width: 768px) {

    .apoll-header-shell {
        --ah-height: 68px;
        --ah-button: 43px;
        --ah-cut: 14px;

        margin-top: 12px !important;
        margin-bottom: 20px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .apoll-header-shell .apoll-header__inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .apoll-header-shell .apoll-header__brand {
        margin-right: 16px !important;
    }


    .apoll-header-shell .apoll-header__logo {
        max-width: 112px !important;
        max-height: 36px !important;
    }


    .apoll-header-shell .apoll-header__menu {
        gap: 10px !important;
    }


    .apoll-header-shell .apoll-header__menu-link {
        gap: 3px !important;

        font-size: 10px !important;
        font-weight: 600 !important;
    }


    .apoll-header-shell .apoll-header__menu-chevron {
        flex-basis: 7px !important;

        width: 7px !important;
        min-width: 7px !important;
        max-width: 7px !important;

        height: 5px !important;
        min-height: 5px !important;
        max-height: 5px !important;
    }


    .apoll-header-shell .apoll-header__actions {
        gap: 0 !important;

        margin-left: 12px !important;
    }


    .apoll-header-shell
    .apoll-header__search.is-open
    .apoll-header__search-field {
        width: 290px !important;
    }


    .apoll-header-shell .apoll-header__search-input {
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   MOBILE
   Use original AngarTheme mobile header.
   ========================================================= */

@media (max-width: 767px) {

    .apoll-header-shell,
    html.apoll-header-ready .apoll-header-shell {
        display: none !important;
    }


    #header .header-top {
        display: block;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .apoll-header-shell .apoll-header__action,
    .apoll-header-shell .apoll-header__menu-link,
    .apoll-header-shell .apoll-header__menu-chevron,
    .apoll-header-shell .apoll-header__search-field {
        transition: none !important;
    }
}

/* CSS-first rendering, scoped to pages that actually contain APOLL Header. */
@media (min-width:768px){.apoll-header-shell{display:block!important}}
@media (min-width: 768px) {

    html:has(.apoll-header-shell[data-apoll-header]) #header .header-banner,
    html:has(.apoll-header-shell[data-apoll-header]) #header .header-nav,
    html:has(.apoll-header-shell[data-apoll-header]) #header .header-top {
        display: none !important;
    }


    html:has(.apoll-header-shell[data-apoll-header]) #header > .menu,
    html:has(.apoll-header-shell[data-apoll-header]) #header > .js-top-menu,
    html:has(.apoll-header-shell[data-apoll-header]) #header .menu.js-top-menu.position-static,
    html:has(.apoll-header-shell[data-apoll-header]) #header .js-top-menu.position-static,
    html:has(.apoll-header-shell[data-apoll-header]) #header #_desktop_top_menu {
        display: none !important;
    }


    html:has(.apoll-header-shell[data-apoll-header]) body #header {
        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    html:has(.apoll-header-shell[data-apoll-header]) body #header::before,
    html:has(.apoll-header-shell[data-apoll-header]) body #header::after {
        display: none !important;
        content: none !important;
    }
}

/* Independent disclosure dropdowns. Clip-path stays only on the glass layer. */
.apoll-header-shell .apoll-header__nav,
.apoll-header-shell .apoll-header__menu,
.apoll-header-shell .apoll-header__menu-item {overflow:visible!important}
.apoll-header-shell .apoll-header__menu-link {appearance:none;-webkit-appearance:none}
.apoll-header-shell .apoll-header__menu-link--unconfigured {cursor:default!important}
.apoll-header-shell .apoll-header__menu-item--dropdown.is-open {z-index:20}
.apoll-header-shell .apoll-header__dropdown {
    position:absolute; top:100%; left:-16px; z-index:30;
    display:block; width:max-content; min-width:230px;
    max-width:min(320px,calc(100vw - 32px));
    max-height:calc(100vh - 160px); overflow-y:auto;
    list-style:none; margin:0; padding:8px;
    border:1px solid rgba(21,22,26,.08); border-radius:0;
    background:rgba(248,248,248,.98);
    box-shadow:0 10px 26px rgba(21,22,26,.12);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(6px);
    transition:opacity 160ms ease,transform 160ms ease,visibility 160ms ease;
    font-family:'Fixel',Arial,Helvetica,sans-serif;
    box-sizing:border-box;
}
.apoll-header-shell .apoll-header__dropdown li {display:block;list-style:none;margin:0;padding:0;border:0;background:none}
.apoll-header-shell .apoll-header__dropdown a {
    display:block;padding:11px 14px;margin:0;
    background:transparent;color:var(--ah-dark);
    font:500 14px/1.4 'Fixel',Arial,Helvetica,sans-serif;
    text-decoration:none;text-transform:none;white-space:normal;overflow-wrap:anywhere;
    transition:color 160ms ease,background-color 160ms ease;
}
.apoll-header-shell .apoll-header__dropdown a:hover,
.apoll-header-shell .apoll-header__dropdown a:focus-visible {color:var(--ah-accent);background:#ececec}
.apoll-header-shell .apoll-header__menu-item--dropdown.is-open .apoll-header__dropdown {
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.apoll-header-shell .apoll-header__menu-item--dropdown.is-open .apoll-header__menu-chevron {transform:rotate(180deg)!important}
.apoll-header-shell .apoll-header__menu-link:focus-visible {outline:2px solid var(--ah-accent)!important;outline-offset:3px}
@media (max-width:991px) and (min-width:768px){
    .apoll-header-shell .apoll-header__dropdown {min-width:210px}
    .apoll-header-shell .apoll-header__dropdown a {font-size:13px}
}
@media (prefers-reduced-motion:reduce){
    .apoll-header-shell .apoll-header__dropdown,
    .apoll-header-shell .apoll-header__dropdown a {transition:none}
}