/* [%set [@emp_catalogue_live@] = '0' /%] */
/* Express Motorcycle Parts - Homepage styles (emp-home.css)
   Scoped to MTW-style homepage sections: trust strip, brand marquee, terrain bento grid, fitment CTA.
   Uses tokens defined in style.css (:root):
     --emp-bg: #000000;
     --emp-surface: #101011;
     --emp-line: #30363b;
     --emp-ink: #d0d7dd;
     --emp-ink-strong: #ffffff;
     --emp-muted: #8b949e;
     --emp-accent: #4fcfff;
     --emp-accent-ink: #000000;
*/

/* ==========================================================================
   1. Trust Strip & Sidewall Guide (emp_trust.template.html)
   ========================================================================== */

.emp-trust {
	background-color: var(--emp-surface);
	border-bottom: 1px solid var(--emp-line);
	color: var(--emp-ink);
	overflow-x: hidden;
}

.emp-trust__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 576px) {
	.emp-trust__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 992px) {
	.emp-trust__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
}

.emp-trust__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.emp-trust__icon-wrap {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(79, 207, 255, 0.08);
	border: 1px solid rgba(79, 207, 255, 0.25);
	color: var(--emp-accent);
}

.emp-trust__text {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

.emp-trust__title {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--emp-ink-strong);
	line-height: 1.25;
}

.emp-trust__desc {
	margin: 0.2rem 0 0 0;
	font-size: 0.8rem;
	color: var(--emp-muted);
	line-height: 1.35;
}

/* Collapsible hint toggle */
.emp-trust__hint-wrap {
	border-top: 1px solid var(--emp-line);
}

.emp-trust__hint-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--emp-accent);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.45rem 1rem;
	border: 1px dashed var(--emp-line);
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.02);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	cursor: pointer;
	max-width: 100%;
	overflow-wrap: break-word;
}

.emp-trust__hint-toggle:hover,
.emp-trust__hint-toggle:focus {
	color: var(--emp-ink-strong);
	border-color: var(--emp-accent);
	background-color: rgba(79, 207, 255, 0.08);
	text-decoration: none;
}

.emp-trust__hint-toggle:focus-visible {
	outline: 3px solid var(--emp-accent);
	outline-offset: 2px;
}

.emp-trust__hint-icon {
	flex-shrink: 0;
}

.emp-trust__chevron {
	flex-shrink: 0;
	transition: transform 0.25s ease;
	color: var(--emp-muted);
}

.emp-trust__hint-toggle[aria-expanded="true"] .emp-trust__chevron {
	transform: rotate(180deg);
	color: var(--emp-accent);
}

/* Sidewall guide box */
.emp-trust__guide-box {
	background-color: var(--emp-bg);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	text-align: left;
}

.emp-trust__guide-title {
	color: var(--emp-ink-strong);
	font-weight: 700;
}

.emp-sidewall-banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 0.4rem;
	padding: 1rem 0.75rem;
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
}

.emp-sw-segment {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 0.35rem 0.6rem;
	background-color: rgba(79, 207, 255, 0.06);
	border: 1px solid rgba(79, 207, 255, 0.25);
	border-radius: 4px;
	min-width: 48px;
}

.emp-sw-segment--extra {
	background-color: rgba(255, 255, 255, 0.03);
	border-color: var(--emp-line);
}

.emp-sw-code {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--emp-accent);
	line-height: 1.2;
}

.emp-sw-segment--extra .emp-sw-code {
	color: var(--emp-ink);
}

.emp-sw-tag {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--emp-muted);
	margin-top: 0.2rem;
}

.emp-sw-sep {
	font-size: 1.35rem;
	font-weight: 300;
	color: var(--emp-muted);
	align-self: center;
}

.emp-trust__spec-item {
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
	height: 100%;
	line-height: 1.4;
	color: var(--emp-ink);
}

.emp-trust__alt-notes {
	border-top-color: var(--emp-line) !important;
	color: var(--emp-ink);
}

.emp-trust__alt-notes code {
	color: var(--emp-accent);
	background-color: var(--emp-surface);
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	font-size: 0.85em;
}


/* ==========================================================================
   2. Brand Marquee (emp_brands.template.html)
   ========================================================================== */

.emp-brands {
	background-color: var(--emp-bg);
	border-bottom: 1px solid var(--emp-line);
	overflow: hidden;
}

.emp-brands__marquee {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 0.75rem 0;
}

.emp-brands__marquee:focus-visible {
	outline: 2px dashed var(--emp-accent);
	outline-offset: -2px;
}

.emp-brands__track {
	display: flex;
	width: max-content;
	animation: emp-marquee-scroll 26s linear infinite;
}

.emp-brands__marquee:hover .emp-brands__track,
.emp-brands__marquee:focus-within .emp-brands__track {
	animation-play-state: paused;
}

.emp-brands__list {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0 0.625rem;
	flex-shrink: 0;
}

.emp-brands__item {
	flex-shrink: 0;
}

.emp-brands__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	height: 48px;
	padding: 0 1.25rem;
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
	color: var(--emp-ink);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
	transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.emp-brands__tile:hover,
.emp-brands__tile:focus {
	color: var(--emp-accent);
	border-color: var(--emp-accent);
	box-shadow: 0 0 14px rgba(79, 207, 255, 0.25);
	transform: translateY(-2px);
	text-decoration: none;
}

.emp-brands__tile:focus-visible {
	outline: 3px solid var(--emp-accent);
	outline-offset: 2px;
}

/* Typographic accents for individual brands */
.emp-brand--dunlop .emp-brands__name {
	font-style: italic;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.emp-brand--maxxis .emp-brands__name {
	font-weight: 900;
	letter-spacing: 0.12em;
}

.emp-brand--veerubber .emp-brands__name {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
}

.emp-brand--metzeler .emp-brands__name {
	font-weight: 600;
	letter-spacing: 0.18em;
	font-size: 0.85rem;
}

.emp-brand--michelin .emp-brands__name {
	font-weight: 800;
	letter-spacing: 0.08em;
}

.emp-brand--motoz .emp-brands__name {
	font-weight: 900;
	letter-spacing: 0.22em;
}

.emp-brand--pirelli .emp-brands__name {
	font-weight: 800;
	letter-spacing: 0.14em;
}

@keyframes emp-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Reduced motion fallback: wrap tiles gracefully without animation */
@media (prefers-reduced-motion: reduce) {
	.emp-brands__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	.emp-brands__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
		padding: 0.5rem;
	}
	.emp-brands__list[aria-hidden="true"] {
		display: none;
	}
}


/* ==========================================================================
   3. Terrain Bento Grid (emp_terrain.template.html)
   ========================================================================== */

.emp-terrain {
	background-color: var(--emp-bg);
	border-bottom: 1px solid var(--emp-line);
	overflow-x: hidden;
}

.emp-terrain__title {
	color: var(--emp-ink-strong);
	font-weight: 700;
}

.emp-terrain__subtitle {
	color: var(--emp-muted);
	font-size: 0.95rem;
}

.emp-terrain__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 576px) {
	.emp-terrain__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 992px) {
	.emp-terrain__grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 1.25rem;
	}

	.emp-terrain--road {
		grid-column: span 7;
	}

	.emp-terrain--offroad {
		grid-column: span 5;
	}

	.emp-terrain--adventure {
		grid-column: span 5;
	}

	.emp-terrain--track {
		grid-column: span 7;
	}
}

.emp-terrain__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
	padding: 1.5rem 1.5rem;
	border: 1px solid var(--emp-line);
	border-radius: 8px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 992px) {
	.emp-terrain__card {
		min-height: 220px;
		padding: 2rem;
	}
}

.emp-terrain__card:hover,
.emp-terrain__card:focus {
	text-decoration: none;
	border-color: var(--emp-accent);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(79, 207, 255, 0.2);
}

.emp-terrain__card:focus-visible {
	outline: 3px solid var(--emp-accent);
	outline-offset: 3px;
}

/* CSS-only dark gradients for each terrain discipline (no images) */
.emp-terrain--road {
	background:
		radial-gradient(circle at 90% 15%, rgba(79, 207, 255, 0.08) 0%, transparent 60%),
		linear-gradient(135deg, #101216 0%, #171c23 100%);
}

.emp-terrain--offroad {
	background:
		radial-gradient(circle at 90% 15%, rgba(200, 130, 40, 0.08) 0%, transparent 60%),
		linear-gradient(135deg, #151310 0%, #201a14 100%);
}

.emp-terrain--adventure {
	background:
		radial-gradient(circle at 90% 15%, rgba(79, 207, 255, 0.06) 0%, transparent 60%),
		linear-gradient(135deg, #0e1418 0%, #142129 100%);
}

.emp-terrain--track {
	background:
		radial-gradient(circle at 90% 15%, rgba(220, 50, 70, 0.08) 0%, transparent 60%),
		linear-gradient(135deg, #181116 0%, #251622 100%);
}

.emp-terrain__content {
	margin-bottom: 1rem;
}

.emp-terrain__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--emp-accent);
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

.emp-terrain__heading {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--emp-ink-strong);
	margin: 0 0 0.5rem 0;
	line-height: 1.25;
}

.emp-terrain__desc {
	font-size: 0.85rem;
	color: var(--emp-muted);
	line-height: 1.45;
	margin-bottom: 0;
}

.emp-terrain__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--emp-accent);
	margin-top: auto;
}

.emp-terrain__arrow {
	transition: transform 0.2s ease;
}

.emp-terrain__card:hover .emp-terrain__arrow,
.emp-terrain__card:focus .emp-terrain__arrow {
	transform: translateX(5px);
}


/* ==========================================================================
   4. Fitment Call-to-Action Banner (emp_cta.template.html)
   ========================================================================== */

.emp-cta {
	overflow-x: hidden;
}

.emp-cta__box {
	background: linear-gradient(135deg, #0e1115 0%, #131922 100%);
	border: 1px solid var(--emp-line);
	border-left: 4px solid var(--emp-accent);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
	.emp-cta__box {
		padding: 2rem 2.25rem;
	}
}

.emp-cta__badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--emp-accent);
	background-color: rgba(79, 207, 255, 0.1);
	border: 1px solid rgba(79, 207, 255, 0.3);
	border-radius: 3px;
	padding: 0.15rem 0.5rem;
	margin-bottom: 0.5rem;
}

.emp-cta__heading {
	color: var(--emp-ink-strong);
	font-weight: 700;
	line-height: 1.25;
}

.emp-cta__text {
	color: var(--emp-ink);
	font-size: 0.9rem;
	line-height: 1.5;
}

.emp-cta__phone-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--emp-accent);
	border-color: var(--emp-accent);
	color: var(--emp-accent-ink);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.7rem 1.35rem;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	max-width: 100%;
}

.emp-cta__phone-btn:hover,
.emp-cta__phone-btn:focus {
	background-color: var(--emp-ink-strong);
	border-color: var(--emp-ink-strong);
	color: var(--emp-accent-ink);
	box-shadow: 0 0 16px rgba(79, 207, 255, 0.4);
	transform: translateY(-2px);
	text-decoration: none;
}

.emp-cta__phone-btn:focus-visible {
	outline: 3px solid var(--emp-accent);
	outline-offset: 3px;
}

.emp-cta__icon {
	flex-shrink: 0;
}

/* ==========================================================================
   5. Tyre Size Finder - Enquiry Result Panel (size_finder.template.html)
   ========================================================================== */

.emp-finder__result {
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-left: 4px solid var(--emp-accent);
	color: var(--emp-ink);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.emp-finder__result-badge {
	color: var(--emp-muted);
	font-size: 0.9rem;
}

.emp-finder__result-size {
	color: var(--emp-accent) !important;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

.emp-finder__result-text {
	color: var(--emp-ink-strong);
	font-size: 0.95rem;
	line-height: 1.5;
}

.emp-finder__result-actions {
	gap: 0.5rem;
}

.emp-finder__btn-call,
.emp-finder__btn-email,
.emp-finder__btn-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.55rem 1.15rem;
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	max-width: 100%;
}

.emp-finder__btn-email {
	background-color: var(--emp-accent);
	border-color: var(--emp-accent);
	color: var(--emp-accent-ink);
}

.emp-finder__btn-email:hover,
.emp-finder__btn-email:focus {
	background-color: var(--emp-ink-strong);
	border-color: var(--emp-ink-strong);
	color: var(--emp-accent-ink);
	box-shadow: 0 0 12px rgba(79, 207, 255, 0.4);
}

.emp-finder__btn-call {
	border-color: var(--emp-line);
	color: var(--emp-ink-strong);
	background-color: transparent;
}

.emp-finder__btn-call:hover,
.emp-finder__btn-call:focus {
	border-color: var(--emp-accent);
	color: var(--emp-accent);
	background-color: rgba(79, 207, 255, 0.08);
}

.emp-finder__btn-copy {
	border-color: var(--emp-line);
	color: var(--emp-ink);
	background-color: rgba(255, 255, 255, 0.05);
}

.emp-finder__btn-copy:hover,
.emp-finder__btn-copy:focus {
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	background-color: rgba(255, 255, 255, 0.1);
}

.emp-finder__btn-call:focus-visible,
.emp-finder__btn-email:focus-visible,
.emp-finder__btn-copy:focus-visible {
	outline: 3px solid var(--emp-accent);
	outline-offset: 2px;
}