@charset "UTF-8";
/* Store revamp stylesheet — shared by every page, replaces default.css + mobile.css once all pages are rebuilt.
   Look & feel follows aacgroup.com.my/includes/default.css. */

/* ------ tokens ------
   Same values as the main site. Scoped to the new components for now because the legacy
   default.css still sets its own --font / --themecolor on :root; move to :root when it's discarded. */
.site-header,
.m-menu,
.live-results,
.modal,
.swal2-container,
.hero,
.brands,
.trending,
.list-page{
	--font: 'Poppins', sans-serif;
	--fontcolor: #252525;
	--desctitle: #777777;
	--mobilewidth: 93%;
	--maxwidth: 1250px;
	--themecolor: #C50000;
	--themehover: #D80000;
	--activecolor: #B80000;
	--bordercolor: #e6e6e6;
	--menuborder: #e3e3e3;
	--inputborder: #ccc;
	--borderradius: 1.5em;
	--inputradius: 0.8em;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fontcolor);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* legacy default.css styles every <button> (min-width 110px, bold, red background on :hover/:focus).
   Neutralised inside the new components — element-qualified so these outrank its button:focus / button:hover. */
.site-header button,
.m-menu button{
	min-width: 0;
	font-weight: inherit;
}
button.hdr-icon,
button.hdr-signin{
	background: none;
}
button.hdr-avatar{
	background: #444;
}

/* ------ header ------
   Transparent on top of the page; past 100px it shrinks into a white see-through pill (script.js toggles .is-scrolled).
   Home sits on a dark banner (white icons); every other page adds .is-light (dark icons). */
header.site-header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	z-index: 1000;              /* under Bootstrap modals (1040+) so the login popup stays on top */
	background: transparent;     /* reset legacy default.css header{} */
	border: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.hdr-bar{
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	height: 50px;
	margin: 0.2em auto 0;
	padding: 5px 0;
	box-sizing: border-box;
	/* 3 columns, equal sides: logo | search (max 600px, always centred) | icons.
	   Both sides share a 190px floor (fits bag + burger + "Sign In") so they stay equal and the search shrinks instead. */
	display: grid;
	grid-template-columns: minmax(190px, 1fr) minmax(0, 600px) minmax(190px, 1fr);
	align-items: center;
	gap: 1.5em;
	border-radius: 50px;
	border: 1px solid transparent;
	transition: max-width 0.4s ease, background-color 0.4s ease, padding 0.4s ease, border-color 0.4s ease, margin 0.4s ease, box-shadow 0.4s ease;
}
.hdr-logo{
	justify-self: start;
	flex: none;
	-webkit-tap-highlight-color: transparent;
}
.hdr-logo img{
	display: block;
	width: 80px;
	height: auto;
	border: 0;
}
.hdr-actions{
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.15em;
	justify-self: end;
}

/* round 38px icon buttons: search (mobile), bag, burger */
.hdr-icon{
	position: relative;
	width: 38px;
	height: 38px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50px;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}
.hdr-icon:hover,
.hdr-icon:focus-visible,
.hdr-icon[aria-expanded="true"]{
	color: #fff;
	background-color: rgba(248,248,248,0.22);
	outline: none;
}
.hdr-icon svg{
	width: 20px;
	height: 20px;
}
.hdr-search-btn{
	display: none;               /* mobile only */
}
.hdr-cart-count{
	position: absolute;
	top: 1px;
	left: 21px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 20px;
	background: var(--themecolor);
	color: #fff;
	font-size: 0.65em;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

/* burger — 3 lines drawn from the centre, turns into an X when open (same as the main site) */
.hdr-burger span,
.m-menu-close span{
	position: absolute;
	left: 11px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: .3s ease-in-out;
}
.hdr-burger span:nth-child(1), .m-menu-close span:nth-child(1){ top: 13px; }
.hdr-burger span:nth-child(2), .m-menu-close span:nth-child(2),
.hdr-burger span:nth-child(3), .m-menu-close span:nth-child(3){ top: 18px; }
.hdr-burger span:nth-child(4), .m-menu-close span:nth-child(4){ top: 23px; }
.hdr-burger.open span:nth-child(1), .m-menu-close span:nth-child(1),
.hdr-burger.open span:nth-child(4), .m-menu-close span:nth-child(4){
	top: 18px;
	left: 19px;
	width: 0;
}
.hdr-burger.open span:nth-child(2), .m-menu-close span:nth-child(2){ transform: rotate(45deg); }
.hdr-burger.open span:nth-child(3), .m-menu-close span:nth-child(3){ transform: rotate(-45deg); }

/* sign in link / avatar */
.hdr-account{
	position: relative;
	margin-left: 0.2em;
}
.hdr-signin{
	display: block;
	padding: 0.4em 1.1em;
	border: 0;
	border-radius: 50px;
	background: none;
	color: #fff;
	font-family: var(--font);
	font-size: 0.9em;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.4s ease;
}
.hdr-signin:hover,
.hdr-signin:focus-visible{
	background-color: rgba(248,248,248,0.22);
	outline: none;
}
.hdr-avatar{
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #444;
	cursor: pointer;
	transition: opacity 0.15s ease-in-out;
}
.hdr-avatar:hover,
.hdr-avatar:focus-visible{
	opacity: 0.85;
	outline: none;
}
.hdr-avatar span{
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.hdr-avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* dropdowns (desktop burger + avatar) — same card as the main site's avatar menu */
.hdr-navi{
	position: relative;
}
.hdr-pop{
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 220px;
	padding: 6px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.hdr-pop.open{
	opacity: 1;
	visibility: visible;
	transform: none;
}
.hdr-pop-label{
	padding: 0.5em 0.8em 0.2em;
	font-size: 0.72em;
	font-weight: 500;
	color: var(--desctitle);
}
.hdr-pop a{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0.2em 0;
	padding: 0.65em 0.8em;
	border-radius: 10px;
	color: var(--fontcolor);
	font-size: 0.88em;
	white-space: nowrap;
	text-decoration: none;
}
.hdr-pop a:hover,
.hdr-pop a:focus-visible{
	background: #f4f4f4;
	color: var(--fontcolor);
	text-decoration: none;
	outline: none;
}
.hdr-pop a.hdr-pop-signout{
	margin-top: 2px;
	border-top: 1px solid #eee;
	border-radius: 0 0 10px 10px;
}
.hdr-pop .m-ico{
	width: 18px;
	height: 18px;
	flex: none;
	stroke-width: 1.6;
}

/* ------ search ------
   Desktop: rounded field in the bar, dropdown underneath.
   Mobile: the same form becomes a panel dropping from the top (opened by .hdr-search-btn). */
.hdr-search{
	position: relative;
	min-width: 0;
}
.hdr-search-head,
.hdr-search-body h2{
	display: none;               /* mobile panel only */
}
.hdr-field{
	position: relative;
}
.hdr-field svg{
	position: absolute;
	left: 1em;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: #888;
	pointer-events: none;
}
.site-header input.hdr-q{
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	padding: 0 1.2em 0 2.8em;
	border: 1px solid #ccc;
	border-radius: 50px;
	background: #fff;
	outline: none;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.9em;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-top: 0px;
}
.site-header input.hdr-q::placeholder{
	color: #aaa;
	font-weight: 400;
}
.site-header input.hdr-q:focus{
	border-color: #aaa;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
}
.site-header input.hdr-q::-webkit-search-cancel-button{
	-webkit-appearance: none;
}

.hdr-drop{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	padding: 0.8em;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.hdr-drop[hidden],
.hdr-suggest[hidden]{
	display: none;
}
.hdr-suggest{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}
.hdr-suggest-title{
	width: 100%;
	font-size: 0.75em;
	font-weight: 500;
	color: var(--desctitle);
	margin-left: 4px;
}
.hdr-suggest button{
	padding: 0.35em 1em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	background: #fff;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.8em;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hdr-suggest button:hover,
.hdr-suggest button:focus-visible{
	background: #f4f4f4;
	border-color: #ccc;
	outline: none;
}

/* live results (markup from livesearch.php — also used by the home page search box) */
.live-results{
	line-height: 1.3;
	font-size: 0.92em;
}
.live-results ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.live-results li{
	padding: 3px 0;
	border-bottom: 1px solid #eee;
}
.live-results li a{
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 4px;
	border-radius: 12px;
	color: var(--fontcolor);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.live-results li a:hover{
	background: #f6f6f6;
	color: var(--activecolor);
	text-decoration: none;
}
.suggest-img{
	width: 48px;
	height: 48px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
}
.suggest-img img{
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}
.suggest-text{
	min-width: 0;
}
.suggest-model{
	display: block;
	font-weight: 500;
}
.suggest-type{
	display: block;
	font-size: 0.85em;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.live-results li a:hover .suggest-type{
	color: inherit;
}
.live-results-all{
	display: block;
	margin: 0.8em auto 0.1em;
	padding: 0.55em 1.4em;
	width: max-content;
	border-radius: 50px;
	background: var(--themecolor);
	color: #fff;
	font-size: 0.9em;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.live-results-all:hover,
.live-results-all:focus-visible{
	background: var(--themehover);
	color: #fff;
	text-decoration: none;
}
.live-results-none{
	padding: 14px 0;
	text-align: center;
	font-size: 0.9em;
	color: #666;
}

/* ------ light header (pages without a dark banner) + scrolled pill: dark icons ------ */
header.is-light .hdr-icon,
header.is-light .hdr-signin,
header.is-scrolled .hdr-icon,
header.is-scrolled .hdr-signin{
	color: var(--fontcolor);
}
header.is-light .hdr-icon:hover,
header.is-light .hdr-icon:focus-visible,
header.is-light .hdr-icon[aria-expanded="true"],
header.is-light .hdr-signin:hover,
header.is-scrolled .hdr-icon:hover,
header.is-scrolled .hdr-icon:focus-visible,
header.is-scrolled .hdr-icon[aria-expanded="true"],
header.is-scrolled .hdr-signin:hover{
	color: var(--fontcolor);
	background-color: rgba(0,0,0,0.07);
}
/* a little narrower than the full bar — the main site goes down to 880px, the search field needs more room */
header.is-scrolled .hdr-bar{
	max-width: 1000px;
	margin-top: 0.5em;
	padding: 4px 7px 5px 15px;           /* even both sides so the search stays centred */
	background: rgba(255,255,255,0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-color: #eee;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.09);
}

/* ------ mobile slide-in menu (same as the main site's) ------ */
.m-menu{
	display: none;
}

@media (max-width: 890px){
	/* the legacy category sidebar is replaced by the Product Categories group in .m-menu */
	aside{
		display: none !important;
	}

	.hdr-bar{
		
		display: flex;
		gap: 0;
		padding-left: 4px;
	}
	header.is-scrolled .hdr-bar{
		padding: 5px 6px 5px 15px;
	}
	.hdr-logo img{
		width: 75px;
	}
	.hdr-actions{
		margin-left: auto;
	}
	.hdr-search-btn{
		display: flex;
	}
	.hdr-account,
	.hdr-pop-navi{
		display: none;
	}

	/* search panel: drops down from the top, styled like the mobile menu */
	.hdr-search{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
		max-height: 100vh;
		overflow-y: auto;
		z-index: 1020;
		margin: 0;
		padding: 0 0 2.5em;
		box-sizing: border-box;
		background: rgba(255,255,255,0.98);
		border-bottom: 1px solid var(--menuborder);
		box-shadow: 0 10px 30px rgba(0,0,0,0.08);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.6s ease, transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.4s;
	}
	.hdr-search.open{
		transform: none;
		opacity: 1;
		visibility: visible;
		transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
	}
	/* scrolled: open as a rounded card over the pill instead of the full-width panel
	   (the pill's backdrop-filter would trap a fixed panel inside it anyway) */
	header.is-scrolled .hdr-bar{
		position: relative;
	}
	header.is-scrolled .hdr-search{
		position: absolute;
		top: -1px;
		left: -1px;
		right: -1px;
		width: auto;
		max-height: calc(100vh - 1em);
		max-height: calc(100dvh - 1em);
		padding-bottom: 1.4em;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 25px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.12);
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	header.is-scrolled .hdr-search.open{
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}
	/* logo + X line up with the pill's logo + burger */
	header.is-scrolled .hdr-search-head{
		width: auto;
		height: 38px;
		margin: 5px 6px 0 15px;
	}
	header.is-scrolled .hdr-search-body{
		margin-top: 1em;
	}
	.hdr-search-head{
		width: 95%;
		height: 50px;
		margin: 0.2em auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.hdr-search-head img{
		width: 75px;
		display: block;
	}
	.hdr-search-body{
		width: 92%;
		margin: 1.5em auto 0;
	}
	.hdr-search-body h2{
		display: block;
		margin: 0 0 0.6em 4px;
		font-family: var(--font);
		font-size: 0.8em;
		font-weight: 500;
		color: #666;
	}
	.site-header input.hdr-q{
		height: auto;
		padding: 0.7em 1.2em 0.7em 3em;
		font-size: 1em;
	}
	.hdr-field svg{
		left: 1.1em;
		width: 20px;
		height: 20px;
	}
	/* dropdown flows inside the panel instead of floating */
	.hdr-drop{
		position: static;
		padding: 0;
		margin-top: 0.6em;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: none;
	}
	.hdr-suggest button{
		background: #fff;
	}

	/* close (X) for the search panel and the menu — always dark on the white panels */
	.hdr-icon.m-menu-close,
	.hdr-icon.m-menu-close:hover,
	.hdr-icon.m-menu-close:focus-visible{
		color: var(--fontcolor);
	}
	.hdr-icon.m-menu-close:hover,
	.hdr-icon.m-menu-close:focus-visible{
		background-color: rgba(0,0,0,0.06);
	}

	/* slide-in menu */
	.m-menu{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 1010;
		box-sizing: border-box;
		background: rgba(255,255,255,0.98);
		transform: translateX(100%);
		visibility: hidden;
		transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.4s;
	}
	.m-menu.open{
		transform: none;
		visibility: visible;
		transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
	}
	.m-menu-head{
		width: 94%;
		margin: 12px auto 0;
		padding: 0 0 0 14px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.m-menu-head img{
		width: 75px;
		display: block;
	}
	.m-menu-body{
		width: calc(92% - 10px);
		height: calc(100% - 80px);
		margin: 1em auto 0;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 3em;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.m-menu-body::-webkit-scrollbar{
		display: none;
	}
	.m-menu ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	/* group label (Product Categories, AAC Distribution, Price List …) */
	.m-group{
		margin-top: 1.6em;
		padding: 0 0 3px 4px;
		border-bottom: 1px solid var(--menuborder);
		font-size: 0.76em;
		font-weight: 500;
		color: #666;
	}
	.m-group:first-child{
		margin-top: 0.4em;
	}
	.m-item{
		border-bottom: 1px solid var(--menuborder);
		font-size: 1em;
		font-weight: 500;
	}
	.m-item > a,
	.m-item > button{
		display: flex;
		align-items: center;
		width: 100%;
		padding: 8px 0 8px 4px;
		border: 0;
		background: none;
		color: var(--fontcolor);
		font-family: var(--font);
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.m-item > a:hover,
	.m-item > button:hover{
		color: var(--fontcolor);
		text-decoration: none;
	}
	.m-item > a.is-active,
	.m-item.is-active > button{
		color: var(--activecolor);
	}
	.m-item .m-ico{
		width: 18px;
		height: 18px;
		flex: none;
		margin-right: 10px;
		stroke-width: 1.8;
	}
	/* expand / collapse chevron */
	.m-chev{
		width: 16px;
		height: 16px;
		flex: none;
		margin: 0 4px 0 auto;
		color: #999;
		transition: transform 0.25s ease;
	}
	.m-item > button[aria-expanded="true"] .m-chev{
		transform: rotate(180deg);
	}
	.m-sub{
		display: none;
	}
	.m-sub li{
		border-top: 1px solid var(--menuborder);
		font-size: 0.88em;
		font-weight: 400;
	}
	.m-sub a{
		display: block;
		padding: 8px 0 8px 28px;
		color: var(--fontcolor);
		text-decoration: none;
	}
	.m-sub a:hover{
		color: var(--fontcolor);
		text-decoration: none;
	}
	.m-sub a.is-active{
		color: var(--activecolor);
	}
	/* brand rows have no icon — keep their sub links indented the same */
	.m-brands .m-sub a{
		padding-left: 18px;
	}

	body.m-lock{
		overflow: hidden;
	}
}

/* ------ popups ------
   Bootstrap modals (uni_modal: login / price list / order / policy, confirm_modal, viewer_modal)
   and SweetAlert2 toasts — card look from the main site's popup (.acc-modal-box). */

/* above the header (1000), mobile menu (1010) and search panel (1020); legacy dialogs.css had them at 640–650 */
.modal-backdrop{
	z-index: 1040;
}
.modal-backdrop.show{
	opacity: 0.55;
}
.modal{
	z-index: 1050;
}
#preloader{
	z-index: 1100;               /* loader shows while a popup form submits, so it sits above the popup */
}

.modal .modal-dialog{
	margin: 1rem;
}
@media (min-width: 576px){
	.modal .modal-dialog{
		margin: 1.75rem auto;
	}
}
.modal.fade .modal-dialog{
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s ease;
}
.modal.show .modal-dialog{
	transform: none;
}
.modal .modal-content,
.modal .modal-content.rounded-0{ /* uni_modal markup carries Bootstrap's .rounded-0 (!important) */
	border: 0;
	border-radius: var(--borderradius) !important;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal .modal-header{
	padding: 1.5em 1.75em 0.4em;
	border-bottom: 0;
}
.modal .modal-title{
	font-family: var(--font);
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.4;
}
.modal .modal-body{
	padding: 1.25em 1.75em;
}
.modal .modal-footer{
	padding: 0.25em 1.75em 1.5em;
	border-top: 0;
	gap: 0.5em;
}
.modal .modal-footer > *{
	margin: 0;
}
.modal h3{
	font-family: var(--font);
	font-size: 1.4em;
	font-weight: 600;
}
.modal hr{
	height: 1px;
	margin: 1em 0;
	border: 0;
	background: #eee;
}
.modal a{
	color: var(--themecolor);
}
.modal a:hover{
	color: var(--themehover);
}
.modal .alert{
	border-radius: var(--inputradius);
	font-size: 0.9em;
}

/* fields — main site form style */
.modal label{
	display: block;
	margin: 1em 0 0.3em 4px;
	font-size: 0.9em;
	font-weight: 500;
}
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="tel"],
.modal input[type="number"],
.modal textarea,
.modal select{
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border: 1px solid var(--inputborder);
	border-radius: var(--inputradius);
	background-color: #fff;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.95em;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="password"]:focus,
.modal input[type="tel"]:focus,
.modal input[type="number"]:focus,
.modal textarea:focus,
.modal select:focus{
	outline: none;
	border-color: #aaa;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
}
/* "Reset Password" sits inside the password box (inline, pulled back over the field) */
.modal .reset{
	margin-left: -125px;
	font-size: 0.85em;
}
.modal .reset a{
	color: var(--desctitle);
}
.modal .reset a:hover{
	color: var(--themecolor);
}
.modal .login-create-acc{
	display: block;
	margin: 0.6em 0 0 4px;
	line-height: 1.5;
}

/* buttons — red pill; Cancel / Close (data-dismiss) get the grey pill */
.modal button{
	min-width: 140px;
	padding: 0.6em 1.4em;
	border: 1px solid var(--themecolor);
	border-radius: 50px;
	background: var(--themecolor);
	color: #fff;
	font-family: var(--font);
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.modal button:hover,
.modal button:focus-visible,
.modal .btn-primary:not(:disabled):not(.disabled):active{
	border-color: var(--themehover);
	background: var(--themehover);
	color: #fff;
	box-shadow: none;
	outline: none;
}
.modal button[data-dismiss="modal"]{
	border-color: #d6d6d6;
	background: #eee;
	color: var(--fontcolor);
}
.modal button[data-dismiss="modal"]:hover,
.modal button[data-dismiss="modal"]:focus-visible{
	border-color: #d6d6d6;
	background: #e2e2e2;
	color: var(--fontcolor);
}

/* close (X) — round 36px button like the header's, X drawn with two lines */
.modal #dialog-close-btn{
	top: -0.6em;
	right: -0.75em;
	z-index: 2;
}
.modal #dialog-close-btn button,
#viewer_modal .btn-close{
	position: relative;
	width: 36px;
	height: 36px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background: none;
	color: var(--fontcolor);
	font-size: 0;                /* hide the × / icon, the lines below replace it */
	transition: background-color 0.15s ease-in-out;
}
.modal #dialog-close-btn button:hover,
.modal #dialog-close-btn button:focus-visible,
#viewer_modal .btn-close:hover,
#viewer_modal .btn-close:focus-visible{
	background: rgba(0,0,0,0.06);
	color: var(--fontcolor);
}
.modal #dialog-close-btn button::before,
.modal #dialog-close-btn button::after,
#viewer_modal .btn-close::before,
#viewer_modal .btn-close::after{
	content: '';
	position: absolute;
	top: 17px;
	left: 10px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(45deg);
}
.modal #dialog-close-btn button::after,
#viewer_modal .btn-close::after{
	transform: rotate(-45deg);
}
#viewer_modal .btn-close .fa{
	display: none;
}

/* image / video viewer */
#viewer_modal .modal-content{
	overflow: hidden;
}
#viewer_modal .btn-close{
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 2;
	background: rgba(255,255,255,0.9);
}
#viewer_modal .modal-content img,
#viewer_modal .modal-content video{
	display: block;
	max-width: 100%;
	margin: auto;
}

/* toasts (alert_toast → SweetAlert2) */
.swal2-popup.swal2-toast{
	padding: 0.7em 1em;
	border: 1px solid #eee;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	font-family: var(--font);
}
.swal2-popup.swal2-toast .swal2-title{
	margin: 0 0.5em;
	color: var(--fontcolor);
	font-size: 0.9em;
	font-weight: 500;
}

/* ------ home hero ------
   Dark stage background + camera cut-out (slides in from the right on load). Text sits left, lined up with the header logo. */
.hero{
	position: relative;
	/*height: clamp(540px, 75vh, 700px);*/
	min-height: 70vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #050b18 url(../img/hero-img.webp) center bottom / cover no-repeat;
	color: #fff;
}
.hero-cam{
	position: absolute;
	top: 30%;
	right: -6%;
	width: clamp(500px, 66vw, 800px);
	height: auto;
	transform: translateY(-46%);
	pointer-events: none;
	user-select: none;
	animation: hero-cam-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}
@keyframes hero-cam-in{
	from{ opacity: 0; translate: 12% 0; }
	to{ opacity: 1; translate: 0 0; }
}
.hero-inner{
	position: relative;
	z-index: 1;
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	margin: 0 auto;
	padding-top: 50px;           /* clear the fixed header */
	box-sizing: border-box;
}
/* text never runs under the camera: capped at 600px, or 54% on narrower screens */
.hero-inner > *{
	max-width: min(650px, 55%);
}
.hero h1{
	margin: 0 0 0.5em;
	color: #fff;
	font-family: var(--font);
	font-size: clamp(2em, 3.4vw, 3em);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.hero p{
	margin: 0 0 2em;
	color: rgba(255,255,255,0.78);
	font-size: 1em;
	line-height: 1.7;
}
.hero-btns{
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}
.hero-btn{
	display: inline-block;
	padding: 0.75em 1.8em;
	border: 1px solid transparent;
	border-radius: 50px;
	font-size: 0.95em;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hero-btn-red,
.hero-btn-red:hover,
.hero-btn-red:focus-visible{
	color: #fff;
	text-decoration: none;
}
.hero-btn-red{
	background: var(--themecolor);
	border-color: var(--themecolor);
}
.hero-btn-red:hover,
.hero-btn-red:focus-visible{
	background: var(--themehover);
	border-color: var(--themehover);
}
.hero-btn-white,
.hero-btn-white:hover,
.hero-btn-white:focus-visible{
	color: var(--fontcolor);
	text-decoration: none;
}
.hero-btn-white{
	background: #fff;
	border-color: #fff;
}
.hero-btn-white:hover,
.hero-btn-white:focus-visible{
	background: #ececec;
	border-color: #ececec;
}
@media (prefers-reduced-motion: reduce){
	.hero-cam{
		animation: none;
	}
}

@media (max-width: 890px){
	/* camera top-right, text + buttons below it; the camera's lower edge fades into the text over a dark gradient */
	.hero{
		height: auto;
		padding: calc(50px + min(36vw, 336px)) 0 2.5em;   /* header + most of the camera height */
		box-sizing: border-box;
	}
	.hero::after{
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(4,9,22,0.96) 55%, rgba(4,9,22,0) 80%);
	}
	.hero-cam{
		top: -80px;
		right: -20vw;
		width: min(100vw, 600px);
		transform: none;
	}
	.hero-inner{
		width: 92%;
		padding-top: 0;
	}
	.hero-inner > *{
		max-width: none;
	}
	.hero h1{
		font-size: 1.9em;
	}
	.hero p{
		font-size: 0.95em;
		margin-bottom: 1.6em;
	}
}
@media (max-width: 600px){
	.hero-btns{
		flex-direction: column;
	}
}

/* ------ scroll reveal (same as the main site) — add class="reveal"; .reveal-on is set by script.js ------ */
.reveal-on .reveal{
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.reveal-on .reveal.revealed{
	opacity: 1;
	transform: none;
}
/* hero: heading → text → buttons, one after another */
.reveal-on .hero-inner > .reveal:nth-child(2){ transition-delay: 0.15s; }
.reveal-on .hero-inner > .reveal:nth-child(3){ transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce){
	.reveal-on .reveal{ transform: none; transition: opacity 0.4s ease; }
}

/* ------ home: brands ------ */
.brands{
	padding: 5em 0 6em;
	background: #f9f9f9;
}
.brands-inner{
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	margin: 0 auto;
}
.brands-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1.3em;
}
.brands h2{
	margin: 0;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: clamp(1.4em, 2.4vw, 2em);
	font-weight: 600;
	line-height: 1.3;
}
button.brands-more{              /* element-qualified to outrank the legacy button rules */
	flex: none;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--themecolor);
	font-family: var(--font);
	font-weight: 500;
	cursor: pointer;
}
button.brands-more:hover,
button.brands-more:focus-visible{
	background: none;
	color: var(--themehover);
	text-decoration: underline;
	outline: none;
}
.brand-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.8em;
}
.brand-card{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	height: 120px;
	padding: 0 1.6em 0 1.8em;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: var(--borderradius);
	color: var(--fontcolor);
	text-decoration: none;
}
.brand-card[hidden]{
	display: none;
}
/* reveal's transition list + the hover ones (otherwise .reveal-on .reveal replaces them) */
.brand-card,
.reveal-on .brand-card.reveal{
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.reveal-on .brand-grid > .reveal:nth-child(4n+2){ transition-delay: 0.08s, 0.08s, 0s, 0s; }
.reveal-on .brand-grid > .reveal:nth-child(4n+3){ transition-delay: 0.16s, 0.16s, 0s, 0s; }
.reveal-on .brand-grid > .reveal:nth-child(4n+4){ transition-delay: 0.24s, 0.24s, 0s, 0s; }
.brand-card:hover,
.brand-card:focus-visible{
	border-color: #e6e6e6;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	color: var(--fontcolor);
	text-decoration: none;
	outline: none;
}
.brand-card > img{
	height: 50px;
	max-width: 68%;
	object-fit: contain;
	object-position: left center;
}
.brand-name{
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.3;
}
.brand-arrow{
	width: 30px;
	height: 30px;
	flex: none;
	color: #555;
	transition: color 0.2s ease, transform 0.2s ease;
}
.brand-card:hover .brand-arrow,
.brand-card:focus-visible .brand-arrow{
	color: var(--themecolor);
	transform: translateX(3px);
}
@media (max-width: 890px){
	.brands{
		padding: 3em 0 3.5em;
	}
	.brands-inner{
		width: 92%;
	}
	.brands-head{
		flex-direction: column;
		gap: 0.4em;
	}
	.brand-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75em;
	}
	.brand-card{
		height: 88px;
		padding: 0 1em 0 1.1em;
		border-radius: 1.1em;
	}
	.brand-card > img{
		height: 36px;
	}
	.brand-name{
		font-size: 0.95em;
	}
	.brand-arrow{
		width: 24px;
		height: 24px;
	}
}

/* ------ home: trending products (no reveal here, to keep motion down) ------ */
.trending{
	padding: 4.5em 0 5em;
	background: #fff;
}
.trending-inner{
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	margin: 0 auto;
}
.trending h2{
	margin: 0 0 1.1em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: clamp(1.4em, 2.4vw, 2em);
	font-weight: 600;
	line-height: 1.3;
}
.product-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5em;
}
.product-card{
	display: flex;
	flex-direction: column;
	padding: 1.2em 1.3em 1.4em;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 1.2em;
	color: var(--fontcolor);
	text-decoration: none;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover,
.product-card:focus-visible{
	border-color: #d6d6d6;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	color: var(--fontcolor);
	text-decoration: none;
	outline: none;
}
/* fixed-height logo row so the product photos line up; each logo's size comes from home.php (--w / --h) */
.product-card-brand{
	display: flex;
	align-items: center;
	height: 26px;
}
.product-card-brand img{
	width: var(--w);
	height: var(--h);
}
.pro_info_img img{
	width: calc(var(--w) * 1.5);
	height: calc(var(--h) * 1.5);
}
.product-card-img{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	margin: 0.2em 0 1em;
}
.product-card-img img{
	max-width: 80%;
	max-height: 100%;
	object-fit: contain;
}
.product-card-model{
	font-weight: 600;
	line-height: 1.35;
	word-break: break-word;
}
.product-card-desc{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 0.15em;
	font-size: 0.95em;
	line-height: 1.4;
}
.product-card-badges{
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
	margin-top: 0.7em;
}
.product-card-badges:empty{
	display: none;
}
.badge{
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.15em 0.7em;
	border-radius: 50px;
	color: #fff;
	font-size: 0.6em;
	font-weight: 500;
	line-height: 1.5;
}
.badge svg{
	width: 10px;
	height: 10px;
}
.badge-available{ background: #3aa635; }
.badge-new{ background: #2453e0; }
.badge-hot{ background: #e0531f; }
/* price sits at the bottom so cards in a row line up */
.product-card-price{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em;
	margin-top: auto;
	padding-top: 0.9em;
	color: var(--themecolor);
	font-size: 1.05em;
	font-weight: 600;
}
.product-card-price small{
	font-size: 0.65em;
	font-weight: 600;
}
.product-card-dealer{
	margin-left: auto;
	padding: 0.25em 0.8em;
	border-radius: 50px;
	background: #f1f1f1;
	color: var(--fontcolor);
	font-size: 0.7em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.product-card-dealer:hover{
	background: #e4e4e4;
}
@media (max-width: 890px){
	.trending{
		padding: 3em 0 3.5em;
	}
	.trending-inner{
		width: 92%;
	}
	.product-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5em;
	}
	.product-card{
		padding: 0.9em 0.9em 1em;
		border-radius: 1em;
	}
	.product-card-brand{
		height: 21px;
	}
	.product-card-brand img{
		width: calc(var(--w) * 0.8);
		height: calc(var(--h) * 0.8);
	}
	.product-card-img{
		height: 120px;
		margin: 0.6em 0 0.8em;
	}
	.product-card-model{
		font-size: 0.85em;
	}
	.product-card-desc{
		font-size: 0.8em;
	}
	.product-card-price{
		font-size: 0.95em;
	}
	.product-card-dealer{
		margin-left: 0;
	}
}

/* ------ product list (list_product.php): category panel left, title + filter + cards right ------ */
main.list-page{
	padding: 90px 0 5em;         /* clears the fixed header */
	background: #f9f9f9;
}
.list-layout{
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 1.5em;
	align-items: start;
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	margin: 0 auto;
}

/* left panel — same as the main site's dealer price list */
.list-menu{
	position: sticky;
	top: 80px;
}
button.list-menu-btn{
	display: none;
}
.list-nav{
	display: flex;
	flex-direction: column;
	padding: 1.2em 0;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.list-nav-title{
	margin: 0 0 0.5em 1.3em;
	color: var(--desctitle);
	font-size: 0.78em;
	font-weight: 500;
}
/* scrolls on its own; scrollbar only shows on hover, its gutter is always kept so the width never jumps */
.list-overflow{
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	padding: 0 0.8em;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
	scrollbar-color: transparent transparent;
}
.list-overflow:hover{
	scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.list-overflow::-webkit-scrollbar{ width: 6px; }
.list-overflow::-webkit-scrollbar-thumb{ background: transparent; border-radius: 6px; }
.list-overflow:hover::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.25); }
button.list-brand{                /* element-qualified to outrank the legacy button rules */
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 0;
	margin-bottom: 1px;
	padding: 0.5em 0.9em;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
button.list-brand:hover,
button.list-brand:focus-visible{
	background: #f4f4f4;
	color: var(--fontcolor);
	outline: none;
}
button.list-brand.is-open{
	background: #efefef;
}
.list-brand svg{
	width: 16px;
	height: 16px;
	flex: none;
	color: #999;
	transition: transform 0.2s ease;
}
.list-brand.is-open svg{
	transform: rotate(180deg);
}
.list-cats{
	display: flex;
	flex-direction: column;
	padding: 0.3em 0 0.6em 0.9em;
}
.list-cats[hidden]{
	display: none;
}
.list-cats a{
	padding: 0.5em 0.2em;
	color: var(--fontcolor);
	font-size: 0.85em;
	line-height: 1.4;
	text-decoration: none;
}
.list-cats a:hover{
	color: var(--themecolor);
	text-decoration: none;
}
.list-cats a.is-current{
	color: var(--themecolor);
	font-weight: 500;
}

/* title: brand pill above the category name, both inside the <h1> */
.list-title{
	margin: 0.2em 0 0.15em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: clamp(1.5em, 2.6vw, 2.1em);
	font-weight: 600;
	line-height: 1.25;
}
.list-title > span{
	display: block;
}
.list-title > .brand-pill{
	display: inline-block;
	margin-bottom: 0.2em;
	padding: 0.2em 0.9em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	background: #fff;
	color: var(--fontcolor);
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
.list-count{
	margin: 0 0 1.2em;
	color: var(--desctitle);
	font-size: 0.9em;
}

/* filter bar */
.list-filter{
	margin-bottom: 1.5em;
	padding: 0.8em 1.2em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: 1.2em;
}
button.list-filter-toggle{
	display: none;
}
.list-filter-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.6em;
}
.list-check{
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	font-size: 0.9em;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}
.list-check input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.list-check-box{
	position: relative;
	width: 18px;
	height: 18px;
	flex: none;
	border: 1.5px solid #bbb;
	border-radius: 5px;
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.list-check input:checked + .list-check-box{
	border-color: var(--themecolor);
	background: var(--themecolor);
}
.list-check input:checked + .list-check-box::after{
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.list-check input:focus-visible + .list-check-box{
	box-shadow: 0 0 0 3px rgba(197,0,0,0.2);
}
.list-price{
	display: flex;
	align-items: center;
	gap: 1em;
	flex: 1 1 320px;
	min-width: 0;
	font-size: 0.9em;
}
.list-price-label{
	font-weight: 500;
}
#price-slider{
	flex: 1 1 auto;
	min-width: 120px;
	margin: 0 10px;
}
.list-price-val{
	flex: none;
	color: var(--desctitle);
	white-space: nowrap;
}
/* noUiSlider look: thin grey track, red range, round white handles */
.list-price .noUi-target.noUi-horizontal{
	height: 4px;
	border: 0;
	border-radius: 4px;
	background: #e5e5e5;
	box-shadow: none;
}
.list-price .noUi-connect{
	background: var(--themecolor);
}
.list-price .noUi-horizontal .noUi-handle{ /* .noUi-horizontal: the library CSS loads after this file */
	top: -8px;
	right: -10px;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
	cursor: grab;
}
.list-price .noUi-handle::before,
.list-price .noUi-handle::after{
	display: none;
}
.list-price .noUi-handle:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgba(197,0,0,0.2);
}
button.list-apply{
	min-width: 0;
	padding: 0.45em 1.4em;
	border: 1px solid var(--themecolor);
	border-radius: 50px;
	background: var(--themecolor);
	color: #fff;
	font-family: var(--font);
	font-size: 0.85em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
button.list-apply:hover,
button.list-apply:focus-visible{
	border-color: var(--themehover);
	background: var(--themehover);
	outline: none;
}
.list-clear{
	color: var(--desctitle);
	font-size: 0.85em;
	text-decoration: underline;
}
.list-clear:hover{
	color: var(--themecolor);
}

/* cards: 4 per row (3 on narrower desktops) */
@media (max-width: 1200px){
	.list-main .product-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
button.list-more{
	display: block;
	min-width: 0;
	margin: 2em auto 0;
	padding: 0.65em 1.8em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	background: #fff;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.9em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
button.list-more:hover,
button.list-more:focus-visible{
	border-color: #ccc;
	background: #f4f4f4;
	color: var(--fontcolor);
	outline: none;
}
button.list-more[disabled]{
	opacity: 0.6;
	cursor: default;
}
.list-empty{
	padding: 3em 1em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: 1.2em;
	color: var(--desctitle);
	text-align: center;
}

/* small tag in the card's top-right (feature3: "RAID 5/6", "IP67"…) */
.product-card-brand{
	justify-content: space-between;
	gap: 0.5em;
}
.product-card-tag{
	flex: none;
	padding: 0.1em 0.6em;
	border-radius: 50px;
	background: #f1f1f1;
	color: #555;
	font-size: 0.68em;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

@media (max-width: 890px){
	main.list-page{
		padding: 70px 0 3.5em;
	}
	.list-layout{
		grid-template-columns: minmax(0, 1fr);
		gap: 1em;
		width: 93%;
	}
	/* panel becomes a dropdown button over the products */
	.list-menu{
		position: relative;
		top: 0;
		z-index: 5;
	}
	button.list-menu-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6em;
		width: 100%;
		min-width: 0;
		padding: 0.75em 1.1em;
		border: 1px solid var(--bordercolor);
		border-radius: 50px;
		background: #fff;
		color: var(--fontcolor);
		font-family: var(--font);
		font-size: 0.9em;
		font-weight: 500;
		text-align: left;
		cursor: pointer;
	}
	button.list-menu-btn:hover,
	button.list-menu-btn:focus{
		background: #fff;
		color: var(--fontcolor);
	}
	.list-menu-btn span{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.list-menu-btn svg{
		width: 18px;
		height: 18px;
		flex: none;
		color: #999;
		transition: transform 0.2s ease;
	}
	.list-menu.open .list-menu-btn svg{
		transform: rotate(180deg);
	}
	.list-nav{
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	}
	.list-menu.open .list-nav{
		display: flex;
	}
	.list-overflow{
		max-height: 60vh;
	}
	.list-title{
		font-size: 1.45em;
	}
	/* filter folds into a button */
	.list-filter{
		padding: 0.5em 0.8em;
	}
	button.list-filter-toggle{
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		min-width: 0;
		padding: 0.3em 0.4em;
		border: 0;
		background: none;
		color: var(--fontcolor);
		font-family: var(--font);
		font-size: 0.9em;
		font-weight: 500;
		cursor: pointer;
	}
	button.list-filter-toggle:hover,
	button.list-filter-toggle:focus{
		background: none;
		color: var(--fontcolor);
	}
	.list-filter-toggle svg{
		width: 18px;
		height: 18px;
	}
	.list-filter-body{
		display: none;
		padding: 0.6em 0.4em 0.5em;
	}
	.list-filter.is-open .list-filter-body{
		display: flex;
	}
	.list-price{
		flex-wrap: wrap;
		flex-basis: 100%;
		gap: 0.6em 1em;
	}
	#price-slider{
		flex-basis: 100%;
		order: 3;
		margin: 0.6em 10px 0.4em;
	}
	.product-card-tag{
		font-size: 0.6em;
	}
	.list-main .product-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------ product page (view_products.php) — shares the list page's layout + left panel ------ */
.pd-crumbs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0.3em 0 1em;
	color: var(--desctitle);
	font-size: 0.82em;
}
.pd-crumbs a{
	color: var(--desctitle);
	text-decoration: none;
}
.pd-crumbs a:hover{
	color: var(--themecolor);
	text-decoration: none;
}
.pd-crumbs [aria-current]{
	color: var(--fontcolor);
	font-weight: 500;
}
.pd-hero{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5em;
	padding: 1.8em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.pd-media{
	display: flex;
	flex-direction: column;
}
.pd-img{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin-top: 0.5em;
}
.pd-img img{
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}
.pd-info{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}
.pd-model{
	margin: 0;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: clamp(1.5em, 2.4vw, 2em);
	font-weight: 600;
	line-height: 1.25;
	word-break: break-word;
}
.pd-desc{
	margin: 0.35em 0 0;
	font-size: 1.05em;
	line-height: 1.5;
}
.pd-info .product-card-badges{
	margin-top: 0.9em;
}
.pd-info .badge{
	font-size: 0.75em;
}
.pd-features{
	list-style: none;
	margin: 1.2em 0 0;
	padding: 0;
	font-size: 0.92em;
}
.pd-features li{
	position: relative;
	padding: 0.15em 0 0.15em 1.6em;
	line-height: 1.5;
}
.pd-features li::before{             /* tick */
	content: '';
	position: absolute;
	left: 0.3em;
	top: 0.45em;
	width: 5px;
	height: 10px;
	border: solid var(--themecolor);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pd-price{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.5em;
	margin-top: 1.4em;
	color: var(--themecolor);
	font-size: 1.7em;
	font-weight: 600;
	line-height: 1.2;
}
.pd-price small{
	font-size: 0.5em;
	font-weight: 600;
}
button.pd-login{
	align-self: center;
	min-width: 0;
	margin-left: 0.4em;
	padding: 0.4em 1em;
	border: 0;
	border-radius: 50px;
	background: #f1f1f1;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.42em;
	font-weight: 500;
	cursor: pointer;
}
button.pd-login:hover,
button.pd-login:focus-visible{
	background: #e4e4e4;
	color: var(--fontcolor);
	outline: none;
}
.pd-buy{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
	margin-top: 1.4em;
}
.pd-qty{
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--inputborder);
	border-radius: 50px;
	overflow: hidden;
	background: #fff;
}
button.pd-qty-btn{
	width: 40px;
	height: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 1.2em;
	cursor: pointer;
}
button.pd-qty-btn:hover,
button.pd-qty-btn:focus-visible{
	background: #f4f4f4;
	color: var(--fontcolor);
	outline: none;
}
.list-page .pd-qty input{
	width: 48px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 1em;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	outline: none;
}
button.pd-add{
	height: 44px;
	min-width: 180px;
	padding: 0 1.8em;
	border: 1px solid var(--themecolor);
	border-radius: 50px;
	background: var(--themecolor);
	color: #fff;
	font-family: var(--font);
	font-size: 0.95em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
button.pd-add:hover,
button.pd-add:focus-visible{
	border-color: var(--themehover);
	background: var(--themehover);
	color: #fff;
	outline: none;
}
button.pd-add[disabled],
button.pd-add[disabled]:hover{
	border-color: #ddd;
	background: #eee;
	color: #999;
	cursor: not-allowed;
}
.pd-note{
	margin: 0.7em 0 0;
	color: var(--desctitle);
	font-size: 0.85em;
	line-height: 1.5;
}
.pd-note + .pd-note{
	margin-top: 0.2em;
}
.pd-pdf{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1.4em;
	padding: 0.5em 1.2em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	color: var(--fontcolor);
	font-size: 0.88em;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pd-pdf:hover,
.pd-pdf:focus-visible{
	border-color: #ccc;
	background: #f4f4f4;
	color: var(--fontcolor);
	text-decoration: none;
}
.pd-pdf svg{
	width: 18px;
	height: 18px;
}
.pd-specs,
.pd-related{
	margin-top: 1.5em;
}
.pd-specs{
	padding: 1.6em 1.8em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.pd-specs h2,
.pd-related h2{
	margin: 0 0 0.8em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 1.25em;
	font-weight: 600;
}
.pd-specs ul{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pd-specs li{
	padding: 0.6em 0;
	border-bottom: 1px solid #e5e5e5;
	font-size: 0.92em;
	line-height: 1.5;
}
/* datasheet specs: one name/value row per spec, single column, optional section headings */
.pd-spec-group{
	margin: 1.7em 0 0.2em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.95em;
	font-weight: 600;
	background: #f0f0f0;
	border-radius: 0.6em;
	padding: 0.6em 0.7em;
}
.pd-specs h2 + .pd-spec-group{
	margin-top: 0;
}
.spec-disclaimer{
	font-size: 0.75em;
	color: #888;
	display: block;
	padding-top: 1em;
	line-height: 1.4;
}
.pd-spec-list{
	margin: 0;
}
.pd-spec-list > div{
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 3fr);
	gap: 1em;
	padding: 0.55em 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 0.9em;
	line-height: 1.5;
}
.pd-spec-list dt{
	color: #777;
	font-weight: 600;
	padding-left: 0.6em;
}
.pd-spec-list dd{
	margin: 0;
	overflow-wrap: anywhere;
}
.pd-related{
	margin-top: 2.5em;
}
.pd-related-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}
.pd-related-head a{
	color: var(--themecolor);
	font-size: 0.9em;
	font-weight: 500;
}
.pd-related .product-grid{
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px){
	.pd-related .product-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.pd-related .product-card:nth-child(4){
		display: none;               /* keep it to one row */
	}
}
@media (max-width: 1000px){
	.pd-hero{
		grid-template-columns: minmax(0, 1fr);
		gap: 1em;
	}
	.pd-img{
		aspect-ratio: auto;
		height: 280px;
	}
}
@media (max-width: 890px){
	.pd-hero,
	.pd-specs{
		padding: 1.2em;
		border-radius: 1.2em;
	}
	.pd-specs ul{
		grid-template-columns: minmax(0, 1fr);
	}
	.pd-price{
		font-size: 1.45em;
	}
	.pd-buy{
		width: 100%;
	}
	button.pd-add{
		flex: 1 1 auto;
		min-width: 0;
	}
	.pd-related-head{
		flex-direction: column;
		gap: 0;
		margin-bottom: 0.6em;
	}
	.pd-related .product-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pd-related .product-card:nth-child(4){
		display: flex;
	}
}

/* ------ shopping bag (cart.php): items left, order summary right ------ */
.bag-page{
	width: var(--mobilewidth);
	max-width: var(--maxwidth);
	margin: 0 auto;
}
.bag-page .list-title{
	margin-bottom: 0.8em;
}
.bag-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1.75em;
	align-items: start;
}
.bag-items{
	padding: 0.4em 1.6em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.bag-item{
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 110px auto 120px 36px;
	align-items: center;
	gap: 1.2em;
	padding: 1.2em 0;
	border-bottom: 1px solid #f0f0f0;
	transition: opacity 0.25s ease;
}
.bag-item:last-child{
	border-bottom: 0;
}
.bag-item.is-removing{
	opacity: 0.3;
	pointer-events: none;
}
.bag-img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: 1px solid #f0f0f0;
	border-radius: 14px;
	background: #fff;
}
.bag-img img{
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}
.bag-info{
	min-width: 0;
}
.bag-model{
	display: block;
	color: var(--fontcolor);
	font-weight: 600;
	line-height: 1.35;
	word-break: break-word;
	text-decoration: none;
}
.bag-model:hover{
	color: var(--themecolor);
	text-decoration: none;
}
.bag-desc{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0.15em 0 0.5em;
	color: #555;
	font-size: 0.88em;
	line-height: 1.4;
}
.badge-preorder{ background: #e0531f; }
.bag-unit,
.bag-line{
	display: flex;
	flex-direction: column;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}
.bag-line{
	align-items: flex-end;
	color: var(--themecolor);
	font-weight: 600;
}
.bag-unit small,
.bag-line small{
	margin-bottom: 0.2em;
	color: var(--desctitle);
	font-size: 0.72em;
	font-weight: 500;
}
.bag-qty{
	height: 40px;
}
button.bag-remove{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #999;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
button.bag-remove:hover,
button.bag-remove:focus-visible{
	background: #f4f4f4;
	color: var(--themecolor);
	outline: none;
}
.bag-remove svg{
	width: 18px;
	height: 18px;
}
.bag-summary{
	position: sticky;
	top: 80px;
	padding: 1.5em 1.6em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.bag-summary h2{
	margin: 0 0 0.9em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 1.15em;
	font-weight: 600;
}
.bag-sum-row{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.4em 0;
	font-size: 0.92em;
}
.bag-sum-total{
	margin-top: 0.3em;
	padding-top: 0.8em;
	border-top: 1px solid #f0f0f0;
	font-size: 1.05em;
	font-weight: 600;
}
.bag-sum-total span:first-child{
	white-space: nowrap;
}
.bag-sum-total span:last-child{
	color: var(--themecolor);
	font-size: 1.1em;
	white-space: nowrap;
}
.bag-sum-note{
	margin: 0.8em 0 1.2em;
	color: var(--desctitle);
	font-size: 0.8em;
	line-height: 1.5;
}
.bag-checkout{
	display: block;
	padding: 0.75em 1.4em;
	border-radius: 50px;
	background: var(--themecolor);
	color: #fff;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.bag-checkout:hover,
.bag-checkout:focus-visible{
	background: var(--themehover);
	color: #fff;
	text-decoration: none;
}
.bag-sum-links{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1em;
	font-size: 0.85em;
}
.bag-sum-links a{
	color: var(--fontcolor);
}
.bag-sum-links a:hover{
	color: var(--themecolor);
}
button.bag-empty-btn{
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--desctitle);
	font-family: var(--font);
	font-size: 1em;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
}
button.bag-empty-btn:hover,
button.bag-empty-btn:focus-visible{
	background: none;
	color: var(--themecolor);
	outline: none;
}
.bag-none{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	padding: 4em 1em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
	color: var(--desctitle);
	text-align: center;
}
.bag-none svg{
	width: 56px;
	height: 56px;
	color: #ccc;
}
.bag-none p{
	margin: 0 0 0.6em;
	font-size: 1.05em;
}
@media (max-width: 1100px){
	.bag-layout{
		grid-template-columns: minmax(0, 1fr);
	}
	.bag-summary{
		position: static;
	}
}
@media (max-width: 890px){
	.bag-page{
		width: 92%;
	}
	.bag-items{
		padding: 0.2em 1em;
		border-radius: 1.2em;
	}
	/* each item stacks: photo + text on top, unit price / qty / total underneath; × in the corner */
	.bag-item{
		position: relative;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"img info info"
			"unit qty line";
		gap: 0.8em 1em;
	}
	.bag-img{ grid-area: img; width: 72px; height: 72px; }
	.bag-info{ grid-area: info; padding-right: 30px; }
	.bag-unit{ grid-area: unit; font-size: 0.85em; }
	.bag-qty{ grid-area: qty; justify-self: center; }
	.bag-line{ grid-area: line; }
	button.bag-remove{
		position: absolute;
		top: 0.9em;
		right: -6px;
		width: 32px;
		height: 32px;
	}
	.bag-summary{
		padding: 1.2em;
		border-radius: 1.2em;
	}
}

/* ------ checkout (checkout.php) + order confirmation (order-confirmation.php) — share the bag layout ------ */
.co-steps{
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	min-width: 0;
}
.co-card{
	padding: 1.5em 1.6em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: var(--borderradius);
}
.co-card h2{
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 1em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 1.1em;
	font-weight: 600;
}
.co-card h2 small{
	color: var(--desctitle);
	font-size: 0.75em;
	font-weight: 400;
}
.co-num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fontcolor);
	color: #fff;
	font-size: 0.75em;
}
/* collection tiles */
.co-options{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75em;
}
.co-option{
	position: relative;
	display: flex;
	gap: 0.8em;
	margin: 0;
	padding: 0.95em 1em;
	border: 1.5px solid var(--bordercolor);
	border-radius: 1em;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.co-option:hover{
	border-color: #ccc;
}
.co-option input{
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.15em 0 0;
	accent-color: var(--themecolor);
}
.co-option:has(input:checked){
	border-color: var(--themecolor);
	background: #fff7f7;
}
.co-option-body{
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	font-size: 0.88em;
	line-height: 1.45;
}
.co-option-body strong{
	font-weight: 600;
}
.co-option-body span{
	color: #666;
}
/* delivery details */
.co-delivery{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.2em 1em;
	margin-top: 1.2em;
	padding-top: 1.2em;
	border-top: 1px solid #f0f0f0;
}
.co-delivery[hidden]{
	display: none;
}
.co-field-wide{
	grid-column: 1 / -1;
}
.co-field label{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin: 0.6em 0 0.3em 4px;
	font-size: 0.88em;
	font-weight: 500;
}
.co-field label a{
	color: var(--themecolor);
	font-weight: 400;
}
.list-page .co-field input,
.list-page .co-field textarea,
.list-page textarea.co-remark{
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border: 1px solid var(--inputborder);
	border-radius: var(--inputradius);
	background: #fff;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: 0.95em;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.list-page .co-field input:focus,
.list-page .co-field textarea:focus,
.list-page textarea.co-remark:focus{
	outline: none;
	border-color: #aaa;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.3);
}
.list-page .co-field.is-invalid input,
.list-page .co-field.is-invalid textarea{
	border-color: var(--themecolor);
}
.co-error{
	margin: 0.4em 0 0 4px;
	color: var(--themecolor);
	font-size: 0.82em;
}
.co-error[hidden]{
	display: none;
}
/* sales rep */
.co-rep-name{
	margin: 0;
	font-weight: 600;
}
.co-rep-contact{
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.2em;
	margin: 0.2em 0 0;
	font-size: 0.9em;
}
.co-rep-contact a,
.oc-details a{
	color: var(--themecolor);
}
.co-rep-note{
	margin: 0.8em 0 0;
	color: var(--desctitle);
	font-size: 0.85em;
	line-height: 1.5;
}
/* compact item list (summary + confirmation) */
.co-items{
	list-style: none;
	margin: 0 0 0.8em;
	padding: 0 0 0.6em;
	border-bottom: 1px solid #f0f0f0;
}
.co-items li{
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0;
}
.co-item-img{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	background: #fff;
}
.co-item-img img{
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}
.co-item-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 0.85em;
	line-height: 1.35;
}
.co-item-text strong,
.co-item-text a{
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.co-item-text strong{
	font-weight: 600;
}
.co-item-text a{
	color: var(--fontcolor);
	text-decoration: none;
}
.co-item-text a:hover{
	color: var(--themecolor);
}
.co-item-text > span{
	color: var(--desctitle);
}
.co-item-total{
	flex: none;
	font-size: 0.85em;
	font-weight: 600;
}
button.bag-checkout{
	width: 100%;
	min-width: 0;
	border: 0;
	font-family: var(--font);
	font-size: 1em;
	cursor: pointer;
}
button.bag-checkout:hover,
button.bag-checkout:focus-visible{
	background: var(--themehover);
	color: #fff;
	outline: none;
}
button.bag-checkout[disabled]{
	opacity: 0.6;
	cursor: wait;
}
/* order confirmation */
.oc-hero{
	margin: 0.5em 0 1.75em;
	text-align: center;
}
.oc-tick{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 0.8em;
	border-radius: 50%;
	background: #3aa635;
	color: #fff;
}
.oc-tick svg{
	width: 32px;
	height: 32px;
}
.oc-hero h1{
	margin: 0 0 0.3em;
	color: var(--fontcolor);
	font-family: var(--font);
	font-size: clamp(1.4em, 2.6vw, 2em);
	font-weight: 600;
}
.oc-hero p{
	margin: 0.2em 0;
}
.oc-sub{
	color: var(--desctitle);
	font-size: 0.92em;
}
.oc-items{
	margin: 0;
	padding: 0;
	border: 0;
}
.oc-items li{
	padding: 0.8em 0;
	border-bottom: 1px solid #f0f0f0;
}
.oc-items li:last-child{
	border-bottom: 0;
}
.oc-items .co-item-img{
	width: 60px;
	height: 60px;
}
.oc-items .co-item-text{
	font-size: 0.9em;
}
.oc-desc{
	color: #555 !important;
}
.oc-details{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2em 2em;
}
.oc-details h2{
	margin-bottom: 0.4em;
	font-size: 0.95em;
}
.oc-details p{
	margin: 0;
	font-size: 0.9em;
	line-height: 1.55;
}
.oc-wide{
	grid-column: 1 / -1;
}
@media (max-width: 890px){
	.co-card{
		padding: 1.2em;
		border-radius: 1.2em;
	}
	.co-options,
	.co-delivery,
	.oc-details{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* bag + checkout cards reveal one after another (main column first, then the summary) */
.reveal-on .co-steps > .reveal:nth-child(2){ transition-delay: 0.1s; }
.reveal-on .co-steps > .reveal:nth-child(3){ transition-delay: 0.2s; }
.reveal-on .bag-summary.reveal{ transition-delay: 0.15s; }

/* ------ My Orders (my_orders.php) ------ */
.mo-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.4em;
}
.mo-tabs a{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 1em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	background: #fff;
	color: var(--fontcolor);
	font-size: 0.88em;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mo-tabs a:hover{
	border-color: #ccc;
	color: var(--fontcolor);
	text-decoration: none;
}
.mo-tabs a span{
	min-width: 20px;
	padding: 0 6px;
	border-radius: 50px;
	background: #f1f1f1;
	color: #666;
	font-size: 0.85em;
	line-height: 20px;
	text-align: center;
}
.mo-tabs a.is-current{
	border-color: var(--fontcolor);
	background: var(--fontcolor);
	color: #fff;
}
.mo-tabs a.is-current span{
	background: rgba(255,255,255,0.2);
	color: #fff;
}
.mo-list{
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.mo-card{
	display: block;
	padding: 1.1em 1.5em 1.3em;
	background: #fff;
	border: 1px solid var(--bordercolor);
	border-radius: 1.3em;
	color: var(--fontcolor);
	text-decoration: none;
}
/* reveal's transition list + the hover ones (otherwise .reveal-on .reveal replaces them) */
.mo-card,
.reveal-on .mo-card.reveal{
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.mo-card:hover,
.mo-card:focus-visible{
	border-color: #ddd;
	box-shadow: 0 10px 30px rgba(0,0,0,0.07);
	color: var(--fontcolor);
	text-decoration: none;
	outline: none;
}
.mo-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: 0.9em;
	border-bottom: 1px solid #f0f0f0;
}
.mo-id{
	font-size: 0.9em;
}
.mo-id strong{
	font-weight: 600;
}
.mo-date{
	margin-left: 0.8em;
	color: var(--desctitle);
}
/* status pill — shared with the order page */
.mo-status{
	flex: none;
	padding: 0.2em 0.85em;
	border-radius: 50px;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.mo-status-grey{ background: #f0f0f0; color: #555; }
.mo-status-blue{ background: #e7edfd; color: #2453e0; }
.mo-status-green{ background: #e6f4e5; color: #2f8a2b; }
.mo-status-red{ background: #fde8e8; color: var(--themecolor); }
.mo-body{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1.2em;
	padding-top: 1em;
}
.mo-thumbs{
	display: flex;
	gap: 0.4em;
}
.mo-thumb{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	background: #fff;
}
.mo-thumb img{
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}
.mo-more{
	background: #f6f6f6;
	color: #666;
	font-size: 0.85em;
	font-weight: 600;
}
.mo-info{
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.4;
}
.mo-info strong{
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mo-info small{
	color: var(--desctitle);
	font-weight: 500;
}
.mo-desc{
	overflow: hidden;
	color: #555;
	font-size: 0.88em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mo-meta{
	margin-top: 0.2em;
	color: var(--desctitle);
	font-size: 0.82em;
}
.mo-total{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--themecolor);
	font-weight: 600;
	white-space: nowrap;
}
.mo-total small{
	color: var(--desctitle);
	font-size: 0.72em;
	font-weight: 500;
}
.mo-view{
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	padding: 0.45em 0.6em 0.45em 1em;
	border: 1px solid var(--bordercolor);
	border-radius: 50px;
	font-size: 0.85em;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mo-view svg{
	width: 16px;
	height: 16px;
}
.mo-card:hover .mo-view{
	border-color: #ccc;
	background: #f6f6f6;
}
/* order page opened from My Orders */
.oc-back{
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	margin-bottom: 0.4em;
	color: var(--desctitle);
	font-size: 0.88em;
	text-decoration: none;
}
.oc-back:hover{
	color: var(--themecolor);
	text-decoration: none;
}
.oc-back svg{
	width: 16px;
	height: 16px;
}
.oc-head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1em;
}
.oc-head .list-title{
	margin: 0;
}
.oc-date{
	margin: 0.3em 0 1.4em;
	color: var(--desctitle);
	font-size: 0.9em;
}
@media (max-width: 890px){
	.mo-card{
		padding: 1em 1.1em 1.1em;
		border-radius: 1.1em;
	}
	.mo-date{
		display: block;
		margin: 0;
		font-size: 0.9em;
	}
	/* thumbnails + info on top, total and View details underneath */
	.mo-body{
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"thumbs thumbs"
			"info info"
			"total view";
		gap: 0.8em;
	}
	.mo-thumbs{ grid-area: thumbs; }
	.mo-info{ grid-area: info; }
	.mo-total{ grid-area: total; align-items: flex-start; }
	.mo-view{ grid-area: view; }
	.mo-thumb{
		width: 48px;
		height: 48px;
	}
}