/*
 * The customer's place: the header's location picker and the one place menu
 * every page shares (TC_Place, assets/place.js, owner 2026-10-06).
 *
 * The menu's rules came from home.css, which now depends on this sheet. The
 * tokens are home.css's .tc-cards values, stated again here for pages that
 * do not load it (Tea pages, My Account, checkout) -- change both.
 */
.tc-home__loc-menu,
.tc-place-pill,
.tc-place-toast {
	--tc-cream: #FFFDF8;
	--tc-cream-deep: #F5EFE3;
	--tc-card: #FFFFFF;
	--tc-ink: #121111;
	--tc-muted: #6B6660;
	--tc-line: rgba(18, 17, 17, 0.1);
	--tc-green: #29594B;
	--tc-green-dark: #1F463B;
	--tc-green-soft: #E4EEE9;
	--tc-radius-sm: 14px;
	--tc-shadow-lift: 0 14px 34px rgba(18, 17, 17, 0.16);
	--tc-band: #F5EFE3;
	--tc-band-line: rgba(18, 17, 17, 0.12);
	--tc-shadow-pop: 0 2px 6px rgba(18, 17, 17, 0.1), 0 14px 34px rgba(18, 17, 17, 0.2);
	--tc-shadow-chip: 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08);
}

/* ------------------------------------------------------- the header pill */

/*
 * Motta gives every bare <button> a min-width of 160px, a 60px line and a
 * shadow (motta/style.css): each is reset here.
 */
.tc-place-pill,
.tc-place-pill:hover,
.tc-place-pill:focus,
.tc-place-pill:active {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	box-sizing: border-box;
	min-width: 0;
	max-width: 16rem;
	height: 2.5rem;
	margin: 0;
	padding: 0 0.85rem 0 0.7rem;
	border: 1px solid var(--tc-line);
	border-radius: 999px;
	background: var(--tc-card);
	box-shadow: none;
	color: var(--tc-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.tc-place-pill:hover,
.tc-place-pill[aria-expanded="true"] {
	border-color: var(--tc-green);
	background: var(--tc-green-soft);
}

.tc-place-pill:focus-visible {
	outline: 2px solid var(--tc-green);
	outline-offset: 2px;
}

.tc-place-pill__pin {
	flex: none;
	color: var(--tc-green);
}

.tc-place-pill__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Not set yet: the pill asks, in the brand's green. */
.tc-place-pill:not(.is-set) .tc-place-pill__text {
	color: var(--tc-green-dark);
	font-weight: 600;
}

.tc-place-pill.is-finding .tc-place-pill__text {
	color: var(--tc-muted);
}

.tc-place-pill__caret {
	flex: none;
	color: var(--tc-muted);
	transition: transform 0.15s ease;
}

.tc-place-pill[aria-expanded="true"] .tc-place-pill__caret {
	transform: rotate(180deg);
}

/* A phone: the pin and a short name, in the room the header has. */
@media (max-width: 600px) {
	.tc-place-pill,
	.tc-place-pill:hover,
	.tc-place-pill:focus,
	.tc-place-pill:active {
		max-width: 9.5rem;
		height: 2.25rem;
		padding: 0 0.6rem 0 0.5rem;
		font-size: 0.8125rem;
	}

	.tc-place-pill__caret {
		display: none;
	}
}

/* --------------------------------------------- "your cart moved" notice */

.tc-place-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 9996;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem 1rem;
	border-radius: var(--tc-radius-sm);
	background: var(--tc-ink);
	box-shadow: var(--tc-shadow-pop);
	color: #FFFFFF;
	font-size: 0.875rem;
	line-height: 1.4;
	transform: translateX(-50%);
	transition: opacity 0.3s ease;
}

.tc-place-toast.is-gone {
	opacity: 0;
}

/* --------------------------------------------------------- the place menu */

/*
 * The menu. On <body>, fixed, under the toggle (home-order.js places it); a
 * sheet from the foot of the screen at 600px and under. Outside .tc-home, so
 * it states its own [hidden] rule -- the page's does not reach it.
 */
.tc-home__loc-menu {
	position: fixed;
	z-index: 9991;
	box-sizing: border-box;
	width: 20rem;
	max-width: calc(100vw - 1rem);
	max-height: min(70vh, 30rem);
	overflow-y: auto;
	padding: 0.4rem;
	/* Nothing dims the page behind a menu, so its border and shadow are its edge. */
	border: 1px solid rgba(18, 17, 17, 0.16);
	border-radius: var(--tc-radius-sm);
	background: var(--tc-card);
	color: var(--tc-ink);
	box-shadow: var(--tc-shadow-pop, var(--tc-shadow-lift));
	animation: tc-home-loc-in 0.12s ease-out;
}

.tc-home__loc-menu[hidden],
.tc-home__loc-menu [hidden] {
	display: none !important;
}

/*
 * A phone's sheet, placed by CSS alone and as the Cafe's filter sheet is --
 * the one sheet known to show on phones -- with its placement forced, a dim
 * page behind it and the page held still underneath.
 */
.tc-home__loc-menu.is-sheet {
	top: auto !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100%;
	max-width: none;
	max-height: 80vh;
	padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	border-radius: 16px 16px 0 0;
	animation: tc-home-loc-up 0.18s ease-out;
}

/* Close: a phone's sheet only. */
.tc-home__loc-close,
.tc-home__loc-close:hover,
.tc-home__loc-close:focus,
.tc-home__loc-close:active {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	min-width: 0;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--tc-ink);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.tc-home__loc-close:hover {
	background: var(--tc-cream-deep);
}

/* White and raised, on the tinted head it sits in. */
.tc-home__loc-menu.is-sheet .tc-home__loc-close {
	display: flex;
	border: 1px solid var(--tc-line);
	background: #FFFFFF;
	box-shadow: var(--tc-shadow-chip);
}

.tc-home__loc-menu.is-sheet .tc-home__loc-close:hover {
	background: var(--tc-cream);
}

.tc-home__loc-menu.is-sheet .tc-home__loc-close:active {
	box-shadow: none;
}

/*
 * Searching, on a phone: the whole screen, the search box at the top.
 * Google drops its suggestions below the box it serves, and a sheet at the
 * foot of the screen -- with the keyboard up under it -- left them no room
 * (owner, 2026-09-27). The other rows step aside until the menu closes.
 */
.tc-home__loc-menu.is-sheet.is-searching {
	top: 0 !important;
	bottom: 0 !important;
	max-height: none;
	border-radius: 0;
	animation: none;
}

.tc-home__loc-menu.is-searching .tc-home__loc-saved,
.tc-home__loc-menu.is-searching [data-tc-where-gps] {
	display: none;
}

.tc-home__loc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: rgba(18, 17, 17, 0.55);
}

body.tc-home-loc-open {
	overflow: hidden;
}

@keyframes tc-home-loc-up {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-home__loc-menu,
	.tc-home__loc-menu.is-sheet {
		animation: none;
	}
}

/* Google's suggestions, under the search box: above the menu they belong to. */
body .pac-container {
	z-index: 9995;
}

@keyframes tc-home-loc-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/*
 * The question, as a tinted strip across the top of the menu: out to its
 * edges through its padding, deep cream, a rule under it -- the head band
 * every dialog has (owner, 2026-10-02).
 */
.tc-home__loc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: -0.4rem -0.4rem 0.4rem;
	padding: 0.3rem 0.4rem;
	border-bottom: 1px solid var(--tc-band-line, rgba(18, 17, 17, 0.12));
	background: var(--tc-band, #F5EFE3);
}

.tc-home__loc-menu.is-sheet .tc-home__loc-head {
	margin: -0.75rem -0.75rem 0.6rem;
	padding: 0.5rem 0.75rem;
}

.tc-home__loc-ask {
	margin: 0.35rem 0.6rem;
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Their own location is another way of answering: ruled off from the search above it. */
.tc-home__loc-menu .tc-home__loc-item[data-tc-where-gps] {
	margin-top: 0.4rem;
	border-top: 1px solid var(--tc-line);
	border-radius: 0 0 8px 8px;
}

.tc-home__loc-saved {
	margin: 0 0 0.4rem;
	padding: 0 0 0.4rem;
	border-bottom: 1px solid var(--tc-line);
}

.tc-home__loc-heading {
	margin: 0.35rem 0.6rem 0.25rem;
	color: var(--tc-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tc-home__loc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One row: an icon, then the words, read from the left. */
.tc-home__loc-item,
.tc-home__loc-item:hover,
.tc-home__loc-item:focus,
.tc-home__loc-item:active {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 0.6rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--tc-ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.tc-home__loc-item:hover {
	background: var(--tc-cream-deep);
}

.tc-home__loc-item:focus-visible {
	background: var(--tc-cream-deep);
	outline: 2px solid var(--tc-green);
	outline-offset: -2px;
}

.tc-home__loc-item:disabled,
.tc-home__loc-item:disabled:hover {
	background: transparent;
	opacity: 0.6;
	cursor: default;
}

.tc-home__loc-icon {
	flex: none;
	color: var(--tc-green);
}

.tc-home__loc-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* A radio's dot, filled for the address the grid was worked out from. */
.tc-home__loc-radio {
	flex: none;
	box-sizing: border-box;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 0.05rem;
	border: 2px solid var(--tc-muted);
	border-radius: 50%;
}

.tc-home__loc-address[aria-current="true"],
.tc-home__loc-address[aria-current="true"]:hover {
	background: var(--tc-green-soft);
	color: var(--tc-green-dark);
	font-weight: 600;
}

.tc-home__loc-address[aria-current="true"] .tc-home__loc-radio {
	border-color: var(--tc-green);
	background: var(--tc-green);
	box-shadow: inset 0 0 0 3px var(--tc-card);
}

/* The search, as a row: the magnifier where the other rows have their icon. */
.tc-home__loc-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.35rem 0.6rem;
}

.tc-home__loc-search input,
.tc-home__loc-pincode input {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	margin: 0;
	padding: 0 0.85rem;
	border: 1px solid var(--tc-line);
	border-radius: 999px;
	background: var(--tc-cream);
	box-shadow: none;
	color: var(--tc-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.tc-home__loc-pincode {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0.35rem 0.6rem;
}

.tc-home__loc-pincode label {
	display: flex;
	flex: 1;
}

.tc-home__loc-go,
.tc-home__loc-go:hover,
.tc-home__loc-go:focus,
.tc-home__loc-go:active {
	flex: none;
	min-width: 0;
	height: 2.5rem;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--tc-green);
	border-radius: 999px;
	background: var(--tc-green);
	box-shadow: none;
	color: #FFFFFF;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.tc-home__loc-go:hover {
	background: var(--tc-green-dark);
}

.tc-home__loc-error {
	margin: 0.35rem 0.6rem 0.25rem;
	color: #9B2C1F;
	font-size: 0.875rem;
}

/* A saved address still on its way. */
.tc-home__loc-bone {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.6rem;
}

.tc-home__loc-bone-dot,
.tc-home__loc-bone-line {
	display: block;
	background: linear-gradient(90deg, var(--tc-cream-deep) 25%, #FBF6EC 50%, var(--tc-cream-deep) 75%);
	background-size: 200% 100%;
	animation: tc-place-bone 1.2s ease-in-out infinite;
}

.tc-home__loc-bone-dot {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
}

.tc-home__loc-bone-line {
	flex: 1;
	max-width: 70%;
	height: 0.8rem;
	border-radius: 6px;
}

@keyframes tc-place-bone {
	from { background-position: 100% 0; }
	to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-home__loc-bone-dot,
	.tc-home__loc-bone-line,
	.tc-place-pill__caret {
		animation: none;
		transition: none;
	}
}