/*
 * Tư-Trà Beverage: styles the bundled Bricks templates rely on.
 *
 * Only what a Bricks control cannot express lives here (Handbook §VII.4):
 * the stretched card link, hover (only where hover exists), the tea sheet,
 * the menu title's two-line split. Loaded on every page (§VII.9).
 */

/* Product cards: the headline carries the one link; its ::after covers the
   card (Handbook §VII.5). */
.tt-tp-bev-card { position: relative; }
.tt-tp-bev-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tt-tp-bev-card .product-title { text-wrap: balance; }
@media (hover: hover) {
	.tt-tp-bev-card-link a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 4px; }
}

/* Menu title: first word above, in the script face, once the script splits
   a title of three or more words. */
#tt-tp-bev-menu-title .tt-tp-bev-title-first {
	display: block;
	font-family: "Pinyon Script", cursive;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1;
}
#tt-tp-bev-menu-title .tt-tp-bev-title-rest { display: block; }

/* The menu screen had hidden the header's menu icon. */
body:has(#tt-tp-bev-menu) #menu-icon { display: none !important; }

/* "Tìm hiểu về trà →" */
.tt-tp-bev-tea-more, .tt-tp-bev-sheet {
	--tt-tp-bev-ink: #231f20;
	--tt-tp-bev-ink-soft: rgba(35, 31, 32, 0.64);
	--tt-tp-bev-paper: #f4f5f0;
	--tt-tp-bev-accent: var(--color-the, #62704D);
	--tt-tp-bev-hair: rgba(96, 96, 67, 0.2);
}
.tt-tp-bev-tea-open {
	min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
	font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 0.875rem; letter-spacing: 0.02em;
	color: var(--tt-tp-bev-accent);
	text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 5px;
}
.tt-tp-bev-tea-open:focus-visible, .tt-tp-bev-sheet__close:focus-visible { outline: 1px solid var(--tt-tp-bev-accent); outline-offset: 3px; }

.tt-tp-bev-sheet { position: fixed; inset: 0; z-index: 100001; }
.tt-tp-bev-sheet[hidden] { display: none; }
.tt-tp-bev-sheet__scrim {
	position: absolute; inset: 0; background: rgba(35, 31, 32, 0.32);
	opacity: 0; transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.tt-tp-bev-sheet__panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto;
	background: var(--tt-tp-bev-paper); color: var(--tt-tp-bev-ink);
	border-top: 0.5px solid var(--tt-tp-bev-hair);
	padding: 34px 21px calc(34px + env(safe-area-inset-bottom, 0px));
	transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
	text-align: left;
}
.tt-tp-bev-sheet.is-open .tt-tp-bev-sheet__scrim { opacity: 1; }
.tt-tp-bev-sheet.is-open .tt-tp-bev-sheet__panel { transform: none; }
.tt-tp-bev-sheet__close {
	position: absolute; top: 13px; right: 13px; width: 44px; height: 44px;
	border: 0; background: none; cursor: pointer; color: var(--tt-tp-bev-ink-soft);
	font: 300 1.5rem/1 "Montserrat", system-ui, sans-serif;
}
.tt-tp-bev-sheet__title {
	margin: 0 auto; max-width: 30rem; padding-right: 44px;
	font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.75rem; line-height: 1.2;
}
.tt-tp-bev-sheet__panel p {
	margin: 13px auto 0; max-width: 30rem;
	font-family: "Cormorant Garamond", serif; font-size: 1.1875rem; line-height: 1.5; color: var(--tt-tp-bev-ink-soft);
}
.tt-tp-bev-sheet__panel .tt-tp-bev-sheet__cup { margin-top: 21px; padding-top: 21px; border-top: 0.5px solid var(--tt-tp-bev-hair); }
html.tt-tp-bev-sheet-lock, html.tt-tp-bev-sheet-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.tt-tp-bev-sheet__scrim, .tt-tp-bev-sheet__panel { transition: none; }
}