/* VMR XP Vertical Content — svc-product-card (PPF Crystal / Retro) */

.vmr-xp,
.vmr-xp *,
.vmr-xp *::before,
.vmr-xp *::after {
	box-sizing: border-box;
}

.elementor-widget-vmr_xp_product {
	--vmr-xp-wrap: 1320px;
	--vmr-media-max: min(360px, 52vw);
	background: transparent !important;
}

.elementor-widget-vmr_xp_product > .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.vmr-xp {
	display: block !important;
	margin: 0 !important;
	padding: clamp(64px, 9vw, 112px) 0 !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--vmr-border, #1e1e1e) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	background: #0c0c0c !important;
}

.vmr-xp--odd {
	background: #0a0a0a !important;
}

.vmr-xp--even {
	background: #0c0c0c !important;
}

.vmr-xp__wrap {
	width: 100% !important;
	max-width: var(--vmr-xp-wrap, 1320px) !important;
	margin: 0 auto !important;
	padding: 0 clamp(20px, 4vw, 48px) !important;
}

.vmr-xp__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vmr-text, #ffffff);
}

.vmr-xp__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vmr-orange, #b55a13) !important;
	font-family: var(--vmr-font-display) !important;
	font-size: var(--vmr-eyebrow-size, 13px) !important;
	font-weight: var(--vmr-eyebrow-weight, 700) !important;
	letter-spacing: var(--vmr-eyebrow-tracking, 0.18em) !important;
	line-height: var(--vmr-eyebrow-line, 1.2) !important;
	text-transform: uppercase !important;
}

.vmr-xp__eyebrow::before {
	content: "" !important;
	display: block !important;
	width: 24px !important;
	height: 1px !important;
	flex-shrink: 0 !important;
	background: var(--vmr-orange, #b55a13) !important;
}

.vmr-xp__title {
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: var(--vmr-font-display), sans-serif !important;
	font-size: var(--vmr-h2-size, clamp(36px, 4.2vw, 60px)) !important;
	font-weight: var(--vmr-h2-weight, 800) !important;
	letter-spacing: var(--vmr-h2-tracking, -0.005em) !important;
	line-height: var(--vmr-h2-line, 1) !important;
	text-transform: uppercase !important;
}

.vmr-xp__specs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 14px !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--vmr-font-display), sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(13px, 1.2vw, 15px) !important;
	letter-spacing: 0.1em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	color: var(--vmr-orange, #b55a13) !important;
}

.vmr-xp__spec-sep {
	display: block !important;
	width: 1px !important;
	height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: rgba(255, 255, 255, 0.22) !important;
}

.vmr-xp__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	margin: 0 0 clamp(24px, 4vw, 36px) !important;
	padding: 0 !important;
	max-width: 52rem !important;
	border: 0 !important;
	background: transparent !important;
}

.vmr-xp__body p {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--vmr-text-dim, rgba(255, 255, 255, 0.72)) !important;
	font-family: var(--vmr-font-body) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.vmr-xp__media {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
	max-height: 500px !important;
	margin: 0 0 clamp(24px, 4vw, 36px) !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 1px solid var(--vmr-border, #1e1e1e) !important;
	border-radius: 0 !important;
	background: #0c0c0c !important;
	box-shadow: none !important;
}

.vmr-xp__media img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
}

.vmr-xp__extra {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(24px, 3.5vw, 36px) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.vmr-xp__features {
	--xp-mark: 56px;
	--xp-gap: 28px;
	--xp-list-gap: 40px;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--xp-list-gap) !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

.vmr-xp__feature {
	position: relative !important;
	z-index: 1 !important;
	display: grid !important;
	grid-template-columns: var(--xp-mark) minmax(0, 1fr) !important;
	column-gap: var(--xp-gap) !important;
	align-items: start !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: none !important;
}

.vmr-xp__feature:not(:last-child)::after {
	content: "" !important;
	position: absolute !important;
	z-index: 0 !important;
	left: calc(var(--xp-mark) / 2) !important;
	top: calc(var(--xp-mark) / 2) !important;
	width: 0 !important;
	height: calc(100% + var(--xp-list-gap)) !important;
	border-left: 1.5px dashed rgba(181, 90, 19, 0.55) !important;
	transform: translateX(-50%) !important;
	pointer-events: none !important;
}

.vmr-xp__mark {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 56px !important;
	flex-shrink: 0 !important;
	width: 56px !important;
	height: 56px !important;
	box-sizing: border-box !important;
	border: 1px solid rgba(181, 90, 19, 0.45) !important;
	border-radius: 50% !important;
	background: #050505 !important;
	box-shadow: none !important;
	transition: border-color 160ms ease !important;
}

.vmr-xp__feature:hover .vmr-xp__mark {
	border-color: var(--vmr-orange, #b55a13) !important;
}

.vmr-xp__icon {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	height: 24px !important;
	min-height: 24px !important;
	max-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var(--vmr-orange, #b55a13) !important;
	line-height: 0 !important;
}

.vmr-xp__icon svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	overflow: visible !important;
}

.vmr-xp__num {
	position: absolute !important;
	top: -2px !important;
	right: -4px !important;
	z-index: 2 !important;
	min-width: 22px !important;
	padding: 3px 5px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--vmr-orange, #b55a13) !important;
	color: #ffffff !important;
	font-family: var(--vmr-font-display), sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	line-height: 1 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
}

.vmr-xp__feature-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	min-width: 0 !important;
	padding-top: 6px !important;
	margin: 0 !important;
}

.vmr-xp__feature-title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vmr-text, #ffffff) !important;
	font-family: var(--vmr-font-display) !important;
	font-size: var(--vmr-title-sm-size, 26px) !important;
	font-weight: var(--vmr-title-sm-weight, 800) !important;
	letter-spacing: var(--vmr-title-sm-tracking, -0.005em) !important;
	line-height: var(--vmr-title-sm-line, 1.1) !important;
	text-transform: uppercase !important;
}

.vmr-xp__feature-desc {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--vmr-text-dim, #9aa3af) !important;
	font-family: var(--vmr-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.45 !important;
	text-align: left !important;
	text-transform: none !important;
}

.vmr-xp__chart {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: 720px !important;
	margin: 8px auto 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.vmr-xp__chart img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 720px !important;
	max-height: min(380px, 48vh) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	object-position: center !important;
}

.vmr-xp__chart-caption {
	width: 100% !important;
	max-width: 720px !important;
	margin: 0 !important;
	padding: 12px 0 0 !important;
	border: 0 !important;
	border-top: none !important;
	background: transparent !important;
	font-family: var(--vmr-font-body), sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-transform: none !important;
	color: var(--vmr-text-muted, #6b7280) !important;
}

@media (max-width: 860px) {
	.elementor-widget-vmr_xp_product {
		--vmr-media-max: min(360px, 52vw);
	}

	.vmr-xp {
		padding: clamp(40px, 6vw, 56px) 0 !important;
	}

	.vmr-xp__media {
		height: auto !important;
		min-height: 0 !important;
		max-height: var(--vmr-media-max, min(360px, 52vw)) !important;
		aspect-ratio: 16 / 9 !important;
	}

	.vmr-xp__media img {
		max-height: none !important;
	}

	.vmr-xp__chart,
	.vmr-xp__extra {
		max-width: 100% !important;
		overflow-x: visible !important;
	}

	.vmr-xp__chart img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
	}
}

@media (max-width: 640px) {
	.elementor-widget-vmr_xp_product {
		--vmr-media-max: min(240px, 70vw);
	}

	.vmr-xp {
		padding: clamp(36px, 8vw, 48px) 0 !important;
	}

	.vmr-xp__features {
		--xp-mark: 48px;
		--xp-gap: 16px;
		--xp-list-gap: 28px;
	}

	.vmr-xp__mark {
		width: 48px !important;
		height: 48px !important;
		flex: 0 0 48px !important;
	}

	.vmr-xp__feature-body {
		gap: 8px !important;
		padding-top: 4px !important;
	}

	.vmr-xp__feature-desc {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}

	.vmr-xp__chart {
		max-width: 100% !important;
	}

	.vmr-xp__chart img {
		max-height: min(280px, 50vw) !important;
	}
}