* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 		{}
body 		{line-height:1; font-family: 'Source Sans Pro', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #404040; background-color: #ffffff; position: relative}
body:before	{position: absolute; width: 100%; height: 350px; background: linear-gradient(180deg, #cccccc 0%, #ffffff 100%); content: ''; z-index: -1}

h1		{line-height: 1.3em}

.title-and-button,
h2		{line-height: 1.3em; font-size: 32px; border-bottom: 1px solid #cccccc; padding-bottom: 10px; margin-bottom: 1em}

h3		{line-height: 1.3em;}
h4		{line-height: 1.3em}
h5		{line-height: 1.3em}
h6		{line-height: 1.3em}

.title-and-button h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.title-and-button { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }


p		{line-height: 1.4em; margin-bottom: 1em}

h2.section-title { font-size: 28px; color: #4f81be; font-weight: 600; }

h4.subheading,
h5.subheading { color: #4f81be; font-weight: 600; margin-bottom: 1em; }

.smaller	{font-size: 14px;}

main		{padding: 50px 0}

.no-wrap { white-space: nowrap; }

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner 	{width:1300px; padding: 0 20px; max-width:100%; margin:0 auto; }

.site-wrapper	{width: 1136px; max-width: 100%; margin: auto; background-color: #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.1)}

.mt-10 { margin-top: 10px; }
.mt-25 { margin-top: 25px; }
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }

a.continue-shopping { color: #4898E2; font-weight: 600; font-size: 110%; display: block; }
a.continue-shopping.top { margin-bottom: 10px; }

.hidden { display: none; visibility: hidden; opacity: 0; }


div.toast:not(.show) { display: none; }

.toast.toast-wide { width: 750px; }
.toast-container { z-index: 100000; }


.header-with-button { display: flex; flex-direction: row; gap: 30px; justify-content: space-between; margin-bottom: 15px; }

.header-with-button p { margin: 0!important; }
.header-with-button .btn { padding: 8px; line-height: 1; }

div.no-data { margin-top: 20px; }
div.no-data p { margin: 0; font-weight: bold;  }

.modal-header { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.modal-header button.close { font-size: 1.5em; background-color: transparent; position: static; top: initial; right: initial; }


.expandy-map-holder { position: relative; padding: 0; }
.expandy-map-holder .placeholder { visibility: hidden; }
.expandy-map-holder img.expandy { position: absolute; top: 0; left: 0; /*right: 0; bottom: 0;*/ width: 100%; height: auto; border: 1px solid #333333; transition: all 0.2s; }

.expandy-map-holder img.expandy:hover { left: -50%; top: -50%; width: 200%; max-width: 200%; }


.collection-store-details { background-color: #f7f7f7; padding: 20px; margin-bottom: 30px; }
.collection-store-details .details-and-map { display: flex; flex-direction: row; align-items: flex-start; gap: 40px; }
.collection-store-details .details-and-map .details { width: 40%; }
.collection-store-details .details-and-map .map { width: 60%; }


.card { padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; }
.heading { font-weight: bold; }

pre { font-family: inherit; font-size: inherit; line-height: 1.3; margin: 0; }

.other-information { margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 20px; display: flex; flex-direction: column; gap: 20px; }

/* HEADER */
header { background-color: #000000; background-position: right; position: relative; display: flex; flex-direction: column; }
header h1		{font-family: 'UKNumberPlate'; color: #F1F1F1; font-weight: normal; font-size: 30px; margin-bottom: 0; position: relative; z-index: 3}
header p		{color: #8bbfff; font-weight: normal; font-size: 18px; line-height: 0.7em; position: relative; z-index: 3; margin-top: -2px;}
header .inner 	{}
.logo-lockup	{transform: translateY(-3px); flex-shrink: 0; text-decoration: none}
.logo-lockup p	{margin-bottom: 0}

.cols				{width:calc(100% + 40px); margin-left: -20px; display: flex; justify-content: flex-start; flex-wrap: wrap}
.cols.span-1 .col	{width: 100%;}
.cols.span-2 .col	{width: 50%;}
.cols.span-3 .col	{width: 33.333%;}
.cols.span-4 .col	{width: 25%;}

.col				{padding: 20px;}

/* NAV */
.nav-container			{}
.nav-container .inner	{display: flex; justify-content: center;}

nav						{}
nav ul					{display: flex; font-weight: 600; padding-left: 20px;}
nav ul li				{margin: 0 10px;}
nav ul li a				{display: block; text-decoration: none; font-weight: 600; font-size: 16px; color:#000000}
nav ul li:hover a		{color:#4f81be}
nav ul li.active a		{color:#4f81be}

.secondary-nav				{display: flex; align-items: center; margin-left: 15px;}
.secondary-nav ul			{display: flex; list-style: none; align-items: center; font-size: 15px;}
.secondary-nav ul li		{width: 75px; height: 65px; display: flex; flex-shrink: 0; border-left: 1px solid #ffffff}
.secondary-nav ul li a		{text-decoration: none; background: linear-gradient(0deg, #cccccc 0%, #ffffff 100%); color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 11px; width: 100%; transition: 0.2s ease-out}
.secondary-nav ul li img	{margin-bottom: 5px;}
	
.secondary-nav ul li.email-icon img		{margin: 8px 0 4px 0; height: 15px;}
.secondary-nav ul li.account-icon img	{margin: 4px 0 2px 0; height: 20px;}
.secondary-nav ul li.basket-icon svg	{margin: 3px 0 2px 0; height: 20px;}
.secondary-nav ul li.basket-icon path	{fill:#4f81be}

.secondary-nav ul li:hover a			{background: #000000; color: #ffffff}

.nav-bar	{display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #ffffff 0%, #dddddd 100%);}
.nav-bar ul	{margin-bottom: 0}

.header-top	{height: 124px; padding-left: 30px; background-image:url(/_uploads/page-images/bg-header.jpg); background-position: right; background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; position: relative;}

/* HAMBURGER */
.hamburger 						{width: 30px; height: 22px; z-index: 999; position: absolute; right: 20px; margin: 0 20px; cursor: pointer; display: none}
.hamburger span 				{width: 100%; display: block; height: 2px; background-color: #ffffff; position: absolute; top: 0; left: 0; border-radius: 1px; }
.hamburger span:nth-child(1)	{}
.hamburger span:nth-child(2) 	{top: 10px; }
.hamburger span:nth-child(3) 	{top: 20px; }

.hamburger.open span:nth-child(1) 	{top: 13px; transform: rotate(45deg)}
.hamburger.open span:nth-child(2) 	{opacity: 0; transform: scale(0) }
.hamburger.open span:nth-child(3) 	{top: 13px; transform: rotate(-45deg)}

/* HOME INTRO */
.text-intro			{padding: 40px 0 20px; text-align: center;}
.text-intro .inner	{width:768px;}

.site-intro h2 			{font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 26px; border: none; padding: 0; margin: 0; letter-spacing: 0}
.site-intro h2 span		{font-family: 'UKNumberPlate'; display: block; font-size: 40px; margin-bottom: 0.15em; margin-top: 0.1em}
.site-intro h3 			{font-size: 17px; font-weight: 400; color: #30b1c8; margin-bottom: 0.75em}

/* PLATE FILTERS */
.plates-filters			{display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }

.plates-filters .filter-container { display: flex; flex-direction: row; justify-content: center; gap: 30px; border: 2px solid #6d9dd8; border-radius: 4px; padding: 10px; width: 100%; }

.plates-filters .filter-container label.caption { margin: 0; padding: 0; align-self: center; font-size: 18px; font-weight: 600; }

.plates-filters div.groups { display: flex; flex-direction: column; row-gap: 12px; }

.plates-filters p		{font-size: 18px; margin: 0; transform: translateY(-4px)}

.plates-filters .checkmark { width: 23px; height: 23px; position: static; }

.plates-filters .filter-option label.container { display: flex; flex-direction: row; gap: 10px; align-items: center; padding: 0; font-weight: 500; }

.plates-filter-group { display: flex; flex-direction: row; align-items: center; }
.plates-filter-group .plates-filter-group-label { width: 120px; padding: 0; margin: 0; font-weight: 600; }
.plates-filter-group .plates-filter-group-options { display: grid; gap: 6px; }

.plates-filters[data-columns='3'] .plates-filter-group-options { grid-template-columns: 160px 160px auto; }
.plates-filters[data-columns='2'] .plates-filter-group-options { grid-template-columns: 160px auto; }
.plates-filters[data-columns='1'] .plates-filter-group-options { grid-template-columns: auto; }


.filters-col { display: flex }
.filters-col .form-cell	{margin:0 15px;}
.container				{font-size: 16px; font-weight: 600; margin-bottom: 0; padding-top: 4px;}
.checkmark				{background-color: #ffffff; border:1px solid #cccccc; margin-top: 0}

.checkbox-black .container input:checked ~ .checkmark { background-color: #000000; border-color: #000000 }
.checkbox-white .container input:checked ~ .checkmark { background-color: #ffffff; border-color: #cccccc }
.checkbox-white .container input:checked ~ .checkmark:after { border-color: #000000 }
.checkbox-yellow .container input:checked ~ .checkmark { background-color: #F0D712; border-color: #F0D712 }
.checkbox-yellow .container input:checked ~ .checkmark:after { border-color: #000000 }

.checkbox-silver .container input:checked ~ .checkmark { background-color: silver; border-color: #cccccc; }
.checkbox-silver .container input:checked ~ .checkmark:after { border-color: #000000 }

.view-col ul				{font-size:0; display: flex; list-style: none; align-items: center;}
.view-col ul li				{margin-left: 10px;}
.view-col ul li img			{opacity: 0.5}
.view-col ul li.active img	{opacity: 1}
.view-col ul li span		{font-size: 16px;}

/* PLATES LISTING */
.plates-listing-section				{position: relative; padding: 0 0 60px;}
.plates-listing-section .inner		{position: relative; z-index: 5}

.no-filter-match { font-size: 20px; text-align: center; margin-top: 40px; display: none;  }
.no-filter-match.active { display: block; }
.no-filter-match > div { display: inline-block; padding: 20px; background-color: #F0D712; max-width: 900px; }

/*.plates-listing-section:before		{background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%); height: 100px; position: absolute; left: 0; top:0; width: 100%; content: '';}*/

/* PLATE CARD */
.plate-card { background-color: #ffffff; border: 1px solid #ffffff; box-shadow: 0 0 3px rgba(0,0,0,0.3); border-radius: 4px; margin-top: 40px;  }
.plate-name { background-color: #efefef; padding: 10px 15px; box-shadow: inset 0 2px 2px rgba(255,255,255,0.2); border-bottom: 1px solid #ffffff; }
.plate-name h2 { font-weight: 700; line-height: 1.3em; font-size: 18px; padding: 0; margin-bottom: 0; border: none; color: #4f81be; }
.plate-name h2 span { font-weight: 400; display: block; color: #000000 }

.plate-card-details { display: flex; flex-direction: row; gap: 0px; }

.plate-text-guide-cols { background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%); display: flex; flex-direction: row; width: 55%; }

.plate-card-text { padding: 17px; }
.plate-card-text h3 { margin-bottom: 15px; font-size: 17px; font-weight: 600 }
.plate-card-text p { font-size: 15px; color: #404040 }

.plate-card-prices table { margin: 20px 0 15px 0; border-top: 1px solid #efefef; width: 100%!important; border-collapse: collapse; }
.plate-card-prices table td { font-weight: 700; padding: 10px 0; border-bottom: 1px solid #efefef }

.plate-card-prices table td.price-text,
.plate-card-prices table td:first-child { font-size: 15px; padding-right: 20px; width: 66% !important; }


.plate-card .btn	{margin: 10px 0 20px 0}

.plate-card-image					{padding:10px 15px; width: 45%; flex-shrink: 0; }



.plate-card-carousel .slide			{width: 100%;}
.plate-card-carousel .slick-track	{display: flex; align-items: center;}
.plate-card-carousel img			{max-height: 150px; width: auto; margin: auto;}

.slick-dots					{text-align: center; margin: 10px auto; font-size: 0px; background-color: #FFF; display: flex; justify-content: center;}
.slick-dots li 				{width: 10px; height: 10px; border-radius: 10px; border: 1px solid #333333; margin: 0 2px;}
.slick-dots li.slick-active	{background-color: #333333}



.inline-link { display: inline-flex; font-weight: 700; color: #333333; font-size: 16px; align-items: center; }
.inline-link img { margin: 2px 0 0 3px }

/* SIZE GUIDE */
.size-guide-container { padding: 15px; padding-top: 0; }
.size-guide				{text-align: center;}
.size-guide td			{vertical-align: middle}
.size-guide p			{font-size: 12px; font-weight: 600}
.size-guide p span		{display: block}
.size-guide-plate		{font-weight: 600; text-transform: uppercase; background: linear-gradient(90deg, #eeeeee 0%, #ffffff 100%); border:1px solid #cccccc; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 5px; text-align: center; height: 40px; display: flex; align-items: center; justify-content: center}

.size-guide				{background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 20px; border-radius: 7px;}

.size-guide table { margin-top: 20px; }
.size-guide table:first-child { margin-top: 0; }

.size-guide .available-variations { margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 20px; text-align: left; }

.size-guide .available-variations .variations { display: grid; gap: 15px; font-size: 13px; grid-template-columns: repeat(3, 1fr); }
.size-guide .available-variations.one .variations { grid-template-columns: 1fr; }
.size-guide .available-variations two .variations { grid-template-columns: 1fr 1fr; }

table.standard-square td.size-guide-plate-cell	{width: 120px;}
table.standard-square { width: 120px; margin-left: auto; margin-right: auto; }
table.standard-square .size-guide-plate { width: 120px; padding-top: 71%; position: relative; }
table.standard-square .size-guide-plate span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center;}

.plates-listing-section .cols.span-3 .size-guide-container { margin-bottom: 10px; display: none }

/* PLATES LISTING TWO COL VERSION */
.plates-listing-section .cols.span-2 .inline-link				{display: none}
.plates-listing-section .cols.span-2 .plate-text-guide-cols		{display: flex}
.plates-listing-section .cols.span-2 .size-guide-container		{width: 50%; flex-shrink: 0; margin-top: 15px;}
.plates-listing-section .cols.span-2 .size-guide-plate			{font-size: 14px;}
.plates-listing-section .cols.span-2 table.standard-square		{width: 100%}

/* PLATES LISTING ONE COL VERSION */
.xplates-listing-section /* .cols.span-1 */ .plate-card				{display: flex; flex-wrap: wrap}
.xplates-listing-section /* .cols.span-1 */ .plate-name				{width: 100%;}
.plates-listing-section /* .cols.span-1 */ .inline-link				{display: none}
.plates-listing-section /* .cols.span-1 */ .plate-text-guide-cols		{display: flex}
.plates-listing-section /* .cols.span-1 */ .size-guide-container		{width: 50%; flex-shrink: 0; margin-top: 15px;}
.plates-listing-section /* .cols.span-1 */ .size-guide-plate			{font-size: 12px;}
.plates-listing-section /* .cols.span-1 */ table.standard-square		{width: 100%}
.plates-listing-section /* .cols.span-1 */ .plate-card-image			{width: 45%;}
.plates-listing-section /* .cols.span-1 */ .plate-text-guide-cols		{width: 100%;}
.plates-listing-section /* .cols.span-1 */ .plate-card .btn			{margin: 0}
.plates-listing-section /* .cols.span-1 */ .plate-card-image			{align-self: center;}
.plates-listing-section /* .cols.span-1 */ .plate-card-carousel img	{width:414px; max-width: 100%; max-height: unset}

.plate-card-information { display: flex; flex-direction: column; }

.plate-card .express-available { margin: 20px 10px 10px 10px; }
.express-available { margin: 20px 0 0 0; border: 2px solid #24B24D; padding: 5px 10px; text-align: center; font-size: 17px; font-weight: bold; color: #24B24D; line-height: 1.2em; }

/* PRODUCT DETAIL PAGE */
.product-detail									{padding:0 0 50px 0}
.product-detail-image-container					{border:1px solid #cccccc; padding: 20px; border-radius: 5px;}
.product-detail-image-container .slick-track	{display: flex; align-items: center;}

.product-detail-thumbs-carousel 						{border-top:1px solid #dddddd; margin-top: 15px;}
.product-detail-thumbs-carousel .slide					{opacity: 0.4; padding: 10px}
.product-detail-thumbs-carousel .slide.slick-current	{opacity: 1}

/* PRODUCT INFO TEXT */
.product-detail-text-col	{padding: 0 30px;}
.product-detail h2			{font-size: 32px; padding: 0; margin-bottom: 0.5em; border:none}
.product-detail p.intro		{font-size: 18px; margin-bottom: 1em}
.info-box					{display: flex; align-items: flex-start; padding: 20px; margin: 25px 0; box-shadow: 0 0 20px rgba(0,0,0,0.06)}
.info-box img				{width: 21px; margin-right: 10px;}
.info-box p					{margin-bottom: 0.25em;}
.info-box p:last-child		{margin-bottom: 0}

.product-detail-selects,
.product-detail-options,
.product-detail-reg { border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; padding: 25px 0 0 0; margin: 25px 0 0 0; }

.product-details-reg .form-row .form-cell						{width: 100%;}
input[type="text"].reg-number { width: 280px; border-radius: 5px; border-width: 2px; text-transform: uppercase; text-align: center; font-size: 24px; padding-top: 12px; padding-bottom: 12px; letter-spacing: 2px; font-family: 'UKNumberPlate'; text-align: left; }

.total-button { display: flex; justify-content: flex-end; margin-top: 30px; }
.total { border-radius: 50px; padding: 10px 20px; text-align: center; color: #ffffff; font-size: 20px; font-weight: 600; background-color: #202020; display: flex; align-items: center; }
.total-button .btn { margin-left: 15px; }

.product-accessories-list { display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr); }

/* ACCESSORY LISTING */
.aaccessories-section .col		{margin-bottom: 20px;}
.accessory-card { display: flex; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 20px; height: 100%; }
.accessory-card-image			{width: 40%; flex-shrink: 0}
.accessory-card-text			{padding-left: 20px;}
.accessory-card-text p			{line-height: 1.2em; margin-bottom: 0.5em; font-size: 15px;}
.accessory-card-text p.price	{font-size: 18px; color: #464646}
.accessory-card-text			{display: flex; flex-direction: column; justify-content: space-between}

.accessory-card .buttons { display: flex; flex-direction: column; gap: 10px; }

.in-basket { margin: 0 0 10px 0; font-size: 90%; border-top: 1px solid #e0e0e0; padding-top: 10px; color: #4f81be; }


.accessory-page .inner { display: flex; flex-direction: row; gap: 60px; align-items: start; }
.accessory-page .inner .image { width: auto; max-width: 240px; flex-shrink: 0; }

.accessory-page .inner .intro { font-size: 110%; }

.accessory-page .accessory-button { margin-top: 40px; display: inline-flex; flex-direction: row; gap: 20px;  }

.accessory-page ul { margin-top: 20px; margin-bottom: 20px; }
.accessory-page li { margin: 5px 0; line-height: 1.2em; }


.accessory-page .in-basket { margin-top: 20px; }

/* BASKET */
.basket-section						{}
.basket-section .cols				{display: flex; justify-content: space-between; }
.basket-section .col-basket			{width:65%;}

.basket-item { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; border-bottom: 1px solid #cccccc; padding-bottom: 30px; margin-bottom: 30px; position: relative; }

.basket-item .image { width: 125px; flex-shrink: 0; }

.basket-item .details { display: flex; flex-direction: column; width: 100%; }

.basket-item .description > :last-child { margin-bottom: 0; }
.basket-item .description { margin-bottom: 10px; }

.basket-item .price-quantity { display: flex; flex-direction: row; gap: 20px; align-items: center; width: 100%; justify-content: space-between; }
.basket-item .price { margin: 0; }
.basket-item .quantity { display: flex; flex-direction: row; gap: 10px; align-items: center; }
.basket-item .quantity label { margin: 0; }
.basket-item .quantity select { padding-right: 50px; }

.basket-item .options { margin-top: 20px; display: grid; column-gap: 14px; row-gap: 10px; grid-template-columns: repeat(3, 1fr); }

.basket-item .options .option { display: flex; flex-direction: column; gap: 1px; }
.basket-item .options .option label,
.basket-item .options .option p { margin: 0; }


.basket-item .reg-number { margin-top: 15px; display: flex; flex-direction: row; gap: 10px; align-items: center; }

.basket-item .size-variation { margin-top: 15px; display: flex; flex-direction: column; gap: 1px; align-items: start; }
.basket-item .size-variation p { margin: 0; }

.basket-item .reg-number label,
.basket-item .size-variation label { margin: 0; }

.basket-item .product-select { padding-left: 145px; margin-top: 20px; }
.basket-item .product-select label	{font-size: 14px; margin-bottom: 8px; display: block;}

.basket-item .subtotal { margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 20px; flex-wrap: nowrap }
.basket-item .subtotal h4 { font-size: 24px; margin: 0; }

.basket-item .remove { background-image: url("/_assets/icon-trash.svg"); width: 20px; height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;  }

.basket-item .dimensions { margin-top: 20px; display: flex; flex-direction: row; gap: 30px; align-items: flex-start; }
.basket-item .dimensions .dimension { flex: 50% 0 0; }
.basket-item .dimensions .dimension blockquote { margin: 0; line-height: 1.3em; }

/*.basket-image { width: 125px; flex-shrink: 0; margin-right: 20px; }
.basket-image img					{width:100%;}
.basket-image-text					{display: flex; flex: 1; align-items: flex-start; padding-right: 30px;}
.basket-image-text h3				{font-size: 20px; margin: 10px 0}
.basket-image-text p				{margin-bottom: 0.5em; font-size: 15px; line-height: 1.3em}
.basket-image-text p:last-child		{margin-bottom: 0}

.basket-plate-qty					{flex-shrink: 0; width: 160px;}
.basket-plate-qty .select-css		{padding:10px 15px; font-size: 15px;}*/
/*.basket-item-price					{min-width: 100px; flex-shrink: 0; text-align: right}
.basket-item-price h4				{font-size: 24px; margin-top: 7px;}*/
p.text-qualify { background-image: url(../../_assets/tick.svg); background-size: 20px auto; background-position: top 3px left; background-repeat: no-repeat; padding-left: 30px; }

/* BASKET SUMMARY */
.col-basket-summary				{width:35%;}
.col-basket-summary .btn		{width:100%; margin-bottom: 20px;}
.col-basket-summary .select-css	{font-size: 16px; margin-top: 15px;}

.summary-box					{padding:20px 30px; border:1px solid #cccccc; border-radius: 5px; position: sticky; top:0}
.summary-box h5					{font-size: 22px; margin-bottom: 0.8em;}
.grand-total					{border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; padding-top: 15px; margin-top: 15px; margin-bottom: 15px;}
.grand-total p					{display: flex; justify-content: space-between; font-size: 18px; margin-bottom: 15px;}
.grand-total p.text-gt			{font-size: 22px;}
.summary-secure					{text-align: center;}
.summary-secure p				{font-size: 14px; margin-bottom: 0.5em;}
.summary-secure img				{width:300px;}
.delivery-price { display: flex; align-items: flex-start; }
.delivery-price .form-cell		{flex: 1; margin-right: 10px;}
.delivery-price .select-css		{padding: 8px 45px 8px 15px}
.delivery-price .total { font-size: 16px; margin-top: 32px; }
.additional-info { margin: 30px 0 20px 0 }
.additional-info .form-cell		{width: 100%;}

.additional-info pre { color: inherit; font-size: inherit; white-space: pre-wrap; overflow: hidden; }

/* DELIVERY POPUP */
.popup-background 	{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.60); z-index: 99; display: none;}
.popup-content		{position: fixed; background-color: #f0f0f0; width: 1120px; padding:50px; max-width: 100%; left: 50%; margin-left: -560px; top: 400px; margin-top: -330px; height:calc(100vh - 150px); max-height: 768px; z-index: 100;}
.scroll-content		{max-height: 100%; overflow-y: auto; padding-right: 50px;}

.scroll-content p	{margin-bottom: 1em;font-size: 15px;}
.scroll-content h3	{font-size: 20px; margin-top: 1em; margin-bottom: 0.35em}
.scroll-content h4	{font-size: 16px; margin:0 0 0.5em 0; color:#585858}

.scroll-content::-webkit-scrollbar		 { width: 20px; }
.scroll-content::-webkit-scrollbar-track { background: #ccc; border-left: 9px solid #f0f0f0; border-right: 9px solid #f0f0f0; /* BORDER LEFT AND RIGHT NEED TO MATCH THE PARENT BG COLOUR */}
.scroll-content::-webkit-scrollbar-thumb { background: #ccc; border-left: 5px solid #f0f0f0; border-right: 6px solid #f0f0f0; }	
.popup-content			{transition:0.5s ease-out; transform: translateY(-100px)}	
.popup-content.animated	{transform: translateY(0)}	
	
.close	{position:absolute; right:20px; top:20px; z-index: 110}	

.click-out	{position:fixed; width: 100%; height: 100%; top:0; left:0;}	

/* CHECKOUT */
.checkout-section { width: 500px; max-width: 100%; margin: auto; }
.checkout-section.wide { width: 100%; }

.checkout-section h3 { font-size: 22px; margin: 0 0 1em 0 }
.checkout-section h4 {font-size: 20px; }
.checkout-section .form-row		{margin-bottom: 20px;}
.checkout-section label			{margin-bottom: 5px;}
.checkout-bg					{background-color: #ffffff; border:1px solid #cccccc; border-radius: 10px; padding: 20px;}

.checkout-container				{margin: 20px 0; border: 1px solid #cccccc;}
.checkout-container:last-child	{margin-bottom: 0}

.checkout-container.open .checkout-panel-bottom	{display: block}

.checkout-panel				{background-color: #ffffff;}
.checkout-container h3		{font-size: 20px; text-transform: uppercase}
.checkout-container p		{font-size: 16px;}

/* CHECKOUT ACTION */
.checkout-action			{position: relative; cursor: pointer; padding: 30px; transition: 0.2s ease-out}
.checkout-action p			{margin: 0; padding-right: 100px; font-size: 16px}
.checkout-action h2			{font-size: 20px;}
.checkout-action h3			{margin-bottom: 0}
.checkout-action span		{position: absolute; right:30px; top: 22px; transition: 0.2s ease-out; width:25px; height: 25px; border-radius: 25px; background-image: none; background-color: #ffffff; border:1px solid #cccccc; display: flex; align-items: center; justify-content: center}
.checkout-action span:after	{width:15px; height: 15px; border-radius: 15px; background-color: #000000; content: ''; display: block; transform: scale(0);}

.checkout-action:hover		{background-color: #f1f1f1}

.checkout-container.open .checkout-action span			{border-color:#000000}
.checkout-container.open .checkout-action span:after	{border:1px solid #000000; transform: scale(1);}
.checkout-container.open			{border-color:#404040}

.checkout-action-2 span	{top:50%; transform: translateY(-50%);}

.summary-container .form-cell.custom-cb .container	{font-size: 16px; font-weight: 400}
.summary-container .address-expanded 				{background-color:#f1f1f1; padding: 15px; margin-bottom: 20px;}

.ca-2-text		{display: flex; align-items: center; justify-content: space-between; padding-right: 50px;}
.ca-2-text img	{width:120px; flex-shrink: 0}
.ca-2-text p	{margin-bottom: 0; font-weight: bold; padding-right: 0}

.summary-container .checkout-panel-bottom	{background-color:#ffffff}

.checkout-panel-bottom		{display: none; padding: 30px; border-top:1px solid #cccccc;}
.checkout-panel-bottom p	{font-size: 16px; margin-bottom: 1em}

.checkout-secure			{text-align: center; margin: 35px 0 0 0}
.checkout-secure p			{font-size: 16px; margin-bottom: 1em;}
.checkout-secure img		{width:300px; max-width: 100%;}

.checkout-container textarea	{background-color: #efefef; width: 100%; height: 150px; padding: 15px;}

.checkout-container textarea.instructions { background-color: transparent; height: 120px; }

.checkout-panel-bottom p { margin-bottom: 20px; }

/* CHECKOUT PROGRESS */
.checkout-progress-container 		{width: 414px; max-width: calc(100% - 40px); display: block; margin:0 auto 60px auto}
ul.cpc-progress 					{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; list-style: none; margin: 0; font-size: 0; position: relative; }
ul.cpc-progress li 					{font-size: 12px; position: relative; cursor: pointer; }
ul.cpc-progress li.cpc-spacer 		{width: 100%; position:relative; }
ul.cpc-progress .cpc-step-number 	{font-size: 14px; display: inline-flex; border-radius: 30px; border: 1px solid #000000; width: 30px; height: 30px; text-align: center; align-items: center; justify-content: center}
ul.cpc-progress .cpc-title 			{position: absolute; left: 50%; margin-left: -40px; display: block; font-size: 12px; width: 80px; text-align: center; color: #000000; padding-top: 6px; line-height: 1.2em; min-height: 42px; }
ul.cpc-progress li.cpc-spacer span 	{position: absolute; display: block; width: 100%; height: 1px; left: 0; top: 14px; background-color: #000000; }

ul.cpc-progress li.cpc-button { }
ul.cpc-progress li.cpc-button.complete { }
ul.cpc-progress li.cpc-button.complete .cpc-step-number { font-size: 0; background-image: url("/_assets/tick-green.png"); background-size: cover; background-repeat: no-repeat; }

.btn.delivery-type-btn			{transition:0.1s ease-out; height: 70px; display: inline-flex; justify-content: center; align-items: center; width: 100%; border-radius: 5px; background: linear-gradient(180deg, #676767 0%, #1a1a1a 100%); border-color:#4B4B4B; color: #ffffff; box-shadow: none}
.btn.delivery-type-btn:hover	{box-shadow: none; transform: translateY(2px); background: linear-gradient(180deg, #333333 0%, #000000 100%); border-color:#000000; color: #ffffff}
.link-style						{background-color: transparent; font-weight: 600; text-decoration: underline; margin-top: 15px; color:#404040}

/* GUEST CHECKOUT */
.dtc-find-address-postcode						{display: flex;}
.dtc-find-address-postcode input[type="button"]	{padding: 0 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}



.address-list-container { }
.address-list-container .address-list { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr ); }
.address-list-container .address-list .address-card { border-radius: 10px; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; }

.address-list-container .address-list .address-card { margin-bottom: 20px; }

.address-list-container .address-list .address-card .invalid-address { background-color: #ffcccc; padding: 6px; font-size: 14px; text-align: center; border-radius: 5px; margin: 0 -10px 0 -10px; }

.new-address-container { margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; padding-bottom: 20px; }

.new-address-form { border: 1px solid #e0e0e0; padding: 20px; }


.delivery-options { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
.delivery-options > div { width: 50%; }
.delivery-options .delivery-address { margin-bottom: 16px;}

.delivery-options .delivery-option { display: flex; flex-direction: row; gap: 30px; justify-content: space-between; margin-bottom: 16px; }


.totals { margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 17px; }
.totals .total-line { display: flex; flex-direction: row; gap: 20px; justify-content: end; }
.totals .total-line label { font-size: inherit; margin: 0; }
.totals .total-line span { width: 60px; text-align: right; font-size: inherit; }

.order-total.totals { font-size: 20px; }

.basket-review { margin-top: 40px; }
.basket-review .basket-item .options { grid-template-columns: 1fr 1fr; }
.basket-review .basket-item:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }


.payment-method-section { margin-top: 40px; }
.payment-method-section .payment-method-container { }
.payment-method-section .payment-method-choice { }

.payment-method-section .payment-method-choice.selected button.selectable { border-color: #000000; }
.payment-method-section .payment-method-choice.selected button.selectable .indicator { background-image: url("/_assets/tick-green.png"); }

button.selectable { border: 1px solid #d0d0d0; background-color: transparent; display: flex; flex-direction: row; gap: 10px; align-items: center; padding: 20px; width: 100%; }
button.selectable .indicator { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background-image: url("/_assets/untick-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }
button.selectable .caption { flex-basis: 100%; text-align: left; }
button.selectable img { height: 30px; width: auto; flex-shrink: 0; }

.payment-method-choice[data-payment-method='card'] img { height: 40px; }

.payment-method-options { border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 20px;  }

.payment-method-options.paypal { text-align: center; padding: 30px 40px; }


.payment-buttons { margin-top: 40px; text-align: right; display: flex; justify-content: end; }

div.pay-by-card { display: flex; flex-direction: row; gap: 40px; align-items: center; color: maroon; }

.pay-card-warning { margin: 0; }



.selectable-option { margin-bottom: 10px; }
.selectable-option label.selectable { display: block; border: 1px solid #d0d0d0; padding: 10px 80px 10px 40px; font-size: 16px; position: relative; transition: all 0.2s; }
.payment-method-choice.selectable-option label.selectable { padding: 20px 120px 20px 40px; }

.form-cell.credit-card-number { position: relative; z-index: 0; }

.credit-card-icon-holder { display: inline-block; position: absolute; right: 10px; bottom: 19px; width: 45px; height: 30px; }

.credit-card-icon-1,
.credit-card-icon-2 { width: 100%; background-size: cover; display: block; height: 100%; background-repeat: no-repeat; background-position: center; position: absolute; top: 11px; right: 0; }


div.create-account { margin-top: 40px; border-top: 1px solid #333333; padding-top: 40px; }

div.account-created { margin-top: 40px; }

td.right,
th.right { text-align: right; }

td.center,
th.center { text-align: center; }

table.table-list { width: 100%; }

table.table-list td,
table.table-list th { padding: 5px; }

table.table-list tbody tr td { border-bottom: 1px solid #e8e8e8; }

/* TESTIMONIALS */
.testimonial { height: 100%; background: #ffffff; padding: 30px; }

.testimonials-list { display: grid; gap: 30px; grid-template-columns: repeat(3,1fr); }

.testimonial img	{border-radius: 5px; margin:0 auto 15px; display: block}
.testimonial cite	{font-weight: 700}
.testimonial blockquote { line-height: 1.2em; margin-bottom: 1.5rem; }
.testimonial blockquote:before { content: "“"; font-size: 80px; color: #4f81be; display: block; }

/* CONTACT */
.contact-page .inner			{width:1024px;}
.contact-page h3				{font-size: 25px; margin-bottom: 0.5em; margin-top: 1em}
.cols.span-2 .col.col-contact	{width: 40%; padding-top: 0;}
.cols.span-2 .col.col-map		{width: 60%; padding-top: 0;}
.col-map iframe 				{width: 100%; height: 320px; margin-bottom: 20px;}
.col-map h3						{margin: 0; text-align: center; background-color: #4f81be; color: #ffffff; padding: 10px;}
.map-col-inner					{box-shadow: 0 0 20px rgba(0,0,0,0.06); padding: 20px;}

/* TEXT PAGE */
.text-page .inner	{width: 1024px;}
.text-page h1		{}	
.text-page h3		{font-size:30px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h4		{font-size:26px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h5		{font-size:20px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h6		{font-size:18px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page p		{font-size:16px;  line-height: 1.3em; margin-bottom: 1.5em;}
		
.text-page ul,
.text-page ol		{font-size:16px;  line-height: 1.3em; margin: 1.5em;}	
.text-page ul li,
.text-page ol li	{margin-bottom:0.5em;}

/* LOGIN PAGE */
.login-page .checkout-action { background: #ffffff; padding-bottom: 0; }

.login-page .checkout-action.with-bp { padding-bottom: 30px; }

.login-page .checkout-action h3		{margin-bottom: 0.5em}
.login-page .checkout-action p		{padding: 0; margin-bottom: 0.5em}
.login-page .checkout-action p:last-child { margin-bottom: 0; }

.login-page .checkout-panel-bottom { display: block; border-top: none }

/* MY ACCOUNT */
.my-account .checkout-container	{margin-top: 0}

.tab-list { display: flex; list-style: none; margin-bottom: -1px; }
.tab-list .tab { border: 1px solid #efefef; border-bottom: 1px solid #cccccc; background-color: #efefef; font-size: 15px; font-weight: 700; padding: 15px; margin-right: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px; transition: 0.2s ease-out; }
.tab-list .tab.active { background-color: #ffffff; border-color: #cccccc; border-bottom-color: #ffffff; }
.tab-list .tab:hover { background-color: #cccccc; border-color: #cccccc; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.login-page .checkout-container.open	{border-color:#cccccc}

p.default-address { background-color: #e0e0e0; padding: 8px; font-weight: bold; }

/* FOOTER */
footer					{background-color:#000000; padding: 30px 0}
footer h4				{color:#4f81be; text-transform: uppercase; margin-bottom: 0.75em; font-size: 18px;}
footer ul				{list-style: none;}
footer ul li			{margin-bottom: 10px; margin-right: 15px;}
footer ul li a			{color:#ffffff; text-decoration: none}
footer ul li a:hover	{color:#4f81be;}
footer p				{color:#ffffff; margin-bottom: 1em}
footer .col:last-child	{margin-left: auto;}

/* BUTTONS */
.btn			{font-size: 16px; color: #ffffff; text-transform: uppercase; font-weight: 600; text-decoration: none; border:1px solid #6d9dd8; box-shadow: 0 2px 2px rgba(0,0,0,0.2); background: linear-gradient(180deg, #84a7d3 0%, #4f81be 100%); border-radius: 50px; min-width: 190px; padding:12px 10px; display: inline-block; text-align: center;}
.btn.black:hover,
.btn:hover		{background: linear-gradient(180deg, #333333 0%, #1a1a1a 100%); color: #ffffff; border:1px solid #000000}

.dtc-find-address-postcode input[type="button"],
.btn.black		{background: linear-gradient(180deg, #676767 0%, #1F1F1F 100%); border-color:#4B4B4B; color: #ffffff;}

.btn.small		{font-size: 11px; min-width: 113px; padding: 8px 20px 10px; /*padding-top:8px; padding-bottom: 10px*/ }
.btn.smaller { font-size: 11px; min-width: initial; padding: 8px 16px; }

.btn.full		{width: 100%;}

a.link,
button.link,
input[type=button].link { display: inline; background-color: transparent; text-decoration: underline; line-height: 1.2em; font-weight: 600; color: #4f81be; padding: 0; margin: 0; }

/*.link.small { font-size: 14px; font-weight: 500 !important; }*/



.btn-pay-paypal { text-align: left; background: #ffc43a; font-size: 13px; color: #000000; padding: 6px 20px; display: flex; flex-direction: row; gap: 10px; align-items: center; min-width: initial; }
.btn-pay-paypal img { width: 79px; height: auto; }

.btn-pay-paypal:hover { background: #ffb507; color: #000000; }

.btn-pay-card { text-align: left; background: #18bc22; padding: 15px 55px 15px 20px; font-size: 13px; min-width: initial; position: relative; white-space: nowrap; }
.btn-pay-card:after { content: ""; position: absolute; top: 50%; margin-top: -10px; right: 20px; width: 20px; height: 20px; background-image: url("/_assets/btn-arrow-white.png"); background-size: contain; background-repeat: no-repeat; transition: right 0.2s; }

.btn-pay-card:hover:after { right: 10px; }


.option-list { display: flex; flex-direction: row; align-items: center; margin-top: 20px; }

.option-list a,
.option-list button,
.option-list input[type=button] { padding-right: 10px; border-right: 1px solid #666666; margin-right: 10px; }

.option-list a:last-child,
.option-list button:last-child,
.option-list input[type=button]:last-child { padding-right: 0; border-right: none; margin-right: 0; }


/* FORM STYLES */
.form-container				{}
.form-row { display: flex; justify-content: space-between; margin-bottom: 15px; }
.form-cell					{width:calc(50% - 12px);}
.form-row.full .form-cell	{width: 100%;}
label						{font-size: 16px; font-weight: 700; margin-bottom: 10px; display: block;}
label span					{display: block; font-weight: 400; margin-top: 10px;}



.form-cell.error input[type=text],
.form-cell.error input[type=password],
.form-cell.error textarea,
.form-cell.error select { border-color: #cc0000; background-color: #ffeeee; }

.form-cell-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.form-cell-grid .form-cell { width: 100%; }

.form-cell-grid.wide { grid-template-columns: 100%; }

.form-cell.checkbox { display: flex; align-items: end; padding-bottom: 15px; }

.form-cell-flex { display: flex; flex-direction: row; gap: 20px; }
.form-cell-flex > div { flex-basis: 100%; width: auto; }


.form-field-error { margin-top: 5px; font-size: 15px; color: #cc0000; text-align: right; }

.form-row.centre			{justify-content: center}

.form-errors { margin: 0 0 20px 0; }
.form-errors ul { color: #cc0000; margin: 0 40px 0 20px;  }
.form-errors ul li { margin-top: 5px; font-size: 14px; line-height: 1.2em; }

textarea,
input[type="text"],
input[type="password"] { font-size: 16px; background-color: #ffffff; padding: 12px 15px; border: 1px solid #707070; width: 100%; max-width: 100%; border-radius: 2px; transition: 0.2s ease-out }
input[type="submit"]	{}
textarea				{height: 100px;}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus	{box-shadow: 0 0 0 1px #707070}

/* SELECT CSS */
.select-css				{border-radius: 0; font-size: 16px; background-color: #ffffff; padding:12px 15px; border:1px solid #707070}

/* LEGACY COOKIE BAR */
.cookieBar              {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;}
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }



textarea.product-dimensions { resize: vertical; height: calc(24px + 13em); }


.user-address-panel { margin-top: 20px; border-top: 1px solid #b0b0b0; padding-top: 20px; }

.user-address-panel:first-child { margin-top: 0; border-top: none; padding-top: 0; }

ul.address-lines { list-style-type: none; margin: 0; padding-left: 0; }
ul.address-lines li { line-height: 1.2em; }


/* SPINNER - loading.io */
.lds-ring { display: inline-block; position: fixed; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; width: 64px; height: 64px; z-index: 250000; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #975385; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #57a2ff transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}