/*! 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;
}
.swiffy-slider {
	position: relative;
	display: block;
	width: 100%;
	--swiffy-slider-snap-align: center;
	--swiffy-slider-item-width: 100%;
	--swiffy-slider-item-gap: 1rem;
	--swiffy-slider-item-reveal: 0rem;
	--swiffy-slider-item-ratio: 1/1;
	--swiffy-slider-item-count: 1;
	--swiffy-slider-nav: var(--green);
	--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-item-color:var(--grey);
	--swiffy-slider-active-item-color:var(--green);
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

	
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fonts used and sizes
URW Form
	light - 300
	regular - 400
	demi - 600

Poppins
	light - 300
	regular - 400
	medium - 6500
	
=Definitions
------------------------------------------------------------------------------------- */



:root {
	
--site-max-width:1400px;	
--checkout-process-width:500px;


	
--menu-max-width:calc(100vw - 2rem);
--left-panel-width:240px;
--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(--font-weight);
	
/*fonts */
--text-font:poppins, sans-serif;
--text-font-weight: 400;
--heading-font:"urw-form",sans-serif;
--heading-font-weight: 700;
--sub-heading-font:poppins, sans-serif;
--sub-heading-font-weight:500;
--font-awesome:"Font Awesome 6 Pro";
--font-awesome-brands:"Font Awesome 6 Brands";
--font-size: 16px;

	
/* grid info */
--grid-spacing-vertical:var(--spacing);
--grid-spacing-horizontal:var(--spacing);

/* shadows */
--box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
--transition: 0.2s ease-in-out;

/* client color scheme */
--green: #CBDD6F;
--navy:#535362;
--light-navy:#646476;
--dark-grey: #424242;
--grey: #B9B9C0;
--light-grey: #DDDDDB;
--alt-grey:#f5f5f5;
--black: #010101;
--white: #fff;
--off-white: #F2F2F2;
--another-off-white:#F6F6F6;
--red:#B51E1E;
	
/*standard colors */
--error-color: #B51E1E;
--warn-color:rgb(230 167 27);
--info-color: #5eb20a;
--help-color: #2879ff;
	
/*Section colors */
--background-color:var(--white);
--top-bar-color: var(--alt-grey);
--main-panel-color:var(--white);
--footer-panel-color:var(--white);
--footer-panel-alt-color:var(--white);
--bottom-panel-color:var(--white);
--bottom-panel-text-color:var(--dark-grey);
--bottom-bar-color:var(--off-white);
--bottom-bar-text-color:var(--dark-grey);
--bottom-panel-heading-color:var(--green);
--panel-color:var(--white);
--dropdown-color:var(--white);
--popout-color:var(--white);
--form-color:var(--white);
	
/*nav colors */
	
--navbar-height:50px;
--navbar-icon-color:var(--white);
--navbar-menu-color:var(--black);
--navbar-color:var(--navy);
--navbar-heading-color:var(--white);
--navbar-dropdown-text:var(--heading-font);
--navbar-heading-font:var(--heading-font);
--navbar-heading-font-size:1rem;
--navbar-heading-weight:var(--heading-font-weight);
--navbar-link-color:var(--white);
--nav-text-color:var(--dark-grey);
--navbar-active-color:var(--green);
--navbar-active-text-color:var(--black);
--navbar-hover-color:var(--green);
--navbar-hover-text-color:var(--black);
--navbar-dropdown-width: 260px;
--navbar-dropdown-item-height:40px;
--navbar-dropdown-color: var();
--navbar-dropdown-color: var(--navy);
--navbar-dropdown-text-size:.875rem;
--navbar-sidebar-color:var(--light-grey);
--navbar-sidebar-text-color:var(--dark-grey);
--navbar-sidebar-hover-color:var(--off-white);
--navbar-popout-color:var(--off-white);
	
/*Buttons */
	
--button-font:"urw-form",sans-serif;
--button-font-weight: 600;
--button-color:var(--green);
--button-text-color:var(--white);
--button-border-color:var(--green);
--button-hover-text-color:var(--white);
--button-hover-color:var(--green);
--button-hover-border-color:var(--green);
--alt-button-color:var(--light-grey);
--alt-button-text-color:var(--dark-grey);
--alt-button-border-color:var(--grey);
--alt-button-hover-text-color:var(--dark-grey);
--alt-button-hover-color:var(--light-grey);
--alt-button-hover-border-color:var(--dark-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(--grey);
--border-alt-color:var(--green);
--border-color-light:var(--light-grey);
--border-radius: .5em;
--border-width: 1px;

/*Text */
--color:var(--dark-grey);
--text-color:var(--dark-grey);
--text-color-light:var(--grey);
--text-heading-color:var(--dark-grey);
--text-sub-heading-color:var(--dark-grey);
--text-link-color:var(--green);
--text-link-color-hover:var(--green);
--text-link-color-focus: transparent;

/* featured product element fprd*/
--fprd-color:var(--off-white);
--fprd-title-font:var(--sub-heading-font);
--fprd-title-font-weight: 500;
--fprd-title-color:var(--green);
/*sets height of fprd title element for consistency - need to figure a way of this being calculated in a way that matches the desired # of lines*/
--fprd-title-height: 5rem;
	
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */

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

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

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

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

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */

html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

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

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

a {
	background-color: transparent;
}

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

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

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

small {
	font-size: 80%;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

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

.imgcont {}

.imgcont img {
	display: block;
}

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

button,input {
	overflow: visible;
}

button,select {
	text-transform: none;
}

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

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

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

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

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

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

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

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

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

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

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

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

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

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

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

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

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */

.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 80vw !important;
	max-width:640px;
	display:none;
}

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

body {
	background-color: var(--background-color);
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
	color: var(--text-color);
	font-size: 16px;
/*total and absolute hack for the fact that some random horizontal scroll appears at certain viewport sizes that I can't explain or fix
	menu element seems to be the culprit but no solution yet found :( */
overflow-x: hidden;

}

ol {
	margin-left: .5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
p{
	overflow-wrap: break-word;
}

b,strong {
	font-weight: 600;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}


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

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

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

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

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

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

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

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

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

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

em{
	font-style:italic;
}

small {
	font-size: .825em;
}

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

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

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

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

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

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

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

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

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

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

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

#pm .artp ul li{
}

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

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

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


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

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

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


td a.btn {
	display: block;
}


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

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

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

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	background-color: var(--form-color);
	grid-column:1/-1;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
.form img{
	width:auto !important;
	height:auto
}

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

.form ul li {
	list-style: none;
	display:block;
}

.form form{
	margin:auto;
}

.form .help {
	color: var(--help-color);
	font-size: small;
}

.form label {
	display:block
}

.form li select,
.form li textarea,
.form li input {
	margin-bottom: var(--spacing)
}

/* DON'T try grid layout here - its too restrictive*/
.form li {}

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

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

.form label img {
	display: inline-block;
}

.form li.help,
.form li.info {
	font-size: .825em;
}

.form li.info  img{
	display:inline;
}

.form form {}

.form form .submit {
	display: block;
}

.form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
}

/* fix for checklists*/
.form li ul.check {}

.form li ul.check input {
	margin-right: var(--half-spacing);
}

/* fix for radio buttons */
.form ul.radio {}

.form li ul.radio input {
	margin-right: var(--half-spacing);
}

/* fix for subscribe checkbox */
.form li.subscribe input {
	margin-right: var(--half-spacing);
	width:auto;
}

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

.exstreglnk,
.exstfgtpwd {}

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

/* Sign In - these conflict with new checkout forms, need to revisit
------------------------------------------------------- */
.page_signin .form{
	width: 50%;
	margin: auto;
}
.page_signin .form label{
	display:block;
}

.page_signin .form input{
	width:100%;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */

.page_register .form{
	width: 50%;
	margin: auto;
}
.page_register .form label{
	display:block;
}

.page_register .form input{
	width:100%;
}

/* Forgotten Password
------------------------------------------------------- */
.form#pwrem {
	/*width: 50%;
	margin: auto;*/
}


/* -------------------------------------------------------------------------------------
=Base CSS definitions and element stylings
------------------------------------------------------------------------------------- */

/*code for banner text overlay */
.bnr{
	position:relative;
}




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

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

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

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

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

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

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

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


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


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

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

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


/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */
#pm .pmind .pbnr {
	grid-column:1/-1;
}



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

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

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

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}

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


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

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

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

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

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

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

}

.bnr.fullWidth,
.bnr.halfWidth,
.bnr.halfWidthDbl,
.bnr.quarterWidth,
.bnr.thirdWidth,
.bnr.twoThirdWidth{
	border-radius:var(--border-radius);
	overflow:hidden;
}


.fullWidth .toi,
.halfWidth .toi,
.halfWidthDbl .toi,
.quarterWidth .toi,
.thirdWidth .toi,
.twoThirdWidth .toi{
	position: absolute;
	color:var(--white);
	bottom: 2rem;
	left:0;
	max-width:100%;
	width:100%;
	transform: none;
	padding: 0;
	z-index: 100;
	text-align: center;
}

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

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

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

.deptHeader{
	margin:2rem 0;
}

.deptHeader h2{
	font-size:1.5em;
	font-weight:var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.deptHeader h2:before, 
.deptHeader h2:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(15% - 1em);
    margin-left:1em;
    height: 2px;
    content: '\a0';
    background-color:var(--border-alt-color);
}

.deptHeader h2:before{
	margin-left: -15%;
	text-align: right;
}

.deptHeader .artp{
	text-align:center;
}


.imageText,
.textImage,
.deptFooterImgTx{
	grid-column:1/-1;
	width:unset;
	padding:0;
	display:grid;
	grid-gap:1em;
	grid-template-columns:auto auto;

	width:100%;
	max-width:var(--site-max-width);
	margin:auto;
}

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

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

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

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

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

.imgcont.overlay div.overlay:hover{
}

.imgcont.overlay div.overlay a,
.imgcont.overlay div.overlay p,
.imgcont.overlay div.overlay h1,
.imgcont.overlay div.overlay h2,
.imgcont.overlay div.overlay h3,
.imgcont.overlay div.overlay h4,
.imgcont.overlay div.overlay h5{
	/*remove transition effect on text */
	transition:none;
	color:var(--white);
}

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



 
/* responsive iframe - used in articles*/
.respIframe{
    width:calc(100% - 2em);
    margin:1em;
    display:inline-block;
    vertical-align:top;
    margin-top:2em;
}

/*to sort out the responsive iframe */
.respIframe .container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.respIframe .container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */

#cont {
	margin: auto;
}

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




/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf {
	width: 100%;
	background-color:var(--top-bar-color);
	text-align:center;
	font-size:.825em;
}

#ptf .ext{
}

#ptf p{
	margin:0;
}

.chkflow #ptf{
	display:none;
}

#ptf .info li{
	display:inline-block;
	margin:var(--half-spacing);
}




/* -------------------------------------------------------------------------------------
=Top Panel
------------------------------------------------------------------------------------- */

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

/*see media queries for other layouts layout */
#pt .ext {
		--logowidth:200px;
		--searchwidth:1fr;
		--infolinks-width:auto;
		--accountlinks-width:auto;
		--basket-width: 3rem;
		--spacerwidth: calc((100% - var(--site-max-width)) / 2 );
		background-color: var(--top-panel-color);
		margin: 0 auto;
		position: relative;
		display: grid;
		grid-gap:0;
		align-items: center;
		grid-template-columns:var(--spacerwidth) var(--logowidth) var(--searchwidth) var(--infolinks-width) var(--accountlinks-width) var(--basket-width) var(--spacerwidth);
		grid-template-areas:
				". logo search infolinks accountlinks  basket ."
				"nav nav nav nav nav nav nav  "
				"message message message  message message message message"
}

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

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

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

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

#pt .pbnr img{
	max-width:200px;
}



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


#pt .info li.icon {
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
		"icon"
		"text";
	margin:var(--spacing);
	text-align:center;
	/*added to align icons rather than whole thing being centered */
	/* margin-top:1.5rem; */
}

/*this is a hack as we still don't have a my account link that should take you to login/register if you are not signed in*/
#pt .info li.icon.reg{
	display:none
}


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

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

#pt .info .icon a.lnk{
	display:none;
}
#pt .info .icon a.tel{
	grid-area:text;
	display:block;
	/* font-size:.725rem; */
}

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

/* contact links
------------------------------------------------------- */
#pt .info#p51314692,
#pt .info#p50757633{
	grid-area:infolinks;
}

#pt .info#p51314692 ul,
#pt .info#p50757633 ul{
	display:grid;
	grid-template-columns: auto auto;
	align-items:center;
	grid-template-areas:"phone contact";
}


/*first one will be phone - requires different styling */
#pt .info#p51314692 li:first-child,
#pt .info#p50757633 li:first-child{
	grid-template-columns:auto auto;
	grid-template-areas:
		"icon text";
	grid-gap:var(--half-spacing);
	grid-area:phone;
	align-items:center;
	/* margin:0; */
}


/* account links
------------------------------------------------------- */
#pt .info#p51314693,
#pt .info#p50757634{
	grid-area: accountlinks;
}

#pt .info#p51314693 ul,
#pt .info#p50757634 ul{
	display:grid;
	grid-template-columns: auto auto;
	align-items:center;
	grid-template-areas:"signin register";
}





/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	margin-left: auto;
	text-align: center;
	width: calc(100% - 4rem);
	padding: 0 2rem;
	margin:auto;
	font-size:16px;
}

#pt .search form {
}

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

}

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

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


/* Basket
------------------------------------------------------- */

#pt .freedel{
	grid-area:freedel;
	text-align:center;
}

/* Basket
------------------------------------------------------- */
#pt #mybskt{
	grid-area: basket;
	text-align:right;
	position: relative;
	margin:var(--half-spacing);
}


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

#pt #mybskt a.bsktitems p{
	margin:0;
}

#pt #mybskt a.bsktvalue{
	display:none;
	
}

#pt #mybskt #viewbskt{
	display: inline-block;
	cursor: pointer;
	background-color:transparent;
	color: var(--button-text-color);
	border:none;
	border-radius: 0;
	outline: none;
	padding:0;
}

#pt #mybskt img {
	max-height:1.25rem;
	width:auto;
}

#pt #mybskt span {
    display: none;
}

#pt .siteWide{
	grid-area:message;
	background-color:var(--green);
	color:var(--white);
	text-align:center;
}

#pt .siteWide .artp{
	margin:.5em auto;
}

#pt .siteWide .artp p{
	margin:0;
}

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


/*main home page banner - uses aspect ratio change in media queries */
.mainBanner {
}
.mainBanner a.img img{
	width:auto;
	height:auto;
	/*set a max height to avoid it being too humongous on larger displays */
	max-height:500px;
	aspect-ratio: 1921/736;
	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 third of fake max width */
	max-width:calc(var(--site-max-width) / 3);
	transform: translate(0%,-50%);
	padding: 2em 1em;
	z-index: 100;
	text-align: left;
	background-color:rgba(255,255,255,0.9);
	border-radius:1rem;
}

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

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

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

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

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

.mainBanner .toi a.btn{
	border-radius:2rem;
	padding:.5rem 3rem
}


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

/*top ctas */
#a131497986{
	background-color:var(--off-white);
	padding:1em;
}

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

#a131497986 .slidecont{
	grid-gap:var(--spacing);
}

#a131497986 .slidecont.reviewimg{
	display:inline-block;
	display:block;
	vertical-align:middle;
}

#a131497986 .slidecont.reviewimg img{
	display:inline-block;
	vertical-align:middle;
	max-height: 1rem;
	width:auto;
}

#a131497986 i{
	color:var(--green);
	display:inline-block;
	vertical-align:middle;
	margin-left:auto;
	margin-right:.5rem;
	grid-area:icon;
}

#a131497986 p{
	grid-area:text;
	font-size:.825rem;
	display:inline-block;
	vertical-align:middle;
	margin-right:auto;
	max-width:calc(100% - 2rem)
}

#a131497986 button,
#a131497986 .slider-indicators{
	display:none;
	
}


/* -------------------------------------------------------------------------------------
=Main Panel
------------------------------------------------------------------------------------- */
#pmid {
	width:100%;
	margin:auto;
	background-color: var(--main-panel-color);
	/*used to ensure left panel displays correctly, unsure why though... */
	display: flex;
	justify-content: flex-start;
	padding-bottom:1rem;
}


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

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



/* left panel
------------------------------------------------------- */
/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
	}


	#pl .filter{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		max-width:250px;
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
	}

	#fstrigbtn{
		display:block;
	}

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

	
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:auto

	}

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

	}


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

		width:calc(100% - 2rem);
		margin:1rem;
}


#pf .ext {
	background-color: var(--footer-panel-color);
	margin: 0 auto;

}

/*articles added to promotions - not part of template*/

#pf .arts .art{
	padding-bottom:1rem;
}

#pf .arts .art > h2{
	width:100%;
	max-width:var(--site-max-width);
	margin:auto;
	padding-bottom:1em;
}

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

#pf .arts .artp ul{
	margin-left:2em;
}

/*To allow for sub elements to have different backgrounds full width, 
yet retain the bit inside at the max site width */
#pf .artp{
	width:100%;
	max-width:var(--site-max-width);
	margin:auto;
}


/*shop by category */
#a133136384{
	background-color: var(--off-white);
	text-align:center;
	padding:2rem 0;
}

#a133136384 h2{
	width:100%;
	max-width:var(--site-max-width);
	margin:auto;
	padding:2rem 0
}
#a133136384 .slider-indicators{
	/* display:none; */
}



/*home page featured publication slider */
#a124682241{
	background-color:var(--navy);
	text-align:center;
	padding:2rem 0;
}
#a124682241 img{
	height:52px !important;
	width:auto;
	margin:auto;
}

#a124682241 .slider-indicators,
#a124682241 button{
	display:none;
}

/*over 250,000 blinds shipped */
#a133234688{
	background-color:var(--off-white);
	text-align:center;
	padding:2rem 0;
}
#a133234688 h3{
	font-size:2rem;
}
#a133234688 strong{
	color:var(--green);
}

/*reviews */
#a124682255{
	background-color:var(--off-white);
	text-align:center;
	padding:2rem 0;
}

#pf #a124682255 .artp{
	width:100%;
	max-width:100%;
	margin:auto;
}

/* still looking */

#a133234691{
	text-align:center;
	margin: 2rem 0;
}

#a133234691 h2{
	font-size:1.5rem;
	margin: 3rem;
}

#a133234691 .card{
	border-radius:2rem;
	background-color:var(--off-white);
	padding:1rem 2rem;
	margin:0 1rem;
	display:block;
}

#a133234691 .card i{
	color:var(--green);
	margin-right:1rem;
}


/*instagram header */
#a133234689{
	text-align:center;
	margin: 3rem 0;
}

#a133234689 i{
	color:var(--green);
	font-size:2rem;
}

#a133234689 strong{
	color:var(--green);
}

/*instagram content */
#a133234690{
	text-align:center;
	margin: 2rem 0;
}

/*dept or product carousels */
#pf .carousel{
	width:100%;
	max-width:var(--site-max-width);
	margin:auto;
	/* padding:1rem 0; */
}

/*newsletter article - uses klavyio */
#a133234692{
	background-color:var(--navy);
	color:var(--white);
	text-align:center;
	padding:2rem 0;
}

#a133234692 .artp{
	display:grid;
	grid-template-areas:"lead form";
	grid-template-columns:auto 1fr;
	grid-gap:1rem;
	align-items:center;
}

#a133234692 strong{
	font-size:1.5em;
	color:var(--green);
}

.klaviyo-lead{
	grid-area:lead;
	padding:2rem 4rem;
	text-align:left;
	border-right:1px solid var(--border-color);
}

.klaviyo-lead h3{
	font-size:2rem;
}

.klaviyo-holder{
	grid-area:form;
	display:grid;
	grid-template-areas:"title"
						"subtitle"
						"form";
	text-align:left;
	padding:0 4rem;
}

.klaviyo-holder h4{
	grid-area:title
}

.klaviyo-holder p{
	grid-area:subtitle;
	font-size:.825rem;
	padding:0;
	margin:0;
}

.klaviyo-holder .klaviyo-form {
	grid-area:form;
}

.klaviyo-holder .klaviyo-form form{
	margin:0 !important;
}

.klaviyo-holder .klaviyo-form button{
	padding:0 4rem !important;
}

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

#pb .ext {
	background-color: var(--bottom-panel-color);
	margin: 0 auto;
	padding:4em 0;
	position: relative;
	grid-column-gap: 1rem;
	display: grid;
	align-items: start;
	width: var(--site-max-width);
	grid-template-columns:2fr 1fr 1fr 1fr;
	grid-template-areas: "logo quicklinks ourblinds customerinformation"
					     "logo sociallinks ourblinds customerinformation"
						 "logo sociallinks ourblinds accreditations"
}


/* hide icons if present on info links */
#pb .info li.icon img{
	display:none;
}
/*logo */
#a131497984{
	grid-area:logo;
	text-align:left;
}
#a131497984 .imgcont{
	margin-bottom:2rem;
}


#a131497984 .imgcont img{
	text-align:left;
	margin:0;
	margin-right:auto;
}

#a131497984 .contact{}

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

#a131497984 .contact li{
	margin-left:.5rem;
	margin-bottom:2em
}

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

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

#a131497984 .contact .address:before{
	content:"\f3c5";
}
#a131497984 .contact .phone:before{
	content:"\f095";
}
#a131497984 .contact .email:before{
	content:"\f0e0";
}
/*quicklinks */
#p50790401,
#p51314698{
	grid-area:quicklinks;
}
/*ourblinds */
#p37912581,
#p39387141{
	grid-area:ourblinds;
}
/*customerinformation */
#p37912582,
#p39387142{
	grid-area:customerinformation;
	margin-bottom:1rem;
}
/*sociallinks */
#a124583945{
	grid-area:sociallinks;
	align-self:end;
}

#a124583945 i{
	font-size:1.5em;
	color:var(--green);
}
/*accreditations */
#p51314701,
#p45907968{
	grid-area:accreditations;
	align-self:end;
	text-align: left;
	/* display:grid; */
	grid-template-columns:1fr 1fr;
}

#p51314701 .bnr,
#p45907968 .bnr{
	display:inline-block;
	margin-right:1rem;
}

#p51314701 .bnr img,
#p45907968 .bnr img{
	max-height:64px;
	width:auto;
}


/* defaults 
------------------------------------------------------- */

/*because we don't write out all section headings as the same level */

#pb h3,
#pb h2 {
	font-size: 1.063em;
	margin-bottom: 1.5rem;
	color: var(--bottom-panel-heading-color);
	
}

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

#pb a {}

#pb ul {
	padding: 0;
}

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

/*old stuff we don't want written out*/

#pb li.pipe {
	display: none;
}

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

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

/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */

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

#pbf .ext {
}

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

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

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

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

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

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

}

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

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

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

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


/* payment logos */
#a88408073
{
	display:inline-block;
	width:50%;
	vertical-align:middle;
	text-align:right;
}
#a88408073 .imgcont{
		display:inline-block;
	margin-right:.5rem;
}


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

.moreless{}

.less{}

.more{}

.noexpand{
	display:none;
}

.showmore,
.showless{
	--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)
}


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

.home .bdcb {
	display: none;
}

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

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

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

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

/*active page */
.bdcb li h1 {
	font-size: .825rem;
	margin:0;
	color:var(--text-color);
	
}

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

	content:"/";

	margin: .5rem;
}

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

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

.bdcb h1 {}

/* -------------------------------------------------------------------------------------
=Swiffy Slider - replaces owlcarousel
------------------------------------------------------------------------------------- */

.swiffy-slider{
}
/*to sort out the responsive iframe */
.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;
}
.swiffy-slider ul,
.swiffy-slider li{
	/* padding:0; */
	/* margin:0; */
}

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


.contentsx{
    position: relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    align-items:center; 
}

/*first statement is if a link isn't present */
.contentsx img{
	grid-row:1;
	grid-column:1;
	display:block;
	width:100%;
}

.contentsx .swiper-overlay-container{
	grid-row:1;
	grid-column:1;
	display:block;

	background-color:rgba(255,255,255,0.5);
	padding:1rem;
	max-width:25%;
	margin:auto;
}


/* reviews slider */
.slider-reviews{
    --swiffy-slider-item-gap: 1rem;
    --swiffy-slider-item-count: 2;
}

.slider-reviews li{
	padding:0;
}

.slider-reviews .card{
	background-color:var(--white);
	background-color:var(--background-color);
	max-width:var(--site-max-width);
	border-radius:1rem;
	overflow:hidden;
	display:grid;
	grid-template-areas:"image review";
	grid-template-columns:1fr 2fr;
	align-items:start;
}
.slider-reviews .review-image{
	grid-area:image;
	height:100%;
}

.slider-reviews .review-image picture{
	width:100%;
	height:100%;
	display:block;
}
.slider-reviews .review-image img{
	/*set a max height to avoid it being too humongous on larger displays */
	aspect-ratio: 460/600;
	width: 100%;
	height:100%;
	object-fit: cover;
	margin:auto;
}

.slider-reviews .review{
	grid-area:review;
	text-align:left;
	padding: 1rem 4rem;
	align-self:center;
}

.slider-reviews .review p.customer{
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	padding:0;
	margin:0;
	margin-bottom:.5rem;
}

.slider-reviews .review .stars i{
	color:var(--green);
	font-size:.725em;
	margin-right:.25rem;
	margin-bottom:1rem;
}


.slider-reviews .review p.reviewtext{
	font-family:var(--heading-font);
	font-size:.825em;
	line-height:1.5;
	padding:0;
	margin:0;
	margin-bottom:1rem;
}

.slider-reviews .review a.btn{
	background-color:var(--white);
	color:var(--green);
	font-weight:400;
	padding:.5rem 1rem
}


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

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

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


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

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

.slider-cta li{
	margin:0;
}

/*cta slider */
.slider-instagram{
    --swiffy-slider-item-count: 5;
}

/*still searching article */
.slider-searching{
    --swiffy-slider-item-count: 4;
}


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

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

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

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

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

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

.carousel.dept .deptlink a.txt{
	color:var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1.25rem;
	position:absolute;
	bottom:1.5rem;
	left:1.5rem;
	margin-right:1.5rem;
}

.carousel.dept .deptlink a.txt:after{
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-left: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f061';
}




/* -------------------------------------------------------------------------------------
=Newsletter 
------------------------------------------------------------------------------------- */
#pf .ext .news {
	grid-area: news;
	margin: 1rem;
}

#pf .ext .news .bt h3 {
	color: var(--white)
}

#pf .ext .news form {
	margin-bottom: 0;
}

.news {
	grid-column: 1/-1;
	text-align: center;
	padding: var(--spacing);
	align-self: center;
}

.news label {
	display: none;
}

.news input {
	display: inline-block;
	margin: 0 .5rem;
}

.news_input_container {
	display: inline-block;
}

/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */

ul.accordion {
	grid-column:1/-1;
	list-style:none;
}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	font-size:1.25em;
	cursor: pointer;
	border:2px solid var(--off-white);

	border-radius:var(--border-radius);
	display:grid;
	grid-template-areas:"question expand";
	grid-gap:1rem;
	grid-template-columns:1fr 2rem;
	padding:1rem;
	margin:0;
	margin-bottom:1rem;
	transition:var(--transition);
}

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

.accordion .header img {
	grid-area:expand;
	cursor: pointer;
}

.accordion .header .showplus {}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
#pm ul.accordion li.pane.first {}
#pm ul.accordion li.pane {
	display:none;
	background-color:var(--off-white);
	border-bottom-left-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
	padding:var(--spacing);
	margin-bottom:1rem;
}
#pm ul.accordion li.pane p {}

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

#pm ul.accordion li.pane li {}

#pm ul li.title {}


/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
.page_blog #pm{
	display:grid;
	grid-template-areas:
		"header header"
		"blogs nav";
	grid-template-columns:8fr 2fr;
	grid-template-rows:auto 1fr;
	justify-content:end;
	/* grid-column-gap:3em; */
	grid-auto-flow:column dense;
}

.page_blog #pm .deptHeader{
	grid-area:header;
	
}



.page_blog .blogs,
.page_blog .blog{
	display: grid;
	grid-area:blogs;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--spacing);
	/* grid-auto-flow: dense; */
	/* grid-auto-rows: min-content; */
}

/* Blog previews
------------------------------------------------------- */

.page_blog .blogs .blog{
	border-radius:var(--border-radius);
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:"image"
	"title"
	"date"
	"readmore";
	background-color:var(--light-grey);
	padding-bottom:1em;
	align-content:start;
	grid-area:unset;
}


.page_blog .blogs .blog a.img{
	grid-area:image;
	border-bottom:3px white solid;
}

.page_blog .blogs .blog a.img img{
	width:100%;
	height:auto !important;
}

.page_blog .blogs .blog a.title{
	grid-area:title;
	font-family:var(--heading-font);
	color:var(--green);
	text-align:center;
	padding:1rem;
	font-size:1.25em
}

.page_blog .blogs .blog p.date{
	grid-area:date;
	text-align:center;
	color:var(--green)
}

.page_blog .blogs .blog a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:var(--green);
	color:var(--white);
	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 */
.page_blog .blogs .blog .artp{
	display:none;
}


/* Blog preview nav
------------------------------------------------------- */


.blognav{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto 1fr;
	grid-gap:1em;
	grid-area:nav;
	align-self:start;
	padding-left:3em;
}

.blognav li{
	list-style:none;
	margin-bottom:.5em;
}

.blognav .search{}


.blognav .search form {
	margin:auto;
	background-color:var(--white);
	border-radius:var(--border-radius);
	border-color:var(--text-color);
	border:1px solid var(--text-color);
}

.blognav .search input {
	display: inline-block;
	vertical-align:middle
}

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

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

/*could do with some way of nicely seeing font awesome icons in coms */
.blognav .search input.submit {
	width: auto;
	height: 26.4px;
	margin: 0;
	padding: 0rem .5rem;
	background-color: var(--white);
	color:var(--blue);
	font-family: var(--font-awesome);
	border: none;
}

.blognav .recent{}

.blognav .archive{}

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

.art.blog h2{
	text-align:center;
	color:var(--green);
}

.art.blog .imgcont{
	margin:2em auto;
	max-width:50%;
}

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

/* 2024 new blog stuff */
.page_blog article{
	grid-column:1/-1;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap:1em;
	align-items:start;
}

.page_blog article h2,
.page_blog article h6,
.page_blog article footer,
.page_blog article section{
	grid-column:1/-1;
	align-content:center;
	margin-bottom:2em;
}

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

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

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

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

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

.page_blog section.blog{
	display:grid;
	grid-area:unset;
	grid-column:1/-1;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:"title title"
						"images images"
	"text text";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.imageText{
	grid-template-areas:"title title"
						"images text";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.textImage{
	grid-template-areas:"title title"
						"text images";
	grid-gap:0;
	grid-column-gap:1em;
	align-items:center;	
}

.page_blog section.noTxt{
	grid-template-areas:"title title"
						"images images";
}

.page_blog section.blog h3,
.page_blog section.textImage h3,
.page_blog section.imageText h3{
	grid-area:title;
	text-align:center;
}

.page_blog section.blog .txt,
.page_blog section.textImage .txt,
.page_blog section.imageText .txt{
	grid-area:text;
}

.doubleLine .txt{
	line-height:3
}

.page_blog section.blog.noTxt .txt{
	display:none;
}

.page_blog section.blog .imgs,
.page_blog section.textImage .imgs,
.page_blog section.imageText .imgs{
	grid-area:images;
}

.page_blog section.blog .imgs a,
.page_blog section.blog .imgs img{
	display:inline-block;
}


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

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

}

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

.blogBtns a.next,
.blogPageBtns a.next{
	grid-area:next;
	background-color:var(--green);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-left:auto;
	padding:.5rem 2rem;
}
/* -------------------------------------------------------------------------------------
=Store Locator 
------------------------------------------------------------------------------------- */
#storelocator {}
#storelocator #storesearchform {}
#storelocator #storesearchform label {}
#storelocator input#searchpostcode {}
#storelocator input.submit {}
#storelocator #searchresults {}
#storelocator #searchresults ol li {}


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

.hoverbskt h3 {
	display: none;
}

.hoverbskt .lines .item:last-child {}

.hoverbskt .formupdate {}

.hoverbskt .formupdate input {}

.hoverbskt .formupdate input.submitQtyChange {}

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

.hoverbsktadd p.descr {
	display: none;
}

.hoverbskt .lines {}

.hoverbskt .lines .item {
	display: grid;
	grid-template-columns: 2em .5rem 1fr 7ch;
	grid-template-areas: "image . title title"
						 "image . sample sample"
						 "image . quantity price";
	margin-bottom:.5rem;
}

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


.hoverbskt .lines .item picture{
	grid-area:image;
	align-self:start;
	margin:0;
}

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

.hoverbskt .lines .item p.price {
	grid-area: price;
	text-align:right;
}

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

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

.hoverbskt .lines .item p.sample {
	grid-area: sample;
	font-weight:normal;
	font-size:.725em;
	text-align: left;
}

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

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


/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */

.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	width: 275px !important;
	margin: auto;
	padding: 0;
	z-index: 999999 !important;
	border-radius: 0;
	max-height: 332px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid var(--border-color);
	z-index: 2000;
	background-color: var(--white)
}

.ui-autocomplete li.ui-menu-item {
	cursor: pointer;
	margin: 0;
	display: block;
}

.ui-menu-item a {
	display: grid;
	grid-template-columns: 32px 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}

.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */

/* take care as the html markup that writes this thing out is a bit borked! */
#ewis h3 {
	font-weight: var(--heading-font-weight);
}

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

.fprd .ewis {
	grid-column: 1/-1;
	align-self: end;
}

a.lnk.ewisopen,
a.lnk.ewis {
	display: block;
	height: auto;
	background-color: var(--button-color);
	font-family: var(--button-font);
	color: var(--button-text-color);
	border-radius: var(--border-radius);
	border: 2px solid var(--button-border-color);
	padding: var(--spacing);
	text-align: center;
	text-transform: capitalize;
}

.lnk.ewisopen:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	border-color: var(--button-hover-color);
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd,
#popupdialog {
	position: fixed;
	top:50%;
	left:50%;
	width:calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding:var(--spacing);
	z-index:2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

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

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

.hoverbsktadd h3,
#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

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

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--text-heading-color);
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

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

.hoverbsktadd .item p.price,
#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"],
.hoverbsktadd .item+a {
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}

#popupdialog .useraccount {}

#popupdialog .useraccount input {}

#popupdialog .useraccount a {}

/* Out of Stock, Direct Despatch
------------------------------------------------------- */
.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog {
	width: 500px !important;
	max-width:80vw;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup,
.ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader,
.ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	--border-color:var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding:var(--half-spacing) var(--spacing);
	background-color: var(--white);
	color: var(--green);
	border: 2px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

/*better use of classes would be nice! ;) */
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	--border-color:var(--button-border-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);

}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {

}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}

.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}

/* -------------------------------------------------------------------------------------
=Tooltips
------------------------------------------------------------------------------------- */
.helpicon {
    display:inline-block;
    position:absolute;
    top: .5rem;
    right:0;
    text-align:left;
}

.helpicon h3 {
	margin:var(--half-spacing) 0;
}

.helpicon .lefttooltip {
    min-width:100px;
    max-width:200px;
    top:50%;
    right:100%;
    margin-right:1rem;
    transform:translate(0, -50%);
    padding:var(--half-spacing);
    color:var(--text-color);
    background-color:var(--white);
    font-weight:normal;
    font-size:.825em;
    position:absolute;
    z-index:1000;
    box-sizing:border-box;
    display:none;
    border-radius:var(--border-radius);
    border:1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
    display:block;
	line-height:1;
}

.helpicon .lefttooltip i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.helpicon .lefttooltip i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#FFFFE0;
    border:1px solid #DCA;
}


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

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

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

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

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



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


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

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

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

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








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

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

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

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

 .paging a {}

/*this should be the current page */
.paging span {}

.currpg {
	font-weight: var(--heading-font-weight);
	color:var(--white);
	background-color:var(--green);
}








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

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

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

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
.filter {
	padding: .5em;
	position:sticky;
	top:0;
	height: auto;
	z-index:99;
	max-height:100vh;
	overflow-y:auto;
	background-color: var(--main-panel-color);
}

/* close filter button */

.fsclsdiv {
	text-align:right;
}

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

.filter .bt {
	border-bottom:2px solid var(--green);
	margin-bottom:1rem;
}

.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{
	display:inline-block;
}
.fstrigspn{
	display: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;
}

/* -------------------------------------------------------------------------------------
=Deptsingle  
------------------------------------------------------------------------------------- */
.deptsingle {
	position: relative;
	border-radius: var(--border-radius);
	grid-column:auto/span 4;
}

.deptsingle .deptlink{
	display:grid;
	grid-template-areas:"content";
	
}

.deptsingle  a.img{
	grid-area:content;
}

.deptsingle  a.txt{
	grid-area:content;
	align-self:end;
	color:var(--white);
	padding:.5em;
}

.deptsingle img{
object-fit:cover;
	width:100%;
		border-radius: var(--border-radius);
}

/* -------------------------------------------------------------------------------------
=Subdepartment tree  
------------------------------------------------------------------------------------- */


/* Subdepartment tree
------------------------------------------------------- */
.depttree{
	/* margin-top:1em; */
	grid-column:1/-1;
}

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

.depttree{
	display:block !important;
}

.depttree h4.tagline{}

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

.depttree li{
	position:relative;
	border-radius:1em;
	margin:0;
	overflow:hidden;
	/* padding:.25em; */
	align-items:center;
	background-color:var(--grey);

	display:grid;
	grid-template-columns:1fr;
}

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

}

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

}

.depttree li a.txt{
	color:var(--white);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1.25rem;
	grid-column:1;
	grid-row:1;
	padding:.5rem;
	align-self:end;

}

.depttree li a.txt:after{
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-left: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f061';
	
}
.depttree li:hover a{

}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */

/* Base settings
------------------------------------------------------- */

#deptlist .fprdcont,
#searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */

.fprd {
	position: relative;
	border-radius:var(--border-radius);
	box-shadow: var(--box-shadow);
	/*so that the border radius works on the image */
	overflow:hidden;
}

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

.fprd.add .bnr{

	width: 100%;
	height:100%;
	object-fit: cover;
}

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

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

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

.fprd:hover {}

/* unfortunately there are cases where a .bc is present inside .fprd 
department listing page uses a .bc*/

.fprd {
	display: grid;
	/* grid-row-gap: var(--half-spacing); */
	grid-template-columns: 1fr 1fr;

	/*use grid template areas */
	grid-template-areas:
		"image image"
		"title title"
		"strap strap"
		"selling-price prev-price"
		"fprdinfo fprdinfo"
		"buyform buyform"
}

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

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

/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
	position: relative;
	align-items: center;
	overflow: hidden;
	margin-bottom:2rem
}

.fprd .fprdimg a {
	display: block;
	text-align: center;
}

.fprd .fprdimg img {
	margin: 0 !important;
	object-fit:cover;
	aspect-ratio:1/1;
	width:100%;
}

.fprd .fprdimg img:hover {}

/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title{
display:none;
	
}

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

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

}

/*this client uses the strapline as the title */
.fprd .strap {
	grid-area: title;
	padding:0 1rem;
	font-size: 1em;
	font-family: var(--fprd-title-font);
	font-weight:500;
	
	text-transform: capitalize;
}

.fprd .strap a {}
/* title
------------------------------------------------------- */
.fprd .fprddescr{
	grid-area:description;
	display:none;
}

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

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

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

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

.fprd .prevprice {
	grid-area:prev-price;
	padding:0 1rem;
}
.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
	font-weight:400;
}

.fprd .price {
	grid-area: selling-price;
	margin-left:1rem;
}
.fprd .price label {
	color: var(--text-sub-heading-color);
}
.fprd .price h6 {
	font-size:1.25rem;
	font-weight:var(--heading-font-weight);
	/* color:var(--red); */
}
.fprd .price h6 span {}

.fprd .trade {
	grid-area: selling-price;
	text-align: center;
}
.fprd .trade label {}
.fprd .trade h6 {}

.fprd .offer:not(.flag) {
	grid-area: selling-price;
	margin-left:1rem;
}
.fprd .offer label {}
.fprd .offer h6 {
	font-size:1.25rem;
	font-weight:var(--heading-font-weight);
	color:var(--red);
}
.fprd .offer h6 span {}

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

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


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

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

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

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

.fprd .unit h6 {}

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

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

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


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

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref span {}

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

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

.fprd .clientref {
	grid-area: client-ref;
	/* padding: 0 .5rem; */
	font-size: .725em;
	text-align: left;
}

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

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

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

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

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

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

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

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

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

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

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

.fprd .flag.newin {}

.fprd.flag.stkout {}

/* christmas flags to not show */
.fprd .piflags ul li.f14811136,
.fprd .piflags ul li.f14811137,
.fprd .piflags ul li.f14811138,
.fprd .piflags ul li.f14811139,
.fprd .piflags ul li.f14811140,
.fprd .piflags ul li.f14811141,
.fprd .piflags ul li.f14811142,
.fprd .piflags ul li.f14811143,
.fprd .piflags ul li.f14811144,
.fprd .piflags ul li.f14811145,
.fprd .piflags ul li.f14811146,
.fprd .piflags ul li.f16744448,
.fprd .piflags ul li.f16777216,
.fprd .piflags ul li.f16777217,
.fprd .piflags ul li.f16777218,
.fprd .piflags ul li.f16842752{
	display:none;
}


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

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

/*again with the REAL mobile filter results being somehow different! */
.fprd a.btn{
	grid-area:fprdinfo;
}

.fprdinfo a.btn{
	display:block;
	padding:var(--half-spacing);
}


/* quick view */
.fprd a.btn.qkvw {
}

.fprd:hover a.qkvw {}

.fprdinfo a.qkvw:hover {}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-area: buy-pane;
	text-align: center;
	margin: 0;
	/* this won't work with dropdown skus */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.fprd form select {}

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

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

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

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

.fprd button.fpskuqtyadd {
}

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

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

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	margin: 0;
	padding: 0 .5rem;
}

/* Email when in stock
------------------------------------------------------- */
/*current hack for sample request - things need classes */
.fprd form{
	grid-template-columns:auto;
	grid-column:1/-1;
	margin:1rem;
	margin-top:0;
}

.fprd form .submit {
	border:2px var(--button-color) solid;
	background-color:transparent;
	color:var(--button-color);
}



/* Wishlist on fprd
------------------------------------------------------- */
.fprd .sfl{
	grid-area:unset !important;
	position:absolute;
	top:.5em;
	right:0em;
	z-index:1;
}

.fprd .sfl .submit {
	border:0;
	padding:0em;
	width:2.5em;
	line-height:1;
}

/* -------------------------------------------------------------------------------------
=ProductPage 
------------------------------------------------------------------------------------- */

#pmid.page_buy {}

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

/* Product Panels 
------------------------------------------------------- */

#pi {
	margin: 0;
	padding: 0;
	/* margin-bottom: 4em; */
}


#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 650px - use percentages to scale */
		grid-template-columns:54.1667fr 45.8333fr;
	grid-template-areas:"top left"
						"right right"
						"bottom bottom";
	grid-column-gap:2rem;
}

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

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

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

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

/*same class used for a div outside of the main section */
#pi .main + .bottom{
	margin-top:1rem;

}

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





/* Strapline
------------------------------------------------------- */
#pi .sticky {
	position:sticky;
	top:0;

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


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

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

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

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

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

#pi .gallery #galleryimages{
	--swiffy-slider-item-count: 3;
	margin-top:1em;
}


/*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;
	aspect-ratio:1/1;
	margin:auto;
}

#pi .gallery h4 {
	display: none;
}

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


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


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

#pi .top .flags .freedel{
	position:absolute;
	right:0;
	top:0rem;
}
#pi .top .flags .prdel img{
	max-width:150px;
}

#pi .top .flags .offer{

	position:absolute;
	right:1rem;
	top:0rem;
}
#pi .top .flags .offer img{
	max-width:120px;
}


/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	grid-area: product-buy-pane;
	display:grid;
	display:grid;
	grid-template-columns:auto auto 1fr;
	grid-template-areas:
		"sellingprice prev-price ."
		"buypane buypane buypane";
	align-items:end;
	grid-gap:1rem;
}

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


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

#pi .pibuy h6 {
	display:inline-block;
	padding:0;
	margin-bottom:0;
}


/*normal price */
#pi .pibuy .price {
	grid-area: sellingprice;
}
#pi .pibuy .price h6 {
	font-size:1.25rem;
	font-weight:var(--heading-font-weight);
}

/*offer price */
#pi .pibuy .offer {
	grid-area: sellingprice;
}
#pi .pibuy .offer h6 {
	font-size:1.5rem;
	font-weight:var(--heading-font-weight);
	color:var(--red);
}

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


/* Messages */
#pi .pibuy p {}
#pi .pibuy p#bspresponse {
	grid-area: bspresponse;
}
#pi .pibuy h4 {}
#pi .pibuy h5 {}
#pi .pibuy p.p_stock {}
#pi .pibuy .qty {
	display: none;
}

/* stock */
#pi .pibuy .stock {
/*being written out when not actually in use! */
	display:none;
}


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

/* quantity in basket info */
#pi .pibuy .qtyInBskt {
	display: none;
}

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

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buypane;
	margin: 0;
	background-color:var(--off-white);
	padding: 1rem;
}

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

.attritem select {
	width: 100%
}

#buy_form select,
#buy_form textarea {}

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

#pi .pibuy .attrqty {
	/*display: grid;
	grid-template-columns: auto;
	grid-template-areas:
		"buy"
		"sample"
	*/
}


.multiselect{
	margin-bottom:1rem;
}

#pi .pibuy .attrqty .submit#buy {
	grid-area: buy;
	display:inline-block;
	width:100%;
	padding: 1em;
	margin-bottom:1rem;
	border-radius: var(--border-radius);
	text-align: center;
}

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

/*sample request 
---------------------------*/
#pi .pibuy #smplreq {
	grid-area: sample;
	display:inline-block;
	width:100%;
	padding: 1em;
	background-color: var(--white);
	color: var(--green);
	border: 2px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

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

/*duplicated product title auto written out in the description */
#pi .pidesc h2[itemprop="name"] {
	display: none;
}

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

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

#pi .pidesc.desp:before{
	content:"";
	grid-area:icon;
	width:30px;
	height:17px;
	background:url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/deliveryvan.png') no-repeat center;
}

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

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

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

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

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

/* reviews widget 
------------------------------------------------------- */

.reviewsiosmallsummarypanel,
.reviewssmallsummary{
	text-align:left;
}

.reviewsiosmallsummarypanel:hover,
.reviewssmallsummary:hover{
	cursor:pointer;
}

.reviewssmallsummary img{
display:none;
}

.reviewsiosmallsummarypanel .title,
.reviewssmallsummary .title{
	display:none;
	
}

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

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

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

.reviewsiosmallsummarypanel .ratingNumber span,
.reviewssmallsummary .ratingNumber span{
	display:inline-block;
	
}

.reviewsiosmallsummarypanel .ratingCount,
.reviewssmallsummary .ratingCount{
	display:inline-block;
	margin-left:.5rem;
	font-size:.725rem;
}

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

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

.reviews .rating{
	text-align:left;
}

.reviews .rating .stars img{
	display:inline-block;
	
}

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

.reviews .customer{
	font-weight:600;
	font-size:.825rem;
}

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

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


.replies{
	margin:1rem;
	font-size:smaller;
	background-color:var(--off-white);
	padding:.5rem;
}

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

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

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

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

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

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

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

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



/* Next Day Delivery Countdown
-------------------------------------------------------*/

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

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

#pi #ordercutofftime:before{
	content:"";
	grid-area:icon;
	width:30px;
	height:17px;
	background:url('https://www.orderblinds.co.uk/orderblinds/148701185/i/bdr/deliveryvan.png') no-repeat center;
}

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

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

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

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

/* Product PDL Article - could do with a class
-------------------------------------------------------*/
#pi .main .art {
	grid-area: product-article;
	margin-bottom:1rem;

}

#pi .main .art ul{
	display:grid;
	margin:0;
	padding:1rem 0;
	grid-template-columns:auto auto auto;
	align-items:center;
	margin-bottom:2rem;
}

#pi .main .art li{
	color:var(--green);
	margin:0;

	list-style:none;
	text-align:center;
	border-right:2px solid var(--green);
	height:100%;
	align-items:center;
	display:grid;
}

#pi .main .art li span{
	padding:var(--spacing);
	display:block;
	
}

#pi .main .art li i{
	margin-right:1rem;
	display:inline-block;
	vertical-align:middle;
}
#pi .main .art li:last-child{
	border:none;
}

#pi .main .art .promise{
	text-align:center;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	position:relative;
	/*margin equal to half the height of the badge */
	/* margin-top: 38.5px; */
	padding:2em;
	margin-bottom:1rem;
}

#pi .main .art .promise h3{
	margin-top: 1.5rem;
}

#pi .main .art .promise img{
	position:absolute;
	left:calc(50% - 38.5px);
	top:-38.5px;
}

#pi .main .art .promise p{
	margin:0;
}


#pi .main .art .product-cta{
	display:grid;
	grid-template-columns:30px 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 .main .art .product-cta i{
	grid-area:icon;
	color:var(--green);
	text-align:center;
	font-size:1.2rem;
}

#pi .main .art .product-cta p{
	grid-area:text;
	margin:0;
		font-size:.825rem;
}

/* Tabbed Descriptions
-------------------------------------------------------*/
#pi .pi_tab,
#pi #pi_wrapper {
	grid-area: product-tabbed-description;
}

#pi ul.pi_tabs {
	--spacerwidth: calc((100% - var(--site-max-width)) / 2 );
	cursor: pointer;
	margin: 0;
	padding: 0;
	display:grid;
	grid-template-columns:  var(--spacerwidth) auto auto auto var(--spacerwidth);
	grid-template-areas: ". tab1 tab2 tab3 .";
	border-bottom:1px solid var(--border-color); 
}

/*ugly but it works*/
#pi ul.pi_tabs li[tabid="tabs1"]{
	grid-area:tab1;
}

#pi ul.pi_tabs li[tabid="tabs2"]{
	grid-area:tab2;
}

#pi ul.pi_tabs li[tabid="tabs3"]{
	grid-area:tab3;
}

#pi ul.pi_tabs li[tabid="tabs4"]{
	grid-area:tab4;
}

#pi ul.pi_tabs li {
	list-style: none;
	margin: 0;
	padding: 1em;
	text-align: center;
	color:var(--text-color-light);
}

#pi ul.pi_tabs li.selected {
	color:var(--text-color);
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px white solid;;
	position:relative;
	padding:calc(1em + 2px);
	top:1px
}

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

#pi .pi_tab_content {
	width: calc(var(--site-max-width) - 2rem);	
	margin:auto;
	padding:2rem 1rem;
}

/*a class would be better! */
#pi .pi_tab_content div[itemprop="description"]{
	width:50%;
	display:inline-block;
	vertical-align:top;
	
}

#pi .pi_tab_content .img{
		width:50%;
	display:inline-block;
	vertical-align:top;
}

#pi .pi_tab_content ul,
#pi .pi_tab_content ol {
	margin: 1em
}

/* Recommended Products - option to also buy these at the same time
-------------------------------------------------------*/
#pi .prec {
	grid-area: product-recommended;
	margin-top: 1rem;
}

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

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

#pi .prec h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(100% - .5em);
	margin-left: .5em;
	height: 2px;
	content: '\a0';
	background-color:var(--green);
}



/* -------------------------------------------------------------------------------------
=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;
	margin:0;
	font-size:16px;
}



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


/* 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{
	display:grid;
	grid-template-columns:auto auto;
	grid-gap:1rem;
	grid-template-areas:"header header"
	"attX attY"
	"calcprice calcprice"
}*/

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


.attributeTypePrice_Matrix_Calculator .att_header{
	/*not in design so hiding */
	display:none;
}

.attributeTypePrice_Matrix_Calculator label{
	display:inline-block;
}

.att_X,
.att_Y{
	display:inline-block;
	vertical-align:top;
	width:50%;
	padding-bottom:1rem;
	text-align:center;
	overflow:hidden;
}

.att_X label,
.att_Y label{
	display:block;
	margin:0;
}

.att_X{
	grid-area:attX;
}

.att_X label:after{
	display:inline-block;
	font-family: var(--font-awesome);
	margin:var(--half-spacing);
	content: '\f07e';
	color:var(--green);
}
/*
.att_X:after{
	content:'cm';
	display:inline-block;
}*/

.att_Y{
	grid-area:attY;
}
.att_Y label:after{
	display:inline-block;
	font-family: var(--font-awesome);
	margin:var(--half-spacing);
	content: '\f07d';
	color:var(--green)
}
/*
.att_Y:after{
	content:'cm';
	display:inline-block;
}*/

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


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


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

.attributeTypePrice_Matrix_Calculator .calc_price .submit{
	display:inline-block;
	width:100%;
	padding: 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{
	width: 8rem;
}
.attributeTypePrice_Matrix_Calculator .calc_price .submit {}


/*NEW 2023 shutter price element - html structure needs correcting !!! */

.attributeTypePrice_Matrix_Calculator  .shuttercalc{
	/* border:1px red solid; */
	text-align:center;
	margin:0;
		text-transform:uppercase;
}

.attributeTypePrice_Matrix_Calculator  .shuttercalc .shuttercalc{
	border:1px var(--error-color) solid;
	display:block;
	margin:1em 0;
	text-align:center;
}

.attributeTypePrice_Matrix_Calculator  .shuttercalc div{
	display:inline-block;
	font-weight:500;
	padding:.25em;
}

.helplink{
	font-style:italic;
}

.helplink:hover{
		cursor:pointer;
}

/* 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 .radiobuttondatali ul{
	display:grid;
	grid-template-columns:2fr 1fr;
	text-align:right;
}


.attributeTypeRadio_button .radioholder input{
	display:inline-block;
	vertical-align:middle;
}
.attributeTypeRadio_button .radioholder label{
	margin-left:1em;
	vertical-align:middle;
}

/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.attributeTypeText_Box_Free_Text_Entry {
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}

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

.attributeTypeText_Box_Free_Text_Entry div label{
	line-height:1;
}
/* end hack*/


.attributeTypeText_Box_Free_Text_Entry div span{
	line-height:1.5;
	font-size:.75em;
}

.attributeTypeText_Box_Free_Text_Entry .inputtext{
	max-width:100%;
	width:calc(100% - 3rem);
}



/*attributeTypeDrop_down_list
***************************************************************/
.attributeTypeDrop_down_list {
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}

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

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

.attributeTypeDrop_down_list select{
	width:calc(100% - 3rem);
}

/* 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 - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 6fr 3fr;
	grid-gap:0;
	grid-column-gap: 2em;
	grid-template-areas:"header header"
						"contents sidebar"
						"promcontents promcontents";
	align-items:start;
	margin-bottom:4rem;
}

/* if basket is empty and user is in it */
.bskt .empty{}
.bskt .empty .header{}
.bskt .empty .total{}



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

#pm .bskt .header .icon{
	display:none;
}

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

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


/* Basket Contents
-------------------------------------------------------------------------------------------------------------- */
#pm .bskt .contents{
	grid-area:contents;
	display:grid;
	grid-template-areas:"lines"
	"subtotal"
	"suppchg";
}


/* Basket Sup Charge
------------------------------------------------------- */
.suppchg{
	grid-area:suppchg;
	text-align:left;
}

.suppchg >div{
	display:grid;
	grid-template-areas:"header header"
						"checkbox text";
	align-items:start;
}

.suppchg h3{
	font-weight:400;
	font-size:1rem;
	padding:var(--spacing);
	grid-area:header;
	margin-bottom:1rem
}

.suppchg h3:before{
	content:'\f545';
	font-family:var(--font-awesome);
	color:var(--green);
	font-size:1rem;
	display:inline-block;
	vertical-align:middle;
	margin-right:var(--half-spacing)
}

.suppchg input{
	grid-area:checkbox;
	margin:0 1rem;
}
.suppchg .article{
	grid-area:text;
	font-size:.825rem;
}

.suppchg .article p{
	font-size:.725rem;
}

.suppchg .article p:last-child{
	font-size:.725rem;
	/* padding:.5rem 1rem; */
}


/* Basket Lines
------------------------------------------------------- */
#pm .bskt .alllines{
	grid-area:lines;
	/* max-height:620px; */
	/* overflow-y:auto; */
}

/*custom scrollbar */
#pm .bskt .alllines::-webkit-scrollbar {
	width: 10px;
}
#pm .bskt .alllines::-webkit-scrollbar-track {
	background: var(--off-white); 
} 
#pm .bskt .alllines::-webkit-scrollbar-thumb {
	background: var(--grey); 
}
#pm .bskt .alllines::-webkit-scrollbar-thumb:hover {
	background: var(--dark-grey); 
	cursor:grab;
}
#pm .bskt .alllines::-webkit-scrollbar-thumb:active {
	cursor:grabbing;
}

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

	border-bottom:1px solid	var(--border-color);
	grid-column-gap:1rem;
}

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

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


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

#pm .bskt  .line .prodinfo .surcharge{
	font-weight:600;
}
#pm .bskt .line .prodinfo li{
	list-style:none;
	font-size:.725rem;
}

#pm .bskt .line .prodinfo li.disc{
	color:red;
}

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

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

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


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

#pm .bskt .line .prodinfo li.lead span{
	display:inline-block;
	color:var(--green);
	font-style:normal;
	border:1px var(--green) solid;
	padding:.25rem;
	border-radius:.25rem;
	margin-right:.5rem;
}
#pm .bskt .line .prodinfo li.lead span:before
{
	font-family:var(--font-awesome);
	content: "\f00c";
	display: inline-block;
	font-size:1em;
	margin-right: 1em;
}


/*product quantity */
#pm .bskt .lines .line .qty{
	grid-area:qty;
	align-self:center;
}
#pm .bskt .lines .line .qty form{
	line-height:1;
}
#pm .bskt .lines .line .qty label{
	margin-right:var(--half-spacing);
}
#pm .bskt .lines .line .qty button{
	background:var(--white);
	border:1px solid var(--border-color);
	padding:var(--half-spacing);
	font-family:monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right:0;
	border-top-left-radius:var(--border-radius);
	border-bottom-left-radius:var(--border-radius);
}
#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left:0;
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}
#pm .bskt .lines .line .qty input.inputtext{
	text-align:center;
	border-radius:0;
	border-left:0;
	border-right:0;
		font-family:monospace;
}



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

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



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

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


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


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

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


/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal{
	/*why display this... we have this info in the totals area... */
	grid-area:subtotal;
	display:grid;
	grid-template-columns:1fr 10ch;
	font-size:1.25em;
	margin-bottom:var(--spacing);
	display:none;
}

.prodsubtotal label{
	text-align:left;
}
.prodsubtotal span{
	text-align:right;
}


/* Basket Prom
------------------------------------------------------- */
#pm .bskt .art{
	grid-area:promcontents;
}




/* Basket Sidebar
-------------------------------------------------------------------------------------------------------------- */

/* 
totals
voucher
specinst
shipping
buttons
*/

#pm .bskt .sidebar{
	grid-area:sidebar;
	background-color:var(--off-white);
	border-radius:var(--border-radius);
}


/* Basket Totals
------------------------------------------------------- */

.bskttotals{
	grid-area:totals;
	text-align:center;
	display:grid;
	padding:1rem;
}

/*added title */
.bskttotals:before{
	content:"Summary";
	display:block;
	line-height:1;
	font-family:var(--heading-font);
	font-size:2em;
	text-align:left;
	margin-bottom:.5rem;
}

.bskttotals .total{
	display:grid;
	grid-template-areas:"label total";
	font-size:1.5rem;
}

.bskttotals .total label{
	grid-area:label;
	text-align:left;
}

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

.bskttotals .subtotal{
	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;
	text-align:center;
	padding:0 1rem;
}
.vouchentryaccord ul,
.vouchentry ul{
	list-style:none;
}

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

.vouchentryaccord li.pane{
	display:none;
}

#pm .bskt .vouchentryaccord .header{
	font-size:1rem;
	border:none;
	border:0;
	padding:0;
	font-size:.825rem;
	text-decoration:underline;
	grid-template-columns:1fr;
	grid-template-areas: "question";
	margin:0;
	margin-bottom:1rem;
}

.vouchentryaccord .header img{
	display:none !important;
}

#pm .ul.accordion .vouchentryaccord .pane,
#pm .bskt  ul.accordion .pane {
	padding:0;
	display:none;
	background:none;
}

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

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

.vouchentry .appliedpromovoucher{
	padding:var(--half-spacing) var(--half-spacing)
}

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

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

.vouchentry .submit{
	grid-area:submit;
	background-color:var(--light-navy);
	border-color:var(--light-navy);
	margin-left:.5rem;
}

/* Special Instructions
------------------------------------------------------- */
#bsktid .specinst{
	grid-area:specinst;
	text-align: left;
	padding:0 1rem;
}

#bsktid .specinst li{
	display:block;
}
#bsktid .specinst label{
	/* display:none; */
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
}

#bsktid .specinst textarea{
	width:100%;
}

#bsktid .specinst .chars{
	font-size:xx-small;
}

/* Shipping 
------------------------------------------------------- */
#bsktid .shipping {
	grid-area:shipping;
	text-align: left;
		padding:1rem;
}

#bsktid .shipping li,
#bsktid .shipping span{
	display:block;
}

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

.shipzone{
	display:grid;
	grid-template-areas:"label postcode search"
	"country country country";
	align-items:center;
}

.shipzone #countryid{
	grid-area:country;
	margin-top:1em;
}

#bsktid .shipping .ship_edit{
	display:block;
	text-decoration:underline;
	cursor:pointer;
	grid-area:country;
	margin-top:1em;
}

.shipzone .submit{
	margin-left:1em;
}

.shipservice {
	margin:1em 0;
}

.shipservice select{
	width:100%;
}

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons{
	grid-area:buttons;
	text-align:center;
}

.bsktbuttons .startcheckout{
	grid-area:pay;
	margin-bottom:1rem;
}

.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;
	margin:0 1rem;
	background-color:var(--button-color);
}

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

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

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

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

/* basket confidence points - payment icons */
.bsktbuttons .art{
	/* margin-top: 1em; */
	grid-area:logos;
	background-color:var(--navy);
	border-radius:var(--border-radius);
	border-top-left-radius:0;
	border-top-right-radius:0;
}

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

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

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

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

#pm .bskt .header.freedel .title{
	position:relative;
}

#pm .bskt .header.freedel .title:before, 
#pm .bskt .header.freedel .title:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(15% - 1em);
    margin-left:1em;
    height: 2px;
    content: '\a0';
    background-color:var(--border-alt-color);
}

#pm .bskt .header.freedel .title:before{
	margin-left: -15%;
	text-align: right;
}

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


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

.priordelinfo{
	grid-area:prioritydelivery;
}

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

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

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

.priordelinfo h5,
.stddelinfo h5{
	grid-area:details;
	margin:0;
	font-family:var(--text-font);
	font-weight:400;
	font-size:.825rem
}

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

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

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

#pm .bskt .art .returns img{
	grid-area:icon;
}
#pm .bskt .art .returns h4{
	grid-area:message;
	margin:0;
}
#pm .bskt .art .returns h5{
	grid-area:details;
		margin:0;
	font-family:var(--text-font);
	font-weight:400;
	font-size:.825rem
}


/* -------------------------------------------------------------------------------------
=New 2025 Checkout Process
------------------------------------------------------------------------------------- */
.chkflow #pt{
	--spacerwidth: calc((100% - var(--site-max-width)) / 2 );
	--logowidth:200px;
	padding:1em 0;
	display:grid;
	grid-template-columns:var(--spacerwidth) var(--logowidth) 1fr var(--logowidth) var(--spacerwidth);
	grid-template-areas:
		". logo breadcrumb secure .";
}

.chkflow #pt .logolge{
	grid-area:logo;
}
.chkflow #pt .logosecure{
	grid-area:secure;
}

.chkflow #pmid{
	background-color:var(--off-white);
	padding:1em 0;
}

.chkflow .pmfull{
	width:calc(var(--site-max-width) - 2em);
	max-width:var(--checkout-process-width);
	background:none;
}

/* summary info */
.chkflow .suminfo{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
}
.chkflow .suminfo li{
	display:block;
}

.chkflow .suminfo li.info:before{
	content:'';
	margin:0;
}
.chkflow .suminfo li.info{
	padding:0;
	margin:0;
	color:var(--text-color);
	font-size:.825em;
}

.chkflow .suminfo .title{
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	margin-bottom:1em;
}
.chkflow .suminfo .header{}

.chkflow .suminfo label,
.chkflow .suminfo span{
	display:block;
}
.chkflow .suminfo span,
.chkflow .suminfo .address{
	margin-bottom:1rem;
}

.chkflow .suminfo label{
	font-size:1rem;
}

.chkflow .suminfo .address{
	font-size:.825em;
	margin-bottom:1rem;
}


/* Signin/guest pane
------------------------------------------------------- */

.chkflow .signin{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
}

.chkflow .signin li{
	display:block;
	margin-bottom:.5rem;
}

.chkflow .psign .bt,
.chkflow .pguest .bt{
	border:2px solid var(--border-color);
	padding:1rem .5rem;
	display:grid;
	grid-template-areas:
		"radio info"
		"radio message";
	grid-column-gap:.5em;
	grid-template-columns:2em 1fr;
	/* margin-bottom:1rem; */
	align-items:center;
}

.chkflow .psign .bt input,
.chkflow .pguest .bt input{
	grid-area:radio;
}
.chkflow .psign .bt h3,
.chkflow .pguest .bt h3{
	grid-area:info;
	margin:0;
}

.chkflow .psign .bt p.info,
.chkflow .pguest .bt p.info{
	grid-area:message;
	margin:0;
	font-size:.8em;
}


/* Existing Customer fields 
---------------------------*/
.chkflow .psign{
	margin-bottom:1em;
}

.chkflow .psign .exstcust{
	padding:0 1em;
}

.chkflow .psign label{}

.chkflow .psign img,
.chkflow .psign .exstcust .exstreqfield{
	display:none;
}

.chkflow .psign .inputtext,
.chkflow .psign .submit{
	width:100%;
}

.chkflow .psign li.info{}

.chkflow .psign li.info:before{
	content:'';
	margin:0;
}

.chkflow .psign .subscribe{
	font-size:.8em;
	margin:.5rem 0;
}
.chkflow .psign .subscribe input{}

.chkflow .psign .subscribe label{
	display:inline;	
	margin-left:.5rem;
}

.exstfgtpwd{
	text-decoration:underline;
	font-size:.825em;
}


/* guest checkout fields 
---------------------------*/
.chkflow .pguest{}

.chkflow .pguest .signinguest{
	padding:0 1em;
	margin-top:1em;
}

.chkflow .pguest label{}
.chkflow .pguest label img{
	display:none;
}

.chkflow .pguest .inputtext,
.chkflow .pguest .submit{
	width:100%;
}


.chkflow .pguest li.info{
	color:var(--text-color);
	font-size:.725em;
	margin:.5rem 0;
}

.chkflow .pguest li.info:before{
	content:'';
	margin:0;
}

.chkflow .pguest .subscribe{
	font-size:.8em;
	margin:.5rem 0;
}
.chkflow .pguest .subscribe input{}

.chkflow .pguest .subscribe label{
	display:inline;	
	margin-left:.5rem;
}

/* Basket Summary
------------------------------------------------------- */

.chkflow .bsktsummary{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
	display:grid;
	grid-template-areas:"items expand"
	"total expand";
	grid-template-columns:1fr 2em;
}


.chkflow .bsktsummary #bsktitems,
.chkflow .bsktsummary #bsktvalue{
	margin:0;
	font-size:small;
}

.chkflow .bsktsummary #bsktitems span,
.chkflow .bsktsummary #bsktvalue span{
	font-weight:bold;
	margin-right:.5rem;
	width:5ch;
}

.chkflow .bsktsummary img{
	grid-area:expand;
}

.chkflow .bsktsummary img.btn{
	display:none;
}


.chkflow .bsktsummary .showhide{
	display:none;
	cursor:pointer;

}

.chkflow .bsktsummary .showshow{
cursor:pointer;
}

.chkflow .hoverbskt {
	/* border: 2px solid var(--red); */
	border-radius:0;
	padding: var(--spacing);
	width: calc(90% - 2em);
	max-height:125px;
	overflow-y:auto;
	z-index: 999999;
	text-align: center;
	
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	box-shadow: none;
	background-color: var(--off-white);

	position:absolute;
	margin-top:-2em;
	left:5%;

	border-bottom-right-radius:var(--border-radius);
	border-bottom-left-radius:var(--border-radius);
	border:1px solid var(--grey);
	border-top:0;
}

/* delivery Address pane
------------------------------------------------------- */
.chkflow #pdelivery{
	padding:1em;
}

.chkflow #pdelivery .inputtext{
	width:100%;
}

.chkflow #pdelivery .chkbox label{
	display:inline;
	font-size:.825rem
}
.chkflow #pdelivery .chkbox input{
	display:inline;
	margin:0;
	margin-right:.5rem;
}

.chkflow #pdelivery .remove{
	font-size:.825em;
	margin-bottom:1rem;
}



/* Invoice Address pane
------------------------------------------------------- */
.chkflow #pchkout{
	padding:1em;
}

.chkflow #pchkout .inputtext{
	width:100%;
}

.chkflow #pchkout .chkbox label{
	display:inline;
	font-size:.825rem
}
.chkflow #pchkout .chkbox input{
	display:inline;
	margin:0;
	margin-right:.5rem;
}





/* Postcode Lookup
------------------------------------------------------- */
.pclup,
.pclupdel
{
	display:grid;
	grid-template-columns: auto  auto 1fr;
	grid-column-gap:1em;
	grid-template-areas:
		"title title title"
		"postcode locate ."
		"manual manual manual"
		"address address addres";
	align-items:center;
}

.pclup label,
.pclupdel label{
	grid-area:title;
}


#pclupManualAddressDel,
#pclupManualAddress{
	grid-area:manual;
	text-decoration:underline;
	cursor:pointer;
}

#txtPostCodeLookup{
	grid-area:postcode;
}

#btnPostCodeLookup{
	grid-area:locate;
}


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

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

#ddlMultiAddress,
#ddlMultiAddressDel{

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


.pclup input,

.pclupdel input{
	width: auto;
	display: block;
	margin:0;
	margin-bottom:0;
}


/* delivery service options
------------------------------------------------------- */

.chkflow .service{
	background-color:var(--white);
	padding:1em;
	/* margin-bottom:2em; */
}

.serviceoption{
	border:2px solid var(--border-color);
	padding:1em;
	display:grid;
	grid-template-areas: "radio info price"
	"radio desc price";
	grid-column-gap:.5em;
	grid-template-columns:2em 1fr auto;
	margin-bottom:1rem;
	align-items:center;
}

.serviceoption:last-of-type{
	margin-bottom:0;
}

.serviceoption input{
	grid-area:radio
}

.serviceoption label{
	grid-area:info;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	font-size:1.25em;
}
.serviceoption h3{
	grid-area:price;
	margin:0;
}

.serviceoption p{
	grid-area:desc;
	font-size:.825em;
	margin:0;
}


.chkflow .service +form,
.delinst{
	background-color:var(--white);
	padding:1em;
}

.chkflow .service +form li,
.delinst li{
	display:block;
}

.chkflow .service +form li label,
.delinst li label{
	display:block;
}

.chkflow .service +form li textarea,
.delinst li textarea{
	width:100%;
	height:8em;
}

.delinst li.chars{
	font-size:small;
}

.shippinginfo,
.deliveryinfo{
	background-color:var(--white);
	padding:1em;
}





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

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

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

.termsmsgcontainer{
}
.payopts{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1em;
}

.payopts .sagepay,
.payopts .sagepay .btn{
	border-radius:.5em;
	padding: 0px;
	margin:0;
	display:block;
}

.payopts .sagepay .btn{
	padding: 6px;
}


.payopts .paypal,
.payopts .paypal .btn{
	background:none;
	padding:0;
	border:0;
	border-radius:0;
	object-fit:fill;
	height:100%;
}


/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn,
.page_checkout .contbtn{}

.forinvoice{}
.page_delivery .forinvoice .chkbox label{}
.page_delivery .contbtn input,
.page_checkout .contbtn input{
	margin-top:2em;
	width:100%;
}






/* -------------------------------------------------------------------------------------
=Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */
.page_checkoutprocess #pm{
	display:grid;
	grid-template-areas:
		"details . breadcrumb";
	grid-template-columns:calc(70% - .5em) 1em calc(30% - .5em);
	grid-gap:1em;
	position:relative;
}

/* Defaults / Overrides 
------------------------------------------------------- */
#checkout_panel_processing,
#ro_accord_processing {
	position:absolute;
	display:none;
	width:100%;
	opacity:0.6;
	filter:Alpha(Opacity=60);
	background-color:blue;
	float:right;
}

#checkout_accordion li{
	display:block;
	margin-bottom:var(--spacing)
}

#checkout_accordion label{
	display:block;
}

#checkout_accordion label img{
	display:inline;
	vertical-align:top;
}

#checkout_accordion input,
#checkout_accordion textarea{
	width:100%;
}

#checkout_accordion select{
	width:100%;
}

/* Accordion tabs 
------------------------------------------------------- */

/* Typography
------------------------------------------------------- */


/* Main accordion Sections 
------------------------------------------------------- */
#ul_top {}
#ul_left {}
#ul_right {}
#ul_bottom{}

/* Customer Details 
------------------------------------------------------- */



/* Delivery Address 
------------------------------------------------------- */


/* Checkout Accordion panel
------------------------------------------------------- */
#checkout_accordion{
	grid-area:details
}


/* Checkout Breadcrumb panel
------------------------------------------------------- */
#checkout_accordion_breadcrumb {
	grid-area:breadcrumb;
}

#pm .accordbdcb ul {
	border-bottom:1px solid var(--border-color);
	margin-bottom:.5em;
}

#pm .accordbdcb li{
	list-style:none;
}


#pm .accordbdcb ul li.header {
	position:relative;
	cursor:pointer;
	font-weight:bold;
}

#pm .accordbdcb ul li:last-child {}

#pm .accordbdcb ul li.title {
	position:relative;
	cursor:pointer;
}

/* due to the way the payment bit in the checkout crumb is written out */
#pm .accordbdcb ul li span.label {}

/* terms and conditions article in checkout
------------------------------------------------------- */
#pp {
	width:1000px;
	margin:0 auto;
	background-color:white;
}

#pp p, #pp h3, #pp h4 {
	margin:0 1em;
}

#pp h3, #pp h4 {
	margin-bottom:.5em;
}



/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
.form.myaccount#psign {
	width: calc(100% - 2em);
	margin: auto;
}

/* could do with being in some form of logical container */
.page_useraccount #pm .bnr {
	text-align: center;
}

/* could do with being in some form of logical container */
.page_useraccount #pm .arts {
	text-align: center;
}

#psign h4,
#psign h3 {
	margin-bottom: .5em;
}

.page_useraccount ul.orders img,
.page_useraccount ul.contact img,
.page_useraccount ul.details img {
	max-width: 100%;
	height: auto;
}

.page_useraccount ul.orders {}

/* new order status stuff - no one ever does stuff the same!!!! */
.past_orders {
	display: grid;
}

.past_order_header,
.past_order {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* account icons
------------------------------------------------------- */
.page_useraccount .form li.icon {
	display: inline-block;
	margin-right: 1em;
}

.page_useraccount .form li.icon a.img {
	display: block;
	text-align: center;
	border: 1px solid var(--border-color);
}

.page_useraccount .form li.icon a.lnk {
	display: block;
	text-align: center;
	margin: .5em auto;
}

.page_useraccount .form li.icon a.img img {
	display: block;
	margin: auto;
}

/* -------------------------------------------------------------------------------------
=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 .header:before, 
.page_confirmation .header:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(15% - 1em);
    margin-left:1em;
    height: 2px;
    content: '\a0';
    background-color:var(--border-alt-color);
}

.page_confirmation .header:before{
	margin-left: -15%;
	text-align: right;
}


.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 .subhead:before, 
.page_confirmation .subhead:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: calc(15% - 1em);
    margin-left:1em;
    height: 2px;
    content: '\a0';
    background-color:var(--border-alt-color);
}

.page_confirmation .subhead:before{
	margin-left: -15%;
	text-align: right;
}


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

/* Product title*/
.page_confirmation .conf .order .line .descr {
	align-self: start;
	font-size: 1rem;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .line .price {
	text-align: right;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: start;
}

/* Basket Subtotal
------------------------------------------------------- */
.page_confirmation .conf .order .subtotal {
	padding: 1em;
	border-top: 1px var(--border-color) solid;
	text-align: right;
}

.page_confirmation .conf .order .subtotal label {
	margin-right: 1em;
}

.page_confirmation .conf .order .subtotal span {
	font-size: 1.2em;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .address {
	text-align: center;
	margin-bottom:4rem;
}

/* Post order customer registration panel
------------------------------------------------------- */
.page_confirmation .conf .ordreg {
	background-color: #ffffff;
	padding: 1em;
	margin: 1em 0;
}

.page_confirmation .conf .ordreg input {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .info {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .help {
	font-size: .725em;
	padding: 1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style:none;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
}

#pm .smap ul li {
}

/* First Level */
#pm .smap ul li {
}

#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}

/* Second Level */
#pm .smap ul li ul {
	grid-template-columns:1fr;
}

#pm .smap ul li ul li {
	width: 100%;
}

#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}

/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}


/* -------------------------------------------------------------------------------------
=Client Spefific Stylings 
------------------------------------------------------------------------------------- */
#productGallery{
	max-width:500px;
	margin:auto;
}


.sahelpart{
	display:none;
}

.sahelpart img{
	width:auto !important;
	height:auto !important;
}


.jaqshadow{
	display:none!important;
}

/*custom grid styling for footer articles on a particular page */

#p48693251{
	display: grid;
	max-width:var(--site-max-width);
	margin:auto;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}


#pm .pmind#prom-1725890542{
	grid-auto-flow:unset;
	margin-bottom:2em;
}


.pmind .fprd{
	/* outline:1px red solid; */
	grid-column:auto / span 3
}
/* ------------------------------------------------------------------------------------
	SCREEN - Order Electric Blinds 2023
	Filename : nav.css
	Last Updated : 04. 04. 2023
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com


/* ##################### MAIN STYLES ######################### */


:root{
	--menu-line-height:50px;
}

.nav-wrapper *,
.nav-wrapper *:before,
.nav-wrapper *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


.nav-wrapper {
	grid-area:nav;
	position: relative;
	width: 100%;
	min-height: var(--navbar-height);
	margin: 0 auto;
	background: var(--navbar-color);
}

.nav-wrapper ul,
.nav-wrapper li{
	margin:0;
	padding:0;
	list-style: none;
}

/* Top Nav
------------------------------------------------------- */
.nav-wrapper ul.nav {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	/*used to stop the gaps with inline block stuff*/
	font-size:0;
	width: var(--menu-max-width);
	text-align:center;
}

div.nav-wrapper>ul {
	position: relative;
}

ul.nav>li {
	display:inline-block;
	font-size: 1rem;
}

ul.nav>li>a {
	display: block;
	line-height:var(--menu-line-height);
	padding: 0 calc(2rem + 10px) 0 1rem;
	color: var(--navbar-link-color);
	text-decoration: none;
}

ul.nav>li>a:only-child {
	padding: 0 2rem 0 2rem;
}

ul.nav>li>a:hover,
ul.nav>li:hover>a,
ul.nav>li.active-menu-item>a:hover,
ul.nav>li.active-menu-item:hover>a,
ul.nav>li.first-menu-item>a:hover,
ul.nav>li.first-menu-item:hover>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}

ul.nav>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li>a>img {
	max-width: 16px;
	display: block;
}

/* Classic Dropdown
-------------------------------------------------------------------------------------------------------------- */

/* dropdown icons
------------------------------------------------------- */
ul.nav li.classic .deptlink{
	font-size:0;
	/*don't put padding here it breaks the menu on mobile */
	/* padding:0 var(--half-spacing); */
}

ul.nav li.classic .deptlink a.img{
	display:inline-block;
	vertical-align:middle;
	max-height:var(--navbar-dropdown-item-height);
	width:var(--navbar-dropdown-item-height);
	margin-right:var(--half-spacing);

}

ul.nav li.classic .deptlink a.img img{
	
	padding:4px;
}

ul.nav li.classic .deptlink a.txt,
ul.nav li.classic .deptlink a.l2,
ul.nav li.classic .deptlink a.l3,
ul.nav li.classic .deptlink a.l4{
	display:inline-block;
	vertical-align:middle;
	font-size:var(--navbar-dropdown-text-size);
	line-height: var(--navbar-dropdown-item-height);
	padding: 0;
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

ul.nav > li > ul > li:hover .deptlink{
	background: var(--navbar-hover-color);
	color:var(--navbar-hover-text-color);
}

ul.nav > li > ul > li:hover .deptlink a.txt
{
	color:var(--navbar-hover-text-color);
}

/* 2nd Level
------------------------------------------------------- */
ul.nav>li>ul,
ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	position: absolute;
	width: var(--navbar-dropdown-width);
	z-index:1001;
	text-align:left;
	background: var(--navbar-dropdown-color);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

ul.nav>li>ul>li,
ul.nav>li>ul>li>ul>li {
	position: relative;
}

ul.nav>li>ul>li>a,
ul.nav>li>ul>li>ul>li>a,
ul.nav>li>ul>li>ul>li>ul>li>a {
	display: block;
	width: var(--navbar-dropdown-width);
	width:100%;
	line-height: var(--navbar-dropdown-item-height);
	padding: 0 var(--spacing);
	color: var(--navbar-dropdown-text-color);
	text-decoration: none;
	font-size: var(--navbar-dropdown-text-size);
}

ul.nav>li>ul>li:hover>a,
ul.nav>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>a:hover,
ul.nav>li>ul>li>ul>li>ul>li:hover>a,
ul.nav>li>ul>li>ul>li>ul>li>a:hover {
	background: #efefef;
}

ul.nav>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>a:only-child:after,
ul.nav>li>ul>li>ul>li>.deptlink:only-child:after,
ul.nav>li>ul>li>ul>li>ul>li>a:only-child:after {
	content: "";
}

ul.nav>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>a .fa,
ul.nav>li>ul>li>ul>li>ul>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.ruby-menu-right>ul {
	right: 0;
}

/* RUBY 3RD & 4TH LEVEL SPECIFIC */

ul.nav>li>ul>li>ul,
ul.nav>li>ul>li>ul>li>ul {
	left: var(--navbar-dropdown-width);
	top: 0;
	z-index: 100;
}

ul.nav>li>ul>li.ruby-open-to-left>ul,
ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul {
	left: auto;
	right: var(--navbar-dropdown-width);
}

/* RUBY MENU MEGA */

ul.nav>li.mega-menu-classic>div,
ul.nav>li.mega-menu>div,
ul.nav>li.ruby-menu-mega-shop>div {
	position: absolute;
	z-index:1001;
	width: var(--menu-max-width);
	height: auto;
	top: var(--navbar-height);
	left: 0;
	background: var(--navbar-dropdown-color);
	overflow: hidden;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/* RUBY MENU MEGA BLOG */

ul.nav>li.mega-menu>div>ul.mega-menu-nav {
	position: relative;
	width: var(--navbar-dropdown-width);
	height: 100%;
	margin:0;
	/* height: 500px;  if you don't want javascript to define height, use manual height */
	left: 0;
	top: 0;
	background: var(--navbar-sidebar-color);
	color:var(--navbar-sidebar-text-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 {
	font-size: 1rem;
	padding:1em;
}
ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2:hover{
	background-color:var(--off-white);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.l2 > .deptlink a.img{
	display:none;
}

/*side bar items */
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
	text-align:left;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a{
	display:block;
}

/*sort out icons - none in side bar */
.mega-menu-nav .l2 .deptlink .img{
	display:none;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.active-menu-item > .deptlink
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.first-menu-item > .deptlink {
  background: var(--navbar-sidebar-hover-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a {
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a {
	background: #e6e6e6;
}


ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid {
	position: absolute;
	width: calc(var(--menu-max-width) - var(--navbar-dropdown-width));
	height: auto;
	max-height:100%;
	min-height: 100%;
	left: var(--navbar-dropdown-width);
	top: 0;
	background: var(--navbar-popout-color);
}

.mega-menu-nav .l3 .deptlink .img{
	display:block;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a {
	background: #ddd;
}


/* RUBY CONTENT GRID */

div.menu-grid,
div.menu-grid-lined {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

/*rows*/
div.menu-grid>div.menu-row {
	position: relative;
	padding:var(--half-spacing);
	height:auto;
}

div.menu-grid > div.menu-row ul{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-gap:1rem;
	margin-bottom:1rem;
}

div.menu-grid > div.menu-row ul li{
	padding:var(--spacing);
	list-style:none;
}

div.menu-grid > div.menu-row ul li.l3{
	padding:0;
}

div.menu-grid > div.menu-row ul li .deptlink{
	position:relative;
	border-radius:1em;
	margin:0;
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
	align-items:center;
	background-color:var(--grey);
}

div.menu-grid > div.menu-row ul li .deptlink a.img{
	grid-column:1;
	grid-row:1;
}

div.menu-grid > div.menu-row ul li .deptlink a.img img{
	width: 100%;
	object-fit: cover;
	margin:auto;
}

div.menu-grid > div.menu-row ul li .deptlink a.txt{
	color:var(--white);
	background-color:var(--grey);
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	font-size:1rem;
	grid-column:1;
	grid-row:1;
	z-index:10;
	align-self:end;
	text-align:center;
	/* margin:1rem .25rem; */
}




div.menu-grid.menu-grid-lined>div.menu-row:after {
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%);
	/* Chrome10+,Safari5.1+ */
}

div.menu-grid.menu-grid-lined>div.menu-row:last-child:after {
	height: 0;
}

div.menu-grid>div.menu-row::after {
	content: "";
	display: table;
	clear: both;
}






div.menu-grid img {
	position: relative;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Ruby Content Related */
ul.nav>li.mega-menu-classic>div ul,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul {
	margin: 0;
	margin-top: 10px;
}

ul.nav>li.mega-menu-classic>div ul li,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li {
	position: relative;
	font-size: 14px;
	line-height: 28px;
	display: block;
	width: 100%;
}

ul.nav>li.mega-menu-classic>div ul li>a,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li>a {
	text-decoration: none;
	color: var(--text-color);
	display: inline-block;
}

ul.nav>li.mega-menu-classic>div ul li>a:hover,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li>a:hover {
	color: var(--text-link-color-hover);
	text-decoration: underline;
}

ul.nav>li.mega-menu-classic>div ul li .fa,
ul.nav>li.ruby-menu-mega-shop>div>ul>li>div ul>li .fa {
	position: relative;
	width: 24px;
}

ul.nav>li.mega-menu-classic>div ul li>a>img {
	float: left;
	width: 60px;
	margin-right: 12px;
}




span.ruby-c-content {
	display: block;
	position: relative;
	top: 7px;
	font-size: 12px;
	line-height: 18px;
	text-align: justify;
}

.nav-wrapper .visible-xs {
	visibility: hidden;
	position: absolute;
}

/* DEVICES EXCEPT MOBILE */

@media(min-width:768px) {

	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	/* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */
	ul.nav>li:hover>ul,
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul {
		/* show */
		visibility: visible;
		opacity: 1;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div,
	ul.nav>li.ruby-menu-mega-shop>div {
		/* hide */
		visibility: hidden;
		opacity: 0;
		z-index:-1001;
	}
	/* RUBY MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
	ul.nav>li.mega-menu-classic:hover>div,
	ul.nav>li.mega-menu:hover>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div {
		visibility: visible;
		opacity: 1;
		z-index:1001;
		background: var(--navbar-popout-color);
	}
	/* RUBY MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink) {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.first-menu-item>div	{
		visibility: visible;
		opacity: 1;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>div {
		visibility: visible;
		opacity: 1;
		z-index: 101;
	}

	
	ul.nav>li.l1>a:not(:only-child):after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		position: absolute;
		margin-left: 5px;
	}
	ul.nav>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>.deptlink:after,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:after{
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		font-size: 16px;
		padding: 0;
		content: '\f105';
		position: absolute;
		right: 15px;
	}
	/*different position if deptlink icons used*/
	ul.nav > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > .deptlink:after,
	ul.nav > li > ul > li > ul > li > ul > li > .deptlink:after {
		top: 10px;
	}
	
	ul.nav>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li:hover>a:after,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a:after {
		content: "";
		position: absolute;
		right: 0;
		margin-top: 13px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 8px 6px 0;
		border-color: transparent #fff transparent transparent;
	}

	/* no sub menus, don't show arrows*/
ul.nav > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > a:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > ul > li > a:only-child:after{
	content: "";
}

	

ul.nav > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > .deptlink:only-child:after,
ul.nav > li > ul > li > ul > li > ul > li > ul > li > .deptlink:only-child:after{
	content: "";
}
	
}

/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## RESPONSIVE STYLES ###################### */

/* MEDIA QUERY --> EXTRA SMALL DEVICES */

@media(max-width:767px) {
	div.nav-wrapper .hidden-xs {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
		z-index:1001;
		background:var(--navbar-color);
	}
	.nav-wrapper .visible-xs {
		visibility: visible;
		position: absolute;
		left: 0;
		top: 0;
	}
	/* RUBY 1ST LEVEL */
	div.nav-wrapper>ul.nav {
		position: absolute;
		top: 50px;
		width: 100%;
		text-align:left;
	}
	ul.nav {}
	ul.nav>li,
	ul.nav>li.ruby-menu-right {
		float: none;
		display:block;
	}

	/*style the home nav link if present */
	ul.nav>li.l0>a {
		padding: 0 65px;
		background: var(--navbar-active-color);
		color:var(--text-color);
	}
	ul.nav>li>a {
		padding: 0 65px;
		background: var(--navbar-color);
	}
	ul.nav>li>a:only-child {
		padding: 0 65px;
	}
	ul.nav>li>a:hover,
	ul.nav>li:hover>a,
	ul.nav>li.active-menu-item>a:hover,
ul.nav>li.first-menu-item>a:hover	{
		background: var(--navbar-hover-color);
	}
	ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a	{
		background: var(--navbar-hover-color);
	}
	ul.nav>li.ruby-menu-social>a>span {
		display: block;
	}
	/* RUBY 2ND LEVEL */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		position: relative;
		width: 100%;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		border-top: none;
	}
	ul.nav>li,
	ul.nav>li>ul>li,
	ul.nav>li>ul>li>ul>li,
	ul.nav>li>ul>li>ul>li>ul>li {
		position: relative;
	}
	ul.nav>li>ul>li>a,
	ul.nav>li>ul>li>.deptlink,
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		width: 100%;
		line-height: 50px;
		padding: 0 80px;

	}
	ul.nav>li>ul>li:hover>a,
	ul.nav>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--navbar-sidebar-hover-color);
		color: var(--text-color);
	}
	/* RUBY 3RD & 4TH LEVEL SPECIFIC */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul {
		left: auto;
		right: auto;
	}
	ul.nav>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 95px;
	}
	ul.nav>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>.deptlink:hover {
		background: var(--popout-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink{
		background: var(--popout-color);
		padding: 0 110px;
	}
	ul.nav>li>ul>li>ul>li>ul>li:hover>a,
	ul.nav>li>ul>li>ul>li>ul>li>a:hover,
	ul.nav>li>ul>li>ul>li>ul>li:hover>.deptlink,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:hover{
		background: var(--popout-color);
	}
	ul.nav>li.ruby-menu-social>a {
		border: none;
	}
	/* RUBY MENU MEGA */
	ul.nav>li.mega-menu-classic,
	ul.nav>li.mega-menu {
		position: relative;
	}
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		position: relative;
		top: auto;
		left: auto;
		border-top: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	/* RUBY MENU MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li {
		position: relative;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink{
		line-height: 50px;
		padding: 0 75px;
		background: var(--navbar-sidebar-color);
		color: #222;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink
	{
		background: var(--navbar-active-color);
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {
		position: relative;
		width: 100%;
		min-height: auto;
		left: auto;
		top: auto;
		z-index: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>.deptlink{
		background: #d9d9d9;
	}
	
	/* RUBY MENU DROPDOWN TOGGLE - MOBILE */
	span.dropdown-toggle {
		position: absolute;
		width: 50px;
		height: 50px;
		max-width: 50px;
		max-height: 50px;
		left: 0;
		top: 0;
		padding: 10px 17px;
		z-index: 1000000;
		cursor: pointer;
	}
	span.dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		color: var(--navbar-link-color);
		font-size: 25px;
		right: 0;
	}
	span.dropdown-toggle.dropdown-toggle-rotate {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	ul.nav>li.l0>a:before{
		
		content: '\e3af';
		text-align:center;
		font-family:var(--font-awesome);
		font-weight:600;
		font-size:25px;
		width: 50px;
		height: 50px;
		background: var(--navbar-active-color);
		color:var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>.deptlink:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before {
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.nav>li>ul>li>a:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a:before,
	ul.nav>li>ul>li>.deptlink:before,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	ul.nav>li>ul>li>ul>li>ul>li>a:before,
	ul.nav>li>ul>li>ul>li>ul>li>.deptlink:before{
		background: var(--navbar-color);
	}
	/* RUBY MENU HIDE/SHOW SUBMENUS - MOBILE */
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul,
	ul.nav,
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink),
	ul.nav>li.mega-menu>div:not(.deptlink){
		max-height: 0;
		transform: scaleY(0);
		overflow: hidden;
	}
	ul.nav>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul>li>ul.mobile-sublevel-show,
	ul.nav.mobile-sublevel-show,
	ul.nav>li.mega-menu-classic>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.mobile-sublevel-show
	{
		max-height: 20000px;
		transform: scaleY(1);
		position:initial;
		width:100%;
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid{
		position:initial;
		width:100%;
	}

	div.menu-grid>div.menu-row {
		position: relative;
		padding:0;
		height:auto;
	}
	div.menu-grid > div.menu-row ul.l3{
		display:block;
		/* padding: 0 65px; */
		background: var(--navbar-popout-color);
		margin-bottom:0;
	}
	div.menu-grid > div.menu-row ul.l3 li.l3{
		display:block;
		position:relative;
		padding:0;
		
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink{
		align-items:center;
		width: 100%;
		line-height: 50px;
		padding: 0;
		padding-left:66px;
		background: var(--navbar-popout-color);
		color:var(--text-color);
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{
		display:inline-block;
		vertical-align:top;
		max-width: 50px;
		margin-right: .5rem;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img img{
		display:block;
		padding:4px 0;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.txt{
		display:inline-block;

	}
	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink:before{
		content: "";
		width: 50px;
		height: 50px;
		background: var(--navbar-color);
		position: absolute;
		left: 0;
		top: 0;
	}
	
	/* Hamburger icon - mobile */
	.c-hamburger {
		display: block;
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 50px;
		height: 50px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: 0;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}
	.c-hamburger:focus {
		outline: none;
	}
	/*middle bit of the x */
	.c-hamburger span {
		display: block;
		position: absolute;
		top: 50%;
		
		left: var(--half-spacing);
		right: var(--half-spacing);
		height: 3px;
		background:var(--text-color);
	}
	/* top and bottom bits of the x */
	.c-hamburger span::before,
	.c-hamburger span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: var(--text-color);
		content: "";
	}
	.c-hamburger span::before {
		top: -10px;
	}
	.c-hamburger span::after {
		bottom: -10px;
	}
	/**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
	.c-hamburger--htx {
		background-color:transparent;
	}
	.c-hamburger--htx span {
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-delay: 0.3s, 0s;
	}
	.c-hamburger--htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
		background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
		background: none;
	}
	.c-hamburger--htx.is-active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}
	/* Hide Ruby Dividers on Mobile */
	ul.nav.ruby-menu-dividers>li,
	ul.nav.ruby-menu-dividers>li>a,
	ul.nav.ruby-menu-dividers>li.ruby-menu-social>a,
	ul.nav.ruby-menu-dividers>li>a:hover,
	ul.nav.ruby-menu-dividers>li:hover>a {
		border: none;
	}
	/* Reset transparent menu active menu item padding */
	div.nav-wrapper.ruby-menu-transparent>ul.nav>li.active-menu-item>a,
div.nav-wrapper.ruby-menu-transparent>ul.nav>li.first-menu-item>a	{
		padding-left: 45px;
	}
	/* Hide search in mobile */
	ul.nav>li.ruby-menu-social.ruby-menu-search>a {
		display: none;
	}
}

/* MEDIA QUERY --> SMALL DEVICES */

@media(min-width:768px) and (max-width:991px) {
	.nav-wrapper .hidden-md {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {

	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {

	}
	
	div.menu-grid.menu-grid-lined>div.menu-row:after,
	div.menu-grid.menu-grid-lined>div.menu-row>div[class^="ruby-col"]:after {
		background: none;
	}
}

/* MEDIA QUERY --> MEDIUM DEVICES */

@media(min-width:992px) and (max-width:1199px) {}

/* MEDIA QUERY --> LARGE DEVICES */

@media(min-width:1200px) {}



/* ########################################################### */

/* #################### RUBY MEGA MENU   ##################### */

/* ######################## V 1.0 ############################ */

/* ################## TRANSITION EFFECTS ##################### */

/* Ruby Mega Menu - Dropdown Togglers - MOBILE */

span.ruby-dropdown-toggle {
	transition: transform 0.3s ease;
}

span.ruby-dropdown-toggle:after {
	transition: transform 0.3s ease;
}

@media(min-width:767px) {
	/* Arrows */
	ul.nav>li>a:after {
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after {
		transition: all 0.3s ease;
	}
	/* 1st level move-up effect */
	ul.nav>li>ul,
	ul.nav>li>div {
		transform: translateY(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li:hover>ul,
	ul.nav>li:hover>div {
		transform: translateY(0);
	}
	/* 1st level move-left effect --> For Vertical Menu Orientation */
	ul.nav.ruby-vertical>li>ul,
	ul.nav.ruby-vertical>li>div {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav.ruby-vertical>li:hover>ul,
	ul.nav.ruby-vertical>li:hover>div {
		transform: translateX(0);
	}
	/* 2nd 3rd 4th level move-left/right effect */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul>li>ul {
		transform: translateX(25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li:hover>ul {
		transform: translateX(0);
	}
	ul.nav>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left>ul {
		transform: translateX(-25px);
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li.ruby-open-to-left:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li.ruby-open-to-left:hover>ul {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Blog list content move-down effect */
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Blog list content move-left effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog:hover>div>ul.mega-menu-nav>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-blog>div>ul.mega-menu-nav>li:hover>div {
		transform: translateX(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect */
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateY(-50px);
		transition: all 0.5s ease;
	}
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateY(0);
	}
	/* Ruby Mega Menu Shop List content move-down effect --> For Vertical Menu Orientation */
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li>div {
		transform: translateX(50px);
		transition: all 0.5s ease;
	}
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.active-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop:hover>div>ul>li.first-menu-item>div,
	ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-shop>div>ul>li:hover>div {
		transform: translateX(0);
	}
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:before,
	ul.nav>li.ruby-menu-mega-shop>div>ul>li>a:after {
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra small devices (phones, 600px and down) 
	Last Updated : 05. 07. 2025
	Copyright :(c) 2024 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	:root{
		--site-max-width:100%;
		--menu-width:3rem;
	}

	/* PTF 
	------------------------------------------------------- */
	#ptf .ext #p52035584 li,
	#ptf .ext #p52428803 li{
		display:none;
	}
	#ptf .ext #p52035584 li:nth-child(1),
	#ptf .ext #p52035584 li:nth-child(2),
	#ptf .ext #p52035584 li:nth-child(3),
	#ptf .ext #p52428803 li:nth-child(1),
	#ptf .ext #p52428803 li:nth-child(2),
	#ptf .ext #p52428803 li:nth-child(3){
		display:inline-block;
	}

	/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: var(--menuwidth) auto var(--logowidth) auto auto;
		grid-template-areas:"menulink infolinks logo accountlinks basket "
							"search search search search search"
							"nav nav nav nav nav"
							"message message message  message message";
		grid-column-gap:1rem;
	}

	#pt .pbnr img{
		max-width:100%;
	}

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

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

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

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(2,1fr);
		grid-gap:0;
	}


	/*hide phone number and icon from display */
	#pt .info li.icon{
		margin:1rem;
	}
	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

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

	/*reviews iframe */
	.mainBanner #badge-ribbon{
		text-align:center;
		margin-bottom:1rem;
	
	}
	.mainBanner #badge-ribbon iframe {
		width:auto;
		display:block;
		margin:auto;
	}
	


	/*top cta's */
	#a124846080 .slidecont{
		display:block;
	}

	#a124846080 .slidecont i{
		display:inline-block;
		margin-right:1rem;
	}
	#a124846080 .slidecont p{
		display:inline-block;
	}

	/* Center panel 
	------------------------------------------------------- */
	/*main banner image proportions have changed - will need a class if used elswhere */
	#pc .bnr a.img img{
		max-height:375px;
		aspect-ratio: 375/458;
	}

		/*reviews */
	.mainBanner .review-container{
		text-align:center;
	}

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


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

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
		transition: var(--transition);
	}


	#pl .filter{
		height: 100%;
		width: 0%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
		width:50%;
	}


	#fstrigbtn{
		display:block;
	}

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

	.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"items sort-by "
		" filter filter";
	grid-gap: 1em;
	align-items: center;
}
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}


	


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

	#pf {
	width:100%;
	margin:auto;
	background-color: var(--footer-panel-color);

		width:100%;
		margin:1rem 0;
}
	
	#pf .artp,
	#pf .arts{
		width:calc(100%);
		margin:0rem;
	}

	/*reviews */
	#pf #a124682255 .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}


	/*newsletter article - uses klavyio */
	#a133234692{
		background-color:var(--navy);
		color:var(--white);
		text-align:center;
		padding:0rem 0;
	}
	
	#a133234692 .artp{
		display:grid;
		grid-template-areas:"lead"
							"form";
		grid-template-columns:1fr;
		grid-gap:0rem;
		align-items:center;
	}

	#pf .carousel
	{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}
	

	.klaviyo-lead{
		grid-area:lead;
		padding:1rem;

		text-align:center;
		border-right:0px solid var(--border-color);
		border-bottom:1px solid var(--border-color);
	}

	.klaviyo-lead h3{
		font-size:2rem;
	}
	
	.klaviyo-holder{
		grid-area:form;
		display:grid;
		grid-template-areas:"title"
							"subtitle"
							"form";
		text-align:center;
		padding:1rem;
	}
	
	.klaviyo-holder h4{
		grid-area:title
	}
	
	.klaviyo-holder p{
		grid-area:subtitle;
		font-size:.825rem;
		padding:0;
		margin-bottom:1rem;
	}
	
	.klaviyo-holder .klaviyo-form {
		grid-area:form;
	}
	
	.klaviyo-holder .klaviyo-form form{
		margin:0 !important;
	}

	.klaviyo-holder .klaviyo-form form div{
		margin:0 !important;
		width:100% !important;
		text-align:center;
	}
	
	.klaviyo-holder .klaviyo-form button{
		margin:1rem auto;
	}

	#a124682258 .artp form > div > div{
		display:grid !important;
		grid-template-columns:1fr;
	}



	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas: "logo"
							 "sociallinks"
							 "quicklinks"
							 "ourblinds"
							 "customerinformation"
							 "accreditations";
		text-align:center;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
		
	}

	/*logo and contact detials*/
	#a124583944{	}
	#a124583944 .contact li{
		margin-left:0rem;
	}


	/*sociallinks */
	#a124583945{}

	#a124583945 h2{
		display:none;
	}
	
	#a124583945 i{
		font-size:1.5em;
		color:var(--green);
	}
	/*accreditations */
	#p48693249,
	#p51314701{
		grid-area:accreditations;
		align-self:end;
		text-align:center;
	}
	
	#p48693249 .bc,
	#p51314701 .bc{
		display:block;
		text-align:center;
	}
	
	#p48693249 .bnr,
	#p51314701 .bnr{
		display:inline-block;
		margin:.5rem;
	}
	
	#p48693249 .bnr:first-child,
	#p51314701 .bnr:first-child{
		text-align:center;
	}
	#p48693249 .bnr:last-child,
	#p51314701 .bnr:last-child{
		text-align:center;
	}






	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}

	.fprd.add .toi{
		padding:var(--half-spacing);
	}

	.pmind .fprd{
		grid-column:auto / span 6
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

		#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}

	.attributeTypeDrop_down_list {
		position:relative;
		display:grid;
		align-items:start;
		grid-template-columns:100%;
		padding:.5rem 0;
	}


	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 1;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 2;
	}
	.slider-searching{
		--swiffy-slider-item-count: 1;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

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

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



	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1;
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}





	/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:"header"
						"contents"
						"sidebar"
						"promcontents ";


		align-items:start;
		margin-bottom:4rem;
	}

	/* Basket Prom is causing issues - hide it till you figure it out
	------------------------------------------------------- */
	#pm .bskt .art{
		display:none;
	}
	/*no idea why this is written out at the end of the checkout*/
	h1.checkout{
		display:none;
	}

	#pm .bskt .alllines{
		grid-area:lines;
		max-height:100%;
		padding-right:1rem;
		overflow-y:auto;
	}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto;
		grid-template-areas:
					"icon desc desc"
					". desc desc"
					". skuselect skuselect"
					 "rem  qty price";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

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

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

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

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

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

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


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 100%;
	}

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

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

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


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

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

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

	/* Basket Sup Charge
	------------------------------------------------------- */
	.suppchg{
		grid-area:suppchg;
		text-align:left;
	}
	
	.suppchg >div{
		display:grid;
		grid-template-areas:"header header"
							"checkbox text";
		grid-template-columns:auto 1fr;
		align-items:start;
	}
	
}
/* Small devices (portrait tablets and large phones, 600px and up)
	Mobile menu will trigger at this point
*/
@media only screen and (min-width: 600px) and (max-width:768px) {
	:root{
		--site-max-width:100%;

	}

	/* PTF 
	------------------------------------------------------- */
	#ptf .ext #p52035584 li,
	#ptf .ext #p52428803 li{
		display:none;
	}

	#ptf .ext #p52035584 li:nth-child(1),
	#ptf .ext #p52035584 li:nth-child(2),
	#ptf .ext #p52035584 li:nth-child(3),
	#ptf .ext #p52035584 li:nth-child(4),
	#ptf .ext #p52428803 li:nth-child(1),
	#ptf .ext #p52428803 li:nth-child(2),
	#ptf .ext #p52428803 li:nth-child(3),
	#ptf .ext #p52428803 li:nth-child(4),
	#ptf .ext #p52428803 li:nth-child(6){
		display:inline-block;
	}

	/* Top panel 
	------------------------------------------------------- */
	#pt .ext {
		--menuwidth: 3rem;
		--logowidth:1fr;
		grid-template-columns: var(--menuwidth) auto var(--logowidth) auto auto;
		grid-template-areas:"menulink infolinks logo accountlinks basket "
							"search search search search search"
							"nav nav nav nav nav"
							"message message message  message message";
	}

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

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

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

	div.nav-wrapper {
		z-index:1001;
		min-height:0;
		background:var(--navbar-color);
	}
	
	div.nav-wrapper>ul.nav {
		top: 0;
	}

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(2,1fr);
		grid-gap:0;
	}

	/*hide phone number and icon from display */
	#pt .info{
		margin:var(--spacing);
	}
	#pt .info ul{
		grid-gap:var(--spacing);
	}
	
	#pt .info li.icon{
		margin:0;
	}
	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

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

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

	/*remove deptlink stylings on mega-menu - they are retained for mega-menu-classic */
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink{
		position:relative;
		border-radius:0;
		margin:0;
		overflow:hidden;
		display:block;
		grid-template-columns:1fr;
		padding:.25em;
		align-items:center;
		background-color:var(--grey);
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img{
		grid-column:1;
		grid-row:1;
	}

	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.img img{
		width: 100%;
		object-fit: cover;
		margin:auto;
	}
	
	.mega-menu div.menu-grid > div.menu-row ul li .deptlink a.txt{
		color:var(--text-color);
		font-family: var(--text-font);
		font-weight: normal;
		margin:0;
	}

	/* for classic menu - change grid layout */
	.mega-menu-classic div.menu-grid > div.menu-row ul{
		grid-template-columns:repeat(3,1fr);
		grid-gap:0;
	}


	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of 80% of site width */
		width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		padding:1rem;
		transform: translate(-50%,-50%);
		text-align:center;
	}

	/*reviews */
	.mainBanner .review-container{
		text-align:center;
	}

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


	/*top cta's */
	#a124846080 .slidecont{
		display:block;
	}

	#a124846080 .slidecont i{
		display:inline-block;
		margin-right:1rem;
	}
	#a124846080 .slidecont p{
		display:inline-block;
	}

	/* Center panel 
	------------------------------------------------------- */
	/*main banner image proportions have changed - will need a class if used elswhere */
	#pc .bnr a.img img{
		max-height:375px;
		aspect-ratio: 375/458;
	}


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

	/* left panel
	------------------------------------------------------- */
	#pl {
		width:0;
	}


	#pl .filter{
		height: 100%;
		width: 50%; /* 0 width - change this with JavaScript */
		position: fixed;
		z-index: 10001; 
		top: 0; 
		left: 0;
		background-color: var(--popout-color);
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: var(--transition);
		box-shadow: var(--box-shadow);
		padding:1rem;
		display:none;
	}

	#pl .filter.showfilter{
		display:block;
	}

	#fstrigbtn{
		display:block;
	}

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

	
	.pmwide{
		background-color: var(--main-panel-color);
		width: calc(var(--site-max-width));
		display: inline-block;
		vertical-align: top;
		margin:0 1rem;

	}

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp,
	#pf .arts{
		width:calc(100%);
		margin:0rem;
	}

	#pf .carousel
	{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/*reviews */
	#pf #a124682255 .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/*newsletter article - uses klavyio */
	#a124682258{
		background-color:var(--navy);
		color:var(--white);
		text-align:center;
		padding:0rem 0;
	}
	
	#a124682258 .artp{
		display:grid;
		grid-template-areas:"lead"
							"form";
		grid-template-columns:1fr;
		grid-gap:0rem;
		align-items:center;
	}
	

	.klaviyo-lead{
		grid-area:lead;
		padding:1rem;

		text-align:center;
		border-right:0px solid var(--border-color);
		border-bottom:1px solid var(--border-color);
	}

	.klaviyo-lead h3{
		font-size:2rem;
	}
	
	.klaviyo-holder{
		grid-area:form;
		display:grid;
		grid-template-areas:"title"
							"subtitle"
							"form";
		text-align:center;
		padding:1rem;
	}
	
	.klaviyo-holder h4{
		grid-area:title
	}
	
	.klaviyo-holder p{
		grid-area:subtitle;
		font-size:.825rem;
		padding:0;
		margin-bottom:1rem;
	}
	
	.klaviyo-holder .klaviyo-form {
		grid-area:form;
	}
	
	.klaviyo-holder .klaviyo-form form{
		margin:0 !important;
	}

	.klaviyo-holder .klaviyo-form form div{
		margin:0 !important;
		width:100% !important;
		text-align:center;
	}
	
	.klaviyo-holder .klaviyo-form button{
		margin:1rem auto;
	}

	#a124682258 .artp form > div > div{
		display:grid !important;
		grid-template-columns:1fr;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas: "logo"
							 "sociallinks"
							 "quicklinks"
							 "ourblinds"
							 "customerinformation"
							 "accreditations";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
		
	}

	/*logo and contact detials*/
	#a124583944{	}
	#a124583944 .contact li{
		margin-left:0rem;
	}


	/*sociallinks */
	#a124583945{}

	#a124583945 h2{
		display:none;
	}
	
	#a124583945 i{
		font-size:1.5em;
		color:var(--green);
	}
	/*accreditations */
	#p48234497{
		grid-area:accreditations;
		align-self:end;
		text-align:right;
	}
	
	#p48234497 .bc{
		display:block;
		text-align:center;
	}
	
	#p48234497 .bnr{
		display:inline-block;
		margin:.5rem;
	}
	
	#p48234497 .bnr:first-child{
		text-align:center;
	}
	#p48234497 .bnr:last-child{
		text-align:center;
	}



	/* dept listings
	------------------------------------------------------- */
	.depttree ul{
		grid-template-columns:repeat(2, 1fr);
	}
	#sr {
		grid-template-columns: repeat(2, 1fr);
	}
	.pmwide #sr {
		grid-template-columns: repeat(2, 1fr);
	}

		.pmind .fprd{
		grid-column:auto / span 6
	}



	/* product layout
	------------------------------------------------------- */
	#pi .main {
		display:grid;
		grid-template-columns:100%;
		grid-template-areas:"top"
							"left"
							"right"
							"bottom";
	}

	/*no longer show gallery thumbs */
	#galleryimages{
		display:none;
	}

	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}


		.attributeTypeDrop_down_list {
		position:relative;
		display:grid;
		align-items:start;
		grid-template-columns:100%;
		padding:.5rem 0;
	}


	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 3;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 1;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 1;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 2;
	}

	.slider-searching{
	    --swiffy-slider-item-count: 2;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

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

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


	/* layout base classes
	------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.halfWidth,
	.halfWidth + .form{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl{
		grid-column: 1/-1;
		grid-row:span 2;
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1;
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.imageText,
	.textImage,
	.deptFooterImgTx{
		grid-template-columns:1fr ;
	
		width:100%;
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	.imageText .imgcont,
	.deptFooterImgTx .imgcont{
		grid-column:unset;
	}
	.imageText .artp,
	.deptFooterImgTx .artp{
		grid-column:unset;
	}
	
	.textImage .artp{
		grid-column:unset;
		grid-row:unset;
	}
	
	.textImage .imgcont{
		grid-column:unset;
		grid-row:unset;
	}
	
	.imageText h2,
	.textImage h2,
	.deptFooterImgTx h2{
		grid-column:1/-1;
	}

		/* Basket
	------------------------------------------------------- */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 4em;
		grid-template-areas:
			"breadcrumb "
			"header "
			"freedelivery "
			
			"lines"
			"prioritydelivery"
			"standarddelivery"
			"totals"
			"suppchg"
			"voucher"
			"buttons"
			"prompane"
			"shipping";
		align-items:start;
		margin-bottom:4rem;
	}

		#pm .bskt .alllines{
	grid-area:lines;
	max-height:100%;
	padding-right:1rem;
	overflow-y:auto;
}


	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}

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

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

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

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

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

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


	/* Basket Summary
	------------------------------------------------------- */
	.bsktsum h4{
		display:block;
		text-align:center;
		margin:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 100%;
	}

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

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


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

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

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

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px)  {
	:root{
		--site-max-width:100%;

	}

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

	#pt .search{
		grid-area:search;
		z-index:1001;
		margin:0;
	}

	/*hide phone number and icon from display */
	#pt .info{
		margin:var(--spacing);
	}
	#pt .info ul{
		grid-gap:var(--spacing);
	}
	
	#pt .info li.icon{
		margin:0;
	}
	#pt .info .icon a.lnk,
	#pt .info .icon a.tel{
		grid-area:text;
		display:none;
		font-size:.725rem;
	}

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

	/*change to banner content area sizing */
	.mainBanner .toi{
		/*max width of 80% of site width */
		width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		padding:1rem;
		transform: translate(-50%,-50%);
		text-align:center;
	}

	/*reviews */
	.mainBanner .review-container{
		text-align:center;
	}

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

	/*top cta's */
	#a124846080 .slidecont{
		display:block;
	}

	#a124846080 .slidecont i{
		display:inline-block;
		margin-right:1rem;
	}
	#a124846080 .slidecont p{
		display:inline-block;
	}


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

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

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

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

	.pmind .fprd{
		grid-column:auto / span 4
	}



	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/*reviews */
	#pf #a124682255 .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		grid-template-columns:1fr;
		grid-template-areas: "logo"
							 "sociallinks"
							 "quicklinks"
							 "ourblinds"
							 "customerinformation"
							 "accreditations";
		text-align:left;
		grid-row-gap:2rem;
		width:auto;
		padding:4em;
		
	}

	/*logo and contact detials*/
	#a124583944{	}
	#a124583944 .contact li{
		margin-left:0rem;
	}


	/*sociallinks */
	#a124583945{}

	#a124583945 h2{
		display:none;
	}
	
	#a124583945 i{
		font-size:1.5em;
		color:var(--green);
	}
	/*accreditations */
	#p48234497{
		grid-area:accreditations;
		align-self:end;
		text-align:right;
	}
	
	#p48234497 .bc{
		display:block;
		text-align:center;
	}
	
	#p48234497 .bnr{
		display:inline-block;
		margin:.5rem;
	}
	
	#p48234497 .bnr:first-child{
		text-align:center;
	}
	#p48234497 .bnr:last-child{
		text-align:center;
	}


	/* product page 
	------------------------------------------------------- */
	#pi .pi_tab_content div[itemprop="description"]{
		width:100%;
		display:inline-block;
		vertical-align:top;
		
	}
	
	#pi .pi_tab_content .img{
		width:100%;
		display:inline-block;
		vertical-align:top;
		display:none;
	}

	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 5;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 2;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 2;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 2;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 4;
	}

	.slider-searching{
	    --swiffy-slider-item-count: 3;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

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

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

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

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

	#pt.checkouttop .ext {
		--breadcrumb-width:1fr;
		grid-template-columns:100%;
		grid-template-areas:"logo"
			"breadcrumb";
	}

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


	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
	}

	/* Order Fulfilment/shipping
	------------------------------------------------------- */
	#pmid.page_shipping{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	.page_shipping .pmfull {
		margin: 0 auto;
		position: relative;
		width: 75%;
	}

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

}
/* Large devices (laptops/desktops, 992px and up) */
/* start to introduce padding on main content at this point */
@media only screen and (min-width: 992px) and (max-width:1199px) {
	/* defaults */
	:root{
		--site-max-width:100%;
	}

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

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

	#pl{
		margin-left:1rem;
	}
	.pmwide{
		margin-right:1rem;
	}

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

		.pmind .fprd{
		grid-column:auto / span 4
	}

	/* Footer panel 
		------------------------------------------------------- */
	#pf .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/*reviews */
	#pf #a124682255 .artp{
		width:calc(100% - 2rem);
		margin:0 1rem;
	}

	/* Bottom panel 
	------------------------------------------------------- */
	#pb .ext{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
	/* swiffy sliders
	------------------------------------------------------- */

	.slider-product{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept{
	    --swiffy-slider-item-count: 2;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 7;
	}
	.slider-featured{
	    --swiffy-slider-item-count: 2;
	}
	.slider-cta{
	    --swiffy-slider-item-count: 3;
	}
	.slider-reviews{
		--swiffy-slider-item-count: 3;
	}
	.slider-instagram{
	    --swiffy-slider-item-count: 4;
	}

	.slider-searching{
	    --swiffy-slider-item-count: 3;
	}
	.slider-reviews .card{
		grid-template-columns:1fr;
		grid-template-areas:"image"
							"review";
		align-items:center;
	}
	.slider-reviews .card .review{
		min-height:220px;
	}

	.slider-reviews .review-image img{
		/*set a max height to avoid it being too humongous on larger displays */
		max-height:430px;
		aspect-ratio: 430/300;
		width: 100%;
		object-fit: cover;
		margin:auto;
	}

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

	/* Basket
	------------------------------------------------------- */

	#pm .bskt {
		display: grid;
		grid-template-columns: 5fr 5fr;
		margin:0 1rem;
	}
	
	#pm .bskt  .line{
		--image-width:4rem;
		grid-template-columns: var(--image-width) 1fr auto auto;
		grid-template-areas:
			"icon desc desc desc"
			". skuselect skuselect skuselect"
			"qty qty price rem";
	
		border-bottom:1px solid	var(--border-color);
		grid-column-gap:1rem;
	}
	
	#pm .bskt  .line .qty label{
		display:none;
	}

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

	#pt.checkouttop .ext {
		padding:0 1rem;
	}

	/* invoice/delivery address
	------------------------------------------------------- */
	.page_delivery form,
	.page_checkout form{
		padding:1rem;
	}

		/* Payment
	------------------------------------------------------- */
	#pmid.page_payment{
		padding:1rem;
		width:calc(var(--site-max-width) - 2rem);
	}
	
}
/* Extra large devices (large laptops and desktops, 1200px and up)  */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
	:root{
		--site-max-width:1200px;
		--menu-max-width:1200px;
	 }
}
/* Extra extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {

	/* defaults */
	:root{
		--site-max-width:1400px;
		--menu-max-width:1400px;
	}

	/* reviews slider */
.slider-reviews{
    --swiffy-slider-item-gap: 1rem;
    --swiffy-slider-item-count: 3;
}

}