/* Arvo font faces */
@font-face {
	font-family: 'Arvo';
	src: url('/assets/t/fonts/Arvo/Arvo-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Arvo';
	src: url('/assets/t/fonts/Arvo/Arvo-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Arvo';
	src: url('/assets/t/fonts/Arvo/Arvo-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Arvo';
	src: url('/assets/t/fonts/Arvo/Arvo-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}
/* Inter font faces */
@font-face {
	font-family: 'Inter';
	src: url('/assets/t/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
}
@font-face {
	font-family: 'Inter';
	src: url('/assets/t/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
}
:root {
	--lightness: 73%;
	--chroma: 0.15;
	
	--primary-hue: 64.54;
	--primary: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1);
	--primary-light: oklch(calc(var(--lightness) + 12%) var(--chroma) var(--primary-hue) / 1);
	--primary-dark: oklch(calc(var(--lightness) - 13%) var(--chroma) var(--primary-hue) / 1);
	--primary-trans: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.1);

	--complement-hue: calc(var(--primary-hue) + 180);
	--complement: oklch(var(--lightness) var(--chroma) var(--complement-hue) / 1);
	--complement-light: oklch(calc(var(--lightness) + 12%) var(--chroma) var(--complement-hue) / 1);
	--complement-dark: oklch(calc(var(--lightness) - 13%) var(--chroma) var(--complement-hue) / 1);
	--complement-trans: oklch(var(--lightness) var(--chroma) var(--complement-hue) / 0.1);

	--roundness: 0.5rem;

	font-size: 18px;

	--spacing: 1rem;
	--s-half: calc(var(--spacing) * 0.5);
	--s-1: var(--spacing);
	--s-2: calc(var(--spacing) * 2);
	--s-3: calc(var(--spacing) * 3);
	--s-4: calc(var(--spacing) * 4);
	
	--site-margin: var(--s-2);
	--site-max-width: min(1500px, calc(100vw - var(--site-margin) * 2));
	--current-margin: calc((100vw - var(--site-max-width)) / 2);

	border-color: var(--primary);

	--heading-color: var(--primary);
	--heading-font: 'Arvo', serif;

	--text-color: #5a747d;
	--text-font: 'Inter', sans-serif;

	@media (max-width: 1330px) {
		--spacing: 0.5rem;
	}
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	display: flex;

	min-height: 100vh;
	flex-direction: column;

	font-family: var(--text-font);
	font-weight: 300;
	color: var(--text-color);
}
body > a[href="#main-content"] {
	display: none;

	&:focus {
		display: block;
	}
}
#content {
	min-height: calc(100vh - 445px);
}
header{
	background-color: #fff;
	& > section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--spacing);

		@media (max-width: 1330px) {
			flex-direction: column;
			align-items: stretch;
			gap: var(--s-1);
		}
	}

	a, span {

		color: #000;

		&.active, &:hover {
			color: var(--primary);
			text-decoration: underline;
		}
	}

	#main-menu {
		ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;

			ul {
				flex-direction: column;
			}
		}

		li {
			margin: 0;
			padding: 0;

			a, span{
				display: block;
				padding: var(--s-half) var(--s-2);
			}
		}

		@media (max-width: 1330px) {
			display: none;
			order: 4;

			ul {
				flex-direction: column;
				width: 100%;
			}
			
			&[aria-expanded="true"] {
				display: block;
			}

			li {
				text-align: left;

				a, span {
					display: block;
					border-top: 1px solid #ccc;
					width: 100%;
				}
			}

			.dropdown-content {
				position: static;
				box-shadow: none;
				background: none;
			}
		}
	}

	.expand-menu {
		display: none;

		@media (max-width: 1330px) {
			display: block;
		}
	}

	.cart-panel {
		text-decoration: none;
	}

	form[role="search"] {
		display: flex;
		align-items: center;
		border: 1px solid var(--primary-light);
		border-radius: calc(var(--roundness) * 4);

		input[type="text"] {
			flex-grow: 1;
			background: none;

			&::-moz-placeholder {
				opacity: 0.5;
			}

			&::placeholder {
				opacity: 0.5;
			}
		}

		button {
			aspect-ratio: 1;
			display: grid;
			place-items: center;
			padding: 1rem;
			margin: 0.15rem;

			@media (max-width: 1330px) {
				padding: 0.3rem;
			}
		}
	}
}
footer {
	--heading-font: var(--text-font);
	--heading-color: #fff;
	--text-color: #fff;
	--link-color: #fff;
	--link-color-visited: var(--link-color);

	color: #fff;
	background-color: var(--primary);

	& > section {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: var(--s-2);
		padding-block: var(--s-2);

		& > * {
			flex-basis: 25%;

			@media (min-width: 1330px) {
				&:first-child {
					align-self: center;
				}
			}
		}

		@media (max-width: 1330px) {
			flex-direction: column;
			align-items: stretch;
		}
	}

	h4 {
		font-weight: 500;
		-webkit-margin-before: 0;
		        margin-block-start: 0;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			margin-top: var(--s-2);

			a {
				color: var(--link-color);
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}
section, .contained {
	max-width: var(--site-max-width);
	margin-inline: auto;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	font-weight: 300;
	text-transform: uppercase;
	color: var(--heading-color);
}
h1 { font-size: 3.5rem }
h2 { font-size: 3rem }
h3 { font-size: 2.5rem }
h4 { font-size: 1.11rem }
@media (max-width: 1330px) {
	h1 { font-size: 2.5rem }
	h2 { font-size: 2rem }
	h3 { font-size: 1.5rem }
	h4 { font-size: 1.25rem }
}
p {
	color: var(--text-color);
	line-height: 1.5;
}
p > a, .link {
	color: var(--link-color, var(--complement));

	&:visited {
		color: var(--link-color-visited, var(--complement-dark));
	}
}
hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--heading-color);
}
input:not([type='checkbox'], [type='radio']), textarea, select, output {
	display: inline-block;
	font-family: var(--text-font);
	font-size: 1rem;
	border-radius: var(--roundness);
	padding: calc(var(--spacing) * 0.5);
	border: none;
	background: #f4f4f4;
	width: 100%;
	box-sizing: border-box;
}
output {
	min-height: calc(var(--spacing) * 0.5 + 1.45rem);
}
button, .button {
	display: inline-block;
	color: white;
	background-color: var(--primary);
	border: none;
	padding: var(--s-half) calc(var(--spacing) * 2.5);
	border-radius: calc(var(--roundness) * 6);
	text-decoration: none;
	cursor: pointer;

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&:hover {
		color: #fff;
		background-color: var(--primary-dark);
	}

	&:visited {
		color: #fff;
	}

	&.outlined {
		background-color: transparent;
		border: 1px solid var(--primary);
		color: var(--primary);
	}

	&.complement {
		background-color: var(--complement);
		&:hover {
			background-color: var(--complement-dark);
		}
		&.outlined {
			border-color: var(--complement);
			color: var(--complement);
		}
	}
}
dialog {
	width: 40rem;
	max-width: calc(100vw - var(--s-2));
	padding: var(--s-2);
	border: none;
	border-radius: calc(var(--roundness) * 2);

	h1, h2, h3, h4, h5, h6 {
		&:first-child { margin-top: 0; }
	}

	&::-webkit-backdrop {
		background: rgba(0, 0, 0, 0.5);
	}

	&::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}
}
.flex {
	display: flex;
	align-items: center;
	gap: var(--s-2);

	@media (max-width: 1330px) {
		&.mobile-column {
			flex-direction: column;
		}
	}
}
.max-100 {
	max-width: 100%;
}
.badge {
	color: white;
	background: var(--primary);
	border-radius: calc(var(--roundness) * 3);
	padding: 2px 10px;
	text-transform: uppercase;
}
.screen-reader {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mobile-show {
	display: none;

	@media (max-width: 1330px) {
		display: block;
	}
}
.mobile-hide {
	@media (max-width: 1330px) {
		display: none;
	}
}
.clipped {
	-webkit-clip-path: border-box path("M129.075 20.7131C130.717 8.84126 140.864 0 152.849 0H636C649.255 0 660 10.7452 660 24V952C660 965.255 649.255 976 636 976H24.5465C9.98485 976 -1.22167 963.137 0.772608 948.713L129.075 20.7131Z");
	        clip-path: border-box path("M129.075 20.7131C130.717 8.84126 140.864 0 152.849 0H636C649.255 0 660 10.7452 660 24V952C660 965.255 649.255 976 636 976H24.5465C9.98485 976 -1.22167 963.137 0.772608 948.713L129.075 20.7131Z");
	-webkit-clip-path: shape(from 19.49% 2.12%, curve to 23.1% 0% with 19.74% 0.91% / 21.28% 0%,
		hline to 96.36%, curve to 100% 2.46% with 98.37% 0% / 100% 1.1%,
		vline to 97.54%, curve to 96.36% 100% with 100% 98.9% / 98.37% 100%,
		hline to 3.64%, curve to 0.03% 97.2% with 1.43% 100% / -0.27% 98.68%,
		line to 19.49% 2.12%, close);
	        clip-path: shape(from 19.49% 2.12%, curve to 23.1% 0% with 19.74% 0.91% / 21.28% 0%,
		hline to 96.36%, curve to 100% 2.46% with 98.37% 0% / 100% 1.1%,
		vline to 97.54%, curve to 96.36% 100% with 100% 98.9% / 98.37% 100%,
		hline to 3.64%, curve to 0.03% 97.2% with 1.43% 100% / -0.27% 98.68%,
		line to 19.49% 2.12%, close);
}
.loader {
	border: 2px solid transparent;
	border-top-color: #000;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	-webkit-animation: spin 2s ease-in-out infinite;
	        animation: spin 2s ease-in-out infinite;
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;
}
@-webkit-keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
nav[aria-label="breadcrumb"] {
	ol {
		display: flex;
		justify-content: start;
		align-items: center;
		padding: var(--s-half) var(--s-1);
		background: var(--complement-trans);
		border-radius: var(--roundness);
		list-style: none;

		li {
			a {
				color: var(--primary-color);
				text-decoration: none;
				font-style: italic;

				&:hover {
					text-decoration: underline;
				}
			}

			&:not(:last-child)::after {
				content: '/';
				padding: 0 0.5rem;
			}
		}
	}
}
.pagination {
	display: flex;
	justify-content: center;
	gap: var(--s-half);
	margin: var(--s-2) 0;
	list-style-type: none;

	.page-item a {
		padding: var(--s-half) var(--s-1);
		border: 1px solid var(--primary);
		border-radius: var(--roundness);
		text-decoration: none;
		color: var(--primary);
	}

	.page-item.active a {
		background: var(--primary-trans);
		color: var(--primary-dark);
	}
}
.product-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(200px, 1fr));

	@media (max-width: 1330px) {
		grid-template-columns: repeat(2, minmax(200px, 1fr));
	}
}
.filter-group {
	border: 2px solid #000;
	margin-bottom: 1rem;
}
figure.product-card {
	position: relative;
	width: 360px;
	max-width: 100%;
	aspect-ratio: 1;

	display: inline-grid;
	grid-template-areas: 
		'img'
		'info'
	;
	grid-template-rows: 69% 31%;
	grid-template-columns: 100%;

	scroll-snap-align: start;

	margin: 0;
	overflow: hidden;
	color: var(--primary);
	border-radius: calc(var(--roundness) * 2);

	--heading-color: var(--primary);

	img {
		grid-area: img;
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		-o-object-position: center;
		   object-position: center;
	}

	figcaption {
		grid-area: info;

		display: grid;
		grid-template-areas: 
			'stars stars'
			'title link'
		;
		grid-template-columns: 3fr 1fr;

		padding: 1rem;
		margin: 0;
		background: #fff;
		align-self: stretch;
		align-items: end;


		@media (max-width: 1330px) {
			padding: 0.4rem;

			h4 {
				font-size: 0.65rem;
			}

			button {
				font-size: 0;

				svg {
					margin: 0;
				}
			}
		}

		span { grid-area: stars; }
		h4 {
			grid-area: title;
			margin: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-height: 1.5rem;
		}
		button {
			grid-area: link;
			font-family: var(--heading-font);
			font-weight: 700;
			font-size: 18px;
			padding: calc(var(--s-half) * 0.5) calc(var(--spacing) * 0.75);
			white-space: nowrap;
			text-align: center;

			svg {
				margin-left: var(--s-half);
				vertical-align: middle;
			}
		}
	}
}
#cart-dialog {
	position: fixed;
	top: 50%;
	left: auto;
	right: var(--s-1);

	margin: 0;
	height: calc(100vh - var(--s-4));

	translate: 100% -50%;

	&[open] {
		-webkit-animation: open 0.5s forwards;
		        animation: open 0.5s forwards;
	}

	.loading {
		margin-bottom: var(--s-1);
	}

	.loading + #cart-items {
		opacity: 0.5;
		pointer-events: none;
	}

	#cart-items {
		width: 100%;
		text-align: left;
		margin-bottom: var(--s-2);

		transition: opacity 0.25s;

		.empty {
			text-align: center;
		}


		.remove-item {
			color: var(--primary-dark);
			text-decoration: none;
			font-size: 1.5rem;
		}

		th, td {
			padding: var(--s-1);
			vertical-align: middle;
		}

		tr > td {
			border-top: 1px solid rgb(0 0 0 / 0.1);
		}

		td:last-of-type {
			width: 1%;
		}
	}

	.cart-button {
		font-size: 1rem;

		svg {
			vertical-align: bottom;
		}
	}

	.order-location {
		display: grid;
		gap: var(--s-half);
		grid-template-areas:
			"icon name"
			"icon address"
		;
		grid-template-columns: auto 1fr;

		text-align: start;
		padding: var(--s-1);
		margin-bottom: var(--s-1);
		color: #121212;
		background: linear-gradient(to bottom, #fcfcfc, #f2f2f2);
		border: 1px solid #eee;
		border-radius: var(--roundness);
		transition: all 0.25s;

		&.selected {
			color: var(--primary-dark);
			background: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
		}

		&:hover {
			border-color: var(--primary);
		}

		svg {
			grid-area: icon;
			color: var(--primary);
		}

		strong {
			grid-area: name;

			span {
				color: var(--primary-dark);
			}
		}

		address {
			grid-area: address;
		}
	}

	.pickup-time {
		text-align: start;
		padding: var(--s-1);
		margin-bottom: var(--s-1);
		color: #121212;
		background: linear-gradient(to bottom, #fff, #f9f9f9);
		border: 1px solid #eee;
		border-radius: var(--roundness);
		cursor: pointer;

		time {
			color: var(--complement);
		}
	}
}
@-webkit-keyframes open {
	to {
		translate: 0 -50%;
	}
}
@keyframes open {
	to {
		translate: 0 -50%;
	}
}
#pickup-location {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);

	button {
		text-align: start;
		padding: var(--s-1);
		color: #121212;
		background: linear-gradient(to bottom, #fcfcfc, #f2f2f2);
		border: 1px solid #eee;
		border-radius: var(--roundness);
		transition: all 0.25s;

		&.selected {
			color: var(--primary-dark);
			background: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
		}

		&:hover {
			border-color: var(--primary);
		}
	}
}
.location-picker {
	text-decoration: none;
	cursor: pointer;

	svg	{
		vertical-align: bottom;
	}
}
.banner-alert {
	padding-block: var(--s-half);
	background-color: var(--primary);
	--text-color: #fff;

	section {
		position: relative;
	}

	[data-dismiss-alert] {
		position: absolute;
		top: var(--s-1);
		right: var(--s-4);

		font-size: 2rem;
		padding: var(--s-half) var(--s-1);
		background: rgb(0 0 0 / 15%);
	}

	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 0;
		color: var(--text-color);
	}
}
.carousel {
	display: flex;
	gap: var(--s-2);

	& > div {
		position: relative;
		aspect-ratio: 0.89;
		flex-basis: 33.33%;

		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: end;
		gap: var(--s-half);
		padding: 1rem;

		overflow: hidden;
		border-radius: calc(var(--roundness) * 2);

		& > * {
			margin: 0;
			padding: 0;
			color: #fff;
			text-decoration: none;
			position: relative;
			z-index: 3;
		}

		img {
			position: absolute;
			inset: 0;
			height: 100%;
			width: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
			-o-object-position: center;
			   object-position: center;

			z-index: 1;
		}

		&::after {
			content: '';
			position: absolute;
			inset: 30% 0 0 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
			z-index: 2;
		}
	}
}
.hero {
	--heading-color: #fff;
	background-image: var(--image);
	background-size: cover;
	background-position: center;
	padding-block: 16vh;

	section {
		display: flex;
		justify-content: center;

		&:has(article) {
			justify-content: start;
		}
	}
	
	article {
		--heading-color: var(--primary);
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: start;
		background-color: rgb(255 255 255 / 85%);
		-webkit-backdrop-filter: blur(5px);
		        backdrop-filter: blur(5px);
		gap: var(--s-2);
		padding: var(--s-2);
		-webkit-padding-end: calc(var(--spacing) * 8);
		        padding-inline-end: calc(var(--spacing) * 8);
		border-radius: calc(var(--roundness) * 3);

		& > * {
			margin: 0;
			padding: 0;
		}

		h2 {
			font-size: 3.5rem;
			line-height: 1.2;
			font-weight: 300;
		}

		p {
			font-size: 1.11em;
			line-height: 1.5;
		}

		button, .button {
			font-size: 1rem;
		}


		@media (max-width: 1330px) {
			-webkit-padding-end: var(--s-2);
			        padding-inline-end: var(--s-2);

			h2 {
				font-size: 2.5rem;
			}

			button, .button {
				& + button, & + .button {
					margin-top: var(--s-2);
				}
			}
		}
	}
}
.contact-wrapper {
	form {
		display: flex;
		gap: 1rem;
		flex-basis: 50%;
		flex-direction: column;
		align-items: start;

		@media (max-width: 1330px) {
			flex-basis: 100%;

			& + div {
				display: none;
			}
		}
	}
}
.testimonials {
	display: grid;
	grid-template-areas: 
		'img quote quote'
		'img quote quote'
		'img page button'
	;

	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 3fr 3fr 1fr;
	gap: var(--s-2);

	@media (max-width: 1330px) {
		grid-template-areas: 
			'img'
			'quote'
			'page'
			'button'
		;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	background-color: var(--primary);
	padding: var(--s-2);
	border-radius: calc(var(--roundness) * 2);

	img {
		grid-area: img;
		width: 100%;
		height: 100%;
		border-radius: calc(var(--roundness) * 2);
		-o-object-fit: cover;
		   object-fit: cover;
		-o-object-position: center;
		   object-position: center;
	}

	blockquote {
		grid-area: quote;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: start;

		margin: 0;
		background: #fff;
		padding: var(--s-2);
		border-radius: calc(var(--roundness) * 2);
	}

	.pages {
		grid-area: page;
		align-self: start;
		justify-self: start;

		.current {
			font-weight: 700;
			font-size: 2.5rem;
			color: #fff;
		}
		.total {
			font-weight: 300;
			color: #000;
		}
	}
	.buttons {
		grid-area: button;
		align-self: end;
		justify-self: end;

		display: flex;
		gap: var(--s-2);

		button {
			display: grid;
			place-items: center;
			aspect-ratio: 1;
			width: var(--s-3);
			padding: 0;

			background: #fff;
			color: var(--primary);
			border-radius: var(--roundness);
			border: none;
			cursor: pointer;

			&[disabled] {
				color: #fff;
				background: rgb(255 255 255 / 0.5);
				cursor: not-allowed;
			}
		}
	}
}
section.newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	margin-block: 6vh;

	h2 {
		margin-bottom: 1rem;
	}
}
#web-form-newsletter {
	display: flex;
	width: min(500px, 85%);
	outline: 1px solid var(--primary);
	outline-offset: 0.25rem;
	border-radius: calc(4 * var(--roundness));
	padding: 0.25rem;

	input {
		background: transparent;
	}
	
	button {
		font-size: 1rem;
		text-transform: uppercase;
		font-family: var(--heading-font);
	}
}
.slider {
	white-space: nowrap;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--current-margin);
	-webkit-padding-start: var(--current-margin);
	        padding-inline-start: var(--current-margin);

	figure.product-card {
		-webkit-margin-end: var(--s-4);
		        margin-inline-end: var(--s-4);
	}
}
.slider-controls {
	display: flex;
	justify-content: center;
	gap: var(--s-2);

	-webkit-margin-before: var(--s-4);

	        margin-block-start: var(--s-4);

	button {
		display: grid;
		place-items: center;
		aspect-ratio: 1;
		width: var(--s-3);
		padding: 0;

		background: #fff;
		color: var(--primary);
		border-radius: var(--roundness);
		border: none;
		cursor: pointer;

		&[disabled] {
			color: #fff;
			background: rgb(255 255 255 / 0.5);
			cursor: not-allowed;
		}
	}
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-toggle.icon::after {
    content: ' ▼';
    font-size: 0.6em;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.dropdown-item {
    color: black;
    padding: 12px 16px;
    font-size: 18px;
    text-align: start;
    text-decoration: none;
    display: block;
}
.dropdown-item:hover {
    background-color: #f1f1f1;
    color: var(--primary);
}