/* ============================================	*/
/*	VARIABLES									*/
/* ============================================	*/

	:root {
		--font-body: "Quicksand", "Verdana", "Arial", sans-serif;
		--font-written: "Fuzzy Bubbles", sans-serif;
		--color-background: #0A0A0A;
		--color-foreground: #EFEFEF;
		--color-accent: #d8a281;
		--color-alert: #B32D00;
		--color-button: #22361B;
		--color-gray: #BBB;
		--color-logo: #d8a281;
		}

/* ============================================	*/
/*	CONTAINERS									*/
/* ============================================	*/

	*, *::before, *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		}

	html {
		min-height: 100%;
		scroll-behavior: smooth;
		}

	body {
		background: var(--color-background) url(../images/background_body.png) top center no-repeat;
		color: var(--color-foreground);
		display: flex;
		flex-direction: column;
		font: 500 1rem/1.6 var(--font-body);
		min-height: 100vh;
		}

	main {
		flex: 1;
		}

	.container {
		margin: 0 auto;
		max-width: 1260px;
		padding: 0 60px;
		position: relative;
		}

/* ============================================	*/
/*	TYPOGRAPHY									*/
/* ============================================	*/

	a {
		color: var(--color-accent);
		}

	dt {
		color: var(--color-accent);
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.15;
		margin: 20px 0 10px 0;
		}

	h1 {
		color: var(--color-foreground);
		font-size: clamp(2.2rem, 4vw + 1rem, 5rem);
		font-weight: 700;
		line-height: 1;
		margin: 0 0 20px 0;
		max-width: 800px;
		}

	h2 {
		color: var(--color-accent);
		font-family: var(--font-written);
		font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
		font-weight: 700;
		margin: 40px 0 10px 0;
		}

	h3 {
		color: var(--color-accent);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.25;
		margin: 40px 0 0 0;
		}

		h2 + h3 {
			margin-top: 0;
			}

	img {
		max-width: 100%;
		}

	p {
		margin-bottom: 1rem;
		}

	.subtitle {
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 20px;
		}

/* ============================================	*/
/*	UTILITIES									*/
/* ============================================	*/

	.full {
		width: 100%;
		}

	.push {
		margin-top: 40px;
		}

	.center {
		text-align: center;
		}

	.visually-hidden {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
		}

/* ============================================	*/
/*	SKIP TO CONTENT								*/
/* ============================================	*/

	.skip {
		background: var(--color-alert);
		color: var(--color-foreground);
		font-weight: 700;
		line-height: 1;
		padding: 0.85rem 1.25rem;
		position: absolute;
		text-decoration: none;
		transition: top 0.2s ease;
		top: -120px;
		z-index: 1000;
		}

		.skip:focus,
		.skip:focus-visible {
			top: 0;
			outline: 3px solid #fff;
			outline-offset: 2px;
			}

/* ============================================	*/
/*	HEADER										*/
/* ============================================	*/

	header .container {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem 3.5rem;
		margin-bottom: 80px;
		margin-top: 60px;
		}

		.logo {
			color: var(--color-foreground);
			font-size: 1.625rem;
			font-weight: 700;
			text-decoration: none;
			}

		/* Navigation */
		.nav {
			flex: 1 1 400px;
			min-width: 0;
			width: 100%;
			}

			.nav ul {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem 3.5rem;
				list-style: none;
				}

				.nav li[lang] {
					margin-left: auto;
					}

					.nav li[lang] a {
						color: var(--color-foreground);
						}
						
				.nav a {
					color: var(--color-accent);
					font-family: var(--font-written);
					font-weight: 700;
					text-decoration: none;
					text-shadow: 0px 0px 10px var(--color-background);
					transition: 0.2s;
					}

					.nav a[aria-current="page"] {
						border-bottom: 2px solid var(--color-foreground);
						color: var(--color-foreground);
						padding-bottom: 5px;
						}

					.nav a:focus-visible,
					.nav a:hover,
					.nav a:active {
						color: var(--color-foreground);
						}

			/* Hamburger menu */
			.menu-toggle {
				align-items: center;
				background: transparent;
				border: 2px solid var(--color-accent);
				border-radius: 5px;
				color: var(--color-foreground);
				display: none;
				height: 48px;
				justify-content: center;
				margin-left: auto;
				width: 48px;
				}

				.menu-toggle:hover,
				.menu-toggle:focus-visible {
					background: rgba(190,137,104,.25);
					border-color: var(--color-foreground);
					}

				.menu-icon,
				.menu-icon::before,
				.menu-icon::after {
					background: currentColor;
					border-radius: 999px;
					content: "";
					display: block;
					height: 3px;
					position: relative;
					width: 24px;
					transition: transform 0.2s ease, opacity 0.2s ease;
					}

					.menu-icon::before {
					position: absolute;
					top: -8px;
					}

					.menu-icon::after {
					position: absolute;
					top: 8px;
					}

			.menu-toggle.is-active .menu-icon {
				background: transparent;
				}

				.menu-toggle.is-active .menu-icon::before {
					transform: rotate(45deg);
					top: 0;
					}

				.menu-toggle.is-active .menu-icon::after {
					transform: rotate(-45deg);
					top: 0;
					}


/* ============================================	*/
/*	FRONT PAGE									*/
/* ============================================	*/

	.front h1 {
		max-width: 500px;
		}

	.front .subtitle {
		color: var(--color-accent);
		font-family: var(--font-written);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.25;
		margin: 40px 0 40px 0;
		max-width: 500px;
		}

/* ============================================	*/
/*	PRODUCTS LIST								*/
/* ============================================	*/

	/* Grid */

	.products {
		column-gap: 40px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20px;
		row-gap: 60px;
		list-style: none;
		}

		.products li {
			flex: 0 0 calc((100% - 120px) / 4);
			min-width: 0;
			}

		.products a {
			text-decoration: none;
			}

			.products a:hover h3,
			.products a:focus-visible h3 {
				color: var(--color-foreground);
				}

		.products h3 {
			font-size: 1.125rem;
			margin: 20px 0 5px 0;
			}

	/* Product photo */

	.outline {
		aspect-ratio: 1 / 1;
		display: block;
		overflow: hidden;
		position: relative;
		width: 100%;
		}

		.outline::before {
			background: url("../images/product_outline_1-1.svg") center / 100% 100% no-repeat;
			content: "";
			filter: drop-shadow(0 0 2rem var(--color-background));
			inset: 0;
			pointer-events: none;
			position: absolute;
			transition: 0.1s;
			z-index: 1;
			}

			.products a:hover .outline::before,
			.products a:focus-visible .outline::before {
				filter: drop-shadow(0 0 2rem var(--color-accent));
				}

		.outline img {
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
			}

	/* Data */

		.section {
			font-size: 1.125rem;
			margin-bottom: 30px;
			max-width: 800px;
			}

		.price {
			margin-bottom: 15px;
			}

		.badges {
			display: flex;
			gap: 5px;
			list-style: none;
			}

			.badges li {
				flex: 0 0 auto;
				}

			.badges img {
				display: block;
				height: 30px;
				width: 30px;
				}

/* ============================================	*/
/*	SINGLE PRODUCT								*/
/* ============================================	*/

	/* Grid */

		.single .container {
			display: flex;
			gap: 4rem;
			}

			.description {
				flex: 1 1 0;
				max-width: 600px;
				min-width: 0;
				}

	/* Ingredients list */

		.ingredients {
			list-style: none;
			margin-bottom: 1rem;
			}

			.ingredients li {
				display: inline;
				}

				.ingredients li::after {
					content: ', ';
					}

					.ingredients li:last-of-type::after {
						content: '';
						}

	/* Badges */

		.single .badges {
			gap: 10px;
			}

		.single .badges img {
			height: 40px;
			width: 40px;
			}

	/* Photos */

		.photos {
			margin-left: auto;
			}

			.photos figure {
				background: #D9D9D9;
				display: inline-block;
				padding: 20px;
				text-align: center;
				filter: drop-shadow(50px -20px 20px rgba(0, 0, 0, 0.5));
				}

			.photos ul {
				list-style: none;
				}

			.photos img {
				aspect-ratio: 1 / 1;
				object-fit: cover;
				width: clamp(120px, 28vw, 360px);
				}

				.shot1 {
					margin-top: 10px;
					rotate: 5deg;
					}

				.shot2 {
					margin-top: -140px;
					rotate: -12deg;
					}

			.photos figcaption {
				color: var(--color-background);
				font-family: var(--font-written);
				font-weight: 700;
				font-size: 1.25rem;
				font-weight: 700;
				padding: 30px 0 20px 0;
				}

	/* Buy button */

	.buy {
		align-items: center;
		border: 2px solid var(--color-accent);
		border-radius: 5px;
		color: var(--color-foreground);
		display: inline-flex;
		font-size: 1rem;
		font-weight: 600;
		gap: 0.5rem;
		line-height: 1;
		margin-top: 15px;
		padding: 25px 30px;
		text-decoration: none;
		transition: 0.2s;
		}

		.buy strong {
			color: var(--color-accent);
			}

			.buy:hover strong {
				color: var(--color-foreground);
				}

		.buy img {
			margin-left: 30px;
			}	

		.buy:hover,
		.buy:focus-visible {
			background: rgba(190,137,104,.25);
			border-color: var(--color-foreground);
			}

/* ============================================	*/
/*	ABOUT US									*/
/* ============================================	*/

	/* Grid */

		.about .container {
			display: flex;
			flex-wrap: wrap;
			gap: 0 4rem;
			}

			.about section {
				flex: 1 1 300px;
				}

			.about h1 {
				flex: 0 0 100%;
				max-width: 100%;
				}	

/* ============================================	*/
/*	FOOTER										*/
/* ============================================	*/

	footer {
		background: url(../images/background_footer.png) bottom center no-repeat;
		margin-top: 60px;
		min-height: 200px;
		padding-top: 80px;
		}

		footer .container {
			align-items: center;
			display: flex;
			gap: 2rem;
			width: 100%;
			}

		footer .logo {
			font-size: 1.25rem;
			}

		footer p {
			margin-bottom: 0;
			}

		footer nav {
			margin-left: auto;
			}

			footer nav ul {
				display: flex;
				flex-wrap: wrap;
				gap: 2rem;
				list-style: none;
				}

					footer nav a {
						color: var(--color-foreground);
						font-weight: 700;
						text-decoration: none;
						transition: 0.2s;
						}

						footer nav a:hover,
						footer nav a:focus-visible {
							color: var(--color-accent);
							}

/* ============================================	*/
/*	QUERIES										*/
/* ============================================	*/

	@media (max-width: 1100px) {

		/* Container */
		header .container {
			gap: 1rem;
			}

		/* Navigation */
		.menu-toggle {
			display: inline-flex;
			}

		.nav {
			display: none;
			flex: 0 0 100%;
			width: 100%;
			}

			.nav.is-open {
				display: block;
				}

			.nav ul {
				display: block;
				}

			.nav li {
				border-top: 1px solid var(--color-accent);
				}

			.nav a {
				display: block;
				font-family: var(--font-body);
				padding: 0.85rem 0;
				}

				.nav a[aria-current="page"] {
					border-bottom: 0;
					padding: 0.85rem 0;
					}

				.nav li[lang] a {
					text-align: right;
					}

		/* Products grid */
		.products > li {
			flex: 0 0 calc((100% - 80px) / 3);
			}

	}

	@media (max-width: 900px) {

		/* Container */
		.container {
			padding: 0 30px;
			}

			header .container {
				margin-bottom: 40px;
				margin-top: 20px;
				}

		/* Products grid */
		.products > li {
			flex: 0 0 calc((100% - 40px) / 2);
			}

		/* Subtitle */
		.description,
		.subtitle {
			max-width: 100%;
			}

		/* Product photos */
		.photos figure {
			filter: none;
			margin-top: 20px;
			width: 100%;
			}

			.photos figcaption {
				padding: 20px 0 10px 0;
				}

			.photos img {
				width: 100%;
				}

			.shot1,
			.shot2 {
				aspect-ratio: auto;
				margin-top: 0;
				rotate: none;
				}

		/* Single product grid */
		.single .container {
			display: block;
			}

	}

	@media (max-width: 600px) {

		/* Products grid */
		.products > li {
			flex: 0 0 100%;
			}

		/* Product photo */
		.outline {
			aspect-ratio: 16 / 9;
			}

			.outline::before {
				background-image: url("../images/product_outline_16-9.svg");
				}

		/* Footer */
		footer .container {
			display: block;
			}

			footer nav {
				margin-bottom: 30px;
				margin-top: 20px;
				}

	}