/* ------------------------------------------------------------------------------------
	SCREEN - Superdeal Wholesale 2021 
	Filename : sitepanes.css
	Last Updated : 17. 02. 2026
	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: #0288D1;
	--altColor: #26ADE4;
	--altColor2: #0052a7;

	--textColor: #888888;
	--textColorLight: #b7b7b7;
	--textAltColor: #26ADE4;

	--textHeadingColor: #0052a7;
	--textSubHeadingColor: #0288D1;
	
	--bgColor: #ffffff;
	--bgaltColor: #f0f0f0;
	--bgaltColor2: #b7b7b7;
	--footerColor: #26ADE4 ;
	--borderColor: #b7b7b7;
	--checkoutButtons: #8EC760;
	--altButtonColor:#f0f0f0;
	--mainFont: neuzeit-grotesk, sans-serif;
	--headingFont: proxima-nova, sans-serif
	--altFont: neuzeit-grotesk, sans-serif;
	--altFont2: proxima-nova, sans-serif

	--errorColor:#d94927;
}

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

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

/* Document
   ========================================================================== */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
   ========================================================================== */

/* Grouping content
   ========================================================================== */

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

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

/* Text-level semantics
   ========================================================================== */

a {
  background-color: transparent;
}


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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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


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


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


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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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


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

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

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

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

/* Interactive
   ========================================================================== */

details {
  display: block;
}

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

template {
  display: none;
}

[hidden] {
  display: none;
}

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

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

ol {
	margin-left:.5em;
}

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

/* Defaults
------------------------------------------------------- */
/* this choice of font-family is supposed to render text the same across platforms */
body, input, button, textarea, select {}

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+) #fff 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-size: 1em;
	padding: .5em;
	border:1px solid;
	border-color:var(--borderColor);
}

p, ol, ul, dl, address {}

b, strong {}

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 var(--borderColor);
	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-weight:300;
}

h1{
	font-size:1.8em;
}

h2{
	font-size:2em;
}

h3{
	font-size:1.250em;
}

h4{
	font-size:1.188em;
}

h5{
	font-size:1.125em;
}

h6 {}

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

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

a:hover{
	text-decoration: none;
}
a.lnk:hover {
	text-decoration:underline;
}

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

/* Blockquote
------------------------------------------------------ */
blockquote {
	border-top: 1px solid var(--borderColor);
	border-bottom: 1px solid var(--borderColor);
	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
------------------------------------------------------- */

/*Unified heading colors*/
.art h2,
.art h3,
.art h4,
.art h5 {
	padding: .5em 0;
}

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

.art h3{
	color:var(--textSubHeadingColor)
}

.art h2 {
		color:var(--textHeadingColor);
	font-weight:bolder;
}

#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:hover {
	text-decoration:underline;
	text-decoration-color: var(--mainColor);
}


/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit,
a.btn {
	font-size:1em;
	padding: .5em;
	text-align:center;
	cursor:pointer;
	background-color:var(--altColor);
	border:1px var(--altColor) solid;
	outline:none;
	color:#fff;
	font-weight:bolder;
	display:inline-block;
	vertical-align:middle;
}

/* 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 solid var(--borderColor);
	/*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-weight:bolder;
	text-align:left;
	padding:.5em;
	width:auto;
}

/* for when no header has been used in the code !*/
table tbody tr:first-child td{
	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;
}
/*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 {}

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

.ordinfo a.btn.print {
	background-color:var(--bgaltColor);
	border-color:var(--borderColor);
	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-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 {}

.form .bt {}

.form .bt h3 {
	padding: .5em 0;
}
.form h5,
.form h5,
.form h5 {}

.form li select,
.form li textarea,
.form li input {
}

.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:var(--errorColor);
}

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

.form label {
	font-weight:bolder;
}

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

.form li.help,
.form li.info {
	display:inline-block;
	font-size:.825em;
	/* font-weight:bolder; */
}

.form form {}

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

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

.form form .submit {
	display:block;
}

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

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

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

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

/* Sign In
------------------------------------------------------- */
.form#psign,
.form#pguest{
	width:50%;
	margin:auto;
}

/* as labels aren't being used - placeholders are */
.form#psign select,,
.form#pguest select,
.form#psign textarea,
.form#pguest textarea,
.form#psign input,
.form#pguest input{
	width:calc(100% - 1em);
}

.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,
.form#psign .exstfgtpwd h5{
	font-weight:400;
	color:var(--textHeadingColor);
}

.form#psign .exstreglnk h5 a,
.form#psign .exstfgtpwd 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 {
	/* would rather not have to do this, but we display the width on the input element and that borks things */
	width:calc(100% - 1em);
}

.form#preg input.submit{
	grid-column:1/-1;
	margin:auto;
	width:auto;
	padding:.5em 1.5em;
}
.form#preg .subscribe label{
	grid-column:1;
	grid-row:1;

}
.form#preg .subscribe input.chkbox{
	width:auto;
	display:inline-block;
	grid-column:2;
	grid-row:1;
}

/* 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 #jnav{
    display:block;
    width:100%;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    z-index: 1001;
    text-transform:uppercase;
    color:var(--textColor);
}

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

#pc #jnav li{
		color:#fff;
}
#pc #jnav li.pipe{}


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

#jnav li.nav > a,
#jnav li.navcurr > a,
#jnav li.nav > h3,
#jnav li.navcurr > h3  {
	display:block;
	position:relative;
	vertical-align:middle;
	color:inherit;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	padding: 1em .5em;
	color:#fff;
		font-weight:bolder;
}

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

#jnav li.nav:hover > a,
#jnav li.navcurr:hover > a,
#jnav li.nav:hover > h3,
#jnav li.navcurr:hover > h3   {
	/* color:var(--textColor); */
}

/* =Dropdown
------------------------------------------------------- */
#jnav ul.snav{
    position: absolute;
    width:calc(1280px - 2em);
    /* left:0; */
    z-index: 9999;
    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);
}

#jnav ul.snav li{
	padding:.5em;
	display:inline-block;
	width:240px;
}

#jnav ul.snav li a:hover{
	text-decoration:underline;
}

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

/* Level 1 dept header */
#jnav a.l1{}

#jnav a.l1:hover{}

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

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

/* client specifics
------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb{
	margin:auto;
	width:1280px;
	/* padding:1em 0; */
	color:var(--textHeadingColor);
	text-align:center;
}

.home .bdcb{
	display:none;
}

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

.crumb {
	display:block;
	margin-bottom:1em;
	text-align:left;
}

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

.crumb li h3,
.crumb li a{
	font-size:1em;
	display:inline-block;
	vertical-align:middle;
}


/*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(--altColor);
	margin:0 .5em;
}

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

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

.crumb h1{
	color:var(--textHeadingColor);
	font-weight:bolder;
	font-size:1em;
	letter-spacing:initial;
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */

.ui-dialog,
.ui-widget.ui-widget-content{
	/* z-index:2000; */
	/* padding:1em; */
	border:1px solid var(--borderColor);
}

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

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

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

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

.ui-dialog input.submit{
	margin:.5em 0;
	text-align:center;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus{}

.ui-widget form{}

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

.ui-widget-content{}

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


/* the ask for email address popup? */
.ui-dialog.ewisdialog{
    width:400px !important;
    text-align:center;
}

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

.techquesdialog label{}

/* saartdialog*/
.ui-dialog.saartdialog{
	width:640px !important;
}

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

.owl-stage-outer{}

/* this should be the title for the carousel */
.carousel h2{
	text-align:center;
	padding:1em;
	color:var(--textHeadingColor);
	font-weight:bolder;
}

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

.noNav .owl-controls{
	display:none;
}
.owl-controls {
	text-align:center;
}

.owl-nav{
}

.owl-dot {
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
.owl-dot span {
	display:inline-block;
	vertical-align:top;
	width: 0.825em;
	height: .825em;
	margin:.5em;
	border-radius:50%;
	background-color:var(--bgaltColor);
}
.owl-dot.active span,
.owl-dot:hover span {
	background-color: var(--mainColor);
}

.owl-theme .owl-controls{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	z-index:-9999999; /*otherwise you cant click on the image! */
}

.owl-theme .owl-nav {
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	position:absolute;
	width:100%;
	top:50%;
}

.owl-nav .owl-prev,
.owl-nav .owl-next  {
	position:absolute;
	color: #FFF;
	font-size: 1em;
	margin: .5em;
	padding: .5em;
	background: var(--bgaltColor2);
	display: inline-block;
	cursor: pointer;
}


.owl-prev{
	left:-2.5em;
}

.owl-next{
	right:-2.5em;
}


.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
	background: var(--mainColor);
	color: #FFF;
	text-decoration: none; 
}



.owl-carousel .owl-item img {}

/* text overlay stuff - needs a bit more tweeking in coms */
.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 div,
.carousel .slideCont {
	grid-row:1;
	grid-column:1;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	background-clip: content-box;
	margin:auto;
	min-width:25%;
}


.carousel .imgcont div h,
.carousel .slideCont h2{
	color:#fff;
	font-size:3em;
	padding:0;
}

.carousel .imgcont div h3,
.carousel .slideCont h3{
	color:var(--textSubHeadingColor);
}
.carousel .imgcont div p,
.carousel .slideCont p{
	width:auto;
	margin:.5em;
}

.carousel .imgcont div .btn,
.carousel .slideCont .btn{
	background-color:var(--mainColor);
	border:1px var(--mainColor) solid;
	margin:1em;
}
.carousel .imgcont div p
.carousel .slideCont .p{
	color:#fff;
	font-size:2.5em;
	margin:0 1em;
}


/* 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;
}
.home .carousel .fprd{
	display:block;
}

/* mini hack for the fact that we aren't consistent in how we write out product info !*/
.home .carousel .fprd .bt,
.home .carousel .fprd .bb{}

.carousel .fprd .prevprice{
	/* due to the carousel dictating the width of the container this may not fit! */
}

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

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

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

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

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	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: 367px !important;
	margin:auto;
	padding:0;
	z-index:999999 !important;
	border-radius:0;
	max-height:332px;
	overflow-x:hidden;
	overflow-y:scroll;
	border:1px solid var(--borderColor);
	border-top:none;
	z-index:2000;
	background:#fff;;
}
.ui-autocomplete li.ui-menu-item {
	padding:.5em;

}

.ui-menu-item a {
    display:grid;
    grid-template-columns:80px 1fr;
    grid-gap:1em;
    align-items:start;
}

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

.foundProduct img {
}

.foundProductTitle {
	font-family:var(--headingFont);
	font-weight:bolder;
}

.foundProductRef {
	display:none;
}

.foundProductDesc {
	display:none;
}

.foundProductDesc {}

.ui-autocomplete mark {
	background-color:transparent;
	color:var(--mainColor);
}


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

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

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

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

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

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

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

.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 {
	max-height:260px;
	overflow-y:scroll;
}
.hoverbskt .lines .item {
    display:grid;
    grid-template-columns:80px 1fr;
    padding-right:.5em;
}

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

.hoverbskt .lines .item p.descr {
	display:none;
}
.hoverbskt .lines .item p.qty {
    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;
	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(--checkoutButtons);
	border:1px var(--checkoutButtons) 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;
	-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);
}

.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 {
	font-family:var(--headingFont);
	color:var(--textHeadingColor);
	font-weight:600;
	font-size:1.2em;
	grid-column:1/-1;
	grid-row:2;
	text-align:center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-column:1;
	grid-row:3;
	text-align:right;
	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;
	font-weight:bold;
	display:inline-block;
	vertical-align:middle;
	background-color:var(--checkoutButtons)
}

.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%;
	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(--bgaltColor);
	border-bottom:1px solid var(--borderColor);

}

#ptf .ext {
	width: 1280px;
	margin: 0 auto;
	position: relative;
	text-align:right;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

/* top links
------------------------------------------------------- */
#ptf .info{
    grid-column:3;
    padding:.5em 0;
}

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

#ptf .info li a{
	display:inline-block;
}

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

/* Top content/contact 
------------------------------------------------------- */
#ptf .art{
	text-align:center;
}

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


/* vat switch
------------------------------------------------------- */
#ptf .vatsw{
	text-align: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(--altColor);
    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;
	margin-bottom: 1em;
}

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

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

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

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

#pt .pbnr a{
    display:block;
}

#pt .pbnr img{
	display:block;
	margin:1em auto;
	height:auto;
}

/* strapline
------------------------------------------------------- */
#pt .pbnr#pp45318148{
	grid-column:2;
	grid-row:1;
	text-align: center;
	align-self:center;
}
#pt .ext .art ul li.mob:before{
	font-family: "Font Awesome 5 pro";
	font-weight: bolder;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f3cd';
}


/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-column: 3;
	grid-row:1;
	align-self: center;
	padding: 1em .5em;
	border:1px solid var(--altColor2);
	color:var(--altColor2);
	font-weight:bolder;
}

#pt .bskt .bc {}
#pt .bskt .bt {}

#pt .bskt .bt h3{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
}

#pt .bskt .bt:before{}

#pt .bskt h3,
#pt .bskt h4 {
	font-size: 1em;
}

#pt .bskt #mybskt{
	display:grid;
	grid-template-columns:2em 1fr 1fr;
	grid-gap:.25em;
	align-items:center;
}

#pt .bskt #mybskt h4{
	grid-column:1/3;
	text-align:center;
	font-size:.725em;
	font-weight:bolder;
}

#pt .bskt #bsktitems {
	display:grid;
	grid-column:2;
	grid-template-columns:auto auto;
}

#pt .bskt #bsktitems span{
	display:inline-block;
	align-self:center;
	float:none !important;
	grid-column:1;
	grid-row:1;
}
#pt .bskt #bsktvalue {
	grid-column: 3;
	text-align:right;
	display:grid;
	grid-template-columns:auto auto;
}

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

#pt .bskt span {}

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

#pt .bskt a.btn img {
	width: 1em;
	height:auto;
	display:block;
	/* outline:1px red solid; */
}



/* -------------------------------------------------------------------------------------
=CentrePanel 
------------------------------------------------------------------------------------- */
#pc {
	width: 100%;
	min-width: 1280px;
	background-color:var(--mainColor);

		background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 64px, #fff 64px, #fff 100%);
}

#pc > .bc {
	margin: 0 auto;
	width:1280px;
	position: relative;
	text-align:left;
	display:grid;
	grid-template-columns:auto auto 1fr;
	align-items:center;

	grid-template-rows:64px auto;
}
/* Dept Tree
------------------------------------------------------- */
#pc .dept{
	/* grid-column:1/-1; */
	margin:auto;
	display:inline-block;
	vertical-align:middle;
	color:#fff;
	position: relative;
	margin-right:1em;
}

/* none dept links
------------------------------------------------------- */
#pc .info{
	display:inline-block;
	vertical-align:middle;
	color:#fff;
}

#pc .info li{
	display:inline-block;
	margin-right:1em;
	text-transform:uppercase;
	font-weight:bolder;
}



/* Search
------------------------------------------------------- */
#pc .search {
	grid-column: 3;
	grid-row:1;
text-align:right;
} 

#pc .search form{}
	
#pc .search label {
	display: none;
}

#pc #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') #fff no-repeat left .25em center;
	background-size:1.5em;
	padding-left:2em;
}

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

#pc #searchbox:focus{}

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

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


/* site wide top message
------------------------------------------------------- */
#pc .art {
	grid-column: 1/-1;
	text-align:center;
	font-weight:bolder;

} 



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

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

#pm {
	margin: 0 auto;
	position: relative;
	margin-bottom:1em;
}

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

#pm .pmind {}

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

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

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

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

/* -------------------------------------------------------------------------------------
=FooterPanel
------------------------------------------------------------------------------------- */
#pf {
	margin:0 auto;
	padding:0;
	width:100%;
	min-width:1280px;
	max-width:calc(100% - 4em);
	padding:2em;
	background-color:var(--bgaltColor);
	border-top:1px solid var(--borderColor);
	margin-top:1em;

}

#pf .ext {
	width: 100%;
	margin:0em auto;
	position:relative;
	text-align:center;
}

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

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

#pf .news .bt{
	display:none;
}

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

#pf .news input{
	display:inline-block;
	vertical-align:middle;
}


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

/* Articles
------------------------------------------------------- */
#pf .art.fullWidth{
	text-align:center;
}

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

/* Info
------------------------------------------------------- */

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

/* -------------------------------------------------------------------------------------
=BottomPanel 
------------------------------------------------------------------------------------- */
#pb {
	margin: 0em auto;
	width: 100%;
	min-width: 1280px;
	background-color:var(--mainColor);
	color:#fff;;
	padding-top:2em;
	padding-bottom:2em;
}

#pb .ext {
	width: 1280px;
	margin:0 auto;
	position: relative;
	display:grid;
	grid-template-columns:2fr 1fr 1fr 350px;
	grid-template-areas:
		"logo  sales customerservices contact"
		".  . . secure";

}

#a118128640{
	grid-area:contact;
	text-align:right;
}

#a142934017{
	grid-area:secure;
		text-align:right;
}

#a142934017 img{
	max-width:32px;
	height: auto !Important;
}

#p45547524 img{
	max-width:200px;
}

#pb .pipe {
	display: none;
}

#pb ul {
	list-style: none;
}

#pb .info h3,
#pb .art h2,
#pb .pbnr h3 {
	font-size: 1.25em;
	color:inherit;
	margin-bottom: 1em;
	padding:0;
	text-transform:uppercase;
	font-weight:bolder;
}

#pb .art h3{
	color:var(--textColor);
	padding:0 0 .5em 0;
}

#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: 01em;
}

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


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

/* Info
------------------------------------------------------- */
#pb .info{
	color:#fff;
}

/* Client specific
------------------------------------------------------- */
#a118128640 .contact li a{
	display:grid;
	grid-template-columns:3em 1fr;

}
#a118128640 .contact li a i{
	text-align:left;
	font-size:1.5em;
	margin-right:auto;
}
#a118128641{
	grid-column:1/-1;
}
#a118128641 .imgcont{
	display:inline-block;
	padding:0 .5em;
}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */
#pbf{
	width: 100%;
	min-width: 1280px;
}

#pbf .ext{
	width:1280px;
	margin:auto;
}


/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf {
	background-color: var(--bottom-bar-color);
	--font-size: 14px;
	--text-link-color:var(--white);
	font-size:small;
}

#pbf .ext {
	--site-max-width: 1280px;
	--spacer-width: calc((100% - var( --site-max-width)) / 2);
	/* margin: 0 2em; */
	position: relative;
	display: grid;
	text-align: center;
	grid-template-areas:
		". copyright links payment .";
	grid-template-columns: var(--spacer-width) 1fr auto 1fr var(--spacer-width);
	border-top:1px solid rgba(69, 89, 102, 0.25);
	padding:1.5em
}

.etailcopy{
	grid-area:copyright;
	text-align:left;
	align-content:center;
}
.etailcopy p{
	display:inline-block;
	margin:0 .5rem;
}

.etail,
.etail a{
	color:rgba(255, 255, 255, 0.25);
}

#p54689793{
	grid-area:links;
	text-align:center;
	align-content:center;
}

#p54689793 li{
	display:inline-block;
	margin:0 .5em;
}

#p54689793 a{
	text-decoration:underline;
}

#pbf #a142934017{
	grid-area:payment;
	text-align:right;
}





/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display:grid;
	grid-template-columns:1fr 1fr;
}

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

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

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

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

p.copy span {}


/***********************************************************************/
/* Side Department Nav                                             */
/***********************************************************************/
 
.deptlist2{
	/*fixed width due to on scroll fixed positioning */
	/* width:224px; */
	/* border:1px solid var(--borderColor); */
	/* padding:1em; */
}

#pl.sticky .deptlist2{
    position: sticky;
}
.deptentryheader{
	position:relative;
}
.deptentryheader.exp a{}

.deptentry .deptentryheader a {
	/* display:block; */
	padding:.25em 0;
    /*required for css :after element for expand/collapse (not that it functions like that!)*/
	/* padding-right:1.5em; */
	/* font-size:.875em; */
	text-transform:capitalize;
}
 
 /* This should be the top level depts */ 
.deptlist2 li{}

/* this should be the 2nd level expansions */ 
.deptlist2 .deptentry{
	 /* background-color:var(--footerColor); */
}

.deptlist2 .deptentry .deptentryheader{
    /* margin-left:.5em; */
    display:grid;
    grid-template-columns: 1fr 16px;
    align-items:center;
    color:var(--altColor2);
    border-bottom:2px solid var(--altColor2);
}

/* hack for this client swl due to dept structure */

.deptlist2 .deptentry .deptentryheader img{
	display:none;
}

.deptlist2 .deptentry .deptentryheader img{
	width:100% !important;
	height:auto !important;
	cursor: pointer;
}

/* this should be the 3rd level expansions */ 
.deptlist2 .deptentry .deptentry{}
.deptlist2 .deptentry .deptentry .deptentryheader{
    margin-left:1em;
        margin-right:.5em;
    border-bottom:none;
    color:var(--textColor);
}

.deptlist2 .deptentry .deptentry  .deptentryheader img{
	display:block;
}

/* this should be the 4th level expansions */ 
.deptlist2 .deptentry .deptentry .deptentry{}
.deptlist2 .deptentry .deptentry .deptentry .deptentryheader{
    margin-left:1.5em;
	border-bottom:none;
	color:var(--textColor);
}

.deptlist2 .deptentry .deptentry .deptentry .deptentryheader img{
	display:block;
}


/* this should be the 5th? level expansions */ 
.deptlist2 .deptentry .deptentry .deptentry .deptentry{}

.deptlist2 .deptentry .deptentry .deptentry .deptentry .deptentryheader{
    margin-left:2em;
}


.deptlist2 .deptentryheader.active{
    color:var(--altColor2);
    font-weight:bolder;
}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
#pl .filter{}

#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 0;
	font-family: var(--mainFont);
    border-bottom:2px var(--altColor2) solid;
	color:var(--textHeadingColor);
	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;
}

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


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

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected:hover {}

div[sectiontype="priceslider"]{}

div[sectiontype="priceslider"] .items{
	margin:1em;

}

#divPriceRangeDisplay {}
#resetfs {
	display:none;
}

#resetfs h5 {}


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

.searchheader{
	padding:.5em;
	/* border-top:1px solid var(--borderColor); */
	/* border-bottom:1px solid var(--borderColor); */
}

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

.searchheader .bc,
.searchfooter .bc{
	display:grid;
	grid-template-columns:auto auto auto 1fr;
	grid-gap:1em;
	align-items:center;
}

.searchheader label,
.searchfooter label{
	display:none;
}

/* results found */
.searchheader h5#rescou {}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"]{}

/* results per page */
.searchheader #rpppan,
.searchheader .rpp{}

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

.searchheader .paging {
    text-align:right;
}

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

.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(--borderColor);
	padding:.5em;
}

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

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

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

.currpg{
    background-color:var(--bgaltColor);
}

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

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

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

/* lets use grid layouts cos they are awesome! */
.fprd {}

.fprd:hover{    

}

/* unfortunately there are cases where a .bc is present inside .fprd*/
.fprd .bc{
	border:1px solid var(--borderColor);
	padding-top:2px;
	display:grid;
	grid-template-columns: 1fr 1.5fr;
	grid-gap: .5em;
	position:relative;
	padding:.5em;
	/* try using template-rows to get stuff to line up rather than min height on titles */
	grid-template-rows:auto 60px 2em auto;
}

.fprd .bc .fprdimg{
	grid-column:1/-1;
	text-align:center;
	position:relative;
}

/* image 
------------------------------------------------------- */
.fprd a.img {
	grid-column:1/-1;
	grid-row:1;
	text-align:center;
	display:block;
}

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

.fprd .fprdimg{
	grid-row:1;
	text-align:center;
}

.fprd .fprdimg img{

}

.fprd .fprdimg img{}

.fprd .fprdimg img:hover{}

/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title {
	font-family: var(--mainFont);
	grid-column:1/-1;
	grid-row:2;
	text-align: center;
	color:var(--textHeadingColor);
	font-weight:bolder;
	align-self:start;
	align-items:center;
}
.fprd .strap {
    color:var(--textHeadingColor);
}

.fprd .strap a{
	display:block;
}

/* pricing structure
------------------------------------------------------- */

.fprd h6 {
	text-decoration-color:var(--mainColor);
	font-size:1.2em;
	color:var(--textColor);
}

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

.fprd .rrp h6{}

.fprd .price{
	/* grid-column:1; */
	/* text-align:left; */
	/* background-color:#fff; */
}

.fprd .price label{
	/* display:none; */
}
.fprd .price h6 {}

.fprd .prevprice{
	grid-column: 1;
	padding-bottom:.5em;
	align-self:end;
	text-align:center;
}

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

.fprd .offer{
	grid-column: 2;
	padding-bottom:.5em;
	align-self:end;
	text-align:center;
}

.fprd label {
    /* display:inline-block; */
    font-size:.825em;
    /* margin-right:1em; */
}






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

/* 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 {
	text-align:right;
	grid-column:2;
}

.fprd .trade  h6{
	color:var(--mainColor);
	font-weight:bolder;
}

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

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

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

.fprd .fprddescr{
	display:none;
}

.fprd .flag{
	position:absolute;
	max-width:25%;

	top:0;
	right:0;
}

.fprd .flag.prdel{
	top:0;
	right:0;
}

.fprd .flag.offer,
.fprd .flag.newin{
	grid-column:unset;
	grid-row:unset;
	top:0;
	/* left:0em; */
}

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

.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:1/-1;
	align-self:end;
	text-align:center;
}

.fprd form select {
	grid-column:1;
	grid-row:1;
	max-width:100%;
	display:inline-block;
}
.fprd form label {
	display:none;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	border:1px var(--borderColor) solid;
	background-color:var(--bgColor);
	color:var(--mainColor);
	font-weight:600;
	/* font-size:1.25em; */
	padding: .5em .75em;
}

.fprd button.fpskuqtysub {}

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

.fprd button.fpskuqtyadd{}

.fprd form input.submit {
	/* font-size:.875em; */
	/* margin-left:.5em; */
	background-color:var(--checkoutButtons);
	border:1px solid var(--checkoutButtons);
}

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

/* more info button */
.fprdinfo,
.fprd a.btn {}


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

/* the quickview button */
.fprd a.btn.qkvw{}

.fprd:hover a.qkvw {}

.fprdinfo a.qkvw:hover {}
/* 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:#fff;
	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-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;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

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

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

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

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







/* saved for later saved_for_later
------------------------------------------------------- */
.saved_for_later{
}

 .ritm  ul.saved_for_later li {
	display:grid;
	grid-template-columns: 100px 1fr auto;
	 grid-template-areas:"image title price"
		 "image title unitprice"
	 "remove remove remove";
	grid-gap:.25em;
	margin-bottom:1em;
	background-color:#ffffff;
	padding:.5em;

	 border:1px solid var(--borderColor);
}

 .ritm  ul.saved_for_later li .img{
	 grid-area:image;
 }

 .ritm  ul.saved_for_later li .txt{
	 grid-area:title;
	 font-size:1em;
	 font-weight:600;
	 color:var(--mainColor)
 }

 .ritm  ul.saved_for_later li .unit{
	 grid-area:unitprice;
	 text-align:right;
	 font-size:1em;
 }

 .ritm  ul.saved_for_later li .trade{
	 grid-area:price;
	 text-align:right;
	 font-size:1em;
 }

 .ritm  ul.saved_for_later li .trade label{
	 display:block;
 }


 .ritm  ul.saved_for_later li .rasfl{
	grid-area:remove;
	 	 text-align:right;
}

 .ritm  ul.saved_for_later li .rasfl input{
	 display:inline-block;
	 width:auto !important;

 }

/* popular products
--------------------------------------------------------*/

.popular_products{
}

 .ritm  ul.popular_products li {
	display:grid;
	grid-template-columns: 100px 1fr auto;
	 grid-template-areas:"image title price"
		 "image title unitprice";
	grid-gap:.25em;
	margin-bottom:1em;
	background-color:#ffffff;
	padding:.5em;

	 border:1px solid var(--borderColor);
}

 .ritm  ul.popular_products li .img{
	 grid-area:image;
 }

 .ritm  ul.popular_products li .txt{
	 grid-area:title;
	 font-size:1em;
	 font-weight:600;
	 color:var(--mainColor)
 }

 .ritm  ul.popular_products li .unit{
	 grid-area:unitprice;
	 text-align:right;
	 font-size:1em;
 }

 .ritm  ul.popular_products li .trade{
	 grid-area:price;
	 text-align:right;
	 font-size:1em;
 }

 .ritm  ul.popular_products li .trade label{
	 display:block;
 }
/* 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:bolder;
}

.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;
	display:block;
	color:var(--textColor);
	padding:.5rem;
	margin-bottom:.5rem;
}

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

ul.order a.lnk {
	grid-column:1/3;
	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%;
}

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:bolder;
}

#pm .form .link {}

/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog #pm {}
#site.blog #pm h2 {}
#site.blog #pm .blog {}
#site.blog #pm .blog a.title {}
#site.blog #pm .blog p.date {}
#site.blog #pm .blog img {}
#site.blog #pm .blog .artp {}
#site.blog #pm .blog a.more {}
#site.blog #pm .blogBtns, 
#site.blog #pm .blogPageBtns {}
#site.blog #pm .blogBtns a, 
#site.blog #pm .blogPageBtns a {}
#site.blog #pm .blogBtns a.prev, 
#site.blog #pm .blogPageBtns a.prev {}
#site.blog #pm .blogBtns a.next, 
#site.blog #pm .blogPageBtns a.next {}
#site.blog #pm .art .bc h2 {}
#site.blog #pm .art .bc .artp {}
#site.blog #pm .art .bc .artp h3 {}


/* -------------------------------------------------------------------------------------
=TabbedArticles
------------------------------------------------------------------------------------- */
#pi_wrapper{
	grid-column:1/-1;
	margin:1em 0;
}

#pi_wrapper ul.pi_tabs{}


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

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

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

/* -------------------------------------------------------------------------------------
=CustomBanners
------------------------------------------------------------------------------------- */


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

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

#site.home #pm .pmind{}



.swAboutus .artp{
	display:grid;
	grid-template-columns:60% 40%;
	grid-gap:1em;
}
#map iframe{
	width:100%;
	height:100%;

}



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

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

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

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


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

/* Subdepartment tree
------------------------------------------------------- */
.depttree{}

.depttree > .bt h3{
    color:var(--textHeadingColor);
    font-weight:bolder;
    font-size:1.5em;
    margin-bottom:1em;
}

.depttree h4.tagline{
	padding:1em 0;
}

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

.depttree li{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 1fr;
	border: 1px solid var(--borderColor);
	align-items:center;
}

.depttree li a.img{
	text-align:center;
	display:block;
}

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

.depttree li:hover a{
	color:var(--altColor);
	text-decoration:underline;
}

.depttree a.txt{
	text-align: center;
	font-family:var(--headingFont);
	color:var(--textSubHeadingColor);
	font-weight:bolder;
	padding:.5em;
}

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


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

.deptsingle:hover{
	-webkit-box-shadow: 0px 0px 24px 0px rgba(101,101,101,0.3);
	-moz-box-shadow: 0px 0px 24px 0px rgba(101,101,101,0.3);
	box-shadow: 0px 0px 24px 0px rgba(101,101,101,0.3);
}

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

.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 {
	display:block;
	z-index:100;
}

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

#pmid.page_buy	{
	width:100%;
	text-align:center;
}

#pmid.page_buy #pm.pmfull{
	width:100%;
	min-height:60vh;
	margin-bottom:0;
}

/* 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;
	text-align:left;
}

#pi .left{
	display:inline-block;
	vertical-align:top;
	width: 508px;
	margin-right: 2em;
	padding:0;
	position:relative;
}

#pi .right{
	display:inline-block;
	vertical-align:top;
	width: 740px;
}

#pi .right > .bc{
	display:grid;
	grid-template-columns:1fr 150px;
}

#pi .bottom{
	display:block;
}

#pi .bottom .bc{}

/* -------------------------------------------------------------------------------------
=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: var(--bgaltColor2);
	color: white;
	max-width: 250px;
	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{
	grid-column:1 / -1;
	margin-bottom:1em;
}

.pititle h4.strap{
    display:none;
}

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

/* Image (carousel/Main Image Zoom)
------------------------------------------------------- */
#pi .piimg{
	background-color:#fff;
	text-align:center;
	display:inline-block;
	vertical-align:top;
}

#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
------------------------------------------------------- */
#pi .gallery{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap:1em;
	vertical-align:top;
	margin-right:1em;
}

#pi .gallery h4{
	display:none;
}

#pi .gallery .piimg_large{
    border:1px solid var(--borderColor);
	margin-bottom:1em;
}

#pi .gallery .piimg_large a{
	display:block;
}

#pi .gallery .piimg_large img{
	margin:0 !important;
	display:block;
}

#pi .gallery .piimg_large a{}

/* This is the moving lens square underneath the mouse pointer. Not visible if the zoom window is over the image*/
.cloud-zoom-lens{
	border:1px solid var(--borderColor);
	margin:-1px; /* Set this to minus the border thickness. */
	background-color:#fff;
	cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title{}

/* This is the zoom window. */
.cloud-zoom-big{
	overflow:hidden;
	top:0;
	left:0 !important;
	background-color:#fff;
}

/* This is the loading message. */
.cloud-zoom-loading{
	position:absolute;
	top:0;
	margin:0;
	color:white;
	background:#222;
	padding:3px;
}
 
/* Brand and Manufacturer 
------------------------------------------------------- */
#pi .brandmanu{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:100px 1fr;
	text-align:left;
	margin-bottom:.5em;
}


#pi .brandmanu.clientref{}
#pi .brandmanu.gtin{}

#pi .brandmanu.brand p{
	display:inline-block;
	font-size:0.688em;
	font-weight:bolder;
}

#pi .brandmanu.brand img{}
#pi .brandmanu.model{
	margin-bottom: 1.5em;
	padding-bottom:.5em;
	border-bottom:2px var(--borderColor) solid;
}

#pi .brandmanu h5{
	font-size:1em;
	font-weight:bold;
}

#pi .brandmanu h6{
	font-size:1em;
	margin-left:.5em;
}

/* Product Bullets
------------------------------------------------------- */

#pi .bullets{
	grid-column:1/-1;
}

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

/* independant price element - not part of the form yay!
------------------------------------------------------- */
#pi .pricecomp{
	text-align:right;
}

#pi .pricecomp label{
	display:none;
}

#pi .pricecomp h6{
    font-size:1.8em;
    color:var(--altColor);
    font-weight:bolder;
}

#pi .pricecomp .prevprice h6{
	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;
	grid-column:1/-1;
	margin-top:1em;
}

#pi .pibuy h6{
	font-size:1.5em;
}
#pi .pibuy .bt{}
#pi .pibuy .bc{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:1em;
    align-items:start;

}
#pi .pibuy .bb{}

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

/* pricing info
------------------------------------------------------- */

#pi .pibuy h6{
}

#pi .pibuy label{
	display:inline-block;
}
#pi .pibuy .price,
#pi .pibuy .offer,
#pi .pibuy .prevprice,
#pi .pibuy .rrp,
#pi .pibuy .trade,
#pi .pibuy .saving{/* display:none; */}

/*normal price */
#pi .pibuy .price {
	grid-column: 2;
	grid-row:2;
}
#pi .pibuy .price h6{
} 
#pi .pibuy .price label{
    display:inline-block;
}
#pi .pibuy .price span{} 

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

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

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

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

/*trade price */
#pi .pibuy .trade {}
#pi .pibuy .trade h6{
	color:var(--mainColor);
	font-weight:bolder;
}
#pi .pibuy .trade label{}
#pi .pibuy .trade span{} 

/* Messages */
#pi .pibuy p{
	grid-column:1/-1;
	padding:.5em 0;
}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}

/* stock */
#pi .pibuy .stock{
	grid-column:1/-1;
	grid-row:1;
	margin-bottom:1em;
	font-size:.825em;
}

/* quantity in basket info */
#pi .pibuy .qtyInBskt{}

/*dynamic price */
.dynprice{
	grid-column:3;
	text-align:right;
	font-size:1.5em;
}

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

/* Buy Form
-------------------------------------------------------*/
#buy_form{
	grid-column:1/-1;
}

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

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

#pi .pibuy .attrqty{
	display:grid;
	grid-gap:1em;
	grid-template-columns:auto 100px 1fr;
	align-items:center;
	/* margin-top:1em; */
}

/* quantity input */
#pi .pibuy .attrqty .qtyinput{
    grid-column:1;
    grid-row:1;
}

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

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

#pi .pibuy .attrqty .submit#buy{
	grid-column:2;
	grid-row:1;
	background-color:var(--checkoutButtons);
	border:1px solid var(--checkoutButtons);
}
/* message if no option selected*/
#selectResponse{
	color:var(--errorColor);
	grid-column:1/-1;
}

/* Description
-------------------------------------------------------*/
#pi .pidesc, 
#pi .delivery{
    grid-column:1/-1;
    margin-top:1em;
}

#pi .pidesc h2[itemprop="name"]{
    /*duplicated title */
    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 li{}

/* direct despatch */
#pi .pidesc.desp{
	grid-column:1/-1;
	padding:1em 0;
}

#pi .pidesc.desp h5{
	color:var(--textHeadingColor);
	font-weight:bolder;
	letter-spacing:initial;
	margin-bottom:.5em
}
#pi .pidesc.desp p{
	display:inline-block;
	vertical-align:middle;
}


/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{
	margin-top:1em;
}

#pi .pidescx h1,
#pi .pidescx h2,
#pi .pidescx h3,
#pi .pidescx h4,
#pi .pidescx h5{
	color:var(--textHeadingColor);
	font-size:1em;
	margin-bottom:.5em;
}
#pi .pidescx ul{}
#pi .pidescx ul li{}

/* Articles
-------------------------------------------------------*/
#pi .art{
	padding-top:1em;
	margin:1em 0;
}

#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 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 var(--borderColor) solid;
	background-color:var(--bgaltColor);
}

#pm #pi ul.pi_tabs li.selected{
	background-color:var(--mainColor);
	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{
	margin-top:1em;
}
#pi .pilinks li{
	display:inline-block;
}

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

#pi .pilinks .linkimg img{}

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

#pi .prec h3,
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{
	padding:1em 0;
	color:var(--textHeadingColor);
}

/*carousel overrides */
#pi .prec .owl-controls{
	display:none;
}


/* flags */
#pi .prec .carousel .piflags,
#pi .prec .carousel .flag {
	padding:0;
	top:unset;
	right:unset;
}

#pi .prec .carousel .fprd .flag.prdel{
	top:unset;
	right:unset;
	grid-column:2;
}


/* 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:var(--errorColor);
}

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

/*help icon */
.cls_superattrribute img[id^="help"] {
	grid-column:2;
	grid-row:1;
	cursor:pointer;
}

.cls_superattrribute{
	border-bottom:1px solid var(--borderColor);
	margin-bottom:1em;
	padding:1em 0;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:.5em;
}

.cls_superattrribute .info.sa_name{
	display:grid;
	grid-template-columns:1fr 19px;
	align-items:center;
}

.cls_superattrribute select{
	width:100%;

}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.attributeTypePrice_Matrix_Calculator {
	background-color:var(--bgaltColor);
	padding:1em;
	border-bottom:none;
	grid-template-columns:1fr;
}


.attributeTypePrice_Matrix_Calculator #saten_pnl_show {
	position:relative;
	display:grid;
	grid-template-columns:1fr 19px;
}

.attributeTypePrice_Matrix_Calculator .att_container{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:.5em;
    align-items:end;
}

.attributeTypePrice_Matrix_Calculator .att_header{
	grid-column:1/-1;
}
.attributeTypePrice_Matrix_Calculator .sa_name{
	font-weight:bolder;
}

.attributeTypePrice_Matrix_Calculator .att_measure{
	grid-column:1/-1;
}

.attributeTypePrice_Matrix_Calculator label{
	display:block;
}

.attributeTypePrice_Matrix_Calculator input{
	padding:.5em;
}

.attributeTypePrice_Matrix_Calculator .calc_price .submit {
	display:block;
	padding: 0em;
	text-align:center;
	cursor:pointer;
	background-color:transparent; 
	border:none;
	outline:none;
	color:var(--textColor);

}

/* attributeTypeDimensions 
***************************************************************/
.attributeTypeDimensions {}


/* attributeTypeRadio_button
***************************************************************/
.attributeTypeRadio_button {}

.attributeTypeRadio_button .radioholder{
	display:inline-block;
	padding-right:1em;;
}

.attributeTypeRadio_button .radioholder label{
	margin-left:.5em;
}

/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.attributeTypeText_Box_Free_Text_Entry {
	/*sighs at inconsistent code! */
	display:block;
	padding-top:0;
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer > div{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:.5em;
	align-items:center
}

/* oh this is a mess!!!! my kingdom for some structure or class */
.attributeTypeText_Box_Free_Text_Entry .attrContainer > div div:nth-child(1){
	grid-column:1;
	grid-row:1;
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer > div div:nth-child(2){
	grid-column: 2;
	grid-row:1;
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer > div div:nth-child(2) input{
    width:100%;
}

.attributeTypeText_Box_Free_Text_Entry .attrContainer > div div:nth-child(3){
	text-align:right;
	grid-column: 1;
	grid-row:1;
}
.attributeTypeText_Box_Free_Text_Entry .attrContainer > div div:nth-child(4){
	grid-column:2;
	grid-row:2;
}

.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {
	grid-column:1;
	grid-row:1;
	margin-left:auto;
}


/*attributeTypeDrop_down_list
***************************************************************/
.attributeTypeDrop_down_list {}

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

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.attributeTypeSingle_Image_Upload {
	display:block;
	padding-bottom:0;
}

.attributeTypeSingle_Image_Upload .attrContainer{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:.5em;
	align-items:center
}

.attributeTypeSingle_Image_Upload .attrContainer label{
	grid-column:1;
	grid-row:1;

}

.cls_superattrribute.attributeTypeSingle_Image_Upload img[id^="help"] {
	grid-column:1;
	grid-row:1;
	margin-left:auto;
}


.attributeTypeSingle_Image_Upload .siup_triggerdel{
	grid-column:2;
	grid-row:1;
	margin-left:auto;
}

.attributeTypeSingle_Image_Upload input{
	grid-column:2;
	grid-row:1;
}


.attributeTypeSingle_Image_Upload .progress {
	grid-column:1/-1;
}

.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"]{
	grid-column:2;
	grid-row:1;
}

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

.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{
	padding:.5em;
	margin-bottom:1em;
	text-align:center;
	border-bottom:1px solid var(--borderColor);
}

.bskt .header span{
	display:inline-block;
	vertical-align:middle;
	margin:0 1em;
}

.bskt .header span.icon img{
	width:32px;

}

.bskt .header span.title{
	color:var(--textHeadingColor);
	font-weight:bolder;
}

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

.bskt .lines .line .prodinfo li.descr{
	font-size:1em;
	color:var(--textHeadingColor);
}
.bskt .lines .line .prodinfo li.subset,
.bskt .lines .line .prodinfo li.brnd,
.bskt .lines .line .prodinfo li.manu,
.bskt .lines .line .prodinfo li.ref,
.bskt .lines .line .prodinfo li.attr,
.bskt .lines .line .prodinfo li.uom{
	font-size:.875em;
	margin-left:1em;
}

.bskt .lines .line .prodinfo li.model{
	display:none;
}

/* remove item */
.bskt .lines .line .rem{
	grid-column:5;
	grid-row:1;
	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;
}

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

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

.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;
	/* align-self:center; */
	color:var(--textHeadingColor)
}

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

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

.shipping .header{
    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 {
width:200px;
margin-left:auto;
}

.shipping .address form{
	display:grid;
	grid-template-columns:2em 1fr;
	align-items:center;
}

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

.shipping p{
    text-align:right;
}

.shipping .store {
width:200px;
margin-left:auto;
}

.shipping .store form{
	display:grid;
	grid-template-columns:2em 1fr;
	align-items:center;
}

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

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

.shipping .deliveryto form span{
}
/* if there ARE delivery choices */
.shipping form select{
	margin:1em;
	margin-right:0;
}

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

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

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

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

.bskttotals label{
	display:inline-block;
}

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

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

#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{
	margin-bottom:1em;
	display:inline-block;
}
.bsktbuttons .sp_button a.btn{
	margin-left:1em;
	padding:.5em 2em;
	background-color:var(--checkoutButtons);

	border:1px solid var(--checkoutButtons);
}

.bsktbuttons .pp_button{}
.bsktbuttons .pp_button a.btn{
	background:none;
	border:1px transparent solid;
	padding:0;
}

/*font awesome icons */
#pm .sp_button a.btn.sagepay:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: bolder;
	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: bolder;
	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: bolder;
	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(--borderColor);
	color:var(--textColor);
	background-color:transparent;
}

.page_basket .btn.cont a.btn:hover {
	color:#ffffff;
	background-color:var(--bgColor);;
}
.page_basket .btn.clear a.btn {
	display:inline-block;
	margin:.5em 0;
}

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

/* -------------------------------------------------------------------------------------
=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 span{
	display:block;
	margin-left:1em;
}

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

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

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

.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:bolder;
	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:1px var(--borderColor) solid;
	margin-bottom:.5em;
}

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

#pm .accordbdcb ul li.header {
	font-weight:bolder;
	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) 1px solid;
	color:var(--textColor);
}

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

#pm .accordbdcb ul li.title {
	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);
}

#pm .accordbdcb span{
	display: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:bolder;
	font-size:2em;
}

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

/* Basket Line items
------------------------------------------------------- */
.confirmation .conf .order{}
.confirmation .conf .order .line{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 80px 1fr 5ch 8ch;
	grid-template-areas: "image descr qty price";
	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{
	grid-area:image
	
}

/* Product title*/
.confirmation .conf .order .line .descr{
	font-size:.875em;
	font-weight:bolder;
	grid-area:descr
}
.confirmation .conf .order .line .qty {
	text-align:right;
	font-weight:bolder;
	grid-area:qty;
}

.confirmation .conf .order .line .price {
	text-align:right;
	font-weight:bolder;
	grid-area:price;
}

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

.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:bolder;
	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;
	text-decoration-color: var(--mainColor);
}

#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;
}
:root{
	--font-awesome:	"Font Awesome 6 Pro";  
	--heading-font: 'Playfair Display';
	--white:#fff;
	--text-font:'Lato';
	--spacing:1em;
	--site-max-width:100%;
	--checkout-process-width:500px;
}

#pm .form form ul li.signin{
	margin-bottom:.5em;
}

#pm .form form ul li.req{
	margin:.5em 0;
	color:#d17f85 ;
}
label[for^="source"]{
	display:none !important;;
}

.terms h5{
	margin-top:1em;
	font-size:16px !important;
	display:inline-block;
	margin-right:1em;
}

.terms h5 input {
	display:inline-block;
	margin:.5em !important;

}

.chkflow #ptf{
	display:none;
}

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

bskt form {
	margin: 0 auto;
	padding: 0;
}

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

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

/* Basket header
------------------------------------------------------- */
#pm .bskt .header {
	margin:1em;
	text-align:center;
	grid-area: header;
	display:none;
}

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

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

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

/* Basket Lines
------------------------------------------------------- */
#pm .bskt .alllines {
	grid-area: lines;
	/* max-height: 650px; */
	/* padding: 1rem; */
	overflow-y: auto;
	border:1px solid var(--borderColor);
	/* border-top: 8px #d17f85 solid; */
	background-color:#fff;
}

#pm .bskt .line {
	padding-bottom: 1em;
	/* margin-bottom: 1em; */
	align-items: start;
	display: grid;
	--image-width: 4rem;
	--description-width: 1fr;
	--qty-width: auto;
	--netprice-width: auto;
	--rem-width: auto;
	--total-width: 100px;
	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width)  var(--total-width) var(--rem-width);
	grid-template-areas:
		"icon desc qty price rem"
		"icon desc qty netprice rem"
		"icon desc . . . "

		"icon skuselect . . . ";
	border-bottom:1px solid #d5d6d6;
	grid-gap:0;
	grid-column-gap: 1rem;
}

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

#pm .bskt .line .prodimg img {
	margin: 0;
	max-width:100%;
	height:auto;
}

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

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

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

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

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

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

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

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

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

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



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

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

#pm .bskt .lines .line .qty button {
	background: var(--white);
	border: 1px solid var(--borderColor);
	font-size:16px;
	padding: .5em;
	font-family: monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right: 0;
}

#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left: 0;

}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-family: monospace;
	font-size:16px;
	margin:0;
	/* height:19px; */
}

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

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

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

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

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

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

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

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

.prodsubtotal label {}

.prodsubtotal span {}

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

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

/* Shipping 
------------------------------------------------------- */
.shipping {
	grid-area: shipping;
	text-align:center;
	background-color:var(--bgaltColor);
	padding:0 2em;
}

.shipping .header{
	display:block;
}

.shipping  select{
	width: 299px;
	margin-bottom:1em;
}

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

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

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

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

.shipping ul li.ship input[type="radio"]:checked+label {
	font-weight: 700;
}

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

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

.shipping .address {
	width:100%;
	margin-left:auto;
}

.shipping .address form{
	display:grid;
	grid-template-columns:1fr 10ch;
	grid-template-areas:"service price";
	align-items:center;
}

.shipping ul li.delivery .address h4{
	display:block;
	grid-area:service;
	text-align:left;
	margin:0;
	font-weight:600;
}

.shipping .address input{
	display:block;
	grid-area:price;
	text-align:right;
	margin:0;
	margin-left:auto;
}

.shipping ul li.delivery.deliveryto {
	display: block;
	text-align:center;
}

.shipping ul li.delivery.deliveryto form{
	padding:0 1em;
}

.shipping ul li.delivery.deliveryto  p{
    display:grid;
    grid-template-areas:
        "service price";
    text-align:left;
}

.shipping ul li.delivery.deliveryto  p span{
	grid-area:price;
	color:var(--textHeadingColor);
	text-align:right;
}

.shipping form select{
	display:block;
	margin:.5em 0;
	width:100%;
}

/* collect from store 
--------------------------- */
.shipping .store {
	width:100%;
	margin-left:auto;
	margin-top:1rem;
}

.shipping .store form{
	display:grid;
	grid-template-columns:1fr 10ch;
	grid-template-areas:"service price";
	align-items:center;

}

.shipping .store input{
	display:block;
	grid-area:price;
	text-align:right;
	margin:0;
	margin-left:auto;
}

.shipping ul li.delivery .store h4{
	display:block;
	grid-area:service;
	text-align:left;
	margin:0;
		font-weight:600;
}


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

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

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

.shipping ul li.delivery.collectstore form {
	grid-area: location;
		padding:0 1em;
	
}

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

.shipping ul li.delivery.collectstore  p{
    display:grid;
    grid-template-areas:
        "service price";
    text-align:left;
	margin-top:1em;
}

.shipping ul li.delivery.collectstore  p span{
	grid-area:price;
	color:var(--textHeadingColor);
	text-align:right;
}
.shipping ul li.delivery.collectstore .address {
	display:block;
	font-size: small;
	text-align:left;
	padding:0;
	margin:0 1em
}


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



/* Special Instructions
------------------------------------------------------- */
#bsktid .specinst{
	grid-area:specinst;
	text-align: left;
	background-color:var(--bgaltColor);
	padding:1em 2em;
}
}

#bsktid .specinst li{
	display:block;
}
#bsktid .specinst label{
	display:block;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
}

#bsktid .specinst textarea{
	width:100%;
}

#bsktid .specinst .chars{
	font-size:xx-small;
}


/* Basket Totals
------------------------------------------------------- */
.bskttotals {
	grid-area: totals;
	text-align: center;
	display: grid;
	padding:2em;
	grid-template-areas: 
		"subtotals" 
		"discount" 
		"discount2" 
		"totals" ;
	background-color:var(--bgaltColor);
	border:none;
}

.bskttotals .total {
	grid-row: total;
	text-align:center;
}

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

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

.bskttotals .total span {
	display: block;
	width:100% !important;;
	margin-bottom: var(--half-spacing);
}

.bskttotals .subtotal {
	grid-area:subtotals;
	display: grid;
	grid-template-areas:
		"label total"
}

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

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

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

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

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

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

.vouchentryaccord li.pane {
	display: none;
}

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

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

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

#pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane {
	padding: 1em;
	padding-top:0;
	display: none;
	border:1px solid var(--navy);
	border-top:0;
}

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

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

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

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

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

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

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

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

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

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

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons {
	grid-area: buttons;
	text-align: center;
	padding: var(--spacing);
		background-color:var(--bgaltColor);
	margin:0;
	margin-bottom: 1rem;
	display:grid;
	grid-template-areas:"pay"
	"continue"
	"logos"
}

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

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

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

.bsktbuttons .startcheckout a.btn {
	display: block;
	float:none;
	margin:0;
}

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

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

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

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

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

#pm .bsktbuttons .paymentIconsFA li,
#pm .bsktbuttons .paymentIconsIMG li{
	padding:.25em;
}
#pm .bsktbuttons .paymentIconsFA {
	display: inline-block;
	font-size:24px;
}
#pm .bsktbuttons .paymentIconsIMG img{
	display: inline-block;
	width:40px !important;
	height:auto !important;
}
#pm .bsktbuttons .art li a{
	color:black;
}

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

#pm .bskt .art#a128581638{
	grid-area:art;
}

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

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

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

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

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

.priordelinfo {
	grid-area: prioritydelivery;
}

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

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

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

.priordelinfo h5, .stddelinfo h5 {
	grid-area: details;
	margin: 0;
	font-family: var(--text-font);
	font-weight: 400;
	font-size: .825rem
}

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

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

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

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

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

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

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

#pt.checkouttop {
	background:#fff;
	margin-bottom:2em;
}

#pt.checkouttop .ext {
	--site-max-width:1200px;
	--breadcrumb-width:1fr;
	--logowidth:150px;
	display:grid;
	align-items:center;
	--breadcrumb-width: 1fr;
		--spacerwidth: calc((100% - var(--site-max-width)) / 2);
	grid-template-columns: var(--spacerwidth)var(--logowidth) var(--breadcrumb-width) var(--spacerwidth);
	grid-template-areas: ". logo secure .";
}

/* site logo */
#pt.checkouttop .ext .pbnr{
	grid-area:logo;
	margin:1em auto ;
}

/* secure message */
#pt.checkouttop .ext .art{
	grid-area:secure;
	text-align:right;
	align-content:center;
}

#pt.checkouttop .ext .art h3{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	margin-right:.5em;
	font-size:1.2em
}

#pt.checkouttop .ext .art i{
	display:inline-block;
	vertical-align:middle;
	font-size:1.2em;
}

.chkflow #pmid{
	padding:1em 0;
}

.chkflow .pmfull{
	width:calc(var(--site-max-width) - 2em);
	/* max-width:var(--checkout-process-width); */
	background:none;
	margin:auto;
}

.chkflow .pmfull#fs{
	display:none;
}

/* Signin/guest pane
------------------------------------------------------- */
.chkflow .signin{
	background-color:var(--bgaltColor);
	padding:1em;
	margin-bottom:2em;
	width:500px;
	margin:auto;
}

.checkoutsignin #pm .form#psign,
.checkoutsignin #pm .form#pchkoutnewcust,
.checkoutsignin #pm .form#pguest{
	width:unset;
}


/* Invoice Address
------------------------------------------------------- */
/* Address (delivery and invoice) 
------------------------------------------------------- */




.page_delivery h3, .page_checkout h3 {
	font-size: 1.5em;
	font-weight: var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	margin-bottom: 2rem;
}
#basket_customer_details,
form[name="delivery"]{
	display: grid !important;
	margin:auto!important;
	grid-template-columns: 6fr 3fr;
	grid-template-areas:
		"address summary"
		"address continue"
		"address .";
	grid-column-gap: 1rem;
}

#pm .page_delivery form input, .page_checkout form input, .page_delivery form select, .page_checkout form select {
	width: calc(100% - 2em);
	margin-right:0;
}

.page_delivery form img, .page_checkout form img{
	display:inline-block;
	vertical-align:top;
	padding-top:16px;
	margin-left:.25em;
}

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

.page_delivery form .terms h5, .page_checkout form .terms h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825rem;
	text-transform:none;
	letter-spacing:unset;
}

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



#pm #pdelivery li.chkbox{
	background-color:var(--bgaltColor);
	padding:.5em;
	/* width: 398px; */
	display:block;
}

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

/*class needed on this ul!*/
.page_delivery #pm form>ul, .page_checkout #pm form>ul {
	grid-area: address;
	/* border:1px solid var(--borderColor); */
	background-color:#fff;
	padding:1em;
	text-align:center;
}
.page_delivery #pm form>ul input.inputtext, .page_checkout #pm form>ul input.inputtext,
.page_delivery #pm form>ul input, .page_checkout #pm form>ul input,
.page_delivery #pm form>ul select, .page_checkout #pm form>ul select{
	margin:.5em 0;
	width: 400px;
	max-width:400px;
	font-size:16px;
}

.page_delivery #pm form>ul input[type="checkbox"], .page_checkout #pm form>ul input[type="checkbox"]{
	width:auto;
	vertical-align:middle;
}

.page_delivery #pm form>ul input[type="checkbox"] + label, .page_checkout #pm form>ul input[type="checkbox"] + label{
	display:inline;
	vertical-align:middle;
	margin-left:.5em;
}

.page_delivery #pm form>ul li, .page_checkout #pm form>ul li{
	margin-bottom:.5em;
	width: 414px;
	margin:auto;
	text-align:left;
}

.page_checkout .subscribe{
	padding:1em;
}

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

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

.page_delivery .form li.reqmsg, .page_checkout .form li.reqmsg {
	color: var(--error-color);
	color:red;
	font-weight:bold;
	padding-top:1em;
	/* display:inline; */
}


#pm #basket_customer_details li.deladd{
	background-color:var(--bgaltColor);
	padding:.5em;
	/* width: 387px; */
	display:block;
}
#pm #basket_customer_details li .chars{
	font-size:12px;
}
#pm #basket_customer_details li.deladd .help{
	font-size:12px;
}

#pm #basket_customer_details li.terms{
	background-color:var(--bgaltColor);
	display:block;
	padding:.5em;
	width: 387px;
}

#pm #basket_customer_details li.terms h5{
		font-family:var(--mainFont);
	text-transform:none;
	letter-spacing:unset;
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-areas:"checkbox text";
	align-content:center;
	align-items:start;
	margin:0;

	font-weight:bolder;

}

#pm #basket_customer_details li.terms h5 input{
	grid-area:checkbox;
}

.page_delivery .form li.req, .page_checkout .form li.req{
	font-size:small;
	margin:.5em 0;
}

#countryIdDel,
#countryId,
#source_7012352,
.page_delivery textarea, .page_checkout textarea{
	width:320px;
}

.form li.specialinst,
.form li.deliveryInst{
	display:block;
}

.form li.specialinst textarea,
.form li.deliveryInst textarea{
	width:400px;
	border-color:var(--borderColor);
	
}
.page_delivery .chars, .page_checkout .chars{
	font-size:small;
	text-align:right;
	display:block;
}

.page_delivery .help, .page_checkout .help{
	font-size:small;

}

.page_delivery .submit, .page_checkout .submit {
	grid-area: continue;
margin-right:1em;
}

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

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

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

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

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

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

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



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

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

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

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

.payoptsform{
	grid-area:payment;
}



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

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

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

/*payment article */
.page_payment #pm .art {
	grid-area: header;
}

.page_payment #pm .art ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_payment #pm .art li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon text";
	grid-gap: var(--spacing);
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
}

.page_payment #pm .art li:last-child {
	margin-bottom: 0;
}

.page_payment #pm .art li i {
	grid-area: icon;
	color: var(--navy)
}

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

.payoptentry, #psagepay {
	grid-area: details;
}

.page_payment #pm form.payoptsform .submitcontainer {
	/* grid-area: pay; */
	/* text-align: center; */
	/* position: absolute; */
	/* bottom: 0; */
	/* right: 0; */
	/* width: calc(50% - 2rem); */
}

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

.confirmorder {
	grid-area: details;
}



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

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

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

.payopts{
	display:grid;
	grid-template-columns:1fr;
	grid-gap:1em;
	/* grid-template-rows:50px; */
}

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

.payopts .pt_invoice {
	display:none;
}

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

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

.payopts .paypal.btn:hover{
	border:0;
}
 
/* dna payments */
.pt_debitcreditcard {
}

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

.pt_debitcreditcard a:hover{
	border:none;
}

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

/* dna payments */
.pt_acctdmnd {
}

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

.pt_acctdmnd a:hover{
	border:none;
}

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

/* pay on collection */
.pt_paycollect  {
}

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

.pt_paycollect  a:hover{
	border:none;
}

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

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


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

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

.pp_button img {
	grid-area:paypal;
}


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

.dnapayments.payoptentry label{
	display:none;
}

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

	grid-row: 2;
}
}

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

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

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

#threedsecurecontainer{
	min-width: 515px;
}

/* Basket Summary
------------------------------------------------------- */
.bsktsum {
	grid-area: summary;
	align-self: start;
	background-color:var(--bgaltColor);
}

.bsktsum h4 {
	display: none;
}

.bsktsum .lines {
	overflow-y: scroll;
	max-height: 200px;
	background-color:#fff;
	padding: 1rem;
	padding-left: .5rem;
	display:none;
}

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

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

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

/* Product Info - in list form */
.bsktsum .lines .prodinfo {
	grid-area: desc;
	list-style: none;
}

#pm .bsktsum .lines li {
	font-size: .725rem;
	margin-left: .5rem;
	display:none;
}

#pm .bsktsum .lines li.descr {
	font-size: .825rem;
	font-family: var(--heading-font);
	font-weight:500;
	margin-left: 0;
	display:inline-block;
}

#pm .bsktsum .lines li.lead{
	display:inline-block;
}

.bsktsum .lines li.flags {}

.bsktsum .lines li.flags img {
	margin: 0;
	max-width: 100%;
}

.bsktsum .lines .qty {
	grid-area: qty;
	font-size:.825em;
}

.bsktsum .lines .qty:before{
	content:"x"
}

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

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

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

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

.bsktsum .totals .subtotal {
	display: grid;
	grid-template-areas:"label value";
	margin:0 2rem;
}

.bsktsum .subtotal span{
	font-weight:600;
	display:inline-block;
	width:unset;
}

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

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

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

.ordertotal{}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn input,
.page_checkout .contbtn input {
	width:100%;
}

form[name="back"]{
	display:none;
}