/* Fox Bike — merged from index.html + shop.html inline styles */

/* Heebo when Google Fonts loads; overrides Tailwind preflight if needed */
body.foxbike-lab,
body.foxbike-shop {
	font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	overflow-x: hidden;
}

body.foxbike-lab main,
body.foxbike-shop main {
	overflow-x: hidden;
}

/* Shop section background illustration */
body.foxbike-shop #shop {
	position: relative;
	isolation: isolate;
}

body.foxbike-shop #shop::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("./scooter-illustration.svg");
	background-repeat: no-repeat;
	background-position: left -40px bottom 0;
	background-size: min(1100px, 125vw);
	opacity: 0.8;
	z-index: 0;
	transform: translate3d(var(--foxbike-shop-illu-x, 60px), var(--foxbike-shop-illu-y, 0px), 0);
	will-change: transform;
}

body.foxbike-shop #shop > * {
	position: relative;
	z-index: 1;
}

/* Shop "more models" CTA pill (keeps text readable over illustration) */
body.foxbike-shop .foxbike-shop-more-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.15rem;
	border-radius: 999px;
	font-weight: 800;
	color: #ff6600;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
		box-shadow 160ms ease, transform 160ms ease;
}

body.foxbike-shop .foxbike-shop-more-pill:hover {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 102, 0, 0.22);
	box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
	transform: translateY(-1px);
}

body.foxbike-shop .foxbike-shop-more-pill:active {
	transform: translateY(0);
}

body.foxbike-shop .foxbike-shop-more-pill:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.18), 0 18px 36px rgba(15, 23, 42, 0.12);
	border-color: rgba(255, 102, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	body.foxbike-shop #shop::before {
		transform: none !important;
	}
}

/* Landing: lock horizontal scroll at root (clip is not supported everywhere) */
html:has(body.foxbike-lab),
html:has(body.foxbike-shop) {
	overflow-x: hidden;
}

body.foxbike-lab b,
body.foxbike-lab strong,
body.foxbike-shop b,
body.foxbike-shop strong {
	font-weight: 700;
}

/* Lab: fixed header — frosted “floating” bar (same look at all scroll positions) */
body.foxbike-lab .foxbike-lab-header {
	position: fixed;
	z-index: 50;
	top: 0.65rem;
	left: 0.65rem;
	right: 0.65rem;
	width: auto;
	border-radius: 0.875rem;
	background-color: rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	transition:
		top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		right 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-radius 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		background-color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.4s ease,
		backdrop-filter 0.45s ease,
		-webkit-backdrop-filter 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.foxbike-lab .foxbike-lab-header {
		transition-duration: 0.01ms;
	}
}

/* Shop: fixed header (fallback also supports older markup without .foxbike-shop-header) */
body.foxbike-shop .foxbike-shop-header,
body.foxbike-shop > header:first-of-type {
	position: fixed !important;
	top: var(--foxbike-admin-offset, 0px) !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 50 !important;
}

/* Reserve space for fixed shop header */
body.foxbike-shop main {
	padding-top: var(--foxbike-shop-header-h, 5rem);
}

/* Header logo column: cap width so large root rem / text-2xl cannot stretch the slot */
body.foxbike-lab .foxbike-header-logo-wrap,
body.foxbike-shop .foxbike-header-logo-wrap {
	width: 110px;
	max-width: 110px;
}

body.foxbike-lab .foxbike-header-logo-link,
body.foxbike-shop .foxbike-header-logo-link {
	width: 100%;
	max-width: 110px;
	min-width: 0;
}

body.foxbike-lab .foxbike-header-logo-link img,
body.foxbike-shop .foxbike-header-logo-link img {
	max-width: 100%;
	box-sizing: border-box;
}

body.foxbike-lab .foxbike-header-logo,
body.foxbike-shop .foxbike-header-logo {
	border-radius: 50%;
	width: 110px;
	height: 110px;
	margin-bottom: -48px;
	transition: width 0.2s ease, height 0.2s ease, margin-bottom 0.2s ease;
}

body.foxbike-lab .foxbike-header-logo.foxbike-header-logo--shrunk,
body.foxbike-shop .foxbike-header-logo.foxbike-header-logo--shrunk {
	width: 72px;
	height: 72px;
	margin-bottom: -32px;
}

/* Dynamic hero / map photos: set --foxbike-bg-image on the element (see templates) */
.foxbike-bg-image-fill {
	background-image: var(--foxbike-bg-image);
}

[data-foxbike-hero-scroll-blur] {
	backdrop-filter: blur(var(--foxbike-hero-blur, 1px));
	-webkit-backdrop-filter: blur(var(--foxbike-hero-blur, 1px));
}

/*
 * Hero photo layer: cover + no tile; scroll on small viewports (Tailwind) avoids iOS fixed-bg bugs.
 * Keep filter/opacity/transform OFF this element — they create a containing layer so background-attachment:fixed
 * no longer tracks the viewport when the layer is position:absolute inside the section.
 */
.foxbike-hero-bg {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Desktop: allow fixed hero backgrounds (mobile keeps bg-scroll for smoother scrolling) */
@media (min-width: 1024px) {
	body.foxbike-lab #home.foxbike-hero .foxbike-hero-bg,
	body.foxbike-shop #home .foxbike-hero-bg {
		background-attachment: fixed;
	}
}

body.foxbike-lab #home.foxbike-hero .foxbike-hero-bg {
	opacity: 1;
}

/* Stacking for hero overlays above fixed bg */
.foxbike-hero {
	isolation: isolate;
}

/*
 * Lab / shop hero height: use --foxbike-inner-h (synced to visualViewport.height or innerHeight in foxbike-main.js).
 * Avoid 100vh / 100dvh for min-height — they often disagree with the real paintable area and cause a stray scrollbar.
 */
body.foxbike-lab .foxbike-lab-hero {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow-x: hidden;
	min-height: var(--foxbike-inner-h, 100svh);
}

body.foxbike-lab .foxbike-lab-hero .foxbike-hero-inner {
	width: 100%;
}

body.foxbike-shop .foxbike-shop-hero {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	min-height: calc(var(--foxbike-inner-h, 100svh) - var(--foxbike-shop-header-h, 5rem));
}

body.foxbike-shop .foxbike-shop-hero .foxbike-hero-inner {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.foxbike-hero-bg {
		background-attachment: scroll !important;
	}
}

html {
	scroll-behavior: smooth;
}

section[id],
footer[id] {
	scroll-margin-top: var(--foxbike-anchor-offset, 6.5rem);
}

details > summary {
	list-style: none;
}

details > summary::-webkit-details-marker {
	display: none;
}

/* Lab: details sweep */
details[open] summary ~ * {
	animation: sweep 0.3s ease-in-out;
}

@keyframes sweep {
	0% {
		opacity: 0;
		margin-top: -10px;
	}
	100% {
		opacity: 1;
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	body {
		padding-bottom: 70px;
	}
}

.clip-diagonal {
	clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

@keyframes heroInUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroInLeft {
	from {
		opacity: 0;
		transform: translateX(18px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.hero-anim-up {
	opacity: 0;
	animation: heroInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-anim-left {
	opacity: 0;
	animation: heroInLeft 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-delay-150 {
	animation-delay: 150ms;
}

.hero-delay-300 {
	animation-delay: 300ms;
}

@keyframes accentDash {
	0% {
		stroke-dashoffset: 1200;
		opacity: 0.95;
	}
	60% {
		stroke-dashoffset: 0;
		opacity: 0.95;
	}
	100% {
		stroke-dashoffset: -1200;
		opacity: 0.95;
	}
}

.accent-stroke {
	stroke: #ff6600;
	stroke-width: 3;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	animation: accentDash 5.5s linear infinite;
	animation-play-state: paused;
	vector-effect: non-scaling-stroke;
	opacity: 0.35;
}

#about.about-inview .accent-stroke {
	animation-play-state: running;
}

.about-reveal {
	opacity: 0;
	transform: translateX(28px);
	transition:
		opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-reveal-left {
	transform: translateX(-28px);
}

#about.about-inview .about-reveal {
	opacity: 1;
	transform: translateX(0);
}

#about.about-inview .about-reveal-right {
	transition-delay: 90ms;
}

@media (prefers-reduced-motion: reduce) {
	.hero-anim-up,
	.hero-anim-left {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.foxbike-entrance {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.accent-stroke {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}

	.about-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Generic entrance animations (lab + shop) */
.foxbike-entrance {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
	transition:
		opacity var(--foxbike-entrance-dur, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1)
			var(--foxbike-entrance-delay, 0ms),
		transform var(--foxbike-entrance-dur, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1)
			var(--foxbike-entrance-delay, 0ms);
}

.foxbike-entrance.foxbike-entrance--in {
	opacity: 1;
	transform: none;
}

/* Stagger delays (no inline styles) */
.foxbike-entrance-delay-0 {
	--foxbike-entrance-delay: 0ms;
}
.foxbike-entrance-delay-1 {
	--foxbike-entrance-delay: 30ms;
}
.foxbike-entrance-delay-2 {
	--foxbike-entrance-delay: 60ms;
}
.foxbike-entrance-delay-3 {
	--foxbike-entrance-delay: 90ms;
}
.foxbike-entrance-delay-4 {
	--foxbike-entrance-delay: 120ms;
}
.foxbike-entrance-delay-5 {
	--foxbike-entrance-delay: 150ms;
}
.foxbike-entrance-delay-6 {
	--foxbike-entrance-delay: 180ms;
}
.foxbike-entrance-delay-7 {
	--foxbike-entrance-delay: 210ms;
}
.foxbike-entrance-delay-8 {
	--foxbike-entrance-delay: 240ms;
}
.foxbike-entrance-delay-9 {
	--foxbike-entrance-delay: 270ms;
}
.foxbike-entrance-delay-10 {
	--foxbike-entrance-delay: 300ms;
}
.foxbike-entrance-delay-11 {
	--foxbike-entrance-delay: 330ms;
}
.foxbike-entrance-delay-12 {
	--foxbike-entrance-delay: 360ms;
}

/* Lightbox (lab) */
#lightbox {
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

#lightbox .lb-panel {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition:
		opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#lightbox.lb-open {
	opacity: 1;
	pointer-events: auto;
}

#lightbox.lb-open .lb-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	#lightbox,
	#lightbox .lb-panel {
		transition: none !important;
	}
}

/* Reviews slider */
.reviews-viewport {
	overflow: hidden;
}

.reviews-track {
	display: flex;
	transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: transform;
	align-items: stretch;
	direction: rtl;
	justify-content: flex-start;
}

.review-slide {
	flex: 0 0 100%;
	display: flex;
}

@media (min-width: 1024px) {
	.review-slide {
		flex-basis: 25%;
	}
}

/* Reviews dots (mobile-first) */
body.foxbike-shop [data-reviews-dots] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
}

body.foxbike-shop [data-reviews-dots] > button {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease,
		box-shadow 160ms ease;
}

body.foxbike-shop [data-reviews-dots] > button:hover {
	background: rgba(255, 255, 255, 0.32);
}

body.foxbike-shop [data-reviews-dots] > button[aria-current="true"] {
	background: #ff6600;
	border-color: #ff6600;
	box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.18);
}

@media (min-width: 1024px) {
	body.foxbike-shop [data-reviews-dots] > button {
		width: 10px;
		height: 10px;
	}
}

/* Equal heights for review cards */
body.foxbike-shop .review-slide > .bg-black {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
}

body.foxbike-shop .review-slide > .bg-black > p {
	flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
	.reviews-track {
		transition: none !important;
	}
}

/* Testimonials pattern + watermark (URL from :root --foxbike-watermark) */
.testimonials-pattern {
	background-image:
		radial-gradient(circle at 20% 20%, rgba(255, 102, 0, 0.14), transparent 40%),
		radial-gradient(circle at 85% 30%, rgba(255, 102, 0, 0.1), transparent 45%),
		radial-gradient(circle at 50% 90%, rgba(255, 102, 0, 0.08), transparent 55%),
		radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: auto, auto, auto, 18px 18px;
	background-position: center, center, center, 0 0;
}

.testimonials-watermark {
	position: relative;
	overflow: hidden;
}

.testimonials-watermark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--foxbike-watermark, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.4;
	filter: saturate(0.9);
	z-index: 0;
}

/* Shop: normalize "price label" HTML coming from ACF */
body.foxbike-shop .foxbike-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	line-height: 1;
	color: #ff6600;
	font-weight: 800;
	font-size: 1.5rem; /* ~text-2xl */
}

body.foxbike-shop .foxbike-price span,
body.foxbike-shop .foxbike-price ins {
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
}

body.foxbike-shop .foxbike-price ins {
	text-decoration: none;
}

body.foxbike-shop .foxbike-price del,
body.foxbike-shop .foxbike-price .line-through {
	color: rgba(100, 116, 139, 0.9); /* slate-500-ish */
	font-weight: 700;
	font-size: 1.125rem; /* ~text-lg */
}

/* Shop buttons */
body.foxbike-shop .foxbike-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 3.5rem; /* ~56px like screenshot */
	padding: 0.95rem 1.5rem;
	border-radius: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-align: center;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
		box-shadow 160ms ease, transform 160ms ease;
}

body.foxbike-shop .foxbike-btn--outline {
	background: #ffffff;
	color: #0f172a; /* slate-900 */
	border: 2px solid rgba(148, 163, 184, 0.85); /* slate-400/500-ish */
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

body.foxbike-shop .foxbike-btn--outline:hover {
	border-color: rgba(255, 102, 0, 0.55);
	box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.12);
}

body.foxbike-shop .foxbike-btn--outline:active {
	transform: translateY(1px);
}

body.foxbike-shop .foxbike-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.18);
	border-color: rgba(255, 102, 0, 0.7);
}

/* CF7 skinning to match the original designs (shop + lab) */
.foxbike-cf7 .wpcf7 form {
	margin: 0;
}

.foxbike-cf7 .wpcf7 form p {
	margin: 0;
}

.foxbike-cf7 .wpcf7 form > p + p {
	margin-top: 1.5rem;
}

.foxbike-cf7 .wpcf7 form label {
	display: block;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.foxbike-cf7 .wpcf7 form label br {
	display: none;
}

.foxbike-cf7 .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.foxbike-cf7 .wpcf7 input[type='text'],
.foxbike-cf7 .wpcf7 input[type='tel'],
.foxbike-cf7 .wpcf7 input[type='email'],
.foxbike-cf7 .wpcf7 textarea,
.foxbike-cf7 .wpcf7 select {
	width: 100%;
	box-sizing: border-box;
	direction: rtl;
	text-align: right;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 0.75rem;
	outline: none;
}

/* Consistent textarea height */
.foxbike-cf7 .wpcf7 textarea {
	height: 100px;
	resize: vertical;
}

/* Shop form look (rounded inputs, slate borders) */
body.foxbike-shop .foxbike-cf7--shop .wpcf7 form label {
	color: rgb(203 213 225); /* slate-300 */
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7 input[type='text'],
body.foxbike-shop .foxbike-cf7--shop .wpcf7 input[type='tel'],
body.foxbike-shop .foxbike-cf7--shop .wpcf7 input[type='email'],
body.foxbike-shop .foxbike-cf7--shop .wpcf7 textarea,
body.foxbike-shop .foxbike-cf7--shop .wpcf7 select {
	padding: 0.75rem 1rem;
	background: rgb(15 23 42); /* slate-900 */
	color: #ffffff;
	border: 1px solid rgb(71 85 105); /* slate-600 */
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7 input::placeholder,
body.foxbike-shop .foxbike-cf7--shop .wpcf7 textarea::placeholder {
	color: rgb(100 116 139); /* slate-500 */
	font-weight: 400;
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7 input:focus,
body.foxbike-shop .foxbike-cf7--shop .wpcf7 textarea:focus,
body.foxbike-shop .foxbike-cf7--shop .wpcf7 select:focus {
	border-color: #ff6600;
	box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.25);
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7 input[type='submit'] {
	width: 100%;
	cursor: pointer;
	border: 0;
	border-radius: 0.75rem;
	padding: 1rem 0.875rem;
	font-weight: 900;
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: #ff6600;
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7 input[type='submit']:hover {
	background: #ffffff;
	color: rgb(15 23 42); /* slate-900 */
}

/* Lab form look (underline inputs, no rounded container) */
body.foxbike-lab .foxbike-cf7--lab .wpcf7 form label {
	color: rgb(148 163 184); /* slate-400 */
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='text'],
body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='tel'],
body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='email'],
body.foxbike-lab .foxbike-cf7--lab .wpcf7 textarea,
body.foxbike-lab .foxbike-cf7--lab .wpcf7 select {
	padding: 1rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	transition: border-color 160ms ease;
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input::placeholder,
body.foxbike-lab .foxbike-cf7--lab .wpcf7 textarea::placeholder {
	color: rgb(71 85 105); /* slate-600 */
	font-weight: 400;
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input:focus,
body.foxbike-lab .foxbike-cf7--lab .wpcf7 textarea:focus,
body.foxbike-lab .foxbike-cf7--lab .wpcf7 select:focus {
	border-bottom-color: #ff6600;
	box-shadow: none;
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='submit'] {
	width: 100%;
	cursor: pointer;
	border: 0;
	padding: 1.25rem 0.875rem;
	font-weight: 900;
	font-size: 1.125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: #ff6600;
	color: #000000;
	box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
	transition: background-color 160ms ease, transform 160ms ease;
	transform: skewX(-10deg);
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='submit']::first-letter {
	/* noop: keep selector non-empty for older parsers */
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7 input[type='submit']:hover {
	background: #ffffff;
}

/* CF7 messages */
.foxbike-cf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-weight: 700;
	border-width: 1px;
}

.foxbike-cf7 .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
}

body.foxbike-shop .foxbike-cf7--shop .wpcf7-not-valid-tip {
	color: #ffb199;
}

body.foxbike-lab .foxbike-cf7--lab .wpcf7-not-valid-tip {
	color: #ffb199;
}

.testimonials-watermark > * {
	position: relative;
	z-index: 1;
}

/* Shop FAQ panel animation */
#faq details > summary {
	cursor: pointer;
}

#faq details > .faq-panel {
	overflow: hidden;
	transform-origin: top center;
}

#faq details[open] > .faq-panel {
	animation: faqPanelReveal 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes faqPanelReveal {
	from {
		opacity: 0;
		transform: translate3d(0, -0.5rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

#faq details.faq-item[open] > summary .faq-chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	#faq details[open] > .faq-panel {
		animation: none !important;
	}
}

/* Parts hover zoom (shop) */
.parts-part-row {
	position: relative;
	z-index: 0;
	border-radius: 0.5rem;
}

.parts-part-row:hover,
.parts-part-row:focus-within {
	z-index: 50;
}

.parts-thumb-wrap {
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	line-height: 0;
}

.parts-thumb-wrap > img:first-of-type {
	transition: box-shadow 0.15s ease;
}

.parts-part-row:hover .parts-thumb-wrap > img:first-of-type,
.parts-part-row:focus-within .parts-thumb-wrap > img:first-of-type {
	box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.4);
}

.parts-thumb-zoom {
	position: absolute;
	bottom: calc(100% + 0.45rem);
	left: 50%;
	transform: translate3d(-50%, 4px, 0) scale(0.98);
	width: 11rem;
	height: 11rem;
	max-width: min(11rem, 70vw);
	max-height: min(11rem, 70vw);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 22px 45px -12px rgba(0, 0, 0, 0.35);
	border: 2px solid #fff;
	background: #f8fafc;
}

.parts-thumb-zoom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.parts-part-row:hover .parts-thumb-zoom,
.parts-part-row:focus-within .parts-thumb-zoom {
	opacity: 1;
	visibility: visible;
	transform: translate3d(-50%, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.parts-thumb-zoom {
		transition: none;
	}

	.parts-part-row:hover .parts-thumb-zoom,
	.parts-part-row:focus-within .parts-thumb-zoom {
		transform: translate3d(-50%, 0, 0) scale(1);
	}
}