/**************/
/* CSS REMEDY */
/**************/
*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Albert Sans', sans-serif;
}






/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	/* startje */
	--color-text: #111;
	--color-background: #eee;
	--padding-small: .625em;
	--padding-big: 1.25em;
	--element-height: 3.75em;
	--border-color: rgb(245 245 245);
	--border-default: 1px solid var(--border-color);
	--transition-time: .25s;
	--transition-time-2: 2s;
	--transition-default: all var(--transition-time) cubic-bezier(.215, .61, .355, 1);
	--font-weight-thin: 100;
	--font-weight-medium: 300;
	--font-weight-heavy: 600;
	--font-size-default: 1em;
}

/* Bron: chatGPT https://chat.openai.com/*/
@media (prefers-reduced-motion: reduce) {
	:root {
	--transition-time: 0s;
	--transition-time-2: 0s;
	}
}

@media (prefers-contrast: more) {
	:root {
	--border-color: black;
	}
}

/* Bron: https://mgearon.com/css/text-selection-color/#:~:text=%3A%3Aselection%20%E2%80%93%20Change%20text%20selection%20color&text=The%20CSS%20pseudo%2Delement%20%3A%3A,background%2Dcolor */
::selection {
	background: black;
	color: white;
}

/****************/
/* JOUW STYLING */
/****************/
/* Bron: gesprek met studentassistent */
h1 {
	position: absolute;
	left: -1000000vw;
}


/* HEADER */
header {
	height: var(--element-height);
	width: 100%;
	border-bottom: var(--border-default);
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

header > a {
	margin-left: var(--padding-small);
	display: flex;
	height: var(--element-height);
	width: fit-content;
	justify-content: center;
	align-items: center;
}

header > a:first-of-type img {
	height: 2.5em;
}

header > ul {
	list-style: none;
	display: flex;
}

header > ul li {
	height: var(--element-height);
	width: auto;
}

header > ul li button {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border: none;
}

header > ul li button img {
	height: var(--padding-big);
	margin: 0 var(--padding-small);
}

header > nav {
	margin-top: var(--element-height);
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	max-height: 0;
	height: auto;
	background-color: white;
	width: 100%;
	height: 100vh;
	transition: var(--transition-default);
}

header > nav.menuOpen {
	max-height: 100vh;
}

header nav ul li > button {
	padding-left: var(--padding-small);
	width: 100%;
	text-align: left;
	text-transform: uppercase;
	font-weight: var(--font-weight-thin);
	border: none;
	background-color: transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header nav ul li > button img {
	height: var(--padding-small);
	margin-right: var(--padding-small);
	transform: rotate(0deg);
	transition: var(--transition-default);
}

header nav ul li > button img.openTurnArrow {
	transform: rotate(-180deg);
}

header nav ul li ul {
	list-style: none;
}

header nav ul li ul li {
	margin-bottom: var(--padding-small);
	margin-left: var(--padding-big);
}

header nav ul li ul li a {
	text-transform: uppercase;
	text-decoration: none;
	color: black;
	font-weight: var(--font-weight-heavy);
}

header nav > ul li button {
	line-height: 3em;
	font-size: var(--font-size-default);
}

header nav > ul > li {
	border-bottom: var(--border-default);
}

header nav > ul > li > a {
	display: block;
	text-transform: uppercase;
	height: 100%;
	line-height: 3em;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	width: 100%;
	color: black;
	text-decoration: none;
}

/* Bron: Cubic bezier generator https://cubic-bezier.com/ */
header nav ul li ul:first-of-type {
	height: auto;
	max-height: 0;
	overflow: hidden;
	transition-duration: var(--transition-time-2);
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transition-delay: 0s;
	transition-property: all;
}

header nav ul li ul:first-of-type.listGroupOpen {
	max-height: 100vh;
	padding-top: 0;
	padding-bottom: 0;
}

header section:first-of-type {
	height: var(--element-height);
	width: 100vw;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	background-color: white;
	position: fixed;
	top: var(--element-height);
	left: 0;
	border-bottom: var(--border-default);
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
}

header section:first-of-type img {
	height: var(--padding-big);
}

header section:first-of-type input {
	margin-left: var(--padding-big);
	width: 100%;
	border: none;
	background-color: transparent;
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	height: 100%;
	color: black;
}

header section:first-of-type input:focus {
	outline: none;
}

header section:first-of-type button {
	background-color: transparent;
	border: none;
	margin-left: var(--padding-small);
	text-transform: uppercase;
	color: black;
	font-weight: var(--font-weight-heavy);
}


body.menuOpenNoScroll {
	overflow: hidden;
}

header section:first-of-type.searchBarOpen {
	opacity: 1;
	pointer-events: all;
}

header section:nth-of-type(2) {
	z-index: 99;
	position: fixed;
	top: 0;
	right: -100%;
	height: 100vh;
	width: 100vw;
	background-color: white;
	transition: right var(--transition-time) cubic-bezier(.215, .61, .355, 1);
}

header section:nth-of-type(2).shopCartOpen {
	right: 0;
}

header section:nth-of-type(2) div {
	height: var(--element-height);
	width: 100vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: var(--border-default);
}

header section:nth-of-type(2) div h2 {
	text-transform: uppercase;
	font-size: var(--font-size-default);
	text-decoration: underline;
	margin-left: var(--padding-small);
}

header section:nth-of-type(2) div button {
	height: 100%;
	display: flex;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
}

header section:nth-of-type(2) div button img {
	height: var(--padding-big);
}

header section:nth-of-type(2) > button {
	position: absolute;
	bottom: 0;
	background-color: black;
	text-align: center;
	font-size: var(--font-size-default);
	height: var(--element-height);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-transform: uppercase;
	border: none;
	font-weight: var(--font-weight-heavy);
}

header section:nth-of-type(2) p {
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	font-size: .75em;
}

header section:nth-of-type(2) p:first-of-type {
	margin-top: var(--padding-big);
}

/* MAIN */
main {
	padding-top: var(--element-height);
}

main section:first-of-type {
	width: 100vw;
	padding: var(--padding-small);
	height: calc(100vh - var(--element-height));
	border-bottom: var(--border-default);
}

main section:first-of-type a {
	text-decoration: none;
}

main section:first-of-type figure {
	width: 100%;
	height: calc(100% - 2.5em);
	display: flex;
}

main section:first-of-type figure img {
	object-fit: cover;
	height: auto;
	width: 100%;
}

main section:first-of-type a h2 {
	background-color: black;
	text-align: center;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	font-size: var(--font-size-default);
	height: 2.5em;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-transform: uppercase;
}

main > div:first-of-type {
	position: fixed;
	background-color: #111;
	z-index: 1;
	opacity: 0;
	top: 0;
	pointer-events: none;
	left: 0;
	width: 100%;
	height: 100%;
	transition: var(--transition-default);
}

main > div:first-of-type.activeBackground {
	position: fixed;
	background-color: #111;
	z-index: 1;
	opacity: 0.6;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
}

.tees main > section:first-of-type {
	height: var(--element-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

.tees main > section:first-of-type h2 {
	text-transform: uppercase;
	font-size: var(--font-size-default);
	margin-left: var(--padding-small);
}

.tees main > section:first-of-type button {
	height: 100%;
	margin: 0;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	text-transform: uppercase;
	background-color: transparent;
	border: none;
}

.tees main.noScrollFiterOpen {
	overflow: hidden;
}

.tees footer.noScrollFiterOpen {
	overflow: hidden;
}

/* FOOTER */


footer section:nth-of-type(3) ul {
	display: flex;
	list-style: none;
}

footer section:nth-of-type(3) ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
}

/* Bron: MDN https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio */
footer section:nth-of-type(3) ul li a img {
	height: 0.75em;
	width: auto;
	aspect-ratio: 1/1;
}



footer section:first-of-type {
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	padding-top: var(--padding-big);
	padding-bottom: var(--padding-big);
	border-bottom: var(--border-default);
}

footer section:first-of-type label {
	font-size: var(--font-size-default);
	color: black;
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
}

footer section:first-of-type input {
	border: none;
	border-bottom: var(--border-default);
	width: 100%;
	height: 2em;
	margin-bottom: 1em;
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
}

footer section:first-of-type input::placeholder {
	text-transform: uppercase;
	display: inline-block;
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-heavy);
}

footer section:first-of-type input:focus {
	outline: none;
}

footer section:first-of-type button[type="submit"] {
	background-color: black;
	text-align: center;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	font-size: var(--font-size-default);
	height: 2.5em;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-transform: uppercase;
	border: none;
	font-weight: var(--font-weight-heavy);
}

footer section:nth-of-type(2) {
	border-bottom: var(--border-default);
}

footer section:nth-of-type(2) ul {
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	list-style: none;
}

footer section:nth-of-type(2) ul li {
	list-style: none;
	padding: var(--padding-small) 0;

}

footer section:nth-of-type(2) ul li a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	color: black;
}

footer section:nth-of-type(3) p {
	font-size: var(--font-size-default);
}

footer section:nth-of-type(3) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: var(--padding-small);
	padding-top: 1em;
	padding-bottom: 1em;
}







/* Bron: Grid Garden https://cssgridgarden.com/#nl */

.tees main > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100vw;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	padding-top: var(--padding-small);
	grid-gap: var(--padding-small);
	border-bottom: var(--border-default);
}

.tees main ul li {
	display: block;
	width: 100%;
	margin-bottom: 2.5em;
}

.tees main ul li a {
	display: block;
	width: 100%;
	text-transform: uppercase;
	text-decoration: none;
	color: black;
}

/* Bron: MDN https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
.tees main ul li a h3 {
	font-size: var(--font-size-default);
	margin-right: var(--padding-small);
	margin-top: var(--padding-small);
	overflow-wrap: anywhere;
}

.tees main ul li a p {
	margin-top: .125em;
	margin-bottom: var(--padding-small);
	display: inline-block;
}


.tees main ul li a img {
	width: 100%;
}

.tees main ul li.soldOut a img {
	opacity: .5;
}

.tees main ul li.soldOut a p {
	background-color: #111;
	color: white;
	padding: 0.1em;
}

.tees main section:nth-of-type(2) form ul button {
	width: 100%;
	height: var(--element-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-heavy);
	text-transform: uppercase;
	background-color: transparent;
	border: none;
	border-top: var(--border-default);
}

.tees main section:nth-of-type(2) form ul button img {
	height: var(--padding-small);
	transform: rotate(180deg);
	transition: var(--transition-default);
}

.tees main section:nth-of-type(2) form ul li {
	margin-bottom: 0;
	text-transform: uppercase;
	line-height: 2em;
	display: block;
}

/* Bron: MDN https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
.tees main section:nth-of-type(2) form ul li input {
	accent-color: black;
}

.tees main section:nth-of-type(2) form ul li div {
	padding-left: var(--padding-small);
	padding-bottom: var(--padding-small);
}

.tees main section:nth-of-type(2) form ul li div[aria-hidden=true]{
	display: none;
}

.tees main section:nth-of-type(2) form ul button img.closedLiArrow {
	transform: rotate(0deg);
}

.tees main section:nth-of-type(2)[aria-hidden="true"]{
	display: none;
}

.tees main section:first-of-type {
	border-bottom: none;
}

.tees main section:nth-of-type(2) form section {
	height: fit-content;
	padding: 0;
	margin: 0;
	display: flex;
}

.tees main section:nth-of-type(2) form section button {
	width: 50%;
	display: block;
	margin: 0;
	padding: 0;
	height: var(--element-height);
	border: 1px solid black;
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
}

.tees main section:nth-of-type(2) form section button:first-of-type {
	background-color: transparent;
	color: black;
}

.tees main section:nth-of-type(2) form section button:nth-of-type(2) {
	background-color: black;
	color: white;
}

body.tees main section:first-of-type {
	border-bottom: var(--border-default);
}

body.tees main section:first-of-type.filterOpen {
	border-bottom: none;
}

.shirt main section:first-of-type {
	width: 100%;
	height: fit-content;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: max-content 1fr;
	padding: 0;
	border-bottom: none;
}

.shirt main section:first-of-type img {
	width: 100%;
	grid-column-start: 1;
	grid-column-end: 3;
}

.shirt main section:first-of-type button {
	width: 100%;
	height: var(--element-height);
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	border: 1px solid black;
}

.shirt main section:first-of-type button.activeShirt {
	background-color: black;
	color: white;
}

.shirt main section:first-of-type button.inactiveShirt {
	background-color: transparent;
	color: black;
}

.shirt main section:nth-of-type(2) {
	text-transform: uppercase;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	height: fit-content;
}

.shirt main section:nth-of-type(2) h2 {
	font-weight: var(--font-weight-heavy);
	padding-top: var(--padding-small);
}

.shirt main section:nth-of-type(2) > p:first-of-type {
	font-weight: var(--font-weight-thin);
	border-bottom: var(--border-default);
	padding-bottom: var(--padding-big);
}

.shirt main section:nth-of-type(2) > p:nth-of-type(2) {
	font-weight: var(--font-weight-heavy);
	padding-top: var(--padding-big);
	color: grey;
	padding-bottom: var(--padding-small);
}

.shirt main section:nth-of-type(2) > ul:first-of-type {
	display: flex;
	gap: var(--padding-small);
	padding-bottom: var(--padding-big);
	border-bottom: var(--border-default);
}

.shirt main section:nth-of-type(2) > ul:first-of-type li {
	height: 2.5em;
	width: 2.5em;
	display: block;
	background-color: rgb(240, 240, 240);
}

.shirt main section:nth-of-type(2) > ul:first-of-type li a {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.shirt main section:nth-of-type(2) > ul:first-of-type li a img {
	height: 100%;
}

.shirt main section:nth-of-type(2) form {
	padding-top: var(--padding-big);
	padding-bottom: var(--padding-big);
	border-bottom: var(--border-default);
}

.shirt main section:nth-of-type(2) form input {
	display: none;
}

.shirt main section:nth-of-type(2) form label {
	padding-right: var(--padding-small);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) {
	text-transform: none;
	list-style: none;
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) li button {
	width: 100%;
	height: var(--element-height);
	display: flex;
	gap: var(--padding-small);
	align-items: center;
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	font-size: var(--font-size-default);
	border: none;
	background-color: transparent;
	border-top: var(--border-default);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) button img {
	transform: rotate(270deg);
	height: .75em;
	transition: var(--transition-default);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) li button.activeInfoText {
	text-decoration: underline;
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) li button img.activeInfoImg {
	transform: rotate(360deg);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li div {
	list-style: none;
	display: none;
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li:nth-of-type(3) div p {
	margin-bottom: var(--padding-big);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li div.activeInfo {
	display: block;
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li div ul {
	list-style-type: '- ';
	padding-left: var(--padding-big);
	padding-top: var(--padding-big);
	padding-bottom: var(--padding-big);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li:nth-of-type(2) > div > img {
	width: 100%;
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li a {
	height: var(--element-height);
	display: flex;
	width: 100%;
	align-items: center;
	color: black;
	text-decoration: none;
	font-weight: var(--font-weight-heavy);
	text-transform: uppercase;
	justify-content: flex-start;
	border-top: var(--border-default);
}

.shirt main p:nth-of-type(3) {
	padding-top: var(--padding-big);
	padding-bottom: var(--padding-big);
}

.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li:last-of-type p {
	padding-bottom: var(--padding-big);
}

.shirt main section:nth-of-type(3) {
	display: flex;
	position: sticky;
	bottom: 0;
}

.shirt main section:nth-of-type(3) button {
	width: 50%;
	height: var(--element-height);
	text-transform: uppercase;
	font-weight: var(--font-weight-heavy);
	border: 1px solid black;
}

.shirt main section:nth-of-type(3) button:first-of-type {
	background-color: black;
	color: white;
} 

.shirt main section:nth-of-type(3) button:nth-of-type(2) {
	background-color: white;
	color: black;
} 

.shirt main table{
	text-align: left;
}

.shirt main table th, .shirt main table td {
	padding-right: var(--padding-big);
}

/* Bron: hulp van medestudent Laurens */
@media only screen and (min-width: 600px) {
	.shirt main {
		display: grid;
		grid-template-columns: max-content 1fr;
	}

	.shirt main section:first-of-type {
		grid-row-start: 1;
		grid-row-end: 3;
	}

	.shirt main section:nth-of-type(2) {
		grid-row-start: 1;
		grid-row-end: 2;
	}

	.shirt main section:nth-of-type(3) {
		grid-column-start: 2;
		grid-column-end: 3;
		position: static;
		padding-left: var(--padding-small);
		padding-right: var(--padding-small);
		align-self: flex-end;
	}

	.shirt main section:nth-of-type(2) > ul:nth-of-type(2) > li:nth-of-type(2) > div > img {
		width: 50%;
	}

	.tees main > ul {
	grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 900px) {
	.tees main > ul {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		}
}

header ul:first-of-type li:nth-of-type(2) button img.activeCart {
	animation: addToBagAnimation .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes addToBagAnimation {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(2);
	}
	30% {
		transform: rotate(30deg) scale(2);
	}
	70% {
		transform: rotate(-30deg) scale(2);
		}
	90% {
		transform: scale(2);
	}
	100% {
		transform: scale(1);
	}
}