/**
 * The Grovado storefront.
 */

.grv-storefront {
	background: var(--grv-cream);
	color: var(--grv-ink);
	overflow-x: hidden;
}

/* ============================================================ INTRO SPLASH */

.grv-splash {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(90% 70% at 50% 32%, rgba(190, 115, 80, 0.28) 0%, rgba(190, 115, 80, 0) 55%),
		radial-gradient(120% 120% at 50% 28%, #3a2e22 0%, #241c14 45%, #17110b 78%, #0e0a06 100%);
	transition: opacity 0.7s ease;
}

.grv-splash.is-fading {
	opacity: 0;
	pointer-events: none;
}

.grv-splash-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	padding: 24px;
}

.grv-splash-steam {
	overflow: visible;
	margin-bottom: 2px;
}

.grv-splash-steam path {
	animation: grv-steam 2.6s ease-in-out infinite;
}

.grv-splash-steam path:nth-child(2) {
	animation-delay: 0.5s;
}

.grv-splash-steam path:nth-child(3) {
	animation-delay: 1s;
}

.grv-splash-logo {
	width: min(330px, 72vw);
	height: auto;
	animation: grv-splash-logo 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.grv-splash-rule {
	height: 1.5px;
	background: linear-gradient(90deg, transparent, #be7350, transparent);
	animation: grv-splash-line 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}

.grv-splash-sub {
	font-size: 11.5px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #b8a98a;
	font-weight: 600;
	animation: grv-splash-sub 1.2s ease 0.85s both;
}

@keyframes grv-steam {
	0% { opacity: 0; transform: translate(0, 10px); }
	28% { opacity: 0.6; transform: translate(-3px, 2px); }
	58% { opacity: 0.4; transform: translate(3px, -7px); }
	100% { opacity: 0; transform: translate(-2px, -18px); }
}
@keyframes grv-splash-logo {
	0% { opacity: 0; transform: translateY(16px) scale(0.93); }
	100% { opacity: 1; transform: none; }
}
@keyframes grv-splash-line {
	0% { width: 0; opacity: 0; }
	100% { width: 130px; opacity: 1; }
}
@keyframes grv-splash-sub {
	0% { opacity: 0; letter-spacing: 0.5em; }
	100% { opacity: 0.8; letter-spacing: 0.34em; }
}

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

.grv-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 22px var(--grv-gutter);
	background: rgba(245, 240, 231, 0);
	border-bottom: 1px solid rgba(110, 99, 71, 0);
	transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-header.is-scrolled {
	padding: 12px var(--grv-gutter);
	background: rgba(245, 240, 231, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 30px -22px rgba(60, 52, 38, 0.5);
	border-bottom-color: rgba(110, 99, 71, 0.12);
}

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

.grv-logo {
	position: relative;
	display: block;
	height: 34px;
	transition: height 0.5s;
}

.grv-header.is-scrolled .grv-logo {
	height: 30px;
}

.grv-logo img {
	height: 100%;
	width: auto;
	display: block;
	transition: opacity 0.5s;
}

.grv-logo-mark {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.grv-header.is-scrolled .grv-logo-full {
	opacity: 0;
}

.grv-header.is-scrolled .grv-logo-mark {
	opacity: 1;
}

.grv-nav {
	display: flex;
	align-items: center;
	gap: 38px;
}

.grv-nav-link {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #ede4d2;
	transition: color 0.5s, opacity 0.3s;
}

.grv-header.is-scrolled .grv-nav-link {
	color: #3a3426;
}

/* The account link turns with the rest of the nav once the bar goes beige;
   it sat in its cream-on-dark colour and vanished. */
.grv-header.is-scrolled .grv-nav-account {
	color: #3a3426;
}

.grv-header.is-scrolled .grv-nav-account:hover {
	background: rgba(58, 52, 38, 0.08);
	color: #2b271f;
}

.grv-nav-link:hover {
	opacity: 0.7;
}

/* ---------- Menu mega panel ----------
   The one nav item with a destination of its own. Clicking it opens the full
   menu page; hovering (or tabbing to it) previews what is on that page, so the
   panel is a shortcut and never the only way through. */

.grv-nav-mega {
	position: relative;
	display: flex;
	align-items: center;
}

.grv-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.grv-nav-caret {
	width: 9px;
	height: 6px;
	opacity: 0.65;
	transition: transform 0.25s ease;
}

.grv-nav-mega.is-open .grv-nav-caret {
	transform: rotate(180deg);
}

.grv-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* A transparent bridge, so the pointer can cross the gap without the
	   panel closing under it. */
	padding-top: 26px;
	width: min(880px, calc(100vw - 2 * var(--grv-gutter)));
	z-index: 5;
}

.grv-mega-card {
	display: grid;
	grid-template-columns: 1.45fr 1fr 0.85fr;
	gap: clamp(18px, 2vw, 30px);
	align-items: start;
	padding: clamp(20px, 2vw, 28px);
	border-radius: 20px;
	background: rgba(247, 243, 235, 0.97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(110, 99, 71, 0.14);
	box-shadow: 0 40px 80px -40px rgba(60, 52, 38, 0.65);
	animation: grv-mega-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes grv-mega-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

.grv-mega-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.grv-mega-head {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grv-soft);
	margin-bottom: 8px;
}

.grv-mega-cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
}

.grv-mega-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--grv-ink);
	transition: background 0.2s, color 0.2s;
}

.grv-mega-cat:hover {
	background: rgba(190, 115, 80, 0.1);
	color: var(--grv-clay-deep, #9c593a);
}

.grv-mega-count {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--grv-soft);
	background: rgba(110, 99, 71, 0.1);
	border-radius: 100px;
	padding: 2px 8px;
}

.grv-mega-pick {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 8px;
	border-radius: 12px;
	transition: background 0.2s;
}

.grv-mega-pick:hover {
	background: rgba(190, 115, 80, 0.1);
}

.grv-mega-pick-media {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(110, 99, 71, 0.12);
}

.grv-mega-pick-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grv-mega-pick-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.grv-mega-pick-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--grv-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.grv-mega-pick-price {
	font-size: 12.5px;
	color: var(--grv-soft);
}

.grv-mega-visual {
	position: relative;
	display: block;
	align-self: stretch;
	border-radius: 14px;
	overflow: hidden;
	min-height: 190px;
	background: #2b271f;
}

.grv-mega-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-mega-visual:hover img {
	transform: scale(1.06);
}

.grv-mega-visual-copy {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(24, 21, 16, 0), rgba(24, 21, 16, 0.86));
	color: #f4eee1;
}

.grv-mega-visual-title {
	font-family: var(--grv-serif);
	font-size: 20px;
	font-weight: 600;
}

.grv-mega-visual-cta {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grv-clay-light);
}

/* The mega panel is a desktop nicety; on touch widths the nav item is a plain
   link to the menu page and the categories are listed in the mobile sheet. */
@media (max-width: 1080px) {
	.grv-mega {
		display: none;
	}
}

/* The account link sits before the bag: signing in is a quieter act than
   buying, so it is a text link with a mark rather than a second filled pill
   competing with the clay one. */
.grv-nav-account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--grv-on-dark-soft);
	white-space: nowrap;
	transition: background 0.3s, color 0.3s;
}

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

.grv-nav-account:hover {
	background: rgba(240, 232, 214, 0.1);
	color: var(--grv-on-dark);
}

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

.grv-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 100px;
	background: var(--grv-clay);
	color: #f8f4ec;
	box-shadow: 0 8px 22px -10px rgba(190, 115, 80, 0.7);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
	flex: 0 0 auto;
}

.grv-cart:hover {
	transform: translateY(-2px);
	background: #ca815e;
}

.grv-cart-icon {
	width: 21px;
	height: 21px;
	display: block;
}

.grv-cart-count {
	position: absolute;
	top: -3px;
	inset-inline-end: -3px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background: var(--grv-ink);
	color: var(--grv-cream);
	font-size: 11.5px;
	font-weight: 800;
	border: 2px solid var(--grv-cream);
}

.grv-header-mobile {
	display: none;
	align-items: center;
	gap: 8px;
}

.grv-burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 8px;
}

.grv-burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #f0e8d6;
	border-radius: 2px;
	transition: transform 0.4s, opacity 0.3s, background 0.5s;
}

.grv-header.is-scrolled .grv-burger span {
	background: #3a3426;
}

.grv-burger.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.grv-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.grv-burger.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================ MOBILE MENU */

.grv-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: #221e18;
	display: flex;
	flex-direction: column;
	padding: 96px 28px 40px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.grv-mobile-menu[hidden] {
	display: none;
}

.grv-mobile-menu nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.grv-mobile-menu nav a {
	color: #f0e8d6;
	font-family: var(--grv-serif);
	font-size: clamp(30px, 8.5vw, 40px);
	font-weight: 500;
	padding: clamp(10px, 2.4vw, 14px) 0;
	border-bottom: 1px solid rgba(240, 232, 214, 0.14);
}


/* Order, sign in, bag: a row of round icon buttons at the top of the sheet,
   the same icons the desktop bar uses. Order is the filled one, because
   ordering is what the sheet is for. */
.grv-mobile-icons {
	display: flex;
	gap: 12px;
	margin-bottom: 26px;
}

.grv-mobile-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 100px;
	border: 1px solid rgba(240, 232, 214, 0.3);
	background: transparent;
	color: #f0e8d6;
	padding: 0;
	transition: background 0.25s, border-color 0.25s;
}

.grv-mobile-icon svg {
	width: 23px;
	height: 23px;
	display: block;
}

.grv-mobile-icon.is-primary {
	background: var(--grv-clay);
	border-color: var(--grv-clay);
	color: #f8f4ec;
}

.grv-mobile-icon:active {
	background: rgba(240, 232, 214, 0.12);
}

.grv-mobile-icon.is-primary:active {
	background: #ca815e;
}

.grv-mobile-icon:focus-visible {
	outline: 2px solid var(--grv-clay);
	outline-offset: 3px;
}

/* The count sits on the bag's shoulder; the ring matches the sheet so it
   reads as cut out of the button rather than stuck on. */
.grv-mobile-icon-count {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background: var(--grv-clay);
	color: #f8f4ec;
	font-size: 11.5px;
	font-weight: 800;
	border: 2px solid #221e18;
}

.grv-mobile-icon-count[hidden] {
	display: none;
}

/* What remains under the navigation: the language switcher, held back. */
.grv-mobile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

.grv-mobile-foot {
	margin-top: auto;
	font-size: 13px;
	color: var(--grv-soft);
	letter-spacing: 0.04em;
}

/* =================================================================== HERO */

.grv-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--grv-hero-dark);
}

.grv-hero-bg {
	position: absolute;
	inset: 0;
	animation: grv-kenburns 22s ease-out forwards;
}

.grv-hero-bg picture,
.grv-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

@keyframes grv-kenburns {
	0% { transform: scale(1.02); }
	100% { transform: scale(1.12); }
}

/* Two washes: one across, one down. Together they hold the type legible over
   whatever the photograph is doing behind it. */
.grv-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(24, 20, 15, 0.94) 0%, rgba(24, 20, 15, 0.78) 38%, rgba(24, 20, 15, 0.34) 68%, rgba(24, 20, 15, 0.5) 100%),
		linear-gradient(180deg, rgba(24, 20, 15, 0.55) 0%, rgba(24, 20, 15, 0) 26%, rgba(24, 20, 15, 0) 58%, rgba(24, 20, 15, 0.62) 100%);
}

.grv-hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--grv-max);
	margin: 0 auto;
	padding: clamp(104px, 14vh, 150px) var(--grv-gutter) clamp(56px, 7vw, 96px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 5vw, 72px);
	/*
	 * Centred, not bottom-aligned. With the photograph gone the panel is a
	 * short card, and pinning it to the baseline of a tall headline left it
	 * stranded in the corner with a column of empty space above it. Centring
	 * sits it against the headline, which is what it is annotating.
	 */
	align-items: center;
}

.grv-hero-copy {
	max-width: 680px;
}




.grv-hero-title {
	font-family: var(--grv-serif);
	font-weight: 500;
	/* Two lines, always: each half is its own non-wrapping span, and the ceiling
	   is set so the longer of the two still fits the copy column. */
	font-size: clamp(44px, 7.4vw, 100px);
	line-height: 0.9;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
	color: #f6efdf;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

.grv-hero-title span {
	display: block;
	white-space: nowrap;
}

.grv-hero-title em {
	font-style: italic;
	color: var(--grv-clay-warm);
}

.grv-hero-sub {
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.6;
	color: #e2d8c6;
	max-width: 460px;
	margin: 0 0 36px;
}

.grv-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.grv-hero-cta {
	box-shadow: 0 18px 40px -14px rgba(190, 115, 80, 0.9);
}

.grv-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
	font-size: 13.5px;
	color: #d7cbb4;
	font-weight: 500;
}

/* The portrait: the photography is 3:4, so it gets a frame of its own rather
   than being stretched across a widescreen hero. */
/*
 * The hero used to end on an arched portrait. It now ends on a straight-edged
 * card: the photograph, and under it the one fact worth knowing before opening
 * day. Same footprint, no arch, and something to read.
 */
.grv-hero-panel {
	position: relative;
	width: min(400px, 33vw);
	flex: 0 0 auto;
	border-radius: 22px;
	overflow: hidden;
	background: rgba(28, 24, 18, 0.42);
	border: 1px solid rgba(240, 232, 214, 0.22);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 50px 90px -34px rgba(0, 0, 0, 0.85);
}



.grv-count {
	padding: 20px 22px 22px;
}

.grv-count-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--grv-clay, #c98f5f);
	margin-bottom: 6px;
}

.grv-count-when {
	font-size: 17px;
	font-weight: 600;
	color: #f6efdf;
	margin-bottom: 16px;
}

/* Four figures, evenly weighted, tabular so they do not jitter every second. */
.grv-count-clock {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.grv-count-unit {
	text-align: center;
	background: rgba(245, 240, 231, 0.1);
	border: 1px solid rgba(240, 232, 214, 0.16);
	border-radius: 14px;
	padding: 10px 4px 8px;
}

.grv-count-n {
	display: block;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.05;
	color: #f8f2e4;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.grv-count-l {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #cbbfa6;
}

.grv-count-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #d7cbb4;
}

/* The state the same card falls into once the doors are actually open. */
.grv-count-open .grv-count-when {
	margin-bottom: 8px;
}

/*
 * On a phone the panel goes full width: the countdown is the reason the card
 * exists, and a phone is where most people will meet it.
 */
@media (max-width: 1080px) {
	.grv-hero-panel {
		width: 100%;
		max-width: 460px;
		margin: 22px auto 0;
	}
}

/* ================================================================ MARQUEE */

.grv-marquee {
	background: #6e6347;
	overflow: hidden;
	padding: 16px 0;
}

.grv-marquee-track {
	display: flex;
	width: max-content;
	animation: grv-marquee 32s linear infinite;
	font-family: var(--grv-serif);
	font-style: italic;
	font-size: 23px;
	color: #e9e0cd;
	white-space: nowrap;
}

@keyframes grv-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.grv-marquee-item {
	display: inline-flex;
	align-items: center;
}

.grv-marquee-item > span:first-child {
	padding: 0 26px;
}

.grv-marquee-star {
	opacity: 0.45;
}

/* ================================================== WHAT'S IN THE CUP */

.grv-cup {
	line-height: 0;
}

.grv-cup img {
	width: 100%;
	height: auto;
	display: block;
}

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

.grv-craft {
	position: relative;
	min-height: clamp(380px, 52vw, 560px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #2a241c;
}

.grv-craft-bg {
	position: absolute;
	inset: 0;
}

.grv-craft-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	opacity: 0.95;
}

.grv-craft-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 15, 10, 0.82) 0%, rgba(18, 15, 10, 0.5) 42%, rgba(18, 15, 10, 0.08) 72%, rgba(18, 15, 10, 0) 100%);
}

.grv-craft-copy {
	position: relative;
	z-index: 2;
	max-width: var(--grv-max);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--grv-gutter);
}

.grv-craft-script {
	font-size: clamp(30px, 4vw, 48px);
	color: var(--grv-clay-warm);
}

.grv-craft-line {
	font-family: var(--grv-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.25;
	color: #f4ecdd;
	max-width: 680px;
	margin: 6px 0 0;
	text-wrap: balance;
}

/* ---------- Room photography ----------
   The café's own photographs are used as content, not as wallpaper: each one is
   shown at full fidelity in the place where it actually says something - the
   room behind the membership card, the guests beside the reviews, the doorway
   above the map. Nothing is washed out to make type readable over it. */

.grv-menu-section,
.grv-loved,
.grv-find {
	position: relative;
}

.grv-find-photo {
	position: relative;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	background: rgba(110, 99, 71, 0.1);
	box-shadow: 0 40px 70px -40px rgba(60, 52, 38, 0.6);
}

.grv-find-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grv-find-photo figcaption {
	position: absolute;
	inset-inline-start: 14px;
	bottom: 14px;
	padding: 7px 13px;
	border-radius: 100px;
	background: rgba(28, 25, 19, 0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #f2ebdc;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* Find us: the doorway above the map, both in the same column. */
.grv-find-visual {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 20px);
}

.grv-find-photo {
	aspect-ratio: 16 / 9;
	border-radius: 26px;
}

.grv-find-visual .grv-find-map {
	aspect-ratio: 16 / 10;
}

@media (max-width: 900px) {
}

/* ============================================================ BEST SELLERS */

/* Five across once there is room for five: the teaser row then always ends
   flush instead of leaving an empty column on the right. */
@media (min-width: 1100px) {
	.grv-menu-section .grv-cards {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.grv-menu-section {
	background: var(--grv-cream-deep);
	padding: clamp(64px, 8vw, 110px) var(--grv-gutter) clamp(80px, 10vw, 130px);
}

.grv-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(30px, 4vw, 44px);
}

.grv-section-title {
	font-size: clamp(36px, 5.5vw, 64px);
	margin: 12px 0 0;
}

.grv-section-note {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--grv-muted);
	max-width: 320px;
	margin: 0;
}

.grv-menu-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 60px);
}

/* ================================================================ REWARDS

   A dark band between the menu and the gift card, where the Club section used
   to be. Deliberately not three icon-topped cards: the schemes are sentences,
   not features, so they are a list with the promise first and the mechanics
   underneath. The count varies with what is switched on, so the list flows
   rather than sitting in a fixed grid. */

.grv-rewards {
	position: relative;
	background: #221e17;
	color: var(--grv-on-dark);
	padding: clamp(66px, 8.5vw, 110px) var(--grv-gutter);
	overflow: hidden;
}

.grv-rewards-leaf {
	position: absolute;
	inset-block-start: -60px;
	inset-inline-end: -70px;
	width: clamp(260px, 32vw, 460px);
	opacity: 0.14;
	pointer-events: none;
	user-select: none;
}

.grv-rewards-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(30px, 5vw, 72px);
	align-items: start;
}

.grv-rewards-title {
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.06;
	margin: 10px 0 16px;
	/* `.grv-display` carries `color: var(--grv-ink)`, which is near-black and
	   all but invisible on this band. Any surface darker than its text has to
	   restate the colour in the same rule. */
	color: var(--grv-on-dark);
}

.grv-rewards-lede {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--grv-on-dark-soft);
	margin: 0 0 26px;
	max-width: 42ch;
}

.grv-rewards-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.grv-rewards-terms {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--grv-on-dark-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(240, 232, 214, 0.35);
	transition: color 0.25s, text-decoration-color 0.25s;
}

.grv-rewards-terms:hover {
	color: var(--grv-on-dark);
	text-decoration-color: currentColor;
}

.grv-rewards-terms:focus-visible {
	outline: 2px solid var(--grv-clay-warm);
	outline-offset: 3px;
	border-radius: 3px;
}

.grv-rewards-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grv-rewards-item {
	padding: 22px 0;
	border-top: 1px solid rgba(240, 232, 214, 0.16);
}

.grv-rewards-item:first-child {
	border-top: none;
	padding-top: 0;
}

.grv-rewards-item:last-child {
	padding-bottom: 0;
}

.grv-rewards-item-title {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: clamp(21px, 2.4vw, 26px);
	line-height: 1.22;
	margin: 0 0 7px;
	color: var(--grv-on-dark);
	/* Prices appear in these headings, and the serif's default old-style
	   figures set 2 and 0 at different heights. */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

.grv-rewards-item-body {
	font-size: 15.5px;
	line-height: 1.66;
	color: var(--grv-on-dark-soft);
	margin: 0;
	max-width: 52ch;
}

@media (max-width: 860px) {
	.grv-rewards-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
}

/* =================================================================== GIFT */

.grv-gift {
	position: relative;
	background: linear-gradient(135deg, #e7e4d3 0%, #d5d8c4 45%, #c3c9b0 100%);
	padding: clamp(78px, 10vw, 134px) var(--grv-gutter);
	overflow: hidden;
}

.grv-gift-leaf-a {
	position: absolute;
	top: -40px;
	right: -30px;
	width: clamp(300px, 38vw, 560px);
	opacity: 0.5;
	pointer-events: none;
	transform: rotate(8deg);
}

.grv-gift-leaf-b {
	position: absolute;
	bottom: -70px;
	left: -60px;
	width: clamp(260px, 32vw, 460px);
	opacity: 0.35;
	pointer-events: none;
	transform: scaleX(-1) rotate(12deg);
}

.grv-gift-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(245, 240, 231, 0.28), rgba(195, 201, 176, 0.05));
	pointer-events: none;
}

.grv-gift-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(40px, 5vw, 76px);
	align-items: center;
}

.grv-gift-title {
	font-size: clamp(40px, 6vw, 70px);
	margin: 14px 0 18px;
}

.grv-gift-script {
	font-size: clamp(36px, 5vw, 60px);
}

.grv-gift-copy {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--grv-body);
	max-width: 440px;
	margin: 0 0 30px;
}

.grv-gift-visual {
	display: flex;
	justify-content: center;
}

.grv-giftcard-float {
	width: min(380px, 92%);
	animation: grv-floatcard 7s ease-in-out infinite;
	transform: rotate(-5deg);
	box-shadow: 0 50px 90px -36px rgba(20, 17, 12, 0.85);
}

@keyframes grv-floatcard {
	0%, 100% { transform: rotate(-5deg) translateY(0); }
	50% { transform: rotate(-5deg) translateY(-14px); }
}

/* ================================================================== LOVED */

.grv-loved {
	background: var(--grv-cream-deep);
	padding: clamp(72px, 9vw, 120px) var(--grv-gutter);
}

.grv-loved-head {
	text-align: center;
	margin-bottom: clamp(34px, 4vw, 52px);
}

.grv-loved-title {
	font-size: clamp(36px, 5.5vw, 62px);
	margin: 12px 0 0;
	line-height: 1.02;
}

/*
 * The three figures read as one band rather than three floating numbers:
 * hairlines above and below, hairline dividers between. Equal columns mean
 * the middle figure sits on the centre line of the section, which the old
 * flex-with-gap version only managed by accident.
 */
.grv-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 26px);
	align-items: stretch;
}

.grv-quote {
	position: relative;
	background: var(--grv-card);
	border-radius: 18px;
	padding: clamp(26px, 2.6vw, 34px);
	border: 1px solid rgba(110, 99, 71, 0.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 30px 50px -40px rgba(60, 52, 38, 0.6);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
}

/* An oversized serif quote mark, bled off the top-right corner - it reads as
   texture at a glance and as punctuation up close. */
.grv-quote::after {
	content: "\201D";
	position: absolute;
	top: -22px;
	inset-inline-end: 14px;
	font-family: var(--grv-serif);
	font-size: 150px;
	line-height: 1;
	color: rgba(190, 115, 80, 0.13);
	pointer-events: none;
}

@media (hover: hover) {
	.grv-quote:hover {
		transform: translateY(-6px);
		border-color: rgba(190, 115, 80, 0.35);
		box-shadow: 0 44px 64px -42px rgba(60, 52, 38, 0.75);
	}
}

.grv-quote-stars {
	position: relative;
	color: #e0a15e;
	font-size: 16px;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}

.grv-quote-text {
	position: relative;
	font-family: var(--grv-serif);
	font-style: italic;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.5;
	color: #3a342a;
	margin: 0 0 18px;
	flex: 1;
	text-wrap: balance;
}

.grv-quote-by {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid rgba(110, 99, 71, 0.14);
}

.grv-quote-avatar {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	background: var(--grv-ink);
	color: var(--grv-cream);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--grv-serif);
	font-size: 18px;
	font-weight: 600;
	flex: 0 0 auto;
}

.grv-quote-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--grv-ink);
}

.grv-quote-role {
	font-size: 12.5px;
	color: var(--grv-soft);
}


/* ============================================================== CAROUSELS */

/*
 * Best sellers and reviews both become a one-card-at-a-time scroller on a
 * phone, advancing on their own. Everything here is scoped to the narrow
 * viewport: on a desktop both sections stay the grids they were.
 *
 * The scroller is the real thing - a scroll-snapping overflow container - so
 * a thumb-swipe works exactly as it always did and the auto-advance is only
 * a `scrollTo` on top of it. Nothing is hidden from a keyboard or a reader.
 */

.grv-carousel-dots {
	display: none;
}

@media (max-width: 760px) {
	.grv-cards[data-carousel],
	.grv-quotes[data-carousel] {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 14px;
		/* Full-bleed, so a card can sit edge to edge and still snap centred. */
		margin-inline: calc(var(--grv-gutter) * -1);
		padding-inline: var(--grv-gutter);
		scrollbar-width: none;
		-ms-overflow-style: none;
		overscroll-behavior-x: contain;
	}

	.grv-cards[data-carousel]::-webkit-scrollbar,
	.grv-quotes[data-carousel]::-webkit-scrollbar {
		display: none;
	}

	.grv-cards[data-carousel] > .grv-card,
	.grv-quotes[data-carousel] > .grv-quote {
		flex: 0 0 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	/* A reveal animation that starts the card translated sideways fights the
	   scroller's own geometry, so inside a carousel the card is simply there. */
	.grv-quotes[data-carousel] > .grv-quote.grv-reveal {
		opacity: 1;
		transform: none;
	}

	.grv-carousel-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 22px;
	}

	.grv-carousel-dots[hidden] {
		display: none;
	}

	.grv-carousel-dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: none;
		border-radius: 100px;
		background: rgba(110, 99, 71, 0.28);
		transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s;
	}

	.grv-carousel-dot.is-active {
		width: 22px;
		background: var(--grv-clay);
	}
}

/* On a phone the reviews are a scroller, so the fixed three-column grid has
   to give way; above it, three columns stand. */
@media (max-width: 760px) {
	.grv-quotes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ================================================================== STORY */

.grv-story {
	background: #221e18;
	padding: clamp(78px, 10vw, 140px) var(--grv-gutter);
	overflow: hidden;
}

.grv-story-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.grv-story-figure {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 240px 240px 26px 26px;
	overflow: hidden;
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7);
	background: #3a332a;
}

.grv-story-figure > div {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.grv-story-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grv-story-eyebrow {
	color: #d9926a;
}

.grv-story-quote {
	font-family: var(--grv-serif);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.3;
	color: #f4ecdd;
	margin: 18px 0 0;
	text-wrap: balance;
}

.grv-story-sign {
	margin-top: 26px;
	font-size: 32px;
	color: var(--grv-clay-warm);
}

.grv-story-role {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9c9079;
	margin-top: 2px;
}

/* ================================================================ FIND US */

.grv-find {
	background: var(--grv-cream-deep);
	padding: clamp(72px, 9vw, 124px) var(--grv-gutter);
}

.grv-find-inner {
	max-width: var(--grv-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

.grv-find-title {
	font-size: clamp(36px, 5.5vw, 60px);
	margin: 14px 0 26px;
}

.grv-find-rows {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 420px;
}

.grv-find-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.grv-find-icon {
	font-size: 20px;
	margin-top: 2px;
}

.grv-find-h {
	font-weight: 600;
	font-size: 16px;
	color: var(--grv-ink);
	margin-bottom: 2px;
}

.grv-find-d {
	font-size: 14.5px;
	color: var(--grv-muted);
	line-height: 1.5;
}

.grv-find-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 40px 70px -34px rgba(60, 52, 38, 0.5);
	background: #cdcec3;
}

.grv-find-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(0.92);
}

.grv-find-pin {
	position: absolute;
	inset-inline-start: 18px;
	bottom: 18px;
	background: rgba(245, 240, 231, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: 0 14px 30px -16px rgba(60, 52, 38, 0.5);
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grv-find-pin:hover,
.grv-find-pin:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -16px rgba(60, 52, 38, 0.55);
}

.grv-find-pin-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grv-soft);
	font-weight: 600;
	margin-bottom: 3px;
}

.grv-find-pin-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--grv-ink);
}

/* The one row in Find us that goes somewhere: underlined on hover rather than
   always, so it reads as part of the list until you reach for it. */
.grv-find-link {
	color: var(--grv-ink);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.grv-find-link:hover,
.grv-find-link:focus-visible {
	border-bottom-color: currentColor;
}

/* ================================================================= FOOTER */

.grv-footer {
	background: var(--grv-dark-soft);
	color: #d8cfbe;
	padding: clamp(56px, 7vw, 90px) var(--grv-gutter) 36px;
}

.grv-footer-inner {
	max-width: var(--grv-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
}

.grv-footer-logo {
	height: 30px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

.grv-footer-blurb {
	font-size: 14.5px;
	line-height: 1.6;
	color: #a89b83;
	max-width: 300px;
}

.grv-footer-head {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grv-soft);
	margin-bottom: 16px;
}

.grv-footer-links {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.grv-footer-links a,
.grv-footer-social {
	color: #d8cfbe;
	font-size: 15px;
	transition: color 0.25s;
}

.grv-footer-links a:hover,
.grv-footer-social:hover {
	color: var(--grv-clay-light);
}

.grv-footer-text {
	font-size: 15px;
	line-height: 1.7;
	color: #d8cfbe;
}

.grv-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.grv-footer-bar {
	max-width: var(--grv-max);
	margin: 48px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(216, 207, 190, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: 13px;
	color: var(--grv-soft);
}

/* ======================================================== STICKY BAG BARS */

.grv-sticky {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(245, 240, 231, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(110, 99, 71, 0.16);
	box-shadow: 0 -10px 30px -18px rgba(60, 52, 38, 0.4);
}

.grv-sticky.is-hidden {
	display: none !important;
}

.grv-sticky-bag {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--grv-ink);
	color: #f8f4ec;
	padding: 15px 20px;
	border: none;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
}

.grv-sticky-bag[hidden] {
	display: none;
}

.grv-sticky-left {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.grv-sticky-count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background: var(--grv-clay);
	font-size: 12px;
	font-weight: 800;
}

.grv-float-bag {
	position: fixed;
	inset-inline-end: 26px;
	bottom: 26px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--grv-ink);
	color: var(--grv-cream);
	padding: 15px 22px;
	border: none;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 22px 44px -18px rgba(43, 39, 31, 0.85);
	animation: grv-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-float-bag[hidden] {
	display: none;
}

.grv-float-bag:hover {
	transform: translateY(-3px);
}

@keyframes grv-rise {
	from { opacity: 1; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

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

.grv-float-total {
	padding-inline-start: 12px;
	border-inline-start: 1px solid rgba(245, 240, 231, 0.22);
}

/* ================================================================= DRAWER */

.grv-drawer-root {
	position: fixed;
	inset: 0;
	z-index: 80;
}

.grv-drawer-root[hidden] {
	display: none;
}

.grv-drawer-scrim {
	position: absolute;
	inset: 0;
	background: rgba(28, 24, 18, 0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: grv-fade 0.3s ease both;
}

@keyframes grv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Pinned to the reading edge, and the slide-in mirrors with it: a drawer that
   sits on the left but animates in from the right crosses the whole screen to
   get there. */
.grv-drawer {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	bottom: 0;
	width: min(440px, 100%);
	background: var(--grv-cream);
	display: flex;
	flex-direction: column;
	box-shadow: -30px 0 80px -30px rgba(28, 24, 18, 0.6);
	animation: grv-slidein 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes grv-slidein {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes grv-slidein-rtl {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

[dir="rtl"] .grv-drawer {
	animation-name: grv-slidein-rtl;
	box-shadow: 30px 0 80px -30px rgba(28, 24, 18, 0.6);
}

.grv-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 24px;
	border-bottom: 1px solid rgba(110, 99, 71, 0.16);
	flex: 0 0 auto;
}

.grv-drawer-title {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--grv-ink);
}

.grv-drawer-sub {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--grv-soft);
	margin-top: 4px;
}

.grv-drawer-close {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1px solid rgba(110, 99, 71, 0.22);
	border-radius: 50%;
	background: transparent;
	color: var(--grv-ink);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s;
}

.grv-drawer-close:hover {
	background: rgba(110, 99, 71, 0.1);
}

.grv-drawer-stages {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.grv-drawer-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 8px 24px 20px;
}

.grv-drawer-foot {
	flex: 0 0 auto;
	padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(110, 99, 71, 0.16);
	background: #f0e9db;
}

.grv-drawer-empty {
	text-align: center;
	padding: 70px 10px;
}

.grv-drawer-empty-icon {
	font-size: 44px;
	margin-bottom: 14px;
	opacity: 0.5;
}

.grv-drawer-empty-title {
	font-family: var(--grv-serif);
	font-size: 24px;
	color: var(--grv-ink);
	margin-bottom: 8px;
}

.grv-drawer-empty-note {
	font-size: 14px;
	color: var(--grv-muted);
	margin: 0 0 22px;
}

.grv-line {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(110, 99, 71, 0.12);
}

.grv-line-media {
	position: relative;
	width: 66px;
	height: 66px;
	flex: 0 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(110, 99, 71, 0.1);
}

.grv-line-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grv-line-body {
	flex: 1;
	min-width: 0;
}

.grv-line-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.grv-line-name {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: 18px;
	color: var(--grv-ink);
	line-height: 1.15;
}

.grv-line-total {
	font-size: 13px;
	font-weight: 700;
	color: var(--grv-ink);
	white-space: nowrap;
}

.grv-line-each {
	font-size: 12px;
	color: var(--grv-soft);
	margin: 2px 0 10px;
}

.grv-line-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.grv-line-step {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #eae2d2;
	border-radius: 100px;
	padding: 4px;
}

.grv-line-step button {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grv-line-step button:first-child {
	background: var(--grv-cream);
	color: var(--grv-ink);
}

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

.grv-line-step span {
	min-width: 22px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--grv-ink);
}

.grv-line-remove {
	background: none;
	border: none;
	color: var(--grv-faint);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.grv-sum {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--grv-muted);
	margin-bottom: 6px;
}

.grv-sum-free {
	color: var(--grv-leaf);
	font-weight: 600;
}

.grv-sum-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	color: var(--grv-ink);
	margin-bottom: 16px;
}

.grv-sum-total span:first-child {
	font-size: 15px;
}

.grv-sum-total span:last-child {
	font-size: 20px;
	font-family: var(--grv-serif);
}

.grv-checkout {
	width: 100%;
	background: var(--grv-clay);
	color: #f8f4ec;
	border: none;
	padding: 16px;
	border-radius: 100px;
	font-size: 15.5px;
	font-weight: 700;
	box-shadow: 0 16px 32px -16px rgba(190, 115, 80, 0.9);
	transition: transform 0.3s;
}

.grv-checkout:hover {
	transform: translateY(-2px);
}

.grv-place {
	width: 100%;
	background: var(--grv-ink);
	color: var(--grv-cream);
	border: none;
	padding: 16px;
	border-radius: 100px;
	font-size: 15.5px;
	font-weight: 700;
	box-shadow: 0 16px 32px -16px rgba(43, 39, 31, 0.9);
	transition: transform 0.3s;
}

.grv-place:hover:not(:disabled) {
	transform: translateY(-2px);
}

.grv-place:disabled {
	opacity: 0.5;
}

.grv-fine {
	text-align: center;
	font-size: 11.5px;
	color: var(--grv-soft);
	margin: 12px 0 0;
}

/* A signed-in customer's name and number, shown rather than asked for. */
.grv-known {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(110, 99, 71, 0.18);
	border-radius: 10px;
	font-size: 14px;
}

.grv-known-who {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grv-known-change {
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--grv-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.grv-back {
	background: none;
	border: none;
	color: var(--grv-soft);
	font-size: 13px;
	padding: 0;
	margin-bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.grv-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.grv-slots {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.grv-slot {
	flex: 1 1 auto;
	padding: 12px 10px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	border: 1px solid rgba(110, 99, 71, 0.24);
	background: var(--grv-card);
	color: var(--grv-muted);
	transition: all 0.25s;
}

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

/* ---- Confirmation ---- */

.grv-done {
	flex: 1;
	overflow-y: auto;
	padding: 40px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.grv-done-tick {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: var(--grv-leaf);
	color: var(--grv-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	margin-bottom: 22px;
	box-shadow: 0 20px 40px -18px rgba(94, 124, 78, 0.8);
	animation: grv-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes grv-pop {
	0% { transform: scale(0); }
	60% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

.grv-done-title {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: 32px;
	margin: 0 0 8px;
	color: var(--grv-ink);
}

.grv-done-note {
	font-size: 15px;
	color: var(--grv-muted);
	margin: 0 0 22px;
	max-width: 300px;
	line-height: 1.55;
}

.grv-receipt {
	width: 100%;
	background: var(--grv-card);
	border: 1px solid rgba(110, 99, 71, 0.16);
	border-radius: 18px;
	padding: 20px 22px;
	text-align: start;
	margin-bottom: 20px;
}

.grv-receipt-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.grv-receipt-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grv-soft);
}

.grv-receipt-number {
	font-family: var(--grv-serif);
	font-weight: 700;
	font-size: 24px;
	color: var(--grv-ink);
}

.grv-receipt-line {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--grv-body);
	padding: 5px 0;
	gap: 12px;
}

.grv-receipt-total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	color: var(--grv-ink);
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid rgba(110, 99, 71, 0.16);
}

/* Sits under the total once the card has gone through. */
.grv-receipt-paid {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--grv-leaf);
	text-align: end;
}

.grv-done-eta {
	width: 100%;
	background: #eaf0e2;
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 13px;
	color: #4c5e3e;
	line-height: 1.5;
	margin-bottom: 20px;
}

.grv-whatsapp {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--grv-leaf);
	color: var(--grv-cream);
	padding: 15px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 10px;
}

.grv-restart {
	width: 100%;
	background: none;
	border: 1px solid rgba(110, 99, 71, 0.3);
	color: var(--grv-ink);
	padding: 14px;
	border-radius: 100px;
	font-size: 14.5px;
	font-weight: 600;
}

/* ============================================================= RESPONSIVE */

@media (max-width: 1080px) {
	.grv-hero-inner {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (max-width: 860px) {
	.grv-nav {
		display: none;
	}

	.grv-header-mobile {
		display: flex;
	}

	.grv-sticky {
		display: block;
	}

	.grv-float-bag {
		display: none !important;
	}

	.grv-storefront {
		padding-bottom: 82px;
	}

	/* Both calls to action stay side by side; they shrink rather than stack. */
	.grv-hero-actions {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.grv-hero-actions .grv-btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 14px;
		font-size: 14.5px;
		white-space: nowrap;
	}

	.grv-hero-inner {
		padding-bottom: calc(28px + 82px);
	}

	.grv-hero-meta {
		display: none;
	}

	/* Phones show the barista portrait full-bleed, so the wash has to work from
	   the bottom up rather than across. */
	.grv-hero-scrim {
		background:
			linear-gradient(180deg, rgba(24, 20, 15, 0.72) 0%, rgba(24, 20, 15, 0.34) 30%, rgba(24, 20, 15, 0.62) 62%, rgba(24, 20, 15, 0.92) 100%);
	}

	.grv-hero-bg img {
		object-position: center 30%;
	}
}

/* Small phones: pull the display type in so the order button stays above the
   fold rather than below a screenful of headline. */
@media (max-width: 400px) {

	.grv-hero-title {
		font-size: 44px;
		margin-bottom: 18px;
	}

	.grv-hero-sub {
		font-size: 15px;
		margin-bottom: 20px;
	}

	.grv-hero-inner {
		padding-top: 84px;
		padding-bottom: calc(18px + 82px);
	}
}

@media (max-width: 720px) {

	.grv-section-note {
		max-width: none;
	}
}

/* ================================================================== OFFER

   The café-credit modal. Warm paper on a dimmed room, not a lightbox: the
   card carries the same cream and clay as the page behind it so it reads as
   the café speaking rather than an advert dropped on top of it. */

.grv-offer-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(24, 21, 16, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: grv-offer-in 0.28s ease both;
}

/* Photo on the start side, offer on the end side. Five to seven rather than
   half and half: the words need the room, the picture only needs to be seen. */
.grv-offer {
	position: relative;
	width: 100%;
	max-width: 700px;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	background: var(--grv-card);
	color: var(--grv-ink);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.85);
	animation: grv-offer-rise 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.grv-offer:focus {
	outline: none;
}

.grv-offer-photo {
	position: relative;
	min-height: 100%;
	background: #2b271f;
}

.grv-offer-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A small clay tag pinned to the photo's bottom corner, tilted a touch so it
   reads as a sticker rather than a caption. */
.grv-offer-tag {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	padding: 7px 12px;
	border-radius: 6px;
	background: var(--grv-clay);
	color: #f8f4ec;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transform: rotate(-3deg);
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
	font-variant-numeric: lining-nums tabular-nums;
}

.grv-offer-body {
	padding: clamp(26px, 5vw, 40px);
}

.grv-offer-close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 100px;
	background: rgba(24, 21, 16, 0.55);
	color: #f5f0e7;
	font-size: 24px;
	line-height: 1;
	transition: background 0.25s;
}

.grv-offer-close:hover {
	background: rgba(24, 21, 16, 0.8);
}

@media (max-width: 640px) {
	.grv-offer {
		max-width: 420px;
		grid-template-columns: minmax(0, 1fr);
	}

	.grv-offer-photo {
		min-height: 0;
		height: 190px;
	}
}

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

.grv-offer-title {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: clamp(27px, 4.4vw, 34px);
	line-height: 1.14;
	margin: 9px 0 12px;
	/* The numbers are the offer, so they carry the emphasis and the sentence
	   around them stays upright. */
	text-wrap: balance;
}

.grv-offer-money {
	color: var(--grv-clay);
	white-space: nowrap;
	/* Lining figures: the serif's default old-style numerals set 2 and 0 at
	   different heights, which reads as a typo in a price. */
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.grv-offer-copy {
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--grv-body);
	margin: 0 0 22px;
}

.grv-offer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.grv-offer-later {
	border: none;
	background: none;
	padding: 10px 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--grv-muted);
	transition: color 0.25s;
}

.grv-offer-later:hover {
	color: var(--grv-ink);
}

.grv-offer-later:focus-visible {
	outline: 2px solid var(--grv-clay);
	outline-offset: 2px;
	border-radius: 6px;
}

.grv-offer-small {
	margin: 20px 0 0;
	padding-top: 15px;
	border-top: 1px solid rgba(110, 99, 71, 0.15);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--grv-soft);
}

.grv-offer-small a {
	color: var(--grv-clay);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@keyframes grv-offer-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes grv-offer-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.grv-offer-scrim,
	.grv-offer {
		animation: none;
	}
}

/* The card slider at the top of the gift form. One card fills the frame;
   arrows and a swipe move through the styles and wrap at either end. */
.grv-gift-slider {
	position: relative;
	margin: 4px 0 18px;
	touch-action: pan-y;
}

.grv-gift-slider .grv-giftcard {
	user-select: none;
	-webkit-user-select: none;
}

.grv-gift-slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(245, 240, 231, 0.92);
	color: var(--grv-ink);
	box-shadow: 0 6px 18px -8px rgba(20, 17, 12, 0.6);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	transition: background 0.2s, transform 0.2s;
}

.grv-gift-slide-btn:hover { background: #fff; }
.grv-gift-slide-btn:focus-visible { outline: 2px solid var(--grv-clay); outline-offset: 2px; }
.grv-gift-slide-btn--prev { inset-inline-start: -8px; }
.grv-gift-slide-btn--next { inset-inline-end: -8px; }
/* The glyphs point along the reading direction, so Arabic flips them. */
[dir="rtl"] .grv-gift-slide-btn { transform: translateY(-50%) scaleX(-1); }

.grv-gift-slider-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grv-soft);
}

.grv-gift-dots {
	display: inline-flex;
	gap: 6px;
}

.grv-gift-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(110, 99, 71, 0.3);
	transition: background 0.2s, transform 0.2s;
}

.grv-gift-dot.is-on {
	background: var(--grv-clay);
	transform: scale(1.3);
}

/* Two short fields side by side: an email and a mobile for the same person. */
.grv-gift-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.grv-gift-count {
	text-transform: none;
	letter-spacing: 0;
	color: #b4a98c;
}

@media (max-width: 480px) {
	.grv-gift-pair { grid-template-columns: minmax(0, 1fr); }
}