/*
 * Tư-Trà Beverage: the checkout journey (cart, checkout, order pay, thank you).
 *
 * The look of the signed-off demo (12 Oct 2026). Green title band and golden
 * straddle as tt-pl-newsroom's; underlined 16px fields (no iOS zoom, Handbook
 * V.37); square corners and hairlines. Loaded on every page (VII.9).
 */
:root {
	--tt-pl-pk-hub-j-ink: #231f20;
	--tt-pl-pk-hub-j-soft: rgba(35, 31, 32, 0.62);
	--tt-pl-pk-hub-j-faint: rgba(35, 31, 32, 0.42);
	--tt-pl-pk-hub-j-olive: var(--color-the, rgb(98, 112, 77));
	--tt-pl-pk-hub-j-cream: #e9d8c8;
	--tt-pl-pk-hub-j-card: #fbfbf7;
	--tt-pl-pk-hub-j-hair: rgba(var(--color-the-rgb, 98, 112, 77), 0.2);
	--tt-pl-pk-hub-j-field: rgba(var(--color-the-rgb, 98, 112, 77), 0.45);
	--tt-pl-pk-hub-j-warn: rgb(154, 59, 42);
	--tt-pl-pk-hub-j-sans: "Ysabeau Office", system-ui, -apple-system, sans-serif;
	--tt-pl-pk-hub-j-serif: "Cormorant Garamond", "Times New Roman", serif;
	--tt-pl-pk-hub-j-script: "Pinyon Script", cursive;
	--tt-pl-pk-hub-j-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Band and straddle (as tt-pl-newsroom) */
.tt-tp-pk-band { clip-path: inset(-100vh 0 -100vh 0); overflow-x: clip; }
.tt-tp-pk-band h1 { text-wrap: balance; }
/* clip-path only clips painting; overflow-x: clip also keeps the
   edge-to-edge strip from widening the page (it stays scroll-free). */
.tt-tp-pk-hub-straddle-host { overflow-x: clip; overflow-y: visible; clip-path: inset(-100vh 0 -100vh 0); }
.tt-tp-pk-hub-straddle { position: relative; }
.tt-tp-pk-hub-straddle > .tt-tp-pk-hub-straddle__band {
	position: absolute; top: 0; bottom: 61.8%;
	left: calc(50% - 50vw); right: calc(50% - 50vw);
	width: auto; max-width: none; pointer-events: none;
}
.tt-tp-pk-hub-straddle > .tt-tp-pk-hub-straddle__item { position: relative; z-index: 1; width: 100%; }

/* Step line */
.tt-pl-pk-hub-steps {
	margin: 0 auto; max-width: 30rem; display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px; background: var(--tt-pl-pk-hub-j-card); border: 0.5px solid var(--tt-pl-pk-hub-j-hair);
	box-shadow: 0 8px 24px rgba(35, 31, 32, 0.06);
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-faint);
}
.tt-pl-pk-hub-steps b { font-weight: 400; }
.tt-pl-pk-hub-steps .is-on { color: var(--tt-pl-pk-hub-j-ink); font-weight: 600; }
.tt-pl-pk-hub-steps .is-done { color: var(--tt-pl-pk-hub-j-olive); }
.tt-pl-pk-hub-steps i { font-style: normal; }

/* Shared: buttons, links, lines (cart and thank you) */
.tt-el-pk-ca-btn {
	display: flex; width: 100%; min-height: 50px; margin-top: 21px; align-items: center; justify-content: center;
	border: 1px solid var(--tt-pl-pk-hub-j-olive); background: var(--tt-pl-pk-hub-j-olive); color: var(--tt-pl-pk-hub-j-cream);
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
	border-radius: 0; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.tt-el-pk-ca-btn--ghost { background: transparent; color: var(--tt-pl-pk-hub-j-olive); }
@media (hover: hover) { .tt-el-pk-ca-btn--ghost:hover { background: var(--tt-pl-pk-hub-j-olive); color: var(--tt-pl-pk-hub-j-cream); } }
.tt-el-pk-ca-link {
	display: inline-block; min-height: 36px; padding: 8px 0; border: 0; background: none; cursor: pointer;
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tt-pl-pk-hub-j-soft);
	text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 4px;
}
.tt-el-pk-ca-cont { display: block; margin: 13px auto 0; text-align: center; }
.tt-el-pk-ca-wrap, .tt-el-pk-ty-wrap { width: 100%; max-width: 34rem; margin: 0 auto; font-family: var(--tt-pl-pk-hub-j-sans); color: var(--tt-pl-pk-hub-j-ink); }
.tt-el-pk-ca-lines { list-style: none; margin: 0; padding: 0; border-top: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-ca-line {
	position: relative; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair);
	/* 5.25.0: clipped top and bottom only (the collapse on removal); the sliding card clips its own left side
	   (below), so nothing cuts the delete button's glass and its shadow at the right edge */
	overflow-x: visible; overflow-y: clip; max-height: 480px; transition: opacity 0.3s var(--tt-pl-pk-hub-j-ease), max-height 0.42s var(--tt-pl-pk-hub-j-ease);
}
/* Swipe left to reveal delete (as an app's order list). The layer follows the
   finger while dragging (.is-dragging: no transition), then springs open or
   shut. Opaque in the page's paper (Bricks palette Color #1) so the button
   waits unseen behind it. */
.tt-el-pk-ca-swipe {
	position: relative; z-index: 1; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); gap: var(--space-m); padding: 34px 0;   /* 5.21.0: the photo --space-2xl wide, --space-m from the text (were 76px / 21px) */
	background: var(--bricks-color-gdyapl, rgb(244, 245, 240));
	transform: translateX(var(--tt-el-pk-ca-x, 0px)); transition: transform 0.42s var(--tt-pl-pk-hub-j-ease), clip-path 0.42s var(--tt-pl-pk-hub-j-ease);
	clip-path: inset(0 0 0 max(0px, calc(-1 * var(--tt-el-pk-ca-x, 0px))));   /* 5.25.0: what slides past the line's left edge (the photo) is out of view */
	touch-action: pan-y;
}
.tt-el-pk-ca-line.is-dragging .tt-el-pk-ca-swipe { transition: none; }
.tt-el-pk-ca-del {
	/* 5.24.0: as wide as the photo's column and its gap: open, the card has slid that far, so its text sits flush
	   with the page's padding and the photo is out of view. column-gap is the room the button keeps from the card
	   (read by the script: the button grows only into room the card has made). */
	position: absolute; top: 0; right: 0; bottom: 0; width: var(--tt-el-pk-ca-del-w, calc(var(--space-2xl) + var(--space-m)));
	display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--space-2xs); column-gap: var(--space-m);
	overflow: visible;   /* 5.25.0: WebKit clips a button's content to its box, which cut the glass's shadow at the right edge */
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
	color: var(--color-rooibos, rgb(158, 72, 63)); font-family: var(--tt-pl-pk-hub-j-sans);
}
/* 5.24.0: the button ported from Tư-Trà PWA Header Button (tt-pl-nav-kit): its size (the menu step x phi^2), its
   icon (the button / phi, the pack's line style), its disc, its press, in liquid glass (Tư-Trà UI Kit, the button's
   own setting: a resting plate lifting on press) on the brand's red.
   5.26.0: it surfaces like a ball seen from above the water: in place, about its own centre (flush right), it comes
   up from the depth (small, soft and dim, then full size, sharp and bright), only as far as the card has made room
   (--tt-el-pk-ca-g, 0 to 1, set by the script; never under the card), on a buoyant spring. When it breaks the
   surface (.is-surfaced) it bobs once, seen from above: a swell and a settle in size, not a vertical travel.
   5.27.0: below the surface it is a plain disc; it turns to glass when it surfaces (the script attaches the kit's
   glass then and releases it if the ball sinks again), so the glass is never drawn while the ball is scaled. */
.tt-el-pk-ca-del-c {
	--tt-el-pk-ca-d: calc(var(--step-0) * 2.618034);
	position: relative; display: block; width: var(--tt-el-pk-ca-d); height: var(--tt-el-pk-ca-d);   /* 5.25.0: the ball's motion; the disc and its glass are inside (.tt-el-pk-ca-del-g), so the kit measures an unscaled host */
	transform-origin: 50% 50%; scale: var(--tt-el-pk-ca-g, 0); opacity: var(--tt-el-pk-ca-o, 0);
	filter: blur(calc((1 - var(--tt-el-pk-ca-g, 0)) * var(--space-3xs))) brightness(calc(0.618 + 0.382 * var(--tt-el-pk-ca-g, 0)));   /* the depth: soft and dim below the surface */
	transition: scale 610ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 377ms ease-out, opacity 144ms linear, transform 377ms cubic-bezier(0.32, 0.72, 0, 1);
}
.tt-el-pk-ca-line.is-surfaced .tt-el-pk-ca-del-c { animation: tt-el-pk-ca-bob 1597ms cubic-bezier(0.37, 0, 0.63, 1) 233ms 1; }
@keyframes tt-el-pk-ca-bob { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.06); } 55% { transform: scale(0.97); } 80% { transform: scale(1.01); } }

.tt-el-pk-ca-del:active .tt-el-pk-ca-del-c { transform: scale(0.91); }
.tt-el-pk-ca-del-g {
	position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
	background: var(--color-rooibos, rgb(158, 72, 63)); color: var(--color-camelia, rgb(252, 250, 241));   /* the glass gives the depth; without the kit, a flat disc */
}
.tt-el-pk-ca-del-g.tt-pl-uk-glass:not(.tt-pl-uk-glass--css) { background: transparent; }   /* the kit paints the plate */
.tt-el-pk-ca-del-i { position: relative; z-index: 1; display: block; width: calc(var(--tt-el-pk-ca-d) / 1.618034); height: calc(var(--tt-el-pk-ca-d) / 1.618034); }
.tt-el-pk-ca-del-i svg { display: block; width: 100%; height: 100%; }
.tt-el-pk-ca-line.is-dragging .tt-el-pk-ca-del-c { transition: scale 233ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 144ms ease-out, opacity 89ms linear; }
@media (prefers-reduced-motion: reduce) {
	.tt-el-pk-ca-del-c, .tt-el-pk-ca-line.is-dragging .tt-el-pk-ca-del-c { transition: opacity 89ms linear; animation: none; filter: none; }
}
/* Screen readers and keyboards keep a visible way to remove, when focused. */
.tt-el-pk-ca-rm:not(:focus):not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tt-el-pk-ca-line.is-out { opacity: 0; max-height: 0; border-bottom-width: 0; }
.tt-el-pk-ca-thumb { box-sizing: border-box; width: var(--space-2xl); aspect-ratio: 1; border: 0.5px solid var(--tt-pl-pk-hub-j-hair); padding: 5px; background: var(--tt-pl-pk-hub-j-card); }
.tt-el-pk-ca-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-el-pk-ca-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2xs); }
/* 5.23.0: the card's text on the site's type steps, its gaps on the space steps (were hard-coded rem and px) */
.tt-el-pk-ca-name { margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 400; font-size: var(--step-0); line-height: 1.2; text-transform: uppercase; }   /* 5.24.0: the menu card's name (step--1, 400, capitals), one step up */
.tt-el-pk-ca-name a { color: inherit; text-decoration: none; }
.tt-el-pk-ca-unit { font-family: var(--tt-pl-pk-hub-j-sans); font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; font-size: var(--step--1);   /* 5.24.0: the menu card's price (Ysabeau Office 300, capitals, tracked, step--2), one step up */ color: var(--tt-pl-pk-hub-j-soft); white-space: nowrap; }
.tt-el-pk-ca-fr { margin: 0; font-family: var(--tt-pl-pk-hub-j-script); font-size: var(--step-1); color: var(--tt-pl-pk-hub-j-olive); line-height: 1; }   /* 5.24.0: the menu card's French name (Pinyon Script, step-0, line-height 1), one step up */
.tt-el-pk-ca-opts { margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-size: var(--step-0); line-height: 1.25;   /* 5.24.0: the menu card's sensory notes (Cormorant, step--1, 1.25), one step up */ color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ca-note { margin: var(--space-3xs) 0 0; font-family: var(--tt-pl-pk-hub-j-serif); font-style: italic; font-size: var(--step-0); color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ca-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); margin-top: var(--space-m); }
.tt-el-pk-ca-total { font-family: var(--tt-pl-pk-hub-j-sans); font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step-0); white-space: nowrap; }   /* 5.24.0: in the price's style, at the stepper's step */
/* 5.14.0: the value rolls on the odometer at once (the server confirms, or corrects with a roll), so it is not dimmed while the request runs */
.tt-el-pk-ca-total-slot { display: inline-block; font-variant-numeric: lining-nums; }
.tt-el-pk-ca-totals { margin-top: 21px; }
.tt-el-pk-ca-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 0.875rem; }
.tt-el-pk-ca-row span:first-child { color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ca-row--total { border-top: 0.5px solid var(--tt-pl-pk-hub-j-hair); margin-top: 8px; padding-top: 13px; font-size: 1rem; }
.tt-el-pk-ca-row--total strong { font-family: var(--tt-pl-pk-hub-j-serif); font-weight: 500; font-size: 1.375rem; }
.tt-el-pk-ca-empty { text-align: center; }
.tt-el-pk-ca-empty__msg { margin: 0 auto; max-width: 26ch; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.25rem; line-height: 1.45; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ca-toast {
	position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 100002;
	display: flex; gap: 21px; align-items: center; padding: 13px 21px; max-width: calc(100% - 26px);
	background: var(--tt-pl-pk-hub-j-ink); color: rgb(244, 245, 240); font-size: 0.8125rem;
	transform: translate(-50%, 0); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--tt-pl-pk-hub-j-ease);
}
.tt-el-pk-ca-toast.is-on { opacity: 1; pointer-events: auto; }
.tt-el-pk-ca-toast button { border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* Thank you */
.tt-el-pk-ty-wrap { text-align: left; }
.tt-el-pk-ty-no { margin: 0 0 8px; text-align: center; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-msg { margin: 0 auto; max-width: 30ch; text-align: center; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 1.25rem; line-height: 1.45; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-msg--failed { color: var(--tt-pl-pk-hub-j-warn); }
.tt-el-pk-ty-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 0; border-top: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-el-pk-ty-facts div { padding: 13px 13px 13px 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); min-width: 0; }
.tt-el-pk-ty-facts dt, .tt-el-pk-ty-label { margin: 0; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-facts dd { margin: 3px 0 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.tt-el-pk-ty-label { margin-top: 34px; margin-bottom: 8px; }
.tt-el-pk-ty-gateway:empty { display: none; }
.tt-el-pk-ty-gateway { margin-top: 21px; font-size: 0.875rem; }
.tt-el-pk-ty-lines .tt-el-pk-ca-line { grid-template-columns: 52px minmax(0, 1fr); padding: 13px 0; }
.tt-el-pk-ty-lines .tt-el-pk-ca-thumb { width: 52px; }
.tt-el-pk-ty-addr p { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.6; }

/* Checkout and order pay: WooCommerce's form, in the demo's look */
.tt-tp-pk-hub-checkout, .tt-tp-pk-hub-pay { font-family: var(--tt-pl-pk-hub-j-sans); }
.tt-tp-pk-hub-checkout .form-row label, .tt-tp-pk-hub-pay .form-row label {
	font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-pl-pk-hub-j-soft);
}
.tt-tp-pk-hub-checkout input.input-text, .tt-tp-pk-hub-checkout select, .tt-tp-pk-hub-checkout textarea,
.tt-tp-pk-hub-pay input.input-text, .tt-tp-pk-hub-pay select, .tt-tp-pk-hub-pay textarea {
	width: 100%; min-height: 44px; padding: 8px 0; font-size: 16px; font-family: var(--tt-pl-pk-hub-j-sans);
	border: 0; border-bottom: 1px solid var(--tt-pl-pk-hub-j-field); border-radius: 0; background: transparent; box-shadow: none;
}
.tt-tp-pk-hub-checkout textarea { min-height: 72px; }
.tt-tp-pk-hub-checkout input.input-text:focus, .tt-tp-pk-hub-checkout textarea:focus { outline: none; border-bottom-color: var(--tt-pl-pk-hub-j-ink); }
.tt-tp-pk-hub-checkout .woocommerce-invalid input.input-text, .tt-tp-pk-hub-checkout .woocommerce-invalid select { border-bottom-color: var(--tt-pl-pk-hub-j-warn); }
.tt-tp-pk-hub-checkout .select2-container .select2-selection--single { height: 44px; border: 0; border-bottom: 1px solid var(--tt-pl-pk-hub-j-field); border-radius: 0; background: transparent; }
.tt-tp-pk-hub-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 0; font-size: 16px; }
.tt-tp-pk-hub-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.tt-tp-pk-hub-checkout #place_order, .tt-tp-pk-hub-pay #place_order, .tt-tp-pk-hub-checkout .tt-pl-pk-hub-next {
	width: 100%; min-height: 50px; margin-top: 21px; border: 1px solid var(--tt-pl-pk-hub-j-olive); border-radius: 0;
	background: var(--tt-pl-pk-hub-j-olive); color: var(--tt-pl-pk-hub-j-cream);
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
}
.tt-tp-pk-hub-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.tt-tp-pk-hub-checkout .wc_payment_method { padding: 13px 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-tp-pk-hub-checkout .wc_payment_method > label { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tt-tp-pk-hub-checkout .payment_box { margin-top: 8px; font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); background: none; padding: 0; }
.tt-tp-pk-hub-checkout table.shop_table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tt-tp-pk-hub-checkout table.shop_table th, .tt-tp-pk-hub-checkout table.shop_table td { padding: 8px 0; border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); text-align: left; }
.tt-tp-pk-hub-checkout table.shop_table td:last-child, .tt-tp-pk-hub-checkout table.shop_table th:last-child { text-align: right; }
.tt-tp-pk-hub-checkout dl.variation, .tt-tp-pk-hub-pay dl.variation { margin: 3px 0 0; font-size: 0.8125rem; color: var(--tt-pl-pk-hub-j-soft); }

/* Checkout in two steps (set by tt-pl-pk-hub-journey.js on phones and desktops alike) */
.tt-tp-pk-hub-checkout[data-tt-step="1"] .brxe-woocommerce-checkout-order-review { display: none; }
.tt-tp-pk-hub-checkout[data-tt-step="2"] .brxe-woocommerce-checkout-customer-details,
.tt-tp-pk-hub-checkout[data-tt-step="2"] .tt-pl-pk-hub-next { display: none; }
.tt-tp-pk-hub-checkout .tt-pl-pk-hub-back { margin-bottom: 13px; }

@media (prefers-reduced-motion: reduce) {
	.tt-el-pk-ca-line, .tt-el-pk-ca-toast, .tt-el-pk-ca-swipe { transition: none; }
}

/* Thank you as a till receipt (Tư-Trà Thank You v2), straddling the band as
   the newsroom's regular hero photo: the green strip reaches down behind the
   receipt's top (--tt-tp-pk-hub-receipt-cut). */
.tt-tp-pk-hub-straddle-host--receipt { --tt-tp-pk-hub-receipt-cut: 233px; }
.tt-tp-pk-hub-straddle-host--receipt .tt-tp-pk-hub-straddle > .tt-tp-pk-hub-straddle__band { bottom: auto; height: var(--tt-tp-pk-hub-receipt-cut); }
.tt-el-pk-ty-rc {
	position: relative; width: 100%; max-width: 22rem; margin: 0 auto; padding: 34px 21px 55px;
	background: rgb(252, 251, 247); color: var(--tt-pl-pk-hub-j-ink);
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; line-height: 1.55; letter-spacing: 0.06em; text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(35, 31, 32, 0.06), 0 21px 34px -13px rgba(35, 31, 32, 0.22);
	/* torn bottom edge */
	-webkit-mask: linear-gradient(black 0 0) top / 100% calc(100% - 8px) no-repeat,
		conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / 13px 8px repeat-x;
	mask: linear-gradient(black 0 0) top / 100% calc(100% - 8px) no-repeat,
		conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / 13px 8px repeat-x;
}
.tt-el-pk-ty-rc p { margin: 0; }
.tt-el-pk-ty-rc__brand { text-align: center; font-size: 1.375rem; font-weight: 400; letter-spacing: 0.28em; }
.tt-el-pk-ty-rc__addr { margin-top: 8px !important; text-align: center; font-size: 0.6875rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-rc__dash, .tt-el-pk-ty-rc__dots { border: 0; margin: 21px 0; height: 0; }
.tt-el-pk-ty-rc__dash { border-top: 1px dashed rgba(35, 31, 32, 0.45); }
.tt-el-pk-ty-rc__dots { border-top: 2px dotted rgba(35, 31, 32, 0.55); }
.tt-el-pk-ty-rc__meta { display: flex; justify-content: space-between; gap: 13px; }
.tt-el-pk-ty-rc__meta p:last-child { text-align: right; }
.tt-el-pk-ty-rc__row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 13px; align-items: baseline; }
.tt-el-pk-ty-rc__head { margin-bottom: 8px; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-rc__item { padding: 5px 0; }
.tt-el-pk-ty-rc__item b { display: block; font-weight: 400; }
.tt-el-pk-ty-rc__item small { display: block; margin-top: 2px; font-size: 0.6875rem; text-transform: none; letter-spacing: 0.02em; color: var(--tt-pl-pk-hub-j-soft); }
.tt-el-pk-ty-rc__item span:last-child { white-space: nowrap; text-align: right; }
.tt-el-pk-ty-rc__sums { margin-top: 21px; }
.tt-el-pk-ty-rc__sum { display: flex; justify-content: space-between; gap: 13px; padding: 2px 0; }
.tt-el-pk-ty-rc__total { font-size: 0.875rem; font-weight: 600; }
.tt-el-pk-ty-rc__to { margin-top: 34px; text-transform: none; letter-spacing: 0.02em; font-size: 0.8125rem; }
.tt-el-pk-ty-rc__label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6875rem; color: var(--tt-pl-pk-hub-j-soft); margin-bottom: 5px !important; }
.tt-el-pk-ty-rc__note { font-family: var(--tt-pl-pk-hub-j-serif); font-style: italic; text-transform: none; }
.tt-el-pk-ty-rc__foot { margin-top: 34px !important; text-align: center; color: var(--tt-pl-pk-hub-j-soft); font-size: 0.6875rem; letter-spacing: 0.2em; }
.tt-el-pk-ty-wrap .tt-el-pk-ty-msg { margin-top: 34px; }

/* Checkout fields: the underline draws itself in on focus (olive, left to right). */
.tt-tp-pk-hub-checkout input.input-text, .tt-tp-pk-hub-checkout textarea, .tt-tp-pk-hub-pay input.input-text {
	background-image: linear-gradient(var(--tt-pl-pk-hub-j-olive), var(--tt-pl-pk-hub-j-olive));
	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), border-color 0.2s;
}
.tt-tp-pk-hub-checkout input.input-text:focus, .tt-tp-pk-hub-checkout textarea:focus, .tt-tp-pk-hub-pay input.input-text:focus {
	background-size: 100% 1.5px; border-bottom-color: transparent;
}
.tt-tp-pk-hub-checkout .form-row { margin: 0 0 21px; }
@media (prefers-reduced-motion: reduce) {
	.tt-tp-pk-hub-checkout input.input-text, .tt-tp-pk-hub-checkout textarea, .tt-tp-pk-hub-pay input.input-text { transition: none; }
}

/* Coupon (3.8.0): replaces WooCommerce's notice bar on the checkout; sits on
   the payment step, above the payment methods. */
.tt-pl-pk-hub-coupon { margin: 21px 0 34px; border-top: 0.5px solid var(--tt-pl-pk-hub-j-hair); border-bottom: 0.5px solid var(--tt-pl-pk-hub-j-hair); }
.tt-pl-pk-hub-coupon__toggle {
	display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px 0; margin: 0;
	border: 0; border-radius: 0; background: none; cursor: pointer; color: var(--tt-pl-pk-hub-j-ink);
	font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.tt-pl-pk-hub-coupon__toggle span { font-size: 1.0625rem; letter-spacing: 0; color: var(--tt-pl-pk-hub-j-olive); transition: transform 0.42s var(--tt-pl-pk-hub-j-ease); }
.tt-pl-pk-hub-coupon__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.tt-pl-pk-hub-coupon__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: end; padding: 0 0 21px; }
.tt-pl-pk-hub-coupon__panel[hidden] { display: none; }
.tt-pl-pk-hub-coupon__input { font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; }
.tt-pl-pk-hub-coupon__apply {
	border: 0; border-bottom: 1px solid var(--tt-pl-pk-hub-j-olive); border-radius: 0; background: none; padding: 8px 0; margin: 0; cursor: pointer;
	color: var(--tt-pl-pk-hub-j-olive); font-family: var(--tt-pl-pk-hub-j-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.tt-pl-pk-hub-coupon__apply[disabled] { opacity: 0.45; cursor: default; }
.tt-pl-pk-hub-coupon__msg { grid-column: 1 / -1; margin: 0; font-family: var(--tt-pl-pk-hub-j-serif); font-size: 0.9375rem; color: var(--tt-pl-pk-hub-j-soft); }
.tt-pl-pk-hub-coupon__msg:empty { display: none; }
.tt-pl-pk-hub-coupon__msg.is-error { color: var(--tt-pl-pk-hub-j-warn); }

/* 5.14.0: no underline on hover. Links that are plain at rest stay plain under a mouse or trackpad,
   whatever the site's theme does to links on hover. */
.tt-el-pk-ca-name a:hover, .tt-el-pk-ca-name a:focus { text-decoration: none; color: inherit; }