/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com - etail image path updated
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777777_256x240.png");
}

/* positioning */
/* Three classes needed to override `.ui-button:hover .ui-icon` */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
	background-image: none;
}
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .003;
	-ms-filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 swiffy 2023
	Filename : swiffy.css
	Last Updated : 10. 07. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

------------------------------------------------------------------------------------- */
.swiffy-slider  {
	position: relative;
	display: block;
	width: 100%;
	--swiffy-slider-snap-align: center;
	--swiffy-slider-item-width: 100%;
	--swiffy-slider-item-gap: 1rem;
	--swiffy-slider-item-reveal: 0rem;
	--swiffy-slider-item-ratio: 1/1;
	--swiffy-slider-item-count: 1;
	--swiffy-slider-nav: var(--blue);
	--swiffy-slider-nav-zoom: 1;
	--swiffy-slider-track-opacity: 0.1;
	--swiffy-slider-track-height: 0;
	--swiffy-slider-nav-outside-size: 3.5rem;
	--swiffy-slider-indicator-outside-size: 1.5rem;
	--swiffy-slider-animation-duration: .75s;
	--swiffy-slider-animation-delay: 0s;
	--swiffy-slider-animation-timing: ease-in-out;

		/* client color scheme */
	--navy: #43575f;
	--blue:#009edf;
	--grey: #6c6c6c;
	--light-grey: #a2a2a2;
	--black: #3d3d3d;
	--white: #fff;
	--off-white: #f6f6f6;

	--swiffy-slider-item-color:var(--grey);
	--swiffy-slider-active-item-color:var(--blue);
}

.swiffy-slider,
.swiffy-slider::after,
.swiffy-slider::before {
	box-sizing: border-box
}

.swiffy-slider ::-webkit-scrollbar {
	height: var(--swiffy-slider-track-height)
}

.swiffy-slider ::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, var(--swiffy-slider-track-opacity))
}

.swiffy-slider ::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .4);
	border-radius: 1rem
}

.swiffy-slider ::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .6)
}

.slider-container {
	--swiffy-slider-item-gap-totalwidth: calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1));
	--swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count));
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	display: grid;
	align-items: center;
	height: 100%;
	grid: auto/auto-flow -webkit-max-content;
	grid: auto/auto-flow max-content;
	grid-auto-rows: 100%;
	grid-auto-columns: var(--swiffy-slider-item-width);
	grid-auto-flow: column;
	grid-gap: var(--swiffy-slider-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: none;
	scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity));
	background-clip: padding-box
}

.slider-container>* {
	scroll-snap-align: var(--swiffy-slider-snap-align);
	position: relative;
	width: 100%;
	height: 100%
}

.slider-item-helper .slider-container>* {
	background-size: cover;
	background-color: #e1e1e1;
	background-position: 50% 50%;
	display: flex;
	justify-content: center;
	align-items: center
}

.slider-item-helper:not(.slider-item-ratio) .slider-container>* {
	min-height: 20rem
}

.slider-item-ratio .slider-container>*>*{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.slider-item-ratio-contain .slider-container>*>*{
	-o-object-fit: contain;
	object-fit: contain
}

.slider-item-ratio .slider-container>::after{
	display: block;
	padding-top: calc(100% / var(--swiffy-slider-item-ratio) );
	content: ""
}


.slider-indicators {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 1rem 0;
	list-style: none
}

.slider-nav-scrollbar .slider-indicators {
	margin-bottom: calc(1rem + var(--swiffy-slider-track-height))
}

.slider-indicators>.active {
	opacity: 1;
	background-color: var(--swiffy-slider-active-item-color);
}


.slider-indicators>* {
	box-sizing: content-box;
	flex: 0 1 auto;
	width: 2rem;
	height: .2rem;
	padding: 0;
	border: .4rem solid transparent;
	cursor: pointer;
	background-color: var(--swiffy-slider-item-color);
	background-clip: padding-box;
	opacity: .5;
	transition: opacity .4s ease;
	
	width: .5rem;
	height: .5rem;
	border: .4rem solid transparent;
	border-radius: 50%

	
}

.slider-nav {
	position: absolute;
	top: 0;
	left: .5rem;
	bottom: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	visibility: hidden;
	opacity: .8;
	transition: visibility .1s, opacity .2s linear;
	margin-bottom: var(--swiffy-slider-track-height);
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	-webkit-filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
	filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
	transform: scale(var(--swiffy-slider-nav-zoom))
}

.slider-nav::before {
	position: absolute;
	content: "";
	padding: .5rem;
	width: 3rem;
	height: 3rem;
	pointer-events:all;
}

.slider-nav::after {
	content: "";
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: var(--swiffy-slider-nav);
	background-origin: content-box;
	width: 3rem;
	height: 3rem
}

.slider-nav-arrow .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>")
}

.slider-nav-chevron .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>")
}

.slider-nav-caret .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>")
}

.slider-nav-caretfill .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>");
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>")
}

.swiffy-slider:hover .slider-nav {
	visibility: visible
}

.swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next) {
	visibility: hidden
}

.swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next {
	visibility: hidden
}

.slider-nav-outside .slider-container {
	margin: 0 var(--swiffy-slider-nav-outside-size)
}

.slider-nav-outside .slider-nav {
	padding: 0
}

.swiffy-slider .slider-nav:hover {
	opacity: 1
}

.slider-nav-square .slider-nav {
	padding: 0
}


.slider-nav-round .slider-nav::before {
	border-radius: 50%
}

.slider-nav-round .slider-nav::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E")
}

.slider-nav-dark .slider-nav::after {
	background-color: var(--swiffy-slider-nav-dark)
}

.slider-nav-sm {
	--swiffy-slider-nav-zoom: .75;
	--swiffy-slider-nav-outside-size: 2.5rem
}

.slider-nav.slider-nav-next::after {
	transform: rotate(180deg)
}

.slider-nav.slider-nav-next {
	right: .5rem;
	left: unset
}

.slider-nav-visible .slider-nav {
	visibility: visible
}

.slider-nav-dark .slider-nav {
	opacity: .6
}

.slider-nav-mousedrag .slider-container {
	cursor: -webkit-grab;
	cursor: grab
}

.slider-nav-mousedrag.dragging .slider-container {
	-ms-scroll-snap-type: unset;
	scroll-snap-type: unset;
	scroll-behavior: unset;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.slider-nav-mousedrag.dragging .slider-nav {
	visibility: hidden
}

@media (hover:hover) {
	.slider-nav-mousedrag .slider-container::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%
	}
}

@media (prefers-reduced-motion:no-preference) {
	.slider-nav-animation.slider-nav-animation-fast {
		--swiffy-slider-animation-duration: .25s
	}
	.slider-nav-animation.slider-nav-animation-slow {
		--swiffy-slider-animation-duration: 1.25s
	}
	.slider-nav-animation .slider-container>*>* {
		transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);
		transition-delay: var(--swiffy-slider-animation-delay)
	}
	.slider-nav-animation .slider-container .slide-visible>* {
		transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);
		transition-delay: var(--swiffy-slider-animation-delay)
	}
	.slider-nav-animation.slider-nav-animation-fadein .slider-container>*>* {
		opacity: .5
	}
	.slider-nav-animation.slider-nav-animation-scale .slider-container>*>* {
		transform: scale(.9)
	}
	.slider-nav-animation.slider-nav-animation-appear .slider-container>*>* {
		opacity: .3;
		transform: scale(.9)
	}
	.slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>* {
		transform: scale(.25)
	}
	.slider-nav-animation.slider-nav-animation-zoomout .slider-container>* {
		overflow: hidden
	}
	.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>* {
		transform: scale(1.3)
	}
	.slider-nav-animation.slider-nav-animation-turn .slider-container>*>* {
		transform: rotateY(70deg)
	}
	.slider-nav-animation.slider-nav-animation-slideup .slider-container>*>* {
		transform: translateY(60%) scale(.99)
	}
	.slider-nav-animation.slider-nav-animation-slideup .slider-container {
		overflow-y: hidden
	}
	.slider-nav-animation .slider-container>.slide-visible>* {
		opacity: 1;
		transform: none
	}
}

@media (min-width:62rem) {
	.slider-item-show2:not(.slider-item-snapstart) .slider-container>*,
	.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,
	.slider-item-show6:not(.slider-item-snapstart) .slider-container>* {
		scroll-snap-align: unset
	}
	.slider-item-show2:not(.slider-item-snapstart) .slider-container>::before,
	.slider-item-show4:not(.slider-item-snapstart) .slider-container>::before,
	.slider-item-show6:not(.slider-item-snapstart) .slider-container>::before {
		content: " ";
		display: block;
		position: absolute;
		left: calc((var(--swiffy-slider-item-gap)/2)*-1);
		top: 0;
		width: 1px;
		height: 1px;
		scroll-snap-align: var(--swiffy-slider-snap-align)
	}
	.slider-nav-outside-expand .slider-nav {
		margin-left: -4rem
	}
	.slider-nav-outside-expand .slider-nav.slider-nav-next {
		margin-right: -4rem
	}
	.slider-nav-sm.slider-nav-outside-expand .slider-nav {
		margin-left: -3.5rem
	}
	.slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next {
		margin-right: -3.5rem
	}
	.slider-indicators-sm.slider-indicators {
		display: none
	}
}

@media (max-width:62rem) {
	.swiffy-slider {
		--swiffy-slider-track-height: 0rem;
		--swiffy-slider-item-reveal: 0rem;
		--swiffy-slider-item-count: 1;
		--swiffy-slider-nav-zoom: .875
	}
	.swiffy-slider .slider-item-show2-sm {
		--swiffy-slider-item-count: 2
	}
	.slider-item-reveal {
		--swiffy-slider-item-reveal: 4rem
	}
	.slider-item-snapstart.slider-item-reveal {
		--swiffy-slider-item-reveal: 2rem
	}
	.slider-item-show6 .slider-container {
		grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3))
	}
	.slider-item-show6.slider-item-reveal .slider-container {
		grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem)
	}
	.slider-item-show6.slider-item-reveal .slider-container>* {
		scroll-snap-align: unset
	}
	.slider-item-show6.slider-item-reveal .slider-container>::before {
		content: " ";
		display: block;
		position: absolute;
		left: calc((var(--swiffy-slider-item-gap)/2)*-1);
		top: 0;
		width: 1px;
		height: 1px;
		scroll-snap-align: center
	}
	.slider-nav::after,
	.slider-nav::before {
		width: 2rem;
		height: 2rem;
		padding: .3rem
	}
	.slider-nav-round .slider-nav::after,
	.slider-nav-square .slider-nav::after {
		width: 1.75rem;
		height: 1.75rem;
		margin: .125rem
	}
	.slider-nav-outside .slider-container,
	.slider-nav-outside-expand .slider-container {
		margin: 0 2rem
	}
	.slider-nav-outside-expand .slider-container {
		margin: 0 var(--swiffy-slider-nav-outside-size)
	}
	.slider-nav-outside-expand .slider-nav {
		padding: 0
	}
	.slider-indicators-round .slider-indicators>*,
	.slider-indicators-round.slider-indicators>*,
	.slider-indicators-square .slider-indicators>*,
	.slider-indicators-square.slider-indicators>* {
		width: .3rem;
		height: .3rem
	}
	.slider-indicators {
		margin-bottom: .5rem;
		/* display: none; */
	}
	.slider-nav-scrollbar .slider-indicators {
		margin-bottom: 0
	}
	.slider-indicators>* {
		/* width: 1rem; */
		/* height: .125rem; */
		/* border-width: .25rem; */
	}
	.slider-indicators-sm .slider-indicators,
	.slider-indicators-sm.slider-indicators {
		display: flex
	}
}

@media (max-width:48rem) {
	.slider-item-show6 .slider-container {
		grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2))
	}
	.slider-item-show6.slider-item-reveal .slider-container {
		grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem)
	}
}

@media (hover:none) {
	.swiffy-slider.slider-nav-touch .slider-nav {
		visibility: visible
	}
	.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container,
	.swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container {
		margin: 0 0
	}
	.slider-item-nosnap-touch {
		--swiffy-slider-snap-align: unset
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 Base 2023
	Filename : sitepanes.css
	Last Updated : 14. 03. 2025 
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
		=Definitions
		=Reset
		=Normalise
		=Jquery Base Overrides
		=Page
		=Typography
			defaults
			articles
		=Buttons
		=Tables
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=Base CSS definitions and element stylings
			Messages
			Headings
		=Grid Layout
			layout base classes
			Custom classes - should become standard too
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=SiteContainers
		=FIXEDTop Panel
		=Top Panel
		=Center Panel
		=Main Panel
			fullwidth
			wide
			leftpanel
		=Footer Panel
		=Bottom Panel
		=FIXEDBottom Panel
			Cookie Popup
			copyright and managed by
		=COMS COMPONENTS
			Breadcrumb
			NavBar (ruby)
				**********************
				**********************
				**********************
			Swiffy Slider
			OwlCarousel
				Basic
				Product
			Newsletter
			Accordion
			Blog
			Store Locator
			HoverBasket
			Autocomplete
			Email when back in stock EWIS
			PopupDialog / Popup Add to Basket / Direct Despatch
		=DepartmentPages
			SearchHeader / SearchFooter
			FilterSearch
			Deptsingle
			Subdepartment tree
		=FeaturedProducts
		=ProductPage
		=Basket
		=Checkout
		=My Account
		=ConfirmationPage
		=Sitemap
		=Client Spefific Stylings 

	
=Definitions
------------------------------------------------------------------------------------- */
:root {
	--site-max-width: 1400px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: calc(var(
	--site-max-width) / 4);
	--line-height: 1.5;
	--font-weight: 700;
	--letter-spacing: .2rem;
	--outline-width: 3px;
	--spacing: 1rem;
	--half-spacing: .5rem;
	--typography-spacing-vertical: .5rem;
	--block-spacing-vertical: calc(var(
	--spacing) * 2);
	--block-spacing-horizontal: var(
	--spacing);
	--form-element-spacing-vertical: 0.5rem;
	--form-element-spacing-horizontal: .725rem;
	--nav-element-spacing-vertical: 1rem;
	--nav-element-spacing-horizontal: 0.5rem;
	--nav-link-spacing-vertical: 0.5rem;
	--nav-link-spacing-horizontal: 0.5rem;
	--form-label-font-weight: var(
	--font-weight);
	
	/*fonts */
	--text-font:
	"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	--text-font-weight: 400;
	
	--heading-font:
	"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	--heading-font-weight: 400;
	
	--sub-heading-font:
	"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	--sub-heading-font-weight: 500;

	--button-font:
	"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	--button-font-weight: 400;
	
	--font-awesome:
	"Font Awesome 6 Pro";
	--font-size: 16px;
	
	/* grid info */
	--grid-spacing-vertical: var(
	--spacing);
	--grid-spacing-horizontal: var(
	--spacing);
	
	/* shadows */
	--box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
	--transition: 0.5s ease-in-out;

	/* client color scheme */
	--blue: #003896;
	--light-blue:#00adef;
	--grey: #444444;
	--light-grey: #888888;
	--black: #000000;
	--white: #fff;
	--off-white: #e9e9e9;
	--red: #fb3d49;
	--green: #7dba00;
	--light-green:#e1eec2;

	
	/*standard colors */
	--error-color: #B51E1E;
	--warn-color: rgb(230 167 27);
	--info-color: #7dba00;
	--help-color: #2879ff;
	
	/*Section colors */
	--background-color: var(
	--white);
	--top-bar-color: var(
	--blue);
	--top-bar-text-color: var(
	--white);
	--top-bar-link-color: var(
	--white);
	--top-panel-color: var(
	--white);
	
	--center-panel-color: var(
	--white);
	--main-panel-color: var(
	--white);
	
	--footer-panel-color: var(
	--white);
	--footer-panel-alt-color: var(
	--white);
	
	--bottom-panel-color: var(
	--off-white);
	--bottom-panel-text-color: var(
	--grey);
	--bottom-bar-color: var(
	--grey);
	--bottom-bar-text-color: var(
	--off-white);
	--bottom-panel-heading-color: var(
	--blue);
	
	--panel-color: var(
	--white);
	--dropdown-color: var(
	--white);
	--popout-color: var(
	--white);
	--form-color: var(
	--white);
	
	/*nav colors */
	--navbar-height: 40px;
	--navbar-color: var(
	--green);
	--navbar-heading-color: var(
	--white);
	--navbar-heading-weight: var(
	--heading-font-weight);
	--navbar-link-color: var(
	--white);
	--nav-text-color: var(
	--grey);
	
	--navbar-active-color: var(
	--blue);
	--navbar-active-text-color: var(
	--white);
	
	--navbar-hover-color: var(
	--off-white);
	--navbar-hover-text-color: var(
	--black);
	
	--navbar-dropdown-width: 240px;
	--navbar-dropdown-item-height: 40px;
	--navbar-dropdown-color: var(
	--white);
	--navbar-dropdown-text-color: var(
	--grey);
	--navbar-dropdown-text-size: .875rem;
	
	--navbar-sidebar-color: var(
	--light-grey);
	--navbar-sidebar-text-color: var(
	--grey);
	--navbar-sidebar-hover-color: var(
	--off-white);
	--navbar-popout-color: var(
	--off-white);
	
	/*Buttons */
	--button-color: var(
	--green);
	--button-text-color: var(
	--white);
	--button-border-color: var(
	--blue);
	--button-hover-text-color: var(
	--white);
	--button-hover-color: var(
	--blue);
	--button-hover-border-color: var(
	--blue);
	
	--alt-button-color: var(
	--light-grey);
	--alt-button-text-color: var(
	--grey);
	--alt-button-border-color: var(
	--grey);
	--alt-button-hover-text-color: var(
	--grey);
	--alt-button-hover-color: var(
	--light-grey);
	--alt-button-hover-border-color: var(
	--grey);
	
	--checkout-button: var(
	--blue);
	--checkout-button-text: var(
	--white);
	
	--info-button: var(
	--info-color);
	--info-button-text: var(
	--white);
	--icon-color: var(
	--error-color);
	
	/*Borders */
	--border-color: var(
	--off-white);
	--border-alt-color: var(
	--blue);
	--border-color-light: var(
	--light-grey);
	--border-radius: 0;
	--border-width: 1px;
	
	/*Text */
	--color: var(
	--grey);
	--text-color: var(
	--grey);
	--text-color-light: var(
	--grey);
	--text-heading-color: var(
	--grey);
	--text-sub-heading-color: var(
	--grey);
	--text-link-color: var(
	--blue);
	--text-link-color-hover: var(
	--blue);
	--text-link-color-focus: transparent;
	
	/* featured product element fprd*/
	--fprd-color: var(
	--off-white);
	--fprd-title-font: var(
	--sub-heading-font);
	--fprd-title-font-weight: 500;
	--fprd-title-color: var(
	--blue);
	/*sets height of fprd title element for consistency - need to figure a way of this being calculated in a way that matches the desired # of lines*/
	--fprd-title-height: 5rem;
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}

/* To enable HTML5 elements in IE */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}

input, select, textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
	outline-offset: 0px;
}

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */
html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b, strong {
	font-weight: var(--heading-font-weight);
}

code, kbd, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

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

.imgcont {}

.imgcont img {
	display: block;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--grey);
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--grey);
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--grey);
}


/* -------------------------------------------------------------------------------------
=Page 
------------------------------------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased
}

body {
	background-color: var(--background-color);
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
	color: var(--text-color);
	font-size: 16px;
}

ol {
	margin-left: .5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */

p {
	overflow-wrap: break-word;
}

b, strong {
	font-weight: 700;
}

sub, sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

a, [role=link] {
	--background-color: transparent;
	outline: none;
	background-color: var(--background-color);
	color: inherit;
	-webkit-text-decoration: var(--text-decoration);
	text-decoration: var(--text-decoration);
	transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}

a:is([aria-current], :hover, :active, :focus), [role=link]:is([aria-current], :hover, :active, :focus) {
	--color: var(--text-link-color-hover);
	--text-decoration: underline;
}

a:focus, [role=link]:focus {
	--background-color: var(--text-link-color-focus);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: var(--typography-spacing-vertical);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: var(--font-size);
	overflow-wrap: break-word;
	color:var(--blue);
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em{
	font-style:normal;
	font-weight:400;

}

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

h1 {
	font-size: 2rem;
	--typography-spacing-vertical: .5rem;
}

h2 {
	font-size: 1.75rem;
	--typography-spacing-vertical: .5rem;
}

h3 {
	font-size: 1.5rem;
	--typography-spacing-vertical: .5rem;
}

h4 {
	font-size: 1.25rem;
	--typography-spacing-vertical: .5rem;
}

h5 {
	font-size: 1.125rem;
	--typography-spacing-vertical: .5rem;
}

p {
	font-family: var(--text-font);
	margin-bottom: var(--typography-spacing-vertical);
}

em {
	font-style: italic;
}

small {
	font-size: .825em;
}

[type=checkbox], [type=radio] {
	--border-width: 2px;
}

[type=checkbox][role=switch] {
	--border-width: 3px;
}

thead th, thead td, tfoot th, tfoot td {
	--border-width: 3px;
}

:not(thead):not(tfoot)>*>td {
	--font-size: 0.875em;
}

pre, code, kbd, samp {
	--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
	--font-weight: var(--heading-font-weight);
}

/* custom dropdown - same on all things... */
select, textarea {
	padding: var(--half-spacing);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

select {
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) #fff no-repeat right .5em center;
	padding-right: 2em;
	padding-left:1em;
	display: inline;
	max-width: 100%;
	border: 1px solid var(--blue);
	border-radius: var(--border-radius);
	color:var(--blue);
	font-size:.825rem
}

/*articles - may require many unsets for other things... */
#pm .artp ul {
	list-style-type: disc;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

#pm .artp ul ul, #pm .artp ul ul ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pm .artp ul li {}

#pm .artp ul.nobullets {
	list-style-type: none;
	margin: .5em 0;
}

#pm .artp ol {
	list-style-type: decimal;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

#pm .artp ol li{
	
}

#pm .artp ol ol,
#pm .artp ol ol ol {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#pm .artp a {
	font-weight: 500;
	color:var(--blue);
}

#pm .artp a:hover {
	text-decoration: underline;
	text-decoration-color: var(--blue);
}

/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit, a.btn {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

.submit:hover, a.btn:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	color: var(--white);
	border: 1px solid var(--button-hover-border-color);
}

/* iphone specific overrides */
textarea, input.text, input.inputtext, input.inputtext_short, .ui-widget select, input[type="text"], input[type="email"], input[type="button"], input[type="submit"], input[type="image"], input#searchbox, .input-checkbox {
	-webkit-appearance: none;
	border-color: var(--blue);
	border-radius: .25rem;
	font-size: 16px;
	font-weight: 200;
	padding: var(--half-spacing) var(--half-spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

td a.btn {
	display: block;
}

input.inputtext, input.inputtext_light {
	font-size:.825em;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
}

/* -------------------------------------------------------------------------------------
=Tables 
------------------------------------------------------------------------------------- */
/* Defaults for tables 
------------------------------------------------------- */

/* Delivery Information
------------------------------------------------------- */
#pm .art.deliveryInfo h3 {}
#pm .art.deliveryInfo h4, #pm .art.deliveryInfo table {}
.deliveryInfo table {}
.deliveryInfo table th {}
.deliveryInfo table td {}
#pm .deliveryInfo .artp table td p {}


/* -------------------------------------------------------------------------------------
=Base CSS definitions and element stylings
------------------------------------------------------------------------------------- */
/*code for banner text overlay */
.bnr {
	position: relative;
}

/* Messages 
------------------------------------------------------- */
#mess {
	padding: 1em;
	margin: 1em 0;
}

li.info:not(.sa_name) {
	color: var(--info-color);
	list-style: none;
	margin-bottom:1rem;
}

li.info img{
	display:inline-block;
}

li.info:not(.sa_name)::before {
	font-family: var(--font-awesome);
	content: '\f05a';
	margin-right: var(--half-spacing)
}

.warn {
	color: var(--error-color);
}

.reqmsg {
	color: var(--error-color);
	font-size: smaller;
}

.oos {
	color: var(--error-color);
}

/* Headings 
------------------------------------------------------- */
.header h2, .header h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.header h2:before, .header h2:after, .header h3:before, .header h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--border-color-light);
}

.header h2:before, .header h3:before {
	margin-left: -50%;
	text-align: right;
}

.deptprods h3, .carousel.prod h2 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

.deptprods h3:after, .carousel.prod h2:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(100% - .5em);
	margin-left: .5em;
	height: 2px;
	content: '\a0';
	background-color: var(--blue);
}

/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
#pm .pmind {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	margin-top:1em;
}

/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */

#pm .pmind .pbnr {
	grid-column: 1/-1;
}

#pm .pmind .pbnr {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

/*set the default for any non grid class article #pm is needed as the css class is set higher than the immediate parent container */
.art, .prdlst, .carousel, .brnd, #depts {
	grid-column: 1/-1;
}

.fullWidth img, .halfWidth img, .halfWidthDbl img, .thirdWidth img, .quarterWidth img, .twoThirdWidth img,
.fullWidth picture, .halfWidth picture, .halfWidthDbl picture, .thirdWidth picture, .quarterWidth picture, .twoThirdWidth picture{
	display: block;
	width:100%;
	height: auto;
}

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}
.titleArticle{
	grid-column:1/-1;
	text-align:center;
}

/*second declaration is temp hack if a form is used (contact page) as setting a css class on the form removes the .form part which is needed for other defaults to then apply */
.halfWidth, .halfWidth+.form {
	grid-column: auto / span 6;
}

.halfWidthDbl {
	grid-column: auto / span 6;
	grid-row: span 2;
}

.quarterWidth {
	grid-column: auto / span 3;
}

.thirdWidth {
	grid-column: auto / span 4;
}

.twoThirdWidth {
	grid-column: auto / span 8;
}

.fullWidth, .halfWidth, .halfWidthDbl, .quarterWidth, .thirdWidth, .twoThirdWidth {
	position: relative;
	/* added to ensure carousel elements work right in firefox */
	display: grid;
	grid-template-columns: 100%;
}

.fullWidth a.img, .halfWidth a.img, .halfWidthDbl a.img, .quarterWidth a.img, .thirdWidth a.img, .twoThirdWidth a.img {}

.bnr.fullWidth, .bnr.halfWidth, .bnr.halfWidthDbl, .bnr.quarterWidth, .bnr.thirdWidth, .bnr.twoThirdWidth {
	overflow: hidden;
}

.fullWidth .toi, .halfWidth .toi, .halfWidthDbl .toi, .quarterWidth .toi, .thirdWidth .toi, .twoThirdWidth .toi {
	background-color: var(--off-white);
	color: var(--grey);
	max-width: 100%;
	width: calc(100% - 1em);
	padding:.5em;
	text-align: left;
	opacity:.8;
	grid-column:1;
	grid-row:1;
	align-self:end;
	position:absolute;
	bottom:0;
}

.fullWidth .toi h3, .halfWidth .toi h3, .halfWidthDbl .toi h3, .quarterWidth .toi h3, .thirdWidth .toi h3, .twoThirdWidth .toi h3, .fullWidth .toi a.txt, .halfWidth .toi a.txt, .halfWidthDbl .toi a.txt, .quarterWidth .toi a.txt, .thirdWidth .toi a.txt, .twoThirdWidth .toi a.txt {
	font-size: 1.5rem;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	margin: 0;
	padding: 0;
}

.fullWidth .toi p, .halfWidth .toi p, .halfWidthDbl .toi p, .quarterWidth .toi p, .thirdWidth .toi p, .twoThirdWidth .toi p {
	padding: 0;
	margin: 0;
}

.fullWidth .toi p a.btn, .halfWidth .toi p a.btn, .halfWidthDbl .toi p a.btn, .quarterWidth .toi p a.btn, .thirdWidth .toi p a.btn, .twoThirdWidth .toi p a.btn {
	border-radius: 2rem;
	margin-top: 1rem;
}

.imageText, .textImage, .deptfooter {
	grid-column: 1/-1;
	width: unset;
	padding: 0;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto auto;
	width: 100%;
	max-width: var(--site-max-width);
	margin: auto;
}

.imageText .imgcont, .deptFooterImgTx .imgcont {
	grid-column: 1;
}

.imageText .artp, .deptFooterImgTx .artp {
	grid-column: 2;
}

.textImage .artp {
	grid-column: 1;
	grid-row: 2;
}

.textImage .imgcont {
	grid-column: 2;
	grid-row: 2;
}

.imageText h2, .textImage h2, .deptFooterImgTx h2 {
	grid-column: 1/-1;
}



/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
	margin: auto;
}

#site {
	background-color: var(--background-color);
}

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	width: 100%;
	background-color:var(--blue);
	color: var(--white);
	text-align: center;
}

/*hide on checkout process */
.chkflow #ptf{
	display:none;
}

#ptf .ext {
	padding:.25rem;
	display: grid;
	grid-template-areas:
		". vat message infolinks .";
	--spacerwidth: calc((100% - var(
	--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth) auto 1fr auto var(--spacerwidth);
	color:var(--white);
}

#ptf .ext h1,
#ptf .ext h2,
#ptf .ext h3,
#ptf .ext h4,
#ptf .ext p{
	color:inherit;
	margin:0;
	font-size:1em;
}


#ptf .ext .art {
	grid-area: message;
}

#ptf .ext .info {
	grid-area: infolinks;
}

#ptf .ext .info li {
	display: inline-block;
	list-style: none;
	margin: 0 var(--half-spacing);
}

#ptf p {
	margin: 0;
}

/* vat switch
------------------------------------------------------- */
.vatsw{
	grid-area:vat;
	text-align:left;
	font-size:.875em;
	padding:0 1rem;
}


[type=checkbox][role=switch] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin-top: -0.125em;
	margin-right: 0.375em;
	margin-left: 0;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	-webkit-margin-end: 0.375em;
	margin-inline-end: 0.375em;
	border-width: 1px;
	font-size: inherit;
	vertical-align: middle;
	cursor: pointer;	
	width: 2.25em;
	height: 1.25em;
	border-radius: 1.25em;
	line-height: 1.25em;
}

[type=checkbox][role=switch] {
	--background-color: var(--blue);
	--border-color: var(--blue);
	--border-width:3px;
	width: 2.25em;
	height: 1.25em;
	border: var(--border-width) solid var(--border-color);
	border-radius: 1.25em;
	background-color: var(--background-color);
	line-height: 1.25em;
	margin:0 .5em;
}

[type=checkbox][role=switch]:focus {
}

[type=checkbox][role=switch]:checked {
	--background-color: var(--blue);
	--border-color: var(--blue);
}

[type=checkbox][role=switch]:before {
	display: block;
	width: calc(1.25em - (var(--border-width) * 2));
	height: 100%;
	border-radius: 50%;
	background-color: var(--white);
	content: "";
	transition: margin 0.1s ease-in-out;
}

[type=checkbox][role=switch]:checked:before {
	background-color: var(--white);
}
[type=checkbox][role=switch]:checked {
	background-image: none;
}
[type=checkbox][role=switch]:checked::before {
	margin-left: calc(1.125em - var(--border-width));
	-webkit-margin-start: calc(1.125em - var(--border-width));
	margin-inline-start: calc(1.125em - var(--border-width));
}

/* -------------------------------------------------------------------------------------
=Top Panel
------------------------------------------------------------------------------------- */
#pt {
	width: 100%;
	margin: auto;
	background-color: var(--top-panel-color);
	margin-bottom: 1rem;
}

/*see media queries for other layouts layout */
#pt .ext {
	--logo-width: 180px;
	--search-width: 1fr;
	--basket-width: 4em;
	--contact-width: auto;
	--user-width:auto;
	--vat-width:auto;
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 1rem;
	align-items: center;
	grid-template-columns: var(--spacer-width)  var(--logo-width) var(--search-width) var(--vat-width) var(--contact-width) var(--user-width) var(--basket-width) var(--spacer-width);
	grid-template-areas:  ".  logo search  vat contact user basket ."
						  "nav nav nav nav nav nav nav nav"
}

#pt .ext>* {
	min-width: 0;
}

/* sticky top panel on scroll 
------------------------------------------------------- */
/* The sticky class is added to the navbar with JS when it reaches its scroll position - this bit is simple enough to do... */
#pt.sticky{
	position: fixed;
	top: 0;
	width: 100%;
	z-index:9999;
}

/* Add some top padding to the page content to prevent sudden quick movement 
(as the navigation bar gets a new position at the top of the page (position:fixed and top:0)
question is... what space do we add as the amount differs from browser to browser, viewport to view port etc*/
.stickyHeader #pc {
	padding-top:var(--headerHeight);
}

.stickyHeader .filter {
	top:var(--headerHeight);
}

#pt.sticky {
	-webkit-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
    -moz-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
    box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
}


/*see media queries for other layouts layout */
#pt.sticky .ext {
	--logo-width: 180px;
	--search-width: 1fr;
	--basket-width: 4em;
	--contact-width: auto;
	--user-width:auto;
	--vat-width:auto;
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-gap: 1rem;
	align-items: center;
	grid-template-columns: var(--spacer-width)  var(--logo-width) var(--search-width) var(--vat-width) var(--contact-width) var(--user-width) var(--basket-width) var(--spacer-width);
	grid-template-areas: "nav nav nav nav nav nav nav nav"
}

#pt.sticky .ext .pbnr,
#pt.sticky .ext .search,
#pt.sticky .ext .info,
#pt.sticky .ext .bskt,
#pt.sticky .ext .vatsw{
	display:none;
}


/* menu toggle - hidden by default, shows on mobile/smaller viewport
------------------------------------------------------- */
.home-hamburger {
	grid-area: nav-start;
	display: none;
	z-index: 1001;
}

.home-hamburger .visible-xs {
	visibility: hidden;
}

/* logo
------------------------------------------------------- */
#pt .pbnr {
	grid-area: logo;
	margin: 1rem 0;
	text-align:left;
}

#pt .pbnr img {
	max-width: 120px;
	margin:0;
	margin-right:auto;
}

#pt .pbnr a.txt {
	display: none;
}

#pt .info ul, #pt .info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#pt .info li.icon {
	display: grid;
	grid-template-columns:  auto 1fr;
	grid-template-areas: "icon text";
	grid-gap:1em;
	margin: var(--spacing);
	text-align: center;
}

#pt .info .icon a.img {
	grid-area: icon;
	display: block;
}

#pt .info .icon .img img {
	display: block;
	max-height: 1.25rem;
	width: auto;
}

#pt .info .icon a.lnk {
	/* display: none; */
}

#pt .info .icon a.tel {
	grid-area: text;
	display: block;
}

#pt .info li.pipe {
	display: none;
}

/* Strapline
------------------------------------------------------- */
#pt .art {
	grid-area: message;
	/* margin: 1rem 0; */
	align-self:end;
}

/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	/* align-self:start; */
	text-align: left;
	/* width: calc(100% - 3rem); */
	font-size: 16px;
}

#pt .search form {
	margin:auto;
}

#pt .search input {
	display: inline-block;
	vertical-align: top;
}

#pt .search input#searchbox {
	height: 40px;
	width: calc(100% - 3rem - 2px);
	margin: auto;
	font-size: 16px;
	padding: .5rem 1rem;
	border: 1px solid var(--border-color-light);
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	width: auto;
	height: 40px;
	margin: 0;
	padding: .5rem 1rem;
	background-color: var(--blue);
	font-family: var(--font-awesome);
	border: 1px solid var(--border-color-light);
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Basket
------------------------------------------------------- */
#pt .bskt{
	grid-area: basket;
	text-align: center;
	position: relative;
	margin: .5em auto;
}

/*items in basket */
#pt .bskt p, #pt .bskt a.mybsktlnk{
	position: absolute;
	top: -1rem;
	right: -1rem;
	background-color: var(--blue);
	color: #fff;
	border-radius: 50%;
	text-align: center;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	font-size: .825em;
	font-weight: 600;
}

#pt .bskt img{
	max-height: 1.25rem;
	margin:auto;
	/* margin-left:auto; */
	width: auto;
}

#pt .bskt span{
	display: block;
	text-align: center;
	font-family: var(--headingFontAlt);
	text-transform: capitalize;
	font-size: 14px;
	width: 62px
}

/* user
------------------------------------------------------- */
#p50003981{
	grid-area:user;
}

/* contact
------------------------------------------------------- */
#p50003980{
	grid-area:contact;
	color:var(--blue);
}

#p50003980 ul{
	display:grid;
	grid-template-columns:auto 1fr;
}

#p50003980 li{
	display:inline-block;
}

/* -------------------------------------------------------------------------------------
=Center Panel
------------------------------------------------------------------------------------- */
#pc {
	margin: auto;
	display: flow-root;
	background-color: var(--center-panel-color);
	text-align: center;
}

/*articles that may be used on depts etc */
#pc .arts {
	width: var(--site-max-width);
	width:100%;
	max-width:1524px;
	max-width:1200px;
	margin: auto;
}

#pc .card{
	position:relative;
}

#pc .card  img {
	min-width: 100%;
	aspect-ratio: 1200/427;
	object-fit: cover;
	margin: auto;
}


#pc .card .content .container{
	margin:5em;
}

#pc .slider-indicators{
	display:none;
	
}

#pc .slider-nav{
	z-index:20;
}

/* -------------------------------------------------------------------------------------
=Main Panel
------------------------------------------------------------------------------------- */
#pmid {
	width: 100%;
	margin: auto;
	background-color: var(--main-panel-color);
	/*used to ensure left panel displays correctly, unsure why though... */
	display: flex;
	justify-content: flex-start;
	padding-bottom: 2em;
	padding-top:1em; /*added for dept pages to put a break by the breadcrumb */
}

/* filter search results? 
------------------------------------------------------- */
#fs {
	display: none;
}

/* full width panel 
------------------------------------------------------- */
.pmfull {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	background-color: var(--main-panel-color);
}

/* left panel
------------------------------------------------------- */
#pl {
	width: var(--left-panel-width);
	margin: 0;
	margin-left: auto;
	margin-right: 1rem;
	vertical-align: top;
}

#pl .ritm .header{
	background-color:var(--off-white);
	padding:.5em;
}

.recent_item{
	background-color:var(--off-white);
	display:grid;
	grid-row-gap:1em;
	padding:1em
}

.recent_item li{
	display:grid;
	grid-template-areas:
		"image title"
		"image unit"
		"image price"
		"qty trade";
	align-items:start;
	grid-template-columns: 2fr 3fr;
	padding:.5em;
	grid-column-gap:.5em;
	background-color:var(--white);
}

.recent_item li label,
.recent_item li h6{
	display:inline-block;
	margin:0;
}

.recent_item li span{
	font-size:.725em;
}

.recent_item li label{
	font-size:.825em;
	display:inline-block;
	margin-right:.5rem;
}
.recent_item li a.img{
	grid-area:image;
	align-self:start;
}

.recent_item li a.img img{
	margin:0 !important;
}
.recent_item li a.txt{
	grid-area:title;
}



.recent_item li .price{
	grid-area:price;
	display:none;
}
.recent_item li .unit{
	grid-area:unit;
}
.recent_item li .qty{
	grid-area:qty;
	display:none;
}
.recent_item li .trade{
	grid-area:trade;
	display:none;
}

/* wide panel (used with left panel - or is it... see filter search) 
------------------------------------------------------- */
.pmwide {
	background-color: var(--main-panel-color);
	width: calc(var(--site-max-width) - var(--left-panel-width) - 1rem);
	display: inline-block;
	vertical-align: top;
	margin: 0;
	margin-right: auto;
}

/* -------------------------------------------------------------------------------------
=Footer Panel
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	margin: auto;
	background-color: var(--blue);
}

#pf .ext {
	--spacer-width: calc((100% - var(
	--site-max-width)) / 2);
	background-color: var(--blue);
	margin: 0 auto;
	/* padding: 4em 0; */
	position: relative;
	display: grid;
	grid-template-columns: var(--spacer-width) 1fr 1fr var(--spacer-width);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	align-items: center;
	grid-template-areas:
		"prom-content prom-content prom-content prom-content"
		". news-intro subscribe .";
}

#pf .ext .arts{
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	background-image: url('https://s3-eu-west-1.amazonaws.com/benross/i/bnr/footerbackground.webp?_t=2361392747');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover;
	padding:4em 0;
	border-top:1px solid var(--border-color);
	grid-area:prom-content;
	background-color:var(--off-white);
	display: grid;
	grid-template-columns: var(--spacer-width) 1fr 1fr 1fr var(--spacer-width);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	grid-template-areas: ". intro intro intro ."
	". cta1 cta2 cta3 ."
	". . . . .";
	border-bottom:10px rgb(67 87 95 / 80%)solid;
}

#a126451718{
	grid-area:intro;
	text-align:center;
}

#a126451719,
#a126648320{
	grid-area:cta1;
}
#a126451720{
	grid-area:cta2;
}

#a126451721{
	grid-area:cta3;
}

#pf .ext .arts .thirdWidth{
	background-color:var(--white);
	display:grid;
	grid-template-columns: 64px 1fr;
	grid-template-areas: "image text";
	align-items:center;
	grid-gap:1em;
	padding:1em 2em;
	border:1px solid var(--border-color);
}

#pf .ext .arts .thirdWidth .imgcont{
	grid-area:image;
}

#pf .ext .arts .thirdWidth .artp{
	grid-area:text;
	font-size:.825em;
}

#pf .ext .arts .thirdWidth .artp h3{
	font-size:1rem;
	font-weight:700;
}

#pf .ext .arts .thirdWidth .artp a{
	color:var(--blue);
}

/* -------------------------------------------------------------------------------------
=Newsletter 
------------------------------------------------------------------------------------- */
#pb .ext .news {
	grid-area:newsletter;

}

#pb .ext .news form {
	text-align: left;
	align-self: center;
	display:grid;
	grid-template-areas:"intro"
	"name"
		"email"
		"subscribe";
	grid-template-columns:1fr auto;
	grid-gap:1em;
}

#pb .ext .news label {
	grid-area:intro;
	/* font-size:.825em; */
}

#pb .ext .news input#name {
	grid-area:name;
	padding: 1em;
}

#pb .ext .news input#email {
	grid-area:email;
	padding: 1em;
}

#pb .ext .news input#subscribe {
	grid-area:subscribe;
}

/* -------------------------------------------------------------------------------------
=Bottom Panel
------------------------------------------------------------------------------------- */
#pb {
	width: 100%;
	margin: auto;
	background-color: var(--bottom-panel-color);
}

#pb .ext {
	background-color: var(--bottom-panel-color);
	margin: auto;
	position: relative;
	/* grid-column-gap: 1rem; */
	display: grid;
	align-items: start;
	max-width: var(--site-max-width);
	grid-template-columns: 1fr 1fr 1.5fr 1fr;
	grid-template-areas:
		"aboutus customersupport contact newsletter";
	padding:3em 0
}


#p44367880 {
	grid-area: aboutus;
}

#p44367881 {
	grid-area: customersupport;
}

#a116260864 {
	grid-area: contact;
}

#a116260864 .artp,
#a116260864 h2{
	text-align:left;
}

#a116260864 .imgcont{
	display:inline-block;
	margin-right:.5em;
}

#a116260864 .contact li:before{
	display:inline-block;
	vertical-align:middle;
	font-family: var(--font-awesome);
	color:var(--green);
	font-weight: 200;
	font-size: 1.25em;
	width:2rem;
	text-align:left;
}

#a116260864 .contact li{
	margin-left:.5rem;
	border-bottom:0;
	padding:0;
}

#a116260864 .contact li:last-child{
	margin-bottom:0;
}

#a116260864 .contact li span{
	display:inline-block;
}

#a116260864 .contact .phone,
#a116260864 .contact .email{
	font-weight:500;
}
a116260864
#p48955405 .contact .phone:before{
	content:"\e11b";
}
#a116260864 .contact .email:before{
	content:"\e10c";
}

#a116260864 .contact .address{
	margin-top:1em;
}


/* hide icons if present on info links */

#pb .info li.icon img {
	display: none;
}

/* defaults 
------------------------------------------------------- */
/*because we don't write out all section headings as the same level */
#pb h3, #pb h2 {
	font-size: 1.25em;
	margin-bottom: 1.5rem;
	color: var(--bottom-panel-heading-color);
	font-weight:700;
}

#pb p {
	color: var(--bottom-panel-text-color);
}

#pb a {}

#pb ul {
	padding: 0;
	display:inline-block;
	min-width:75%;
}

#pb ul li {
	list-style: none;
	font-size: 1em;
	color: var(--bottom-panel-text-color);
	padding:.5em 0;
	
}

/*old stuff we don't want written out*/
#pb li.pipe {
	display: none;
}

#pb ul.inline, 
#pb ul.socials, 
#pb ul.contacts {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

#pb ul.inline li {
	display: inline-block;
	padding:01;
	padding-right:1em;
}

/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */
#pbf {
	background-color: var(--bottom-bar-color);
	font-size: .725em;
	padding:1em;
}

#pbf .ext {}

/* cookie popup
------------------------------------------------------- */
#pbf .cookie {
	position: fixed;
	bottom: 0%;
	left: 0%;
	width: 100%;
	z-index: 1000;
	background: var(--bottom-bar-color);
	text-align: center;
}

#pbf .cookie p {
	margin: 0 auto;
	float: none;
	color: var(--bottom-bar-text-color);
	padding: .5em 0
}

#pbf .cookie p a {
	float: none;
	color: var(--bottom-bar-text-color);
	text-decoration: underline;
	/* padding: 0 5px; */
}

#pbf .cookie img {
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px
}

#pbf .cookie img:hover {
	cursor: pointer
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=COMS COMPONENTS 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */

.bdcb {
	margin: var(--spacing) auto;
	padding: 0;
	text-align: center;
}

.home .bdcb {
	display: none;
}

.bdcb {
	width: var(--site-max-width);
	margin: auto;
}

.crumb {
	display: block;
	text-align: left;
	margin: 0 var(--half-spacing);
}

.bdcb ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
}

.bdcb li a, .bdcb li h1,
.bdcb li h3{
	font-family: var(--text-font);
	color: var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

/*active page */

.bdcb li h1,
.bdcb li h3{
	font-size: .825rem;
	margin: 0;
	color: var(--text-color);
}

/*for the break between the crumb*/
.bdcb li:after {
	display: inline-block;
	font-family: var(--text-font);
	color: var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	content: "/";
	margin: .5rem;
}

.bdcb li:last-child:after {
	content: "";
	margin: 0;
	display: none;
}

.bdcb span {
	display: inline-block;
	margin: 0;
}

.bdcb h1 {}

/* -------------------------------------------------------------------------------------
=Swiffy Slider - replaces owlcarousel
------------------------------------------------------------------------------------- */
.swiffy-slider {}
.swiffy-slider ul, .swiffy-slider li {

}

.swiffy-slider .slidecont p {
	padding: 0;
	margin: 0;
}

/* product sliders */
.slider-product {
	--swiffy-slider-item-count: 5;
}

/* CTA sliders */
.slider-cta {
	--swiffy-slider-item-count: 4;
}

/*dept sliders */
.slider-dept {
	--swiffy-slider-item-count: 5;
	--swiffy-slider-nav-light: #fff;
}

.slider-dept-alt {
	--swiffy-slider-item-count: 10;
}

/*Featured sliders */

.slider-featured {
	--swiffy-slider-item-count: 5;
}

/* product sliders - code needs some tweaking */
/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
.carousel.prod .swiffy-slider {
	--swiffy-slider-item-count: 5;
	/* margin-bottom: 1rem; */
	/* padding-bottom: 1rem; */
}

/* department sliders - code needs some tweaking */
/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
.carousel.dept .swiffy-slider {
	--swiffy-slider-item-count: 4;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.carousel.dept h2 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.carousel.dept .deptlink {
	/* border-radius: var(--border-radius); */
	overflow: hidden;
}

.carousel.dept .deptlink img {
	width: 100%;
	object-fit: cover;
	margin: auto;
}

.carousel.dept .deptlink a.txt {
	color: var(--blue);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	text-align:center;
}



/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog {}

/* -------------------------------------------------------------------------------------
=HoverBasket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	border: 1px solid var(--error-color);
	border-radius: var(--border-radius);
	width: calc(250px - 1em);
	padding: var(--spacing);
	z-index: 999999;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	background-color: var(--white);
}

.hoverbskt h3 {
	display: none;
}

.hoverbskt .lines .item:last-child {}
.hoverbskt .formupdate {}
.hoverbskt .formupdate input {}
.hoverbskt .formupdate input.submitQtyChange {}

.hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p {
	font-size: 0.825em;
	margin: 0;
}

.hoverbsktadd p.descr {
	display: none;
}

.hoverbskt .lines {
	max-height: 260px;
	overflow-y: auto;
	border-bottom: 1px solid var(--border-color-light);
	padding-bottom: var(--half-spacing);
	margin-bottom: var(--spacing);
}

.hoverbskt .lines .item {
	display: grid;
	grid-template-columns: 48px 1fr 16px;
	grid-template-areas: "image title title" "image quantity quantity";
	grid-column-gap: .5em;
	padding-right: .5em;
	margin-bottom: .5rem;
}

.hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample {
	font-weight: var(--heading-font-weight);
	text-align: left;
	grid-area: title;
}

.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
	grid-area: image;
	margin: 0 !important;
}

.hoverbskt .lines .item p.price {
	grid-area: price;
	display: none;
}

.hoverbskt .lines .item p.descr {
	grid-area: description;
	display: none;
}

.hoverbskt .lines .item p.qty {
	grid-area: quantity;
	text-align: left;
}

.hoverbskt h4.count, .hoverbskt h4.total {
	padding: 0;
	margin: 0;
	font-size: 0.825em;
	text-align: left;
	display: block;
	width: 50%;
	text-transform: capitalize;
	color: var(--text-color);
	font-weight: var(--heading-font-weight);
}

.hoverbskt a.btn {
	display: inline-block;
	padding: var(--spacing) var(--spacing);
	background-color: var(--error-color);
	border: 1px var(--error-color) solid;
	position: absolute;
	right: 1em;
	bottom: 1em;
}


/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */
.ewis{
	grid-area:ewis
}

.ewis h3 {
	font-weight: var(--heading-font-weight);
}

.ewis label {
	color: var(--text-heading-color);
}

a.lnk.ewisopen, a.lnk.ewis {
	display: block;
	height: auto;
	text-align: center;
	text-transform: capitalize;
	padding:1em;
	font-size:.625em;
}

.lnk.ewisopen:hover {
	text-decoration: underline;
	text-decoration-color:var(--blue);
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {

	.hoverbsktadd, #popupdialog {
		min-width:80%;
	}
}



/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=DEPARTMENT PAGES 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */
.deptwrap {}

.searchheader {
	padding: .5em;
	/* position: sticky; */
	/* top: 0; */
	/* height:36px; */
	z-index: 99;
	background-color: var(--main-panel-color);
}

.searchheader .search {
	/* for unknown reasons we re-write out the searchbox in the search header*/
	display: none !important;
}

.searchheader label {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	margin: 0;
	margin-right: .5rem;
}

.searchheader .paging {
	/*important needed as something shoves an inline style there!*/
	display: none !important;
}

.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "items filter sort-by";
	grid-gap: 1em;
	align-items: center;
}

/* results found */
.searchheader h5#rescou {
	grid-area: items;
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	margin: 0;
	/* display:none !important; */
}

/* sort by */
.searchheader #sorpan, .searchheader form[name="dispord"] {
	grid-area: sort-by;
	margin: 0;
}

/* results per page */
.searchheader #rpppan, .searchheader .rpp {
	margin: 0;
}

/*filter options if applicable */
.fltrbtnholder {
	grid-area: filter;
}

/*paging */
.paging {
	grid-area: paging;
	text-align: center;
}

/*writing out "page" is a little daft */
.paging label {
	display: none;
}

.paging span, .paging a {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border: 1px solid var(--border-color);
	border-radius: .25rem;
	padding: var(--half-spacing);
}

.paging span:last-child, .paging a:last-child {
	margin-right: 0;
}

/*this should be the current page */
.currpg {
	font-weight: var(--heading-font-weight);
	color: var(--white);
	background-color: var(--blue);
}

.searchfooter {
	padding: .5em;
	text-align: center;
	margin: 1em 0;
}

#sr {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	position: relative;
	margin-top: 1em;
}

.pmwide #sr {
	grid-template-columns: repeat(3, 1fr);
}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
.filter {
	padding: .5em;
	position: sticky;
	top: 0;
	height: auto;
	z-index: 99;
	background-color: var(--off-white);
	color:var(--blue);
}

/* close filter button */
.fsclsdiv {
	text-align: right;
}

.fsclsdiv .fsclsspn {
	display: inline-block;
	border: 1px solid var(--blue);
	color: var(--black);
	background-color: var(--blue);
	border-radius: 50%;
	font-family: monospace;
	padding: 0rem;
	margin: 0rem;
	width: 1rem;
	height: 1rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	display: none;
}

.filter .bt {
	/* margin-bottom: 1rem; */
}

.filter .bt h3 {
	font-weight: var(--heading-font-weight);
	color:var(--blue);
	font-size: 1.25rem;
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.HeaderContent h5 {
	font-size: 1rem;
}

.collapsed h5 {}
.collapsed h5:hover {}
.items {}

.citem {
	padding: var(--spacing) 0;
	font-family: var(--sub-heading-font);
	font-size:.825em;
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.citem::before, .citemselected::before {
	font-family: var(--font-awesome);
	margin-right: .5rem;
	font-size: 1.25rem;
	display: inline-block;
	vertical-align: middle;
}

.citem::before {
	content: '\f0c8';
}

.citemselected::before {
	content: '\f14a';
	color: var(--blue);
	font-weight: 700;
}

.citem:empty {
	display: none;
}

.citem:hover {}
.citemselected:hover {}

/* price slider 
------------------------------------------------------- */
/* should be a toggle in coms to turn this on or off - also could do with a class on it for better targeting purposes */
div[sectiontype="priceslider"] {
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.attrsection {}

.filter .HeaderContent {
	padding: var(--spacing) 0;
	position: relative;
	cursor: pointer;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1rem;
	border-bottom: 1px solid var(--border-color)
}

.HeaderContent:after {
	content: '\f107';
	font-family: var(--font-awesome);
	font-size: 1rem;
}

.HeaderContent.collapsed:after {
	content: '\f106';
}

.HeaderContent h5 {
	font-weight:700;
	margin: 0;
	font-size: 1rem;
	padding: 0;
	position: relative;
	cursor: pointer;
}

.items {}

#divPriceRangeDisplay {
	text-align: center;
	padding: var(--spacing);
}

#sldiv {
	margin: 1em;
}

/* filter buttons
------------------------------------------------------- */
.fltrattrbtn, .resetfs {
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	margin-bottom: .5rem;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
}

#fstrigbtn {
	display: none;
}

.fstrigspn {
	display: block;
	vertical-align: middle;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
}

.fstrigspn:before {
	content: "\f1de";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}

/*as we currently write out TWO clear filter buttons*/

.resetfs+.resetfs, .fltrattrbtn+.resetfs {
	display: none;
}

.fltrattrtxt, .resetfs h5 {
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
	margin: 0;
}

.fltrattrbtn {
	background-color: var(--light-grey);
	border-color: var(--light-grey);
}

.fltrattrtxt:after {
	content: "\0058";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: .725em;
	margin-left: .5rem;
}

/* -------------------------------------------------------------------------------------
=Deptsingle  
------------------------------------------------------------------------------------- */

.deptsingle {
	position: relative;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

/* -------------------------------------------------------------------------------------
=Subdepartment tree  
------------------------------------------------------------------------------------- */
.depttree {
	grid-column: 1/-1;
}

.depttree>.bt h3 {
	display: none;
}

.depttree {
	display: block !important;
}

.depttree h4.tagline {}

.depttree ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

.depttree li {
	position: relative;
	margin: 0;
	overflow: hidden;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr;
	background-color:rgba(246, 246, 246, .9);
}

.depttree li a.img {
	/*cos iphones? */
	display: block;
	margin: 0;
	padding: 0;
	grid-column: 1;
	grid-row: 1;
}

.depttree li a.img img {
	min-width: 100%;
	aspect-ratio: 330/220;
	object-fit: cover;
	margin: auto;
}

.depttree li a.txt {
	color: var(--blue);
	background-color:rgba(246, 246, 246, .9);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1rem;
	grid-column: 1;
	grid-row: 1;
	padding: .5rem;
	align-self: end;
}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */
/* Base settings
------------------------------------------------------- */
#deptlist .fprdcont, #searchlist .fprdcont {}

.fprd {
	position: relative;
}

.fprd:hover {}

.fprd {
	display: grid;
	border:1px solid var(--light-green);
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto var(--fprd-title-height) auto auto 1fr;
	/*use grid template areas - spacer is put at the end to cover when the buy form isn't there and the layout breaks */
	grid-template-areas:
		"image image "
		"title title "
		"selling-price unit-price"
		"buy-pane buy-pane" 
		"spacer spacer ";
}

.fprd div[itemprop="offers"]{
	display:none;
}

/*carousel see different layout has different layout*/
.swiffy-slider .fprd{
	grid-template-areas:
			"image image"
			"title title" 
			"spacer spacer";

	grid-template-columns:1fr 1fr;
	grid-template-rows:auto var(--fprd-title-height) 1fr;
}

.swiffy-slider .fprd .clientref,
.swiffy-slider .fprd .unit,
.swiffy-slider .fprd .trade,
.swiffy-slider .fprd .offer,
.swiffy-slider .fprd .qty,
.swiffy-slider .fprd form,
.swiffy-slider .fprd .ewis,
.swiffy-slider .fprd .qtyInBskt,
.swiffy-slider .fprd .price{
	display:none;
}

.swiffy-slider .fprd .price{
	grid-area: selling-price;
	margin-left: .5rem;
	border:0;
	border-right:none;
	border-top-left-radius:2em;
	border-bottom-left-radius:2em;
	text-align:left;
}

/* reset margins and paddings */
.fprd p, .fprd h3, .fprd h4, .fprd h5 {
	margin: 0;
	padding: 0;
}

.fprd h5.type {
	display: none !important;
}

/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
	position: relative;
	display:grid;
	align-items: start;
	overflow: hidden;
}

.fprd .fprdimg a {}

.fprd .fprdimg img {

	/* can only do this if the images are all the same size, for this client they are not*/
/* aspect-ratio:1/1; */

object-fit: cover;
}

.fprd .fprdimg img:hover {}

/* image flags
------------------------------------------------------- */
.fprdimg .flag{
	top:0;
	right:0;
}

/* title
------------------------------------------------------- */
.fprd .fprdtitle, .fprd a.title {
	grid-area: title;
	padding:.5em;
	text-align: left;
	color: var(--navy);
	font-family: var(--heading-font);
	text-transform: capitalize;
	align-self:start;

}
.fprd .fprdtitle a.lnk
{
	   display: -webkit-box;
	overflow:hidden;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

#sr.listview .fprd .fprdtitle {
	height: auto;
	text-align: left;
}

.fprd .fprdtitle a.lnk, .fprd a.title {}

/* description - used for seo
------------------------------------------------------- */
.fprd .fprddescr {
	grid-area: description;
	display: none;
}

/* pricing structure
------------------------------------------------------- */
.fprd h6 {
	margin: 0;
	padding: 0;
	font-family: var(--text-font);
	font-weight: 500;
}

.fprd h6 span {
	font-size: .625rem;
	display: inline;
	color: var(--text-sub-heading-color);
}

.fprd label {
	margin: 0;
	padding: 0;
	font-size: .725em;
	font-weight:500;
}

.fprd .rrp {}
.fprd .rrp label {}
.fprd .rrp h6 {}

.fprd .prevprice {
	grid-area: prev-price;
	text-align:right;
	padding: 0 1rem;
	display:none;
}

.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
	font-weight: 400;
}

.fprd .price {
	grid-area: selling-price;
	margin-left: 1rem;
}
.fprd .price label {
	color: var(--text-sub-heading-color);
}

.fprd .price h6 {
	font-size: 1.25rem;
	font-weight: var(--heading-font-weight);
}
.fprd .price h6 span {
	display:none;
}

.fprd .trade {
	grid-area: selling-price;
	padding-left:.25em;
}

.fprd .trade label {}

.fprd .trade h6 {
	font-weight:600;
}

.fprd .trade h6 span {
font-weight:400;
}

.fprd .offer:not(.flag) {
	grid-area: selling-price;
	margin-left: 1rem;
}

.fprd .offer label {}

.fprd .offer h6 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--red);
}

.fprd .offer h6 span {
}

.fprd .saving {
	position:absolute;
	background-color:var(--blue);

	/*funky ribbon effect courtesy of freecodecamp */
	--f: .25em; /* control the folded part*/
	--r: .5em; /* control the ribbon shape */
	--t: auto; /* the top offset */
	--l:auto ;
	--b:auto;
	--rt: .5em;
	inset: var(--t)  var(--t) var(--b) var(--rt);
	padding: 0px .25em  calc(.25em + var(--r)) .25em;
	clip-path: polygon(0 0,
					   100% 0,
					   100% 100%,
					   50% calc(100% - var(--r)),
					   0 100%);
	
	background: var(--blue);
}

.fprd .saving label {
	color:var(--white);
}
.fprd .saving h6 {
	color:var(--white);
}

/* pricebreaks 
------------------------------------------------------- */
.pricebreak {}

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
	padding-right:.25em;
	text-align:center;
}

.fprd .packsize {
	grid-area: packsize;
	text-align: left;
}

.fprd .packsize p {
	font-size: .725em;
}

.fprd .unit label {
	color: var(--text-sub-heading-color);
}

.fprd .unit h6 {
	color:var(--blue);
}
.fprd .unit h6 span {
	display:none;
}

.fprd .qty {
	grid-area: carton;
	text-align: center;
}

.fprd .qty label {
	color: var(--text-sub-heading-color);
}

.fprd .qty h6 {
	color:var(--blue);
}


.fprd .qty h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref {
	grid-area: client-ref;
	padding:0 .5em;
	text-align: left;
	color: var(--blue);
	font-family: var(--heading-font);
	text-transform: capitalize;
	align-self:start;
}

.fprd .clientref span {}

.fprd .model, .fprd .clientref {
	margin: 0;
	font-weight: var(--heading-font-weight);
	font-size: small
}

.fprd .model span, .fprd .clientref span {
	font-size: small;
	display: inline-block;
	margin-right:.25em;
	font-weight: var(--text-font-weight);
}

.fprd .model {
	grid-area: model-number
}

/* flags
------------------------------------------------------- */
/* piflags are product specific flags, like made in uk, our top pick etc */

.piflags {}

/*flags may exist either within the image or as a separate element, position accordingly */
.fprdimg .piflags {
	position: absolute;
	bottom: 1rem;
}

.fprd .piflags ul {
	margin: 0;
	padding: 0;
}

.piflags ul li {
	list-style: none;
	margin: 0;
}

.fprd .piflags img {
	width: auto;
	max-width: 80%;
}

/* flag could be any auto sys flag like no stock, offer etc */
.fprd .flag {
	position: absolute;
	display: block;
}

.fprd .flag.collect{
	transform: rotate(270deg);
}

.fprd .flag img {
	display: block;
	margin: 0;
}

.fprd .flag.drop {
	margin: 0;
	transform: rotate(270deg);
}

.fprd .flag.pallet {
	margin: 0;
	top: .5rem;
	left: .5rem;
}

.fprd .flag.pallet img {
	max-width: 100px;
	max-width: 40%;
	margin: 0;
}

.fprd .flag.prdel {
	margin: 0;
	top: 1rem;
	left: 0;
}

.fprd .flag.prdel img {
	max-width: 100px;
	max-width: 40%;
	margin: 0;
}

.fprd .flag.offer {
	margin: 0;
	top: 0;
	/* right: 1rem; */
}

.fprd .flag.offer img {
	/* max-width: 75px; */
	/* max-width: 30%; */
	margin-left: auto;
}

.fprd .flag.newin {}

.fprd.flag.stkout {}

/* quantity in basket - CAUTION not shown everywhere... 
------------------------------------------------------- */
.fprd .qtyInBskt {
	display: none;
}

/* more info and quickview button 
------------------------------------------------------ */
.fprdinfo {
	grid-area: fprdinfo;
	margin: 1rem;
}

/* quick view */
.fprd a.btn.qkvw {}
.fprd:hover a.qkvw {}
.fprdinfo a.qkvw:hover {}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-area: buy-pane;
	text-align: center;
	margin: 0;
	padding:.25em;
	/* this won't work with dropdown skus */

	font-size:1em;
}

.fprd form select {}

.fprd form label,
.fprd form input,
.fprd form button {
    font-size: inherit;

    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.fprd form label{
	display:none;
}

.fprd button {
	display: inline-block;
	vertical-align: middle;
	border: 1px var(--off-white) solid;
	background-color: var(--off-white);
	color: var(--alt-button-text-color);
	font-weight: 600;
	padding: .5em .75em;
}

.fprd button.fpskuqtysub {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.fprd form input.inputtext {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.fprd button.fpskuqtyadd {}

.fprd input.fpskuqty {
	display: inline-block;
	text-align: center;
	border-radius:0;
}

.fprd .submit {
	border: 1px var(--button-color) solid;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border-radius:0;
}

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	align-self:center;
	margin: 0;
	text-align:center;
}

/* fprd adverts
------------------------------------------------------- */
.fprd.add {
	background-color: var(--fprd-color);
	display: block;
	position: relative;
}

.fprd.add .bnr {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fprd.add .bnr picture, .fprd.add .bnr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fprd.add .toi {
	position: absolute;
	bottom: 0;
	color: var(--white);
	padding: var(--spacing);
}

.fprd.add p {
	color: var(--white);
}





/* -------------------------------------------------------------------------------------
=ProductPage 
------------------------------------------------------------------------------------- */
#pmid.page_buy {}

/*change of layout here */
#pmid.page_buy #pm.pmfull {
	width: 100%;
}

/* Product Panels 
------------------------------------------------------- */
#pi {
	margin: 0;
	padding: 0;
	/* why do we get some spacing at the end that I can't remove?*/
	margin-bottom:-1em;
}

#pi .main {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	width: var(--site-max-width);
	display: grid;
	/* width set to assume 638px - use fr to scale */
	grid-template-columns: 45.55714fr 54.2857fr;
	grid-template-areas: "top left"
		"top ."
		"right right"
		"bottom bottom";
	grid-column-gap: 4rem;
}

#pi .main .top {
	grid-area: top;
	position: relative;
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"gallery";
}


#pi .main .left {
	grid-area: left;
	display:grid;
/* grid-row-gap:.2rem; */
	grid-template-areas:
		"product-title product-title"
		" client-ref barcode-image"
		" model barcode-image"
		" barcode barcode-image"
		"product-buy-pane product-buy-pane"
		"product-description product-description"
		"product-tabbed-description product-tabbed-description"
		"membersignin membersignin";
}
.nonmem #pi .main .left {
}
.nonmem #pi .pibuy + .pibuy{
	grid-area:membersignin;
	border-bottom:0;
}

#pi .main .right {
	grid-area: right;
}

#pi .main .bottom {
	grid-area: bottom;
	margin-top:2em;
}

#pi .main .bottom h3{
	font-size:1.2em;
}

/*same class used for a div outside of the main section */
#pi .main+.bottom {
	margin-top: 1rem;
	padding-top:1rem;
	margin:auto;
	background-color:var(--off-white);
}

/* Clientref and barcodes
------------------------------------------------------- */
#pi .brandmanu.model {
	grid-area:model;
}

#pi .brandmanu h5,
#pi .brandmanu h6{
	display:inline-block;
	margin:0;
	margin-right:.5em;
	font-size:.825em;
}

/* Clientref
------------------------------------------------------- */
#pi .brandmanu.clientref {
	grid-area: client-ref;
}

#pi .brandmanu h5,
#pi .brandmanu h6{
	display:inline-block;
	margin:0;
	margin-right:.5em;
	font-size:.825em;
}

/* Barcode digits
------------------------------------------------------- */

#pi .brandmanu.gtin {
	grid-area:barcode;
}


/* Barcode image
------------------------------------------------------- */

#pi .brandmanu.barcode {
	grid-area:barcode-image;
	text-align:right;
}

#pi .brandmanu.barcode img {
	max-width:200px;
	margin:0;
	margin-left:auto;
}


/* Barcode Inner
------------------------------------------------------- */
#pi .brandmanu.inner {
	display:none;
}

/* Barcode Outer
------------------------------------------------------- */
#pi .brandmanu.outer {
	grid-area: barcode-outer;
	background-color:var(--off-white);
	border:1px solid var(--border-color);
	border-left:0;
}

/* Product Title
------------------------------------------------------- */
#pi .pititle {
	grid-area: product-title;
}

#pi .pititle h2{
	font-size:1.5em;
}

/* Strapline
------------------------------------------------------- */
h4.strap {
	grid-area: product-strapline;
}

/* Gallery - now Swiffy
------------------------------------------------------- */
#pi .gallery {
	grid-area: gallery;
}

#pi .gallery .slider-main {
	--swiffy-slider-item-count: 1;
	--swiffy-slider-item-ratio: 3/4;
	margin-bottom: 1rem;
}

#pi .gallery .slider-thumb {
	--swiffy-slider-item-count: 1;
	--swiffy-slider-item-ratio: 3/4;
	margin-bottom: 1rem;
}

#pi #mainimages .slider-nav {
	pointer-events: none;
}

#pi .gallery .slider-main .slider-indicators {
	display: none;
}

#pi .gallery #galleryimages {
	--swiffy-slider-item-count: 4;
		align-items:center;
}


#pi .gallery #galleryimages li{
	display:grid;
		align-items:center;
}

/*main gallery videos */
.youtubeplayercontainer>* {
	min-height: 20rem
}

.youtubeplayercontainer>* {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.youtubeplayercontainer>* {
	-o-object-fit: contain;
	object-fit: contain
}

#pi .gallery img {
	/* width: 100%; */
	object-fit: cover;
	margin: auto;
}

#pi .gallery h4 {
	display: none;
}

/*we don't want product flags showing here - should be controlled by a field in coms, we want the normal product flags like free shipping */
#pi .gallery .piflags {
	display: none
}

#pi .top .flags {
	position: absolute;
	top: 0rem;
	left: 0;
	text-align:right;
	width: 100%
}

#pi .top .flags .collect{
		position: absolute;
	right: 0;
	top: 1rem;
}

#pi .top .flags .drop{
		position: absolute;
	right: 0;
	top: 1rem;
}

#pi .top .flags .prdel {
	position: absolute;
	left: 0;
	top: 1rem;
}

#pi .top .flags .prdel img {
	max-width: 150px;
}

#pi .top .flags .pallet {
	position: absolute;
	left: 0;
	top: 1rem;
}

#pi .top .flags .pallet img {
	max-width: 64px;
}

#pi .top .flags .offer {
	position: absolute;
	right: 1rem;
	top: 0rem;
}

#pi .top .flags .offer img {
	max-width: 120px;
}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	grid-area: product-buy-pane;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"vatcode vatcode vatcode"
		"stock stock stock"
		"pricebreak pricebreak pricebreak"
		"trade-price unit-price carton-qty "
		"buy-pane buy-pane buy-pane "
		"quantity-in-basket quantity-in-basket quantity-in-basket"
		"save-for-later . ."
	
		"bspresponse bspresponse bspresponse"
		"ewis . .";
	align-items:end;
	grid-row-gap:1em;
}


.nonmem #pi .pibuy{
	grid-area:membersignin;
	grid-template-columns:1fr;
	grid-template-areas: "signin-message"
	"signin-button"
}

.nonmem #pi .pibuy p.signin{
	padding:1em;
	text-align:center;
}

.nonmem #pi .pibuy #bspsubmit{}

.nonmem #pi .pibuy + .pibuy{
	grid-area:product-buy-pane;
	display:block;
	border-top:0;
	
}

.pibuy label {
	display: block;
	margin-right: var(--half-spacing);
}

/* for some reasone we always show "price in..." */
.pibuy .title {
	display: none;
}

#pi .pibuy .vatcode{
	grid-area:vatcode;
}

#pi .pibuy h6 {
	display: inline-block;
	color:var(--blue);
	padding: 0;
	margin-bottom: 0;
}

#pi .pibuy  label{
	font-size:.725em;
	font-weight:700
}

/*normal price */
#pi .pibuy .price {
	grid-area: selling-price;
	text-align:center;
}

.nonmem #pi .pibuy .price {
	grid-area: selling-price;
	text-align:center;
}

/*offer price */
#pi .pibuy .offer {
	grid-area: trade-price;
}

/*previous price (goes with offer) */
#pi .pibuy .prevprice {
	grid-area: prev-price;
	display:none;
}

#pi .pibuy .prevprice h6 {
	text-decoration: line-through;
}

/*unit price */
#pi .pibuy .unit{
	grid-area:unit-price;
}

#pi .pibuy .qty {
	grid-area:carton-qty;
}


#pi .pibuy p.p_stock {
	grid-area:product-stock;
	padding:0;
	display:none;
}


#pi .pibuy .trade {
	grid-area:trade-price;
}

#pi .pibuy .trade label{
	display:inline-block;
	font-size:1rem;
}



/* pricebreaks 
------------------------------------------------------- */
#pi .pibuy .pricebreak {
	grid-area:pricebreak;
	color:var(--blue);

	width:auto;
	margin-right:auto;
	border-collapse:collapse;
	text-align:left;
}

#pi .pibuy .pricebreak th{
	padding:.5em 2em;	border:1px solid var(--blue);	text-align:left;
}

#pi .pibuy .pricebreak td{
	padding:.5em 2em;	border:1px solid var(--blue);	text-align:left;
		align-items:start;
	align-content:start;
}

#pi .pibuy .pricebreak img{
	display:inline-block;
	margin-left:.5em;
	max-width:1em;
	/* align-items:start; */
	/* align-content:start; */
	
}


/* Messages */
#pi .pibuy p {
	font-size:.825em;
	padding:1em 0;
}

#pi .pibuy p#bspresponse {
	grid-area: bspresponse;
}

#pi .pibuy h4 {}
#pi .pibuy h5 {}


/* stock */
#pi .pibuy .stock {
	grid-area:stock;
	/*being written out when not actually in use! */
	list-style:none;
	margin:0;
	font-size:1em;
	color:var(--blue);
}
.nonmem #pi .pibuy .stock{
	display:none;
}

/*order cutoff timer? */
#pi .pibuy p.cutoff {
	color: var(--info-color);
}

#pi .pibuy p.cutoff::before {}

/* quantity in basket info */
#pi .pibuy .qtyInBskt {
	grid-area:quantity-in-basket;
	font-size:.825em;
	padding:1em 0;
}

/*dynamic price */
.dynprice {
	/*no need for this to be showing here now..*/
	display: none;
}

#bspsubmit{
	grid-area:save-for-later;
	font-size:.625em;
	margin-right:auto;
}

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buy-pane;
	margin: 0;
}

/* attributes/sku select */
#buy_form .attr {}
#buy_form .attr .attrlabel {}

.attritem select {
	width: 100%
}

#buy_form select, #buy_form textarea {}

#buy_form select {
	font-size: 16px;
	max-width: 100%;
}

#pi .pibuy .attrqty {}

#pi .pibuy .attrqty label{
	display:none;
}

#pi .pibuy .attrqty .submit#buy {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--blue);
	color: var(--button-text-color);
	border: 1px solid var(--blue);
	outline: none;
	padding: var(--half-spacing) 2em;
}

#pi .pibuy .attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
	
}

#pi .pibuy .attrqty .qtyinput button{
	-webkit-appearance: none;
	border-color: var(--border-color);
	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

#pi .pibuy .attrqty #skuqty{
	border-radius:0;
	text-align:center;
	font-size:1em;
	
}

#pi .pibuy .attrqty .submit#buy.hideAttr {
	display: none;
}

/* Sample request 
-------------------------------------------------------*/
#pi .pibuy #smplreq {
	grid-area: sample;
	display: inline-block;
	width:200px;
}

/* message if no option selected*/
#pi .pibuy label#selectResponse {
	color: var(--error-color);
	grid-column: 1/-1;
	display: none;
}

/* Descriptions
-------------------------------------------------------*/
#pi .pidesc {
	grid-area: product-description;

	border:1px solid var(--border-color);
	border-top:0;
	border-bottom:0;
	padding: 0 1em;
}

/*duplicated product title auto written out in the description */

#pi .pidesc h2[itemprop="name"] {
	display: none;
}

/* Product leadtime
-------------------------------------------------------*/
#pi .pidesc.desp {
	grid-area: product-leadtime;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

#pi .pidesc.desp span {
	display: none;
}

#pi .pidesc.desp h5 {
	grid-area: icon;
	display: none;
}

#pi .pidesc.desp p {
	grid-area: text;
	margin: 0;
	font-size: .825rem;
}

/* Product specific delivery info
-------------------------------------------------------*/
#pi .delivery {
	grid-area: product-delivery;
}

/* Bullets
-------------------------------------------------------*/
#pi .bullets {
	grid-area: product-bullets;
	list-style-position:inside;
}

/* Links
-------------------------------------------------------*/
#pi .pilinks {
	grid-area: product-links;
}

#pi .pilinks li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#pi .pilinks ul li.query a.lnk {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}

#pi .pilinks ul li.query a.lnk:before {
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-right: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f059';
}

/* reviews widget 
------------------------------------------------------- */
.reviewsiosmallsummarypanel {
	text-align: left;
}

.reviewsiosmallsummarypanel .title {
	display: none;
}

.reviewsiosmallsummarypanel .stars {
	display: inline-block;
	margin-right: .5rem;
}

.reviewsiosmallsummarypanel .stars img {
	display: inline-block
}

.reviewsiosmallsummarypanel .ratingNumber {
	display: inline-block;
	margin-right: .5rem;
	color: var(--grey)
}

.reviewsiosmallsummarypanel .ratingNumber div {
	display: inline-block;
}

.reviewsiosmallsummarypanel .reviewCount {
	display: inline-block;
	margin-right: .5rem;
	font-size: .725rem;
}

/* reviews.io tab content 
-------------------------------------------------------*/
.reviewsio {}

.reviewsio div[itemprop="review"] {
	border-bottom: 1px solid var(--border-color);
	padding: 1rem 0;
}

.reviewsio .comment {
	margin-bottom: .5rem;
}

.reviewsio .customer {
	font-weight: 700;
	font-size: .825rem;
}

.reviewsio .date {
	color: var(--grey);
	font-size: .725rem;
}

.reviewsio div[itemprop="review"]:last-child {
	border-bottom: 0;
}

/* video - use new product gallery insteada!
-------------------------------------------------------*/
#pi .youtube {
	grid-area: product-video;
}

/* Flags (site flags like offer)
-------------------------------------------------------*/
#pi .flags {
	grid-area: product-flags;
}

#pi .flags .packsize img {
	display: inline-block;
	padding-right: .5rem;
	vertical-align: middle;
}

#pi .flags .packsize p {
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	color: var(--text-heading-color);
}

/* Product flags
-------------------------------------------------------*/
#pi .left .piflags {
	grid-area: product-piflags;
}

#pi .left .piflags li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

#pi .left .piflags li img {
	grid-area: icon;
}

#pi .left .piflags li span {
	grid-area: text;
}

/* Next Day Delivery Countdown
-------------------------------------------------------*/
#pi #ordercutofftime {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

#pi #ordercutofftime img {
	grid-area: icon;
}

#pi #ordercutofftime .countdown {
	grid-area: text;
	font-size: .825rem;
}

#pi #ordercutofftime .countdown span {}

/* Product Files
-------------------------------------------------------*/
#pi .pifile {
	grid-area: product-file;
}

#pi .pifile li{
	list-style:none;
}
#pi .pifile li:before {
	font-family: var(--font-awesome);
	content: "\f1c1";
	display: inline-block;
	vertical-align:middle;
	font-size: 1.5em;
	margin-right: 1rem;
}


/* Product Departments
-------------------------------------------------------*/
#pi .alldepts {
	grid-area: product-departments;
}

#pi .alldepts a {
	display: inline-block;
	padding: var(--spacing);
	border: 1px solid var(--border-color);
	background-color: var(--navbar-tab-color);
	margin: var(--half-spacing);
}

/* Product PDL Article - could do with a class otherwise it will break other article used in places like the tabbed description
-------------------------------------------------------*/
#pi .art {
	grid-area: product-article;
}

/* Tabbed Descriptions
-------------------------------------------------------*/
#pi .pi_tab, #pi #pi_wrapper {
	grid-area: product-tabbed-description;
	margin:1em 0;

}

#pi ul.pi_tabs {
	cursor: pointer;
	margin: 0;
	padding: 0;
}

#pi ul.pi_tabs li {
	list-style: none;
	margin: 0;
	padding: 1em 4em;
	text-align: center;
	color: var(--text-color-light);
	border: 1px solid var(--border-color);
	border-bottom:0;
	display:inline-block;
	position: relative;
	top: 1px;
	
}

/*remove left border for touching tabs*/
#pi ul.pi_tabs li + li {
	border-left:0;
}

#pi ul.pi_tabs li.selected {
	font-weight:600;
	border: 1px var(--border-color) solid;
	border-bottom: 1px var(--off-white) solid;
	background-color:var(--off-white);

	
}

#pi ul.pi_tabs li:last-child {}

#pi .pi_tab_content {
	margin: auto;
	padding: 1rem;
	background-color:var(--off-white);
	border: 1px var(--border-color) solid;
	max-height:300px;
	overflow-y:scroll;
}
/* Recommended Products - option to also buy these at the same time
------------------------------------------------------*/
#pi .prec {
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

/*recomended products */
.slider-rec {}

#pi .prec .fprd{
	/* background-color:var(--white); */
}

#pi .prec h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
}

/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */
.cls_superattrribute.hideAttr  {}
.sacontainerpanel {}
.sacontainerpanel ul, .sacontainerpanel li  {}

/* Defaults
------------------------------------------------------- */
/*validator messages */
.sa_validator {
	color: var(--error-color);
}

/*this needs a code review - be dealt with in a standard message way like add to basket popups etc */
/*currently displays if you can't make that blind - and is a different message to if you put in measurements outside of the limits, try using max width and drop of blind to demo*/
.cls_superattrribute #sa_pnl_product_not_found  {}
/*help icon */
.cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.attributeTypePrice_Matrix_Calculator  {}
.attributeTypePrice_Matrix_Calculator #saten_pnl_show  {}
.attributeTypePrice_Matrix_Calculator .att_container  {}
.attributeTypePrice_Matrix_Calculator .att_header {}
.attributeTypePrice_Matrix_Calculator label  {}
.att_X, .att_Y  {}
.att_X label, .att_Y label  {}
.att_X  {}
.att_X label:after {}
.att_Y {}
.att_Y label:after  {}
.att_X input::-webkit-outer-spin-button, .att_X input::-webkit-inner-spin-button, .att_Y input::-webkit-outer-spin-button, .att_Y input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0;
	/* <-- Apparently some margin are still there even though it's hidden */
}
.att_X input[type=number], .att_Y input[type=number] {
	-moz-appearance: textfield;
	/* Firefox */
}

.sa_error  {}
/*should be the measure in cm/inch/mm control - currently not displaying as there are no choices yet we still may be writing it out*/
.attributeTypePrice_Matrix_Calculator .att_measure  {}
.attributeTypePrice_Matrix_Calculator .calc_price {}
.attributeTypePrice_Matrix_Calculator .calc_price .submit  {}
/*the widths on these are not nice - need making better !*/
.attributeTypePrice_Matrix_Calculator input.inputtext_short {}
.attributeTypePrice_Matrix_Calculator .calc_price .submit {}

/* attributeTypeDimensions 
***************************************************************/
.attributeTypeDimensions {}
.attributeTypeDimensions .attrContainer {}
.attributeTypeDimensions .sa_name {}
.attributeTypeDimensions .width, .attributeTypeDimensions .drop {}
.attributeTypeDimensions .width .sa_name, .attributeTypeDimensions .drop .sa_name {}
.attributeTypeDimensions .width span, .attributeTypeDimensions .drop span {}
.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.attributeTypeDimensions .submit {}

/* attributeTypeRadio_button
***************************************************************/
.attributeTypeRadio_button {}
.attributeTypeRadio_button .radioholder {}
.attributeTypeRadio_button .radioholder label {}

/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.attributeTypeText_Box_Free_Text_Entry {}
.attributeTypeText_Box_Free_Text_Entry .inputtext {}
.attributeTypeText_Box_Free_Text_Entry .attrContainer>div:first-of-type  {}

/*attributeTypeDrop_down_list
***************************************************************/

.attributeTypeDrop_down_list  {}
/*hack to do with validator text placeholder */
.attributeTypeDrop_down_list div {
	line-height: 0;
}

.attributeTypeDrop_down_list div label {
	line-height: 1;
}
/* end hack*/
.attributeTypeDrop_down_list select  {}
.sa_pnl_product_popup_image_show {}

/*attributeTypeSingle_Image_Upload 
***************************************************************/

.attributeTypeSingle_Image_Upload  {}
.attributeTypeSingle_Image_Upload .attrContainer  {}
.attributeTypeSingle_Image_Upload .attrContainer label  {}
/*delete image */
.attributeTypeSingle_Image_Upload .siup_triggerdel {}
/*should be the file uploader*/
.attributeTypeSingle_Image_Upload input {}
.attributeTypeSingle_Image_Upload .progress {}
/*should be the uploaded image */
.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"]  {}

/* -------------------------------------------------------------------------------------
=Basket
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 6fr 3fr;
	grid-gap: 0;
	grid-column-gap: 2em;
	grid-template-areas: "breadcrumb breadcrumb"
		"header header"
		"lines totals"
	
		"lines shipping"
		"lines buttons"
		"lines ."
		"prompane prompane";
	align-items: start;
	margin-bottom: 4rem;
}

#pm .bskt form {
	margin: 0 auto;
	padding: 0;
}

/* if basket is empty and user is in it */
.bskt .empty {
	grid-area:header;
	text-align:center;
	margin:2em;
}
.bskt .empty .header {}
.bskt .empty .total {}

/* Checkout Breadcrumb
------------------------------------------------------- */
.chkcrumb {
	grid-area: breadcrumb;
}

/* Basket header
------------------------------------------------------- */
#pm .bskt .header {
	grid-area: header;
}

/*we don't want the image here, but it may be used for something else */
#pm .bskt .header .icon{
	display:none;
}

#pm .bskt .header .title {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

#pm .bskt .header .title span {
	font-size: 1rem;
	font-weight: normal;
	color: var(--grey);
}

/* Basket Lines
------------------------------------------------------- */
#pm .bskt .alllines {
	grid-area: lines;
	padding-right: 1rem;
	overflow-y: auto;
}

#pm .bskt .line {

	--image-width: 4rem;
	--description-width: 1fr;
	--qty-width: auto;
	--netprice-width: auto;
	--rem-width: 2em;
	--total-width:120px;
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;

	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width)  var(--rem-width) var(--total-width) ;
	grid-template-areas: "icon desc qty rem price "
						 "icon desc qty rem netprice "
						 "icon skuselect . . . ";
	border-bottom: 1px solid var(--border-color);
	grid-column-gap: 1rem;
}

/* Image */
#pm .bskt .line .prodimg {
	grid-area: icon;
	align-self:start;
}

#pm .bskt .line .prodimg img {
	margin: 0 !important;;
}

/* Product Info - in list form */
#pm .bskt .line .prodinfo {
	grid-area: desc;
	margin: 0;
	padding: 0;
}

#pm .bskt .line .prodinfo .surcharge {
}

#pm .bskt .line .prodinfo li {
	list-style: none;
	font-size: .725rem;
	margin-left:.5em
}

#pm .bskt .line .prodinfo li.disc{
	color:var(--green)
}
#pm .bskt .line .prodinfo li.collect{
	font-weight:bold;
}
#pm .bskt .line .prodinfo li.flags{
	display:none;
}

#pm .bskt .line .prodinfo li img {
	margin: 0;
	max-width: 250px
}

#pm .bskt .line .prodinfo li.descr {
	margin-left: 0;
	font-size: initial;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	/* margin-bottom: var(--half-spacing); */
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--info-color);
	font-weight: bolder;
}

#pm .bskt .line .prodinfo li.lead {
	color: var(--text-color);
	font-style: italic;
	font-weight: normal;
	margin: .5rem 0;
}

#pm .bskt .line .prodinfo li.lead span {
	display: inline-block;
	color: var(--orange);
	font-style: normal;
	border: 1px var(--orange) solid;
	padding: .25rem;
	margin-right: .5rem;
}

#pm .bskt .line .prodinfo li.lead span:before {
	font-family: var(--font-awesome);
	content: "\f00c";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
}

/*product quantity */
#pm .bskt .lines .line .qty {
	grid-area: qty;
	align-self: center;
}
#pm .bskt .lines .line .netprice {
	grid-area: netprice;
	font-size:.725em;
	margin-left:.5em;
	text-align:right;
}



#pm .bskt .lines .line .qty form {
	line-height: 1;
}

#pm .bskt .lines .line .qty label,
#pm .bskt .lines .line .qty #update{
	display:none;
}

#pm .bskt .lines .line .qty button {
	-webkit-appearance: none;
	background-color:var(--light-blue);
	color:var(--white);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	
	border:1px solid var(--light-blue);
	border-radius:var(--border-radius);
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius:var(--border-radius);
	text-align:center;
	font-size:1em;
	margin:.5em;
}

/* remove item */
#pm .bskt .line .rem {
	grid-area: rem;
	text-align: center;
	align-self: center;
}

#pm .bskt .line .rem input {
	font-family: var(--font-awesome);
	color: var(--grey);
	background-color: transparent;
	border: none;
	font-weight: 400;
}

/* if product is multi sku then show this in the same area as the quantity update */
#pm .bskt .lines .line .skuselect {
	grid-area: skuselect;
	align-self: end;
}

#pm .bskt .lines .line .skuselect select {
	margin: 0;
	font-size: small;
	width: auto;
}

/* remove item */
#pm .bskt .line .price {
	grid-area: price;
	text-align: right;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: center;
}


#pm .bskt  .gifttext{
	grid-area:gifttext;
	font-size:.725em;
		margin-left:.5em
}

#pm .bskt  .gifttext a{
	text-decoration:underline;
	padding:0 .5em
}

#pm .bskt  .giftwrap{
	grid-area:giftwrap;
	font-size:.725em;
		margin-left:.5em
}

#pm .bskt  .giftwrap a{
	text-decoration:underline;
	padding:0 .5em
}

.gtentry{
	grid-area:gtentry;
}

.gtentry li{
	display:block;
}

.gtentry .chars{
	font-size:.725em;
}

/* Basket Sample Lines
------------------------------------------------------- */
#pm .bskt .lines.sample {
	grid-area: samples;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal {
	/*why display this... we have this info in the totals area... */
	display: none;
	grid-area: basket-sub-total;
	text-align: right;
	font-size: 1.25em;
	margin-bottom: var(--spacing);
}

.prodsubtotal label {}

.prodsubtotal span {}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
#pm .bskt .header.freedel {
	grid-area: freedelivery;
	text-transform: none;
	font-size: 1em;
	padding: 0;
	display:none;
}

.header.delivery {
	/*doesn't exist but should be on the actual delivery header */
}

/* Shipping 
------------------------------------------------------- */
.shipping {
	grid-area: shipping;
	background-color: var(--off-white);
	padding: 1rem;
	text-align: left;
}

/* because the class is used elswhere */
#site.shipping{
	padding:0;
}

.shipping .title{
	text-align:center;
}

.shipping ul {
	margin: 0;
	padding: 0;
}

.shipping li{
	list-style:none;
}

/*think these should be a header */
.shipping li.delivery .store{
	/* display:none; */
}

.shipping li.delivery .store h4{
	display:inline;
	margin-left:1em;
}

.shipping li.delivery .address{
	/* display:none; */
}

.shipping li.delivery .address h4{
	display:inline;
	margin-left:1em;
}

.shipping ul li.ship {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: var(--half-spacing);
	display: grid;
	grid-template-columns: 4em 1fr;
}

.shipping ul li.ship input {
	margin: 0;
	padding: 0;
	margin-right: auto;
	font-size: 2em;
	-ms-transform: scale(1.5);
	/* IE 9 */
	-webkit-transform: scale(1.5);
	/* Chrome, Safari, Opera */
	transform: scale(1.5);
}

.shipping ul li.ship label {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 100px;
	font-weight: normal;
}

.shipping ul li.ship input[type="radio"]:checked+label {
}

.shipping ul li.ship label span {
	margin-left: var(--half-spacing);
	text-align: right;
}

.shipping ul li.delivery.deliveryto form{
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-gap:1em;
	grid-template-areas: "title title"
		"postcode locate"
		"country country"
		"address options";
}


.shipping ul li.delivery.deliveryto form span{
	grid-area:title;
	text-align:center;
		text-align:left;
}

.shipping ul li.delivery.deliveryto form input.postcode{
	grid-area:postcode;
}

#countryid{
	grid-area:country;
}


.shipping ul li.delivery.deliveryto form .ship_edit{
	grid-area:country;
	text-align:center;
}

/*if only one country we show the country as a span - a bit redundant so hidden */
.shipping .delivery.deliveryto form span {}

.shipping ul li.delivery.collectstore {
	display: grid;
	color:var(--text-color);
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "title title" "location location" "address options";
}

.shipping ul li.delivery.collectstore label {
	grid-area: title;
}

.shipping ul li.delivery.collectstore form {
	grid-area: location
}

.shipping ul li.delivery.collectstore.info:before {
	display: none;
}

.shipping ul li.delivery.collectstore p {
	padding: 0;
	margin: 0;
}

.shipping ul li.delivery.collectstore .address {
	margin-left: var(--spacing);
	font-size: small;
}

/*better code structure needed - is just a p if only one option is available*/
.shipping ul li.delivery.collectstore #serviceid, .shipping ul li.delivery.collectstore .address+p {
	grid-area: options;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals {

	/*if we could move the basket actions (payment buttons, vouchers, surcharge) into the same div as the basket totals 
	we could go sticky */
	grid-area: totals;
	text-align: center;
	padding: var(--spacing);
	display: grid;
	grid-template-columns:1fr;
	background-color:var(--off-white);
}

.bskttotals .total {
	margin: 0 2rem;
	text-align:left;
	display: grid;
	grid-template-areas: "label total";
	font-family:var(--heading-font);
}


.bskttotals .total label {
	grid-area:label;
}

.bskttotals .total span {
	grid-area:total;
	margin-bottom: var(--half-spacing);
	text-align: right;
}

.bskttotals .subtotal {
	margin: 0 2rem;
	display: grid;
	grid-template-areas: "label total"
}

.bskttotals .subtotal label {
	display: block;
	grid-area: label;
	text-align: left;
}

.bskttotals .subtotal span {
	display: block;
	grid-area: total;
	text-align: right;
}

/* Vouchers
------------------------------------------------------- */
.vouchentryaccord {
	grid-area: voucher;
	background-color: var(--off-white);
	padding: 0 1rem;
	text-align: center;
}

.vouchentryaccord ul, .vouchentry ul {
	list-style: none;
}

.vouchentryaccord li, .vouchentry li {
	list-style: none;
}

.vouchentryaccord li.pane {
	display: none;
}

#pm .bskt .vouchentryaccord .header {
	font-size: 1rem;
	border: none;
	border: 0;
	padding: 0;
	font-size: .825rem;
	text-decoration: underline;
	align-items:center;
	border:2px solid var(--blue);
	background-color:var(--white);
	color:var(--blue);
	padding:1em;
}

#pm .bskt  .accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom:0;
}

.vouchentryaccord .header img {
	width:1.5em;
}

#pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane {
	padding: 1em;
	padding-top:0;
	display: none;
	background-color:var(--white);
	border:2px solid var(--blue);
	border-bottom-left-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
	border-top:0;
}

#pm .bskt ul.accordion li.pane ul {
	margin: 0;
}

.vouchentry ul.vouch {
	margin: 0;
	padding: 0;
	display: grid;
	grid-row-gap: .5em;
	grid-gap:1em;
	grid-template-columns: 1fr 100px;
	grid-template-areas: "code submit"
}

.vouchentry .appliedpromovoucher {
	/* margin-top:1em; */
	padding: var(--half-spacing) var(--half-spacing);
	font-size: .725rem;;
}

.vouchentry .remove a {
	display: block;
	background-color: var(--orange);
	border-color: var(--orange);
	font-size: .725rem;
}

.remove input {
	width: 100%;
	display: block;
}

.vouchentry ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vouchentry ul li.info {
	grid-area: title;
	/*due to duplicate title when voucher applied */
	display: none;
}

.vouchentry ul li.vouchentry {
	grid-area: code;
}

.vouchentry ul li.vouchentry input {
	width: 100%;
	font-size:.725em;
}

.vouchentry .submit {
	grid-area: submit;
	background-color: var(--yellow);
	border-color: var(--yellow);
	/* margin-left: .5rem; */
	font-size:.725em;
}

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons {
	grid-area: buttons;
	text-align: center;
	padding: var(--spacing);
	background-color:var(--off-white);
	margin-bottom: 1rem;
}

.bsktbuttons .startcheckout {
	grid-area: pay;
	margin-bottom: .5em;

}

.bsktbuttons .startcheckout  a{
	color:var(--white);
		background-color:var(--green);
	border:1px solid var(--green);
}

.bsktbuttons .startcheckout a:before {
	content: "\f023";
	font-family: var(--font-awesome);
	margin-right: 1rem;
}

.bsktbuttons .startcheckoutcollect {
	grid-area: collect;
	margin-bottom: .5em;
}

.bsktbuttons .startcheckout a.btn {
	display: block;
}

.bsktbuttons .clear {
	grid-area: empty;
}

.bsktbuttons .clear a.btn {
	display: block;
	margin-top: 1em;
}

.bsktbuttons .cont {
	grid-area: continue;
	display: none;
}

.bsktbuttons .cont a.btn {
	display: block;
	font-size: .825rem;
	border: 2px var(--button-color) solid;
	background-color: transparent;
	color: var(--button-color);
}

#pm .bsktbuttons .art {
	margin-top: 1em;
	grid-area: logos;
}

#pm .bsktbuttons .art .imgcont {
	display: inline-block;
	margin: .5rem;
}

#pm .bsktbuttons .art .imgcont img {
	max-width: 64px;
}

#pm .bsktbuttons .art .imgcont img[alt="PayPal Pay in 3"] {
	max-width: 100%;
}

.bsktbuttons .art h4 {
	font-family: var(--headingFont);
	font-size: 1em;
	text-transform: capitalize;
}

/*promo content on basket - awful layout - why is this a ul?*/

#pm ul.prompane {
	grid-area: prompane;
	list-style: none;
	grid-gap: 0;
	grid-column-gap: 4em;
	margin: 0;
}

#pm ul.prompane li i {
	grid-area: icon;
	color: var(--orange)
}

#pm ul.prompane li span {
	grid-area: text;
	font-size: .825rem
}

/* delivery messages*/
.stddelinfo {
	grid-area: standarddelivery;
}

.priordelinfo {
	grid-area: prioritydelivery;
}

.priordelinfo, .stddelinfo {
	display: grid;
	border-radius: var(--border-radius);
	background-color: var(--off-white);
	padding: var(--spacing);
	margin-bottom: 1rem;
	grid-template-areas: "icon message price" "icon details .";
	grid-template-columns: 4rem 1fr 5rem;
	grid-column-gap: 2rem;
}

.priordelinfo img, .stddelinfo img {
	grid-area: icon;
}

.priordelinfo h4, .stddelinfo h4 {
	grid-area: message;
	margin: 0;
}

.priordelinfo h5, .stddelinfo h5 {
	grid-area: details;
	margin: 0;
}

.priordelinfo p, .stddelinfo p {
	grid-area: price;
	margin: 0;
}

.ordertimer {
	font-size: .825rem;
}

#pm ul.prompane .returns {
	display: grid;
	grid-template-areas: "icon message ." "icon details . ";
	grid-template-columns: 4rem 1fr auto;
	grid-column-gap: 2rem;
	align-items: center;
}

#pm ul.prompane .returns img {
	grid-area: icon;
}

#pm ul.prompane .returns h4 {
	grid-area: message;
	margin: 0;
}

#pm ul.prompane .returns h5 {
	grid-area: details;
	margin: 0;
	font-family: var(--text-font);
	font-size: .825rem
}

/* -------------------------------------------------------------------------------------
=Checkout Process
------------------------------------------------------------------------------------- */
#pt.checkouttop .ext {
	--breadcrumb-width: 1fr;
		--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth) 1fr var(--breadcrumb-width) var(--spacerwidth);
	grid-template-areas: ". logo breadcrumb .";
	
}

#pt.checkouttop .ext .pane {
	grid-area: breadcrumb;
	text-align: center;

}

#pt.checkouttop .ext .pane li {
	display: inline-block;
	margin: 0;
	margin-right: 1em;
	color:var(--blue);
}

#pt.checkouttop .ext .pane li:last-child {
	margin-right: 0em;
}

#pt.checkouttop .ext .pane li:before {
	font-family: var(--font-awesome);
	content: "\f054";
	display: inline-block;
	font-size: 1em;
	margin-right: 1em;
	color:var(--white);
}

#pt.checkouttop .ext .pane li:first-child:before {
	content: "";
	margin: 0;
	display: none;
}

.chksteps_prev, .chksteps_curr, .chksteps_next {
	text-transform: capitalize;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.chksteps_prev {
	color: var(--grey);
}

.chksteps_curr {
	color: var(--text-color)
}

.chksteps_next {
	color: var(--grey)
}

/* Signin/guest pane
------------------------------------------------------- */
.page_checkoutsignin {}

.checkoutsignin .signin {
	width: 50%;
	margin: auto;
	display: grid;
	align-items: start;
	grid-template-columns: 1fr;
	grid-gap: 4em;
	grid-template-areas: "signin" "guest ";
}

.page_checkoutsignin .form#psign {
	grid-area: signin;
	width: auto;
}

.page_checkoutsignin .form#pguest {
	grid-area: guest;
	width: auto;
}

.page_checkoutsignin .form label {
	display: block;
}

.page_checkoutsignin form input,
.page_checkoutsignin form select {
	width: calc(100% - 2em);
}

.page_checkoutsignin form img{
	display:inline-block;
	vertical-align:top;
}

.page_checkoutsignin .form#psign .submit,
.page_checkoutsignin .form#pguest .submit {
	grid-column:1/-1;
	width:auto;
	padding: var(--half-spacing) var(--spacing);
	margin: auto;
}

.exstregfield {
	display: none;
}

.page_delivery, .page_checkout, .page_checkoutsignin, .page_delivery, .page_shipping, .page_payment {}

/* Address (delivery and invoice) 
------------------------------------------------------- */
/*this isn't needed */
.page_delivery form[name="back"] {
	display: none !important;
}


.page_delivery h3,
.page_checkout h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}
.page_delivery form, .page_checkout form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"address summary"
		"address continue"
		"address .";
	grid-column-gap: 1rem;
	padding-bottom:2rem;
}

.page_delivery form input,
.page_checkout form input,
.page_delivery form select,
.page_checkout form select,
.page_delivery form textarea,
.page_checkout form textarea
{
	width: calc(100% - 2em);
}

.page_delivery form img, .page_checkout form img{
	display:inline-block;
	vertical-align:top;
}

.page_delivery form .terms, .page_checkout form .terms {}

.page_delivery form .terms h5, .page_checkout form .terms h5 {
	display: grid;
	grid-template-areas: "checkbox text";
	grid-template-columns: 2rem 1fr;
	align-items: center;
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem
}

.page_delivery form .terms input, .page_checkout form .terms input {
	grid-area: checkbox;
	margin: 0;
	width:auto;
}

.page_delivery form .termsart, .page_checkout form .termsart {
	text-align: left;
	font-size: .825rem;
}

/*class needed on this ul!*/
.page_delivery form>ul, .page_checkout form>ul {
	grid-area: address;
}

.page_delivery .form li.info, .page_checkout .form li.info {
	display: none;
}

.page_delivery .form li label, .page_checkout .form li label {
	display: none;
}

.page_delivery .form li.reqmsg, .page_checkout .form li.reqmsg {
	color: var(--error-color);
}

/*display corrections for same invoice as delivery address checkbox */
.page_delivery .form .deladd .chkbox {
	width: auto;
	margin-right: 1rem;
}

.page_delivery .form .deladd label {
	display: inline-block;
}

/*if member this shows */
.page_delivery li.chkbox {}

.page_delivery li.chkbox input {
	width: auto;
	margin: 0;
	margin-right: .5rem;
	display: inline-block;
	vertical-align: middle;
}

.page_delivery .chkbox .help {
	display: inline-block;
	vertical-align: middle;
}

.page_delivery form[name="delAddress"] {}

.page_delivery .remove {
	font-size: .825rem;
	color: var(--error-color)
}

/* Postcode Lookup
------------------------------------------------------- */
.page_delivery .pclup,
.page_checkout .pclup,
.page_delivery .pclupdel,
.page_checkout .pclupdel {
	display:grid;
	width: calc(100% - 2em);
	grid-template-columns: 1fr  1fr auto;
	grid-gap:1em;
	grid-template-areas: "title title title"
	"postcode locate manual"
	"address address address";
	align-items:center;
}

#txtPostCodeLookup{
	grid-area:postcode;
}

#btnPostCodeLookup{
	grid-area:locate;
}

#pclupManualAddress{
	grid-area:manual;
	text-align:center;
}

span.or{
	grid-area:change;
	text-align:right;
	display:none;
}

#pnlMultiAddressOption,
#pnlMultiAddressOptionDel{
		grid-area:address;
}

#ddlMultiAddress,
#ddlMultiAddressDel{

	background-image:none;
	padding:.5em;
	width:100%;
}


.page_delivery .pclup input,
.page_checkout .pclup input,
.page_delivery .pclupdel input,
.page_checkout .pclupdel input {
	width: auto;
	display: block;
	margin:0;
}

/* Special Instructions
------------------------------------------------------- */

.form li.specialinst textarea{
	margin-bottom:0;
}

/* Order Fulfilment/shipping
------------------------------------------------------- */
.page_shipping {}

.page_shipping .pmfull {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
}

.page_shipping h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}

.page_shipping select {
	width: 100%;
}

.page_shipping .service, .page_shipping .shippinginfo, .page_shipping .deliveryinfo {
	margin: 1rem 0;
}

.page_shipping .deliveryinfo {
	display:none;
}

.page_shipping .subtotal {
	margin: 1rem 0;
	display: grid;
	grid-template-areas: "label value";
	grid-template-columns: 1fr auto
}

.page_shipping .subtotal label {
	grid-area: label;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.page_shipping .subtotal span {
	grid-area: value;
	text-align: right;
}

.page_shipping .cont a {
	display: block;
}

/* Payment
------------------------------------------------------- */
.page_payment {}

.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
	/* 
	using grid layout just isn't feasible here with the way the content blocks are
	it breaks/works depending on the size of the basket
	
	display: grid; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"header header"
		"payment payment"
		"cont cont"
		"details details"
		"summary summary";*/
}


.page_payment #pm .bdcb{
	display:none;
}

.page_payment #pm .bt {
	grid-area: header;
	text-align: center;
	margin-bottom: 1rem
}

.page_payment h3 {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin: 2rem;
}

.termsagreemsg {
	margin-bottom: 1em;
	text-align: center;
}

.termsart {
	margin-bottom: 1em;
	text-align: center;
}

.termsmsgcontainer {}

.page_payment #pm form.payoptsform {
	grid-area: payment;
	/* display: grid; */
	grid-template-areas:
		"options"
		"pay"
}

.page_payment #pm form.payoptsform .payopts {
	/* display: grid; */
	grid-template-columns: 1fr;
	/* grid-gap:1em; */
	grid-template-areas:
		"debit"
		"invoice";
}

/*only used in testing - cash payment */
.pt_cash {
	grid-area: cash;
}

/* custom radio buttons with images */
.page_payment #pm .sp_button{
	margin-bottom:1em;
	position: relative;
}

.page_payment #pm .sp_button label,
.page_payment #pm .sp_button input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.page_payment #pm  .sp_button  input[type="radio"] {
	opacity: 0;
	z-index: 100;
}

.page_payment #pm .sp_button  label {
	z-index: 90;
	line-height: 1.8em;
	color:transparent;
}

.page_payment #pm  .sp_button input{
	grid-area:check;
	display:block;
}


.page_payment #pm .sp_button.pt_debitcreditcard{
	grid-area:debit;
	background:url('https://s3-eu-west-1.amazonaws.com/joneswholesale/2785280/i/bdr/debitcredit.png?_t=24131242') #fff no-repeat center;
	aspect-ratio:668/65;
	background-size:contain;
}

.page_payment #pm .sp_button.pt_debitcreditcard  input[type="radio"]:checked + label {
	background:url('https://s3-eu-west-1.amazonaws.com/joneswholesale/2785280/i/bdr/debitcredit_checked.png?_t=2413122') #fff no-repeat center;
	aspect-ratio:668/65;
	background-size:contain;
}

.page_payment #pm  .sp_button.pt_invoice{
	grid-area:invoice;
	cursor: pointer;
	background:url('https://s3-eu-west-1.amazonaws.com/joneswholesale/2785280/i/bdr/invoice.png?_t=2396124442') #fff no-repeat center;
	aspect-ratio:668/65;
	background-size:contain;
	margin-bottom:1em;
}

.page_payment #pm .sp_button.pt_invoice input[type="radio"]:checked + label {
	background:url('https://s3-eu-west-1.amazonaws.com/joneswholesale/2785280/i/bdr/invoice_checked.png?_t=2394461242') #fff no-repeat center;
	aspect-ratio:668/65;
	background-size:contain;
}


.page_payment #pm .bc form[action="/payment.aspx"] input[type="submit"]{
	grid-area:pay;
	display:block;
	margin-top:1em;
	background-color:var(--checkout-button);
	border:1px solid var(--checkout-button);
	color:var(--White);
	width:100%;
	padding:.5em 1em;
	text-transform:	capitalize;
	font-family:var(--headingFontAlt);
	font-weight:600;
	font-size:1.5em;
	margin-bottom:1em;
}





.page_payment #pm .bc form[action="/payment.aspx"] input[type="submit"] {
	grid-area: pay;
	display: block;
	margin-top: 1em;
	background-color: var(--checkout-button);
	border: 1px solid var(--checkout-button);
	color: var(--White);
	width: 100%;
	padding: .5em 1em;
	text-transform: capitalize;
	font-family: var(--headingFontAlt);
	font-weight: 700;
	font-size: 1.5em;
	margin-bottom: 1em;
}

/*-- */
/*payment article */
.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_payment #pm .art li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

.page_payment #pm .art li:last-child {
	margin-bottom: 0;
}

.page_payment #pm .art li i {
	grid-area: icon;
	color: var(--navy)
}

.page_payment #pm .art li span {
	grid-area: text;
	font-size: .825rem
}

.payoptentry, #psagepay {
	grid-area: details;
}

.page_payment #pm form.payoptsform .submitcontainer {
	grid-area: pay;
	text-align: center;
}

.page_payment input[type="submit"] {
	/* color:var(--text-color); */
	display: block;
	padding: 1rem 0;
	width: 100%;
}

.confirmorder {
	grid-area: details;
}

/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	display:grid;
	grid-template-areas:"title"
	"totals"
	"summary"
}

.bsktsum h4 {
	display:none;
}

/*we only want the header on the payment page*/
.page_payment .bsktsum h4 {
	grid-area:title;
	text-align:center;
	margin:.5em;
	display:block;
}

/*but we don't want the basket lines summary on the payment page*/
.page_payment .bsktsum .lines {
	display:none;
}


/*basket lines 
--------------------------*/
.bsktsum .lines {
	grid-area:summary;
	background-color:var(--off-white);
	padding:1em;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

.bsktsum .lines .line {
	align-items: start;
	display: grid;
grid-template-columns:4em 1fr 2em auto;
	grid-template-areas:
		"thumb desc qty price"
		"thumb . . .";
	grid-column-gap: 1rem;
}

.bsktsum .lines .line .unitprice {
	display: none;
}

.bsktsum .lines .thumb {
	grid-area: thumb;
	list-style: none;
}

.bsktsum .lines .thumb img{
	margin:0 !important;
}

/* Product Info - in list form */
.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

.bsktsum .lines li {
	font-size: .725rem;
	margin-left: .5rem;
}

.bsktsum .lines li.flags{
	display:none;
}

.bsktsum .lines li.descr {
	font-size: .825rem;
	font-family: var(--heading-font);
	font-weight:500;
	margin-left: 0;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
	font-size:.825em;
}

.bsktsum .lines .qty label {
	display: none;
}

.bsktsum .lines .price {
	grid-area: price;
	font-size:.825em;
	text-align: right;
}

.bsktsum .totals {
	grid-area:totals;
	padding:1em;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

.bsktsum .totals .subtotal {
	display: grid;
	grid-template-areas:"label value";
	grid-template-columns:1fr 100px;
	grid-gap:.5em;
}

.bsktsum .totals label{
	grid-area:label;
}

.bsktsum .totals span{
	grid-area:value;
	text-align:right;
}

.bsktsum .totals .subtotal:last-child {
	color:var(--light-blue);
	font-family:var(--heading-font);
	/* display:block; */
	text-align:left;
	font-size: 1em;
	/* padding:1em; */
}

.bsktsum .totals .subtotal:last-child label {
	display:inline-block;
	margin-right:.5em;
	color:var(--grey);
	font-family:var(--text-font);
}

.bsktsum .totals .subtotal:last-child span {
}

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn,
.page_checkout .contbtn {
	grid-area:continue;
}
.page_delivery .contbtn input,
.page_checkout .contbtn input{
	width:100%;
}

.forinvoice {}
.page_delivery .forinvoice .chkbox label {}
.page_delivery .contbtn input, .page_checkout .contbtn input {}

/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
/* is this the sign in page form */
.form.myaccount#psign {
	/*width: calc(100% - 2em);
	margin: auto;*/
	/* outline:1px red solid; */
}


.page_useraccount{
	max-width:var(--site-max-width);
}

.page_useraccount #pl,
.page_orderinfo #pl,
.page_register #pl{
	display:none;
}

/* new member menu */
#pmam {
	width: var(--left-panel-width);
	margin: 0;
	margin-left: auto;
	margin-right: 1rem;
	vertical-align: top;
}

.page_useraccount .pmfull,
.page_orderinfo .pmfull{
	background-color: var(--main-panel-color);
	width: calc(var(--site-max-width)  - 2rem - var(--left-panel-width));
	display: inline-block;
	padding:1em;
	vertical-align: top;
	margin: 0;
	margin-right: auto;
}


/* my account menu*/

#pmam{
	
}

#pmam li{
	list-style:none;
	margin-bottom:.5rem;
}

/* close filter button */

.mamclsdiv {
	text-align:right;
}

.mamclsdiv .mamclsspn{
	display:inline-block;
	border:1px solid var(--off-white);
	color:var(--grey);
	background-color:var(--off-white);
	border-radius:50%;
	font-family:monospace;
	padding:.125rem;
	margin:0rem;
	width:1rem;
	height:1rem;
	line-height:1;
	text-align:center;
	cursor:pointer;
	/*display:none;*/
}
/* show/hide menu button */



#fstrigbtn {
	display: none;
}
#mamtrigbtn{
	display:none;
}



*/
.page_useraccount .arts{
	grid-area:memberarts;
}

.page_useraccount .carousel.prod{
	grid-area:memberarts;
}

/*
	General
		If the left panel is being used for things like recently viewed items then it also shows here, resulting in effectively 2 left panels
			perhaps option is to either put the menu in the left panel or to put it in the pm panel if we don't want to use it?
		We should also look at improving the login/register/forgot password pages too, some of this content is shared on the member pages
		

	New menu
		company details has a ul with div's inside of it - either the UL is not needed or the div's should be a li
		perhaps consider better use of title headings
			customer name should be the highest, then the subsections a level below
		added an icon to use but it isn't writing out the text to go with it... just an empty <a>
	
	Main section
		if the member menu is being used then the #pm container should be a pmwide not a pm full
		welcome message doesn't appear above member messages - it should, it seems to be in some form containing div...

		each message should be in its own container with an id for that member message with out it we can't target cope with multiple messages being used
		buy again items need to be in their own specific container and not just in some form container thing... why are they in a form container? 
		- they also need to write out the standard fprd element and not what is currently used


*/


/* member orders view */

.member-orders{
	
}



/* table to grid stuff */
table.orders {
	display: grid;
	border-collapse: collapse;
	min-width: 100%;
	grid-template-columns: 
	minmax(200px, 1fr)
	minmax(200px, auto)
	minmax(200px, auto)	minmax(200px, auto)
		minmax(200px, auto);

	border:1px solid var(--border-color);

	overflow-x:scroll;
}

table.orders tr:nth-child(odd) td{
	background-color:var(--off-white);
}

table.orders tr td[colspan="2"]{
	grid-column:auto / span 2;
}


table.orders thead,
table.orders tbody,
table.orders tr {
	display: contents;
}

table.orders th,
table.orders td {
	padding: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.orders th {
	position: sticky;
	top: 0;
	background: var(--blue);
	color:var(--white);
	text-align: left;
	font-weight: normal;
	font-size: 1.1rem;
	width:auto;
}

table.orders td a.btn {
	display: block;
	background:none;
	color:var(--text-color);
	border:none;
	text-align:right;
	font-size:.825em;
}

/* member order detail view */
.member-order{
	display:grid;
	grid-template-areas:"order-info order-info"
	"delivery-address invoice-address"
	"order-details order-details"
	"account-actions account-actions";
	grid-template-columns:1fr 1fr;
	grid-gap:1em;

	margin:2em 0;
}
.order-info{
	grid-area:order-info;
}

.order-info h3{
	text-align:center;
}

.delivery-address{
	grid-area:delivery-address;
}


.delivery-address ul,
#pm .artp .delivery-address ul{
	padding:0;
	margin:0;
}
.delivery-address li{
	list-style:none;
	padding-left:1em;
}

.delivery-address .name{
	font-weight:600;
	padding:0;
}
.delivery-address .header{
	font-weight:500;
	padding:0;
}




























.invoice-address{
		grid-area:invoice-address;
}
.invoice-address ul,
#pm .artp .invoice-address ul{
	padding:0;
	margin:0;
}
.invoice-address li{
	list-style:none;
}

.invoice-address li{
	list-style:none;
	padding-left:1em;
}

.invoice-address .name{
	font-weight:600;
	padding:0;
}
.invoice-address .header{
	font-weight:500;
	padding:0;
}













.order-details{
	grid-area:order-details;
}


/* table to grid stuff */
.order-details table.order {
	display: grid;
	border-collapse: collapse;
	min-width: 100%;
	grid-template-columns: 
	minmax(100px, 1fr)
	minmax(100px, auto)
	minmax(100px, auto);

	border:1px solid var(--border-color);
}

table.order tr:nth-child(odd) td{
	background-color:var(--off-white);
}

table.order tr td[colspan="2"]{
	grid-column:auto / span 2;
}


.order-details table.order thead,
.order-details table.order tbody,
.order-details table.order tr {
	display: contents;
}

.order-details table.order th,
.order-details table.order td {
	padding: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-details table.order th {
	position: sticky;
	top: 0;
	background: var(--blue);
	color:var(--white);
	text-align: left;
	font-weight: normal;
	font-size: 1.1rem;
	width:auto;
}

.order-details table.order td a.btn {
	display: block;
	background:none;
	color:var(--text-color);
	border:none;
	text-align:right;
	font-size:.825em;
}

.order-details table.order .delivery{
	outline:1px blue solid;
}

.account-actions{
	grid-area:account-actions;
}

.account-actions li{
	display:inline-block;
	padding:1em 0;
}

.account-actions ul,
#pm .artp .account-actions ul{
	margin:0;
	padding:0;
}

.account-actions li a,
#pm .artp .account-actions  li a{
	background-color:var(--off-white);
	border:1px solid var(--border-color);
	color:var(--text-color);
}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.page_confirmation {}
.page_confirmation li {
	list-style: none;
}

.page_confirmation .header {
	font-size: 1.5em;
}

.page_confirmation .subhead {
	font-size: 1.25em;
	margin-bottom: 1rem;
}

.page_confirmation .header {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_confirmation .subhead {
	display: block;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_confirmation .info {
	text-align: center;
}

.page_confirmation .info li {
	margin-bottom: 1rem;
}

.page_confirmation .info li.subhead:before, .page_confirmation .info li.subhead:after {
	content: '';
	display: none;
}

/* Basket Line items
------------------------------------------------------- */
.page_confirmation .conf .order {}
.page_confirmation .conf .order .line {
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 64px 1fr auto 100px;
	grid-template-areas: "icon desc qty price";
	padding: 1em;
	align-self: center;
	align-items: start;
}

/* Image */
.page_confirmation .conf .order .line img {
	margin:0 !important;
}

/* Product title*/
.page_confirmation .conf .order .line .descr {
	align-self: start;
	font-size: 1rem;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .line .price {
	text-align: right;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: start;
}

/* Basket Subtotal
------------------------------------------------------- */
.page_confirmation .conf .order .subtotal {
	padding: 1em;
	border-top: 1px var(--border-color) solid;
	text-align: right;
}

.page_confirmation .conf .order .subtotal label {
	margin-right: 1em;
}

.page_confirmation .conf .order .subtotal span {
	font-size: 1.2em;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .address {
	text-align: center;
	margin-bottom: 4rem;
}

/* Post order customer registration panel
------------------------------------------------------- */
.page_confirmation .conf .ordreg {
	background-color: #ffffff;
	padding: 1em;
	margin: 1em 0;
}

.page_confirmation .conf .ordreg input {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .info {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .help {
	font-size: .725em;
	padding: 1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#pm .smap ul li {}

/* First Level */
#pm .smap ul li {}
#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}

/* Second Level */
#pm .smap ul li ul {
	grid-template-columns: 1fr;
}

#pm .smap ul li ul li {
	width: 100%;
}

#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}

/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}

/* -------------------------------------------------------------------------------------
=Client Spefific Stylings 
------------------------------------------------------------------------------------- */

#productGallery {
	max-width: 500px;
	margin: auto;
}

.sahelpart {
	display: none;
}

.jaqshadow {
	display: none!important;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 nav 2023
	Filename : nav.css
	Last Updated : 10. 07. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com


/* ##################### MAIN STYLES ######################### */


:root{
	--menu-line-height:50px;
}

.nav-wrapper *,
.nav-wrapper *:before,
.nav-wrapper *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


.nav-wrapper {
	grid-area:nav;
	position: relative;
	width: 100%;
	min-height: var(--navbar-height);
	margin: 0 auto;
	background-color:var(--navbar-color);
	border-top:1px solid #e6e6e6
}

.nav-wrapper ul,
.nav-wrapper li{
	margin:0;
	padding:0;
	list-style: none;
}

/* Top Nav
------------------------------------------------------- */
.nav-wrapper ul.nav {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	/*used to stop the gaps with inline block stuff*/
	font-size:0;
	width: var(--menu-max-width);
	text-align:center;
}

div.nav-wrapper>ul {
	position: relative;
}

ul.nav>li {
	display:inline-block;
	font-size: 1rem;
}

ul.nav>li>a {
	display: block;
	line-height:var(--menu-line-height);
	padding: 0 calc(1rem + 10px) 0 1rem;
	color: var(--navbar-link-color);
	font-family:var(--heading-font);
	font-size:1em;
	text-decoration: none;
}

ul.nav>li>a:only-child {
	padding: 0 1rem 0 1rem;
}

ul.nav>li>a:hover,
ul.nav>li:hover>a,
ul.nav>li.active-menu-item>a:hover,
ul.nav>li.active-menu-item:hover>a,
ul.nav>li.first-menu-item>a:hover,
ul.nav>li.first-menu-item:hover>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li>a>img {
	max-width: 16px;
	display: block;
}

/* Classic Dropdown
-------------------------------------------------------------------------------------------------------------- */

/* dropdown icons
------------------------------------------------------- */
ul.nav li.classic .deptlink{
	font-size:0;
	/*don't put padding here it breaks the menu on mobile */
	/* padding:0 var(--half-spacing); */
}

ul.nav li.classic .deptlink a.img{
	display:inline-block;
	vertical-align:middle;
	max-height:var(--navbar-dropdown-item-height);
	width:var(--navbar-dropdown-item-height);
	margin-right:var(--half-spacing);

}

ul.nav li.classic .deptlink a.img img{
	
	padding:4px;
}

ul.nav li.classic .deptlink a.txt,
ul.nav li.classic .deptlink a.l2,
ul.nav li.classic .deptlink a.l3,
ul.nav li.classic .deptlink a.l4{
	display:inline-block;
	width:calc(100% - 3rem);
	vertical-align:middle;
	font-size:var(--navbar-dropdown-text-size);
	line-height: var(--navbar-dropdown-item-height);
	padding: 0;
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

ul.nav > li > ul > li:hover .deptlink{
	background: var(--navbar-hover-color);
	color:var(--navbar-hover-text-color);
}

ul.nav > li > ul > li:hover .deptlink a.txt
{
	color:var(--navbar-hover-text-color);
}

/* 2nd Level
------------------------------------------------------- */
ul.nav>li>ul,
ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	position: absolute;
	width: var(--navbar-dropdown-width);
	z-index:1001;
	text-align:left;
	background: var(--navbar-dropdown-color);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/* this class should only be applied to top level menu items if their sub menu flows outside of the viewport,
used for dropdowns that are close to the right edge - this change should align the right edge of the dropdown to the right edge of the screen
removing horizontal scroll

*/
.over{
	/* outline:1px red solid; */
	/* right:0; */
}

ul.nav>li>ul>li,
ul.nav>li>ul>li>ul>li {
	position: relative;
}

ul.nav>li>ul>li>a,
ul.nav>li>ul>li>ul>li>a,
ul.nav>li>ul>li>ul>li>ul>li>a {
	display: block;
	width: var(--navbar-dropdown-width);
	width:100%;
	line-height: var(--navbar-dropdown-item-height);
	padding: 0 var(--spacing);
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

ul.nav>li>ul>li:hover>a,
ul.nav>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>ul>li>a:hover {
	background: #efefef;
}

ul.nav>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>.deptlink:only-child:after,
ul.nav>li>ul>li>ul>li>ul>li>a:only-child:after {
	content: "";
}

ul.nav>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>ul>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.ruby-menu-right>ul {
	right: 0;
}

/* RUBY 3RD & 4TH LEVEL SPECIFIC */

ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	left: var(--navbar-dropdown-width);
	top: 0;
	z-index: 100;
}


ul.nav>li>ul.over>li>ul.l3,
ul.nav>li>ul.popl>li>ul.l3{
	left: auto;
	right: var(--navbar-dropdown-width);
}


/* RUBY MENU MEGA */

ul.nav>li.mega-menu-classic>div,
ul.nav>li.mega-menu>div,
ul.nav>li.ruby-menu-mega-shop>div {
	position: absolute;
	z-index:1001;
	width: var(--menu-max-width);
	height: auto;
	top: var(--navbar-height);
	left: 0;
	background: var(--navbar-dropdown-color);
	overflow: hidden;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/* RUBY MENU MEGA BLOG */

ul.nav>li.mega-menu>div>ul.mega-menu-nav {
	position: relative;
	width: var(--navbar-dropdown-width);
	height: 100%;
	margin:0;
	/* height: 500px;  if you don't want javascript to define height, use manual height */
	left: 0;
	top: 0;
	background: var(--navbar-sidebar-color);
	color:var(--navbar-sidebar-text-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 {
	font-size: 1rem;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 > .deptlink a.img{
	display:none;
}

/*side bar items */
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
	text-align:left;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a{
	display:block;
}

/*sort out icons - none in side bar */
.mega-menu-nav .l2 .deptlink .img{
	display:none;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.active-menu-item > .deptlink
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.first-menu-item > .deptlink {
  background: var(--navbar-sidebar-hover-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a {
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a {
	background: #e6e6e6;
}


ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid {
	position: absolute;
	width: calc(var(--menu-max-width) - var(--navbar-dropdown-width));
	height: auto;
	max-height:100%;
	min-height: 100%;
	left: var(--navbar-dropdown-width);
	top: 0;
	background: var(--navbar-popout-color);
}

.mega-menu-nav .l3 .deptlink .img{
	display:block;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a {
	background: #ddd;
}


/* RUBY CONTENT GRID */

div.menu-grid,
div.menu-grid-lined {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

/*rows*/
div.menu-grid>div.menu-row {
	position: relative;
	padding:var(--half-spacing);
	height:auto;
}

div.menu-grid > div.menu-row ul{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-gap:1rem;
	margin-bottom:1rem;
}

div.menu-grid > div.menu-row ul li{
	padding:var(--spacing);
	list-style:none;
}

div.menu-grid > div.menu-row ul li.l3{
	padding:0;
}

div.menu-grid > div.menu-row ul li.l4{
	display:none;
}

div.menu-grid > div.menu-row ul li .deptlink{
	position:relative;
	/* border-radius:1em; */
	margin:0;
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
	align-items:center;
	background-color:var(--grey);
}

div.menu-grid > div.menu-row ul li .deptlink a.img{
	grid-column:1;
	grid-row:1;
}

div.menu-grid > div.menu-row ul li .deptlink a.img img{
	width: 100%;
	object-fit: cover;
	margin:auto;
}

div.menu-grid > div.menu-row ul li .deptlink a.txt{
	color:var(--navy);
	background-color:rgba(246, 246, 246, .8);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1rem;
	grid-column:1;
	grid-row:1;
	z-index:10;
	align-self:end;
	padding: .5rem .25rem;
}




div.menu-grid.menu-grid-lined>div.menu-row:after {
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%);
	/* Chrome10+,Safari5.1+ */
}

div.menu-grid.menu-grid-lined>div.menu-row:last-child:after {
	height: 0;
}

div.menu-grid>div.menu-row::after {
	content: "";
	display: table;
	clear: both;
}






div.menu-grid img {
	position: relative;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ruby Content Related */
ul.nav>li.mega-menu-classic>div ul,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul {
	margin: 0;
	margin-top: 10px;
}

.mega-menu-classic .l2 .menu-grid-lined{
	display:none;
}

ul.nav>li.mega-menu-classic>div ul li,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li {
	position: relative;
	font-size: 14px;
	line-height: 28px;
	display: block;
	width: 100%;
}

ul.nav>li.mega-menu-classic>div ul li>a,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li>a {
	text-decoration: none;
	color: var(--text-color);
	display: inline-block;
}

ul.nav>li.mega-menu-classic>div ul li>a:hover,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li>a:hover {
	color: var(--text-link-color-hover);
	text-decoration: underline;
}

ul.nav>li.mega-menu-classic>div ul li .fa,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.mega-menu-classic>div ul li>a>img {
	float: left;
	width: 60px;
	margin-right: 12px;
}




span.ruby-c-content {
	display: block;
	position: relative;
	top: 7px;
	font-size: 12px;
	line-height: 18px;
	text-align: justify;
}

.nav-wrapper .visible-xs {
	visibility: hidden;
	position: absolute;
}

/* DEVICES EXCEPT MOBILE */

@media(min-width:768px) {

	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */
	ul.nav>li:hover>ul,
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul {
		/* show */
		visibility: visible;
		opacity: 1;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div,
	ul.nav>li.ruby-menu-mega-shop>div {
		/* hide */
		visibility: hidden;
		opacity: 0;
		z-index:-1001;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
	ul.nav>li.mega-menu-classic:hover>div,
	ul.nav>li.mega-menu:hover>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div {
		visibility: visible;
		opacity: 1;
		z-index:1001;
		background: var(--navbar-popout-color);
	}
	/* RUBY MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink) {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.first-menu-item>div	{
		visibility: visible;
		opacity: 1;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>div {
		visibility: visible;
		opacity: 1;
		z-index: 101;
	}

	
	ul.nav>li.l1>a:not(:only-child):after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		font-size:1rem;
		position: absolute;
		margin-left: 5px;
	}
	ul.nav>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:after{
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		font-size: 16px;
		padding: 0;
		content: '\f105';
		position: absolute;
		right: 15px;
	}
	/*different position if deptlink icons used*/
	ul.nav > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > ul > li > .deptlink:after {
		top: 10px;
	}
	
	ul.nav>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a:after {
		content: "";
		position: absolute;
		right: 0;
		margin-top: 13px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 8px 6px 0;
		border-color: transparent #fff transparent transparent;
	}

	/* no sub menus, don't show arrows*/
ul.nav > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > ul > li > a:only-child:after{
	content: "";
}

	

ul.nav > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > ul > li > .deptlink:only-child:after{
	content: "";
}
	
}

/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## RESPONSIVE STYLES ###################### */

/* MEDIA QUERY --> EXTRA SMALL DEVICES */

@media(max-width:767px) {
	div.nav-wrapper .hidden-xs {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
		z-index:1001;
		background:var(--navbar-color);
	}
	.nav-wrapper .visible-xs {
		visibility: visible;
		position: absolute;
		left: 0;
		top: 0;
	}
	/* RUBY 1ST LEVEL */
	div.nav-wrapper>ul.nav {
		position: absolute;
		top: 50px;
		width: 100%;
		text-align:left;
	}
	ul.nav {}
	ul.nav>li,
	ul.nav>li.ruby-menu-right {
		float: none;
		display:block;
	}

	/*style the home nav link if present */
	ul.nav>li.l0>a {
		padding: 0 65px;
		background: var(--navbar-active-color);
		color:var(--text-color);
	}
	ul.nav>li>a {
		padding: 0 65px;
		background: var(--navbar-color);
	}
	ul.nav>li>a:only-child {
		padding: 0 65px;
	}
	ul.nav>li>a:hover,
	ul.nav>li:hover>a,
	ul.nav>li.active-menu-item>a:hover,
ul.nav>li.first-menu-item>a:hover	{
		background: var(--navbar-hover-color);
	}
	ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a	{
		background: var(--navbar-hover-color);
	}
	ul.nav>li.ruby-menu-social>a>span {
		display: block;
	}
	/* RUBY 2ND LEVEL */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		position: relative;
		width: 100%;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		border-top: none;
	}
	ul.nav>li,
	ul.nav>li>ul>li,
	ul.nav>li>ul>li>ul>li,
	ul.nav>li>ul>li>ul>li>ul>li {
		position: relative;
	}
	ul.nav>li>ul>li>a,
	ul.nav>li>ul>li>.deptlink,
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		width: 100%;
		line-height: 50px;
		padding: 0 80px;

	}
	ul.nav>li>ul>li:hover>a,
	ul.nav>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--navbar-sidebar-hover-color);
		color: var(--text-color);
	}
	/* RUBY 3RD & 4TH LEVEL SPECIFIC */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul {
		left: auto;
		right: auto;
	}
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 95px;
	}
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover {
		background: var(--popout-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 110px;
	}
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--popout-color);
	}
	ul.nav>li.ruby-menu-social>a {
		border: none;
	}
	/* RUBY MENU MEGA */
	ul.nav>li.mega-menu-classic,
	ul.nav>li.mega-menu {
		position: relative;
	}
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		position: relative;
		top: auto;
		left: auto;
		border-top: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	/* RUBY MENU MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li {
		position: relative;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink{
		line-height: 50px;
		padding: 0;
		padding-left:75px;
		background: var(--navbar-sidebar-color);
		color: #222;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink
	{
		background: var(--navbar-active-color);
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {
		position: relative;
		width: 100%;
		min-height: auto;
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink{
		background: #d9d9d9;
	}
	
	/* RUBY MENU DROPDOWN TOGGLE - MOBILE */
	span.dropdown-toggle {
		position: absolute;
		width: 50px;
		height: 50px;
		max-width: 50px;
		max-height: 50px;
		left: 0;
		top: 0;
		padding: 10px 17px;
		z-index: 1000000;
		cursor: pointer;
	}
	span.dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		color: var(--navbar-link-color);
		font-size: 25px;
		right: 0;
	}
	span.dropdown-toggle.dropdown-toggle-rotate {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	ul.nav>li.l0>a:before{
		
		content: '\e3af';
		text-align:center;
		font-family:var(--font-awesome);
		font-weight:600;
		font-size:25px;
		width: 50px;
		height: 50px;
		background: var(--navbar-active-color);
		color:var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>.deptlink:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before {
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	/* RUBY MENU HIDE/SHOW SUBMENUS - MOBILE */
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul,
	ul.nav,
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink),
	ul.nav>li.mega-menu>div:not(.deptlink){
		max-height: 0;
		transform: scaleY(0);
		overflow: hidden;
	}
	ul.nav>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul>li>ul.mobile-sublevel-show,
	ul.nav.mobile-sublevel-show,
	ul.nav>li.mega-menu-classic>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.mobile-sublevel-show
	{
		max-height: 20000px;
		transform: scaleY(1);
		position:initial;
		width:100%;
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid{
		position:initial;
		width:100%;
	}

	div.menu-grid>div.menu-row {
		position: relative;
		padding:0;
		height:auto;
	}
	div.menu-grid > div.menu-row ul.l3{
		display:block;
		/* padding: 0 65px; */
		background: var(--navbar-popout-color);
		margin-bottom:0;
	}
	div.menu-grid > div.menu-row ul.l3 li.l3{
		display:block;
		position:relative;
		padding:0;
		
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink{
		align-items:center;
		width: 100%;
		line-height: 50px;
		padding: 0;
		padding-left:66px;
		background: var(--navbar-popout-color);
		color:var(--text-color);
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{
		display:inline-block;
		vertical-align:top;
		max-width: 50px;
		margin-right: .5rem;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img img{
		display:block;
		padding:4px 0;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.txt{
		display:inline-block;

	}
	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink:before{
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	
	/* Hamburger icon - mobile */
	.c-hamburger {
		display: block;
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 50px;
		height: 50px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: 0;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}
	.c-hamburger:focus {
		outline: none;
	}
	/*middle bit of the x */
	.c-hamburger span {
		display: block;
		position: absolute;
		top: 50%;
		
		left: var(--half-spacing);
		right: var(--half-spacing);
		height: 3px;
		background:var(--text-color);
	}
	/* top and bottom bits of the x */
	.c-hamburger span::before,
	.c-hamburger span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: var(--text-color);
		content: "";
	}
	.c-hamburger span::before {
		top: -10px;
	}
	.c-hamburger span::after {
		bottom: -10px;
	}
	/**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
	.c-hamburger--htx {
		background-color:transparent;
	}
	.c-hamburger--htx span {
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-delay: 0.3s, 0s;
	}
	.c-hamburger--htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
		background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
		background: none;
	}
	.c-hamburger--htx.is-active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}
	/* Hide Ruby Dividers on Mobile */
	ul.nav.ruby-menu-dividers>li,
	ul.nav.ruby-menu-dividers>li>a,
	ul.nav.ruby-menu-dividers>li.ruby-menu-social>a,
	ul.nav.ruby-menu-dividers>li>a:hover,
	ul.nav.ruby-menu-dividers>li:hover>a {
		border: none;
	}
	/* Reset transparent menu active menu item padding */
	div.nav-wrapper.ruby-menu-transparent>ul.nav>li.active-menu-item>a,
div.nav-wrapper.ruby-menu-transparent>ul.nav>li.first-menu-item>a	{
		padding-left: 45px;
	}
	/* Hide search in mobile */
	ul.nav>li.ruby-menu-social.ruby-menu-search>a {
		display: none;
	}
}

/* MEDIA QUERY --> SMALL DEVICES */

@media(min-width:768px) and (max-width:991px) {
	.nav-wrapper .hidden-md {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {

	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {

	}
	
	div.menu-grid.menu-grid-lined>div.menu-row:after,
	div.menu-grid.menu-grid-lined>div.menu-row>div[class^="ruby-col"]:after {
		background: none;
	}
}

/* MEDIA QUERY --> MEDIUM DEVICES */

@media(min-width:992px) and (max-width:1199px) {}

/* MEDIA QUERY --> LARGE DEVICES */

@media(min-width:1200px) {}



/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## TRANSITION EFFECTS ##################### */

/* Ruby Mega Menu - Dropdown Togglers - MOBILE */

span.ruby-dropdown-toggle {
	transition: transform 0.3s ease;
}

span.ruby-dropdown-toggle:after {
	transition: transform 0.3s ease;
}

@media(min-width:767px) {
	/* Arrows */
	ul.nav>li>a:after {
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after {
		transition: all 0.3s ease;
	}
	/* 1st level move-up effect */
	ul.nav>li>ul,
	ul.nav>li>div {
		transform: translateY(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li:hover>ul,
	ul.nav>li:hover>div {
		transform: translateY(0);
	}
	/* 1st level move-left effect --> For Vertical Menu Orientation */
	ul.nav.ruby-vertical>li>ul,
	ul.nav.ruby-vertical>li>div {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav.ruby-vertical>li:hover>ul,
	ul.nav.ruby-vertical>li:hover>div {
		transform: translateX(0);
	}
	/* 2nd 3rd 4th level move-left/right effect */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul>li>ul {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li:hover>ul {
		transform: translateX(0);
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left>ul {
		transform: translateX(-25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left:hover>ul {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Blog list content move-down effect */
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Blog list content move-left effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect */
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateX(0);
	}
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:before,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:after {
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
}
/* Extra extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {

	/* defaults */
	:root{
		--site-max-width:1400px;
		--menu-max-width:1400px;
	}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
	:root{
		--site-max-width:1200px;
	 }
}
/* Large devices (laptops/desktops, 992px and up) */
/* start to introduce padding on main content at this point */
@media only screen and (min-width: 992px) and (max-width:1199px) {
	/* defaults */
	:root{
		--site-max-width:100%;
	}

	#pt .ext {
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	
	align-items: center;
	grid-template-columns: var(--logo-width) var(--search-width) var(--contact-width) var(--vat-width);
	grid-template-areas:  "logo  search contact   vat"
						  "logo  search user    basket"
						  "nav  nav nav nav   "
	}
#pt .info li.icon {
	display: grid;
	grid-template-columns:  auto;
	grid-template-areas: "icon "
		"text";
	grid-gap:0em;
	margin: var(--half-spacing);
	text-align: center;
}
	
	/* Strapline
------------------------------------------------------- */
#pt .art {
	align-self:center;
}

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

	.pmwide #sr {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 7;
	}


	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 4;
	}

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem"
		"qty qty netprice rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#pt.checkouttop .ext {
		padding:0 1rem;
	}

	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
	}

		/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px)  {
	:root{
		--site-max-width:100%;

	}


	#pt .ext {
		--logo-width: 180px;
		--search-width: 1fr;
		--basket-width: 4em;
		--contact-width: auto;
		--user-width:auto;
		--vat-width:1fr;
		--spacer-width: calc((100% - var(--site-max-width)) / 2);
		grid-template-columns: var(--logo-width) var(--vat-width) var(--contact-width) var(--user-width) var(--basket-width);
		grid-template-areas:  "logo vat contact user basket"
							  "logo search search search search"
							  "nav nav nav nav nav  "
	}
	/* Strapline
------------------------------------------------------- */
#pt .art {
	align-self:center;
}

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing)
	}

	/*hide phone number and icon from display */
	#pt .info{
		margin:var(--spacing);
	}
	#pt .info ul{
		grid-gap:var(--spacing);
	}
	
	#pt .info li.icon{
		margin:0;
	}
	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

	div.menu-grid > div.menu-row ul{
		display:grid;
		grid-template-columns:repeat(4,1fr);
		grid-gap:1rem;
	}

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}


	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}


	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
	grid-template-columns: 1fr 1fr ;
	grid-template-areas:
		"aboutus customersupport"
		"contact newsletter";
		grid-row-gap:2em;
	padding:3em 1em;
	}



	/* product page 
	------------------------------------------------------- */
	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}

	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 5;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 2;
	}

	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 3;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 3;
	}

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem"
		"qty qty netprice rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=New Checkout Process - replaces Checkout v5 Accordion Option
	------------------------------------------------------------------------------------- */

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}


	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	
	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}

	#mamtrigbtn {
		vertical-align: middle;
		text-align: center;
		padding: var(--half-spacing) var(--spacing);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		cursor: pointer;
		font-family: var(--text-font);
		font-weight: var(--text-font-weight);
	}
	
	#mamtrigbtn span{
		display:block;
	}

	#mamtrigbtn span:before {
		content: "\f7f3";
		font-family: var(--font-awesome);
		display: inline-block;
		font-size: 1em;
		margin-right: .5rem;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

}
/* Small devices (portrait tablets and large phones, 600px and up)
	Mobile menu will trigger at this point
*/
@media only screen and (min-width: 600px) and (max-width:768px) {
	:root{
		--site-max-width:100%;

	}
/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;


	--search-width: 1fr;
	--basket-width: 4em;
	--contact-width: auto;
	--user-width:auto;
	--vat-width:auto;
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
		grid-template-columns:  1fr 1fr .5fr .5fr;
		grid-template-areas:"vat vat vat user"
							"menulink logo contact basket "
							"menulink logo contact basket "
							"search search search search"
							"nav nav nav nav";
		grid-column-gap:0rem;
	}

	/* Strapline
	------------------------------------------------------- */
	#pt .art {
		text-align:center;
		font-size:.925em;
	}

	/* logo
	------------------------------------------------------- */
	#pt .pbnr {
		grid-area: logo;
		margin: 0;
		text-align:center;
	}
	
	#pt .pbnr img {
		max-width: 100px;
		margin:auto;
	}


	#pt .info li.icon {
		display: inline-block;
		margin:.5rem;
	}

	/* contact
	------------------------------------------------------- */
	#p48857089{
		grid-area:contact;
		color:var(--blue);
		text-align:right;
	}

	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

	/* user
	------------------------------------------------------- */
	#p48857090{
		text-align:right;
	}

	
	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing);
		text-align:center;
		margin:auto;

	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

	.home-hamburger .visible-xs {
		visibility: visible;
	}

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(2,1fr);
		grid-gap:0;
	}


	/* Center panel 
	------------------------------------------------------- */

	#pc .card  img {
	min-width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: auto;
}

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
	}


	#pl .filter{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}



	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}


/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas:
							"aboutus"
							"customersupport"
							"contact"
							"newsletter";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
	}



	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}



	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}


	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}


	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: auto / span 4;
	}
	
	.twoThirdWidth {
		grid-column: auto / span 8;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}

/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			
			"lines"
			"prioritydelivery"
			"standarddelivery"
			"totals"
			"suppchg"
			"voucher"
			"buttons"
			"prompane"
			"shipping";



		align-items:start;
		margin-bottom:4rem;
	}

	#pm .bskt .alllines{
	grid-area:lines;
	max-height:100%;
	padding-right:1rem;
	overflow-y:auto;
}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem"
		"qty qty netprice rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"continue"
							"summary"
							;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: var(--site-max-width);
	}



	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	


	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	
	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}

	#mamtrigbtn {
		vertical-align: middle;
		text-align: center;
		padding: var(--half-spacing) var(--spacing);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		cursor: pointer;
		font-family: var(--text-font);
		font-weight: var(--text-font-weight);
	}
	
	#mamtrigbtn span{
		display:block;
	}

	#mamtrigbtn span:before {
		content: "\f7f3";
		font-family: var(--font-awesome);
		display: inline-block;
		font-size: 1em;
		margin-right: .5rem;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

}
/* Extra small devices (phones, 600px and down)  */
@media only screen and (max-width: 600px) {
	:root{
		--site-max-width:100%;

	}

	/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns:  1fr 1fr auto auto;
		grid-template-areas:"vat vat vat user"
							"menulink logo contact basket "
							"menulink logo contact basket "
							"message message message message "
							"search search search search"
							"nav nav nav nav";
		grid-column-gap:0rem;
	}

	/* Strapline
	------------------------------------------------------- */
	#pt .art {
		text-align:center;
		font-size:.925em;
	}

	/* logo
	------------------------------------------------------- */
	#pt .pbnr {
		grid-area: logo;
		margin: 0;
		text-align:left;
	}
	
	#pt .pbnr img {
		max-width: 90px;
		margin:0;
		margin:auto;
	}


	#pt .info li.icon {
		display: inline-block;
		margin:.5rem;
	}

	/* contact
	------------------------------------------------------- */
	#p48857089{
		grid-area:contact;
		color:var(--blue);
		text-align:right;
	}

	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

	/* user
	------------------------------------------------------- */
	#p48857090{
		text-align:right;
	}

	
	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing);
		text-align:center;
		margin:.5em auto ;
		width:auto;
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

	.home-hamburger .visible-xs {
		visibility: visible;
	}

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(2,1fr);
		grid-gap:0;
	}


	/* Center panel 
	------------------------------------------------------- */

	#pc .card  img {
	min-width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: auto;
}



	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
		width:calc(100% - 2rem);
	}
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
		transition: var(--transition);
	}


	#pl .filter{
		height: 100%;
		width: 0%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"items sort-by "
		" filter filter";
	grid-gap: 1em;
	align-items: center;
}
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}


	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas:
							"aboutus"
							"customersupport"
							"contact"
							"newsletter";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
	}


	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

		#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}


	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 1;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 2;
	}
	.slider-searching{
		--swiffy-slider-item-count: 1;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

	/* product sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.prod .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}

	/* department sliders - code needs some tweaking */
	/* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */
	.carousel.dept .swiffy-slider{
		--swiffy-slider-item-count: 2;
	}



	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: auto / span 4;
	}
	
	.twoThirdWidth {
		grid-column: auto / span 8;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}





	/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			
			"lines"
			"prioritydelivery"
			"standarddelivery"
			"totals"
			"suppchg"
			"voucher"
			"buttons"
			"prompane"
			"shipping";



		align-items:start;
		margin-bottom:4rem;
	}

	#pm .bskt .alllines{
	grid-area:lines;
	max-height:100%;
	padding-right:1rem;
	overflow-y:auto;
}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem"
		"qty qty netprice rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

	#pm .bskt  .line .qty label{
		display:none;
	}

	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

	#pt.checkouttop .ext .pane{
		text-align:center;
	}


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"continue"
							"summary"
							;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: var(--site-max-width);
	}



	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	

/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	
	
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}

	#mamtrigbtn {
		vertical-align: middle;
		text-align: center;
		padding: var(--half-spacing) var(--spacing);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		cursor: pointer;
		font-family: var(--text-font);
		font-weight: var(--text-font-weight);
	}
	
	#mamtrigbtn span{
		display:block;
	}

	#mamtrigbtn span:before {
		content: "\f7f3";
		font-family: var(--font-awesome);
		display: inline-block;
		font-size: 1em;
		margin-right: .5rem;
	}


		
	#pmam .myacctmenu{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}


	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}

	
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 basecomponents 2023
	Last Updated : 04. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */
.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	margin: auto;
	padding: 0;
	border-radius: 0;
	max-height: 332px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid var(--border-color);
	z-index: 2000;
	background-color: var(--white)
}

.ui-autocomplete li.ui-menu-item {
	cursor: pointer;
	margin: 0;
	display: block;
}

.ui-menu-item a {
	display: grid;
	grid-template-columns: 3em 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
	align-items:center;
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}
.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */
#ewis h3 {
	font-weight: var(--heading-font-weight);
}

#ewis label {
	color: var(--text-heading-color);
}

a.lnk.ewisopen, a.lnk.ewis {
	display: block;
	height: auto;
	text-align: center;

	background-color:#dbd2ba;
	padding:.5rem;
	text-transform: capitalize;
	font-size:.625em;
}

.lnk.ewisopen:hover {
	text-decoration: underline;
	text-decoration-color:var(--orange);
}

/* -------------------------------------------------------------------------------------
=PopupDialog 
------------------------------------------------------------------------------------- */
#popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

#popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

#popupdialog .item img {
	grid-column: 1/-1;
	grid-row: 1;
	align-self: center;
	margin: auto;
}

#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

#popupdialog a {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

#popupdialog .item .title {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--text-heading-color);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

#popupdialog .item p.qty {
	grid-column: 1;
	grid-row: 3;
	text-align: right;
}

#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}

/* -------------------------------------------------------------------------------------
=Out of Stock, Direct Despatch
------------------------------------------------------------------------------------- */

.ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {
	width: 500px !important;
	max-width: 80vw;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing);
	background-color: var(--white);
	color: var(--orange);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

/*better use of classes would be nice! ;) */
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	--border-color: var(--button-border-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}
.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}

/* -------------------------------------------------------------------------------------
=Tooltips
------------------------------------------------------------------------------------- */
.helpicon {
	display: inline-block;
	position: absolute;
	top: .5rem;
	right: .5rem;
	text-align: left;
}

.helpicon img{
	max-width:1.5em;
}

.helpicon h3 {
	margin: var(--half-spacing) 0;
}

.helpicon .lefttooltip {
	min-width: 100px;
	max-width: 200px;
	top: 50%;
	right: 100%;
	margin-right: 1rem;
	transform: translate(0, -50%);
	padding: var(--half-spacing);
	color: var(--text-color);
	background-color: var(--white);
	font-weight: normal;
	font-size: .825em;
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	display: none;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
	display: block;
	line-height: 1;
}

.helpicon .lefttooltip i {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}

.helpicon .lefttooltip i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	background-color: #FFFFE0;
	border: 1px solid #DCA;
}



/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */
ul.accordion {
	grid-column: 1/-1;
	list-style: none;
}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size: 1.5em;
	cursor: pointer;


	border-radius: var(--border-radius);
	display: grid;
	grid-template-areas: "question expand";
	grid-gap: 1rem;
	grid-template-columns: 1fr 1rem;
	padding: 1rem;
	margin: 0;
	transition: var(--transition);
	font-family:var(--heading-font);
	background-color:var(--light-blue);
	color:var(--white);
	text-transform:capitalize;
	margin-bottom:1em;
}
.accordion .pane + .header{
	border-bottom: 1px solid var(--grey);
}

.accordion .header.current {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom:0;
}

.accordion .header img {
	grid-area: expand;
	cursor: pointer;
}

.accordion .header .showplus {}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
ul.accordion li.pane.first {}

ul.accordion li.pane {
	display: none;
	padding: 1em 2em;
	color:var(--black);
	background-color:var(--light-blue-alpha);
}
 ul.accordion li.pane br{}

ul.accordion li.pane p {
	font-size:1.2em;
}

ul.accordion li.pane ul {
	list-style-type: disc;
	margin-left: 1em;
	font-size:1.2em;
}

ul.accordion li.pane li {}

ul li.title {}


/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
.etailcopy {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem;
	padding:.5em;
}

p.etail {
	text-align:left;
	margin:0;
}

p.etail a {
}

p.copy {
	text-align:right;
	margin:0;
}

p.copy span {}




/* vat switch
------------------------------------------------------- */
.vatsw{
	grid-area:vat;
	text-align:left;
	font-size:.875em;
	padding:0 1rem;
}

[type=checkbox][role=switch] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin-top: -0.125em;
	margin-right: 0.375em;
	margin-left: 0;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	-webkit-margin-end: 0.375em;
	margin-inline-end: 0.375em;
	border-width: 1px;
	font-size: inherit;
	vertical-align: middle;
	cursor: pointer;	
	width: 2.25em;
	height: 1.25em;
	border-radius: 1.25em;
	line-height: 1.25em;
}

[type=checkbox][role=switch] {
	--background-color: var(--black);
	--border-color: var(--black);
	--border-width:3px;
	width: 2.25em;
	height: 1.25em;
	border: var(--border-width) solid var(--border-color);
	border-radius: 1.25em;
	background-color: var(--background-color);
	line-height: 1.25em;
	margin:0 .5em;
}

[type=checkbox][role=switch]:focus {}

[type=checkbox][role=switch]:checked {
	--background-color: var(--black);
	--border-color: var(--black);
}

[type=checkbox][role=switch]:before {
	display: block;
	width: calc(1.25em - (var(--border-width) * 2));
	height: 100%;
	border-radius: 50%;
	background-color: var(--white);
	content: "";
	transition: margin 0.1s ease-in-out;
}

[type=checkbox][role=switch]:checked:before {
	background-color: var(--white);
}

[type=checkbox][role=switch]:checked {
	background-image: none;
}

[type=checkbox][role=switch]:checked::before {
	margin-left: calc(1.125em - var(--border-width));
	-webkit-margin-start: calc(1.125em - var(--border-width));
	margin-inline-start: calc(1.125em - var(--border-width));
}



/*readmore stuff 
------------------------------------------------------- */
.more{
	margin:1em 0;
}

.more.noexpand{
	display:none;
	transition: var(--transition);
	
}

.showmorecss,
.showlesscss,
.showmore,
.showless{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:.825em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	color:var(--orange);
	text-transform:capitalize;
	transition: var(--transition);
	
}


/* Messages 
------------------------------------------------------- */
#mess {
	padding: 1em;
	margin: 1em 0;
}

li.info:not(.sa_name) {
	color: var(--info-color);
	list-style: none;
	margin-bottom:1rem;
}

li.info.req{
	color:var(--error-color)
}

li.info.acct{
	color:var(--error-color);
	font-size:2em;
}

li.info.acct a{
	margin-left:.5em;
	text-decoration:underline;
}

li.info img{
	display:inline-block;
}

li.info:not(.sa_name)::before {
	font-family: var(--font-awesome);
	content: '\f05a';
	margin-right: var(--half-spacing)
}

.warn {
	color: var(--error-color);
}

.reqmsg {
	color: var(--error-color);
	font-size: smaller;
}

.oos {
	color: var(--error-color);
}


/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	grid-column: 1/-1;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
.form img {
	width: auto !important;
	height: auto
}

.form ul {
	margin: 0;
	padding: 0;
}

.form ul li {
	list-style: none;
	display: block;
}

.form form {
	margin: auto;
}

.form .help {
	color: var(--help-color);
	font-size: small;
}

.form label {
	display: block
}

.form li select, .form li textarea, .form li input {
	margin-bottom: var(--spacing);
	max-width:100%;
}

.form li.reqmsg {
	color: var(--error-color);
}

.form li.header {
}

.form li.header h3{
	font-family:var(--text-font);
	font-size:1em;
}

.form label img {
	display: inline-block;
}

.form li.help, .form li.info {
	font-size: .825em;
}

.form form {}

.form form .submit {
	display: block;
}

.form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
	margin-bottom:1rem;
}

/* fix for checklists*/
.form li ul.check {
	font-weight:bold;
}
.form li ul.check input {
	margin-right: var(--half-spacing);
	width:auto;
}

/* fix for radio buttons */
.form ul.radio {}
.form li ul.radio input {
	margin-right: var(--half-spacing);
	width:auto;
}

/* fix for subscribe checkbox */
.form li.subscribe input,
.form li.thirdparty input{
	margin-right: var(--half-spacing);
	width:auto;
}

.form li.subscribe label,
.form li.thirdparty label{
	display: inline;
	font-weight: normal;
}

.exstreglnk, .exstfgtpwd {}

.exstreglnk h5, .exstfgtpwd h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}

/*image uploader */
.imgupl{
}

.imgupl img{
	margin:0;
	margin-right:auto;
}



/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */
.page_signin .form {
	margin: auto;
}

.page_signin .form label {
	display: block;
}

.page_signin .form input {
	width: calc(100% - 2em);
}

.page_signin .form input + img{
	display:inline-block;
	vertical-align:top;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */
.page_register .form {
	margin: auto;
}

.page_register .form label {
	display: block;
}

.page_register form input,
.page_register form select {
	width: calc(100% - 2em);
}

.page_register form img{
	display:inline-block;
	vertical-align:top;
}


/* Forgotten Password
------------------------------------------------------- */
.page_passwordrequest .form#pwrem {
	width: 50%;
	margin: auto;
}

.page_passwordrequest form input,
.page_register form select {
	width: calc(100% - 2em);
}

.page_passwordrequest form img{
	display:inline-block;
	vertical-align:top;
}

.page_passwordrequest form h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}



/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.ui-dialog, .ui-widget.ui-widget-content {
	z-index: 1002;
	border: 1px solid var(--border-color);
}

/* saartdialog*/
.ui-dialog.saartdialog,
.ui-dialog.helpartdialog{
	width: 80vw !important;
	max-width:640px;
}


.gwhelp{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"intro"
	"options";
}

.gwhelp .art{
	grid-area:intro
}

.gwhelp .art h2{
	text-align:center;
	color:var(--dark-blue);
	font-size:2em;
}


.gwhelp .gwitems {
	grid-area:options;
}

.gwhelp .gwitems .gw{
	grid-area:options;
	display:grid;
	grid-template-columns:4em 1fr;
	grid-column-gap:1em;
	grid-template-areas:"image title"
	"image price";
	align-items:center;
}

.gwhelp .gwitems img{
	grid-area:image;
}

.gwhelp .gwitems p{
	grid-area:title;
}

.gwhelp.gwitems span{
	grid-area:price;
}

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select, .ui-widget textarea, .ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */
.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 80vw !important;
	max-width: 640px;
	display: none;
}



/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd, #popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

@media only screen and (max-width: 768px) {
	.hoverbsktadd, #popupdialog {
		width: calc(var(--site-max-width) - 4em);
	}
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-areas:"image"
	"title"
	"qty"
	"price";
;
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-area:image;
	align-self: center;
	margin: 0 auto !important;
}

.hoverbsktadd h3, #popupdialog h3 {
	font-size: 1em;
	/* margin-bottom: 1em; */
}

.hoverbsktadd a, #popupdialog a {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-area:title;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--dark-blue);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	text-align: center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-area:qty;
	display:none;
}

.hoverbsktadd .item p.price, #popupdialog .item p.price {
	grid-area:price;
	color:var(--light-blue)
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1.25em;
	padding: .5rem 2rem;
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--white);
	border: 1px var(--checkout-button) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}