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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .003;
	-ms-filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 swiffy 2023
	Filename : swiffy.css
	Last Updated : 04. 04. 2025
	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-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;
}

.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;
	list-style: none;
	width:100%;
}

.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: 10px;
	height:10px;
	border: .4rem solid transparent;
	border-radius: 50%

	
}

.slider-nav {
	position: absolute;
	top: 0;
	left: 0.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));
	/* overflow:hidden; */
}

.slider-nav::before {
	position: absolute;
	content: "";
	/* padding: .5rem 0; */
	width: 3rem;
	height: 3rem;
	pointer-events:all;
	background-color:var(--white);
}

.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
	}
}
/** 
 * Owl Carousel v2.2.1   
 * THIS IS A BASE FILE - overrides should be in sitepanes.css in the relevant place! 

 * 
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
/* ------------------------------------------------------------------------------------
	SCREEN - v6 Select Catering 2025 
	Filename : sitepanes.css 
	Last Updated : 25. 03. 2025
	Copyright :(c) 2025 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
		=Definitions
		=Reset
		=Normalise

		=Page 
		=Typography 	
		=Grid Layout
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Breadcrumb
		=Swiffy Slider
		=Blog

		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Deptsingle  		** not in right place **
		=Subdepartment tree ** not in right place ** 
		=FeaturedProducts 
		=ProductPage 
		=Super Attributes
		=Basket *** needs work ***
		=Checkout Process **** needs works ***
		=MyAccount
			NEW my account menu
		=ConfirmationPage
		=Sitemap  
		=Client Specific Stylings 
		



/* -------------------------------------------------------------------------------------
=Header 
------------------------------------------------------------------------------------- */

/* Subheader
------------------------------------------------------- */
		

/* -------------------------------------------------------------------------------------	
=Definitions
------------------------------------------------------------------------------------- */
:root{

	/*standard colors */
	--error-color: #B51E1E;
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: #2879ff;

	--black: #011627;
	--white: #fff;
	--off-white: #f9f9f9;
	
	/* client color scheme */

	--black: #000000;
	--white: #fff;
	--off-white: #F2F3F5;
	
	--red: #dc381d;
	--green:#5eb20a;
	--grey:#a4a4a4;
	--dark-grey: #555555;
	--light-grey:#d1d1d1;
	

	--grey-alpha:rgb(164 164 164 / .7);
	--light-grey-alpha:rgb(242 243 245 / .7);
	--red-alpha: rgb(220 56 29 / .7);


	--highlight-color:var(--red);
	--highlight-text-color:var(--white);
	
	--site-max-width: 1400px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: calc(var(--site-max-width) / 5);
	--right-panel-width: calc(var(--site-max-width) / 5);
	--line-height: 1.5;
	--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(--text-font-weight);
	
	/* fonts */
	--text-font: 'Catamaran', sans-serif;
	--text-font-weight: 400;
	
	--heading-font:  'Montserrat', sans-serif;
	--heading-font-weight: 600;
	
	--sub-heading-font: 'Montserrat', sans-serif;
	--sub-heading-font-weight: 700;

	--button-font:'Montserrat', sans-serif;
	--button-font-weight: 600;
	
	--font-awesome:"Font Awesome 6 Pro";
	--font-size: 16px;
	
	/* grid info */
	--grid-spacing-vertical: var(--spacing);
	--grid-spacing-horizontal: var(--spacing);
	
	/* shadows */
	--box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	--transition: 0.25s ease-in-out;
	
	/*Section colors */
	--background-color: var(--white);
	
	--top-bar-color: var(--off-white);
	--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(--off-white);
	--footer-panel-alt-color: var(--grey);
	
	--bottom-panel-color: var(--dark-grey);
	--bottom-panel-heading-color: var(--white);
	--bottom-panel-text-color: var(--white);
	
	--bottom-bar-color: var(--black);
	--bottom-bar-text-color: var(--white);
	
	--panel-color: var(--white);
	--dropdown-color: var(--white);
	--popout-color: var(--white);
	--form-color: var(--white);

	
	/*nav */
	--navbar-dropdown-text:var(--heading-font);
	--navbar-heading-font:var(--heading-font);
	--navbar-heading-font-size:1em;

	--navbar-color: var(--red);
	--navbar-heading-color: var(--white);
	--navbar-heading-weight: 400;
	--navbar-link-color: var(--black);
	--navbar-icon-color: var(--white);
	
	--navbar-active-color: var(--white);
	--navbar-active-text-color: var(--red);
	
	--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(--red);
	--navbar-dropdown-text-color: var(--white);
	--navbar-dropdown-text-size: .875rem;
	
	--navbar-sidebar-color: var(--off-white);
	--navbar-sidebar-text-color: var(--black);
	--navbar-sidebar-hover-color: var(--red);
	--navbar-popout-color: var(--white);
	
	/*Buttons */
	--button-color: var(--red);
	--button-text-color: var(--white);
	--button-border-color: var(--red);
	--button-hover-text-color: var(--white);
	--button-hover-color: var(--red);
	--button-hover-border-color: var(--red);
	
	--alt-button-color: var(--off-white);
	--alt-button-text-color: var(--grey);
	--alt-button-border-color: var(--grey);
	--alt-button-hover-text-color: var(--grey);
	--alt-button-hover-color: var(--grey);
	--alt-button-hover-border-color: var(--grey);
	
	--checkout-button: var(--green);
	--checkout-button-text: var(--white);
	
	--info-button: var(--info-color);
	--info-button-text: var(--white);
	--icon-color: var(--error-color);
	
	/*Borders */
	--border-color: var(--light-grey);
	--border-alt-color: var(--grey);
	--border-color-light: var(--light-grey);
	--border-radius: .25em;
	--border-width: 1px;
	
	/*Text */
	--color: var(--black);
	--text-color: var(--dark-grey);
	--text-color-light: var(--light-grey);
	--text-heading-color: var(--black);
	--text-sub-heading-color: var(--grey);
	--text-link-color: var(--red);
	--text-link-color-hover: var(--red);
	--text-link-color-focus: transparent;

	--text-decoration:none;
	--text-decoration-color: var(--red);
	
	/* featured product element fprd*/
	--fprd-color: var(--off-white);
	--fprd-title-font: var(--sub-heading-font);
	--fprd-title-font-weight: var(--font-weight);
	--fprd-title-color: var(--black);

	/*swiffy nav options */
	--swiffy-slider-nav: var(--red);
	--swiffy-slider-item-color:var(--grey);
	--swiffy-slider-active-item-color:var(--red);
}

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


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

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

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

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

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

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

a {
	background-color: transparent;
}

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

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

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

small {
	font-size: 80%;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

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

.imgcont {}

.imgcont img {
	display: block;
}

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

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

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

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

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

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

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

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

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

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

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

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

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

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

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

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

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



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

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

ol {
	margin-left: .5em;
}

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

p {
	overflow-wrap: break-word;
}

b, strong {
	font-weight: 700;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

a, [role=link] {
	--background-color: transparent;
	outline: none;
	background-color: var(--background-color);
	color: inherit;
	-webkit-text-decoration: var(--text-decoration);
	text-decoration: var(--text-decoration);
	text-decoration-color:var(--text-decoration-color);
	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;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em{
	font-style:normal;
	font-family:var(--text-font);
	font-weight:200;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
}

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

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

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

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

h5 {
	font-size: 1.125em;
	--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 {
	--text-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;
	border: 1px solid var(--border-color);
}

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

/* Articles
------------------------------------------------------- */

/*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;
	font-size: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 {
	font-size:1.2em;
	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;
}

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

/* Buttons 
------------------------------------------------------- */
.submit,
a.btn {
	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(--button-hover-text-color);
	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;
	font-size: 16px;
	font-weight: 400;
	padding: var(--half-spacing);
	width: auto;
	border-width: 1px;
	border-style: solid;
}

td a.btn {
	display: block;
}

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


/* -------------------------------------------------------------------------------------
=Tables 
------------------------------------------------------------------------------------- */

/* Defaults for tables 
------------------------------------------------------- */

:root{

	--table-caption-color:var(--black);
	--table-header-color:var(--dark-grey);
	--table-header-text-color:var(--white);
	--table-color:var(--light-grey);
	--table-zebra-color:var(--white);
	
}


/* Defaults 
------------------------------------------------------- */
table {
	background-color:var(--table-color);
	border-collapse:collapse;
	width:100%;
}


/*set table headers */
th {
	font-family: var(--heading-font);
	background:var(--table-header-color);
	color:var(--table-header-text-color);
	text-align:left;
}

th,
td,
caption {
	padding: 1rem;

	text-align:left;
}

caption{
	text-align:left;
	background:var(--table-caption-color);
	color:var(--table-header-text-color);
	text-transform:uppercase;
	font-weight:700;
}

tr:nth-of-type(2n){
	background:var(--table-zebra-color);
}


/* new table stuff 
------------------------------------------------------- */
@media (max-width:650px){
	th{
		display:none
	}
	td{
		display:grid;
		grid-template-columns:15ch auto;
		padding:.5rem 1rem;


	}

	td:before{
		content:attr(data-celltitle) " ";
		font-family: var(--heading-font);
		text-transform:capitalize;
		text-align:left;;
	}

	td:first-child{
		padding-top:2rem;
	}

	td:last-child{
		padding-bottom:2rem;
	}
}

/* quotation details */

.quotation a.btn{
	grid-column:1/-1;
	margin-bottom:1em;
}

/*hidden until code corrected */
.quotationlines picture {
	display:none;
}

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

.header .artp{
	position: relative;
	text-align: center;
}
.header .artp:after
{
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: 0px;
  width: 100%;
  height: 4px;
  background: var(--red);
}

.header h3{
	  position: relative;
	  display: inline-block;
	  padding: .5em;
	  background: #fff;
	  z-index: 9;
}



/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */


#pm .pmind {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	/* grid-auto-flow: dense; */
	/*don't put margin here*/
}

/*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,
.hpLink img,
.quarterWidth img,
.twoThirdWidth img,
.fullWidth picture,
.halfWidth picture,
.halfWidthDbl picture,
.thirdWidth picture,
.hpLink 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;
}

.halfWidth {
	grid-column: auto / span 6;
}

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

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

.threeQuarter{
	grid-column: auto / span 9;
}

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

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

.fullWidth,
.halfWidth,
.quarterWidth,
.threeQuarter,
.thirdWidth,
.twoThirdWidth {
	position: relative;
	border-radius: var(--border-radius);
	/* border: 1px solid var(--border-color); */
}

.fullWidth img,
.halfWidth img,
.quarterWidth img,
.threeQuarter img,
.thirdWidth img,
.twoThirdWidth img{
	width:100%;
	
}

.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 {
	grid-column: 1;
}

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

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

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

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

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

/* Custom classes - should become standard too
------------------------------------------------------- */
.deptHeader{
	grid-column:1/-1;
	position:relative;
	align-content:center;
	align-items:center;
	place-content:center;
	margin-bottom:1em;

}
.deptHeader .toi{
	color:white;	place-self:center;
	position:absolute;
	top:50%;
	left:50%;
	translate:-50% -50%;
}

.deptHeader .toi h3{
	color:var(--white);
	margin:0;
	font-size:3em;
}

.deptHeader img{
	width:auto;
	height:auto;
	/*set a max height to avoid it being too humongous on larger displays */
	max-height:200px;
	width: 100%;
	object-fit: cover;
	margin:auto;
}



/*custom overlay class used on articles */
.imgcont.overlay{
	text-align:center;
	display:grid;
	align-items:center;
	transition:var(--transition);
}

.imgcont.overlay div.overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:grid;
	align-items:center;
	background-color:var(--light-grey-alpha);
}

.imgcont.overlay div.overlay:hover{
	background-color:var(--red-alpha);
}

.imgcont.overlay div.overlay a,
.imgcont.overlay div.overlay p,
.imgcont.overlay div.overlay h1,
.imgcont.overlay div.overlay h2,
.imgcont.overlay div.overlayh3,
.imgcont.overlay div.overlay h4,
.imgcont.overlay div.overlay h5{
	/*remove transition effect on text */
	transition:none;
}

.imgcont.overlay div.overlay:hover a,
.imgcont.overlay div.overlay:hover p,
.imgcont.overlay div.overlay:hover h1,
.imgcont.overlay div.overlay:hover h2,
.imgcont.overlay div.overlay:hover h3,
.imgcont.overlay div.overlay:hover h4,
.imgcont.overlay div.overlay:hover h5{
	color:white;
	transition:none;
}

.imgcont.overlay div.overlay a{
}





.blog .fullWidth,
.blog .halfWidth,
.blog .quarterWidth,
.blog .thirdWidth,
.blog .twoThirdWidth {
	position: relative;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	border: 0;
	/* added to ensure carousel elements work right in firefox */
	display: grid;
	grid-template-columns: 100%;
}

.blog .form {
	grid-column: 1/-1;
}

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

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

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	width: 100%;
	background-color:var(--top-bar-color);
	border-bottom:1px var(--dark-grey) solid;
	color:var(--dark-grey);
	text-align: center;
}

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

#ptf .ext {
	/* padding:.25rem; */
	display: grid;
	align-items:center;



	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	--logo-width:150px;
	--search-width:400px;
	--icons-width:3em;
	--quick-order-width:200px;
	--basket-width:300px;
	background-color: var(--top-panel-color);

	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 0rem;
	grid-template-columns: var(--spacer-width) var(--logo-width) var(--search-width) var(--quick-order-width) var(--basket-width) var(--icons-width) var(--icons-width) var(--spacer-width);
	
	grid-template-areas:
		". vat vat . account account account  .";
}





#a137527296 {
	grid-area:account;
	text-align:left;
}

#a137527296 h1,
#a137527296 h2,
#a137527296 h3,
#a137527296 h4,
#a137527296 h5{
	margin:0;
	font-size:1em;
	font-weight:normal;
	color:var(--red);
}

#ptf .info ul{
}

#ptf .info li{
	display: inline-block;
	vertical-align:middle;
	margin: var(--half-spacing);
	text-align: center;
}

#ptf .info .icon a.img {
	grid-area: icon;
	display: inline-block;
	vertical-align:middle;
	margin-right:.5rem;
}

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

#ptf .info .icon a.lnk {
	display:inline-block;
	vertical-align:middle;
}




/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */

:root{
	--basket-width:250px;
}

#pt {
	width: 100%;
	margin: auto;
	background-color: var(--top-panel-color);
}

/*see media queries for other layouts layout */
#pt .ext {

	/* spacer width is used on wider view ports to keep top panel central */
	--spacer-width: calc((100% - var(--site-max-width)) / 2);
	--logo-width:150px;
	--search-width:400px;
	--icons-width:3em;
	--quick-order-width:200px;
	--basket-width:300px;
	
	background-color: var(--top-panel-color);

	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 0rem;
	grid-template-columns: var(--spacer-width) 
		var(--logo-width) 
		var(--search-width) 
		var(--quick-order-width) 
		var(--basket-width) 
		1fr
		var(--icons-width) 
		var(--icons-width) 
		var(--spacer-width);
	
	grid-template-areas:
		". logo search quickorder  basket . favourite account  ."
		"nav nav nav nav nav nav  nav nav nav";
	align-items: center;
}

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

/* defaults */
#pt .info li {
	list-style: none;
	display:block;
}

#pt li.pipe {
	display: none;
}

/* fake search toggle, hidden by default - requires an article creating as the COMS implementation doesnt work! */
#a137527297{
	display:none;
}


/* logo
------------------------------------------------------- */
#pt .pbnr {
	grid-area: logo;
	padding: 2em 0;
}

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

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


/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	text-align: center;
	font-size: 16px;
	padding:0;
	margin:0 1em;
	/* align-self:start; */
	/* width:calc(100% - 2em); */
}

#pt .search form {
	/* width: calc(100% - 2.5rem); */
	/* max-width: 75%; */
	background-color:var(--white);
	border-radius:var(--border-radius);
	border:1px var(--border-color) solid;
}

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

#pt .search input#searchbox {
	width: calc(100% - 2.5rem);
	/* max-width: 75%; */
	background-color:transparent;
	margin: auto;
	font-size: 16px;
	padding: .5rem .5rem;
	border:none;
}

#pt .search input#searchbox:focus-visible{
	border:none;
	outline:none;
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	width: auto;
	/* height: 48.2px; */
	margin: 0;
	padding: .5rem .75rem;
	background-color:transparent;
	color:var(--dark-grey);
	font-family: var(--font-awesome);
	border: none;
}


/* QuickOrder
------------------------------------------------------- */
#pt .qord{
	grid-area:quickorder;
	text-align: left;
	margin:auto;
	position:relative;
}

#pt #qobtnview{
	grid-area:quickorder;
	text-align: left;
	margin:auto;
	position:relative;
	cursor:pointer;
	display:grid;
	grid-template-areas:
		"image text";
	align-items:center;
	grid-gap: .5em;

	color:var(--red);
}

#pt #qobtnview img{
	grid-area:image;
	display:inline-block;
	max-width: 3.1em;
}

#pt #qobtnview span{
	grid-area:text;
	display:inline-block;
	font-family:var(--heading-font);
	margin:0;
	padding:0;
}
.qord.hidequickord{
	display:none;
}

.qord {
	position: fixed;
	top: 50%;
	left: 50%;
	/* padding:var(--spacing); */
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	z-index: 100;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	display:grid;
	grid-template-areas:
		"title"
		"form";
	align-items:center;
}

.qord h3{
	grid-area:title;
	background-color:var(--red);
	color:var(--white);
}
.qord .qordcontainer{
	grid-area:form;
	display:grid;
	align-items:center;
	grid-template-areas:
		"qoref-label qoref"
		"qoqty-label qoqty"
		"message message"
		"submit submit";
}

#qoresponse{
	grid-area:message;
}

.qord label[for="qoref"]{
	margin-right:.5em;
	margin-bottom:.5em;
	grid-area:qoref-label;
	text-align:right;
}
.qord #qoref{
	grid-area:qoref;
	margin-bottom:.5em;
	width:7em;
}

.qord label[for="qoqty"]{
	margin-right:.5em;
	margin-bottom:.5em;
	grid-area:qoqty-label;
	text-align:right;
}

.qord #qoqty{
	grid-area:qoqty;
	margin-bottom:.5em;
	width:7em;
}

.qord input#qosubmit{
	grid-area:submit;
}

.qord .qordcontainer .qohidebtn{
	position:absolute;
	top:.7em;
	right:1em;
	/* background-color:white; */
	/* border-radius:50%; */
}

.qord .qordcontainer .qohidebtn:hover{
	cursor:pointer;
}

.qord .qordcontainer .qohidebtn img{
	height:1em !important;
	width:auto !important;
}


/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-area:basket;
	border: var(--border-width) solid var(--border-color);
	border-radius:var(--border-radius);
}

#pt .bskt img{
	margin:0;
}

#mybskt p,
#mybskt h4 {
	font-weight: 400;
	padding: 0;
	margin: 0;
}

#pt .bskt #mybskt{
	padding: 0.25em;
	text-align:center;
	align-items:center;
	display:grid;
	grid-column-gap:.5em;
	grid-template-columns: 2em auto 1fr;
	grid-template-areas:
		"icon items value"
		" icon freeshipping freeshipping";;
}

#pt .bskt #mybskt p{
	color:var(--grey);
	font-size:.725em;
}

/*items in basket */
#bsktitems,
a.bsktitems{
	grid-area:items;
}

#bsktitems span{
	/* font-family:var(--text-font); */
	color:var(--grey);
	font-weight:normal;
	margin-right:.5em;
}

#bsktvalue,
a.bsktvalue{
	grid-area:value;
}

#bsktvalue span{
	font-family:var(--text-font);
	color:var(--grey);
	font-weight:normal;
	margin-right:.5em;
}

#pt .bskt #mybskt a.btn,
#pt .bskt #mybskt img.btn{
	background-color:transparent;
	grid-area:icon;
	/* display:inline-block; */
	outline:none;
	padding:0;
	border:none;
	margin:0;
	/* display:none; */
}

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

#pt .bskt #mybskt img.btn,
#pt .bskt #mybskt a.btn img{
	margin:0;
	filter:opacity(.3);
}

#pt .bskt h4{
	grid-area:freeshipping;
	font-family:var(--text-font);
	color:var(--grey);
	font-size: .725rem;
	text-align: left;
	margin:0;
	align-self:end;
}

/* Icons
------------------------------------------------------- */
#p52723714,
#p52396033{
	grid-area:favourite;
	
}

#p52723715,
#p52461568{
	grid-area:account;
}

#p52723715 .icon a.img,
#p52723714 .icon a.img,
#p52396033 .icon a.img,
#p52461568 .icon a.img{
	grid-area:icon;
	display:inline-block;
	background-color:var(--light-grey);
	border-radius:50%;
	padding: .5em;
}

#p52723715 .icon .img img,
#p52723714 .icon .img img,
#p52396033 .icon .img img,
#p52461568 .icon .img img{
	display:block;
	max-height:1.5rem;
	width:auto;
}

#p52723715 ul,
#p52723714 ul,
#p52396033 ul,
#p52461568 ul{
	/* display:grid; */
	align-items:center;
}

#p52723715 li.icon,
#p52723714 li.icon,
#p52396033 li.icon,
#p52461568 li.icon {
	text-align:center;
}

#p52723715 a.lnk,
#p52723714 a.lnk,
#p52723715 .sout,
#p52723714 .sout,
#p52396033 a.lnk,
#p52461568 a.lnk,
#p52396033 .sout,
#p52461568 .sout{
	display:none
}

/* client specific 
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc {
	margin: auto;
	display: flow-root;
	color:var(--red);
	text-align: center;
	margin:.5em 0;
}


/*top ctas */
#a137723904{
	/* padding:.25em; */
	text-align:left;
}

#a137723904 .artp{
	width:var(--site-max-width);
	max-width:100%;
	margin:auto;
}

#a137723904 button,
#a137723904 .slider-indicators{
	display:none;
	
}
#a137723904 li{
	text-align:center;
		background-color:var(--light-grey-alpha);
	align-content:center
}

#a137723904 .container{
	display:inline-block;
}

#a137723904 .card{
	display:grid;
	grid-template-areas:"title image"
	"text image";
	grid-template-columns: auto 2em;
	grid-column-gap:1em;
	align-content:center;
	align-items:center;
	margin:auto;
	padding:.5em;
}

#a137723904  .card h5{
	grid-area:title;
	font-size:1em;
	font-weight:400;
	margin:0;
	text-align:left;
}

#a137723904  .card p{
	grid-area:text;
	margin:0;
	font-size:.725em;
	font-family:var(--heading-font);
	text-align:left;
}

#a137723904  .card picture{
	grid-area:image;
	margin:0;
	/* margin-left:1em; */
	text-align:left;
}

#a137723904  .card img{
	max-width:2em;
	margin:0;
	filter:invert();
}



/*hp main banner */
/*main home page banner - uses aspect ratio change in media queries */
.mainBanner {
		position:relative;
}
.mainBanner a.img img{
	width:auto;
	height:auto;
	/*set a max height to avoid it being too humongous on larger displays */
	max-height:400px;
	aspect-ratio: 1900/700;
	width: 100%;
	object-fit: cover;
	margin:auto;
}

.mainBanner .toi{
	position: absolute;
	top: 50%;
	left: 0%;
	/* (full view width - site max width )/ 2 */
	left:calc( (100vw - var(--site-max-width)) / 2);
	/*max width of 1 half of fake max width */
	max-width:calc(var(--site-max-width) / 2);

	min-width:calc(var(--site-max-width) / 3);
	
	transform: translate(0%,-50%);
	padding: 2em 1em;
	z-index: 100;
	text-align: left;
	background-color:rgba(242, 238, 227,0.8);
}

.mainBanner h2{
	font-size:2rem;
	color:var(--black);
}

.mainBanner h3{
	color:var(--red);
	font-size:1.25rem;
}

.mainBanner p{
	font-size:.825rem;
}

.mainBanner .review-container{
	text-align:left;
	margin-bottom:1rem;
}

.mainBanner .review-container img{
	margin:0;
}


/* client specific 
------------------------------------------------------- */

.sidebyside .imgcont{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-areas:"text image";
}

.sidebyside .imgcont picture{
	grid-area:image;
	height:100%;
}

.sidebyside .imgcont img
{
	height:100%;
	max-height:500px;
	aspect-ratio: 3/1;
	width: 100%;
	object-fit: cover;
	margin:auto;
}

.sidebyside .imgcont .slideCont{
	grid-area:text;
	background-color:var(--red);
}

.sidebyside .bordered{
	border:2px var(--white) solid;
	color:var(--white);
	padding:2em;
	/* padding-right:4em; */
	height: calc(100% - 6em - 2px);
	margin:1em;
	text-align:right;
	background-image:url('https://www.tigerfeetdirect.com/tigerfeet/i/art/footerbg.webp');
	background-position:bottom left;

}

.sidebyside .centerbox{
	align-content:center;
	display:grid;
	height:100%;
}



.sidebyside .centerbox h3{
	font-size:2em;
	font-family:var(--text-font);
}

.sidebyside .centerbox h3 em{
	font-weight:600;
}

.sidebyside .centerbox h2{
	font-size:6em;
}

.sidebyside .centerbox p{
	margin-bottom:1em;
}

.sidebyside .centerbox a{
	display:inline-block;
	border:2px var(--white) solid;
	padding:1em 2em;
}


/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#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;
	min-height: 85vh;
}

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

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

/* left panel - when filter is in use
------------------------------------------------------- */
#pl {
	width: 0px;
    transition: var(--transition);
}


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



/* wide panel (used if left or right panels exist 
------------------------------------------------------- */
.pmwide {
	background-color: var(--main-panel-color);
	width:var(--site-max-width);
	display: inline-block;
	vertical-align: top;
	margin: 0;
	margin-left:auto;
}

.pmstd{
	width:var(--site-max-width);
}


/*no idea what #fs if for*/
#pl + #fs +.pmwide,
#pl  +.pmwide{
	/* margin-left:0; */
	margin-right:auto;
}

/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	margin: auto;
	margin-top:1em;

	background-color:var(--footer-panel-color);
	color:var(--dark-grey);
}


#pf .artp h1,
#pf .artp h2,
#pf .artp h3,
#pf .artp h4{
	color:var(--red)
}

#pf .artp h1 em,
#pf .artp h2 em,
#pf .artp h3 em,
#pf .artp h4 em{
	color:var(--grey)
}


#pf .ext {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	max-width: var(--site-max-width);
	width:100%;
	padding:0;
	padding-top: 2em;
	padding-bottom: 2em;
}

#pf .carousel{
	margin-bottom:2em;
}


#pf .arts {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	/*don't put margin here*/
}


#pf .imgcont {
	outline: 2px solid var(--white);
	outline-offset: -1em;
	position:relative;
}

#pf .imgcont div{
	background-color:var(--red);
	font-family:var(--heading-font);
	padding:1rem 1.5rem;
	display:inline-block;
	position:absolute;
	bottom:0;
	right:0;
	color:var(--white);
	font-size:1.5em;
}


/* About us Aricle */
#pf #a131104768 .artp {
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:start;
	grid-column-gap:3em;
	margin:2em 0;
}

#pf #a131104768 .artp h2{
	grid-column:1/-1;
}




/* Newsletter 
------------------------------------------------------- */
#pf .ext .news {
	grid-area:subscribe;
	text-align:center;
	width:50%;
	margin:auto;
}

#pf .ext .news  h3 {
	margin-bottom:1em;
}

#pf .ext .news form {
	text-align: left;
	align-self: center;

}

.news_input_container{
	display:grid;
	grid-template-areas:"email subscribe";
	grid-template-columns:1fr auto;

}

#pf .ext .news label {
	display:none;
}

#pf .ext .news input#email {
	grid-area:email;
	padding: 1em;
	border:1px var(--border-color) solid;
	border-radius:var(--border-radius);
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:0;
}

#pf .ext .news input#subscribe {
	grid-area:subscribe;
	padding:1em 3em;
	border-radius:var(--border-radius);
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	color:var(--white);
	background-color:var(--red);
	border-color:var(--red);
}



/* client specific 
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */

#pb {
	width: 100%;
	margin: auto;
	/* margin-top: 6em; */
}

/* Info defaults 
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .info li.icon img {
	display: none;
}

#pb .info h3 {
	font-size: 1.5em;
	/* font-family:var(--text-font); */
	text-transform:capitalize;
	margin-bottom: 2.5rem;
	color: var(--bottom-panel-heading-color);
}

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


#pb .info ul {
	padding: 0;
}

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

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


/* Article defaults 
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .art li.icon img {
	display: none;
}

#pb .art h2 {
	font-size: 1.5em;
	/* font-family:var(--text-font); */
	text-transform:capitalize;
	margin-bottom: 2.5rem;
	color: var(--bottom-panel-heading-color);
}

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

/* client specific 
------------------------------------------------------- */
#pb .ext {
	--spacer-width: calc((100% - var(
	--site-max-width)) / 2);
	background-color: var(--bottom-panel-color);
	margin: 0 auto;
	padding-top: 2em;
	padding-bottom: 2em;
	position: relative;
	display: grid;
	grid-gap:2em;
	align-items: start;
	grid-template-columns: var(--spacer-width) repeat(4, 1fr) var(--spacer-width);
	grid-template-areas:
		". customerservice about terms details ."
		". payment payment payment details .";
	color:var(--white);
}

#p26214401,
#p40992781{
	grid-area: customerservice;
}

#p26181641,
#p41091072{
	grid-area: about;

}

#p26181642,
#p41091082{
	grid-area: terms;

}

#a63471619{
	grid-area: details;
}

#a63471619 li{
	list-style:none;
	margin:0 1em;
}

#a63471619 li img{
	max-width:50px;
}

#a123731968{
	grid-area:payment;
	align-self:end;
}
#a123731968 h2{
	display:none;
}

#a123731968 .imgcont{
	display:inline-block;
	margin-right:1em;
}

#a123731968 .imgcont img{
	max-height:40px;
	width:auto;
}


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

#pbf .ext {
	--spacer-width: calc((100% - var(
	--site-max-width)) / 2);
	margin: 0 auto;
	position: relative;
	display: grid;
	/* padding-top:1em; */
	/* padding-bottom:1em; */
	text-align:center;
	color:var(--white);
}

#pbf p{
	margin:0;
}


/* cookie popup
------------------------------------------------------- */
#pbf .cookie {
	position: fixed;
	bottom: 0%;
	left: 0%;
	width: 100%;
	z-index: 1000;
	background: var(--black);
	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
}

/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.page_home .bdcb,
.home .bdcb {
	display: none;
}

.bdcb {
	width: var(--site-max-width);
	margin: auto;
	text-align:left;
	grid-column:1/-1;
}

.crumb {
	display: block;
	/* text-align: center; */
	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);
	font-size: .825rem;
	padding: 0;
	margin: 0;
	display: inline-block;

}

/*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(--font-awesome);
	color: var(--text-color);
	font-size: .6rem;
	font-weight: normal;
	content: "\f054";
	margin: .5rem;
}

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

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

.bdcb h1 {}


/* -------------------------------------------------------------------------------------
=OwlCarousel Overrides
------------------------------------------------------------------------------------- */
/* base settings */
.carousel {
    position: relative;
	/*these are needed to prevent firefox messing things up - otherwise we need to use specific sizes for grid layouts */
	max-width:100%;
	grid-column: 1/-1;
}

.owl-stage-outer {}

/* this should be the title for the carousel */
.carousel h2 {}

.carousel:hover {
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

.noNav .owl-controls {
    display: none;
}

.owl-controls {
    text-align: center;
}

.owl-nav {}

.owl-dot {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.owl-dot span {
    display: inline-block;
    vertical-align: top;
    width: 0.825em;
    height: .825em;
    margin: .5em;
    border-radius: 50%;
}

.owl-dot.active span, .owl-dot:hover span {
}

.owl-theme .owl-controls {
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	pointer-events:none;
}

.owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-nav .owl-prev, .owl-nav .owl-next {
    position: absolute;
    font-size: 2em;
	font-weight:600;
	font-family:var(--heading-font);
    margin: .25rem;
    padding: .5rem;
    background: var(--red);
    display: block;
    cursor: pointer;
	color:var(--background-color);
	opacity:.8;
	pointer-events:auto;
}

.owl-prev {
	top:calc(50% - 1em);
	left:0em;
}

.owl-next {
		top:calc(50% - 1em);
    right: 0em;
}

.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover {
    text-decoration: none;
	opacity:1;
}


/* -------------------------------------------------------------------------------------
=Swiffy Slider
------------------------------------------------------------------------------------- */
.swiffy-slider {

	}
.swiffy-slider ul, .swiffy-slider li {}

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

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

.slider-cta {
	--swiffy-slider-item-count: 4;
}

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

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

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

/* product sliders - code needs some tweaking */
.carousel.prod h2{
	text-align:center;
	padding:.5rem;
	margin-bottom:1rem;
}

.carousel.prod .swiffy-slider {
	--swiffy-slider-item-count: 5;
}

/* department sliders - code needs some tweaking */
.carousel.dept .swiffy-slider {
	--swiffy-slider-item-count: 4;
}

.carousel.dept .deptlink a.txt {}

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

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


#pm .blog:not(.art) a.img{
	grid-area:image;
	border-bottom:3px white solid;
}

#pm .blog:not(.art) a.img img{
	width:100%;
	height:auto !important;
}

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

#pm .blog:not(.art) p.date{
	grid-area:date;
	text-align:center;
	color:var(--text-color);
}

#pm .blog:not(.art) a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:var(--button-color);
	color:var(--button-text-color);
	font-family:var(--heading-font);
	text-align:center;
	font-size:1.125em;
	border-radius:var(--border-radius);
}

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

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

.art.blog h2{
	text-align:center;
	color:var(--text-heading-color);
}
.art.blog .imgcont{
	margin:2em 0;
}

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

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

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

}

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

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

/* blog widget
------------------------------------------------------- */
.blogs{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:2em;
	padding:2em;
}

#pm .blogs .blog:not(.art) a.title{
	grid-area:title;
}


/* Blog  widget previews
------------------------------------------------------- */
#pm .blogs .blog{
	border-radius:var(--border-radius);
}

#pm .blogs .blog img{
	border-top-left-radius:var(--border-radius);
	border-top-right-radius:var(--border-radius);
}

#pm .blog:not(.art) a.title{
	grid-area:title;
}

#pm .blogs .blog:not(.art) p.date{
	grid-area:date;
	display:none;
}

#pm .blogs .blog:not(.art) a.more{
	grid-area:readmore;

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

.searchheader {
	padding: .5em;
	/* 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 itemsperpage";
	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;
}

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

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



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

.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: 3em;
	position: relative;
	margin: 1em 0;
}

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

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */

#pl .filter {
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 10001;
	top: 0px;
	left: 0px;
	background-color: var(--popout-color);
	overflow-x: hidden;
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	padding: .5em 1rem;
	display: none;
}

#pl .filter::-webkit-scrollbar {
  width: 10px;
}

#pl .filter::-webkit-scrollbar-track {
  background: var(--off-white); 
}
 
/* Handle */
#pl .filter::-webkit-scrollbar-thumb {
  background: var(--grey); 
}

/* Handle on hover */
#pl .filter::-webkit-scrollbar-thumb:hover {
  background: var(--dark-grey); 
}


#fstrigbtn {
	display: block;
}

#pl .filter.showfilter{
	display:block;
	width:50%;
	max-width:300px;
}

.filter .bt {}

.filter .bt h3 {
	font-weight:var(--heading-font-weight);
	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);
	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(--green);
	font-weight:600
}

.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"] {
display:none;

}
.mnu_filter_search{
	display:grid;
}

div[sectiontype="Refine by Colour"] {
grid-row:1;

}

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

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

/* close filter button */

.fsclsdiv {
	text-align:right;
}

.fsclsdiv .fsclsspn{border:1px solid var(--black);color:var(--black);background-color:var(--off-white);border-radius:var(--border-radius);font-family:monospace;padding:.5em;/* margin:0rem; *//* text-align:center; */cursor:pointer;/* display:none; */}

/* -------------------------------------------------------------------------------------
=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;
	margin:2em 0;
}

.depttree h4.tagline {
	font-size:1.5em;
	color:var(--red);
	margin-bottom: 1rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

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

.depttree li {
	display:block;
	position:relative;
}


.depttree li a.img img {
	width:100%;
	margin:0 !important;
	object-fit: cover;
}

.depttree li a.txt {
	background-color:var(--light-grey-alpha);
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	transition:var(--transition);
	font-family:var(--heading-font);
	font-size:1.25em;
	font-weight:var(--heading-font-weight);
	color:var(--red);
}

.depttree a.txt:hover{
	background-color:var(--red-alpha);
	color:white;
}


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

.fprd {
	position: relative;
}



.fprd:hover {}

.fprd {
	display: grid;
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns:1fr auto 1fr;
	/*use grid template areas */
	grid-template-areas:
		"image image image"
		"title title title"
		"packsize prev-price selling-price"
		"client-ref prev-price selling-price"
		"carton  prev-price selling-price"
		"buy-pane buy-pane buy-pane";
	align-items:start;
	/* border:1px var(--off-white) solid; */
}

.h3nostock{
	grid-column:1/-1;
}


/* Overrides for if in a carousel element
------------------------------------------------------- */
.slider-container .fprd {

}

.slider-container .fprd .prevprice,
.slider-container .fprd .saving {
	display:none;
}


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

.fprd .fprdimg a {}

/* image flags
------------------------------------------------------- */
.fprdimg .flag{
	position:absolute;
	pointer-events:none;
}

.fprdimg .flag.newin{
	right:0;
	top:0;
	max-width:6em;
}


/* Wishlist on fprd
------------------------------------------------------- */
.fprd .sfl{
	grid-area:image !important;
	width:2.5rem;
	height:2.5rem;
	z-index:1;
	align-self:end;

}

.fprd .sfl .submit {
	background-color:var(--featured-color);
	background-color:transparent;
	border:none;
	line-height:1;
}


.fprd .sfl .rsfl,
.fprd .sfl .asfl{
	display:grid;
	grid-template-areas:"button";
		align-content:center;
	align-items:center;
		background-color:var(--light-grey);
	border-radius:50%;
	padding: .5em;
}

.fprd .sfl .rsfl .submit,
.fprd .sfl .asfl .submit{
	display:block;
	max-height:1.5rem;
	width:auto;
	grid-area:button;
	padding:2px;
}

/* title
------------------------------------------------------- */
.fprd .fprdtitle, .fprd a.title {
	grid-area: title;
	text-align: left;
	color: var(--fprd-title-color);
	padding:.5em 0;
	min-height:3em;

}

.fprd .fprdtitle span,
.fprd a.title span{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
	font-family:var(--heading-font);
	font-weight:600;

}

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

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


/* strapline
------------------------------------------------------- */
.fprd .strap {
	grid-area:strap;
	display:none;
}

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

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

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

.fprd label {
	margin: 0;
	padding: 0;
	font-size: small;
}

.fprd .rrp {
	grid-area:prev-price;;
}
.fprd .rrp label {}
.fprd .rrp h6 {}


.fprd .price {
	grid-area: selling-price;
	text-align:right;
	/* margin-right:.5em; */
	line-height:1;
}
.fprd .price label {
	display:block;
}

.fprd .price h6 {
	font-weight:600;
	font-size:1.5em;
}
.fprd .price h6 span {}

.fprd .trade {
	grid-area: selling-price;
	/* display:none; */
}

.fprd .trade label {}

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

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

/*offer price */
.fprd .offer:not(.flag) {
	grid-area: selling-price;
	text-align:right;
	line-height:1;
}

.fprd .offer label {}

.fprd .offer h6 {
	font-size:1.5em;
}

.fprd .offer h6 span {}

/*prev price */
/* if rrp is showing then don't show prev-price as its redundant here */
.fprd .rrp + .prevprice{
	display:none;
}

.fprd .prevprice {
	grid-area: prev-price;
	text-align:right;
	align-self:start;
	line-height:1;
}

.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
	text-decoration-color:var(--red);
}

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

/* saving ribbon */
.fprd .saving {
	position:absolute;
	top:.25em;
	right:.25em;
	padding:1em;
	background-color:var(--green);
	border-radius:100%;
	text-align:center;
	color:var(--white);
	line-height:1;
}
.fprd .saving label {}
.fprd .saving h6 {
	color:var(--white);
	line-height:1;
}

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

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
	display:none;
}

.fprd .packsize {
	grid-area: packsize;
	text-align: left;
	/* margin-left:.5em; */
}

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

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

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

.fprd .qty {
	grid-area: carton;
	display:none;
}

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

.fprd .qty h6 {
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref {
	grid-area: client-ref;
	/* padding:0 .5em; */
	text-align: left;
	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-family:var(--text-font);
	font-size: .725em;
	/* margin-left:.5em; */
}

.fprd .model span, .fprd .clientref span {
	display: block;
	font-weight: var(--text-font-weight);
}

.fprd .model {
	grid-area: model-number;
	text-align:right;
}

/* brand
------------------------------------------------------- */
.fprd .brand{
	grid-area:brand;
	font-size:.725em;
	color:var(--grey);
}
.fprd .brand span{
	display:none;
}

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

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

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

.piflags ul li img{
	max-width:40px;
}


/* 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;
	max-width:100%;
	display:block;

	/* this won't work with dropdown skus */
	display:grid;
	grid-template-columns:64px 1fr;
	margin-top:.5em;
}


.fprd form .stock{}

.fprd form .stock h6{
	font-size:.825em;
	color:var(--grey);
}

.fprd form select {}

.fprd form label {
	/*seems daft to display a label for an input that is obvious*/
	display: none;
}

.fprd button {
	-webkit-appearance: none;
	background-color:var(--off-white);
	color:var(--dark-grey);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	border:1px var(--off-white) solid;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
}

.fprd button:hover,
.fprd button:active{
	background-color:var(--red);
	color:var(--white);
}

.fprd button.fpskuqtysub {}
.fprd button.fpskuqtyadd {}

.fprd input.fpskuqty {
	display:inline-block;
	vertical-align:middle;
	text-align: center;
	border-radius: var(--border-radius);
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:0;
}

.fprd .submit {
	display:inline-block;
	vertical-align:middle;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border-radius:0;
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}
/* sample request
------------------------------------------------------- */
.fprd form.smplreqform{
	grid-area:image;
	z-index:100;
	align-self:end;
	text-align:right;
}

.fprd form.smplreqform .submit{
	background-color:var(--red);
	border:none;
}

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

/* fprd adverts
------------------------------------------------------- */
.fprd.add {
	display: block;
	position: relative;
	padding:0;
}

.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;
	padding-top: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 600px - use fr to scale
	
	calc by doing image size / (width - gap)*/
	grid-template-columns: 420px 1fr;
	grid-template-areas:
		"top top"
		"left right"
		"left ."
		"bottom bottom";
	grid-column-gap: 4rem;
}

/* Main top
----------------------------------- */
#pi .main .top {
	position:relative;
	grid-area: top;
}


/* Main Left
----------------------------------- */
#pi .main .left {
	grid-area: left;
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
	"product-links"
	"flags"
	"product-piflags";
}

/* Main Right
----------------------------------- */
#pi .main .right {
	grid-area: right;
	display:grid;
	grid-template-areas:"product-title product-title"
		"client-ref manufacturer"
		"flags flags"
		"ordercutoff ordercutoff"
		"product-buy-pane product-buy-pane"
		"product-tabbed-description product-tabbed-description"
		"product-article product-article";
	grid-template-columns:1fr;
}
/* Main Bottom
----------------------------------- */
#pi .main .bottom {
	grid-area: bottom;

		margin-top:4em;
}


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

/* Brand/Manufacturer/Model
------------------------------------------------------- */

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

/* Manufacturer
----------------------------------- */
#pi .brandmanu.manu {
	grid-area: manufacturer;
}

/* Model
----------------------------------- */
#pi .brandmanu.model {
	grid-row:1;
	grid-column:1/-1;
	align-self:end;
	text-align:right;

	/*added to ensure the model number doesn't get crowded by a long title yet stays on the same
	line as the last line of the product title */
	margin-top:3em;
}

/* Brand
----------------------------------- */
#pi .brandmanu.brand {
	grid-area:brand;
}



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

#pi .brandmanu.clientref h6{
	font-family:var(--text-font);
	color:var(--text-color);
	font-size:small;
	font-weight:normal;
	margin:0;
	padding:0;
	display:block;
	margin-right:var(--half-spacing)
}

#pi .brandmanu.clientref h5{
	display:inline-block;
	margin:0;
	margin-right:.5em;
	font-size:.825em;
	color:var(--grey);
}

/* Barcode
------------------------------------------------------- */
#pi .brandmanu.gtin {
	grid-area: barcode;
	text-align:right;
}

/* Barcode Inner
------------------------------------------------------- */
#pi .brandmanu.inner {
		grid-area: barcode-inner;
}

/* 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;
	border-top:0;
	border-bottom:0;
	color:var(--fprd-title-color);

}

#pi .pititle h2{
	font-size:2.5em;
	margin-bottom:0;
}

/* Strapline
------------------------------------------------------- */
h4.strap {
	grid-area: product-strapline;
	font-family:var(--text-font);
	font-weight:normal;
	font-size: 1.2em;
}


/* save for later
------------------------------------------------------- */
.left .sfl{
	grid-area:image !important;
	width:2.5rem;
	height:2.5rem;
	z-index:1;
	align-self:end;

}

.left .sfl .submit {
	background-color:var(--featured-color);
	background-color:transparent;
	border:none;
	line-height:1;
}


.left .sfl .rsfl,
.left .sfl .asfl{
	display:grid;
	grid-template-areas:"button";
		align-content:center;
	align-items:center;
		background-color:var(--light-grey);
	border-radius:50%;
	padding: .5em;
}

.left .sfl .rsfl .submit,
.left .sfl .asfl .submit{
	display:block;
	max-height:1.5rem;
	width:auto;
	grid-area:button;
	padding:2px;
}

/* Gallery - now Swiffy
------------------------------------------------------- */
#pi .gallery {}

#pi .gallery #mainimages{
	cursor:pointer;
}

#pi .gallery .slider-main {
	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 {
	grid-area:thumbs;
	--swiffy-slider-item-count: 3;
	margin-top:2em;
}



#pi .gallery #galleryimages li img{
	/* aspect-ratio: 1/1; */
	cursor:pointer;
}

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

/*undo swiffy for this client */
#pi .gallery #galleryimages ul{/* display:block; */}

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



/* Price Panel
------------------------------------------------------- */
.pricecomp{
	grid-area:product-price;
	color:var(--color4);

}
.pricecomp .price h6{
		font-size:1.5em;
}
.pricecomp .price label{
	display:none;
}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	grid-area:product-buy-pane;
	margin-top:2em;
	display:grid;
	grid-template-columns:repeat(4, auto);
	/* grid-gap:1rem; */
	grid-template-areas:
		"stock stock stock stock"
		"lease . . ."
		"selling-price prev-price  saving ."
		"offer-price prev-price  saving ."
		"trade-price trade-price . ."
		"buy-pane buy-pane buy-pane buy-pane"
		"carton carton carton carton"
		"cutoff cutoff cutoff cutoff"
		"save-for-later save-for-later save-for-later save-for-later"
	"qty-in-basket qty-in-basket qty-in-basket qty-in-basket";
	align-items: start;
}

.pibuy label {
	display: block;
}

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

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

#pi .pibuy h6 span{
	font-family:var(--text-font);
	display:block;
	font-size:x-small
}

#pi .pibuy  label{
	font-family:var(--heading-font);
}

/*rrp price */
/*for this client rrp is a lease price hack! */
#pi .pibuy .rrp {
	grid-area:lease;
}
#pi .pibuy .rrp h6{
	text-decoration:line-through;
	text-decoration-color:var(--red)
}
#pi .pibuy .rrp label{}
#pi .pibuy .rrp span{} 

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

/*offer price */
#pi .pibuy .offer {
	grid-area: offer-price;
}
#pi .pibuy .offer h6{
	font-size:2em;
	color:var(--red)
}
#pi .pibuy .offer h6 span{
	font-weight:normal;
}

/*previous price (goes with offer) */
#pi .pibuy .prevprice {
	grid-area: prev-price;
}
#pi .pibuy .prevprice h6 {
	text-decoration: line-through;
	text-decoration:line-through;
	text-decoration-color:var(--red)
}
#pi .pibuy .prevprice h6 span{
	display:none;
}

/*saving  info */
#pi .pibuy .saving {
	grid-area:saving;
	margin-left:.5rem;
}
#pi .pibuy .saving h6{}
#pi .pibuy .saving label{}
#pi .pibuy .saving span{} 


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

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

#pi .pibuy .qty label{
	display:inline-block;
	margin-right:.5rem;
	font-size:.725em;
}

#pi .pibuy .qty h6{
	font-size:.725em;
}

/*trade price */
#pi .pibuy .trade {
	/* display:none; */
}

#pi .pibuy .trade h6{
	font-size:2em;
}

#pi .pibuy .trade label{}

/* Messages */

/*basket cutoff message? should have a class!*/
#pi .pibuy p {
	grid-area:cutoff;
	font-size:.825em;
}

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

#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!
	so don't add margin here*/
	list-style:none;
}

#pi .pibuy .stock li.in{
	font-weight:600;
}

#pi .pibuy .stock li.in:before{
	content:'\f00c';
	font-family: "Font Awesome 5 Pro";
	margin-right: .5em;
	font-size: 1em;
	color:var(--info-color);
	font-weight:600;
}


/*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:qty-in-basket;
	font-size:.825em;
	padding:1em 0;
}

/*dynamic price */
#pi .pibuy .dynprice {
	display:inline-block;
	vertical-align:middle;
	/* margin:0 .5em; */
}

#pi .pibuy p#dynpricejaq{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--heading-font);
	font-size:2em;
	margin-bottom:0;
	margin-right:1em;
}

.jaqshadow{
	display:none!important;
}


#bspsubmit{
	grid-area:save-for-later;
	display:inline-block;
		margin:1rem 0;
	margin-right:auto;
	padding:var(--half-spacing);
	background-color:var(--alt-button-color);
	border-color:var(--alt-button-border-color);
	color:var(--alt-button-text-color);
}

#bspsubmit:hover{
	background-color:var(--alt-button-hover-color);
	border-color:var(--alt-button-border-color);
	color:var(--alt-button-hover-text-color);
}



/* Wishlisth
-------------------------------------------------------*/
#wishlist {
	grid-area: wishlist;
	margin: 0;
	align-self:start;
}

#wishlist label{
	display:inline;
	font-size:.825em;
}

#wishlist .chkbox{
	margin-right:.5em;
}

#wishlist .submit{
	background-color:var(--red-alpha);
	border-color:var(--red-alpha);
	grid-area:buy;
	font-size: .825em;
	font-weight: var(--button-font-weight);
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	outline: none;
	border:none;

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

/* attributes/sku select */
#buy_form .attr{}
#buy_form .attr .attrlabel{
    display:none;
}
.attritem select{
	width:100%
}

#buy_form select,
#buy_form textarea{}
#buy_form select{
	max-width:100%;
	margin-bottom:1em;
}

#pi .pibuy .attrqty{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-template-areas:"qty buy buy sample . ."
}

/* quantity input 
---------------------------*/
#pi .pibuy .attrqty .qtyinput{
	grid-area:qty;
	display:inline-block;
	margin-bottom:0;
	display:grid;
}

/*increase/decrease buttons */
#pi .pibuy .attrqty .qtyinput  button{
	/*doesn't currently seem to be a way of turning these on or of in v5 or v6 */
	display:none;
}

/*hide quantity label*/
#pi .pibuy .attrqty .qtyinput label{
	display:none;
}
.attrqty .qtyinput #skuqty{
	display:inline-block;
	vertical-align:	middle;
}

.attrqty .qtyinput #skuqty{
	text-align:	center;
	padding:1em;
	width:auto;
	display:block;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	border-right:none;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	text-align:center
}

#pi .pibuy .attrqty .submit#buy{
	grid-area:buy;
	padding:1em;

	border-radius:var(--border-radius);
	text-align:center;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	margin-right:1rem;
}







/* Sample request 
-------------------------------------------------------*/
#pi .pibuy #smplreq {
	grid-area: sample;
	display: inline-block;
	background-color:var(--red);
	border:1px solid var(--red);
	margin-left:1em;
	
}

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

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

#pi .pidesc h2[itemprop="name"] {
	font-family:var(--heading-font);
	color:var(--grey);
	font-size:1.5em;
}

#pi .pidesc h2[itemprop="name"]:before{
	content:"About ";
	color:var(--red);
	font-family:var(--heading-font);
}

/* Extra Descriptions
-------------------------------------------------------*/
.pidescx{
	grid-area: product-extra-description;
	padding: 1.5em 0;
}


.pidescx ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	text-align:center;
}


.pidescx li{
	list-style:none;
	font-family:var(--heading-font);
	font-size:1.5em
}

.pidescx li:last-child{
	border:none;
}

.pidescx li span{
	margin-right:.5em;
	font-family:var(--text-font);
}


.pidescx  br{
	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;
	font-size:1.2em;
	/* list-style-position:inside; */
	/* padding:0 1em; */
	margin-bottom:1em;
}


/* Bullets
-------------------------------------------------------*/
#pi .bullets{
	grid-area:product-bullets;
	border:1px solid var(--grey);
	border-bottom:none;
}

#pi .bullets li{
	display:grid;

	margin:0;
	grid-template-columns:1fr 1fr;
	background-color:var(--light-grey);
	border-bottom:1px solid var(--grey);

}
#pi .bullets li:nth-child(even){
	background-color:var(--white)
}

#pi .bullets li label{
	display:block;
	padding:1rem;
	font-family:var(--heading-font);
	font-weight:600;
	text-align:center;
	border-right:1px solid var(--grey);
}
#pi .bullets li span{
	display:block;
	font-family:var(--heading-font);
	padding:1rem;
	text-align:center;
}

/* Links
-------------------------------------------------------*/
#pi .pilinks {
	grid-area: product-links;
	padding:1em 0;
	/* font-size:.825em; */
}

#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-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) - would be better if these were inside the gallery - they won't be sticky either unless moved
-------------------------------------------------------*/
#pi .flags {
	grid-area:flags;
	margin-bottom:1em;
}

#pi .flags .newin{
	position:absolute;
	right:0;
	top:0;
	max-width:150px;
}

#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  .piflags {
	grid-area: product-piflags;
}

#pi  .piflags h3{
	font-family:var(--text-font);
	font-size: 1em;
	display:none;
}

#pi .piflags li {
	margin-right:1em;
}
#pi .piflags li:last-child{
	margin-right:0;
	
}



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

#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-files;
	text-align:center;
	padding-bottom:1.5em;
	
}

#pi .pifile li{
	list-style:none;
	display:inline-block;
	margin:.5em;
}

/* Product Departments
-------------------------------------------------------*/
#pi .alldepts:before{
	grid-column:1/-1;
	content:'View the whole department';
	display:block;
	margin:1em;
	text-align:center;
	font-family:var(--heading-font);
		color:var(--text-heading-color);
	font-size:1.25em;

}

#pi .alldepts {
	grid-area: product-departments;
}

#pi .alldepts a {
	display: inline-block;
	margin: var(--half-spacing);
	text-decoration-color:var(--text-decoration-color);
}

/* 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;
	display: inline-block;
	margin: 0;
	padding: 1em;
	margin-right: .5em;
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
	text-align: center;
}


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

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

#pi .pi_tab_content {
	margin: auto;
	padding: 1rem;

	border: 1px var(--border-color) solid;
	max-height:300px;
	overflow-y:scroll;
}

/* accordion description (uses tabbed element)
------------------------------------------------------*/
#pi .pi_accordion{
	grid-area:product-tabbed-description;
}

#pi .pi_accordion .piflags ul{
	/* outline:1px red solid; */
	display:block;
	margin-left:0;
}

/* Associated Products
------------------------------------------------------*/
#pi .pass{
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .pass h3.header{
	font-size:1.5em;
	color:var(--red);
	margin: 2rem 0;
	margin-bottom:2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .pass h3.header:before,
#pi .pass h3.header:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(50% - .5em);
    margin-left:.5em;
    height: 4px;
    content: '\a0';
    background-color:var(--red);
}
#pi .pass h3.header:before,
#pi .pass h3.header:before{
	margin-left: -50%;
	text-align: right;
}

#pi .pass .fprd{
	margin-bottom: 2rem;
}

/* Recommended Products 
------------------------------------------------------*/
#pi .prec {
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .prec h3.header{
	font-size:1.5em;
	color:var(--red);
	margin: 2rem 0;
	margin-bottom:2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .prec h3.header:before,
#pi .prec h3.header:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(50% - .5em);
    margin-left:.5em;
    height: 4px;
    content: '\a0';
    background-color:var(--red);
}
#pi .prec h3.header:before,
#pi .prec h3.header:before{
	margin-left: -50%;
	text-align: right;
}

#pi .prec .fprd{
	margin-bottom:2rem;
}

/* Related
------------------------------------------------------*/
#pi .prel {
	width:var(--site-max-width);
	margin:auto;
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .prel h3.header{
	font-size:1.5em;
	color:var(--red);
	margin: 2rem 0;
	margin-bottom:2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .prel h3.header:before,
#pi .prel h3.header:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(50% - .5em);
    margin-left:.5em;
    height: 4px;
    content: '\a0';
    background-color:var(--red);
}
#pi .prel h3.header:before,
#pi .prel h3.header:before{
	margin-left: -50%;
	text-align: right;
}

#pi .prel .fprd{
	margin-bottom:2rem;
}

/* buytogether Products 
------------------------------------------------------*/
.buytogether{
	grid-area:buytogether;
}

.buytogether ul,
.buytogether li{
	list-style:none;
}

.buytogether li.header{
	text-align:center;
	padding:1rem 0;
	font-size:1.5em;
	font-family:var(--heading-font);
	color:var(--text-heading-color);
	border-top:1px var(--off-white) solid;
	border-bottom:1px var(--off-white) solid;
}

.boughtto{
	padding:1em;
	display:grid;
	grid-template-columns:80% 20% ;
}

/*this section holds the images of the products that will be bought together */
.boughtto li.imgs{
	text-align:center;
	grid-column:1/-1;
}

.boughtto li.imgs span{
	display:inline-block;
	vertical-align:middle;
}

.boughtto li.imgs span img{
	max-width:20vw;
}

.boughtto li.imgs span.plus1{
	font-size:2em;
	width:2em;
	/* margin:1em; */
}


.boughtto li.prods  {
	display:grid;
	grid-column:1;
	grid-template-columns: 1fr auto 5em;
	grid-template-areas:" title price checkbox";
	grid-gap:1em;
	margin-top:1em;
}

.boughtto li.prods:last-of-type{
	margin-bottom:0;
}

.boughtto li.prods .chkbox{
	grid-area:checkbox;
	text-align:right;
}

.boughtto li.prods .descr{
	grid-area:title;
	text-align:right;
}

.boughtto li.prods .price{
	grid-area:price;
}



.boughtto li.total  {
	margin-top:1em;
	grid-column:2;
	grid-row:2;
}

.boughtto li.btn  {
	grid-column:2;
	grid-row:3/5;
	align-self:end;
}






/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */


.cls_superattrribute.hideAttr:not(.attributeTypeDimensions){
	visibility:hidden;
	display:block;
	height:0;
	opacity:0;
	padding:0 !important;
	transform: translateY(0);
	transition: all .1s ease;
}

.sacontainerpanel{}

.sacontainerpanel ul,
.sacontainerpanel li{
	list-style:none;

}


.sacontainerpanel .sa_ddl_content{
	padding:0 1em;
	margin-bottom:1em;
}



/* 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 {
	display: none;
	z-index: 2000;
}

/*help icon */
.cls_superattrribute img[id^="help"] {
	cursor:pointer;
	/* width: 1em; */
}


/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.attributeTypePrice_Matrix_Calculator {
	/*required for the help icon position*/
	position:relative;
}

.attributeTypePrice_Matrix_Calculator #saten_pnl_show {}


.attributeTypePrice_Matrix_Calculator .att_container{
	margin-bottom:1rem;

	display:grid;
	align-items:center;
	grid-template-areas:"header header header"
		"attX attY calcprice";
	grid-gap:1em;
	align-items:center;

	grid-template-columns: auto auto auto;

}


.attributeTypePrice_Matrix_Calculator .att_header{
	grid-area:header;
	line-height:1;
	text-align:left;
	background-color:var(--red);
	color:var(--white);
	padding:1em;
	/* margin-bottom:1em; */
}

.attributeTypePrice_Matrix_Calculator label{
	display:inline-block;
	font-size:1em;
}

/*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{
	grid-area:attmeasure;
	display:none;
}

.att_X{
	grid-area:attX;
	text-align:center;
	margin-left:1em;
}


.att_Y{
	grid-area:attY;
	text-align:center;
}



.att_X label,
.att_Y label{
	margin-right:.5em
}

.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{
	color:var(--error-color);
	display:inline-block !important;
	vertical-align:top;
}




.attributeTypePrice_Matrix_Calculator .calc_price{
	grid-area:calcprice;
}

.attributeTypePrice_Matrix_Calculator .calc_price:before{
	font-family: var(--font-awesome);
	content: "\f1ec";
	font-weight:100;
	display: inline-block;
	vertical-align:middle;
	font-size: 2em;
	margin-right: .5rem;
}

.attributeTypePrice_Matrix_Calculator .calc_price .submit{
	display:inline-block;
	padding:.5em 1em;
	margin:0 1em;
	border-radius: var(--border-radius);
	text-align: center;
}
/*the widths on these are not nice - need making better !*/
.attributeTypePrice_Matrix_Calculator input.inputtext_short{
	max-width:10em;
	text-align:center;
	border: 1px solid var(--border-color);
}
.attributeTypePrice_Matrix_Calculator .calc_price .submit {}

/* attributeTypeDimensions 
***************************************************************/
.attributeTypeDimensions {
	position:relative;
}
.attributeTypeDimensions .attrContainer{
	display:grid;
	grid-template-columns:1fr 1fr;
	text-align:center;
}
.attributeTypeDimensions .sa_name{
	grid-column:1/-1;
	text-align:left;
	margin-bottom:1rem;
	font-weight:600;
}

.attributeTypeDimensions .width,
.attributeTypeDimensions .drop{
	display:grid;
	grid-column:1/-1;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:1rem;
}

.attributeTypeDimensions .width .sa_name,
.attributeTypeDimensions .drop .sa_name{
	display:block;
	margin:0;
	font-weight:normal;
}

.attributeTypeDimensions .width input,
.attributeTypeDimensions .drop input{
	width:100%;
}

.attributeTypeDimensions .width span,
.attributeTypeDimensions .drop span{
	display:none;
}

.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.attributeTypeDimensions  .submit{
	grid-column:1/-1;
	display:inline-block;
	width:100%;
	padding: 1em;
	margin-bottom:1em;

	border-radius: var(--border-radius);
	text-align: center;
}


/* 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{
	max-width:100%;
		width:calc(100% - 3rem);
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer > div:first-of-type{
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}

/*attributeTypeDrop_down_list
***************************************************************/
.attributeTypeDrop_down_list {
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:100%;
	text-align:left;
}
/*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 .info.sa_name{
	line-height:1;
	text-align:left;
	background-color:var(--red);
	color:var(--white);
	padding:1em;
	margin-bottom:1em;
}

.attributeTypeDrop_down_list select{
	width:50%;
}

/* whatever this is we don't want it! */
.sa_pnl_product_popup_image_show {}

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.attributeTypeSingle_Image_Upload {
	position:relative;
}

.attributeTypeSingle_Image_Upload .attrContainer{
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	grid-template-areas:"label image"
		"fileupload fileupload";
	padding:.5rem 0;
}
.attributeTypeSingle_Image_Upload .attrContainer label{
	grid-area:label;
}

/*delete image */
.attributeTypeSingle_Image_Upload .siup_triggerdel{
	position:absolute;
	bottom:1rem;
	right:1rem;
}
/*should be the file uploader*/
.attributeTypeSingle_Image_Upload input{
	grid-area:fileupload;
	padding:1rem;
}
.attributeTypeSingle_Image_Upload .progress {}
/*should be the uploaded image */
.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"]{
	grid-area:image;
}

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

/*this is a bit of a hack, all the prom contents should be in their own container ! */
#pm .bskt .carousel 
{
	grid-area:prompane;
	
}

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

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

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

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

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

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

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

#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 qty netprice  rem"
		"icon desc qty .  rem"
		"icon . . . .";
	/* border-bottom: 1px solid var(--border-color); */
	grid-column-gap: 1rem;
}

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

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

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

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

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

#pm .bskt .line .prodinfo li 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;
	font-style: normal;
	padding: .25rem;
	margin-right: .5rem;
}

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

/*product quantity */
#pm .bskt .lines .line .qty {
	grid-area: qty;
	/* align-self: center; */
}
#pm .bskt .lines .line .netprice {
	grid-area: netprice;
	font-size:.725em;
	text-align:right;
	/* 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 {
	-webkit-appearance: none;
	/*need a way to disable these in COMS */
	display:none;
}

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

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	border:1px var(--off-white) solid;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;

}


#pm .bskt .lines .line .qty button:hover,
#pm .bskt .lines .line .qty button:active{
	background-color:var(--red);
	color:var(--white);
}

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

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

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

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

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

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

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

/* remove item */
#pm .bskt .line .price {
	grid-area: price;
	text-align:right;
}

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



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

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

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

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

.gtentry{
	grid-area:gtentry;
}

.gtentry li{
	display:block;
}

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

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

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

.prodsubtotal label {}

.prodsubtotal span {}

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

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

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

#bsktid .shipping .header{
	display:none;
}

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

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

#bsktid .shipping li{
	list-style:none;
	margin-bottom:.5em;
}

#bsktid .shipping li.delivery p{
	text-align:center;
}

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

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

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

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

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

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

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

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

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

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


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

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

#bsktid #countryid{
	grid-area:country;
}


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

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

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

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

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

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

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

#bsktid .shipping ul li.delivery.collectstore .address {
	grid-area:address;
	margin-left: var(--spacing);
	text-align:left;
}

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

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

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

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


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

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

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

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

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

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

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

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

.vouchentryaccord li.pane {
	display: none;
}

#pm .bskt .vouchentryaccord .header {
	grid-template-columns: 1fr;
	font-size: 1rem;
	border: none;
	border: 0;
	padding: 0;
	font-size: .825rem;
	text-decoration: underline;
	align-items:center;
	padding:1em;
}


#pm .bskt .vouchentryaccord .header  img{
	display:none;
}
#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-bottom-left-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
	border-top:0;
}

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

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

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

.vouchentry .remove a {
	display: block;
	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;
	font-size:.725em;
}

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

.bsktbuttons a.btn,
.bsktbuttons a.btn:hover{
	/* border:none; */
	display:block;
	margin-bottom:1em;
	background-color:var(--checkout-button);
}


#pm .sp_button{

}

/*font awesome icons */
#pm .sp_button a.btn::before{
	font-family: var(--font-awesome);
	margin-right:var(--half-spacing)
}
/*Sagepay*/ 
#pm .sp_button.sagepay a.btn::before{
	content: '\f09d';
}

/*braintree*/ 
#pm .sp_button.braintree a.btn::before{
	content: '\f09d';
}

/*iwoca*/
#pm .sp_button.iwoca a.btn::before{
	content: '\f53a';
}

/*bacs*/
#pm .sp_button.invoice a.btn::before,
#pm .sp_button.bacs a.btn::before{
	content: '\f570';
	left: 0.825em;
}

/*lease */
#pm .sp_button a.btn.lease::before{
	content: '\f2b5';
}
/* continue shopping */
.bsktbuttons .cont a.btn {
	display: block;
	font-size: .825rem;
	border: 2px var(--button-color) solid;
	background-color: transparent;
	color: var(--button-color);
}



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

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

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




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

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

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

.priordelinfo {
	grid-area: prioritydelivery;
}

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

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

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

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

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

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

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

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

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

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



/* =Lease Calculator
-------------------------------------------------------------------------------------*/

/* bit of a mess here - we have divs with the same id nested within each other */
.leasecalc{
	outline:1px red solid;
	padding:1em;
	grid-column:1/-1;
} 

.leasecalc > .leasecalc{
	outline:1px blue solid;
	display:grid;
	grid-template-areas:"form table";

	grid-template-columns:auto 1fr;
}



/* the form */
.leasecalc > .leasecalc #lease_calc_form{
	grid-area:form;
	background-color:var(--light-grey);
	border:1px solid var(--border-color);
	padding:1em;
}

/* why the amount field is in a div ? */
.leasecalc > .leasecalc #lease_calc_form > div{
	display:inline-block;
	vertical-align:middle;

}

.leasecalc > .leasecalc #lease_calc_form > div img{
	display:inline;
	vertical-align:top;
}

/* the table */

.leasecalc > .leasecalc table{
	grid-area:table;
}

.leasecalc > .leasecalc table .header{
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	font-size:1.25em;
}


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

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

}

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

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

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

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

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

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

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

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

/* Signin/guest pane
------------------------------------------------------- */
#pmid.page_checkoutsignin {
	/* margin-top:4em; */
}

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

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

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

.page_checkoutsignin .form label {
	display: block;
}

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

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

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

.exstregfield {
	display: none;
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#txtPostCodeLookup{
	grid-area:postcode;
}

#btnPostCodeLookup{
	grid-area:locate;
}

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

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

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

#ddlMultiAddress,
#ddlMultiAddressDel{

	background-image:none;
	padding:.5em;
	width:100%;
}


.page_delivery .pclup input,
.page_checkout .pclup input,
.page_delivery .pclupdel input,
.page_checkout .pclupdel input {
	width: auto;
	display: block;
	margin:0;
}

/* Special Instructions
------------------------------------------------------- */

.form li.specialinst textarea{
	margin-bottom:0;
}

/* Order Fulfilment/shipping
------------------------------------------------------- */
.page_shipping {}

.page_shipping .pmfull {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
}

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

.page_shipping select {
	width: 100%;
}

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

.page_shipping .subtotal {
	margin: 1rem 0;
	display: grid;
	grid-template-areas: "label value";
	grid-template-columns: 1fr auto
}

.page_shipping .subtotal label {
	grid-area: label;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight)
}

.page_shipping .subtotal span {
	grid-area: value;
	text-align: right;
}

.page_shipping .cont a {
	display: block;
}

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

.page_payment #pm {
	margin: 0 auto;
	position: relative;
	width: calc(var(--site-max-width) / 2);
	max-width:600px;
	/* 
	using grid layout just isn't feasible here with the way the content blocks are
	it breaks/works depending on the size of the basket
	
	display: grid; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"header header"
		"payment payment"
		"cont cont"
		"details details"
		"summary summary";*/
}


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

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

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

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

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

.termsmsgcontainer {}

.page_payment #pm form.payoptsform {
	grid-area: payment;
	/* display: grid; */
	grid-template-areas:
		"options"
		"pay"
}

.page_payment #pm form.payoptsform .payopts {
	margin:auto;
}

/*only used in testing - cash payment */
.pt_cash {
	grid-area: cash;
}

/* custom radio buttons with images */
.page_payment #pm .sp_button{
	margin-bottom:1em;
	position: relative;
}

.page_payment #pm .sp_button label,
.page_payment #pm .sp_button input {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.page_payment #pm  .sp_button  input[type="radio"] {
	opacity: 0;
	z-index: 100;
}

.page_payment #pm .sp_button  label {
	z-index: 90;
	line-height: 1.8em;
	color:transparent;
}

.page_payment #pm  .sp_button input{
	grid-area:check;
	display:block;
}

.page_payment #pm .sp_button.pt_debitcreditcard{
	grid-area:debit;
	background:url('/bouk/i/art/card.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
}

.page_payment #pm .sp_button.pt_debitcreditcard  input[type="radio"]:checked + label {
	background:url('/bouk/i/art/card_checked.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
}

.page_payment #pm  .sp_button.pt_invoice{
	grid-area:invoice;
	cursor: pointer;
	background:url('/bouk/i/art/invoice.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
	margin-bottom:1em;
}

.page_payment #pm .sp_button.pt_invoice input[type="radio"]:checked + label {
	background:url('/bouk/i/art/invoice_checked.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
}

.page_payment #pm .sp_button.pt_paypal{
	grid-area:debit;
	background:url('/bouk/i/art/paypal.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
}

.page_payment #pm .sp_button.pt_paypal  input[type="radio"]:checked + label {
	background:url('/bouk/i/art/paypal_checked.webp') #fff no-repeat center;
	aspect-ratio:1200/117;
	background-size:contain;
}

.page_payment #pm .bc form[action="/payment.aspx"] input[type="submit"]{
	grid-area:pay;
	display:block;
	margin-top:1em;
	background-color:var(--checkout-button);
	border:1px solid var(--checkout-button);
	color:var(--White);
	width:100%;
	padding:.5em 1em;
	text-transform:	capitalize;
	font-family:var(--headingFontAlt);
	font-weight:600;
	font-size:1.5em;
	margin-bottom:1em;
}

/*payment article */
.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_payment #pm .art li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

.page_payment #pm .art li:last-child {
	margin-bottom: 0;
}

.page_payment #pm .art li i {
	grid-area: icon;
	color: var(--navy)
}

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

.payoptentry, #psagepay {
	grid-area: details;
}

.page_payment #pm form.payoptsform .submitcontainer {
	grid-area: pay;
	text-align: center;
}

.page_payment input[type="submit"] {
	display: block;
	padding: 1rem 0;
	width: 100%;
}

.confirmorder {
	grid-area: details;
}

/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	display:grid;
	grid-template-areas:"title"
	"totals"
	"summary"
}

.bsktsum h4 {
	display:none;
}

/*we only want the header on the payment page*/
.page_payment .bsktsum h4 {
	grid-area:title;
	text-align:center;
	margin:.5em;
	display:block;
}

/*but we don't want the basket lines summary on the payment page*/
.page_payment .bsktsum .lines {
	display:none;
}


/*basket lines 
--------------------------*/
.bsktsum .lines {
	grid-area:summary;
	background-color:var(--off-white);
	padding:1em;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

.bsktsum .lines .line {
	align-items: start;
	display: grid;
	grid-template-columns: 4em 1fr auto 100px;
	grid-template-areas:
		"thumb desc qty price"
		"thumb . . .";
	grid-column-gap: 1rem;
	border-bottom:1px solid var(--border-color);
	padding-bottom:.5em;
	margin-bottom:1em;
}

.bsktsum .lines .line:last-child{
	border-bottom:none;
}

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

.bsktsum .lines .thumb {
	grid-area: thumb;
	list-style: none;
}

.bsktsum .lines .thumb img{
	margin:0 !important;
}

/* Product Info - in list form */
.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

.bsktsum .lines li {
	font-size: .725rem;
	margin-left: .5rem;
}

.bsktsum .lines li.descr {
	font-size: .825rem;
	font-family: var(--heading-font);
	font-weight:500;
	margin-left: 0;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
	font-size:.825em;
}

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

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

.bsktsum .totals {
	grid-area:totals;
	padding:0;
	border-radius:var(--border-radius);
	margin-bottom:1em;
}

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

.bsktsum .totals label{
	grid-area:label;
}

.bsktsum .totals span{
	grid-area:value;
	text-align:right;
}

.bsktsum .totals .subtotal:last-child {
	font-family:var(--heading-font);
	text-align:left;
	font-size:2em;
}

.bsktsum .totals .subtotal:last-child label {
	display:inline-block;
	margin-right:.5em;
	font-family:var(--text-font);
}

.bsktsum .totals .subtotal:last-child span {
}

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn,
.page_checkout .contbtn {
	grid-area:continue;
}
.page_delivery .contbtn input,
.page_checkout .contbtn input{
	width:100%;
	background-color:var(--checkout-button);
	border-color:var(--checkout-button);
}

.forinvoice {}
.page_delivery .forinvoice .chkbox label {}


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
/* is this the sign in page form */
.form.myaccount#psign {}
.page_useraccount{}

/*HACK  - until DH stops them from being shown!*/
.acctmsg{
	display:none;
}

/* Account icons (on main account page)
------------------------------------------------------- */
.page_useraccount  li.icon{
	display:inline-block;
	margin-right:1em;
}

.page_useraccount li.icon a.img{
	display:block;
	text-align:center;
	border:1px solid var(--borderColour);
}

.page_useraccount li.icon a.lnk{
	display:block;
    text-align:center;
    margin:.5em auto;
}

.page_useraccount li.icon a.img img{
	display:block;
	margin:auto;
}

.page_useraccount #pm ul.orders,
.page_useraccount #pm ul.contact,
.page_useraccount #pm ul.details{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	text-align:left;
}

.page_useraccount #pm ul.orders,
.page_useraccount #pm ul.contact,
.page_useraccount #pm ul.details li{
	list-style:none;
}

.page_useraccount #pm ul.orders img,
.page_useraccount #pm ul.contact img,
.page_useraccount #pm ul.details img{
	max-width:100%;
	height:auto;
}

/* Account headings
------------------------------------------------------- */
.page_useraccount h4 {
	font-size:1.5em;
	color:var(--red);
	margin: 2rem 0;
	margin-bottom:2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}
.page_useraccount h4:before,
.page_useraccount h4:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(50% - .5em);
    margin-left:.5em;
    height: 4px;
    content: '\a0';
    background-color:var(--red);
}
.page_useraccount h4:before{
	margin-left: -50%;
	text-align: right;
}

/* Account messages
------------------------------------------------------- */
.acctmsg h3{
	/*for select only as the title of some of the messages is not user friendly and more internal */
	display:none;
}

/* account menu panel
------------------------------------------------------- */
	
#pmam + .pmfull{
	width: calc(var(--site-max-width) - 2rem);
}

/* this shows on other account pages - is no longer needed with the menu button*/
a.myacct{
	/* display:none; */
}

/* show/hide menu button */
#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);
	display:inline-block;
}

#mamtrigbtn span{
	display:block;
}

#mamtrigbtn span:before {
	content: "\f7f3";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}
	
#pmam .myacctmenu{
	height: 100%;
	width: 50%; /* 0 width - change this with JavaScript */
	max-width:300px;
	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;
}

#pmam li{
	list-style:none;
	margin-bottom:.5rem;
}

/*how many times am I going to add this back in... */
/*we don't want the icons here! */
#pmam li a.img{
	display:none;
}


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


/* close member panel 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:inline-block;
}

/* account recent items
------------------------------------------------------- */


/* account articles
------------------------------------------------------- */
.page_useraccount .arts{
	grid-area:memberarts;
}

/* account 
------------------------------------------------------- */
.page_useraccount .carousel.prod{
	grid-area:memberarts;
}

/* My Orders
------------------------------------------------------- */
.member-order{
	display:grid;
	grid-template-areas: "orderinfo orderinfo"
	"invoice delivery"
	"orderdetails orderdetails"
	"actions actions";
	grid-gap:1em;
}

.member-order .invoice-address{
	grid-area:invoice;
} 

.member-order .delivery-address{
	grid-area:delivery;
}

.member-order .invoice-address li,
.member-order .delivery-address li{
	list-style:none;
}

.member-order .order-details{
	grid-area:orderdetails;
}

.member-order .account-actions{
	grid-area:actions;
}

.member-order .account-actions a{
	margin:1em;
}
.member-order .account-actions a.print{
}

.member-order .account-actions a.print img{
	display:inline-block;
	vertical-align:middle;
}
.member-order .account-actions a.print:before{
	content:"print order";
	margin-right:1em;
	display:inline-block;
}

/* My Orders
------------------------------------------------------- */
.orders-ext{}

.past_order_header{
	background-color:var(--red);
	color:var(--white);
	font-family:var(--heading-font);
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.past_order_header div{
	padding:1em;
}

.past_order{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.past_order:nth-child(2n){
	background-color:var(--off-white);
}

.past_order div{
	padding:1em;
}

/* My Orders - specific order
------------------------------------------------------- */

.ordinfo{}

.ordinfo .customerDetails {
	display:grid;
	grid-template-areas:"orderinfo orderinfo"
	"invoice delivery";
	grid-gap:1em;
}
.ordinfo .customerDetails .header{
	font-family:var(--heading-font);
	background-color:var(--red);
	color:var(--white);
	padding:1em;
}

.ordinfo .customerDetails .orderDetails:before{
	content:"Order Details";
	font-family:var(--heading-font);
	color:var(--white);
	background-color:var(--red);
	display:block;
	padding:1em;
}
.ordinfo .customerDetails .orderDetails{
	grid-area:orderinfo;
}

.ordinfo .customerDetails .orderDetails div{
	padding:0 1rem;
}
.ordinfo .customerDetails .orderDetails .label{
	font-family:var(--heading-font);
	font-weight:bold;
}

.ordinfo .addressDetails{}

.ordinfo .addressDetails .names,
.ordinfo .addressDetails .addressBlock{
	padding:1em;
}

.ordinfo .addressDetails .label{
	font-weight:bold;
}

.ordinfo .order .header{
	background-color:var(--red);
	color:var(--white);
	font-family:var(--heading-font);
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding:1em;
}

.ordinfo .order .data{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding:1em;
}

.ordinfo .order .data:nth-child(2n){
	background-color:var(--off-white);
}

.ordinfo .order + .totals{
	text-align:right;
	padding:1em;
	font-weight:bold;
}



/* buttons?
------------------------------------------------------- */
.action button {
	-webkit-appearance: none;
	background-color:var(--off-white);
	color:var(--dark-grey);

	font-size: 16px;
	padding: var(--half-spacing) var(--half-spacing);
	width: 2em;
	border:1px var(--off-white) solid;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
}

.action input.inputtext {
	font-size:1rem;
	border-color:var(--dark-grey);
	text-align: center;
	width:2em;
	padding:.5em 0;

	display:inline-block;
	vertical-align:middle;
}*/


/* page_orderinfo
------------------------------------------------------- */

/* member orders view 
------------------------------------------------------- */

/* Wishlists 
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=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 {
	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 Specific Stylings 
------------------------------------------------------------------------------------- */



/* Custom CSS 
------------------------------------------------------- */
/* home page
------------------------------------------------------- */


.ctas{
	grid-column: span 6;
}

.ctas .artp{
	display:grid;
	grid-template-columns: auto auto;
	grid-gap:.5em;
}

.ctas .artp p,
.ctas .artp h2,
.ctas .artp h3,
.ctas .artp h4{
	grid-column:1/-1;
}

.ctas .artp .cta{
	display:grid;
	grid-template-columns: 64px 1fr;

	grid-template-areas:
		"icon title"
		"icon strap"
;
	margin-bottom: 4.1rem;
}

.ctas .artp .cta i{
	grid-area:icon;
	font-size:3rem;
	color:var(--red);
	align-self:center;
}

.ctas .artp .cta h4{
	grid-area:title;
	color:var(--text-color);
	margin:0;
}

.ctas .artp .cta p{
	grid-area:strap;
	margin:0;
}

.ctas .cta-text h3{
	font-size:1.5em;
}

.cta-action a.btn{
	display:block;
	font-weight:600;
	font-size:1.5em;
}



/*hack - should be using multiple classes */

#a123699210{
	border:none;
	display:block;
	text-align:center;
}

#a123699210 .imgcont{
	display:inline-block;
	margin: 0 1em;
}

#a123699210 img{
	max-width: 200px;
}


/* Contact Us
------------------------------------------------------- */

.page_contact .address:before{
	content:"\f3c5";
}
.page_contact  .phone:before{
	content:"\f095";
}
.page_contact .email:before{
	content:"\f0e0";
}






/* -------------------------------------------------------------------------------------
=Accordion Checkout process Need !important to override jquery ui 
------------------------------------------------------------------------------------- */
#pmid.page_checkoutprocess {}

#pmid.page_checkoutprocess #pm{
	display:grid;
	grid-template-areas:"process breadcrumb";
	grid-template-columns:7fr 3fr;
	grid-column-gap:1em;
	position:relative;
}

/*this doesn't like grid */
#checkout_panel_processing,
#ro_accord_processing {
	display:none !important;
}

#pm .accord {}

/* Containers 
------------------------------------------------------- */
#ul_top{
	grid-area:top;
}
#ul_left{
	grid-area:left;
}
#ul_right{
	grid-area:right
}
#ul_bottom{
	grid-area:bottom;
}


/* typography 
------------------------------------------------------- */


/* Accordion tabs 
------------------------------------------------------- */
#pm .accord .ui-accordion-header {
	font-family: var(--heading-font);
	font-size:1.2em;
    margin: 0;
    position: relative;
    cursor: pointer;
    background:var(--red);
}

#personalisation_panel, #gift_panel {
    border: none;
}

#checkout_accordion ul {
    list-style: none;
}

/* Customer Details
------------------------------------------------------- */
#basket_customer_details{
	display:grid;
	grid-template-areas:"top top"
						"left right"
						"bottom bottom";
	grid-column-gap:1rem;
	grid-template-columns:1fr 1fr;
}

#basket_customer_details input,
#basket_customer_details select,
#basket_customer_details textarea{
	width:100%;
}

#basket_customer_details li{
	margin-top:1rem;
}
#basket_customer_details li img{
	display:inline;
}

#basket_customer_details li.help{
	font-size:.725em;
	margin-top:0;
}


/* Delivery Details 
------------------------------------------------------- */
#basket_delivery_details{
	display:grid;
	grid-template-areas:"left right"
		"bottom bottom";
	grid-gap:1rem;
	grid-template-columns:1fr 1fr;
}


#delivery_to_other {
	text-decoration:underline;
	margin-bottom:1em;
}

#basket_delivery_details input,
#basket_delivery_details select,
#basket_delivery_details textarea{
 width:100%;
}

#basket_delivery_details li{
	margin-top:1rem;
}

/* Delivery Date Details 
------------------------------------------------------- */
#basket_delivery_date{}

#basket_delivery_date h4{
	display:none;
}

#basket_delivery_date select{
	margin:1em 0;
	padding:.5em;
}

#basket_delivery_date input{
	width:100%;
}





/* Specific Fields 
------------------------------------------------------- */


/* Confirm Basket 
------------------------------------------------------- */
#basket_confirm_details{}
#basket_confirm_details .bsktsum {
	display: grid;
	grid-template-areas: "lines"
	"editbskt"
	"totals"
	"terms"
	"termsart"
	"continue";
}

#basket_confirm_details .bsktsum .lines{
	grid-area:lines;
	display:block;
	background-color:transparent;
}

#basket_confirm_details .bsktsum .editbskt{
	grid-area:editbskt;
}


#basket_confirm_details .bsktsum .editbskt span{
	float:none !important;
	font-family:var(--heading-font);
}
#basket_confirm_details .bsktsum .editbskt a{
	display:block;
	text-decoration:underline;
	margin-bottom:1rem;
	font-size:.825em;
	
}

#basket_confirm_details .bsktsum .totals{
	grid-area:totals;
}

#basket_confirm_details .bsktsum .terms{
	grid-area:terms;
	align-items:center;
	align-content:center;
	
}

#basket_confirm_details .bsktsum .terms h5{
	margin:0;
}

#basket_confirm_details .bsktsum .terms input{

	margin:1em;
}

#basket_confirm_details .bsktsum .termsart{
	grid-area:termsart;
	text-align:left;
	font-size:.825em;
}

#basket_confirm_details .bsktsum .continue{
	grid-area:continue;
}


#basket_confirm_details .bsktsum .continue input{
	width:100%;
}


/* Payment 
------------------------------------------------------- */
#checkout_accordion #payment_panel #psagepay {}
#checkout_accordion #payment_panel #psagepay.form .bt,
#checkout_accordion #payment_panel #psagepay.form .bb {}
#checkout_accordion #payment_panel #psagepay.form .bc {}
#checkout_accordion #payment_panel #psagepay h3 {}
#checkout_accordion #payment_panel #psagepay iframe {}




/* Breadcrumb pane 
------------------------------------------------------- */
#pm .accordbdcb {}

#pm .accordbdcb ul li.title {
	display:none;
}
#pm .accordbdcb .checkoutLogos{}
#pm .accordbdcb .checkoutLogos img{}
#pm .accordbdcb ul {
	
}
#pm .accordbdcb ul li {
	display:block;
	font-size:1em;
	padding:1em;
}
#pm .accordbdcb ul li.header {
	font-family:var(--heading-font);
	font-size:1.2em;
	background-color:var(--red);
	color:var(--white);
	padding: .5rem;
	margin-bottom:.5rem;
}
#pm .accordbdcb ul li:last-child {}

#pm .accordbdcb ul li span {}


/* Delivery date selection 
------------------------------------------------------- */
#pm .deldates .delcapnone {}
#pm .deldates .delcapgone {}


/* Order info 
------------------------------------------------------- */
#pm .ordinfo table tr td {}
#pm .ordinfo h3 {}
#pm .ordinfo table tr td a {}


/* terms and conditions article in checkout
------------------------------------------------------- */
#pp {
    width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}

#pp p, #pp h3, #pp h4 {
    margin: 0 1rem;
}

#pp h3, #pp h4 {
    margin-bottom: .5rem;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 nav 2024
	Filename : nav.css
	Last Updated : 28. 11. 2024
	Copyright :(c) 2024 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */

:root{
	--menu-line-height:50px;
}

picture,
picture img{
	display:block;
}

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

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

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

.nav-wrapper ul,
.nav-wrapper li{
	margin:0;
	padding:0;
	list-style: none;
}

.l0{
	display:none;
}

/* -------------------------------------------------------------------------------------
=Top Nav
------------------------------------------------------------------------------------- */

.nav-wrapper .nav {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	/*used to stop the gaps with inline block stuff
	font-size:0;*/
	width: 100%;
	max-width: var(--menu-max-width);
	text-align:center;
	color:var(--navbar-dropdown-text-color);
}

ul.nav>li {
	display:inline-block;
}

ul.nav>li.l0{
	display:none;
}


/* top nav links
------------------------------------------------------- */
ul.nav .l0>a,
ul.nav .l1>a{
	display: block;
	line-height:var(--menu-line-height);
	padding: 0 1em 0 1em;
	color: var(--navbar-heading-color);
	font-family:var(--navbar-heading-font);
	font-size:var(--navbar-heading-font-size);
	text-decoration: none;
	
	font-family:var(--text-font);
}

ul.nav>li>a:only-child {
	padding: 0 1em 0 1em;
}

@media(min-width:922px) {
	ul.nav>li>a:hover,
	ul.nav>li: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
------------------------------------------------------- */
.nav .deptlink{
	display:grid;
}


.nav .classic .deptlink{
	display:grid;
	grid-template-areas:
		"image link popout";
	grid-template-columns:3em 1fr 2em;
	align-items:center;
}

.nav .classic .deptlink a.img{
	grid-area:image;
	padding:.5em;
}

.nav .classic .deptlink a.txt{
	grid-area:link;
	display:block;
	padding:.5em;
	font-family:var(--heading-font);
	/* color:var(--navbar-dropdown-text-color); */
}

/* css arrows if has child item */
.deptlink:after{
	font-family: var(--font-awesome);
	text-decoration: none;
	font-size: 16px;
	padding: 0;
	content: '\f105';
	grid-area:popout;
	margin:auto;
	text-align:center;
	/* outline:1px red solid; */
}

.deptlink:only-child:after,
.l3 .deptlink:after{
	content: "";
}

ul.nav>li.classic {
	display:inline-block;
	position:relative;
}

/* 2nd Level
------------------------------------------------------- */
ul.nav>li>ul.l2,
ul.nav>li>.menu-drop-down{
	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);
}

ul.nav>li>ul.l2 li:hover {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}



/* 3rd Level
------------------------------------------------------- */

ul.nav>li>ul>li>ul.l3{
	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);
	color:var(--navbar-dropdown-text-color);
	left: var(--navbar-dropdown-width);
	top: 0;
}


/* 4th Level
------------------------------------------------------- */
ul.nav>li>ul>li>ul>li>ul.l4,
ul.nav>li>ul>li>ul>li>ul.l5{
	display:none;
}

/* 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 .l2{
	/* outline:1px red solid; */
	right:0;
}
ul.nav>li.over>ul>li>ul.l3,
ul.nav>li.popl>ul>li>ul.l3{
	left: auto;
	right: var(--navbar-dropdown-width);
		-webkit-box-shadow: var(--box-shadow-alt);
	-moz-box-shadow: var(--box-shadow-alt);
	box-shadow: var(--box-shadow-alt);
}


/* -------------------------------------------------------------------------------------
=Mega-menu / Mega-menu-classic 
------------------------------------------------------------------------------------- */

/* Mega Menus */

ul.nav>li.mega-menu-classic>div,
ul.nav>li.mega-menu>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);
}

/* Mega Menu - Clasic */
.mega-menu-classic{}

.mega-menu-classic .menu-grid > .menu-row ul{
	display:grid;
	grid-template-columns:repeat(9,1fr);
	grid-gap:1rem;
	margin-bottom:1rem;
}

.nav .mega-menu-classic .deptlink{
	display:grid;
	grid-template-areas:
		"image"
		"link";
	grid-template-columns:1fr;
	position:relative;
}

.nav .mega-menu-classic .deptlink a.img{
	grid-area:image;
	position:relative;
}

.nav .mega-menu-classic .deptlink a.img img{
	width:100%;
		outline: 2px solid var(--white);
	outline-offset: -1em;
}

.nav .mega-menu-classic .deptlink a.txt{
	grid-area:image;
    text-align:right;
    font-family: var(--heading-font);
    font-size: 1em;
    background-color: var(--yellow);
    padding: .25rem .5rem;
    color: var(--white);
	align-self:end;
	z-index:1;
	display:inline-block;
margin-left:auto;
}

.mega-menu-classic .deptlink:after{
	content: "";
	display:none;
}

/* CONTENT GRID */
div.menu-grid,
div.menu-grid-lined {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

div.menu-grid>div.menu-row {
	position: relative;
	padding:var(--half-spacing);
	height:auto;
}

/*  Content Related */
ul.nav>li.mega-menu-classic>div ul{
	margin: 0;
	margin-top: 10px;
}

/* don't show l2;s */
.mega-menu-classic .l2 .menu-grid-lined{
	display:none;
}

/* Mega Menu */
.mega-menu .menu-grid > .menu-row ul{
	display:grid;
	grid-template-columns: repeat(6,1fr);
	grid-gap:1rem;
}


.nav .mega-menu .deptlink{
	display:grid;
	grid-template-areas:
		"image"
		"link";
	grid-template-columns:1fr;
	align-items:center;
	text-align:center;
}

.nav .mega-menu .deptlink a.img{
	grid-area:image;
}

.nav .mega-menu .deptlink a.img img{
	width:100%;
}

.nav .mega-menu .deptlink a.txt{
	grid-area:link;
	font-family:var(--heading-font);
	display:block;
	padding:.5em;
}



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


/*side bar items */
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{
	display:grid;
	grid-template-areas:
		"image title popout";
	grid-template-columns:.5em 1fr 1em;
	align-items:center;
	text-align:left;
	min-height:var(--navbar-dropdown-item-height);
	padding:.5em;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{
	background-color:var(--navbar-sidebar-hover-color);
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink a.txt{
	background-color:var(--navbar-sidebar-hover-color);
	color:var(--white);
}


ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.img{
	display:none;
	grid-area:image;
	padding:.5em;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.txt{
	display:block;
	grid-area:title;
	font-family:var(--heading-font);
	color:var(--red);
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > span.dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		color: var(--navbar-icon-color);
		color:var(--red);
		font-size: 25px;
		right: 0;
	}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink a.txt{
	text-decoration:none;
}

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



.mega-menu-nav .l4 {
	display:none;
}



.nav-wrapper .visible-xs {
	visibility: hidden;
	position: absolute;
}
/* DEVICES EXCEPT MOBILE/tablet */
@media(min-width:991px) {

	/*  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;
	}
	/*  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;
	}
	/*  MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		/* hide */
		visibility: hidden;
		opacity: 0;
		z-index:-1001;
	}
	/*  MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
	ul.nav>li.mega-menu-classic:hover>div,
	ul.nav>li.mega-menu:hover>div {
		visibility: visible;
		opacity: 1;
		z-index:1001;
		background: var(--navbar-popout-color);
	}
	/*  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';
		content:'';
		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.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;
	}
	
}

/* ################## RESPONSIVE STYLES ###################### */

@media(max-width:992px) {

	/*start showing the menu toggle icon */
	.home-hamburger{
		display:block;
		z-index: 1000;
	}

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

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


	/* MENU DROPDOWN TOGGLE - MOBILE */
	span.dropdown-toggle {
		grid-area:toggle;
		align-self:center;
		margin:auto;
		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-icon-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);
	}

	.mega-menu-nav > li > .deptlink{
		grid-template-areas:
			"image link";
		grid-template-columns:3em 1fr;
	}

	/* no need for css arrows if has child item  as we are now doing a vertical menu*/
	.mega-menu-nav .deptlink:after{
		content: '';
	}

	.nav .deptlink{
		display:grid;
		grid-template-areas:
			"image link";
		grid-template-columns:3em 1fr;
		align-items:center;
		min-height:var(--menu-line-height);
	}

	.nav .deptlink a.img{
		grid-area:image;
		padding:.5em;
	}

	.nav .deptlink a.txt{
		grid-area:link;
		padding:.5em;
		color:var(--navbar-link-color);
	}

	/* -------------------------------------------------------------------------------------
	=Top Nav
	------------------------------------------------------------------------------------- */

	div.nav-wrapper>ul.nav {
		position: absolute;
		top: 50px;
		width: 100%;
		background-color:var(--navbar-dropdown-color);
		color:var(--navbar-dropdown-text-color);
		text-align:left;
	}

	ul.nav>li,
	ul.nav>li.classic
	{
		float: none;
		display:grid;
		grid-template-areas:"toggle title"
		"dropdown dropdown";
		grid-template-columns:50px 1fr;
	}

	ul.nav>li>ul.l2,
	ul.nav>li>.menu-drop-down{
		-webkit-box-shadow: none;
		-moz-box-shadow:  none;
		box-shadow: none;
	}

		ul.nav>li>ul>li>ul.l3{
		-webkit-box-shadow: none;
		-moz-box-shadow:  none;
		box-shadow: none;
	
	}


	/* home icon added on mobile */
	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;
		color:var(--navbar-heading-color);
		position: absolute;
		left: 0;
		top: 0;
	}

	/*side bar items */
	.l1 .deptlink,
	.l2 .deptlink,
	.l3 .deptlink{
		grid-area:title;
	}

	/* classic */

	.classic{}

	.classic li.l2{
		float: none;
		display:grid;
		grid-template-areas:"toggle title"
		". dropdown";
		grid-template-columns:50px 1fr;
	}


	ul.nav>li>ul.l2 li:hover {
		background: var(--off-white);
		color:var(--navbar-active-text-color);	
	}

	.nav .classic .deptlink:after{
		display:none;
		content: "";
	}

/* mega menu / mega menu classic */
	.mega-menu li.l0,
	.mega-menu li.l1,
	.mega-menu li.l2,
	.mega-menu-classic li.l2{
		float: none;
		display:block;
		display:grid;
		grid-template-areas:
			"toggle title"
			"dropdown dropdown";
		grid-template-columns:50px 1fr;
		/* margin-left:1em; */
	}

	.mega-menu-classic li.l2{
		float: none;
		display:block;
		display:grid;
		grid-template-areas:" title"
							"dropdown dropdown";
		grid-template-columns:50px 1fr;
	}


	ul.nav>li.active-menu-item>a,
	ul.nav>li.first-menu-item>a {
		background: initial;
		color:initial;
	}

	ul.nav>li>a,
	ul.nav .l1>a{
		grid-area:title;
		font-family:var(--heading-font);
		color:var(--navbar-dropdown-text-color);
		
	}
	ul.nav>li>a:only-child {
		padding: 0 .5em;
	}


	/* 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;
	}
	ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{
		background-color:unset;
	}
	
	/* MENU MEGA */
	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{
		/*no... you can't remove the !important */
		grid-area:title !important;
		line-height: 50px;
		padding: 0;
	}
	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;
	}

	


	/* 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;
		min-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%;
		height:auto !important; /* added possible due to chris playing with images, mobile dropdown stopped working */
		grid-area:dropdown;
	}

	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;
		background: var(--navbar-popout-color);
		margin-bottom:0;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{
		max-width: 50px;
			background-color:transparent;
	}


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

/* 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 {
		background: none;
	}
}


/* TRANSITION EFFECTS */
@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);
	}
	/* 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);
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra extra large devices (large laptops and desktops, 1400px and up)
	Last Updated : 31. 08. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd 
------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1400px) {

	/* defaults */
	:root{
		--site-max-width:1400px;
		--menu-max-width:1400px;
	}

/*accordion dropdown for info panels*/
#pb .accordion{
	background-color:transparent;
}

#pb .accordion .header {
	background-color:transparent;
	font-size: 1.25em;
	text-transform:uppercase;
	margin-bottom: 1rem;
	color: var(--bottom-panel-heading-color);
	padding:0;
	border-radius: 0;
	display: none;
}

#pb .accordion .header img{
	display:none;
}


#pb ul.accordion li.pane {
	display: block !important;
	padding: 0;
	color:var(--black);
	background-color:transparent;
}

#pb ul.accordion li.pane  h3.header{
	display:none;
}

#pb ul.accordion li.pane ul {
	list-style-type: none;
	margin-left: 0em;
}

}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra large devices (large laptops and desktops, 1200px and up) 
	Last Updated : 31. 08. 2023
	Copyright :(c) 2023 Etail Systems Ltd 
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
	:root{
		--site-max-width:1200px;
	 }


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


	
	/*accordion dropdown for info panels*/
	#pb .accordion{
		background-color:transparent;
	}
	
	#pb .accordion .header {
		background-color:transparent;
		font-size: 1.25em;
		text-transform:uppercase;
		margin-bottom: 1rem;
		color: var(--bottom-panel-heading-color);
		padding:0;
		border-radius: 0;
		display: none;
	}
	
	#pb .accordion .header img{
		display:none;
	}
	
	
	#pb ul.accordion li.pane {
		display: block !important;
		padding: 0;
		color:var(--black);
		background-color:transparent;
	}
	
	#pb ul.accordion li.pane  h3.header{
		display:none;
	}
	
	#pb ul.accordion li.pane ul {
		list-style-type: none;
		margin-left: 0em;
	}

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

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}

		/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 2;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 4;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}


	#ptf .ext {
		--spacer-width: calc((100% - var(--site-max-width)) / 2);
		--logo-width:150px;
		--search-width:350px;
		--icons-width:3em;
		--quick-order-width:50px;
		--basket-width:300px;
	}
	
	#pt .ext {

		/* spacer width is used on wider view ports to keep top panel central */
		--spacer-width: calc((100% - var(--site-max-width)) / 2);
		--logo-width:150px;
		--search-width:350px;
		--icons-width:3em;
		--quick-order-width:50px;
		--basket-width:300px;
	}


	/* QuickOrder
	------------------------------------------------------- */
	#pt .qord{
		grid-area:quickorder;
		text-align: left;
		margin:auto;
		position:relative;
	}
	
	#pt #qobtnview{
	
		grid-template-areas:
			"image";
	
	}
	
	
	#pt #qobtnview span{
		display:none;
	
	}

	/*accordion dropdown for info panels*/
	#pb .accordion{
		background-color:transparent;
	}
	
	#pb .accordion .header {
		background-color:transparent;
		font-size: 1.25em;
		text-transform:uppercase;
		margin-bottom: 1rem;
		color: var(--bottom-panel-heading-color);
		padding:0;
		border-radius: 0;
		display: none;
	}
	
	#pb .accordion .header img{
		display:none;
	}
	
	
	#pb ul.accordion li.pane {
		display: block !important;
		padding: 0;
		color:var(--black);
		background-color:transparent;
	}
	
	#pb ul.accordion li.pane  h3.header{
		display:none;
	}
	
	#pb ul.accordion li.pane ul {
		list-style-type: none;
		margin-left: 0em;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Medium devices (landscape tablets, 768px and up)  
	Last Updated : 31. 08. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Swiffy Slider
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 992px)  {


	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	h2{
		font-size:1.8em;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	



	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 2;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 3;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	#ptf .ext {
		grid-template-areas: "vat account";
		grid-template-columns:  1fr 1fr;
		align-items:center;
		padding: .25em 0;
	}


	#a137527296{
		text-align:right;
		font-size:.825em;
	}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

	/* spacer width is used on wider view ports to keep top panel central */
	--spacer-width: calc((100% - var(--site-max-width)) / 2);

	--menu-width:auto;
		
	/*logo width is fixed*/
	--logo-width:1fr;
	
	/*search sits central, scales as required*/
	--search-width:4em;
	
	/*these two elements sit at the end - but we need to balance out the fixed logo width*/
	--contact-width:auto;
	--basket-width:4em;
	
	align-items:center;
	grid-template-columns:auto auto auto auto auto;
	grid-template-areas:
		"quickorder logo logo logo favourite "
		"menulink searchtoggle  account basket basket"
		"search search search search search "
		"nav nav nav nav nav ";	
	}

	/* logo
	------------------------------------------------------- */
	#pt .pbnr {
		grid-area: logo;
		padding:1em 1em;
	}

	/*this still needs dev work - see below for hack version which requires an article */
	#pt .icon.srch{
		grid-area:searchtoggle;
	}

	/* QuickOrder
	------------------------------------------------------- */
	#pt .qord{
		grid-area:quickorder;
		text-align: left;
		margin:auto;
		position:relative;
	}
	
	#pt #qobtnview{
		grid-area:quickorder;
		grid-template-areas:"image";

	}
	#pt #qobtnview span{
		display:none;
	}
	.qord.hidequickord{
		display:none;
	}

	/* Search
	------------------------------------------------------- */
	/* mikes hack of a search toggle */
	#a137527297{
		display:block;
		grid-area:searchtoggle;
		text-align:center;
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#a137527297 button{
		cursor: pointer;
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--white);
		font-size:1.6em;
	}
	
	#pt .search {
		grid-area: search;
		visibility:hidden;
		height:0;
	}

	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		margin:1em;
		padding:0;
		
	}

	/* icons
	------------------------------------------------------- */
	#p52396033{}

	#p52723715,
	#p52461568{
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#p52723714 ul,
	#p52723715 ul,
	#p52396033 ul,
	#p52461568 ul{
		display:grid;
		grid-template-columns: auto;
		align-items:center;
		grid-template-areas:"favourites";
	}

	#p52396033 li.icon,
	#p52461568 li.icon {
		margin-right:0rem;
	}
	
	#p52396033 .icon a.img{}

	#p52723715 .icon a.img,
	#p52461568 .icon a.img{
		background-color:transparent;
		border-radius:0;
		vertical-align:middle;
	}
	#p52723715 img,
	#p52461568 img{
		filter: invert();
	}

	#p52396033 img{
	}

	
	/* nav display 
	------------------------------------------------------- */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index: 1000;
		background-color:var(--red);
	}

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

	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(--off-white);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
	display:none;
	grid-area:image;
	padding:.5em;
}

	.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(--red);
		font-family:var(--heading-font);
		font-size:1em;
		font-weight: normal;
		margin:0;
		margin-left:5.5em;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul,
	.mega-menu-classic div.menu-grid > div.menu-row ul.l2{
		grid-template-columns:repeat(1,1fr);
		grid-gap:1em;
		margin:0 2em;
	}

	.mega-menu-classic div.menu-grid > div.menu-row ul.l3{
		display:none;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink{
		grid-template-columns:8em 1fr;
		grid-template-areas:"image text";
		align-items:center;
		border-radius:.5em;
		background-color:var(--light-blue);
		grid-gap:1em;
		grid-template-rows:auto;
	}

	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image;
		background-color:var(--white);
		align-self:start;
		border-right:5px white solid
	}

	div.menu-grid > div.menu-row ul li .deptlink a.txt{
		align-self:center;
		text-align:left;
		font-size:1.25em;
	}
	
	/* Basket - change layout
	------------------------------------------------------- */

	#pt .bskt #mybskt{
		display:inline-block;
		vertical-align:middle;
		padding:0;
		margin:auto;
		position:relative;

	}

	#pt .bskt {
		position: relative;
		border:none;
		background-color:var(--red);
		align-content:center;
		height:100%;
		border-radius:0;
		text-align:center;
	}

	#pt .bskt #mybskt img.btn,
	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:opacity(1) invert();
		max-height:2rem;	
		width:auto;
	}

	/*items in basket */
	#bsktitems,
	a.bsktitems{
		display:block;
	}

	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:invert();
		height:2em;
		width:auto;
	}
	
	/*items in basket */
	#pt .bskt #bsktitems,
	#pt .bskt a.mybsktlnk{
	    position: absolute;
	    top: 0rem;
	    left: 1.5rem;
	    background-color: var(--off-white);
	    color: var(--dark-grey);
	    border-radius: 50%;
	    text-align: center;
	    width: 1.5rem;
	    height: 1.5rem;
	    line-height: 1.5rem;
	    font-size: .825em;
	    font-weight:600;
	}
	
	#pt .bskt #bsktitems span{
		display:none;
	}
	
	#pt .bskt #bsktvalue,
	#pt .bskt a.bsktvalue{
		display:none;
	}

	#pt .bskt #mybskt a.btn{
		background:none;
		padding:0;
		margin:0;
		border:none;
	}

	/* no hover basket on mobile */
	.hoverbskt {
		display:none !important;
	}

	/*no space for free shipping header on mobile */
	#pt .bskt h4{
		display:none;
	}

	/* QuickOrder
	------------------------------------------------------- */
	.qord {
		width:calc(100% - 2em);
	}

			

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}

	.bdcb {
		display: none;
	}

	/* client specific 
	------------------------------------------------------- */

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of 80% of site width */
		width:90%;
		max-width:90%;
		top: 50%;
		left: 50%;
		padding:1rem;
		transform: translate(-50%,-50%);
		text-align:center;
	}

	/*main banner image proportions have changed - will need a class if used elswhere */
	#pc .bnr a.img img{
		max-height:375px;
		aspect-ratio: 1/1;
	}
	
	
	.sidebyside .imgcont{
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:"text";
	}
	
	
	.sidebyside  .imgcont picture{
		grid-area:image;
		display:none;
	}

	.sidebyside  .centerbox{
		align-content:center;
		display:grid;
		height:100%;
		text-align:center;
	}
	
	.sidebyside  .centerbox h3{
		font-size:1em;
		font-family:var(--text-font);
	}
	
	.sidebyside  .centerbox h3 em{
		font-weight:600;
	}
	
	.sidebyside  .centerbox h2{
		font-size:2em;
	}


	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}


	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

	#pmid.page_checkoutprocess #pm{
		display:grid;
		grid-template-areas:"process"
							"breadcrumb";
		grid-template-columns:1fr;
		grid-column-gap:1em;
		position:relative;
	}




	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		/* padding:0 1em; */
		width:calc(100% - 2em);
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:2
	}


	/* Newsletter 
	------------------------------------------------------- */
	#pf .ext .news {
		grid-area:subscribe;
		text-align:center;
		width:75%;
		margin:auto;
	}

	.news_input_container{
		display:grid;
		grid-template-areas:"email"
			"subscribe";
		grid-template-columns:1fr;
	
	}

	#pf .ext .news input#email {
		border:1px var(--border-color) solid;
		border-radius:var(--border-radius);
		margin-bottom:1em;
	}
	
	#pf .ext .news input#subscribe {
		border:1px var(--red) solid;
		border-radius:var(--border-radius);
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{}

	#pb .ext {
		grid-gap:1em;
		padding:0 1em;
		padding-top: 3em;
		padding-bottom: 3em;
		grid-template-columns: 1fr;

		grid-template-areas:
		"customerservice"
		"about"
		"terms" 
		"details"
		"payment" ;
	}

	#pb .art h2 {
		margin-bottom:1em;
	}
	
	#a113770496{
		text-align:center;
	}

	#a86638599{
		text-align:center;
	}	

	/* accordion - broken at the moment due to some js on product pages grrrrr
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:capitalize;
		margin-bottom:0em;

		border:none;
	}

	#pb .accordion .header img{
		/* filter:brightness(0); */
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		margin-left:2em;
		display:block;
		padding:0;
	}

	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}

	#pbf .ext {
		background-position:top left;
	}


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

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

	 .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

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

	.filter .mnu_filter_search{
		display:grid;
		grid-template-columns:1fr;
		grid-gap:1em;
	}
	
	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	#site.blog {}

	#site.blog #pm{
		display: grid;
		grid-template-columns: repeat(2, calc(50% - 1em));
		grid-gap: var(--spacing);
		grid-auto-flow: dense;
		grid-auto-rows: min-content;
	}

	#pm .blog:not(.art) a.title{
		grid-area:title;
		font-family:var(--heading-font);
		color:var(--dark-blue);
		text-align:center;
		padding:1em;
		font-size:1em
	}

	#pm .blog:not(.art) a.more{
		grid-area:readmore;
		margin:auto;
		padding:0;
		background-color:transparent;
		color:var(--blue);
		font-family:var(--text-font);
		text-align:center;
		font-size:1em;
		border-radius:var(--border-radius);
	}

	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns: repeat(3, 1fr);
	}
		
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}

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

	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-template-columns: 1fr;
		grid-template-areas: "top"
			"left"
			"right"
			"bottom";
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#galleryimages{
		display:none;
	}

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

	.pidescx li span{
		margin-right:0em;
	}

	.pidescx  br{
		display:block;
	}

	.pifile img{
		max-width:150px;
	}

	/* attributeTypePrice_Matrix_Calculator 
	------------------------------------------------------- */
	.attributeTypePrice_Matrix_Calculator .att_container{
		grid-template-areas:"header header "
			"attX attY "
			"calcprice calcprice";
		grid-template-columns: auto auto ;
	}

	.attributeTypePrice_Matrix_Calculator .calc_price{
		text-align:center;
	}


	
	/*attributeTypeDrop_down_list
	------------------------------------------------------- */
	.attributeTypeDrop_down_list select{
		width:100%;
	}


	/* Buy Form
	-------------------------------------------------------*/
	#pi .pibuy {
		margin:0;
		grid-template-columns:repeat(3, auto);
			grid-template-areas:
		"stock stock stock"
		"lease . . "
		"selling-price prev-price  saving "
		"offer-price prev-price  saving "
		"trade-price trade-price . "
		"buy-pane buy-pane buy-pane"
		"cutoff cutoff cutoff"
		"save-for-later save-for-later save-for-later";
	}


	/* Recommended Products 
	------------------------------------------------------*/
	#pi .prec {
		grid-template-columns:1fr;
		grid-template-areas:"title"
			"products";
	
		margin-bottom:2em;
		position:relative;
	}
	
	#pi .prec  h3{

		padding:1em;

	}
	
	
	#pi .prec .carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}


	/* buytogether Products 
	------------------------------------------------------*/
	
	.boughtto{
		padding:1em;
		display:grid;
		grid-template-columns:1fr;
	}

	.boughtto li.prods  {
		grid-template-columns: 1fr auto 1em;
	}

	.boughtto li.total  {
		margin:1em 0;
		grid-column:unset;
		grid-row:unset;
		text-align:center;
		font-size:1.5em;
	}
	
	.boughtto li.btn  {
		grid-column:unset;
		grid-row:unset;
		align-self:end;
		text-align:center;
	}

	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"
			"totals"
			"voucher"
			"shipping"
			"buttons"	
			"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{

		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
			"icon gifttext gifttext gifttext"
			"icon gtentry gtentry gtentry "
			". 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;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
							"breadcrumb";
	}

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


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

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

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

	.page_payment #pm {
		margin: 0 auto;
		position: relative;
		width: var(--site-max-width);
	}

	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


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

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	

	
}
/* ------------------------------------------------------------------------------------
	SCREEN - Small devices (portrait tablets and large phones, 600px and up)  
	Last Updated : 25. 03. 2025
	Copyright :(c) 2025 Etail Systems Ltd 
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Swiffy Slider
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */


@media only screen and (min-width: 600px) and (max-width:768px) {
	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	h2{
		font-size:1.8em;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}


	.carousel:has(.twoThirdWidth),
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	
	.ctas{
		grid-column: 1/-1;
	}

	.ctas .artp{
		display:grid;
		grid-template-columns: 1fr;
	}



	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 1;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	#ptf .ext {
		grid-template-areas: "vat account";
		grid-template-columns:  1fr 1fr;
		align-items:center;
		padding: .25em 0;
	}


	#a137527296{
		text-align:right;
		font-size:.825em;
	}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

	/* spacer width is used on wider view ports to keep top panel central */
	--spacer-width: calc((100% - var(--site-max-width)) / 2);

	--menu-width:auto;
		
	/*logo width is fixed*/
	--logo-width:1fr;
	
	/*search sits central, scales as required*/
	--search-width:4em;
	
	/*these two elements sit at the end - but we need to balance out the fixed logo width*/
	--contact-width:auto;
	--basket-width:4em;
	
	align-items:center;
	grid-template-columns:auto auto auto auto auto;
	grid-template-areas:
		"quickorder logo logo logo favourite "
		"menulink searchtoggle  account basket basket"
		"search search search search search "
		"nav nav nav nav nav ";	
	}

	/* logo
	------------------------------------------------------- */
	#pt .pbnr {
		grid-area: logo;
		padding:1em 1em;
	}

	/*this still needs dev work - see below for hack version which requires an article */
	#pt .icon.srch{
		grid-area:searchtoggle;
	}

	/* QuickOrder
	------------------------------------------------------- */
	#pt .qord{
		grid-area:quickorder;
		text-align: left;
		margin:auto;
		position:relative;
	}
	
	#pt #qobtnview{
		grid-area:quickorder;
		grid-template-areas:"image";

	}
	#pt #qobtnview span{
		display:none;
	}
	.qord.hidequickord{
		display:none;
	}

	/* Search
	------------------------------------------------------- */
	/* mikes hack of a search toggle */
	#a137527297{
		display:block;
		grid-area:searchtoggle;
		text-align:center;
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#a137527297 button{
		cursor: pointer;
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--white);
		font-size:1.6em;
	}
	
	#pt .search {
		grid-area: search;
		visibility:hidden;
		height:0;
	}

	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		margin:1em;
		padding:0;
		
	}

	/* icons
	------------------------------------------------------- */
	#p52396033{}

	#p52723715,
	#p52461568{
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#p52723714 ul,
	#p52723715 ul,
	#p52396033 ul,
	#p52461568 ul{
		display:grid;
		grid-template-columns: auto;
		align-items:center;
		grid-template-areas:"favourites";
	}

	#p52396033 li.icon,
	#p52461568 li.icon {
		margin-right:0rem;
	}
	
	#p52396033 .icon a.img{}

	#p52723715 .icon a.img,
	#p52461568 .icon a.img{
		background-color:transparent;
		border-radius:0;
		vertical-align:middle;
	}
	#p52723715 img,
	#p52461568 img{
		filter: invert();
	}

	#p52396033 img{
	}

	
	/* nav display 
	------------------------------------------------------- */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index: 1000;
		background-color:var(--red);
	}

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

	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(--off-white);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
	display:none;
	grid-area:image;
	padding:.5em;
}

	.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(--red);
		font-family:var(--heading-font);
		font-size:1em;
		font-weight: normal;
		margin:0;
		margin-left:5.5em;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul,
	.mega-menu-classic div.menu-grid > div.menu-row ul.l2{
		grid-template-columns:repeat(1,1fr);
		grid-gap:1em;
		margin:0 2em;
	}

	.mega-menu-classic div.menu-grid > div.menu-row ul.l3{
		display:none;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink{
		grid-template-columns:8em 1fr;
		grid-template-areas:"image text";
		align-items:center;
		border-radius:.5em;
		background-color:var(--light-blue);
		grid-gap:1em;
		grid-template-rows:auto;
	}

	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image;
		background-color:var(--white);
		align-self:start;
		border-right:5px white solid
	}

	div.menu-grid > div.menu-row ul li .deptlink a.txt{
		align-self:center;
		text-align:left;
		font-size:1.25em;
	}
	
	/* Basket - change layout
	------------------------------------------------------- */

	#pt .bskt #mybskt{
		display:inline-block;
		vertical-align:middle;
		padding:0;
		margin:auto;
		position:relative;

	}

	#pt .bskt {
		position: relative;
		border:none;
		background-color:var(--red);
		align-content:center;
		height:100%;
		border-radius:0;
		text-align:center;
	}

	#pt .bskt #mybskt img.btn,
	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:opacity(1) invert();
		max-height:2rem;	
		width:auto;
	}

	/*items in basket */
	#bsktitems,
	a.bsktitems{
		display:block;
	}

	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:invert();
		height:2em;
		width:auto;
	}
	
	/*items in basket */
	#pt .bskt #bsktitems,
	#pt .bskt a.mybsktlnk{
	    position: absolute;
	    top: 0rem;
	    left: 1.5rem;
	    background-color: var(--off-white);
	    color: var(--dark-grey);
	    border-radius: 50%;
	    text-align: center;
	    width: 1.5rem;
	    height: 1.5rem;
	    line-height: 1.5rem;
	    font-size: .825em;
	    font-weight:600;
	}
	
	#pt .bskt #bsktitems span{
		display:none;
	}
	
	#pt .bskt #bsktvalue,
	#pt .bskt a.bsktvalue{
		display:none;
	}

	#pt .bskt #mybskt a.btn{
		background:none;
		padding:0;
		margin:0;
		border:none;
	}

	/* no hover basket on mobile */
	.hoverbskt {
		display:none !important;
	}

	/*no space for free shipping header on mobile */
	#pt .bskt h4{
		display:none;
	}

	/* QuickOrder
	------------------------------------------------------- */
	.qord {
		width:calc(100% - 2em);
	}

			

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}

	.bdcb {
		display: none;
	}

	/* client specific 
	------------------------------------------------------- */

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of 80% of site width */
		width:90%;
		max-width:90%;
		top: 50%;
		left: 50%;
		padding:1rem;
		transform: translate(-50%,-50%);
		text-align:center;
	}

	/*main banner image proportions have changed - will need a class if used elswhere */
	#pc .bnr a.img img{
		max-height:375px;
		aspect-ratio: 1/1;
	}
	
	
	.sidebyside .imgcont{
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:"text";
	}
	
	
	.sidebyside  .imgcont picture{
		grid-area:image;
		display:none;
	}

	.sidebyside  .centerbox{
		align-content:center;
		display:grid;
		height:100%;
		text-align:center;
	}
	
	.sidebyside  .centerbox h3{
		font-size:1em;
		font-family:var(--text-font);
	}
	
	.sidebyside  .centerbox h3 em{
		font-weight:600;
	}
	
	.sidebyside  .centerbox h2{
		font-size:2em;
	}


	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}


	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

		#pmid.page_checkoutprocess #pm{
		display:grid;
		grid-template-areas:"process"
							"breadcrumb";
		grid-template-columns:1fr;
		grid-column-gap:1em;
		position:relative;
	}



	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		/* padding:0 1em; */
		width:calc(100% - 2em);
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:2
	}


	/* Newsletter 
	------------------------------------------------------- */
	#pf .ext .news {
		grid-area:subscribe;
		text-align:center;
		width:75%;
		margin:auto;
	}

	.news_input_container{
		display:grid;
		grid-template-areas:"email"
			"subscribe";
		grid-template-columns:1fr;
	
	}

	#pf .ext .news input#email {
		border:1px var(--border-color) solid;
		border-radius:var(--border-radius);
		margin-bottom:1em;
	}
	
	#pf .ext .news input#subscribe {
		border:1px var(--red) solid;
		border-radius:var(--border-radius);
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{}

	#pb .ext {
		grid-gap:1em;
		padding:0 1em;
		padding-top: 3em;
		padding-bottom: 3em;
		grid-template-columns: 1fr;

		grid-template-areas:
		"customerservice"
		"about"
		"terms" 
		"details"
		"payment" ;
	}

	#pb .art h2 {
		margin-bottom:1em;
	}
	
	#a113770496{
		text-align:center;
	}

	#a86638599{
		text-align:center;
	}	

	/* accordion - broken at the moment due to some js on product pages grrrrr
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:capitalize;
		margin-bottom:0em;

		border:none;
	}

	#pb .accordion .header img{
		/* filter:brightness(0); */
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		margin-left:2em;
		display:block;
		padding:0;
	}

	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}

	#pbf .ext {
		background-position:top left;
	}


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

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

	 .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

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

	.filter .mnu_filter_search{
		display:grid;
		grid-template-columns:1fr;
		grid-gap:1em;
	}
	
	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	#site.blog {}

	#site.blog #pm{
		display: grid;
		grid-template-columns: repeat(2, calc(50% - 1em));
		grid-gap: var(--spacing);
		grid-auto-flow: dense;
		grid-auto-rows: min-content;
	}

	#pm .blog:not(.art) a.title{
		grid-area:title;
		font-family:var(--heading-font);
		color:var(--dark-blue);
		text-align:center;
		padding:1em;
		font-size:1em
	}

	#pm .blog:not(.art) a.more{
		grid-area:readmore;
		margin:auto;
		padding:0;
		background-color:transparent;
		color:var(--blue);
		font-family:var(--text-font);
		text-align:center;
		font-size:1em;
		border-radius:var(--border-radius);
	}

	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:1fr;
	}
		
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}

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

	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-template-columns: 1fr;
		grid-template-areas: "top"
			"left"
			"right"
			"bottom";
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#galleryimages{
		display:none;
	}

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

	.pidescx li span{
		margin-right:0em;
	}

	.pidescx  br{
		display:block;
	}

	.pifile img{
		max-width:150px;
	}

	/* attributeTypePrice_Matrix_Calculator 
	------------------------------------------------------- */
	.attributeTypePrice_Matrix_Calculator .att_container{
		grid-template-areas:"header header "
			"attX attY "
			"calcprice calcprice";
		grid-template-columns: auto auto ;
	}

	.attributeTypePrice_Matrix_Calculator .calc_price{
		text-align:center;
	}


	
	/*attributeTypeDrop_down_list
	------------------------------------------------------- */
	.attributeTypeDrop_down_list select{
		width:100%;
	}


	/* Buy Form
	-------------------------------------------------------*/
	#pi .pibuy {
		margin:0;
		grid-template-columns:repeat(3, auto);
			grid-template-areas:
		"stock stock stock"
		"lease . . "
		"selling-price prev-price  saving "
		"offer-price prev-price  saving "
		"trade-price trade-price . "
		"buy-pane buy-pane buy-pane"
		"cutoff cutoff cutoff"
		"save-for-later save-for-later save-for-later";
	}


	/* Recommended Products 
	------------------------------------------------------*/
	#pi .prec {
		grid-template-columns:1fr;
		grid-template-areas:"title"
			"products";
	
		margin-bottom:2em;
		position:relative;
	}
	
	#pi .prec  h3{

		padding:1em;

	}
	
	
	#pi .prec .carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}


	/* buytogether Products 
	------------------------------------------------------*/
	
	.boughtto{
		padding:1em;
		display:grid;
		grid-template-columns:1fr;
	}

	.boughtto li.prods  {
		grid-template-columns: 1fr auto 1em;
	}

	.boughtto li.total  {
		margin:1em 0;
		grid-column:unset;
		grid-row:unset;
		text-align:center;
		font-size:1.5em;
	}
	
	.boughtto li.btn  {
		grid-column:unset;
		grid-row:unset;
		align-self:end;
		text-align:center;
	}

	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"
			"totals"
			"voucher"
			"shipping"
			"buttons"	
			"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{

		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
			"icon gifttext gifttext gifttext"
			"icon gtentry gtentry gtentry "
			". 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;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
							"breadcrumb";
	}

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


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

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

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

	.page_payment #pm {
		margin: 0 auto;
		position: relative;
		width: var(--site-max-width);
	}

	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


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

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	

	
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra small devices (phones, 600px and down) 
	Last Updated : 25. 03. 2025
	Copyright :(c) 2024 Etail Systems Ltd 
	Author : Etail Systems Ltd

	Table of Contents
		=Definitions
		=SiteContainers
		=Grid Layout
		=Swiffy Slider
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		
		=Blog
		=SearchHeader / SearchFooter 	
		=FilterSearch 		
		=Department
		=FeaturedProducts 
		=ProductPage 
		=Basket
		=Checkout Process
		=MyAccount
		=ConfirmationPage

------------------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {

	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
	}

	h2{
		font-size:1.8em;
	}

	/* -------------------------------------------------------------------------------------
	=SiteContainers
	------------------------------------------------------------------------------------- */
	#cont {
		margin: auto;
	}
	
	#site {
		background-color: var(--background-color);
	}


	
	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	
	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}


	.carousel:has(.twoThirdWidth),
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	
	.ctas{
		grid-column: 1/-1;
	}

	.ctas .artp{
		display:grid;
		grid-template-columns: 1fr;
	}



	/* -------------------------------------------------------------------------------------
	=Swiffy Slider
	------------------------------------------------------------------------------------- */
	.swiffy-slider {}
	.swiffy-slider ul, .swiffy-slider li {}
	
	.swiffy-slider .slidecont p {
		padding: 0;
		margin: 0;
	}
	
	.slider-product {
		--swiffy-slider-item-count: 2;
	}

	.slider-cta {
		--swiffy-slider-item-count: 1;
	}
	
	/* product sliders - code needs some tweaking */
	.carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	/* department sliders - code needs some tweaking */
	.carousel.dept .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}
	
	.carousel.dept .deptlink a.txt {}

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	#ptf .ext {
		grid-template-areas: "vat account";
		grid-template-columns:  1fr 1fr;
		align-items:center;
		padding: .25em 0;
	}


	#a137527296{
		text-align:right;
		font-size:.825em;
	}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt .ext {

	/* spacer width is used on wider view ports to keep top panel central */
	--spacer-width: calc((100% - var(--site-max-width)) / 2);

	--menu-width:auto;
		
	/*logo width is fixed*/
	--logo-width:1fr;
	
	/*search sits central, scales as required*/
	--search-width:4em;
	
	/*these two elements sit at the end - but we need to balance out the fixed logo width*/
	--contact-width:auto;
	--basket-width:4em;
	
	align-items:center;
	grid-template-columns:auto auto auto auto auto;
	grid-template-areas:
		"quickorder logo logo logo favourite "
		"menulink searchtoggle  account basket basket"
		"search search search search search "
		"nav nav nav nav nav ";	
	}

	/* logo
	------------------------------------------------------- */
	#pt .pbnr {
		grid-area: logo;
		padding:1em 1em;
	}

	/*this still needs dev work - see below for hack version which requires an article */
	#pt .icon.srch{
		grid-area:searchtoggle;
	}

	/* QuickOrder
	------------------------------------------------------- */
	#pt .qord{
		grid-area:quickorder;
		text-align: left;
		margin:auto;
		position:relative;
	}
	
	#pt #qobtnview{
		grid-area:quickorder;
		grid-template-areas:"image";

	}
	#pt #qobtnview span{
		display:none;
	}
	.qord.hidequickord{
		display:none;
	}

	/* Search
	------------------------------------------------------- */
	/* mikes hack of a search toggle */
	#a137527297{
		display:block;
		grid-area:searchtoggle;
		text-align:center;
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#a137527297 button{
		cursor: pointer;
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--white);
		font-size:1.6em;
	}
	
	#pt .search {
		grid-area: search;
		visibility:hidden;
		height:0;
	}

	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		margin:1em;
		padding:0;
		
	}

	/* icons
	------------------------------------------------------- */
	#p52396033{}

	#p52723715,
	#p52461568{
		background-color:var(--red);
		height:100%;
		align-content:center;
		margin:0;
	}

	#p52723714 ul,
	#p52723715 ul,
	#p52396033 ul,
	#p52461568 ul{
		display:grid;
		grid-template-columns: auto;
		align-items:center;
		grid-template-areas:"favourites";
	}

	#p52396033 li.icon,
	#p52461568 li.icon {
		margin-right:0rem;
	}
	
	#p52396033 .icon a.img{}

	#p52723715 .icon a.img,
	#p52461568 .icon a.img{
		background-color:transparent;
		border-radius:0;
		vertical-align:middle;
	}
	#p52723715 img,
	#p52461568 img{
		filter: invert();
	}

	#p52396033 img{
	}

	
	/* nav display 
	------------------------------------------------------- */
	.home-hamburger{
		grid-area:menulink;
		display:block;
		z-index: 1000;
		background-color:var(--red);
	}

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

	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(--off-white);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
	display:none;
	grid-area:image;
	padding:.5em;
}

	.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(--red);
		font-family:var(--heading-font);
		font-size:1em;
		font-weight: normal;
		margin:0;
		margin-left:5.5em;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul,
	.mega-menu-classic div.menu-grid > div.menu-row ul.l2{
		grid-template-columns:repeat(1,1fr);
		grid-gap:1em;
		margin:0 2em;
	}

	.mega-menu-classic div.menu-grid > div.menu-row ul.l3{
		display:none;
	}
	
	div.menu-grid > div.menu-row ul li .deptlink{
		grid-template-columns:8em 1fr;
		grid-template-areas:"image text";
		align-items:center;
		border-radius:.5em;
		background-color:var(--light-blue);
		grid-gap:1em;
		grid-template-rows:auto;
	}

	div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-area:image;
		background-color:var(--white);
		align-self:start;
		border-right:5px white solid
	}

	div.menu-grid > div.menu-row ul li .deptlink a.txt{
		align-self:center;
		text-align:left;
		font-size:1.25em;
	}
	
	/* Basket - change layout
	------------------------------------------------------- */

	#pt .bskt #mybskt{
		display:inline-block;
		vertical-align:middle;
		padding:0;
		margin:auto;
		position:relative;

	}

	#pt .bskt {
		position: relative;
		border:none;
		background-color:var(--red);
		align-content:center;
		height:100%;
		border-radius:0;
		text-align:center;
	}

	#pt .bskt #mybskt img.btn,
	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:opacity(1) invert();
		max-height:2rem;	
		width:auto;
	}

	/*items in basket */
	#bsktitems,
	a.bsktitems{
		display:block;
	}

	#pt .bskt #mybskt a.btn img{
		margin:0;
		filter:invert();
		height:2em;
		width:auto;
	}
	
	/*items in basket */
	#pt .bskt #bsktitems,
	#pt .bskt a.mybsktlnk{
	    position: absolute;
	    top: 0rem;
	    left: 1.5rem;
	    background-color: var(--off-white);
	    color: var(--dark-grey);
	    border-radius: 50%;
	    text-align: center;
	    width: 1.5rem;
	    height: 1.5rem;
	    line-height: 1.5rem;
	    font-size: .825em;
	    font-weight:600;
	}
	
	#pt .bskt #bsktitems span{
		display:none;
	}
	
	#pt .bskt #bsktvalue,
	#pt .bskt a.bsktvalue{
		display:none;
	}

	#pt .bskt #mybskt a.btn{
		background:none;
		padding:0;
		margin:0;
		border:none;
	}

	/* no hover basket on mobile */
	.hoverbskt {
		display:none !important;
	}

	/*no space for free shipping header on mobile */
	#pt .bskt h4{
		display:none;
	}

	/* QuickOrder
	------------------------------------------------------- */
	.qord {
		width:calc(100% - 2em);
	}

			

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{}

	.bdcb {
		display: none;
	}

	/* client specific 
	------------------------------------------------------- */

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of 80% of site width */
		width:90%;
		max-width:90%;
		top: 50%;
		left: 50%;
		padding:1rem;
		transform: translate(-50%,-50%);
		text-align:center;
	}

	/*main banner image proportions have changed - will need a class if used elswhere */
	#pc .bnr a.img img{
		max-height:375px;
		aspect-ratio: 1/1;
	}
	
	
	.sidebyside .imgcont{
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:"text";
	}
	
	
	.sidebyside  .imgcont picture{
		grid-area:image;
		display:none;
	}

	.sidebyside  .centerbox{
		align-content:center;
		display:grid;
		height:100%;
		text-align:center;
	}
	
	.sidebyside  .centerbox h3{
		font-size:1em;
		font-family:var(--text-font);
	}
	
	.sidebyside  .centerbox h3 em{
		font-weight:600;
	}
	
	.sidebyside  .centerbox h2{
		font-size:2em;
	}


	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}


	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{
		display:block;
	}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width) - 2rem);
		display: block;
		vertical-align: top;
		margin:0 1rem;
	}


	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}		
	
	#pmid.page_buy #pm.pmfull{
		width:calc(100% - 2rem)
	}

			#pmid.page_checkoutprocess #pm{
		display:grid;
		grid-template-areas:"process"
							"breadcrumb";
		grid-template-columns:1fr;
		grid-column-gap:1em;
		position:relative;
	}



	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {
		position: relative;
		/* padding:0 1em; */
		width:calc(100% - 2em);
	}

	#pf #carouselArtImgs {
		--swiffy-slider-item-count:2
	}


	/* Newsletter 
	------------------------------------------------------- */
	#pf .ext .news {
		grid-area:subscribe;
		text-align:center;
		width:75%;
		margin:auto;
	}

	.news_input_container{
		display:grid;
		grid-template-areas:"email"
			"subscribe";
		grid-template-columns:1fr;
	
	}

	#pf .ext .news input#email {
		border:1px var(--border-color) solid;
		border-radius:var(--border-radius);
		margin-bottom:1em;
	}
	
	#pf .ext .news input#subscribe {
		border:1px var(--red) solid;
		border-radius:var(--border-radius);
	}

	/* -------------------------------------------------------------------------------------
	=Bottom Panel #pb
	------------------------------------------------------------------------------------- */
	#pb{}

	#pb .ext {
		grid-gap:1em;
		padding:0 1em;
		padding-top: 3em;
		padding-bottom: 3em;
		grid-template-columns: 1fr;

		grid-template-areas:
		"customerservice"
		"about"
		"terms" 
		"details"
		"payment" ;
	}

	#pb .art h2 {
		margin-bottom:1em;
	}
	
	#a113770496{
		text-align:center;
	}

	#a86638599{
		text-align:center;
	}	

	/* accordion - broken at the moment due to some js on product pages grrrrr
	------------------------------------------------------- */
	#pb .ext h3.header{
		display:none;
	}

	#pb .accordion{
		width:100%;
	}

	
	#pb .accordion .header {
		font-family: var(--heading-font);
		font-weight: var(--heading-font-weight);
		font-size: 1.25em;
		cursor: pointer;
		border-radius: 0;
		margin: 0;
		background-color:transparent;
		color:var(--white);
		text-transform:capitalize;
		margin-bottom:0em;

		border:none;
	}

	#pb .accordion .header img{
		/* filter:brightness(0); */
	}

	#pb .accordion h3{
		display:none;
	}

	#pb .accordion .pane{
		display: none;
		padding:0em;
		color:var(--black);
		background-color:transparent;
	}

	#pb .accordion .pane ul{
		margin:0;
		margin-left:2em;
		display:block;
		padding:0;
	}

	

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf{}

	#pbf .ext {
		background-position:top left;
	}


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

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

	 .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

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

	.filter .mnu_filter_search{
		display:grid;
		grid-template-columns:1fr;
		grid-gap:1em;
	}
	
	
	/* -------------------------------------------------------------------------------------
	=Blog
	------------------------------------------------------------------------------------- */
	#site.blog {}

	#site.blog #pm{
		display: grid;
		grid-template-columns: repeat(2, calc(50% - 1em));
		grid-gap: var(--spacing);
		grid-auto-flow: dense;
		grid-auto-rows: min-content;
	}

	#pm .blog:not(.art) a.title{
		grid-area:title;
		font-family:var(--heading-font);
		color:var(--dark-blue);
		text-align:center;
		padding:1em;
		font-size:1em
	}

	#pm .blog:not(.art) a.more{
		grid-area:readmore;
		margin:auto;
		padding:0;
		background-color:transparent;
		color:var(--blue);
		font-family:var(--text-font);
		text-align:center;
		font-size:1em;
		border-radius:var(--border-radius);
	}

	
	/* -------------------------------------------------------------------------------------
	=SearchHeader / SearchFooter
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=FilterSearch
	------------------------------------------------------------------------------------- */
	
	/* -------------------------------------------------------------------------------------
	=Department
	------------------------------------------------------------------------------------- */

	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:1fr;
	}
		
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}

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

	
	/* -------------------------------------------------------------------------------------
	=ProductPage
	------------------------------------------------------------------------------------- */
	#pi .main {
		grid-template-columns: 1fr;
		grid-template-areas: "top"
			"left"
			"right"
			"bottom";
	}

	#pi .gallery #mainimages{
		position:unset;
		top:0;
	}

	#galleryimages{
		display:none;
	}

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

	.pidescx li span{
		margin-right:0em;
	}

	.pidescx  br{
		display:block;
	}

	.pifile img{
		max-width:150px;
	}

	/* attributeTypePrice_Matrix_Calculator 
	------------------------------------------------------- */
	.attributeTypePrice_Matrix_Calculator .att_container{
		grid-template-areas:"header header "
			"attX attY "
			"calcprice calcprice";
		grid-template-columns: auto auto ;
	}

	.attributeTypePrice_Matrix_Calculator .calc_price{
		text-align:center;
	}


	
	/*attributeTypeDrop_down_list
	------------------------------------------------------- */
	.attributeTypeDrop_down_list select{
		width:100%;
	}


	/* Buy Form
	-------------------------------------------------------*/
	#pi .pibuy {
		margin:0;
		grid-template-columns:repeat(3, auto);
			grid-template-areas:
		"stock stock stock"
		"lease . . "
		"selling-price prev-price  saving "
		"offer-price prev-price  saving "
		"trade-price trade-price . "
		"buy-pane buy-pane buy-pane"
		"cutoff cutoff cutoff"
		"save-for-later save-for-later save-for-later";
	}


	/* Recommended Products 
	------------------------------------------------------*/
	#pi .prec {
		grid-template-columns:1fr;
		grid-template-areas:"title"
			"products";
	
		margin-bottom:2em;
		position:relative;
	}
	
	#pi .prec  h3{

		padding:1em;

	}
	
	
	#pi .prec .carousel.prod .swiffy-slider {
		--swiffy-slider-item-count: 2;
	}


	/* buytogether Products 
	------------------------------------------------------*/
	
	.boughtto{
		padding:1em;
		display:grid;
		grid-template-columns:1fr;
	}

	.boughtto li.prods  {
		grid-template-columns: 1fr auto 1em;
	}

	.boughtto li.total  {
		margin:1em 0;
		grid-column:unset;
		grid-row:unset;
		text-align:center;
		font-size:1.5em;
	}
	
	.boughtto li.btn  {
		grid-column:unset;
		grid-row:unset;
		align-self:end;
		text-align:center;
	}

	
	/* -------------------------------------------------------------------------------------
	=Basket
	------------------------------------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			"lines"
			"totals"
			"voucher"
			"shipping"
			"buttons"	
			"prompane";
		align-items:start;
		margin-bottom:4rem;
	}


	#pm .bskt  .line{

		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			"icon giftwrap giftwrap giftwrap"
			"icon gifttext gifttext gifttext"
			"icon gtentry gtentry gtentry "
			". 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;
	}
	
	/* -------------------------------------------------------------------------------------
	=Checkout Process
	------------------------------------------------------------------------------------- */
	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
							"breadcrumb";
	}

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


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

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

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

	.page_payment #pm {
		margin: 0 auto;
		position: relative;
		width: var(--site-max-width);
	}

	/* member pages */
	.page_useraccount .pmfull,
	.page_orderinfo .pmfull{
		background-color: var(--main-panel-color);
		width: var(--site-max-width);
		padding:0;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		margin-right: 0;
	}
	
	/* -------------------------------------------------------------------------------------
	=MyAccount
	------------------------------------------------------------------------------------- */
	/*account menu panel*/
	#pmam {
		width: 0;
		margin:0;
	}

	#pmam + .pmfull{
		width: calc(var(--site-max-width) - 2rem);
	}


	/* show/hide menu button */
	#mamtrigbtn {
		display:block;
	}


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

	/* -------------------------------------------------------------------------------------
	=ConfirmationPage
	------------------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	

	
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 basecomponents 2024
	Last Updated : 18. 01. 2024
	Copyright :(c) 2024 Etail Systems Ltd 
	Author : Etail Systems Ltd

------------------------------------------------------------------------------------- */


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

.ui-widget.ui-widget-content.ui-autocomplete {
	margin: auto;
	padding: 0;
	border-radius: 0;
	max-height: 332px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid var(--border-color);
	z-index: 2000;
	background-color: var(--white)
}

.ui-autocomplete li.ui-menu-item {
	cursor: pointer;
	margin: 0;
	display: block;
}

.ui-menu-item a {
	display: grid;
	grid-template-columns: 3em 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
	align-items:center;
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}
.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */
#ewis h3 {
	font-weight: var(--heading-font-weight);
}

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

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

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

/* -------------------------------------------------------------------------------------
=PopupDialog 
------------------------------------------------------------------------------------- */
#popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

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

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

#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

#popupdialog a {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing)
}

#popupdialog .item .title {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--text-heading-color);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

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

#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* this element needs a class 
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}*/
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}






/* -------------------------------------------------------------------------------------
=HoverBsket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	background-color: var(--off-white);
	border:none;
	width: calc(var(--basket-width) - 1em);
	border-top:none;
	padding:.5em;
	z-index:999999;
	text-align:center;
	/* margin-top:2em; */

}

.hoverbskt h3 {
	/*pointless title - hide it */
	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;
}


.hoverbsktadd p.descr{
	display:none;
}

.hoverbskt .lines {
	max-height:260px;
	overflow-y:scroll;
}
.hoverbskt .lines .item {
    display:grid;
    grid-template-columns:64px 1fr;
    grid-gap:.5em;
    padding-right:.5em;
}

.hoverbskt .lines .item a.title,
.hoverbskt .lines .item p.sample {
	color:var(--textSubHeadingColor);
	font-weight:bolder;
	text-align:left;
}
.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
}

.hoverbskt .lines .item p.descr {
	display:none;
}
.hoverbskt .lines .item p.qty {
}

.hoverbskt .lines .item p.price {
	grid-column:2;
	text-align:right;
}
.hoverbskt h4.count {
	padding:.5em 0;
	margin-top:.5em;
	text-align: right;
	font-size: 0.825em;
	border-top: 1px var(--border-color) solid;
}

.hoverbskt h4.total {
	text-align: right;
	font-size: 0.825em;
	font-weight:bolder;
	padding-bottom:.5em;
	margin-bottom:1em;
	border-bottom: 1px var(--border-color) solid;
}

.hoverbskt a.btn {
	display:block;
	background-color:var(--checkout-button);
	border:1px var(--checkout-button) solid;
}

/* -------------------------------------------------------------------------------------
=Out of Stock, Direct Despatch
------------------------------------------------------------------------------------- */

.ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {
	width: 500px !important;
	max-width: 80vw;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing);
	background-color: var(--white);
	color: var(--orange);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

/*better use of classes would be nice! ;) */
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	--border-color: var(--button-border-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}
.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}

/* -------------------------------------------------------------------------------------
=Tooltips
------------------------------------------------------------------------------------- */
.helpicon {
	display: inline-block;
	position: absolute;
	top: .5rem;
	right: .5rem;
	text-align: left;
}

.helpicon h3 {
	margin: var(--half-spacing) 0;
}

.helpicon .lefttooltip {
	min-width: 100px;
	max-width: 200px;
	top: 50%;
	right: 100%;
	margin-right: 1rem;
	transform: translate(0, -50%);
	padding: var(--half-spacing);
	color: var(--text-color);
	background-color: var(--white);
	font-weight: normal;
	font-size: .825em;
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	display: none;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
	display: block;
	line-height: 1;
}

.helpicon .lefttooltip i {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}

.helpicon .lefttooltip i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	background-color: #FFFFE0;
	border: 1px solid #DCA;
}



/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */
ul.accordion {
	grid-column: 1/-1;
	list-style: none;
}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	display: grid;
	grid-template-areas:"expand question ";
	grid-gap: 1rem;
	grid-template-columns: 1rem 1fr;
	font-family:var(--text-font);
	font-size: 1em;
	cursor: pointer;
	padding: 1rem 0;
	transition: var(--transition);
	text-transform:capitalize;
	/* margin:.5em 0; */
	border-top:1px solid var(--grey)
}

.accordion .header img {
	grid-area: expand;
	cursor: pointer;
}

.accordion .header .showplus {
	
}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
ul.accordion li.pane.first {}

ul.accordion li.pane {
	display: none;
}
 ul.accordion li.pane br{}

ul.accordion li.pane p {
	font-size:1em;
}

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

ul.accordion li.pane li {}

ul li.title {}


/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
.etailcopy {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem;
	padding:.5em;
}

p.etail {
	text-align:left;
	margin:0;
}

p.etail a {
}

p.copy {
	text-align:right;
	margin:0;
}

p.copy span {}


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

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

[type=checkbox][role=switch] {
	--background-color: var(--red);
	--border-color: var(--red);
	--border-width:2px;
	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(--red);
	--border-color: var(--red);
}

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

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

[type=checkbox][role=switch]:checked {
	background-image: none;
}

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



/*readmore stuff 
------------------------------------------------------- */
.more{
	margin:1em 0;
}

.more.noexpand{
	display:none;
	transition: var(--transition);
	
}

.showmorecss,
.showlesscss,
.showmore,
.showless{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:.825em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	color:var(--orange);
	text-transform:capitalize;
	transition: var(--transition);
	
}


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

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

li.info.req{
	color:var(--error-color)
}

li.info.acct{
	color:var(--error-color);
	font-size:2em;
}

li.info.acct a{
	margin-left:.5em;
	text-decoration:underline;
}

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

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

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

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

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


/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	grid-column: 1/-1;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
.form img {
	display:inline;
	vertical-align:top;
	width: auto !important;
	height: auto
}

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

.form ul li {
	list-style: none;
	display: block;
}

.form form {
	margin: auto;
}

.form .help {
	color: var(--help-color);
	font-size: small;
}

.form label {
	display: block
}

.form li select, .form li textarea, .form li input {
	margin-bottom: var(--spacing);
	max-width:100%;
}

input:required:invalid {
	border-color: var(--error-color);
	border-width:2px;
}

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

.form li.header {
}

.form li.header h3{
	font-family:var(--text-font);
	font-size:1em;
}

.form label img {
	display: inline-block;
}

.form li.help, .form li.info {
	font-size: .825em;
}

.form form {}

.form form .submit {
	display: block;
}

.form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
	margin-bottom:1rem;
}

/* fix for checklists*/
.form li ul.check {
	font-weight:bold;
}
.form li ul.check input {
	margin-right: var(--half-spacing);
	width:auto;
}

/* fix for radio buttons */
.form ul.radio {}
.form li ul.radio input {
	margin-right: var(--half-spacing);
	width:auto;
}

/* fix for subscribe checkbox */
.form li.subscribe input {
	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;
}

/*image uploader */
.imgupl{
}

.imgupl img{
	margin:0;
	margin-right:auto;
}



/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */
.page_signin .form {
	margin: auto;
	max-width:50%;
}

.page_signin .art{
	margin: auto;
	max-width:50%;
}

.page_signin .form label {
	display: block;
}

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

.page_signin .form input + img{
	display:inline-block;
	vertical-align:top;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */
.page_register .form {
	margin: auto;
	max-width:50%;
}

.page_register .form label {
	display: block;
}

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

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


/* Forgotten Password
------------------------------------------------------- */
.page_passwordrequest .form#pwrem {
	width: 50%;
	margin: auto;
}

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

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

.page_passwordrequest form h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}



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

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select, .ui-widget textarea, .ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */
.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 80vw !important;
	max-width: 640px;
	display: none;
}



/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd, #popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	/* display: none; */
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

@media only screen and (max-width: 768px) {
	.hoverbsktadd, #popupdialog {
		width: calc(var(--site-max-width) - 4em);
	}
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-areas:"image"
	"title"
	"qty"
	"price";
;
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-area:image;
	align-self: center;
	margin: 0 auto !important;
}

.hoverbsktadd h3, #popupdialog h3 {
	font-size: 1em;
	/* margin-bottom: 1em; */
}

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

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-area:title;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--dark-blue);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	text-align: center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-area:qty;
	display:none;
}

.hoverbsktadd .item p.price, #popupdialog .item p.price {
	grid-area:price;
	color:var(--text-heading-color);
	font-size:1.5em;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1.25em;
	padding: .5rem 2rem;
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--white);
	border: 1px var(--checkout-button) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}


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

#pbf .cookie p {
    /* width: 1200px; */
    margin: 0 auto;
    float: none;
    color: #fff;
    /* font-size: .75em; */
    padding: .5em 0;
}

#pbf .cookie p a {
    float: none;
    color: #fff;
    text-decoration: underline;
    padding: 0 .25em;
}

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

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