/* =========================================================
 * Tech Resolve — Online Store Hero
 * ======================================================= */

.tr-online-store-hero {
	position: relative;
	overflow: hidden;

	min-height:
		clamp(760px, 88vh, 980px);

	padding:
		clamp(130px, 12vw, 190px)
		var(--tr-gutter)
		clamp(60px, 6vw, 90px);

	color:
		#fff;

	background:
		linear-gradient(
			145deg,
			#040b08,
			#07140f 56%,
			#06100d
		);
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-online-store-hero__background,
.tr-online-store-hero__grid,
.tr-online-store-hero__glow,
.tr-online-store-hero__beam {
	position: absolute;

	pointer-events: none;
}


.tr-online-store-hero__background {
	inset: 0;
}


.tr-online-store-hero__grid {
	inset: 0;

	opacity: .14;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, .032) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .032) 1px,
			transparent 1px
		);

	background-size:
		70px 70px;
}


.tr-online-store-hero__glow--green {
	top: -260px;
	right: -220px;

	width: 820px;
	height: 820px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, .12),
			transparent 67%
		);
}


.tr-online-store-hero__glow--blue {
	left: -300px;
	bottom: -360px;

	width: 820px;
	height: 820px;

	background:
		radial-gradient(
			circle,
			rgba(57, 120, 255, .07),
			transparent 70%
		);
}


.tr-online-store-hero__beam {
	top: -35%;
	right: 32%;

	width: 1px;
	height: 175%;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(20, 215, 232, .17),
			transparent
		);

	transform:
		rotate(23deg);
}


/* =========================================================
 * Shell
 * ======================================================= */

.tr-online-store-hero__shell {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, .96fr)
		minmax(500px, .86fr);

	align-items: center;

	gap:
		clamp(55px, 7vw, 110px);

	width:
		min(100%, var(--tr-container-wide));

	margin:
		0 auto;
}


/* =========================================================
 * Copy
 * ======================================================= */

.tr-online-store-hero__copy {
	position: relative;
	z-index: 3;

	padding:
		clamp(25px, 4vw, 52px)
		0;
}


.tr-online-store-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;

	margin-bottom:
		clamp(22px, 3vw, 34px);

	color:
		var(--tr-green);

	font-size: 9px;
	font-weight: 850;
	letter-spacing: .14em;
}


.tr-online-store-hero__eyebrow > span {
	width: 30px;
	height: 1px;

	background:
		var(--tr-green);

	box-shadow:
		0 0 12px rgba(25, 224, 120, .4);
}


.tr-online-store-hero__copy h1 {
	max-width: 880px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(58px, 6.5vw, 104px);

	font-weight: 850;
	line-height: .92;
	letter-spacing: -.065em;
}


.tr-online-store-hero__copy > p {
	max-width: 660px;

	margin:
		clamp(28px, 4vw, 42px)
		0
		0;

	color:
		rgba(255, 255, 255, .5);

	font-size:
		clamp(14px, 1.15vw, 17px);

	line-height: 1.82;
}


/* =========================================================
 * Actions
 * ======================================================= */

.tr-online-store-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 17px 24px;

	margin-top:
		clamp(34px, 5vw, 50px);
}


.tr-online-store-hero .tr-online-store-hero__primary,
.tr-online-store-hero .tr-online-store-hero__primary:hover,
.tr-online-store-hero .tr-online-store-hero__primary:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	min-height: 58px;
	padding:
		0 24px;

	color:
		#06100d !important;

	background:
		var(--tr-green) !important;

	border:
		1px solid var(--tr-green) !important;

	border-radius:
		999px !important;

	box-shadow:
		0 15px 35px rgba(25, 224, 120, .12) !important;

	font-size: 12px;
	font-weight: 850;
	line-height: 1;

	text-decoration: none !important;

	transition:
		transform 180ms var(--tr-ease),
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}


.tr-online-store-hero .tr-online-store-hero__primary:hover {
	transform:
		translateY(-2px);

	color:
		#06100d !important;

	background:
		#fff !important;

	border-color:
		#fff !important;
}


.tr-online-store-hero__primary i {
	display: grid;
	place-items: center;

	width: 28px;
	height: 28px;

	color:
		var(--tr-green);

	background:
		#06100d;

	border-radius:
		50%;

	font-size: 14px;
	font-style: normal;

	transition:
		transform 180ms var(--tr-ease);
}


.tr-online-store-hero__primary:hover i {
	transform:
		translateX(3px);
}


.tr-online-store-hero .tr-online-store-hero__secondary,
.tr-online-store-hero .tr-online-store-hero__secondary:hover,
.tr-online-store-hero .tr-online-store-hero__secondary:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding:
		12px 0;

	color:
		rgba(255, 255, 255, .5) !important;

	background:
		transparent !important;

	border:
		0 !important;

	box-shadow:
		none !important;

	font-size: 10px;
	font-weight: 750;

	text-decoration: none !important;

	transition:
		color 180ms ease;
}


.tr-online-store-hero .tr-online-store-hero__secondary:hover {
	color:
		#fff !important;
}


.tr-online-store-hero__secondary i {
	color:
		var(--tr-green);

	font-size: 12px;
	font-style: normal;
}


/* =========================================================
 * Focus
 * ======================================================= */

.tr-online-store-hero__primary:focus-visible,
.tr-online-store-hero__secondary:focus-visible {
	outline:
		2px solid var(--tr-green);

	outline-offset:
		5px;
}


/* =========================================================
 * Visual
 * ======================================================= */

.tr-online-store-hero__visual {
	position: relative;

	overflow: hidden;

	min-width: 0;

	border:
		1px solid rgba(255, 255, 255, .09);

	border-radius:
		30px;

	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, .035),
			rgba(255, 255, 255, .012)
		);

	box-shadow:
		0 45px 120px rgba(0, 0, 0, .3);

	transform:
		rotate(1.3deg);
}


/* =========================================================
 * Visual Head
 * ======================================================= */

.tr-online-store-hero__visual-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	min-height: 54px;
	padding:
		0 20px;

	color:
		rgba(255, 255, 255, .25);

	border-bottom:
		1px solid rgba(255, 255, 255, .07);

	font-size: 6px;
	font-weight: 850;
	letter-spacing: .11em;
}


.tr-online-store-hero__visual-head > div {
	display: flex;
	align-items: center;
	gap: 9px;
}


.tr-online-store-hero__status {
	width: 6px;
	height: 6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

	box-shadow:
		0 0 13px rgba(25, 224, 120, .6);
}


/* =========================================================
 * Visual Title
 * ======================================================= */

.tr-online-store-hero__visual-title {
	display: grid;

	grid-template-columns:
		118px
		minmax(0, 1fr);

	align-items: center;

	gap: 22px;

	padding:
		24px 24px 22px;

	border-bottom:
		1px solid rgba(255, 255, 255, .07);
}


.tr-online-store-hero__visual-title > span {
	color:
		rgba(255, 255, 255, .18);

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .1em;
}


.tr-online-store-hero__visual-title h2 {
	margin: 0;

	color:
		#fff;

	font-size:
		clamp(20px, 2vw, 29px);

	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.035em;
}


/* =========================================================
 * Storefront
 * ======================================================= */

.tr-online-store-hero__storefront {
	position: relative;

	padding:
		24px;
}


/* =========================================================
 * Store Toolbar
 * ======================================================= */

.tr-online-store-hero__store-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 34px;
	padding:
		0 12px;

	background:
		rgba(255, 255, 255, .035);

	border:
		1px solid rgba(255, 255, 255, .065);

	border-bottom:
		0;
}


.tr-online-store-hero__store-toolbar > span {
	width: 86px;
	height: 5px;

	background:
		rgba(255, 255, 255, .11);

	border-radius:
		999px;
}


.tr-online-store-hero__store-toolbar > div {
	display: flex;
	gap: 6px;
}


.tr-online-store-hero__store-toolbar i {
	width: 5px;
	height: 5px;

	background:
		rgba(255, 255, 255, .16);

	border-radius:
		50%;
}


/* =========================================================
 * Store Stage
 * ======================================================= */

.tr-online-store-hero__store-stage {
	position: relative;

	min-height: 305px;

	background:
		linear-gradient(
			150deg,
			#f2f4f1,
			#dce4df
		);

	border:
		1px solid rgba(255, 255, 255, .07);

	box-shadow:
		inset 0 0 0 1px rgba(6, 16, 13, .04);
}


/* =========================================================
 * Products
 * ======================================================= */

.tr-online-store-hero__product {
	position: absolute;

	overflow: hidden;

	color:
		#102017;

	background:
		#fff;

	box-shadow:
		0 18px 34px rgba(6, 16, 13, .13);
}


.tr-online-store-hero__product > div {
	background:
		linear-gradient(
			135deg,
			#cde9dd,
			#5bd98e 48%,
			#126745
		);
}


.tr-online-store-hero__product > span,
.tr-online-store-hero__product > strong {
	position: absolute;

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .08em;
}


.tr-online-store-hero__product--primary {
	top: 30px;
	left: 28px;

	width: 180px;
	height: 232px;

	transform:
		rotate(-4deg);
}


.tr-online-store-hero__product--primary > div {
	height: 172px;
}


.tr-online-store-hero__product--primary > span {
	left: 12px;
	bottom: 24px;

	color:
		#738078;
}


.tr-online-store-hero__product--primary > strong {
	right: 12px;
	bottom: 13px;

	color:
		#0a1a11;

	font-size: 10px;
}


.tr-online-store-hero__product--secondary {
	top: 46px;
	left: 224px;

	width: 126px;
	height: 155px;

	transform:
		rotate(4deg);
}


.tr-online-store-hero__product--secondary > div {
	height: 113px;

	background:
		linear-gradient(
			135deg,
			#c6d5ff,
			#3978ff 55%,
			#153577
		);
}


.tr-online-store-hero__product--secondary > span,
.tr-online-store-hero__product--tertiary > span {
	left: 9px;
	bottom: 13px;

	color:
		#7a857e;
}


.tr-online-store-hero__product--tertiary {
	left: 236px;
	bottom: 26px;

	width: 112px;
	height: 86px;

	transform:
		rotate(-3deg);
}


.tr-online-store-hero__product--tertiary > div {
	height: 54px;

	background:
		linear-gradient(
			135deg,
			#ffd9b9,
			#ff8b45 55%,
			#87380e
		);
}


/* =========================================================
 * Cart
 * ======================================================= */

.tr-online-store-hero__cart {
	position: absolute;
	top: 32px;
	right: 22px;

	display: grid;
	place-items: center;
	gap: 4px;

	width: 74px;
	height: 74px;

	color:
		#06100d;

	background:
		var(--tr-green);

	border-radius:
		50%;

	box-shadow:
		0 14px 28px rgba(6, 16, 13, .13);
}


.tr-online-store-hero__cart span {
	font-size: 5px;
	font-weight: 900;
	letter-spacing: .08em;
}


.tr-online-store-hero__cart strong {
	font-size: 21px;
	font-weight: 850;
	line-height: 1;
}


/* =========================================================
 * Checkout
 * ======================================================= */

.tr-online-store-hero__checkout {
	position: absolute;
	right: 22px;
	bottom: 26px;

	display: grid;
	gap: 8px;

	width: 160px;
	padding:
		15px;

	color:
		#fff;

	background:
		#07120e;

	box-shadow:
		0 16px 30px rgba(6, 16, 13, .18);
}


.tr-online-store-hero__checkout > span {
	color:
		rgba(255, 255, 255, .35);

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .1em;
}


.tr-online-store-hero__checkout > i {
	height: 5px;

	background:
		rgba(255, 255, 255, .08);

	border-radius:
		999px;
}


.tr-online-store-hero__checkout > i:nth-of-type(1) {
	width: 76%;
}


.tr-online-store-hero__checkout > i:nth-of-type(2) {
	width: 52%;
}


.tr-online-store-hero__checkout > strong {
	display: grid;
	place-items: center;

	width: 52px;
	height: 24px;
	margin-top: 4px;

	color:
		#06100d;

	background:
		var(--tr-green);

	border-radius:
		999px;

	font-size: 5px;
	font-weight: 900;
	letter-spacing: .08em;
}


/* =========================================================
 * Stages
 * ======================================================= */

.tr-online-store-hero__stages {
	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	border-top:
		1px solid rgba(255, 255, 255, .065);
}


.tr-online-store-hero__stage {
	min-width: 0;

	padding:
		16px 12px 18px;

	border-right:
		1px solid rgba(255, 255, 255, .055);
}


.tr-online-store-hero__stage:last-child {
	border-right: 0;
}


.tr-online-store-hero__stage > div {
	display: flex;
	align-items: center;
	gap: 7px;

	margin-bottom: 8px;
}


.tr-online-store-hero__stage > div span {
	color:
		rgba(255, 255, 255, .17);

	font-size: 5px;
	font-weight: 850;
}


.tr-online-store-hero__stage > div i {
	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .07),
			rgba(25, 224, 120, .28)
		);
}


.tr-online-store-hero__stage > strong {
	display: block;

	overflow: hidden;

	color:
		rgba(255, 255, 255, .68);

	font-size: 7px;
	font-weight: 800;
	line-height: 1.2;

	text-overflow: ellipsis;
	white-space: nowrap;
}


.tr-online-store-hero__stage > small {
	display: block;

	overflow: hidden;

	margin-top: 4px;

	color:
		rgba(255, 255, 255, .24);

	font-size: 5px;
	line-height: 1.25;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* =========================================================
 * Rail
 * ======================================================= */

.tr-online-store-hero__rail {
	grid-column:
		1 / -1;

	display: flex;
	align-items: center;
	gap: 11px;

	margin-top:
		clamp(32px, 4vw, 50px);

	color:
		rgba(255, 255, 255, .18);

	font-size: 6px;
	font-weight: 850;
	letter-spacing: .1em;
}


.tr-online-store-hero__rail i {
	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .035),
			rgba(25, 224, 120, .23),
			rgba(255, 255, 255, .035)
		);
}


.tr-online-store-hero__rail strong {
	color:
		var(--tr-green);

	font-size: inherit;
	font-weight: inherit;
}


/* =========================================================
 * Laptop
 * ======================================================= */

@media (max-width: 1180px) {

	.tr-online-store-hero__shell {
		grid-template-columns:
			minmax(0, .9fr)
			minmax(430px, .78fr);

		gap: 45px;
	}


	.tr-online-store-hero__copy h1 {
		font-size:
			clamp(54px, 6vw, 82px);
	}


	.tr-online-store-hero__product--primary {
		width: 156px;
	}


	.tr-online-store-hero__product--secondary {
		left: 196px;
	}


	.tr-online-store-hero__product--tertiary {
		left: 205px;
	}


	.tr-online-store-hero__checkout {
		width: 138px;
	}

}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 960px) {

	.tr-online-store-hero {
		min-height: 0;
	}


	.tr-online-store-hero__shell {
		grid-template-columns: 1fr;

		width:
			min(100%, var(--tr-container));
	}


	.tr-online-store-hero__copy {
		max-width: 820px;
	}


	.tr-online-store-hero__visual {
		width: 100%;
		max-width: 720px;

		justify-self: end;

		transform:
			rotate(.5deg);
	}


	.tr-online-store-hero__store-stage {
		min-height: 330px;
	}


	.tr-online-store-hero__product--primary {
		width: 190px;
		height: 245px;
	}


	.tr-online-store-hero__product--primary > div {
		height: 182px;
	}


	.tr-online-store-hero__product--secondary {
		left: 240px;

		width: 142px;
		height: 168px;
	}


	.tr-online-store-hero__product--secondary > div {
		height: 123px;
	}


	.tr-online-store-hero__product--tertiary {
		left: 254px;
	}


	.tr-online-store-hero__checkout {
		width: 180px;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-online-store-hero {
		padding:
			112px
			16px
			58px;
	}


	.tr-online-store-hero__shell {
		gap: 42px;
	}


	.tr-online-store-hero__copy {
		padding: 0;
	}


	.tr-online-store-hero__copy h1 {
		font-size:
			clamp(50px, 14vw, 68px);
	}


	.tr-online-store-hero__copy > p {
		font-size: 14px;
	}


	.tr-online-store-hero__actions {
		align-items: flex-start;
		flex-direction: column;
	}


	.tr-online-store-hero .tr-online-store-hero__primary,
	.tr-online-store-hero .tr-online-store-hero__primary:hover,
	.tr-online-store-hero .tr-online-store-hero__primary:focus {
		width: 100%;
	}


	.tr-online-store-hero__visual {
		border-radius: 22px;

		transform: none;
	}


	.tr-online-store-hero__visual-title {
		grid-template-columns: 1fr;

		gap: 8px;
	}


	.tr-online-store-hero__storefront {
		padding: 16px;
	}


	.tr-online-store-hero__store-stage {
		min-height: 280px;
	}


	.tr-online-store-hero__product--primary {
		top: 28px;
		left: 18px;

		width: 132px;
		height: 190px;
	}


	.tr-online-store-hero__product--primary > div {
		height: 137px;
	}


	.tr-online-store-hero__product--secondary {
		top: 42px;
		left: 162px;

		width: 92px;
		height: 119px;
	}


	.tr-online-store-hero__product--secondary > div {
		height: 82px;
	}


	.tr-online-store-hero__product--tertiary {
		left: 166px;
		bottom: 24px;

		width: 88px;
	}


	.tr-online-store-hero__cart {
		top: 18px;
		right: 16px;

		width: 56px;
		height: 56px;
	}


	.tr-online-store-hero__cart strong {
		font-size: 16px;
	}


	.tr-online-store-hero__checkout {
		right: 16px;
		bottom: 22px;

		width: 118px;
		padding: 11px;
	}


	.tr-online-store-hero__stages {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.tr-online-store-hero__stage {
		border-bottom:
			1px solid rgba(255, 255, 255, .055);
	}


	.tr-online-store-hero__stage:nth-child(2n) {
		border-right: 0;
	}


	.tr-online-store-hero__stage:last-child {
		grid-column:
			1 / -1;

		border-bottom: 0;
	}


	.tr-online-store-hero__rail {
		display: none;
	}

}