/*
 * A roaster's ordering page (TC_Roaster_Page::render_order(),
 * templates/roaster/order/page.php), rebuilt on 2026-10-01 in /near-me/'s
 * pattern (owner: "minimalist ... only show what users want to see"; mockup:
 * claude.ai/artifact/YNW6Mt5W1srMg3XeyFc2uL).
 *
 * home.css's tokens, hung on .tc-cards (which the page's <article> carries),
 * and finder.css's look: the roaster in one line, the place's dropdown, one
 * line about delivering there, the front page's own cards, and the green
 * cart bar. With no place, or one they cannot reach, one white card over the
 * menu out of focus.
 *
 * The state is <article data-state>: static (as printed), resolving,
 * checking, ask, ok, shut, far (order.js).
 *
 * Every rule is under #tapper-cafe-app .tc-orderPage: storefront.css styles
 * bare elements inside the app at (0,1,1) -- h2 at 28px among them -- and the
 * theme styles button:hover at (0,1,1) too. The cart sheet is a <dialog> on
 * <body>, outside the app, and is styled at the end on its own class.
 */

body.tc-roaster-order .site-content {
	padding-top: 0;
}

#tapper-cafe-app .tc-orderPage {
	--tc-order-rating: #1E7B47;
	--tc-order-red: #A1261A;
	--tc-order-card-line: rgba(18, 17, 17, 0.13);
	--tc-order-bone: #ECE4D6;
	--tc-order-bone-hi: #F6F1E8;
	--tc-order-amber-bg: #FBF0D9;

	/* /near-me/'s medium blur and veil, and the site header's height taken off the screen's third. */
	--tc-order-blur: 8px;
	--tc-order-veil: rgba(255, 253, 248, 0.45);
	--tc-order-ask-head: 3.5rem;

	position: relative;
	max-width: var(--tc-measure, 68rem);
	margin: 0 auto;
	padding: 0.5rem 0 4rem;
	color: var(--tc-body);
	font-family: var(--tc-home-display);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * Hidden means hidden. Several blocks below state their own display, which
 * outranks the browser's [hidden] rule (/near-me/ drew an empty box that way).
 */
#tapper-cafe-app .tc-orderPage [hidden] {
	display: none !important;
}

/* Room under the last card for the bar, once there is one. */
#tapper-cafe-app .tc-orderPage.has-bar {
	padding-bottom: 10rem;
}

#tapper-cafe-app .tc-orderPage :where(a) {
	color: inherit;
}

#tapper-cafe-app .tc-orderPage :where(p) {
	margin: 0;
}

/*
 * "Why this coffee?" in a link's blue (owner, 2026-10-08), as why.css draws
 * it everywhere else. The inherit above outranks why.css's single class, which turned it
 * the body's grey on this page.
 */
#tapper-cafe-app .tc-orderPage .tc-home__why,
#tapper-cafe-app .tc-orderPage .tc-home__why:visited,
#tapper-cafe-app .tc-orderPage .tc-home__why:active,
#tapper-cafe-app .tc-orderPage .tc-home__why:hover,
#tapper-cafe-app .tc-orderPage .tc-home__why:focus-visible {
	color: var(--tc-link, #1F5FAD);
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__where svg,
#tapper-cafe-app .tc-orderPage .tc-orderPage__ask svg,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar svg {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__h2 {
	margin: 0;
	color: var(--tc-ink);
	font-family: var(--tc-home-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: none;
	text-wrap: balance;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__link,
#tapper-cafe-app .tc-orderPage .tc-orderPage__link:visited {
	color: var(--tc-green);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__link:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__link:focus-visible {
	color: var(--tc-green-dark);
	text-decoration: underline;
}

/*
 * The green pill: the page's one primary button. Motta gives every bare
 * <button> a 160px min-width, a 60px line box and a shadow
 * (motta/style.css:793), so each button here states its own -- not a blanket
 * reset, which would reach into the cards' own Add.
 */
#tapper-cafe-app .tc-orderPage .tc-orderPage__pill,
#tapper-cafe-app .tc-orderPage .tc-orderPage__pill:visited,
#tapper-cafe-app .tc-orderPage .tc-orderPage__pill:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__pill:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	min-height: 3.125rem;
	margin: 0;
	padding: 0 1.375rem;
	border: 0;
	border-radius: 999px;
	background: var(--tc-green);
	box-shadow: none;
	color: #FFFFFF;
	font: 700 0.9375rem/1.2 var(--tc-home-display);
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__pill:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__pill:focus-visible {
	background: var(--tc-green-dark);
}

#tapper-cafe-app .tc-orderPage :where(.tc-orderPage__pill, .tc-orderPage__search, .tc-orderPage__loc):focus-visible {
	outline: 2px solid var(--tc-amber);
	outline-offset: 2px;
}

#tapper-cafe-app .tc-orderPage__state {
	padding: 0.75rem 0.875rem;
	border-radius: 10px;
	background: var(--tc-order-amber-bg);
	color: var(--tc-amber-ink);
	font-size: 0.875rem;
}

#tapper-cafe-app .tc-orderPage__state a {
	font-weight: 600;
}

/* ------------------------------------------------------------ which parts show */

/*
 * Until the place is settled -- and again while a place just given is asked
 * about -- the skeleton stands where the place, the line and the menu will
 * be. The roaster above it is printed with the page and never moves.
 */
#tapper-cafe-app .tc-orderPage:is([data-state="resolving"], [data-state="checking"]) > :is(.tc-orderPage__where, .tc-orderPage__ask, .tc-orderPage__menu, .tc-alike) {
	display: none !important;
}

#tapper-cafe-app .tc-orderPage:not([data-state="resolving"]):not([data-state="checking"]) > .tc-orderPage__skel {
	display: none;
}

/* No place: the card is the whole question, so no dropdown above it. Nor without script. */
#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="static"]) > .tc-orderPage__where {
	display: none;
}

/* Under a card, nothing else competes with it. */
#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) > .tc-alike {
	display: none;
}

/* ------------------------------------------------------------ 1. who */

/* The roaster in one line: their mark, their name, the rating and two links. */
#tapper-cafe-app .tc-orderPage__who {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__mark {
	display: block;
	flex: none;
	text-decoration: none;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__logo {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border-radius: 50%;
	background: var(--tc-green);
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--tc-order-card-line);
	color: #FFFFFF;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	object-fit: cover;
}

#tapper-cafe-app .tc-orderPage__id {
	min-width: 0;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__name {
	margin: 0;
	color: var(--tc-ink);
	font-family: var(--tc-home-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.15;
	text-transform: none;
	text-wrap: balance;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__name a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__name a:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__name a:focus-visible {
	text-decoration: underline;
}

#tapper-cafe-app .tc-orderPage__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.625rem;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
}

/* /near-me/'s rating: a green badge, and how many it stands on beside it. */
#tapper-cafe-app .tc-orderPage .tc-orderPage__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--tc-muted);
	text-decoration: none;
}

#tapper-cafe-app .tc-orderPage__rating b {
	display: inline-flex;
	align-items: center;
	height: 1.4375rem;
	padding: 0 0.4375rem;
	border-radius: 6px;
	background: var(--tc-order-rating);
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__rating:hover b,
#tapper-cafe-app .tc-orderPage .tc-orderPage__rating:focus-visible b {
	background: #16633A;
}

#tapper-cafe-app .tc-orderPage__rating small {
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------ 2. where */

/*
 * The place's dropdown, then the one line about delivering to it: stacked on
 * a phone, side by side on a desk. The skeleton's two bones take the same
 * places.
 */
#tapper-cafe-app .tc-orderPage__where,
#tapper-cafe-app .tc-orderPage__skel-where {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: 0.875rem;
}

/* /near-me/'s dropdown: the place, with a caret. It opens where.js's menu under it. */
#tapper-cafe-app .tc-orderPage .tc-orderPage__loc,
#tapper-cafe-app .tc-orderPage .tc-orderPage__loc:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__loc:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
	max-width: min(100%, 22rem);
	height: 2.5rem;
	margin: 0;
	padding: 0 0.625rem 0 0.5rem;
	border: 0;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-order-card-line);
	color: var(--tc-ink);
	font: 700 0.9375rem/1.2 var(--tc-home-display);
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__loc:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__loc[aria-expanded="true"] {
	background: var(--tc-green-soft);
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__loc > svg:first-child {
	color: var(--tc-green);
}

#tapper-cafe-app .tc-orderPage__loc-place {
	overflow: hidden;
	min-width: 0;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "About 35 min · ₹30 delivery": what they came to learn, first and in ink. Red when closed. */
#tapper-cafe-app .tc-orderPage__line {
	color: var(--tc-body);
	font-size: 0.9375rem;
	line-height: 1.4;
}

#tapper-cafe-app .tc-orderPage__line::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--tc-order-rating);
	box-shadow: 0 0 0 3px rgba(30, 123, 71, 0.18);
	vertical-align: 0.0625rem;
}

#tapper-cafe-app .tc-orderPage__line b {
	color: var(--tc-ink);
	font-weight: 600;
}

#tapper-cafe-app .tc-orderPage__line[data-tone="shut"] b {
	color: var(--tc-order-red);
}

#tapper-cafe-app .tc-orderPage__line[data-tone="shut"]::before {
	background: var(--tc-order-red);
	box-shadow: 0 0 0 3px rgba(161, 38, 26, 0.15);
}

/* ------------------------------------------------------------ the card over the blur */

/*
 * No place, or a place they cannot reach: the menu out of focus under a
 * cream veil, and one white card the only sharp thing below the roaster
 * (/near-me/'s ask and "want it here" cards). The page is one screen tall,
 * and the menu is cut to it.
 */
#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) {
	min-height: max(34rem, calc(100vh - 4rem));
	min-height: max(34rem, calc(100svh - 4rem));
}

/*
 * --tc-order-ask-floor is where the sharp lines above end, plus a gap
 * (order.js placeCard()): the menu starts just over it, the card on it.
 */
#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) > .tc-orderPage__menu {
	position: absolute;
	top: calc(var(--tc-order-ask-floor, 9rem) - 0.5rem);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) > .tc-orderPage__menu > * {
	margin-top: 0;
	filter: blur(var(--tc-order-blur));
}

#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) > .tc-orderPage__menu::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tc-order-veil);
}

#tapper-cafe-app .tc-orderPage__ask {
	max-width: 40rem;
	padding: 1.25rem;
	border-radius: var(--tc-radius);
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--tc-order-card-line), 0 24px 60px rgba(18, 17, 17, 0.18);
}

/*
 * A third of the way down the screen, as on /near-me/ -- its middle there,
 * so its top about 7rem higher -- and never over the lines above it.
 */
#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) > .tc-orderPage__ask {
	position: absolute;
	top: max(var(--tc-order-ask-floor, 9rem), calc(33vh - var(--tc-order-ask-head) - 7rem));
	top: max(var(--tc-order-ask-floor, 9rem), calc(33svh - var(--tc-order-ask-head) - 7rem));
	right: 0;
	left: 0;
	z-index: 2;
	margin: 0 auto;
}

#tapper-cafe-app .tc-orderPage__ask-head {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 1.125rem;
}

#tapper-cafe-app .tc-orderPage__ask-ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--tc-green);
	color: #FFFFFF;
}

/* They cannot deliver here: amber, a warning rather than a door shut. */
#tapper-cafe-app .tc-orderPage__ask-ic--warn {
	background: var(--tc-amber);
	color: var(--tc-ink);
}

#tapper-cafe-app .tc-orderPage__ask-sub {
	margin-top: 0.125rem;
	color: var(--tc-body);
	font-size: 0.875rem;
}

/* Stacked on a phone, the green one first. */
#tapper-cafe-app .tc-orderPage__ask-go {
	display: grid;
	gap: 0.625rem;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__ask-go .tc-orderPage__pill {
	width: 100%;
}

/* A field to look at, a button to press: it opens where.js's search. */
#tapper-cafe-app .tc-orderPage .tc-orderPage__search,
#tapper-cafe-app .tc-orderPage .tc-orderPage__search:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__search:focus {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	min-width: 0;
	min-height: 3.125rem;
	margin: 0;
	padding: 0 0.875rem;
	border: 2px solid var(--tc-order-card-line);
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: none;
	color: #57524D;
	font: 500 0.9375rem/1.2 var(--tc-home-display);
	text-align: left;
	text-transform: none;
	cursor: text;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__search svg {
	color: var(--tc-green);
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__search span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__search:hover {
	border-color: var(--tc-green);
	background: var(--tc-green-soft);
}

/* ------------------------------------------------------------ the skeleton */

#tapper-cafe-app .tc-orderPage__bone {
	display: block;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tc-order-bone) 0%, var(--tc-order-bone-hi) 50%, var(--tc-order-bone) 100%);
	background-size: 200% 100%;
	animation: tc-order-shimmer 1.3s ease-in-out infinite;
}

/* The dropdown and the line, the size of the real ones. */
#tapper-cafe-app .tc-orderPage__bone--loc { flex: none; width: 11rem; height: 2.5rem; }
#tapper-cafe-app .tc-orderPage__bone--line { flex: none; width: 14rem; height: 1rem; border-radius: 8px; }
#tapper-cafe-app .tc-orderPage__bone--pic { width: 9rem; height: 9rem; border-radius: var(--tc-radius-sm); }
#tapper-cafe-app .tc-orderPage__bone--name { width: 80%; height: 1.125rem; }
#tapper-cafe-app .tc-orderPage__bone--meta { width: 65%; height: 0.75rem; }
#tapper-cafe-app .tc-orderPage__bone--short { width: 40%; }
#tapper-cafe-app .tc-orderPage__bone--price { width: 45%; height: 1.125rem; margin-top: 0.375rem; }

/* A phone's row, as home.css draws a card there: the words, then the photograph. */
#tapper-cafe-app .tc-orderPage__skel-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

#tapper-cafe-app .tc-orderPage__skel-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 9rem;
	gap: 0.875rem;
	margin: 0;
	padding: 1rem 0 1.125rem;
}

#tapper-cafe-app .tc-orderPage__skel-card .tc-orderPage__bone--pic {
	order: 2;
}

#tapper-cafe-app .tc-orderPage__skel-lines {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-width: 0;
	padding-top: 0.25rem;
}

@keyframes tc-order-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	#tapper-cafe-app .tc-orderPage__bone {
		animation: none;
	}
}

/* ------------------------------------------------------------ 3. the menu */

#tapper-cafe-app .tc-orderPage__menu {
	margin-top: 0.5rem;
}

#tapper-cafe-app .tc-orderPage > .tc-orderPage__menu > .tc-orderPage__state {
	margin-top: 1.25rem;
}

#tapper-cafe-app .tc-orderPage .tc-alike {
	margin: 1rem 0 0;
}

/*
 * Two sections, when the roaster sells gear (owner, 2026-10-09; mockup:
 * claude.ai/artifact/8azrwLyKxrf761BtXGx4BK): "Fresh Coffee", then "More from
 * {roaster}" past a cream band on a phone and a hairline on a desk.
 */
#tapper-cafe-app .tc-orderPage .tc-orderPage__sec {
	margin: 1.5rem 0 0;
	color: var(--tc-ink);
	font-family: var(--tc-home-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__sec + .tc-orderPage__list .tc-home__items,
#tapper-cafe-app .tc-orderPage .tc-orderPage__lead + .tc-cards .tc-home__items {
	margin-top: 0.5rem;
}

#tapper-cafe-app .tc-orderPage__gear {
	margin: 2rem -1rem 0;
	padding: 0 1rem;
	border-top: 0.5rem solid var(--tc-cream-deep);
}

#tapper-cafe-app .tc-orderPage__gear .tc-orderPage__sec--next {
	margin-top: 1.25rem;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__lead {
	margin: 0.25rem 0 0;
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

/* A gear card: the coffee card, with its short description where the cup lines go. */
#tapper-cafe-app .tc-orderPage .tc-home__item-blurb {
	margin: 0.3rem 0 0;
	color: var(--tc-body);
	font-size: 0.8125rem;
	line-height: 1.4;
}

#tapper-cafe-app .tc-orderPage .tc-home__tile--gear {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tc-cream-deep);
	color: var(--tc-green);
}

#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__price strong del {
	margin-right: 0.25rem;
	color: var(--tc-muted);
	font-weight: 400;
}

#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__price strong ins {
	text-decoration: none;
}

@media (max-width: 47.99em) {
	#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__item-blurb {
		grid-area: notes;
	}

	#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__item:last-child {
		border-bottom: 0;
	}
}

@media (min-width: 48em) {
	#tapper-cafe-app .tc-orderPage .tc-orderPage__sec {
		margin-top: 2rem;
		font-size: 1.5rem;
	}

	#tapper-cafe-app .tc-orderPage__gear {
		margin: 3rem 0 0;
		padding: 0;
		border-top: 1px solid var(--tc-line);
	}

	#tapper-cafe-app .tc-orderPage__gear .tc-orderPage__sec--next {
		margin-top: 2rem;
	}

	#tapper-cafe-app .tc-orderPage .tc-orderPage__lead {
		font-size: 0.875rem;
	}

	/* Gear is browsed less than coffee: four to a row, square pictures. */
	#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}

	#tapper-cafe-app .tc-orderPage .tc-cards--gear .tc-home__item-media {
		aspect-ratio: 1;
	}
}

/* The coffee a reorder link came for. */
#tapper-cafe-app .tc-orderPage .tc-home__item.is-picked {
	border-radius: var(--tc-radius-sm);
	box-shadow: 0 0 0 2px var(--tc-green), 0 0 0 6px rgba(41, 89, 75, 0.12);
}

/*
 * Add, while they are shut: says why, in the button's place, and cannot be
 * pressed. The price stays, and the card still opens.
 */
#tapper-cafe-app .tc-orderPage .tc-home__add.is-cant {
	min-width: 0;
	border-color: transparent;
	background: var(--tc-cream-deep);
	box-shadow: none;
	color: var(--tc-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	cursor: default;
}

/* ------------------------------------------------------------ desks */

@media (min-width: 48em) {
	#tapper-cafe-app .tc-orderPage {
		--tc-order-ask-head: 4.75rem;
	}

	#tapper-cafe-app .tc-orderPage:is([data-state="ask"], [data-state="far"]) {
		min-height: max(34rem, calc(100vh - 7rem));
	}

	#tapper-cafe-app .tc-orderPage__who {
		gap: 1rem;
	}

	#tapper-cafe-app .tc-orderPage .tc-orderPage__logo {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.5rem;
	}

	#tapper-cafe-app .tc-orderPage__meta {
		gap: 0.25rem 0.875rem;
		font-size: 0.875rem;
	}

	#tapper-cafe-app .tc-orderPage__where,
	#tapper-cafe-app .tc-orderPage__skel-where {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		margin-top: 1rem;
	}

	/* Centred on a desk: the pin over the question, the two answers side by side. */
	#tapper-cafe-app .tc-orderPage__ask {
		max-width: 35rem;
		padding: 2rem 2.25rem;
	}

	#tapper-cafe-app .tc-orderPage__ask-head {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	#tapper-cafe-app .tc-orderPage__ask-go {
		grid-template-columns: auto minmax(0, 1fr);
	}

	#tapper-cafe-app .tc-orderPage__ask-go--one {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Three bones a row, the photograph over the words, as the cards are. */
	#tapper-cafe-app .tc-orderPage__skel-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.5rem 3rem;
		margin-top: 1.25rem;
	}

	#tapper-cafe-app .tc-orderPage__skel-card {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	#tapper-cafe-app .tc-orderPage__skel-card .tc-orderPage__bone--pic {
		order: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------ 4. the cart bar */

/* The product page's green pill, with how far to free delivery above it. */
#tapper-cafe-app .tc-orderPage__bar {
	position: fixed;
	right: 0.75rem;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
	left: 0.75rem;
	z-index: 90;
	max-width: 40rem;
	margin: 0 auto;
}

#tapper-cafe-app .tc-orderPage__bar[hidden] {
	display: none;
}

@media (max-width: 47.99em) {
	#tapper-cafe-app .tc-orderPage__bar {
		bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tc-bottom-nav, 64px) + 0.5rem);
	}
}

#tapper-cafe-app .tc-orderPage__bar.is-bumped .tc-orderPage__pill-bar {
	animation: tc-order-bump 0.35s ease-out;
}

@keyframes tc-order-bump {
	40% { transform: translateY(-4px); }
	100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#tapper-cafe-app .tc-orderPage__bar.is-bumped .tc-orderPage__pill-bar {
		animation: none;
	}
}

#tapper-cafe-app .tc-orderPage__progress {
	display: block;
	margin: 0 0.875rem;
	padding: 0.5rem 0.875rem 0.875rem;
	border-radius: 14px 14px 0 0;
	background: #FFFFFF;
	box-shadow: 0 -6px 18px rgba(18, 17, 17, 0.08);
	color: var(--tc-body);
	font-size: 0.75rem;
	line-height: 1.3;
}

#tapper-cafe-app .tc-orderPage__progress[hidden] {
	display: none;
}

#tapper-cafe-app .tc-orderPage__meter,
.tc-orderSheet .tc-orderSheet__meter {
	display: block;
	height: 4px;
	margin-top: 0.375rem;
	overflow: hidden;
	border-radius: 2px;
	background: var(--tc-cream-deep);
}

#tapper-cafe-app .tc-orderPage__meter i,
.tc-orderSheet .tc-orderSheet__meter i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 2px;
	background: var(--tc-green);
	transition: width 0.3s ease;
}

#tapper-cafe-app .tc-orderPage__pill-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: -0.375rem;
	padding: 0.5rem 0.5rem 0.5rem 0.25rem;
	border-radius: 999px;
	background: var(--tc-green);
	box-shadow: var(--tc-shadow-lift);
	color: #FFFFFF;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-open,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-open:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-open:focus {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 0.875rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #FFFFFF;
	font: inherit;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-open:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: -2px;
}

#tapper-cafe-app .tc-orderPage__bar-open b {
	overflow: hidden;
	max-width: 100%;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#tapper-cafe-app .tc-orderPage__bar-open small {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: #CFE0D8;
	font-size: 0.75rem;
}

/* White on green, and nothing else's link colour: the theme styles a:hover too. */
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-go,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-go:visited,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-go:hover,
#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-go:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.375rem;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--tc-green-dark);
	font-weight: 600;
	text-decoration: none;
}

#tapper-cafe-app .tc-orderPage .tc-orderPage__bar-go.is-under {
	background: rgba(255, 255, 255, 0.72);
	color: #3E5B52;
}

/* A word at the foot of the screen, above the bar. */
#tapper-cafe-app .tc-orderPage__toast {
	position: fixed;
	right: 1rem;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 6.5rem);
	left: 1rem;
	z-index: 95;
	max-width: 30rem;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--tc-ink);
	box-shadow: var(--tc-shadow-lift);
	color: #FFFFFF;
	font-size: 0.875rem;
	line-height: 1.35;
	text-align: center;
}

#tapper-cafe-app .tc-orderPage__toast[hidden] {
	display: none;
}

@media (max-width: 47.99em) {
	#tapper-cafe-app .tc-orderPage__toast {
		bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tc-bottom-nav, 64px) + 6rem);
	}
}

/* ------------------------------------------------------------ the cart sheet */

/*
 * A native <dialog> on <body> (order.js): a sheet from the foot on a phone,
 * a panel in the middle on a desk. Outside #tapper-cafe-app, so it carries
 * tc-cards for the tokens and states its own type.
 */
dialog.tc-orderSheet {
	width: min(32rem, 100%);
	max-width: 100%;
	max-height: min(85vh, 44rem);
	margin: auto auto 0;
	padding: 0.625rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
	overflow-y: auto;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: var(--tc-cream);
	box-shadow: 0 -10px 30px rgba(18, 17, 17, 0.2);
	color: var(--tc-body);
	font-family: var(--tc-home-display);
	font-size: 0.9375rem;
	line-height: 1.45;
}

dialog.tc-orderSheet::backdrop {
	background: rgba(18, 17, 17, 0.55);
}

@media (min-width: 48em) {
	dialog.tc-orderSheet {
		margin: auto;
		padding-bottom: 1.25rem;
		border-radius: 20px;
	}

	dialog.tc-orderSheet .tc-orderSheet__grab {
		display: none;
	}
}

.tc-orderSheet .tc-orderSheet__grab {
	width: 2.5rem;
	height: 4px;
	margin: 0 auto 0.75rem;
	border-radius: 2px;
	background: rgba(18, 17, 17, 0.2);
}

.tc-orderSheet .tc-orderSheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.tc-orderSheet .tc-orderSheet__title {
	margin: 0;
	color: var(--tc-ink);
	font-family: var(--tc-home-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
}

.tc-orderSheet .tc-orderSheet__close,
.tc-orderSheet .tc-orderSheet__close:hover,
.tc-orderSheet .tc-orderSheet__close:focus {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--tc-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.tc-orderSheet .tc-orderSheet__close:hover {
	background: var(--tc-cream-deep);
}

.tc-orderSheet .tc-orderSheet__sub {
	margin: 0.125rem 0 0;
	color: var(--tc-muted);
	font-size: 0.875rem;
}

.tc-orderSheet .tc-orderSheet__lines {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.tc-orderSheet .tc-orderSheet__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.375rem 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--tc-line);
}

.tc-orderSheet .tc-orderSheet__name {
	color: var(--tc-ink);
	font-weight: 600;
	line-height: 1.3;
}

.tc-orderSheet .tc-orderSheet__price {
	color: var(--tc-ink);
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tc-orderSheet .tc-orderSheet__qty {
	grid-column: 1 / -1;
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

.tc-orderSheet .tc-orderSheet__step {
	justify-self: start;
	height: 2.25rem;
}

.tc-orderSheet .tc-orderSheet__remove,
.tc-orderSheet .tc-orderSheet__remove:hover,
.tc-orderSheet .tc-orderSheet__remove:focus {
	justify-self: end;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tc-muted);
	font: 500 0.8125rem/1 var(--tc-home-display);
	text-transform: none;
	cursor: pointer;
}

.tc-orderSheet .tc-orderSheet__remove:hover {
	color: var(--tc-ink);
	text-decoration: underline;
}

.tc-orderSheet .tc-orderSheet__progress {
	margin: 0.875rem 0 0;
	padding: 0.625rem 0.75rem;
	border-radius: 12px;
	background: var(--tc-green-soft);
	color: var(--tc-green-dark);
	font-size: 0.875rem;
}

.tc-orderSheet .tc-orderSheet__progress[hidden] {
	display: none;
}

.tc-orderSheet .tc-orderSheet__progress .tc-orderSheet__meter {
	background: #FFFFFF;
}

.tc-orderSheet .tc-orderSheet__sums {
	margin-top: 0.75rem;
}

.tc-orderSheet .tc-orderSheet__sum {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0.1875rem 0;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.tc-orderSheet .tc-orderSheet__sum.is-total {
	padding-top: 0.5rem;
	color: var(--tc-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

.tc-orderSheet .tc-orderSheet__go,
.tc-orderSheet .tc-orderSheet__go:visited,
.tc-orderSheet .tc-orderSheet__go:hover,
.tc-orderSheet .tc-orderSheet__go:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	margin-top: 0.875rem;
	border-radius: 999px;
	background: var(--tc-green);
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.tc-orderSheet .tc-orderSheet__go:hover,
.tc-orderSheet .tc-orderSheet__go:focus-visible {
	background: var(--tc-green-dark);
}

.tc-orderSheet .tc-orderSheet__go.is-under {
	background: #8FA69E;
}

.tc-orderSheet .tc-orderSheet__more,
.tc-orderSheet .tc-orderSheet__more:hover,
.tc-orderSheet .tc-orderSheet__more:focus {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0.25rem 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tc-green);
	font: 600 0.9375rem/1 var(--tc-home-display);
	text-transform: none;
	cursor: pointer;
}

.tc-orderSheet .tc-orderSheet__more:hover {
	text-decoration: underline;
}

/*
 * The sheet in three parts (owner, 2026-10-02: the dialogs read as one flat
 * sheet). The top and the foot are deep-cream bands that stay put; the lines
 * between them are white and are what scrolls -- so the total and Checkout
 * are in view however long the cart is, where they used to scroll away with
 * it. It was one cream sheet scrolling as a whole.
 *
 * order.js builds the three wrappers and puts --banded on the dialog.
 * Everything here hangs on that class, so a page holding the older script
 * still draws the sheet it always did. After the rules above, at their weight.
 */
dialog.tc-orderSheet--banded {
	padding: 0;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--tc-shadow-modal, 0 -10px 30px rgba(18, 17, 17, 0.2));
}

dialog.tc-orderSheet--banded[open] {
	display: flex;
	flex-direction: column;
}

.tc-orderSheet__top {
	flex: none;
	padding: 0.625rem 1rem 0.75rem;
	border-bottom: 1px solid var(--tc-band-line);
	background: var(--tc-band);
}

/* In the band, where muted is 5.0:1 and the body colour 9.3:1. */
.tc-orderSheet--banded .tc-orderSheet__sub {
	color: var(--tc-body);
}

.tc-orderSheet__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 1rem 0.9rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tc-orderSheet--banded .tc-orderSheet__lines {
	margin-top: 0;
}

/* The foot's own rule is the line under the last coffee. */
.tc-orderSheet--banded .tc-orderSheet__line:last-child {
	border-bottom: 0;
}

.tc-orderSheet--banded .tc-orderSheet__progress {
	margin-top: 0.25rem;
}

.tc-orderSheet__foot {
	flex: none;
	padding: 0.1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
	border-top: 1px solid var(--tc-band-line);
	background: var(--tc-band);
}

/* White and raised, on the band it sits in. */
.tc-orderSheet--banded .tc-orderSheet__close,
.tc-orderSheet--banded .tc-orderSheet__close:hover,
.tc-orderSheet--banded .tc-orderSheet__close:focus,
.tc-orderSheet--banded .tc-orderSheet__close:active {
	min-width: 0;
	border: 1px solid var(--tc-line);
	background: #FFFFFF;
	box-shadow: var(--tc-shadow-chip);
}

.tc-orderSheet--banded .tc-orderSheet__close:hover {
	background: var(--tc-cream);
}

.tc-orderSheet--banded .tc-orderSheet__close:active {
	box-shadow: none;
}

/* The way on, on its own colour's shadow; not while the cart is under the minimum. */
.tc-orderSheet--banded .tc-orderSheet__go,
.tc-orderSheet--banded .tc-orderSheet__go:visited,
.tc-orderSheet--banded .tc-orderSheet__go:hover,
.tc-orderSheet--banded .tc-orderSheet__go:focus {
	box-shadow: var(--tc-shadow-go);
}

.tc-orderSheet--banded .tc-orderSheet__go:active,
.tc-orderSheet--banded .tc-orderSheet__go.is-under {
	box-shadow: none;
}

@media (min-width: 48em) {
	.tc-orderSheet__foot {
		padding-bottom: 0.5rem;
	}
}

/*
 * A phone on its side: two fixed bands would leave the lines a slit to
 * scroll in. The sheet scrolls as one again, as it did.
 */
@media (max-height: 30rem) {
	dialog.tc-orderSheet--banded {
		overflow-y: auto;
	}

	dialog.tc-orderSheet--banded[open] {
		display: block;
	}
}

/* ------------------------------------------------------------ a phone's gutter */

/*
 * One 16px gutter on a phone (owner, 2026-09-30: "extra white space around
 * the coffees"). Motta's .container (16px) and .tc-app-container (12px) had
 * stacked, which left a Swiggy row's words a narrow column beside the photo.
 * Motta's 16px is kept; the container's goes, on this page only.
 *
 * And less air between the rows: the cards are the page.
 */
@media (max-width: 47.99em) {
	body.tc-roaster-order #tapper-cafe-app.tc-app-container {
		padding-right: 0;
		padding-left: 0;
	}

	#tapper-cafe-app .tc-orderPage {
		padding-top: 0.25rem;
	}

	#tapper-cafe-app .tc-orderPage .tc-cards--order .tc-home__items {
		margin-top: 0.5rem;
	}

	#tapper-cafe-app .tc-orderPage .tc-home__items .tc-home__item {
		padding: 1rem 0 1.125rem;
	}
}