/*! 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 nav 2023
	Filename : swiffy.css
	Last Updated : 04. 04. 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 : 04. 12. 2025 
	Copyright :(c) 2025 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: poppins, sans-serif;
	--text-font-weight: 400;
	
	--heading-font: poppins, sans-serif;
	--heading-font-weight: 200;
	
	--sub-heading-font: poppins, sans-serif;
	--sub-heading-font-weight: 700;

	--button-font: poppins, 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 */
	--navy: #43575f;
	--blue:#009edf;
	--grey: #6c6c6c;
	--light-grey: #a2a2a2;
	--black: #3d3d3d;
	--white: #fff;
	--off-white: #f6f6f6;

	
	/*standard colors */
	--error-color: #B51E1E;
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: #2879ff;
	
	/*Section colors */
	--background-color: var(--white);
	--top-bar-color: var(--navy);
	--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(--white);
	--bottom-panel-text-color: var(--grey);
	--bottom-bar-color: var(--off-white);
	--bottom-bar-text-color: var(--grey);
	--bottom-panel-heading-color: var(--navy);
	
	--panel-color: var(--white);
	--dropdown-color: var(--white);
	--popout-color: var(--white);
	--form-color: var(--white);
	
	/*nav colors */
	--navbar-color: var(--white);
	--navbar-heading-color: var(--grey);
	--navbar-heading-weight: var(--heading-font-weight);
	--navbar-link-color: var(--grey);
	--nav-text-color: var(--grey);
	
	--navbar-active-color: var(--white);
	--navbar-active-text-color: var(--blue);
	
	--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(--off-white);
	--navbar-sidebar-text-color: var(--grey);
	--navbar-sidebar-hover-color: var(--off-white);
	--navbar-popout-color: var(--white);
	
	/*Buttons */

	--button-color: var(--blue);
	--button-text-color: var(--white);
	--button-border-color: var(--navy);
	--button-hover-text-color: var(--white);
	--button-hover-color: var(--navy);
	--button-hover-border-color: var(--navy);
	
	--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(--navy);
	--checkout-button-text: var(--white);
	
	--info-button: var(--info-color);
	--info-button-text: var(--white);
	--icon-color: var(--error-color);
	
	/*Borders */
	--border-color: var(--grey);
	--border-alt-color: var(--navy);
	--border-color-light: var(--light-grey);
	--border-radius: 2em;
	--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(--navy);
	--text-link-color-hover: var(--navy);
	--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: 400;
	--fprd-title-color: var(--navy);
	/*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: 4.7rem;
}

/* -------------------------------------------------------------------------------------
=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);
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.ui-dialog, .ui-widget.ui-widget-content {
	z-index: 1002;
	border: 1px solid var(--border-color);
}

.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;
}

/* -------------------------------------------------------------------------------------
=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(--navy);
}

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(--navy);
	border-radius: var(--border-radius);
	color:var(--navy);
	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(--navy);
}

/* -------------------------------------------------------------------------------------
=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(--navy);
	border-radius: 2rem;
	font-size: 16px;
	font-weight: 400;
	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 {}

/* -------------------------------------------------------------------------------------
=Forms DON'T try grid layout here - its too restrictive
------------------------------------------------------------------------------------- */

/* Defaults
------------------------------------------------------- */
.form {
	background-color: var(--form-color);
	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)
}

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

.form li.header {
	margin-bottom: 1.5em;
}

.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 {}
.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 {
	margin-right: var(--half-spacing);
	width:auto;
}

.form li.subscribe label {
	display: inline;
	font-weight: normal;
}

.exstreglnk, .exstfgtpwd {}

.exstreglnk h5, .exstfgtpwd h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}

/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */
.page_signin .form {
	width: 50%;
	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 {
	width: 50%;
	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;
}

/* -------------------------------------------------------------------------------------
=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;
}

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

/* -------------------------------------------------------------------------------------
=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;
}

/*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(--blue);
	text-transform:capitalize;
	transition: var(--transition);
	
}


/* responsive iframe - used in articles*/
.responsive-iframe {
	width: calc(100% - 2em);
	margin: 1em;
	display: inline-block;
	vertical-align: top;
	margin-top: 2em;
}
.responsive-iframe .artp,
.responsive-iframe {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

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

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	width: 100%;
	background-color:var(--off-white);
	color: var(--grey);
	text-align: center;
	font-size: .725rem
}

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

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


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


#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);
}

/*see media queries for other layouts layout */
#pt .ext {
	--logo-width: 171px;
	--search-width: 1fr;
	--basket-width: auto;
	--contact-width: auto;
	--user-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(--contact-width) var(--user-width) var(--basket-width) var(--spacer-width);
	grid-template-areas:  ".  logo search contact user basket ."
						  "nav nav nav nav nav nav nav"
						"cta  cta cta cta cta cta cta";
	color:var(--navy);
}

#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);
}


/* 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 {
	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";
	text-align: center;
	grid-gap:.5em;
	align-items: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;
	font-size:1.2em;
	font-weight:600;
}

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

/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	text-align: center;
	/* width: calc(100% - 4rem); */
	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);
	max-width: 75%;
	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:right;
}

#pt .bskt #mybskt{
	display:inline-block;
	margin-left:auto;
	background-color:var(--blue);
	color:var(--white);
	border-radius:2em;
	padding:.25em 1em;
	text-align:center;
	display:grid;
	grid-gap:.5em;
	grid-template-columns:auto auto;
	grid-template-areas:
		"icon value";
	align-items:center;
}

#pt .bskt #mybskt p{
	font-size:.925em;
	margin:0;
	padding:0;
	line-height:1;
	margin-block-start: 4px; 
}

/*items in basket */
#bsktitems{
	display:none !important;
}

#bsktvalue{
	grid-area:value;
}

#bsktvalue span{
	display:none;
}

#pt .bskt #mybskt a.btn{
	grid-area:icon;
	display:inline-block;
	outline:none;
	padding:0;
	border:none;
	margin:0;
}

#pt .bskt #mybskt a.btn:hover{
	background-color:transparent;
}

#pt .bskt #mybskt a.btn img{
	margin:0;
}

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

/* contact
------------------------------------------------------- */
#p49283075{
	grid-area:contact;
	color:var(--navy);
}

#p49283075 li{
	display:inline-block;
}

/* CTA (swiffy)
------------------------------------------------------- */

.sticky#pt #a126451713{
	display:none;
}
#pt #a126451713 {
	grid-area: cta;
	align-self:end;
	background-color:var(--navy);
	color:var(--white);
	padding:.5rem;
	font-size:.825em;
}

#pt #a126451713  .artp{
	width:var(--site-max-width);
	margin:auto;
	text-align:center;
}

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

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

#pc .card{
        position: relative;
}

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

#pc .imgcont.card .card{
	position: absolute;
	top: 0%;
	left: 0%;
	/*max width of 1 half of fake max width */
	max-width:calc(var(--site-max-width) / 2);
	height:100%;
	z-index: 1;
	text-align: left;
	background-color:rgba(246, 246, 246, .8);
	display:grid;
	align-content:center;
}

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

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

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

picture.card {
    position: relative !important;
    display: block !important;
    max-width: 100% !important;
}

/* -------------------------------------------------------------------------------------
=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 */
	min-height:600px
}

/* 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);
	min-height: 50vh;
}

/* 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(--navy);
}

#pf .ext {
	--spacer-width: calc((100% - var(
	--site-max-width)) / 2);
	background-color: var(--navy);
	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 
------------------------------------------------------------------------------------- */
#a126451717{
	grid-area:news-intro;
	color:var(--white);
	display:grid;
	grid-template-areas:"image text";
	align-items:center;

}

#a126451717 h3{
	font-weight:200;
	color:var(--white);
}

#a126451717 b,
#a126451717 strong{
	color:var(--blue);
	font-weight:500;
}

#pf .ext .news {
	grid-area:subscribe;
	margin:2em 0;
	border-left:1px white solid;
	padding-left:2em;

}

#pf .ext .news  h3 {
	color: var(--white);
	font-weight:500;
}

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

#pf .ext .news label {
	grid-area:intro;
	color: var(--white);
	font-size:.825em;
}

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

#pf .ext .news input#subscribe {
	grid-area:subscribe;
	padding:0 2em;
}

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

#pb .ext {
	background-color: var(--bottom-panel-color);
	margin: 4em auto;
	position: relative;
	/* grid-column-gap: 1rem; */
	display: grid;
	align-items: start;
	max-width: var(--site-max-width);
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas:
		" quicklinks help account contact";
}


#p48955403 {
	grid-area: quicklinks;
}

#p48955404 {
	grid-area: help;
}

#p48955405 {
	grid-area: account;
}

#a126386177 {
	grid-area: contact;
}

#a126386177 .imgcont{
	margin-bottom:1em;
}

#a126386177 .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;
}

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

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

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

#a126386177 .contact .phone,
#a126386177 .contact .email{
	font-weight:500;
}

#a126386177 .contact .phone:before{
	content:"\e11b";
}
#a126386177 .contact .email:before{
	content:"\e10c";
}

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

#a126386177 img{
	margin:0;
	margin-right:auto;
}

/* 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);
	border-bottom:1px solid var(--border-color);
	padding:.5em 0;
	
}

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

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

ul.inline li {
	display: inline-block;
	padding-right: .5em;
}

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

#pbf .ext {}

#pbf .info,
#pbf .fullWidth {
	display: block;
	text-align: center;
}

#pbf .info li {
	display: inline-block;
	margin: .5em;
}

/* 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
}

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display:inline-block;
	width:50%;

}

@media only screen and (max-width: 600px) {
	#pbf .etailcopy {
		display:block;
		text-align:center;
		margin:auto;
	}
}

#pbf .info,
#pbf .fullWidth {
	display: block;
	text-align: center;
}

#pbf .info li {
	display: inline-block;
	margin: .5em;
}

p.etail {
	display: inline-block;
	margin-left:.5rem;
}

p.etail  a{
	/* color:var(--red); */
}
p.copy {
	display: inline-block;
}
p.copy span {}

/*fa payment logos */
#pbf #a141295616{
	display:inline-block;
	width:50%;
	vertical-align:middle;
	text-align:right;

}


@media only screen and (max-width: 600px) {
#pbf #a141295616{
	display:block;
	text-align:center;
	margin:auto;
}
}

#pbf #a141295616 li{
	vertical-align:middle;
}

#pbf #a141295616 i{
		font-size:2em;
}

#pbf #a141295616  .fa-apple-pay,
#pbf #a141295616 .fa-google-pay{
	font-size:2.5em;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=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;
}

/* -------------------------------------------------------------------------------------
=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.25em;
	cursor: pointer;
	border: 1px solid var(--navy);
	border-radius: var(--border-radius);
	display: grid;
	grid-template-areas: "question expand";
	grid-gap: 1rem;
	grid-template-columns: 1fr 2rem;
	padding: 1rem;
	margin: 0;
	margin-bottom: 1rem;
	transition: var(--transition);
	font-weight:400;
	color:var(--navy);
	text-transform:capitalize;

}

.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
------------------------------------------------------- */
#pm ul.accordion li.pane.first {}

#pm ul.accordion li.pane {
	display: none;
	background-color: var(--off-white);
	border: 1px solid var(--navy);
	border-top:0;
	
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	padding: var(--spacing);
	margin-bottom: 1rem;
}

#pm ul.accordion li.pane p {}

#pm ul.accordion li.pane ul {
	list-style-type: disc;
	margin-left: 1em;
}

#pm ul.accordion li.pane li {}

#pm ul li.title {}

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

/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog #pm{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	grid-auto-rows: min-content;
}

/* Blog previews
------------------------------------------------------- */
#pm .blog:not(.art){
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
	"title"
		"blogpreview"
	"date"
	"readmore";
	padding-bottom:1em;
}



#pm .blog:not(.art) a.title{
	grid-area:title;
	font-family:var(--heading-font);
	padding:1rem 0;
	font-size:1.25em
}

#pm .blog:not(.art) p.date{
	grid-area:date;
	font-size:.825em;
	padding:.5rem 0;
}

#pm .blog:not(.art) a.more{
	grid-area:readmore;
	margin: 0em;
	/* padding:.5rem 2rem; */
	font-family:var(--heading-font);
	/* font-size:1.125em; */
}

/*blog summary text - not wanted for this client */
#pm .blog:not(.art) .artp{
	/* display:none; */
	grid-area:blogpreview;
}

/* Blog Posts
------------------------------------------------------- */
.art.blog{
	
}

.art.blog h2{

}
.art.blog .imgcont{
	margin:2em 0;
}

.art.blog .imgcont img{
	border-radius:var(--border-radius);
}

/* Blog navigation buttons
------------------------------------------------------- */
.blogBtns,
.blogPageBtns{
	grid-column:1/-1;

	display:grid;
	grid-template-areas:"prev next";

}

.blogBtns a.prev,
.blogPageBtns a.prev{
	grid-area:prev;	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-right:auto;
	padding:.5rem 2rem;
}

.blogBtns a.next,
.blogPageBtns a.next{
	grid-area:next;
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-left:auto;
	padding:.5rem 2rem;
}

/* -------------------------------------------------------------------------------------
=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;
}

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */
.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	width: 275px !important;
	margin: auto;
	padding: 0;
	z-index: 999999 !important;
	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: 32px 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
}

.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: -webkit-left;
	text-transform: capitalize;
	font-size:.625em;
}

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

/* -------------------------------------------------------------------------------------
=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);
}

.hoverbsktadd .item, #popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-column: 1/-1;
	grid-row: 1;
	align-self: center;
	margin: auto;
}

.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 {
	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;
}

.hoverbsktadd .item p.qty, #popupdialog .item p.qty {
	grid-column: 1;
	grid-row: 3;
	text-align: right;
}

.hoverbsktadd .item p.price, #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(--navy);
	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: 0;
	text-align: left;
}

.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;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=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(--navy);
}

.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(--navy);
}

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

.fsclsdiv .fsclsspn {
	display: inline-block;
	border: 1px solid var(--navy);
	color: var(--black);
	background-color: var(--navy);
	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(--navy);
	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(--navy);
	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;
	margin-bottom:1em;
}

.depttree h4.tagline {}

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

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

.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: 1/1;
	object-fit: cover;
	margin: auto;
}

.depttree li 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;
	padding: .5rem;
	align-self: end;
}

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

.fprd {
	position: relative;
}

.fprd:hover {}

.fprd {
	display: grid;
	border:1px solid var(--navy);
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto var(--fprd-title-height) auto 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 image"
		"title title title"
		"client-ref client-ref client-ref"
		"selling-price unit-price carton"
		"trade-price buy-pane buy-pane "
		"spacer spacer spacer";
	align-items:center;
}

/*non members and carousel see different layout*/
.nonmem .fprd,
.swiffy-slider .fprd{
	/* border:0; */
	grid-template-columns: 1fr;
	grid-template-rows:auto var(--fprd-title-height) auto  1fr;
	grid-template-areas:
		"image "
		"title"
		"selling-price"
		"spacer";
	padding-bottom:.5em;
}

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

.nonmem .fprd .price,
.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;
}
.nonmem .fprd .price label,
.swiffy-slider .fprd .price label{
	color: var(--text-sub-heading-color);
	/* display:none; */
}

/* 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 {
	margin: 0 !important;
	object-fit: cover;
	width: 100%;
}

.fprd .fprdimg img:hover {}

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

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

#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-size:.825em;
	font-weight: 400;
}

.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;
}

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

.fprd .price {
	grid-area: selling-price;
	margin-left: .5rem;
	border:1px solid var(--border-color);
	border-right:none;
	border-top-left-radius:2em;
	border-bottom-left-radius:2em;
	text-align:center;
}
.fprd .price label {
	color: var(--text-sub-heading-color);
}

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

.fprd .trade {
	margin-top:.5em;
	margin-bottom:.5em;
	grid-area: trade-price;
	margin-left:.5em;
	align-self:center;
	font-size:1.25em;
}

.fprd .trade label {
	display:inline-block;
	margin-right:.25em;
	display:none;
}

.fprd .trade h6 {
	display:inline-block;
	font-weight: 700;
	color:var(--blue)
}

.fprd .trade h6 span {
	display:none;
}

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

.fprd .offer label {}

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

.fprd .offer h6 span {
	display:none;
}

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

.fprd .saving label {}
.fprd .saving h6 {}

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

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
	text-align:center;
	border:1px solid var(--border-color);
}

.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;
	margin-right: .5rem;
	text-align: center;
	border:1px solid var(--border-color);
	border-left:none;
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
	text-align:center;
}

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

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

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref {
	grid-area: client-ref;
	padding:0 .5em;
	text-align: left;
	color: var(--navy);
	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 img {
	display: block;
	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-right: .5em;
	margin-top:.5em;
	margin-bottom:.5em;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap:.5em;
}

.fprd form select {}

.fprd form label {
	/*seems daft to display a label for an input that is obvious*/
	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: 700;
	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;
	border-radius:2em;
	width:2.5em;
	padding:0;
}

.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:2em;
	font-size:.825em;
	padding:.5em 1em
}

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	align-self:center;
	margin: 0;
	margin-right: .5em;
	margin-top:.5em;
	margin-bottom:.5em;
}

/* 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:100%;
	grid-template-areas:"gallery";
}

#pi .main .left {
	grid-area: left;
	display:grid;
	grid-template-columns:minmax(20%, 1fr)
		minmax(40%, 1fr)
		minmax(40%, 1fr);
	grid-template-areas:"client-ref barcode barcode-outer"
	"product-title product-title product-title"
	"product-description product-description product-description"
	"product-buy-pane product-buy-pane product-buy-pane"
	"product-tabbed-description product-tabbed-description product-tabbed-description";
}

.nonmem #pi .main .left {
	grid-area: left;
	display:grid;
	grid-template-columns:minmax(20%, 1fr)
		minmax(40%, 1fr)
		minmax(40%, 1fr);
	grid-template-areas:"client-ref barcode barcode-outer"
	"product-title product-title product-title"
	"product-description product-description product-description"
	"membersignin membersignin membersignin"
	"product-buy-pane product-buy-pane product-buy-pane"	
	"product-tabbed-description product-tabbed-description product-tabbed-description";
}
.nonmem #pi .pibuy + .pibuy{
	grid-area:membersignin;
	border-bottom:0;
}

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

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

/*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 {
	background-color:var(--off-white);
	border:1px solid var(--border-color);
	padding:.5em 1em;
	text-align:center;
}

#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
------------------------------------------------------- */

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

/* 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;
	padding:0 1em ;
	padding-top:1em;
	border:1px solid var(--border-color);
	border-top:0;
	border-bottom:0;
}

/* 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: 3;
}

/*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 0 !important;
}

#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;
	width: 100%
}

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

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

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

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

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	border:1px solid var(--border-color);
	border-top:0;
	padding:0 1em;
	grid-area: product-buy-pane;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"selling-price unit-price carton"
		"stock stock stock"
		"trade-price buy-pane buy-pane "
		"quantity-in-basket quantity-in-basket quantity-in-basket"
		"save-for-later . ."
		"bspresponse bspresponse bspresponse";
	align-items:center;
}


.nonmem #pi .pibuy{
	grid-template-areas:
		"selling-price selling-price selling-price"
		"save-for-later . ."
		"bspresponse bspresponse bspresponse";
	grid-row-gap:.5em;
	grid-area:membersignin;
	border-top:0;
	border-bottom:0;
	
}

.nonmem #pi .pibuy #bspsubmit{}

.nonmem #pi .pibuy + .pibuy{
	grid-area:product-buy-pane;
	display:block;
	border-top:0;
	border-bottom:1px solid var(--border-color);
	padding-bottom:1em;
	
}

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

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

#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;
	border:1px solid var(--border-color);
	border-right:none;
	border-top-left-radius:2em;
	border-bottom-left-radius:2em;
}

.nonmem #pi .pibuy .price {
	grid-area: selling-price;
	text-align:center;
	border:1px solid var(--border-color);
	border-radius:2em;
}

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

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

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

/*unit price */
#pi .pibuy .unit{
	grid-area:unit-price;
	text-align:center;
	border:1px solid var(--border-color);
}

#pi .pibuy .qty {
	grid-area:carton;
	text-align:center;
	border:1px solid var(--border-color);
	border-left:none;
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
}

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

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

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

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

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

#pi .pibuy p.p_stock {}


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

.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;
	margin-bottom:1rem;
	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;
	margin-bottom: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 - Checkout v5
------------------------------------------------------------------------------------- */
/*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 voucher"
		"lines buttons"
		"lines ."
		"prioritydelivery prompane"
		"standarddelivery prompane"
		". prompane"
		"shipping shipping";
	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 {}
.bskt .empty .header {}
.bskt .empty .total {}

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

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

#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;
	max-height: 620px;
	padding-right: 1rem;
	overflow-y: auto;
}

#pm .bskt .line {
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;
	--image-width: 4rem;
	--description-width: 1fr;
	--qty-width: auto;
	--netprice-width: auto;
	--rem-width: auto;
	--total-width: 100px;
	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width)  var(--total-width) var(--rem-width);
	grid-template-areas: "icon desc qty price rem" 
						 "icon desc . . . " 
						 "icon netprice . . ."
						 "icon skuselect . . . ";
	border-bottom: 1px solid var(--border-color);
	grid-column-gap: 1rem;
}

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

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

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

#pm .bskt .line .prodinfo .surcharge {
	font-weight: 700;
}

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

#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(--navy);
	font-style: normal;
	border: 1px var(--navy) solid;
	padding: .25rem;
	border-radius: .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
}



#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 {
	background: var(--white);
	border: 1px solid var(--border-color);
	padding: var(--half-spacing);
	font-family: monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right: 0;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left: 0;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-family: monospace;
	font-size:1em;
}

/* 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: center;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: center;
}

/* out of stock messages */
.oos {
	color: var(--error-color);
}

/* 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;
	font-weight: 400;
	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;
}

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

.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 {
	font-weight: 700;
}

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

.shipping form input, .shipping form h4 {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--half-spacing);
}

.shipping form h4 {}

.shipping ul li.delivery {}

.shipping ul li.delivery.deliveryto {
	display: block;
}

/*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;
	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 {
	grid-area: totals;
	text-align: center;
	padding: var(--spacing);
	display: grid;
	grid-template-areas: "totals" "subtotals" "discount";
	background-color:var(--off-white);
}

.bskttotals .total {
	grid-row: 1;
}

.bskttotals .total span {
	grid-area: totals;
	font-size: 2rem;
	font-weight: var(--heading-font-weight);
}

.bskttotals .total label {
	display: block;
	margin-bottom: var(--spacing)
}

.bskttotals .total span {
	display: block;
	margin-bottom: var(--half-spacing);
}

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

.bskttotals .subtotal+.subtotal {
	/* grid-area:discount; */
	display: grid;
}

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

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

/* Vouchers
------------------------------------------------------- */
.vouchentryaccord, .vouchentry {
	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:1px solid var(--navy);
	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;
	border:1px solid var(--navy);
	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-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(--navy);
	border-color: var(--navy);
	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(--navy);
	border-color: var(--navy);
	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: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;
	font-weight: 700;
	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(--navy)
}

#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;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: .825rem
}

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

.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-weight: 400;
	font-size: .825rem
}

/* -------------------------------------------------------------------------------------
=New Checkout Process - replaces Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

#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 .";

	
}

#ptf .ext {
	padding:.25rem;
	display: grid;
	grid-template-areas:
		". message .";

}

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

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

#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;
}

#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(--light-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) 
------------------------------------------------------- */
.page_delivery h3, .page_checkout h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 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;
}

.page_delivery form input, .page_checkout form input, .page_delivery form select, .page_checkout form select {
	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 .form li .pclup, .page_checkout .form li .pclup {}
.page_delivery .form li .pclup label, .page_checkout .form li .pclup label, .page_delivery .form li .pclupdel label, .page_checkout .form li .pclupdel label {}
.page_delivery .form li label[for="txtPostCodeLookup"], .page_checkout .form li label[for="txtPostCodeLookup"], .page_delivery .form li label[for="ddlMultiAddress"], .page_checkout .form li label[for="ddlMultiAddress"] {
	display: none;
}

.page_delivery .form li .pclup input, .page_checkout .form li .pclup input, .page_delivery .form li .pclupdel input, .page_checkout .form li .pclupdel input {
	width: auto;
	display: inline-block;
}

.page_delivery .form li .pclup input.submit, .page_checkout .form li .pclup input.submit, .page_delivery .form li .pclupdel input.submit, .page_checkout .form li .pclupdel input.submit {}
.page_delivery .form li .pclup span.or, .page_checkout .form li .pclup span.or, .page_delivery .form li .pclupdel span.or, .page_checkout .form li .pclupdel span.or {
	display: none;
}

.page_delivery .form li .pclupdel, .page_checkout .form li .pclupdel {}
.page_delivery form[name="back"] {
	display: none !important;
}

/* 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: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.page_shipping select {
	width: 100%;
}

.page_shipping .service, .page_shipping .shippinginfo, .page_shipping .deliveryinfo {
	margin: 1rem 0;
}

.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 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "header header"
						 "payment summary"
						 ". summary"
						 "details summary";
	grid-column-gap: 4rem;
	position: relative;
}

.page_payment #pm .bdcb{
	display:none;
}

.page_payment #pm .bt {
	grid-area: header;
	text-align: center;
	margin-bottom: 1rem
}

.payoptsform{
	grid-area:payment;
}



.page_payment h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}

.termsagreemsg {
	margin-bottom: 1em;
	text-align: center;
}

.termsart {
	margin-bottom: 1em;
	text-align: center;
}

/*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; */
	/* position: absolute; */
	/* bottom: 0; */
	/* right: 0; */
	/* width: calc(50% - 2rem); */
}

.page_payment input[type="submit"] {
	/* color:var(--text-color); */
	display: block;
	padding: 1rem 0;
	width: 100%;
}

.confirmorder {
	grid-area: details;
}



/* Payment
------------------------------------------------------- */
.page_payment{}

.termsagreemsg{
	margin-bottom:1em;
	text-align:center;
}

.termsart{
	margin-bottom:1em;
	text-align:center;
}

.payopts{
	display:grid;
	grid-template-columns:1fr;
	grid-gap:1em;
	/* grid-template-rows:50px; */
	grid-template-areas:
		"dna"
		"invoice"
		"google"
		"apple"
		"paypal";
}

.payopts > div {
	display:inline-block;
	/* margin-left:1em; */
}

.payopts .paypal submit:hover,
.payopts .paypal .btn:hover {
	 border:0;
}

.payopts .paypal{
	background:none;
	padding:0;
	border:0;
	border-radius:0;
	max-height:42px;
	overflow:hidden;
	align-content:center;
	align-items:center;
	display:grid;
}

.payopts .paypal.btn:hover{
	border:0;
}

/* dna payments */
.pt_debitcreditcard {
	grid-area:dna;
}

.pt_debitcreditcard a{
	display:block;
	border-radius:0;
	color:var(--white);
	font-weight:600;
	height: 46px;
	padding:0;
	align-content:center;
	border:0;
	border-radius:4px;
}

.pt_debitcreditcard a:hover{
	border:none;
}

.pt_debitcreditcard a:before{
	content:'\f09d';
	font-family:var(--font-awesome);
	margin-right:.5em;
}


/* invoice */
.pt_invoice  {
	grid-area:invoice;
}

.pt_invoice  a{
	display:block;
	border-radius:0;
	color:var(--white);
	font-weight:600;
	height: 46px;
	padding:0;
	align-content:center;
	border:0;
	border-radius:4px;
}

.pt_invoice  a:hover{
	border:none;
}

.pt_invoice  a:before{
	content:'\f570';
	font-family:var(--font-awesome);
	margin-right:.5em;
}

/* google pay */
.pt_googlepay {
	grid-area:google;
}
#googlepaybtncontainer {
	height: 46px;
	border-radius:4px;
}


/* apple pay */
.pt_applepay  {
	 grid-area:apple;
}
#applepaybtncontainer {
	height: 46px;
}

/* paypal */
.pp_button {
	grid-area:paypal;
	height: 46px;
	background-color:#f0c74b;
	align-content:center;
	border-radius:4px;
}

.pp_button img {
	grid-area:paypal;
}


.dnapayments.payoptentry {
	background-color:var(--white);
	padding:1em;
	margin-bottom: 1em;
}

@media only screen and (max-width: 600px) {
.dnapayments.payoptentry {

	grid-row: 2;
}
}

#submitpaymentpanel{
display:block;
	border-radius:0;
	color:var(--white);
	font-weight:600;
	height: 46px;
	padding:0;
	align-content:center;
	border:0;
	border-radius:4px;
	background-color:green;
}

.hostedfield {
	height:35px;
	border-color:var(--border-color);
	border-radius: .25rem;
	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: auto;
	border-width:1px;
	border-style:solid;
	margin-bottom:.5em;
}

.dna-payments-hosted-field-focused {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.dna-payments-hosted-field-valid {
  border-color: #28a745;
}
.dna-payments-hosted-field-valid.dna-payments-hosted-field-focused {
  box-shadow: 0 0 0 0.2rem rgb(40, 167, 69, 0.25);
}
.dna-payments-hosted-field-invalid {
  border-color: #dc3545;
}
.dna-payments-hosted-field-invalid.dna-payments-hosted-field-focused {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

#threedsecurecontainer{
	min-width: 515px;
}



/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	align-self: start;
}

.bsktsum h4 {
	display: none;
}

.bsktsum .lines {
	overflow-y: scroll;
	max-height: 200px;
	background-color:var(--off-white);
	padding: 1rem;
	padding-left: .5rem;
}

.bsktsum .lines .line {
	align-items: start;
	display: grid;
	grid-template-columns: 64px 1fr auto 10ch;
	grid-template-areas:
		"img desc qty price";
	grid-column-gap: 1rem;
}

@media only screen and (max-width: 600px) {
	.bsktsum .lines .line {
		align-items: start;
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"img desc "
			"qty price";
		grid-column-gap: 1rem;
	}
}

.bsktsum .lines .line .unitprice {
	display: none;
}

/* 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.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:before{
	content:"x"
}

.bsktsum .lines .qty label {
	display: none;
}

.bsktsum .lines .price {
	grid-area: price;
	font-size:.825em;
	text-align: right;
}

.bsktsum .totals {
	margin-top: 1rem;
	text-align: right;
	font-weight:700;
	font-size:.825em;
}

.bsktsum .totals label{ 
	font-weight:400;
}

.bsktsum .totals .subtotal {
	display: grid;
	grid-template-areas:"label value";
	grid-template-columns:1fr 100px;
	grid-gap:.5em;
}

.bsktsum .totals .subtotal:last-child {
	color:var(--blue);
	display:block;
	text-align:center;
	font-size:2em;
	padding:1em;
}

.bsktsum .totals .subtotal:last-child label {
	font-weight: 400;
	display:inline-block;
	margin-right:.5em;
	color:var(--grey)
}

.bsktsum .totals .subtotal:last-child span {
	font-weight: 700;
}

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn, .page_checkout .contbtn {}
.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{}

.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);
	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 */

#mamtrigbtn {
	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;
}

.#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-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
}

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

*/
.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);

	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 : 12. 06. 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: .875rem;
}

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(6,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 small devices (phones, 600px and down) */ 
@media only screen and (max-width: 600px) {
	:root{
		--site-max-width:100%;

	}

	/* Top panel 
	------------------------------------------------------- */

#pt.sticky{
  position: initial;
  top: 0;
  width: 100%;
  z-index:initial;
}

/* 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:0;
}

.stickyHeader .filter {
	top:0;
}

#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);
}

	.sticky#pt #a126451713{
	display:initial;
}




	
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: var(--menuwidth) auto var(--logowidth) auto auto;
		grid-template-areas:
			"logo logo logo logo logo "
			"menulink contact contact user basket "
							"search search search search search"
							"nav nav nav nav nav"
							"cta cta cta cta cta";
	}

	#pt .pbnr {
		grid-area: logo;
		margin: 1rem auto;
		text-align:center;
	}

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing)
	}

	/*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;
	}

		/*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;
	}

	/* Center panel 
	------------------------------------------------------- */
	#pc .card  img {
		min-width: 100%;
		aspect-ratio: 1/1;
		object-fit: cover;
		margin: auto;
	}

	#pc .imgcont.card .card{
		max-width:calc((var(--site-max-width) / 4) * 3);
	}

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


	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
		width:calc(100% - 2rem)
	}

	.pmwide{
		margin-right:1rem;
	}

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

	#pmid{
		display:grid;
		/*added this as without it some layouts seemed broken on the member pages */
		grid-template-columns:100%;
	}

	#pmid.page_buy {
		display:block;
	}

	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width: 100%;
		grid-row:end;
	}

	.recent_item{
		grid-template-columns:1fr 1fr;
		grid-gap:1em;
	}

	/* left panel filter with toggle - only works if it is ONLY filter on the left panel
	------------------------------------------------------- */
	#pl.filter {
		width:0;
	}

	#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) - 2em);
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}


	/* Footer panel 
		------------------------------------------------------- */
	#pf .ext {
		grid-template-columns: 100%;
		grid-gap: var(--spacing);
		grid-auto-flow: dense;
		align-items: center;
		grid-template-areas:
			"prom-content "
			"news-intro"
			"subscribe ";
	}

	#pf .ext .news {
		grid-area:subscribe;
		margin:0;
		/* width: calc(100% - 15em); */
		border-left:none;
		padding:1em;
	}

	#pf .ext .news  h3{
		border-top:1px white solid;
		padding-top:1em;
	}

	
	#pf .ext .arts{
		grid-template-columns: 100%;
		grid-gap: var(--spacing);
		grid-auto-flow: dense;
		padding:1em;
		grid-template-areas: "intro"
		"cta1"
		"cta2"
		"cta3"
		". ";
	
		border-bottom:10px rgb(67 87 95 / 80%)solid;
	}
	
	
	#pf .ext .news form {
	text-align: left;
	align-self: center;
	display:grid;
	grid-template-areas:"intro"
	"email"
		"subscribe";
	grid-template-columns:1fr;
	grid-gap:1em;
}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:100%;
		grid-template-areas: " quicklinks"
			"help"
			"account"
			"contact";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		margin:1em;
		
	}


		/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(1, 1fr);
	}
	#sr {
		grid-template-columns: repeat(1, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(1, 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"
			". . netprice  . ";
		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;
	}
	

	/* Signin/guest pane
	------------------------------------------------------- */
	
	.page_checkoutsignin {}
	
	
	.checkoutsignin .signin{
		width:100%;
	}

	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"summary"
							"continue";
	}


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin: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: 100%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"payment "
			"details"
			"summary"

			"cont";
		grid-column-gap:4rem;
		position:relative;
	}


	.page_payment #pm  form.payoptsform .submitcontainer{
		grid-area:pay;
		position:relative;
		width:100%;
	}

	.page_payment  input[type="submit"]{
		color:var(--text-color);
		display:block;
		margin:1rem 0;
		width:calc(var(--site-max-width) );
	}

	.page_payment #pm .art .promise{
		display:none;
	}


	/* member pages */



	/* menu panel
	------------------------------------------------------- */
	/*account menu panel*/
	#pmam {
		width: 0;
	}
	

	#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;
	}


		/* Sign In - these conflict with new checkout forms, need to revisit
	------------------------------------------------------- */
	.page_signin .form {
		width: 100%;
	
	}
	
	
	/* Register/update details - need to add classes to all the input fields
	------------------------------------------------------- */
	.page_register .form {
		width: 100%;
	
	}
	
	
	
	/* Forgotten Password
	------------------------------------------------------- */
	.page_passwordrequest .form#pwrem {
		width: 100%;
	}
	
}
/* 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.sticky{
	  position: initial;
	  top: 0;
	  width: 100%;
	  z-index:initial;
	}
	
	.stickyHeader #pc {
		padding-top:0;
	}
	
	.stickyHeader .filter {
		top:0;
	}
	
	#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);
	}
	
	.sticky#pt #a126451713{
		display:initial;
	}
	
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: var(--menuwidth) auto var(--logowidth) auto auto;
		grid-template-areas:
			"logo logo logo logo logo "
			"menulink contact contact user basket "
							"search search search search search"
							"nav nav nav nav nav"
							"cta cta cta cta cta";
	}

	#pt .pbnr {
		grid-area: logo;
		margin: 1rem auto;
		text-align:center;
	}

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin-bottom:var(--half-spacing)
	}

	/*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;
	}

	/*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;
	}

	/*toggle nav display */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index:1001;
	}

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

	/*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(3,1fr);
		grid-gap:0;
	}

	/* Center panel 
	------------------------------------------------------- */

	#pc .card  img {
		aspect-ratio: 3/2;
	}

	#pc .imgcont.card .card{
		/*max width of 1 half of fake max width */
		max-width:calc((var(--site-max-width) / 4) * 3);
	}

	/* full width panel 
	------------------------------------------------------- */
	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
		margin:0 1rem;
		width:calc(100% - 2rem)
	}
	#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);
	}

	/*unclear why this was set to display grid... without 100% (can't use 1fr) breaks on the member pages */
	#pmid{
		display:grid;
		grid-template-columns:100%;
	}

	#pmid.page_buy {
	display:block;
	}

	/* left panel
	------------------------------------------------------- */
	#pl {
		width: 100%;
		grid-row:end;
	}

	.recent_item{
		grid-template-columns:1fr 1fr;
		grid-gap:1em;
	}

	/* left panel filter with toggle - only works if it is ONLY filter on the left panel
	------------------------------------------------------- */
	#pl.filter {
		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;

	}

	/* Footer panel 
		------------------------------------------------------- */

#pf .ext {

	grid-template-columns: 1fr;
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	align-items: center;
	grid-template-areas:
		"prom-content"
		"news-intro"
		"subscribe";
}

	
#pf .ext .arts{
	grid-template-columns: 1fr;
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	padding:1em;
	grid-template-areas: "intro"
	"cta1"
	"cta2"
	"cta3"
	". ";

	border-bottom:10px rgb(67 87 95 / 80%)solid;
}


	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr 1fr;
		grid-template-areas: " quicklinks help"
			"account contact";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		margin:1em;
		
	}


		/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(1, 1fr);
	}
	#sr {
		grid-template-columns: repeat(1, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(1, 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"
			". . netprice  . ";
	
		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;
	}
	

	/* Signin/guest pane
	------------------------------------------------------- */
	
	.page_checkoutsignin {}
	
	
	.checkoutsignin .signin{
		width:75%;
	}

		/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		grid-template-columns:1fr;
		grid-template-areas: "address"
							"summary"
							"continue";
	}


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin: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: 100%;
	}

	/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}

	.page_payment #pm {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"payment "
			"details"
			"summary"
			"cont";
		grid-column-gap:4rem;
		position:relative;
	}


	.page_payment #pm  form.payoptsform .submitcontainer{
		grid-area:pay;
		position:relative;
		width:100%;
	}

	.page_payment  input[type="submit"]{
		color:var(--text-color);
		display:block;
		margin:1rem 0;
		width:calc(var(--site-max-width) );
	}

		.page_payment #pm .art .promise{
		display:none;
	}

	/* member pages */

	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		padding:0 1em;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: auto;
	}
	/* menu panel
	------------------------------------------------------- */

/*account menu panel*/
#pmam {
	width: 0;
}
	

#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;
	}

	#pmam .myacctmenu.showmyacctmenu{
		display:block;
	}

	.mamclsdiv .mamclsspn{
	display:inline-block;
	}

	#fstrigbtn{
		display:block;
	}

	.fsclsdiv .fsclsspn{
		display:inline-block;
	}


		/* Sign In - these conflict with new checkout forms, need to revisit
	------------------------------------------------------- */
	.page_signin .form {
		width: 100%;
	
	}
	
	
	/* Register/update details - need to add classes to all the input fields
	------------------------------------------------------- */
	.page_register .form {
		width: 100%;
	
	}
	
	
	
	/* Forgotten Password
	------------------------------------------------------- */
	.page_passwordrequest .form#pwrem {
		width: 100%;
	}
	
}
/* 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: 171px;
	--search-width: 1fr;
	--basket-width: auto;
	--contact-width: auto;
	--user-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(--contact-width) var(--user-width) var(--basket-width) var(--spacer-width);
	grid-template-areas:  ".  logo search contact user basket ."
						  "nav nav nav nav nav nav nav"
						"cta  cta cta cta cta cta cta"
}

	#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(5,1fr);
		grid-gap:0rem;
	}

		/* Center panel 
	------------------------------------------------------- */


	#pc .imgcont.card .card{
		position: absolute;
		top: 0%;
		left: 0%;
		/*max width of 1 half of fake max width */
		max-width:calc((var(--site-max-width) / 4) * 3);
		height:100%;
		z-index: 1;
		text-align: left;
		background-color:rgba(246, 246, 246, .8);
		display:grid;
		align-content: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(2, 1fr);
	}


	/* Footer panel 
		------------------------------------------------------- */

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr 1fr;
		grid-template-areas: " quicklinks help"
			"account contact";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		margin: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
	------------------------------------------------------- */
/* CTA sliders */
.slider-cta {
	--swiffy-slider-item-count: 2;
}
	.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";
	
		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);
	}

	/* member pages */

	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 1rem);
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: auto;
	}
	
	/* menu panel
	------------------------------------------------------- */
/*account menu panel*/
#pmam {
	width: 0;
}
	

	#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;
	}
	
}
/* 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%;
	}

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of half of fake max width */
		max-width:calc(var(--site-max-width) / 2);
	}

	/* 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 {}

	/* 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";
	
		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);
	}
	
}
/* 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;
	 }
}
/* 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;
	}
}