/**
 * Grovado - tokens, reset and the furniture shared across every page.
 */

:root {
	/* Surfaces */
	--grv-cream: #f5f0e7;
	--grv-cream-deep: #efe8da;
	--grv-card: #fbf8f1;
	--grv-dark: #221e17;
	--grv-dark-soft: #2b271f;
	--grv-hero-dark: #201c16;

	/* Ink */
	--grv-ink: #2b271f;
	--grv-body: #4a4435;
	--grv-muted: #6e6347;
	--grv-soft: #8a7e5b;
	--grv-faint: #a0937a;

	/* Accents */
	--grv-clay: #be7350;
	--grv-clay-light: #e9c9b4;
	--grv-clay-warm: #e8c39e;
	--grv-leaf: #5e7c4e;
	--grv-leaf-light: #9db07e;
	--grv-leaf-pale: #afc18c;

	/* Cream inks used on dark grounds */
	--grv-on-dark: #f0e8d6;
	--grv-on-dark-soft: rgba(240, 232, 214, 0.78);
	--grv-on-dark-faint: rgba(240, 232, 214, 0.5);

	/* Type */
	--grv-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--grv-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--grv-script: "Sacramento", cursive;

	/* Rhythm */
	--grv-gutter: clamp(20px, 5vw, 80px);
	--grv-max: 1280px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Several components set an explicit `display`, which would otherwise win over
   the user-agent rule for [hidden]. Toggling `hidden` must always hide. */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.grv-body {
	margin: 0;
	font-family: var(--grv-sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--grv-ink);
	background: var(--grv-cream);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.grv-body ::selection {
	background: var(--grv-clay);
	color: var(--grv-cream);
}

h1, h2, h3, h4, p, figure, blockquote {
	margin: 0;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: 15px;
}

.grv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.grv-shell {
	width: 100%;
	max-width: var(--grv-max);
	margin: 0 auto;
}

/* ---------- Buttons ---------- */

.grv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	border-radius: 100px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s, box-shadow 0.35s, color 0.35s;
}

.grv-btn-clay {
	background: var(--grv-clay);
	color: #f8f4ec;
	box-shadow: 0 8px 22px -10px rgba(190, 115, 80, 0.7);
}

.grv-btn-ink {
	background: var(--grv-ink);
	color: var(--grv-cream);
	box-shadow: 0 20px 40px -18px rgba(43, 39, 31, 0.85);
}

.grv-btn-cream {
	background: var(--grv-on-dark);
	color: var(--grv-dark);
}

.grv-btn-outline {
	background: rgba(245, 240, 231, 0.08);
	color: #f4ecdd;
	border: 1px solid rgba(240, 232, 214, 0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.grv-btn-lg {
	padding: 18px 36px;
	font-size: 16px;
}

.grv-btn-md {
	padding: 13px 24px;
	font-size: 14px;
}

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

.grv-btn-outline:hover {
	background: rgba(245, 240, 231, 0.18);
}

.grv-btn:disabled {
	opacity: 0.55;
	transform: none;
}

/* ---------- Eyebrow + headings ---------- */

.grv-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--grv-clay);
}

.grv-eyebrow-muted {
	color: var(--grv-muted);
}

.grv-display {
	font-family: var(--grv-serif);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--grv-ink);
}

.grv-script {
	font-family: var(--grv-script);
	color: var(--grv-clay);
	line-height: 1;
}

/* ---------- Scroll reveal ----------
   Hidden until the observer promotes it. Anything inside <noscript> or with
   motion reduced stays visible. */

.grv-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-reveal-2 {
	transition-delay: 0.12s;
}

.grv-reveal-3 {
	transition-delay: 0.22s;
}

.grv-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- Forms ---------- */

.grv-field {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(110, 99, 71, 0.28);
	border-radius: 14px;
	background: var(--grv-card);
	font-size: 15px;
	font-family: inherit;
	color: var(--grv-ink);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.grv-field:focus {
	border-color: var(--grv-clay);
	box-shadow: 0 0 0 3px rgba(190, 115, 80, 0.15);
}

.grv-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grv-soft);
	font-weight: 600;
	margin-bottom: 7px;
}

.grv-error {
	background: rgba(176, 85, 63, 0.12);
	color: #8f4433;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	margin-bottom: 14px;
}

.grv-no-scrollbar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.grv-no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* ---------- Menu item card ----------
   Shared by the storefront's best-sellers and the full menu page. */

.grv-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
}

.grv-card {
	display: flex;
	flex-direction: column;
	background: var(--grv-card);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(110, 99, 71, 0.12);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
}

.grv-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 48px -30px rgba(60, 52, 38, 0.5);
}

.grv-card.is-in-bag {
	border-color: var(--grv-clay);
	box-shadow: 0 18px 40px -26px rgba(190, 115, 80, 0.7);
}

.grv-card-media {
	aspect-ratio: 1 / 1;
	background: #fff;
	position: relative;
	overflow: hidden;
}

.grv-card-media-inner {
	position: absolute;
	inset: 0;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grv-card:hover .grv-card-media-inner {
	transform: scale(1.06);
}

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

.grv-card-price {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(251, 248, 241, 0.94);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--grv-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px -9px rgba(43, 39, 31, 0.6);
}

.grv-card-currency {
	font-size: 9.5px;
	font-weight: 600;
	color: #9a8a66;
	letter-spacing: 0.04em;
}

.grv-card-qty {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--grv-ink);
	color: var(--grv-cream);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 8px 18px -8px rgba(43, 39, 31, 0.7);
}

.grv-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 17px 17px;
}

.grv-card-name {
	font-family: var(--grv-serif);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.14;
	margin: 0 0 6px;
	color: var(--grv-ink);
}

.grv-card-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--grv-muted);
	margin: 0 0 15px;
}

.grv-card-foot {
	margin-top: auto;
}

.grv-card-add {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px;
	border: 1px solid rgba(43, 39, 31, 0.18);
	border-radius: 9px;
	background: var(--grv-card);
	color: var(--grv-ink);
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s;
}

.grv-card-add:hover {
	background: var(--grv-ink);
	color: var(--grv-cream);
	border-color: var(--grv-ink);
}

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

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

.grv-stepper span {
	font-size: 15px;
	font-weight: 700;
	color: var(--grv-cream);
}

.grv-step-minus,
.grv-step-plus {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: none;
	border-radius: 7px;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s;
}

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

.grv-step-minus:hover {
	background: rgba(245, 240, 231, 0.26);
}

.grv-step-plus {
	background: var(--grv-clay);
	color: #f8f4ec;
}

.grv-step-plus:hover {
	background: #ca815e;
}

/* ---------- Gift card ----------
   The card is the real printed artwork. Only the redeem code and the amount are
   drawn over it, positioned as percentages of the card so they stay locked to
   the design at any size; container units keep the type in proportion too. */

.grv-giftcard {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 3182 / 1978;
	width: 100%;
	border-radius: 3.4%/5.5%;
	overflow: hidden;
	background: #191714 center / cover no-repeat;
	box-shadow: 0 30px 60px -28px rgba(20, 17, 12, 0.8);
	color: #f4ece0;
	font-family: var(--grv-sans);
}

.grv-giftcard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The two frosted panels printed into the artwork: the code under "REDEEM
   CODE", the amount under "GIFT CARD". Each overlay is the panel's box, as
   fractions of the card, with the type centred in it. The same fractions
   drive gift-download.js and GRV_Gift_Image, so the saved picture and the
   emailed one match what is on screen; change all three together.
   Physical left/top on purpose: the artwork underneath is a picture and is
   not mirrored in Arabic, so this type must not move either. The card is
   forced back to `direction: ltr` below for the same reason. */
.grv-giftcard-code,
.grv-giftcard-amount {
	position: absolute;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}

.grv-giftcard-code {
	left: 9.7%;
	top: 79.5%;
	width: 40.3%;
	height: 13.1%;
	/* Set from the panel's left edge, in line with the REDEEM CODE label
	   above it, rather than centred. */
	justify-content: flex-start;
	padding-inline-start: 1.4cqw;
	font-size: 3.9cqw;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fdfaf5;
}

.grv-giftcard-amount {
	left: 68.9%;
	top: 16.5%;
	width: 26.3%;
	height: 16.5%;
	font-family: var(--grv-serif);
	font-size: 5.2cqw;
	font-weight: 600;
	/* Cormorant defaults to old-style figures, which read as lowercase next to
	   the currency code; an amount wants lining numerals. */
	font-variant-numeric: lining-nums;
	color: #e9d9c2;
}

@supports not (font-size: 1cqw) {
	.grv-giftcard-code { font-size: 15px; }
	.grv-giftcard-amount { font-size: 21px; }
}

/* The card keeps its own direction whatever the page is reading. The artwork
   is a photograph with English type printed into it, and mirroring the overlay
   over an unmirrored background would put the code in the middle of a coffee
   cup. The code itself is Latin characters either way. */
[dir="rtl"] .grv-giftcard {
	direction: ltr;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.grv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Arabic type ----------

   The Latin faces carry no Arabic glyphs, so the tokens are repointed rather
   than overridden rule by rule: every place that reads --grv-serif gets the
   Arabic display face automatically, and nothing has to be listed twice.

   Noto Naskh Arabic stands in for the display serif and Almarai for the text
   face. Sacramento, the handwritten accent, has no Arabic equivalent worth
   faking - see the note on font-style below. */

:root[lang^="ar"],
[dir="rtl"] {
	--grv-serif: "Noto Naskh Arabic", "Cormorant Garamond", Georgia, serif;
	--grv-sans: "Almarai", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
	--grv-script: "Noto Naskh Arabic", "Cormorant Garamond", Georgia, serif;
}

/*
 * Arabic has no italic.
 *
 * A slanted Arabic face is not emphasis, it is a Latin convention applied to a
 * script that never adopted one, and browsers produce it by shearing the
 * glyphs - which breaks the joins between letters. Emphasis carries on colour
 * and weight instead, which the design already uses for it.
 */
[dir="rtl"] em,
[dir="rtl"] i,
[dir="rtl"] .grv-script,
[dir="rtl"] .grv-hero-title em {
	font-style: normal;
}

/* Naskh sets taller than the Latin faces and needs the room; the tight display
   leading that suits Cormorant clips Arabic ascenders and dots. */
[dir="rtl"] .grv-display,
[dir="rtl"] .grv-hero-title {
	line-height: 1.28;
	letter-spacing: 0;
}

/* ---------- Language switcher ----------

   Lives here rather than in storefront.css because four templates use it - the
   storefront, the menu, the terms page and the account area - and only the
   first of those loads storefront.css. It was there first, and the menu page
   rendered the switcher unstyled and overlapping.

   Both languages are always shown with the current one marked. Two options do
   not need a dropdown, and a dropdown would hide which one you are reading. */

.grv-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 100px;
	background: rgba(240, 232, 214, 0.09);
	flex: 0 0 auto;
}

.grv-lang-link {
	padding: 6px 12px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--grv-on-dark-soft);
	white-space: nowrap;
	transition: background 0.25s, color 0.25s;
}

.grv-lang-link:hover {
	color: var(--grv-on-dark);
}

.grv-lang-link.is-on {
	background: rgba(240, 232, 214, 0.9);
	color: var(--grv-dark);
	font-weight: 600;
}

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

/* In the mobile sheet it sits on its own row, full width. */
.grv-lang-mobile {
	flex: 1 1 100%;
	justify-content: center;
	padding: 4px;
}

.grv-lang-mobile .grv-lang-link {
	flex: 1 1 0;
	text-align: center;
	padding: 11px 12px;
	font-size: 15px;
}

/* The pale variant, for the cream-ground pages: menu, terms, account. */

.grv-lang-light {
	background: rgba(110, 99, 71, 0.09);
}

.grv-lang-light .grv-lang-link {
	color: var(--grv-muted);
}

.grv-lang-light .grv-lang-link:hover {
	color: var(--grv-ink);
}

.grv-lang-light .grv-lang-link.is-on {
	background: var(--grv-ink);
	color: var(--grv-on-dark);
}

.grv-lang-light .grv-lang-link:focus-visible {
	outline: 2px solid var(--grv-clay);
	outline-offset: 2px;
}

/*
 * The language switcher, held back.
 *
 * Built and working; not being shown to customers yet. Hidden here rather
 * than removed from the templates so putting it back is deleting this block.
 * Sign-in used to be hidden alongside it and came back on 6 September, when
 * card payments gave the account page a reason to exist for customers.
 *
 * `display: none` rather than visibility or opacity, so neither the keyboard
 * nor a screen reader can reach a control the café is not ready to support.
 *
 * Qualified with `.grv-body` for the cascade, not for looks: this file loads
 * first, and a one-class rule in a later stylesheet would win on source order.
 */
.grv-body .grv-lang {
	display: none;
}

/* ---------- Gift card, per-style inks ----------
   Four photographed cards. The cream one is light, so its overlays go dark;
   the other three keep the light inks above. gift-download.js draws the
   same inks. */
.grv-giftcard--cream .grv-giftcard-code   { color: #3a2a16; }
.grv-giftcard--cream .grv-giftcard-amount { color: #5c3d1e; }
.grv-giftcard--leaf .grv-giftcard-code,
.grv-giftcard--leaf .grv-giftcard-amount  { color: #1e3a24; }