/**
 * The storefront look on every page from the cart onward: the cart, checkout,
 * pay-for-order, order received, and all of My Account.
 *
 * Home, the coffee page, /near-me/ and /roasteries/ share one look -- a cream
 * ground, white cards on hairlines, green pills, small uppercase labels. These
 * pages were Motta's defaults under a handful of older hard-coded colours, so
 * the look broke at Checkout. This sheet carries it through.
 *
 * HOW IT WORKS
 *
 *   The carrier. inc/flow.php puts `tt-flow` on <body> for these pages and
 *   loads this file only there. Every rule starts `body.tt-flow`, so nothing
 *   here can reach a page that was not asked for.
 *
 *   Nothing is renamed. The markup is WooCommerce's, Motta's and Dokan's, and
 *   the tests drive it by those ids and classes. Each rule below is an answer
 *   to one of Motta's: it takes Motta's selector, swaps `.woocommerce-cart` (or
 *   -checkout, -account) for `body.tt-flow`, and so outranks it by one element
 *   whatever the print order. Where Motta has a second rule inside a phone
 *   breakpoint, the answer here is written to outrank that one too.
 *
 *   The two wrappers at checkout (.tt-flow-checkout__main, __side) are the one
 *   piece of markup added, in woocommerce/checkout/form-checkout.php.
 *
 * THE TOKENS are the names and values of tapper-cafe-core's tc-ui.css (.tc-ui),
 * which are home.css's (.tc-cards) and storefront.css's (.tc-dialog-back). This
 * is a FOURTH place they live, because a theme cannot lean on a plugin being
 * switched on -- change all four together. The blocks the plugins draw inside
 * these pages (address cards, rewards, the cancel form) read them from here,
 * each with its literal as a fallback.
 *
 * INPUTS carry `!important` and nothing else in this file does. A site-wide
 * reset (tapper-tea-dokan-customize, public-reset.css) pins every text, tel,
 * email and number field with `!important`: radius 4px, padding 4px, height
 * unset. The fields here answer it on exactly those properties.
 *
 * BUTTONS state every property in every state. Motta paints a bare <button> and
 * .button with min-width 160px, line-height 60px, a coloured shadow and its own
 * hover, focus and pressed fills.
 *
 * BREAKPOINTS. 48em is where the redesigned pages turn; the checkout's two
 * columns wait for 62em (992px), where Motta's own did, because an order card
 * beside a form is too tight below it.
 *
 * @package Motta Child
 */

/* ---------------------------------------------------------------- the tokens */

body.tt-flow {
	--tc-cream: #FFFDF8;
	--tc-cream-deep: #F5EFE3;
	--tc-card: #FFFFFF;
	--tc-ink: #121111;
	--tc-body: #413E3C;
	--tc-muted: #6B6660;
	--tc-line: rgba(18, 17, 17, 0.1);
	--tc-line-strong: rgba(18, 17, 17, 0.2);
	--tc-green: #29594B;
	--tc-green-dark: #1F463B;
	--tc-green-soft: #E4EEE9;
	--tc-amber: #F3AA22;
	--tc-amber-ink: #8A5A00;
	--tc-danger: #9B2C1F;
	--tc-danger-soft: #FBEDEB;

	--tc-radius: 18px;
	--tc-radius-sm: 14px;
	--tc-shadow: 0 18px 40px rgba(18, 17, 17, 0.08);
	--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-chip: 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08);
	--tc-shadow-chip-on: inset 0 0 0 1px var(--tc-green), 0 2px 6px rgba(41, 89, 75, 0.18);
	--tc-shadow-go: 0 2px 6px rgba(41, 89, 75, 0.28);

	--tc-home-display: var(--mt-font__main, "Outfit", Arial, sans-serif);

	/* Three the plugins' sheets have as literals: a warning's ground, a row card's ring, its lift. */
	--tt-flow-warn: #FBF0D9;
	--tt-flow-ring: inset 0 0 0 1px rgba(18, 17, 17, 0.13), 0 2px 8px rgba(18, 17, 17, 0.05);

	/* Motta: body { background: #fff }. */
	background: var(--tc-cream);
}

/*
 * Motta's own controls take their colours from these. Set on the content, not
 * on <body>: the header and footer read the same names and keep the site's.
 */
body.tt-flow #page-header,
body.tt-flow #site-content {
	--mt-color__primary: #29594B;
	--mt-color__primary--dark: #1F463B;
	--mt-color__primary--darker: #1F463B;
	--mt-color__primary--light: #FFFFFF;
	--mt-color__primary--box-shadow: rgba(41, 89, 75, 0.28);
	--mt-input__height: 48px;
	--mt-input__border-width: 1px;
	--mt-input__box-shadow: transparent;
	--mt-border__radius: 10px;

	color: var(--tc-body);
}

/* ------------------------------------------------------------- the page shell */

/* Motta: body.page .site-content { padding-top: 50px; padding-bottom: 63px }. */
body.tt-flow.page .site-content {
	padding-top: 16px;
	padding-bottom: 56px;
}

/*
 * The title. The plugin's public sheet draws every page title as white words
 * in a green rounded bar (#page-header .page-header__content, #386c61). Here it
 * is the page's first line: ink on the cream, at the left, the size the
 * redesigned pages give theirs.
 */
body.tt-flow #page-header .page-header__content {
	margin-top: 16px;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--tc-ink);
	text-align: left;
}

body.tt-flow #page-header .page-header__content .page-header__title {
	margin: 0;
	color: var(--tc-ink);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

body.tt-flow #page-header .page-header__content .page-header__description {
	width: auto;
	margin: 4px 0 0;
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

/* Headings inside the pages: Motta's h2 is 54px and its h3 36px before each page trims them. */
body.tt-flow .site-content .woocommerce h2,
body.tt-flow .site-content .woocommerce h3 {
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

body.tt-flow .site-content .woocommerce a {
	color: var(--tc-green);
}

body.tt-flow .site-content .woocommerce a:hover {
	color: var(--tc-green-dark);
}

/*
 * The Cafe's "Track this order" pill (TC_Order_Details, on order-received and
 * View order) is a green-filled link whose own rule sets white words at
 * (0,1,0). The link rule above is (0,3,2) and painted them green on its own
 * green: a button with no visible label.
 */
body.tt-flow .site-content .woocommerce a.tc-order-track__btn,
body.tt-flow .site-content .woocommerce a.tc-order-track__btn:hover,
body.tt-flow .site-content .woocommerce a.tc-order-track__btn:focus {
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ notices */

/*
 * Motta: mint, sky and pink bars with 500-weight coloured words. The redesigned
 * pages say the same three things as quiet panels: done, to know, wrong.
 */
body.tt-flow .woocommerce-message,
body.tt-flow .woocommerce-info,
body.tt-flow .woocommerce-error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background-color: var(--tc-green-soft);
	color: var(--tc-green-dark);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

body.tt-flow .woocommerce-info {
	background-color: var(--tc-band);
	color: var(--tc-ink);
}

/*
 * "… has been added to your cart" with View cart: the words, then the button
 * at the right. Motta floats the button, which leaves the notice two lines
 * tall around one line of words.
 */
body.tt-flow .woocommerce-notices-wrapper .woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

body.tt-flow .woocommerce-notices-wrapper .woocommerce-message::after {
	display: none;
}

body.tt-flow .site-content .woocommerce .woocommerce-notices-wrapper .woocommerce-message a.button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	text-decoration: none;
}

body.tt-flow .woocommerce-error {
	background-color: var(--tc-danger-soft);
	color: var(--tc-danger);
}

body.tt-flow .woocommerce-error li {
	margin: 0;
	list-style: none;
}

/* The link Motta floats inside a notice ("View cart", "Undo?"): a link, in the notice's colour. */
body.tt-flow .site-content .woocommerce .woocommerce-message a,
body.tt-flow .site-content .woocommerce .woocommerce-info a,
body.tt-flow .site-content .woocommerce .woocommerce-error a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ------------------------------------------------------------------- fields */

/*
 * One field: 48px, a 10px corner, a hairline, 16px words (smaller and iOS zooms
 * the page on focus). The `!important`s answer the site-wide reset, which pins
 * these same properties on text, tel, email and number fields; see the head of
 * this file. A field is not raised: no shadow at rest.
 */
body.tt-flow #site-content input[type="text"],
body.tt-flow #site-content input[type="email"],
body.tt-flow #site-content input[type="tel"],
body.tt-flow #site-content input[type="number"],
body.tt-flow #site-content input[type="password"],
body.tt-flow #site-content input[type="search"],
body.tt-flow #site-content select,
body.tt-flow #site-content textarea {
	height: 48px !important;
	padding: 0 14px !important;
	border: 1px solid var(--tc-line-strong);
	border-radius: 10px !important;
	background-color: #FFFFFF;
	color: var(--tc-ink);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	box-shadow: none;
}

body.tt-flow #site-content textarea {
	height: auto !important;
	min-height: 92px;
	padding: 12px 14px !important;
}

/* Motta's select carries its caret as a background image at the right; leave room for it. */
body.tt-flow #site-content select {
	padding-right: 40px !important;
}

/*
 * The one select that is not a field of a form: "Remind me to reorder", beside
 * each coffee in the order (TC_Usual_Checkout). Small, like the line it sits on.
 *
 * A percentage width, capped -- never `auto`. At `auto` a select is as wide as
 * its longest option ("Every 2 weeks (lasts you about that long)"), and inside
 * a table cell that width is the least the column will take: the name column
 * swallowed the card and pushed every price out past its right edge. With a
 * percentage the control asks for nothing and takes what the column has.
 */
body.tt-flow #site-content select.tc-usual-intent__select {
	width: 100%;
	min-width: 0;
	max-width: 16rem;
	height: 36px !important;
	padding: 0 34px 0 10px !important;
	border-radius: 8px !important;
	font-size: 0.875rem;
}

body.tt-flow #site-content input[type="text"]:focus,
body.tt-flow #site-content input[type="email"]:focus,
body.tt-flow #site-content input[type="tel"]:focus,
body.tt-flow #site-content input[type="number"]:focus,
body.tt-flow #site-content input[type="password"]:focus,
body.tt-flow #site-content input[type="search"]:focus,
body.tt-flow #site-content select:focus,
body.tt-flow #site-content textarea:focus {
	border-color: var(--tc-green);
	box-shadow: 0 0 0 2px rgba(41, 89, 75, 0.25);
}

body.tt-flow #site-content input[readonly] {
	background-color: var(--tc-band);
	color: var(--tc-muted);
}

body.tt-flow #site-content ::placeholder {
	color: var(--tc-muted);
	opacity: 1;
}

body.tt-flow #site-content input[type="checkbox"],
body.tt-flow #site-content input[type="radio"] {
	accent-color: #29594B;
}

/* A field's label: Motta's is 14px/500 #1d2128 with 9px under it. */
body.tt-flow .site-content .woocommerce .form-row label,
body.tt-flow .site-content .woocommerce form .form-row label {
	margin-bottom: 6px;
	color: var(--tc-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

body.tt-flow .site-content .woocommerce .form-row label .optional,
body.tt-flow .site-content .woocommerce .form-row label .required {
	color: var(--tc-muted);
	font-weight: 400;
	text-decoration: none;
}

/* A checkbox's label is a sentence, not a field name. */
body.tt-flow .site-content .woocommerce .form-row label.checkbox,
body.tt-flow .site-content .woocommerce .form-row label.woocommerce-form__label-for-checkbox {
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* The state select (select2): Motta sizes it from --mt-input__height, set above. */
body.tt-flow #site-content .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--tc-line-strong);
	border-radius: 10px;
	background-color: #FFFFFF;
}

body.tt-flow #site-content .select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	color: var(--tc-ink);
	font-size: 1rem;
	line-height: 46px;
}

body.tt-flow #site-content .select2-container .select2-selection--single .select2-selection__arrow {
	top: 11px;
}

/* ------------------------------------------------------------------ buttons */

/*
 * A button in these pages is the quiet one unless it is the page's next step:
 * white on a hairline, ink words, the short lift every small pressed thing on
 * the redesigned pages has.
 */
body.tt-flow .site-content .woocommerce .button,
body.tt-flow .site-content .woocommerce button.button,
body.tt-flow .site-content .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--tc-line-strong);
	border-radius: 999px;
	background-color: #FFFFFF;
	color: var(--tc-ink);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: var(--tc-shadow-chip);
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

body.tt-flow .site-content .woocommerce .button:hover,
body.tt-flow .site-content .woocommerce .button:focus,
body.tt-flow .site-content .woocommerce button.button:hover,
body.tt-flow .site-content .woocommerce button.button:focus,
body.tt-flow .site-content .woocommerce a.button:hover,
body.tt-flow .site-content .woocommerce a.button:focus {
	border-color: var(--tc-line-strong);
	background-color: var(--tc-band);
	color: var(--tc-ink);
	box-shadow: var(--tc-shadow-chip);
}

body.tt-flow .site-content .woocommerce .button:active,
body.tt-flow .site-content .woocommerce button.button:active,
body.tt-flow .site-content .woocommerce a.button:active {
	background-color: var(--tc-band);
	color: var(--tc-ink);
	box-shadow: none;
}

body.tt-flow .site-content .woocommerce .button:focus-visible {
	outline: 2px solid var(--tc-green);
	outline-offset: 2px;
}

/*
 * The next step: Proceed to checkout, Place order, Pay, Save changes, and
 * anything WooCommerce marks `alt`. The green pill.
 */
body.tt-flow .site-content .woocommerce .button.alt,
body.tt-flow .site-content .woocommerce a.button.alt,
body.tt-flow .site-content .woocommerce button.button.alt,
body.tt-flow .site-content .woocommerce .wc-proceed-to-checkout a.checkout-button,
body.tt-flow .site-content .woocommerce #place_order,
body.tt-flow .site-content .woocommerce .woocommerce-EditAccountForm button[type="submit"],
body.tt-flow .site-content .woocommerce form.lost_reset_password button[type="submit"],
body.tt-flow .site-content .woocommerce .return-to-shop a.button {
	min-height: 48px;
	padding: 0 22px;
	border-color: var(--tc-green);
	background-color: var(--tc-green);
	color: #FFFFFF;
	font-size: 0.9375rem;
	font-weight: 700;
	box-shadow: var(--tc-shadow-go);
}

body.tt-flow .site-content .woocommerce .button.alt:hover,
body.tt-flow .site-content .woocommerce .button.alt:focus,
body.tt-flow .site-content .woocommerce a.button.alt:hover,
body.tt-flow .site-content .woocommerce a.button.alt:focus,
body.tt-flow .site-content .woocommerce button.button.alt:hover,
body.tt-flow .site-content .woocommerce button.button.alt:focus,
body.tt-flow .site-content .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.tt-flow .site-content .woocommerce .wc-proceed-to-checkout a.checkout-button:focus,
body.tt-flow .site-content .woocommerce #place_order:hover,
body.tt-flow .site-content .woocommerce #place_order:focus,
body.tt-flow .site-content .woocommerce .woocommerce-EditAccountForm button[type="submit"]:hover,
body.tt-flow .site-content .woocommerce .woocommerce-EditAccountForm button[type="submit"]:focus,
body.tt-flow .site-content .woocommerce form.lost_reset_password button[type="submit"]:hover,
body.tt-flow .site-content .woocommerce form.lost_reset_password button[type="submit"]:focus,
body.tt-flow .site-content .woocommerce .return-to-shop a.button:hover,
body.tt-flow .site-content .woocommerce .return-to-shop a.button:focus {
	border-color: var(--tc-green-dark);
	background-color: var(--tc-green-dark);
	color: #FFFFFF;
	box-shadow: var(--tc-shadow-go);
}

body.tt-flow .site-content .woocommerce .button.alt:active,
body.tt-flow .site-content .woocommerce #place_order:active,
body.tt-flow .site-content .woocommerce .wc-proceed-to-checkout a.checkout-button:active {
	background-color: var(--tc-green-dark);
	color: #FFFFFF;
	box-shadow: none;
}

/* Out of zone, or mid-submit: the button is there but cannot be pressed. */
body.tt-flow .site-content .woocommerce .button[disabled],
body.tt-flow .site-content .woocommerce .button.disabled,
body.tt-flow .site-content .woocommerce .button:disabled,
body.tt-flow .site-content .woocommerce #place_order[disabled] {
	border-color: var(--tc-line);
	background-color: var(--tc-band);
	color: var(--tc-muted);
	box-shadow: none;
	cursor: default;
}

/* The one a customer should mean: clearing the cart. */
body.tt-flow .site-content .woocommerce .button.button-empty-cart,
body.tt-flow .site-content .woocommerce .button.button-empty-cart:hover,
body.tt-flow .site-content .woocommerce .button.button-empty-cart:focus {
	color: var(--tc-danger);
}

body.tt-flow .site-content .woocommerce .button.button-empty-cart:hover,
body.tt-flow .site-content .woocommerce .button.button-empty-cart:focus {
	border-color: var(--tc-danger);
	background-color: var(--tc-danger-soft);
}

/* --------------------------------------------------------------- the tables */

/*
 * Order, totals and download tables: rows on hairlines, no grid, the amount at
 * the right. Motta: th, td { padding: 10px 0; border-bottom: 1px solid #ecf0f4 }.
 */
body.tt-flow .site-content .woocommerce table.shop_table {
	margin: 0;
	border: 0;
	border-collapse: collapse;
	color: var(--tc-body);
	font-size: 0.9375rem;
}

body.tt-flow .site-content .woocommerce table.shop_table th,
body.tt-flow .site-content .woocommerce table.shop_table td {
	border-color: var(--tc-line);
}

/*
 * Direct rows only, here and in the cart and checkout sections below: the tax
 * note is a table inside one of these tables' cells (tapper-tea-tax-control,
 * .tt-gst-note__table), and a descendant selector laid its rows out as ours.
 */
body.tt-flow .site-content .woocommerce table.shop_table > * > tr > th {
	color: var(--tc-body);
	font-weight: 400;
}

body.tt-flow .site-content .woocommerce table.shop_table > thead > tr > th {
	color: var(--tc-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* What was chosen for a line: "Vendor: …", "Grind: …". Motta floats each pair. */
body.tt-flow .site-content .woocommerce table.shop_table dl.variation {
	margin: 4px 0 0;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

body.tt-flow .site-content .woocommerce table.shop_table dl.variation dt,
body.tt-flow .site-content .woocommerce table.shop_table dl.variation dd {
	display: inline;
	float: none;
	margin: 0;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: none;
}

body.tt-flow .site-content .woocommerce table.shop_table dl.variation dd p {
	display: inline;
	margin: 0;
}

/* One pair to a line, without the floats and the clearfix. */
body.tt-flow .site-content .woocommerce table.shop_table dl.variation dd::after {
	content: "";
	display: block;
}

body.tt-flow .site-content .woocommerce table.shop_table .amount {
	color: var(--tc-ink);
	font-variant-numeric: tabular-nums;
}

/* ================================================================== the cart */

/*
 * Two cards: the lines, and the totals with Proceed to checkout in their foot.
 * Motta floats the two at 65.9% and 31.9%; `woocommrece` is its spelling.
 */
body.tt-flow .woocommrece-cart-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.tt-flow .woocommrece-cart-content .woocommerce-cart-form {
	float: none;
	width: auto;
	margin: 0;
	padding: 4px 16px 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

body.tt-flow .woocommrece-cart-content .cart-collaterals {
	float: none;
	width: auto;
	padding: 0;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
	overflow: hidden;
}

/* ---- the lines */

/*
 * A line is a row, not a table row: the picture, the name over what was
 * chosen, the line's price at the right, and under them the stepper, the unit
 * price and Remove. One layout at every width, so the table's own cells are
 * laid on a grid and its header -- six words over six columns -- goes.
 */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents,
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents thead {
	display: none;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item {
	position: static;
	display: grid;
	grid-template-columns: 64px auto minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name name     subtotal"
		"thumb qty  price    remove";
	align-items: start;
	gap: 8px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tc-line);
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

/* WooCommerce's phone table labels each cell from data-title; a row needs none. */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td::before {
	display: none;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-thumbnail {
	grid-area: thumb;
	display: block;
	padding: 0;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-thumbnail a {
	display: block;
	max-width: 64px;
}

/* Motta: min-width 100px. The storefront's photo corner, and its hairline. */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-thumbnail img {
	display: block;
	width: 64px;
	min-width: 0;
	height: 64px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius-sm);
	object-fit: cover;
}

/*
 * A column: the name, then whatever is said under it, each on its own line.
 * For a coffee that is the grind and roaster, the tasting notes, "Coffee
 * details" and "Edit options" (tapper-cafe-storefront, cart-media.css orders
 * them); for a tea, WooCommerce's short list.
 */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-name {
	grid-area: name;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	width: auto;
	padding: 0;
	color: var(--tc-muted);
	/*
	 * Zero, and given back to each child below. Motta's template prints a bare
	 * &nbsp; after the name of a product with no page of its own (every coffee:
	 * they share one generic product), and in a column a bare space is a line.
	 */
	font-size: 0;
	line-height: 0;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-name > * {
	font-size: 0.8125rem;
	line-height: 1.45;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-name > a:not(.tc-cart-item__edit) {
	color: var(--tc-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-name > dl.variation {
	margin: 0;
}

/* Motta repeats the price and Remove inside the name cell for its phone layout. */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-name .product-price,
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody td.product-name .product-remove {
	display: none;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal {
	grid-area: subtotal;
	display: block;
	color: var(--tc-ink);
	font-size: 1rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-quantity {
	grid-area: qty;
	position: static;
	display: block;
}

/* The price of one, beside the stepper, said quietly: the line's own price is above. */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-price {
	grid-area: price;
	display: block;
	align-self: center;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-price .amount {
	color: var(--tc-muted);
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr.cart_item td.product-remove {
	grid-area: remove;
	position: static;
	align-self: center;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1;
	text-align: right;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	color: var(--tc-muted);
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents td.product-remove a:hover {
	background-color: var(--tc-danger-soft);
	color: var(--tc-danger);
}

/* ---- the stepper */

/*
 * The storefront card's stepper: a green block, white minus and plus, the count
 * between. Motta's is a white box with two ringed icons.
 */
body.tt-flow .woocommerce-cart-form .woocommerce td.product-quantity .quantity,
body.tt-flow .woocommerce-cart-form td.product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	min-width: 92px;
	height: 36px;
	border: 1px solid var(--tc-green);
	border-radius: 8px;
	background-color: var(--tc-green);
	box-shadow: 0 2px 6px rgba(18, 17, 17, 0.08);
	overflow: hidden;
}

body.tt-flow .woocommerce-cart-form td.product-quantity .quantity:hover {
	border-color: var(--tc-green);
	box-shadow: 0 2px 6px rgba(18, 17, 17, 0.08);
}

body.tt-flow .woocommerce-cart-form td.product-quantity.motta-skin--subtle.motta-qty-medium .quantity .motta-qty-button {
	justify-content: center;
	width: 32px;
	height: 34px;
	padding: 0;
	color: #FFFFFF;
	font-size: 0.75rem;
}

body.tt-flow .woocommerce-cart-form td.product-quantity .quantity .motta-qty-button svg,
body.tt-flow .woocommerce-cart-form td.product-quantity .quantity .motta-qty-button:hover svg {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: #FFFFFF;
	font-size: 0.875rem;
}

body.tt-flow .woocommerce-cart-form td.product-quantity .quantity .motta-qty-button:active svg {
	background-color: transparent;
	color: #FFFFFF;
}

/* The count is a number field, so the fields rule above and the site-wide reset both reach it. */
body.tt-flow #site-content .woocommerce-cart-form td.product-quantity .quantity input.qty {
	flex: 1 1 auto;
	width: 28px;
	height: 34px !important;
	padding: 0 !important;
	border-width: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: #FFFFFF !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-align: center;
	box-shadow: none;
}

/* ---- coupon, update, clear */

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr:not(.cart_item) {
	display: block;
	border: 0;
}

body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 0 0;
	border: 0;
	text-align: left;
}

/* The coupon takes the row; the two buttons sit under it. */
body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents .coupon {
	display: flex;
	flex: 1 1 100%;
	gap: 8px;
	width: auto;
	min-width: 0;
	max-width: 100%;
}

body.tt-flow #site-content .woocommerce-cart-form table.woocommerce-cart-form__contents .coupon .input-text {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

body.tt-flow .site-content .woocommerce .woocommerce-cart-form__contents .coupon .button,
body.tt-flow .site-content .woocommerce .woocommerce-cart-form__contents .actions .button-update-cart,
body.tt-flow .site-content .woocommerce .woocommerce-cart-form__contents .actions .button-empty-cart {
	flex: none;
	float: none;
	min-width: 0;
	margin: 0;
	white-space: nowrap;
}

body.tt-flow .site-content .woocommerce .woocommerce-cart-form__contents .coupon .button {
	min-height: 48px;
}

/*
 * Update cart is out of sight. WooCommerce only recounts a cart when this
 * button is pressed, so changing a quantity did nothing until the customer
 * found it. assets/flow.js presses it for them a moment after the count
 * changes. It is clipped rather than removed: WooCommerce's own script submits
 * the cart through it, and with scripts off it is still reachable by keyboard
 * and takes its ordinary shape when focused.
 */
body.tt-flow .site-content .woocommerce .woocommerce-cart-form__contents .actions .button-update-cart:not(:focus-visible) {
	position: absolute;
	width: 1px;
	min-width: 0;
	height: 1px;
	min-height: 0;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	box-shadow: none;
}

/* ---- the totals */

/* The head band. Motta: h2 18px/500 with 14px under it, inside a 31px-padded grey box. */
body.tt-flow .site-content .woocommerce .cart_totals h2 {
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--tc-band-line);
	background-color: var(--tc-band);
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

/*
 * Each row a label and an amount, at every width. WooCommerce's responsive
 * table hides the labels below 48em and Motta brings two of them back; here
 * they are simply always shown, which is also what style.css's fee and
 * discount fix was for.
 */
body.tt-flow .cart-collaterals .cart_totals table.shop_table,
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody {
	display: block;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table {
	padding: 12px 16px 8px;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 6px 0;
	border: 0;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > th,
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > td {
	display: block;
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	text-align: left;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > th {
	color: var(--tc-body);
	font-weight: 400;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > td {
	color: var(--tc-ink);
	font-weight: 600;
	text-align: right;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > td::before {
	display: none;
}

/* A row that is one cell across both columns (the tax note) takes the line. */
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr > td:only-child,
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.woocommerce-shipping-totals > td {
	flex: 1 1 100%;
	font-weight: 400;
	text-align: left;
}

/* The tax note is a footnote to the total: its own 13px, not a totals row's 15px. */
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.tt-gst-note > td {
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.order-total {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--tc-line);
}

body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.order-total > th,
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.order-total > td,
body.tt-flow .cart-collaterals .cart_totals table.shop_table > tbody > tr.order-total strong {
	padding: 0;
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

/* The foot band, holding the one button. */
body.tt-flow .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	margin: 0;
	padding: 14px 16px;
	border-top: 1px solid var(--tc-band-line);
	background-color: var(--tc-band);
}

body.tt-flow .site-content .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
}

/* ---- "You may be interested in" */

body.tt-flow .site-content .woocommerce .cross-sells > h2 {
	margin: 32px 0 16px;
}

/* ---- the empty cart */

/*
 * A panel that says the cart is empty and what to do next, at the left like
 * the storefront's own empty states. Motta centres a drawing over a 28px title.
 */
body.tt-flow .woocommerce .cart-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 24px 20px 8px;
	border-radius: var(--tc-radius-sm) var(--tc-radius-sm) 0 0;
	background-color: var(--tc-band);
	color: var(--tc-ink);
	text-align: left;
}

body.tt-flow .woocommerce .cart-empty .empty-cart__title {
	margin: 0 0 4px;
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

body.tt-flow .woocommerce .cart-empty .empty-cart__description {
	color: var(--tc-body);
	font-size: 0.9375rem;
	font-weight: 400;
}

/* The two buttons close the same panel. */
body.tt-flow .woocommerce .empty-cart-button-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 20px 24px;
	border-radius: 0 0 var(--tc-radius-sm) var(--tc-radius-sm);
	background-color: var(--tc-band);
	text-align: left;
}

body.tt-flow .woocommerce .empty-cart-button-group .return-to-shop,
body.tt-flow .woocommerce .empty-cart-button-group .empty-cart-button-sign-in {
	margin: 0;
}

/* ============================================================== the checkout */

/* ---- sign in, and the coupon, above the form */

/*
 * Motta sets "Returning customer?" and "Have a coupon?" side by side as two
 * centred grey sentences with a rule between. Here each is a plain line at the
 * left, and what it opens is a card.
 */
body.tt-flow .woocommerce .checkout-form-cols {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 16px;
}

body.tt-flow .woocommerce .checkout-form-cols .checkout-login,
body.tt-flow .woocommerce .checkout-form-cols .checkout-coupon,
body.tt-flow .woocommerce .checkout-form-cols .checkout-login + .checkout-coupon {
	width: 100%;
	max-width: none;
	padding: 0;
	text-align: left;
}

body.tt-flow .woocommerce .checkout-form-cols .checkout-login .woocommerce-info,
body.tt-flow .woocommerce .checkout-form-cols .checkout-coupon .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--tc-body);
	font-size: 0.9375rem;
	text-align: left;
}

/* Motta underlines these two links with an absolutely placed 1px line. */
body.tt-flow .woocommerce .checkout-form-cols .woocommerce-info a::after {
	display: none;
}

body.tt-flow .site-content .woocommerce .checkout-form-cols .woocommerce-info a {
	color: var(--tc-green);
	font-weight: 600;
	text-decoration: none;
}

body.tt-flow .woocommerce .checkout-form-cols .checkout-coupon .checkout_coupon,
body.tt-flow .woocommerce .checkout-form-cols .checkout-login + .checkout-coupon .checkout_coupon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	margin: 8px 0 0;
	padding: 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

/* WooCommerce hides the form with an inline display:none until the link is pressed. */
body.tt-flow .woocommerce .checkout-form-cols .checkout-coupon .checkout_coupon[style*="none"] {
	display: none;
}

body.tt-flow .woocommerce .checkout-form-cols .checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.tt-flow .woocommerce .checkout-form-cols .checkout_coupon .clear {
	display: none;
}

body.tt-flow #site-content .woocommerce .checkout-form-cols .checkout-coupon input.input-text {
	width: 100%;
}

body.tt-flow .site-content .woocommerce .checkout-form-cols .checkout-coupon .button {
	width: auto;
	min-height: 48px;
}

/* ---- the two columns */

/* Motta: form.checkout { padding-top: 30px } on a phone. */
body.tt-flow .woocommerce form.checkout {
	padding-top: 0;
}

body.tt-flow .tt-flow-checkout {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.tt-flow .tt-flow-checkout__main,
body.tt-flow .tt-flow-checkout__side {
	min-width: 0;
}

/* Motta floats this at 59.6% with 24px to its right. */
body.tt-flow .woocommerce form.checkout .col2-set {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.tt-flow .woocommerce form.checkout .col2-set .col-1,
body.tt-flow .woocommerce form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* ---- the customer's details */

body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields > h3,
body.tt-flow .woocommerce form.checkout .woocommerce-shipping-fields > h3,
body.tt-flow .woocommerce form.checkout .woocommerce-additional-fields > h3 {
	margin: 0 0 12px;
	padding: 0;
}

/*
 * The fields' box becomes a card. Short fields pair up two to a row (first
 * name, last name); everything else, and anything a plugin puts in here,
 * takes the row.
 */
body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Motta floats these two at 50% with 15px of padding between them. */
body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .form-row-last {
	grid-column: auto;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.tt-flow .woocommerce form.checkout .form-row,
body.tt-flow .woocommerce form.checkout .form-row:last-child {
	margin: 0;
}

/* Rows outside the grid (order notes, create an account) still need air between them. */
body.tt-flow .woocommerce form.checkout .woocommerce-additional-fields .form-row,
body.tt-flow .woocommerce form.checkout .woocommerce-account-fields .form-row {
	margin: 0 0 12px;
}

/* "GST Details", and any other heading the field editor puts between rows: a section label. */
body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper h5 {
	margin: 8px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--tc-line);
	color: var(--tc-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The country is fixed, so WooCommerce prints it as a word rather than a field. */
body.tt-flow .woocommerce form.checkout #billing_country_field strong {
	color: var(--tc-ink);
	font-weight: 600;
}

/* Motta: a bordered strip that continues the fields' box. */
body.tt-flow .woocommerce form.checkout .woocommerce-account-fields {
	padding: 0;
	border: 0;
}

/* ---- the order */

/*
 * One card for the whole side: "Your order" is its head band, the lines and
 * totals its body, and the payment box with Place order its foot.
 */
body.tt-flow .tt-flow-checkout__side {
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
	overflow: hidden;
}

body.tt-flow .site-content .woocommerce .tt-flow-checkout__side #order_review_heading {
	clear: none;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--tc-band-line);
	background-color: var(--tc-band);
	font-size: 1.125rem;
}

/* Anything hooked between the head and the review ("Edit your cart") sits in the body. */
body.tt-flow .tt-flow-checkout__side > *:not(#order_review_heading):not(#order_review) {
	margin: 12px 16px 0;
}

/* Motta: float left at 40.4%, a grey box with a border and 30px of padding. */
body.tt-flow .woocommerce form.checkout .woocommerce-checkout-review-order {
	float: none;
	width: auto;
	padding: 4px 16px 0;
	border: 0;
	background-color: transparent;
	color: var(--tc-body);
}

/* Two words over two columns that need no naming. */
body.tt-flow .woocommerce form.checkout table.shop_table > thead {
	display: none;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody {
	border-bottom: 1px solid var(--tc-line);
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td {
	padding: 12px 0;
	border-bottom: 0;
	font-size: 0.9375rem;
	vertical-align: top;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr + tr > td {
	border-top: 1px solid var(--tc-line);
}

/*
 * The name is styled on the cell, not on Motta's span around it: that span is
 * added by a filter that only runs on the page load, and the first address
 * change re-renders this table over AJAX without it.
 */
body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name {
	position: relative;
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * The thumbnail (tapper-tea-dokan-customize prints it in front of the name)
 * stands at the left of the line and the words wrap beside it.
 */
body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name:has(.tt-review-thumb) {
	min-height: 68px;
	padding-left: 56px;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name .tt-review-thumb {
	position: absolute;
	top: 12px;
	left: 0;
	float: none;
	width: 44px;
	height: 44px;
	margin: 0;
}

/* The cell's 600 is for the name. What sits under it -- the reminder's help line, the details -- is running text. */
body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name small,
body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name dl.variation {
	font-weight: 400;
}

/* The name may be a link to the coffee; it is the line's name either way, not a text link. */
body.tt-flow .site-content .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name a:not(.tc-cart-item__edit) {
	color: var(--tc-ink);
}

/* Motta: one line, cut with an ellipsis at 273px. A coffee's name is worth its second line. */
body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name .checkout-review-product-name {
	display: inline;
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: normal;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-name .product-quantity {
	float: none;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tbody > tr > td.product-total {
	width: auto;
	padding-left: 12px;
	color: var(--tc-ink);
	font-weight: 700;
	white-space: nowrap;
}

/* The totals. Motta hides the subtotal here; the mockup, and every receipt, shows it. */
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > .cart-subtotal {
	display: table-row;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr > th,
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr > td {
	padding: 6px 0;
	border: 0;
	font-size: 0.9375rem;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr:first-child > th,
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr:first-child > td {
	padding-top: 12px;
}

/*
 * An amount: ink, at the right. Not the rows that are one cell across both
 * columns -- the free-delivery line, the rewards, the tax note -- which are
 * sentences and read from the left. Matched on the attribute, as
 * tapper-tea-dokan-customize's value-column rule matches them.
 */
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr > td:not([colspan]) {
	color: var(--tc-ink);
	font-weight: 600;
	text-align: right;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr > td[colspan] {
	font-weight: 400;
	text-align: left;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > .order-total {
	border-top: 0;
}

/* The tax note under the total: one cell across both columns, a footnote's 13px, read from the left. */
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > tr.tt-gst-note > td {
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: left;
}

body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > .order-total > th,
body.tt-flow .woocommerce form.checkout table.shop_table > tfoot > .order-total > td {
	padding: 12px 0;
	border-top: 1px solid var(--tc-line);
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

/* ---- payment, and Place order */

/* The card's foot. Motta: a ruled strip pulled out to the box's edges by -30px margins. */
body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment,
body.tt-flow .woocommerce form.checkout.woocommerce-checkout .woocommerce-checkout-payment {
	margin: 16px -16px 0;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--tc-band-line);
	background-color: var(--tc-band);
}

body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment ul.wc_payment_methods {
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.9375rem;
}

body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment ul.wc_payment_methods li {
	padding: 6px 0;
	border-bottom: 0;
}

body.tt-flow .site-content .woocommerce form.checkout .woocommerce-checkout-payment ul.wc_payment_methods li label {
	display: inline;
	margin: 0 0 0 6px;
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* What a gateway says about itself: on a band, so the body colour, not muted's floor. */
body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment .payment_box {
	color: var(--tc-body);
	font-size: 0.8125rem;
}

body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment ul.wc_payment_methods .payment_box p {
	margin-top: 6px;
	line-height: 1.45;
}

body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment .place-order {
	margin: 0;
	padding: 0;
}

body.tt-flow .site-content .woocommerce form.checkout .woocommerce-checkout-payment #place_order {
	display: flex;
	width: 100%;
}

/* ================================================= pay for order, order received */

/* Pay for order: the same card, without a form beside it. */
body.tt-flow.woocommerce-order-pay .woocommerce #order_review {
	max-width: 40rem;
	padding: 4px 16px 0;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
	overflow: hidden;
}

body.tt-flow.woocommerce-order-pay .woocommerce #order_review table.shop_table th,
body.tt-flow.woocommerce-order-pay .woocommerce #order_review table.shop_table td {
	padding: 10px 0;
}

body.tt-flow.woocommerce-order-pay .woocommerce #order_review table.shop_table tfoot td,
body.tt-flow.woocommerce-order-pay .woocommerce #order_review table.shop_table td.product-subtotal,
body.tt-flow.woocommerce-order-pay .woocommerce #order_review table.shop_table th.product-total {
	text-align: right;
}

body.tt-flow.woocommerce-order-pay .woocommerce #order_review #payment {
	margin: 12px -16px 0;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--tc-band-line);
	background-color: var(--tc-band);
}

body.tt-flow.woocommerce-order-pay .woocommerce #order_review #payment ul.wc_payment_methods {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

/* "Thank you. Your order has been received." -- the page's first line. */
body.tt-flow .site-content .woocommerce .woocommerce-thankyou-order-received {
	margin: 0 0 16px;
	color: var(--tc-ink);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

/*
 * The order's facts as the kraft ticket the coffee and store pages head
 * themselves with: the roast-colour strip, small labels over ink values.
 * Motta: a bordered flex row.
 */
body.tt-flow .site-content .woocommerce ul.order_details {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 0 0 16px;
	padding: 20px 16px 14px;
	border: 0;
	border-radius: var(--tc-radius-sm);
	background-color: #EFE2CC;
	box-shadow: inset 0 0 0 1px rgba(91, 58, 41, 0.14);
	list-style: none;
	overflow: hidden;
}

body.tt-flow .site-content .woocommerce ul.order_details::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, #C8892B, #A47148, #6F4E37, #5B3A29);
}

/* The label. On kraft the body colour, not muted: muted is 4.4:1 there. */
body.tt-flow .site-content .woocommerce ul.order_details li {
	flex: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--tc-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.tt-flow .site-content .woocommerce ul.order_details li strong {
	display: block;
	padding: 2px 0 0;
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* ---- order details, here and on My Account's view-order */

body.tt-flow .site-content .woocommerce .woocommerce-order {
	font-size: 0.9375rem;
}

body.tt-flow .site-content .woocommerce .woocommerce-customer-details {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

/*
 * The order's own section is not a card: the plugins hang theirs inside it,
 * after the table (the shipments, the sub-orders, the cancel form, the
 * invoice), and a card around cards reads as one grey heap. The table is the
 * card instead -- separate borders so the corner can round, and the first and
 * last cells carry the card's side padding.
 */
body.tt-flow .site-content .woocommerce .woocommerce-order-details {
	margin: 0 0 16px;
	padding: 0;
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details {
	margin: 0 0 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	border-collapse: separate;
	border-spacing: 0;
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details th:first-child,
body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details td:first-child {
	padding-left: 16px;
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details th:last-child,
body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details td:last-child {
	padding-right: 16px;
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details tr:last-child th,
body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details tr:last-child td {
	border-bottom: 0;
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details tfoot tr:last-child th,
body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details tfoot tr:last-child td {
	padding-bottom: 14px;
}

body.tt-flow .site-content .woocommerce .woocommerce-order-details .woocommerce-order-details__title,
body.tt-flow .site-content .woocommerce .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 8px;
}

body.tt-flow .site-content .woocommerce table.order_details th,
body.tt-flow .site-content .woocommerce table.order_details td {
	padding: 10px 0;
	font-size: 0.9375rem;
}

/* Motta indents the first cell 20px, for a border this table no longer has. */
body.tt-flow .site-content .woocommerce table.order_details td:first-child {
	padding-left: 0;
}

body.tt-flow .site-content .woocommerce table.order_details td.product-name a {
	color: var(--tc-ink);
	font-weight: 600;
}

body.tt-flow .site-content .woocommerce table.order_details td.product-total,
body.tt-flow .site-content .woocommerce table.order_details th.product-total,
body.tt-flow .site-content .woocommerce table.order_details tfoot td {
	color: var(--tc-ink);
	font-weight: 600;
	text-align: right;
}

body.tt-flow .site-content .woocommerce table.order_details tfoot th {
	color: var(--tc-body);
	font-size: 0.9375rem;
	font-weight: 400;
}

body.tt-flow .site-content .woocommerce table.order_details tfoot tr:last-child th,
body.tt-flow .site-content .woocommerce table.order_details tfoot tr:last-child td {
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

/* Order again, and a plugin's buttons under the table (the invoice). */
body.tt-flow .site-content .woocommerce .order-again,
body.tt-flow .site-content .woocommerce .tapper-tea-invoice-link {
	margin: 12px 0 0;
}

/* Motta paints buttons in an order's details black at 44px. */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details a.button,
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-downloads a.button {
	height: auto;
	border: 1px solid var(--tc-line-strong);
	background-color: #FFFFFF;
	color: var(--tc-ink);
	line-height: 1.2;
	box-shadow: var(--tc-shadow-chip);
}

body.tt-flow .site-content .woocommerce .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	float: none;
	width: auto;
	padding: 0;
}

body.tt-flow .site-content .woocommerce .woocommerce-customer-details .col2-set .col-1,
body.tt-flow .site-content .woocommerce .woocommerce-customer-details .col2-set .col-2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.tt-flow .site-content .woocommerce .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	color: var(--tc-body);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.5;
}

body.tt-flow .site-content .woocommerce .woocommerce-customer-details address p {
	margin: 4px 0 0;
}

/* ================================================================ My Account */

/*
 * The content column. Its width answers the navigation's 232px column and
 * 32px gap, which tapper-tea-dokan-customize's account-nav.css sets; below
 * 48em the navigation is a row of chips above it. The column itself is not a
 * box: what is inside it brings its own cards.
 */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
}

body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .greeting {
	margin: 0 0 12px;
	font-size: 1.125rem;
	line-height: 1.3;
}

body.tt-flow.woocommerce-account .woocommerce-MyAccount-content h2,
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 0 0 12px;
	font-size: 1.125rem;
	font-weight: 600;
}

body.tt-flow.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--tc-body);
	font-size: 0.9375rem;
}

/* Motta underlines links in running text with an inset shadow in its own ink. */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content p a {
	font-weight: 600;
	box-shadow: none;
}

/* "Order #1 was placed on … and is currently …": WooCommerce marks the three facts. */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content mark {
	background-color: transparent;
	color: var(--tc-ink);
	font-weight: 600;
}

/* "No order has been made yet." Motta: a 24px bare sentence. */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message--info,
body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message--info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 20px;
	border-radius: var(--tc-radius-sm);
	background-color: var(--tc-band);
	color: var(--tc-ink);
	font-size: 0.9375rem;
}

/* ---- orders */

/*
 * An order is a row card: its number and where it stands, the date and the
 * total, then what can be done with it. The same at every width, so the table
 * is laid on a grid and its header goes, as in the cart.
 */
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody {
	display: block;
	margin: 0;
	border: 0;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table thead {
	display: none;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 12px;
	padding: 14px;
	border: 0;
	border-radius: var(--tc-radius-sm);
	background-color: #FFFFFF;
	box-shadow: var(--tt-flow-ring);
}

/* A cell this sheet does not know (a plugin's column) takes a line of its own. */
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr th,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr td {
	display: block;
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: left;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr td::before {
	display: none;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr .woocommerce-orders-table__cell-order-number {
	grid-column: 1;
	grid-row: 1;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

/* Where it stands, as a tag; the row's status class colours it. */
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr .woocommerce-orders-table__cell-order-status {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	justify-self: end;
	min-height: 24px;
	padding: 2px 9px;
	border-radius: 6px;
	background-color: var(--tc-band);
	color: var(--tc-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	background-color: var(--tt-flow-warn);
	color: var(--tc-amber-ink);
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-tc-delivered .woocommerce-orders-table__cell-order-status {
	background-color: var(--tc-green-soft);
	color: var(--tc-green-dark);
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	background-color: var(--tc-danger-soft);
	color: var(--tc-danger);
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr .woocommerce-orders-table__cell-order-date {
	grid-column: 1;
	grid-row: 2;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr .woocommerce-orders-table__cell-order-total {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	color: var(--tc-body);
	text-align: right;
}

body.tt-flow .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
	padding: 0;
}

/*
 * Motta: 44px black slabs. Each button at its own width here; which of them is
 * the green one (View, Pay) and which the red (Cancel) is said per action in
 * tapper-tea-dokan-customize's public stylesheet, "Customer order action
 * buttons", whose rules carry `!important` and so have the last word on colour.
 */
body.tt-flow.woocommerce-account .woocommerce-MyAccount-orders .woocommerce-orders-table__cell .woocommerce-button {
	height: auto;
	min-height: 40px;
	line-height: 1.2;
}

body.tt-flow .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: 8px;
	margin: 4px 0 0;
}

/* ---- order updates on view-order */

body.tt-flow .woocommerce-MyAccount-content ol.woocommerce-OrderUpdates {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

body.tt-flow .woocommerce-MyAccount-content ol.woocommerce-OrderUpdates li {
	margin: 0 0 8px;
	padding: 12px 14px;
	border-radius: 10px;
	background-color: var(--tc-band);
	color: var(--tc-ink);
}

body.tt-flow.woocommerce-account .woocommerce-MyAccount-content .woocommerce-OrderUpdate-meta {
	margin: 0 0 2px;
	color: var(--tc-muted);
	font-size: 0.8125rem;
}

/* ---- account details */

/* Motta: two bordered boxes, 32px of padding each. Two cards. */
body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-details,
body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-password {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
}

body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-details h3,
body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-password h3,
body.tt-flow.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	margin: 0 0 12px;
	padding: 0;
	color: var(--tc-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

body.tt-flow.woocommerce-account .woocommerce-EditAccountForm p,
body.tt-flow.woocommerce-account .woocommerce-address-fields p {
	margin: 0 0 12px;
}

body.tt-flow.woocommerce-account .woocommerce-EditAccountForm label,
body.tt-flow.woocommerce-account .woocommerce-address-fields label {
	margin-bottom: 6px;
	color: var(--tc-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

body.tt-flow.woocommerce-account .woocommerce-EditAccountForm em,
body.tt-flow.woocommerce-account .woocommerce-address-fields em {
	margin-top: 6px;
	color: var(--tc-muted);
	font-size: 0.8125rem;
	font-style: normal;
}

/* Motta makes every button in these forms the width of the form. */
body.tt-flow.woocommerce-account .site-content .woocommerce-EditAccountForm button,
body.tt-flow.woocommerce-account .site-content .woocommerce-address-fields button {
	width: auto;
}

/* ---- signed out: sign in, and lost password */

/*
 * The sign-in page is the login plugin's form under the brand mark, and the
 * lost-password page is WooCommerce's. Each is one card, a reading width wide.
 */
body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .xoo-el-form-container.xoo-el-form-inline,
body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-account__summary {
	width: auto;
	max-width: 28rem;
	margin: 0 auto 16px;
	padding: 20px 16px;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow);
	overflow: visible;
}

/*
 * Motta's own box around the lost-password form, with "Forgot Password?" as a
 * centred tab over a 2px rule. The box is the card; the heading is its title.
 */
body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-account__heading {
	margin-bottom: 16px;
}

body.tt-flow.woocommerce-account:not(.logged-in) .site-content .woocommerce .woocommerce-account__heading h2,
body.tt-flow.woocommerce-account:not(.logged-in) .site-content .woocommerce .woocommerce-account__heading h2.active {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--tc-line);
	color: var(--tc-ink);
	text-align: left;
}

body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .reset-depscription {
	color: var(--tc-body);
	font-size: 0.9375rem;
}

body.tt-flow.woocommerce-lost-password .woocommerce form.lost_reset_password .form-row {
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
}

body.tt-flow.woocommerce-lost-password .site-content .woocommerce form.lost_reset_password button {
	width: auto;
}

/* The login plugin draws each field's icon as a black block; here it is part of the field. */
body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .xoo-el-form-container .xoo-aff-input-icon {
	border-radius: 10px 0 0 10px;
	background-color: var(--tc-band);
	color: var(--tc-ink);
}

/* The login plugin's own submit buttons are the page's next step. */
body.tt-flow.woocommerce-account:not(.logged-in) .site-content .woocommerce .xoo-el-form-container .xoo-el-action-btn {
	width: 100%;
	min-height: 48px;
	border-color: var(--tc-green);
	background-color: var(--tc-green);
	color: #FFFFFF;
	font-size: 0.9375rem;
	font-weight: 700;
	box-shadow: var(--tc-shadow-go);
}

body.tt-flow.woocommerce-account:not(.logged-in) .site-content .woocommerce .xoo-el-form-container .xoo-el-action-btn:hover,
body.tt-flow.woocommerce-account:not(.logged-in) .site-content .woocommerce .xoo-el-form-container .xoo-el-action-btn:focus {
	border-color: var(--tc-green-dark);
	background-color: var(--tc-green-dark);
	color: #FFFFFF;
}

/* ============================================================ the phone's bar */

/*
 * The total and the one button, in reach of a thumb: the roaster's ordering
 * page's bar (order.css, .tc-orderPage__pill-bar). inc/flow.php prints it,
 * assets/flow.js fills it and shows it only while the page's own button is off
 * screen. Above Motta's bottom navigation where that is on (the Tea side; the
 * coffee chrome takes it off at a cart and checkout).
 */
.tt-flow-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;
}

body.motta-navigation-bar-show .tt-flow-bar {
	bottom: calc(env(safe-area-inset-bottom, 0px) + 64px + 0.5rem);
}

.tt-flow-bar[hidden] {
	display: none;
}

.tt-flow-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	border-radius: 999px;
	background: #29594B;
	color: #FFFFFF;
	box-shadow: 0 14px 34px rgba(18, 17, 17, 0.16);
}

.tt-flow-bar__sum {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.tt-flow-bar__sum small {
	color: #CFE0D8;
	font-size: 0.75rem;
}

.tt-flow-bar__sum b {
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* A link on the cart, a button at checkout; Motta's bare <button> rule reaches the second. */
.tt-flow-bar .tt-flow-bar__go,
.tt-flow-bar .tt-flow-bar__go:hover,
.tt-flow-bar .tt-flow-bar__go:focus,
.tt-flow-bar .tt-flow-bar__go:active {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background-color: #FFFFFF;
	color: #1F463B;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.tt-flow-bar .tt-flow-bar__go:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.tt-flow-bar .tt-flow-bar__go[disabled] {
	background-color: #CFE0D8;
	color: #1F463B;
	cursor: default;
}

/* A desk has the button beside the form the whole way down. */
@media (min-width: 48em) {
	.tt-flow-bar {
		display: none;
	}
}

/* =============================================================== from 48em up */

@media (min-width: 48em) {

	body.tt-flow.page .site-content {
		padding-top: 24px;
		padding-bottom: 72px;
	}

	body.tt-flow #page-header .page-header__content {
		margin-top: 28px;
	}

	body.tt-flow #page-header .page-header__content .page-header__title {
		font-size: 1.875rem;
	}

	/* The cart: the lines beside the totals. */
	body.tt-flow .woocommrece-cart-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24.5rem;
		align-items: start;
		gap: 32px;
	}

	body.tt-flow .woocommrece-cart-content .woocommerce-cart-form {
		padding: 8px 22px 22px;
	}

	body.tt-flow .site-content .woocommerce .cart_totals h2,
	body.tt-flow .cart-collaterals .cart_totals .wc-proceed-to-checkout {
		padding: 16px 22px;
	}

	body.tt-flow .cart-collaterals .cart_totals table.shop_table {
		padding: 16px 22px 12px;
	}

	/* Room for the coupon and the two buttons on one line. */
	body.tt-flow .woocommerce-cart-form table.woocommerce-cart-form__contents .coupon {
		flex: 1 1 18rem;
	}

	body.tt-flow .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper {
		padding: 22px;
	}

	body.tt-flow .site-content .woocommerce .woocommerce-customer-details,
	body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-details,
	body.tt-flow.woocommerce-edit-account .woocommerce-EditAccountForm .account-password {
		padding: 22px;
	}

	body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details th:first-child,
	body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details td:first-child {
		padding-left: 22px;
	}

	body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details th:last-child,
	body.tt-flow .site-content .woocommerce .woocommerce-order-details table.order_details td:last-child {
		padding-right: 22px;
	}

	body.tt-flow .site-content .woocommerce ul.order_details {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 24px 22px 18px;
	}

	body.tt-flow .site-content .woocommerce .woocommerce-customer-details .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* My Account: beside the navigation's 232px column and 32px gap. */
	body.tt-flow.woocommerce-account .woocommerce-MyAccount-content {
		float: left;
		width: calc(100% - 232px - 32px);
	}

	body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .xoo-el-form-container.xoo-el-form-inline,
	body.tt-flow.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-account__summary {
		padding: 28px;
	}
}

/* =============================================================== from 62em up */

@media (min-width: 62em) {

	/* The checkout: the customer's details beside the order. */
	body.tt-flow .tt-flow-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24.5rem;
		align-items: start;
		gap: 32px;
	}

	body.tt-flow .site-content .woocommerce .tt-flow-checkout__side #order_review_heading {
		padding: 16px 22px;
	}

	body.tt-flow .tt-flow-checkout__side > *:not(#order_review_heading):not(#order_review) {
		margin: 12px 22px 0;
	}

	body.tt-flow .woocommerce form.checkout .woocommerce-checkout-review-order {
		padding: 4px 22px 0;
	}

	body.tt-flow .woocommerce form.checkout .woocommerce-checkout-payment,
	body.tt-flow .woocommerce form.checkout.woocommerce-checkout .woocommerce-checkout-payment {
		margin: 16px -22px 0;
		padding: 16px 22px 20px;
	}
}