/* ------------------------------------------------------------------------------------
	SCREEN - Thinking Books 2022
	Filename : sitepanes.css
	Last Updated : 21. 10. 2025
	Copyright :(c) 2021 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
	01. =Reset
	02. =Page
	03. =Typography
			Defaults
			Headings
			Links
			Specific headings
			Blockquote
			Base Article Typography
	04. =Buttons
	05. =Tables
			Defaults
			Order
			Quotations
	06. =Forms
			Defaults
			Sign in
			Register
			Forgotten Password
			Checkout (New Customer)
			Checkout (Sign In)
	07. =DepartmentTree / Menu
			top level
			second level
			third level
			forth level
	08. =Breadcrumb
	09. =Jquery Base Overrides
	10. =OwlCarousel Overrides
	11. =AccordionBase
			Header including hide/show icons 
			Panes
	12. =Autocomplete 
	13. =Email when back in stock EWIS
	14. =HoverBasket
	15. =PopupDialog / Popup Add to Basket / Direct Despatch
	16. =Messages
	17. =FIXEDTopPanel
	17. =PanelTop
	18. =CenterPanel
	19. =MainPanel
			Articles
			Banners
	20. =FooterPanel
	21. =BottomPanel
	xx. =FIXEDBottomPanel
	22. =Copyright and Managed By
	23. =FilterSearch
	24. =SearchHeader / SearchFooter 
	25. =FeaturedProducts
			Base Settings
			Image
			Title
			Pricing Structure
			Unit Specifics
			Client ref/Model
			Buy Form
			Media Queries
	26. =ProductLists
	27. =MyAccount
	28. =Blog
	29. =CustomArticles
	30. =CustomBanners
	31. =SpecificPages
	31. =DepartmentPages
			Subdepartment Tree
			Media Queries
	32. =ProductPage
			Title
			Image (carousel)
			Brand and Manufacturer
			barcodes
			Buy Panel
			Pricing info
			Description
			Accordion Description
			Stock
			Leadtime
			Direct Despatch/Dropship
			Links - Ask a question etc
			Video Links (youtube)
			Buytogether
			Personalisation
	33. =Super Attributes
			Defaults
			attributeTypePrice_Matrix_Calculator 
			attributeTypeDimensions
			attributeTypeRadio_button
			attributeTypeText_Box_Free_Text_Entry
			attributeTypeDrop_down_list
			attributeTypeSingle_Image_Upload
	34. =Basket
			Basket header
			Basket Lines
			Basket Line items
			Basket Subtotal
			Delivery info
			Shipping
			Basket Totals
			Basket Payment Buttons
			Media Queries
	35. =Checkout Process
	36. =OrderConfirmation
	36. =Hacks
		
=Definitions
------------------------------------------------------------------------------------- */
:root {
	--mainColor: #5e8c6a;
	--altColor: #6fa77e;
	--altColor2: #f2c45a;
	--textColor: #444444;
	--textColorLight: #d9d9d9;
	--textAltColor: #5e8c6a;
	--textHeadingColor: #444444;
	--textHeadingAltColor: #5e8c6a;
	--textSubHeadingColor: rgb(174, 186, 195);
	--bgColor: #ffffff;
	--bgaltColor: #e5e5e5;
	--bgaltColorAlpha: rgb(160 160 159 / .8);
	--bgaltColor2: #e5e5e5;
	--footerColor: #e5e5e5;
	--borderColor: #b3b3b3;
	--checkoutButtons: #f2c45a;
	--white: #ffffff;
	--mainFont: open-sans, sans-serif;
	--headingFont: raleway, sans-serif;
	--altFont: raleway, sans-serif;
	--altFont2: raleway, sans-serif;

	--spacing:1em;
	--text-color:var(--textColor);

	--border-radius:1em;
}

	
/* =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;
	/* Looks pretty much the same than Windows */
}

iframe {
	/*don't do this here!*/
	/* width:100% !important; */
}


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

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

body {
	background-color:var(--bgColor);
	font-family: var(--mainFont);
	color:var(--textColor);
	font-size:16px;
}

ol {
	margin-left:.5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* #### Generated By: http://www.cufonfonts.com #### */
@font-face {
    font-family: 'Frutiger LT Std 67 Bold Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger LT Std 67 Bold Condensed'), url('/fonts/FrutigerLTStd-BoldCn.woff') format('woff');
}

@font-face {
    font-family: 'Frutiger LT Std 67 Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger LT Std 67 Condensed'), url('/fonts/FrutigerLTStd-LightCn.woff') format('woff');
}


@font-face {
    font-family: 'Frutiger LT Std 57 Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger LT Std 57 Condensed'), url('/fonts/Frutiger57Condensed.woff') format('woff');
}

@font-face {
    font-family: 'Frutiger LT Std 67 Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger LT Std 67 Bold'), url('/fonts/Frutiger_bold.woff') format('woff');
}


@font-face {
    font-family: 'Frutiger LT Std 67';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger LT Std 67'), url('/fonts/Frutiger.woff') format('woff');
}

/* Defaults
------------------------------------------------------- */
/* this choice of font-family is supposed to render text the same across platforms */
body, input, button, textarea, select {
	font-family: var(--mainFont);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
}

p, li, label, input, select, textarea {}

select, textarea {
	padding:.5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius:0;
}

select{
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat right .25em center;
    padding-right:1.5em;
    display:inline;
    border-color:var(--borderColor);
}

input.inputtext,
input.inputtext_light /*used for the newsletter signup */{
	font-family: var(--mainFont);
	font-size: 1em;
	padding: .5em;
	border:1px solid;
}

p, ol, ul, dl, address {
	font-family: var(--mainFont);
	font-weight: 400;
}

b, strong {
	font-family:var(--headingFont);
	font-size:inherit;
	font-weight:bold;
}

ol, ul {
	list-style:none;
}

li ul,
li ol {
	font-size:1em;
}

ul.inline li {
	display:inline-block;
}

abbr {
	opacity:0.9;
}

abbr[title]:hover, dfn[title] {
	border-bottom: 1px dotted #656565;
	cursor:help;
}

ins, mark {
	padding:0 0.125em;
	text-decoration:none;
}

sub, sup {
	position:relative;
	font-size:smaller;
	line-height:0;
}

em, em a, i, samp {
	font-style: italic;
}

ins, mark {
	padding: 0 0.125em;
	text-decoration: none;
}

sub, sup {
	position: relative;
	font-size: smaller;
	line-height: 0;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

del, s {
	text-decoration: line-through;
}

img {
	max-width: 100%;
	height: auto;
}

/* correct orientation of phone icon if font awesome used */
.fa-phone {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

/* Headings
------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
	font-family: var(--headingFont);
	text-rendering: optimizelegibility;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.4em;
}

h5 {
	font-size: 1.2em;
}

h6 {}

/* Specific headings
------------------------------------------------------- */

/* Links
------------------------------------------------------- */
a{
	text-decoration: none;
	color:inherit; /*makes the link the same colour as whatever the thing is that its in h3 h4 p etc*/
}

a:hover{
	text-decoration: none;
	color: var(--textColor);
}
a.lnk:hover {
	text-decoration:underline;
}

a:active,
a:visited{
	text-decoration: none;
}

/* Blockquote
------------------------------------------------------ */
blockquote {
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #f8f8f8;
	margin: 0 0 1.5em 0;
	padding: 2em;
}

blockquote p {
	font-size: 1.6em;
	font-style: italic;
	margin-bottom: 1em;
}

blockquote footer, blockquote cite {
	font-size: 1.4em;
	line-height: 1.5;
}

q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

cite {
	font-style: normal;
}

/* Base Article Typography
------------------------------------------------------- */

#pm .art{
	padding:1em;
}

/*Unified heading colors*/
#pm .art h2,
#pm .art h3,
#pm .art h4,
#pm .art h5 {
	padding: .5em 0;
	font-weight:bolder;
	color:var(--textHeadingColor);
}

/*to ensure a clear break after a paragraph*/
#pm .artp p {
	line-height:1.5;
	padding-bottom: 0.5em;
}

#pm .art h3,
#pf .art h3 {}

#pm .art h2,
#pf .art h2 {

}

#pm .artp ul {
	list-style-type:disc;
	margin:1em 1.5em;
}

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

#pm .artp ol {
	list-style-type:decimal;
	margin:1em 1.5em;
}

#pm .artp img {}
#pm .artp a {}

#pm .artp a {
	color:var(--altColor);
}

#pm .artp a.btn {
	color:#fff;;
}

/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit,
a.btn {
	display:inline-block;
	font-family:var(--altFont);
	font-size:1em;
	padding:.5em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--altColor);
	border:1px var(--altColor) solid;
	color:var(--white);
	text-transform:capitalize;
	font-weight:bolder;
}

/* iphone specific overrides */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	-webkit-appearance: none;
	border-radius: 0;
	font-size:1em;
}

td a.btn{
	display:block;
}

a.btn:hover {
	text-decoration: none;
}

.submit:hover,
a.btn:hover {}


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

/* Defaults 
------------------------------------------------------- */
table {
	border:1px #e8e8e8 solid;
	/*stops that stupid break between cells */
	border-collapse:collapse;
	min-width: 100%;
	font-size: 1em;
}

thead,
tbody {
 display: contents;
}

/*set table headers */
table th {
	font-family: var(--mainFont);
	color:var(--bgaltColor);
	font-weight:600;
	text-align:left;
	padding:.5em;
	width:auto;
}

/* for when no header has been used in the code !*/
table tbody tr:first-child td{
	font-family: var(--mainFont);
	color: #000;
	text-align:left;
	padding:.5em;
}

table tr td {
	padding:.5em;
	vertical-align:middle;
	font-size:1em;
}

th,
td {
 padding: .5em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align:left;
}

tr:nth-child(even) td {
 background: #f8f8f8;
}

/*ensures font size for a p in a table is the same as it is for text that is NOT in a p block */
table tr td p,
table tr td li {
	font-size:1em;
}

#pm .artp table td p {
	font-size:1em;
}

table th:first-child {}

table tr:nth-child(odd) {
	background-color:#e8e8e8;
}

/* Order
------------------------------------------------------- */
table.order {
	width:100%;
	margin-bottom:1em;
}

.ordinfo a.btn.print {
	background-color:#e8e8e8;
	border-color:#e8e8e8;
	margin-left:1em;
}

/* Quotations
------------------------------------------------------- */
table.quotationlist,
table.quotationlines,
table.quotation {
	border-collapse:collapse;
	width:100%;
	max-width:100%;
}

table.quotationlist th.quoteNo,
table.quotationlist th.ref,
table.quotationlist th.value,
table.quotationlist th.expires,
table.quotationlist th.viewQuote,
table.quotationlist th.addQuote {
	width:auto;
}

table.quotationlist	a.btn[title="Download Quote"] {
	font-family: var(--mainFont);
	font-size:1em;
	padding:0;
	text-align:center;
	cursor:pointer;
	background-color:transparent; 
	border:none;
	outline:none;
	color:var(--bgaltColor);
	display:inline-block;
}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	padding:1em;
}

.form .bt {}

.form .bt h3 {
	font-weight:bolder;
	color:var(--textHeadingColor);
}
.form h5,
.form h5,
.form h5 {}

.form li select,
.form li textarea,
.form li input {
	grid-column:2;
	/* width:100%; */
}

.form li {
	/* try grid layout */
	display:grid;
	grid-template-columns: minmax(auto, 2fr) 3fr;
	grid-gap:.25em;
	margin-bottom:.5em;
	align-items:start
}

.form li.reqmsg{
grid-template-columns:1fr;
text-align:right;
color:red;}

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

.form label {
	grid-column:1;
	display:inline-block;
	vertical-align:top;
	text-align:right;
}

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

.form li.help,
.form li.info {
	display:inline-block;
	font-family:var(--headingFont)
}

.form form {}

/*headings? */
.form li h3 {
	grid-column:1/-1;
	font-size:1em;

}

.form ul.radio {}
.form ul.radio li {}

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

/* captcha */
.form .g-recaptcha{
	grid-column:2;
	text-align:right;
	display:block;
	margin-left:auto;
}

/* fix for checklists*/
.form li ul.check {
    /* outline:1px red solid; */
}

.form li ul.check li{
    display:inline-block;
}

.form li input.chkbox{
display:inline-block;
}

/* Sign In
------------------------------------------------------- */
.form#psign{
	
}

/* as labels aren't being used - placeholders are */
.form#psign select,
.form#psign textarea,
.form#psign input {
	/* grid-column:1/3; */
	text-align: left;
	width:100%;
}

.form#psign .exstreqsubmit input.submit{
	grid-column:1;
	justify-self:start;
	width:auto;
	margin-left:0;
}

.form#psign .exstfgtpwd {
	display:block;
	font-weight:400;
}

.form#psign .exstreglnk{
	display:inline-block;
}


.form#psign .exstreglnk .registerlink{
	display:block;
}

.form#psign .exstreglnk h5{
	font-weight:400;
	color:#1d1d1d;
}

.form#psign .exstreglnk h5 a{
	text-decoration:underline;
	text-decoration-color: var(--mainColor);
}

/* Register
------------------------------------------------------- */
.form#preg{
	width:50%;
	margin:auto;
}

/* as labels aren't being used - placeholders are */
.form#preg select,
.form#preg textarea,
.form#preg input {
	/* grid-column: 1/3; */
	justify-self:stretch;
	/* would rather not have to do this, but we display the width on the input element and that borks things */
	width:calc(100% - 1em);
}

/* specific override for title */
.form#preg select{
	width:auto;
}
.form#preg input.submit{
	grid-column:1;
	justify-self:start;
	margin-left:0;
}

/* Forgotten Password
------------------------------------------------------- */
.form#pwrem{}

/* Checkout (New Customer)
------------------------------------------------------- */
.form#pchkoutnewcust{}

/* Checkout (Sign In)
------------------------------------------------------- */
.checkoutsignin #pm .form#psign,
.checkoutsignin #pm .form#pchkoutnewcust {
}

/*existing customer pane */
.checkoutsignin #pm .form#psign ul.exstcust {}
.checkoutsignin #pm .form#psign ul.exstcust label {}
.checkoutsignin #pm .form#psign .exstnotme a {
}

/* -------------------------------------------------------------------------------------
=DepartmentTree / Menu
------------------------------------------------------------------------------------- */
#pc .dept{
	margin:auto;
	display:block;
	color:#fff;
	position: relative;
	background-color: var(--mainColor);
}

#pc  .dept .bc{
	width: 1280px;
	text-align:center;
	margin:auto;
}

#pc .dept #jnav{
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    z-index: 1001;
    text-align:center;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(10, auto);
    align-items:center;
}

#pc .dept #jnav li.nav,
#pc .dept #jnav li.navcurr{
    position:relative;
    display:inline-block;
    transition: background-color 0.5s ease;
}

#pc  #jnav li{}
#pc  #jnav li.pipe{}


/* =Tabs 
------------------------------------------------------- */

#jnav li.nav > a,
#jnav li.navcurr > a,
#jnav li.nav > h3,
#jnav li.navcurr > h3  {
	display:inline-block;
	padding: 1em .5em;
	font-size:1em;
	font-weight:600;
	color:inherit;
}


#jnav li.nav:hover,
#jnav li.navcurr:hover {
	/* background-color:var(--altColor); */
}

 #jnav li.nav:hover > a,
#jnav li.navcurr:hover > a,
#jnav li.nav:hover > h3,
#jnav li.navcurr:hover > h3   {
	background-color:var(--altColor);
	color:var(--altColor2);
}

/* =Dropdown
------------------------------------------------------- */
#jnav ul.snav{
    position: absolute;
    left:0;
    z-index:1000001;
    font-family:inherit;
    background-color:var(--altColor);
    text-align:left;
    /* needed for ie11 display issues, does mean that the dropdown won't display but at least it isn't in permanent view... something to do with visibility not being applied by javascript */
    display: none; 
    padding: 1em;
    -webkit-box-shadow: 0px 12px 24px 0px rgba(101,101,101,0.3);
    -moz-box-shadow: 0px 12px 24px 0px rgba(101,101,101,0.3);
    box-shadow: 0px 12px 24px 0px rgba(101,101,101,0.3);
    min-width:200px;
}


#jnav li.navcurr ul.snav li ul.snav,
#jnav li.nav ul.snav li ul.snav{}

#jnav li.nav ul.snav li.depts,
#jnav li.navcurr ul.snav li.depts{
	display:inline-block;
	width:100%;
	word-wrap:break-word
}

/* Level 1 dept header */
#jnav a.l1{
	font-family:var(--headingFont);
	padding: 0.5em;
	font-weight:initial;
	display:block;
	width:auto;
}

#jnav a.l1:hover{
	text-decoration: underline;
	color:var(--altColor2)
}

/* Level 2 depts */
#jnav a.l2{}
#jnav a.l2:hover{}

#jnav li.nav ul.snav li.depts a.seeall{
    cursor:pointer;
}

/* client specifics
------------------------------------------------------- */
/* #m108 first dept wants columns and a set width */

#jnav #m108 ol{
    /*depts are in ol not ul */
    list-style-position:inside;
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	margin:0;
	width:500px;
	
}


/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb{
	border-bottom:1px var(--borderColor) solid;
}

.bdcb .bc{
width:1280px;
margin:auto;}

.crumb {
	display:block;
	padding:.5em 0;
}

.crumb li{
	font-size:.875em;
	display:inline-block;
	vertical-align:middle;
	/* unify font */
	font-family: var(--mainFont);
	color:var(--textHeadingColor)
}

.crumb li a{
	display:inline-block;
	vertical-align:middle;
}

.home .crumb {
	display:none;
}

/*for the break between the crumb*/
.crumb li:after {
	font-family:"Font Awesome 5 Pro";
	content:"\f054";
	display:inline-block;
	vertical-align:middle;
	font-size:.875em;
	color:var(--mainColor);
	margin:0 .5em;
}

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

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

.crumb h1{
	font-family:var(--headingFont);
	color:var(--altColor);
	font-size:1em;
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.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(--mainColor);
	background: var(--mainColor);
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--mainColor);
	background-color: #ffffff;
}

/* -------------------------------------------------------------------------------------
=OwlCarousel Overrides
------------------------------------------------------------------------------------- */
/* base settings */
.carousel {
	position:relative;
	margin-bottom:1em;
}

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

.owl-stage-outer{}

/* this should be the title for the carousel */
.carousel h2{
	display:inline-block;
	width:100%;
	vertical-align:middle;
	text-align:center;
	padding:.25em 0;
	margin:1em 0;
	font-size:1.5em;
	font-weight:bolder;
	color:var(--textHeadingColor);
}
.carousel:hover {
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor:grab;
}

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

.owl-carousel .owl-item img {}

.owl-theme .owl-controls {
	/*going with a hardline of this is at the bottom of the carousel (not over anything) and centered */
	text-align:center;
	margin-top:1em;
	font-size:.875em;
}

.owl-theme .owl-nav {
	/*going with a hardline of not showing the arrows/nav */
	display:none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {}
.owl-prev {}
.owl-next {}

.owl-theme .owl-nav .disabled {}
.owl-theme .owl-dots {}
.owl-theme .owl-dots .owl-dot {
	display:inline-block;
	vertical-align:top;
}
.owl-theme .owl-dots .owl-dot span {
	display:inline-block;
	vertical-align:top;
	width: 0.825em;
	height: .825em;
	margin:.5em;
	border-radius:50%;
	background-color:var(--altColor);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: var(--altColor2);
}
.owl-theme .owl-item img {}


/* image overlay (because we don't have a better way yet!) */
.carousel .imgcont {
    position: relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    align-items:center; 
}

/*first statement is to cover lack of css class being applied */
.carousel .imgcont img,
.carousel .imgcont a,
.carousel img.slideCont{
	grid-row:1;
	grid-column:1;
	padding:0;
}

/*first statement is to cover lack of css class being applied */
.carousel .imgcont div,
.carousel .slideCont {
	grid-row:1;
	grid-column:1;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	background-color:var(--bgaltColorAlpha);
	background-clip: content-box;
	color:var(--white);
	/* border: 2px var(--bgaltColor) solid; */
	padding: 2px;
	margin:auto;
	min-width:25%;
}

.carousel .imgcont div h2,
.carousel .slideCont h2,
.carousel .imgcont div p,
.carousel .slideCont p{
	width:auto;
	margin:.5em;
}

.carousel .imgcont h2{

}

.carousel .imgcont p{
	margin:.5em;
}


/* Product Carousels
-------------------------------------------------------*/
/* the layout is different so need to undo some of the default settings and re-order */
/* even MORE irritating is the fact that this is done differently for carousels on the product page! */
.carousel .fprd{
	display:grid;
	grid-template-columns: 1fr;
	position:relative;
	background-color:#ffffff;
}

.carousel .fprd .bc{
	grid-template-columns:1fr 1fr;
	grid-template-rows:auto;
}

.carousel.prod .fprd .fprdimg{
	grid-column:1 / -1;
	grid-row:unset;
}
.carousel.prod .fprd .fprdimg img{
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	margin:0 !important;
}
.carousel.prod .fprd .fprdtitle{
	grid-column:1 / -1;
	grid-row:unset;
	text-align:center;
}



.carousel.prod .fprd .fprdinfo{
    display:none;
}

.carousel.prod .fprd form{
    display:none;
}

.carousel.prod .fprd .price{
	grid-column:1 / -1;
	grid-row:unset;
	text-align:center;
	font-weight:bolder;
	color:var(--mainColor);
}

.carousel.prod .fprd .prevprice{
	grid-column:unset;
	grid-row:unset;
}

.carousel.prod .fprd .offer{
	grid-column:unset;
	grid-row:unset;
}

/*product carousels dont show the description */

.carousel.prod .fprd .fprddescr{
	display:none;
}



/* flags */
#pm .carousel .piflags,
#pm .carousel .flag {
	grid-row:1;
	grid-column:1/4;
	text-align:left;
	vertical-align:top;
	align-items:start;
	align-self:start;
	padding:.5em;
	box-shadow: none;
	border: none;
}

#pm .carousel .piflags img,
#pm .carousel .flag img{
	width:auto;
	height:auto;
}

/* -------------------------------------------------------------------------------------
=AccordionBase 
------------------------------------------------------------------------------------- */
ul.accordion {}

#pm li.address,
#pm li.inst {}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family:var(--headingFont);
	/* background-color:var(--mainColor); */
	/* color:#ffffff; */
	border-top:2px solid var(--borderColor);
	font-size: 1.2em;
	margin:0;
	position:relative;
	cursor:pointer;
	padding:.5em;
}

.accordion .header img {
	position:absolute;
	right: 1em;
	top:.75em;
	width:1em;
	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 {
	/* font-size:.825em; */
}

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

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

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

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

.ui-menu-item a {
	display:inline-block;
	width:98%;
	padding:0 1%;
}

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

.foundProduct {
	display:inline-block;
	vertical-align:top;
	width:20%;
}

.foundProduct img {
	width:100%;
	max-width:80px;
	height:auto;
}

.foundProductTitle {
	display:inline-block;
	width:78%;
	font-size:.750em;
	margin:1%;
}

.foundProductRef {
	display:none;
}

.foundProductDesc {
	display:none;
}

.foundProductDesc {}

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

#ewis label {
	color:#61666b
}

.fprd .ewis {
    display:none;
}

a.lnk.ewisopen,
a.lnk.ewis {
	display:inline-block;
	height:auto;
    background-color:var(--altColor);
    padding:.5em;
    color:white;
	text-align:center;
	text-transform:capitalize;
	/* width:98%; */
}

.lnk.ewisopen:hover {
	text-decoration:none;
}

/* -------------------------------------------------------------------------------------
=HoverBsket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	background-color: var(--bgaltColor);
	border:1px solid var(--borderColor);
	width: calc(250px - 1em - 2px);
	padding:.5em;
	z-index:1001;
	text-align:center;
	margin-top:2em;
}

.hoverbskt h3 {
	/*pointless title - hide it */
	display:none;
}

.hoverbskt .lines .item:last-child {}
.hoverbskt .formupdate {}
.hoverbskt .formupdate input {}
.hoverbskt .formupdate input.submitQtyChange {}
.hoverbskt a,
.hoverbsktadd a,
.hoverbskt p,
.hoverbsktadd p {
	font-size: 0.825em;
}


.hoverbskt .lines {}
.hoverbskt .lines .item {
    display:grid;
    grid-template-columns:80px 1fr;
    grid-gap:.5em;
}

.hoverbskt .lines .item a.title,
.hoverbskt .lines .item p.sample {
	color:var(--textHeadingColor);
	font-family:var(--textHeadingColor);
	text-align:left;
	
}
.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
	margin:0 !Important;
}

.hoverbskt .lines .item p.descr {
	display:none;
}
.hoverbskt .lines .item p.qty {
    display:none;
}

.hoverbskt .lines .item p.price {
	grid-column:2;
	text-align:right;
}
.hoverbskt h4.count {
	padding:.5em 0;
	margin-top:.5em;
	text-align: right;
	font-size: 0.825em;
	border-top: 1px var(--borderColor) solid;
}

.hoverbskt h4.total {
	text-align: right;
	color:var(--textHeadingColor);
	font-size: 0.825em;
	font-weight:bolder;
	padding-bottom:.5em;
	margin-bottom:1em;
	border-bottom: 1px var(--borderColor) solid;
}

.hoverbskt a.btn {
display:block;
background-color:var(--altColor);
border:1px var(--altColor) solid;
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd,
#popupdialog {
	position:fixed;
	top:30%;
	left:30%;
	width:calc(40% - 1em);
	padding:.5em;
	z-index:2000;
	border:2px solid var(--borderColor);
	background-color:var(--bgColor);
	display:none;
	text-align:center;
}

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

.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 {}
.hoverbsktadd .item a.title,
#popupdialog .item .title {
	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;
	font-size:.875em;
}

.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"] {
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	display:inline-block;
	vertical-align:middle;
	background-color:var(--altColor)
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}

/* -------------------------------------------------------------------------------------
=Messages 
------------------------------------------------------------------------------------- */
#mess{
	background-color:#ffffff;
	padding:1em;
	margin:1em 0;
}

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

/* OOS and DDS popup 20/11/14 */
.outofstockdialog,
.directdespatchdialog {}
.outofstockdialog .outofstockpopup,
.directdespatchdialog .directdespatchpopup {}
.outofstockdialog span,
.directdespatchdialog span {}
.outofstockdialog .outofstockpopup .oosheader,
.directdespatchdialog .ddheader {}
.outofstockdialog .outofstockpopup .oosmessage,
.directdespatchdialog .ddmessage {}
.outofstockdialog .outofstockpopup .oosmessage .oosdate,
.directdespatchdialog .dddate {}
.ui-dialog-titlebar {}
.outofstockdialog .ui-widget-content {}
.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.directdespatchdialog .ui-widget-content .ui-dialog-buttonset button {}


/* Out of Stock, Direct Despatch
------------------------------------------------------- */

.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog{
	width:500px !important;
	background-color:#fff;
	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{
	outline:none;
	border-radius:0;
	border:none;
	margin:.5em;
}

.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child{
	background-color:var(--mainColor);
}

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


/* -------------------------------------------------------------------------------------
=SiteContainer
------------------------------------------------------------------------------------- */
#site {
	width:100%;
	/* max-width: 1280px; */
	margin:auto;
	font-size:16px;
	font-weight:normal;
	text-align:left;
	-webkit-text-size-adjust:100%;
}


/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf{
	top:0px;
	z-index:2002;
	width: 100%;
	min-width: 1280px;
	background-color:var(--altColor);
	color:#fff;
}

#ptf .ext {
	width: 1280px;
	margin: 0 auto;
	position: relative;
	text-align:right;
}

/*because we are floating elements */
#ptf:after{
  content: "";
  clear: both;
  display: table;
}



/* top links
------------------------------------------------------- */
#ptf .info{
    float:right;
}

#ptf .info li{
	display:inline-block;
	font-size:.813em;
	padding:0 .5em;
}

#ptf .info li a{
	display:inline-block;
	padding:.5em 0;
}

#ptf .info li a:hover{
	color:var(--altColor2)
}

/* Top content/contact 
------------------------------------------------------- */
#ptf .art{
    float:left;
}

#ptf p{
	display:inline-block;
	vertical-align:middle;
	font-size:.813em;
	padding:0.5em 0em;
}

#ptf p:after{
	content:"|";
	margin:.5em;
}

#ptf p:last-child:after{
	content:"";
}



/* vat switch
------------------------------------------------------- */
#ptf .vatsw{
	float:left;
    font-size:.875em
}

.vatsw div{
	display:inline-block;
	vertical-align:middle;
	font-size:inherit;
}

.vatsw form#vatswitch{
	position: relative;
	margin: 0 auto;
}

.vatsw form input label{
	text-shadow: 0 1px rgba(255, 255, 255, 0.25);
}

.vatsw form input {
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
    width: 1em;
    height: 1em;
	margin:.5em 0;
    background-color: var(--bgaltColor);
    -webkit-appearance: none;
    cursor:pointer;
}

.vatsw form input[checked="checked"] {
    background-color:var(--altColor2);
    background-repeat: no-repeat;
    cursor:initial;
}

#vatswitch div:nth-child(1) label {
	float: left;
	margin: .5em;
	border-radius: .25em 0 0 .25em;
}

#vat_yes {
   	display:inline-block;
    vertical-align:middle;
    border-radius: .25em 0 0 .25em;
    border-top: 1px solid #bfbfbf;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #cecece;
}

#vat_no {
	display:inline-block;
	vertical-align:middle;
    border-radius: 0 .25em .25em 0;
    border-top: 1px solid #bfbfbf;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #fff;
}

#vatswitch div:nth-child(2) label {
    float: right;
    margin:.5em;
    margin-left: .5em;
}


/* -------------------------------------------------------------------------------------
=PanelTop 
------------------------------------------------------------------------------------- */
#pt {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	min-width: 1280px;
}

#pt .ext {
	margin: 0em auto;
	padding:.5em 0;
	position: relative;
	width: 1280px;
	align-items:center;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 250px;
}

#pt ul {
	/* typically we dont want bullet styles*/
	list-style: none;
	list-style-position: inside;
	display: inline;
}

/* Site Logo
------------------------------------------------------- */
#pt .pbnr{
	grid-column: 3;
	text-align:center;
	padding:1em;
}

#pt .pbnr .bnr{
    text-align:center;
    display:block;
}

#pt .pbnr a{
    display:block;
}

#pt .pbnr img{
	display:block;
	margin:auto;
	/* width: 125px; */
	height:auto;
}

/* register/sign 
------------------------------------------------------- */

#pt .info {
	grid-column:1;
	grid-row:1;
	text-align:left;
	align-self:start;
	margin-top:1em;
}

#pt .info li{
	display:inline-block;
	vertical-align:middle;
	padding:0 .125em;
}

/* Search
------------------------------------------------------- */
#pt .search {
	grid-column:1/3;
	grid-row:1;
	align-self:center;
} 

#pt .search form{
	/* text-align: right; */
	display:grid;
	grid-template-columns:300px 100px;
}
	
#pt .search label {
	display: none;
}

#pt #searchbox {
	background-color:#ffffff;
	border: 1px solid var(--borderColor);
	display:inline-block;
	vertical-align:middle;
	color:var(--textColor);
	outline:0;
	width: 300px;
	background:url('https://s3-eu-west-1.amazonaws.com/lightingint/5963776/i/mob/searchicon.png?_t=211612481') no-repeat left .25em center;
	background-size:1.5em;
	padding-left:2em;
	/* font-size:.825em; */
}



/*sort the placeholder color*/
#pt #searchbox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:var(--textColor);
}
#pt #searchbox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	opacity: 1;
	color:var(--textColor);
}
#pt #searchbox::-moz-placeholder { /* Mozilla Firefox 19+ */
	opacity: 1;
	color:var(--textColor);
}
#pt #searchbox:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:var(--textColor);
}
#pt #searchbox::-ms-input-placeholder { /* Microsoft Edge */
	color:var(--textColor);
}

#pt #searchbox:focus{
	/* outline: 0; */
	/* border: none; */
}

#pt .search input#search {
	display:inline-block;
	vertical-align:top;
	outline: 0;
	border:1px solid var(--mainColor);
	background-color:var(--mainColor);
}

#pt .search input[type="submit"] {}

/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-column:5;
	grid-row:1;
	align-self: center;
	/* margin-top:1em; */
	/* margin-left: calc(100% - 200px); */
	/*width needs to be set and match the hoverbasket width */
	/* width: 250px; */
	border:1px solid var(--borderColor);
	padding:1em;
	background-color:var(--bgaltColor)
}

#pt .bskt .bc {
	/*client choice to not show basket details, only a header */
	/* display:none; */
}
#pt .bskt .bt {
	display:none;
}
#pt .bskt .bt h3{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	font-family:var(--headingFont)
}

#pt .bskt .bt:before{
	display:inline-block;
	vertical-align:middle;
	content:'';
	background:url('https://s3-eu-west-1.amazonaws.com/lightingint/5963776/i/mob/viewbskt.png?_t=2116124917') no-repeat center;
	width:1.5em;
	height:1.5em;
	background-size:1.5em;
}

#pt .bskt h3,
#pt .bskt h4 {
	font-family:var(--headingFont);
	font-size: 1em;
}

#pt .bskt #mybskt{
	display:grid;
	/* padding:0 .5em; */
	grid-template-columns:2em 1fr;
	/* grid-gap:.25em; */
	align-items:center;
	color:var(--textHeadingColor);
}



#pt .bskt #mybskt h4{
	grid-column:1/3;
	text-align:center;
	font-size:.725em;
	font-weight:600;
}
#pt .bskt #bsktitems {
	/* display:none; */
	text-align:right;
	display:grid;
	grid-template-columns:1fr 4em;
}
#pt .bskt #bsktitems span{
	font-size:.725em;
	display:inline-block;
	align-self:center;
	float:none !important;
	grid-column:1;
	grid-row:1;
}
#pt .bskt #bsktvalue {
	grid-column:2;
	text-align:right;
	display:grid;
	grid-template-columns:1fr 4em;
}

#pt .bskt #bsktvalue span{
	font-size:.725em;
	display:inline-block;
	float:none !important;
	grid-column:1;
	grid-row:1;
	align-self:center
}
#pt .bskt span {}


/*the my basket button*/
#pt .bskt a.btn {
	grid-column:1;
	grid-row:1 / 3;
	padding:0;
	background:none;
	border:none;
	color:var(--mainColor);
	/* margin-left:1em; */
}


#pt .bskt a.btn img {
	width: 32px;
}

/* -------------------------------------------------------------------------------------
=CentrePanel 
------------------------------------------------------------------------------------- */
#pc {
	width: 100%;
	min-width: 1280px;
	margin-bottom:1em;
}

#pc .bc {
	/* width: 1280px; */
	/* padding: 0 .5em; */
	margin: 0 auto;
	position: relative;
	text-align:left;
}

#pc .arts,
#pc .pbnr {}

#pc .arts .bc,
#pc .pbnr .bc{
	width: 1280px;
}

#pc .arts .artp,
#pc .arts h2{
	margin:.5em 0;
}

#site.home #pc {}

#pc .bc .pbnr {}
#pc .bc .pbnr img {}
#pc .bc .pbnr h3 {}

/* -------------------------------------------------------------------------------------
=MainPanel 
------------------------------------------------------------------------------------- */

#pmid {
	width:1280px;
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/*used to ensure left panel displays correctly, unsure why though... */
	display:flex;
}

#pm {
	margin: 0 auto;
	position: relative;
}

/*should only be pmwide if a left panel is in use*/
#pm.pmwide {
	width: 80%;
	display:inline-block;
	vertical-align:top;
}

#pm.pmfull {
	width: 1280px;
	background-color:transparent;
}

#pm .pmind {}

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

/* Banners
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=RightPanel 
------------------------------------------------------------------------------------- */
#pr {
	width: 25%;
	padding:1em;
}

/* -------------------------------------------------------------------------------------
=LeftPanel 
------------------------------------------------------------------------------------- */

#pl {
	width: calc(20% - 1em);
	margin-right:1em;
	/* margin-top:1em; */
}

#pl .bt h3 {
	font-size: 1em;
	padding: .5em;
	font-family: var(--headingFont);
	background-color:var(--altColor);
	color:var(--white);
}

#pl .bc {
	/* padding:.5em 0; */
}
#pl .bc #sldiv {}
#pl p {}
#pl a {}
#pl a:hover {}
#pl .bb {}
#pl .dept{}
#pl .dept .bc{}
#pl .dept .bc li{}
#pl .dept ul{}
#pl .dept ul li{}
#pl .dept ul li a{}
#pl .pbnr {}
#pl .bnr {}
#pl .bnr span {}


/* -------------------------------------------------------------------------------------
=FooterPanel
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	background-color:var(--mainColor);
	color:#fff;}

#pf .ext {
	width:1280px;
	margin: 0 auto;
	position: relative;
	padding-top:1em;
}

#pf .art{
	/* display:inline-block; */
	padding:.5em;
	text-align:center;
}


#pf ul {}
#pf ul li {}
#pf ul li:last-child {}


/* Typography
------------------------------------------------------- */

#pf h2,
#pf h3,
#pf h4,
#pf span,
#pf strong{}

#pf a,
#pf p,
#pf ul{
	margin-bottom:.5em;
}

#pf a:hover{}

#pf h2,
#pf h3,
#pf h4{
	color:#fff;
	font-weight:bolder;
	font-size:1.5em;
	margin-bottom:.5em;
}

#pf a{
	color:var(--altColor2);
	font-weight:bolder;
}

#pf li{}

/* Articles
------------------------------------------------------- */
#pf .art{}

/* Banners
------------------------------------------------------- */
#pf .pbnr{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	width: calc(20% - 1em);
}

#pf .pbnr img{
	height:auto;
}

/* Info
------------------------------------------------------- */
#pf .info{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	width: calc(20% - 1em);
}

/* Client specific
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=BottomPanel 
------------------------------------------------------------------------------------- */
#pb {
	margin: 0em auto;
	/* margin-top: 1em; */
	width: 100%;
	min-width: 1280px;
	background-color:var(--footerColor);
	font-family:var(--altFont);
}

#pb .ext {
	width: 1280px;
	margin:0 auto;
	position: relative;

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

#pb .pipe {
	display: none;
}

#pb ul {
	list-style: none;
	font-family:var(--mainFont);
	color:var(--textColor);
}

#pb .info h3,
#pb .art h2,
#pb .news h3,
#pb .pbnr h3 {
	font-size: 1.2em;
	/* font-family: var(--headingFont); */
	color:var(--mainColor);
	font-weight:bolder;
	margin-top: 1em;
	margin-bottom: 1em;
}

#pb .info a:hover,
#pb .art a:hover{
	text-decoration:underline;
}


/* Typography
------------------------------------------------------- */

#pb h2,
#pb h3,
#pb h4,
#pb span,
#pb strong{}

#pb a,
#pb p{}

#pb a:hover{}

#pb h2,
#pb h3,
#pb h4{}

#pb p,
#pb li{
	margin-bottom: 0.5em;
}

/* Articles
------------------------------------------------------- */
#pb .art{
}


#pb .art#a109510677{
	grid-row:2;
}
/*Safe and Secure Payments */
#pb .art#a109510676{
grid-column:4;
}


#pb .art#a109510677 li{
	display:inline-block;
	vertical-align:middle;
	margin:.25em;
}

/*increase size of font awesome icons */
#pb .art#a109510677 i{
    font-size: 1.25em;
    display:inline-block;
    vertical-align:middle;
}

#pb .art#a109510677 .imgcont{
	display:inline-block;
	margin:.125em;
}

/* Banners
------------------------------------------------------- */
#pb .pbnr{
}

#pb .pbnr img{
	height:auto;
}

/* Info
------------------------------------------------------- */
#pb .info{
	grid-row:1/ span 2;
}

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

/* Newsletter signup;
------------------------------------------------------- */
#pb .news{}

#pb .news .bc label{
	display:block;
	color:var(--textColor);
	font-weight:600;
	margin-bottom:1em;
}

#pb .news .bc .news_input_container{}
#pb .news .bc .news_input_container .submit{}


/* Client specific
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */
#pbf{
	width: 100%;
	min-width: 1280px;
	background-color:var(--footerColor);
	color:var(--textColorLight);
}

#pbf .ext{
	width:1280px;
	margin:auto;
	padding:.5em 0;
	font-size:.725em;
}

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display:inline;
	color:var(--mainColor);
}

#pbf .art{
	display:inline-block;
	text-align:center;
		color:var(--mainColor);
}

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

/* note to use grid layout */
p.copy{}
p.etail {
		display:inline-block;
	text-align:right;
}

p.copy {
	display:inline-block;
	margin-right: 1em;
}

p.copy span {}

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

#pbf .cookie p {
    width: 1200px;
    margin: 0 auto;
    float: none;
    color: #fff;
    /* font-size: .75em; */
    padding: .5em 0;
}

#pbf .cookie p a {
    float: none;
    color: #fff;
    text-decoration: underline;
    padding: 0 .25em;
}

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

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

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
#pl .filter{
	border:1px var(--bgColor) solid;
}

#pl .filter .bc .ContainerPanel .HeaderContent, #pl .filter .bc .ContainerPanel .HeaderContentClose {}
#pl .filter .bc .ContainerPanel .Content .citem {}
#pl .filter .bc .ContainerPanel .Content .citem:hover {}
#pl .filter .bc .ContainerPanel .Content .citem span {}
#pl .filter .bc .ContainerPanel .Content {}
#pl .filter .bc .ContainerPanel .Content .showmore {
	cursor: pointer;
}

.filter .bt {
	background-repeat: no-repeat;
	width: 100%;
}

.filter .bt h3 {
	display: inline-table;
}

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

.HeaderContent {
	font-size: 1em;
	padding: .5em;
	font-family: var(--mainFont);
	background-color:var(--altColor);
	color:#ffffff;
	position:relative;
	cursor:pointer;
}

.HeaderContent:after{
	content:'\f146';
	font-family: "Font Awesome 5 Pro";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

.HeaderContent.collapsed:after{
	content:'\f0fe';
	font-family: "Font Awesome 5 Pro";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

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

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

.items{
	margin:.5em 0
}

.citem {
	color:var(--textColor);
	padding: .5em;
	margin: 0;
	cursor: pointer;
	display:grid;
	grid-template-columns:2em 1fr;
	align-items:center;
}

.citem:before{
	font-family: "Font Awesome 5 Pro";
	/* margin-right: .5em; */
	font-size: 1em;
	display:inline-block;
	content: '\f0c8';
}

.citemselected:before{
	font-family: "Font Awesome 5 Pro";
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f14a';
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected {}

.citemselected:hover {}

#divPriceRangeDisplay {
	text-align:center;
	padding: .5em;
}

#sldiv {
	margin: 1em;
}

#resetfs {
	display:none;
}

#resetfs h5 {
	text-transform: uppercase;
	cursor: pointer;
}


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

.searchheader{
	padding:.5em;
	text-align:right;
}

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

.searchheader .bc,
.searchfooter .bc{
	/* display:grid; */
	/* grid-template-columns:100px 200px 200px 1fr; */
	align-items:center;
}

.searchheader label,
.searchfooter label{
	margin-right:.5em;/* display:none; */}

/* results found */
.searchheader h5#rescou {
    display:none !important;
}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"]{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

/* results per page */
.searchheader #rpppan,
.searchheader .rpp{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

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

.searchheader .paging {
    display:none !important;
}

/*writing out "page" is a little daft */
.searchheader .paging label,
.searchfooter .paging label {
	display:none;
	/* font-size:.825em; */
}

.searchheader .paging span,
.searchheader .paging a,
.searchfooter .paging span,
.searchfooter .paging a {
	font-size:1em;
	display:inline-block;
	margin-right:.5em;
	border:1px solid var(--mainColor);
	padding:.5em;
}

.searchheader .paging a,
.searchfooter .paging a {


}
/*this should be the current page */
.searchheader .paging span,
.searchfooter .paging span {
	font-family:var(--headingFont)
}

.currpg{
    background-color:var(--altColor);
    color:#fff;
}

.searchheader .search input#searchbox {}
.searchheader .search input.submit {}
.searchheader label[for="rpp"] {}
.searchfooter .paging {}

#sr {
	/* use grid layout */
	display:grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
	grid-row-gap:3em;
	position:relative;
	margin-top:1em;
}

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

/* lets use grid layouts cos they are awesome! */
.fprd {
	border:1px var(--borderColor) solid;
}

.fprd:hover{}

/* unfortunately there are cases where a .bc is present inside .fprd*/
.fprd .bc{
	display:grid;
	grid-template-columns: 200px auto auto auto 1fr;
	grid-template-rows: 1fr auto 1fr 1fr;
	grid-gap:.25em;
	padding:.5em;
	position:relative;
	background-color:#ffffff;
}


/* image 
------------------------------------------------------- */
.fprd .bc .fprdimg{
	grid-column:1;
	grid-row: 1 / span all;
	align-self:center;
	text-align:center;
	/* padding:.5em; */
	position:relative;
}

.fprd a.img {}

.fprd a.img img {
	max-width:100%;
}


/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title {
	color:var(--textHeadingColor);
	font-family: var(--headingFont);
	font-weight:600;
	grid-column:2 / -1;
	grid-row:1;
	padding:.5em 0;
	text-align: left;
	align-self:start;
}

.fprd .strap {
	display:none;
}

/* description
------------------------------------------------------- */
.fprd .fprddescr{
	grid-column:2 / -1;
	grid-row:2;

}

/* pricing structure
------------------------------------------------------- */
.fprd .rrp{}

.fprd  h6{
		padding:.5em;
}

.fprd .price{
	align-self:center;
}

.fprd .prevprice{
	grid-column: 2;
	grid-row:3;
	align-self:center;
}

.fprd .offer{
	grid-column: 3;
	grid-row:3;
	align-self:center;
	text-align:right;
}

.fprd .offer h6{
	/* font-size:1.2em; */
}

.fprd label {
    display:none;
}

.fprd .price h6 {
	font-family:var(--mainFont);
}

/* this is the vat info */
.fprd h6 span{
	font-size:.5em;
}

.fprd .prevprice h6 {
	text-decoration: line-through;
	text-decoration-color:var(--altColor);
	color:var(--textColor);
	font-family:var(--mainFont);
}

.fprd .offer h6 {
	color:var(--altColor);
	font-family:var(--headingFont);
	font-weight:bolder;
}

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

.pricebreak tr {
	display:table-row;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr) );
}

.pricebreak th{}
/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {}
.fprd .unit label,
.fprd .unit h6 {}
.fprd .unit label {}
.fprd .qty {}
.fprd .inner {}
.fprd .outer {}
.fprd .trade {}

.fprd .trade.break {
	display:none;
}

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

.fprd .brand, 
.fprd .manu, 
.fprd .model,
.fprd .clientref {
	grid-row:3;
	font-size:.750em;
	/* equiv to 1em at .75em font size */
	padding: 0.66666666666em;
}

.fprd .flag{
	position:absolute;
	top:0;
	left:0;
}
.fprd .flag.offer,
.fprd .flag.newin{
	grid-column:unset;
	grid-row:unset;
	top:0;
	left:0em;
	width:56px;
}

.fprd .flag.stkout{
	grid-column:unset;
	grid-row:unset;
	left:unset;
	right:0em;
	width:100px;
}

.fprd .piflags {
	position:absolute;
	bottom:0;
}

.fprd .piflags img{
	max-width:32px;
}
.fprd .piflags ul {}
.fprd .piflags li {
	display:inline-block;
	margin:.25em;
}
.fprd .flag img,
.fprd .piflags img {
		width:auto;
}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-column:2/ -1;
	grid-row: 4;
	padding:.5em;
	align-items:center;
}

.fprd form select {
	width:100%;

}
.fprd form label {
	display:none;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	border:1px var(--borderColor) solid;
	background-color:var(--bgaltColor);
	color:var(--textHeadingColor);
	font-weight:600;
	font-family:monospace;
	font-size:1em;
	padding:.5em;
}


.fprd button.fpskuqtysub {}
.fprd form input.inputtext {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	margin:0 .5em;
}

.fprd button.fpskuqtyadd{
}

.fprd form input.submit {
	margin:0 .5em;
	background-color:var(--altColor2);
	border:1px solid var(--altColor2);
}

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

/* more info button */
.fprdinfo,
.fprd a.btn {
	grid-row: 3;
	grid-column:4;
	align-self:center;
}

/* the more info button - both will show */
.fprd a.btn{
}


/* the quickview button */
.fprd a.btn.qkvw{
	display:none;
}

/* Media Queries 
------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=QuickView 
------------------------------------------------------------------------------------- */

.quickview{
	background-color:rgba(0,0,0,0.5);
	width:100vw;
	height:100vh;
	z-index: 1001;
	position:fixed;
	top:0;
	left:0;
	padding-top:5%;
}
.quickviewdialog{
	width:800px;
	margin:auto;
	background-color:var(--white);
	z-index:999999;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap: .5em;
}

.quickviewdialog .quickviewHeader{
	grid-column:1/3;
}
.quickviewdialog .quickviewHeader .closeqkvw{
	float:right;
	position:relative;
	left:1em;
	top:-1em;
	cursor:pointer;
}
.quickviewdialog .left{}
.quickviewdialog .left .piimg{}


/*it seems we now put a broken image carousel on the quickview*/
.quickviewdialog .left .owl-carousel{
	display:none;

}

.quickviewdialog .left img{}
.quickviewdialog .right{}
.quickviewdialog .right .pititle,
.quickviewdialog .right .lnk,
.quickviewdialog .right .delivery{}

.quickviewdialog .right .delivery h4{
	margin-top:.5em;
	font-size:1.2em;
}

.quickviewdialog .right .brandmanu.model{}

.quickviewdialog .right .brandmanu.model h5,
.quickviewdialog .right .brandmanu.model h6{
	font-family:var(--mainFont);
	font-size:.875em;
	margin-right:.5em;
	color:var(--altColor2);
	display:inline-block;
	vertical-align:middle;
}

.quickviewdialog .right .pidesc{
	line-height:1.5;
}

.quickviewdialog .right .pidesc h2[itemprop="name"]{
	/*duplicated title */
	display:none;
}

.quickviewdialog .right .pidesc p{}

.quickviewdialog .right .lnk{
	font-size:.8em;
	text-align:right;
	margin:.5em;
}

.quickviewdialog .right .pibuy{ 
}

.quickviewdialog .right .pibuy .price,
.quickviewdialog .right .pibuy .qty,
.quickviewdialog .right .pibuy .trade{
	text-align:center;
	margin:.25em;
	font-size:2em;
}

.quickviewdialog .right .pibuy .price label{
	display:none;
}
.quickviewdialog .right .pibuy .price h6{}

.quickviewdialog .right .pibuy .qty label,
.quickviewdialog .right .pibuy .trade label,
.quickviewdialog .right .pibuy .qty h6,
.quickviewdialog .right .pibuy .trade h6{}

.quickviewdialog .right .pibuy form p{}
.quickviewdialog .right .pibuy form .attrqty{}

.quickviewdialog .right .pibuy form .attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

.quickviewdialog .right .pibuy form .attrqty .qtyinput label{}

.quickviewdialog .right .pibuy input#bspsubmit{}

.quickviewdialog .right .pibuy form .attrqty .qtyinput input.inputtext{}

.quickviewdialog .right .pibuy form .attrqty input#buy{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
}

.quickviewdialog .right .pibuy .stock{
	text-align:center;
	font-size:.713em;
}
.quickviewdialog .right .pibuy .title{
	/*pointless pricein gpb value, should only show if it isn't gbp */
	display:none;
}
.quickviewdialog .right .pibuy .ewis_dialog,
.quickviewdialog .right .pibuy .ewis{
	display:none;
}

/* -------------------------------------------------------------------------------------
=ProductLists 
------------------------------------------------------------------------------------- */
.prdlst .bc ul{
	display:grid;
	gap: .5em;
	padding:1em;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

.prdlst .bt h3{
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	padding:1em
}

/* media queries for viewports start BIG and go small
 outside of this it used the default
--------------------------------------- */
/* over 600px wide and less than 800px wide - show 3 per row */
@media screen and (max-width:800px ){
.prdlst .bc ul {
		/* for grid widths us the fr unit - which is calcuated on free space (whats left after padding and margin) */
		grid-template-columns:1fr 1fr 1fr;
	}
}

/* over 400px wide and less than 600px wide - show 2 per row */
@media screen and (max-width:600px ){
.prdlst .bc ul{
	 grid-template-columns:1fr 1fr;
	}
}

/* under 400px wide, show 1 per row */
@media screen and (max-width:400px ){
.prdlst .bc ul{
		grid-template-columns: 1fr;
	}
}

/* items in product list - would be better if they had .fprd stylings on them !*/
.prdlst li {
	display:grid;
	grid-template-columns: 1fr 1fr;
	position:relative;
	border: 1px solid var(--bgColor);
	background-color:#ffffff;
	align-items:center;
}

.prdlst li a.img{
	grid-column:1/3;
	grid-row:1;
	text-align:center;
	padding:.5em;
}

.prdlst li a.txt{
	grid-column:1/3;
	grid-row:2;
	text-align:center;
	padding:.5em;
	color:var(--textColor);
	font-weight:600;
}

.prdlst .price{
	grid-column:1/3;
	grid-row:3;
	text-align:center;
	padding:.5em;
}

.prdlst .offer{
	grid-column:2;
	grid-row:3;
	text-align:center;
}

.prdlst .prevprice{
	grid-column:1;
	grid-row:3;
	text-align:center;
}

.prdlst .prevprice h6{
	text-decoration:line-through;
}

.prdlst h6{
	font-weight:600;
}

.prdlst label{
	font-weight:400;
}

/* -------------------------------------------------------------------------------------
=BrandLists 
------------------------------------------------------------------------------------- */

/* scrolling brand lists */
.brnd .scroller{}

.brnd ul {
	background-color:#ffffff;
	width:100%;
	overflow:hidden;
}

.brnd #buttleft,
.brnd #buttright{
	display:none;
}

.brnd ul li {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	padding-left: 1em;
}

.brnd ul li a{}

.brnd ul li a img {
	display:inline-block;
	vertical-align:middle;
	opacity:0.6;
	filter:alpha(opacity=60);
	-webkit-transition:opacity .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out;
	-o-transition:opacity .2s ease-in-out;
	transition:opacity .2s ease-in-out;
	filter:grayscale(1);
	max-height:70px;
	width:auto;
	margin:auto;
}

.brnd ul li a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
	filter:grayscale(0);	
}

/* -------------------------------------------------------------------------------------
=RecentItems 
------------------------------------------------------------------------------------- */
.ritm {

}
.ritm .bt {}
.ritm h3 {}
.ritm ul {}

.ritm ul li {
	display:grid;
	grid-template-columns: 50px 1fr;
	grid-gap:.25em;
	margin-bottom:1em;
	background-color:#ffffff;
	padding:.5em;
}
.ritm a.img {
    grid-row:1;
    grid-column:1;
}
.ritm ul li a.img img {

}
.ritm ul li a.txt {
	font-family:var(--headingFont);
	color:var(--textColor);
	font-size: 0.825em;
	grid-row:1;
	grid-column:2;
}

.ritm ul li .price,
.ritm ul li .qty,
.ritm ul li .trade,
.ritm ul li .offer{
	grid-column:1/3;
	grid-row:1;
	text-align:right;
	font-size:.825em;
	align-self:end;
}

.ritm ul li .prevprice{
	display:none;
}
.ritm ul li .price label,
.ritm ul li .qty label,
.ritm ul li .trade label,
.ritm ul li .offer label{
	display:none;
}


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
.myaccount ul {}
.link {}

#psign h4,
#psign h3 {
	margin-bottom:.5em;
}

/* orderinfo
------------------------------------------------------- */
.orderinfo{}

.orderinfo ul.order li{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-template-columns: 25% 75%;
	grid-gap:.5em;
	margin-bottom:.5em;
}

.orderinfo ul.order label{
	grid-column:1;
	font-weight:600;
}

.orderinfo ul.order li span{
	grid-column:2;
	display:contents;
	word-break:break-word
}

.orderinfo ul.order table{
	grid-column:1/3;
}

/*view order button uses the same image as other things, be careful! */
.orderinfo #pm a.btn.info{
	background:none;
	margin:0;
	padding:0;
}

.orderinfo #pm a.btn img.btn{
	width:1em;
}

ul.order a.lnk {
	grid-column:1/3;
	font-family: "proxima-nova",sans-serif;
	font-weight:600;
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	background-color: var(--bgColor);
}


/* my details
------------------------------------------------------- */
form[name="selectDelAddress"]{}

form[name="selectDelAddress"] li.info{
	width:100%;
	color: #1d1d1d;
	font-family: "open-sans", sans-serif;
	/* www.aestheticallyloyal.com/public/optimize-legibility/ */
	text-rendering: optimizelegibility;
}

form[name="selectDelAddress"] li label{
	grid-column:1/3;
	text-align:left;
}

#psign ul.orders a.img,
#psign ul.contact a.img,
#psign ul.details a.img {
	text-align:center;
	justify-self:center;
	align-self:center;
}

#psign ul.orders a.img img,
#psign ul.contact a.img img,
#psign ul.details a.img img {
	max-height:32px;
	padding:.5em;
}

#psign ul.orders a.lnk,
#psign ul.contact a.lnk,
#psign ul.details a.lnk {
	justify-self:left;
	align-self:center;
	font-weight:600;
}

#pm .form .link {}



/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
.page_blog #pm .bc{
	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(2, 1fr);
	grid-gap: var(--spacing);
	/* grid-auto-flow: dense; */
	/* grid-auto-rows: min-content; */
}

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

.page_blog .blogs h2{
	grid-column:1/-1;
}

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


.page_blog .blogs .blog a.img{
	grid-area:image;
	/* padding:1em; */
}

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

.page_blog .blogs .blog a.title{
	grid-area:title;
	font-family:var(--headingFont);
	color:var(--mainColor);
	text-align: left;
	/* padding:1rem; */
	font-size:1.25em
}

.page_blog .blogs .blog p.date{
	grid-area:date;
	text-align:left;
	font-size:small;
}

.page_blog .blogs .blog a.more{
	grid-area:readmore;
		display:inline-block;

	margin-left:auto;
	padding:.5rem 2rem;
	background-color:var(--mainColor);
	color:var(--white);
	font-family:var(--headingFont);
	
	font-size:1.125em;
	border-radius:var(--border-radius);
	align-self:end;
}

/*blog summary text - not wanted for this client */
.page_blog .blogs .blog .artp{
	grid-area:leader;
	/* padding:1em; */
}


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

.blognav .search{}
.blognav .search h3{
	display:none;
}

.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: 34.2px;
	width: calc(100% - 2.5rem);
	/* 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: 21.4px;
	margin: 0;
	padding: 0rem .5rem;
	background-color: var(--white);
	color:var(--blue);
	font-family: var(--font-awesome);
	border: none;
}

.blognav .recent h3{
	border-bottom:1px solid var(--borderColor);
	padding-bottom:.25em;
	margin-bottom:.5em;
}

.blognav .archive h3{
	border-bottom:1px solid var(--borderColor);
	padding-bottom:.25em;
	margin-bottom:.5em;
}

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

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

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

}

.page_blog article footer,
.page_blog article section{
	margin-bottom:2em;
}

.page_blog article section p,
.page_blog article section h1,
.page_blog article section h2,
.page_blog article section h3,
.page_blog article section h4{
	margin-bottom:1em;
}

.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(--mainColor);
	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(--mainColor);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-left:auto;
	padding:.5rem 2rem;
}

/* blog classes */

.blog .card{
	border:10px solid var(--mainColor);
	border-radius:var(--border-radius);
	padding:1em;
	line-height:1.5;
	letter-spacing:.12em;
	word-spacing:.16em;
}

.blog section ul{
	margin-left:2em;
}

.blog section ul li{
	margin-bottom:1em;
}

.blog section a {
	text-decoration:underline;
	text-decoration-color:var(--mainColor);
}


/* -------------------------------------------------------------------------------------
=TabbedArticles
------------------------------------------------------------------------------------- */
#pi_wrapper{
	margin-bottom:1em;
}

#pi_wrapper ul.pi_tabs{}


#pi_wrapper ul.pi_tabs li{
	display:inline-block;
	padding:1em;
	background-color:var(--bgColor);
	cursor:pointer;
	font-weight:600;
	margin-right:1em;
}

#pi_wrapper ul.pi_tabs li.selected{
	background-color:var(--mainColor);
	color:#ffffff;
}

#pi_wrapper .pi_tab_content{
	border:1px var(--bgColor) solid;
	padding:1em;
	overflow-x:hidden;
	height:20em;
}
/* -------------------------------------------------------------------------------------
=CustomArticles
------------------------------------------------------------------------------------- */

.fullWidth{
	/* width:100%; */
	display:inline-block;
	vertical-align:top;
	margin-bottom:1em;
}

.halfWidth{
	width:calc(50% - 2em);
	display:inline-block;
	vertical-align:top;
	margin-bottom:1em;
}

.thirdWidth{
	width:calc(33.33333% - 2em);
	display:inline-block;
	vertical-align:top;
	/*needed as text may be too wide to show on smaller devices*/
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	text-align:center;
}

.quarterWidth{
	width:calc(25% - 2em);
	display:inline-block;
	vertical-align:top;
	/*needed as text may be too wide to show on smaller devices*/
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	margin-bottom:1em;
}

.deptHeader{
	width:100%;
	padding: 2em 0;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

.deptFooter{
	width:100%;
	padding: 2em 0;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

.textImage {
	margin-bottom:1em;
}

.textImage .imgcont {
	display:inline-block;
	vertical-align:middle;
	margin:.25em;
}

#pm .textImage .imgcont{
	display:inline-block;
	width:50%;
	vertical-align:top;
}

#pm .textImage .artp{
	display:inline-block;
	width:calc(50% - 1em);
	padding:.5em;
	vertical-align:top;
}

.imageText {
	margin-bottom:1em;
}

#pm .imageText .imgcont{
	display:inline-block;
	width: calc(50% - 0em);
	vertical-align:top;
}

#pm .imageText .artp{
	display:inline-block;
	width: calc(50% - 2em);
	padding-right:0;
	vertical-align:top;
}

#pm .textImage .imgcont{
	display:inline-block;
	width: calc(50% - 0em);
	vertical-align:top;
	text-align:left;
}

#pm .textImage .artp{
	display:inline-block;
	width:calc(50% - 2em);
	padding-right:0;
	vertical-align:top;
}


/* -------------------------------------------------------------------------------------
=CustomBanners
------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=CustomPages/Promotions
------------------------------------------------------------------------------------- */

/* contact us page */

/* homepage
------------------------------------------------------- */






/* Contact Us
------------------------------------------------------- */

/* 404 page
------------------------------------------------------- */

/* FAQs
------------------------------------------------------- */

/* About US
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=DepartmentPages 
------------------------------------------------------------------------------------- */

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

.depttree h3{
	color:var(--mainColor);
	margin-bottom:.5em;
}

.depttree h4.tagline{
	font-size:1em;
	margin-bottom:1em;
}

.depttree ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-gap:.5em;
}

.depttree li{
	display:grid;
	grid-gap:.5em;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns:1fr;
	padding:.25em;
	align-items:center;
	padding:1em;
	background-color:var(--bgaltColor);
}

.depttree li a.img{
    grid-column:1;
}

.depttree li a.txt{
    font-family:var(--headingFont);
    font-weight:bolder;
    color:var(--textHeadingColor);
    text-align:center;
}
.depttree li:hover a{
	color:var(--altColor);
	text-decoration:underline;

}

.depttree a.txt{
	text-align: left;
}

/* media queries
--------------------------------------- */


/* dept single links used in promotions 
------------------------------------------------------- */
.deptsingle {
	display:grid;
	grid-template-columns:1fr 5fr;
	grid-gap:.5em;
	align-items:center;
	border-top: 1px solid var(--bgColor);
	padding:.5em;
	text-align:center;
	background-color:#ffffff;
}

.deptsingle a.imglnk{
	text-align:center;
}

.deptsingle a.imglnk img{
	object-fit:cover;
	width:100%;
	height:auto;
}

/* done like this due to lack of class on the text link */
.deptsingle a.imglnk + a {}

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

/* Product Panels 
------------------------------------------------------- */
#pi{
	display:inline-block;
	position:relative;
	margin:0;
	padding:0;
}

#pi .top{}

#pi .main{
	display:inline-block;
	position:relative;
	width:1280px;
	margin:auto;
	padding-top:1em;
	text-align:left;
}

#pi .left{
	display:inline-block;
	vertical-align:top;
	width: calc(456px - 1em);
	margin-right:1em;
	padding:0;
	position:relative;
	/* outline:1px blue solid; */
}

#pi .right{
	display:inline-block;
	vertical-align:top;
	width: calc(744px - 1em);
	padding:0 .5em;
}


#pi .bottom{
	margin-top:3em;
	width:1200px;
}

/* -------------------------------------------------------------------------------------
=tipsy 
------------------------------------------------------------------------------------- */
.tipsy{
	padding: .5em;
	font-size: 1em;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-repeat: no-repeat;
	background-image: url(/images/tipsy.gif);
}

.tipsy-inner{
	padding: .5em;
	background-color: #1a1a1c;
	color: white;
	max-width: 200px;
	text-align: center;
}

.tipsy-inner{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.tipsy-north{
	background-position: top center;
}

.tipsy-south{
	background-position: bottom center;
}

.tipsy-east{
	background-position: right center;
}

.tipsy-west{
	background-position: left center;
}




/* Title
------------------------------------------------------- */
.pititle{
	display:inline-block;
	vertical-align:top;
	width:75%;
	margin-bottom:.25em;
}

h4.strap{
display:none;
}

#pi .pititle h2{
	font-family:var(--headingFont);
	color:var(--textHeadingColor);
}

/* Image (carousel/Main Image Zoom)
------------------------------------------------------- */
#pi .piimg{
	background-color:#fff;
	text-align:center;
	display:inline-block;
	vertical-align:top;
	border: 1px solid var(--borderColor);
	padding:.5em;
}

#pi .piimg img{
	max-width:100%;
	height:auto !important;
}

#pi .piimg p{
	display:none;
}

#pi .piimgx{}

/* If image not aligning centrally */
#pi .piimg a{
	margin:auto;
	text-align:center;
}

#pi .piimg a img{
	margin:auto;
}

/* Gallery
------------------------------------------------------- */

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

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

#pi .gallery .slider-main {
	margin-bottom: 1rem;
}

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

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

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

#pi .gallery #galleryimages {
	grid-area:thumbs;
	--swiffy-slider-item-count: 3;
	margin-top:2em;
}



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

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

 
/* Brand and Manufacturer 
------------------------------------------------------- */
#pi .brandmanu.brand{
	display:grid;
	grid-template-columns:20ch 1fr;
	text-align:left;
}

#pi .brandmanu.brand p{
	font-size:.825em;
}

#pi .brandmanu.brand img{}

#pi .brandmanu.model{
	display:grid;
	grid-template-columns:20ch 1fr;
	text-align:left;
}

#pi .brandmanu h5{
	font-weight:600;
	font-size:.825em;
	color:var(--textColor);
	font-family:var(--mainFont);
}

#pi .brandmanu h6{
	font-size:.825em;
}

/* Barcodes
------------------------------------------------------- */

/* independant price element - not part of the form yay!
------------------------------------------------------- */
#pi .pricecomp{
	display:inline-block;
	vertical-align:top;
	text-align:right;
	width: calc(25% - .5em);
	margin-left:.5em;

	font-family:var(--headingFont);
	color:var(--textColor);
}

#pi .pricecomp label{
	display:none;
}

#pi .pricecomp h6{
    font-size:1.8em;
}

#pi .pricecomp .prevprice h6{
	font-family:var(--mainFont);
	font-size:1em;
	text-decoration:line-through;
	text-decoration-color:var(--altColor)
}
#pi .pricecomp .saving{
	display:none;
}
#pi .pricecomp .offer{}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy{
	position:relative;
}

#pi .pibuy h6{}
#pi .pibuy .bt{}
#pi .pibuy .bc{}
#pi .pibuy .bb{}

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

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{
	font-weight:bolder;
	margin:1em 0;
}

/*normal price */
#pi .pibuy .bc .price {}

#pi .pibuy .bc .price h6{
	display:inline-block;
	vertical-align:middle;
	color:var(--mainColor);
	font-size:1.5em;
} 
#pi .pibuy .bc .price label{
    display:none;
}
#pi .pibuy .bc .price span{} 

/*rrp price */
#pi .pibuy .bc.rrp {}
#pi .pibuy .bc .rrp h6{}
#pi .pibuy .bc .rrp label{}
#pi .pibuy .bc .rrp span{} 

/*offer price */
#pi .pibuy .bc .offer {}
#pi .pibuy .bc .offer h6{}
#pi .pibuy .bc .offer label{
	display:none;
} 
#pi .pibuy .bc .offer span{} 

/*previous price (goes with offer) */
#pi .pibuy .bc .prevprice {}
#pi .pibuy .bc .prevprice h6{
	text-decoration:line-through;
	text-decoration-color:#d94927;
}
#pi .pibuy .bc .prevprice label{
	display:none;
}
#pi .pibuy .bc .prevprice span{} 

/*offer price */
#pi .pibuy .bc .saving {
	display:none;
}
#pi .pibuy .bc .saving h6{}
#pi .pibuy .bc .saving label{}
#pi .pibuy .bc .saving span{} 

/*trade price */
#pi .pibuy .bc .trade {}
#pi .pibuy .bc .trade h6{}
#pi .pibuy .bc .trade label{}
#pi .pibuy .bc .trade span{} 

/* Messages */
#pi .pibuy p{
	font-size:0.688em;
	display:inline-block;
}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}


/* stock */
#pi .pibuy .stock{
	font-size:0.825em;
	margin:1em 0;
}

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

/*dynamic price */
.dynprice{
	display:inline-block;
}

/* Pricing info
------------------------------------------------------- */

/* Buy Form
-------------------------------------------------------*/
#buy_form{}

/* attributes/sku select */
#buy_form .attr{
	display:inline-block;
	vertical-align:middle;
}
#buy_form .attr label{
	margin-right:1em;
}

#buy_form .options{
	display:inline-block;
	vertical-align:middle;
}

#buy_form .options label{
	display:block;
	margin-bottom:.5em;
}

#buy_form select,
#buy_form textarea{}
#buy_form select{
	max-width:100%;
	min-width:180px;
}

/* quantity input */
.attrqty .qtyinput{
	display:inline-block;
	vertical-align:middle;
	margin:.5em;
	margin-left:0;
}

/*hide quantity label*/
.attrqty .qtyinput label{
	display:none;
}
.attrqty .qtyinput #skuqty{
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	padding:.5em;
	/* margin:.5em; */
}

/*increase/decrease buttons */
.attrqty .qtyinput  button{
	display:inline-block;
	vertical-align:middle;
	border:1px var(--borderColor) solid;
	color:var(--textColor);
	font-weight:600;
	font-size:1.3em;
	padding:.25em .5em;
	background-color:#fff;
	cursor:pointer;
}

.attrqty .submit{
	/* outline:1px red solid; */
	/* height: 36px; */
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	/* padding:0; */
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	border:none;
}


/* message if no option selected*/
#selectResponse{
	color:red;
	/*horrid so doing full width */
	/* width:100%; */
}

/* Description
-------------------------------------------------------*/
#pi .pidesc, 
#pi .delivery{
	color:var(--textColor);
}

#pi .pidesc a,
#pi .pidescx a{
	color:var(--mainColor);
	font-weight:bolder;
}

#pi .pidesc a:hover,
#pi .pidescx a:hover{
	text-decoration:underline;
}

#pi .pidesc h2[itemprop="name"]{
	/*product title gets duplicated on the page*/
	display:none;
}

/*strapline*/
#pi .pidesc h4[itemprop="description"]{
	/*if strapline is added then it too gets duplicated on the page*/
	display:none;
}

#pi .delivery h3{}
#pi .pidesc p, 
#pi .delivery p{
	line-height:1.5;
}

#pi .pidesc ul,
#pi .pidesc ol{
	margin:1em;
}
#pi .pidesc li{
	list-style:disc;
	margin-bottom:.5em;
}

/* direct despatch */
#pi .pidesc.desp{}

#pi .pidesc.desp h5{}
#pi .pidesc.desp p{
	display:inline-block;
	vertical-align:middle;
}


#pi .alldepts{
	/* outline:1px red solid; */
	text-align:center;
}

#pi .alldepts:before{
	content:'View the whole department';
	display:inline-block;
	width:100%;
}


#pi .alldepts a{
	display:inline-block;
	font-size: .813em;
	font-weight:600;
	padding: .5em;
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
	background-color:var(--mainColor);
	border:1px var(--mainColor) solid;
	outline:none;
	color: #fff;
	display:inline-block;
	margin:.5em;

}


/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{}
#pi .pidescx ul{}
#pi .pidescx ul li{}

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

#pi .art{
	padding-top:1em;
	margin:1em 0;
	border-top:2px solid var(--borderColor);
}

#pi .art ul{
	list-style:none;
	margin:0;
}

#pi .art ul li{
	display:inline-block;
	vertical-align:middle
}

#pi .art ul li:after{
	display:inline-block;
	vertical-align:middle;
	content:"|";
	padding:0 .5em;
	color:var(--altColor);
}

#pi .art ul li:last-child:after{
	content:"";
}


#pi .art ul li a{
	display:inline-block;
	vertical-align:middle;
	color:var(--altColor);
}
/* Strapline
-------------------------------------------------------*/

/* Accordion Description
-------------------------------------------------------*/

/* Tabbed Descriptions
-------------------------------------------------------*/
#pm #pi .pi_tab{
	display:inline-block;
	width:100%;
}

#pm #pi #pi_wrapper{
}

#pm #pi ul.pi_tabs{
	display:inline-block;
	cursor:pointer;
}

#pm #pi ul.pi_tabs li{
	font-size:1em;
	text-transform:uppercase;
	padding:1em;
	margin:1em;
	text-align:center;
	border:1px #ebecee solid;
	background-color:#ebecee;
}

#pm #pi ul.pi_tabs li.selected{
	background-color:#2c4556;
	color:#fff;
	z-index:9999999;
}

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

#pm #pi .pi_tab_content{
	width:95%;
	margin-left:1em;
}

#pm #pi .pi_tab_content h2{
	font-size:1.2em;
}

#pm #pi .pi_tab_content h3,
#pm #pi .pi_tab_content h4,
#pm #pi .pi_tab_content ul,
#pm #pi .pi_tab_content p{
	padding:.5em;
}

#pm #pi .pi_tab_content p{
	font-size:0.813em;
}

#pm #pi .pi_tab_content a{}
#pm #pi .pi_tab_content a img {}

#pm #pi .pi_tab_content ul ,
#pm #pi .pi_tab_content ol{}

#pm #pi .pi_tab_content ul li,
#pm #pi .pi_tab_content ol li{}

#pm #pi .pi_tab_content ul li{
	list-style:disc;
	font-size:0.938em;
}


/* Stock 
-------------------------------------------------------*/

/* Leadtime 
-------------------------------------------------------*/

/* Direct Despatch/Dropship
-------------------------------------------------------*/

/* Links - Ask a question etc
------------------------------------------------------ */
#pi .pilinks li{
	font-size:0.750em;
	display:inline-block;
	margin-bottom:.5em;
}

#pi .pilinks .linkimg{
	display:inline-block;
	vertical-align:middle;
}

#pi .pilinks .linkimg img{
	display:inline-block;
	vertical-align:middle;
	width:1em;
	height:auto;
}

#pi .pilinks a.lnk{}
#pi .pilinks li.email a.lnk{
	display:inline-block;
	vertical-align:middle;
}

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

/* Files
------------------------------------------------------- */
#pi .pifile{
    margin:.5em 0;
    text-align:right;
}

#pi .pifile li{
	margin-bottom:.5em;
}

#pi .pifile .linkimg,
#pi .pifile a{
	display:inline-block;
	vertical-align:middle;
	margin:.125em;
}

#pi .pifile .linkimg img{
	display:inline-block;
	vertical-align:middle;
}

/* Flags 
------------------------------------------------------ */
#pi .flags{
	display:inline-block;
	/* position:absolute; */
	top:0px;
	right:0px;
	z-index:999;
}

#pi .flags .flag{
	display:inline-block;
	margin-bottom:.5em;
}


/* Video Links (youtube)
------------------------------------------------------ */
#pi .youtube {}
#pi .youtube li.title{}
#pi .youtube li.vid{}

/* Social Links
------------------------------------------------------ */
#pi .socbook {}
#pi .socbook .bt h3{
	display:none;
}
#pi .socbook li{
	display:inline-block;
	margin-right:.5em;
}

/* Buytogether
-------------------------------------------------------*/

/* Personalisation
-------------------------------------------------------*/
#pi .pibuy form .pers{}
#pi .pibuy form .pers li{}
#pi .pibuy form .pers li:last-child{}
#pi .pibuy form .pers label{}
#pi .pibuy form .pers input.inputtext{}
#pi .pibuy form .pers span.chars{}
#pi .pibuy form .pers span{}

/* Associated/Recommended/Related
-------------------------------------------------------*/
#pi .prec,
#pi .pass,
#pi .prel,
#pi .pran{}

#pi .prec h3,
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{
	margin:1em 0;
}

#pi .prec .sprd{
	display:grid;
	grid-gap:.25em;
	grid-template-columns: 50px 1fr auto auto;
	align-items:center;
}

#pi .prec .sprd .price label{
    display:none;
}
#pi .prec .sprd form{
	display:none;
}

#pi .prec .sprd form input,
#pi .prec .sprd form p{
	display:inline-block;
	vertical-align:middle;
}


/* buytogether
-------------------------------------------------------*/
.buytogether{}
.buytogether li.header{}
.buytogether ul.boughtto{}
.buytogether ul.boughtto li{}
.buytogether ul.boughtto li.imgs{}
.buytogether ul.boughtto li.imgs img{}
.buytogether ul.boughtto li.imgs span{}
.buytogether ul.boughtto li.prods{}
.buytogether ul.boughtto li.prods input,
.buytogether ul.boughtto li.prods span.descr,
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.prods input{	}
.buytogether ul.boughtto li.prods span.descr{}
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.total{}
.buytogether ul.boughtto li.total span{}
.buytogether ul.boughtto li.btn{}
.buytogether ul.boughtto li.btn .submit{}

/* feefo summary widget
-------------------------------------------------------*/
#pi #feefologohere{}
ul.feefo li{}
ul.feefo li:last-child{}
.feefosmallsummarypanel{}
.feefosmallsummarypanel .title{}
.feefosmallsummarypanel .stars{}
.feefosmallsummarypanel span[itemprop="ratingCount"]{}
.feefosmallsummarypanel .ratingNumber{}
.feefosmallsummarypanel .reviewCount{}

.feefopanel{}

.feefosmallsummarypanel{}

.feefosmallsummarypanel img{}

/* title is a duplicate of product title so we don't want to show it */
.feefosmallsummarypanel .title{
	display:none;
}

.feefosmallsummarypanel .stars{
	text-align:right;
}
.feefosmallsummarypanel .stars img{
	width:1em;
	height:auto;
}

.feefosmallsummarypanel .stars img {
	display: inline-block;
	width: 1em
}

.feefosmallsummarypanel .reviewCount{
	display: inline-block;
	margin: .5em;
	text-align:left;
}
.feefosmallsummarypanel .ratingNumber {
	display:none;
}

.feefosmallsummarypanel .ratingNumber {}
.feeforeviews {}
.feeforeviews .feefosummary {}
.feeforeviews .feefosummary span.title {}
.feeforeviews .feefosummary span.stars {}
.feeforeviews .feefosummary img {}
.feeforeviews .feefosummary span.ratingNumber {}
.feeforeviews .feefosummary .ratingCount {}

/* Wishlist (not used)
------------------------------------------------------- */
#pi .pibuy form.wishlist{}
#pi .pibuy form.wishlist input.chkbox{}
#pi .pibuy form.wishlist label{}
#pi .pibuy form.wishlist .submit{}


/* Media Queries
------------------------------------------------------- */

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

/* Defaults
------------------------------------------------------- */
/*validator messages */
.sa_validator {
	color:red;
}

.cls_superattrribute #sa_pnl_product_not_found {
	display: none;
	z-index: 2000;
}

.cls_superattrribute #saten_pnl_show {
	position:relative;
}

.cls_superattrribute {}
.cls_superattrribute .bc table {}
.cls_superattrribute .bc table .sa_left_cell_type_1,
.cls_superattrribute .bc table .sa_right_cell_type_1 {}
.cls_superattrribute .att_measure {}
.cls_superattrribute .att_X,
.cls_superattrribute .att_Y {}
.cls_superattrribute .att_X label,
.cls_superattrribute .att_Y label {}
.cls_superattrribute .calc_price {}
.cls_superattrribute .calc_price .submit {}
#sa_pnl_product_not_found #sa_label_product_not_found_close {}
#sa_pnl_product_not_found table {}
#sa_pnl_product_not_found table label {}
#sa_pnl_product_not_found td {}
#sa_pnl_product_not_found th {}
#sa_pnl_product_not_found #sa_label_product_not_found {}
#safour_panel_show td {}
.sa_pnl_product_not_found_showg {}
.sa_pnl_product_not_found_show label {}
#pi .pibuy form#buy_form .cls_superattrribute .submit {}
/*help icon */
#pi .pibuy form#buy_form .cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc {}
/*help icon needs to be placed differently for different items... */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator #saten_pnl_show img[id^="help"] {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_X label,
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_Y label {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator label {}

/* attributeTypeDimensions 
***************************************************************/
.cls_superattrribute.attributeTypeDimensions {}
.cls_superattrribute.attributeTypeDimensions .bc {}
.cls_superattrribute.attributeTypeDimensions .width {}
.cls_superattrribute.attributeTypeDimensions .drop {}
.cls_superattrribute.attributeTypeDimensions .width label,
.cls_superattrribute.attributeTypeDimensions .width input,
.cls_superattrribute.attributeTypeDimensions .drop label,
.cls_superattrribute.attributeTypeDimensions .drop input {}
.cls_superattrribute.attributeTypeDimensions .width span,
.cls_superattrribute.attributeTypeDimensions .drop span{}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.cls_superattrribute.attributeTypeDimensions .att_container {}
.cls_superattrribute.attributeTypeDimensions .att_X label,
.cls_superattrribute.attributeTypeDimensions .att_Y label {}
.cls_superattrribute.attributeTypeDimensions label {}

/* attributeTypeRadio_button
***************************************************************/
.cls_superattrribute.attributeTypeRadio_button {}
.cls_superattrribute.attributeTypeRadio_button .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeRadio_button img[id^="help"] {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali ul {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali li {}


/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span {}

/*attributeTypeDrop_down_list
***************************************************************/
.cls_superattrribute.attributeTypeDrop_down_list {}
.cls_superattrribute.attributeTypeDrop_down_list .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDrop_down_list img[id^="help"] {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}
/* for things with images... */
/*except this isn't just written out when images are in use because people don't think! */
/*don't put stuff in here it breaks things you may not be seeing on other pages */
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner {}
img.sa_img_swatch_selected {}

.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img,
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}

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

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.cls_superattrribute.attributeTypeSingle_Image_Upload {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .progress {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .sa_name {}

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	margin:1em 0;
}

/*checkout breadcrumb added - controls the order of the checkout process
doesn't do accordion stuff though */
.chkcrumb{
	text-align:left;
	font-size:.750em;
	padding:.5em;
	/* currently not wanting to show this - ultimately this will be a setting in coms as to whether it is displayed or not at each stage */
	display:none;
}

.chkcrumb .prev,
.chkcrumb .curr,
.chkcrumb .next{
	display:inline-block;
	margin-right:.5em;
}

.chkcrumb .numbers{
	display:inline-block;
}

.chkcrumb .text{}

.chkcrumb .curr{
	font-weight:600;
}

.chkcrumb .prev .numbers{}

/* if basket is empty and user is in it */
.bskt .empty{
	margin:10em 0;
}

.bskt .empty .header{
	color:var(--textColor);
	background:none;
}

.bskt .empty .total{
	text-align:center;
}

/* Basket header
------------------------------------------------------- */
.bskt .header{
    font-family:var(--headingFont);
	padding:.5em;
}

/* Basket Lines
------------------------------------------------------- */
.bskt .lines{}

/* Basket Line items
------------------------------------------------------- */
.bskt .lines .line{
	display:grid;
	grid-gap:1em;
	grid-template-columns: 100px 5fr 2fr 2fr 30px 1fr;
	padding:1em;
	/* align-self:start; */
	/* align-items: start; */
}

.bskt .lines .line:nth-child(odd){
	background-color:var(--bgColor);
}

/* Image */
.bskt .lines .line .prodimg{
	grid-column:1;
	grid-row:1;
}

.bskt .lines .line .prodimg a,
.bskt .lines .line .prodimg a img{
	display:block;
	text-align:center;
	margin:auto;
}

/* Product Info - in list form */
.bskt .lines .line .prodinfo{
	grid-column:2;
	grid-row:1;
	/* align-self:start; */
}

.bskt .lines .line .prodinfo li.descr{
	font-size:1em;
	font-family:var(--headingFont);
	color:var(--textHeadingColor);
}

.bskt .lines .line .prodinfo li.ref,
.bskt .lines .line .prodinfo li.brnd,
.bskt .lines .line .prodinfo li.manu,
.bskt .lines .line .prodinfo li.subset,
.bskt .lines .line .prodinfo li.model{
	font-size:.875em;
	margin-left:1em;
}

/* remove item */
.bskt .lines .line .rem{
	grid-column:5;
	grid-row:1;
	align-self:start;
	text-align:center;
	/* align-self:center; */
}

.bskt .lines .line .rem .submit {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	background:none;
	max-width:16px;
}

.bskt .lines .line .rem .submit{}

.bskt .lines .line .rem .submit:hover {}

/* Change quantity */
.bskt .lines .line .qty{
	grid-column:4;
	grid-row:1;
	font-size:.875em;
	text-align:center;
	/* align-self:center; */
}

.bskt .lines .line .qty label{
	display:none;
}

.bskt .lines .line .qty button{
	display:inline-block;
	vertical-align:middle;
	border:1px var(--textColor) solid;
	background-color: var(--white);
	color:var(--textColor);
	font-weight:600;
	font-size:1.2em;
	padding:.25em .5em;
}

.bskt .lines .line .qty input{
	display:inline-block;
	vertical-align:middle;
	margin: 0 .5em;
	text-align:center;
}

.bskt .lines .line .netprice {
	grid-column:3;
	font-size:.875em;
}

.bskt .lines .line .netprice label,
.bskt .lines .line .netprice span{
	font-size:.750em;
	display:inline-block;
}

.bskt .lines .line .netprice label{
	margin-right:.25em;
}

.bskt .lines .line .price {
	grid-column: 6;
	grid-row: 1;
	text-align:right;
	font-family:var(--headingFont);
	/* align-self:center; */
	font-weight:bolder;
}

/* out of stoc messages */
.oos{
	color:var(--mainColor);
	font-size:.725em;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal{
	padding:1em;
	border-top:1px var(--textColor) solid;
	border-bottom:1px var(--textColor) solid;
	text-align:right;
	display:none;
}

.prodsubtotal label{
	margin-right: 1em;
}

.prodsubtotal span{
	font-size:1.2em;
    font-family:var(--headingFont);    
}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
.header.free{
	background:none;
	color:var(--textColor);
	padding:1.5em;
	font-size:.875em;
}

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

/* Shipping 
------------------------------------------------------- */
.shipping{
	padding:1em;
}

.shipping .header{
    /* display:none; */
    text-align:center;
}
.shipping .header .icon{
	display:inline-block;
	vertical-align:middle;
	margin-right:1em;
}

/* no need to show this unless collect option is available */
.shipping .delivery .address h4{
	display:none;
}

.shipping .address input,
.shipping .address h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	margin:.25em;
}

.shipping p{
    text-align:right;
}

.shipping .store input,
.shipping .store h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	margin:.25em;
}

.shipping .deliveryto form{
	text-align: right;
}

.shipping .deliveryto form span{
    font-family:var(--headingFont);
}
/* if there ARE delivery choices */
.shipping form select{
	/* width:100%; */
	margin:1em;
	margin-right:0;
}

/* if there are NOI delivery choices */
.shipping .deliverto span{
	font-weight:600;
}

li.shipping{
	padding:0;
	text-align:right;
}

/* selected shipping cost*/
li.shipping form span{
	font-weight:600;
	margin-left:.5em;
}


/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top: 2px var(--textColor) solid;
	border-bottom: 2px var(--textColor) solid;
	padding:1em;
	text-align:right;
}

.bskttotals label{
	display:inline-block;
}

.bskttotals span{
	font-family:var(--headingFont);
	/*fix a min width for different number alignment */
	display:inline-block;
	width:8em;
}

.bskttotals .total{
	font-size:1.5em;
}
.bskttotals .total span{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* Vouchers
------------------------------------------------------- */
.vouchentry{
	display:block;
	text-align: right;
	padding:1em;
	margin-left:auto;
}

.vouchentry:before{
	content:"Discounts / Vouchers";
	display:block;
	font-family: var(--headingFont);
	padding-bottom:1em;
}

#pm ul.accordion li.pane ul.vouch li,
.vouchentry ul.vouch li{
	display:inline-block;
}


/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons{
	text-align:right;
	margin:.5em 0;
	font-size: 1em;
}

.bsktbuttons .sp_button{

display:inline-block;

/* margin:0 .5em; */
}

.bsktbuttons a{
	padding:.5em;
	margin:.5em 0;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	/* background-color:var(--mainColor); */
	color:#fff;
}

.bsktbuttons .pp_button a.btn{
	background:none;
	padding:0;
}

/*font awesome icons */
#pm .sp_button a.btn.sagepay:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f09d';
}

#pm .sp_button a.btn.bacs:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f19c';
}

#pm .sp_button a.btn.lease:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f154 \f154 \f154';
}

.page_basket .btn.cont a.btn {
	display:inline-block;
	margin:.5em 0;
	border-color:var(--bgColor);
	color:var(--bgColor);
	background-color:var(--bgaltColor);
}

.page_basket .btn.cont a.btn:hover {
	color:#000;
}
.page_basket .btn.clear a.btn {
	display:inline-block;
	margin:.5em 0;
}

.page_basket .btn.clear a.btn:hover {}

/* Media Queries
------------------------------------------------------- */
/* over 600px wide and less than 800px */
@media screen and (max-width:800px ){}

/* over 400px wide and less than 600px wide */
@media screen and (max-width:600px ){}

/* under 32400px0px wide */
@media screen and (max-width:400px ){
	/* add an extra row and change order of things */
	.bskt .lines .line .qty{
		grid-column:1/4;
		font-size:.875em;
	}

	.bskt .lines .line .prodinfo{
		grid-column:2/5;
		grid-row:1;
	}

	/* remove item */
	.bskt .lines .line .rem{
		grid-column:4;
		grid-row:2;
	}

	.bskt .lines .line .netprice {
		grid-column:1/3;
	}

	.bskt .lines .line .netprice label,
	.bskt .lines .line .netprice span{
		font-size:.750em;
	}

	.bskt .lines .line .price {
		grid-row:3;
	}
}
/* -------------------------------------------------------------------------------------
=Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

/* Defaults / Overrides 
------------------------------------------------------- */
#checkout_panel_processing,
#ro_accord_processing {
	position: absolute;
	display:none;
	width: 100%;
	padding: 20px 10px;
	opacity: 0.6;
	filter: Alpha(Opacity=60);
	float: right;
	background-color: var(--textColor);
}

#pm .accord {
	display:inline-block;
	vertical-align:top;
	width: 911px;
	margin-right:1em;
	overflow-x: visible;
}

.reqmsg{
    color:var(--errorColor);
}

/* Accordion tabs 
------------------------------------------------------- */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	color:#ffffff;
	right:0;
	left:initial;
	background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_666_256x240.png);
}

#pm .accord h3 {
	font-weight: bolder;
	padding: .5em;
	margin: 0;
	width:calc(100% - 1em);
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1.2em;
	border-radius:0;
	background:var(--bgaltColor);
	color:var(--textColor);
}

#personalisation_panel, #gift_panel {
	border: none;
}

#pm .accord h4 {
	margin-bottom:.5em;
}
#pm .accord label {}

#pm .accord ul li input, 
#pm .accord ul li select, 
#pm .accord ul li textarea,
#pm .accord ul li span {}

#pm .accord ul li textarea {}
#pm .accord ul li input.submit {}
#pm .accord li #submit {}
#checkout_accordion {}
#checkout_accordion input.inputtext,
#checkout_accordion input.inputtext_light,
#checkout_accordion select,
#checkout_accordion textarea {}

.ui-accordion .ui-accordion-content {
	padding: 1em;
	border-top: 0;
	overflow: auto;
}

#checkout_accordion #ul_left li.chkbox {
	grid-template-columns:1em 1fr;
}

#checkout_accordion #ul_left li.chkbox input#subscribe{
    grid-column:1;
}

#checkout_accordion #ul_left li.chkbox label{
    grid-column:2;
    margin:1em .5em
}

#checkout_accordion #ul_left #specialinst{
	max-height:6em;
}

/* Typography
------------------------------------------------------- */

/* Specific Fields 
------------------------------------------------------- */
/* sign in in accordion */
#signinform h5{
	font-size:.8em;
}

#signinform li{}

#signinform input.inputtext{
	width:300px;
}

#signin_skip{
	line-height:normal;
	font-weight:bolder;
	padding:.5em;
	border: none;
	color: var(--textColorLight);
	margin-right:1em;
	text-align: center;
	text-transform: uppercase;
 	background: #eef2f3;
	cursor:pointer;
}


/* Main accordion Sections 
------------------------------------------------------- */
#ul_top{
	font-size:.875em;
	margin-bottom:1em;
	grid-column:1/-1;
}
#ul_left{}
#ul_right{}


#ul_bottom{
	grid-column:1/-1;
}
#ul_bottom .continue{
	margin:auto;
	text-align:center;
}

/* hide labels for neater display */
#ul_left label,
#ul_right label{
	grid-column:1/-1;
	margin-top:1em;
	margin-bottom: .5em;
}

/* Customer Details 
------------------------------------------------------- */
#customer_panel{}

#customer_panel form{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1em;
}

#customer_panel #ul_left li,
#customer_panel #ul_right li{
	display:grid;
	grid-template-columns:10fr .5fr;
	align-items:center;
}


/* Delivery Address 
------------------------------------------------------- */
#delivery_panel form {
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1em;
}

#delivery_panel #ul_left,
#delivery_panel #ul_right{

}

#delivery_panel #basket_delivery_method .zone{
	font-weight:bolder;
	display:block;
	margin-left:1em;
}

#delivery_panel #basket_delivery_method .service{
	display:block;
	margin-left:2em;
}

#delivery_panel #basket_delivery_method .charge{
    display:block;
    margin-left:2em;
}

#delivery_panel #delivery_to_other {
	font-size:1em;
	padding: .5em;
	margin:.5em 0;
	text-align:center;
	cursor:pointer;
	background-color:var(--bgaltColor); 
	border:1px var(--borderColor) solid;
	color:var(--textColor);
	display:inline-block;
}

#basket_delivery_address ul li{
	display:grid;
	grid-template-columns:40% 60%;
	align-items:center;
}

#basket_delivery_address ul label{
	grid-column:1;
}

#delivery_panel #ul_bottom label{
	/*duplicated from title above */
	display:none;
}

#delivery_panel textarea {
	width:50%;
}

#delivery_panel .help{
    font-size:.825em;
    color:var(--textColorLight)
}

/* Confirm Panel inc Basket Summary
------------------------------------------------------- */
#confirm_panel{
	padding:1em;
}

#confirm_panel.ordertotal{
	font-weight:bolder;
}

#confirm_panel .continue{
	margin:1em auto;
	text-align:center;
}

/* for v4 only 
#confirm_panel th{
	background-color:var(--bgaltColor2);
	color:#fff;
}
#confirm_panel td{
	vertical-align:top;
}

#confirm_panel .line li{
	font-size:.825em;
	padding-left:1em;
}

#confirm_panel .line li:first-child{
	font-size:1em;
	padding-left:0;
	font-weight:bolder;
}

#confirm_panel .prodtotal span{
	display:none;
}

#confirm_panel .prodtotal a{
	font-size:1em;
	padding: .5em;
	margin:.5em 0;
	text-align:center;
	cursor:pointer;
	background-color:var(--bgaltColor); 
	border:1px var(--borderColor) solid;
	color:var(--textColor);
	display:inline-block;
}

#confirm_panel .ordertotal{
	font-weight:bolder;
}

#confirm_panel  h5{
	letter-spacing:initial;
	font-weight:initial;
	font-size:1em;
	margin:1em 0;
}

#confirm_panel  h5 input{
	margin-left:.5em;
}

/* for v5 only*/
.basketsummary .header{
	margin:0;
	color:var(--textColor);
	padding:.5em;
	background-color:#ffffff;
	text-align:center;
}

.bsktsum{}

.bsktsum .line{
	display:grid;
	grid-gap:.5em;
	padding:.5em;
	grid-template-columns: 3fr 1fr 1fr 1fr;
	align-self:center;
}

.bsktsum .line:nth-child(odd){
	background-color:var(--bgColor);
}

.bsktsum .qty{
	text-align:right;
}

.bsktsum .qty label{
	display:none;
}

.bsktsum .price{
	font-weight:bolder;
	text-align:right;
}
.bsktsum .editbskt{}
.bsktsum .editbskt span{
	float:none !important;
	display:block;
}


.bsktsum .editbskt a{
	font-size:1em;
	padding: .5em;
	margin:.5em 0;
	text-align:center;
	cursor:pointer;
	background-color:var(--bgaltColor);
	border:1px var(--borderColor) solid;
	color:var(--textColor);
	display:inline-block;
	/* margin-right:auto; */
}

.bsktsum .line .prodinfo li{
	font-size:.725em;
}

.bsktsum .line .prodinfo li.descr {
	font-size:1em;
	font-weight:bolder;
}

/*accept terms and conditions - could do with a class */

.bsktsum h5{
	color:var(--textHeadingColor);
	font-weight:bolder;
	font-size:1em;
}

.bsktsum .chkbox{
	margin-left:.5em;
}

/*view terms - needs a class and to loose the space in the title!*/
a[title="View "]{
	font-size:.875em;
	margin:1em 0;    
}


/* Basket Subtotal
------------------------------------------------------- */
.bsktsum .subtotal{
	padding: .5em;
	text-align:right;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top: 1px var(--textColor) solid;
	border-bottom: 1px var(--textColor) solid;
	padding:1em;
	text-align:right;
}

.bsktsum .subtotal label{
	display:inline-block;
}

.bsktsum .subtotal span{
	font-weight:bolder;
	/*fix a min width for different number alignment */
	display:inline-block;
	width:5.3333333333em;
}

.bsktsum #ordertotal{
}
.bskttotals #ordertotal{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* Payment Panel Totals
------------------------------------------------------- */
#payment_panel{}
#payment_panel .form{}

#delivery_date_panel .continue{
	margin:auto;
	text-align:center;
}


/* 
PAY WITH AMAZON
------------------------------------------------------- */
/* Please include the min-width, max-width, min-height 
and max-height if you plan to use a relative CSS unit 
measurement to make sure the widget renders in the 
optimal size allowed.	
*/

#addressBookWidgetDiv {
	 min-width: 300px;
	 max-width: 100%;
	 min-height: 228px;
	 height: 300px;
}

#walletWidgetDiv {
	 min-width: 300px; 
	 max-width: 100%;
	 min-height: 228px; 
	 height: 300px;
}

#shippingSelector{
	border:1px solid #bbb;
	margin:1em 0;
	padding:0 1em;
}

#amazonShippingSelection > span{
	margin-top:.5em;
	font-size:1.2em;
	font-weight:600;
	width:100%;
	display:inline-block;
}

#amazonShippingSelection > span +span{
	font-weight:normal;
	margin-top:.5em;
	margin-bottom:.5em;
}

#shippingSelector amazonShippingSelection{
	outline:1px red solid;
}

.amazonShippingCountryDiv span.label{
	font-weight:600;
	margin-right:1em;
}

.amazonShippingOptionsDiv span.value{
	font-weight:600;
}

.amazonShippingOptionsDiv{
	cursor:pointer;
}

.amazonShippingOptionDiv{
	width:40%;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid #bbb;
	border-radius: 3px;
	display: block;
	text-decoration: none;
	margin: 0 3px 6px 0;
	padding: 0 20px 0 30px;
	color: #333;
	font-size: 11px;
	height: 30px;
	background: #f6f6f6;
	background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%);
}

.amazonShippingOptionsDiv:after{
	display:block;
	clear:both;
	content:'';
}

.amazonShippingOptionDiv.selected {
	background: #f6f6f6 url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%)
}

.amazonShippingOptionDiv.selected:hover {
	background: #ececec url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#ececec 0,#d3d3d3 100%)
}

.amazonShippingOptionDiv:hover {
	background: #ececec;
	background: -moz-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: -webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: -ms-linear-gradient(top,#ececec 0,#d3d3d3 100%);
	background: linear-gradient(to bottom,#ececec 0,#d3d3d3 100%)
}

.address-list li.selected a.invalid {
	background: #f6f6f6;
	background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%);
	background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%)
}

#cancelAmazon{
	background-color:#eef2f3;
	color:#416976;
	font-weight:600;
	padding:.5em;
}

.noshipping{
	color:var(--mainColor);
	margin-bottom:1em;
	font-weight:bold;
}

.submit[disabled]{
	background-color:#eef2f3;
	color:#ffffff;
}


/* Checkout Breadcrumb panel
------------------------------------------------------- */
#pm .accordbdcb {
	display:inline-block;
	vertical-align:top;
	width: 350px;
}

#pm .accordbdcb .checkoutLogos{
	text-align:center;
}

#pm .accordbdcb .checkoutLogos img{
	margin:.5em;
}

#pm .accordbdcb ul {
	border-bottom:2px #d5d6d6 solid;
	margin-bottom:.5em;
}

#pm .accordbdcb ul li {
	margin: .5em 0em 1em 1em;
}

#pm .accordbdcb ul li.header {
	font-weight:600;
	padding: 0;
	margin: 0;
	width: 96%;
	padding:.25em 2%;
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1em;
	border-radius:0;
	border-bottom: var(--borderColor) 2px solid;
	color:var(--mainColor);
}

#pm .accordbdcb ul li:last-child {}

#pm .accordbdcb ul li.title {
	font-weight: 600;
	padding: .5em;
	margin: 0;
	width:calc(100% - 1em);
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1.2em;
	border-radius:0;
	background:var(--bgaltColor);
	color:#ffffff;
}

/* due to the way the payment bit in the checkout crumb is written out */
#pm .accordbdcb ul li span.label {
	width:50%;
	display:inline-block;
}

/* terms and conditions article in checkout
------------------------------------------------------- */
#pp {
	width: 1000px;
	margin: 0 auto;
	background-color: #ffffff;
}

#pp p, #pp h3, #pp h4 {
	margin: 0 1em;
}

#pp h3, #pp h4 {
	margin-bottom: .5em;
}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.confirmation .conf{
	padding:1em;
}

.confirmation .conf .info li{
	margin-bottom:1em;
	display:block;
}

.confirmation .conf li.info li{
	list-style:disc;
	display:list-item;
	list-style-position:inside;
}

.confirmation .conf .header{
	font-weight:600;
	font-size:2em;
}

.confirmation .conf .subhead{
	font-weight:600;
	margin:.5em 0;
}

/* Basket Line items
------------------------------------------------------- */
.confirmation .conf .order{}
.confirmation .conf .order .line{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 1fr 6fr 1fr;
	padding:1em;
	align-self:center;
	align-items:start;
}

.confirmation .conf .order .line:nth-child(odd){
	background-color:var(--bgaltColor);
}

/* Image */
.page_confirmation .conf .order .line a.img{}

/* Product title*/
.confirmation .conf .order .line .descr{
	align-self:start;
	font-size:.875em;
	font-weight:600;
}

.confirmation .conf .order .line .price {
	text-align:right;
	font-weight:600;
	align-self:start;
}

/* Basket Subtotal
------------------------------------------------------- */
.confirmation .conf .order .subtotal{
	padding:1em;
	border-top:1px var(--bgColor) solid;
	text-align:right;
}

.confirmation .conf .order .subtotal label{
	margin-right: 1em;
}

.confirmation .conf .order .subtotal span{
	font-size:1.2em;
	font-weight:600;
}

.confirmation .conf .order .address{
	text-align:left;
	font-size:.875em;
}

/* Post order customer registration panel
------------------------------------------------------- */
.confirmation .conf .ordreg{
	background-color:#ffffff;
	padding:1em;
	margin:1em 0;
}

.confirmation .conf .ordreg input{
	margin:.5em 0;
}

.confirmation .conf .ordreg .info{
	margin:.5em 0;
}

.confirmation .conf .ordreg .help{
	font-size:.725em;
	padding:1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */

#pm .smap ul {
	list-style-position: inside;
	width:100%;
}

#pm .smap ul li {
	padding: 1em 0;
}

#pm .smap ul li a,
#pm .smap ul li h3 {
	padding: 0;
}

#pm .smap .bc ul li ul {
	padding:1em 0;
	float:left;
}

#pm .smap ul li ul li {
	padding: 0;
}

/* First Level */
#pm .smap ul li{
	width:25%;
	float:left;
}
#pm .smap ul li a{
	font-weight:600;
	font-size:1.2em;
}

/* Second Level */
#pm .smap ul li ul{
	margin-left:2%;
	width:98%;
	float:left;
}
#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;
}








/* -------------------------------------------------------------------------------------
=AccordionArticles
------------------------------------------------------------------------------------- */

/* accordion descriptions 
------------------------------------------------------- */
#pm .bc ul.accordion{}

#pm .bc ul.accordion .pane{
	display:none;
}

#pm .bc ul.accordion .pane{
	background-color:var(--bgColor);
	padding:1em;
}

#pm .bc ul.accordion li.header{
}

#pm .bc ul.accordion li.header img{
	position:absolute;
	right:1em;
	top: 0.5em;
	width:1em;
	height:auto;
	cursor:pointer;
}

#pm .bc ul.accordion li.header img.showminus{
	display:none;
}

#pm .bc ul.accordion li.header.current img.showminus{
	display:block;
}

#pm .bc ul.accordion li.header.current img.showplus{
	display:none;
}

#pm .bc .accordion p{
	font-size:1em;
	margin-bottom:1em;
	line-height:1.5;
}

#pm .bc .accordion ul{}
#pm .bc .accordion a{}

#pm .bc .accordion a:hover{
	text-decoration:underline;
}

#pm .bc .accordion span{
	font-weight:800;
}

#pm .bc ul.accordion thead td{
	font-weight:800;
}

/* -------------------------------------------------------------------------------------
=Hacks 
------------------------------------------------------------------------------------- */
.clearfix{
	padding:0 !important;
	margin:0 !important;
	float:none !important;
	clear:both !important;
}

.spacer{
	float:left;	
}

.epau .bc{
	display:none;
}

#modal-overlay-inline{
	z-index:999;
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 swiffy 2023
	Filename : swiffy.css
	Last Updated : 04. 04. 2025
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

------------------------------------------------------------------------------------- */

.swiffy-slider  {
	position: relative;
	display: block;
	width: 100%;
	--swiffy-slider-snap-align: center;
	--swiffy-slider-item-width: 100%;
	--swiffy-slider-item-gap: 1rem;
	--swiffy-slider-item-reveal: 0rem;
	--swiffy-slider-item-ratio: 1/1;
	--swiffy-slider-item-count: 1;

	--swiffy-slider-nav-zoom: 1;
	--swiffy-slider-track-opacity: 0.1;
	--swiffy-slider-track-height: 0;
	--swiffy-slider-nav-outside-size: 3.5rem;
	--swiffy-slider-indicator-outside-size: 1.5rem;
	--swiffy-slider-animation-duration: .75s;
	--swiffy-slider-animation-delay: 0s;
	--swiffy-slider-animation-timing: ease-in-out;
}

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

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

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

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

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

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

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

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

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

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

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

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


.slider-indicators {
	display: flex;
	justify-content: center;
	padding: 0;
	list-style: none;
	width:100%;
}

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

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


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

	
}

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

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

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