:root {
    --dxp-c-header-container-spacing-block-start: 1rem;
    --dxp-c-header-container-spacing-inline-end: 1rem;
    --dxp-c-header-container-spacing-block-end: 1rem;
    --dxp-c-header-container-spacing-inline-start: 1rem;

    --dxp-g-navigation-list-hover-background-color-contrast: rgb(225, 221, 212);

    --sds-g-button-brand-color-background: rgb(26, 26, 26);
    --slds-g-button-brand-color-background-hover: rgba(26, 26, 26, 0.85);
    --sds-g-button-brand-color-border: rgb(26, 26, 26);
    --sds-g-button-brand-color-border-hover: rgba(26, 26, 26, 0.85);

    /* Wishlist border, Address list border */
    --sds-c-card-sizing-border: 2px;
    /* search-result page, category page */
    --com-c-product-grid-container-basis: 33.33%;
    --dxp-g-neutral-2: var(--com-g-wishlist-card-border-color);
    --slds-g-shadow-outline-focus-1: 0 0 0 2px transparent;
    }

    :host(header.mobile) {
        --dxp-c-navigation-list-background-color: var(--dxp-s-dropdown-color-background-hover);
        --dxp-c-navigation-list-hover-background-color-contrast: var(--dxp-g-root-1);
    }

    @media only screen and (max-width: 47.9375em){
        .jk-custom-header .jk-profile-bar .slds-button,
        .jk-custom-header .jk-profile-bar lightning-button::part(button), 
        .jk-custom-header .jk-profile-bar lightning-button-menu::part(button) {
            font-size: 0.85em !important;
        }
    }

    @media only screen and (min-width: 47.9376em){
        .jk-custom-header .jk-profile-bar .slds-button,
        .jk-custom-header .jk-profile-bar lightning-button::part(button), 
        .jk-custom-header .jk-profile-bar lightning-button-menu::part(button) {
            font-size: 1.0em !important;
        }
    }


    @media only screen and (min-width: 48em) and (max-width: 64em) {
        .header .desktop,
        .header .tablet {
                    padding:    var(--dxp-c-section-content-spacing-block-start-tablet, 
                                var(--dxp-style-c-padding-top-m, 
                                var(--dxp-s-section-content-spacing-block-start-mobile))) var(--dxp-c-section-content-spacing-inline-end-tablet, var(--dxp-style-c-padding-right-m, 
                                var(--dxp-s-section-content-spacing-inline-end-mobile))) var(--dxp-c-section-content-spacing-block-end-tablet, var(--dxp-style-c-padding-bottom-m, 
                                var(--dxp-s-section-content-spacing-block-end-mobile))) var(--dxp-c-section-content-spacing-inline-start-tablet, 
                                var(--dxp-style-c-padding-left-m, 
                                var(--dxp-s-section-content-spacing-inline-start-mobile))) !important;
        }
    }

    @media only screen and (min-width: 64em) {
        .header .desktop {
            --dxp-c-header-container-spacing-block-start: var(--dxp-s-section-content-spacing-block-start) !important;
            --dxp-c-header-container-spacing-inline-end: 1rem !important;
            --dxp-c-header-container-spacing-block-end: var(--dxp-s-section-content-spacing-block-end) !important;
            --dxp-c-header-container-spacing-inline-start: 1rem !important;
        }
    }


    /* Button disabled 
        ------------------------------- */
    .slds-button_brand[disabled], 
    .slds-button_brand:disabled, 
    .slds-button--brand[disabled], 
    .slds-button--brand:disabled, 
    lightning-button[variant="brand"]::part(button):disabled {
        background-color: var(--dxp-g-neutral-2);
        border-color: var(--dxp-g-neutral-2);
        /* color: rgba(26, 26, 26, 0.80); */
    }
    .slds-button, lightning-button::part(button), lightning-button-menu::part(button){
        --dxp-s-button-radius-border: 2px;
    }



    /* Mainnavigation 
        ------------------------------- */

        commerce-drilldown-navigation-bar nav button,
        commerce-drilldown-navigation-bar nav .slds-list__item a {border-radius: 2px;} 
        commerce-drilldown-navigation-list nav a {border-radius: 0px!important;}
        nav button[aria-expanded="true"] {
            background-color: var(--dxp-c-navigation-list-hover-background-color-contrast)!important;
        }
        /* Dropdown Menu */
        commerce-drilldown-navigation-bar nav a {
            font-size: var(--dxp-g-navigation-item-font-size)!important;
            text-transform: uppercase;
        }
        /* .header-navigation .component-wrapper-spacer, */
        .jk-custom-header .component-wrapper-spacer {margin-bottom: 0px!important;}
        nav .slds-icon_container {
            margin-top:3px;
        }
        nav button:is([data-id="back"]) .slds-icon_container {
            margin-top:1px;
        }
        .desktop nav ul,
        .tablet nav ul {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
        .tablet nav.slds-has-flexi-truncate {
            margin: 0 auto;
        }
        @media only screen and (min-width: 64.0625em) {
            .dxp-content-layout-site-logo img {
                margin-left: -15px;
            }
        }
        
        @media only screen and (min-width: 1367px) {
            .slds-p-horizontal_xx-none {
                padding-left: 0!important;
                padding-right: 0!important;
            }
        }
        .jk-search .input-container,
        .jk-search .input-search-button {
            height: 2.5rem !important;
        }
        @media only screen and (min-width: 48em) and (max-width: 64em) {
            .jk-custom-header .image-container,
            .jk-custom-header .image-wrapper {
                width: 100% !important;
            }
            /* .tablet nav ul {
                margin: 0 -13px;
            } */
            /* .tablet .jk-profile-bar{
                margin-right: -6px;
            } */
            .jk-search .input-container,
            .jk-search .input-search-button {
                height: 2.25rem !important;
            }
        }
        @media only screen and (max-width: 47.9375em) {   
            .jk-column-no-horizontal-padding {
                padding: 5px 0 0 0 !important;
                
            }
            .jk-search .input-container,
            .jk-search .input-search-button {
                height: 2.5rem !important;
            }
        }

    /** Use --dxp-g to make broad changes **/
    .jk-languageSwitcher .slds-input, 
    .jk-languageSwitcher .slds-combobox__input, 
    .jk-languageSwitcher .slds-listbox_vertical .slds-listbox__option  {
        --dxp-g-input-text-font-size: var(--dxp-s-body-font-size);
        --dxp-g-form-element-text-font-size:var(--dxp-s-body-font-size);
        --dxp-s-form-element-text-font-size:var(--dxp-s-body-font-size);
        --dxp-g-body-font-size:var(--dxp-s-body-font-size);
        --dxp-s-form-element-spacing-horizontal-end: var(--dxp-s-form-element-spacing-horizontal-start);
    }
    .jk-languageSwitcher .slds-input, 
    .jk-languageSwitcher .slds-combobox__input,
    .jk-languageSwitcher .slds-input_faux {
        font-weight: 500;
        font-size: x-large;
        --border-color: none;
        --border-width: var(--dxp-c-input-width-border, var(--dxp-s-form-element-width-border, 0px));
        /* padding-right: var(--sds-c-input-spacing-horizontal-end, var(--dxp-s-form-element-spacing-horizontal-end, 12px));
        padding-left: var(--sds-c-input-spacing-horizontal-start, var(--dxp-s-form-element-spacing-horizontal-start, 12px)); */
        padding: 8.5px 5.5px;
        width: 47px;
        height: 46px;
        line-height: normal !important;
        justify-content: center;
        align-items: center;
        --dxp-s-form-element-radius-border: 2px;
    }
    .jk-languageSwitcher .fix-slds-input_faux {
        line-height: normal;
    }
    .jk-languageSwitcher .slds-form-element:hover .slds-input,
    .jk-languageSwitcher .slds-form-element:hover .slds-input_faux {
        background-color: var(--dxp-g-root-1);
    }
    .jk-languageSwitcher .slds-input:hover, 
    .jk-languageSwitcher .slds-combobox__input:hover,
    .jk-languageSwitcher .slds-combobox__input[aria-expanded="true"] {
        --input-color-background-focus: var(--dxp-g-root-1);
    }

    .jk-languageSwitcher .slds-input-has-icon .slds-input__icon,
    .jk-languageSwitcher .slds-form-element__label {
        display: none;
    }
    .jk-languageSwitcher .slds-form-element {
        --dxp-g-spacing-medium: var(--dxp-g-spacing-none);
    }
    .jk-languageSwitcher .slds-dropdown_fluid.slds-dropdown_left {
        left: auto !important;
        right:0 !important;
        -webkit-transform: translateX(0)!important;
        transform: translateX(0)!important;
    }
    .jk-languageSwitcher .slds-dropdown--fluid, 
        .jk-languageSwitcher .slds-dropdown_fluid {
        min-width: 5.5rem!important;
    }
    .jk-languageSwitcher .slds-form-element__help, 
    .jk-languageSwitcher .slds-form-element__helper {
        margin-top:0px!important;
    }
    .jk-languageSwitcher .slds-listbox_vertical .slds-listbox__option[aria-checked="true"]{
        background-color:#fff;
    }

    .jk-languageSwitcher .slds-listbox_vertical .slds-listbox__option:focus, 
    .jk-languageSwitcher .slds-listbox_vertical .slds-listbox__option:hover, 
    .jk-languageSwitcher .slds-listbox_vertical .slds-listbox__option.slds-has-focus, 
    .jk-languageSwitcher .slds-listbox--vertical .slds-listbox__option:focus, 
    .jk-languageSwitcher .slds-listbox--vertical .slds-listbox__option:hover, 
    .jk-languageSwitcher .slds-listbox--vertical .slds-listbox__option.slds-has-focus {
        -webkit-box-shadow: 0 0 0 0px var(--dxp-g-root) inset, 0 0 0 0px var(--dxp-g-brand) inset !important;
        box-shadow: 0 0 0 0px var(--dxp-g-root) inset, 0 0 0 0px var(--dxp-g-brand) inset !important;
    }
    /* add second hint bg to avoid color defference between iphone and android */
    footer .jk-languageSwitcher .slds-input, 
    footer .jk-languageSwitcher .slds-combobox__input, 
    footer .jk-languageSwitcher .slds-input_faux {
        background-color: var(--input-color-background);
        background: #868583;
    }

    /* MobileMenu 
        ------------------------------- */

    .mobile .jk-mobile-menu .close-button-wrapper .close-button {
        right: 0;
        width: 100%;
        height: auto;
        margin: 0 !important;
    }
    .mobile .jk-mobile-menu .close-button-wrapper .close-button .slds-button.slds-button_icon {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 12px;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list ul {
        max-width: 85vw;
        box-shadow: 91px -30px 60px 40px rgba(0,0,0,0.7)!important;
        background-color: var(--dxp-c-navigation-list-background-color);
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list .close-button-wrapper {
        display: block;
        max-width: 85vw;
        z-index: 200000 !important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list .slds-button__icon {
        fill: rgb(26, 26, 26)!important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a, 
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav button,
    .jk-mobile-menu commerce-drilldown-navigation-list nav a, 
    .jk-mobile-menu commerce-drilldown-navigation-list nav button  {
        /* font-size: var(--dxp-s-body-font-size)!important; */
        font-size: 18px !important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav li {
        margin-bottom:3px !important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav li:last-child {
        margin-bottom:50px !important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav button:not([data-id="back"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):not([title="Account"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):not([title="Categories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):not([title="Categorieën"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):not([title="Catégories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):not([title="Kategorien"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:not([title="Account"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:not([title="Categories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:not([title="Categorieën"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:not([title="Catégories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:not([title="Kategorien"]) {
        background-color: #fff !important;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([title="Categories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([title="Categorieën"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([title="Catégories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([title="Kategorien"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([title="Account"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):is([title="Categories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):is([title="Categorieën"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):is([title="Catégories"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):is([title="Kategorien"]),
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a:is([href]):is([title="Account"]) {
        font-weight:600;
        background-color:var(--dxp-c-navigation-list-background-color)!important;
        padding-top: 20px;
    }
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a[title="Categories"],
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a[title="Categorieën"],
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a[title="Catégories"],
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a[title="Kategorien"],
    .mobile .jk-mobile-menu commerce-drilldown-navigation-list nav a[title="Account"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: black;
    }
    .mobile .logo img,
    .mobile .logo picture>img {
        max-height:60px !important;
    }
    .mobile .slds-button.slds-button_icon {
        color: var(--dxp-g-brand)!important;
    }
    @media (max-width: 47.9375em) {
        .jk-mobile-menu .mobile-menu-container {
            background-color: transparent !important;
        }
        .jk-custom-header.mobile .jk-mobile-menu .component-wrapper-spacer {
            margin-bottom: 0!important;
        }
        .jk-mobile-menu commerce-drilldown-navigation-list nav a, 
        .jk-mobile-menu commerce-drilldown-navigation-list nav button  {
        /* font-size: var(--dxp-s-body-font-size)!important; */
            font-size: 18px !important;
        }
    }
    
    @media (max-width: 64em) {
        .jk-custom-header.mobile .jk-mobile-menu .component-wrapper-spacer {
            margin-bottom: 0!important;
        }
        .jk-mobile-menu commerce-drilldown-navigation-list nav a, 
        .jk-mobile-menu commerce-drilldown-navigation-list nav button  {
        /* font-size: var(--dxp-s-body-font-size)!important; */
            font-size: 18px !important;
        }
    }
    @media only screen and (min-width: 668px) {
        .tablet .jk-mobile-menu {
            display: none;
        }
    }

        /* Sidebar Navigation
        ------------------------------- */
        dxp_layout-tab-bar .dxp-tab-bar-hover-tab-vertical:hover .slds-truncate  {
            --dxp-c-l-text-block-text-decoration: underline !important;
            text-decoration: var(--dxp-c-l-text-block-text-decoration) !important;
        }



        /* Experience / Hub List border */
        dxp_layout-tab .record-list-table-wrapper {
            --dxp-c-record-list-header-border-width: 0px !important;
            --dxp-c-record-list-table-border-weight: 2px !important;
            --dxp-c-record-list-card-border-weight: 2px !important;
        }
        dxp_layout-tab .record-list-header {
            border-top-left-radius: 0.25em;
            border-top-right-radius: 0.25em;
        } 
        dxp_layout-tab .listDisplays tbody tr {
            --dxp-c-record-list-table-border-weight: 2px;
            border-left-width: var(--dxp-c-record-list-table-border-weight);
            border-right-width: var(--dxp-c-record-list-table-border-weight);
        }
        .flowruntimeBody__lwc.slds-card__body .slds-combobox__input.slds-has-focus, 
        .flowruntimeBody__lwc.slds-card__body .slds-combobox__input:focus {
            --slds-c-input-shadow: 0 0 3px var(--dxp-g-brand-1);
            -webkit-box-shadow: var(--slds-c-input-shadow, 0 0 3px);
            box-shadow: var(--slds-c-input-shadow, 0 0 3px);
            outline: 0;
        }
        dxp_layout-tab .record-list-pagination-section,
        dxp_layout-tab .slds-card__footer.navigationBar .navigation-bar__right-align,
        .navigation-bar__right-align {
            margin: 1.5em 0 !important;
        }

        .table-record-list .slds-gutters_direct>.slds-col {
           padding: 0 !important;
        }
        .table-record-list .slds-border--top, .table-record-list .slds-border_top {
            border-width: 2px !important;
            border-top-left-radius: 0.25em;
            border-top-right-radius: 0.25em;
        }
        .table-record-list .slds-border--right, .table-record-list .slds-border_right {
            border-width: 2px !important;
        }
        .table-record-list .slds-border--left, .table-record-list .slds-border_left {
            border-width: 2px !important;
        }
        .table-record-list .slds-border--bottom, .table-record-list .slds-border_bottom {
            border-width: 2px !important;
        }
        .table-record-list .slds-theme--shade, .table-record-list .slds-theme_shade {
            padding: 1rem 1rem 0 1rem;
        }
        .table-record-list .flowruntime_datatable_info_message_display span {
            font-weight: 500;
            font-size: 15.75px;
        }
        .table-record-list .flowruntimeBody__lwc.slds-card__body {
            margin-top: 0;
            margin-left: -.25rem;
            margin-right: -.25rem;
        }




        /* new: Footer
        ------------------------------- */
        /* container commerce footer*/
        commerce-layout-footer footer {
            padding-bottom: 0px!important;
            padding-top: 0px!important;
            padding-left: 0px!important;
            padding-right: 0px!important;
        }
        commerce-layout-footer footer .footer {
            margin-left: 0px!important;
            margin-right: 0px!important;
            max-width: 100% !important;
        }

        .c-b2bCommerceFooter a,
        .c-b2bCommerceFooter p,
        .c-b2bCommerceFooter .component-wrapper-spacer {
        --dxp-s-component-wrapper-spacer-size: 0.75em !important;
        margin-bottom: 0.5em !important;
        }
        .c-b2bCommerceFooter a,
        .c-b2bCommerceFooter .has-privacy-settings commerce-link-list ul li,
        commerce-layout-footer footer .footer a,
        .has-privacy-settings commerce-link-list ul li {
            --dxp-s-link-text-color: rgb(246, 246, 246);
            --com-c-link-list-anchor-text-color:rgb(246, 246, 246);
            color: var(--com-c-link-list-anchor-text-color, var(--dxp-s-link-text-color)); 
        }
        commerce-layout-footer footer .footer a:hover,
        commerce-layout-footer footer .footer a:hover:not(.slds-button, .slds-dropdown__item > a),
        commerce-layout-footer footer .footer a:focus:not(.slds-button, .slds-dropdown__item > a) {
            color: var(--dxp-s-body-text-color) !important; 
            --dxp-c-text-block-text-decoration: var(--dxp-s-body-text-decoration);
        }
        .has-privacy-settings commerce-link-list ul {
            margin-top: 10px;
        }
        .has-privacy-settings commerce-link-list ul li a {
            display: flex;
            padding: 5px 0;
        }

        community_layout-column .c-b2bCommerceFooter .slds-gutters_x-large {
            margin-right: -.75rem;
            margin-left: -.75rem;
        }
        community_layout-column .c-b2bCommerceFooter .slds-grid_align-space {
            justify-content: space-between;
        }


        @media only screen and (min-width: 48em) and (max-width: 64em) {
            .c-b2bCommerceFooter .slds-col p {
                max-width: 430px;
            }
        }
        @media (min-width: 767px) {
            .c-b2bCommerceFooter .slds-col {
                max-width: 430px;
                padding-left: 0;
                padding-right: 0;
            }
        }
        
        
        
    /* old: Footer contacts section */
    .justify-align-end>.region-Astro,
        .justify-align-end>.region-Astro>slot  {
            display: flex;
            justify-content: flex-end;
        }

        @media only screen 
            and (max-width: 47.9375em) {   
            .contact-section-container,
            .contact-section {
                max-width: 340px;
            }
            .has-privacy-settings {
                margin-top: 10px;
                display: grid;
            }
        }
        @media only screen 
            and (min-width: 48em) 
            and (max-width: 64em) {
            .contact-section-container {
                margin: 1.0rem auto 1.75rem !important;
                width: 380px;
            }
            .contact-section {
                width: 380px;  
            }
            .contact-section-container .align-horizontal-center[flexi_grid-flexiGridLayout2_flexiGridLayout2] {
                align-items: flex-start;
            }
        }

        @media (max-width: 64em){
            .c-b2bCommerceFooter a,
            .c-b2bCommerceFooter p,
            .c-b2bCommerceFooter .component-wrapper-spacer {
            --dxp-s-component-wrapper-spacer-size: 0.5em !important;
            margin-bottom: 0.5em !important;
            }
        }
        @media only screen and (min-width: 64.0625em){
            .contact-section-container {
                width: 380px;
                /* margin-left: 2.5rem !important; */
            }
        }
        @media (min-width: 64.0625em){
            .contact-section-container {
                width: 380px;
                /* margin-left: 2.5rem !important; */
            }
        }
        community_layout-hidden-region {
            display: none;
        }
        /* @media only screen and (max-width: 47.9375em) {   
        }*/

        /* @media only screen and (min-width: 48em) and (max-width: 64em) {
        }  */

        /* @media only screen and (min-width: 64.0625em) {
        }  */

        /* footer nav */
        .footer-link-list-horizontal commerce-link-list ul {
            flex-direction: row;	    
            display: flex;
            justify-content: space-around;
        }
        .footer-link-list-horizontal commerce-link-list ul li {
            margin: 0 1.75rem;
            padding: .5rem;
        }
        @media only screen and (max-width: 47.9375em) {   
            .footer-link-list-horizontal commerce-link-list {
                justify-content: left !important;
            }
            .footer-link-list-horizontal commerce-link-list ul {
                flex-direction: column;
                /* margin: 0 auto; */
                margin: 0 1.0rem;
                width: 91.6666666667%;
            }
            .footer-link-list-horizontal commerce-link-list ul li {
                margin-top: .5rem;
                margin-bottom: .5rem;
                margin-left: 0px;
                margin-right: 0px;
            }
        }


 /* Promotionbanner
    ------------------------------- */

    /* MEDIA QUERIES iPADS */
    /* Landscape */
    /* Declare the same value for min- and max-width to avoid colliding with desktops */
    /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
    .campaign-banner-button-large a {
        scale: 1.2;
        margin-left: 16px !important;
    }
    .button-uppercase {
        letter-spacing: 0.10em;
    }