:root {
	--xl-blue: #0b5ea8;
	--xl-orange: #e9b045;
	--xl-listprice: #B12704;
}

/* =========================
   BASE / DEFAULT STYLES
   ========================= */

html {
	font-size: 13px;
	position: relative;
	min-height: 100%;
}
header {
	padding-top: env(titlebar-area-inset-top, 0px);
}
@media (min-width: 768px) {
	html {
		font-size: 14px;
	}
}
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #1f2a30;
	color: #fff;
	padding: 15px 0;
	z-index: 9999;
	display: none;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

	.cookie-banner a {
		color: #fff;
		font-weight: 500;
	}

	.cookie-banner .btn-primary {
		background-color: #0062b4;
		border: none;
	}

	.cookie-banner .btn-outline-light {
		border-color: rgba(255,255,255,0.6);
	}
body {
	background-color: #f3f3f3;
}
img {
	-webkit-user-drag: none;
	user-select: none;
}
.text-primary {
	color: var(--xl-blue)!important;
}
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
/* Solid Primary Button Override */
.btn-primary {
	background-color: var(--xl-blue);
	border-color: var(--xl-blue);
	color: #fff;
}

	.btn-primary:hover, .btn-primary:focus {
		background-color: #094d8a; /* Slightly darker shade for hover [cite: 2026-02-05] */
		border-color: #094d8a;
		color: #fff;
	}
.col-md-2-4 {
	width: 20%;
}

@media (max-width: 767px) {
	.col-md-2-4 {
		width: 100%;
	}
}

.btn-outline-primary {
	color: var(--xl-blue);
	border-color: var(--xl-blue);
}

	.btn-outline-primary:hover {
		background-color: var(--xl-blue);
		border-color: var(--xl-blue);
		color: #fff;
	}
.bg-grey {
	--bs-bg-opacity: 1;
	background-color: #8f8c8c !important;
}
#internalAdminModal .btn-outline-primary {
	border-width: 2px;
	font-weight: 600;
	transition: all 0.2s ease-in-out;
}

	#internalAdminModal .btn-outline-primary:hover {
		background-color: #0056b3;
		color: #fff;
		transform: translateY(-3px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
.star-ratings {
	color: var(--xl-orange);
}
.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--xl-blue);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 9999;
}

	.back-to-top:hover {
		background: var(--xl-orange);
	}

	.back-to-top.show {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
@media (max-width: 991px) {
	.back-to-top {
		display: none !important;
	}
}
.spin360 {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 80px;
	height: 80px;
	font-weight: 500;
	font-size: 14px;
	color: var(--xl-blue);
	text-align: center;
}

	/* main ring */
	.spin360::before {
		content: "";
		position: absolute;
		width: 70px;
		height: 70px;
		border: 4px solid var(--xl-blue);
		border-radius: 50%;
		animation: pulse360 2.2s ease-in-out infinite;
	}

	/* ripple ring (hidden normally) */
	.spin360::after {
		content: "";
		position: absolute;
		width: 70px;
		height: 70px;
		border: 3px solid var(--xl-blue);
		border-radius: 50%;
		opacity: 0;
		transform: scale(1);
	}

	/* camera icon */
	.spin360 i {
		position: absolute;
		font-size: 36px;
		color: #ccc;
		opacity: .35;
		animation: spin360reverse 16s linear infinite;
	}

/* pulse animation */
@keyframes pulse360 {

	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.08);
		opacity: .65;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ripple effect on hover */
.spin360:hover::after {
	animation: ripple360 1.4s ease-out;
}

@keyframes ripple360 {

	0% {
		transform: scale(1);
		opacity: .6;
	}

	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

/* reverse spin */
@keyframes spin360reverse {

	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0deg);
	}
}

.xl-spin-circle {
	position: relative;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}

	.xl-spin-circle::before {
		content: '';
		position: absolute;
		width: 160%;
		height: 160%;
		background: conic-gradient( #4285f4, #34a853, #fbbc05, #ea4335, #4285f4 );
		animation: spinRing 3s linear infinite;
		z-index: 1;
	}

	.xl-spin-circle::after {
		content: '';
		position: absolute;
		inset: 4px;
		background: white;
		border-radius: 50%;
		z-index: 2;
	}

	.xl-spin-circle .spin-icon {
		position: relative;
		z-index: 10;
		width: 70%;
		height: auto;
		display: block;
		margin: 0;
		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.xl-spin-circle:hover .spin-icon {
		transform: scale(1.10);
	}

@keyframes spinRing {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
.page-body-card p:last-child {
	margin-bottom: 0;
}
.image-protection-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: rgba(0,0,0,0);
}
.hireouttherebox {
	width: auto;
	height: 60px;
	max-height: 60px;
}
.spin360-nospin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 50px;
	height: 50px;
	font-weight: 500;
	font-size: 11px;
	color: var(--xl-blue);
	text-align: center;
}
#modalThumbScroller {
	scroll-behavior: smooth;
}

.thumb-nav-caret {
	font-size: 18px;
	color: #666;
}

	.thumb-nav-caret:hover {
		color: var(--xl-blue);
	}
#modalThumbScroller {
	cursor: grab;
	user-select: none;
}

	#modalThumbScroller.dragging {
		cursor: grabbing;
	}
#modalContentContainer {
	height: 65vh;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
	#modalContentContainer img {
		max-height: 100%;
		max-width: 100%;
		object-fit: contain;
	}
	#modalContentContainer .Magic360 {
		max-height: 100%;
	}
#modalContentContainer {
	transition: opacity .2s ease;
}
.modal-thumb-item.active {
	border: 2px solid var(--xl-blue);
}
/* =========================
   TOP BAR
   ========================= */
.top-bar {
	background: var(--xl-blue);
	color: #fff;
	font-size: 13px;
	padding: 6px 0;
}

	.top-bar a {
		color: #ffffff !important;
		text-decoration: none;
	}

		.top-bar a:hover {
			text-decoration: none;
		}

/* 
	========================
	CATEGORY
	========================
*/
.hero-banner-wrapper {
	position: relative;
	/* Lower min-height so it doesn't look huge on load */
	min-height: 150px;
	height: auto;
	display: flex;
	align-items: flex-start;
	background: rgba(255,255,255,0.03);
}

.hero-billboard {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 2;
}

	.hero-billboard.loaded {
		opacity: 1;
	}

/*.hero-shimmer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease;
}

@keyframes hero-shimmer-ani {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}*/

/* =========================
   MAIN HEADER
   ========================= */
.usp-inner a {
	text-decoration: none;
}
.border-dotted {
	border: 1px dotted #495057;
}
.main-header {
	background: url('/images/1920-01.min.svg') repeat-x #ffffff;
	background-size: contain;
	background-position: top center;
	padding: 20px 0;
}
@media (max-width: 768px) {
	.main-header {
		background-image: none; /* Removes the SVG */
		background-color: #f3f3f3; /* Applies your new light grey */
		padding: 15px 0; /* Optional: tightens up the header space for mobile */
	}
}
.main-header-inner {
	display: flex;
	align-items: center;
	gap: 30px;
}

/* LOGO */
.logo {
	display: flex;
	align-items: center;
}

	/* Base Styles (Desktop) */
	.logo img {
		height: 90px;
		width: auto; /* Changed to auto to maintain 3:1 ratio based on height */
		max-width: 100%;
	}

/* Mobile Adjustments (Tablets and Phones < 768px) */
@media (max-width: 768px) {
	.logo img {
		height: 60px; /* Scaled down for mobile */
		width: auto;
	}
}

/* Small Phones (< 480px) */
@media (max-width: 480px) {
	.logo img {
		height: 50px; /* Even smaller for tight headers */
		width: auto;
	}
}

/*#mobileSearch {
	background-color: var(--xl-orange);
}*/
#mobileSearch {
	display: none; /* Hidden on desktop */
	background-color: var(--xl-orange);
	padding: 10px;
}

@media (max-width: 768px) {
	#mobileSearch {
		display: block;
	}

	.search-flex-wrapper {
		display: flex; /* This is the key to putting them side-by-side */
		height: 45px;
		background-color: #fff;
	}

		.search-flex-wrapper input {
			flex: 1; /* This makes the input take up all remaining space */
			border: none;
			padding-left: 15px;
			font-size: 16px;
			outline: none;
			min-width: 0; /* Prevents input from pushing button off screen */
		}

		.search-flex-wrapper button {
			background-color: var(--xl-blue); /* XL Blue */
			border: none;
			width: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0; /* Prevents the button from being squashed */
		}
}
	/* breadcrumb */
.breadcrumb {
	background-color: var(--xl-blue);
	color: #fff;
	padding: 13px 0;
	text-align: center;
}

	.breadcrumb h1 {
		font-size: 1.3em;
		text-transform: uppercase;
		margin-bottom: 6px;
	}
.h1 {
	font-size: 1.3em;
}
	/* breadcrumb list */
	.breadcrumb ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: inline-flex;
		align-items: center;
	}

	/* list items */
	.breadcrumb li {
		display: flex;
		align-items: center;
	}

		.breadcrumb li + li::before {
			content: "›";
			margin: 0 10px;
			opacity: 0.6;
			font-size: 14px;
		}

	/* links */
	.breadcrumb a {
		color: #fff;
		text-decoration: none;
	}

		.breadcrumb a:hover {
			text-decoration: underline;
		}

	/* arrow separator */
	
/* =========================
   CENTER STACK
   ========================= */
.video-thumb {
	position: relative;
	display: inline-block;
}
.header-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* CALL US */
.call-us {
	font-size: 13px;
	color: var(--xl-blue);
	margin-bottom: 6px;
}

	.call-us span {
		font-size: 1.5em;
		font-weight: 600;
	}

.discount {
	background-color: #8BC249;
	font-size: 1.3em;
	font-weight: 600;
	color: #fff;
}
	.discount span {
		font-size: 0.8em;
		font-weight: normal;
	}

.voucher-icon {
	width: 40px;
	height: auto;
}
.voucher-row {
	background: #f3f3f3;
	padding: 8px 12px;
	border-radius: 4px;
}

.voucher-ribbon {
	background: #8BC34A;
	color: white;
	font-weight: 600;
	padding: 6px 14px;
	position: relative;
	font-size: 14px;
	border-radius: 3px 0 0 3px;
}

	/* little triangle notch */
	.voucher-ribbon:after {
		content: "";
		position: absolute;
		right: -10px;
		top: 0;
		width: 0;
		height: 0;
		border-top: 16px solid transparent;
		border-bottom: 16px solid transparent;
		border-left: 10px solid #8BC34A;
	}
/* SEARCH */
/*.search {
	display: flex;
	width: 100%;
	max-width: 800px;
}

	.search input {
		flex: 1;
		padding: 10px 12px;
		border: 1px solid #ccc;
		border-right: none;
		font-size: 14px;
	}

	.search button {
		background: var(--xl-orange);
		border: none;
		padding: 0 22px;
		color: #fff;
		font-weight: bold;
		cursor: pointer;
	}*/

/* TRUSTPILOT PLACEHOLDER */
.trustpilot-placeholder {
	width: 100%;
	margin-top: 15px;
}
.trustpilot-rate {
	font-size: 18px;
}
.trustpilot-reviews {
	font-size: 16px;
}
.tp-header-stats {
	transition: opacity 0.2s ease-in-out;
}

	.tp-header-stats:hover {
		opacity: 0.8;
		cursor: pointer;
	}
.tp-img-stars {
	height: 18px;
	width: auto;
	vertical-align: middle;
}

.tp-img-logo {
	height: 20px;
	width: auto;
	vertical-align: middle;
}
.tp-score-pill {
	border: 1px solid #eee;
}

.tp-divider {
	background-color: #ddd;
	height: 30px !important;
}

.tp-quote {
	line-height: 1.5;
	font-style: italic;
	font-size: 16px;
}
.h-98 {
	height: 111% !important;
}
/* =========================
   BASKET
   ========================= */
.basket {
	background: var(--xl-blue);
	color: #fff;
	padding: 10px 18px;
	position: relative;
	font-weight: bold;
}

	.basket .count {
		position: absolute;
		top: -6px;
		left: -6px;
		background: red;
		color: #fff;
		font-size: 11px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
/* =========================
   PRIMARY NAV BAR
   ========================= */

.primary-nav {
	background: #555;
	position: relative;
}

.nav-inner {
	display: flex;
	flex-wrap: nowrap; /* 🚫 no wrapping */
	overflow-x: auto; /* 👉 allow scroll if needed */
	-webkit-overflow-scrolling: touch;
	gap: 6px;
}
	.nav-inner::-webkit-scrollbar {
		display: none;
	}
.nav-inner {
	scrollbar-width: none; /* Firefox */
}

@media (min-width: 992px) {
	.nav-inner {
		gap: 0;
		overflow-x: visible;
	}

	.nav-inner > .nav-item {
		flex: 1 1 auto;
		min-width: 0;
	}

	.nav-inner > .nav-item > .nav-link {
		width: 100%;
		padding-right: 8px;
		padding-left: 8px;
		font-size: clamp(10px, 0.625vw, 12px);
	}
}

.primary-nav a {
	color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 0 13px;
	height: 48px;
	flex-shrink: 0;
	border-right: none;
}
.primary-nav a:last-child {
	border-right: none;
}
.nav-item:not(:last-child) > .nav-link {
	border-right: 1px solid rgba(255,255,255,0.15);
}

	.primary-nav a.clearance {
		color: var(--xl-orange);
	}
@media (max-width: 1400px) {
	.primary-nav a {
		padding: 0 10px;
		font-size: 11px;
	}
}
/* =========================
   MEGA MENU WRAPPER (FLICKER-FREE)
   ========================= */



	/* invisible hover buffer between tab + menu */
	.has-mega::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -14px;
		height: 14px;
	}

/* base mega menu */
.mega-menu {
	position: absolute;
	top: 48px; /* nav height */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1320px; /* match Bootstrap container */
	background: #fff;
	padding: 30px 0 0 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms ease, visibility 150ms ease;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.has-mega.is-active .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* caret rotation */
.has-mega.is-active .nav-caret {
	transform: rotate(180deg);
}
/* Ensure the link stays white when the menu is open, 
   even if the mouse moves away [cite: 2026-02-05] */
.has-mega.is-active > .nav-link {
	color: #ffffff !important;
}

	/* Also ensure it stays white on hover while active [cite: 2026-02-05] */
	.has-mega.is-active > .nav-link:hover {
		color: #ffffff !important;
	}
/* optional active tab feedback */
.has-mega:hover > .nav-link {
	color: #fff;
}

/* =========================
   MEGA MENU CONTENT
   ========================= */

.mega-menu * {
	text-align: left;
}

/* headings */
.mega-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #333;
}

/* links */
.mega-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.mega-links li {
		margin-bottom: 6px;
	}

	.mega-links a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #696969;
		text-decoration: none;
		font-size: 13px;
		padding-left: 20px;
		height: 25px;
	}

		.mega-links a:hover {
			text-decoration: underline;
		}
.mega-products a {
	color: #696969;
	text-decoration: none;
	font-size: 13px;
}
/* header link */
.mega-menu-header-link a {
	color: #333;
	text-decoration: none;
	font-size: 13px;
	padding: 0 0 10px 20px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-transform: uppercase;
	font-weight: 700;
}

/* =========================
   CARET
   ========================= */

.has-caret {
	gap: 6px;
}

.nav-caret {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #fff;
	transition: transform 0.2s ease;
}

/* =========================
   PRODUCT GRID
   ========================= */
.visual-option-card {
	min-width: 120px;
	transition: all 0.2s ease-in-out;
	background: #fff;
	border: 2px solid #dee2e6 !important;
}

	.visual-option-card:hover {
		border-color: #0056b3 !important;
		background: #f8f9fa;
	}

.visual-radio-input:checked + .visual-option-card {
	border-color: #0056b3 !important;
	background-color: #0056b3;
	color: #fff;
}

.visual-radio-input:disabled + .visual-option-card {
	opacity: 0.5;
	cursor: not-allowed;
}
.visual-option-card:not(:has(.fa-kit)) {
	min-width: 100px;
	height: 45px !important;
}

.visual-option-card .fw-bold {
	font-size: 0.95rem;
}

.visual-radio-input:checked + .visual-option-card:not(:has(.fa-kit)) {
	background-color: #0056b3;
	color: #fff;
	border-color: #004a99 !important;
}
.mega-products {
	display: flex;
	align-items: center; /* vertical centering vs menus */
}

.products-align {
	width: 100%;
}

/* product card */
.mega-product {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

	/* image */
	.mega-product img {
		width: 100%;
		height: 129px;
		object-fit: contain;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	/* title */
	.mega-product span {
		display: block;
		margin-top: 8px;
		line-height: 1.3;
		min-height: 2.6em;
		text-align: center;
	}

.shop-window-header {
	font-size: 1.0em;
}
.shop-window-header span {
	font-weight: 500;
}
.shop-window-category {
	background-color: #eaf8f9;
}
.shop-window span {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	min-height: 2.6em;
	line-height: 1.3;
	font-size: 0.9em;
	text-align: center;
}
.shop-window-borad-link a {
	font-size: 1.0em;
	color: inherit; /* replaces text-reset */
	font-weight: 600;
	text-decoration: none; /* replaces text-decoration-none */
	display: block; /* makes the whole row clickable */
	width: 100%;
}
/* look at */
.look-at-wrapper {
	height: 319px; /* adjust to taste */
	display: flex;
	
}

	.look-at-wrapper .card {
		width: 100%;
	}
.trustpilot-card {
	background-color: #f2fbf7;
}
.tp-stars {
	font-size: 2.0em;
}
/* =========================
   USP BAR
   ========================= */
.usp-bar {
	background: #f3f3f3;
	border-bottom: 1px solid #ddd;
}

.usp-inner {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
}

.usp-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #777;
	font-size: 12px;
}

.usp-icon {
	font-size: 22px;
	color: #9a9a9a;
	flex-shrink: 0;
}

.usp-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

	.usp-text strong {
		font-size: 12px;
		font-weight: 600;
		color: #888;
	}

	.usp-text span {
		font-size: 11px;
		color: #aaa;
	}

.category-list {

}
	.category-list a {
		color: inherit;
		text-decoration: none;
		display: block;
		width: 100%;
	}
	.category-list .fa-chevron-right {
	font-size: 12px;
	color: #999;
	transition: transform 0.15s ease, color 0.15s ease;
}

.category-list .list-group-item:hover .fa-chevron-right {
	transform: translateX(3px);
	color: #333;
}
	.category-list .fa-chevron-right {
		font-size: 12px;
		color: #999;
		transition: transform 0.15s ease, color 0.15s ease;
	}

	.category-list .list-group-item:hover .fa-chevron-right {
		transform: translateX(3px);
		color: #333;
	}
.category-header {
	background-color: var(--xl-blue);
	color: #fff;
	font-weight: 600;
	padding: .7rem 1rem;
	font-size: 13px;
}
.list-group-item {
	padding: .7rem 1rem;
}
/* page */
.page-highlight-card {
	border: 1px solid #dee2e6;
	background-color: #fff;
}
.border-blue {
	border: solid 1px var(--xl-blue);
}
.page-body-card {
	border: 1px solid #dee2e6;
	background-color: #fff;
	border-radius: 4px;
}
	.page-body-card h1 {
		font-size: 1.4rem;
		font-weight: 400;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}
	.page-body-card h2 {
		font-size: 1.3rem;
		font-weight: 600;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}
	.page-body-card h3 {
		font-size: 1.2rem;
		font-weight: 600;
	}
	.page-body-card h4 {
		font-size: 1.1rem;
		font-weight: 600;
	}
	.page-body-card a {
		color: var(--xl-blue);
		text-decoration: none;
	}
	.page-body-card p {
		margin-bottom: 10px;
	}
	.page-body-card strong {
		font-weight: 600;
	}

	.buyers-guide-body-card h1 {
		font-size: 1.4rem;
		font-weight: 400;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}

	.buyers-guide-body-card h2 {
		font-size: 1.3rem;
		font-weight: 600;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}

	.buyers-guide-body-card h3 {
		font-size: 1.3rem;
		font-weight: 600;
	}

	.buyers-guide-body-card h4 {
		font-size: 1.2rem;
		font-weight: 600;
	}

	.buyers-guide-body-card a {
		color: var(--xl-blue);
		text-decoration: none;
	}
.heading-two-underline {
	font-size: 1.3rem;
	font-weight: 600;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.trapezium {
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
	.trapezium span {
		-webkit-border-top-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-topright: 10px;
		-moz-border-radius-bottomright: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #fbb03b;
		padding: 10px 20px 10px 10px;
		color: #fff;
		font-size: 1.2em;
	}
.buyers-guide-card-top {
	background-color: #fbb03b;
	padding: 10px;
	color: #fff;
	font-weight: 500;
}
.divider {
	position: relative;
	margin-top: 30px;
	margin-bottom: 30px;
	height: 1px;
}
.catdivider {
	position: relative;
	margin-top: 10px;
	height: 1px;
}
.div-transparent:before {
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, #abaeb3, transparent);
}
.product-body-card {
	border: 1px solid #dee2e6;
	background-color: #fff;
	border-radius: 4px;
}
.product-body-card-accordian p {
	margin-bottom: 0px;
}
.accordion-item ul {
	margin-bottom: 0;
}
/* Standard Page */
.content-body-card {
	border: 1px solid #dee2e6;
	background-color: #fff;
	border-radius: 4px;
}
	.content-body-card a {
		color: var(--xl-blue);
		text-decoration: none;
	}

	.brand-details-text a.btn-primary,
	.brand-details-text a.btn-primary:hover,
	.brand-details-text a.btn-primary:focus {
		color: #fff;
	}

	.content-body-card p {
		margin-bottom: 10px;
	}

	.content-body-card strong {
		font-weight: 600;
	}
	.content-body-card h3 {
		font-size: 1.2rem;
		font-weight: 600;
	}
	.content-body-card h4 {
		font-size: 1.2rem;
		font-weight: 600;
	}
/* sections */
.feature-white {
	background-color: #fff;
}
.feature-grey {
	background-color: #f3f3f3;
}
.feature-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.feature-title {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
	font-size: 18px;
	font-weight: 500;
	margin: 0;
}

	.feature-title::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 3px;
		background-color: #1c4396;
		border-radius: 2px;
	}

.feature-header .updated {
	font-size: .875em;
	color: #666;
	white-space: nowrap;
}
.feature-swiper {
	padding: 0 40px 10px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

	.feature-swiper .swiper-slide {
		height: auto;
	}

	.feature-swiper .swiper-button-prev,
	.feature-swiper .swiper-button-next {
		color: var(--xl-blue);
	}

		.feature-swiper .swiper-button-prev::after,
		.feature-swiper .swiper-button-next::after {
			font-size: 20px;
			font-weight: bold;
		}
/* =========================
   PRODUCT CARD
   ========================= */

.product-card {
	background: #fff;
	border-radius: 8px;
	padding: 12px 14px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

	.product-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 25px rgba(0,0,0,0.12);
	}
.product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	margin-bottom: 14px;
}

	.product-image img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		padding: 10px; 
	}


.product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
	padding: 0 10px 10px 10px;
}


.product-title {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	margin-bottom: 10px;
	color: #222;
	height: 4.2em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.product-rating {
	font-size: 14px;
	color: var(--xl-orange); 
	margin-bottom: 8px;
}

	.product-rating span {
		color: #777;
	}
.product-footer {
	margin-top: auto;
}

.product-rating {
	margin-bottom: 5px;
}
.product-price {
	margin-top: auto;
}

.price-was {
	display: block;
	color: #d10000;
	text-decoration: line-through;
	font-size: 14px;
}

.price-now {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #333;
}
.product-what-is {
	margin-top: 10px;
}
.site-footer {
	border-top: solid 4px var(--xl-orange);
	border-bottom: solid 4px var(--xl-orange);
	background-color: var(--xl-blue);
}
	.site-footer h6 {
		text-transform: uppercase;
		color: rgba(255, 255, 255, .9);
		margin-bottom: 0;
	}
	.site-footer ul {
		margin: 10px 0 0 0;
		list-style-type: none;
		padding-left: 0;
	}
	.site-footer li {
		display: block;
		margin: 0 0 10px 0;
		line-height: 1;
		font-weight: 400;
	}
	.site-footer a {
		color: #fff;
		font-size: 1.0em;
		text-decoration: none;
	}
.payment-methods {
	width: 200px;
	height: 67px;
}
.google-reviews {
	width: 80px;
	height: 26px;
}
.footer-social {
	display: flex;
	gap: 14px;
}

	.footer-social a {
		color: #fff;
		font-size: 18px;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

		.footer-social a:hover {
			opacity: 0.8;
			transform: translateY(-2px);
		}
.footer-google p {
	color: #fff;
}
.footer-awards {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
	.footer-awards img {
		width: 55px; height: 55px;
	}
.alert-xl {
	background-color: rgba(233, 176, 69);
	border: 1px solid var(--xl-orange);
	color: #fff;
}

	.alert-xl .text-decoration-underline {
		cursor: pointer;
	}

		.alert-xl .text-decoration-underline:hover {
			text-decoration-thickness: 2px;
		}
.alert-tp {
	background-color: rgba(0, 182, 122, 0.1); /* soft green tint */
	border: 1px solid #00b67a;
	color: #0b5137;
}
.tp-score-pill {
	display: inline-flex;
	align-items: center;
	background-color: #00b67a;
	color: #fff;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 0.9em;
	gap: 14px;
}

.tp-left,
.tp-right {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.tp-stars {
	font-size: 1.1em;
	letter-spacing: 1px;
}

.tp-rating {
	font-weight: 700;
	font-size: 1.4em;
}

.tp-divider {
	width: 1px;
	height: 36px;
	background-color: rgba(255,255,255,0.4);
}

.tp-score {
	font-weight: 700;
}

.tp-label {
	font-size: 1.4em;
	font-weight: 700;
}

.tp-review-count {
	margin-top: 6px;
	font-size: 0.8em;
	color: #555;
}

.accordion-button:not(.collapsed) {
	color: inherit;
	background-color: #fafafa;
	font-weight: 600;
}
.accordion-button:focus:not(:focus-visible) {
	box-shadow: none;
	outline: none;
}
.accordion-body strong {
	font-weight: 600;
}

.category-card {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
}

.price-badge {
	position: absolute;
	bottom: 60px;
	left: 0;
	background: #f4a340;
	color: white;
	padding: 6px 9px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
	.price-badge strong {
		font-size: 15px;
		font-weight: 700;
	}
.buyers-guide {
	background: #5f5f5f;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
}

	

	.buyers-guide h4,
	.buyers-guide h5 {
		color: #ff9f2a;
		font-weight: 700;
	}
	.buyers-guide h4 {
		font-size: 15px;
	}
	.buyers-guide h5 {
		font-size: 14px;
	}

		.buyers-cta {
			font-size: 28px;
			color: #ff9f2a;
			transition: transform 0.25s ease;
		}
.brands-strip {
	max-width: 100%;
}
.brand-img {
	width: auto;
	max-width: 80px;
	object-fit: contain;
	border: solid 1px #ccc;
	border-radius: 4px;
	padding: 5px;
}
.brand-side-logo {
	object-fit: contain;
}

.product-main h1 {
	font-size: 1.4rem;
	font-weight: 400;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.vat-label {
	color: #333;
	font-size: .8em;
}
.product-ex-price {
	color: #387fb7;
	font-size: 30px;
	font-weight: 600;
	line-height: 50px;
}
.product-inc-price {
	color: #ccc;
	font-size: 30px;
	font-weight: 600;
	line-height: 50px;
}
.product-price-std {
	color: #387fb7;
}
.qdbg {
	background-color: #7b79f1;
}
.product-options {
	margin-top: 10px;
}
.product-option {
	border: 1px solid #ddd;
	padding: 10px 12px;
	border-radius: 4px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.option-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 7px;
	color: #333;
}

.option-info {
	font-size: 14px;
	color: var(--xl-blue);
	cursor: pointer;
}

.option-row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	color: #333;
}

	.option-row input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
	}

.option-text {
	display: flex;
	align-items: center;
	gap: 6px;
}

.option-price {
	font-weight: 600;
	color: #d10000;
}
.purchase-bar {
	display: flex;
	gap: 16px;
	align-items: center;
}

.qty-control {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
}

	.qty-control input {
		width: 60px;
		text-align: center;
		border: none;
		height: 44px;
		font-size: 16px;
	}

		.qty-control input:focus {
			outline: none;
		}

.qty-btn {
	width: 40px;
	height: 44px;
	border: none;
	background: #f3f3f3;
	font-size: 18px;
	cursor: pointer;
}

	.qty-btn:hover {
		background: #e6e6e6;
	}

.btn-add {
	background: #2ea043;
	border: none;
	color: white;
	font-size: 16px;
	font-weight: 600;
	padding: 0 40px;
	height: 45px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .2s ease;
	flex-grow: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

	.btn-add:hover {
		background: #238636;
	}
	.btn-add:disabled {
		cursor: not-allowed;
		opacity: 0.8;
	}

.hr-dotted {
	border: none;
	border-top: 2px dotted #ddd;
	margin: 24px 0;
}
.price-match-box {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #f7f7f7;
	border: 1px solid #ddd;
	padding: 10px 14px;
	border-radius: 6px;
}

.price-match-icon {
	font-size: 40px;
	font-weight: 600;
	color: var(--xl-blue);
	flex-shrink: 0;
}

.price-match-content h4 {
	margin: 0 0 6px 0;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #333;
}

.price-match-content p {
	margin: 0;
	font-size: 14px;
	color: #666;
}
	.product-images-thumbs > div {
		aspect-ratio: 1 / 1; 
		display: flex;
		align-items: center;
		justify-content: center;

		border: 1px solid #ddd;
		border-radius: 6px;
		margin-bottom: 10px;
	}
	.product-images-thumbs img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
@media (max-width: 768px) {
	.product-images-thumbs {
		grid-template-columns: repeat(3, 1fr);
	}
}
.product-features {
	margin-top: 10px;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 8px;
}

	.product-features ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.product-features li {
		position: relative;
		padding-left: 15px;
		font-size: 14px;
		color: #333;
		line-height: 1.4;
	}

		.product-features li:last-child {
			margin-bottom: 0;
		}

		.product-features li::before {
			content: "✓";
			position: absolute;
			left: 0;
			top: 1px;
			font-weight: 700;
			color: #2ea043;
			font-size: 14px;
		}
.product-artwork-checklist {
	background: #eef3f7;
	border-radius: 8px;
	padding: 18px 22px;
	margin-top: 16px;
}

.artwork-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.artwork-title {
	font-weight: 600;
	font-size: 15px;
	color: #1f2d3d;
}

.artwork-info {
	font-size: 14px;
	color: var(--xl-blue);
	cursor: pointer;
}

.product-artwork-checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-artwork-checklist li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	color: #2f3b4a;
	line-height: 1.4;
}

	.product-artwork-checklist li::before {
		content: "✓";
		position: absolute;
		left: 0;
		top: 1px;
		font-size: 13px;
		font-weight: 600;
		color: var(--xl-blue);
	}

	.product-artwork-checklist li:last-child {
		margin-bottom: 0;
	}
.price-match-box {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e0e0e0;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

	.price-match-box:hover {
		border-color: var(--xl-blue);
		cursor: pointer;
	}
.product-list-price {
	margin: 0 0 0 0;
}
.product-list-price span {
	color: var(--xl-listprice);
}
.price-match-icon-bg {
	position: absolute;
	right: -3px;
	bottom: 30px;
	font-size: 100px;
	color: #000;
	opacity: 0.10;
	pointer-events: none;
}

.price-match-content {
	position: relative;
	z-index: 1;
}
	.price-match-content h5 {
		text-transform: uppercase;
		font-size: 1.1em;
		margin-bottom: 0px;
	}
.cursor {
	cursor: pointer;
}
.product-item {
	opacity: 0;
	transform: translateY(10px);
	animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#productMeta {
	letter-spacing: 0.5px;
}

#loadMoreBtn {
	padding: 12px 40px;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s ease;
	border-width: 2px;
}

	#loadMoreBtn:hover {
		background-color: #000;
		color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
.notfound {
	background-color: #f8f9fa;
	border: 1px dashed #0054a6;
}
.product-image-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 14px;
}
	.product-image-wrapper img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		padding: 10px;
		position: relative;
		z-index: 1; 
	}
.product-badges {
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -12px !important;
	margin-left: -14px !important;
	pointer-events: none;
}

.badge-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 60px;
	height: 23px;
	text-transform: uppercase;
	color: #fff;
	padding: 0 10px;

	font-size: 12px;
	font-weight: 600;
	margin-bottom: 2px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.product-badges .badge-tag:first-child {
	border-top-left-radius: 8px;
}

.badge-tag span {
	padding: 0;
	line-height: 1;
}
.cp_bs { background-color: #8fc468; }
.cp_fl { background-color: #5aae57; }
.cp_hr { background-color: #924fbc; }
.cp_bv { background-color: #dc34a8; }
.cp_ms { background-color: #000; }
.cp_sale { background-color: #e21496; }
.cp_pd { background-color: #d9534f; }
.cp_new { background-color: #14c3e2; }
.cp_bl { background-color: #02a4da; }
.cp_is {background-color: #5aae57;}
.feature-swiper .swiper-slide .product-item {
	width: 100% !important;
	max-width: none !important;
	flex: 0 0 100% !important;
	padding: 0;
}

.feature-swiper .product-card {
	height: 100%;
}
.lead {
	font-size: 1.15rem;
}
#sortDropdown:focus {
	border-color: #ccc;
	box-shadow: none;
	outline: 0;
}
.category-meta-bar {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.meta-count {
	font-size: 14px;
}

.meta-title {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: #222;
}

.sort-select {
	width: auto;
	min-width: 160px;
	border-color: #ced4da;
	cursor: pointer;
	font-size: 14px;
}

	.sort-select:focus {
		border-color: #adb5bd;
		box-shadow: none;
		outline: 0;
	}

@media (max-width: 767px) {
	.category-meta-bar .col-12 {
		padding: 5px 0;
	}
}
.xl-product-accordian h2,
.xl-product-accordian h4
{
	font-size: 1.2rem;
	font-weight: 600;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.xl-product-accordian h6 {
	font-size: 1.0rem;
	font-weight: 600;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.xl-product-accordian p,
.xl-product-accordian ul {
	margin-bottom: 10px;
}
.xl-product-accordian a {
	color: var(--xl-blue);
	text-decoration: none;
}
.xl-product-accordian a:hover {
	text-decoration: underline;
}
.badge {
	display: inline-block;
	padding: .35em .65em;
	font-size: .75em;
	font-weight: 700;
	line-height: 0.75;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25rem;
}
.badge-danger {
	color: #fff;
	background-color: #dc3545;
}
.aspect {
	font-size: 0.85rem;
	font-weight: 500;
}
.w-10 {
	width: 10%;
}
.w-80 {width: 80%;}
.brand-header {
	background-color: var(--xl-blue);
	color: #fff;
	font-weight: 600;
	padding: .7rem 1rem;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	line-height: 1.2;
}

.units-sold-badge {
	background-color: #f0f7ff;
	border: 1px solid #0056b3;
	border-radius: 4px;
	overflow: hidden;
}

.units-sold-icon {
	background-color: #0056b3;
	color: #fff;
	padding: 15px;
	font-size: 1.3rem;
}

.units-sold-content {
	padding: 8px 15px;
}

.product-status-cards .units-sold-badge {
	min-height: 72px;
}

.delivery-info-button {
	background: transparent;
	border: 0;
	color: #0056b3;
	line-height: 1;
	padding: 0;
}

.delivery-info-button:hover,
.delivery-info-button:focus-visible {
	color: #003f83;
}

.delivery-info-button:focus-visible {
	outline: 2px solid #0056b3;
	outline-offset: 2px;
}

.artwork-badge {
	background-color: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	color: #212529;
}

.artwork-icon {
	background-color: #dedede;
	color: #212529;
	padding: 14px;
	font-size: 1.3rem;
}

.artwork-content {
	padding: 8px 15px;
}

.artwork-badge-title {
	display: block;
	font-weight: 800;
	color: #212529;
	letter-spacing: 0.5px;
}

.badge-title {
	display: block;
	font-weight: 800;
	color: #0056b3;
	letter-spacing: 0.5px;
}

.badge-text {
	display: block;
	font-size: 0.9rem;
	color: #333;
}
.attr-select:focus,
.attr-select:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: #dee2e6;
}

.attr-select:focus-visible {
	outline: none;
	box-shadow: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

.qty-control input {
	text-align: center;
	border: 1px solid #dee2e6;
	width: 50px;
	height: 45px;
}
.shake {
	animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}
.nav-tabs .nav-link {
	color: #495057;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	margin-right: 5px;
	font-weight: 600;
}

	.nav-tabs .nav-link.active {
		color: #0056b3 !important;
		background-color: #fff !important;
		border-bottom-color: #fff !important;
		margin-bottom: -1px;
	}

.tab-content {
	min-height: 300px;
}
.option-card-2 {
	position: relative;
	border: 1px solid #ddd;
	border-radius: 11px;
	padding: 2.25rem 1.5rem 1.5rem;
}
.option-number-2 {
	position: absolute;
	top: -14px;
	left: 20px;
	width: 36px;
	height: 36px;
	background-color: #0062b4;
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.product-images-thumbs {
	scrollbar-width: thin; /* Firefox */
}

	.product-images-thumbs::-webkit-scrollbar {
		width: 4px;
	}

	.product-images-thumbs::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 10px;
	}

.thumb-wrapper {
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s;
	background: #fff;
}

	.thumb-wrapper:hover, .thumb-wrapper.active {
		border-color: var(--xl-blue) !important;
		border-width: 2px;
	}

.product-image-main {
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-images-thumbs-wrapper {
	max-height: 450px;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

	.product-images-thumbs-wrapper::-webkit-scrollbar {
		display: none;
	}

.thumb-nav-caret {
	color: #ccc;
	transition: color 0.2s;
	font-size: 1.2rem;
}

	.thumb-nav-caret:hover {
		color: var(--xl-blue);
	}

.modal-thumb-item {
	transition: all 0.2s;
	border-radius: 4px;
}

	.modal-thumb-item:hover, .modal-thumb-item.active {
		border-color: var(--xl-blue) !important;
		border-width: 2px;
	}
.custom-gallery-size {
	max-width: 80% !important;
}

.modal-content {
	border-radius: 12px;
}

.main-display-area {
	background: #fff;
	min-height: 500px;
}

#modalLargeDisplay {
	transition: opacity 0.2s ease-in-out;
	filter: drop-shadow(0 5px 15px rgba(0,0,0,0.05));
}

.gallery-footer {
	background-color: #fcfcfc !important;
}

.modal-thumb-item {
	border-radius: 6px;
	opacity: 0.7;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

	.modal-thumb-item:hover,
	.modal-thumb-item.active {
		opacity: 1;
		border-color: var(--xl-blue) !important;
		border-width: 2px;
	}

.custom-scroll-horizontal {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

	.custom-scroll-horizontal::-webkit-scrollbar {
		display: none;
	}
#modalLargeDisplay,
.modal-thumb-item img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-select: none;
}

.main-display-area {
	position: relative;
}

	.main-display-area::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background: transparent;
	}
#imageGalleryModal .btn-close {
	background-color: rgba(0,0,0,0.5);
	padding: 1rem;
	z-index: 2100 !important;
}

.main-display-area::after {
	z-index: 10;
	pointer-events: none;
}
.blue-border {
	background-color: var(--xl-blue);
	margin: 0;
}
.fs-7 {
	font-size: 1.9rem!important;
}

.design-step-card {
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.card-img-wrapper {
	position: relative;
}
	.card-img-wrapper img {
		width: 100%;
		display: block;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
		object-fit: cover;
		height: 250px;
		position: relative;
		z-index: 1;
	}
.step-label {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, 50%);
	background-color: #444;
	color: #fff;
	padding: 8px 20px;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 5px;
	z-index: 10;
	white-space: nowrap;
}

.design-step-card .card-body p {
	color: #333;
	line-height: 1.6;
	font-size: 1.05rem;
}
.hero-header {
	background-image: url(https://images.xldisplays.co.uk/graphic-design/graphic-design-lead.webp);
	background-size: cover;
	background-position: center;
	min-height: 600px;
	position: relative;
	width: 100%;
	border-radius: 5px;
}

	.hero-header .text {
		position: absolute;
		bottom: 50px;
		left: 115px;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1.4;
		max-width: 800px;
	}

		.hero-header .text p {
			font-size: 3.5rem;
			margin-bottom: 10px;
			line-height: 1;

		}
.work-card {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
}

.work-overlay {
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: bottom 0.4s ease-in-out;
	color: #fff;
	padding: 15px;
}

.work-card:hover .work-overlay {
	bottom: 0;
}

.overlay-content p {
	font-size: 0.9rem;
	line-height: 1.2;
}

.work-card img {
	transition: transform 0.5s ease;
}

.work-card:hover img {
	transform: scale(1.1);
}
.masonry-grid {
	column-count: 4;
	column-gap: 1rem;
}

@media (max-width: 992px) {
	.masonry-grid {
		column-count: 3;
	}
}

@media (max-width: 768px) {
	.masonry-grid {
		column-count: 2;
	}
}

.work-card {
	break-inside: avoid;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

.parallax-wrapper {
	overflow: hidden;
	position: relative;
}

.parallax-img {
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
	transform: scale(1.05);
}

.work-card:hover .parallax-img {
	transform: scale(1.2) translateY(-10px);
}
.img-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: shimmer 1.2s infinite;
	z-index: 1;
}

.gallery-img {
	opacity: 0;
	transition: opacity 0.4s ease;
	display: block;
	width: 100%;
	height: auto;
}

	.gallery-img.loaded {
		opacity: 1;
	}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

.work-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.work-card:hover .work-overlay {
	opacity: 1;
}
.search-container {
	position: relative;
}

.search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	z-index: 1000;
	display: none;
	max-height: 600px;
	overflow-y: auto;
}
#searchForm {
	display: flex;
	width: 100%;
	align-items: stretch;
}

#productSearch {
	flex-grow: 1;
	border: 1px solid #ccc;
	padding: 10px 15px;
	outline: none;
	border-radius: 4px 0 0 4px;
}

#searchForm button {
	background-color: var(--xl-orange);
	color: white;
	border: none;
	padding: 0 20px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0 4px 4px 0;
	white-space: nowrap;
}

	#searchForm button:hover {
		background-color: #e67e22;
	}
.result-item {
	display: flex;
	padding: 10px;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: #333;
}

	.result-item img {
		width: 50px;
		height: 50px;
		object-fit: contain;
		margin-right: 15px;
	}

.result-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex: 1;
}

	.result-info .stars,
	.result-info .pricing {
		text-align: left;
		width: 100%;
	}

	.result-info .stars {
		color: #ffc107;
		font-size: 0.8rem;
		margin: 2px 0;
	}

	.result-info .price {
		font-weight: bold;
	}
	.result-info .name {
		color: #333;
		line-height: 1.2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
.was-price {
	text-decoration: line-through;
	color: #999;
	font-size: 0.8rem;
	margin-right: 5px;
}
.result-item:hover {
	background-color: #f8f9fa;
	border-left: 4px solid var(--xl-orange);
	transition: all 0.2s ease;
}

.result-info .name {
	color: #333;
	font-size: 0.95rem;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.stars {
	color: var(--xl-orange);
	font-size: 14px;
}
.search-container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.search {
	display: flex;
	width: 100%;
}

	.search input {
		flex: 1;
		padding: 10px 12px;
		border: 1px solid #ccc;
		border-right: none;
		font-size: 14px;
	}

	.search button {
		background: var(--xl-orange);
		border: none;
		padding: 0 22px;
		color: #fff;
		font-weight: bold;
		cursor: pointer;
	}

.search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	z-index: 1000;
	display: none;
	max-height: 600px;
	overflow-y: auto;
	border: 1px solid #ccc;
	border-top: none;
	animation: slideDown 0.2s ease-out forwards;
}
.search input:focus {
	outline: none;
	border: 1px solid var(--xl-orange);
	border-right: none;
}
.was-price {
	color: #999;
	text-decoration: line-through;
	font-size: 12px;
}
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.buyers-guide-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--xl-orange);
	color: white;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	z-index: 10;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transform: rotate(-15deg);
}
.guide h5 {
	color: var(--bs-body-color);
	opacity: 0.7;
}
.cart h4 {
	border-bottom: 2px solid var(--xl-blue);
	padding-bottom: 8px;
	margin-bottom: 15px;
	text-transform: uppercase;
	display: block;
}
.cart table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

	.cart table tr td {
		padding: 9px 0;
		border-bottom: 1px solid #eee;
		font-size: 14px;
	}

		.cart table tr td:last-child {
			text-align: right;
			color: #333;
		}

	.cart table tr:last-child td {
		border-bottom: none;
	}
.checkout-step {
	transition: all 0.3s ease;
}

	.checkout-step.locked {
		opacity: 0.6;
		pointer-events: none;
	}

	.checkout-step h4 span {
		background: #fff;
		color: var(--xl-blue);
		width: 28px;
		height: 28px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 0.9rem;
		margin-right: 10px;
	}

	.checkout-step.locked h4 span {
		background: #ccc;
	}

	.checkout-step .form-control:focus {
		border-color: var(--xl-blue);
		box-shadow: 0 0 0 0.25rem rgba(0, 84, 166, 0.1);
	}
.sticky-summary-wrapper {
	position: -webkit-sticky;
	position: sticky;
	top: 20px;
	align-self: flex-start;
}
.pulse-icon {
	animation: pulse-animation 2s infinite;
	font-size: 1.2rem;
}

@keyframes pulse-animation {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.7;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.fw-black {
	font-weight: 900;
}

.font-monospace {
	font-family: 'Courier New', Courier, monospace;
}
#cutoff-timer-container.bg-success {
	background: linear-gradient(135deg, #198754 0%, #146c43 100%) !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

#countdown-timer {
	letter-spacing: 0.5px;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.15);
}

.checkout-step h4 span {
	background: white;
	color: var(--xl-blue);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0.85rem;
	margin-right: 12px;
	border: solid 1px var(--xl-blue);
}
.checkout-step.locked {
	opacity: 0.1;
}


.event-card-wrapper {
	position: relative;
	overflow: hidden;
}

.event-finished-stamp {
	position: absolute;
	top: 25%;
	left: 75%;
	transform: translate(-50%, -50%) rotate(-15deg);
	z-index: 10;
	pointer-events: none;

	border: 2px solid #d10000;
	color: #d10000;
	font-family: 'Impact', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 20px;
	opacity: 0.3;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	white-space: nowrap;
}

.brand-hero-container {
	overflow: hidden;
}

.brand-hero-img {
	object-fit: cover;
	filter: brightness(0.9);
}

.brand-logo-overlay {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 10;
}

.brand-floating-logo {
	background: #fff;
	padding: 10px;
	border: 1px solid #555;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
	max-width: 180px;
	height: auto;
}
.corporate-features {
	background-color: #3076ae;
}
.corporate-features-surge {
	background-color: #327743;
}
.corporate-features-fb {
	background-color: #0168b3;
}
.corporate-features-stingray {
	background-color: #2b566a;
}
.corporate-features-xpo {
	background-color: #343a40;
}
	.corporate-features, .corporate-features-surge, .corporate-features-fb, .corporate-features-stingray, .corporate-features-xpo h3 {
		text-transform: uppercase;
		color: #fff;
	}
.corporate-features-item {
	text-align: center;
	color: #fff;
}
.corporate-features-item p{
	margin-bottom: 0;
}
.surge-hero-container {
	background-image: url(https://images.xldisplays.co.uk/brands/Surge-Background2.webp);
	background-repeat: repeat;
}
.fabri-banner-hero-container {
	background-color: #0168b3;
}
.stingray-banner-hero-container {
	background-color: #000;
}
.about-card {
	background-color: var(--xl-blue);
	color: #fff;
	text-align: center;
	padding: 7px;
	border-radius: 15px;
}
	.about-card span {
		color: var(--xl-orange);
		font-weight:700;
		font-size: 30px;
	}
	.about-card p {
		margin-bottom: 0;
	}
.corporate-header {
	background-color: var(--xl-orange);
	color: #fff;
}
	.corporate-header h4 {
		font-size: 1.1rem;
	}
.logo-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 10px;
}

	.logo-grid .blogo {
		background-color: #555;
		height: 80px;
		border-radius: 15px;
		flex: 0 0 auto;
		max-width: 8%;
		object-fit: contain;
		filter: grayscale(100%);
		opacity: 0.7;
		transition: all 0.3s ease;
	}

.logo-grid .blogo:hover {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.05);
}
.award-logo {
	height: 75px;
}
.rounded-15px {
	border-radius: 15px;
}
.item-fade-out {
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.4s ease;
	pointer-events: none;
}
.blog-a {
	background-color: #434a4f;
	color: #fff;
	border-radius: 5px;
}
.blog-b {
	background-color: #2962ae;
	color: #fff;
	border-radius: 5px;
}
.blog-c {
	background-color: #7aaacf;
	color: #fff;
	border-radius: 5px;
}
.blog-d {
	background-color: #937bdc;
	color: #fff;
	border-radius: 5px;
}
.post-content img {
	width: 100%; height: auto;
}
.circle-feature {
	background: var(--xl-orange);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	color: #fff;
	/* Force Flexbox centering */
	display: flex !important;
	align-items: center;
	justify-content: center;
	/* Remove these as they interfere with flex */
	padding: 0 !important;
	text-align: center;
	line-height: 0 !important;
}

	/* Sometimes the icon itself needs a reset */
	.circle-feature.fa,
	.circle-feature.far,
	.circle-feature.fas {
		display: flex;
		margin: 0;
	}


.tp-rating {
	font-size: 18px;
	margin-bottom: 6px;
}
.tp-color {
	color: #00b67a;
}
.tp-stars {
	color: #00b67a;
	letter-spacing: 2px;
	margin-right: 6px;
}

.tp-word {
	font-weight: 600;
}

.tp-score {
	font-size: 16px;
	color: #444;
}

.tp-reviews {
	font-size: 14px;
	color: #666;
}
.cards img {
	height: 40px;
	width: auto;
}
.hero-integra {
	position: relative;
	background-image: url('https://d1zgy8eif9v20a.cloudfront.net/web/shared/exhibition-stand-hire.jpg');
	background-size: cover;
	background-position: center;
	padding: 60px 0;
	overflow: hidden;
}

	.hero-integra::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,0.45);
		z-index: 1;
	}

	.hero-integra .container {
		position: relative;
		z-index: 2;
	}




@media (min-width: 768px) {

	.price-col {
		border-right: 1px solid #ddd;
	}

		.price-col:last-child {
			border-right: none;
		}
}
#modalContentContainer {
	min-height: 500px;
}
.thumb-fade-left,
.thumb-fade-right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	pointer-events: none;
	z-index: 5;
}

.thumb-fade-left {
	left: 0;
	background: linear-gradient(to right,#f8f9fa,rgba(248,249,250,0));
}

.thumb-fade-right {
	right: 0;
	background: linear-gradient(to left,#f8f9fa,rgba(248,249,250,0));
}

#modalThumbScroller {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	white-space: nowrap;
}

.modal-thumb-item {
	flex: 0 0 auto;
	width: 80px;
}
	#modalThumbScroller::-webkit-scrollbar {
		display: none;
	}
.skeleton-thumb {
	background: linear-gradient( 90deg, #eee 25%, #f5f5f5 37%, #eee 63% );
	background-size: 400% 100%;
	animation: skeletonLoading 1.4s ease infinite;
}

@keyframes skeletonLoading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}
.Magic360 {
	display: block;
	margin: auto;
}
.artwork-alert {
	background: #dedede;
	color: #212529;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
}

	.artwork-alert a {
		font-weight: 600;
		text-decoration: none;
		margin-left: 6px;
	}

		.artwork-alert a:hover {
			text-decoration: underline;
		}
.circle-number {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #d4a64a;
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	margin: auto;
}
.artwork-steps {
	position: relative;
}

	.artwork-steps::before {
		content: "";
		position: absolute;
		top: 25px;
		left: 10%;
		width: 80%;
		height: 1px;
		background: #e5e7eb;
		z-index: 0;
	}
	.artwork-steps::before {
		top: 26px;
	}
.circle-number {
	position: relative;
	z-index: 1;
}

/* =========================
   THUMBNAIL SKELETONS
   ========================= */
.thumbs-container {
	position: relative;
	min-height: 90px;
}

#thumbSkeletons {
	display: flex;
	flex-direction: row;
	gap: 8px;
	padding: 10px;
	overflow: hidden;
}

.thumb-skeleton {
	width: 70px;
	height: 70px;
	flex: 0 0 auto;
	border-radius: 4px;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
}

@media (min-width: 768px) {
	.thumbs-container {
		min-height: 200px;
	}

	#thumbSkeletons {
		flex-direction: column;
		align-items: center;
		padding: 0;
	}

	.thumb-skeleton {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}
}
.thumb-nav-caret {
	transition: opacity .2s ease;
}
@keyframes skeleton-loading {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

/* Product card image loader */
#productGrid .product-media-inner,
.buyers-guide-body-card .feature-swiper .product-media-inner {
	position: relative;
	overflow: hidden;
}

#productGrid .product-media-inner::before,
.buyers-guide-body-card .feature-swiper .product-media-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: transparent;
	transition: opacity .25s ease;
}

#productGrid .product-media-inner::after,
.buyers-guide-body-card .feature-swiper .product-media-inner::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid rgba(255, 255, 255, .85);
	border-top-color: #4b4b4b;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	animation: category-image-loader .75s linear infinite;
	transition: opacity .2s ease;
}

@keyframes category-image-loader {
	to {
		transform: rotate(360deg);
	}
}

#productGrid .product-media-inner > .product-image,
.buyers-guide-body-card .feature-swiper .product-media-inner > .product-image {
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity .3s ease;
}

#productGrid .product-media-inner.is-loaded::before,
#productGrid .product-media-inner.is-loaded::after,
.buyers-guide-body-card .feature-swiper .product-media-inner.is-loaded::before,
.buyers-guide-body-card .feature-swiper .product-media-inner.is-loaded::after {
	opacity: 0;
	pointer-events: none;
}

#productGrid .product-media-inner.is-loaded > .product-image,
.buyers-guide-body-card .feature-swiper .product-media-inner.is-loaded > .product-image {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#productGrid .product-media-inner::after,
	.buyers-guide-body-card .feature-swiper .product-media-inner::after {
		animation: none;
	}
}

/* hide real thumbs initially */

.thumbs-container {
	position: relative;
}
.stand-size-section {
	background: #e6ad3f;
	padding: 15px;
	border-radius: 8px;
}

.stand-size-header p {
	opacity: .9;
}

.stand-size-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
	gap: 18px;
}

.stand-size-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	background: white;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	color: #555;
	text-decoration: none;
	border: 1px solid #e6e6e6;
	box-shadow: 0 6px 15px rgba(0,0,0,0.08);
	transition: all .2s ease;
}

	.stand-size-tile:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 25px rgba(0,0,0,0.15);
		color: #555;
	}

	.stand-size-tile.popular {
		position: relative;
	}

		.stand-size-tile.popular::after {
			content: "POPULAR";
			position: absolute;
			top: -8px;
			right: -8px;
			background: #28a745;
			color: white;
			font-size: 10px;
			font-weight: 700;
			padding: 3px 6px;
			border-radius: 4px;
		}
.brochure-container-box {
	box-sizing: border-box;
	padding-top: min(60%,80vh);
	position: relative;
	margin-bottom: 25px;
}

.brochure-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* wrapper */
.option-item {
	flex: 1 1 100px;
	max-width: 100px;
	text-align: center;
}

.option-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.option-card {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 5px;
	background: #fff;
	transition: all 0.2s ease;
}

.option-icon {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #000;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.option-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.option-label {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.3;
}
.notice-card {
	background: #fff;
	transition: 0.2s ease;
	border: 1px solid #eee;
}
.ai-launcher {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: #007bff;
	color: white;
	padding: 12px 7px;
	border-radius: 8px 0 0 8px;
	cursor: pointer;
	z-index: 1050;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-weight: bold;
	box-shadow: -2px 4px 12px rgba(0,0,0,0.2);
	transition: all 0.2s ease;
}

	.ai-launcher:hover {
		padding-right: 25px;
		background-color: #0056b3;
	}

#chat-box {
	border: 1px solid #eee;
	height: 450px;
	overflow-y: auto;
	padding: 15px;
	background: #fdfdfd;
	border-radius: 8px;
}

.bubble {
	white-space: pre-wrap;
	display: inline-block;
	padding: 10px 14px;
	border-radius: 15px;
	margin-bottom: 5px;
	max-width: 85%;
}

.user {
	background: #007bff;
	color: white;
	float: right;
	clear: both;
}

.bot {
	background: #f1f1f1;
	color: #333;
	float: left;
	clear: both;
}

.msg-user, .msg-bot {
	margin-bottom: 12px;
	display: block;
	width: 100%;
	overflow: hidden;
}
.dots::after {
	content: '';
	animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
	0% {
		content: '';
	}

	33% {
		content: '.';
	}

	66% {
		content: '..';
	}

	100% {
		content: '...';
	}
}
#chat-input:focus {
	border-color: #dee2e6;
	outline: 0;
	box-shadow: none;
	background-color: #fff;
}

#chat-input:focus {
	border-bottom: 2px solid var(--xl-blue);
}
#chat-box {
	height: 400px;
	overflow-y: auto;
	padding: 10px;
	background-color: #f8f9fa;
	border-radius: 8px;
}
.chip-btn {
	background: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 18px;
	padding: 6px 14px;
	font-size: 0.82rem;
	color: #333;
	transition: all 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

	.chip-btn:hover {
		background-color: #f8f9fa;
		border-color: var(--xl-blue);
		color: var(--xl-blue);
	}

#chat-chips {
	transition: opacity 0.3s ease;
}
.usage-chip {
	display: inline-block;
	padding: 0.6em 1.2em;
	font-weight: 500;
	text-decoration: none;
	background-color: #f8f9fa;
	color: #212529;
	border: 1px solid #dee2e6;
	transition: all 0.2s ease-in-out;
	font-size: 0.9em;
}

	.usage-chip:hover {
		background-color: #212529;
		color: #fff;
		border-color: #212529;
	}
.stand-size-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.chip {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 12px;
	background: #f1f1f1;
	color: #333;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

	.chip:hover {
		background: #0b5ea8;
		color: #fff;
		transform: translateY(-2px);
	}

	.chip.popular {
		background: #f1f1f1;
		color: #333;
		position: relative;
	}

		.chip.popular::after {
			content: "POPULAR";
			position: absolute;
			top: -8px;
			right: -8px;
			font-size: 10px;
			background: #28a745;
			color: #fff;
			padding: 2px 6px;
			border-radius: 6px;
		}
		.chip.popular:hover {
			background: #0b5ea8;
			color: #fff;
		}
/* =========================
   MOBILE STYLES
   ========================= */
@media (max-width: 767px) {
	.hero-header {
		min-height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
		.hero-header .text {
			position: static;
			padding: 20px;
			left: 0;
			bottom: 0;
		}
			.hero-header .text p {
				font-size: 2rem;
			}
	.logo-grid .blogo {
		max-width: 22%;
		height: 60px;
	}
.logo-grid .blogo {
		flex: 1 0 30%;
	}
}
@media (max-width: 768px) {

	.border-blue {
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

		.border-blue img {
			width: 100%;
			object-fit: contain;
		}
	.brand-logo-overlay {
		position: absolute;
		top: 5px;
		left: 5px;
		z-index: 10;
	}
	.brand-floating-logo {
		background: #fff;
		padding: 10px;
		border: 1px solid #555;
		border-radius: 8px;
		box-shadow: 0 10px 25px rgba(0,0,0,0.3);
		max-width: 80px;
		height: auto;
	}
	.category-header {
		min-height: 65px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.sort-select {
		min-width: 125px;
	}
}
@media (max-width: 768px) {

	/* kill clutter */
	.header-center {
		display: none;
	}

	.primary-nav {
		display: none;
	}

	/* HEADER LAYOUT */
	.main-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 10px 15px;
	}

	/* BURGER */
	.mobile-menu-toggle {
		font-size: 22px;
		cursor: pointer;
	}

	/* LOGO CENTERED */
	.logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}


	/* BASKET RIGHT */
	.basket {
		margin-left: auto;
	}

	/* SEARCH FULL WIDTH UNDER */
	.search-container {
		display: block !important;
		width: 100%;
		padding: 10px 15px;
		background: #fff;
	}

	.search form {
		display: flex;
	}

	.search input {
		flex: 1;
		padding: 10px;
	}

	.search button {
		padding: 10px 15px;
	}

	/* TOP BAR CENTERED */
	.top-bar .container {
		justify-content: center !important;
		text-align: center;
		flex-wrap: wrap;
		gap: 10px;
	}
}
@media (max-width: 768px) {

	.mega-menu {
		position: static;
		display: none;
		width: 100%;
		box-shadow: none;
	}

	.has-mega.is-active .mega-menu {
		display: block;
	}
}
@media (max-width: 768px) {
	.call-us,
	.trustpilot-placeholder {
		display: none !important;
	}
}

/* Custom Burger Icon Styling */
.navbar-toggler {
	border: none;
	padding: 0;
	background: transparent;
	outline: none !important;
	box-shadow: none !important;
}

.burger-icon {
	display: block;
	width: 25px;
	height: 2px;
	background-color: #333; /* Your preferred color */
	position: relative;
}

	.burger-icon::before,
	.burger-icon::after {
		content: '';
		width: 25px;
		height: 2px;
		background-color: #333;
		position: absolute;
		left: 0;
	}

	.burger-icon::before {
		top: -8px;
	}

	.burger-icon::after {
		bottom: -8px;
	}

/* Ensure the header flexes correctly on mobile */
@media (max-width: 991px) {
	.main-header .container-fluid {
		display: flex;
		justify-content: space-between;
		padding-left: 15px;
		padding-right: 15px;
	}

	.logo {
		flex-grow: 1;
		text-align: center; /* Centers logo between burger and cart */
	}
}
@media (min-width: 992px) {
	.header-left {
		min-width: 200px; /* Adjust this to match your logo width roughly */
	}

	.header-right {
		min-width: 200px; /* Matches left side to force true center for middle div */
		display: flex;
		justify-content: flex-end;
	}

	.header-center {
		text-align: center;
	}
}

/* Mobile Alignment (Logo center, Burger left, Basket right) */
@media (max-width: 991px) {
	.main-header-inner {
		justify-content: space-between !important;
	}

	.header-left {
		flex: 1;
	}

	.header-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.logo {
		text-align: center;
	}
}
#headerBasket a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 768px) {
.price-badge {
	bottom: 75px;
	}
}
	@media (max-width: 768px) {

		.product-images-thumbs-wrapper {
			display: flex !important;
			overflow-x: auto;
			gap: 8px;
			padding: 10px;
			scroll-behavior: smooth;
		}

		.thumb-wrapper {
			min-width: 70px;
			flex: 0 0 auto;
			margin-bottom: 0 !important;
		}

		.thumb-img {
			height: 60px;
			object-fit: cover;
		}

		.product-images-thumbs-wrapper::-webkit-scrollbar {
			display: none;
		}

		.product-images-thumbs-wrapper {
			scrollbar-width: none;
		}

		.product-features {
			display: none;
		}

		.thumbs-container {
			min-height: 0;
		}

		.breadcrumb ul {
			display: flex;
			flex-wrap: wrap;
			padding: 0;
			margin: 8px 0 0 0;
			list-style: none;
			justify-content: center;
		}

			.breadcrumb ul li {
				display: inline;
				font-size: 13px;
			}

				.breadcrumb ul li:last-child::after {
					content: "";
				}

		.breadcrumb-product {
			display: none;
		}

		#headerBasket {
			background: var(--xl-blue);
			padding: 8px 14px;
			border-radius: 6px;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			position: relative;
		}

			#headerBasket a {
				color: #fff;
				display: flex;
				align-items: center;
				gap: 6px;
				text-decoration: none;
			}

			#headerBasket .count {
				position: absolute;
				top: -6px;
				left: -6px;
				background: #dc3545;
				color: #fff;
				font-size: 11px;
				font-weight: bold;
				border-radius: 50%;
				padding: 3px 6px;
				line-height: 1;
			}

			#headerBasket .tdm {
				color: #fff;
			}

		.basket-icon {
			position: relative;
			display: inline-flex;
			align-items: center;
		}

		#headerBasket .count {
			position: absolute;
			top: -10px;
			right: -8px;
			background: red;
			color: #fff;
			font-size: 11px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#headerBasket {
			position: relative;
			font-size: 14px;
			gap: 6px;
		}

		.tdm {
			color: #000;
		}
	}
.product-image-wrapper {
	overflow: hidden;
}

.product-image,
.product-video {
	transition: opacity .25s ease;
}

.product-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

.product-image-wrapper.has-video:hover .product-video {
	opacity: 1;
}

.product-image-wrapper.has-video:hover .product-image {
	opacity: 0;
}

.video-indicator {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0,0,0,.7);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	font-size: 11px;
}
.product-badges {
	z-index: 5;
}
.product-image-wrapper {
	position: relative;
	overflow: visible;
}

.product-media-inner {
	position: relative;
	overflow: hidden;
}

.product-image,
.product-video {
	transition: opacity .25s ease;
}

.product-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

.product-image-wrapper.has-video:hover .product-video {
	opacity: 1;
}

.product-image-wrapper.has-video:hover .product-image {
	opacity: 0;
}
.dashboard-feature-card {
	border: 1px solid #e9ecef;
	border-radius: 14px;
	background: #fff;
	transition: all 0.2s ease;
}


.dashboard-feature-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #f3f6fb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #2a4295;
}

.dashboard-feature-card h5 {
	font-weight: 700;
	margin-bottom: 10px;
}

.dashboard-feature-card p {
	color: #666;
	font-size: 14px;
	line-height: 1.5;
}

.product-delivery-summary {
	padding: 12px 14px;
	border: 1px solid #cfe4fb;
	border-radius: 10px;
	background: #edf6ff;
}

.product-delivery-summary-icon {
	display: inline-flex;
	flex: 0 0 76px;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	border-right: 1px solid #bdd2e8;
	color: #0868c7;
	font-size: 38px;
}

.product-delivery-summary h3 {
	color: #075fb7;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 700;
}

.product-delivery-summary p {
	font-size: 1.05rem;
}

.product-dispatch-line {
	color: #212529;
	font-size: 1rem;
}

.product-dispatch-line i {
	color: #075fb7;
}

.product-delivery-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding-top: 2px;
}

.product-delivery-timeline::before {
	position: absolute;
	top: 25px;
	left: 16.66%;
	right: 16.66%;
	height: 2px;
	background: #d9dee5;
	content: "";
}

.product-delivery-step {
	position: relative;
	z-index: 1;
	text-align: center;
}

.product-delivery-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: #0868c7;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
}

.product-delivery-step-complete .product-delivery-step-number {
	background: #2eaa4f;
}

.product-delivery-step h4 {
	margin-bottom: 4px;
	font-size: 1rem;
	font-weight: 700;
}

.product-delivery-step p {
	margin: 0 auto;
	max-width: 280px;
	color: #5f6670;
	font-size: .9rem;
}

.product-delivery-next-day {
	color: #075fb7 !important;
}

@media (max-width: 767.98px) {
	.product-delivery-summary {
		align-items: flex-start !important;
		padding: 18px;
	}

	.product-delivery-summary-icon {
		flex-basis: 48px;
		min-height: 54px;
		font-size: 28px;
	}

	.product-delivery-summary p {
		font-size: .95rem;
	}

	.product-delivery-timeline {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-left: 0;
	}

	.product-delivery-timeline::before {
		top: 24px;
		bottom: 24px;
		left: 23px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.product-delivery-step {
		display: grid;
		grid-template-columns: 48px 1fr;
		gap: 14px;
		align-items: start;
		text-align: left;
	}

	.product-delivery-step-number {
		margin-bottom: 0;
	}

	.product-delivery-step p {
		max-width: none;
	}
}