/*
 * Tư-Trà Beverage: the order hub (4.0.0), Tư-Trà Order (tt-el-pk-hub-order).
 * From the demo signed off on 13 Oct 2026. Colours on the colorway
 * variables; journey tokens (--tt-pl-pk-hub-j-*) from tt-pl-pk-hub-journey.css.
 */
.tt-el-pk-or-part { width: 100%; }
.tt-el-pk-or, .tt-el-pk-or-head {
	--tt-el-pk-or-dock: var(--tt-el-bn-space-full, 74px);
	/* 5.14.0: the gutter, the Tab Bar's Side Space (the gap the band keeps from the screen's edges) */
	--tt-el-pk-or-gutter: var(--tt-el-pk-tr-gutter, var(--space-m, 24px));
	font-family: var(--tt-pl-pk-hub-j-sans); color: var(--tt-pl-pk-hub-j-ink);
}

/* Head, in the green band */
.tt-el-pk-or-head { text-align: center; color: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-pk-or-title { margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 400; font-size: var(--step-5, 2.75rem); line-height: 1; letter-spacing: 0.04em; color: inherit; }
.tt-el-pk-or-fr { margin: 4px 0 0; font-family: var(--tt-pl-pk-hub-j-script, var(--tt-pl-pk-hub-j-serif)); font-size: var(--step-2, 1.5rem); color: inherit; opacity: 0.9; }
.tt-el-pk-or-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 20rem; margin: 21px auto 0; }
.tt-el-pk-or-seg button { position: relative; margin: 0; border: 0; border-radius: 0; background: none; padding: 8px 0 13px; cursor: pointer;
	color: rgba(252, 250, 241, 0.62); font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-seg button[aria-selected="true"] { color: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-pk-or-ink { position: absolute; left: 0; bottom: 0; width: 50%; height: 1.5px; background: var(--color-cassonade, rgb(224, 206, 170)); transition: transform 0.42s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-seg[data-on="orders"] .tt-el-pk-or-ink { transform: translateX(100%); }
.tt-el-pk-or-badge { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--color-cassonade, rgb(224, 206, 170)); color: var(--tt-pl-pk-hub-j-ink); font-size: 0.6875rem; letter-spacing: 0; vertical-align: 1px; }
.tt-el-pk-or-badge:empty { display: none; }
.tt-el-pk-or-badge.is-live { width: 7px; min-width: 0; height: 7px; padding: 0; vertical-align: 2px; animation: tt-el-pk-or-live 1.6s ease-in-out infinite; }
@keyframes tt-el-pk-or-live { 50% { opacity: 0.35; } }

/* Body */
/* 5.12.0: as wide as the Tab Bar above it (its span, published on the tabs); 34rem without one */
.tt-el-pk-or { max-width: var(--tt-el-pk-tr-span, 34rem); margin: 0 auto; padding-bottom: calc(110px + var(--tt-el-pk-or-dock) + env(safe-area-inset-bottom, 0px)); }
.tt-el-pk-or--orders, .tt-el-pk-or[data-empty="1"] { padding-bottom: calc(var(--tt-el-pk-or-dock) + 55px + env(safe-area-inset-bottom, 0px)); }
.tt-el-pk-or-from { margin: var(--tt-el-pk-or-gutter) 0 0; text-align: center; font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }
/* 5.14.0: the space under a section is content (::after), not padding: a sticky title is held in its
   section's content box, so with padding it let go 21px before the next title arrived (a gap with
   no title); now the next one pushes it off directly, as on iOS. */
.tt-el-pk-or-sec { padding: 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-or-sec::after { content: ""; display: block; height: 21px; }
.tt-el-pk-or-sec:last-child { border-bottom: 0; }
/* 5.14.0: each section's title sticks under the tabs' band while its section scrolls beneath it,
   and is pushed off by the next one, as iOS's list headers. The band publishes the line under it
   (--tt-el-pk-tb-under, Tư-Trà Tabs 1.7.0) and moves it with the header's shrink, so the title
   follows on the header's own timing. Concentric: the gap above the title is the gutter, the
   gap the band keeps from the screen's sides, at rest and while stuck. */
.tt-el-pk-or-sec-h {
	position: -webkit-sticky; position: sticky; top: var(--tt-el-pk-tb-under, 0px); z-index: 5;
	display: flex; align-items: center; justify-content: space-between; gap: 13px;
	margin: 0; padding: var(--tt-el-pk-or-gutter) 0 21px;
	transition: top var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out);
}
@media (prefers-reduced-motion: reduce) { .tt-el-pk-or-sec-h { transition: none; } }
/* The gutter is measured to the title's capitals, not its line box: the box is trimmed to the cap
   height and the baseline (text-box), so the space above the letters is the gutter exactly, as the
   space beside them. The button is centred on the capitals and takes no height of its own. */
@supports (text-box: trim-both cap alphabetic) {
	.tt-el-pk-or-sec-h h2 { text-box: trim-both cap alphabetic; }
}
.tt-el-pk-or-sec-h .tt-el-pk-or-pill { margin-block: calc(var(--tt-el-pk-or-cap) * -0.809017); }   /* 5.20.0: half its height: centred on the capitals, no height of its own */
/* 5.20.0 — "Thêm món", sized from the title it sits beside. The title's cap height (C) is the unit:
   the button is C x phi high (a capsule, half circles at its ends), its label is Cormorant Garamond
   regular in capitals whose own cap height is C / phi (so the button is phi^2 of its label's
   capitals), its sides keep the end circles' radius (half its height) clear of the label, and it is
   centred on the title's capitals and takes no height in the row. C is read from the title's own face
   (1cap of Cormorant Unicase at the title's size, registered so it computes where it is declared);
   where cap units or registered properties are missing, the title's size x 0.625, the face's cap
   height (Cormorant Unicase and Cormorant Garamond both: 625 units of 1000). */
@property --tt-el-pk-or-cap { syntax: '<length>'; inherits: true; initial-value: 15px; }
.tt-el-pk-or-sec-h {
	--tt-el-pk-or-title-size: var(--step-2, 1.5625rem);   /* 5.22.0: the site's type step (was a hard-coded 1.5rem); the button follows from it */
	--tt-el-pk-or-cap: calc(var(--tt-el-pk-or-title-size) * 0.625);
	font-family: "Cormorant Unicase", var(--tt-pl-pk-hub-j-serif); font-weight: 500; font-size: var(--tt-el-pk-or-title-size);
}
@supports (height: 1cap) { .tt-el-pk-or-sec-h { --tt-el-pk-or-cap: 1cap; } }
.tt-el-pk-or-pill {
	position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: calc(var(--tt-el-pk-or-cap) * 1.618034);
	padding: 0 calc(var(--tt-el-pk-or-cap) * 0.809017);
	border-radius: 999px;
	background: rgba(var(--color-the-rgb, 98, 112, 77), 0.1); color: var(--color-the, rgb(98, 112, 77));
	font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em;
	font-size: calc(var(--tt-el-pk-or-cap) * 0.618034 / 0.625);   /* its capitals: C / phi */
	line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: transform 0.2s var(--tt-pl-pk-hub-j-ease), background-color 0.2s var(--tt-pl-pk-hub-j-ease);
}
@supports (text-box: trim-both cap alphabetic) { .tt-el-pk-or-pill { text-box: trim-both cap alphabetic; } }   /* the label's capitals centred, not its line box */
.tt-el-pk-or-pill::before { content: ""; position: absolute; inset: min(0px, calc((var(--tt-el-pk-or-cap) * 1.618034 - 44px) / 2)) -5px; }   /* a 44px target */
.tt-el-pk-or-pill:hover, .tt-el-pk-or-pill:focus, .tt-el-pk-or-pill:visited { color: var(--color-the, rgb(98, 112, 77)); text-decoration: none; }
.tt-el-pk-or-pill:active { transform: scale(0.96); background: rgba(var(--color-the-rgb, 98, 112, 77), 0.16); }
.tt-el-pk-or-pill:focus-visible { outline: 2px solid var(--color-the, rgb(98, 112, 77)); outline-offset: 2px; }
.tt-el-pk-or-sec-h h2 { margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 500; font-size: var(--tt-el-pk-or-title-size, var(--step-2, 1.5625rem)); line-height: 1.2; color: var(--tt-pl-pk-hub-j-ink); }
.tt-el-pk-or-link { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-the, rgb(98, 112, 77)); font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 0.5px; }
.tt-el-pk-or-muted { margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.125rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or .tt-el-pk-ca-wrap { max-width: none; }
/* 5.21.0: the card's photo column and gap come from the card itself (--space-2xl, --space-m); no hub override */

/* Suggestions */
.tt-el-pk-or-more { display: flex; gap: 13px; overflow-x: auto; margin: 0 -21px; padding: 0 21px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tt-el-pk-or-more::-webkit-scrollbar { display: none; }
.tt-el-pk-or-card { position: relative; flex: 0 0 9.5rem; scroll-snap-align: start; }
.tt-el-pk-or-ph { display: block; height: 9.5rem; padding: 4px; border: 0.5px solid var(--tt-pl-pk-hub-j-hair); background: var(--color-camelia, rgb(252, 250, 241)); }
.tt-el-pk-or-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-el-pk-or-add { position: absolute; right: 8px; top: calc(9.5rem - 42px); width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none;
	background: var(--color-the, rgb(98, 112, 77)); color: var(--color-camelia, rgb(252, 250, 241)); font-size: 1.25rem; line-height: 1; transition: transform 0.2s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-add:active { transform: scale(0.9); }
.tt-el-pk-or-card p { margin: 8px 0 0; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.0625rem; line-height: 1.2; }
.tt-el-pk-or-card small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }

/* Rows that open a sheet */
.tt-el-pk-or-row { display: grid; grid-template-columns: 1fr auto; gap: 13px; align-items: center; width: 100%; margin: 0; padding: 13px 0; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.tt-el-pk-or-row b { display: block; font-weight: 400; font-size: 1rem; }
.tt-el-pk-or-row small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-row > span:last-child { font-size: 1.25rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-row.is-missing b { color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-row.is-shake { animation: tt-el-pk-or-shake 0.42s var(--tt-pl-pk-hub-j-ease); }
@keyframes tt-el-pk-or-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Delivery and payment choices */
.tt-el-pk-or-opt, .tt-el-pk-or #payment ul.payment_methods > li {
	display: grid; grid-template-columns: 20px 1fr auto; gap: 13px; align-items: center; margin: 0 0 8px; padding: 13px 16px; cursor: pointer;
	border: 0.5px solid var(--tt-pl-pk-hub-j-hair); border-radius: 12px; list-style: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.tt-el-pk-or-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tt-el-pk-or-opt:has(input:checked), .tt-el-pk-or #payment ul.payment_methods > li:has(input:checked) { border-color: var(--color-the, rgb(98, 112, 77)); box-shadow: inset 0 0 0 1px var(--color-the, rgb(98, 112, 77)); }
.tt-el-pk-or-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--tt-pl-pk-hub-j-soft); display: grid; place-items: center; }
.tt-el-pk-or-opt:has(input:checked) .tt-el-pk-or-dot { border-color: var(--color-the, rgb(98, 112, 77)); }
.tt-el-pk-or-opt:has(input:checked) .tt-el-pk-or-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-the, rgb(98, 112, 77)); }
.tt-el-pk-or #payment { background: none; border-radius: 0; }
.tt-el-pk-or #payment ul.payment_methods { margin: 0; padding: 0; border: 0; }
.tt-el-pk-or #payment ul.payment_methods > li { grid-template-columns: auto 1fr; }
.tt-el-pk-or #payment ul.payment_methods > li input { accent-color: var(--color-the, rgb(98, 112, 77)); margin: 0; }
.tt-el-pk-or #payment ul.payment_methods > li label { margin: 0; cursor: pointer; }
.tt-el-pk-or #payment .payment_box { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; background: none; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 0.9375rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or #payment .payment_box::before { display: none; }
.tt-el-pk-or #payment .place-order { margin: 0; padding: 0; }
.tt-el-pk-or #payment #place_order { display: none; }   /* the bar's button places the order */
.tt-el-pk-or #payment .woocommerce-terms-and-conditions-wrapper { font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); line-height: 1.5; }

/* Sums */
.tt-el-pk-or-sum { display: flex; justify-content: space-between; gap: 13px; padding: 4px 0; font-size: 0.9375rem; }
.tt-el-pk-or-sum > span:first-child { color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-sum.is-disc > span:last-child { color: var(--color-the, rgb(98, 112, 77)); }
.tt-el-pk-or-sum .woocommerce-remove-coupon { margin-left: 8px; font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }

/* The order bar (5.0.0, 5.1.0): flush with the bottom of the screen, its background
   behind the dock. The PWA Bottom Nav's class tt-bottomnav-space reserves the bar's
   height inside it (::after) and glides it with each density change, so the button
   sits just above the dock at every density. Its top corners are concentric with the button's:
   the bar's radius is the button's radius plus the bar's padding. */
.tt-el-pk-or-bar {
	--tt-el-pk-or-pad: var(--space-s, 1rem);
	--tt-el-pk-or-pad-x: var(--space-m, 1.5rem);   /* 5.21.0: the order bar's sides = the page's side padding (the tabs' content padding), so the button lines up with the content */
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
	background: var(--color-camelia, rgb(252, 250, 241));
	border-radius: calc(var(--tt-el-pk-at-radius, var(--space-3xs, 2px)) + var(--tt-el-pk-or-pad)) calc(var(--tt-el-pk-at-radius, var(--space-3xs, 2px)) + var(--tt-el-pk-or-pad)) 0 0;
	box-shadow: 0 -13px 34px -21px rgba(35, 31, 32, 0.35);
}
.tt-el-pk-or-bar-in { max-width: calc(var(--tt-el-pk-tr-span, 34rem) + 2 * var(--tt-el-pk-or-pad-x)); margin: 0 auto; padding: var(--tt-el-pk-or-pad) var(--tt-el-pk-or-pad-x); }   /* 5.12.0: the button as wide as the content */
/* Without the PWA Bottom Nav (a browser tab), the home indicator still gets room. */
:root:not([data-tt-bottomnav="on"]) .tt-el-pk-or-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Tư-Trà Add To Cart's button (tt-el-pk-at-atc): label left, the total right on the odometer. */
.tt-el-pk-or-bar .tt-el-pk-at-atc {
	appearance: none; -webkit-appearance: none; box-shadow: none; margin: 0; width: 100%; height: auto; box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-s, 1rem);
	background: var(--tt-el-pk-at-btn-bg, var(--color-the, rgb(98, 112, 77))); color: var(--tt-el-pk-at-btn-ink, rgb(233, 216, 200));
	border: 0; border-radius: var(--tt-el-pk-at-radius, var(--space-3xs, 2px)); padding: var(--tt-el-pk-at-btn-pad, var(--space-s, 1rem));
	line-height: 1; cursor: pointer; letter-spacing: 0; text-transform: none; -webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease, opacity 0.2s ease, transform 0.12s ease;
}
.tt-el-pk-or-bar .tt-el-pk-at-atc:active { transform: scale(0.985); }
.tt-el-pk-or-bar .tt-el-pk-at-label { font: 400 var(--step--1, 0.875rem)/1 var(--tt-pl-pk-hub-j-sans); letter-spacing: 0.12em; text-transform: uppercase; color: inherit; flex-shrink: 0; }
.tt-el-pk-or-bar .tt-el-pk-at-price { font: 600 var(--step--1, 0.875rem)/1 var(--tt-pl-pk-hub-j-sans); color: inherit; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* One part for both states: an emptied basket hides the form and the bar in place. */
.tt-el-pk-or[data-empty="1"] .tt-el-pk-or-form, .tt-el-pk-or[data-empty="1"] .tt-el-pk-or-more { display: none; }
.tt-el-pk-or-go { width: 100%; height: 50px; margin: 0; border: 0; border-radius: 0; cursor: pointer;
	background: var(--color-the, rgb(98, 112, 77)); color: var(--color-camelia, rgb(252, 250, 241)); font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tt-el-pk-or-go:active { opacity: 0.85; }
.tt-el-pk-or-go--ghost { background: none; border: 1px solid var(--color-the, rgb(98, 112, 77)); color: var(--color-the, rgb(98, 112, 77)); margin-top: 21px; }
.tt-el-pk-or form.processing .tt-el-pk-or-go { opacity: 0.55; pointer-events: none; }

/* Sheets */
/* Sheets move like Tư-Trà Offcanvas (2.7.0): 0.45s, easeOutExpo in, easeInExpo out
   (the destination state carries the timing), and the same backdrop tone as the
   receipt panel in the overlay segment, so the two read as one system. */
.tt-el-pk-or, .tt-tp-overlay-receipt-slot {
	--tt-el-pk-or-dur: 0.45s; --tt-el-pk-or-in: cubic-bezier(0.16, 1, 0.3, 1); --tt-el-pk-or-out: cubic-bezier(0.7, 0, 0.84, 0);
}
.tt-el-pk-or-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(35, 31, 32, 0.32); opacity: 0; transition: opacity var(--tt-el-pk-or-dur) var(--tt-el-pk-or-out); }
.tt-el-pk-or-scrim.is-on { opacity: 1; transition-timing-function: var(--tt-el-pk-or-in); }
.tt-el-pk-or-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 34rem; max-height: 88dvh; overflow: auto; margin: 0 auto;
	padding: 13px 21px calc(21px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
	background: var(--bricks-color-gdyapl, rgb(244, 245, 240)); transform: translateY(105%); transition: transform var(--tt-el-pk-or-dur) var(--tt-el-pk-or-out); }
.tt-el-pk-or-sheet.is-on { transform: none; transition-timing-function: var(--tt-el-pk-or-in); }
.tt-el-pk-or-grab { width: 36px; height: 4px; margin: 0 auto 21px; border-radius: 2px; background: var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-or-sheet h3 { margin: 0 0 21px; font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 500; font-size: 1.5rem; }
.tt-el-pk-or-sheet .form-row { margin: 0 0 21px; padding: 0; }
.tt-el-pk-or-sheet .form-row label { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-sheet .form-row label .required { color: inherit; text-decoration: none; }
.tt-el-pk-or-sheet .input-text, .tt-el-pk-or-sheet textarea {
	width: 100%; padding: 8px 0; border: 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); border-radius: 0; outline: none; background-color: transparent;
	font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.1875rem; color: var(--tt-pl-pk-hub-j-ink);
	background-image: linear-gradient(var(--color-the, rgb(98, 112, 77)), var(--color-the, rgb(98, 112, 77))); background-repeat: no-repeat; background-position: left bottom; background-size: 0 1.5px;
	transition: background-size 0.42s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-sheet .input-text:focus, .tt-el-pk-or-sheet textarea:focus { background-size: 100% 1.5px; }
.tt-el-pk-or-sheet textarea { resize: none; height: 3.2em; }
.tt-el-pk-or-sheet .woocommerce-invalid .input-text { border-bottom-color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-err { display: block; min-height: 1.1em; margin-top: 4px; font-style: normal; font-size: 0.8125rem; color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-hidden { display: none !important; }
.tt-el-pk-or-rcv .tt-el-pk-ty-rc { margin-top: 8px; }

/* WooCommerce's own error box, above the form */
.tt-el-pk-or .woocommerce-NoticeGroup-checkout { display: none; }   /* shown as the toast */
.tt-el-pk-or-toast { position: fixed; left: 50%; bottom: calc(160px + var(--tt-el-pk-or-dock) + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: calc(100% - 42px);
	padding: 10px 16px; transform: translate(-50%, 21px); opacity: 0; pointer-events: none; background: var(--tt-pl-pk-hub-j-ink); color: var(--color-camelia, rgb(252, 250, 241));
	font-size: 0.875rem; line-height: 1.4; transition: opacity 0.3s var(--tt-pl-pk-hub-j-ease), transform 0.3s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tt-el-pk-or--orders .tt-el-pk-or-toast, .tt-el-pk-or[data-empty="1"] .tt-el-pk-or-toast { bottom: calc(var(--tt-el-pk-or-dock) + 21px + env(safe-area-inset-bottom, 0px)); }

/* The current order: where it is */
.tt-el-pk-or-track { padding: 4px 0 21px; }
.tt-el-pk-or-track + .tt-el-pk-or-track { border-top: 0.5px solid var(--tt-pl-pk-hub-j-hair); padding-top: 21px; }
.tt-el-pk-or-track-h { display: flex; justify-content: space-between; align-items: baseline; }
.tt-el-pk-or-track-h b { font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 500; font-size: 1.375rem; }
.tt-el-pk-or-track-h span { font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-track-now { margin: 13px 0 0; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.125rem; }
.tt-el-pk-or-track-now small { display: block; margin-top: 2px; font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 16px 0 13px; padding: 0; }
.tt-el-pk-or-stages li { position: relative; padding-top: 13px; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-stages li::before, .tt-el-pk-or-stages li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; border-radius: 2px; }
.tt-el-pk-or-stages li::before { right: 0; background: var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-or-stages li::after { width: 0; background: var(--color-the, rgb(98, 112, 77)); transition: width 0.7s var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-stages li.is-done::after { width: 100%; }
.tt-el-pk-or-stages li.is-now::after { width: 50%; animation: tt-el-pk-or-brew 1.8s ease-in-out infinite alternate; }
@keyframes tt-el-pk-or-brew { from { width: 20%; } to { width: 80%; } }
.tt-el-pk-or-stages li.is-done, .tt-el-pk-or-stages li.is-now { color: var(--tt-pl-pk-hub-j-ink); }

/* Past orders */
.tt-el-pk-or-past { list-style: none; margin: 0; padding: 0; }
.tt-el-pk-or-past-i { display: grid; grid-template-columns: 1fr auto; gap: 4px 13px; padding: 16px 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-or-past-i:last-child { border-bottom: 0; }
.tt-el-pk-or-when { font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-what { grid-column: 1; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.125rem; line-height: 1.25; }
.tt-el-pk-or-amt { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; }
.tt-el-pk-or-st { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-st.is-off { color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-acts { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 21px; margin-top: 8px; }
.tt-el-pk-or-redo { margin: 0; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-the, rgb(98, 112, 77)); border-radius: 0; background: none; cursor: pointer;
	color: var(--color-the, rgb(98, 112, 77)); font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
.tt-el-pk-or-redo[disabled] { opacity: 0.45; }
.tt-el-pk-or-terms { margin: 21px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--tt-pl-pk-hub-j-soft); }

@media (prefers-reduced-motion: reduce) {
	.tt-el-pk-or *, .tt-el-pk-or-head * { animation: none !important; transition: none !important; }
}

/* The receipt panel in the overlay segment (template "Overlay — Receipt"): its
   grab handle, the receipt inside, its close button. */
.tt-oc .tt-tp-overlay-receipt-grab { flex: none; width: 36px; height: 4px; margin: 0 auto 21px; border-radius: 2px; background: var(--tt-pl-pk-hub-j-hair); }
.tt-oc .tt-tp-overlay-receipt-slot { flex: none; }
.tt-oc .tt-tp-overlay-receipt-slot .tt-el-pk-ty-rc { margin-top: 8px; }
.tt-oc .tt-tp-overlay-receipt-close {
	flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin: 21px 0 0; padding: 0; cursor: pointer;
	border: 1px solid var(--color-the, rgb(98, 112, 77)); border-radius: 0; background: none; color: var(--color-the, rgb(98, 112, 77));
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase;
}

/* 5.14.0: no underline on hover (see tt-pl-pk-hub-journey.css) */
.tt-el-pk-or-ph:hover, .tt-el-pk-or-add:hover { text-decoration: none; }

/* 5.17.0 — the stuck titles' background: Tư-Trà Nav's eased tint (its gradient generator, defaults:
   cubic-bezier(0.75, 0, 0.75, 1), 15 steps, opaque at the top, in the page's paper) over its progressive
   blur (eight layers, radii doubling 0.5 to 64, masks stepping 12.5%, heaviest at the top).
   5.15.0 drew it inside each sticky title and switched it on and off per title from scroll measurements;
   on iOS the page scrolls off the main thread, so the measurement lagged the sticky position and the
   effect flickered on and off, and backdrop filters inside a moving sticky box re-render as it moves. It
   is now ONE fixed bar per hub, as the nav's own (backdrop filters on a fixed box are what the nav proves
   stable): just under the tabs' band, the height of a title plus a tail, behind the titles and above the
   content, shown only while the sections have scrolled under the band: a single state change reported by
   an IntersectionObserver, no per-frame measuring. */
.tt-el-pk-or, .tt-el-pk-or-head {
	--tt-el-pk-or-paper: var(--bricks-color-gdyapl, rgb(244, 245, 240));
	--tt-el-pk-or-fx-tail: 34px;
	--tt-el-pk-or-blur-mult: 1;
}
.tt-el-pk-or-sec-h { background: none; z-index: 5; }   /* the titles over the bar */
.tt-el-pk-or-fxbar {
	position: fixed; z-index: 4; left: 0; right: 0; top: var(--tt-el-pk-tb-under, 0px);
	height: calc(var(--tt-el-pk-or-title-h, 60px) + var(--tt-el-pk-or-fx-tail));
	pointer-events: none; opacity: 0; visibility: hidden;
	transition: opacity 0.2s linear, visibility 0s linear 0.2s, top var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out);
}
.tt-el-pk-or-fxbar.is-on { opacity: 1; visibility: visible; transition: opacity 0.2s linear, visibility 0s, top var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); }
.tt-el-pk-or-fxbar-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, color-mix(in srgb, var(--tt-el-pk-or-paper) 100%, transparent) 0%, color-mix(in srgb, var(--tt-el-pk-or-paper) 99.7%, transparent) 6.7%, color-mix(in srgb, var(--tt-el-pk-or-paper) 98.9%, transparent) 13.3%, color-mix(in srgb, var(--tt-el-pk-or-paper) 97.3%, transparent) 20%, color-mix(in srgb, var(--tt-el-pk-or-paper) 95%, transparent) 26.7%, color-mix(in srgb, var(--tt-el-pk-or-paper) 91.7%, transparent) 33.3%, color-mix(in srgb, var(--tt-el-pk-or-paper) 87.4%, transparent) 40%, color-mix(in srgb, var(--tt-el-pk-or-paper) 81.7%, transparent) 46.7%, color-mix(in srgb, var(--tt-el-pk-or-paper) 74.5%, transparent) 53.3%, color-mix(in srgb, var(--tt-el-pk-or-paper) 65.4%, transparent) 60%, color-mix(in srgb, var(--tt-el-pk-or-paper) 54%, transparent) 66.7%, color-mix(in srgb, var(--tt-el-pk-or-paper) 40.3%, transparent) 73.3%, color-mix(in srgb, var(--tt-el-pk-or-paper) 25.1%, transparent) 80%, color-mix(in srgb, var(--tt-el-pk-or-paper) 11.3%, transparent) 86.7%, color-mix(in srgb, var(--tt-el-pk-or-paper) 2.6%, transparent) 93.3%, color-mix(in srgb, var(--tt-el-pk-or-paper) 0%, transparent) 100%); }
.tt-el-pk-or-fxbar-blur { position: absolute; inset: 0; z-index: 0; contain: strict; isolation: isolate; }
.tt-el-pk-or-fxbar:not(.is-on) .tt-el-pk-or-fxbar-blur { display: none; }   /* no backdrop work at the top of the page */
.tt-el-pk-or-fxbar-blur > i {
	position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
	transform: scale(0.5) translateZ(0); transform-origin: center center; will-change: backdrop-filter, transform;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.tt-el-pk-or-fxbar-blur > i:nth-child(1) { -webkit-backdrop-filter: blur(calc(0.5 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(0.5 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%); mask: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(2) { -webkit-backdrop-filter: blur(calc(1 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(1 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%); mask: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(3) { -webkit-backdrop-filter: blur(calc(2 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(2 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%); mask: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(4) { -webkit-backdrop-filter: blur(calc(4 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(4 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%); mask: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(5) { -webkit-backdrop-filter: blur(calc(8 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(8 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%); mask: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(6) { -webkit-backdrop-filter: blur(calc(16 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(16 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%); mask: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(7) { -webkit-backdrop-filter: blur(calc(32 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(32 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%); mask: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%); }
.tt-el-pk-or-fxbar-blur > i:nth-child(8) { -webkit-backdrop-filter: blur(calc(64 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); backdrop-filter: blur(calc(64 * var(--tt-el-pk-or-blur-mult) * 0.0625rem)); -webkit-mask: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%); mask: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%); }
@media (prefers-reduced-motion: reduce) { .tt-el-pk-or-fxbar { transition: none; } .tt-el-pk-or-fxbar-blur > i { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* 5.18.0 — the section titles ("Món của bạn", "Giao đến", ...) in Cormorant Unicase, the brand's
   alternative face (Cormorant's unicase cut: capitals and small capitals of one height), loaded from
   Google Fonts by the plugin until it is added to Bricks (see TT_Pl_Pk_Bev_Storefront::enqueue). It replaces
   5.16.0's condensed Garamond. Cormorant Garamond is the fallback; the cap trim and the gutter hold. */
.tt-el-pk-or-sec-h h2 { font-family: "Cormorant Unicase", var(--tt-pl-pk-hub-j-serif); font-weight: 500; }

/* 5.29.0 — "Giao đến" opens in place, as an accordion: the row is the button, its panel drops down below it
   (grid rows 0fr to 1fr, so it animates to its own height) and the chevron turns down. It replaces the
   slide-in sheet; the fields are WooCommerce's, in the form: name, phone, Tỉnh/Thành phố, Phường/Xã (filled
   from the province), house number and street, email; the second row holds the note for the courier. */
.tt-el-pk-or-acc { border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-or-acc:last-child { border-bottom: 0; }
.tt-el-pk-or-acc .tt-el-pk-or-chev { display: inline-block; transition: transform var(--tt-el-pk-or-dur) var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-acc.is-open .tt-el-pk-or-chev { transform: rotate(90deg); }
.tt-el-pk-or-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--tt-el-pk-or-dur) var(--tt-pl-pk-hub-j-ease); }
.tt-el-pk-or-acc.is-open .tt-el-pk-or-acc-panel { grid-template-rows: 1fr; }
.tt-el-pk-or-acc-in { min-height: 0; overflow: hidden; }
.tt-el-pk-or-acc.is-open .tt-el-pk-or-acc-in { padding-bottom: var(--space-m); }
.tt-el-pk-or-acc .form-row { margin: 0 0 var(--space-m); padding: 0; }
.tt-el-pk-or-acc .form-row:first-child { margin-top: var(--space-2xs); }
.tt-el-pk-or-acc .form-row label { display: block; font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-or-acc .form-row label .required { color: inherit; text-decoration: none; }
.tt-el-pk-or-acc .woocommerce-input-wrapper { position: relative; display: block; }
.tt-el-pk-or-acc .input-text, .tt-el-pk-or-acc textarea, .tt-el-pk-or-acc select {
	box-sizing: border-box; width: 100%; padding: var(--space-2xs) 0; border: 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); border-radius: 0; outline: none;
	background-color: transparent; -webkit-appearance: none; appearance: none;
	font-family: var(--tt-pl-pk-hub-j-serif); font-size: var(--step-1); color: var(--tt-pl-pk-hub-j-ink);   /* --step-1 is never under 16px: no zoom on iOS */
	background-image: linear-gradient(var(--color-the, rgb(98, 112, 77)), var(--color-the, rgb(98, 112, 77))); background-repeat: no-repeat; background-position: left bottom; background-size: 0 1.5px;
	transition: background-size 0.42s var(--tt-pl-pk-hub-j-ease);
}
.tt-el-pk-or-acc select { padding-right: var(--space-m); text-overflow: ellipsis; cursor: pointer; }
.tt-el-pk-or-acc select:disabled { color: var(--tt-pl-pk-hub-j-soft); cursor: default; }
.tt-el-pk-or-acc .woocommerce-input-wrapper:has(select)::after {   /* the select's chevron, pointing down */
	content: "›"; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none;
	font-size: var(--step-0); color: var(--tt-pl-pk-hub-j-soft);
}
.tt-el-pk-or-acc .input-text:focus, .tt-el-pk-or-acc textarea:focus, .tt-el-pk-or-acc select:focus { background-size: 100% 1.5px; }
.tt-el-pk-or-acc textarea { resize: none; height: 3.2em; }
.tt-el-pk-or-acc .woocommerce-invalid .input-text, .tt-el-pk-or-acc .woocommerce-invalid select { border-bottom-color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-acc .tt-el-pk-or-go { margin-top: var(--space-2xs); }
@media (prefers-reduced-motion: reduce) { .tt-el-pk-or-acc-panel, .tt-el-pk-or-acc .tt-el-pk-or-chev { transition: none; } }

/* 1.3.0 Delivery: the customer's location, inside "Giao đến" */
.tt-pl-pk-dlv-locate { margin: 0 0 var(--space-s, 13px); }
.tt-pl-pk-dlv-locate__btn {
	min-height: 44px; padding: 0 var(--space-m, 21px); border: 0; border-radius: 999px; cursor: pointer;
	font: inherit; font-weight: 600; font-size: 0.9rem;
	background: rgba(var(--color-the-rgb, 98, 112, 77), 0.14); color: inherit;
}
.tt-pl-pk-dlv-locate__btn[disabled] { opacity: 0.5; }
.tt-pl-pk-dlv-locate__msg { margin: var(--space-xs, 8px) 0 0; font-size: 0.85rem; color: var(--tt-pl-pk-hub-j-soft, rgba(35, 31, 32, 0.62)); }
.tt-pl-pk-dlv-locate__credit { margin: var(--space-3xs, 3px) 0 0; font-size: 0.7rem; color: var(--tt-pl-pk-hub-j-soft, rgba(35, 31, 32, 0.62)); }
.tt-pl-pk-dlv-remember { margin: var(--space-xs, 8px) 0 0; font-size: 0.8rem; color: var(--tt-pl-pk-hub-j-soft, rgba(35, 31, 32, 0.62)); }
.tt-pl-pk-dlv-remember button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* 2.3.0: a part brought up to date after the app shell showed a copy: it keeps its place, quietly */
.tt-el-pk-or.is-refreshing .tt-el-pk-or-sec { animation: tt-el-pk-or-refresh 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes tt-el-pk-or-refresh { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .tt-el-pk-or.is-refreshing .tt-el-pk-or-sec { animation: none; opacity: 0.6; } }
.tt-el-pk-or-retry { margin: 0 0 var(--space-s, 13px); font-size: 0.85rem; color: var(--color-rooibos, rgb(158, 72, 63)); }
.tt-el-pk-or-retry button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* 2.3.1: the location button shows it is working; the message line is there only for a refusal or a failure */
.tt-pl-pk-dlv-locate__msg:empty { display: none; }
.tt-pl-pk-dlv-locate__btn.is-busy { animation: tt-pl-pk-dlv-busy 1s ease-in-out infinite; }
@keyframes tt-pl-pk-dlv-busy { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .tt-pl-pk-dlv-locate__btn.is-busy { animation: none; opacity: 0.6; } }