/*------------------------------------------------------------------------------*/
/* Category Page Layout
/*------------------------------------------------------------------------------*/

.CategoryLayout {
	display: flex;
	gap: var(--margin-large) var(--grid-gutter);
	margin-bottom: 20px;
}

.CategoryAside {
	--sidebar-width: 24rem;
	flex: 0 1 var(--sidebar-width);
}

.MainCategoryID-382 .CategoryAside {
	--sidebar-width: 24rem;
	flex: 0 1 var(--sidebar-width);
  	position: sticky;
  	top: 80px; /* headerin korkeus */
  	height: calc(100vh - 80px); 
  	overflow-y: auto;
  	overflow-x: hidden;
  	scrollbar-gutter: stable;
  	padding-right: 12px;
	padding-bottom: 40px;
}


.CategoryAside:empty {
	display: none;
}

.CategoryMain {
	flex: 1;
}

@media screen and (max-width: 1024px) {
	.CategoryLayout {
		display: block;
	}

	.CategoryAside {
		display: none;
	}
}

.SiteLayoutColumns .CategoryAside {
	display: none !important;
}

/*------------------------------------------------------------------------------*/
/* Product Page Layout
/*------------------------------------------------------------------------------*/

.ProductLayout {
	display: grid;
	gap: 3vw;
	grid-template-columns: minmax(340px, 1fr) 1fr;
	margin-bottom: var(--margin-large);
}

.SiteLayoutColumns .ProductLayout {
	grid-template-columns: minmax(340px, 500px) 1fr;
}

@media screen and (max-width: 1320px) {
	.SiteLayoutColumns .ProductLayout {
		grid-template-columns: minmax(340px, 1fr) 1fr;
	}
}

@media screen and (max-width: 1024px) {
	.ProductLayout {
		display: block;
		margin-inline: auto;
		max-width: 500px;
	}
}

/*------------------------------------------------------------------------------*/
/* Info Page Layout
/*------------------------------------------------------------------------------*/

.BaseLayout {
	--sidebar-width: 24rem;
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: 1fr var(--sidebar-width);
}

.BaseLayout .SideNavigation {
	position: sticky;
	top: calc(var(--margin-large) + 4rem);
}

@media screen and (max-width: 860px) {
	.BaseLayout {
		display: block;
		margin-inline: auto;
	}

	.BaseLayout .SideNavigation {
		border-top: 1px solid var(--border-color);
		margin-top: var(--grid-gutter);
		padding-top: var(--grid-gutter);
	}
}