/* ------------------------------------------------------------------------------------
	SCREEN - Lighting Supermarket 2021 
	Filename : sitepanes.css
	Last Updated : 26. 10. 2021
	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: #690c67;
	--altColor: #7c9841;
	--altColor2: #767676;
	--altColor3:#513f39;

	--textColor: #767676;
	--textColorLight: #959595;
	--textAltColor: #690c67;

	--textHeadingColor: #212121;
	--textSubHeadingColor: #767676;
	
	--bgColor: #ffffff;
	--bgaltColor: #f0f0f0;
	--bgaltColor2: #767676;
	--footerColor: #3d3d3d ;
	--borderColor: #d2d2d2;
	--checkoutButtons: #690c67;

	--buttonColor: #690c67;
	--altButtonColor:#959595;
	--mainFont: "open-sans", sans-serif;
	--headingFont: 'Arapey', serif;
	--altFont: "open-sans", sans-serif;
	--altFont2: "open-sans", sans-serif;

	--errorColor:#d94927;
}


@import url('https://web.archive.org/web/20250514014308cs_/https://fonts.googleapis.com/css2?family=Arapey&display=swap');
	
/* =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)
}

#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{
	width:50%;
	margin:auto;
}

/* as labels aren't being used - placeholders are */
.form#psign select,
.form#psign textarea,
.form#psign 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{
	font-weight:400;
	color:var(--textHeadingColor);
}

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

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

/* as labels aren't being used - placeholders are */
.form#preg select,
.form#preg textarea,
.form#preg input {
	/* 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:var(--textHeadingColor);
}
#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:var(--textHeadingColor);
}

#jnav li.nav:hover,
#jnav li.navcurr:hover {
	background-color:#fff;
	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;
    /* left:0; */
    z-index:1000001;
    background-color:#fff;
    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;
}

#jnav ul.snav li{
	padding:.5em;
}

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

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

.crumb {
	display:block;
	padding:.5em 0;
	text-align:center;
}

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

.home .crumb {
	display:none;
}

/*for the break between the crumb*/
.crumb li:after {
	font-family:"Font Awesome 5 Pro";
	content:"\f054";
	display:inline-block;
	vertical-align:middle;
	font-size:.875em;
	color:var(--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-family:var(--headingFont);
}

.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:71% !important;
	margin:auto;
	padding:0;
	z-index:999999 !important;
	border-radius:0;
	max-height:332px;
	overflow-x:hidden;
	overflow-y:scroll;
	border:1px solid #13816d;
	z-index:2000;
	background:var(--bgaltColor);
}

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

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

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

.ui-autocomplete li:hover {}

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

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

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

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

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

.foundProductRef {
	display:none;
}

.foundProductDesc {
	display:none;
}

.foundProductDesc {}

.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */

#ewis h3 {
	font-weight:bolder;
}

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

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

a.lnk.ewisopen,
a.lnk.ewis {
	display:inline-block;
	height:auto;
    background-color:var(--altButtonColor);
    padding:.5em;
    color:white;
	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;
}

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

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


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

.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(--altColor);
border:1px var(--altColor) solid;
}

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

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

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

.hoverbsktadd h3,
#popupdialog h3 {
	font-size:1em;
	margin-bottom:1em;
}
.hoverbsktadd a,
#popupdialog a {}
.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-column:1/-1;
	grid-row:2;
	text-align:center;
}

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

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

/* this element needs a class */
.hoverbsktadd a[title="Checkout"] {
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	display:inline-block;
	vertical-align:middle;
	background-color:var(--altColor)
}

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

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

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

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


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

.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog{
	width:500px !important;
	background-color:#fff;
	text-align:center;
}	

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

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

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

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

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

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

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

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

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button{
	outline:none;
	border-radius:0;
	border:none;
	margin:.5em;
}

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

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

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

.ddmessage{}

.ddmessage span.dddatemessage{}

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


/* -------------------------------------------------------------------------------------
=SiteContainer
------------------------------------------------------------------------------------- */
#site {
	width:100%;
	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;
}

#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;
	color:var(--textHeadingColor);
}

#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;
	color:var(--textHeadingColor);
}

#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;
	color:var(--textHeadingColor);
}


/* -------------------------------------------------------------------------------------
=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 2fr 250px;
}

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

/* Site Logo
------------------------------------------------------- */
#pt .pbnr{
	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:.5em;
	height:auto;
}

/* phone number article
------------------------------------------------------- */
#pt .art {
	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';
}


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

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

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

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

#pt #searchbox:focus{}

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

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

/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-column: 4;
	grid-row:1;
	align-self: center;
	padding: 1em .5em;
	background-color:var(--bgaltColor);
}

#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-gap:.5em;
	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-gap:.5em;
	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;
}

#pc .bc {
	margin: 0 auto;
	position: relative;
	text-align:center;
}
/* Dept Tree
------------------------------------------------------- */
#pc .dept{
	/* grid-column:1/-1; */
	margin:auto;
	display:block;
	color:var(--textHeadingColor);
	position: relative;
	border-top:1px solid var(--borderColor);
	border-bottom:1px solid var(--borderColor);
    background: linear-gradient(to bottom,  #fff 0%,#e5e5e5 100%); /* W3C */
}

/* top cta's */
#pc .art#a117800960{
	background-color:var(--bgaltColor);
	padding:1em 0;
	font-size:.725em;
}

#pc .art#a117800960 .artp{
	width:1280px;
	margin:auto;
}

#pc .art#a117800960 ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	align-items:center;
	text-align:center;
}

#pc .art#a117800960 li p,
#pc .art#a117800960 li h3{
	text-align:left;
	padding:0;
}

#pc .art#a117800960 li h3{
    color:var(--textHeadingColor);
}

/*font awesome icons */
#pc .art#a117800960 li:before,
#pc .art#a117800960 li div:before {
	font-family: "Font Awesome 5 pro";
	font-weight: bolder;
	display:inline-block;
	vertical-align:middle;
	margin-right: .5em;
	font-size: 1em;
}

#pc .art#a117800960 li div{
	display:inline-block;
	vertical-align:middle;
}

#pc .art#a117800960 li.delivery:before{
	content: '\f0d1';
}
#pc .art#a117800960 li.guarantee:before{
	content: '\f336';
}

#pc .art#a117800960 li.reviews:before{
	content: '\f005';
}

#pc .art#a117800960 li.secure:before{
	content: '\f30d';
}

/* used for home page top slider*/
#pc .arts{
	width:1280px;
	margin:auto;
}


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

#pmid {
		width:1280px;
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/*used to ensure left panel displays correctly, unsure why though... */
	display:flex;
	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;
	/* padding:1em; */
	margin-bottom: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(--footerColor);
	padding-top:2em;
}

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

#pb .pipe {
	display: none;
}

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

#pb .info h3,
#pb .art h2,
#pb .pbnr h3 {
	font-size: 1.25em;
	color:#fff;
	margin-bottom: 1em;
	padding:0;
}

#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{
	grid-column:4;
	grid-row:2;
	text-align:right;
}
#pb .pbnr .bnr{
	display:inline-block;
	vertical-align:middle;
    padding:.5em;
}
#pb .pbnr img{
    max-height:80px;
    width:auto;
}

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

/* Social Icons
------------------------------------------------------- */
#a117571584 .social li{
	display:inline-block;
	font-size:1.5em;
	padding-right:1em;
}

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

}
#a117571584 .contact li a i{
	text-align:left;
	font-size:1.5em;
	margin-right:auto;
}

#a117571584 .imgcont{
	display:inline-block;
	padding:0 .5em;
}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */
#pbf{
	width: 100%;
	min-width: 1280px;
	background-color:#fff;
	color:var(--textColorLight);
}

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



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

#pbf .cookie p {
    margin: 0 auto;
    float: none;
    color: #fff;
    padding: .5em 0
}

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

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

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

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display: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 {}

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

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

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

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

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

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

.HeaderContent {
	font-size: 1em;
	padding: .5em;
	font-family: var(--mainFont);
    border-bottom:2px var(--mainColor) 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;
}

#sldiv {
	margin: 1em;
}

#resetfs {
	display:none;
}

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



.citem:empty {
	display: none;
}
.citem:hover {}

.citemselected:hover {}

div[sectiontype="priceslider"]{
    display:none;
}

#divPriceRangeDisplay {}

#sldiv {
	margin: 1em;
}

#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 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:3em;
	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-top:2px var(--mainColor) solid;
	padding-top:2px;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:.5em;
	position:relative;
	padding-bottom:.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(--mainColor);
	align-self:start;
	align-items:center;
}
.fprd .strap {
    color:var(--textHeadingColor);
	display:none;
}

.fprd .strap a{
	display:block;
}

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

.fprd .rrp h6{}

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

.fprd .price label{
	display:none;
}
.fprd .price h6 {
	text-decoration-color:var(--altColor);
	color:var(--altColor);
	font-family:var(--mainFont);
	font-size:1.2em;
	font-weight:bolder;
}

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

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

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

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



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

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

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

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

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

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

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

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

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

}


#site.blog #pm .bc {

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

#site.blog #pm h2 {
	grid-column:1/-1;
}


#site.blog #pm .blog {
display:grid;
	grid-template-columns:1fr;
	grid-gap:.5em;
	grid-template-areas:"image"
	"date"
	"title"
	"content"
	"link"
}
#site.blog #pm .blog a.title {
	grid-area:title;
	color:var(--gemBlue);
	font-family:var(--headingFont);
	font-weight:600;
}
#site.blog #pm .blog p.date {
	grid-area:date;
	color:var(--gemGray)
}
#site.blog #pm .blog img {
	grid-area:image;
	width:auto!important;
	height:auto!important;

}
#site.blog #pm .blog .artp {
	grid-area:content;
}

#site.blog #pm .art{
	grid-column:1/-1;
}

#site.blog #pm .blog a.more {
	margin-right:auto;
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em .5em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--buttonColor);
	border:1px var(--buttonColor) solid;
	color:white;
	text-transform:capitalize;
}
#site.blog #pm .blogBtns, 
#site.blog #pm .blogPageBtns {
	grid-column:1/-1;
	display:grid;
	grid-template-columns:1fr 1fr;
}
#site.blog #pm .blogBtns a, 
#site.blog #pm .blogPageBtns a {
	font-family:var(--buttonFont);
	font-size:1em;
	padding: 0.5em .5em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	background-color: var(--buttonColor);
	border:1px var(--buttonColor) solid;
	color:white;
	text-transform:capitalize;
}
#site.blog #pm .blogBtns a.prev, 
#site.blog #pm .blogPageBtns a.prev {
	text-align:left;
	margin-right:auto
}
#site.blog #pm .blogBtns a.next, 
#site.blog #pm .blogPageBtns a.next {
	grid-column:2;
	text-align:right;
	margin-left:auto
}
#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
------------------------------------------------------------------------------------- */

/* Grid Content Layout
------------------------------------------------------- */


/*set each container*/
#site.grid #pm .pmind {
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:1em;
}
/*multiple banners appear inside a .bc  and should be borderless*/

#site.grid #pm .pmind .pbnr{
	grid-column:1/-1;
}
#site.grid #pm .pmind .pbnr .bc{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-row-gap:0;
	grid-gap:1em;
}

#site.grid #pm .fullWidth,
#site.grid #pm .deptHeader,
#site.grid #pm .deptFooter,
#site.grid #pm .art,
#site.grid #pm .form{
	grid-column:1/-1;
}

#site.grid #pm .halfWidth{
	grid-column:auto / span 3;
	width:unset;
	padding:0;
}


#site.grid #pm .thirdWidth{
	grid-column:auto / span 2;
}

#site.grid #pm .twoThirdWidth{
	grid-column:auto / span 4;
}

#site.grid #pm .fullWidth .bnr a,
#site.grid #pm .halfWidth .bnr a,
#site.grid #pm .halfWidth .bnr a{
	display:block;
}

#site.grid #pm .fullWidth img,
#site.grid #pm .halfWidth img,
#site.grid #pm .thirdWidth img,
#site.grid #pm .twoThirdWidth img{
	display:block;
	width:100%;
	height:auto;
}

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

#site.grid #pm .imageText .imgcont{
	grid-column:1;
}
#site.grid #pm .imageText .artp{
	grid-column:2;
}

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

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

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


#site.grid .prdlst,
#site.grid .carousel.prod{
	grid-column:1/-1;
}


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


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

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

#site.home #pm .pmind{

}

/* hp slider - hide nav*/
#site.home #pm .pmind .art .owl-controls{
    display:none;
}

/* product carousels slider */
#site.home #pm .pmind .carousel.prod{

}


/*banners */

#site.home #pm .pmind .pbnr .bc{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-gap:1em;
}

#site.home #pm .pmind .pbnr .bc img{
	width:100%;
}

#site.home #pm .pmind .pbnr .bc{
	display:grid;
	/*using this grid layout to allow for full, 1/2, 1/3, 1/4 widths and multiples thereof */
	grid-template-columns:repeat(12, 1fr);
	grid-gap:1em;
}
.fullWidth{
	grid-column:1 / -1;
	position:relative;
}


.fullWidth .toi{
	position:absolute;
	top:0;
	width: calc(60% - 2em);
	margin-left: 2em;
	margin-top:3em;
}


.fullWidth .toi a.txt{
	display:block;
	color:var(--altColor3);
	font-family:var(--headingFont);
	font-size:5em;
	margin-bottom:.25em;

}

.fullWidth .toi p{
	color:var(--altColor3);
	max-width:75%
}

.halfWidth{
	grid-column:span 6;
	position:relative;
}

.halfWidth .toi{
	position:absolute;
	top:0;
	width: calc(60% - 2em);
	margin-left: 2em;
	margin-top:3em;
}


.halfWidth .toi a.txt{
	display:block;
	color:var(--altColor3);
	font-family:var(--headingFont);
	font-size: 3em;
	margin-bottom:.25em;
}

.halfWidth .toi p{
	color:var(--altColor3);
}

.thirdWidth{
	grid-column:span 4;
}

.twoThirdWidth{
	grid-column:span 8;
}


.quarterWidth{
    grid-column:span 3;
}


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

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

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

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


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

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

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

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

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

.depttree li{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 1fr;
	/* border: 1px solid var(--borderColor); */
	border-top:2px var(--mainColor) solid;
	padding-top:.25em;
	align-items:center;
	background-color:#ffffff;
}

.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 a.txt{
	/* display:inline-block; */
	/* z-index:100; */
	/* width: 100%; */
}
.depttree li:hover a{
	color:var(--altColor);
	text-decoration:underline;
}

.depttree a.txt{
	text-align: center;
	color:var(--textHeadingColor);
	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%;
	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(/web/20250514014308im_/https://www.lightingsupermarket.com/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;
}

.pititle h4.strap{
    display:none;
}

#pi .pititle h2{
	color:var(--mainColor);
}

/* 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:inline-block;
	vertical-align:top;
	margin-right:1em;
	width:64px;
}
}

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

#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{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	color:var(--textColor);
}

#pi .brandmanu h6{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	font-size:.825em;
	margin-left:.5em;
	color:var(--textColor);
}

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

/* 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{}
#pi .pibuy .bt{}
#pi .pibuy .bc{
    display:grid;
	grid-gap:1em;
    grid-template-columns:auto 1fr;
    align-items:center;

}
#pi .pibuy .bb{}

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

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{/* display:none; */}

/*normal price */
#pi .pibuy .bc .price {
	grid-column:2;
	grid-row:2
}
#pi .pibuy .bc .price h6{
    font-size:1.8em;
    color:var(--altColor);
    font-weight:bolder;
} 
#pi .pibuy .bc .price label{
    display:none;
}
#pi .pibuy .bc .price span{} 

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

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

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

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

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

/* Messages */
#pi .pibuy p{}
#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;
}

.attrqty{
	grid-column:1/-1;
	display:grid;
	grid-gap:1em;
	grid-template-columns:auto 1fr;
	align-items:center;
	/* margin-top:1em; */
}

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

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


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

.attrqty .submit#buy{
	/* grid-column:2; */
	/* grid-row:1; */
	margin-right:auto;
}

/*sample request hack */
#pi .pibuy .submit#smplreq{
    border:none;
    background-color:transparent;
    grid-column:1/-1;
    padding:0;
}

/* 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 OLD in tables
------------------------------------------------------------------------------------- */

#pm .bskt{}

/* Payment Options
------------------------------------------------------- */
/* payment options - shows above the basket which no one likes!!! */
.basket-header-table{
	width:100%;
	display:none;
}

.page_basket .bskt table.basket{
	width:100%;
	border-collapse:collapse;
	margin-bottom:1em;
}

.page_basket .bskt table.basket .header{
	background-color:var(--bgaltColor2);
	color:#fff;
}

.page_basket .bskt table.basket td{}
.page_basket #basket_row_processing{}

.page_basket table.basket tr.line td form table td .inputtext{
	position:relative;
}

tr.line:nth-child(odd){}

/* Basket Table Header
------------------------------------------------------- */
.page_basket table.basket tr.header th{
	text-align:center;
}

.page_basket .bskt table.basket tr.header th:nth-child(2){
	text-align:left;
}

.page_basket .bskt table.basket tr.header th:nth-child(4){
	text-align:center;
}

.page_basket .bskt h3 a:hover,
.page_basket .bskt h3 a:focus{
	text-decoration:underline;
	text-decoration-color: var(--mainColor);
}

/* Basket Line Items
------------------------------------------------------- */
.page_basket table.basket tr.line td form{
	text-align:center;
}

#pm table.basket tr.line input.inputtext{
	vertical-align:middle;
	margin: 0.25em 4em;
	font-size:1em;
	text-align:center;
}

#pm table.basket tr.line input.submit{
	vertical-align:middle;
	cursor:pointer;
	border-radius:0;
}

.page_basket table.basket tr.line input.submit#update{
	background:none;
	border:none;
	border-radius:0;
	padding:0;
	margin:0.5em;
	width:1.5em;
}

.page_basket table.basket tr.line input.submit#update:hover{}
.page_basket table.basket tr.line input.submit#remove,
.page_basket table.basket tr.line input.submit#removesample{
	background:none;
	border:none;
	padding:0;
	margin:0.5em;
	width:1.5em;
}

.page_basket table.basket tr.line input.submit#remove:hover{}

.page_basket table.basket tr.line{
	border-bottom:1px solid var(--borderColor);
}

.page_basket table.basket tr.line ul.prodinfo li{
	padding-left:1em;
}

.page_basket table.basket tr.line ul.prodinfo{
    position:relative;
}

.page_basket table.basket tr.line ul.prodinfo li.descr{
	color:var(--textHeadingColor);
	font-size:1.2em;
	padding-left:0;
	padding-right:220px;
}

.page_basket table.basket tr.line ul.prodinfo li.disc{
	font-weight:bolder;
}

.page_basket table.basket tr.line ul.prodinfo li.flags{
	position:absolute;
	top:0;
	right:0;
}

.page_basket table.basket tr.line ul.prodinfo li.flags img{
    max-width:200px;
}


/*******************************
NOTE - AS THINGS HAVEN'T BEEN DONE AS REQUESTED THE ORDER OF THESE IS DICTATED BY THE OPTIONS IN COMS
THERE SHOULD BE A CLASS FOR EACH DATA TYPE IN THE CELL FOR BETTER STYLING
********************************/
/*product image */
.page_basket table.basket tr.line td:nth-child(1){}

/*product title/details */
.page_basket table.basket tr.line td:nth-child(2){}

/*product price */
.page_basket table.basket tr.line td:nth-child(4),
.page_basket table.basket tr.header th.unitprice{
	text-align:right;
}

/*total price */
.page_basket table.basket tr.line td:nth-child(5),
.page_basket table.basket tr.header th.totalprice{
	text-align:right;
}

.page_basket table.basket tr.line a.img{
	width:84px;
	display:block;
	height:auto;
}

.page_basket table.basket tr.line td{
	vertical-align:middle;
}

.basket-header-table td{}
.basket-header-table td:first-child h2{}

.basket-header-table td:last-child{
	text-align:right;
	float:right;
}

.basket-header-table td:last-child .sp_button{
	float:right;
}

.basket-header-table td .pp_button,
.basket-header-table td span{}

.page_basket table.basket .delivery td,
.page_basket table.basket .discount td{
	padding-left:1em;
	font-size:.9em;
}

.page_basket table.basket .delivery .shipcurr td{
	font-size:1em;
	font-weight:bolder;
}

.page_basket table.basket .delivery td.title form{
	display:inline-block;
	margin-right:1em;
}

.page_basket table.basket .delivery h4{
	margin-bottom:0;
	font-size:1em;
	display:inline-block;
	font-weight:bolder;
}

.page_basket table.basket .delivery select{
	margin-right:1em;
}

.page_basket table.basket .shipcost{
	border:none;
}

.page_baskettable.basket .shipcost td{
	padding:0;
	text-align:right;
}

.actvshipcost{
	display:block;
	text-align:right;
}

.page_basket table.basket .shipcost .ship .delivery-cost{}

.page_basket table.basket .prodtotal{
	border-bottom:1px solid var(--borderColor);
	font-style:italic;
}

.page_basket table.basket .vat.total td{
	/* font-size:0.813em; */
	font-weight:400;
}

.page_basket table.basket .vat.excl td{
	text-align:right;

}

.page_basket table.basket .vat td:first-child{
	text-align:right;
}

.page_basket table.basket .leadtime{
	font-style:italic;
}

.page_basket table.basket .discount.order td:nth-child(2){
	text-align:right;
}
.page_basket table.basket .discount.order td:nth-child(2):before{
	content:"-";
}

.page_basket table.basket tr.total td{
	text-align:right;
	border-top:1px solid var(--borderColor);
	border-bottom:1px solid var(--borderColor);
}

.page_basket table.basket tr.total td #ordertotal{
	font-weight:bolder;
	font-size:1.2em;
}

.page_basket table.voucher{
	width: 600px;
	min-width: 600px;
	background:var(--bgaltColor);
	margin-top:1em;
	border:none;
}

.page_basket table.voucher tr.header th{
	border:none;
	text-transform:none;
	font-size:1em;
	display:none;
}

.page_basket table.voucher input.submit{
	margin-left:1em;
}

.page_basket table.voucher input.inputtext{}
.page_baskettable.voucher .inputtext{}
.page_basket.basket ul{}

.page_basket .basket ul li{
	clear:left;
}

.page_basket .basket ul li.model{
	font-size:.8em;
}

.page_basket .basket ul li.ref{
	font-size:.8em;
}

.page_basket .basket ul li.lead{
	font-style:italic;
	font-weight:bolder;
}


/* Payment Options
------------------------------------------------------- */
/* payment options - shows above the basket which no one likes!!! */
.basket-header-table{}

.page_basket .bskt .basketlinks{}

.page_basket .ct_button a.btn.cont{
	margin-right:1em;
	padding:.5em 2em;
	background-color: var(--bgaltColor);
	border:1px solid var(--borderColor);
    color:var(--textColor);
}

.page_basket .ct_button a.btn.empty{} 

.page_basket .sp_button a.btn{
	margin-left:1em;
	padding:.5em 2em;
}


/* -------------------------------------------------------------------------------------
=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;
	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{
	font-size:.875em;
	margin-left:1em;
	/* display:none; */
}

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

.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 input,
.shipping .address h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
	margin:.25em;
}

.shipping p{
    text-align:right;
}

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

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

.shipping .deliveryto form span{
}
/* 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;
}
.bsktbuttons .sp_button a.btn{
}

.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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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://web.archive.org/web/20250514014308im_/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: 1fr 6fr 1fr;
	padding:1em;
	align-self:center;
	align-items:start;
}

.confirmation .conf .order .line:nth-child(odd){
	background-color:var(--bgaltColor);
}

/* Image */
.page_confirmation .conf .order .line a.img{}

/* Product title*/
.confirmation .conf .order .line .descr{
	align-self:start;
	font-size:.875em;
	font-weight:bolder;
}

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

/* Basket Subtotal
------------------------------------------------------- */
.confirmation .conf .order .subtotal{
	padding:1em;
	border-top:1px var(--bgColor) solid;
	text-align:right;
}

.confirmation .conf .order .subtotal label{
	margin-right: 1em;
}

.confirmation .conf .order .subtotal span{
	font-size:1.2em;
	font-weight: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;
}

/*client additions */

#pc .dept {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
}
#jnav li.nav > a, #jnav li.navcurr > a, #jnav li.nav > h3, #jnav li.navcurr > h3 {
    padding: 1em 1em;
    text-transform: capitalize;
}

#pc .art#a117800960 {
    background-color: #690c67;
}

#pc .art#a117800960 li h3 {
    color: #ffffff;
}

#pc .art#a117800960 li.delivery:before {
    color: #fff;
    font-size: 2em;
}

#pc .art#a117800960 li p, #pc .art#a117800960 li h3 {
    color: #fff;
}

#pc .art#a117800960 li.guarantee:before {
    color: #fff;
    font-size: 2em;
}

#pc .art#a117800960 li.reviews:before {
    color: #fff;
    font-size: 2em;
}

#pc .art#a117800960 li.secure:before {
    color: #fff;
    font-size: 2em;
}

#pt .bskt {
    background-color: #fff;
}

#pt .bskt a.btn img {
    width: 1.5em;
}

#pt .bskt #bsktitems span {
    margin-right: -30px;
}

#pt .bskt #bsktvalue {
    color: #000;
}

#pt .bskt #bsktitems {
    color: #000;
}

#pt .ext {
    grid-template-columns: 269px 3fr 1fr 0px;
}

#pt .pbnr {
    grid-column: 1;
}

#pt .search {
    grid-column: 2;
    grid-row: 1;
text-align: center;
}

#pt .bskt {
    grid-column: 3;
    grid-row: 1;
}

#pt .art {
    grid-column: none;
    grid-row: none;
    display: none;
}

#pc #jnav li {
    text-transform: capitalize;
}

#pt #searchbox {
    border: 1px solid #690c67;
    color: #000000;
}

input.inputtext, input.inputtext_light {
    padding: 0.6em;
}

.submit, a.btn {
    padding: 0.6em;
}

button, input, optgroup, select, textarea {
    line-height: 1.45;
}

#pf .news {
    padding: 70px 0px;
    background-color: #f7f7f7;
    margin-bottom: -1em;
}

#pf .news label {
    color: #690c67;
    font-weight: 400;
    font-size: 1.5em;
}

.submit, a.btn {
    background-color: #690c67;
    border: 1px #690c67 solid;
}

#pb {
    background-color: #ffffff;
}

#pb .info h3, #pb .art h2, #pb .pbnr h3 {
    color: #690c67;
}

#pb ul {
    color: #000000;
}

#pb .art h3 {
    color: #000000;
}

#pb p, #pb li {
    color: #000;
}

#pb {
    padding-bottom: 2em;
}

.fprd .price h6 {
    text-decoration-color: #000000;
    color: #000000;
    font-weight: 400;
}

.fprd button {
    padding: 0.6em 0.75em;
}

.fprd .bc {
    border-top: 0px var(--mainColor) solid;
}

.fprd .bc {
    padding-bottom: 4em;
}

#site.home #pm .pmind .carousel.prod {
    padding: 2em 0em 4em 0em;
}

.depttree li {
    border-top: 0px var(--mainColor) solid;
}

.bdcb {
    width: 100%;
    background-color: #f7f7f7;
}

.depttree h4.tagline {
    color: #000;
    font-size: 1.1em;
    line-height: 1.5em;
    text-align: center;
}

#pi .brandmanu h6 {
    color: #000000;
    font-weight: 600;
}

#pmid.page_buy {
    padding: 2em 0em;
}

#pi .brandmanu h5 {
    color: #000000;
    font-weight: 600;
}

#pi .pidesc p, #pi .delivery p {
    color: #000;
}

.in {
    color: #439958;
    font-size: 16px;
    font-weight: 600;
}

#pi .pibuy .bc .prevprice h6 {
    text-decoration-color: #ab2d10;
    font-size: 24px;
    color: #000;
}

#pi .pibuy .bc .offer h6 {
    font-size: 24px;
    color: #000;
}

#pi .pibuy .bc .prevprice {
    margin-bottom: 1em;
}

#pi .pibuy .bc .offer {
    margin-bottom: 1em;
}

#pi .pidescx {
    color: #000;
}

#pi .pidescx h1, #pi .pidescx h2, #pi .pidescx h3, #pi .pidescx h4, #pi .pidescx h5 {
    background-color: #f7f7f7;
    padding: 10px;
    font-weight: 600;
}

#pi .pidescx p {
    padding: 10px;
    line-height: 1.7;
}

#pi .prec, #pi .pass, #pi .prel, #pi .pran {
    padding: 3em 0em;
}

#pi .prec h3, #pi .pass h3, #pi .prel h3, #pi .pran h3 {
    text-align: center;
    color: var(--textHeadingColor);
    font-family: var(--headingFont);
    font-size: 2em;
}

element.style {
    padding: 20px;
    background-color: #f7f7f7;
    color: #000;
    text-align: center;
}

.searchheader h5#rescou {
    color: #690c67;
}

.searchheader .paging span, .searchheader .paging a, .searchfooter .paging span, .searchfooter .paging a {
    border: 1px solid #f7f7f7;
    padding: 0.5em 1em;
    color: #000;
}

.citem {
    color: #000000;
}

.form .bt h3 {
    color: #000;
}

.form label {
    font-weight: 400;
    color: #690c67;
}

.form li.help, .form li.info {
    color: #000;
    margin-bottom: 2em;
}

.form#preg {
    padding: 2em 0em 3em 0em;
}

.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 {
    margin-left: 0em;
    padding-top: 0.7em;
    color: #000;
}

.bskt .lines .line .prodinfo li.descr {
    font-size: 1em;
    color: #690c67;
}

.bskt .header span {
    font-size: 1.4em;
}

.bskt .lines .line .qty button {
    padding: 0.6em 1em;
}

.bskt .lines .line .price {
    font-size: 1.3em;
}

.bskt .lines .line {
    align-items: center;
}

.shipping p {
    color: #000;
}

.bskttotals label {
    line-height: 1.6em;
}

#pm .accord h3 {
    background: #f7f7f7;
    color: #000000;
}

#pm .accordbdcb ul li.title {
    background: #f7f7f7;
    color: #000000;
}

#pm .accordbdcb ul li.header {
    padding: 10px 2%;
    color: #000000;
}

#pm .accordbdcb span {
    color: #000;
line-height: 1.5;
}

#pm .accordbdcb ul li {
    color: #000;
    line-height: 1.5;
}

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

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



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

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

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

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


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

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

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

.page_blog .blogs .blog p.date{
	grid-area:date;
	text-align:center;
}

.page_blog .blogs .blog a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:#f7f7f7;
	text-align:center;
	font-size:1.125em;
	border-radius:var(--border-radius);
}

/*blog summary text - not wanted for this client */
.page_blog .blogs .blog .artp{
	display:none;
}


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


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

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

.blognav .search{}


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

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

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

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

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

.blognav .recent{}

.blognav .archive{}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.doubleLine .txt{
	line-height:3
}

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

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

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


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

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

}

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

.blogBtns a.next,
.blogPageBtns a.next{
	grid-area:next;
	background-color:var(--dark-blue);
	color:var(--white);
	text-align:center;
	border-radius:var(--border-radius);
	margin-left:auto;
	padding:.5rem 2rem;
}
/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
.page_blog #pm .bc{
	display:grid;
	grid-template-areas:
		"header header"
		"blogs nav";
	grid-template-columns:8fr 2fr;
	grid-template-rows:auto 1fr;
	justify-content:end;
	/* grid-column-gap:3em; */
	grid-auto-flow:column dense;
}

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



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

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

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

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


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

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

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

.page_blog .blogs .blog p.date{
	grid-area:date;
	text-align:center;
}

.page_blog .blogs .blog a.more{
	grid-area:readmore;
	margin:auto;
	padding:.5rem 2rem;
	background-color:#f7f7f7;
	text-align:center;
	font-size:1.125em;
	border-radius:var(--border-radius);
}

/*blog summary text - not wanted for this client */
.page_blog .blogs .blog .artp{
	display:none;
}


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


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

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

.blognav .search{}


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

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

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

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

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

.blognav .recent{}

.blognav .archive{}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.doubleLine .txt{
	line-height:3
}

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

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

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


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

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

}

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

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