/* Service, filter and warranty route additions. */

.vservice-hero {
	background: #e8ece9;
}

.vservice-hero .vwp-in {
	display: grid;
	min-height: 620px;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 32px;
	padding-top: 72px;
	padding-bottom: 56px;
}

.vservice-hero .vwp-in > div {
	max-width: 830px;
}

.vservice-hero h1 {
	margin-top: 28px;
	font-size: clamp(3.2rem, 7.5vw, 6.8rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.vservice-hero .vwp-in > div > p:not(.vwp-eye) {
	max-width: 650px;
	margin-top: 30px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--vwp-muted);
}

.vservice-hero img {
	width: min(72vw, 330px);
	height: auto;
	justify-self: center;
}

.vservice-steps,
.vservice-schedules,
.vservice-reminders,
.vservice-request {
	background: var(--vwp-cream);
}

.vservice-step-grid,
.vservice-reminder-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 56px 0 34px;
	background: rgba(17, 21, 19, 0.2);
}

.vservice-step-grid article,
.vservice-reminder-grid article {
	min-height: 220px;
	padding: 22px;
	background: var(--vwp-cream);
}

.vservice-step-grid span,
.vservice-reminder-grid span,
.vservice-schedule-grid > article > span {
	font-size: 10px;
	color: #69706b;
}

.vservice-step-grid h3,
.vservice-reminder-grid h3 {
	margin-top: 46px;
	font-size: 1.5rem;
	font-weight: 300;
}

.vservice-step-grid p,
.vservice-reminder-grid p {
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--vwp-muted);
}

.vservice-physical {
	background: #111513;
	color: #fff;
}

.vservice-physical h2,
.vservice-physical h3 {
	color: #fff;
}

.vservice-physical .vwp-eye,
.vservice-physical .vwp-heading p,
.vservice-physical .vwp-overline {
	color: rgba(255, 255, 255, 0.65);
}

.vservice-filter-visuals {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 58px;
	background: rgba(255, 255, 255, 0.2);
}

.vservice-filter-visuals article {
	padding: 22px;
	background: #181c1a;
}

.vservice-filter-visuals figure {
	height: 320px;
	margin: -22px -22px 24px;
	background: #e8ece9;
}

.vservice-filter-visuals img {
	width: 100%;
	height: 100%;
	padding: 30px;
	object-fit: contain;
}

.vservice-filter-visuals h3 {
	margin-top: 14px;
	font-size: 1.75rem;
	font-weight: 300;
}

.vservice-filter-visuals article > p:not(.vwp-overline) {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}

.vservice-note {
	max-width: 720px;
	margin-top: 28px !important;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}

.vservice-schedule-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 58px;
	background: rgba(17, 21, 19, 0.2);
}

.vservice-schedule-grid article {
	display: flex;
	min-height: 430px;
	flex-direction: column;
	padding: 22px;
	background: var(--vwp-cream);
}

.vservice-schedule-grid .vservice-local {
	background: #e8eee7;
}

.vservice-schedule-grid .vwp-overline {
	margin-top: 34px;
}

.vservice-schedule-grid h3 {
	margin-top: 14px;
	font-size: 1.8rem;
	font-weight: 300;
}

.vservice-schedule-grid article > p:not(.vwp-overline) {
	margin-top: 17px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--vwp-muted);
}

.vservice-schedule-grid a {
	margin-top: auto;
	padding-top: 28px;
	font-size: 13px;
	text-decoration: none;
}

.vservice-replacements {
	background: #dfe7e9;
}

.vservice-replacement-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 58px;
	background: rgba(17, 21, 19, 0.2);
}

.vservice-replacement-grid article {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #e7eeee;
}

.vservice-replacement-grid figure {
	height: 290px;
	margin: -20px -20px 24px;
	background: rgba(255, 255, 255, 0.4);
}

.vservice-replacement-grid img {
	width: 100%;
	height: 100%;
	padding: 28px;
	object-fit: contain;
}

.vservice-replacement-grid h3 {
	margin-top: 14px;
	font-size: 1.5rem;
	font-weight: 300;
}

.vservice-replacement-grid dl {
	margin-top: 24px;
	border-top: 1px solid rgba(17, 21, 19, 0.2);
	padding-top: 14px;
}

.vservice-replacement-grid dt {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #69706b;
}

.vservice-replacement-grid dd {
	margin-top: 7px;
	font-size: 13px;
}

.vservice-replacement-grid .vwp-button {
	margin-top: auto;
	align-self: start;
	transform: translateY(8px);
}

.vservice-warranty {
	background: #e8ece9;
}

.vservice-warranty-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 56px;
	background: rgba(17, 21, 19, 0.2);
}

.vservice-warranty-grid article {
	min-height: 230px;
	padding: 24px;
	background: #e8ece9;
}

.vservice-warranty-grid h3 {
	font-size: 1.6rem;
	font-weight: 300;
}

.vservice-warranty-grid p {
	margin-top: 17px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--vwp-muted);
}

.vservice-warranty-grid .vwp-link {
	margin-top: 24px;
}

.vservice-request ol {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 56px 0 0;
	padding: 0;
	background: rgba(17, 21, 19, 0.2);
	list-style: none;
}

.vservice-request li {
	min-height: 120px;
	padding: 20px;
	background: var(--vwp-cream);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 300;
}

.vservice-request li span {
	display: block;
	margin-bottom: 28px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	color: #69706b;
}

.vservice-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 1px;
	background: rgba(17, 21, 19, 0.2);
}

.vservice-contact > div {
	min-height: 190px;
	padding: 22px;
	background: #e8ece9;
}

.vservice-contact h3 {
	margin-top: 28px;
	font-size: 1.35rem;
	font-weight: 300;
}

.vservice-contact > div > a:not(.vwp-link) {
	display: inline-block;
	margin-top: 14px;
	font-size: 15px;
	text-decoration: none;
}

.vservice-contact .vservice-whatsapp .vwp-button {
	display: flex;
	width: fit-content;
	margin-top: 24px;
}

.vservice-contact .vservice-whatsapp .vservice-phone {
	display: block;
	width: fit-content;
	margin-top: 14px;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vservice-contact > div:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

@media (min-width: 600px) {
	.vservice-step-grid,
	.vservice-replacement-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vservice-filter-visuals,
	.vservice-reminder-grid,
	.vservice-contact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vservice-schedule-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vservice-warranty-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vservice-request ol {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vservice-hero .vwp-in {
		grid-template-columns: 8fr 4fr;
		padding-top: 90px;
		padding-bottom: 72px;
	}

	.vservice-hero img {
		width: 360px;
	}

	.vservice-step-grid,
	.vservice-replacement-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vservice-schedule-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}