/* Begin critical CSS */
/*
 Copyright Watman & Worth Web Ltd 2018-2023
 Use without modification granted to all our customers.
 Do Not Redistribute
*/
/* 
    Created on : 30 Nov 2023, 10:11:16
    Author     : William Worth <william@watmanworth.co.uk>
*/


 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */
/* ==========================================
   WATMAN WEB FRAMEWORK
   BASE RESET
   4 ALL FOUNDATION
========================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
  	overflow-y: scroll;
	overflow-x: hidden;
}

body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
  	overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ww-color-focus);
	outline-offset: 4px;
}

[hidden],
.hidden,
.site-hide,
.layout-component.empty {
	display: none !important;
}

/* ==========================================
   STICKY FOOTER PAGE STRUCTURE
   Prevent empty body space below footer
========================================== */

html,
body {
	min-height: 100%;
}

body {
	min-height: 100vh;
	min-height: 100dvh;

	display: flex;
	flex-direction: column;
}

/* Main site/page content should grow to fill spare space */

body .main-wrapper,
body .content-wrapper,
body .page-wrapper,
body .layout-wrapper,
body main {
	flex: 1 0 auto;
}

/* Footer stays after the flexible content */

body footer,
body .footer-wrapper,
body .footer-container {
	flex-shrink: 0;
}
 /* Begin CSS Part: Layout */
/* ==========================================
   WATMAN WEB FRAMEWORK
   LAYOUT - CRITICAL
   4 ALL FOUNDATION
========================================== */

:root {
	--ww-container-max: 1320px;
	--ww-container-wide: 1560px;
	--ww-container-narrow: 900px;

	--ww-header-height-desktop: 104px;
	--ww-header-height-mobile: 82px;

	--ww-page-gutter: 2rem;

	--ww-space-xxs: 0.35rem;
	--ww-space-xs: 0.5rem;
	--ww-space-s: 1rem;
	--ww-space-m: 2rem;
	--ww-space-l: 4rem;
	--ww-space-xl: 6rem;
	--ww-space-xxl: 8rem;

	--ww-radius-s: 0.35rem;
	--ww-radius-m: 0.85rem;
	--ww-radius-l: 1.5rem;

	--ww-shadow-s: 0 2px 10px rgba(0,0,0,.05);
	--ww-shadow-m: 0 8px 25px rgba(0,0,0,.08);
	--ww-shadow-l: 0 18px 50px rgba(0,0,0,.14);

	--ww-transition-fast: 0.2s ease;
	--ww-transition-medium: 0.3s ease;

	--ww-z-header: 1000;
	--ww-z-responsive-menu: 1001;
	--ww-z-modal: 2000;
	--ww-z-cookie: 3000;
}

/* ==========================================
   EOS SAFETY
========================================== */

.layout,
.layout-cell,
.layout-component {
	min-width: 0;
}

/* ==========================================
   SITE SHELL
========================================== */

body.standard,
.mod_layout_layout_min,
.master-layout {
	background: var(--ww-color-body-bg);
	color: var(--ww-color-text);
}

.header-wrapper,
.responsive-menu-wrapper,
.page-content-wrapper,
.footer-wrapper {
	width: 100%;
}

.page-content-wrapper {
	background: var(--ww-color-body-bg);
	padding-top: var(--ww-header-height-desktop);
}

/* ==========================================
   CORE CONTAINERS
========================================== */

.header-container,
.main-footer > .i,
.base-footer > .i,
.ww-container {
	width: calc(100% - (var(--ww-page-gutter) * 2));
	max-width: var(--ww-container-max);
	margin-left: auto;
	margin-right: auto;
}

.ww-container--narrow {
	max-width: var(--ww-container-narrow);
}

.ww-container--wide {
	max-width: var(--ww-container-wide);
}

/* ==========================================
   GRID BASE
   Column behaviour is handled in responsive default tabs.
========================================== */

.ww-grid {
	display: grid;
	gap: var(--ww-space-l);
	align-items: start;
}

.ww-grid > * {
	min-width: 0;
}

/* EOS grid pass-through */

.layout-cell.ww-grid {
	display: block;
}

.layout-cell.ww-grid > .i {
	display: grid;
	gap: var(--ww-space-l);
	align-items: start;
	width: 100%;
}

.layout-cell.ww-grid > .i > * {
	min-width: 0;
}

/* ==========================================
   FLEX BASE
========================================== */

.ww-flex {
	display: flex;
	gap: var(--ww-space-m);
}

.ww-flex--wrap {
	flex-wrap: wrap;
}

.ww-stack > * + * {
	margin-top: var(--ww-space-m);
}

/* ==========================================
   GENERIC UTILITY HELPERS
========================================== */

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.contain {
	max-width: var(--ww-container-max);
	margin-inline: auto;
}

.padding-top-large {
	padding-top: var(--ww-space-l);
}

.padding-bottom-large {
	padding-bottom: var(--ww-space-l);
}

.padding-left-medium {
	padding-left: var(--ww-space-m);
}

.padding-right-medium {
	padding-right: var(--ww-space-m);
}

.padding-top-medium {
	padding-top: var(--ww-space-m);
}

.padding-bottom-medium {
	padding-bottom: var(--ww-space-m);
}

.padding-left-large {
	padding-left: var(--ww-space-l);
}

.padding-right-large {
	padding-right: var(--ww-space-l);
}
 /* Begin CSS Part: Desktop Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   DESKTOP DEFAULTS
   4 ALL FOUNDATION
========================================== */

@media (min-width: 1201px) {

	.header-wrapper {
		display: block;
	}

	.responsive-menu-wrapper {
		display: none;
	}

	

}
 /* Begin CSS Part: Tablet Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   TABLET DEFAULTS
   4 ALL FOUNDATION
========================================== */

@media (min-width: 768px) and (max-width: 1200px) {

	:root {
		--ww-header-height-desktop: 100px;
	}

	.header-wrapper {
		display: block;
	}

	.responsive-menu-wrapper {
		display: none;
	}

	.logo-main {
		max-width: 220px;
	}

	.header-menu .menubar.horizontal {
		gap: 1rem;
	}

	.header-menu .menu_item,
	.header-menu .menu_item:visited {
		font-size: 0.92rem;
	}

	.donate-button .button.large {
		min-height: 48px;
		padding: 0.85rem 1.25rem;
		font-size: 0.95rem;
	}

}
 /* Begin CSS Part: Mobile Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   MOBILE DEFAULTS
   4 ALL FOUNDATION
========================================== */

@media (max-width: 767px) {

	:root {
		--ww-page-gutter: 1.25rem;
		--ww-space-xl: 4rem;
		--ww-space-l: 3rem;
	}

	.header-wrapper {
		display: none;
	}

	.responsive-menu-wrapper {
		display: block;
	}

	
	/* ======================================
	   COOKIES
	====================================== */

	#cookie-compliance .mod_cookies {
		padding-block: 1.25rem !important;
	}

}

@media (max-width: 480px) {

	.responsive-slave {
		width: min(92vw, 380px);
	}

	.responsive-logo img {
		width: min(52vw, 170px);
	}

	.responsive-menu-trigger img,
	.resp-icon img {
		width: 36px;
	}

}
 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */

 /* Begin CSS Part: Buttons */

 /* Begin CSS Part: Colours */

 /* Begin CSS Part: Menus */

 /* Begin CSS Part: Responsive Menu */
/* ==========================================
   WATMAN WEB FRAMEWORK
   RESPONSIVE MENU
   4 ALL FOUNDATION
========================================== */


/* ==========================================
   RESPONSIVE MENU VARIABLES
========================================== */

:root {
	--fourall-mobile-header-height: var(--ww-header-height-mobile, 78px);
	--fourall-mobile-gutter: var(--ww-page-gutter, clamp(1rem, 4vw, 1.5rem));

	--fourall-white: var(--ww-color-white, #ffffff);
	--fourall-black: var(--ww-color-black, #050505);
	--fourall-ink: #111111;
	--fourall-muted: rgba(17, 17, 17, 0.68);

	--fourall-gold: var(--ww-color-orange, #d9930e);
	--fourall-gold-dark: #b97600;
	--fourall-gold-soft: rgba(217, 147, 14, 0.13);

	--fourall-panel-bg: #ffffff;
	--fourall-panel-soft: #f8f5ee;

	--fourall-radius-pill: 999px;
	--fourall-radius-card: 1.35rem;

	--fourall-shadow-header:
		0 0.35rem 1.3rem rgba(0, 0, 0, 0.08);

	--fourall-shadow-panel:
		-1.25rem 0 3rem rgba(0, 0, 0, 0.22);

	--fourall-transition-fast: var(--ww-transition-fast, 180ms ease);
	--fourall-transition-med: var(--ww-transition-med, 280ms ease);
}


/* ==========================================
   RESPONSIVE WRAPPER
========================================== */

.responsive-menu-wrapper {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	z-index: var(--ww-z-header, 900);

	background: transparent;
}

/* Hide responsive header on desktop if the desktop header is active elsewhere */
@media (min-width: 1025px) {
	.responsive-menu-wrapper {
		display: none;
	}
}


/* ==========================================
   TOP MOBILE BAR
========================================== */

.responsive-menu {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: var(--fourall-mobile-header-height);
	z-index: var(--ww-z-header, 900);

	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;

	padding-inline: var(--fourall-mobile-gutter);

	background:
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)),
		var(--fourall-white);

	color: var(--fourall-black);

	border-bottom: 1px solid rgba(0,0,0,0.08);
	box-shadow: var(--fourall-shadow-header);

	backdrop-filter: blur(12px);
}

/* EOS layout reset for header cells */
.responsive-menu,
.responsive-menu > .layout-cell,
.responsive-logo-container,
.responsive-actions-container,
.responsive-logo,
.menu-donate-button,
.responsive-menu-trigger {
	float: none !important;
	min-width: 0;
}

.responsive-logo-container {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;

	width: auto !important;
	max-width: none !important;
	flex: 1 1 auto;
}

.responsive-actions-container {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;

	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
}

.responsive-logo,
.menu-donate-button,
.responsive-menu-trigger {
	position: relative;
	z-index: calc(var(--ww-z-responsive-menu, 1000) + 1);
}

.responsive-logo p,
.menu-donate-button p,
.responsive-menu-trigger p {
	margin: 0;
}


/* ==========================================
   TOP LOGO
========================================== */

.responsive-logo {
	display: flex !important;
	align-items: center;

	width: auto !important;
	max-width: min(52vw, 230px) !important;
}

.responsive-logo img {
	display: block;

	width: min(52vw, 210px) !important;
	height: auto !important;
	max-height: 58px;

	object-fit: contain;
	object-position: left center;

	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.responsive-logo .inflate {
	position: absolute;
	inset: 0;
	z-index: 2;

	display: block;
}


/* ==========================================
   TOP DONATE BUTTON
========================================== */

.menu-donate-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.menu-donate-button .button,
.menu-donate-button a.button,
.menu-donate-button .button:visited,
.menu-donate-button a.button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;

	min-height: 2.55rem;
	margin: 0 !important;
	padding: 0.68rem 1rem;

	border: 2px solid var(--fourall-gold);
	border-radius: var(--fourall-radius-pill);

	background: var(--fourall-white);
	color: var(--fourall-black);

	font-size: 0.88rem;
	font-weight: 850;
	line-height: 1;
	text-decoration: none;

	box-shadow: 0 0.45rem 1.1rem rgba(217, 147, 14, 0.12);

	transition:
		background var(--fourall-transition-fast),
		color var(--fourall-transition-fast),
		border-color var(--fourall-transition-fast),
		transform var(--fourall-transition-fast),
		box-shadow var(--fourall-transition-fast);
}

.menu-donate-button .button::after,
.menu-donate-button a.button::after {
	content: "›";

	display: inline-grid;
	place-items: center;

	width: 1.05rem;
	height: 1.05rem;
	border-radius: 999px;

	background: var(--fourall-gold);
	color: var(--fourall-black);

	font-size: 0.9rem;
	font-weight: 950;
	line-height: 1;

	transition:
		background var(--fourall-transition-fast),
		color var(--fourall-transition-fast),
		transform var(--fourall-transition-fast);
}

.menu-donate-button .button:hover,
.menu-donate-button .button:focus,
.menu-donate-button a.button:hover,
.menu-donate-button a.button:focus {
	background: var(--fourall-gold);
	color: var(--fourall-black);
	border-color: var(--fourall-gold);
	transform: translateY(-1px);
	box-shadow: 0 0.65rem 1.35rem rgba(217, 147, 14, 0.22);
}

.menu-donate-button .button:hover::after,
.menu-donate-button .button:focus::after,
.menu-donate-button a.button:hover::after,
.menu-donate-button a.button:focus::after {
	background: var(--fourall-black);
	color: var(--fourall-white);
	transform: translateX(1px);
}


/* ==========================================
   MENU TRIGGER
========================================== */

.responsive-menu-trigger {
	display: grid !important;
	place-items: center;

	width: 2.75rem !important;
	height: 2.75rem;

	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 999px;

	background:
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,245,238,0.95));

	box-shadow:
		0 0.4rem 1rem rgba(0,0,0,0.08),
		inset 0 1px 0 rgba(255,255,255,0.85);

	cursor: pointer;

	transition:
		background var(--fourall-transition-fast),
		border-color var(--fourall-transition-fast),
		transform var(--fourall-transition-fast),
		box-shadow var(--fourall-transition-fast);
}

.responsive-menu-trigger:hover,
.responsive-menu-trigger:focus {
	transform: translateY(-1px);
	border-color: rgba(217, 147, 14, 0.42);
	box-shadow:
		0 0.6rem 1.25rem rgba(0,0,0,0.10),
		0 0 0 0.25rem rgba(217, 147, 14, 0.08);
}

.responsive-menu-trigger img {
	display: block;

	width: 1.45rem !important;
	height: 1.45rem !important;

	object-fit: contain;

	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}


/* ==========================================
   SLIDE OUT PANEL
========================================== */

body .responsive-slave {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;

	width: min(76vw, 760px) !important;
	max-width: none !important;
	height: 100dvh;
	z-index: var(--ww-z-responsive-menu, 1000);

	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	background:
		radial-gradient(circle at 92% 8%, rgba(217,147,14,0.16), transparent 15rem),
		linear-gradient(180deg, var(--fourall-white) 0%, #fbfaf7 100%);

	color: var(--fourall-black);

	box-shadow:
		0 0 0 0 rgba(0,0,0,0),
		var(--fourall-shadow-panel);

	transform: translateX(100%);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

body .responsive-slave.open {
	transform: translateX(0);

	box-shadow:
		0 0 0 100vmax rgba(0,0,0,0.48),
		var(--fourall-shadow-panel);
}

/* EOS reset inside panel
   Important: do not include .responsive-slave here,
   or it overrides the panel width.
*/
.responsive-slave > .layout-component,
.responsive-slave .layout-component,
.responsive-slave .slave-logo,
.responsive-slave .slave-menu,
.responsive-slave .slave-button {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}


/* ==========================================
   CLOSE BUTTON
========================================== */

.slave-close,
.slave-close:visited {
	position: absolute;
	top: 1.15rem;
	right: 1.15rem;
	z-index: calc(var(--ww-z-responsive-menu, 1000) + 2);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;

	min-height: 2.35rem;
	padding: 0.65rem 0.85rem;

	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 999px;

	background: rgba(255,255,255,0.82);
	color: var(--fourall-black);

	backdrop-filter: blur(10px);

	text-decoration: none;
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;

	box-shadow:
		0 0.45rem 1rem rgba(0,0,0,0.08),
		inset 0 1px 0 rgba(255,255,255,0.86);

	cursor: pointer;

	transition:
		background var(--fourall-transition-fast),
		border-color var(--fourall-transition-fast),
		color var(--fourall-transition-fast),
		transform var(--fourall-transition-fast),
		box-shadow var(--fourall-transition-fast);
}

.slave-close::after {
	content: "×";

	display: inline-grid;
	place-items: center;

	width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;

	background: var(--fourall-gold);
	color: var(--fourall-black);

	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
}

.slave-close:hover,
.slave-close:focus {
	border-color: rgba(217, 147, 14, 0.45);
	background: #fff;
	color: var(--fourall-black);
	transform: translateY(-1px);
	box-shadow:
		0 0.65rem 1.3rem rgba(0,0,0,0.11),
		0 0 0 0.25rem rgba(217, 147, 14, 0.09);
}


/* ==========================================
   PANEL LOGO
========================================== */

.slave-logo {
	position: relative;

	display: flex !important;
	align-items: center;

	padding: 1.25rem 5.9rem 1.15rem 1.35rem;

	border-bottom: 1px solid rgba(0,0,0,0.08);

	background:
		linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,245,238,0.7));
}

.slave-logo img {
	display: block;

	width: min(58vw, 210px) !important;
	height: auto !important;
	max-height: 58px;

	object-fit: contain;
	object-position: left center;

	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.slave-logo .inflate {
	position: absolute;
	inset: 0;
	z-index: 1;

	display: block;
}


/* ==========================================
   PANEL MENU
========================================== */

.responsive-slave .menubar,
.responsive-slave .menubar ul,
.responsive-slave .menubar li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.responsive-slave .slave-menu {
	padding: 0.75rem 0 0;
}

.responsive-slave .menubar {
	display: flex;
	flex-direction: column;
	gap: 0;

	padding: 0;
}

.responsive-slave .menubar .menubar {
	margin: 0.15rem 0 0.55rem;
	padding: 0.35rem 0;

	background:
		linear-gradient(180deg, rgba(217,147,14,0.10), rgba(217,147,14,0.05));

	border-top: 1px solid rgba(217,147,14,0.18);
	border-bottom: 1px solid rgba(217,147,14,0.12);
}

/* Top level links */
.responsive-slave .menu_item,
.responsive-slave .menu_item:visited {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	padding: 1rem 1.35rem;

	color: var(--fourall-black);
	background: transparent;

	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 850;
	line-height: 1.15;

	border-bottom: 1px solid rgba(0,0,0,0.07);

	opacity: 0;
	transform: translateX(20px);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		background-color var(--fourall-transition-fast),
		color var(--fourall-transition-fast),
		padding var(--fourall-transition-fast);
}

/* Animated entry */
.responsive-slave.open .menu_item {
	opacity: 1;
	transform: translateX(0);
}

.responsive-slave.open .menubar > li:nth-child(1) > .menu_item {
	transition-delay: 0.04s;
}

.responsive-slave.open .menubar > li:nth-child(2) > .menu_item {
	transition-delay: 0.08s;
}

.responsive-slave.open .menubar > li:nth-child(3) > .menu_item {
	transition-delay: 0.12s;
}

.responsive-slave.open .menubar > li:nth-child(4) > .menu_item {
	transition-delay: 0.16s;
}

/* Parent link indicator */
.responsive-slave li.has_child > .menu_item::after {
	content: "+";

	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;

	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;

	background: var(--fourall-gold-soft);
	color: var(--fourall-black);

	font-size: 1rem;
	font-weight: 900;
	line-height: 1;

	transition:
		background var(--fourall-transition-fast),
		transform var(--fourall-transition-fast);
}

/* Child links */
.responsive-slave .menubar .menubar .menu_item,
.responsive-slave .menubar .menubar .menu_item:visited {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65rem;

	padding: 0.72rem 1.35rem 0.72rem 2.35rem;

	color: rgba(17,17,17,0.78);

	font-size: 0.94rem;
	font-weight: 720;
	line-height: 1.22;
	text-align: left;

	border-bottom: 0;

	opacity: 1;
	transform: none;
}

.responsive-slave .menubar .menubar .menu_item::before {
	content: "";

	display: block;
	flex: 0 0 auto;

	width: 0.35rem;
	height: 0.35rem;
	border-radius: 999px;

	background: var(--fourall-gold);
}

.responsive-slave .menubar .menubar .menu_item .link-text {
	display: block;
	flex: 1 1 auto;

	text-align: left;
}

.responsive-slave .menubar .menubar .menu_item:hover,
.responsive-slave .menubar .menubar .menu_item:focus,
.responsive-slave .menubar .menubar li.active > .menu_item {
	color: var(--fourall-black);
	background: rgba(255,255,255,0.62);
	padding-left: 2.55rem;
}


/* ==========================================
   PANEL DONATE CTA
========================================== */

.slave-button {
	position: sticky;
	bottom: 0;
	z-index: 3;

	padding: 1rem 1.35rem 1.25rem;

	background:
		linear-gradient(180deg, rgba(251,250,247,0), rgba(251,250,247,0.96) 20%, rgba(251,250,247,1) 100%);
}

.slave-button .button,
.slave-button a.button,
.slave-button .button:visited,
.slave-button a.button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	width: 100%;
	min-height: 3.2rem;
	margin: 0 !important;
	padding: 0.95rem 1.15rem;

	border: 2px solid var(--fourall-gold);
	border-radius: var(--fourall-radius-pill);

	background: var(--fourall-gold);
	color: var(--fourall-black);

	text-decoration: none;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;

	box-shadow:
		0 0.8rem 1.7rem rgba(217,147,14,0.26),
		inset 0 1px 0 rgba(255,255,255,0.42);

	transition:
		background var(--fourall-transition-fast),
		border-color var(--fourall-transition-fast),
		color var(--fourall-transition-fast),
		transform var(--fourall-transition-fast),
		box-shadow var(--fourall-transition-fast);
}

.slave-button .button::after,
.slave-button a.button::after {
	content: "›";

	display: inline-grid;
	place-items: center;

	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;

	background: var(--fourall-black);
	color: var(--fourall-white);

	font-size: 1.1rem;
	font-weight: 950;
	line-height: 1;

	transition:
		transform var(--fourall-transition-fast),
		background var(--fourall-transition-fast),
		color var(--fourall-transition-fast);
}

.slave-button .button:hover,
.slave-button .button:focus,
.slave-button a.button:hover,
.slave-button a.button:focus {
	transform: translateY(-1px);
	background: var(--fourall-black);
	border-color: var(--fourall-black);
	color: var(--fourall-white);

	box-shadow:
		0 0.95rem 1.9rem rgba(0,0,0,0.18),
		inset 0 1px 0 rgba(255,255,255,0.14);
}

.slave-button .button:hover::after,
.slave-button .button:focus::after,
.slave-button a.button:hover::after,
.slave-button a.button:focus::after {
	background: var(--fourall-gold);
	color: var(--fourall-black);
	transform: translateX(2px);
}


/* ==========================================
   ACCESSIBILITY / MOTION
========================================== */

.responsive-menu-trigger:focus-visible,
.slave-close:focus-visible,
.responsive-slave .menu_item:focus-visible,
.menu-donate-button .button:focus-visible,
.slave-button .button:focus-visible {
	outline: 3px solid rgba(217,147,14,0.55);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.responsive-slave,
	.responsive-slave .menu_item,
	.responsive-menu-trigger,
	.slave-close,
	.menu-donate-button .button,
	.slave-button .button {
		transition: none !important;
	}
}


/* ==========================================
   TABLET / SMALL SCREEN PANEL WIDTH
========================================== */

@media (max-width: 900px) {
	body .responsive-slave {
		width: 82vw !important;
	}
}

@media (max-width: 680px) {
	body .responsive-slave {
		width: 96vw !important;
	}
}


/* ==========================================
   SMALL MOBILE TWEAKS
========================================== */

@media (max-width: 430px) {
	.responsive-menu {
		gap: 0.55rem;
		padding-inline: 0.85rem;
	}

	.responsive-logo {
		max-width: 43vw !important;
	}

	.responsive-logo img {
		width: min(43vw, 165px) !important;
	}

	.menu-donate-button .button,
	.menu-donate-button a.button {
		min-height: 2.4rem;
		padding: 0.62rem 0.82rem;

		font-size: 0.8rem;
	}

	.menu-donate-button .button::after,
	.menu-donate-button a.button::after {
		width: 0.95rem;
		height: 0.95rem;
		font-size: 0.82rem;
	}

	.responsive-menu-trigger {
		width: 2.55rem !important;
		height: 2.55rem;
	}

	.responsive-menu-trigger img {
		width: 1.28rem !important;
		height: 1.28rem !important;
	}

	body .responsive-slave {
		width: 96vw !important;
	}

	.slave-logo {
		padding: 1.1rem 5.2rem 1rem 1.1rem;
	}

	.slave-logo img {
		width: min(56vw, 185px) !important;
	}

	.responsive-slave .menubar .menubar .menu_item,
	.responsive-slave .menubar .menubar .menu_item:visited {
		justify-content: flex-start;
		gap: 0.6rem;
		padding-left: 1.95rem;
		text-align: left;
	}

	.responsive-slave .menubar .menubar .menu_item .link-text {
		text-align: left;
	}

	.responsive-slave .menubar .menubar .menu_item:hover,
	.responsive-slave .menubar .menubar .menu_item:focus {
		padding-left: 2.1rem;
	}

	.slave-button {
		padding: 0.85rem 1.1rem 1.05rem;
	}
}


/* ==========================================
   EXTRA NARROW PANEL HEADER FIX
   Prevents the close button overlapping the logo
========================================== */

@media (max-width: 450px) {
	.slave-close,
	.slave-close:visited {
		top: 0.85rem;
		right: 0.85rem;

		min-height: 2.25rem;
		padding: 0.6rem 0.78rem;

		font-size: 0.68rem;
	}

	.slave-close::after {
		width: 1rem;
		height: 1rem;

		font-size: 0.95rem;
	}

	.slave-logo {
		align-items: flex-start;

		min-height: 7rem;
		padding: 4.15rem 1.1rem 1rem 1.1rem !important;
	}

	.slave-logo img {
		width: min(62vw, 190px) !important;
		max-height: 54px;
	}
}

@media (max-width: 360px) {
	body .responsive-slave {
		width: 97vw !important;
	}

	.slave-logo {
		min-height: 6.75rem;
		padding-top: 4rem !important;
	}

	.slave-logo img {
		width: min(66vw, 175px) !important;
		max-height: 50px;
	}
}
 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */

 /* Begin CSS Part: Effects */

 /* Begin CSS Part: Site Design */
/* ==========================================
   SITE DESIGN - CRITICAL
   HEADER ONLY
   4 ALL FOUNDATION
========================================== */

.header-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--ww-z-header);

	background: var(--ww-color-header-bg);
	color: var(--ww-color-header-text);

	border-bottom: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	min-height: var(--ww-header-height-desktop);
	padding-block: 0.75rem;
}

.header-logo-container {
	flex: 0 0 auto;
}

.logo-main-link {
	display: block;
	text-decoration: none;
}

.logo-main {
	display: block;
	width: auto;
	max-width: 250px;
	max-height: 78px;
	height: auto;
}

.header-content-container,
.header-menu-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(1rem, 2vw, 1.75rem);
	flex: 1;
	min-width: 0;
}

.header-menu,
.header-menu .menubar,
.header-menu .menubar ul,
.header-menu .menubar li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-menu .menubar li::marker,
.header-menu .menubar ul li::marker {
	content: "";
}

.header-menu .menu_item,
.header-menu .menu_item:visited {
	color: inherit;
	text-decoration: none;
}

.header-menu .menubar.horizontal {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: clamp(1rem, 1.8vw, 1.85rem);
}

.header-menu .menubar li {
	position: relative;
}

.header-menu .menu_item,
.header-menu .menu_item:visited {
	position: relative;
	display: block;
	padding: 0.65rem 0;

	color: var(--ww-color-header-text);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;

	transition:
		color var(--ww-transition-fast),
		opacity var(--ww-transition-fast);
}

.header-menu .menu_item:hover,
.header-menu .menu_item:focus,
.header-menu li.active > .menu_item {
	color: var(--ww-color-orange);
	opacity: 1;
}

.header-menu > .menubar > li > .menu_item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.25rem;
	width: 100%;
	height: 3px;
	background: var(--ww-color-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.header-menu > .menubar > li > .menu_item:hover::after,
.header-menu > .menubar > li > .menu_item:focus::after,
.header-menu > .menubar > li.active > .menu_item::after {
	transform: scaleX(1);
}

.donate-button p {
	margin: 0;
}

.donate-button .button,
.donate-button .button:visited {
	white-space: nowrap;
}

.header-menu li.has_child > .menubar {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	z-index: calc(var(--ww-z-header) + 1);

	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 0.15rem;

	min-width: 245px;
	margin: 0;
	padding: 0.75rem;

	list-style: none;
	background: var(--ww-color-white);
	color: var(--ww-color-black);

	border: 1px solid rgba(0,0,0,.08);
	border-radius: var(--ww-radius-m);
	box-shadow: var(--ww-shadow-l);

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);

	transition:
		opacity var(--ww-transition-fast),
		visibility var(--ww-transition-fast),
		transform var(--ww-transition-fast);
}

.header-menu li.has_child:hover > .menubar,
.header-menu li.has_child:focus-within > .menubar {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-menu li.has_child > .menubar > li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-menu li.has_child > .menubar .menu_item,
.header-menu li.has_child > .menubar .menu_item:visited {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	white-space: nowrap;
	color: var(--ww-color-black);
	border-radius: var(--ww-radius-s);
}

.header-menu li.has_child > .menubar .menu_item:hover,
.header-menu li.has_child > .menubar .menu_item:focus {
	background: var(--ww-color-surface-alt);
	color: var(--ww-color-black);
	opacity: 1;
}

.header-menu li.has_child > .menubar .menu_item::after {
	display: none;
}
 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */

 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */

 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */

 /* Begin CSS Part: Checkout */

 /* Begin CSS Part: Collation */

 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */

#cookie-compliance {
    z-index: 1000000000;
    position: fixed;
    bottom: 0px;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    width: 100%;
    left: 0px;
    text-align: left !important;
}

.layout-component.cookie-selection * {
    text-align: left !important;
}

#cookie-compliance .mod_cookies {
    padding: 24px !important;
}

#cookie-compliance * {
    color:#fff !important;
}

#cookie-compliance {
    overflow:hidden;
}

.layout-component.cookie-selection .checkbox input {
    display:inline-block;
    width:auto;
}
.layout-component.cookie-selection .checkbox span {
    display: inline-block;
    width: auto;
    font-weight: bold;
    vertical-align: top;
    line-height: 16px;
    font-size: 16px;
}

.cookie-selection .description {
    font-size:14px;
}

.layout-component.cookie-selection p, .layout-component.cookie-selection p a {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
}

.layout-component.cookie-selection p {
    display: inline-block;
}

#cookie-compliance div.compliance-ok{
    display: inline-block;
    background-color: green;
    color: #fff;
    padding: 2px 12px;
    font-size: 12px;
    border-radius: 2px;
    cursor:pointer;
}


.cookie-selection > .cookie-selection {
    border-top: 1px solid #fff;
    padding: 12px;
}

.layout-component.cookie-selection .button {
    border: 1px solid #fff !important;
    background-color: transparent !important;
    font-size: 14px;
    padding: 8px 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

#cookie-compliance div.saved-mask {
    position: absolute;
    height: 100%;
    width:100%;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    text-align: center;
    font-size:20px;
    padding:24px;
    color:#fff;
}
/* ==========================================
   WATMAN WEB FRAMEWORK
   COOKIES
   4 ALL FOUNDATION
========================================== */

/* ==========================================
   COOKIE BAR SHELL
========================================== */

body #cookie-compliance {
	position: fixed !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: min(78vh, 520px) !important;

	z-index: var(--ww-z-cookie) !important;

	overflow-y: auto !important;
	overflow-x: hidden !important;

	background: var(--ww-color-black) !important;
	color: var(--ww-color-white) !important;

	border-top: 1px solid rgba(255,255,255,.18) !important;
	box-shadow: 0 -16px 44px rgba(0,0,0,.28);

	text-align: left !important;
}

/* ==========================================
   RESET EOS COOKIE SPACING
========================================== */

body #cookie-compliance,
body #cookie-compliance * {
	box-sizing: border-box !important;
}

body #cookie-compliance .layout,
body #cookie-compliance .layout-cell,
body #cookie-compliance .layout-component {
	min-width: 0 !important;
}

body #cookie-compliance .layout-cell,
body #cookie-compliance .layout-component {
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
}

body #cookie-compliance p,
body #cookie-compliance h2,
body #cookie-compliance label {
	color: var(--ww-color-white) !important;
}

/* ==========================================
   COOKIE OUTER LAYOUT
========================================== */

body #cookie-compliance > .mod_cookies {
	width: calc(100% - (var(--ww-page-gutter) * 2)) !important;
	max-width: var(--ww-container-max) !important;

	margin: 0 auto !important;
	padding: 1rem 0 !important;
}

body #cookie-compliance > .mod_cookies > .layout-cell {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 700px) !important;
	align-items: center !important;
	gap: 1.25rem 2rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   COOKIE TEXT
========================================== */

body #cookie-compliance .textblock {
	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .textblock h2 {
	margin: 0 0 0.4rem !important;
	padding: 0 !important;

	color: var(--ww-color-white) !important;

	font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
}

body #cookie-compliance .textblock p {
	max-width: 980px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--ww-color-white) !important;

	font-size: 0.9rem !important;
	line-height: 1.45 !important;
}

body #cookie-compliance a,
body #cookie-compliance a:visited {
	color: var(--ww-color-white) !important;
	text-decoration-color: rgba(255,255,255,.7) !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.18em !important;
}

body #cookie-compliance a:hover,
body #cookie-compliance a:focus {
	color: var(--ww-color-white) !important;
	text-decoration-color: var(--ww-color-white) !important;
}

/* ==========================================
   PREFERENCES WRAPPER
========================================== */

body #cookie-compliance .preferences,
body #cookie-compliance .mod_cookies_component_preferences {
	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .mod_cookies_component_preferences {
	display: block !important;
}

/* This is the main preferences cell in your current EOS HTML */

body #cookie-compliance .mod_cookies_component_preferences > .layout-cell.cookie-selection,
body #cookie-compliance .mod_cookies_component_preferences .layout-cell.cookie-selection[data-cell-id="655"] {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	grid-template-areas:
		"label buttons"
		"choices buttons" !important;

	align-items: center !important;
	gap: 0.55rem 1.25rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   PREFERENCES TITLE
========================================== */

body #cookie-compliance .layout-cell.cookie-selection > label,
body #cookie-compliance .layout-cell.cookie-selection[data-cell-id="655"] > label {
	grid-area: label !important;

	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--ww-color-white) !important;

	font-size: 0.78rem !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* ==========================================
   COOKIE CHOICES
========================================== */

body #cookie-compliance .layout-cell.cookie-selection > .layout-component.cookie-selection,
body #cookie-compliance .layout-component.cookie-selection[data-cid="1389"] {
	grid-area: choices !important;

	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem 1.25rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
  	border: 0 !important;
}

body #cookie-compliance .layout-component.cookie-selection > .cookie-selection,
body #cookie-compliance .layout-component.cookie-selection[data-cid="1389"] > .cookie-selection {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
}

body #cookie-compliance .layout-component.cookie-selection .checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .layout-component.cookie-selection .checkbox input {
	display: inline-block !important;

	width: 16px !important;
	height: 16px !important;

	margin: 0 !important;
	padding: 0 !important;

	accent-color: var(--ww-color-white) !important;
}

body #cookie-compliance .layout-component.cookie-selection .checkbox span,
body #cookie-compliance .layout-component.cookie-selection .cookie-name {
	display: inline-block !important;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--ww-color-white) !important;

	font-size: 0.9rem !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
}

/* Hide option descriptions to keep the banner compact */

body #cookie-compliance .layout-component.cookie-selection .description {
	display: none !important;
}

/* ==========================================
   BUTTON ROW
   This targets the nested button container in your current EOS HTML.
========================================== */

body #cookie-compliance .layout-cell.cookie-selection > .layout-cell,
body #cookie-compliance .layout-cell.cookie-selection[data-cell-id="655"] > .layout-cell[data-cell-id="656"] {
	grid-area: buttons !important;

	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.7rem !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .layout-component.accept-all,
body #cookie-compliance .layout-component.save-choices,
body #cookie-compliance .layout-component.refuse-all,
body #cookie-compliance .layout-component[data-cid="1390"],
body #cookie-compliance .layout-component[data-cid="1391"],
body #cookie-compliance .layout-component[data-cid="1392"] {
	display: inline-flex !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   COOKIE BUTTONS
========================================== */

body #cookie-compliance .button,
body #cookie-compliance .button:visited,
body #cookie-compliance button,
body #cookie-compliance div.compliance-ok {
	position: relative !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem !important;

	width: auto !important;
	min-width: 0 !important;
	min-height: 34px !important;

	margin: 0 !important;
	padding: 0.45rem 0.72rem !important;

	background: transparent !important;
	color: var(--ww-color-white) !important;

	border: 2px solid var(--ww-color-white) !important;
	border-radius: 999px !important;

	box-shadow: none !important;

	font-size: 0.78rem !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;

	cursor: pointer !important;

	transform: translateY(0) !important;

	transition:
		background-color var(--ww-transition-fast),
		color var(--ww-transition-fast),
		border-color var(--ww-transition-fast),
		transform var(--ww-transition-fast) !important;
}

body #cookie-compliance .button:hover,
body #cookie-compliance .button:focus,
body #cookie-compliance button:hover,
body #cookie-compliance button:focus,
body #cookie-compliance div.compliance-ok:hover,
body #cookie-compliance div.compliance-ok:focus {
	background: var(--ww-color-white) !important;
	color: var(--ww-color-black) !important;
	border-color: var(--ww-color-white) !important;

	box-shadow: none !important;
	transform: translateY(-1px) !important;
}

/* Remove global button shine inside cookie banner */

body #cookie-compliance .button::before,
body #cookie-compliance button::before {
	display: none !important;
}

/* Smaller button arrow inside cookie banner */

body #cookie-compliance .button:not(.scroll-prev):not(.scroll-next)::after,
body #cookie-compliance button:not(.scroll-prev):not(.scroll-next)::after {
	width: 0.82rem !important;
	height: 0.82rem !important;

	background-color: var(--ww-color-white) !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-size: 60% 60% !important;
}

body #cookie-compliance .button:not(.scroll-prev):not(.scroll-next):hover::after,
body #cookie-compliance .button:not(.scroll-prev):not(.scroll-next):focus::after,
body #cookie-compliance button:not(.scroll-prev):not(.scroll-next):hover::after,
body #cookie-compliance button:not(.scroll-prev):not(.scroll-next):focus::after {
	background-color: var(--ww-color-black) !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ==========================================
   SAVED CONFIRMATION TOAST
========================================== */

body #cookie-compliance .saved-mask {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 1rem !important;
	inset: auto auto 1rem 50% !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: min(calc(100% - 2rem), 420px) !important;
	height: auto !important;
	min-height: 0 !important;

	padding: 1rem 1.25rem !important;

	background: var(--ww-color-black) !important;
	color: var(--ww-color-white) !important;

	border: 1px solid rgba(255,255,255,.35) !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 34px rgba(0,0,0,.28);

	text-align: center !important;
	font-size: 1rem !important;
	font-weight: 850 !important;
	line-height: 1.25 !important;

	transform: translateX(-50%) !important;

	pointer-events: none !important;

	animation: ww-cookie-saved-toast 2.8s ease forwards;
}

body #cookie-compliance .saved-mask.hidden {
	display: none !important;
}

@keyframes ww-cookie-saved-toast {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}

	12%,
	78% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	100% {
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(10px);
	}
}

/* ==========================================
   MOBILE COOKIE BANNER
========================================== */

@media (max-width: 767px) {

	body #cookie-compliance {
		max-height: 72vh !important;

		border-radius: var(--ww-radius-m) var(--ww-radius-m) 0 0 !important;
	}

	body #cookie-compliance > .mod_cookies {
		width: calc(100% - 2rem) !important;
		padding: 1rem 0 !important;
	}

	body #cookie-compliance > .mod_cookies > .layout-cell {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}

	body #cookie-compliance .textblock h2 {
		font-size: 1.5rem !important;
	}

	body #cookie-compliance .textblock p {
		font-size: 0.85rem !important;
		line-height: 1.45 !important;
	}

	body #cookie-compliance .preferences {
		width: 100% !important;
	}

	body #cookie-compliance .mod_cookies_component_preferences > .layout-cell.cookie-selection,
	body #cookie-compliance .mod_cookies_component_preferences .layout-cell.cookie-selection[data-cell-id="655"] {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"label"
			"choices"
			"buttons" !important;

		gap: 0.75rem !important;
	}

	body #cookie-compliance .layout-component.cookie-selection,
	body #cookie-compliance .layout-component.cookie-selection[data-cid="1389"] {
		gap: 0.7rem 1rem !important;
	}

	body #cookie-compliance .layout-cell.cookie-selection > .layout-cell,
	body #cookie-compliance .layout-cell.cookie-selection[data-cell-id="655"] > .layout-cell[data-cell-id="656"] {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 0.65rem !important;

		width: 100% !important;
		justify-content: stretch !important;
	}

	body #cookie-compliance .layout-component.accept-all,
	body #cookie-compliance .layout-component.save-choices,
	body #cookie-compliance .layout-component.refuse-all,
	body #cookie-compliance .layout-component[data-cid="1390"],
	body #cookie-compliance .layout-component[data-cid="1391"],
	body #cookie-compliance .layout-component[data-cid="1392"] {
		width: 100% !important;
	}

	body #cookie-compliance .button,
	body #cookie-compliance button,
	body #cookie-compliance div.compliance-ok {
		width: 100% !important;
		min-height: 38px !important;

		padding: 0.6rem 0.8rem !important;

		white-space: normal !important;
	}

}
 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Form */

 /* Begin CSS Part: Google Analytics */

 /* Begin CSS Part: Home */

 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */

 /* Begin CSS Part: Orders */

 /* Begin CSS Part: Payment Gateway */

 /* Begin CSS Part: Qanda */

 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */

 /* Begin CSS Part: Scroller */
/* ==========================================
   WATMAN WEB FRAMEWORK
   SCROLLER - CRITICAL
   HERO / BANNERS
   4 ALL FOUNDATION
========================================== */

/* ==========================================
   BANNER VARIABLES
========================================== */

:root {
	/*
		hero-banner is now a global banner class.
		It does not control height.

		Height is controlled by banner type:
		- scroller-banner-header
		- scroller-banner-header.hero-home
		- static-banner-header
		- video-banner-header
		- inline-image-banner
	*/

	--ww-banner-standard-min-height: clamp(360px, 42vw, 920px);

	--ww-banner-scroller-min-height: clamp(420px, 52vw, 920px);
	--ww-banner-home-scroller-min-height: clamp(500px, 60vw, 920px);

	/* Backwards-compatible aliases */
	--ww-banner-static-min-height: var(--ww-banner-standard-min-height);
	--ww-banner-video-min-height: var(--ww-banner-standard-min-height);
	--ww-banner-inline-min-height: var(--ww-banner-standard-min-height);

	--ww-banner-content-width: 760px;
	--ww-banner-copy-width: 640px;

	--ww-banner-glow:
		radial-gradient(
			circle at 18% 45%,
			rgba(217,147,14,.46) 0%,
			rgba(217,147,14,.18) 28%,
			transparent 52%
		);

	--ww-banner-glow-soft:
		radial-gradient(
			circle at 18% 45%,
			rgba(217,147,14,.38) 0%,
			rgba(217,147,14,.14) 30%,
			transparent 54%
		);

	--ww-banner-overlay-readable:
		linear-gradient(
			90deg,
			rgba(0,0,0,.78) 0%,
			rgba(0,0,0,.48) 42%,
			rgba(0,0,0,.25) 100%
		);

	--ww-banner-overlay-readable-soft:
		linear-gradient(
			90deg,
			rgba(0,0,0,.74) 0%,
			rgba(0,0,0,.44) 42%,
			rgba(0,0,0,.24) 100%
		);

	--ww-banner-overlay-primary:
		var(--ww-banner-glow),
		var(--ww-banner-overlay-readable);

	--ww-banner-overlay-static:
		var(--ww-banner-glow-soft),
		var(--ww-banner-overlay-readable-soft);

	--ww-banner-overlay-bottom:
		linear-gradient(
			0deg,
			rgba(0,0,0,.48),
			transparent
		);
}

/* ==========================================
   BANNER TYPE HEIGHT MAPPING
========================================== */

.scroller-banner-header {
	--ww-banner-current-min-height: var(--ww-banner-scroller-min-height);
}

.scroller-banner-header.hero-home {
	--ww-banner-current-min-height: var(--ww-banner-home-scroller-min-height);
}

.static-banner-header {
	--ww-banner-current-min-height: var(--ww-banner-static-min-height);
}

.video-banner-header {
	--ww-banner-current-min-height: var(--ww-banner-video-min-height);
}

.inline-image-banner {
	--ww-banner-current-min-height: var(--ww-banner-inline-min-height);
}

/* ==========================================
   SHARED BANNER SHELLS
========================================== */

.hero-banner,
.scroller-banner-header,
.static-banner-header,
.video-banner-header,
.inline-image-banner {
	position: relative;
	isolation: isolate;

	width: 100%;
}

/*
	Important:
	.hero-banner is global and deliberately has no height.
	Actual height belongs to the specific banner type.
*/

.scroller-banner-header,
.static-banner-header,
.video-banner-header,
.inline-image-banner {
	overflow: hidden;

	background: var(--ww-color-black);
}

.scroller-banner-header {
	min-height: var(--ww-banner-current-min-height);
}

.static-banner-header,
.static-banner-header > .background-image {
	min-height: var(--ww-banner-current-min-height);
}

.video-banner-header {
	display: grid;
	align-items: center;

	min-height: var(--ww-banner-current-min-height);
}

.inline-image-banner {
	display: grid;
	align-items: center;

	min-height: var(--ww-banner-current-min-height);
}

/* ==========================================
   SHARED BANNER CONTENT
========================================== */

.scroller-banner-header .nested-banner-content,
.static-banner-header .nested-banner-content,
.video-banner-header .nested-banner-content,
.inline-image-banner .nested-banner-content {
	position: relative;
	z-index: 3;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	box-sizing: border-box;

	width: calc(100% - (var(--ww-page-gutter) * 2));
	max-width: var(--ww-container-max);

	margin-inline: auto;
	padding-block: clamp(4rem, 8vw, 7rem);

	color: var(--ww-color-white);
}

/* Give each banner type true vertical centring */

.scroller-banner-header .nested-banner-content,
.static-banner-header .nested-banner-content,
.video-banner-header .nested-banner-content,
.inline-image-banner .nested-banner-content {
	min-height: var(--ww-banner-current-min-height);
}

.inline-image-banner .nested-banner-content {
	padding-block: clamp(4rem, 7vw, 6.5rem);
}

.scroller-banner-header .nested-banner-content .content,
.scroller-banner-header .nested-banner-content .title,
.static-banner-header .nested-banner-content .content,
.static-banner-header .nested-banner-content .title,
.video-banner-header .nested-banner-content .content,
.video-banner-header .nested-banner-content .title,
.inline-image-banner .nested-banner-content .content,
.inline-image-banner .nested-banner-content .title {
	width: 100%;
	max-width: var(--ww-banner-content-width);
}

.scroller-banner-header .nested-banner-content h1,
.scroller-banner-header .nested-banner-content h2,
.static-banner-header .nested-banner-content h1,
.static-banner-header .nested-banner-content h2,
.video-banner-header .nested-banner-content h1,
.video-banner-header .nested-banner-content h2,
.inline-image-banner .nested-banner-content h1,
.inline-image-banner .nested-banner-content h2 {
	margin: 0 0 1rem;

	color: inherit;

	font-size: clamp(2.6rem, 6vw, 6rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.055em;
}

.scroller-banner-header .nested-banner-content p,
.static-banner-header .nested-banner-content p,
.video-banner-header .nested-banner-content p,
.inline-image-banner .nested-banner-content p {
	max-width: var(--ww-banner-copy-width);

	margin: 0 0 2rem;

	font-size: clamp(1.1rem, 2vw, 1.4rem);
	line-height: 1.55;
}

.scroller-banner-header .nested-banner-content p:last-child,
.static-banner-header .nested-banner-content p:last-child,
.video-banner-header .nested-banner-content p:last-child,
.inline-image-banner .nested-banner-content p:last-child {
	margin-bottom: 0;
}

/* Remove CMS padding utility if it creates odd title spacing */

.scroller-banner-header .nested-banner-content .padding-bottom-medium,
.static-banner-header .nested-banner-content .padding-bottom-medium,
.video-banner-header .nested-banner-content .padding-bottom-medium,
.inline-image-banner .nested-banner-content .padding-bottom-medium {
	padding-bottom: 0;
}

/* ==========================================
   HERO BANNER BUTTONS
   Premium treatment layered on top of global button system.
========================================== */

.hero-banner .button:not(.scroll-prev):not(.scroll-next),
.scroller-banner-header .button:not(.scroll-prev):not(.scroll-next),
.static-banner-header .button:not(.scroll-prev):not(.scroll-next),
.video-banner-header .button:not(.scroll-prev):not(.scroll-next),
.inline-image-banner .button:not(.scroll-prev):not(.scroll-next) {
	--ww-button-current-bg: var(--ww-color-orange);
	--ww-button-current-text: var(--ww-color-black);
	--ww-button-current-border: var(--ww-color-orange);

	--ww-button-hover-bg: var(--ww-color-black);
	--ww-button-hover-text: var(--ww-color-orange);
	--ww-button-hover-border: var(--ww-color-orange);

	--ww-button-arrow-bg: var(--ww-color-black);
	--ww-button-arrow-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23d9930e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	--ww-button-hover-arrow-bg: var(--ww-color-orange);
	--ww-button-hover-arrow-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	--ww-button-shadow:
		0 18px 42px rgba(0,0,0,.34),
		0 0 32px rgba(217,147,14,.22);

	--ww-button-hover-shadow:
		0 22px 54px rgba(0,0,0,.42),
		0 0 38px rgba(217,147,14,.28);

	min-height: 60px;
	padding: 1.08rem 1.75rem;

	font-size: 1.06rem;
	font-weight: 900;
}

.hero-banner .button:not(.scroll-prev):not(.scroll-next)::after,
.scroller-banner-header .button:not(.scroll-prev):not(.scroll-next)::after,
.static-banner-header .button:not(.scroll-prev):not(.scroll-next)::after,
.video-banner-header .button:not(.scroll-prev):not(.scroll-next)::after,
.inline-image-banner .button:not(.scroll-prev):not(.scroll-next)::after {
	width: 1.45rem;
	height: 1.45rem;

	background-size: 56% 56%;
}

.hero-banner .button:not(.scroll-prev):not(.scroll-next):hover,
.hero-banner .button:not(.scroll-prev):not(.scroll-next):focus,
.scroller-banner-header .button:not(.scroll-prev):not(.scroll-next):hover,
.scroller-banner-header .button:not(.scroll-prev):not(.scroll-next):focus,
.static-banner-header .button:not(.scroll-prev):not(.scroll-next):hover,
.static-banner-header .button:not(.scroll-prev):not(.scroll-next):focus,
.video-banner-header .button:not(.scroll-prev):not(.scroll-next):hover,
.video-banner-header .button:not(.scroll-prev):not(.scroll-next):focus,
.inline-image-banner .button:not(.scroll-prev):not(.scroll-next):hover,
.inline-image-banner .button:not(.scroll-prev):not(.scroll-next):focus {
	transform: translateY(-4px);
}

/* Optional hero secondary button */

.hero-banner .button.button--hero-secondary,
.scroller-banner-header .button.button--hero-secondary,
.static-banner-header .button.button--hero-secondary,
.video-banner-header .button.button--hero-secondary,
.inline-image-banner .button.button--hero-secondary {
	--ww-button-current-bg: rgba(255,255,255,.08);
	--ww-button-current-text: var(--ww-color-white);
	--ww-button-current-border: rgba(255,255,255,.75);

	--ww-button-hover-bg: var(--ww-color-white);
	--ww-button-hover-text: var(--ww-color-black);
	--ww-button-hover-border: var(--ww-color-white);

	--ww-button-arrow-bg: var(--ww-color-white);
	--ww-button-arrow-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	--ww-button-hover-arrow-bg: var(--ww-color-black);
	--ww-button-hover-arrow-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================
   SCROLLER BANNER
========================================== */

.scroller-banner-header,
.scroller-banner-header .banner-scroller,
.scroller-banner-header .banner-scroller .slide-container,
.scroller-banner-header .banner-scroller .slide,
.scroller-banner-header .banner-scroller .slide > .layout-cell {
	position: relative;

	width: 100%;
	min-height: var(--ww-banner-current-min-height);
}

.scroller-banner-header .banner-scroller {
	overflow: hidden;

	background: var(--ww-color-black);
}

/*
	EOS applies inline heights to .slide-container and .slide.
	We deliberately override them to keep every internal layer synced
	to the correct scroller height variable.
*/

.scroller-banner-header .banner-scroller .slide-container,
.scroller-banner-header .banner-scroller .slide {
	height: var(--ww-banner-current-min-height) !important;
	min-height: var(--ww-banner-current-min-height) !important;
}

.scroller-banner-header .banner-scroller .slide > .layout-cell {
	display: grid !important;
	align-items: center !important;

	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
}

.scroller-banner-header .slide .background-image,
.scroller-banner-header .slide .banner-background-image {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
}

.banner-background-image {
	background-color: var(--ww-color-black);
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.banner-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--ww-banner-overlay-primary);

	pointer-events: none;
}

.banner-background-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;

	height: 36%;

	background: var(--ww-banner-overlay-bottom);

	pointer-events: none;
}

/* Keep content above background */

.scroller-banner-header .banner-scroller .slide .nested-banner-content {
	position: relative !important;
	z-index: 3 !important;
}

/* ==========================================
   SCROLLER PAGER
========================================== */

.scroller-banner-header .scroller-pager {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5rem;
	z-index: 5;
}

.scroller-banner-header .sp-links {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
}

.scroller-banner-header .sp-link {
	width: 12px;
	height: 12px;

	background: rgba(255,255,255,.55);

	border: 1px solid rgba(255,255,255,.6);
	border-radius: 999px;

	overflow: hidden;
	text-indent: -999px;

	cursor: pointer;
}

.scroller-banner-header .sp-link.active {
	background: var(--ww-color-orange);
	border-color: var(--ww-color-orange);
}

/* ==========================================
   STATIC BANNER
========================================== */

.static-banner-header > .background-image {
	position: relative;
	isolation: isolate;

	display: grid;
	align-items: center;

	width: 100%;

	background-color: var(--ww-color-black);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.static-banner-header > .background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--ww-banner-overlay-static);

	pointer-events: none;
}

.static-banner-header > .background-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;

	height: 34%;

	background: var(--ww-banner-overlay-bottom);

	pointer-events: none;
}

/* ==========================================
   VIDEO BANNER
========================================== */

.video-banner-header video,
.video-banner-header iframe,
.video-banner-header .video,
.video-banner-header .video-background {
	position: absolute;
	inset: 0;
	z-index: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.video-banner-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--ww-banner-overlay-static);

	pointer-events: none;
}

.video-banner-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;

	height: 34%;

	background: var(--ww-banner-overlay-bottom);

	pointer-events: none;
}

/* ==========================================
   INLINE IMAGE BANNER
   For category/listing pages where EOS outputs an inline image.
========================================== */

/* Make the current-category image block behave like a background layer */

.inline-image-banner > .layout-component.current-category,
.inline-image-banner > .layout-component.current-category > .layout,
.inline-image-banner > .layout-component.current-category > .layout > .layout-cell,
.inline-image-banner .banner-image {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* Force the inline image to cover the banner area */

.inline-image-banner .banner-image img {
	display: block;

	width: 100% !important;
	height: 100% !important;
	max-width: none !important;

	object-fit: cover;
	object-position: center center;
}

/* Overlay for readable text */

.inline-image-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--ww-banner-overlay-primary);

	pointer-events: none;
}

.inline-image-banner::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;

	height: 34%;

	background: var(--ww-banner-overlay-bottom);

	pointer-events: none;
}

/* ==========================================
   MOBILE BANNERS
========================================== */

@media (max-width: 767px) {

	:root {
		--ww-banner-standard-min-height: 520px;

		--ww-banner-scroller-min-height: 600px;
		--ww-banner-home-scroller-min-height: 660px;

		--ww-banner-overlay-readable:
			linear-gradient(
				90deg,
				rgba(0,0,0,.78) 0%,
				rgba(0,0,0,.54) 52%,
				rgba(0,0,0,.34) 100%
			);

		--ww-banner-overlay-readable-soft:
			linear-gradient(
				90deg,
				rgba(0,0,0,.76) 0%,
				rgba(0,0,0,.52) 52%,
				rgba(0,0,0,.34) 100%
			);
	}

	.scroller-banner-header .nested-banner-content,
	.static-banner-header .nested-banner-content,
	.video-banner-header .nested-banner-content {
		padding-block: 5rem 4rem;
	}

	.inline-image-banner .nested-banner-content {
		padding-block: 4.5rem;
	}

	.scroller-banner-header .nested-banner-content h1,
	.scroller-banner-header .nested-banner-content h2,
	.static-banner-header .nested-banner-content h1,
	.static-banner-header .nested-banner-content h2,
	.video-banner-header .nested-banner-content h1,
	.video-banner-header .nested-banner-content h2,
	.inline-image-banner .nested-banner-content h1,
	.inline-image-banner .nested-banner-content h2 {
		font-size: clamp(2.3rem, 13vw, 3.4rem);
	}

	.inline-image-banner .nested-banner-content h1,
	.inline-image-banner .nested-banner-content h2 {
		font-size: clamp(2.4rem, 14vw, 3.8rem);
	}

	.scroller-banner-header .nested-banner-content p,
	.static-banner-header .nested-banner-content p,
	.video-banner-header .nested-banner-content p,
	.inline-image-banner .nested-banner-content p {
		font-size: clamp(1.05rem, 4.5vw, 1.22rem);
	}

	.hero-banner .button:not(.scroll-prev):not(.scroll-next),
	.scroller-banner-header .button:not(.scroll-prev):not(.scroll-next),
	.static-banner-header .button:not(.scroll-prev):not(.scroll-next),
	.video-banner-header .button:not(.scroll-prev):not(.scroll-next),
	.inline-image-banner .button:not(.scroll-prev):not(.scroll-next) {
		min-height: 56px;
		padding: 1rem 1.45rem;

		font-size: 1rem;
	}

}

@media (max-width: 480px) {

	:root {
		--ww-banner-standard-min-height: 480px;

		--ww-banner-scroller-min-height: 560px;
		--ww-banner-home-scroller-min-height: 620px;
	}

}


/* ==========================================
   HOME HERO SCROLLER BACKGROUND FULL-WIDTH FIX
   Forces EOS scroller background image layer to span viewport
========================================== */

/* Make the hero section itself full viewport width */

body .hero-banner.scroller-banner-header.hero-home {
	position: relative !important;
	left: 50% !important;

	width: 100vw !important;
	max-width: none !important;

	margin-left: -50vw !important;
	margin-right: 0 !important;

	overflow: hidden !important;

	background: var(--ww-color-black) !important;
}

/* Keep the scroller and slide stack full width */

body .hero-banner.scroller-banner-header.hero-home .banner-scroller,
body .hero-banner.scroller-banner-header.hero-home .slide-container,
body .hero-banner.scroller-banner-header.hero-home .slide,
body .hero-banner.scroller-banner-header.hero-home .slide > .layout-cell {
	width: 100vw !important;
	max-width: none !important;
	min-width: 100vw !important;

	margin-left: 0 !important;
	margin-right: 0 !important;

	overflow: hidden !important;
}

/* Critical bit:
   The background-image component lives inside the slide.
   Force it to viewport width using its own 50vw breakout.
*/

body .hero-banner.scroller-banner-header.hero-home .slide .background-image {
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 0 !important;

	width: 100vw !important;
	max-width: none !important;
	min-width: 100vw !important;
	height: 100% !important;
	min-height: 100% !important;

	margin-left: -50vw !important;
	margin-right: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
}

/* Force the actual image div to fill that full-width background layer */

body .hero-banner.scroller-banner-header.hero-home .slide .banner-background-image {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;

	display: block !important;

	width: 100vw !important;
	max-width: none !important;
	min-width: 100vw !important;
	height: 100% !important;
	min-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Keep the overlay covering the full forced image */

body .hero-banner.scroller-banner-header.hero-home .slide .banner-background-image::before,
body .hero-banner.scroller-banner-header.hero-home .slide .banner-background-image::after {
	width: 100% !important;
	max-width: none !important;
}

/* Put the content back into the nice contained website width */

body .hero-banner.scroller-banner-header.hero-home .nested-banner-content {
	position: relative !important;
	z-index: 3 !important;

	width: calc(100% - (var(--ww-page-gutter) * 2)) !important;
	max-width: var(--ww-container-max) !important;

	margin-left: auto !important;
	margin-right: auto !important;
}

/* Pager stays centred across the viewport */

body .hero-banner.scroller-banner-header.hero-home .scroller-pager {
	width: 100vw !important;
	left: 0 !important;
	right: 0 !important;
}


/* Slide 1 */
body .scroller-banner-header.hero-home .slide[data-index="0"] .banner-background-image {
	background-position: center center !important;
}

/* Slide 2 */
body .scroller-banner-header.hero-home .slide[data-index="1"] .banner-background-image {
	background-position: center top !important;
}

/* Slide 3 */
body .scroller-banner-header.hero-home .slide[data-index="2"] .banner-background-image {
	background-position: center 30% !important;
}

/* Slide 4 */
body .scroller-banner-header.hero-home .slide[data-index="3"] .banner-background-image {
	background-position: center 35% !important;
}
 /* Begin CSS Part: Search */

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */

 /* Begin CSS Part: Social Media */

 /* Begin CSS Part: Sub Layout */

 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: User */

 /* Begin CSS Part: Warning */