div#page {
	display: flex;

	@media($min-desktop-viewport) {
		display: grid;
		grid-template-columns: auto minmax(0, $width) auto;
		grid-template-rows: fit-content(80px) auto auto auto;
	}
}

.gru-content .combo-placeholder--columns-top {
	.text-cell h1 {
		margin: 0;
	}
}

main {
	margin-top: 1rem;

	@media($min-desktop-viewport) {
		margin-top: 3rem;
		grid-area: 3 / 2 / 4 / 3;
	}
}

.page-width, .header-width, .nav-width {
	max-width: unset;
}

.green-cell {
	.gru-content &.cell {
		background: $green-light;
		border: none;

		h2:first-child {
			text-align: center;
			border: none;
			color: $green-dark;
			padding: $space-medium $space-medium 0 $space-medium;
			text-transform: uppercase;
			margin-top: $space-medium;
		}
	}
}

#sidebar {
	.cell {
		@extend .green-cell;
	}

	.pk-button, .pk-big-button,
	[class*='pk-button-'], [class*='pk-big-button-'] {
		&.link-cell ul > li > a {
			font-size: $fz-4;
		}
	}
}

.link-cell.cell {
	&.pk-button, &.pk-big-button {
		ul > li > a {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: $space-small;

			> img {
				max-height: 2.5rem;
			}
		}
	}
}

.gru-content div.searchcell,
#sidebar div.searchcell {
	form {
		display: grid;
		gap: $space-small;
		padding: 1rem;

		@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
			grid-template-columns: auto 170px;
		}

		input {
			margin: auto;
			width: 100%;
		}

		button.submit-button {
			@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
				grid-column: 2;
				margin: 0 $space-medium;
			}
			margin-top: $space-mmedium;
			margin-right: 0;
		}
	}
}

.gru-content div.cell {
	margin-bottom: $space-xlarge;

	@media($max-mobile-viewport) {
		margin-bottom: $space-large;
	}

	h2:first-child {
		margin: 0;
		border-bottom: $cell-border;

		@media($max-mobile-viewport) {
			font-size: $fz-4-mobile;
		}
	}

	&.foldable {
		h2:first-child {
			margin: 0;
			&::after {
				color: $green;
			}
		}

		&.folded {
			h2:first-child {
				border-bottom-right-radius: $cell-border-radius;
				border-bottom-left-radius: $cell-border-radius;
				border-bottom: 0;
				background: white;
			}

			&:hover {
				box-shadow: 1px 3px 4px 0px rgba(11,157,157,0.75);
			}
		}
	}
}

%cell-links-list {
	> li {
		font-size: $fz-5;
		font-weight: normal;

		&:first-child:not(.more-items--item) a {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		> a {
			padding: $space-large;
		}
	}
}

.gru-content div.link-list-cell.has-asset-picture,
.gru-content div.wcsformsofcategorycell.has-asset-picture {
	> div {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto 1fr;

		& > h2:first-child {
			grid-area: 1 / 2 / 2 / 2;
			height: 100%;
			align-self: center;

			border-top-left-radius: 0;
			padding-left: $space-small;
		}

		& > picture {
			grid-area: 1 / 1 / 2 / 2;
			border-bottom: $cell-entry-border;
			border-top-left-radius: $cell-border-radius;
			background: $title-background;
			display: flex;
			align-items: center;

			img {
				height: 4rem * $scale;
			}
		}

		& > .links-list {
			grid-area: 2 / 1 / 3 / 3;
		}
	}

	&.foldable.folded > div {
		& > h2:first-child {
			border-bottom-right-radius: $cell-border-radius;
		}

		& > picture {
			background: white;
			border-bottom: 0;
			border-bottom-left-radius: $cell-border-radius;
		}
	}
}

.gru-content .text-cell {
	border: none;

	h1, h2 {
		margin: 0.7em 1rem;
	}
}

.pk-button, .pk-button-cancel {
	&.wcs-form-cell a {
		@extend %button;
		display: block;
		width: 100%;
	}

	&.link-cell div.links-list > ul > li > a,
	&.wcs-form-cell a  {
		border-radius: $cell-border-radius;
		font-size: $fz-2;
		padding: $space-mmedium !important;
		text-transform: none !important;

		@media ($max-mobile-viewport) {
			font-size: $fz-4-mobile !important;
		}

		#sidebar & {
			font-size: $fz-5;
		}
	}
}

.gru-content .tracking-code-input-cell {
	form {
		display: grid;
		grid-template-columns: 1fr;

		@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
			grid-template-columns: auto 170px;
		}

		p {
			margin-top: 0;

			@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
				grid-column: span 2;
			}
		}

		input {
			@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
				margin: auto 0;
			}
		}

		button {
			margin-top: $space-small;
			margin-right: 0;

			@media (max-width: $mobile-limit) and (min-width: $very-small-limit) {
				margin: 0 $space-medium 0 $space-medium;
			}
		}
	}
}

.gru-content,
.gru-content #sidebar {
	& div.cell.shown-because-admin {
		background-image: repeating-linear-gradient(-45deg, #bbb 0px, #bbb 14px, transparent 15px, transparent 30px);
		&:hover {
			background-image: repeating-linear-gradient(-45deg, #eee 0px, #eee 14px, transparent 15px, transparent 30px);
		}
	}
}
