header {
    display: grid;
    grid-template-columns: 250px auto minmax(0, 800px) auto 325px;
    align-items: center;
    background: #fff;
    height: 74px;
    padding: 0 1em;
    z-index: 7100;
}

header #header-logo {
    place-self: center left;
}
header #header-logo input {
    left: 23px;
    max-width: 160px;
    object-fit: scale-down !important;
    position: fixed;
    top: 12px;
}

header #header-logo #logo-text {
    height: 0;
    left: 175px;
    position: absolute;
    top: 4px;
    white-space: nowrap;
    width: 0;
}
    header #header-center {
        place-self: center;
        width: 100%;
        max-width: 100%;
        height: 74px;
        max-height: 74px;
}

    header #ad-slot-top {
        margin: 2px auto;
        width: 100%;
        max-width: 800px !important;
        height: 70px;
        overflow: hidden;
        place-self:center;
        caret-color: transparent;
    }
    header #header-right {
        display: flex;
        justify-content: flex-end;
    }
        @media (max-width: 650px) {
            header #ad-slot-top {
                display: none !important;
            }
        }

        .ad-responsive {
        }

        #ad-slot-left {
            width: 240px;
            height: 240px;
            margin: 30px 0 0;
        }


        header #header-vat {
            place-self: start end;
            zoom: .85;
            padding-right: 3px;
        }

header #header-login,
header #header-cart {
    padding-left: 15px;
    position: relative;
}

/*
@supports (-moz-appearance: none) { header #header-cart { top: 4px; } }
@supports (-webkit-appearance: none) { header #header-cart { top: 7px; } }
*/
header #header-cart {
    top: 7px;
}


header #header-avatar {
        place-self: center end;
    }

    .nowrap {
        white-space: nowrap;
    }

    nav.sub-bar {
        align-items: center;
        background-color: #eaeaea;
        display: grid;
        gap: 1rem;
        grid-template-columns: auto 1fr auto;
        height: 50px;
        left: 0;
        padding: 0 1rem;
        z-index: 7100;
    }

        nav.sub-bar .filler {
        }

        nav .sub-bar .menu {
            justify-self: start;
        }

        nav.sub-bar #search {
            display: flex;
            gap: 5px;
            container-type: inline-size;
            container-name: search;
            /*margin-left: 20px;*/
        }

    .slider-scaling .rslSelectedregion {
        background-color: transparent !important;
        height: 22px !important;
    }

    .slider-scaling,
    .RadSliderTickMarks,
    .RadSliderTooltip {
        font-size: 14px !important;
        margin-top: 4px;
    }

    .loadtimer {
        position: absolute;
        top: 18px;
        right: 70px;
    }

    nav.sub-bar #search #search-all {
        display: contents;
        white-space: nowrap;
    }

    nav.sub-bar #search #search-wide {
        display: inherit;
    }

        nav.sub-bar #search #search-wide .rsbIconSearch::before {
            font-size: 1.2em;
            position: relative;
            top: -2px;
            left: -1px;
        }

    nav.sub-bar #search #search-narrow {
        display: none;
    }

    nav.sub-bar #search #search-wide .rsbInner .rsbInput {
        /* width: inherit !important; */
    }

    @container search (width < 238px) {
        nav.sub-bar #search #search-wide {
            display: none !important;
        }

        nav.sub-bar #search #search-narrow {
            display: inherit !important;
        }
    }

    @media (min-width: 980px) {
        nav.sub-bar #search {
            padding-left: 7%;
        }
    }

    nav.sub-bar #search #search-wide .RadSearchBox {
        max-width: 350px;
        min-width: 4em !important;
        width: calc(100% - 40px);
    }

    nav.sub-bar #search .RadPushButton {
        background-color: transparent !important;
        border: none !important;
        color: #222 !important;
        margin: 0 !important;
    }

        nav.sub-bar #search .RadPushButton::before {
            content: "\e401" !important;
            font: 24px/1 "WebComponentsIcons";
            position: relative;
            top: 2px;
        }
    /*
        nav .sub-bar #search .RadToolTip {
            font-size: 0.875rem;
            padding: 0.5rem;
        }
                */

    .search-box-narrow {
        tarnsform: scale(1.2);
        transform-origin: left top;
    }

    nav.sub-bar .permalink {
        justify-self: end;
    }

        nav.sub-bar .permalink button {
            background-color: transparent !important;
            border: none !important;
            float: right !important;
            height: 37px;
            justify-self: end;
            padding: 6px 2px 0 0 !important;
        }

            nav.sub-bar .permalink button::before {
                content: "\e10f" !important;
                font: 20px/1 "WebComponentsIcons";
                font-size: 1.3em;
            }

    #btFullscreen {
        margin-top: 8px;
        padding: 0 !important;
        color: #888 !important;
        border: none !important;
        background-color: transparent !important;
        z-index: 999999
    }

    button#btFullscreen::before {
        content: "\e528" !important;
        font: 20px/1 "WebComponentsIcons";
        font-size: 1em;
    }

    button#btFullscreen.maximized::before {
        content: "\e529" !important;
    }

    #btFullscreen.rbHovered {
        color: black !important;
    }

    .rbHovered {
        /*    display: block !important;*/
    }

    .f11wrapper {
        display: none
    }

    #pnContentArea {
        padding: 0 10px 0 0;
        min-height: 50%;
    }

    #wrapper {
        position: sticky;
        top: 125px;
        display: grid;
        grid-template-columns: 260px auto;
        column-gap: 5px;
    }

    #scrollable-wrapper {
        container-type: inline-size;
        container-name: collapsing;
        overflow: clip;
        border-left: none;
        z-index: 2;
        background-color: white;
    }


    #wrapper .scroller {
        margin: 0 0 0 15px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        width: 260px;
        caret-color: transparent;
    }

    #wrapper .left-ctrl {
        padding: 15px 0;
        overflow: hidden;
    }


    #contents {
        margin: 10px 0;
        z-index: 1;
    }

    footer {
        position: fixed;
        bottom: 0;
        width: 100vw;
        min-width: 600px;
        height: 36px;
        line-height: 36px;
        display: grid;
        grid-template-columns: 154px 134px 130px auto 50px 165px 46px 80px;
        background-color: #eaeaea;
        padding: 0 0 0 15px;
    }

    #footer-center {
        justify-self: center;
        color: #ccc;
        width: 100%;
    }

    @media (max-width: 760px) {
        footer {
            grid-template-columns: 149px 120px auto 40px 165px 36px 75px;
        }

        #footer-phone {
            display: none !important;
        }
    }

    .footer-right {
        justify-self: end;
    }

    .scroll-zone {
        align-items: center;
        background: transparent;
        display: flex;
        height: 60px;
        justify-content: center;
        left: 0;
        opacity: 0.2;
        pointer-events: none;
        position: absolute;
        right: 0;
        transition: opacity 0.5s ease, background 0.5s ease;
        visibility: visible;
        width: 280px;
        z-index: 10;
    }

        .scroll-zone.top {
            left: -15px;
            top: 0px;
            width: 280px;
        }

        .scroll-zone.bottom {
            bottom: -1px;
            position: absolute;
            width: 280px;
            z-index: 999999
        }

        .scroll-zone.active {
            background: rgba(0, 0, 0, 0.04);
            opacity: 1;
        }

        .scroll-zone.hidden {
            display: none;
        }

        .scroll-zone span.fas {
            color: #555;
            font: 60px/1 "WebComponentsIcons";
        }

        .scroll-zone span.fa-arrow-up::before {
            content: "\e013" !important;
        }

        .scroll-zone span.fa-arrow-down::before {
            content: "\e015" !important;
        }

    #trc1, #trc2 {
        display: none;
        width: 0;
        height: 0;
        position: absolute;
        left: 4px;
        color: #777;
    }

    #trc1 {
        top: 33%;
    }

    #trc2 {
        top: 66%;
    }
    /* ---------- COLLAPSIBLE BEHAVIOR ---------- */
    @media (max-width: 1280px) {
        /*@media (max-width: 1680px) {*/
        #wrapper {
            grid-template-columns: auto;
        }

        #contents {
            margin-left: 35px;
        }

        #scrollable-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 25px; /* collapsed bar width */
            margin-left: 0;
            height: 100%;
            /*overflow: hidden;*/
            overflow: clip;
            background-color: whitesmoke;
            transition: width .2s ease;
        }

            #scrollable-wrapper:hover,
            #scrollable-wrapper.open {
                width: 270px; /* expanded width */
                box-shadow: 4px 0 10px rgba(0,0,0,0.3);
                max-height: fit-content !important;
                background-color: white;
                padding-left: 0px;
            }
            /* Slower collapse ONLY for auto-close */
            #scrollable-wrapper.slow-collapse {
                transition: width .4s ease;
                background-color: #f7f7f7;
            }

            #scrollable-wrapper .scroller {
                opacity: 0;
                height: 100%;
            }

            #scrollable-wrapper:hover .scroller,
            #scrollable-wrapper.open .scroller {
                opacity: 1;
            }
            /* Overlay above contents when expanded */
            #scrollable-wrapper:hover,
            #scrollable-wrapper.open {
                z-index: 3;
            }
    }

    @container collapsing (width < 50px) {
        #trc1, #trc2 {
            display: block
        }
    }
    /* Default state: excluding VAT */
    .pexcl {
        display: inline;
    }

    .cexcl {
        color: #606060;
    }

    .pincl {
        display: none;
    }
    /* When VAT is included */
    body.vat-incl .pexcl {
        display: none !important;
    }

    body.vat-incl .pincl {
        display: inline !important;
    }

    .cincl {
        color: #235c8c;
    }



    .plval {
        font-size: 1.1em;
        font-weight: 900;
        margin: 0 auto 2px;
    }

    .pval {
        font-weight: 900;
        margin: auto;
        padding: 0 10px;
        white-space: nowrap;
    }

    .pnull {
        color: #aaa;
        font-size: .9em;
    }

    .pscale {
        transform: scaleY(1.15);
    }

    #price {
        /*transform: scaleY(1.15);*/
        transform: scaleY(1.1);
        font-size: 1.4em;
        font-weight: bold;
        overflow: hidden;
    }

    .lbl {
        font-variant: small-caps !important;
        font-variant: all-small-caps !important;
        font-size: 1em;
        /* padding-left: 3px; 080125 */
        white-space: nowrap;
    }

    .lbl-in {
        padding-left: 3px;
    }

    .reduced {
        font-size: .85em;
    }

    .lbright {
        justify-self: end;
        white-space: nowrap;
    }

    .lbphead {
        display: grid;
        grid-template-columns: auto auto;
    }




    .sibling #panfilter {
        margin-bottom: -15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }


        .sibling #panfilter #filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding-bottom: 5px;
        }


            .sibling #panfilter #filters .selector {
                display: inline-block;
                vertical-align: top;
                height: 60px;
                max-height: 60px;
            }

        .sibling #panfilter #buttons-filters {
            display: flex;
            justify-content: space-between;
            align-content: center;
            flex-wrap: wrap;
            gap: 10px;
            /*padding-bottom: 7px;*/
            margin-right: 5px;
            width: -webkit-fill-available;
            height: fit-content;
            margin: 0 auto 0;
        }

            .sibling #panfilter #buttons-filters #buttons {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                padding-bottom: 5px;
            }

                .sibling #panfilter #buttons-filters #buttons .button {
                    /*display: inline-block;
        vertical-align: top;*/
                }





        .sibling #panfilter #filters .selector .rsbIconSearch {
            font-size: 1.2em !important;
        }

        .sibling #panfilter #switches {
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            gap: 10px;
        }

            .sibling #panfilter #switches .switch, .sibling #panfilter #switches .button {
                white-space: nowrap;
            }
    /*
.RadPanelBar,
.RadGrid,
.RadGrid .rgRow,
.RadGrid .rgAltRow,
.RadGrid .rgSelectedRow,
.RadGrid .rgEditRow */
    .showcaret {
        caret-color: #000;
    }

    .attach-bt .rcbInner {
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .attach-labeled {
        margin-top: 23.6px;
    }

    .attach-apply {
        height: 35.7px;
        left: -1px;
        padding: 0 3px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

        .attach-apply:before {
            border: none !important;
            content: "\e018" !important;
            font: 1.75em/1 "WebComponentsIcons" !important;
            vertical-align: bottom;
        }