:root {
	--sf-primary-color: #da182a;
	--sf-box-shadow: 0 0 10px rgba(0,0,0,.15);
	--sf-transition: all .3s ease;
}

@keyframes statusFade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#header-space, body #header-outer {
	background-color: transparent !important;
}

.single-product {
	#subtot {
		font-size: 1.15rem;
		margin-bottom: 1rem;
	}
}

#sf-header {
	background-color: var(--sf-primary-color);
	box-shadow: var(--sf-box-shadow);
	color: #fff;
	position: fixed;
	top: 20px;
	transition: var(--sf-transition);
	left: 20px;
	min-width: 360px;
	right: 20px;
	z-index: 9999;

	.header-wrapper {
		align-items: stretch;
		display: flex;
		justify-content: space-between;

		.site-branding {
			display: flex;
			margin: 0 40px 0 20px;
		}

		#logo {
			display: none;

			@media screen and (min-width: 1080px) {
				display: inline-block;
			}

			line-height: 1;
			margin: 5px 0;

			img {
				margin: 0 !important;
				margin-bottom: 0 !important;
			}
		}

		.whitelabel {
			display: none; 

			@media screen and (min-width: 1080px) {
				display: flex;
				align-items: center;

				span {
					font-weight: 600;
					color: white;
					font-family: 'Poppins';
					font-size: 1.1rem;
					text-wrap: nowrap;
					padding: 0.25rem 0 0.25rem 0.75rem;
					border-left: 1px solid white;
					margin-left: 0.25rem;
				}
			}
		}

		#logo-mobile {
			display: inline-block;
			height: 51px;

			@media screen and (min-width: 1080px) {
				display: none;
				
			}

			line-height: 1;
			margin: 5px 40px 5px 20px;

			img {
				height: 100%;
				margin: 0 !important;
				margin-bottom: 0 !important;
			}
		}

		.navigation-menu-wrapper {
			align-items: center;
			display: flex;

			@media screen and (min-width: 1080px) {
				justify-content: space-between;
				width: 100%;
			}

			#secondary-menu {
				height: 100%;

				#menu-secondary-menu {
					display: flex;
					height: 100%;

					.menu-item {
						display: none;
						height: 100%;

						@media screen and (min-width: 1080px) {
							display: flex;
						}

						a {
							align-items: center;
							border-bottom: 2px solid var(--sf-primary-color);
							color: white;
							display: flex;
							font-family: 'Poppins', sans-serif;
							font-size: 1rem;
							height: 100%;
							margin-right: 15px;
							transition: border-color .2s ease;

							&:hover {
								border-color: white;
							}
						}

						&.phone {
							display: none;

							@media screen and (min-width: 680px) {
								display: flex;
							}

							a {
								background-color: black;
								border: 0;
								font-size: 15px;
								font-weight: 700;
								line-height: 25px;
								text-transform: uppercase;
								margin: 0;
								padding: 20px 37px 20px 56px;
								position: relative;
								transition: all .3s ease;

								&::before {
									content: '';
									background-image: url('../png/flag-uk-2.png');
									background-size: contain;
									height: 15px;
									left: 0;
									top: 50%;
									margin-left: 20px;
									transform: translateY(-50%);
									position: absolute;
									width: 26px;
								}
								
								&::after {
									position: absolute;
									top: 50%;
									transform: translateY(-50%);
									right: 0;
									display: block;
									width: 7px;
									height: 7px;
									margin-right: 20px;
									content: '';
									border-radius: 50%;
									background: #5bb721;
									animation: statusFade 2s ease infinite;
								}
							}
						}

						&.cta {
							display: none;

							@media screen and (min-width: 1120px) {
								display: block;
							}

							a {
								background-color: #428415;
								border: 0;
								font-weight: 700;
								line-height: 25px;
								text-transform: uppercase;
								margin: 0;
								padding: 20px;
								transition: all .3s ease;

								&:hover {
									background-color: black;
								}
							}
						}
					}
				}
			}

			#primary-menu {
				height: 100%;

				#menu-primary-menu {
					display: flex;
					height: 100%;

					.icon::before {
						align-items: center;
						background-position: center;
						background-repeat: no-repeat;
						background-size: contain;
						content: '';
						display: flex;
						height: 20px;
						width: 20px;
					}
		
					.basket::before {
						background-image: url('../svg/shopping.svg');
					}

					.menu-item {
						display: none;
						height: 100%;

						@media screen and (min-width: 1080px) {
							display: flex;
							justify-content: center;
							align-items: center;
							gap: 0.5rem;
						}

						a {
							align-items: center;
							border-bottom: 2px solid var(--sf-primary-color);
							color: white;
							display: flex;
							font-family: 'Poppins', sans-serif;
							font-size: 1rem;
							height: 100%;
							margin-right: 15px;
							transition: border-color .2s ease;

							&:hover {
								border-color: white;
							}
						}

						&.phone {
							display: none;

							@media screen and (min-width: 680px) {
								display: flex;
							}

							a {
								background-color: black;
								border: 0;
								font-size: 15px;
								font-weight: 700;
								line-height: 25px;
								text-transform: uppercase;
								margin: 0;
								padding: 20px 37px 20px 56px;
								position: relative;
								transition: all .3s ease;

								&::before {
									content: '';
									background-image: url('../png/flag-uk-2.png');
									background-size: contain;
									height: 15px;
									left: 0;
									top: 50%;
									margin-left: 20px;
									transform: translateY(-50%);
									position: absolute;
									width: 26px;
								}
								
								&::after {
									position: absolute;
									top: 50%;
									transform: translateY(-50%);
									right: 0;
									display: block;
									width: 7px;
									height: 7px;
									margin-right: 20px;
									content: '';
									border-radius: 50%;
									background: #5bb721;
									animation: statusFade 2s ease infinite;
								}
							}
						}

						&.cta {
							display: none;

							@media screen and (min-width: 1120px) {
								display: block;
							}

							a {
								background-color: #428415;
								border: 0;
								font-weight: 700;
								line-height: 25px;
								text-transform: uppercase;
								margin: 0;
								padding: 20px;
								transition: all .3s ease;

								&:hover {
									background-color: black;
								}
							}
						}
					}
				}
			}

			.phone-icon-wrapper {
				align-items: center;
				display: flex;
				height: 100%;

				@media screen and (min-width: 680px) {
					display: none;
				}

				#phone-icon {
					background: url('../svg/icon-tel.svg') left center no-repeat;
					background-size: auto 25px;
					display: block;
					line-height: 1;
					height: 30px;
					width: 30px;
				}
			}

			#menu-toggle {
				background: 0;
				border: 0;
				margin: 0 20px;
				padding: 14px 0;
				border: none;

				@media screen and (min-width: 1080px) {
					display: none;
				}

				&:hover {
					cursor: pointer;

					.icon {
						&::before {
							top: -11px;
						}

						&::after {
							bottom: -11px;
						}
					}
				}

				.icon {
					display: block;
					width: 30px;
					height: 2px;
					content: '';
					background: #fff;
					position: relative;
					transition: all .2s ease;

					&::before {
						position: absolute;
						display: block;
						width: 30px;
						height: 2px;
						content: '';
						background: #fff;
						transition: all .2s ease;
						top: -9px;
					}

					&::after {
						position: absolute;
						display: block;
						width: 30px;
						height: 2px;
						content: '';
						background: #fff;
						transition: all .2s ease;
						bottom: -9px;
					}
				}
			}
		}
	}

	.secondary-header-wrapper {
		background-color: #fff;
		display: none;

		@media screen and (min-width: 1080px) {
			display: flex;
		}

		.navigation-menu-wrapper {
			align-items: center;
			display: flex;
			justify-content: center;
			padding: 0.5rem 1rem;

			@media screen and (min-width: 1080px) {
				width: 100%;
			}

			#tertiary-menu {
				height: 100%;

				#menu-tertiary-menu {
					display: flex;
					gap: 3rem;
					height: 100%;

					.menu-item {
						display: none;
						height: 100%;

						@media screen and (min-width: 1080px) {
							display: flex;
						}

						a {
							align-items: center;
							color: #222;
							display: flex;
							font-family: 'Poppins', sans-serif;
							font-size: 0.875rem;
							height: 100%;
							transition: color .2s ease;

							&:hover {
								color: var(--sf-primary-color);
							}
						}
					}
				}
			}
		}
	}

	.usps-wrapper {
		display: none;

		@media screen and (min-width: 1080px) {
			display: flex;
		}

		.usps {
			align-items: center;
			display: flex;
			justify-content: center;
			gap: 2.5rem;
			margin: 0;
			padding: 0.5rem 1rem;

			@media screen and (min-width: 1080px) {
				width: 100%;
			}

			li {
				font-family: 'Poppins', sans-serif;
				font-size: 0.875rem;
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}
			
			.icon::before {
				align-items: center;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				content: '';
				display: flex;
				height: 30px;
				width: 30px;
			}

			.traceable::before {
				background-image: url('../svg/traceable.svg');
			}

			.shopping::before {
				background-image: url('../svg/shopping.svg');
			}

			.packaging::before {
				background-image: url('../svg/packaging.svg');
			}

			.discount::before {
				background-image: url('../svg/discount.svg');
			}

			.certified::before {
				background-image: url('../svg/certified.svg');
			}
		}
	}
}

body {
	&.offcanvas-open {
		overflow: hidden;

		#sf-header {
			box-shadow: unset;
			
			.header-wrapper {
				.navigation-menu-wrapper {
					#primary-menu {
						#menu-primary-menu {
							.menu-item {
								&.phone {
									display: none;
								}
							}
						}
					}
				}
			}

			#menu-toggle {
				.icon {
					background: 0 0 !important;

					&::before {
						top: 0 !important;
    				transform: rotate(-45deg);
					}

					&::after {
						bottom: 0 !important;
						transform: rotate(45deg);
					}
				}
			}
		}
	}
}

.offcanvas {
	background-color: var(--sf-primary-color);
	display: block;
	height: 100%;
	left: 0;
	padding: 6rem 2rem 2rem;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: translateX(100%);
	transition: transform .3s ease;
	width: 100%;
	z-index: 9998;

	&.opened {
		pointer-events: all;
		transform: translateX(0);
	}

	.inner {
		padding: 2rem;

		#menu-tertiary-menu-1 {
			margin-top: 2rem;

			.menu-item {
				a {
					font-size: 20px;
				}
			}
		}

		.menu {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			list-style: none;
			margin: 0;
			padding: 0;

			.menu-item {
				a {
					text-align: right;
					color: white;
					display: block;
					font-size: 28px;
					font-family: 'Poppins', sans-serif;
					padding-block: 0.5rem;
					width: 100%;
				}

				&.cta,
				&.phone {
					display: none;
				}

				&.current-menu-item {
					a {
						text-decoration: underline;
					}
				}
			}
		}
	}
}