@charset "UTF-8";

/*-------------------------------------------*/
/*--- S I T E W I D E   C O N S T A N T S ---*/
/*-------------------------------------------*/

:root {
	/*--- Colours ---*/
	--black: 0, 0, 0;
	--grey-875: 32, 32, 32;
	--grey-750: 64, 64, 64;
	--grey-625: 96, 96, 96;
	--grey-500: 128, 128, 128;
	--grey-375: 160, 160, 160;
	--grey-250: 192, 192, 192;
	--grey-125: 224, 224, 224;
	--white: 255, 255, 255;

	/*--- DHS colours ---*/
	--bg: 245, 245, 245;
	--blue: 40, 60, 74;
	--green-dark: 25, 135, 84;
	--green-light: 4, 218, 141;
	--nss-blue: 31, 121, 183;
	--orange: 232, 106, 30;
	--red: 200, 13, 48;
	--yellow: 255, 193, 7;

	/*--- Skinning constants ---*/
	--header-bg: var(--white);
	--header-text: var(--grey-875);
	--header-button-bg: var(--red);
	--header-button-text: var(--white);
	--header-buttom-border: var(--grey-125);
	--header-search-bg-mobile: var(--red);
	--header-basket-count-bg: var(--red);
	--header-basket-count-text: var(--white);
	--header-basket-count-border: var(--white);

	--vat-toggle-bg-on: var(--blue);
	--vat-toggle-bg-off: var(--grey-125);
	--vat-toggle: var(--white);

	--nav-bg: var(--blue);
	--nav-text: var(--white);
	--nav-breadcrumb-color: var(--red);

	--form-legend: var(--blue);

	--button1-bg: var(--blue);
	--button1-text: var(--white);
	--button2-bg: var(--red);
	--button2-text: var(--white);
	--button3-bg: var(--yellow);
	--button3-text: var(--black);
	--button4-bg: var(--green-light);
	--button4-text: var(--grey-875);

	--tab-bg: var(--blue);
	--tab-text: var(--white);
	--tab-selected-bg: var(--red);
	--tab-selected-text: var(--white);

	--icon-grad-from: var(--yellow);
	--icon-grad-to: var(--red);

	--mega-button-border-hover: var(--yellow);
	--mega-button-strong-hover: var(--red);

	--default-link: var(--red);
	--account-link: var(--red);
	--usps-link: var(--red);
	--filter-selected: var(--red);

	--footer-middle-bg: var(--blue);
	--footer-middle-text: var(--white);
	--footer-bottom-bg: var(--red);
	--footer-bottom-text: var(--white);
}


/*-------------------------------*/
/*--- F O N T   A W E S O M E ---*/
/*-------------------------------*/

.button i:first-child:not(:last-child) {
	margin-left: -0.25rem;
	margin-right: 0.5rem;
}

.button i:last-child:not(:first-child) {
	margin-left: 0.5rem;
	margin-right: -0.25rem;
}

i.fa-grad::before {
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(45deg, rgb(var(--icon-grad-from)) -25%, rgb(var(--icon-grad-to)) 100%);
}


/*-------------------*/
/*--- G L O B A L ---*/
/*-------------------*/

html {
	background-color: rgb(var(--bg));
	line-height: 1;
	scroll-behavior: smooth;
}

html.smooth-scroll-off {
	scroll-behavior: unset !important;
}

body {
	font-family: 'roboto', arial, sans-serif;
	color: rgb(var(--grey-875));
}

a {
	color: rgb(var(--grey-875));
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

nav a {
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

/*--- form elements ---*/

.form {
	line-height: 1.5;
	padding: 1.5rem;
}

.form ~ .form {
	margin-top: 1.5rem;
}

.form hr {
	border: none;
	border-top: 1px solid rgb(var(--grey-125));
	margin: 2rem 0;
}

.form legend {
	background-color: rgb(var(--form-legend));
	color: rgb(var(--white));
	display: block;
	font-weight: 500;
	margin: -1.5rem -1.5rem 1.5rem;
	padding: 1rem 1.5rem;
	text-transform: uppercase;
	width: 150%;
}

.form p {
	margin: 1rem 0;
}

.form > :last-child {
	margin-bottom: 0 !important;
}

.form .form-fields {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
}

.form .form-fields label {
	display: block;
	font-weight: 500;
	padding-bottom: 0.5rem
}

.form .form-fields label sup {
	color: rgb(var(--red));
	padding-left: 0.25rem;
}

.form .form-fields li .address-lookup {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.form .form-fields li .address-lookup input,
.form .form-fields li .address-lookup select {
	flex: 1;
	width: auto;
}

.form .form-fields li .address-lookup p.error {
	color: rgb(var(--red));
	font-weight: 500;
	margin: 0;
	width: 100%;
}

.form .form-fields .form-commentary {
	color: rgb(var(--grey-625));
	font-size: 0.85rem;
}

.form .form-fields .form-heading {
	align-items: center;
	display: flex;
	font-size: 1.25rem;
	font-weight: 700;
	gap: 1rem;
}

.form .form-fields .form-heading i {
	font-size: 1.5rem;
}

.form .success-msg,
.form .error-msg {
	display: none;
	margin: 1.5rem;
}

.form .error-msg {
	color: rgb(var(--red));
}

.form .error-msg strong {
	font-weight: 700;
}

.form .error label {
	font-weight: 700;
	color: rgb(var(--red));
}

.form .error input[type=email],
.form .error input[type=number],
.form .error input[type=password],
.form .error input[type=search],
.form .error input[type=tel],
.form .error input[type=text],
.form .error input[type=url],
.form .error select,
.form .error textarea {
	border: 2px solid rgb(var(--red));
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(var(--green-light), 0.1);
	border: 1px solid rgb(var(--grey-250));
	border-radius: 0.25rem;
	box-sizing: border-box;
	color: rgb(var(--grey-875));
	font-size: 1rem;
	font-weight: 300;
	height: 2.5em;
	padding: 0.5em 0.75em;
	position: relative;
	transition: border 0.25s ease-in-out;
	width: 100%;
}

input[type=email]:invalid:not(:placeholder-shown),
input[type=password]:invalid:not(:placeholder-shown),
input[type=search]:invalid:not(:placeholder-shown),
input[type=tel]:invalid:not(:placeholder-shown),
input[type=text]:invalid:not(:placeholder-shown),
input[type=url]:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
	background-color: rgba(var(--red), 0.1);
}

input[type=email]:placeholder-shown,
input[type=password]:placeholder-shown,
input[type=search]:placeholder-shown,
input[type=tel]:placeholder-shown,
input[type=text]:placeholder-shown,
input[type=url]:placeholder-shown,
select:placeholder-shown,
textarea:placeholder-shown {
	background-color: rgba(var(--yellow), 0.1);
}

input[disabled],
select[disabled],
textarea[disabled] {
	background: transparent !important;
	border-color: transparent !important;
	cursor: not-allowed !important;
}

textarea {
	height: auto;
	min-height: 10rem;
	padding: 0.75em;
	width: 100% !important;
}

input[type=email].is-hovered,
input[type=number].is-hovered,
input[type=password].is-hovered,
input[type=search].is-hovered,
input[type=tel].is-hovered,
input[type=text].is-hovered,
input[type=url].is-hovered,
select.is-hovered,
textarea.is-hovered,
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover,
select:hover,
textarea:hover {
	border-color: rgb(var(--grey-250));
}

input.with-button {
	padding-right: 3.25rem;
}

input[type='radio'] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	border: 0.15em solid rgb(var(--grey-875));
	height: 1.15em;
	margin: 0;
	position: relative;
	width: 1.15em;
}

input[type='radio']::before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgb(var(--grey-875));
	border: 0.15em solid #FFF;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
}

input[type='radio']:checked::before {
	transform: scale(1);
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml,<svg height=\'10px\' width=\'10px\' viewBox=\'0 0 16 16\' fill=\'%23000000\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\'/></svg>');
	background-position: calc(100% - 0.75rem) center;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

label.select {
	position: relative;
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
}

label.select span {
	font-weight: 700;
	white-space: nowrap;
}

/*
label.select::after {
	position: absolute;
	top: 0;
	right: 0.75rem;
	content: "\f107";
	font-family: "Font Awesome 6 Pro";
	line-height: 2.5rem;
	pointer-events: none;
}
*/
::placeholder {
	color: rgb(var(--grey-500));
	opacity: 1;
}

::-ms-input-placeholder {
	color: rgb(var(--grey-500));
}

/*--- address lookup ---*/
.address-lookup #idpc_input_1,
.address-lookup #idpc_button_1,
.address-lookup #idpc_input_2,
.address-lookup #idpc_button_2 {
	display: block !important;
}

.address-lookup #idpc_dropdown_1,
.address-lookup #idpc_dropdown_2 {
	margin-top: -1rem;
	flex: 100%;
}

/*--- buttons ---*/
.button {
	align-items: center;
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.25em;
	display: inline-flex;
	font-weight: 500;
	gap: 0.5em;
	justify-content: center;
	line-height: 1.2;
	min-height: 2.5em;
	min-width: 2.5em;
	padding: 0.25rem 1em;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.button:hover {
	box-shadow: 0 0 0 100vmax inset rgba(var(--black), 0.1);
}

.button.-on-input {
	position: absolute;
	right: 0;
	padding: 0;
	color: rgb(var(--grey-875));
	background: transparent;
	border-color: transparent;
}

.button.-on-input:hover {
	border-color: rgb(var(--grey-250));
}

.button.-clear {
	background: transparent;
	border: none;
	box-shadow: none;
}

.button.-v1 {
	background-color: rgb(var(--button1-bg));
	border: 1px solid rgb(var(--button1-bg));
	color: rgb(var(--button1-text));
}

.button.-v2 {
	background-color: rgb(var(--button2-bg));
	border: 1px solid rgb(var(--button2-bg));
	color: rgb(var(--button2-text));
}

.button.-v3 {
	background-color: rgb(var(--button3-bg));
	border: 1px solid rgb(var(--button3-bg));
	color: rgb(var(--button3-text));
}

.button.-v4 {
	background-color: rgb(var(--button4-bg));
	border: 1px solid rgb(var(--button4-bg));
	color: rgb(var(--button4-text));
}

.button.-grey {
	background-color: rgb(var(--grey-375));
	border: 1px solid rgb(var(--grey-375));
	color: rgb(var(--white));
}

.button.-outline {
	background-color: rgb(var(--white));
	color: rgb(var(--grey-875));
}

a:hover .button.-blue.-outline {
	background-color: rgb(var(--red));
	color: rgb(var(--white));
}

.button.-square {
	padding: 0;
}

.button.-small {
	min-height: 2em;
	min-width: 2em;
}

.button.-big {
	font-size: 1.1rem;
	gap: 0.75rem;
	padding: 1rem;
	text-transform: uppercase;
}

.button.-big i {
	font-size: 1.25rem;
}

.button.-greyed,
.button[disabled] {
	opacity: 0.1;
	pointer-events: none;
}

.button.-full-width {
	width: 100%;
}

.button.-icon {
	width: 2.5rem;
	height: 2.5rem;
	min-width: auto;
	min-height: auto;
	padding: 0;
	font-size: 1.5rem;
	color: rgb(var(--white));
	background-color: rgb(var(--grey-125));
}

.button.-icon i {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*--- toggle switch ---*/
.switch {
	position: relative;
	display: inline-block;
	width: 3.6rem;
	height: 2rem;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(var(--grey-125));
	border-radius: 1rem;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: '';
	height: 1.6rem;
	width: 1.6rem;
	left: 0.2rem;
	bottom: 0.2rem;
	background-color: white;
	border-radius: 0.8rem;
	transition: .4s;
}

input:checked + .slider {
	background-color: rgb(var(--red));
}

input:focus + .slider {
	box-shadow: 0 0 1px rgb(var(--red));
}

input:checked + .slider:before {
	transform: translateX(1.6rem);
}

/*--- table element ---*/
.table {
	border-bottom: 1px solid rgb(var(--grey-125));
}

.table th {
	font-weight: 700;
}

.table th,
.table td {
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	line-height: 1.2;
}

.table td {
	border-top: 1px solid rgb(var(--grey-125));
}

.table th:last-child,
.table td:last-child {
	padding-right: 0.5rem;
}

.table tr:nth-child(odd) td {
	background-color: rgba(var(--bg), 0.25);
}

/*--- dialog ---*/
dialog {
	border: none;
	border-radius: 0.25rem;
	border-top: 3px solid rgb(var(--red));
	box-shadow: 0 0.125rem 0.25rem rgba(var(--black), 0.25);
	overflow: hidden;
	padding: 1.5rem
}

dialog header {
	background-color: rgb(var(--white));
	border-bottom: 1px solid rgb(var(--grey-125));
	left: 0;
	padding: 1rem;
	position: absolute;
	right: 0;
	top: 0;
}

dialog header h2 {
	line-height: 2rem !important;
}

dialog header button {
	position: absolute;
	right: 1rem;
	top: 1rem;
}

dialog header + div {
	height: 100%;
	margin: 4rem 0 4.5rem;
	max-height: calc(100vh - 11rem);
	overflow: scroll;
	padding: 1rem;
	width: 100%;
}

dialog footer {
	background-color: rgb(var(--white));
	border-top: 1px solid rgb(var(--grey-125));
	bottom: 0;
	left: 0;
	padding: 1rem;
	position: absolute;
	right: 0;
	text-align: right;
}

dialog footer button {
	text-align: right;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(1px);
}

/*--- image block ---*/
div.image,
a.image {
	position: relative;
	display: inline-flex;
	width: 100%;
	padding: 1rem;
	justify-content: center;
	align-items: center;
	aspect-ratio: 4/3;
	flex-shrink: 0;
	background: linear-gradient(0, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
	url('/images/dhs_logo.svg') center / 35% auto no-repeat;
	border: 1px solid rgb(var(--grey-125));
}

div.image img,
a.image img {
	max-height: 100%;
	max-width: 100%;
	background-color: rgb(var(--white));
}

/*-----------------------------*/
/*--- M E G A   B U T T O N ---*/
/*-----------------------------*/

.mega-button {
	display: flex;
	height: 100%;
	padding: 1.5rem;
	gap: 1.25rem;
	text-decoration: none;
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
	transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.mega-button i {
	font-size: 2.25rem;
}

.mega-button p {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.mega-button strong {
	font-size: 1.25rem;
	font-weight: 500;
	transition: color 0.25s ease-in-out;
}

.mega-button:hover {
	border-color: rgb(var(--mega-button-border-hover));
	box-shadow: 0 0.25rem 0.25rem rgba(var(--grey-250), 0.5);
}

.mega-button:hover strong {
	color: rgb(var(--mega-button-strong-hover));
}


/*-------------------------*/
/*--- T A B   B L O C K ---*/
/*-------------------------*/

.tab-block {
	position: relative;
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
	overflow: hidden;
}

.tab-block > ul {
	display: flex;
	background-color: rgb(var(--grey-125));
	border-radius: 0.5rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	overflow: hidden;
}

.tab-block > ul li ~ li {
	border-left: 1px solid transparent;
}

.tab-block button[role=tab],
.tab-block > button {
	padding: 0.75rem 1rem;
	color: rgb(var(--tab-text));
	background-color: rgb(var(--tab-bg));
	border: none;
	transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.tab-block > button {
	display: none;
}

.tab-block button[role=tab]:hover {
	box-shadow: 0 0 0 100vmax inset rgba(var(--black), 0.5);
}

.tab-block button[role=tab][aria-expanded=true],
.tab-block button[role=tab][aria-expanded=true]:hover {
	color: rgb(var(--tab-selected-text));
	background-color: rgb(var(--tab-selected-bg));
	box-shadow: none;
}

.tab-block div[role=tabpanel] {
	display: none;
	padding: 1.5rem;
}

.tab-block div[role=tabpanel].is-expanded {
	display: block;
}


/*---------------------*/
/*--- F I L T E R S ---*/
/*---------------------*/

.filters h4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	font-weight: 500;
	background-color: rgb(var(--grey-125));
}

.filters h4 a {
	font-size: 0.875rem;
	font-weight: 400;
}

.filters ul {
	display: flex;
	flex-direction: column;
	margin: 1rem 0;
	padding: 0 1.5rem;
	gap: 0.675rem;
}

.filters ul li a {
	display: inline-block;
	text-decoration: none;
}

.filters ul li a:hover {
	text-decoration: underline;
}

.filters ul li.selected a {
	color: rgb(var(--filter-selected));
	font-weight: 500;
}

.filters ul li a {
	font-size: 0.875rem;
}


/*-------------------------------------*/
/*--- B O X   G R I D   /   L I S T ---*/
/*-------------------------------------*/

/*--- box grid ---*/
.box-grid {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1.5rem;
}

.box-grid > div,
.box-grid > a {
	position: relative;
	padding: 1rem;
	text-align: center;
	text-decoration: none;
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
	overflow: hidden;
}

/*--- show 5 wide on desktop, 3 wide on tablet, 1 wide on mobile ---*/
.box-grid.-d5-t3-m2 > div,
.box-grid.-d5-t3-m2 > a {
	flex-basis: calc((100% - 6rem) / 5);
}

/*--- show 4 wide on desktop, 3 wide on tablet, 1 wide on mobile ---*/
.box-grid.-d4-t3-m2 > div,
.box-grid.-d4-t3-m2 > a {
	flex-basis: calc((100% - 4.5rem) / 4);
}

/*--- show 3 wide on desktop, 3 wide on tablet, 1 wide on mobile ---*/
.box-grid.-d3-t3-m2 > div,
.box-grid.-d3-t3-m2 > a {
	flex-basis: calc((100% - 3rem) / 3);
}

.box-grid h2 {
	font-weight: 500;
	line-height: 1.2;
}

.box-grid .button {
	font-size: 0.875rem;
	font-weight: 400;
}

/*--- box list ---*/
.box-list > div {
	position: relative;
	padding: 1rem;
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-bottom: none;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
}

.box-list > div:first-child {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.box-list > div:last-child {
	border-bottom: 1px solid rgb(var(--grey-125));
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}


/*---------------------------*/
/*--- P A G I N A T I O N ---*/
/*---------------------------*/

.pagination label {
	align-items: center;
	display: flex;
	font-weight: 500;
	gap: 0.25rem;
	margin: 0 0.25rem;
}

.pagination select {
	background-color: rgb(var(--white));
}

.pagination ul {
	align-items: center;
	display: flex;
	gap: 0.25rem;
	justify-content: center;
}


/*---------------------*/
/*--- L O A D I N G ---*/
/*---------------------*/

.is-loading {
	display: none;
}

i.fa-loader {
	animation: loading 4s linear infinite;
}

@keyframes loading {
	to {
		transform: rotate(360deg);
	}
}


/*-----------------------------*/
/*--- P A G E   H E A D E R ---*/
/*-----------------------------*/

.pre-header-warning {
	background-color: rgb(var(--red));
	box-shadow: 0 -0.25rem 0.25rem inset rgba(var(--grey-625), 0.25);
	color: rgb(var(--white));
	font-size: 0.875rem;
	font-weight: 500;
	padding: 1.5rem;
	position: relative;
	text-align: center;
	z-index: 999;
}

/*--- page header nav ---*/
#page-header {
	position: relative;
	z-index: 25;
	background-color: rgb(var(--header-bg));
}

#page-header-nav {
	padding: 0.75rem 0;
}

#page-header-nav ul {
	display: flex;
	height: 1rem;
	justify-content: flex-end;
	column-gap: 1.5rem;
}

#page-header-nav li {
	position: relative;
}

#page-header-nav li::after {
	position: absolute;
	right: calc(-0.75rem + -1px);
	content: '|';
}

#page-header-nav li:last-child::after {
	content: none;
}

#page-header-nav a {
	font-size: 0.75rem;
	color: rgb(var(--header-text));
	transition: color 0.25s ease-in-out;
}

#page-header-nav a:hover {
	color: rgb(var(--header-text));
}

/*--- page header logo ---*/
#page-header-logo {
	margin-top: -1.75rem;
}

#page-header-logo a {
	display: block;
	height: 4.25rem;
	width: 10rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url('/images/dhs_logo.svg');
}

/*--- page header search ---*/
#page-header-search {
	margin-top: -0.75rem;
	max-width: 600px;
}

#page-header-search div {
	position: relative;
}

#page-header-search input {
	background-color: rgb(var(--white)) !important;
	z-index: 105;
}

#page-header-search .button.-on-input {
	z-index: 105;
}

/*--- algolia autocomplete search box ---*/
.algolia-autocomplete {
	width: 100%;
}

.algolia-autocomplete .aa-dropdown-menu {
	top: calc(100% - 0.5rem) !important;
	width: 100%;
	max-width: 96vw;
	margin: 0 auto;
	padding: 0.5rem 0 0;
	background-color: rgb(var(--white));
	border-radius: 0 0 0.4rem 0.4rem;
	border: 1px solid rgb(var(--grey-375));
	box-shadow: 0 0.125rem 0.25rem rgba(var(--black), 0.25);
}

.algolia-autocomplete .aa-dropdown-menu h4 {
	display: flex;
	padding: 0.5rem 0.75rem;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	background-color: rgba(var(--grey-125), 0.5);
}

.algolia-autocomplete .aa-dropdown-menu i {
	font-size: 1.5rem;
}

.algolia-autocomplete .aa-dropdown-menu a {
	display: block;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--grey-125));
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion:last-child a {
	border-bottom: 0;
}

.algolia-autocomplete .aa-dropdown-menu .aa-cursor a,
.algolia-autocomplete .aa-dropdown-menu a:hover {
	color: rgb(var(--red));
	text-decoration: underline;
}

/*--- page header buttons ---*/
#page-header-buttons {
	display: inline-flex;
}

#page-header-buttons a:hover {
	text-decoration: none;
}

/*--- vat toggle ---*/
.vat-toggle {
	display: flex;
	margin-right: 1.5rem;
}

.vat-toggle label {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	color: rgb(var(--header-text));
	font-size: 0.875rem;
	font-weight: 700;
}

.vat-toggle .slider {
	background-color: rgb(var(--vat-toggle-bg-off));
}

.vat-toggle .slider:before {
	background-color: rgb(var(--vat-toggle));
}

.vat-toggle input:checked + .slider {
	background-color: rgb(var(--vat-toggle-bg-on));
}

/*--- basket summary ---*/
#basket-summary {
	display: inline-flex;
}

#basket-summary .button:first-of-type {
	position: relative;
	border-color: rgb(var(--header-buttom-border));
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#basket-summary .button:last-of-type {
	position: relative;
	color: rgb(var(--header-button-text));
	background-color: rgb(var(--header-button-bg));
	border-color: rgb(var(--header-buttom-border));
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#basket-summary .count {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	display: flex;
	width: 1.5rem;
	height: 1.5rem;
	justify-content: center;
	align-items: center;
	font-size: 0.75rem;
	color: rgb(var(--header-basket-count-text));
	font-weight: 700;
	background-color: rgb(var(--header-basket-count-bg));
	border: 2px solid rgb(var(--header-basket-count-border));
	border-radius: 100%;
}


/*-------------------------------------*/
/*--- P A G E   N A V I G A T I O N ---*/
/*-------------------------------------*/

#page-nav {
	position: relative;
	z-index: 20;
	margin-top: 0.75rem;
	justify-content: center;
	background-color: rgb(var(--nav-bg));
}

#page-nav-links {
	position: relative;
}

#page-nav-links > li {
	flex: 1 1 auto;
}

#page-nav-links > li > a,
#page-nav-links > li > strong,
#page-nav-links > li > form > button {
	align-items: center;
	border: none;
	color: rgb(var(--nav-text));
	display: flex;
	font-size: 0.875rem;
	font-weight: 500;
	height: 100%;
	justify-content: center;
	padding: 1.125rem 0.75rem;
	text-align: center;
	width: 100%;
}

#page-nav-links > li > a:hover {
	text-decoration: none;
}

#page-nav-links > li > a.is-hovered {
	background-color: rgb(var(--white));
	color: rgb(var(--grey-875));
}

#page-nav-links .page-nav-menu {
	position: absolute;
	left: 0;
	z-index: 20;
	display: flex;
	width: 100%;
	padding: 0.75rem;
	flex-wrap: wrap;
	background-color: rgb(var(--white));
}

#page-nav-links .page-nav-menu ul {
	width: 100%;
	columns: 4;
}

#page-nav-links .page-nav-menu li {
	padding: 0.625rem;
}

#page-nav-links .page-nav-menu a {
	font-size: 0.8125rem;
	font-weight: 400;
}

#page-nav-links .page-nav-menu a:hover {
	color: rgb(var(--grey-875));
}

#page-nav-links .page-nav-menu > a {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
	padding: 0.75rem;
	font-weight: 500;
	text-align: center;
	background-color: rgb(var(--grey-125));
}

#page-nav-underlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(var(--black), 0.5);
}


/*---------------*/
/*--- U S P S ---*/
/*---------------*/

#usps {
	background-color: rgb(var(--white));
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
	position: relative;
}

#usps li {
	padding: 1rem 0.75rem 1.25rem;
	flex: 1 1 auto;
}

#usps li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	transition: color 0.25s ease-in-out;
}

#usps li a:hover {
	color: rgb(var(--usps-link));
}

#usps li a i {
	font-size: 2.25rem;
}

#usps li a p {
	line-height: 1.2;
}

#usps li a p strong {
	font-weight: 500;
}


/*-----------------------------*/
/*--- B R E A D C R U M B S ---*/
/*-----------------------------*/

#breadcrumbs {
	background-color: rgb(var(--bg));
}

#breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0.875rem;
}

#breadcrumbs ul li {
	align-items: center;
	color: rgb(var(--grey-875));
	display: inline-flex;
	font-size: 0.75rem;
	line-height: 1.5;
	position: relative;
}

#breadcrumbs ul li::after {
	content: '/';
	font-weight: 700;
	margin: 0 0.375rem;
}

#breadcrumbs ul li:last-child::after {
	content: '';
}

#breadcrumbs ul li a {
	color: rgb(var(--nav-breadcrumb-color));
}

#breadcrumbs ul li:last-child a {
	color: rgb(var(--grey-875));
}


/*---------------*/
/*--- M A I N ---*/
/*---------------*/

main {
	background-color: rgb(var(--bg));
	padding: 1.5rem;
}

main h1 {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	padding-bottom: 1.5rem;
}

/*--- content box ---*/
main .content-box {
	background-color: rgb(var(--white));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
	display: block;
	overflow: hidden;
	padding: 1.5rem;
}

main .content-box.dark {
	background-color: rgb(var(--red));
	color: rgb(var(--white));
}

main .content-box.error {
	background-color: rgba(var(--red), 0.4);
}

main .content-box.success {
	background-color: rgba(var(--green-light), 0.4);
}

main .content-box.-sticky {
	position: sticky;
	top: 1.5rem;
}

main .content-box.-no-padding {
	padding: 0;
}

main .content-box.-gap {
	margin-top: 1.5rem;
}

main .content-box.-full-height {
	height: 100%;
}

main .content-box.has-icon {
	display: flex;
	gap: 1rem;
}

main .content-box.has-icon > i {
	font-size: 2.25rem;
}

main .content-box.error.text a {
	color: rgb(var(--grey-875));
	text-decoration: underline;
}

/*--- text content ---*/
main .text h1 {
	padding-bottom: 0;
}

main .text h2 {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
}

main .text h3 {
	margin-top: 1.5rem;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

main .text p {
	margin-top: 1rem;
	line-height: 1.5;
}

main .text strong {
	font-weight: 700;
}

main .text ol,
main .text ul {
	list-style: square;
	margin-top: 1rem;
	padding-left: 2rem;
}

main .text ol {
	list-style: decimal;
}

main .text ol li,
main .text ul li {
	line-height: 1.5;
	padding-left: 0.25rem;
}

main .text ol li ~ li,
main .text ul li ~ li {
	margin-top: 0.5rem;
}

main .text ol li::marker,
main .text ul li::marker {
	color: rgb(var(--default-link));
	font-weight: 500;
}

main .text a {
	color: rgb(var(--default-link));
	text-decoration: none;
}

main .text a:hover {
	text-decoration: underline;
}

main .text .table {
	margin: 1rem 0 0 0;
}

main .text hr {
	margin-top: 2rem;
	border: none;
	border-top: 1px solid rgb(var(--grey-125));
}

main .text h2:first-child,
main .text h3:first-child,
main .text p:first-child,
main .text ul:first-child,
main .text table:first-child {
	margin-top: 0;
}


/*-------------------*/
/*--- B A N N E R ---*/
/*-------------------*/

a.banner img {
	width: 100%;
}


/*---------------*/
/*--- B L O G ---*/
/*---------------*/

#blog-list article {
	display: flex;
	padding: 1.5rem 0;
	border-top: 1px solid rgb(var(--grey-125));
}

#blog-list article:first-child {
	padding-top: 0;
	border: none;
}

#blog-list article:last-child {
	padding-bottom: 0;
}

#blog-list article a.image {
	width: 15rem;
	margin-right: 1.5rem;
	flex-shrink: 0;
	background: url('/images/dhs_logo.svg') center / 35% auto no-repeat;
	border: 1px solid rgb(var(--grey-125));
}

#blog-list article a.image:after {
	position: relative;
	display: block;
	padding-bottom: 56.25%;
	content: '';
}

#blog-list article h2 {
	font-size: 1.25rem;
}

#blog-list article h2 a {
	text-decoration: none;
}

#blog-list article h2 a:hover {
	text-decoration: underline;
}

#blog-list article time {
	display: block;
	padding-top: 0.5rem;
	color: rgb(var(--grey-375));
}

#blog .filters ul li a {
	display: flex;
	justify-content: space-between;
}


/*-----------------------------------*/
/*--- B O I L E R   M A N U A L S ---*/
/*-----------------------------------*/

#boiler-manuals .box-grid h2 {
	margin: 1rem 0;
}


/*-----------------------------------------*/
/*--- C O L L E C T I O N   P O I N T S ---*/
/*-----------------------------------------*/

#city-list div {
	padding: 1rem 0;
	margin: 1rem 1.5rem;
}

#city-list div ~ div {
	border-top: 1px solid rgb(var(--grey-125));
}

#city-list h2 {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 500;
	color: rgb(var(--white));
	background-color: rgb(var(--red));
}

#city-list ul {
	padding-top: 1rem;
	column-count: 4;
	list-style-type: '– ';
	list-style-position: inside;
	font-size: 0.875rem;
}

#city-list div:last-child ul {
	border: none;
}

#city-list li {
	padding: 0.375rem 0;
	max-width: 90%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#city-list li a {
	line-height: 1.2;
	text-decoration: none;
}

#city-list li a:hover {
	text-decoration: underline;
}

#city-jump-links {
	position: sticky;
	top: 1.5rem;
}

#city-jump-links ul {
	display: flex;
	padding: 1rem;
	flex-wrap: wrap;
	gap: 0.375rem;
}

#city-jump-links ul li {
	width: calc((100% - 2.25rem) / 7);
}

#city-jump-links ul .button {
	position: relative;
	width: 100%;
	min-width: 0;
	min-height: 0;
	font-size: 0.875rem;
	font-weight: 400;
	aspect-ratio: 1/1;
	border-radius: 0;
}

#collection-points .column.is-full {
	order: 3;
}

#collection-points #ups-map {
	aspect-ratio: 16/9;
}

#ups-map .ups-collection-point {
	max-width: 15rem;
	font-size: 0.75rem;
	line-height: 1.5;
}

#ups-map .ups-collection-point img {
	max-width: 15rem;
	max-height: 15rem;
}

#ups-map .ups-collection-point p {
	margin-top: 0.5rem;
}


/*---------------------------*/
/*--- C O N T A C T   U S ---*/
/*---------------------------*/

#contact .text .social-media {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

#contact .text .social-media li {
	font-size: 1.75rem;
	line-height: 1;
	margin: 0;
}


/*-------------------------------------------------*/
/*--- C U S T O M E R   A C C O U N T   A R E A ---*/
/*-------------------------------------------------*/

#customer-addresses .address {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#customer-addresses .address ~ .address {
	border-top: 1px solid rgb(var(--grey-125));
	margin-top: 2rem;
	padding-top: 2rem;
}

#customer-addresses .address form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: center;
}

#customer-addresses .address ul {
	list-style: none;
	margin: 0;
}

#customer-addresses .address ul li:first-child {
	font-weight: 500;
	text-transform: uppercase;
}

#customer-addresses .address .address-preference {
	align-items: center;
	color: rgb(var(--green-dark));
	display: flex;
	font-weight: 500;
	gap: 0.75rem;
	margin: 1rem 0 0;
	width: 100%;
}

#customer-addresses .address .address-preference ~ .address-preference {
	margin: 0.5rem 0 0;
}

#customer-addresses .address .address-preference i {
	width: 1.25rem;
}

#customer-orders .order,
#customer-order .order,
#invoice-list .invoice {
	align-items: center;
	display: flex;
	gap: 3rem;
	justify-content: space-between;
}

#customer-orders .order ~ .order,
#invoice-list .invoice ~ .invoice {
	border-top: 1px solid rgb(var(--grey-125));
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

#customer-orders .order span,
#customer-order .order span,
#invoice-list .invoice span {
	display: inline-flex;
	flex-direction: column;
}

#customer-orders .order span ~ span,
#customer-order .order span ~ span,
#invoice-list .invoice span ~ span {
	margin-left: 3rem;
}

#customer-orders .order span i,
#customer-order .order span i,
#invoice-list .invoice span i {
	color: rgb(var(--grey-500));
	display: inline-block;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

#customer-order .order-items ul {
	list-style: none;
}

#customer-order .order-items ul li {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgb(var(--grey-125));
}

#customer-order .order-items ul li:first-child {
	padding-top: 0;
}

#customer-order .order-items ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

#customer-sidebar {
	width: 16rem;
}

#customer-sidebar ul li ~ li {
	margin-top: 1.25rem;
}

#customer-sidebar ul li .sidebar-item {
	align-items: center;
	background-color: rgb(var(--white));
	border: none;
	color: rgb(var(--account-link));
	display: flex;
	font-weight: 500;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	text-decoration: none !important;
	width: 100%;
}

#customer-sidebar ul li .sidebar-item i {
	font-size: 1.25rem;
	width: 1.5rem;
}

#customer-sidebar ul li .sidebar-item:hover span {
	color: rgb(var(--grey-875));
}


/*-----------------------------------------------------------*/
/*--- F R E Q U E N T L Y   A S K E D   Q U E S T I O N S ---*/
/*-----------------------------------------------------------*/

#faq-jump-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

#faq-jump-links ul li {
	flex: 0 1 calc((100% - 4.5rem) / 4);
}

#faqs .content-box {
	padding-top: 1rem;
}

#faqs .faq-group {
	margin-top: 2rem;
	padding-top: 0.5rem;
}

#faqs .faq-group:first-of-type {
	margin: 0;
}

#faqs .faq-group h2 {
	display: flex;
	padding-bottom: 0.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: 1.5rem;
	font-weight: 500;
}

#faqs .faq-group h2 i {
	font-size: 2.25rem;
}

#faqs .faq .question {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	display: flex;
	width: 100%;
	padding: 1rem 0.5rem;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
	background: transparent;
	border: none;
	border-top: 1px solid rgb(var(--grey-125));
}

#faqs .faq:first-of-type .question {
	border: none;
}

#faqs .faq .question span {
	line-height: 1.5;
}

#faqs .faq .question i {
	transition: transform ease-in-out 0.5s;
}

#faqs .faq .question[aria-expanded=true] {
	font-weight: 700;
	color: rgb(var(--red));
}

#faqs .faq .question[aria-expanded=true] i {
	transform: rotate(180deg);
}

#faqs .faq .question:hover span {
	text-decoration: underline;
}

#faqs .faq .answer {
	display: none;
	padding: 1rem 0.5rem 2rem;
}

#faqs .faq:last-child .answer {
	padding-bottom: 0;
}


/*-----------------------------------------*/
/*--- S H O P   :   B R A N D   L I S T ---*/
/*-----------------------------------------*/

#brand-list .box-grid h2 {
	margin: 1rem 0;
}


/*-------------------------------------------------*/
/*--- S H O P   :   A P P L I N A C E   L I S T ---*/
/*-------------------------------------------------*/

#appliance-list #search {
	padding: 1.5rem;
	color: rgb(var(--white));
	background-color: rgb(var(--red));
}

#appliance-list #search form {
	position: relative;
	padding: 1.5rem 0;
}

#appliance-list #search input[type=text] {
	background-color: rgb(var(--white));
}

#appliance-list #search p {
	line-height: 1.5;
	text-align: center;
}

#appliance-list #search p a {
	color: rgb(var(--white));
}

#appliance-list #list {
	position: relative;
	padding: 1.5rem;
}

#appliance-list #list table {
	width: 100%;
}

#appliance-list #list th,
#appliance-list #list td {
	vertical-align: middle;
}

#appliance-list #list td div {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	gap: 0.75rem;
}

#appliance-list .is-loading {
	position: absolute;
	left: 50%;
	top: 50%;
	display: none;
	transform: translateX(-50%) translateY(-50%);
}

#appliance-list #list .is-loading {
	font-size: 10rem;
}


/*-----------------------------------------------*/
/*--- S H O P   :   C A T E G O R Y   L I S T ---*/
/*-----------------------------------------------*/

#category-list .box-grid div.image {
	margin-bottom: 1rem;
	aspect-ratio: 1/1;
}


/*---------------------------------------------*/
/*--- S H O P   :   P R O D U C T   L I S T ---*/
/*---------------------------------------------*/

/*--- header text ---*/
h1 + section .social div {
	margin-top: 0.5rem;
}

h1 + section .social div i {
	margin-right: 0.25rem;
}

/*--- exploded diagrams ---*/
#product-list .sub-appliance-images a {
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem;
	aspect-ratio: 1;
	background-color: rgb(var(--white));
	border-radius: 0.5rem;
	overflow: hidden;
}

#product-list .sub-appliance-images a h3 {
	font-size: 1rem;
	font-weight: bold;
	z-index: 1;
}

#product-list .sub-appliance-images a i {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	font-size: 2rem;
	color: rgb(var(--black));
}

#product-list .sub-appliance-images a.image > * { pointer-events: none; }

#product-list .sub-appliance-images .zoomed {
	background: rgb(var(--white));
	cursor: zoom-in;
}

#product-list .sub-appliance-images .zoomed img {
	position: absolute;
	top: calc(50%);
	left: calc(50%);
	width: 300%;
	height: auto;
	max-width: none;
	max-height: none;
	transform: translate(-50%, -50%);
}

/*--- options bar ---*/
#product-list .options {
	display: flex;
	width: 100%;
	padding: 0.75rem 1rem;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	background-color: rgb(var(--grey-125));
	border-radius: 0.4rem;
}

#product-list .display-type {
	display: flex;
	gap: 0.25rem;
}

#product-list .display-type i {
	font-size: 1.25rem;
}

#product-list .display-type button {
	opacity: 0.5;
}

#product-list .display-type button.-selected {
	opacity: 1;
}

#product-list .sort-by {
	flex: 1;
}

#product-list .sort-by select {
	background-color: rgb(var(--white));
}

#product-list .counts {
	font-weight: 500;
}

/*--- filters ---*/
#product-list .filters ul {
	max-height: 9.5rem;
	overflow-y: scroll;
	overflow-x: hidden;
}

#product-list #appliance-filters ul {
	max-height: 19.5rem;
}

#product-list .filters ul li {
	order: 2;
}

#product-list .filters ul li.selected {
	order: 1;
}

/*--- product ---*/
#product-list a.appliance {
	line-height: 1.5;
	background-color: rgb(var(--button1-bg));
	color: rgb(var(--button1-text));
	transition: 0.25s ease-in-out;
}

#product-list a.appliance:hover {
	box-shadow: 0 0 0 100vmax inset rgba(var(--black), 0.1);
}

#product-list hr {
	width: 100%;
	margin-bottom: 1.5rem;
	border: none;
	border-top: 1px solid rgb(var(--grey-125));
}

#product-list .product a,
#product-details .product a {
	text-decoration: none;
}

#product-list .product a:hover,
#product-details .product a:hover {
	text-decoration: underline;
}

#product-list .key-reference {
	display: flex;
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 800;
	text-align: center;
	color: rgb(var(--header-basket-count-text));
	background-color: rgb(var(--header-basket-count-bg));
	border-radius: 1.5rem;
	border: 1px solid rgb(var(--header-basket-count-border));
	overflow: hidden;
}

.product .badge,
#product-details .badge,
#basket .badge {
	position: absolute;
	top: -0.5rem;
	left: -0.5rem;
	display: flex;
	width: 5em;
	height: 5em;
	justify-content: center;
	align-items: center;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: rgb(var(--button4-text));
	background-color: rgb(var(--button4-bg));
	border-radius: 5em;
	transform: rotate(-15deg);
}

#product-list .product p.references,
#product-details .product p.references {
	font-size: 0.875rem;
}

#product-list .product p.price,
#product-details p.price {
	font-size: 0.875rem;
	color: rgb(var(--grey-500));
	line-height: 1;
}

#product-list .product p.price strong,
#product-details p.price strong {
	font-size: 1.5rem;
	font-weight: 500;
	color: rgb(var(--black));
}

#product-list .product > div > div,
#product-details .product > div > div {
	display: flex;
	align-items: center;
}

.button.-favourite.-on {
	color: rgb(var(--white));
	background-color: rgb(var(--red));
}

.button.-favourite:not(.-on) i:first-child:not(:last-child) {
	display: none;
}

.button.-favourite.-on i:last-child {
	display: none;
}

p.stock-status {
	font-weight: 700;
	line-height: 1.2;
}

p.stock-status.-in-stock {
	color: rgb(var(--green-dark));
}

p.stock-status.-in-stock-delay {
	color: rgb(var(--orange));
}

p.stock-status.-withdrawn {
	color: rgb(var(--red));
}

p.stock-status.-unknown {
	color: rgb(var(--grey-500));
}

/*--- box grid ---*/
#product-list .box-grid .product,
#product-details .box-grid .product {
	padding-bottom: 3.5rem;
	text-align: left;
}

#product-list .box-grid .product h2,
#product-details .box-grid .product h2 {
	min-height: 2.4rem;
	margin: 1rem 0;
}

#product-list .box-grid .product > div > div,
#product-details .box-grid .product > div > div {
	gap: calc(2.1875rem / 2);
	padding: 1rem 0;
}

#product-list .box-grid .product .button.favourite,
#product-details .box-grid .product .button.favourite {
	width: 2.1875rem;
	height: 2.1875rem;
	font-size: 1.25rem;
}

#product-list .box-grid p.stock-status,
#product-details .box-grid p.stock-status {
	margin-top: 2.5rem;
}

#product-list .box-grid p.price + p.stock-status,
#product-details .box-grid p.price + p.stock-status {
	margin-top: 1rem;
}

#product-list .box-grid .product form .button,
#product-details .box-grid .product form .button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 1rem;
	border-radius: 0;
	width: 100%;
}

/*--- box list ---*/
#product-list .box-list .product {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

#product-list .box-list .product .key-reference {
	left: -0.5rem;
	bottom: -0.5rem;
}

#product-list .box-list .product > a {
	flex-basis: 15%;
}

#product-list .box-list .product > div,
#product-list .box-list .product > form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

#product-list .box-list .product > div:first-of-type {
	flex: 1;
}

#product-list .box-list .product > div > div,
#product-details .box-list .product > div > div {
	gap: 1.25rem;
}

#product-list .box-list .product form {
	text-align: right;
	flex-basis: 30%;
	align-items: flex-end;
}

#product-list .box-list .product > form .button {
	width: 100%;
}

#product-list .box-list .product p.stock-status {
	margin-top: -0.5rem;
}

/*--- this part fits (modal) ---*/
#this-part-fits-modal {
	min-width: 30vw;
	padding: 0;
}

#this-part-fits-modal ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
}

#this-part-fits-modal ul a {
	padding: 0.25rem 0.5rem;
	display: block;
	border: 1px solid rgb(var(--grey-125));
}

/*--- recently viewed products ---*/
.rvp h2 {
	font-size: 1.25rem;
	font-weight: 500;
}


/*---------------------------------------------------*/
/*--- S H O P   :   P R O D U C T   D E T A I L S ---*/
/*---------------------------------------------------*/

#product-details #product-specification {
	padding: 0;
}

#product-details #product-specification li {
	align-items: center;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

#product-details #product-specification li p {
	display: flex;
	margin-top: 0 !important;
	align-items: center;
	gap: 0.5rem;
}

#product-details #product-specification li i {
	font-size: 0.75rem;
}

#product-details #product-specification li strong {
	flex-shrink: 0;
	font-weight: 500;
}

#product-details .tab-block hr {
	margin: 1.5em 0;
}

#product-image {
	position: relative;
	display: flex;
}

a#product-image > * { pointer-events: none; }

#product-image div.image { border: none; }

#product-image div.image:hover { box-shadow: none; }

#product-image .badge {
	left: 0.5rem;
	top: 0.5rem;
	font-size: 0.875rem;
}

#product-image i {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	font-size: 2rem;
}

#product-image.zoomed { cursor: zoom-in; }

#product-image.zoomed div.image { background: none; }

#product-image.zoomed img {
	position: absolute;
	top: calc(50%);
	left: calc(50%);
	width: 300%;
	height: auto;
	max-width: none;
	max-height: none;
	transform: translate(-50%, -50%);
}

#product-info > div:first-of-type {
	display: flex;
	justify-content: space-between;
}

#product-info > div:first-of-type div {
	flex-basis: 100%;
}

#product-info h1 {
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

#product-info dl {
	flex-basis: 50%;
	font-size: 0.875rem;
	line-height: 1.2rem;
}

#product-info dl dt {
	float: left;
	font-weight: 500;
}

#product-info dl dt::after {
	margin-right: 0.5rem;
	content: ':';
}

#product-info p {
	margin: 0;
}

#product-info p.stock {
	margin-top: 1rem;
	font-size: 1.15em;
	font-weight: 700;
	color: rgb(var(--green-dark));
	line-height: 1;
}

#product-info p.is-withdrawn {
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid rgb(var(--grey-125));
}

#product-info p.is-withdrawn + p {
	font-weight: 500;
}

#product-info p.is-withdrawn + p a {
	display: block;
}

#product-info .button.favourite {
	width: 3rem;
	height: 3rem;
	font-size: 1.75rem;
}

#product-info > div:last-of-type {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgb(var(--grey-125));
}

#product-info #product-prices .strikeout {
	text-decoration: line-through;
}

#product-info #product-prices p.price strong {
	color: rgb(var(--red));
}

#product-info .add-to-basket {
	align-items: stretch;
	display: flex;
	justify-content: center;
	width: 100%;
}

#product-info .add-to-basket label {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	background-color: rgb(var(--bg));
	border: 1px solid rgb(var(--grey-250));
	border-right: none;
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}

#product-info .add-to-basket input {
	border-radius: unset;
	border-right: none;
	flex: 1;
}

#product-info .add-to-basket button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#delivery-info .stock-status {
	font-weight: 500;
	left: -1.5rem;
	line-height: 1;
	padding: 0.75rem 0;
	position: relative;
	text-align: center;
	top: -1.5rem;
	width: calc(100% + 3rem);
}

#delivery-info .stock-status.-in-stock {
	background-color: rgb(var(--green-dark));
	color: rgb(var(--white));
}

#delivery-info .stock-status.-in-stock-delay {
	background-color: rgb(var(--orange));
	color: rgb(var(--white));
}

#delivery-info .stock-status.-withdrawn {
	background-color: rgb(var(--grey-125));
}

#delivery-info ul {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin-top: 0;
	padding: 0;
}

#delivery-info ul li {
	align-items: center;
	display: flex;
	padding: 0;
}

#delivery-info ul li i {
	flex: none;
	font-size: 2rem;
	width: 3.5rem;
}

#delivery-info ul li p {
	margin: 0;
}

#delivery-info p.note {
	font-size: 0.875rem;
	color: rgb(var(--grey-500));
}

#delivery-info .countdown {
	display: flex;
	margin-top: 1rem;
	padding-top: 1rem;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgb(var(--grey-125));
}

#delivery-info .countdown p {
	margin: 0;
}

#delivery-info .countdown p:first-child {
	font-weight: 500;
}

#delivery-info .countdown i {
	font-size: 2rem;
}

/*--- specification ---*/
#tp2 ul li {
	padding: 0.25rem 0.5rem;
	list-style: none;
}

#tp2 ul li:nth-child(odd) {
	background-color: rgb(var(--bg));
}

#tp2 ul li strong {
	display: inline-block;
	width: 8rem;
}

/*--- add to basket (modal) ---*/
#add-to-basket-modal {
	width: 25rem;
}

#add-to-basket-modal > div {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#add-to-basket-modal > div > i {
	align-items: center;
	color: rgb(var(--green-light));
	display: inline-flex;
	font-size: 3rem;
	justify-content: center;
	width: 4rem;
}

#add-to-basket-modal h2 {
	color: rgb(var(--green-light));
	margin: 0;
	text-align: center;
}

#add-to-basket-modal p {
	margin: 0.5rem 1rem;
	text-align: center;
}

#add-to-basket-modal strong {
	color: rgb(var(--grey-625));
	display: block;
	font-weight: 500;
	margin: 0 0 0.5em;
}

#add-to-basket-modal div div {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	width: 100%;
}

#add-to-basket-modal a,
#add-to-basket-modal button {
	flex: auto;
}


/*-------------------------------------*/
/*--- S H O P P I N G   B A S K E T ---*/
/*-------------------------------------*/

#basket .errors {
	font-weight: 500;
	color: rgb(var(--red));
}

#basket .errors li {
	font-weight: 400;
}

#basket .errors li button {
	padding: 0;
	text-decoration: underline;
	background-color: transparent;
	border: none;
}

#basket .errors ul {
	margin-top: 0.5rem;
}

#basket .free-delivery-alert {
	padding: 0.5rem 1rem;
	font-weight: 500;
	color: rgb(var(--button4-text));
	background-color: rgb(var(--button4-bg));
	border-radius: 0.5rem;
}

#basket-items ul {
	border-top: 1px solid rgb(var(--grey-125));
	list-style: none;
	margin-top: 1.5rem;
	padding: 0;
}

#basket-items ul li {
	align-items: center;
	border-bottom: 1px solid rgb(var(--grey-125));
	display: flex;
	gap: 1rem;
	line-height: 1;
	padding: 1rem 0.5rem;
}

#basket-items ul li.is-withdrawn {
	background-color: rgba(var(--red), 0.1);
}

#basket-items ul li > a,
#basket-items ul li .basket-options {
	flex-basis: 10rem;
}

#basket-items ul li .product-details {
	flex: 1;
}

#basket-items ul li .product-details p {
	margin-top: 0.5rem;
}

#basket-items ul li .basket-options {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}

#basket-items ul li .basket-options input {
	width: 5rem;
}

#basket-items ul li .basket-options .button i {
	font-size: 1.25rem;
}

#basket-totals {
	display: flex;
	justify-content: flex-end;
	/*background: url('/images/security_logos.png') top 1.5rem left / 25% auto no-repeat;*/
}

#basket-totals ul {
	flex-basis: 33%;
	list-style: none;
	padding: 0;
}

#basket-totals ul li {
	border-bottom: 1px solid rgb(var(--grey-125));
	display: flex;
	justify-content: space-between;
	line-height: 1;
	padding: 1.5rem 0;
}

#basket-totals ul li:first-child {
	justify-content: flex-end;
}

#basket-totals ul li:first-child button {
	font-size: 0.75rem;
	text-transform: uppercase;
}

#basket-totals ul li span {
	font-size: 1.25rem;
	font-weight: 300;
}

#basket-totals ul li:last-child span {
	font-weight: 500;
	text-transform: uppercase;
}

#basket .checkout-options {
	display: flex;
	margin-top: 1.5rem;
	justify-content: flex-end;
}

#basket .checkout-options ul {
	display: flex;
	flex-basis: 33%;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
}

#basket .checkout-options .button {
	width: 100%;
}

#basket-delivery-options {
	position: sticky;
	top: 1.5rem;
}

#basket-delivery-options h2 {
	font-size: 1.25rem;
	font-weight: 500;
}

#basket-delivery-options p {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 1em 0 0;
}

#basket-delivery-options ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1em 0 0;
}

#basket-delivery-options button.delivery-option {
	width: 100%;
	padding: 0.75rem;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.5;
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.4rem;
	transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

#basket-delivery-options button.delivery-option:hover {
	box-shadow: 0 0 0 100vmax inset rgba(var(--black), 0.1);
}

#basket-delivery-options button.delivery-option.-selected {
	color: rgb(var(--grey-875));
	border-color: rgb(var(--green-light));
	background-color: rgb(var(--green-light));
}

#basket-delivery-options button.delivery-option strong {
	display: block;
}

#basket-delivery-options li.collection-point button.delivery-option.-selected {
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

#basket-delivery-options li.collection-point div {
	position: relative;
	margin-top: -0.5rem;
	padding: 1.25rem 0.75rem 0.75rem;
	border: 1px solid rgb(var(--green-light));
	border-radius: 0.4rem;
}

#basket-delivery-options li.collection-point div h3 {
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

#basket-delivery-options li.collection-point div p {
	margin: 0;
	padding: 0;
}

#basket-delivery-options li.collection-point div input,
#basket-delivery-options li.collection-point div button {
	font-size: 0.875rem;
}

#basket-delivery-options li.collection-point div ul li {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/*--- collection point search (modal) ---*/
#collection-point-search-modal {
	width: 100vw;
	height: 100vh;
	padding: 0;
}

#collection-point-search-modal > div {
	display: flex;
	padding: 0;
	justify-content: space-between;
	overflow: hidden;
}

#collection-point-search-modal #ups-map {
	flex-basis: 75%;
	height: 100%;
}

#collection-point-search-modal ul {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem;
	list-style: none;
	gap: 1rem;
	overflow: scroll;
}

#collection-point-search-modal ul li {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: stretch;
	padding: 0.75rem;
	font-size: 0.75rem;
	text-align: left;
	background-color: rgb(var(--bg));
	border: 1px solid rgb(var(--grey-125));
	border-radius: 0.4rem;
}

#collection-point-search-modal ul li p:first-child {
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

#collection-point-search-modal ul li div:last-child {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	flex: none;
	text-align: right;
}

#collection-point-search-modal ul li span {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: #FFF;
	background-color: rgb(var(--grey-750));
	border-radius: 50%;
}


/*--------------------------------------------*/
/*--- C H E C K O U T   :   P A Y M E N T  ---*/
/*--------------------------------------------*/

#checkout-payment .form-fields .button {
	margin-top: 0.75rem;
}


/*---------------------------------*/
/*--- S P A R E S   F I N D E R ---*/
/*---------------------------------*/

#spares-finder {
	padding: 3rem 4rem;
	background: url('/images/spares_finder.webp') center / cover no-repeat;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(var(--grey-250), 0.25);
}

#spares-finder h2 {
	font-size: 1.875rem;
	font-weight: 700;
	color: rgb(var(--white));
}

#spares-finder ul {
	display: flex;
	margin: 2.5rem 0 1.75rem;
	gap: 1rem;
	list-style: none;
}

#spares-finder select {
	width: 100%;
	max-width: 12.5rem;
	background-color: rgb(var(--white)) !important;
}

#spares-finder > div {
	display: flex;
	gap: 0.5rem;
}

#spares-finder .is-loading {
	position: relative;
}

#spares-finder .is-loading i {
	font-size: 2.5rem;
	color: rgb(var(--white));
}


/*-------------------*/
/*--- F O O T E R ---*/
/*-------------------*/

/*--- footer-top ---*/
#footer-top {
	background-color: rgb(var(--grey-125));
	padding: 1.5rem 0;
}

/*--- footer top - nss ---*/
#footer-top li .nss {
	background: radial-gradient(circle, #54a5e5, #17c);
	border-color: rgb(var(--nss-blue));
}

#footer-top li .nss strong,
#footer-top li .nss p {
	color: rgb(var(--white));
}

#footer-top li .nss img {
	filter: brightness(0) invert(1);
	height: 2.25rem;
	width: auto;
}

/*--- footer middle ---*/
#footer-middle {
	color: rgb(var(--footer-middle-text));
	font-size: 0.875rem;
	padding: 3rem 0;
	background-color: rgb(var(--footer-middle-bg));
}

#footer-middle ul li {
	line-height: 1.5;
}

#footer-middle ul li {
	padding-top: 0.5rem;
}

#footer-middle ul li:first-child {
	font-size: 1rem;
	font-weight: 700;
	padding-top: 0;
	text-transform: uppercase;
}

#footer-middle a {
	color: rgb(var(--footer-middle-text));
	text-decoration: none;
}

#footer-middle a:hover {
	color: rgb(var(--footer-middle-text));
	text-decoration: underline;
}

#footer-middle a i {
	margin-left: 0.5rem;
}

/*--- footer opening hours ---*/
#footer-opening-hours li {
	display: flex;
	justify-content: space-between;
}

/*--- footer-bottom ---*/
#footer-bottom {
	background-color: rgb(var(--footer-bottom-bg));
	color: rgb(var(--footer-bottom-text));
	padding: 2rem 0;
}

#footer-bottom a {
	color: inherit;
	transition: opacity 0.25s ease-in-out;
	text-decoration: none;
}

#footer-bottom a:hover {
	opacity: 0.75;
}

#footer-bottom ul {
	align-items: center;
	display: flex;
	gap: 1.5rem;
}

#footer-bottom ul li a i {
	color: inherit;
	font-size: 1.5rem;
}

#footer-bottom p {
	font-weight: 500;
	text-align: right;
}

#footer-bottom p ~ p {
	margin-top: 1rem;
}

#footer-bottom p a img {
	height: 1rem;
	margin-top: 0.375rem;
}