/**
 * The full menu page.
 */

.grv-menupage {
	background: var(--grv-cream-deep);
	min-height: 100vh;
	color: var(--grv-ink);
}

/* ================================================================= HEADER */

.grv-menu-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(239, 232, 218, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(110, 99, 71, 0.14);
}

.grv-menu-header-inner {
	max-width: var(--grv-max);
	margin: 0 auto;
	padding: 14px var(--grv-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Pushed to the end of the bar so the logo keeps the start and the order
   button keeps the end; without this, space-between would strand it in the
   middle of the header. */
.grv-menu-account {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--grv-muted);
	white-space: nowrap;
	transition: background 0.25s, color 0.25s;
}

.grv-menu-account svg {
	width: 17px;
	height: 17px;
	display: block;
	flex: 0 0 auto;
}

.grv-menu-account:hover {
	background: rgba(110, 99, 71, 0.09);
	color: var(--grv-ink);
}

.grv-menu-account:focus-visible {
	outline: 2px solid var(--grv-clay);
	outline-offset: 2px;
}

/* On a phone the header has room for the mark and the order button only. */
@media (max-width: 520px) {
	.grv-menu-account span {
		display: none;
	}

	.grv-menu-account {
		padding: 8px;
	}
}

.grv-menu-logo {
	display: flex;
	align-items: center;
}

.grv-menu-logo img {
	height: 34px;
	width: auto;
	display: block;
}

.grv-menu-order {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px 8px 8px;
	min-height: 40px;
	border-radius: 100px;
	background: var(--grv-ink);
	color: var(--grv-cream);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s;
}

.grv-menu-order:hover {
	background: var(--grv-dark);
}

.grv-menu-order:focus-visible {
	outline: 2px solid var(--grv-ink);
	outline-offset: 3px;
}

.grv-menu-order.is-empty {
	padding: 8px 18px;
}

.grv-menu-order-full {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}

.grv-menu-order.is-empty .grv-menu-order-full,
.grv-menu-order:not(.is-empty) .grv-menu-order-empty {
	display: none;
}

/* ==================================================================== BAND

   Not a hero. There was one - eyebrow, display headline, lede, a numbered
   index of the sections and a banner photograph - and it filled the first
   screen of a menu page with everything except the menu. This is the same
   information a printed menu puts at the top of the card: what you are
   looking at, how many, in what currency, and when the place is open. */

.grv-menu-band {
	max-width: var(--grv-max);
	margin: 0 auto;
	padding: clamp(26px, 3.6vw, 44px) var(--grv-gutter) clamp(14px, 1.8vw, 20px);
}

.grv-menu-band-inner {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 18px;
}

.grv-menu-h1 {
	font-family: var(--grv-serif);
	font-weight: 500;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--grv-ink);
	margin: 0;
}

.grv-menu-facts {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--grv-muted);
}

.grv-menu-facts span {
	color: var(--grv-faint);
	margin: 0 2px;
}

/* ================================================================= FILTER

   The one control on the page. It replaces a sticky rail down the left and a
   heading over every section, both of which existed to answer the same
   question: where are the desserts. */

.grv-menu-filters {
	position: sticky;
	top: 62px;
	z-index: 30;
	background: linear-gradient(180deg, var(--grv-cream-deep) 74%, rgba(239, 232, 218, 0));
}

.grv-menu-filters-inner {
	max-width: var(--grv-max);
	margin: 0 auto;
	padding: 10px var(--grv-gutter) 16px;
	display: flex;
	gap: 8px;
	overflow-x: auto;
}

.grv-filter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 100px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid rgba(110, 99, 71, 0.22);
	background: var(--grv-card);
	color: var(--grv-muted);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.grv-filter:hover {
	color: var(--grv-ink);
	border-color: rgba(110, 99, 71, 0.4);
}

.grv-filter.is-on {
	border-color: var(--grv-ink);
	background: var(--grv-ink);
	color: var(--grv-cream);
}

.grv-filter:focus-visible {
	outline: 2px solid var(--grv-ink);
	outline-offset: 2px;
}

.grv-filter-n {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--grv-faint);
}

.grv-filter.is-on .grv-filter-n {
	color: rgba(245, 240, 231, 0.6);
}

/* =================================================================== GRID

   Image first, and no card around it. The product shots are all cut out on
   white, so a bordered tile with a white photo panel is a white box on a
   cream page whatever colour the border is. Multiplying the photograph into
   the page instead drops the white away and leaves the cup standing on the
   paper, which is the whole reason to lead with a photograph at all. */

.grv-menu-main {
	max-width: var(--grv-max);
	margin: 0 auto;
	padding: 0 var(--grv-gutter) clamp(70px, 9vw, 120px);
}

.grv-menu-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 30px);
}

.grv-tile {
	position: relative;
	min-width: 0;
}

.grv-tile-open {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	text-align: start;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.grv-tile-open:focus-visible {
	outline: 2px solid var(--grv-ink);
	outline-offset: 4px;
	border-radius: 4px;
}

.grv-tile-photo {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.grv-tile-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	/* The shots are cut out on white; multiply hands that white back to the
	   page so the cup sits on the paper rather than in a box. */
	mix-blend-mode: multiply;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-tile-open:hover .grv-tile-photo img {
	transform: scale(1.05);
}

/* Nothing photographed yet: the initial, set in the display face, on the
   page's own ground. A grey placeholder box would read as a broken image. */
.grv-tile-blank {
	position: absolute;
	inset: 8%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(110, 99, 71, 0.07);
	color: var(--grv-faint);
	font-family: var(--grv-serif);
	font-size: clamp(44px, 6vw, 72px);
	line-height: 1;
	user-select: none;
}

.grv-tile-cat {
	display: block;
	margin-top: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grv-faint);
}

/* Filtered, the whole grid is one section and every tile would repeat its
   name. The label is orientation for the unfiltered list, nothing more. */
.grv-menu-grid.is-filtered .grv-tile-cat {
	display: none;
}

.grv-menu-grid.is-filtered .grv-tile-line {
	margin-top: 11px;
}

.grv-tile-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 3px;
}

.grv-tile-name {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.15;
	color: var(--grv-ink);
	transition: color 0.2s;
	min-width: 0;
}

.grv-tile-open:hover .grv-tile-name,
.grv-tile.is-in-bag .grv-tile-name {
	color: var(--grv-clay);
}

.grv-tile-price {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: 17px;
	color: var(--grv-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.grv-tile-soldout {
	font-family: var(--grv-sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grv-soft);
}

/* The add control sits in the photograph's bottom corner. The overlay is the
   photograph's own square - the tile is taller than that, and anchoring to
   the tile would drop the button onto the price. */
.grv-tile-act {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

.grv-tile-act > * {
	pointer-events: auto;
}

.grv-tile-add {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	border: none;
	background: var(--grv-ink);
	color: var(--grv-cream);
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px -12px rgba(43, 39, 31, 0.8);
	transition: background-color 0.2s, transform 0.2s;
}

.grv-tile-add:hover {
	background: var(--grv-clay);
	transform: translateY(-2px);
}

.grv-tile-add:focus-visible {
	outline: 2px solid var(--grv-ink);
	outline-offset: 2px;
}

.grv-tile-add[hidden],
.grv-tile-step[hidden] {
	display: none;
}

.grv-tile-step {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 40px;
	padding: 0 4px;
	border-radius: 100px;
	background: var(--grv-ink);
	box-shadow: 0 10px 22px -12px rgba(43, 39, 31, 0.8);
}

.grv-tile-step button {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 100px;
	font-size: 19px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.grv-tile-step button:first-child {
	background: rgba(245, 240, 231, 0.14);
	color: var(--grv-cream);
}

.grv-tile-step button:first-child:hover {
	background: rgba(245, 240, 231, 0.28);
}

.grv-tile-step button:last-child {
	background: var(--grv-clay);
	color: #f8f4ec;
}

.grv-tile-step button:last-child:hover {
	background: #a9603f;
}

.grv-tile-step button:focus-visible {
	outline: 2px solid var(--grv-cream);
	outline-offset: -3px;
}

.grv-tile-step span {
	min-width: 22px;
	text-align: center;
	color: var(--grv-cream);
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* Grey, not ghosted. The photograph is already multiplying into the page, so
   fading it as well took the lighter shots down to nothing and the tile read
   as a missing image rather than a sold-out one. The word does that job. */
.grv-menupage .grv-tile.is-sold-out .grv-tile-photo img {
	filter: grayscale(1);
	opacity: 0.6;
}

.grv-menupage .grv-tile.is-sold-out .grv-tile-name {
	color: var(--grv-muted);
}

.grv-menu-none {
	margin: 0;
	padding: 40px 0;
	color: var(--grv-soft);
	font-size: 15px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 600px) {
	.grv-menu-band-inner {
		gap: 6px;
	}

	.grv-menu-h1 {
		flex: 1 0 100%;
	}

	/* Two across. Any narrower and the photograph stops being worth the
	   space it is taking. */
	.grv-menu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 14px;
	}

	.grv-tile-name {
		font-size: 16.5px;
	}

	.grv-tile-price {
		font-size: 15px;
	}

	.grv-tile-add,
	.grv-tile-step {
		height: 36px;
	}

	.grv-tile-add {
		width: 36px;
		font-size: 20px;
	}

	.grv-tile-step button {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 720px) {
	.grv-menu-filters {
		top: 61px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grv-filter,
	.grv-tile-photo img,
	.grv-tile-add,
	.grv-tile-name,
	.grv-tile-step button {
		transition: none;
	}

	.grv-tile-open:hover .grv-tile-photo img {
		transform: none;
	}

	.grv-tile-add:hover {
		transform: none;
	}
}

/* ============================================================ BAG COUNT */

.grv-menu-bag-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 100px;
	background: var(--grv-clay);
	color: #f8f4ec;
	font-size: 13px;
	font-weight: 800;
}

/* ============================================================ ITEM DIALOG */

.grv-item-dialog {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(30, 25, 18, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 40px);
}

.grv-item-dialog[hidden] {
	display: none;
}

.grv-item-box {
	background: var(--grv-card);
	border-radius: 16px;
	overflow: hidden;
	width: min(880px, 100%);
	max-height: 90vh;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	box-shadow: 0 40px 90px -30px rgba(30, 25, 18, 0.7);
}

.grv-item-media {
	position: relative;
	background: #fff;
	min-height: 300px;
}

.grv-item-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grv-item-media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c9bea5;
	font-family: var(--grv-serif);
	font-size: 22px;
}

.grv-item-detail {
	position: relative;
	padding: clamp(24px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.grv-item-close {
	position: absolute;
	top: 16px;
	inset-inline-end: 16px;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	border: 1px solid rgba(110, 99, 71, 0.2);
	background: var(--grv-card);
	color: var(--grv-muted);
	font-size: 20px;
	line-height: 1;
}

.grv-item-cat {
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--grv-clay);
	font-weight: 600;
}

.grv-item-name {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.05;
	margin: 10px 0 0;
	color: var(--grv-ink);
	padding-inline-end: 40px;
}

.grv-item-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 14px 0 18px;
}

.grv-item-price-cur {
	font-size: 13px;
	font-weight: 600;
	color: #9a8a66;
}

.grv-item-price-value {
	font-family: var(--grv-serif);
	font-size: 34px;
	font-weight: 600;
	color: var(--grv-ink);
}

.grv-item-price-vat {
	font-size: 12px;
	color: #9a8a66;
	margin-inline-start: 6px;
}

.grv-item-note {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--grv-muted);
	margin: 0;
}

.grv-item-actions {
	margin-top: auto;
	padding-top: 26px;
}

.grv-item-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px;
	border-radius: 11px;
	border: none;
	background: var(--grv-ink);
	color: var(--grv-cream);
	font-size: 15px;
	font-weight: 600;
}

.grv-item-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--grv-ink);
	border-radius: 11px;
	padding: 7px 8px;
}

.grv-item-step button {
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 8px;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grv-item-step button:first-child {
	background: rgba(245, 240, 231, 0.14);
	color: var(--grv-cream);
}

.grv-item-step button:last-child {
	background: var(--grv-clay);
	color: #f8f4ec;
}

.grv-item-step span {
	color: var(--grv-cream);
	font-weight: 700;
	font-size: 16px;
}

.grv-item-sold {
	text-align: center;
	padding: 14px;
	border-radius: 11px;
	background: rgba(110, 99, 71, 0.1);
	color: var(--grv-muted);
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 720px) {
	.grv-item-box {
		grid-template-columns: 1fr;
	}

	.grv-item-media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* ------------------------------------------------------- opening countdown */

/*
 * The strip the QR code lands on before opening day. It sits above the banner
 * rather than over it: this is news, not decoration, and it should be readable
 * at a glance from a table.
 */
.grv-menu-countdown {
	background: var(--grv-ink, #2c2519);
	color: #f6efdf;
}

.grv-menu-countdown-inner {
	max-width: var(--grv-max, 1180px);
	margin: 0 auto;
	padding: 11px var(--grv-gutter, 22px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 18px;
	text-align: center;
}

.grv-menu-countdown-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.grv-menu-countdown-clock {
	display: inline-flex;
	gap: 10px;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: #d7cbb4;
}

.grv-menu-countdown-clock b {
	color: var(--grv-clay, #c98f5f);
	font-weight: 700;
	margin-inline-end: 2px;
}