﻿* {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: /*"Gill Sans",*/ "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3C3C3C }

h1		{font-size: 32px; font-weight: 600; margin-bottom: 0.45em;}
h2		{font-size: 30px; font-weight: 600; margin-bottom: 0.75em;}
h3		{}
h4		{}
h5		{}
h6		{}

hr		{border-color:#dddddd}

p		{line-height: 1.3em}

ul,
ol		{}

.errors ul,
.errors ol		{margin-left: 40px; color: #cc0023; line-height: 1.2em; margin-bottom: 15px;}



img     {max-width:100%; height:auto;}

.home-hero-carousel img {width:100% !important; max-width: unset;}


a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block; z-index: 10}
.inner 	{width:1400px; max-width:100%; margin:0 auto; padding: 0 20px}

.hidden { display: none; }

.cols				{display: flex; justify-content: flex-start; width: calc(100% + 30px); margin-left: -15px;}
.cols .col			{padding: 15px;}
.cols.span-3 .col	{width: 33.333%; padding:15px;}	
.cols.span-4 .col	{width: 25%; padding:15px;}	
.cols.span-5 .col	{width: 20%; padding: 15px;}	

.disabled       {filter:brightness(0.85);pointer-events:none;}
.has-image		{ display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5em; }
.has-image img	{width:25px;}

.nmb	{margin-bottom: 0 !important}

strong	{font-weight: bold}

/* HEADER */
.logo			{width:190px; max-width: 100%; display:block;}
.logo img		{width: 100%;}

/* NAV - REPLACED WITH NAV-2 */
header 			{position: relative; z-index: 100}
header .inner 	{display: flex; justify-content: space-between; align-items: center; width: 100%;}

/*nav			{background-color: #00ACC8; font-size: 17px; position: relative;}
nav ul		{display: flex; justify-content: center; width: 100%; font-size: 18px;}
nav ul li	{flex: auto; text-align: center; flex-shrink: 0;}
nav ul li a	{color: #ffffff; text-decoration: none; display: block; padding: 20px 10px}

nav ul li ul		{position: absolute; font-size: 16px; background-color:#0A80A4; background: linear-gradient(0deg, #0A80A4 0%, #00ACC8 100%); left: -999999px; column-count: 4; display: block; box-shadow: inset 0 5px 5px rgba(0,0,0,0.2); width: 100%; max-width: 100%; padding: 20px;}
nav ul li ul:after	{}

nav ul li ul li	a		{padding:10px 15px;}
nav ul li ul li:hover	{background-color: rgba(255,255,255,0.5); border-radius: 4px; transition: 0.2s ease-in-out;}

nav ul li:hover		{background-color: #0A80A4; transition: 0.2s ease-in-out; }
nav ul li:hover ul	{left: 50%; transform: translateX(-50%); transition: 0.2s ease-in-out;}*/

.header-top		{padding: 15px 0}

.header-actions ul						{display: flex; list-style: none;}
.header-actions ul li					{margin-left: 20px;position:relative;}
.header-actions ul li a					{text-decoration: none; font-size: 16px; text-align: center; display: block}
.header-actions ul li .icon				{margin-bottom: 3px; position: relative;}
.header-actions ul li .icon svg			{height: 25px; width: auto;}
.header-actions ul li .icon svg path	{fill:#3C3C3C}
.header-actions ul li .icon .count		{position: absolute; top: -7px; right: -3px; font-weight: bold; color: #ffffff; background-color: #00acc8; font-size: 13px; width: 22px; height: 22px; line-height: 22px; border-radius: 22px; }

.icon.account-dropdown					{margin-left: 50%;}

.header-actions ul li a:hover:not(.primary) 					{color: #00ACC8}
.header-actions ul li a:hover .icon svg path	{fill:#00ACC8}

.header-site-search						{position: absolute; left: 50%; transform: translateX(-50%);}

.search-box								{width:425px; position: relative; display: flex; box-shadow: 0 0 10px rgba(0,0,0,0.3); border-radius: 10px; transition: 0.2s ease-out}
.search-box input[type="text"]			{font-size: 19px; width: 100%; flex: 1; background-color: #ffffff; padding: 0; padding-left: 25px; color: #717171; border: none; border-radius: 10px 0 0 10px}
.search-box input[type="text"]:focus	{box-shadow: none}
.search-box a							{height:55px; width: 55px; background-color: #DC5626; border-radius: 0 9px 9px 0; text-align: center; vertical-align: middle; }
.search-box a svg						{transform: translateY(1px); height: 100%;}
.search-box a:hover						{background-color: #00ACC8;}
.search-box:focus-within				{box-shadow: 0 0 0 2px #DC5626}

.header-bottom				{background-color:#E3F4F7}
.header-bottom .inner		{align-items: stretch;}
.header-cell				{flex: 1; /*padding: 10px 0*/}
.header-cell p				{padding-bottom: 3px;}
.header-cell a				{display: flex; align-items: center; text-decoration: none; justify-content: center; text-align: center; font-size: 16px;}
.header-cell a svg,
.header-cell a img			{margin-right: 10px;}
.header-cell a svg path		{fill:#00ACC8}
.header-cell a strong		{font-weight: 600}
.header-cell a:hover		{color:#00ACC8}
.header-cell:nth-child(2)	{border-left: 1px solid #ffffff; border-right: 1px solid #ffffff;}

.close	{width: 20px; height: 20px; background-image: url(/_uploads/_assets/icon-close.svg); background-size: cover; position: absolute; right: 0; top: 0; display: block; cursor: pointer}

/* BASKET DROPDOWN */
.basket-box 	{position: fixed; top: 88px; right:14px; width:300px; padding: 20px; background-color: #fff; z-index:-1; 
				box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.6); opacity:0; visibility:hidden; transition: all ease-in-out .3s;}



.basket-box.open	{opacity:1;visibility:visible;z-index:999;}
/*
.basket-box:before {content:"";position:absolute;top:-16px;right:19px;border-width: 8px;border-style: solid;border-color: transparent transparent #fff transparent;}
*/

.basket-box .basket-box-close	{background-image: url(/_uploads/_assets/icon-close-dark.svg);width: 12px;height: 12px;top: 10px;right: 10px;}
.basket-box h2	{margin-bottom:.25em;font-size:25px;}
.basket-box .item-count		{font-weight: bold;color: #ffffff;background-color: #00acc8;font-size: 13px;display: inline-flex;align-items: center;justify-content: center; width: 22px;height: 22px;border-radius: 22px;}
.basket-box .cols		{justify-content:center;margin-top:10px;}
.basket-box .cols .col	{padding:5px;}
.basket-box .btn		{padding: 10px 20px;}

/* NAV 2 */
.nav-2						{ background-color: #00ACC8; font-size: 17px; position: relative; }
.nav-2:has(.parent-item li:hover):after { content: ""; position: absolute; width: 100%; height: 100vh; padding-bottom: 100vh; background: rgba(0,0,0,0.50); }

.nav-2 .inner				{ display: flex; justify-content: space-between; align-items: center; width: 1400px; max-width: 100%; margin: 0 auto; padding: 0 20px; position: relative; }

.nav-2 .parent-item			{ display: flex; justify-content: center; width: 100%; font-size: 18px; list-style: none; }
.nav-2 .parent-item li		{ flex: auto; text-align: center; flex-shrink: 0; }
.nav-2 .parent-item li:hover { background-color: #0A80A4; transition: 0.2s ease-in-out; }

.nav-2 .parent-item li.active .sub-menu, .nav-2 .parent-item li:hover .sub-menu { display: block; }
.nav-2 .parent-item li a		{ color: #ffffff; text-decoration: none; display: block; padding: 20px 10px; transition: .2s ease-in-out; }
.nav-2 .parent-item li .sub-menu { position: absolute; font-size: 16px; left: 50%; transform: translate(-50%, 0); background-color: #FFFFFF; color: #0A80A4; column-count: 5; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); width: 95%; max-width: 95%; display: none; padding: 20px; z-index: 99; }

.nav-2 .parent-item li:hover a.single-col ~ .sub-menu { column-count: unset; display: flex; }
.nav-2 .parent-item li a.single-col ~ .sub-menu .sub-item { margin-right: 30px; }

.nav-2 .parent-item li .sub-menu .sub-item, .nav-2 .parent-item li .sub-menu .sub-item .sub-item-children { list-style: none; }

.nav-2 .parent-item li .sub-menu .sub-item { padding-bottom: 1em; break-inside: avoid; }
.nav-2 .parent-item li .sub-menu .sub-item li:hover { background-color: unset; }
.nav-2 .parent-item li .sub-menu .sub-item li:hover > a { color: #DC5626; }

.nav-2 .parent-item li .sub-menu .sub-item a			{ padding: 5px; text-align: left; font-weight: bold; color: #0A80A4; }

.nav-2 .parent-item li .sub-menu .sub-item li .sub-item-children li:hover		{ background-color: unset; }
.nav-2 .parent-item li .sub-menu .sub-item li .sub-item-children li:hover a		{ color: #DC5626; margin-left: 1px; }
.nav-2 .parent-item li .sub-menu .sub-item li .sub-item-children li a			{ font-weight: normal; }


/* black friday */
.nav-2			{ background-color: #CC382E; }
.nav-2 a.bold	{ font-weight: 700; }


/* HOME HERO SECTION */
.home-hero-section		{background-color: #DDDDDD; width: 100%; font-size: 0; position: relative;}
.home-hero-carousel		{}

.slick-dots							{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; display: flex;}
.slick-dots li						{width: 15px; height: 15px; border-radius: 15px; margin: 0 5px;}
.slick-dots li button				{width: 100%; height: 100%; background-color: #ffffff; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.2); border: 0px solid #ffffff;}
.slick-dots li.slick-active button	{background-color: #00ACC8}

.carousel-arrows			{margin-top: -5px; flex-shrink: 0; padding-left: 20px;}
.slick-arrow				{width: 42px; height: 42px; border-radius: 42px; border:2px solid #3c3c3c; background-image: url(/_uploads/_assets/slick-next.svg); font-size: 0; background-color: #ffffff;}
.slick-arrow.slick-prev		{transform: rotate(180deg); margin-right: 6px}
.slick-arrow.slick-disabled	{opacity: 0.25}

/* QUICK SHOP */
.quick-shop-section			{background: rgb(17,161,188); background: linear-gradient(180deg, rgba(17,161,188,0.05) 0%, rgba(17,161,188,0.2) 100%); padding: 45px 0}
.quick-shop-section .cols	{justify-content: space-between}

.quick-shop-card			{background-color: #ffffff; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 160px; position: relative; transition: 0.2s ease-out}
.quick-shop-card .icon		{flex: 1; display: inline-flex; align-items: flex-end}
.quick-shop-card p			{flex: 1; margin-top: 1em; font-size: 20px; color: #5D5D5D; line-height: 1.1em}
.quick-shop-card p strong	{font-size: 16px; color: #DC5626}

.quick-shop-card:after		{height: 40px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%); content: ''; position: absolute; bottom: -41px; transition: 0.2s ease-out}

.quick-shop-card:hover			{transform: translateY(-10px);}
.quick-shop-card:hover:after	{transform: translateY(20px);}

/* SECTION INTRO */
.section-intro				{max-width: 100%; margin-bottom: 0.5em}
.section-intro h2			{margin-bottom: 0.5em}
.section-intro p			{line-height: 1.4em; margin-bottom: 1em; font-size: 18px;}
.section-intro p:last-child	{margin-bottom: 0}

.intro-and-buttons			{display: flex; justify-content: space-between}

/* PRODUCT CAROUSEL */

.product-carousel .slick-track,		
.product-carousel-similar .slick-track {display: flex;}

.slick-track,
.slick-list { width: 100%; min-width: 100%; }

.product-carousel .slick-slide,
.product-carousel-similar .slick-slide	{height: auto}

.similar-product-listing	{padding: 20px 0}

/* PRODUCT TYPE SECTION */
.home-product-listing	{padding: 35px 0}
.home-product-listing .breadcrumb {margin-top:0;}

.product-type-section	{padding: 45px 0}
.product-type-card		{display: flex; flex-direction: column; background-color: red; border-radius: 3px; height: 100%; position: relative; transition: 0.2s ease-out}

.ptc-image				{display:flex; align-items: center; flex: 1; flex-shrink: 0; justify-content: center; padding: 30px 40px; position: relative;}
.ptc-image:after		{height: 40%; position: absolute; width:calc(100% - 20px); left: 10px; bottom: 0; content: ''; background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 100%); transition: 0.2s ease-out}
.ptc-image img			{position: relative; z-index: 2}
.ptc-text				{font-size: 18px; font-weight: 600;  text-align: center; padding:0 20px 20px;}

.product-type-card:hover					{background-color:#00ACC8 !important}
.product-type-card:hover .ptc-image:after	{opacity: 0.3; width: 100%; left: 0;}
.product-type-card:hover p					{color: #ffffff}

.col:nth-child(1) .product-type-card	{background-color: #FAE1D8}
.col:nth-child(2) .product-type-card	{background-color: #E3FFED}
.col:nth-child(3) .product-type-card	{background-color: #FAF5D8}
.col:nth-child(4) .product-type-card	{background-color: #EAF2FC}

/* BREADCRUMBS */
.breadcrumb		{display:flex;gap:1.5em;list-style:none;margin-top:2em;margin-bottom:2em;}
.breadcrumb li	{position:relative;}
.breadcrumb li:not(:last-child):before	{content:"";position:absolute;width:7px;height:7px;top:55%;right:-20px;background-image:url(/_uploads/_assets/icon-chevron-down.svg);background-size:100%;background-repeat:no-repeat;transform: translate(-50%, -50%) rotate(-90deg);}
.breadcrumb li a	{text-decoration:none;font-size:13px;}

/* PRODUCT LISTING CARD */
.product-card					{display: flex; flex-direction: column; box-shadow: 0 0 15px rgba(0,0,0,0.1); border-radius: 3px; text-align: center; height: 100%; background: #ffffff; position: relative; overflow: hidden; transition: 0.2s ease-in-out}

.product-card-image-container	{width: 100%; height: 275px; position: relative; margin-bottom: 15px;}

.product-card-image			{position: absolute; left: 12%; top:12%; width: 76%; height: 76%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: 0.2s ease-out}

img.product-card-image		{position: absolute; left: 12%; top:12%; width: 76%; height: 76%; object-fit: contain; object-position: center; transition: 0.2s ease-out}


.image-text-card:hover,
.product-card:hover	{box-shadow: 0 0 15px rgba(0,0,0,0.35);}

.product-card-text								{padding-left: 15px; padding-right: 15px;}
.product-card-text p							{color:#3C3C3C; font-size: 15px; line-height: 1.2em}

.product-card-text p.price								{display: flex; justify-content: center; flex-wrap: wrap; font-size: 24px; font-weight: 700; margin: 15px 0}
.product-card-text p.price span						{display: inline-block; margin: 0 8px; position: relative;}
.product-card-text p.price span.old-price			{ color: #9ca3af !important; font-size: 20px; font-weight: normal !important }
.product-card-text p.price span.old-price:after { left: -4px; right: -4px; top: 50%; margin-top: -1px; height: 2px; background-color: #9ca3af; content: ''; position: absolute; }

.product-card-button			{align-self: flex-end; width: 100%; margin-top: auto; position: relative; z-index: 20}
.product-card-button .product-select	{width: 100%;margin: auto;opacity:0;visibility:hidden;transition:all ease-in-out .25s;}
.product-card-button .product-select .qty	{justify-content:space-between;border-radius: 0;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.product-card-button .product-select .qty button {height:30px;}
.product-card-button .product-select.active		{opacity:1;visibility:visible;}
.product-card-button .product-select.active ~ .btn	{margin:0;}
.product-card-button .btn		{border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 10px; box-shadow: none; display: block; width: 100%; text-wrap: wrap;}
.product-card-button .btn:hover	{background-color: #3c3c3c; transform: none}
.product-card .product-card-button .btn { background-color: #00ACC8; text-align: center; font-size: 16px; padding-top: 15px; padding-bottom: 15px; cursor: pointer; transition: all ease-in-out .25s; }

.product-card.sale .product-card-text p.price span	{color:#DC5626}

.product-card-button,.add-to-basket{position:relative;}
.product-card-button .ajax-spinner,.add-to-basket .ajax-spinner{display:none;position:absolute;inset:0;background:rgba(255,255,255,.6);z-index:10;border-radius:6px;}
.product-card-button.loading .ajax-spinner,.add-to-basket.loading .ajax-spinner{display:block;}
.product-card-button .ajax-spinner:before,.add-to-basket .ajax-spinner:before{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.7);border-radius:50%;animation:spin .8s linear infinite;}
.product-card-button.loading .btn,.add-to-basket.loading .btn{pointer-events:none;opacity:.7;}
@keyframes spin{to{transform:rotate(360deg);}}

/* BRAND PAGE */
.brand-listing-page		{margin: 35px 0;}

.brand-pagination-container											{ min-height: calc(100vh - 215px); }
.brand-pagination-container .alphabet-navigation					{ display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.brand-pagination-container .tile, .alphabet-tile					{ width: 35px; height: 35px; margin: 5px; display: flex; justify-content: center; align-items: center; background-color: #a3a3a3; color: white; font-size: 20px; border-radius: 5px; cursor: pointer; text-decoration: none; }
.brand-pagination-container .tile.active, .alphabet-tile.active		{ background-color: #00acc8; }
.brand-pagination-container .tile.special							{ background-color: #a3a3a3; }
.brand-pagination-container .pagination-content						{ display: flex; justify-content: center; }
.brand-pagination-container .pagination-content ul					{ column-count: 5; width: 80%; }
.brand-pagination-container .pagination-content li					{ list-style: none; margin-bottom: 10px; }
.brand-pagination-container .pagination-content a					{ text-decoration: none; }

/* IMAGE TEXT CARD */
.image-text-card			{display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 0 15px rgba(0,0,0,0.1); border-radius: 3px; height: 100%; background: #ffffff; position: relative; overflow: hidden; transition: 0.2s ease-in-out;}
.itc-text					{padding: 20px;}
.itc-text h3				{font-weight: 600; font-size: 26px; margin-bottom: 0.5em}
.itc-text p					{font-size: 18px; line-height: 1.2em}
.itc-text p.date			{font-size: 14px; margin-bottom: 0.5em}
.itc-image-container		{height: 275px; position: relative; overflow: hidden;}
.itc-image					{background-size: cover; background-position: center; width: 100%; height: 100%;}
.image-text-card .btn		{width: 100%; text-align: center; border-radius: 0 0 3px 3px; background-color: #00ACC8; padding-left: 10px; padding-right: 10px;}
.image-text-card .btn:hover	{transform: none}

.general-listing-section	{padding: 0 0 40px}

.general-listing-section .cols.span-2	{flex-wrap: wrap}
.general-listing-section .cols.span-2 .col	{width: 50%;}

/* YOU MAY LIKE CAROUSEL */
.trending-products-outer		{overflow: hidden;}
.trending-products-list			{display: flex; overflow-x: auto; padding-top: 10px; padding-left: 2px; padding-bottom: 12px;}
.trending-products-list .col	{flex-shrink: 0; margin-right: 8px;}

.tp-lozenge			{border-radius: 100px; background-color: #F3FAFB; display: flex; font-size: 17px; font-weight: 600; padding: 6px 15px 6px 6px; text-decoration: none; align-items: center; transition: 0.2s ease-out; box-shadow: 0 0 10px rgba(0,0,0,0)}
.tp-lozenge span	{width:40px; height: 40px; border-radius: 40px; display: inline-flex; align-items: center; justify-content: center; background-color: red; margin-right: 10px;}
.tp-lozenge:hover	{box-shadow: 0 0 10px rgba(0,0,0,0.2)}

/* FLASHERS */
/*
.flasher {display: flex; justify-content: center; align-items: flex-end; width: 110px; height: 110px; background-color: #DC5626; position: absolute; left:-55px; top:-55px; z-index: 2; transform: rotate(-45deg);}
.flasher span	{display: block; margin-bottom: 10px; font-size: 14px;  color: #ffffff; font-weight: 600; text-transform: uppercase}
*/


.flasher 		{display: flex; justify-content: left; align-items: center; width: 140px; height: 30px; background-color: #DC5626; position: absolute; left: 0; top: 10px; z-index: 2; padding-left: 10px;}
.flasher span	{display: block; font-size: 16px; color: #ffffff; font-weight: 700; text-transform: uppercase; }

.recommended .flasher 		{width: 125px; height: 125px; right:-65px; top:-65px; background-color: #08C97B;} 
.recommended .flasher span	{font-size: 9px; margin-bottom: 2px}


.pdi-container .flasher {display: flex; justify-content: center; align-items: flex-end; width: 150px; height: 150px; background-color: #DC5626; position: absolute; left:-75px; top:-75px; z-index: 2; transform: rotate(-45deg);}
.pdi-container .flasher span	{display: block; margin-bottom: 10px; font-size: 18px;  color: #ffffff; font-weight: 600; text-transform: uppercase}

.recommended .btn,
.product-listing-page .product-card.recommended .btn { background-color: #08C97B }

/* PRODUCT PULLOUT */
.pullout-section			{background: linear-gradient(-45deg, #00ACC8 0%, #00ACC8 50%, #B4EFFA 100%); margin: 40px 0; padding: 40px 0; position: relative;}
.pullout-section-text		{width: 490px; max-width: 100%; color: #ffffff;}
.pullout-section-text h2	{ font-weight: 600; margin-bottom: 0.75em}
.pullout-section-text p		{line-height: 1.4em; margin-bottom: 1.2em; font-size: 20px;}

.pullout-section:before		{background-image: url(/_uploads/_assets/bg-shape.svg); position: absolute; left: 0; top:0; height: 100%; width: 50%; background-size: cover; background-position: right bottom; content: ''; display: block;}

.pullout-section .cols		{align-items: center; position: relative; z-index: 2}
.pullout-section .col		{width: 50%; flex-shrink: 0;}
.pullout-section-image		{width: 100%;}
.pullout-section-image img	{margin:40px 0 0; border-radius: 3px;}

.pullout-section.flipped			{background: linear-gradient(45deg, #00ACC8 0%, #00ACC8 50%, #B4EFFA 100%);}
.pullout-section.flipped .cols		{flex-direction: row-reverse}
.pullout-section.flipped:before		{right: 0; left: auto;  transform: scaleX(-1);} 

/* NEWSLETTER SIGN UP */
.newsletter-sign-up						{padding: 60px 0; background-color: rgb(204 187 129 / 20%);}
.newsletter-sign-up	h2					{margin-bottom: 0.5em}
.newsletter-sign-up p					{line-height: 1.3em}
.newsletter-sign-up .cols				{justify-content: space-between; align-items: center;}
.newsletter-sign-up input[type="text"]	{font-size: 16px; height: 100%;}
.newsletter-sign-up .form-cell			{width: 200px; margin-left: 10px;}
.newsletter-sign-up .form-cell .btn		{width: 100%;margin-top:6px;}
.nl-form-col							{display: flex; flex-direction: column}
.nl-form								{display: flex; justify-content: flex-end}
.nl-form .btn:hover						{transform: none}

/* ICON LISTING CARD */
.icon-list-section			{padding-top: 40px;}
.icon-list-section h3		{font-size: 20px; font-weight: 600; margin: 0 0 0.5em;}
.icon-list-section p		{font-size: 16px; line-height: 1.3em; margin-bottom: 0.5em}
.icon-list-section p strong	{color: #DC5626}
.icon-list-section a		{font-weight: 600; font-size: 18px; text-decoration: none}
.icon-card					{display: flex; border-radius: 3px; height: 100%; align-items: center; box-shadow: 0 0 20px rgba(0,0,0,0.05); padding: 20px; position: relative; transition: 0.3s ease-out}
.icon-card:hover			{box-shadow: 0 0 20px rgba(0,0,0,0.2);}
.ic-icon					{width: 110px; flex-shrink: 0; padding-right: 30px; display: inline-flex; align-items: center}

/* LISTING HERO */
.listing-hero-container { position: relative; margin-bottom: 40px; padding: 10px 20px; display: flex; align-items: center; background: linear-gradient(90deg, rgb(1 155 180) 0%, rgb(145 226 247) 100%, rgba(242,251,252,0) 100%);}

.listing-hero-text				{width: 100%; max-width: 100%; position: relative; z-index: 3}
.listing-hero-text h1			{font-size: 45px; color: #ffffff; margin: 0px !important;}
.listing-hero-text ul,
.listing-hero-text p			{font-size: 18px;line-height: 1.3em;color: #ffffff; margin-bottom: 0.75em}
.listing-hero-text ul			{margin: 1em}
.listing-hero-container .inner	{min-height: 120px; display: flex; align-items: center;}
.listing-hero-image				{position: absolute; right: 0; top:0; height: 100%; width: 100%; background-size: cover; background-position: right center;}

.brand .listing-hero-text p			{font-size: 26px !important; color: #ffffff; margin: 6px 0 0 0 !important;}



/* This is a temporary hide for Product Listing Pages */
.product-listing-page .listing-hero-image	 {background-image: unset !important;}

.listing-hero-container:after	{background-image: url(/_uploads/_assets/logo-th-leaf.svg); width: 50%; position: absolute; background-position: center right; right: 0; top: 0px; bottom: 0px; background-size: cover; content: ''; z-index: 0; opacity: 0.1;}

/* CATEGORY LANDING HERO */
.listing-hero-container.category-landing-hero-container							{margin-bottom: 0}
.listing-hero-container.category-landing-hero-container:before					{width: 60%; height: 100%; position: absolute; left: -160px; top:0; content: ''; z-index: 2; background: linear-gradient(90deg, rgba(0,172,200,1) 0%, rgb(0,172,200,0.5) 100%); transform: skewX(-24deg);}
.listing-hero-container.category-landing-hero-container:after					{display: none}
.listing-hero-container.category-landing-hero-container .listing-hero-text		{max-width: 555px; width: 100%;}
.listing-hero-container.category-landing-hero-container .listing-hero-text h1	{font-size: 50px;}
.listing-hero-container.category-landing-hero-container .listing-hero-text p	{font-size: 20px; margin-bottom: 0.5em}
.listing-hero-container.category-landing-hero-container .inner					{min-height: calc(13.333vw - 20px);}

.listing-hero-container.category-landing-hero-container .listing-hero-text .btn	{margin-top: 20px;}

/* PRODUCT LISTING */
.product-listing		{padding:0 0 40px 0}
.product-listing-cols	{display: flex; justify-content: space-between}
.col-listing			{width: 80%; padding-left: 50px; max-width: 100%;}

.filter-panel	{border:1px solid #dddddd; padding: 0px; padding-bottom: 5px; margin-bottom: 10px; max-height: 320px; border-radius: 3px; overflow-y: auto}

.col-filter								{min-width: 215px; width: 20%}
.col-filter ul							{list-style: none; padding: 0 15px;}
.col-filter p							{font-weight: 600; font-size: 18px; position: sticky; top: 0; background-color: #ffffff; z-index: 5; padding: 10px 15px;}
.col-filter .container					{display: flex; padding: 0; justify-content: space-between; font-size: 14px; align-items: center; line-height: 1.1em; margin-bottom: 8px;}
.col-filter .container .checkmark		{position: relative; display: block; width: 17px; height: 17px; border-radius: 3px; border:1px solid #DDDDDD;}
.col-filter .container .checkmark:after	{left: 5px; top: 2px; width: 3px; height: 7px; border-width: 0 2px 2px 0;}
.container input:checked ~ .checkmark	{background-color:#00ACC8; border-color:#00ACC8}

.col-filter-inner 	{}

.lower-copy {padding: 30px; background-color: #f5f2e7; border-radius: 2px; margin-top: 20px; column-gap: 40px; font-size: 18px; column-count: 2;}

.lower-copy p,
.lower-copy ul,
.lower-copy li {font-size: 18px; line-height: 1.2em; color: #3C3C3C; margin-bottom: 0.7em; margin-left: 0px; }

.lower-copy ul {margin-left: 20px;}

/* TRENDING PRODUCTS */

section.trending-products-section {padding-top: 35px; }



/* LISTING COL */
.listing-header				{display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em}
.col-listing h1				{font-size: 30px; margin-bottom: 0}
.col-listing h2				{font-size: 30px; margin-bottom: 0}

.btn.btn-more-info			{font-size: 11px;  cursor: pointer; margin-left: 20px; display: flex; flex-shrink: 0; align-items: center; padding: 10px 15px; border-radius: 20px; background-color: #DC5626}
.btn.btn-more-info:before	{width:20px; height: 20px; content: ''; background-image: url(/_uploads/_assets/icon-info.svg); background-size: contain; background-repeat: no-repeat; margin-right: 5px;}

.more-information		{display: none}
.more-information p		{line-height: 1.5em; margin-bottom: 1em}
.more-information h3	{font-size: 22px; font-weight: 700; margin-bottom: 0.5em}
.more-information h4	{font-size: 18px; font-weight: 600; margin-bottom: 0.25em}

.uses		{padding: 30px; background-color: #E4FAFF; margin: 1.5em 0}
.uses h3	{ margin-bottom: 0.75em}

.recommended				{list-style: none; line-height: 1.2em; font-weight: 600}
.recommended li				{margin-bottom: 0.4em; position: relative; padding-left: 15px;}
.recommended li a			{text-decoration: none; color: #00ACC8}
.recommended li a:before	{content: '>'; margin-right: 4px; position: absolute; left: 0; top: 1px; display: block;}
.recommended li a:hover		{color: #3c3c3c}

/* SORT AND FILTER */
.sort-filter			{}
.sort-container			{display: inline-flex; align-items: center;}
.sort-container	label	{margin: 0 10px 0 0; display: block; flex-shrink: 0}
.sort-container .select-css {margin:0;}

.listing-header-button	{display: flex; align-items: center;}

.btn.btn-filter					{background-color: #ffffff; border: 1px solid #717171; border-radius: 3px; font-weight: normal; box-shadow: none; padding: 0 20px; display: inline-flex; align-items: center; color: #3c3c3c; font-size: 16px;}
.btn.btn-filter	svg				{margin-right: 10px;}
.btn.btn-filter:hover			{transform: none; color: #ffffff; border-color:#3c3c3c}
.btn.btn-filter:hover svg path	{fill:#ffffff}

/* PRODUCT LISTING */	
/*.product-listing-page .product-card.sale .btn		{background-color: #DC5626}*/
.product-listing-page .product-card .btn			{background-color: #00ACC8; text-align: center; font-size: 16px; padding-top: 15px; padding-bottom: 15px; cursor: pointer; transition: all ease-in-out .25s;}
.product-listing-page .product-card .btn:hover		{background-color: #3c3c3c!important}
.product-listing-page .cols.span-5,
.product-listing-page .cols.span-4					{flex-wrap: wrap; margin-top: 10px;}
.product-listing-page .product-card-image-container	{}

.product-card-image-container .promo-text { padding: 10px; position: absolute; width: 60%; z-index: 10; }
.product-card-image-container .promo-text.top-left { left: 0; top: 20px; }
.product-card-image-container .promo-text.center { left: 20%; top: 50%; text-align: center; } 
.product-card-image-container .promo-text.bottom-right { right: 0; bottom: 20px; } 

.product-detail .promo-text { padding: 10px; position: absolute; width: 34%; z-index: 10; }
.product-detail .promo-text.top-left { left: 0; top: 20px; }
.product-detail .promo-text.center { left: 33%; top: 50%; text-align: center; } 
.product-detail .promo-text.bottom-right { right: 0; bottom: 20px; } 

.product-listing-page .sale .flasher span { font-size: 12px; }

/* PAGINATION */
.pagination-container				{border-top:1px solid #DDDDDD; padding-top: 20px; margin-top: 20px; display: flex; justify-content: flex-end; align-items: stretch;}
.pagination-container ul			{display: flex; list-style: none; margin-left: 15px;}
.pagination-container ul li			{margin-left: 4px;}
.pagination-container ul li	a		{display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; text-decoration: none; border-radius: 3px;}
.pagination-container ul li	a:hover	{background-color: #f1f1f1}
.pagination-container ul li.active a	{background-color: #DC5626; color: #ffffff;}
.pagination-container ul li.next a		{background-image: url(/_uploads/_assets/chevron-next.svg); background-position: center; background-repeat: no-repeat}

.pagination-container ul                { display: flex; list-style: none; margin-left: 15px; }
.pagination-container ul li             { margin-left: 4px; }
.pagination-container ul li span        { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; text-decoration: none; border-radius: 3px; }
.pagination-container ul li span:hover  { background-color: #f1f1f1 }
.pagination-container ul li span.active { background-color: #DC5626; color: #ffffff; }
.pagination-container ul li a.next      { background-image: url(/_uploads/_assets/chevron-next.svg); background-position: center; background-repeat: no-repeat }
.pagination-container ul li a.previous  { background-image: url(/_uploads/_assets/chevron-next.svg); background-position: center; background-repeat: no-repeat; transform: rotate(180deg); }

.btn.btn-view-all			{font-size: 12px; padding: 0 15px; box-shadow: none; background-color: #FCEFEB; color: #DC5626; display: flex; align-items: center}
.btn.btn-view-all:hover		{color: #ffffff; transform: none}

/* WISHLIST */
.product-listing-page-full					{padding-top: 40px;}
.product-listing-page-full	.col-listing	{width:100%; padding: 0}

/* BUTTON TRASH */
.btn-trash			{transition: 0.3s ease-out; display: inline-flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 50px; position: absolute; right: 10px; top:10px; z-index: 20; width: 50px; height: 50px;}
.btn-trash:hover	{}

.btn-trash #Union_1	{transform-origin: center; fill: #3C3C3C}
.btn-trash #Union_2	{transform-origin: center; fill: #3C3C3C}
.btn-trash svg		{overflow: visible;}

.btn-trash:hover svg #Union_1		{animation:0.4s binlid forwards ease-out;}
.btn-trash:hover svg #Union_2		{animation:0.2s bin forwards ease-out;}

@keyframes binlid {
	0%		{transform: rotate(0) translateY(0)}
	25%		{transform: rotate(5deg) translateY(-6px)}
	50%		{transform: rotate(0deg) translateY(-6px)}
	75%		{transform: rotate(-5deg) translateY(-6px)}
	100%	{transform: rotate(0) translateY(0px)}
}

@keyframes bin {
	0%		{transform: rotate(0) translate(1.53 3.047)}
	50%		{transform: rotate(-5deg) translateY(0)}
	100%	{transform: rotate(0) translateY(1.53 3.047)}
}


/* PRODUCT DETAIL */
.product-detail				{padding: 35px 0}
.product-detail-top .cols	{width: 100%; margin: auto}
.product-detail .inner		{width: 1200px;}

.product-detail .breadcrumb {margin-top:0;}

.col-product-detail-image	{width: 50%; max-width: 100%; flex-shrink: 0}
.pdi-container				{ box-shadow: 0 0 20px rgba(0,0,0,0.1); border-radius: 3px; padding: 20px; position: relative; overflow: hidden; }
.pdi						{max-width: 100%; max-height: 580px; margin: auto; display: block;}

/* PRODUCT DETAIL MIDDLE */
.col-product-detail-text					{padding: 0 0 0 40px;}
.col-product-detail-text h1					{font-size: 35px; font-weight: 600; margin-bottom: 0.45em; line-height: 1.2em}
.col-product-detail-text h1 span			{font-weight:300;}
p.product-code,
.col-product-detail-text p.product-code		{font-size: 14px;}
.col-product-detail-text p					{font-size: 18px; line-height: 1.4em; margin-bottom: 1em}

.col-product-detail-text p.delivery-text	{font-size: 16px; color: #DC5626}

.col-product-detail-text hr					{margin: 25px 0}

.review-stars		{display: inline-block; position: relative; width: 112px; height: 19px; margin-right: 8px;}
.review-stars.one	{width: 20px;}
.review-stars.two	{width: 45px;}
.review-stars.three	{width: 68px;}
.review-stars.four	{width: 91px;}
.review-stars.five	{width: 112px;}

.review-score		{display: flex; margin: 15px 0; align-items: center;}
.review-score p		{font-size: 14px; margin-bottom: 0}

h2.price			{font-size: 35px; font-weight: 600; color: #00ACC8}

.product-actions	{display: flex; flex-direction: column; margin-bottom: 5px;}

.qty							{display: flex; border-radius: 4px; background-color: #ffffff; border:1px solid #00ACC8; height: 100%}
.qty.qty-secondary						{border-color:#DC5626;}
.qty.qty-secondary button.plus			{background-image: url(/_uploads/_assets/icon-plus-orange.svg);}
.qty.qty-secondary button.minus			{background-image: url(/_uploads/_assets/icon-minus-orange.svg);}
.qty button						{width:35px; background-color: #ffffff; border:none; background-size: 10px auto; background-repeat: no-repeat; background-position: center; border-radius: 4px; transition: 0.2s ease-out}
.qty button.plus				{background-image: url(/_uploads/_assets/icon-plus.svg);}
.qty button.minus				{background-image: url(/_uploads/_assets/icon-minus.svg);}
.qty button:hover				{background-color: #e3f3f7;}
.qty input[type="text"]			{width:40px; text-align: center; border: none; font-size: 18px; padding: 0; font-weight: normal; flex-grow: 0; margin: 0 4px; border-radius: 3px;}
.qty input[type="text"]:focus	{box-shadow: none}
.qty input[type="number"]		{width:40px; text-align: center; border: none; font-size: 18px; padding: 0; font-weight: normal; flex-grow: 0; margin: 0 4px; border-radius: 3px;}
.qty input[type="number"]:focus	{box-shadow: none}

.qty-and-button					{display: flex; margin-bottom: 25px;}
.qty-and-button .atb.btn		{display: flex; align-items: center; margin-left: 20px; padding-top:12px; padding-bottom: 12px;}

#product-added-panel			{padding: 30px; border-radius: 3px; width: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.1); text-align: center; margin: 0 auto 40px; background-color: #caf4c8;}
#product-added-panel h3.title	{margin-bottom: 8px; font-size: 24px; font-weight: 600}
#product-added-panel .btn		{padding-top:13px; padding-bottom: 13px;}
#product-added-panel p			{font-size: 18px;}

.question-wish-list 				{display: flex; align-items: center; }
.question-wish-list svg				{height: 17px; width: auto; margin-right: 6px;}
.question-wish-list a				{display: flex; align-items: center; font-size: 18px; text-decoration: none; font-weight: 600}
.question-wish-list a:last-child	{margin-left: 15px;}
.question-wish-list a:hover			{color: #DC5626}

.btn-product-wishlist		{ transition: 0.3s ease-out; display: inline-flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 50px; position: absolute; right: 10px; top: 10px; z-index: 20; width: 50px; height: 50px; }
.btn-product-wishlist:hover { background-color: #cccccc }

.product-wish-list								{ display: flex; align-items: center; }
.product-wish-list svg							{ height: 17px; width: auto; }
.product-wish-list a							{ display: flex; align-items: center; font-size: 18px; text-decoration: none; font-weight: 600 }
.product-wish-list a:last-child					{ margin-left: 15px; }
.product-wish-list a:hover						{ color: #DC5626 }
.product-wish-list .added svg.fav-heart .cls-1	{ fill: #DC5626 }

svg.fav-heart .cls-1 { fill: #ffffff }
svg.fav-heart .cls-2 {fill:#DC5626}

.product-detail .added svg.fav-heart .cls-1 { fill: #DC5626 }

.info-accordion { margin: 30px 0; }
.info-accordion .accordion-item { margin: 0 0 22px 0; }
.info-accordion .accordion-item h3 { font-size: 22px; line-height: 1.2; color: #333; border-bottom: 1px solid #ddd; font-weight: 600; padding: 15px 40px 15px 0; }
.info-accordion .accordion-expanded { padding: 14px 18px; background: #f4f9fb; border: 1px solid #e7eff3; border-radius: 4px; font-size: 18px; line-height: 1.4em; }
.info-accordion .accordion-expanded p { margin: 0 0 10px 0; line-height: 1.55; }
.info-accordion .accordion-expanded p:last-child { margin-bottom: 0; }
.info-accordion .accordion-expanded ul { margin: 8px 0 0 0; padding-left: 20px; }
.info-accordion .accordion-expanded li { margin: 6px 0; line-height: 1.5; }
.info-accordion .accordion-expanded strong, .info-accordion .accordion-expanded .label { font-weight: 600; }
.info-accordion .accordion-expanded .label { display: block; margin: 0 0 4px 0; }
.info-accordion .accordion-item.active h3 span { transform: rotate(-180deg); }


.col-product-detail-text .old-price		{ color: #a1a1a1; text-decoration: line-through;  font-size: 24px; }
.col-product-detail-text .current			{ margin-right: 10px; }



/* PRODUCT DETAIL SIMILAR */
.col-product-detail-similar	{width: 240px; flex-shrink: 0;}
.similar-box				{border:1px solid #E6F5F8; text-align: center; padding-bottom: 15px;}
.similar-box h3				{background-color:#E6F5F8; padding: 10px; font-size: 14px; margin-bottom: 10px;}

.similar-card				{padding:8px 15px;}
.similar-card img			{max-height: 110px; width: auto;}
.similar-card p				{font-size: 14px; margin: 5px 0}

.similar-card .product-card-text					{padding: 0}
.similar-card .product-card-text p.price			{font-size: 18px; font-weight: 600; margin:0; color: #00ACC8}
.similar-card.sale .product-card-text p.price span	{color: #DC5626}

.similar-card a			{text-decoration: none; display: block}
.similar-card a:hover	{opacity: 0.8}

/* BASKET */
.basket-page						{padding: 40px 0}
.basket-page h1						{font-size: 30px; font-weight: 400;  margin-bottom: 0.45em;}
.basket-section .cols				{display: flex; justify-content: space-between; }
.basket-section .col-basket			{width:65%; padding: 20px}

.basket-item						{border-bottom: 1px solid #DDDDDD; padding-bottom: 20px; margin-bottom: 20px; position: relative;}
.basket-items .basket-item:only-child {border:0;}
.basket-item .product-select		{padding-left: 120px; margin-top: 10px;}
.basket-item .product-select label	{font-size: 14px; margin-bottom: 8px; display: block;}

.basket-image						{width:100px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; margin-right: 20px;}
.basket-image img					{width:auto; max-height: 90px;}
.basket-item h3.price				{font-size: 18px; color:#00ACC8; line-height: 1.2em; margin-bottom: 10px; font-weight: 600}
.basket-image-text					{display: flex; align-items: flex-start; padding-right: 110px}
.basket-image-text h2				{font-size: 20px; color:#000000; line-height: 1.2em; text-transform: none; margin-bottom: 0.35em; font-weight: 400}
.basket-image-text a				{text-decoration:none;}

.basket-image-text h4				{font-size: 16px; color:#000000; line-height: 1.2em; margin-bottom: 0.25em;}
.basket-image-text p				{font-size: 15px; color:#3c3c3c; line-height: 1.2em;}

.basket-item .quantity-total		{display: flex; justify-content: space-between; align-items: center;}
.basket-item .quantity-total h3		{font-size: 24px; font-weight: 600}
.basket-item .quantity-total label	{font-size: 16px;}

.basket-item .qty input[type="text"]	{height: 35px;}
.basket-item .qty input[type="number"]	{height: 35px;}

.remove						{font-size: 14px; padding: 5px 8px; border-radius: 4px;}
.remove:hover				{background-color: #cccccc}
p.text-qualify				{background-image:url(/_uploads/_assets/tick.svg); line-height: 1.2em; background-size: 20px auto; background-position:top 3px left; background-repeat: no-repeat; padding-left: 30px;}
p.text-qualify strong		{font-weight: 600}

/* BASKET SUMMARY */
.col-basket-summary			{width:30%; padding: 20px;}
.col-basket-summary .btn	{width:100%; margin-bottom: 20px;}
.col-basket-summary .select-css	{font-size: 16px; margin-top: 15px;}
.summary-outer				{position: sticky; top:0}
.summary-box				{padding: 30px; box-shadow: 0 0 20px rgb(0 0 0 / 10%); background-color: #ffffff;}
.summary-box h5				{font-size: 22px; margin-bottom: 0.8em; font-weight: 600}
.summary-box h6				{font-weight: 600; margin-bottom: 6px; font-size: 18px;}
.summary-box p				{font-size: 16px;}
.summary-box .btn			{font-size: 18px; text-align: center; padding-left: 10px; padding-right: 10px;}
.grand-total				{border-top:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; padding-top: 15px; margin-top: 15px; margin-bottom: 15px;}
.grand-total p				{display: flex; justify-content: space-between; margin-bottom: 15px;}
.grand-total p.text-gt		{font-size: 22px;}
.grand-total p.text-gt strong	{font-weight: 600}
.summary-secure				{text-align: center;}
.summary-secure p			{font-size: 14px; margin-bottom: 0.5em;}
.summary-secure img			{width:300px;}

.enquiry-text				{text-align: center; margin-top: 20px;}
.enquiry-text a				{text-decoration:none;}
.enquiry-text span			{display: block; font-size: 25px; margin-top: 10px;}

.summary-box .discount-flex 				{display: flex; justify-content: space-between; margin-bottom: 5px;  }
.summary-box .discount-container .btn 	{width: 80px; font-size: 16px; padding: 5px;  }
.summary-box .discount-container input 	{height: 40px }
.summary-box .discount-container input[type=text] { margin-right: 10px; }


/* CHECKOUT PAGE */
.checkout-page				{padding: 40px 0; background: linear-gradient(0deg, rgba(17,161,188,0.2) 0%, rgba(17,161,188,0.05) 50%, rgba(17,161,188,0.2) 100%); position: relative;}
.checkout-form-panel		{width: 600px; max-width: 100%; margin:0 auto; padding: 40px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 0 30px rgb(0 0 0 / 11%); position: relative; z-index: 2}
.checkout-form-panel h1		{margin-bottom: 0.5em; font-weight: 600}
.checkout-form-panel h2		{font-size: 16px}
.checkout-form-panel p a.btn {margin-top: 10px;}

.checkout-page:before		{background-image: url(/_uploads/_assets/logo-th-leaf.svg); width: 50%;  position: absolute; background-position:top right; left: 0; top:0px; bottom: 0px; background-size: cover; content: ''; z-index: 0; opacity: 0.1}

.privacy-container { background-color: #fff; padding: 10px; padding: 10px; border: 1px solid #dddddd; border-radius: 3px;}
.privacy-container .container div { color: #000; }

.privacy-container.error { background-color: #ffdcdc;}


.form-intro					{border-bottom: 1px solid #dddddd; padding-bottom: 25px; margin-bottom: 25px; text-align: center}
.form-intro-empty			{padding:0;margin:0;border:0;}
.form-outro					{text-align: center; margin-top: 25px;}
.form-outro p				{margin-bottom: 0.5em}

/* ABOUT PAGE */
.panel-page		{padding: 40px 0}
.panel-page p	{font-size: 18px; line-height: 1.4em; margin-bottom: 1em}
.panel-page .inner					{width: 1080px;}
.image-text-panel .cols .col		{width: 50%;}
.image-text-panel img				{width: 100%; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.2); border: 10px solid #ffffff;}
.image-text-panel p:last-of-type	{margin-bottom: 0}
.image-text-panel.flipped .cols		{flex-direction: row-reverse}

/* TETX PAGE */
.text-page	{padding: 40px 0}
.text-page .inner	{width: 960px;}

.text-page h1	{margin-bottom: 1em}
.text-page h2	{font-size:22px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h3	{font-size:20px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h4	{font-size:18px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h5	{font-size:16px; line-height: 1.3em; margin:0.75em 0 0.5em 0}	
.text-page h6	{font-size:15px; 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;}

.text-page p a,
.text-page ul a,
.text-page ol a		{text-decoration: underline}

.text-page p a:hover,
.text-page ula:hover,
.text-page ol a:hover	{color:#00ACC8}

/* POPUP */
.popup-background 	{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index: 99999; display: none;}
.popup-background.active	{display:block;}
.popup-content		{transition:0.5s ease-out; position: fixed; background-color: #ffffff; box-shadow: 0 0 40px rgba(0,0,0,0.5); border-radius: 3px; width: 600px; padding:60px 40px 50px 50px; max-width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); height:calc(100vh - 150px); max-height: 640px; font-size: 0; z-index: 100;}
.scroll-content		{max-height: 100%; overflow-y: auto; padding-right: 10px; padding-left: 2px}

.popup-content .close	{right: 20px; top: 20px; z-index: 9999; background-image: url(/_uploads/_assets/icon-close-dark.svg); background-color: transparent;}

.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 h2		{font-size: 30px; font-weight: 400; margin-bottom: 0.5em}
.popup-content p		{font-size: 14px; font-weight: 400}
.popup-content .form-container	{margin-top: 30px;}
.popup-content.animated	{/*transform: translateY(0)*/}	
	
.click-out	{position:fixed; width: 100%; height: 100%; top:0; left:0;}	

/* POPUP ALT */
.popup-alt .popup-content													{width:850px;height:50vh;padding: 30px 25px;}
.popup-alt .popup-content.text-image .popup-alt-content			{height: 100%;max-width:55%;display: flex;align-items: center;}
.popup-alt .popup-content .popup-alt-content h2						{font-size:35px;font-weight:700;text-transform: uppercase;}
.popup-alt .popup-content .popup-alt-content p						{margin-bottom:1em;font-size:16px;}
.popup-alt .popup-content .popup-alt-content .btn					{width:fit-content;}
.popup-alt .popup-content .popup-alt-content .form-container	{padding-right:22px;margin-top:0;}
.popup-alt .popup-content.text-image .popup-alt-image				{display:block;width:45%;height:100%;background-size:cover;background-repeat:no-repeat;position:absolute;right:0;top:0; background-position: center;}

.popup-alt .popup-content.image-only .popup-alt-content			{ display: none; }
.popup-alt .popup-content.image-only .popup-alt-image				{ display: block; width: unset; height: unset; position: relative; }
.popup-alt .popup-content.image-only									{ max-width: 383px; max-height: 460px; width: 80%; padding: 0; }

.popup-alt .popup-content.text-only .popup-alt-content			{ height: 100%; max-width: 100%; display: flex; align-items: center; }
.popup-alt .popup-content.text-only .popup-alt-image				{ display: none; }






/* CHECKOUT / REGISTER */
/*.ca-password	{display: none}*/
.password-prompt {background-color: #ffc1ab; padding: 10px; border-radius: 4px; font-size: 24px; }
.password-prompt p {font-size: 22px; }


/* BLOG LISTING */
.blog-listing				{padding: 40px 0}
.blog-listing .col-listing	{width: 100%; padding-left: 0}
.blog-listing h1			{margin-bottom: 0.5em}
.blog-listing .itc-image-container	{height: 200px;}
.blog-listing .itc-text				{padding-bottom: 40px;}
.blog-listing .itc-text	p.date		{color: #9C9C9C}
.blog-listing .image-text-card		{justify-content: flex-start}



/* BLOG POST */


.blog-listing .cols.span-4 {justify-content: center;}

.blog-filter-container							{width:calc(100% - 60px); margin:25px auto 15px; overflow-x: auto; display: flex;}
.blog-filter-container ul.filter				{display: flex; justify-content: flex-start; list-style: none; margin: 1.5em auto 0; padding-bottom: 13px;}
.blog-filter-container ul.filter li				{background-color: #f0f0f0; margin: 0 3px; cursor: pointer; display: flex; flex-shrink: 0; align-items: center; font-size: 13px;}
.blog-filter-container ul.filter li a			{padding: 7px 20px 8px; transition: 0.2s ease-out;}

.blog-filter-container ul.filter li a.active	{background-color: #02acc8; color: #ffffff}
.blog-filter-container ul.filter li a:hover		{background-color: #dddddd;}


.blog-post			{padding: 40px 0}
.blog-header-image	{height: 400px; background-size: cover; background-position: center; margin-bottom: 30px; border-radius: 3px; overflow: hidden;}
.blog-post .inner	{width: 1200px;}
.blog-post p,
.blog-post ul,
.blog-post ol		{font-size: 18px;}

.blog-header		{text-align: left; border-bottom: 1px solid #dddddd; margin-bottom: 30px;}
.blog-header h1		{font-size: 42px; color: #04acc8; margin-bottom: 15px}
.blog-header p.date	{font-size: 14px; color: #9C9C9C; margin:10px 0 20px 0}
.blog-header p		{font-size: 22px; font-weight: 400; margin-bottom: 20px}

.blog-intro p		{font-size: 18px; }


.blog-post .cols.span-2 .col-previous-post	{width: 350px; margin-right: 20px; flex-shrink: 0}




.pp-inner			{}
.pp-inner ul		{margin: 0; list-style: none;}
.pp-inner ul li		{margin: 0}
.pp-inner ul li	a	{border-bottom: 1px solid #dddddd; display: block; text-decoration: none; padding: 10px 0;}
.pp-inner ul li	a:hover	{color: #04acc8}
.pp-inner h2		{margin-top: 0}

/* CONTACT US */
.contact-page			{padding: 40px 0}
.contact-page .inner	{width:1080px; max-width: 100%;}

.contact-page h1	{margin-bottom: 0.5em}
.contact-page h2	{font-size: 23px; font-weight: 500; line-height: 1.2em; border-bottom: 0.5px solid #dddddd; color: #dc5626; padding-bottom: 10px; margin-bottom: 1em}

.contact-page .cols	{display: flex; justify-content: space-between}
.contact-page .col	{width:calc(50% - 40px)}
.contact-page .col:nth-child(2)	{display: flex; flex-direction: column; justify-content: space-between}

p.required-text		{font-weight: 600; font-size: 14px; margin: 2em 0 2em}

.icon-text			{display: flex; margin-bottom: 1.2em; align-items: flex-start;}
.icon-text a		{text-decoration:none}
.icon-text a:hover 	{color:#00ACC8}

.it-icon	{width: 30px;}

.map		{flex:1; margin-top: 10px;}
.map iframe	{width: 100%; height: 100%;}

.form-error					{color:red; margin-bottom:1em;}
.form-field-error			{color:red; font-size:16px; margin:5px 0;}


.form-cell.error select,
.form-cell.error input {background-color: #ffdcdc; border: 2px solid red;}


/* BUTTON */
.button	{display: flex; justify-content: center; margin-top: 30px;}

.btn		{border-radius: 3px; font-size: 18px; width:fit-content;  display: inline-block; padding: 16px 32px; background-color: #DC5626; color: #ffffff; font-weight: 600; text-decoration: none; box-shadow: 0 3px 2px rgba(0,0,0,0.2); transition: 0.2s ease-out}
.btn:hover	{transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0); background-color: #3c3c3c}

.btn.primary	{background-color: #00ACC8}
.btn.secondary	{background-color: #DC5626}
.btn.teriary	{background-color: #08C97B}
.btn.tertiary	{background-color: #08C97B}

.btn.btn-min-width	{width: 150px; max-width: 100%; text-align: center}

.btn-container		{display: flex;gap: 1em;justify-content: flex-start;}
.btn-container .l-align		{margin-right:auto;}
.btn-container .r-align		{margin-left:auto;}

.btn.ab-center {position: absolute; bottom: 60px; }


/* FOOTER */
footer	{padding: 40px 0}

.secure-social		{display: flex; justify-content: center; align-items: center; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; padding: 15px 0; margin-bottom: 40px;}
.secure-social img	{width: 390px; max-width: 100%}

ul.social-list						{display: flex; align-items: center; list-style: none; margin-left: 25px;}
ul.social-list li					{margin: 0 10px 0 0}
ul.social-list li a					{display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; background-color: #00ACC8; border-radius: 40px;}
ul.social-list li svg				{width: auto; height: 20px; max-width: 20px;}
ul.social-list li svg path			{fill:#ffffff}
ul.social-list li:hover a 			{background-color:#DC5626}

.footer-top.cols	{display: flex; justify-content: space-between; margin: auto; width: 100%;}

.footer-top ul				{list-style: none; font-size: 16px;}
.footer-top ul li strong	{font-weight: 600; font-size: 18px;}
.footer-top ul li			{margin-bottom: 10px;}
.footer-top ul li a			{text-decoration: none; color: #7C7C7C}
.footer-top ul li a:hover	{color:#3c3c3c}

.footer-bottom		{text-align: center; margin-top:40px; border-top:1px solid #DDDDDD; padding: 30px 0 0 0}
.footer-bottom img	{width: 398px; max-width: 100%; margin: 20px 0}
.footer-bottom a	{text-decoration:none;}

.footer-bottom.no-top { margin-top: 0; border-top: 0; padding-top: 0; }

/* FORM STYLES */
.form-container			{}
.form-row				{margin-bottom: 20px;}
.form-cell				{}

.form-row.split				{display: flex; justify-content: space-between;}
.form-row.split	.form-cell	{width:calc(50% - 5px); position: relative;}
.form-row.split.three .form-cell	{width:calc(33.333% - 5px);}

.form-row.checkboxes-full ul li .form-cell label div,
.privacy-container													{ font-weight: 700; }

.form-subtitle { text-align: center; }

textarea,
input[type="text"],
input[type="password"],
input[type="datetime-local"] {font-size: 16px; width: 100%; flex: 1; padding: 15px 15px; border: 1px solid #dddddd; background-color: #ffffff; color: #717171; transition: 0.2s ease-out; border-radius: 3px; margin-top:5px;}

textarea:focus,
select.select-css:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus;	{box-shadow: 0 0 0 2px #dddddd}

textarea	{height: 150px;resize:vertical;}

textarea::-webkit-input-placeholder     {color:#717171;}
textarea::-moz-placeholder              {color:#717171;}
textarea:-ms-input-placeholder          {color:#717171;}
textarea:-moz-placeholder               {color:#717171;}

input[type="text"]::-webkit-input-placeholder     {color:#717171;}
input[type="text"]::-moz-placeholder              {color:#717171;}
input[type="text"]:-ms-input-placeholder          {color:#717171;}
input[type="text"]:-moz-placeholder               {color:#717171;}

input[type="password"]::-webkit-input-placeholder     {color:#717171;}
input[type="password"]::-moz-placeholder              {color:#717171;}
input[type="password"]:-ms-input-placeholder          {color:#717171;}
input[type="password"]:-moz-placeholder               {color:#717171;}


input[type="datetime-local"]::-webkit-input-placeholder     {color:#717171;}
input[type="datetime-local"]::-moz-placeholder              {color:#717171;}
input[type="datetime-local"]:-ms-input-placeholder          {color:#717171;}
input[type="datetime-local"]:-moz-placeholder               {color:#717171;}

.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="datetime-local"] {padding: 0.75em 1.4em 0.75em 0.8em; line-height: 1.4em}
.form-container .select-css				{border-color:#dddddd; color: #717171; font-size: 16px; border-radius: 3px;padding: 0.75em 1.4em 0.75em 0.8em;line-height: 1.4em;margin-top: 5px;}
.form-container .form-row				{margin-bottom: 10px;}

.form-container .container:focus-within	{color: #3c3c3c}

/*
.form-container .container:focus-within .checkmark	{background-color: #cccccc}
*/

.form-container .container 				{font-size: 18px; color: #717171; display: flex; margin: 0; padding: 0}
.form-container .container .checkmark	{position: relative; margin-right: 12px; flex-shrink: 0; transform: translateY(-2px)}

.form-container .container .checkmark.cb-outline { border: solid 1px #02acc8; }
.form-container .container .checkmark.cb-outline:after { left: 8px; top: 4px }

.form-container .form-row.submit { margin-bottom: 0; text-align: center }
.form-container .form-row.submit .btn	{width: 100%;}

.form-row.checkboxes-inline			{margin: 20px 0}
.form-row.checkboxes-inline ul		{display: flex; list-style: none; font-size: 14px; justify-content: center}
.form-row.checkboxes-inline ul li	{margin-right: 20px;}

.form-row.checkboxes-full			{margin: 30px 0;}
.form-row.checkboxes-full ul		{list-style: none}
.form-row.checkboxes-full ul li		{margin-bottom:1em; line-height: 1.3em}



.form-container .form-row.checkboxes-full .container	{font-size: 16px;}

/* SELECT CSS */
.select-css	{border:1px solid #dddddd; background-color: #ffffff; border-radius: 3px; color: #3c3c3c; line-height: 1.15em; padding: 15px 15px; background-size: 18px auto; transition: 0.2s ease-out; font-size: 16px;margin-top: 5px;}




/* JIM TEP STYLES FOR FRONT END EDITOR */

#page3 searchcontent div {padding: 5px;}


































/* 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; }

.tooltip { position: relative; display: inline-block; }

.tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; }

.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }

.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.nowrap { white-space: nowrap; }

section.product .copyToClipboard

section.product .product-txturl { width: calc(100% - 230px); }

section.product-listing .product-txturl { width: calc(100% - 250px); }

section.product-listing tr.table-sticky th { position: sticky; top: -1px; background-color: #ffffff; z-index: 1; }

.table { width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: separate; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; }
.table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
     
.table thead tr.no-top-border th { border-top: 0px solid #ffffff; }

.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
.table-striped-column tbody tr td:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }

.sticky { position: sticky; top: -1px; background-color: #ffffff; z-index: 1; }


.radiobutton label { margin-left: 5px; margin-right: 5px; }

.table .checkbox-list td,
.table .checkbox-list td { border-top: 0; }

.table .checkbox-list td input[type="checkbox"] + label { margin-left: 5px; margin-right: 5px; }

.custom-checkbox:after { content: " "; }

.product-listing.loading { pointer-events: none; }

input[type="text"].text-contains { padding: 8px 8px; }

/* SPINNER - loading.io */
.lds-ring { display: inline-block; position: fixed; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; width: 64px; height: 64px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #4f6a7d; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #4f6a7d 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; }


/* PRODUCT TAGGING */
.product-tagging table.table.product-edit tbody tr td label:first-child { min-width: 150px; display: inline-block; }
.product-tagging table.table.product-edit tbody tr td label:first-child.extra170 { min-width: 170px; display: inline-block; }
.product-tagging table.table.product-edit tbody tr td label:first-child.extra320 { min-width: 320px; display: inline-block; }

section.product.product-tagging textarea { border: 1px solid #dddddd; padding: 15px; }
section.product.product-tagging textarea.w100 { width: 100% }

section.product.product-tagging select.error:focus,
section.product.product-tagging input[type="text"].error:focus,
section.product.product-tagging textarea.error:focus { box-shadow: 0 0 0 2px #ff0000; }

section.product.product-tagging select.error,
section.product.product-tagging input[type="text"].error,
section.product.product-tagging textarea.error { color: #ff0000; border-color: #ff0000; }


.product-tagging span.error { color: #ff0000; line-height: initial; }

/* ACCORDION */
.product-tagging .accordion .accordion-item                             { margin-bottom: 6px; }
.product-tagging .accordion .accordion-item h3                          { font-size: 24px; color: #00365C; background-color: #ECEFF8; position: relative; cursor: pointer; line-height: 1.4em; padding: 10px 40px 10px 20px; }
.product-tagging .accordion .accordion-item h3 span.plus                { width: 21px; height: 21px; position: absolute; right: 15px; display: block; top: 10px; }
.product-tagging .accordion .accordion-item h3 span.plus:before         { width: 1px; height: 100%; background-color: #333333; position: absolute; left: 10px; top: 0; content: ''; }
.product-tagging .accordion .accordion-item h3 span.plus:after          { width: 1px; height: 100%; background-color: #333333; position: absolute; left: 10px; top: 0; content: ''; transform: rotate(90deg); }
.product-tagging .accordion .accordion-item.active h3                   { background-color: #ECEFF8; }
.product-tagging .accordion .accordion-item.active h3 span.plus:after   { }
.product-tagging .accordion .accordion-item.active h3 span.plus:before  { display: none; }
.product-tagging .accordion .accordion-expanded                         { display: none; padding: 20px; background-color: #ffffff; column-count: 6; }
.product-tagging .accordion .accordion-expanded p:last-child            { margin-bottom: 0; }

.product-tagging .accordion .accordion-item .tags   { break-inside: avoid; }
.product-tagging .accordion .accordion-item h4      { font-size: 16px; padding-left: 20px; margin-bottom: 10px; margin-top: 20px; }
.product-tagging .accordion .tagValue-container     { margin-left: 20px; }
.product-tagging .accordion .container              { padding-left: 30px; }
.product-tagging .accordion .accordion-item label   { font-size: 14px; font-weight: 300; }

.product-tagging .accordion .checkmark          { width: 20px; height: 20px; }
.product-tagging .accordion .checkmark::after   { left: 8px; top: 2px; width: 2px; }

/*.delivery-options { margin-top: 30px; margin-bottom: 30px; }*/
.delivery-options .accordion-item { margin-bottom: 6px; }
.delivery-options .accordion-item img { max-width: 250px; width: 100%; }
.delivery-options .accordion-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.delivery-options .accordion-item p { margin-bottom: 10px; }
				  
.delivery-options .accordion-item h3 span.plus:after { }
.delivery-options .accordion-expanded { padding: 20px; background-color: #fff; line-height: 1.3em; /*display: none;*/ line-height: 1.4em; border: 1px solid #d0d0d0; border-top: 0px;}
.delivery-options .accordion-expanded p:last-child { margin-bottom: 0; }

.delivery-options .accordion-item.active h3 { }
.delivery-options .accordion-item.active h3 span { transform: rotate(-180deg) }

.delivery-page .cols .col { padding: 10px; }

@media screen and (max-width: 1175px) {
	.delivery-page .cols.cols-2 { flex-wrap: wrap; flex-direction: column-reverse; }
	.delivery-options .accordion-item img { max-width: unset; }
}




@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* CHECKOUT */

.delivery-page .where-sending { align-content: center; align-items: center; text-align: center }
.delivery-page .selected-address { max-width: 500px; margin: auto; margin-top: 25px; border: 1px solid #d0d0d0; padding: 30px 30px 15px 30px; }
.delivery-page .selected-address span { text-align: left; display: block; margin-bottom: 0.35em; margin-left: .75em; }
.delivery-page .delivery-options { max-width: 500px; margin: auto; margin-top: 30px; }
.delivery-page .btn-container { text-align: center; margin-top:2em; }

.delivery-page .selectable-option label.selectable .selectable-option-indicator { position: absolute; top: 9px; left: 10px; display: block; width: 18px; height: 18px; background-image: url("/_assets/untick-green.png"); background-size: cover; background-repeat: no-repeat; }
.delivery-page .delivery-options .delivery-option label .price { position: absolute; top: 10px; right: 10px; font-weight: 700; }
.delivery-page .delivery-options .delivery-option.selected label { line-height: 1.2em; }

.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; line-height: 1.5em; }

.selectable-option.accordion-item label.selectable {/*border-bottom: 0px;*/}


/*.delivery-options .delivery-option label { margin-bottom: 5px; }*/
.selectable-option.selected label.selectable .selectable-option-indicator { background-image: url("/_assets/tick-green.png"); }
.selectable-option label.selectable .selectable-option-indicator { position: absolute; top: 9px; left: 10px; display: block; width: 18px; height: 18px; background-image: url("/_assets/untick-green.png"); background-size: cover; background-repeat: no-repeat; }

.link-style				{padding: 10px 20px;margin:10px 5px;background:#00ACC8;color:#fff;display: inline-block;width: fit-content; text-decoration:none;}
.link-style.has-image	{display:inline-flex !important;}
.link-style.has-image img	{width:10px;}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

.password-reveal            {position:absolute;top:32px;right:7px;transform:translate(-7px, -50%); display: flex; background: unset; }
.password-reveal:hover img  {opacity:.75;}
.password-reveal img        {width:20px;}




.filter-container { padding: 0px 15px; }

.price-filter label		{ display: inline-block; width: 32%; margin-left: 15px; }
.price-filter select	{ min-width: 50%; }

.pagination { margin-top: 20px; text-align: center; }
.pagination-btn { display: inline-block; padding: 8px 12px; margin: 2px; background-color: #fff; border: 1px solid #02acc8; cursor: pointer; }
.pagination-btn.active { background-color: #02acc8; color: #fff; }
.pagination-btn.disabled { pointer-events: none; opacity: 0.5; }


/* minimise CLS due to slick */
.home-hero-carousel .slide { display: none; }
.home-hero-carousel .slide:first-child { display: block; }
.home-hero-carousel.slick-initialized .slide { display: flex; justify-content: center; }
.home-hero-carousel .hero-link-cover { width: 100%; max-width: unset; }

.product-carousel .slide { display: none; }
.product-carousel .slide:nth-child(n+6) { display: block; }
.product-carousel.slick-initialized .slide { display: block; }

.home-product-listing .product-carousel .col { display: none; }
.home-product-listing .product-carousel .col:nth-child(n+6) { display: block; }
.home-product-listing .product-carousel.slick-initialized .col { display: block; }


/* Styles for the price input container */
.price-filter .price-input-container { width: 100%; padding: 20px; padding-top: 0; }
.price-filter .price-input .price-field { display: flex; margin-bottom: 12px; justify-content: flex-start; }
.price-filter .price-field span { margin-right: 10px; margin-top: 6px; font-size: 14px; line-height: 0.5; }
.price-filter .price-field input { flex: 1; height: 17px; font-size: 14px; text-align: center; border: 0px; background: #fff; max-width: 25px; color: #555; }
.price-filter .price-input { width: 100%; font-size: 19px; color: #555; }

.price-filter .slider-container { width: 100%; padding: 0px; height: 10px; position: relative; background: #e4e4e4; border-radius: 5px; margin: auto; }
.price-filter .slider-container .price-slider { height: 100%; left: 0%; right: 0%; position: absolute; border-radius: 5px; background: #00ACC8; }
.price-filter .range-input { position: relative; }
.price-filter .range-input input { position: absolute; width: calc(100% - 20px); height: 5px; background: none; top: -28px; left: 10px; pointer-events: none; cursor: pointer; -webkit-appearance: none; }

/* Styles for the range thumb in WebKit browsers */
.price-filter input[type="range"]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 70%; background: #555; pointer-events: auto; -webkit-appearance: none; }

@media screen and (max-width: 768px) {
	.price-filter .price-input { flex-direction: column; align-items: center; }
	.price-filter .price-field { margin-bottom: 10px; }
}

.spinner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); justify-content: center; align-items: center; z-index: 1000; }
.spinner { border: 16px solid #f3f3f3; border-top: 16px solid #00acc8; border-radius: 50%; width: 60px; height: 60px; animation: spin 1.5s linear infinite; margin: auto; margin-top: 180px; }
.product-listing-page { position: relative; }

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.spend-and-save {display: none !important;}

.spend-free-delivery { padding: 10px; background-color: rgb(52 216 56 / 31%); width: 100%; font-size: 24px; margin: 20px 0px; padding: 20px; border-radius: 3px; }
.spend-free-delivery h3 { font-weight: 100; }

.category-dropdown						{ position: absolute; background-color: #fff; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; display: none; z-index: 1000; }
.category-dropdown .dropdown-item		{ padding: 10px; cursor: pointer; border: 1px solid #e0e0e0; }
.category-dropdown .dropdown-item:hover { background-color: #e0e0e0; }


.practitionerApproval { background: #ffb9b9; padding: 10px; font-size: 19px; color: #000; margin-bottom: 20px; line-height: 1.3em; }
.product-card-text p.price.practitioner-approval { font-size: 20px; }
.practitionerApproval button { background: unset; text-decoration: underline; font-weight: 600; }
.practitionerApproval.accepted { background: #afffa6; }

.pr-login, .ap-required p, .ap-sent p, .practitionerApproval.accepted { padding: 5px 10px; background-color: #d0f2f6; border-radius: 5px; }






/***********/
/* marquee */


/*.marquee-container							{ overflow: hidden; white-space: nowrap; position: relative; width: 100%;   }
.marquee-container .marquee				{ display: inline-block; white-space: nowrap; animation: marquee 30s linear infinite; will-change: transform; display: flex; min-width: 200%; gap: 0; }
.marquee-container .marquee span			{ flex: 1; white-space: nowrap; }
.marquee-container .marquee p				{ font-size: 18px !important; display: inline-block; }
.marquee-container .marquee p strong	{ font-weight: 600 !important;}*/


/**/


.marquee-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.marquee { width: 100%; height: 33px; }
.marquee-content { white-space: nowrap; position: absolute; right: 0; }

.marquee-content.content-1 { animation: marquee 30s linear infinite; }
.marquee-content.content-2 { animation: marquee2 30s linear infinite; }

.marquee-container .marquee p { font-size: 18px !important; display: inline-block; }
.marquee-container .marquee p strong { font-weight: 600 !important; }
.marquee-container:hover .marquee-content.content-1,
.marquee-container:hover .marquee-content.content-2  { animation-play-state: paused; }

@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@keyframes marquee2 {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}


/*@keyframes marquee {
  0% {
	transform: translateX(0);
  }
  100% {
	transform: translateX(-50%);
  }
}*/

/***********************/
/* practioner approval */

.practioner-approval-cb-container .checkmark {border: 2px solid #DC5626; width: 22px !important; height: 22px !important; background-color: #ffcebd;}
.practioner-approval-cb-container .container div {color: #DC5626; margin-left: 2px; padding-top: 2px;}



.address-error { font-size: 20px; padding: 10px; background-color: #ffdcdc; cursor: default; margin: 0; }
.address-error.mb { margin-bottom: 20px; }

/* Hide honeypot field*/
.company-hp { position: absolute !important; left: -9999px !important; /* off-screen rather than invisible */ top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; z-index: -1 !important; }


.basket-update { background-color: #ffdcdc; padding: 20px; font-size: 20px; }
.basket-update h2 { margin-bottom: 10px; }




/* PRACTITIONER APPROVAL POPUP */
:root { --tah-teal: #00ACC8; --tah-ice: #cfeff2; --tah-text: #1a1a1a; --tah-muted: #6c6c6c; --tah-shadow: 0 10px 30px rgba(0,0,0,.25); }

/*.tah-approval-open											{ padding: 10px 14px; border: 0; border-radius: 8px; background: var(--tah-teal); color: #fff; cursor: pointer; font-weight: 600; }*/
#tahApprovalOverlay.tah-approval-overlay				{ position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 18px; }
#tahApprovalOverlay.tah-approval-overlay.is-open	{ display: flex; }
#tahApprovalModal.tah-approval-modal					{ width: min(560px,100%); background: #fff; border-radius: 10px; box-shadow: var(--tah-shadow); padding: 18px 18px 16px; position: relative; max-height: 80vh; overflow-y: auto; }
#tahApprovalModal .tah-approval-close					{ position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(0,0,0, 0); cursor: pointer; font-size: 35px; line-height: 36px; }
#tahApprovalModal .tah-approval-logo					{ display: flex; justify-content: center; margin-top: 8px; }
#tahApprovalModal .tah-approval-logo img				{ max-width: 250px; height: auto; display: block; }
#tahApprovalModal .tah-approval-brand					{ text-align: center; font-weight: 500; color: var(--tah-teal); margin-top: 8px; letter-spacing: .8px; font-size: 15px; }
#tahApprovalModal .tah-approval-sub						{ text-align: center; color: var(--tah-muted); font-size: 15px; margin-top: 2px; letter-spacing: .6px; }
#tahApprovalModal .tah-approval-instruction			{ text-align: center; color: var(--tah-text); margin: 15px 0 20px; font-size: 15px; }
#tahApprovalModal .tah-approval-label					{ display: block; font-size: 15px; font-weight: 500; color: var(--tah-text); margin: 12px 0 5px; }
#tahApprovalModal .tah-approval-input					{ width: 100%; background: var(--tah-ice); border: 0; border-radius: 2px; padding: 10px 10px; outline: none; font-size: 15px; box-sizing: border-box; }
#tahApprovalModal .tah-approval-input[type="text"] { color: #000; }
#tahApprovalModal .tah-approval-input:focus			{ box-shadow: 0 0 0 2px rgba(0,172,200,.25); }
#tahApprovalModal .tah-approval-q						{ display: flex; gap: 10px; align-items: flex-start; margin: 15px 0 3px; }
#tahApprovalModal .tah-approval-dot						{ width: 10px; height: 10px; border-radius: 50%; background: var(--tah-teal); margin-top: 4px; flex: 0 0 10px; }
#tahApprovalModal .tah-approval-qtext					{ font-size: 15px; font-weight: 500; color: var(--tah-text); line-height: 1.25; }
#tahApprovalModal .tah-approval-textarea				{ width: 100%; background: var(--tah-ice); border: 0; border-radius: 2px; padding: 10px 10px; outline: none; font-size: 15px; resize: vertical; min-height: 110px; box-sizing: border-box; color: #000; }
#tahApprovalModal .tah-approval-textarea:focus		{ box-shadow: 0 0 0 2px rgba(0,172,200,.25); }
#tahApprovalModal .btn-container							{ display: block; text-align: center; }
#tahApprovalModal .tah-approval-submit					{ margin-top: 14px; border: 0; border-radius: 2px; background: var(--tah-teal); color: #fff; padding: 11px 12px; font-weight: 700; cursor: pointer; letter-spacing: .2px; }
#tahApprovalModal .tah-approval-submit[disabled]	{ opacity: .65; cursor: not-allowed; }
#tahApprovalModal .tah-approval-note					{ margin-top: 10px; font-size: 15px; color: var(--tah-muted); min-height: 16px; text-align: center; }
#tahApprovalModal .tah-approval-hp						{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

#tahApprovalModal .tah-approval-error																									{ color: #d32f2f; font-size: 15px; margin-top: 3px; padding-bottom: 5px; }
#tahApprovalModal .tah-approval-input.is-error, #tahApprovalModal .tah-approval-textarea.is-error					{ background: #ffe5e5; box-shadow: 0 0 0 2px #d32f2f inset; }
#tahApprovalModal .tah-approval-input.is-error:focus, #tahApprovalModal .tah-approval-textarea.is-error:focus	{ box-shadow: 0 0 0 2px #d32f2f inset; }


.accordion-item.ingredients td { border: 1px solid; padding: 5px; }
.accordion-item.important-info li { margin-left: 35px; }
.accordion-item.important-info ul { margin-top: 5px; }

.accordion-item span,
.description span { display: inline-block; }

#out-of-stock { padding: 20px; background-color: #ffcbb9; margin-bottom: 10px; }
#out-of-stock .no-stock-btn-container { display: flex; }
#out-of-stock input[type="text"] { height: 50px; top: -5px; position: relative; width: 100%; }
#out-of-stock input[type="submit"] { height: 50px; }

#out-of-stock ul { list-style: none; display: flex; flex-wrap: wrap; }
#out-of-stock ul li { margin-bottom: 30px; }
#out-of-stock ul li a { padding: 9px; background-color: #dc5626; color: #fff; text-decoration: none; margin-right: 10px; border-radius: 5px; transition: 0.2s ease-out; }
#out-of-stock ul li a:hover { opacity: 0.5; }

.ap-required button { background: none; text-decoration: underline; }

.image-listing { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; }
.image-listing img { width: 22%; margin: 8px; padding: 11px; border: 1px solid #dddddd; align-self: center; }
.image-listing img.active { border: 2px solid #acacac; }

.practioner-approval-cb-container { margin-bottom: 20px; }
.practioner-approval-cb-container .container { font-size: 18px; padding-left: 26px; }
.practioner-approval-cb-container .checkmark { height: 18px; width: 18px; }
.practioner-approval-cb-container .checkmark:after { left: 6px; top: 2px; width: 3px; height: 9px; }

@media (max-width: 1300px) {
	ul.catefory-list { margin-bottom: 25px; }
}



