:root {
	--font-family-1: "Gilroy", helvetica, arial, sans-serif;
	
	--size-base: 20px;
	
	--size-xxs: calc( var(--size-base) / 1.62 / 1.62 / 1.62 );
	--size-xs: calc(var(--size-base) / 1.62);
	--size-s: calc(var(--size-base) - var(--size-xxs));
	--size-m: var(--size-base);
	--size-l: calc(var(--size-base) + var(--size-xxs));
	--size-xl: calc(var(--size-base) * 1.62 * 1.62);
	--size-xxl: calc(var(--size-base) * 1.62 * 1.62 * 1.62 * 1.62);
	
	--frame-s: calc(var(--frame-m) / 1.62);
	--frame-m: calc(var(--size-base) * 29.28); /* 29.28 = 1.62x7 */
	--frame-l: calc(var(--frame-m) * 1.62);
	
	--color-dark: #060606;
	--color-light: #fff;
	--color-splash: #b1d235;
	--color-grey: #f3f6f5;
}

html{
	background: #ddd;
	padding: 0;
	margin: 0;
}
body{
	background: var(--color-light);
	max-width: 360px;
	position: relative;
	margin: 0 auto;
	border-radius: var(--size-xxs);
	
	font-family: var(--font-family-1);
	font-size: var(--size-m);
}

hr{
	border: none;
	border-top: 1px solid var(--color-dark);
	margin: var(--size-l) 0;
}

.container{
	width: var(--frame-l);
	max-width: calc(100% - (var(--size-m) * 2));
	margin: 0 auto;
	position: relative;
}

#passwordprotected{
	background: url('assets/napoleon.avif') no-repeat center center;
	background-size: cover;
	min-height: 100vh;
}
#passwordprotected body{
	background: transparent;
}
#passwordprotected form{
	background: var(--color-dark);
	padding: var(--size-l);
	border-radius: var(--size-s);
	margin-top: calc(50vh - 86px);
	margin-left: auto;
	margin-right: auto;
}

/* FORMS */
input{
	font-size: var(--size-m);
	padding: var(--size-xs) var(--size-xs);
	border: 1px solid var(--color-dark);
	border-radius: var(--size-xxs);
	outline: none !important;
	margin-bottom: var(--size-xs);
	max-width: calc( 100% - (var(--size-xs) * 2) - 2px );
	width: var(--frame-s);
}
input:focus{
	border-color: var(--color-splash);
}
input[type="submit"]{
	background-color: var(--color-splash);
	border-color: var(--color-splash);
	font-weight: bold;
}
textarea{
	font-size: var(--size-m);
	padding: var(--size-xs) var(--size-xs);
	border: 1px solid var(--color-dark);
	border-radius: var(--size-xxs);
	outline: none !important;
	margin-bottom: var(--size-xs);
	max-width: calc( 100% - (var(--size-xs) * 2) - 2px );
	width: var(--frame-s);
	min-height: var(--size-xxl);
}
textarea:focus{
	border-color: var(--color-splash);
}
select{
	font-size: var(--size-m);
	padding: var(--size-xs) var(--size-xs);
	border: 1px solid var(--color-dark);
	border-radius: var(--size-xxs);
	outline: none !important;
	margin-bottom: var(--size-xs);
	max-width: calc( 100% - (var(--size-xs) * 2) - 2px );
	width: var(--frame-s);
}
button{
	font-size: var(--size-m);
	font-weight: bold;
	padding: var(--size-xs) var(--size-l);
	border: 1px solid var(--color-splash);
	border-radius: var(--size-xxs);
	background: var(--color-splash);
	color: var(--color-dark);
	cursor: pointer;
}

/* TABLE */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

thead {
  background-color: #f2f2f2;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

th {
  font-weight: bold;
  background-color: #e0e0e0;
}

/* HEADER */
#header{
	padding: var(--size-s) 0;
}
#logo{
	position: relative;
	display: inline-block;
}
#logo img{
	height: calc( var(--size-m) * 1.777 );
	width: auto;
}
#menu-btn{
	width: calc(var(--size-l));
	height: var(--size-m);
	position: absolute;
	top: var(--size-xs);
	right: var(--size-m);
	display: block;
	
	top: 8px;
	right: 0;
}
#menu-btn > div{
	width: 100%;
	height: calc(var(--size-xxs) - 1px);
	background: var(--color-dark);
	display: block;
	position: absolute;
	border-radius: var(--size-xxs);
	right: 0;
	transition: transform 0.5s;
}
#menu-btn > div:nth-child(1){
	top: 0;
}
#menu-btn > div:nth-child(2){
	top: calc(50% - ((var(--size-xxs) - 1px) / 2));
}
#menu-btn > div:nth-child(3){
	bottom: 0;
	width: 58%;
	opacity: 1;
}
#menu-btn.open > div:nth-child(1){
	transform: rotate(45deg);
	top: calc(50% - ((var(--size-xxs) - 1px) / 2));
}
#menu-btn.open > div:nth-child(2){
	transform: rotate(-45deg);
}
#menu-btn.open > div:nth-child(3){
	opacity: 0;
	bottom: -10px;
}
#header nav{
	position: relative;
	top: -10px;
	display: none;
}
nav ul{
	list-style: none;
	padding: var(--size-xs) 0;
	background: var(--color-splash);
}
nav ul li{
	text-align: center;
}
nav ul li a{
	color: var(--color-light);
	font-weight: 600;
	text-decoration: none;
	padding: var(--size-xs) 0;
	display: block;
}
nav ul li a:hover{
	color: var(--color-dark);
}

/* FOOTER */
#footer{
	background: var(--color-dark);
	color: var(--color-light);
}
#footer ul{
	list-style: none;
	padding: var(--size-m) 0;
}
#footer ul li{
	text-align: center;
}
#footer ul li a{
	text-decoration: none;
	color: var(--color-light);
	font-size: var(--size-s);
	padding: var(--size-xxs) 0;
	display: block;
}

/* KIT VIEWER */
#start-kit-viewer{
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: var(--size-xxs);
}
#start-kit-focus{
	display: flex;
	flex-direction: column;	
	width: 100%;
	flex: 1;
	background: var(--color-grey);
	padding: var(--size-xs);
}
#start-kit-focus-product{
	background: url('assets/kittop.png') no-repeat center center;
	background-size: contain;
	aspect-ratio: 1 / 1;
	width: 100%;
}
#start-kit-products{
	display: flex;
	flex-direction: column;
	width: calc(var(--size-xl) + var(--size-s)); 
	flex-shrink: 0; 
	gap: var(--size-xxs);
}
#start-kit-products > div{
	background-color: var(--color-grey);
	background-size: contain;
	aspect-ratio: 1 / 1;
	width: 100%;
}
#start-kit-product-tshirt{
	background: url('assets/kittop.png') no-repeat center center;
}
#start-kit-product-shorts{
	background: url('assets/kitbottom.png') no-repeat center center;
}
#start-kit-product-socks{
	background: url('assets/kitsocks.png') no-repeat center center;
}

#start-kit-configurator{
	margin-top: var(--size-xs);
}
#start-btn{
	width: 100%;
	padding: 0 0;
	background: var(--color-splash);
	color: var(--color-dark);
	font-weight: 600;
	border-radius: var(--size-xxs);
	display: flex;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
}
#start-btn img{
	height: calc(var(--size-xl) - var(--size-xs));
	width: auto;
	display: inline-block;
	padding: var(--size-xs) var(--size-s);
	background: var(--color-splash);
	border-radius: var(--size-xxs) 0 0 var(--size-xxs);
}
#start-btn span{
	flex: 1;
	text-align: center;
	position: relative;
	height: 100%;
}
#start-btn div.divider{
	top: var(--size-xxs);
	bottom: var(--size-xxs);
	width: 1.5px;
	height: calc( (var(--size-xl) - var(--size-xs)) );
	background: var(--color-dark);
	display: block;
}

/* BUILDER DISPLAY */
#builder{
	display: flex;
	flex-direction: column;
	gap: var(--size-xs);
}
#builder-display{
	width: 100%;
}
.cloth-cat-display{
	display: flex;
	flex-direction: row;
	gap: var(--size-xs);
}
.cloth-cat-display > div{
	background: url('assets/niketop1.png') no-repeat center center;
	background-size: contain;
	background-color: var(--color-grey);
	border: var(--size-xs) solid var(--color-grey);
	aspect-ratio: 1 / 1;
	flex: 1;
}

/* BUILDER PRODUCTS */
#builder-products{
	display: flex;
	flex-direction: row;
	gap: var(--size-xs);
}
.builder-product{
	background: url('assets/niketop1.png') no-repeat center center;
	background-size: contain;
	background-color: var(--color-grey);
	border: var(--size-xxs) solid var(--color-grey);
	aspect-ratio: 1 / 1;
	flex: 1;
	max-width: var(--size-xl);
}

/* BUILER NAV */
#builder-nav-wrapper{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
#builder-nav-wrapper button{
	aspect-ratio: 1 / 1;
	padding: var(--size-xxs) var(--size-xs);
	background: var(--color-dark);
	color: var(--color-light);
	border-color: var(--color-dark);
}
#builder-nav-wrapper button:first-child{
	border-radius: var(--size-xxs) 0 0 var(--size-xxs);
}
#builder-nav-wrapper button:last-child{
	border-radius: 0 var(--size-xxs) var(--size-xxs) 0;
}
#builder-nav{
	list-style: none;
	padding: 0;
	position: relative;
	flex: 1;
	margin: 0;
	border-top: 2px solid var(--color-dark);
	border-bottom: 2px solid var(--color-dark);
}
#builder-nav li{
	padding: calc(var(--size-xxs) + 5px);
	text-align: center;
	display: none;
	background: var(--color-grey);
	font-size: var(--size-s);
	cursor: pointer;
}
#builder-nav li:hover{
	background: #e3e6e5;
}
#builder-nav li.active{
	display: block;
	font-weight: bold;
}
#builder-nav.open li.active{
	color: var(--color-dark);
	background: var(--color-splash);
}
#builder-nav li span{
	font-weight: normal !important;
	text-transform: none;
}
#builder-nav.open li{
	display: block;
}

/* BUILDER OPTIONS */
#builder-options-wrapper{
	width: 100%;
	overflow-x: hidden;
}
#builder-options{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: calc( 100% * 3 );
}
.cloth-cat-options{
	width: calc( 100% / 3 );
	transition: all 0.3s ease-in-out;
}
.cloth-cat-options.active{
	display: block;
}
.cloth-models {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--size-xxs); /* Optional: adds spacing between items */
}

.cloth-models > div {
	background: url('assets/niketop1.png') no-repeat center center;
	background-size: contain;
	background-color: var(--color-grey);
	border: var(--size-xs) solid var(--color-grey);
	aspect-ratio: 1 / 1;
	width: calc(33.3333% - 4px);
	box-sizing: border-box;
	position: relative;
}
.cloth-models > div:before{
	content: '';
	background: url('assets/model-nike.png') no-repeat top left;
	background-size: contain;
	position: absolute;
	top: calc(0px - var(--size-xxs));
	left: calc(0px - var(--size-xxs));
	width: var(--size-s);
	height: var(--size-s);
}

/* FONTS */
@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy-Regular.woff2') format('woff2'),
		url('/assets/fonts/Gilroy-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy-Heavy.woff2') format('woff2'),
		url('/assets/fonts/Gilroy-Heavy.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy-Light.woff2') format('woff2'),
		url('/assets/fonts/Gilroy-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy-Medium.woff2') format('woff2'),
		url('/assets/fonts/Gilroy-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy-Bold.woff2') format('woff2'),
		url('/assets/fonts/Gilroy-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* ADMIN */
#admin{
	max-width: none;
}
#admin #header{
	background: var(--color-dark);
}
#admin #menu-btn > div{
	background: var(--color-light);
}