/* ============================================================================
   gtr-emptystate.css — the centred message card on error/not_found.twig.

   That template serves TWO routes: a real 404, and — via
   checkout/cart.php:258 — the empty shopping cart, which is where a shopper
   lands the second they remove their last item. Both get the same card; only
   the mark and the guidance line differ (chosen in the template).

   Linked as a body <link> by the active theme's error/not_found.twig, so it
   loads after stylesheet.css and wins by source order — no !important
   anywhere in here. Every selector is prefixed .gtr-emptystate, so nothing
   can leak into the rest of the page.

   Sections: 1 tokens · 2 card · 3 mark · 4 copy · 5 CTA · 6 phones
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Local copy, same measured values as gtr-checkout.css: theme_font.css is not
   linked on the desktop header, so var(--main-color) and friends resolve to
   nothing there. Anything this file needs, it defines. */
#error-not-found {
	--gtr-accent: #c73e12;        /* 5.1:1 — interactive text and the CTA */
	--gtr-accent-strong: #a53100; /* hover */
	--gtr-accent-soft: #fdeee6;
	--gtr-brand: #e85224;         /* 3.7:1 — large shapes only, never text */
	--gtr-ink: #2f2a26;
	--gtr-muted: #6f6862;
	--gtr-line: #eadfd8;
	--gtr-surface: #ffffff;
}

/* 2. Card ------------------------------------------------------------------ */
/* The stock template left one sentence stranded at the top-left of an empty
   column with the button floated to the far right — two lonely things at
   opposite corners. A single centred card puts the message, the reason and
   the way out on one vertical axis, which is the whole job of this page. */
.gtr-emptystate {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 52rem;
	margin: 2.4rem auto 4rem;
	padding: 4.8rem 3.2rem 4rem;
	border: 1px solid var(--gtr-line);
	border-radius: 20px;
	background: var(--gtr-surface);
	text-align: center;
}

/* 3. Mark ------------------------------------------------------------------ */
/* Inline SVG in the template: no extra request, it scales, and it inherits
   colour so it can never drift from the brand. The soft disc behind it is
   what makes the card read as composed rather than as a lone icon. */
.gtr-emptystate__art {
	display: block;
	width: 9.6rem;
	height: 9.6rem;
	padding: 1.8rem;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--gtr-accent-soft);
	/* The large mark is the one place the lighter brand orange is legible:
	   at this size its 3.7:1 clears the 3:1 WCAG 1.4.11 asks of non-text
	   content. Body-size text below uses --gtr-accent instead. */
	color: var(--gtr-brand);
}

/* 4. Copy ------------------------------------------------------------------ */
/* Prata is already loaded for the display face, so the headline costs nothing
   extra and ties this page to the section titles everywhere else. */
.gtr-emptystate__title {
	margin: 2.4rem 0 0;
	color: var(--gtr-ink);
	font-family: "Prata", Georgia, serif;
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 1.25;
}

.gtr-emptystate__hint {
	max-width: 38rem;
	margin: 1.2rem 0 0;
	color: var(--gtr-muted);
	font-size: 1.45rem;
	line-height: 1.55;
}

/* 5. CTA ------------------------------------------------------------------- */
/* Same pill as the cart summary's Checkout and the sticky bar, so "the
   orange pill is the way forward" holds on every page of the flow. */
.gtr-emptystate__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.8rem;
	margin-top: 2.8rem;
	padding: 1.2rem 3.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--gtr-accent);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(199, 62, 18, .26);
	transition: background 180ms ease;
}

.gtr-emptystate__cta:hover,
.gtr-emptystate__cta:focus {
	background: var(--gtr-accent-strong);
	color: #fff;
	text-decoration: none;
}

.gtr-emptystate__cta:focus-visible {
	outline: 2px solid var(--gtr-accent-strong);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.gtr-emptystate__cta { transition: none; }
}

/* 6. Phones ---------------------------------------------------------------- */
/* The card is already the only thing on the page, so on a phone it drops its
   own frame and lets the viewport be the card — a bordered box inset inside
   a 375px screen wastes the width the copy needs. */
@media (max-width: 767px) {
	.gtr-emptystate {
		margin: 1.6rem auto 3.2rem;
		padding: 3.2rem 1.6rem;
		border: 0;
		border-radius: 0;
	}

	.gtr-emptystate__art {
		width: 8rem;
		height: 8rem;
		padding: 1.4rem;
	}

	.gtr-emptystate__title { font-size: 2.1rem; }
	.gtr-emptystate__hint { font-size: 1.4rem; }

	/* Full-width thumb target — this is the only action on the page. */
	.gtr-emptystate__cta {
		width: 100%;
		max-width: 32rem;
	}
}