/*-------------------------------------------------
-------------------------------------- | site.css |
-------------------------------------- |    v.1.0 |
---------------------------------------------------
/*------------------------------------ | reset | */
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; }
h1, h2, h3, h4, h5, h6, p, blockquote, address, cite, img, li, ol, ul,
fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	text-align:left; }
table {
	border-collapse:collapse;
	border-spacing:0;}
ol, ul { list-style:none; }
/*------------------------------------ | fonts | */
@font-face {
	font-family: "khand";
	src: url('../fonts/Khand-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal; }
@font-face {
	font-family: "khand";
	src: url('../fonts/Khand-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal; }
@font-face {
	font-family: "khand";
	src: url('../fonts/Khand-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal; }
@font-face {
	font-family: "khand";
	src: url('../fonts/Khand-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal; }
@font-face {
	font-family: "khand";
	src: url('../fonts/Khand-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal; }

/*-------------------------------- | variables | */
* {
	--bg-color: black;
	--bg-highlight: #0f0f0f;
	--font-main: #bbb;
	--font-link: #7fbcca;
	--max-width: 1200px;
	--border-color: #7fbcca48;
	--button-off: #243539;
	--button-on: #1b3e46;
}
/*----------------------------------- | shared | */
body {
	background-color: var(--bg-color);
	color: var(--font-main);
	font-family: "khand", sans-serif;
	font-size: 20px;
	z-index: 0;
	margin-top: 80px;
}
a {
	color: white;
	text-decoration: none;

	&:hover {
		color: var(--font-link);
	}
}
.button {
	background-color: var(--button-off) !important;
	color: var(--font-main) !important;
	border-radius: 6px !important;
	text-align: center !important;
	padding: 6px 20px !important;

	&:hover {
		background-color: var(--button-on) !important;
		color: white !important;
	}
}
main, .main {
	margin-bottom: 50px;
	p {
		margin-top: 1rem;
	}
	h1 {
		font-size: 3.5rem;
		font-weight: 700;
		line-height: 3rem;
		text-decoration: underline;
		text-decoration-thickness: 5px;
		text-decoration-color: var(--border-color);
		text-underline-offset: 10px;
		text-transform: uppercase;
		padding: 0;
		margin: 0;
	}
	h3 {
		margin: 1rem 0 -10px 0;
		color: var(--font-link);
		font-size: 1.75rem;
	}
	ul {
		list-style: disc;
		margin-top: 10px;
	}
	li {
		margin-left: 16px;
	}
}
.main-container {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
}
.dashicons {
	position: relative;
	display: block;
}
.dics-loader {
	margin: 0 auto;
	width: 14px;
	aspect-ratio: 1;
	border-radius: 50%;
	animation: l5 1s infinite linear alternate;
}
/*------------------------------- | navigation | */
.navigation-container {
	width: 100%;
	background-color: var(--bg-highlight);
	border-bottom: 1px solid var(--border-color);
	position: fixed;
	z-index: 9999;
	top: 0;
}
nav.base {
	position: relative;
	width: calc(100% - 40px);
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	z-index: 9999;

	.hamburger {
		position: relative;
        opacity: 0.85;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
		display: none;

        &:hover {
            cursor: pointer;
            opacity: 1;
        }
        & .line {
            width: 24px;
            height: 2px;
            background-color: white;
            display: block;
            margin: 4px auto;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
    }
	.hamburger.is-active {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .hamburger:before {
        content: "";
        position: absolute;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 24px;
        height: 24px;
        border: 0 solid transparent;
        top: calc(50% - 12px);
        left: calc(50% - 12px);
        border-radius: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .hamburger.is-active:before {
        border: 0 solid transparent;
    }
    .hamburger.is-active .line {
        width: 20px;
    }
    .hamburger.is-active .line:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active .line:nth-child(1) {
        -webkit-transform: translateY(13px);
        -ms-transform: translateY(13px);
        -o-transform: translateY(13px);
        transform: translateY(8.5px);
    }
    .hamburger.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-13px) rotate(90deg);
        -ms-transform: translateY(-13px) rotate(90deg);
        -o-transform: translateY(-13px) rotate(90deg);
        transform: translateY(-4px) rotate(90deg);
    }
	.site-title {
		font-weight: 700;
		cursor: pointer;
		transition: color 200ms ease-in-out;

		&:hover {
			color: white;
		}
	}
	.site-menu {
		display: flex;
		gap: 30px;
	}
	ul {
		display: flex;
		gap: 20px;

		.li-cart {
			position: relative;
			top: 3px;

			svg {
				position: absolute !important;
				pointer-events: none;
				top: -90px;
				right: -90px;
				transform: scale(2);
				
				circle { 
					fill: var(--font-link) !important;
				}
			}
		}
	}
	
	a {
		color: var(--font-link);
		text-decoration: none;

		&:hover {
			color: white;
		}
	}
}
/*------------------------------ | mobile menu | */
.menu-container {
    position: fixed !important;
    inset: 0;
    background-image: linear-gradient(180deg, #000 10%, #1c1c1c 90%);
    mask-image: url('../img/circle_mask.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 0 0;
    pointer-events: none;
    z-index: 9998;

    --scaling_factor: 200% 200%;
}
.menu-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-weight: 500;
    line-height: 5rem;
}
.menu-row {
    position: relative;
    font-size: 40px;
    color: var(--font-link);
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    z-index: 9999;
    transition: right 500ms ease-in-out, left 500ms ease-in-out, opacity 1500ms ease-in-out;

    &:hover {
        color: white;
    }
    &.left {
        left: 1500px;
    }
    &.right {
        right: 1500px;
    }
}
.menu-open {
    animation: grow 900ms forwards;
    pointer-events: all;

    .menu-row {
        opacity: 1;

        &.left { left: 0px; }
        &.right { right: 0px; }        
    }
}
.menu-close {
    animation: shrink 500ms forwards;
    pointer-events: none;

    .menu-row {
        opacity: 1;
        &.left { left: 0px; }
        &.right { right: 0px; }
    }
}
/*----------------------------- | hero section | */
.hero-container {
	display: flex;
	gap: 50px;
	align-items: center;
	width: calc(100% - 40px);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 30px 20px 50px 20px;
}
.hero-logo {
	all: unset;
	aspect-ratio: 1/1;
	width: 500px;
	opacity: 0.8;
	align-self: start;
	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

	&:hover {
		opacity: 1;
		animation: spinspin 1s infinite;
		animation-timing-function: linear;
	}
}
.hero-blurb {
	font-size: 2.15rem;
	line-height: 2.85rem;

	p {
		font-weight: 300;
	}
	strong {
		font-weight: 600;
	}
}
/*----------------------- | callout below hero | */
.callout-container {
	width: calc(100% - 100px);
	padding: 50px 50px 100px 50px;
	border-bottom: 1px solid var(--border-color);

}
.callout {
	font-size: 3rem;
	color: var(--font-link);
	line-height: 3rem;
	text-align: center;
	flex-direction: column;

	.sub {
		font-size: 1.5rem;
		color: var(--border-color);
		line-height: 1.5rem !important;
	}
}
/*------------------------------ | sports list | */
.sports-container {
	width: calc(100% - 40px);
	background-image: url('../img/bg_jersey-black.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid var(--border-color);
	padding: 130px 20px 150px 20px;
}
.sports-title {
	width: 100%;
	font-size: 80px;
	font-weight: 700;
	line-height: 4.5rem;
	text-decoration: underline;
	text-decoration-thickness: 10px;
	text-decoration-color: var(--border-color);
	text-underline-offset: 20px;
	text-align: center;
}
.sports-content {
	width: calc(100% - 40px);
	max-width: var(--max-width);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	align-items: stretch;
	margin: 0 auto;
	margin-top: 80px;
}
.sport {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	text-align: center;
	background-color: black;
	border: 1px solid rgba(127, 188, 202, 0.18);
	border-radius: 10px;
	overflow: hidden;

	&.is-active {
		box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.08);
	}
	& img {
		aspect-ratio: 1/1;
		width: 100%;
	}
	& a {
		padding: 10px 20px;
		margin: 10px 20px 40px 20px;
		text-transform: uppercase;

		&:hover {
			background-color: var(--button-on);
			color: white;
		}
	}
	& .title {
		padding: 30px 0 20px 0;
		font-size: 26px;
		font-weight: 500;
		color: var(--font-link);
	}
	& .blurb {
		background-color: black;
		padding: 0px 20px;
		height: 150px;
	}
}
/*------------------------------- | swag/merch | */
.swag-container {
	display: flex;
	justify-content: center;
	width: calc(100% - 40px);
	max-width: 1200px;
	padding: 150px 20px;
	margin: 0 auto;
}
.swag-bag {
	display: flex;
	flex-direction: column;
	align-self: center;
}
.swag-title {
	font-size: 80px;
	font-weight: 700;
	line-height: 4.5rem;
	text-decoration: underline;
	text-decoration-thickness: 10px;
	text-decoration-color: var(--border-color);
	text-underline-offset: 20px;
	padding: 0 0 0 0;
	margin-bottom: 50px;
}
.swag-blurb {
	font-size: 30px;
}
.swag-link {
	margin-top: 20px;
	width: 200px;
}
.swag-images {
	text-align: center;

	.swag-image {
		position: relative;
		opacity: 0;
		transition: opacity 500ms ease-in-out;
		
		&.si-2 { margin-top: -500px; }
		&.si-3 { margin-top: -500px; }
		&.si-visible {
			opacity: 1;
		}
	}
	img { width: 500px; }
}
/*---------------------------------- | contact | */
/* main page */
.contact-container {
	width: calc(100% - 40px);
	background-image: url('../img/bg_grassy.jpg');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	border-top: 1px solid var(--border-color);
	padding: 150px 20px;
}
.contact-center {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.contact-info {
	min-width: 400px;
	font-size: 30px;
}
.contact-form {
	width: calc(100% - 100px);
	background-color: rgba(0, 0, 0, 0.5);
	padding: 50px;
	border-radius: 10px;
	border: 1px solid var(--border-color);

	label {
		font-size: 24px !important;
		font-weight: 600 !important;
		color: var(--font-link) !important;
	}
	input, textarea {
		background-color: #000 !important;
		border: 1px solid var(--border-color) !important;
		color: white !important;
		font-size: 24px !important;
		padding: 6px !important;
	}
	textarea {
		padding-top: 10px !important;
	}
	button {
		font-size: unset !important;
		padding: 10px 20px 8px 20px !important;
	}
}
.contact-title {
	font-size: 80px;
	font-weight: 700;
	line-height: 4.5rem;
	text-decoration: underline;
	text-decoration-thickness: 10px;
	text-decoration-color: var(--border-color);
	text-underline-offset: 20px;
	padding: 0 0 0 0;
	margin-bottom: 50px;
}
/* contact page */
.contact-page main {
	.contact-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
	}
	p {
		font-size: 30px;
	}
	.contact-info {
		margin-top: 20px;
	}
	.contact-form {
		background-color: #1c1c1c;
		position: relative;
	}
}
.forminator-error-message {
	background-color: transparent !important;
	font-size: 16px !important;
	font-weight: 500;
	padding: 0 !important;
	margin: 0px !important;
	margin-bottom: -20px !important;
}
.forminator-response-message.forminator-success,
.forminator-response-message.forminator-loading {
	background-color: transparent !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	padding: 0 0 0 6px !important;
	color: var(--font-link) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	border-radius: 0 !important;
	border-left: 2px solid var(--wc-primary);
}
.forminator-response-message.forminator-loading {
	p {
		color: var(--font-link) !important;
		font-size: 20px !important;
		font-weight: 500 !important;
	}
	&:before {
		top: 3px !important;
		left: -34px !important;
		font-size: 24px !important;
	}
}
/*--------------------------------------| shop | */
.shop-container {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 20px 20px;

	.woocommerce-ordering {
		display: none;
	}
}
.shop-header {
	padding: 30px 0;
	text-align: center;
}
.shop-title p {
	font-size: 60px;
	font-weight: 700;
	line-height: 3rem;
	text-transform: uppercase;
	padding: 0 0 20px 0;
	text-align: center;
}
.shop-categories select {
	padding: 10px;
	min-width: 250px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background-color: var(--button-off);
	color: white;
}
.shop-container main ul,
.prod-related ul,
.featured-products ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;

	.button {
		display: flex !important;
		justify-content: center;
		align-items: center !important;
		width: calc(100% - 40px);
		height: 34px;
		font-weight: 500;
	}
	
	a:not(.button) {
		
		.woocommerce-loop-product__title {
			font-weight: 500 !important;
		}
		span.price {
			font-size: 2rem !important;
			color: var(--font-link) !important;
			padding: 0 !important;
			margin: 0 !important;
		}
	}
	li {
		all: unset !important;
		border: 0 !important;
		background-color: #1c1c1ca9 !important;
		border-radius: 6px !important;
		padding: 20px !important;
		display: flex !important;
		flex-direction: column !important;
		flex-grow: 1;
		height: calc(100% - 40px) !important;
		
		img { transition: transform 100ms ease-in-out; }

		a:first-child span.price {
			margin: -6px 0 20px 0 !important;
		}
		a:nth-child(2) {
			align-self: center !important;
			margin-top: auto !important;
		}
		&:hover {
			
			img {
				transform: scale(1.1) !important;
			}
	
			h2, .rp-title, .op-title { color: white !important; }
		}
	}
	
	h2 {
		all: unset !important;
	}
	&:before {
		all: unset !important;
	}
}
.added_to_cart {
	padding-top: 10px !important;
}
/*-----------------------| single product page | */
.prod-container {
	position: relative;
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px 50px 20px;
	display: flex;
	gap: 50px;
}
.prod-images {
	width: 100%;
	max-width: 500px;
	/* background-color: #0c0c0c;
	border: 1px solid var(--border-color);
	border-radius: 10px; */

	img {
		width: 100% !important;
		height: auto !important;
	}
}
.prod-details {
	position: relative;

	.prod-cat {
		padding: 0px 0px 0px 0px;
		color: var(--font-link);
		font-size: 16px;
	}
	.prod-title {
		font-size: 40px;
		font-weight: 500;
		line-height: 3rem;
		color: white;
		/* text-decoration: underline;
		text-decoration-thickness: 4px;
		text-decoration-color: var(--border-color);
		text-underline-offset: 15px; */
		padding: 0;
		margin: 0;
	}
	.prod-desc {
		padding: 15px 0 30px 0;
		line-height: 1.75rem;
	}
	.prod-price {
		font-size: 40px;
		margin-top: -10px;
		color: var(--font-link);
	}
	.cart .quantity {
		display: none;
	}
	.prod-qty-atc {
		display: flex;
		gap: 20px;

		form button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200px;
			height: 44px;
		}
	}
	.prod-qty {
		position: relative;
		display: grid;
		grid-template-columns: 30px 50px 30px;
		align-content: center;
		justify-content: center;
		gap: 1px;
		text-align: center;
		border-radius: 6px;
		overflow: hidden;
		padding: 0;
		margin: 0;

		.qty-sub, .qty-add {
			display: flex;
			background-color: var(--button-off);
			justify-content: center;
			align-items: center;
			user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;

			&:hover {
				cursor: pointer;
				background-color: var(--button-on);
				color: white;
			}
		}
		.qty-qty {
			input {
				width: calc(100% - 3px);
				height: 40px;
				background-color: rgb(0, 0, 0);
				border: 0;
				border: 1px solid var(--border-color);
				text-align: center;
				color: white;
				padding: 0;
				margin: 0;
				padding-right: 1px;
				font-size: 20px;
				font-family: Khand, sans-serif;

				&:focus, &:active {
					outline: 0;
				}
			}
		}
	}
	button {
		background-color: var(--button-off) !important;
		color: var(--font-main) !important;
		border-radius: 6px !important;
		text-align: center !important;
		/* padding: 9px 40px 6px 40px !important; */
		font-family: "Khand", sans-serif;
		font-weight: 500;
		font-size: 1.25rem;

		&:hover {
			background-color: var(--button-on) !important;
			color: white !important;
			cursor: pointer;
		}
	}
}
.prod-related {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px;

	
	h3 {
		font-size: 26px;
		font-weight: 500;
		color: var(--font-link);
		margin-bottom: 20px;
	}
	img {
		width: 100% !important;
		height: auto !important;
	}
	.rp-price {
		color: var(--font-link);
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 20px;
	}
}
.rp-a2c-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px !important;
	background-color: var(--button-off);
	color: var(--font-main);
	border-radius: 6px !important;
	text-align: center !important;
	font-weight: 500;

	&:hover {
		background-color: var(--button-on) !important;
		color: white !important;
	}
}
/*------------------------------- | media page | */
.media-container {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	align-items: start;
	margin-top: 30px;
	
	h2 {
		font-size: 2.5rem;
		font-weight: 500;
		margin: 0px 0 -6px 0;
	}
	small {
		font-weight: 500;
		color: var(--font-link);
	}
	.blog-content p {
		margin: 30px 0;
	}
}
.media-left {
	width: 100%;
}
.media-right {
	width: 100%;
	background-color: #1c1c1c;
	border-radius: 10px;
	grid-auto-rows: auto;
	overflow: hidden;


	.blog-updates {
	}
	.blog-link {
		line-height: 22px;
		padding: 16px 20px 16px 20px;
		border-bottom: 1px solid black;
		transition: background-color 150ms ease-in-out;

		&:hover {
			background-color: #1b3e46;
			cursor: pointer;
		}

	}
	.blog-link:first-of-type {
		margin-top: -10px;
	}
	.blog-list-date {
		font-size: 16px;
		font-weight: 500;
		color: var(--font-link);
	}
	.blog-list-title {
		padding: 0 0 10px 4px;

		a {
			font-size: 20px;
			font-weight: 300;

			&:hover {
				color: white;
			}
		}
	}
	h3 {
		margin: 0;
		padding: 20px;
		color: var(--font-link);
	}
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
	border-radius: 10px;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
/*------------------------------------- | cart | */
.wc-block-cart {
	display: grid !important;
	grid-template-columns: auto 300px;
	gap: 50px;

	.wc-block-components-main {
		all: unset !important;

		.price {
			color: var(--font-link);
		}
		table {

			thead { display: none; }
			tbody {
				
				tr:not(:last-child) {
					border-bottom: 0.125rem solid #ffffff17
				}
				img {
					max-width: 200px;
				}
			}

			.wc-block-cart-item__quantity {
				
				button {
					background-color: var(--button-off);
				}
				input {
					border: 1px solid var(--button-off);
					margin: 0 1px;
				}
			}
		}
	}
	.wc-block-components-sidebar {
		all: unset !important;
		
		.wc-block-cart__totals-title {
			/* display: none !important; */
			font-size: 1.5rem !important;
			text-align: center !important;
			border-bottom: 1px dashed var(--border-color) !important;
		}
		.wp-block-woocommerce-cart-order-summary-block {
			display: flex;
			flex-direction: column;
			background-color: #1c1c1c;
			border-radius: 10px 10px 0 0;
			padding: 10px;

			.wp-block-woocommerce-cart-order-summary-coupon-form-block {
				display: none;
			}
			.wp-block-woocommerce-cart-order-summary-totals-block {
				padding-top: 10px;
			}
		}
		
		a, button {
			background-color: var(--button-off);
			color: var(--font-main);
			padding: 10px;
			border-radius: 0 0 10px 10px;

			&:hover {
				background-color: var(--button-on);
				color: white;
			}
			&:focus, &:active { outline: 0; border: 0; box-shadow: none; }
		}
		button {
			font-family: Khand, sans-serif !important;
			opacity: 0.5;
			cursor: not-allowed;

			&:focus, &:active { outline: 0; border: 0; box-shadow: none; }
		}
	}
}
main.cart .wp-block-woocommerce-empty-cart-block {
	.wc-block-product-new,
	h2:not(:first-child), hr { display: none; }
	.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
		background-color: var(--border-color);
	}
}
main.other-products {
	
	.op-price {
		color: var(--font-link);
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 20px;
	}
	h3 { margin-bottom: 10px; }
	img {
		max-width: 100%;
		height: auto;
	}
}
.wp-block-woocommerce-cart {
	margin-top: 30px;
}
/*--------------------------------- | checkout | */
.wp-block-woocommerce-checkout {

	input, textarea {
		background-color: #151515 !important;
		color: white !important;
		border: 1px solid var(--border-color) !important;
	}
	label {
		color: var(--font-link) !important;
	}
	h2 {
		color: var(--font-link) !important;
	}
	.wc-block-checkout__no-payment-methods-notice {
		background-color: transparent !important;
		border-color: transparent !important;
	}
	.wp-block-woocommerce-checkout-order-summary-block {
		background-color: #1c1c1c;
		border-radius: 10px;
		overflow: hidden;

		.wc-block-components-product-name {
			color: white;
		}
		span.price {
			color: var(--font-link);
			margin-top: -6px;
		}
		.wc-block-formatted-money-amount {
			color: var(--font-link);
		}
		.wc-block-components-order-summary-item__quantity {
			border: 0;
			padding: 0;
			box-shadow: none;
			font-size: 12px;
			font-weight: 500;
			color: var(--button-on);
		}
		.wc-block-components-order-summary-item {
			border-bottom: 1px dashed var(--border-color);
		}
		.wc-block-components-product-metadata {
			display: none;
		}
		.wp-block-woocommerce-checkout-order-summary-totals-block, .wc-block-components-totals-wrapper:last-child {
			background-color: #333;
		}
	}
	.wc-block-components-checkbox__mark {
		fill: var(--font-link) !important;
	}
	.wc-block-checkout__actions_row button, form button {
		background-color: var(--button-off);
		border-radius: 6px;
		color: var(--font-main);
		font-family: Khand, sans-serif;
		font-size: 26px;
		font-weight: 600;
		padding: 10px;

		&:hover {
			background-color: var(--button-on);
			color: white;
		}
	}
}
/*----------------------------------- | footer | */
.footer-container {
	width: 100%;
	height: 150px;
	background-image: url('../img/bg_footer.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
	border-top: 1px solid var(--border-color);
}
.footer-content {
	width: calc(100% - 20px);
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0px;
	padding: 0 10px;
}
.footer-links {
	display: flex;
	gap: 20px;

	a {
		font-weight: 300;
		color: var(--font-link);

		&:hover {
			color: white;
		}
	}
}
/*---------------------------------- | notices | */
.woocommerce-notices-wrapper {
	display: none;
}
.woocommerce-message {
	background-color: #ffffff1c;
	color: var(--font-main);
	border-top-color: #46a23e;

	&:before {
		color: #46a23e;
	}
}
/*------------------------------- | animations | */
@keyframes spinspin {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(-15deg); }
	75% { transform: rotate(15deg); }
	/* 100% { transform: rotate(0deg); } */}
@keyframes grow {
    100% { mask-size: var(--scaling_factor); }}

@keyframes shrink {
    0% { mask-size: 200% 200%; }
    100% { mask-size: 0 0; }}
@keyframes l5 {
	0%  {box-shadow: 20px 0 #fff, -20px 0 #fff2;background: #fff }
	33% {box-shadow: 20px 0 #fff, -20px 0 #fff2;background: #fff2}
	66% {box-shadow: 20px 0 #fff2,-20px 0 #fff; background: #fff2}
	100%{box-shadow: 20px 0 #fff2,-20px 0 #fff; background: #fff }}
/*------------------------------- | responsive | */
@media screen and (max-width: 1100px) {
	.hero-logo { width: 400px; }
	.hero-blurb { font-size: 1.85rem; line-height: 2rem; }}
@media screen and (max-width: 870px) {
	.contact-page main {
		.contact-content {
			grid-template-columns: 300px auto;
			.contact-info { min-width: 100%; }
		}
	}
	.shop-container main ul, main.other-products ul {
		grid-template-columns: repeat(3, 1fr);
	}
	.hero-logo { width: 300px; }
	.hero-blurb {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.sports-content {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.sport {
		max-width: 500px;
	}
	.sports-container {
		background-size: unset;
		background-repeat: repeat-y;
	}
	.swag-container {
		flex-direction: column;
		text-align: center;

		.swag-bag { padding: 0 50px; }
		.swag-link {
			margin: 0 auto;
			margin-top: 30px;
		}
		.swag-image {
			margin-top: 40px;
		}
	}
	.contact-center {
		grid-template-columns: 1fr;

		.contact-info { text-align: center; }
	}}
@media screen and (max-width: 768px) {
	.media-container {
		grid-template-columns: 1fr;
	}
	.contact-page main {
		.contact-content {
			grid-template-columns: 1fr;
		}
	}
	.prod-container {
		flex-direction: column;

		.prod-images { margin: 0 auto; }
	}
	.prod-related ul {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-content {
		flex-direction: column;
		justify-content: center;
	}
	.wc-block-cart {
		grid-template-columns: auto 200px;
	}
	.wp-block-woocommerce-cart-order-summary-block {
		padding: 10px 20px !important;
	}
	.hero-container {
		flex-direction: column;
		width: calc(100% - 80px);
		padding-top: 0 !important;
	}
	.hero-logo {
		width: calc(100% - 50px);
		align-self: center;
	}
	.hero-blurb {
		font-size: 2rem;
		line-height: 2rem;

		p { text-align: justify; }
	}}
@media screen and (max-width: 600px) {
	.wc-block-components-sidebar-layout {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;

		.wc-block-components-sidebar {
			flex-basis: 100% !important;
		}
	}
	.shop-container main ul, main.other-products ul {
		grid-template-columns: repeat(2, 1fr);
	}
	.menu-container.menu-open {
        --scaling_factor: 300% 300%;
	}
	.li-cart { top: 0px !important; }
	nav ul li {
		&:not(.li-cart) { display: none; }
		a {
			color: white !important;
			opacity: 0.85;
			transition: opacity 200ms ease-in-out;

			&:hover { opacity: 1; }
		}
	}
	.hamburger { display: block !important; }
	.si-2 { margin-top: -400px; }
	.si-3 { margin-top: -400px; }
	.swag-image {
		img { width: 400px; }
		&.si-2 { margin-top: -400px !important; }
		&.si-3 { margin-top: -400px !important; }}}
@media screen and (max-width: 420px) {
	.prod-related ul, main.other-products ul {
		grid-template-columns: 1fr;
	}
	.footer-content {
		font-size: 16px;
	}
	.shop-container main ul {
		grid-template-columns: repeat(1, 1fr);
	}
	.contact-form {
		width: calc(100% - 40px);
		padding: 20px !important;
	}
	.contact-info { min-width: unset; }
	.swag-image {
		img { width: 300px; }
		&.si-2 { margin-top: -300px !important; }
		&.si-3 { margin-top: -300px !important; }
	}
	.menu-container.menu-open {
        --scaling_factor: 400% 400%;
    }}