header {
	button.shopping-bag {
		position: relative;

		span.n {
			background-color: var(--color-brand);
			border-radius: 100lvh;
			color: white;
			font-size: small;
			font-weight: 600;
			inset: 0 0 auto auto;
			padding-inline: 1.5ch;
			position: absolute;
			transform: translateY(-50%);
		}
	}

	button.shopping-bag.has-items {
		background-color: white;
		/* See joshwcomeau.com/css/designing-shadows/ */
		box-shadow:	0 0px 0px 1px hsl(0deg 0% 0% / 0.05),
				0 1px 1px -0.5px hsl(0deg 0% 0% / 0.05),
				0 3px 3px -1.5px hsl(0deg 0% 0% / 0.05),
				0 6px 6px -3px hsl(0deg 0% 0% / 0.05),
				0 12px 12px -6px hsl(0deg 0% 0% / 0.05);
		position: fixed;
	}
}


.partner {
	align-items: center;
	display: flex;
	color: var(--color-brand);
	font-weight: 600;
	gap: var(--dim-logo-clearing);
	text-transform: uppercase;

	svg {
		stroke: var(--color-brand);
		stroke-width: var(--dim-strokewidth-svg-xb);
	}
}


section.hero {
	display: contents;

	div[role=region] {
		align-items: center;
		display: flex;
		gap: var(--dim-bleed-h);
		grid-column: content-s;
		justify-content: space-between;
		margin-bottom: var(--dim-bleed-h);

		hgroup {

			h1 {
				color: var(--color-brand);
				/* Simple way to prevent blowout */
				font-size: clamp(3rem, 10vh, 8rem);
				line-height: 0.9;
				margin-top: var(--dim-gap-section);
				max-width: 15ch;

				span.accent {
					color: var(--color-copy-primary);
					position: relative;
					z-index: 1;

					span.underline-doodle {
						position: relative;
						white-space: nowrap;

						svg {
							fill: var(--color-brand);
							position: absolute;
							stroke: var(--color-brand);
							stroke-width: 3.00;
							transform: translateY(50%);
							width: 100%;
							z-index: -1;
						}
					}
				}
			}

			p { margin-top: 7.5rem; }

		}

		.group-search-location {

			p { max-width: unset; }

			.search-location {
				max-width: var(--dim-maxwidth-content-s);
				padding-block: 1rem;
				position: relative;
			}
		}

		.group-app-store-buttons {
			font-size: small;
			margin-top: 1rem;
			margin-bottom: var(--dim-gap-section);

			a {
				span:nth-of-type(1) { font-size: small; }
				span:nth-of-type(2) { font-weight: 600; }

				svg { stroke: none; }
			}

			a.apple svg { fill: var(--color-copy-primary); }
		}
	}

	picture {
		grid-column: full-bleed;
		max-height: 60lvh;
	}

}


section.app {
	/* Margin-top alone would screw with JavaScript scrolling */
	margin-top: 0;
	padding-top: var(--dim-bleed-h);

	div[role=list].restaurants {
		align-items: start;
		display: grid;
		grid-gap: var(--dim-bleed-h);
		grid-template-columns: repeat(
			auto-fill, minmax(var(--dim-maxwidth-content-card), 1fr));

		.card-restaurant {
			ul {
				justify-content: space-between;

				li.price_delivery { margin-left: auto; }
			}
		}

		.card-restaurant {
			position: relative;

			div.status {
				background-color: #FDEFD8;
				margin: 1ex;
				padding: 1ex 1ch;
				position: absolute;
				inset: 0 auto auto 0;
				width: unset;

				svg {
					stroke-width: var(--dim-strokewidth-svg-xb);
				}
			}
		}

		.card-restaurant[data-status="3"] {
			picture { opacity: .2; }
		}

		a:hover div hgroup { text-decoration: none; }
	}
}


section.about {
	display: contents;

	hgroup,
	ul {
		grid-column: content-s;
	}

	ul {
		align-items: start;
		display: grid;
		grid-gap: var(--dim-gap-r-h);
		grid-template-columns: repeat(
			auto-fill, minmax(var(--dim-maxwidth-content-card), 1fr));
		margin-top: var(--dim-gap-section);

		li {
			align-items: flex-start;
			flex-direction: column;

			svg {
				--dim-svg: 3.00rem;
				--strokew-svg: var(--strokewidth-svg-b);

				stroke: var(--color-brand);
			}

			h3 {
				color: var(--color-brand);
				margin-top: 0;
			}

			p { margin-top: 0; }
		}
	}

	div.cta {
		grid-column: content-s;
		margin-block: var(--dim-gap-section);
		text-align: center;

		menu { justify-content: center; }

		p { margin: 0 auto; }

		p.secondary { margin-top: 1rem; }
	}
}


.card-options {
	legend {
		margin-bottom: 1rem;

		.name {
			font-size: small;
			font-weight: 600;
		}
	}

	.feedback.error { margin-top: 0; }

	div[role=list] {
		gap: 1rem;

		label {
			background-color: var(--color-bg-button);
			border-radius: 100lvh;
			cursor: pointer;
			font-size: 1rem;
			padding: 1ex 2ch;

			input { display: none; }

			span.price {
				font-weight: 400;
				margin-left: 1ch;
			}
		}

		label:has(> input:checked) {
			background-color: var(--color-copy-primary);
			color: white;
		}
	}
}

.card-options + .card-options { margin-top: 1rem; }


.card-product,
.card-restaurant {

	align-items: flex-start;
	background: none;
	border-radius: .2em;
	gap: 0;
	overflow: hidden;
	padding: 0;
	flex-direction: column;
	text-decoration: none;

	div {
		background-color: var(--color-bg-brand);
		padding: 1rem;
		width: 100%;

		hgroup {
			width: 100%;

			* {
				display: block;  /* Otherwise ellipsis won't work */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	&:hover {
		background-color: unset;
		text-decoration: none;
	}
}


.card-category {
	div[role=toolbar] {
		align-items: center;
		gap: var(--dim-gap-lists);
		justify-content: space-between;
		padding: var(--dim-bleed-h);

		menu {
			display: contents;

			button {
				border-radius: 100vh;
				padding: 1rem;
			}

			button:first-of-type { margin-left: auto; }
		}
	}

	div[role=region] {
		display: flex;
		align-items: flex-start;
		overflow: scroll hidden;
		gap: var(--dim-bleed-h);
		padding-inline: var(--dim-bleed-h);

		.card-product {
			min-width: var(--dim-minwidth-content-card);
			max-width: var(--dim-maxwidth-content-card);

			hgroup {
				padding-inline: 0;

				h4.name { font-weight: 600; }
			}
		}
	}

	&.view-grid {
		div[role=toolbar] {
			background-color: white;
			position: sticky;
			top: 0;

			button.scroll-left,
			button.scroll-right {
				display: none;
			}
		}

		div[role=toolbar].sticky {
			/* See joshwcomeau.com/css/designing-shadows/ */
			box-shadow:	0 0px 0px 1px hsl(0deg 0% 0% / 0.05),
					0 1px 1px -0.5px hsl(0deg 0% 0% / 0.05),
					0 3px 3px -1.5px hsl(0deg 0% 0% / 0.05),
					0 6px 6px -3px hsl(0deg 0% 0% / 0.05),
					0 12px 12px -6px hsl(0deg 0% 0% / 0.05);
		}

		div[role=region] {
			display: grid;
			grid-column: regular;
			grid-template-columns: repeat(
				auto-fill, minmax(var(--dim-maxwidth-content-card), 1fr));
			justify-content: center;

		}
	}
}


.doc-business-auth,
.doc-business-interest {
	gap: 1rem 1rem;

	a.logo {
		padding-left: 0;
	}

	hgroup { margin-block: 5rem; }
}


.doc-business-auth {

	main {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-width: var(--dim-minwidth-content-s);
		padding: var(--dim-bleed-h);

		div.wrapper-group-main {
			margin-block: auto;
			width: 100%;

			.wrapper-phone {
				margin-top: 5rem;
				margin-bottom: 1rem;

				.feedback {
					margin-top: 1rem;
					margin-bottom: 0;
				}

				button {
					font-size: small;
					margin-top: 1rem;
				}
			}

			.feedback {
				max-width: unset;
			}
		}

		nav {
			font-size: small;

			ul {
				list-style: none;
				justify-content: center;
				margin-block: 2.5rem;

				a,
				button {
					background: none;

					&:hover { background: none; }
				}
			}
		}
	}

	aside {
		flex: 9999;

		picture {
			height: 100%;

			img { min-width: var(--dim-minwidth-content-card); }
		}
	}
}


.doc-business-interest {
	padding: var(--dim-bleed-h);

	div.wrapper-input {
		margin: 0 auto;
		max-width: var(--dim-maxwidth-content-s);

		label { margin-top: 1rem; }

		select { margin-top: 1ex; }

		div.controls {
			align-items: flex-end;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			justify-content: flex-end;
			margin-top: 5rem;
			margin-bottom: 1rem;

			button {
				background-color: var(--color-brand);
				padding-right: 1ch;

				&:hover { background-color: black; }
			}

			p { text-align: right; }
		}
	}
}


.doc-location-results {

}


.doc-product,
.doc-restaurant {
	hgroup span[role=doc-subheading] {
		svg {
			/* Icon is too complicated for a bolder stroke */
			stroke-width: var(--dim-strokewidth-svg-b);
			/* Optical alignment */
			transform: translateY(0.2ex);
		}
	}

	div.disclaimer {
		margin-block: var(--dim-bleed-h);  /* This is intentional */

		p { max-width: unset; }
	}
}


.doc-product {
	div.photo,
	div.card {
		max-width: 100% !important;
	}

	div.photo {
		picture { min-width: var(--dim-minwidth-content-card); }
	}

	div.card {
		margin-inline: var(--dim-bleed-h);;

		div.modifications {
			margin-block: var(--dim-gap-section);

			details svg.chevron { margin-left: auto; }

			details.options {

			}

			details.comments {
				margin-top: 2.5rem;

				input { margin-top: 1rem; }
			}

		}

		div.shopping-bag-controls {
			gap: 1rem;
			justify-content: space-between;

			span.price_item {
				font-size: var(--dim-font-h2);
				font-weigth: 600;
			}

			button.add:hover { background-color: var(--color-brand); }
		}
	}

	div.disclaimer { margin-inline: var(--dim-bleed-h); }
}


.doc-restaurant {

	div.feedback.busy {
		margin-block: var(--dim-bleed-h);
		margin-inline: auto;
	}

	hgroup,
	.details,
	.disclaimer {
		padding-inline: var(--dim-bleed-h);
	}

	hgroup {
		margin-top: var(--dim-bleed-h);
	}

	.details {
		font-size: small;

		address span:nth-of-type(1)::after { content: ","; }

		.stats { margin-block: var(--dim-bleed-h); }

		a span:first-of-type { font-weight: 600; }
	}

}


.doc-search-location-results {
	div[role=option] {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: var(--dim-logo-clearing);
		padding: 1rem;

		&:hover { background-color: var(--color-bg-button); }

		address {
			span { display: block; }

			span:first-of-type { font-weight: 600; }
		}
	}
}

.doc-search-location-results.no-results {
	padding: 1rem;
	text-align: center;
}


.doc-shopping-bag {
	> div[role=region] {
		padding: var(--dim-bleed-h);

		div.receipt {
			display: flex;
			flex-direction: column;
			gap: 2.5rem;
			margin-block: 2.5rem;

			> div {
				align-items: center;
				gap: 2.5rem;

				picture {
					--dim-picture: 5rem;

					border-radius: 100%;
					min-height: 0;  /* For no-img */
					height: var(--dim-picture);
					width: var(--dim-picture);
					overflow: hidden;

					img { object-fit: cover }
				}

				div.overview {
					h3 { margin: 0; }

					p {
						overflow: hidden;
						white-space: nowrap;
					}
				}

				div.rhs {
					align-items: center;
					margin-left: auto;

					div.plusminus {
						font-size: small;
						gap: 1ch;

						input {
							-moz-appearance: textfield;
							border-bottom-width: 0;
							font-weight: 600;
							padding: 0;
							text-align: center;
							width: 3ch;
						}

						input::-webkit-outer-spin-button,
						input::-webkit-inner-spin-button {
							-webkit-appearance: none;
						}
					}

					span { font-weight: 600; }
				}
			}
		}

		div.receipt-summary {
			ul {
				align-items: flex-end;
				flex-direction: column;
				gap: 1rem;

				li span { margin-left: 1ch }

				li.total,
				li.subtotal {
					font-weight: 600;
				}
			}

			div.feedback.order-size {
				margin-left: auto;
				margin-top: 1rem;
			}
		}

		hr {
			background-color: var(--color-hr);
			height: 1px;
		}

		div.address {
			div.side-by-side {
				justify-content: space-between;

				address {
					span { display: block; }

					span:first-of-type { font-weight: 600; }
				}
			}
		}

		div.psu-payment {
			label { margin-top: 1rem; }

			select { margin-top: 1ex; }
		}

		menu.payment-actions {
			justify-content: center;

			button.action-pay:hover { background-color: var(--color-brand); }
		}
	}
}

@media only screen and (max-width: 120ch) {

	header.wrapper-content div.header_widget_right button {
		flex-direction: column;
		font-size: small;
		gap: 0;
	}

	.doc-business-auth main { min-width: unset; }

	section.hero hgroup {
		span.underline-doodle svg { display: none; }

		h1 {
			font-size: 4rem !important;
			line-height: 1.1 !important;
		}

		p { margin-top: 1rem !important; }
	}

	div.card-category div[role=toolbar] button { display: none; }
}