:root {
	--black1: #1f1f1f;
	--black2: #474747;
	--black3: #787878;
	--red1: #a80000;
	--red2: #731010;
	--yellow2: rgb(255, 218, 137);
	--gold: rgba(245, 167, 0, 0.725);
	--med: rgb(75, 75, 75);
	--light: rgba(226, 226, 226, 0.9);
	--blue1: rgb(45, 105, 255);
	--blue2: rgb(0, 153, 255);
}

* {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
}

body {
	font-family: sans-serif;
	display: grid;
	grid-template-rows: 4.5rem calc(100vh - 4.5rem);
	background: linear-gradient(var(--black1) 50%, var(--black2));
	color: var(--light);
	position: relative;
	max-height: 100vh;
}

.header {
	display: grid;
	grid-row: 1/2;
	grid-column: 1/-1;
	}

	.navbar{
		display: grid;
		grid-template-columns: max-content auto;
		}

		.navbar-home {
			justify-self: left;
			z-index: 10;
			}

			.nhl-logo {
				padding: .5rem 1rem;
				width: 100%;
				object-fit: cover;
				max-width: 15rem;
				margin: 1rem;
				box-shadow: 0 -.1rem 0.25rem var(--black3);
				background: linear-gradient(var(--black1) 50%, var(--black2));
				border-radius: 2px;
				}

				@media only screen and (max-width: 23.125em){
					.nhl-logo {
						width: 12rem;
					}
				}

		.navbar-items {
			display: grid;
			row-gap: 1rem;
			margin: 1rem 1.7rem 0 0;
			grid-template-columns: repeat(auto-fit, 7rem);
			align-content: center;
			justify-content: right;
			}

			@media only screen and (max-width: 50em){
				.navbar-items {
					grid-template-columns: repeat(4, 7rem);
				}
			}

			@media only screen and (max-width: 29.6875em){
				.navbar-items {
					grid-template-columns: repeat(2, 7rem);
				}
			}

			.ni-link {
				text-decoration: none;
				color: var(--light);
				z-index: 10;
			}

			.nil-text {
				display: grid;
				height: 100%;
				align-items: center;
				text-align: center;
				padding: .5rem .75rem;
				box-shadow: 0 -.1rem 0.25rem var(--black3);
				background-color: var(--med);
			}

			.orders {
				background: linear-gradient(var(--black1) 50%, var(--black2));
				border: 1px solid var(--red2);
				margin-left: .75rem;
				padding: .5rem .1rem;
			}

			.nil-text:hover {
				background: linear-gradient(var(--black2) 90%, var(--red2));
				transform: scale(1.05);
			}

.content-wrapper {
	overflow-y: auto;
	grid-row: 1/-1;
	grid-column: 1/2;
	max-width: 100vw;
	max-height: 100vh;
}

.footer {
	display: grid;
	background: linear-gradient(var(--black1) 50%, var(--black2));
	justify-content: center;
	align-content: center;
	height: 7rem;
	}

	.contactEmail {
		display: grid;
		padding: 1.5rem;
		text-decoration: none;
		color: var(--light);
	}

	.socials-wrapper {
		display: grid;
		row-gap: 1rem;
		position: absolute;
		left: .5rem;
		bottom: .5rem;
		z-index: 10;
		}

		.socials-item {
			display: grid;
			justify-items: center;
		}

		.fbk {
			height: 2.5rem;
		}

		.cart-wrapper {
			padding: .5rem 1rem;
			color: var(--light);
			text-decoration: none;
			border-radius: 2px;
			box-shadow: 0 0rem 0.25rem var(--yellow2);
			border: solid 1px var(--black1);
			background: var(--black1);
			position: relative;
			}

			.cart-position {
				display: grid;
				row-gap: 1rem;
				position: absolute;
				right: 2rem;
				bottom: .5rem;
				max-height: 30vh;
				overflow-y: auto;
				overflow-x: hidden;
				z-index: 10;
			}

			.bundle-msg {
				color: var(--blue2);
				display: grid;
				row-gap: .5rem;
				position: absolute;
				bottom: 32vh;
				right: 2rem;
				width: 10rem;
				font-size: 1.2rem;
				font-weight: 600;
				background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 5%, rgba(0, 0, 0) 50%);
				border-radius: 2px;
				padding: 1rem;
				z-index: 20;
			}

			.msg-txt {
				text-align: end;
			}

			.msg-grand {
				text-align: end;
				font-size: 2rem;
			}

			.cart-focus {
				display: grid;
				row-gap: 2rem;
				position: absolute;
				font-size: 1.15rem;
				transform: translate(-50%, -50%);
				top: 50vh;
				left: 50vw;
				max-height: 90vh;
				max-width: 90vw;
				object-fit: contain;
				overflow-y: auto;
				border: solid 1px var(--red2);
				border-radius: 5px;
				box-shadow: 0 0 1.5rem var(--light);
				padding: 3rem;
				z-index: 10;
			}

			.c-heading {
				display: grid;
				grid-template-columns: auto auto;
				font-size: 1.25rem;
				height: 2.5rem;
				align-items: center;
				justify-self: center;
				border-bottom: solid 1px var(--black2);
				justify-content: center;
				grid-column-gap: 1rem;
				width: max-content;
				cursor: pointer;
			}

			.c-heading-focus {
				cursor: initial;
				border-bottom: none;
			}

			.ch-text {
				font-size: 1.75rem;
				padding-right: 2rem;
			}

			.c-size {
				height: 1.5rem;
			}
			.c-size-focus {
				height: 2.25rem;
			}

			.c-stroke{
				stroke: var(--black3);
				stroke-width: 1.0583;
			}

			.cart {
				display: grid;
				row-gap: 1rem;
			}

			.c-data {
				display: grid;
				row-gap: 0.25rem;
			}
			.c-data-focus {
				row-gap: 1.25rem;
			}

			.c-section {
				display: grid;
				row-gap: .5rem;
				padding: .5rem 0;
			}
			
			.c-data-section-focus {
				row-gap: 1rem;
			}

			.cs-title {
				text-decoration: none;
				color: var(--light);
				width: max-content;
			}

			.cst-text {
				border-bottom: solid 1px var(--black2);
			}

			.cst-quantity {
				justify-self: end;
			}

			.cs-items {
				display: grid;
				margin: 0 .5rem 0;
				row-gap: 0.15rem;
			}

			.cs-items-focus {
				row-gap: 0.75rem;
			}
		
			.csi-row {
				display: grid;
				grid-template-columns: max-content minmax(5rem, 90%) minmax(3rem, max-content);
				column-gap: 1.25rem;
				background: linear-gradient(to right, var(--black1), rgb(40, 40, 40), var(--black1));
			}

			.row-quantity {
				justify-self: end;
			}

			.row-price{
				justify-self: end;
			}

			.cc-total {
				margin-bottom: .5rem;
				text-align: center;
				font-size: 1.15rem;
			}
			
			.cc-total-focus {
				font-size: 1.5rem;
			}

			#checkout {
				display: grid;
			}

			.checkout-btn {
				display: grid;
				font-size: 1.5rem;
				padding: 1rem;
				width: 17rem;
				justify-self: center;
				justify-items: center;
				background-color: var(--black3);
				border-radius: 2px;
				align-self: center;
				text-decoration: none;
				color: var(--light);
			}

/* === Account / Nav extensions === */

.navbar-account {
	display: grid;
	grid-template-columns: max-content max-content max-content;
	gap: 0.8rem;
	align-items: center;
	margin: 1rem 1.7rem 0 0;
	justify-self: right;
	z-index: 10;
}

.nav-username {
	font-size: 1.1rem;
	color: var(--light);
}

.nav-lc-balance {
	font-size: 1.1rem;
	color: var(--gold);
	font-weight: 600;
	white-space: nowrap;
}

.nav-logout, .nav-login-link {
	font-size: 1.1rem;
	color: var(--blue2);
	text-decoration: none;
	cursor: pointer;
}

.nav-logout:hover, .nav-login-link:hover {
	text-decoration: underline;
}

.nav-orders-link {
	font-size: 1.1rem;
	color: var(--light);
	text-decoration: none;
	white-space: nowrap;
}

.nav-orders-link:hover {
	color: var(--gold);
}

/* Price LC display */
.price-lc {
	color: var(--gold);
	font-weight: 600;
}

.lc-unit {
	font-size: 0.7em;
	margin-left: 0.2em;
}

/* Recharge button (coming soon) */
.recharge-btn {
	background: var(--black2);
	border: solid 1px var(--black2);
	border-radius: 4px;
	color: var(--black3);
	font-size: 1rem;
	padding: 0.3rem 0.8rem;
	cursor: not-allowed;
	white-space: nowrap;
}

/* Navbar with account - adjust grid */
.navbar-with-account {
	grid-template-columns: max-content auto max-content;
}