/*
	MAT STYLES
*/

/* Define branding variables */
:root {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;

	/* Custom fonts */

		/* --heading-font: 'Tektur';  */
		--heading-font: 'Open Sans', Arial, Helvetica, sans-serif;

	/* Colours (generic) */
		
		/* : Main color */
		--normal-border-color: #222;
		--normal-background-color: #222;
		--normal-color: #fff;

		/* Light color */
		--light-border-color: #eee;
		--light-background-color: #eee;
		--light-color: #222;

		/* Lighter color */
		--lighter-border-color: #f7f7f7;
		--lighter-background-color: #f7f7f7;
		--lighter-color: #222;

	/* Specific element vars */

		/* Header groups */
		--header-group-background-color: var(--normal-background-color);
		--header-group-color: var(--normal-color);

		/* Offers */
		--offers-background-color: var(--lighter-background-color);
		--offer-border-color: var(--normal-border-color);

		/* Yuasa battery lookup popup */
		--yuasa-battery-lookup-popup-background-color: #fff;

		/* Caution box */
		--caution-box-background-color: #f6f611;
		--caution-box-color: #222;

		/* Warning box */
		--warning-box-background-color: #d53737;
		--warning-box-color: #fff;

		/* Uppercontent */
		--uppercontent-border-color: #222;
		--uppercontent-background-color: #fff;
		--uppercontent-color: #222;
		--uppercontent-section-header-background-color: #222;
		--uppercontent-section-header-color: #fff;

		/* Lowercontent */
		--lowercontent-border-color: #222; 
		--lowercontent-background-color: #fff;
		--lowercontent-color: #222;
		--lowercontent-section-header-background-color: #222;
		--lowercontent-section-header-color: #fff;

		/* Best buy badge */
		--best-buy-background-color: var(--light-background-color);
		--best-buy-color: var(--light-color);

		/* Tabs background colour */
		--tabs-background-color: var(--lighter-background-color);
		--tab-background-color: var(--light-background-color);
		--tab-color: var(--light-color);
		--tab-selected-background-color: var(--normal-background-color);
		--tab-selected-color: var(--normal-color);

		/* Top spec */
		--top-spec-full-spec-trigger-background-color: var(--normal-background-color);
		--brand-top-spec-full-spec-trigger-color: var(--normal-color);

		/* Top documents */
		--top-documents-border-color: var(--normal-border-color);

		/* Good, better, best selection radios */
		--good-better-best-item-backgound-color: var(--lighter-background-color);
		--good-better-best-item-color: var(--lighter-color);
		--good-better-best-item-radio-backgound-color: var(--normal-background-color);
		--good-better-best-item-info-icon-background-color: var(--normal-background-color);
		--good-better-best-item-info-icon-color: var(--normal-color);

		/* Timeline countdown */
		--timeline-countdown-icon-background-color: var(--normal-background-color);
		--timeline-countdown-icon-color: var(--normal-color);
		--timeline-countdown-icon-separator-color: var(--lighter-background-color);

		/* Branded description */
		--branded-description-col-brand-background-color: var(--normal-background-color);
		--branded-description-col-brand-color: var(--normal-color);

		/* Section headers */
		--section-header-background-color: #000;
		--section-header-color: #fff;

		/* Brand banner section header */
		--brand-banner-tint-from: 0.4;
		--brand-banner-tint-to: 0.7;
		--brand-banner-section-header-col-background-color: #fff;
		--brand-banner-section-header-col-color: #000;

		/* Images banner section header */
		--images-banner-section-header-col-background-color: #fff;
		--images-banner-section-header-col-color: #000;

		/* At a glance */
		--at-a-glance-image-border-color: var(--normal-background-color);

		/* Image text overlay card (subsection) */
		--image-text-overlay-card-background: rgba(238, 238, 238, 0);
		--image-text-overlay-card-background-hover: rgba(238, 238, 238, 1);

		/* Plain header separator */
		--plain-header-separator-background-color: var(--normal-background-color);

		/* FREE Delivery banner */
		--free-delivery-banner-border-color: var(--normal-border-color);

		/* Spinner icon */
		--spinner-icon-background-color: var(--normal-background-color);
		--spinner-icon-color: var(--normal-color);

}

/* Emergency message */
.emergency-message{
	padding: 16px;
	border-bottom: 1px solid #fff;
	background: #e9d83b;
	box-shadow: inset 0 -4px 6px -4px rgba(0, 0, 0, 0.3);
	color: #222;
	font-weight: bold;
	text-align: center;
}

/* Product swiper header group */
.product-swiper-header-group{
	border-radius: 8px !important;
	background: var(--header-group-background-color, #eee);
	color: var(--header-group-color, #222);
}

/* Product header group */
.product-header-group{
	border-radius: 8px !important;
	background: var(--header-group-background-color, #eee);
	color: var(--header-group-color, #222);
}

/* Swiper buttons (locked, don't hide) */
.swiper-button-lock{
	display: initial;
}

/* Yuasa batter lookup / iframe */
#yuasa-battery-lookup-widget-popup .widget-popup-content{
	height: calc(100% - 52px);
}
#yuasa-battery-lookup-widget-popup iframe{
	height: 100%;
}
#yuasa-battery-lookup-widget-popup .generic-content-popup-box{
	background: var(--yuasa-battery-lookup-popup-background-color);
}

/* Better best */
.pt-product input[name="goodBetterBestProdId"] {
	pointer-events: none;
}

/* offers */
.pt-product .offers-wrap{
	background: var(--offers-background-color);
}
.pt-product .offers-wrap{
	background: var(--offers-background-color);
}

/* Why buy */
/* .pt-product .why-buy-wrap{
	background: #eee;
} */
.pt-product .why-buy-bullet-points{
	padding: 20px;
	border-radius: 8px;
	box-shadow: -1px -1px 0px 6px var(--lighter-background-color) inset;
	-webkit-box-shadow: -1px -1px 0px 6px var(--lighter-background-color) inset;
	-moz-box-shadow: -1px -1px 0px 6px var(--lighter-background-color) inset;
	border: 2px solid var(--normal-background-color);
	background: #fff;
}
.pt-product .why-buy-bullet-points .bp {
	position: relative;
	padding: 6px 0 6px 24px;
}
.pt-product .why-buy-bullet-points .bp:before {
	content: "\2714";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--normal-border-color, #666);
}

/* Headings - use custom font */
h1, 
h2, 
h3, 
h4,
#main-footer .bold,
.pre-content-header-text .bold,
.tab,
.searchbox .expand .font-l.uppercase{ /* Searchbox title */
	font-family: var(--heading-font);
}

/* Buttons */
.button{
	opacity: 1;
	will-change: opacity transform;
	transition-property: opacity transform;
	transition-duration: 0.4s;
	transition-delay: 0.001s;
}
.button:hover{
	opacity: 0.8;	
	transform: scale(0.96);
}

/* Generic content popups */
.generic-content-popup-box{
	border-radius: 4px !important;
}

/* Promotion menu - animated elements */
.ishop-anim-banner{
	--banner-width: 1781;
	--banner-height: 360;
	position: relative;
	width: 100%;
	font-size: 0;
	aspect-ratio: calc(var(--banner-width) / var(--banner-height));
	-webkit-user-select: none;  /* Chrome, Safari */
	-moz-user-select: none;     /* Firefox */
	-ms-user-select: none;      /* Internet Explorer/Edge */
	user-select: none;
}
.ishop-anim-banner img.bg{
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	height: auto;
	object-fit: cover;
}
.ishop-anim-banner .layers{
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* font-size: clamp(1rem, 2vw, 2rem);  */
	font-size: clamp(1.2rem, 2.4vw, 2.4rem); /* responsive font size */
}

/* Alignment defaults */
.ishop-anim-banner .origin-center{
	--alignment: center;
}
.ishop-anim-banner .origin-cl,
.ishop-anim-banner .origin-tl,
.ishop-anim-banner .origin-bl{
	--alignment: left;
}
.ishop-anim-banner .origin-cr,
.ishop-anim-banner .origin-tr,
.ishop-anim-banner .origin-br{
	--alignment: right;
}
.ishop-anim-banner .origin-center,
.ishop-anim-banner .origin-cl,
.ishop-anim-banner .origin-cr,
.ishop-anim-banner .origin-tl,
.ishop-anim-banner .origin-tr,
.ishop-anim-banner .origin-bl,
.ishop-anim-banner .origin-br{

	/* positional vars */
	--offset-y: 50%;
	--offset-x: 50%;

	/* Width vars */
	--width: 100%;

	/* animation vars */
	--delay: 0s;
	--duration: 1.6s;
	--easing: ease-in-out;
	--iterations: 1; /* # or "infinite"  */
	--direction: normal; /* normal, reverse, alternate (ping-pong), alternate (ping-pong starting reversed) */

	/* animation: rotate vars */
	--rotate-start: 0deg;
	--rotate-end: 0deg;

	/* animation: scale vars */
	--scale-start: 1;
	--scale-end: 1;

	/* animation: fade vars */
	--fade-start: 1;
	--fade-end: 1;

	/* animation: slide vars */
	--slide-offset-start: 0;

	/* Calculate % values of offset based on --banner-width and --banner-height */
	--width-pc: calc(var(--width) / var(--banner-width) * 100%);
	--offset-x-pc: calc(var(--offset-x) / var(--banner-width) * 100%);
	--offset-y-pc: calc(var(--offset-y) / var(--banner-height) * 100%);
	--slide-offset-start-pc: calc(var(--slide-offset-start) / var(--banner-width) * 100%);

	/* Set properties */
	position: absolute;
	width: var(--width-pc);
	text-align: var(--alignment, left);
}

/* : Positional classes (origin-*) */

	/* Origin: center */
	.ishop-anim-banner .origin-center{
		left: calc(50% + var(--offset-x-pc, 0px));
		top: calc(50% + var(--offset-y-pc, 0px));
		transform: translate(-50%, -50%);
	}

	/* Origin: center-right */
	.ishop-anim-banner .origin-cr{
		right: calc(0% + var(--offset-x-pc, 0px));
		top: calc(50% + var(--offset-y-pc, 0px));
		transform: translate(0%, -50%);
	}

	/* Origin: center-left */
	.ishop-anim-banner .origin-cl{
		left: calc(0% + var(--offset-x-pc, 0px));
		top: calc(50% + var(--offset-y-pc, 0px));
		transform: translate(0%, -50%);
	}

	/* Origin: top-right */
	.ishop-anim-banner .origin-tr{
		right: calc(0% + var(--offset-x-pc, 0px));
		top: calc(0% + var(--offset-y-pc, 0px));
	}

	/* Origin: bottom-right */
	.ishop-anim-banner .origin-br{
		right: calc(0% + var(--offset-x-pc, 0px));
		bottom: calc(0% + var(--offset-y-pc, 0px));
	}

	/* Origin: top-left */
	.ishop-anim-banner .origin-tl{
		left: calc(0% + var(--offset-x-pc, 0px));
		top: calc(0% + var(--offset-y-pc, 0px));
	}

	/* Origin: bottom-left */
	.ishop-anim-banner .origin-bl{
		left: calc(0% + var(--offset-x-pc, 0px));
		bottom: calc(0% + var(--offset-y-pc, 0px));
	}

/* Animation trigger class (left and center origins) */
.ishop-anim-banner .origin-center *.animate,
.ishop-anim-banner .origin-tl *.animate,
.ishop-anim-banner .origin-cl *.animate,
.ishop-anim-banner .origin-bl *.animate{

	/* Calc this element's slide-offset-start-pc value */
	--slide-offset-start-pc: calc(var(--slide-offset-start) / var(--banner-width) * 100%);
	--slide-offset-start-normalized-pc: calc(var(--slide-offset-start-pc) * var(--banner-width) / var(--width));

	/* Set initial styles (always based on ***-start variables */
	margin-left: var(--slide-offset-start-pc, 0);
	transform: rotate(var(--rotate-start, 0deg)) scale(var(--scale-start, 1));
	opacity: var(--fade-start, 1);
}

/* Animation trigger class (right and center origins) */
.ishop-anim-banner .origin-tr *.animate,
.ishop-anim-banner .origin-br *.animate,
.ishop-anim-banner .origin-cr *.animate{

	/* Calc this element's slide-offset-start-pc value */
	--slide-offset-start-pc: calc(var(--slide-offset-start) / var(--banner-width) * 100%);
	--slide-offset-start-normalized-pc: calc(var(--slide-offset-start-pc) * var(--banner-width) / var(--width)); /* Calcs % relative to overall banner, not wrapping layer */

	/* Set initial styles (always based on ***-start variables */
	margin-right: var(--slide-offset-start-normalized-pc, 0);
	transform: rotate(var(--rotate-start, 0deg)) scale(var(--scale-start, 1));
	opacity: var(--fade-start, 1);
}

/* Do animations (when insid a .swiper-slide-active element) */
.swiper-slide-active .ishop-anim-banner .origin-center *.animate,
.swiper-slide-active .ishop-anim-banner .origin-tl *.animate,
.swiper-slide-active .ishop-anim-banner .origin-cl *.animate,
.swiper-slide-active .ishop-anim-banner .origin-bl *.animate{

	/* Set animations */
	animation:  ishop-anim-banner-translate var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards, 
				ishop-anim-banner-fade var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards,
				ishop-anim-banner-slide-ml var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards;
}
.swiper-slide-active .ishop-anim-banner .origin-tr *.animate,
.swiper-slide-active .ishop-anim-banner .origin-br *.animate,
.swiper-slide-active .ishop-anim-banner .origin-cr *.animate{

	/* Set animations */
	animation:  ishop-anim-banner-translate var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards, 
				ishop-anim-banner-fade var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards,
				ishop-anim-banner-slide-mr var(--duration, 1.6s) var(--easing, ease-in-out) var(--delay, 0s) var(--iterations, 1) var(--direction, normal) forwards;
}

/* - Animations */
@keyframes ishop-anim-banner-translate {
  from {
    transform: rotate(var(--rotate-start, 0deg)) scale(var(--scale-start, 1));
  }
  to {
    transform: rotate(var(--rotate-end, 0deg)) scale(var(--scale-end, 1));
  }
}

@keyframes ishop-anim-banner-fade {
  from {
    opacity: var(--fade-start, 1);
  }
  to {
    opacity: var(--fade-end, 1);
  }
}
/* Slide using margin-left (for layers with origin-tl or origin-bl which are positioned using the "left" property */
@keyframes ishop-anim-banner-slide-ml {
  from {
    margin-left: var(--slide-offset-start-normalized-pc, 0);
  }
  to {
    margin-left: 0;
  }
}
/* Slide using margin-right (for layers with origin-tr or origin-br which are positioned using the "right" property */
@keyframes ishop-anim-banner-slide-mr {
  from {
    margin-right: var(--slide-offset-start-normalized-pc, 0);
  }
  to {
    margin-right: 0;
  }
}

/* Tabbed Products */
.tabbed-products > h2,
.tabbed-products .tab{
	font-family: var(--heading-font);
}

/* Caution box */
.caution-box{
	padding: 16px;
	border-radius: 8px;
	background: var(--caution-box-background-color, yellow);
	color: var(--caution-box-color, #222);
}

/* warning box */
.warning-box{
	padding: 16px;
	border-radius: 8px;
	background: var(--warning-box-background-color, red);
	color: var(--warning-box-color, #fff);
}

/* Car battery selector */
.car-battery-selector-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: #e80511;
}
.car-battery-selector-wrap .select{
	width: 100%;
	background: #fff;
}

/* Header desktop */
#main-header-desktop{
	border-top: none !important;
	margin-bottom: 16px;
	-webkit-box-shadow: 0px 4px 0 0 rgba(255, 255, 255, 1);
	-moz-box-shadow: 0px 4px 0 0 rgba(255, 255, 255, 1);
	box-shadow: 0px 4px 0 0 rgba(255, 255, 255, 1);
}
#main-header-desktop nav.cols{
	justify-content: space-evenly;
}

.header-desktop-row-1{
	padding: 8px 0 8px 32px;
}
.header-desktop-row-1-icons-col{
	margin-top: -1px;
	padding: 4px 0 4px 38px;
	background: #ddd;
	clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%);
}
.header-desktop-row-2{
	margin-top: -1px;
	padding: 0 0 0 40px;
	border-top: 8px solid #ddd;
	clip-path: polygon(40px 0%, 100% 0%, 100% 101%, 0% 101%);
}
@media all and (min-width: 768px) and (max-width: 1199px) {
	.header-desktop-row-2{
		padding-top: 8px;
	}
}
.header-desktop-icons{
	padding: 4px;
}
.header-desktop-icons .cols{
	gap: 4px;
}
.top-messages-col{
	margin-top: -1px;
	padding: 0 16px 12px 48px;
	background: #ddd;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%);
	-webkit-user-select: none;  /* Chrome, Safari */
	-moz-user-select: none;     /* Firefox */
	-ms-user-select: none;      /* Internet Explorer/Edge */
	user-select: none;
}

/* Checkout link */
.checkout-link-col{
	background: #fff;
}

/* Nav desktop */
.nav-desktop .l1 a{
	font-family: var(--heading-font);
	text-transform: uppercase;
}

/* Nav flyout */
.flyout-group-heading{
	font-family: var(--heading-font);
}
.header-desktop-nav-l2-wide a{
	font-size: 14px;
}

/* Header mobile */
header#main-header-mobile{
	background: #000;

}
header#main-header-mobile .mobile-menu-icon-col{
	filter: brightness(2) invert();
}
header#main-header-mobile .basket-count{
	font-size: 18px;
	position: initial;
}

/* Promotion panel (homepage) */
.promotion-panel-content h2,
.promotion-panel-content h3{
	font-family: var(--heading-font);
}

/* Plain header */
.plain-header{
	position: relative;
	display: inline-flex;
	font-family: var(--heading-font);
}
.plain-header-col-titles{
	justify-items: flex-end;
}
.plain-header-col-titles > div{
	display: inline-block;
}
.plain-header-col-text{
	line-height: 1.6;
}
@media all and (min-width: 768px) {

	.plain-header.has-text:before{
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		width: 8px;
		height: 100%;
		margin-left: -4px;
		background: var(--plain-header-separator-background-color);
	}

}

/* At a glance */
.at-a-glance-img-wrap{
	position: relative;
	border-radius: 50%;
	border: 4px solid var(--at-a-glance-image-border-color);
	margin-top: 16px;
	padding-bottom: 100%;
	overflow: hidden;
}
.at-a-glance-img-wrap img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Brand banner */
@keyframes brandBannerTintFade {
	from {
		--brand-banner-tint: var(--brand-banner-tint-from);
	}
	to {
		--brand-banner-tint: var(--brand-banner-tint-to);
	}
}
.brand-banner{
	--brand-banner-tint: var(--brand-banner-tint-from, 0.4);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 222px;
	animation: brandBannerTintFade 0.0001s linear forwards;
}
.brand-banner:before{
	content: '';
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(1, 1, 1, var(--brand-banner-tint));
	transition: background 0.8s ease-in-out; /* optional smooth transition */
}
img.brand-banner-background{
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.brand-banner-contents{
	z-index: 4;
	position: relative;
	line-height: 1.6;
}
.brand-banner-section-header-col{
	background: var(--brand-banner-section-header-col-background-color);
	color: var(--brand-banner-section-header-col-color);
}

/* Images banner */
.images-banner-images-col{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 222px;
}

.images-banner-section-header-col{
	background: var(--images-banner-section-header-col-background-color);
	color: var(--images-banner-section-header-col-color);
}

/* Uppercontent */
.uppercontent{
	border: 2px solid var(--uppercontent-border-color);
	background: var(--uppercontent-background-color);
	color: var(--uppercontent-color);
	overflow: hidden;
}
.uppercontent .section-header{
	border-radius: 0;
}
.uppercontent .section-header:before{
	border-radius: 0;
	background: var(--uppercontent-section-header-background-color);
}
.uppercontent .section-header-text{
	background: var(--uppercontent-section-header-background-color);
	color: var(--uppercontent-section-header-color);
}

/* Lowercontent */
.lowercontent{
	border: 2px solid var(--lowercontent-border-color);
	background: var(--lowercontent-background-color);
	color: var(--lowercontent-color);
}
.lowercontent .section-header{
	border-radius: 0;
}
.lowercontent .section-header:before{
	border-radius: 0;
	background: var(--lowercontent-section-header-background-color);
}
.lowercontent .section-header-text{
	background: var(--lowercontent-section-header-background-color);
	color: var(--lowercontent-section-header-color);
}



/* : hard-coded content */
.lowercontent .content-box:after{
	content: '';
	display: block;
	clear: both;
}

/* Resopnsive video */
.video-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	/* padding-bottom: 56.25%; */ /* 16:9 aspect ratio (282/500 = 0.564) */
	aspect-ratio: 16/9;
	overflow: hidden;
}

.video-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Animate elements when they scroll into view */
[data-animate-into-view] {
  opacity: 0.2;
  transform: translateY(30px);
  /* transition: opacity 0.8s ease-out, transform 0.8s ease-out; */
}
[data-animate-into-view].animate {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  opacity: 1;
  transform: translateY(0);
}

/* Float left/right */
.fll{
	float: left;
}
.flr{
	float: right;
}

/* Product Card List */
.product-card-list-wrap {
}
.product-card-list > *{
	order: 4; /* Allows good, better, best to be ordered 1, 2, 3 followed by others */
}

/* products-swiper */
.products-swiper.slides-per-view-6 .brand-logo{
	margin-top: -35px;
	margin-left: -35px;
	width: 70px;
	height: 70px;
}
.products-swiper.slides-per-view-6 .brand-logo img{
	left: 15%;
	top: 15%;
	width: 70%;
	height: 70%;
}

/* Product Card */
[data-battery-code] {
	height: 100%;
}
.product-card{
	height: 100%;
	border: 1px solid #eee;
	background: #eee;
}
.product-card h2{
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.product-card a{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 100%;
}
.product-card .image{
	margin: 4px;
}
.product-card .image .img-wrap{
	padding: 0 60px; /* Prevents overlaying icons */
}
.product-card .power-ratings{
	z-index: 5;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
	height: 100%;
}
.product-card .power-ratings .cols{
	display: inline-flex;
}
.product-card .product-card-product-details{
	flex: 1 1 auto;
	align-content: center;
}
.product-card .product-card-product-details.has-brand{
	position: relative;
	padding-top: 58px;
}
.product-card .product-card-price{
	position: absolute;
	right: 16px;
	bottom: 16px;
	font-weight: bold;
}
.product-card .button-wrap{
	align-content: end;
	padding: 8px;
	text-align: center;
}
.product-card .button{
	padding: 8px;
	width: 100%;
}
.product-card .brand-logo{
	z-index: 4;
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: -35px;
	margin-left: -35px;
	border-radius: 50%;
	border: 2px solid #eee;
	background: #fff;
	width: 70px;
	height: 70px;
	overflow: hidden;
}
.product-card .brand-logo img{
	position: absolute;
	left: 15%;
	top: 15%;
	width: 70%;
	height: 70%;
	object-fit: contain;
}
.product-card-parent.good{
	order: 1;
}
.product-card-parent.better{
	order: 2;
}
.product-card-parent.best{
	order: 3;
}
.product-card .good-better-best-badge{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	padding: 4px;
	border-radius: 4px;
	background: #000;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
.product-card-parent.good .good-better-best-badge{
	background: #98a134;
	color: #fff;
}
.product-card-parent.better .good-better-best-badge{
	background: #79980b;
	color: #fff;
}
.product-card-parent.best .good-better-best-badge{
	background: #10ac31;
	color: #fff;
}
.product-card .img-wrap img{
	transition-duration: 0.4s;
}
.product-card:hover .img-wrap img {
	transform: scale(1.25);
}
/* @media all and (min-width: 1200px) {
	.product-card .brand-logo{
		margin-top: -50px;
		margin-left: -50px;
		width: 100px;
		height: 100px;
	}
} */

/* Product Card - Horizontal */
.product-card-horizontal{
	height: 100%;
	border: 1px solid #ccc;
	background: #fff;
}
.product-card-horizontal a{
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap;
	flex-direction: column;
	height: 100%;
}
.product-card-horizontal .image{
	margin: 4px;
}
.product-card-horizontal .image .img-wrap{
	min-height: 120px;
	align-content: center;
	padding: 16px 60px; /* Prevents overlaying icons */
}
.product-card-horizontal .status{
	position: absolute;
	left: 8px;
	bottom: 8px;
}
.product-card-horizontal .power-ratings{
	z-index: 5;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
	height: 100%;
}
.product-card-horizontal .power-ratings .cols{
	display: inline-flex;
}
.product-card-horizontal .product-card-product-details{
	flex: 1 1 auto;
	align-content: center;
}
.product-card-horizontal .product-card-product-details.has-brand{
	position: relative;
}
.product-card-horizontal .product-card-price{
	margin: 0 0 8px 0;
	font-weight: bold;
}
.product-card-horizontal .button-wrap{
	align-content: end;
	padding: 8px;
	text-align: center;
}
.product-card-horizontal .button{
	padding: 8px;
	width: 100%;
}
.product-card-horizontal .brand-logo{
	z-index: 4;
	position: relative;
	border-radius: 50%;
	border: 2px solid #eee;
	background: #fff;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	overflow: hidden;
}
.product-card-horizontal .brand-logo img{
	position: absolute;
	left: 30%;
	top: 30%;
	width: 40%;
	height: 40%;
	object-fit: contain;
}

/* image-text-wide-card */
.image-text-wide-card{
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
	background: #eee;
}
.image-text-wide-card a{
	height: 100%;
}
.image-text-wide-card .image{
	position: relative;
	height: 100%;
	padding-bottom: 100%;
	border: 2px solid #eee;
	background: #fff;
}
.image-text-wide-card .img-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	padding: 16px;
}
.image-text-wide-card .image.photo{
	border: none;
}
.image-text-wide-card .image.photo .img-wrap{
	padding: 0;
}
.image-text-wide-card .img-wrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.image-text-wide-card-col-text{
	align-content: center;
	overflow: auto;
	padding: 16px;
	text-align: center;
}
@media all and (min-width: 768px) and (max-width: 1199px) {
	.image-text-wide-card .cols.device-m-cols-1 .image{
		height: auto;
	}
}

/* Footer */
#main-footer{
	background: #fff;
}
.footer-logo{
	position: relative;
	text-align: center;
}
.footer-logo:before{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: #ccc;
}
.footer-logo img{
	z-index: 2;;
	position: relative;
}
.footer-payment-icons img{
	width: 64px;
	height: 32px;
	object-fit: contain;
}
.cols-shopping-help-links a{
	position: relative;
	left: 0;
	display: inline-block;
	text-decoration: none;
}
.cols-shopping-help-links a:after{
	content: '';
	will-change: width;
	transition: width 0.4s 0.0001s ease-in-out;
	position: absolute;
	top: 0;
	right: 100%;
	height: 100%;
	width: 0;
	margin-right: 4px;
	border-radius: 4px;
	background: transparent;
	pointer-events: none;
}
.cols-shopping-help-links a:hover:after{
	width: 16px;
	background: #ccc;
}
#main-footer .section-header{
	--normal-background-color: #222;
	--normal-color: #fff;
}
#main-footer .footer-legal{
	--normal-background-color: #222;
	--normal-color: #fff;
	border-radius: 4px;
	background: var(--normal-background-color);
	color: var(--normal-color);
	font-weight: bold;
}

/* Product Card (NEIL) */
/*
.product-card {
	background: #fff;
	border: 1px solid #ccc;
	overflow: hidden;
}
.product-card .product-video {
	position: absolute;
	width: 35px;
	bottom: 3px;
	right: 30px;
}
.product-card .brand-logo img {
	max-height: 42px;
}
.product-card .prices .price {
	color: #4e4e4e;
}
.product-card .thumbnail-data {
	position: absolute;
	right: 5%;
	width: 20%;
	max-width: 40px;
	font-size: 10px;
	text-align: center;
}
.product-card .thumbnail-data > div {
	margin-bottom: 10px;
}
.product-card .thumbnail-data > div:last-child {
	margin-bottom: 0px;
}
.product-card .thumbnail-data svg {
	max-width: 100%; height: auto;
}
.product-card .saving,
.product-card .pre-order-until{
    position: static;
    margin-top: 6px;
    color: #fff;
    background-color: #40acff;
    width: 130px;
    padding: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.product-card .pre-order-until{
	width: 190px;
	background-color: orange;
}
@media screen and (min-width: 1px) {
    .product-card .saving,
	.product-card .pre-order-until{
		position: absolute;
        top: 0;
        right: 0;
        margin: 0 auto;
        left: 0;
		padding: 4px 6px;
		border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;			
    }
}	
@media screen and (max-width: 767px) {
	.product-card .pre-order-until{
		width: auto;
		font-size: 11px;
		font-weight: bold;
		text-transform: uppercase;
	}
}


.product-card .img-wrap img { object-fit: contain; padding-top: 28px; }

@media all and (max-width: 500px) {
	.product-card .status {
		padding: 0 0 0 4px;
		bottom: -3px;
	}
}

.product-card .brand-logo img { width: auto; }


*/

/* Branded description */
.branded-description-col-brand{
	position: relative;
	border-radius: 8px;
	padding: 16px;
	background: var(--branded-description-col-brand-background-color);
	color: var(--branded-description-col-brand-color);
	align-content: center;
}
.branded-description-col-brand:after{
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	margin-left: -6px;
	width: 12px;
	height: 12px;
	background: var(--branded-description-col-brand-background-color);
	border-radius: 2px;
}
@media all and (max-width: 767px) {
	.branded-description-col-brand:after{
		top: 100%;
		left: 50%;
		margin-top: -6px;
		margin-left: -6px;
		transform: rotate(45deg);
	}
}
.branded-description-brand-logo-wrap{
	position: relative;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	border: 2px solid var(--branded-description-col-brand-background-color);
	background: #fff;
	overflow: hidden;
}
.branded-description-brand-logo-wrap img{
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	object-fit: contain;
}
@media all and (max-width: 767px) {
	.branded-description-brand-logo-wrap{
		margin: 0 auto;
	}
}

/* Product offers (swiper) */
.product-offer-card{
	height: 100%;
	background: #fff;
	border: 2px solid var(--offer-border-color, #222);
}
.product-offer-card a{
	display: block;
	text-decoration: none;		
}
.product-offer-card a:after,
.product-offer-card .offer-details:after{
	content: '';
	display: block;
	clear: both;
}
.product-offers-swiper .swiper-button-prev,
.product-offers-swiper .swiper-button-next{
	--swiper-navigation-color: #000;
	--swiper-navigation-size: 24px;
}

/* Gallery icons */
.gallery-icons{
	z-index: 2;
	position: absolute;
	right: 32px;
	top: 0;
	width: 48px;
}

/* Gallery images: enlarge image */
[data-gallery-images-wrapper-for-prod-id]{
	position: relative;
}
.gallery-icons .enlarge-image{
	z-index: 10;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-transform: none;
	background: #eeeeee;
	color: #222;
}
.gallery-icons .enlarge-image svg{
	height: 50%;
	width: 50%;
}
.gallery-icons .enlarge-image svg path{
	fill: #222;
}

/* Timeline countdown */
.timeline-countdown-icon{
	background: var(--timeline-countdown-icon-background-color);
	color: var(--timeline-countdown-icon-color);
	width: 48px;
	height: 48px;
	padding: 0;
}
.timeline-countdown hr.stroke{
	background: var(--timeline-countdown-icon-separator-color);
}

/* Images / ordering cols - connects to top-messages */
.images-ordering-cols{
	/* border-top: 8px solid var(--normal-background-color, #ccc); */
}
.images-ordering-cols{
	position: relative;
	padding-top: 8px;
}
.images-ordering-cols:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 8px;
	border-radius: 4px 4px 4px 0;
	background: var(--normal-background-color, #ccc);
}

/* Top messages */
.top-messages{
	overflow: hidden;
	max-width: 580px;
	position: relative;
	margin-left: auto;
	margin-top: 2px;
	padding: 0 16px;
	font-size: 14px;
	text-align: center;
	line-height: 2;
}
.top-messages-button-next,
.top-messages-button-prev {
	position: absolute;
	top: 31px;
	width: 12px;
	height: 12px;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
}
.top-messages-button-next:after,
.top-messages-button-prev:after {
	font-size: 14px;
}
.top-messages-button-prev{
	left: 0px;
	right: auto;
}
.top-messages-button-next{
	right: 0px;
	left: auto;
}
@media all and (max-width: 1320px) {
	.top-messages{
		max-width: 430px;
	}
}

/* Section-header */
.section-header{
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}
.section-header:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--section-header-background-color);
}
.section-header-text{
	position: relative;
	display: inline-block;
	padding: 16px 48px 16px 16px;
	background: var(--section-header-background-color);
	color: var(--section-header-color);
	clip-path: polygon(
		0 0,                  /* top-left */
		100% 0,               /* top-right */
		calc(100% - 40px) 100%,  /* bottom-right shifted left */
		0 100%                /* bottom-left */
	);
	font-family: var(--heading-font);
}
.section-header.right-aligned{
	text-align: right;
}
.section-header.right-aligned .section-header-text{
	padding: 16px 16px 16px 48px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	clip-path: polygon(
		40px 100%,     /* bottom-left shifted right */
		100% 100%,     /* bottom-right */
		100% 0,        /* top-right */
		0 0            /* top-left */
	);
	text-align: right;
}

/* Brand banner */
/* @keyframes brandBannerFadeInBackground {
	from {
		background: rgba(255, 255, 255, 0.8);
	}
	to {
		background: rgba(1, 1, 1, 0.7);
	}
}
.brand-banner{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 222px;
	overflow: hidden;
}
.brand-banner:before{	
	content: '';
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	animation: brandBannerFadeInBackground 1.4s ease-in-out forwards;
}
img.brand-banner-background{
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.brand-banner-contents{
	z-index: 4;
	position: relative;
}
.brand-banner .section-header{
	z-index: 5;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
} */

/* pre-content-header */
.pre-content-header-text{
	position: relative;
	display: inline-block;
	margin-top: -1px;
	padding: 0 40px 16px 16px;
	background: var(--normal-background-color);
	border-bottom-left-radius: 4px;
	color: var(--normal-color);
	clip-path: polygon(
		0 0,                  /* top-left */
		100% 0,               /* top-right */
		calc(100% - 40px) 100%,  /* bottom-right shifted left */
		0 100%                /* bottom-left */
	);
}
.pre-content-header-text p{
	margin: 0;
}

/* Order forms */
.button.main{
	border-radius: 8px;
	font-weight: bold;
}
.button.secondary{
	border-radius: 8px;
	font-weight: bold;
}
.button.black{
	border-radius: 8px;
	font-weight: bold;
}

/* Best buy badge */
.badge-best-buy{
	display: inline-flex;
	padding-left: 48px;
	clip-path: polygon(
		0 0,                  /* top-left */
		100% 0,               /* top-right */
		calc(100% - 20px) 100%,  /* bottom-right shifted left */
		0 100%                /* bottom-left */
	);
	background: var(--best-buy-background-color);
	color: var(--best-buy-color);
}

/* Top spec */
.top-spec-wrap{
	border: 1px solid var(--normal-background-color);
	overflow: hidden;
}
.top-spec-wrap .full-spec-trigger{
	background: var(--top-spec-full-spec-trigger-background-color);
	color: var(--brand-top-spec-full-spec-trigger-color);
}

/* Main spec */
.tech-spec-main .cols{
	border-radius: 4px;
	border: 1px solid #ccc;
}

/* Top documents */
.top-documents-wrap{
	border: 1px solid var(--top-documents-border-color);
}

/* Good better best */
.good-better-best-item .better-best-explainer-popup-trigger{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--good-better-best-item-info-icon-background-color);
	color: var(--good-better-best-item-info-icon-color);
	width: 24px;
	height: 24px;
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
}
.good-better-best-item .better-best-explainer-popup-trigger:after{
	content: 'i';
}
.good-better-best-item{
	background: var(--good-better-best-item-backgound-color);
	color: var(--good-better-best-item-color);
}
.good-better-best-item > div:first-child{
	background: var(--good-better-best-item-radio-backgound-color);
}

/* Spinner */
.spinner-icon {
	z-index: 2;
	width: 48px; 
	height: 48px; 
	padding: 8px;
	border-radius: 50%; 
	background-color: var(--spinner-icon-background-color, #666);
	cursor: pointer;
}
.spinner-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--spinner-icon-color, #fff);
}
.cloudimage-360-inner-box canvas {
	height: calc(100vh - 110px) !important;
	width: calc(100vw - 70px) !important;
	object-fit: contain;
}

/* Tabs */
.tabbed-content.new2025 .tabs{
	gap: 12px;
}
.tabbed-content.new2025 .tab{
	display: flex;
	justify-content: center;
	align-self: center;
	border-radius: 8px;
	background: var(--tab-background-color);
	color: var(--tab-color);
	font-size: 16px;
	font-weight: bold;
	text-decoration: none !important;
	text-align: left;
	line-height: 1;
}
.tabbed-content.new2025 .tab svg{
	fill: var(--tab-color);
	max-height: 16px;
	width: auto;
	margin-right: 8px;
	pointer-events: none;
}

/* : selected arrow */
.tabbed-content.new2025 .tab.normal-active:after,
.tabbed-content.new2025.normal .tab.normal-active:after{
	/* border-top: 8px solid #a8a8a8 !important; */
	border-top: 8px solid var(--tab-selected-background-color) !important;
	z-index: 1;
}
.tabbed-content.new2025 .tab.normal-active,
.tabbed-content.new2025 .content .stacked-active .tab{
	background: var(--tab-selected-background-color) !important;
	color: var(--tab-selected-color);
}
.tabbed-content.new2025 .tab.normal-active svg,
.tabbed-content.new2025 .content .stacked-active .tab svg {
	fill: var(--tab-selected-color);
}

/* Normal tabs (add background) */
.tabbed-content.new2025 .tabs{
	padding-left: 16px;
	padding-right: 16px;
	background-image: linear-gradient(to bottom, transparent 0%, transparent 15%, var(--tabs-background-color) 15%, var(--tabs-background-color) 85%, transparent 85%, transparent 100%);
}

/* Stacked tabs (remove default styles) */
.tabbed-content.new2025 > .content{
	border-top: none !important;
}
.tabbed-content.new2025 > .content > div{
	margin-bottom: 8px;
	border: none !important;
}
.tabbed-content.new2025.device-s-stacked > .content > .stacked-active > .tab:before {
		content: '';
		right: 12px;
		width: 0;
		height: 0;
		border-radius: 2px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 6px solid var(--tab-selected-color);
		margin-top: -6px;
		transform: rotate(90deg);
}

.tabbed-content.new2025.stacked > .content .stacked-active .text{
	margin-top: 16px;
}

/* Subsections - Image-text-content.square */
.image-text-overlay-card .snippet{
	background: var(--image-text-overlay-card-background);
}
.image-text-overlay-card:hover .snippet{
	background: var(--image-text-overlay-card-background-hover);
}

/* 

	.image-text-content-card{
		height: 100%;
		text-align: center;
		overflow: hidden;
	}
	
	.image-text-content-card.square {
		padding-bottom: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #fff;
		border: 1px solid #40acff;
		overflow: hidden;		
	}
	
	.image-text-content-card.square h2 {
		background-color: rgba(41,174,251,0.85);
		color: #fff;
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5%;
		margin: 0 auto;
		text-transform: uppercase;
		max-width: 90%;
		z-index: 2;
		font-weight: normal;
    	letter-spacing: 2pt;
		font-size: 14px;		
	}
	
	.image-text-content-card.square .content {
		opacity: 0;
	    position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		background-color: rgba(255, 255, 255, 0.8);
		transition: opacity 0.25s ease-in-out;
		z-index: 2;
	}

	.image-text-content-card.square:hover .content {
		opacity: 1;		
	}

	.image-text-content-card.square:hover {
		border-color: #4d4d4d;
	}

	.image-text-content-card.square:hover h2 {
		background-color: rgba(77, 77, 77, 0.8);
	}
	
	.image-text-content-card.square.DISABLED:before {
		content: ' ';
		opacity: 0;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		pointer-events: none;
	}
	.image-text-content-card.square.DISABLED:hover:before {
		opacity: 1;
	}
	
	
	
	.image-text-content-card.square .striped-line-heading { position: absolute; right: 0; top: 10px; text-align: center; max-width: 50%; }
	.image-text-content-card.square .striped-line-heading .image img { max-height: 50px; width: auto; padding: 4px 0; }
	.image-text-content-card.square.brand .striped-line-heading .svg-wrap svg { fill: #fff; }
	
	.subsection-wrapper { background-color: #f1f1f1; margin-top: 10px; }
	.subsections-normal .image-text-content-card a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

	
	.image-text-content-card.square { padding-bottom: calc(100% + 55px); }
	.image-text-content-card.brand .logo { height: 58px; padding: 4px 0; }
	.image-text-content-card.brand .logo img { height: 50px; }
	.image-text-content-card.square .content { top: 80px; }
	.image-text-content-card.square:before { top: 58px; height: initial; bottom: 0; }
				
	.image-text-content-card.section, .image-text-content-card.brand  { padding-bottom: initial; }
	.image-text-content-card.square.section .image, .image-text-content-card.square.brand .image { position: relative; }
	.page-1768 .image-text-content-card.square.section .image, .page-1768 .image-text-content-card.square.brand .image { padding-bottom: 100%; background-position: center center; background-size: cover; position: relative; background-repeat: no-repeat; }
	.image-text-content-card.section a, .image-text-content-card.brand a { display: block; position: static; }
	.image-text-content-card.square h2 { position: static; }


	.image-text-content-card.brand .logo img { width: auto; }
*/


/*
	EXISTING STYLES
*/

/*

OLD FOOTER:

.footer-separator { background-color: #04a1fc; height: 8px; }
footer#main-footer { background-color: #222; border-top: 1px solid #fff; color: #fff; }
		
footer#main-footer a { text-decoration: none; color: #DDD; }
footer#main-footer a:hover { color: #FFF; }
footer#main-footer .spacing-xs { height: 6px; }
footer#main-footer .spacing-s { height: 10px; }

footer#main-footer .payment-icons-wrapper { max-width: 270px; }
footer#main-footer .cols.valign-middle.payment-icons-wrapper > div { background-color: #fff; align-self: stretch; padding: 4px 2px; text-align: center; position: relative; min-width: 70px; font-size: 0; height: 40px; }
footer#main-footer .cols.valign-middle.payment-icons-wrapper > div img { position: relative; top: 50%; transform: translateY(-50%); max-width: 46px; max-height: 27px; width: initial; }

footer#main-footer .striped-line-heading .svg-wrap svg { fill: #04a1fc; }

footer#main-footer .footer-links-outer a { padding-left: 18px; position: relative; }
footer#main-footer .footer-links-outer a:before { content: ' '; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); height: 2px; width: 8px; background-color: #656565; }
		
footer#main-footer .social-icons a { margin: 0 10px 0 0; }
footer#main-footer .social-icons a.facebook { margin: 0; }
footer#main-footer .social-icons img { max-width: 28px; }
	
footer#main-footer .newsletter-signup-outer { position: relative; overflow: hidden; }
footer#main-footer .newsletter-signup-outer.input input { padding: 10px 58px 10px 16px; }
footer#main-footer .newsletter-signup-outer .newsletter-button { background-color: #04a1fc; color: #FFF; text-transform: uppercase; position: absolute; right: 0; top: 0; height: 100%; line-height: 40px; padding: 0 16px; }
		
@media all and (min-width: 1px) and (max-width: 767px) {
	footer#main-footer .payment-icons-wrapper { justify-content: center; }
}

*/

.page-banner-image { display: none; }
	
@media (min-width: 768px) {
	html { font-size: 16px; }
}	
	
.striped-line-heading { text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; height: 50px; line-height: 50px; font-size: 17px; text-align: center; max-width: 240px; width: 100%; }
.striped-line-heading .text, .striped-line-heading .image { position: relative; z-index: 2 }
.striped-line-heading .svg-wrap  { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }
.striped-line-heading .svg-wrap svg { height: 100%; }
			

	
	
@media all and (min-width:768px) {
		
	.searchbox { align-items: center; }
	.searchbox form { position: static; max-width: 600px; left: 0; right: 0; margin: 0 auto; }
	.search-predictor { position: static; max-height: 200px; overflow-y: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
		
}
	
.home-page-title { background: #007dbd; }
	
/* GPT Styles for product pages */
.pt-product .container, .pt-product .navigation {
	padding: 20px;
	color: #333;
}
.pt-product .container h2, .pt-product .container h3, .pt-navigation .container h2, .pt-navigation .container h3{
	color: #006fb9;
}
.pt-product .container p, .pt-navigation .container p{
	margin: 10px 0;
}
.pt-product .container ul, .pt-navigation .container ul {
	list-style-type: none;
	padding: 0;
}
.pt-product .container li, .pt-navigation .container li {
	padding: 5px 0;
}
.pt-product .container .highlight, .pt-navigation .container .highlight {
	color: #d00;
	font-weight: bold;
}
.pt-product .specs-table, .pt-product .features-table, .pt-product .specs-table table, .pt-product .features-table table, .pt-navigation .specs-table, .pt-navigation .features-table, .pt-navigation .specs-table table, .pt-navigation .features-table table {
	width: 100%;
	border-collapse: collapse;
}
.pt-product .specs-table th, .pt-product .specs-table td, .pt-product .features-table th, .pt-product .features-table td, .pt-navigation .specs-table th, .pt-navigation .specs-table td, .pt-navigation .features-table th, .pt-navigation .features-table td {
	border: 1px solid #ddd;
	padding: 10px 12px;
	text-align: left;
}
.pt-product .specs-table th, .pt-product .features-table th, .pt-navigation .specs-table th, .pt-navigation .features-table th {
	background-color: #f2f2f2;
}
	
.tech-container { display: flex; gap: 10px; flex-wrap: wrap; }	
.tech-box { border: 1px solid #000; padding: 10px; flex: 1; min-width: 200px; text-align: center; }
.pt-product .container table, .pt-navigation .container table { border-collapse: collapse; width: 50%; }
.pt-product .container table th, .pt-product .container table td, .pt-navigation .container table th, .pt-prnavigationoduct .container table td { border: 1px solid #000; padding: 8px; }
	
	
	/* Base */

header#main-header-desktop {border-bottom: none; }
header#main-header-desktop .header-wrap {border-bottom: 1px solid #ccc; }
.new-flyout { position: absolute; padding-top: 40px; padding-bottom: 10px; left: 0; right: 0; background-color: #fff; z-index: 3; -webkit-box-shadow: 0px 20px 20px -10px rgba(0,0,0,0.45); -moz-box-shadow: 0px 20px 20px -10px rgba(0,0,0,0.45); box-shadow: 0px 20px 20px -10px rgba(0,0,0,0.45); }
.new-flyout .columns-wrapper { display: flex; gap: 48px; flex-direction: row; justify-content: center; max-width: 1250px; margin: 0 auto; }
.new-flyout .columns-wrapper .column.featured img { max-width: 400px; width: 100%; }
.new-flyout .columns-wrapper .column { flex-basis: 20%; }
.new-flyout .columns-wrapper .column.featured { flex-basis: 40%; }
.new-flyout .columns-wrapper .column .striped-line-heading { color: #fff; font-size: 15px; padding: 0 24px; text-transform: initial; -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3); }
.new-flyout .columns-wrapper .column .striped-line-heading .svg-wrap svg { fill: #04a1fc; }
.new-flyout .columns-wrapper .column .link { color: #454545; }
.new-flyout .columns-wrapper .column .link:hover { color: #000; }
.new-flyout .columns-wrapper .column .link .image { font-size: 0; }
.new-flyout .columns-wrapper .column .link .image img { width: 18px; height:18px; }
/* .new-flyout:after { position: absolute; content: " "; left: 0; right: 0; bottom: -24px; height: 24px; background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); } */

@media all and (max-width: 1200px) {
	.new-flyout .columns-wrapper { gap: 24px; }
}
	
.uppercontent p, .lowercontent p, .uppercontent a, .lowercontent a, .uppercontent span, .lowercontent span { font-size: 16px !important; line-height: 22px !important; }
.uppercontent, .lowercontent { margin: 0 auto; }
	
@media all and (max-width: 767px) {
	.uppercontent p, .lowercontent p, .uppercontent a, .lowercontent a, .uppercontent span, .lowercontent span { font-size: 14px !important; line-height: 20px !important; }
}
	
.pt-product table.size-chart { width: 100%; border-collapse: collapse; }
.pt-product table.size-chart th, .pt-product table.size-chart td { border: 1px solid #ddd; padding: 10px 12px; font-size: 15px; text-align: center; }
.pt-product table.size-chart tr:nth-child(even) { background-color: #efefef; }	
	
.pt-product .paypal-pay-in-three-wrapper { background-color: #f1f1f1; padding: 16px 16px 8px 16px; }

.pt-product .gallery-offer-display {
    z-index: 999;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 54px;
    height: 109px;
}
	.pt-product .gallery-offer-display .sticker{
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
	}
	.pt-product .gallery-offer-display .image{
		width: 120px;
		height: 120px;
		margin: 20px 0 0 20px;
		-webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.12);
		-moz-box-shadow:    0px 0px 13px 0px rgba(0, 0, 0, 0.12);
		box-shadow:         0px 0px 13px 0px rgba(0, 0, 0, 0.12);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		background: #fff;
		text-align: center;
		font-size: 0;
		overflow: hidden;
	}
	.pt-product .gallery-offer-display .image:before{
		content: '';
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		height: 100%;
		margin-left: -0.25em;
		vertical-align: middle;
	}
	.pt-product .gallery-offer-display .image img{
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		vertical-align: middle;
	}	
	
.radio-box input:checked+* { background: #4d4d4d; }
.radio-box input+* { border: 1px solid #4d4d4d; }	
	
.pt-product form .badge { height: 24px; }
.pt-product svg.fill-white path { fill: #ffffff; }
.pt-product .logo-badge-wrap { min-height: 50px; }
.pt-product .logo-badge-wrap img { max-height: 60px; }
	
.pt-product .string-upgrades .free-message { color: #fff; }
.pt-product .string-upgrades .select { display: block; font-size: 90%; }
.pt-product .stringing-delivery-message { background-color: #048ad6; color: #fff; }
.pt-product #restring-toggle { background: #008cd3; color: #fff; }
.pt-product #restring-toggle.showing svg { transform: rotate(90deg); }
/* .pt-product #stringing-selectors-wrap { max-height: 0; overflow: hidden; } */
.pt-product #stringing-selectors-wrap.show-selectors { max-height: 170px; transition-property: all; transition-duration: 1.25s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }
.pt-product .strings-wrap { display: flex; gap: 16px; }	
.pt-product .strings-wrap .select.tension { flex: 1 1 auto; min-width: 215px; }
@media all and (min-width: 768px) and (max-width: 949px) {
	.pt-product .strings-wrap { flex-direction: column; }
}
@media all and (min-width: 1px) and (max-width: 499px) {
	.pt-product .strings-wrap { flex-direction: column; }
}

#gift-voucher-form .voucher-type-wrapper { display: none; }
	
.delivery-timer .delivery-main, .delivery-timer-stringing-upgrade .delivery-main { background-color: #048ad6; color: #fff; }

#gift-voucher-form .product_price:before { font-size: 16px; }
#gift-voucher-form .gift-voucher-bg-color-1 { background: #e9f7ff; }
#gift-voucher-form .gift-voucher-bg-color-2 { background: #dff3fe; }
#gift-voucher-form .radio input+*:after { margin-top: -7px; }

@media all and (min-width: 1200px) {
	.view-icons { border-right: 2px solid #eaeaea; }
	.view-icons svg { width: 30px; height: 30px; }
	.view-icons svg path { fill: #4e4e4e; }
	.view-icons .view-selector { font-size: 0; }
	.view-icons .view-selector.active svg path { fill: #40acff; }
}
	
@media (min-width: 768px) {
	.image-gallery, .image-gallery .swiper-wrapper { height: initial; }
	.gallery-thumbnails .swiper-wrapper { height: 420px; }
}
	
.range-slider {
    --range-bar-background-color: #28aefb;
    --handle-background-color: #4e4e4e;
    --handle-border-color: #4e4e4e;
}
		
.product-ring .font-xs { font-size: 11px; }



.header-offer-display { width: 100%; margin-bottom: 12px; }
.header-offer-display .image, .header-offer-display .heading { display: none; }
.header-offer-display .details .description { font-size: 18px; color: #fff; font-weight: bold; background-color: #222; padding: 12px; text-align: center; border-radius: 8px; }
			
.uppercontent-bg { background-color: #eaf6ff; }
			
.ishop-cp-button-pill.ishop-cp-button-blue.ishop-cp-button-reject { color: #fff; }

.subsection-wrapper .subsections-normal { justify-content: center; }

.product-saving-percentage { color: #008cd3; }
.product-black-friday-box { background-color: #000; color: #fff; display: inline-block; padding: 8px 16px; font-size: 16px; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; margin: 6px 0 12px; }
			


nav.nav-mobile .l2-list .links img { max-width: 22px; }										
nav.nav-mobile .l2-list a { text-decoration: none; }
nav.nav-mobile .striped-line-heading { color: #fff; font-size: 15px; text-transform: initial; background-color: #04a1fc; text-align: left; padding: 0 12px; line-height: 36px; height: 36px; max-width: 100%; }
nav.nav-mobile .l2-list .columns-wrapper { padding-top: 12px; }
nav.nav-mobile .l2-list .links { padding: 0 0 0 12px; }

.racket-bag-offer-details { font-size: 18px; color: #fff; font-weight: bold; background-color: #27b84d; padding: 10px 16px; text-align: center; border-radius: 4px; }

#blog-wrapper ul, #blog-wrapper ol { padding-left: 20px; }
@media all and (min-width: 768px) {
	#blog-wrapper .blog-content-wrapper:nth-child(even) { flex-direction: row-reverse; }
}

.page-1299 .products-swiper .swiper-slide{
    height: auto;
}
.page-1299 .products-swiper.bordered .swiper-slide:after{
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 1px;
    height: 100%;
    background: #ccc;
}

.pt-product .order-button-wrapper { min-width: 180px; }
.pt-product .order-button-wrapper .button.main { width: 100%; }
.pt-product .product-payment-icons-wrapper { row-gap: 8px; padding: 0; gap: 12px; }
.pt-product .product-payment-icons-wrapper > div { background-color: #fff; align-self: stretch; text-align: center; position: relative; font-size: 0; flex-basis: calc(33.333333% - 12px); }
.pt-product .product-payment-icons-wrapper > div img { position: relative; top: 50%; transform: translateY(-50%); max-width: 44px; max-height: 24px; width: initial; }
	
@media all and (min-width: 768px) and (max-width: 1039px) {
	.pt-product .product-payment-icons-wrapper { width: 100%; }
	.pt-product .product-payment-icons-wrapper > div { flex-basis: calc(16.666667% - 12px); }
	.pt-product .product-payment-icons-wrapper > div img { max-width: 100%; width: auto; }
	.pt-product .buttons-wrapper { flex-wrap: wrap !important; }
}
	
@media all and (min-width: 1px) and (max-width: 509px) {
	.pt-product .product-payment-icons-wrapper { width: 100%; }
	.pt-product .product-payment-icons-wrapper > div { flex-basis: calc(16.666667% - 12px); }
	.pt-product .product-payment-icons-wrapper > div img { max-width: 100%; width: auto; }
	.pt-product .buttons-wrapper { flex-wrap: wrap !important; }
}
	
#string_type option.recommended, #string_tension option.recommended {
    background-color: #41acff;
    color: #fff;
	font-weight: bold;
}
	
.pt-product .button:disabled {
    color: #FFF;
    opacity: 1;
    background-color: #000;
    border-color: #000;
	cursor: default;
}

/* Free delivery message */
@keyframes freeDeliveryMessageGradientMove {
    0% {
        background-position: 200% 50%
    }

    100% {
        background-position: 0 50%
    }
}
.free-delivery-message{
    background: var(--free-delivery-banner-border-color, #ccc);
    background: linear-gradient(45deg, var(--free-delivery-banner-border-color, #ccc) 0%, rgb(255,255,255) 50%, var(--free-delivery-banner-border-color, #ccc) 100%);
    background-size: 200% 100%;
    animation: freeDeliveryMessageGradientMove 6.6s linear infinite;
    padding: 4px;
}

.pt-product .free-delivery-message{
    animation: freeDeliveryMessageGradientMove 2.2s linear infinite;
}
.free-delivery-message-inner{
    will-change: background color;
    transition-property: background color;
    transition-duration: 0.4s;
    transition-delay: 0.001s;
    transition-timing-function: linear;
    border-radius: 4px;
    border-color: #fff;
    background: #fff;
    padding: 10px;
    color: #222;
    font-weight: 700;
    text-align: center;
}

.other-shipping-rates-toggle {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 14px;
	margin-top: 20px;
	position: relative;
	cursor: pointer;
}

.other-shipping-rates-toggle:before {
	content: '';
	z-index: 2;
	position: absolute;
	top: 50%;
	right: 8px;
	margin-top: -6px;
	width: 12px;
	height: 12px;
	background: transparent no-repeat center center;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
	background-size: cover
}

.other-shipping-rates-toggle.active:before {
	transform: rotate(180deg);
}

.other-shipping-details-wrapper { display: none; }
.other-shipping-details-wrapper.active { display: block; }