//Top header desktop widths
@header_left_width: 260px;
@header_center_width: 723px;
@header_right_width: 240px;

@header_logo_max_width: 122px;
@header_search_form_max_width: 100%;


//Top header medium widths
@header_left_medium_width: 200px;
@header_center_medium_width: auto;
@header_right_medium_width: 100px;

@header_search_form_max_medium_width: 400px;


//Grid
@header_gutter_width: 20px;
@header_gutter_space: @header_gutter_width * 2;

@header_gutter_medium_width: 8px;
@header_gutter_medium_space: @header_gutter_medium_width * 2;

//Padding
@header_top_padding: 32px 0;
@header_top_flyout_padding: 24px 0;
@header_top_mobile_padding: 20px 0 0;

//Colours
@header_border_color: transparent;


//Header actions
@header_actions_width: auto;
@header_actions_height: 29px;
@header_actions_font_size: 20;
@header_actions_line_height: 25px;

@header_actions_button_padding: 0;
@header_actions_border_radius: 0;



@header_actions_gutter_width: 0;
@header_actions_gutter_space: 0;

@header_actions_gutter_medium_width: 0;
@header_actions_gutter_medium_space: 0;

//Header Actions Small
@header_actions_small_breakpoint: 400px;

@header_actions_small_width: 48px;
@header_actions_small_height: 48px;
@header_actions_small_font_size: 20;
@header_actions_small_line_height: 25px;


//search
@desktop_search_breakpoint: 700px;

:root {
    //Top header desktop widths
    --header_left_width: @header_left_width;
    --header_center_width: @header_center_width;
    --header_right_width: @header_right_width;

    --header_logo_max_width: @header_logo_max_width;
    --header_search_form_max_width: @header_search_form_max_width;


    //Top header medium widths
    --header_left_medium_width: @header_left_medium_width;
    --header_center_medium_width: @header_center_medium_width;
    --header_right_medium_width: @header_right_medium_width;

    --header_search_form_max_medium_width: @header_search_form_max_medium_width;


    //Grid
    --header_gutter_width: @header_gutter_width;
    --header_gutter_space: @header_gutter_space;

    --header_gutter_medium_width: @header_gutter_medium_width;
    --header_gutter_medium_space: @header_gutter_medium_space;

    //Padding
    --header_top_padding: @header_top_padding;
    --header_top_flyout_padding: @header_top_flyout_padding;
    --header_top_mobile_padding: @header_top_mobile_padding;

    //Colours
    --header_border_color: @header_border_color;


    //Header actions
    --header_actions_width: @header_actions_width;
    --header_actions_height: @header_actions_height;
    --header_actions_font_size: @header_actions_font_size;
    --header_actions_line_height: @header_actions_line_height;

    --header_actions_button_padding: @header_actions_button_padding;
    --header_actions_border_radius: @header_actions_border_radius;



    --header_actions_gutter_width: @header_actions_gutter_width;
    --header_actions_gutter_space: @header_actions_gutter_space;

    --header_actions_gutter_medium_width: @header_actions_gutter_medium_width;
    --header_actions_gutter_medium_space: @header_actions_gutter_medium_space;

    //Header Actions Small
    --header_actions_small_breakpoint: @header_actions_small_breakpoint;

    --header_actions_small_width: @header_actions_small_width;
    --header_actions_small_height: @header_actions_small_height;
    --header_actions_small_font_size: @header_actions_small_font_size;
    --header_actions_small_line_height: @header_actions_small_line_height;


    //search
    --desktop_search_breakpoint: @desktop_search_breakpoint;

}


/*
 * Header
 */

.basketButton {

	overflow: visible;

	.totalQty {
		display: flex;
		width: 14px;
		height: 14px;
		background: var(--primary_color);
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 100%;
		right: -6px;
		margin-bottom: -9px;
		margin-right: 0;
		text-indent: 0;
		.rems(9);
		line-height: 9px;
		letter-spacing: 0;
		color: #fff;
		z-index: 3;

		&[v-cloak] {
			display: none !important;
		}
	}
}

#header {
    float: none;
    clear: both;
    background: transparent;
    z-index: 5000;
    border: none;
	text-transform: none;
	position: relative;

	.headerContainer {

		max-width: var(--header_width);
		border-radius: 0;
		background: rgba(255,255,255,0.7);
		box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.03);
		backdrop-filter: blur(10px);
		margin: 0 auto;
		padding: 0 30px;

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;


		@media @flyout {
			padding: 0 19px;
		}

		@media @mobile {
			width: 100vw;
			left: 0;
			right: 0;
		}

	}


    &.hasNotice {

        .transparentHeader & {

            margin-bottom: -136px;

            @media @above_flyout {
                margin-bottom: -176px;
            }
        }

    }

	.uspBanner {

		position: relative;

	}

    &.menuOpen {
        @media @flyout {
            z-index: 1 !important;
        }
    }

    .headerInnerWrap {
        float: none;
        clear: both;
        position: relative;
        border-bottom: none;

    }



    .headerTop {
        padding: var(--header_top_padding);
        border-bottom: none; //1px solid @header_border_color;
        position: relative;
        z-index: 9999;
        max-height: 100%;


        @media @flyout {
            padding: var(--header_top_flyout_padding);
        }


		& > .wrapper {
			padding: 0;
			max-width: 100%;

			@media all and (max-width: (@wrapper_width + @page_side_padding)) {
				padding: 0;
			}
		}

    }

    .headerGrid {

        display: flex;
        flex-direction: row;
        width: calc(100% + var(--header_gutter_space));
        margin: 0 calc(0 - var(--header_gutter_width));


        @media @flyout {
            width: 100%;
            margin: 0;
        }


        .headerLeft, .headerRight, .headerCenter {
            width: auto;
            display: flex;
            align-items: center;
            padding: 0 var(--header_gutter_width);

        }


        .headerLeft {
            flex: 0 0 var(--header_left_width);

            @media @flyout {
                width: 0;
                padding: 0;
                flex: 0 0 50%;
				order: 1;
				display: flex;
            }

			@media @header_mobile_breakpoint {

			}

            .mainMenu {
                li {
                    a {
                        z-index: 9999;
                    }
                }
            }

        }

        .headerCenter {
            flex: 1 1 100%;
            justify-content: center;


            @media @flyout {
                flex: 1 1 auto;
				order: 2;
				display: flex;
				justify-content: center;
				padding: 0;
            }

			@media @header_mobile_breakpoint {

			}

			search {
				width: 100%;
			}

        }

        .headerRight {
            flex: 0 0 var(--header_right_width);
            justify-content: flex-end;
			position: relative;
            z-index: 1;

            @media @flyout {
                padding: 0;
				order: 3;
				flex: 0 0 50%;
            }

			@media @header_mobile_breakpoint {

			}


			.flyoutWrap {
				@media @above_flyout {
					justify-content: flex-end;
				}
			}


        }

    }



    .logo {
        float: none;
        clear: both;
        display: inline-block;
        width: 100%;
        max-width: 260px;
        margin: 0;
        height: auto;
        padding: 0;

		@media @flyout {
			max-width: 98px;
		}


        .imageWrap {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                width: 100%;
                height: auto;
            }

            img {
                width: auto;
                height: auto;
            }
        }
    }

    .searchForm {

        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        max-width: 743px;

        @media @flyout {
			max-width: ~"calc(100% - 100px)";
        }

		@media @header_mobile_breakpoint {
			width: 100%;
			flex: 0 0 100%;
			max-width: ~"calc(100% - 40px)";
		}

    }

    .js_toggleSearch {

        &.active + .fullScreenSearch {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
            transition: opacity 200ms linear, visibility 200ms linear;
        }
    }


    .fullScreenSearch {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        align-items: center;
        justify-content: center;
        background: #fff;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(10px);
        border-radius: 0;
        z-index: 99999999;

        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 200ms linear, visibility 200ms linear;

		display: none;

		.pageReady & {
			display: flex;
		}

        & > .wrapper {
            min-width: 100%;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            position: relative;

			@media @flyout {
				justify-content: flex-start;
			}

            @media @mobile {
                min-width: 100%;
            }

            .searchForm {
                margin: 0 auto;

				@media @flyout {
					margin: 0;
				}
            }
        }

        .searchControls {
            display: inline-block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 52px;
            z-index: 999;
            width: 48px;
            height: 48px;

			@media @flyout {
				right: 11px;
			}

            .menuClose {
                width: 100%;
                height: 100%;
                background: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
                opacity: 1;
                color: var(--header_actions_color);
                transition: opacity 200ms linear;

                &:hover, &:active, &:focus-visible {
                    color: var(--highlight_color);
                    transition: color 200ms linear;
                }



                svg {
                    width: 25px;
                    height: 22px;
                    color: inherit;

                }
            }

        }

    }


    .headerActions {

        width: 100%;
        height: 100%;
		display: flex;
        justify-content: flex-end;
        align-items: center;


        & > ul {

            display: flex;
            flex-direction: row;
			justify-content: flex-end;
            gap: 22px;
            width: "calc(100% + @{header_actions_gutter_space})";
            margin: 0 calc(0 - var(--header_actions_gutter_width));

            @media @flyout {
                width: auto;
                margin: 0;
            }

            &:before, &:after {
                display: none;
            }


            & > li {

                padding: 0 var(--header_actions_gutter_width);
                display: flex;
                align-items: center;
				flex: 0 0 auto;

                @media @flyout {
                    padding: 0;
                }

				&.flyoutButtonItem {

					display: none;

					@media @flyout {
						display:flex;
					}

				}

                &.loginListItem {

					@media all and (max-width: 400px) {
						display: none;
					}

					.button {
						white-space: nowrap;
						margin: 0;
					}
                }


                .headerCtaWrap {

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-width: 29px;


					.basketButton {

						overflow: visible;

					}

                }

                .actionButton, & > .button, .miniBasket > li > a {

                    border-radius: var(--header_actions_border_radius);
                    width: var(--header_actions_width);
                    height: var(--header_actions_height);
                    .rems(@header_actions_font_size);
                    line-height: var(--header_actions_line_height);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    color: var(--header_actions_color);
					background: var(--header_actions_bg_color);
					border-color: var(--header_actions_bg_color);
                    text-decoration: none;
                    padding: var(--header_actions_button_padding);
                    position: relative;
                    z-index: 1;
					margin: 0;
					backdrop-filter: none;

                    transition: color 200ms linear, background 200ms linear;


					&:after {
						display: none;
					}


                    .svgIcon {

                        width: 25px;
                        height: 22px;
                        margin: 0;
                        order: 1;

                        svg {
                            width: 100%;
                            height: 100%;
                        }
                    }


                    &:hover, &:active, :focus-visible, &.active {
                        color: var(--highlight_color);
                        transition: color 200ms linear, background 200ms linear;

                        .actionText {

                            & > span {
                                color: var(--highlight_color);
                                transition: color 200ms linear, background 200ms linear;
                            }
                        }

                    }


                    .actionText {
                        display: block;
                        font-weight: 600;
                        color: inherit;
                        .rems(20);
                        line-height: 25px;
                        order: 2;

						@media all and (max-width: 1200px) {
							display: none;
						}

                        & > span {
                            color: var(--primary_color);
                            transition: color 200ms linear;
                        }


                    }

                    .basketItemTotalPrice {
                        display: none !important;
                    }

                    &.miniBasketLink {

                        display: none;

                        .itemsInBasket {
                            display: flex;
                        }
                    }

                    .numberOfBasketItems {
                        position: absolute;
                        top: 2px;
                        right: 2px;
                        background: var(--alert_color);
                        color: #fff;
                        z-index: 2;
                        .rems(12);
                        line-height: 12px;
                        font-weight: bold;
                        width: 18px;
                        height: 18px;
                        padding: 4px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }





                }

            }

        }

    }

	.secondaryMenuWrap {

		.secondaryMenu {
			display: none;

			@media @above_flyout {
				display: block;
			}
		}

		.headerActions {

			display: flex;

		}
	}

    .miniBasketWrap {
        min-width: 29px;
    }

    .navigationBar {

        .outerNavBar {

            position: relative;

        }

        .navBarWrapper {

            display: flex;

            .navBarLeft {
                flex: 1 1 auto;
                display: flex;
                align-items: center;
            }

            .navBarRight {

                flex: 0 0 auto;
                margin-left: auto;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                @media @flyout {
                    width: 100%;
                    padding: 0;
                }

                @media @mobile {
                    padding: 0;
                }

                .menuList {

                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    @media @flyout {
                        width: 100%;
                        justify-content: flex-start;
                    }

                    &:before, &:after {
                        display: none;
                    }

                    & > li {
                        flex: 0 0 auto;
                        display: flex;
                        align-items: center;
                        margin-left: 16px;


                        &.flyoutButtonWrap {
                            align-self: flex-end;
                            display: flex;

                            @media @above_flyout {
                                display: none;
                            }
                        }

                        &.searchButtonTriggerWrap {
                            align-self: flex-end;
                            display: none;

                            @media all and (max-width: @desktop_search_breakpoint) {
                                display: flex;
                            }

                        }

                        &.telephoneButton {

                            @media @flyout {
                                margin-left: 0;
                                margin-right: auto;
                            }

                            a {
                                position: relative;
                                cursor: pointer;
                                text-decoration: none;
                                width: auto;
                                height: auto;
                                .rems(16);
                                line-height: 24px;
                                display: flex;
                                align-items: center;
                                color: var(--secondary_color);
                                transition: color 200ms linear;
                                padding: 16px 0;
                                font-weight: normal;

                                &:hover {
                                    color: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 10%);
                                    transition: color 200ms linear;
                                }

                                i {

                                    font-size: inherit;
                                    line-height: inherit;
                                    margin-right: 8px;
                                    width: 24px;
                                    height: 24px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: inherit;
                                    transition: color 200ms linear;
                                    position: relative;
                                    top: -1px;

                                    @media @flyout {
                                        font-size: 20px;
                                        line-height: 20px;
                                        position: relative;
                                        top: 1px;
                                    }

                                    &:before {
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                }

                                span {
                                    @media @flyout {
                                        line-height: 19px;
                                    }
                                }
                            }

                        }
                    }




                }


            }

        }

        .mobileSearchWrapper {

            .wrapper {

            }

            .searchForm {
                width: 100%;
                max-width: none;
            }


        }


    }


    .staticBlock {

        background: var(--secondary_color);
        color: #fff;
        padding: 8px 0;
        text-align: center;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        @media @mobile {
            min-height: 40px;
        }

        .staticBlockInstance {
            .wrapper();
            background: inherit;
            color: inherit;
            text-align: inherit;
            font-weight: inherit;
            display: flex;
            align-items: center;
            justify-content: center;




            &:before, &:after {
                display: none;
            }

            &, p {
                .rems(14);
                line-height: 24px;
                color: inherit;
                text-align: inherit;
                font-weight: inherit;

                @media @mobile {
                    .rems(12);
                    line-height: 16px;
                    min-width: 100%;
                }

                &:last-of-type {
                    margin: 0;
                }

                @media @mobile {
                    p {
                        visibility: hidden;
                        opacity: 0;
                        will-change: visibility, opacity;
                        transition: visibility 200ms linear, opacity 200ms linear;

                        .wf-active & {
                            visibility: visible;
                            opacity: 1;
                            transition: visibility 200ms linear, opacity 200ms linear;
                        }
                    }
                }
            }


            a {
                color: inherit;
                text-decoration: none;
                font-weight: inherit;
                transition: opacity 200ms linear;

                &:hover {
                    color: inherit;
                    text-decoration: none;
                    opacity: 0.8;
                    transition: opacity 200ms linear;
                }
            }
        }

    }

}




/*
* Checkout and Assessment form Header
*/
.progressHeader {

    background: var(--primary_color);
    box-shadow: none;
    float: none;
    clear: both;
    width: 100%;
    padding: 24px 0;
    position: relative;
    z-index: 9999;


    .logoWrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 24px;

        .logo {
            padding: 0;
        }

        .imageWrap {
            width: auto;
            height: auto;

            img {
                height: 48px;
                width: auto;

                @media @flyout {
                    width: 168px;
                    height: auto;
                }

            }
        }
    }


}

.headerContact {
    p {
        .rems(18);
        font-style: normal;
        font-weight: 500;
        line-height: 25.278px;
        text-align: right;

        strong {
            font-weight: 600;
        }
    }
}


.loginListItem2, .miniBasket2, .searchListItem2 {


	.button, .actionButton {

		background: transparent !important;
		padding: 0 !important;
		border: none !important;
		width: auto !important;
		height: 48px !important;
		display: flex !important;
        gap: 8px;
		align-items: center !important;
		justify-content: center !important;
        color: var(--text_color) !important;

		.svgIcon {
            color: var(--text_color) !important;
			width: 22px !important;
			height: 22px !important;
            transition: color 200ms linear;
            order: 1;

			svg {
                color: inherit !important;
                transition: color 200ms linear;
				width: 100% !important;
				height: 100% !important;
			}
		}

        &:hover, &:active, &:focus-visible {

            color: var(--highlight_color) !important;
            transition: color 200ms linear;

            .svgIcon {
                color: var(--highlight_color) !important;
                transition: color 200ms linear;
            }
        }

        .actionText {
            order: 2;
        }

	}

}
