.œPage
{
	&  > .__cover
	{
		height: clamp(20rem,32dvh,56rem);

		& > :is(video,picture > img)
		{
			object-fit: cover;
			height: 100%;
			width: 100%;
		}

	}

	& > .__header {
		align-self: end;
		grid-row:1;


		& .__heading
		{
			color: #FFFFFF;
			font-size: var(--font-size-xxl);
			font-weight: 800;
			letter-spacing: -4%;
			text-transform: uppercase;
		}

		& .__heading > span
		{
			display: block;
			font-size: var(--font-size);
			font-weight: 600;
		}

	}
}

#subCategories
{
	backdrop-filter: blur(8px);
	background-color: color-mix(in oklab,var(--site-navigation-color-background) 88%, transparent);
	position: sticky;
	padding-block: var(--gap-half-width);
	top: calc(var(--site-navigation-height) - .1rem);
	z-index:2;

	& a
	{
		font-size: 1.2rem;
		font-weight: 600;
	}

	& a.œBadge
	{
		align-content: center;
		display: inline-grid;
		min-height: 4rem;
		padding: 1ch 1ch;
		text-transform: uppercase;
	}
}

.menuCategory
{
	/*font-weight: 600;
	text-transform: uppercase;*/
}

.menuCategory[data-show="list"]
{
	& .menuItem
	{
		display: grid;


		& figure
		{
			display: none;
		}
	}
}
.menuCategory[data-show="thumbnails"]
{

	& > .__heading
	{
		font-weight: 500;
		text-transform: uppercase;
	}

	& > .__header
	{
		align-items: end;
		border-bottom: .2rem solid orange;
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
		margin-block-end: var(--gap-width);
	}

	& ul
	{
		display: grid;
		row-gap: var(--gap-double-width);
	}

	& .menuItem

	{
		column-gap: var(--gap-width);
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr auto;
		/*grid-template-columns: 1fr auto;
		grid-template-rows: repeat(3,auto);*/
		/*grid-template-areas: "name thubmail"
							"description thumbnail"
							"variants";*/


		& figure
		{
			aspect-ratio: 1;
			background-color: lightgray;
			border-radius: var(--gap-half-width);
			grid-column: 1;
			grid-row: 1 / -1;
/*			grid-area: thumbnail;*/
			width: 10.4rem;

		}

		& .__description
		{
			color: color-mix(in oklab, currentColor 64%, transparent);
			grid-column: 2;
			font-size: 1.4rem;
/*			grid-area: description;*/
		}

		& .__name
		{
			align-self: start;
			font-size: 1.6rem;
			font-weight: 600;
			grid-column: 2;
			margin-block-end: var(--gap-quarter-width);
			text-transform: uppercase;
		}

		& .__variants
		{
			justify-self: end;
			display: flex;
			grid-column: 2;
			column-gap: var(--gap-width);
		}

		& .__variant
		{
			display: inline-grid;
		}

		& .__variantName
		{
			font-size: .8rem;
			text-align: right;
			text-transform: uppercase;
		}

		& .__variant:first-of-type
		{
			& .__variantPrice
			{
				font-weight: 500;
			}
		}


	}	
}