/* ============================================================
   Section — hero | desktop: #4005:8607 | tablet: #4005:8694
   ============================================================ */

.r14-track .hero {
	padding: var(--var-140) var(--section-horizontal-padding);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: var(--color-2nd-bg);
}

.r14-track .hero__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--section-gap);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.r14-track .hero__headings {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: center;
	gap: var(--var-28);
}

.r14-track .hero__top {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: center;
	gap: var(--var-12);
}

.r14-track .hero__badges {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--var-6);
	width: fit-content;
}

.r14-track .hero__bfs-badge {
	display: flex;
	flex-direction: row;
	padding: var(--var-4);
	justify-content: center;
	align-items: center;
	gap: var(--var-4);
	background: var(--color-semantic-shopify-bg);
}

.r14-track .hero__bfs-badge img {
	display: block;
}

.r14-track .hero__bfs-badge-text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1em;
	color: var(--color-semantic-shopify-fg);
}

.r14-track .hero__badge-divider {
	display: block;
	width: var(--var-1);
	align-self: stretch;
	background: var(--color-stroke);
}

.r14-track .hero__rating-badge {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--var-4);
}

.r14-track .hero__rating-badge img {
	display: block;
}

.r14-track .hero__rating-text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1em;
	color: var(--color-1st-fg);
}

.r14-track .hero__copy {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: stretch;
	gap: var(--var-40);
}

.r14-track .hero__heading-wrap {
	display: flex;
	flex-direction: row;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.r14-track .hero__heading {
	width: 100%;
	max-width: 600px;
	margin-inline: auto;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1.15em;
	text-align: center;
	color: var(--color-1st-fg);
}

.r14-track .hero__description-wrap {
	display: flex;
	flex-direction: row;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.r14-track .hero__description {
	width: 100%;
	max-width: 600px;
	margin-inline: auto;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4em;
	text-align: center;
	color: var(--color-2nd-fg);
}

.r14-track .hero__buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--var-12);
}

.r14-track .hero__btn {
	display: flex;
	flex-direction: row;
	padding: var(--var-14) var(--var-28);
	justify-content: center;
	align-items: center;
	gap: var(--var-6);
	background: var(--color-1st-btn-bg);
	border-radius: 100px; /* hard_code: 100px, no token */
	text-decoration: none;
}

.r14-track .hero__btn-text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1em;
	text-transform: uppercase;
	color: var(--color-1st-btn-fg);
}

.r14-track .hero__visual {
	display: flex;
	flex-direction: row;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	gap: var(--var-12);
	width: 100%;
	height: 600px; /* hard_code: 600px, no token */
}

.r14-track .hero__visual-img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.r14-track .hero__visual--compact {
	display: none;
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.r14-track .hero__visual {
		height: auto;
	}
}

@media (max-width: 1024px) {
	.r14-track .hero {
		padding: var(--var-140) var(--var-20);
	}

	.r14-track .hero__inner {
		gap: var(--var-40);
	}

	.r14-track .hero__buttons {
		flex-direction: column;
	}

	.r14-track .hero__heading {
		max-width: 320px;
	}

	.r14-track .hero__visual {
		display: none;
	}

	.r14-track .hero__visual--compact {
		display: block;
	}
}