/**
 * Order list.
 *
 * Colours, type and shapes follow tcmtrader.net so the wholesale site reads as
 * the same company: Figtree for text, Fraunces for headings, deep petrol ink on
 * white, one warm red accent, fully rounded controls.
 */

.tt-order {
	--tt-ink: #072835;
	--tt-sub: #516971;
	/* #6a7e86 was only 4.25:1 on white; this clears 4.5:1 on both grounds. */
	--tt-ink-60: #5d7078;
	--tt-ink-40: #9ca9ae;
	--tt-line: #e6e9eb;
	--tt-line-soft: #f0f2f4;
	/* Anything a visitor can type in or click needs a 3:1 boundary (WCAG 1.4.11). */
	--tt-control: #8b989d;
	--tt-bg: #fff;
	--tt-bg-2: #f6f6f6;
	/* Every other row, and the row under the pointer. The stripe has to stay
	   quieter than the hover, or the hover stops reading as a hover. */
	--tt-stripe: #f5f8f9;
	--tt-row-hover: #e7eef0;
	--tt-field: #ededed;
	--tt-accent: #c4301c;
	--tt-accent-dark: #a52715;
	--tt-accent-wash: #fdf1ef;
	--tt-green: #0d8756;
	--tt-green-wash: #eff7f3;

	--tt-radius: 10px;
	--tt-pill: 100px;
	/* Height of the theme's sticky site header once it has shrunk (104px plus its
	   1px border), which is the state it is in whenever the toolbar is actually
	   stuck. Keep in step with .site-header.is-compact in the theme's style.css. */
	--tt-chrome: 105px;
	--tt-toolbar-h: 70px;

	--tt-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tt-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--tt-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	--tt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	font-family: var(--tt-sans);
	font-weight: 500;
	color: var(--tt-ink);
	font-size: 15px;
	line-height: 1.6;
}

.tt-order *,
.tt-order *::before,
.tt-order *::after {
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 44px;
	padding: .6em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--tt-pill);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tt-btn--primary {
	background: var(--tt-ink);
	color: #fff;
}

.tt-btn--primary:hover,
.tt-btn--primary:focus-visible {
	background: #0d3d51;
	color: #fff;
}

.tt-btn--ghost {
	background: transparent;
	border-color: var(--tt-control);
	color: var(--tt-ink);
}

.tt-btn--ghost:hover {
	border-color: var(--tt-ink-40);
}

.tt-btn--lg {
	min-height: 52px;
	padding: .7em 2.2em;
	font-size: 16px;
}

.tt-order :focus-visible {
	outline: 2px solid var(--tt-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- intro */

.tt-intro {
	max-width: 68ch;
	margin: 0 0 28px;
}

.tt-intro__text {
	margin: 0 0 20px;
	font-size: 17px;
	color: var(--tt-sub);
}

.tt-alert {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--tt-radius);
	border: 1px solid var(--tt-line);
	background: var(--tt-bg-2);
}

.tt-alert--warn {
	border-color: #f0cdc7;
	background: var(--tt-accent-wash);
	color: var(--tt-accent-dark);
}

.tt-access {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em;
	margin: 0;
	padding: 12px 18px;
	border-radius: var(--tt-radius);
	background: var(--tt-green-wash);
	border: 1px solid #cfe6dc;
}

.tt-access__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tt-green);
	flex: none;
	align-self: center;
}

.tt-access__note {
	width: 100%;
	color: var(--tt-sub);
	font-size: 13px;
}

/* ------------------------------------------------------------ locked state */

.tt-locked {
	padding: 24px;
	border: 1px solid var(--tt-line);
	border-left: 3px solid var(--tt-accent);
	border-radius: var(--tt-radius);
	background: var(--tt-bg-2);
}

.tt-locked__title {
	margin: 0 0 8px;
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
}

.tt-locked__body {
	margin: 0 0 18px;
	color: var(--tt-sub);
}

.tt-locked__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.tt-locked__reassure {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--tt-ink-60);
}

.tt-haskey {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--tt-line);
}

.tt-haskey label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

.tt-haskey__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tt-haskey input {
	flex: 1 1 260px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--tt-control);
	border-radius: var(--tt-pill);
	background: #fff;
	font: inherit;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tt-haskey__help {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--tt-ink-60);
}

/* ----------------------------------------------------------------- toolbar */

.tt-toolbar {
	position: sticky;
	top: var(--tt-chrome);
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 0;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--tt-line);
}

.tt-toolbar__search {
	position: relative;
	flex: 1 1 320px;
}

.tt-toolbar__search input {
	width: 100%;
	min-height: 46px;
	padding: 0 44px 0 20px;
	border: 1px solid var(--tt-control);
	border-radius: var(--tt-pill);
	background: var(--tt-bg-2);
	font: inherit;
	color: var(--tt-ink);
}

.tt-toolbar__search input::placeholder {
	color: var(--tt-ink-60);
}

.tt-search__clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tt-sub);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.tt-search__clear:hover {
	background: var(--tt-field);
}

.tt-toolbar__jump select {
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--tt-control);
	border-radius: var(--tt-pill);
	background: #fff;
	font: inherit;
	color: var(--tt-ink);
}

.tt-toolbar__only {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

.tt-toolbar__count {
	margin: 0;
	font-size: 13px;
	color: var(--tt-ink-60);
	font-variant-numeric: tabular-nums;
}

.tt-pricebanner {
	margin: 14px 0 0;
	padding: 10px 16px;
	border-radius: var(--tt-radius);
	background: var(--tt-accent-wash);
	color: var(--tt-accent-dark);
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------- catalogue */

.tt-order__lists {
	margin-top: 8px;
	padding-bottom: 96px;
}

.tt-cat {
	content-visibility: auto;
	margin: 36px 0 0;
	scroll-margin-top: calc(var(--tt-chrome) + var(--tt-toolbar-h) + 8px);
}

.tt-cat:focus {
	outline: none;
}

.tt-cat.is-empty {
	display: none;
}

.tt-cat__title {
	display: flex;
	align-items: baseline;
	gap: .6em;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--tt-ink);
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
}

.tt-cat__names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tt-cat__cn {
	font-family: var(--tt-cjk);
	font-size: 17px;
	line-height: 1.3;
	color: var(--tt-ink-60);
}

.tt-cat__count {
	font-family: var(--tt-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--tt-ink-60);
	font-variant-numeric: tabular-nums;
}

.tt-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tt-table thead th {
	position: sticky;
	top: calc(var(--tt-chrome) + var(--tt-toolbar-h));
	z-index: 10;
	padding: 8px 10px;
	background: var(--tt-bg-2);
	border-bottom: 1px solid var(--tt-line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tt-sub);
	text-align: left;
}

.tt-table thead .tt-c-price,
.tt-table thead .tt-c-qty {
	text-align: right;
}

.tt-table .tt-c-sku {
	width: 92px;
}

.tt-table .tt-c-unit {
	width: 150px;
}

.tt-table .tt-c-expiry {
	width: 132px;
}

.tt-table .tt-c-price {
	width: 110px;
	text-align: right;
}

.tt-table .tt-c-qty {
	width: 104px;
	text-align: right;
}

.tt-row {
	/* Keeps a row that receives focus clear of the sticky headers above and the
	   fixed totals bar below when the browser scrolls it into view. */
	scroll-margin-block: calc(var(--tt-chrome) + var(--tt-toolbar-h) + 44px) 90px;
}

.tt-row > td,
.tt-row > th {
	padding: 9px 10px;
	border-bottom: 1px solid var(--tt-line-soft);
	vertical-align: middle;
	font-weight: 500;
	text-align: left;
}

/* Set by the script over the rows actually on screen, so a filtered list
   cannot end up with two shaded rows next to each other. */
.tt-row.is-alt > td,
.tt-row.is-alt > th {
	background: var(--tt-stripe);
}

.tt-row:hover > td,
.tt-row:hover > th,
.tt-row:focus-within > td,
.tt-row:focus-within > th {
	background: var(--tt-row-hover);
}

.tt-row.is-filled > td,
.tt-row.is-filled > th {
	background: var(--tt-green-wash);
}

.tt-row.is-hidden {
	display: none;
}

.tt-c-sku code {
	font-family: var(--tt-mono);
	font-size: 12px;
	color: var(--tt-sub);
}

.tt-c-name {
	position: relative;
	padding-right: 40px !important;
}

.tt-namewrap {
	display: block;
}

/* Three names, stacked: the English one to recognise, the Chinese to verify,
   the pinyin to order by. */
.tt-name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.tt-name mark {
	background: #fdf0ba;
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

.tt-cn {
	display: block;
	font-family: var(--tt-cjk);
	font-size: 16px;
	line-height: 1.35;
	color: var(--tt-ink);
}

.tt-en {
	display: block;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--tt-ink-60);
}

.tt-en mark,
.tt-cn mark {
	background: #fdf0ba;
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

.tt-variant {
	margin-left: .5em;
	padding: 1px 8px;
	border-radius: var(--tt-pill);
	background: var(--tt-field);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.tt-sub {
	display: block;
	font-size: 12.5px;
	color: var(--tt-ink-60);
}

.tt-sub--latin {
	font-style: italic;
}

.tt-flag {
	display: inline-block;
	margin-left: .5em;
	padding: 1px 8px;
	border-radius: var(--tt-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tt-flag--backorder {
	background: var(--tt-accent-wash);
	color: var(--tt-accent-dark);
}

.tt-inline-meta {
	display: none;
	font-family: var(--tt-mono);
	font-size: 11.5px;
	color: var(--tt-ink-60);
}

.tt-photo {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--tt-control);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s ease;
}

.tt-photo span {
	display: block;
	width: 10px;
	height: 8px;
	margin: 0 auto;
	border: 1.5px solid var(--tt-sub);
	border-radius: 2px;
	position: relative;
}

.tt-photo span::after {
	content: "";
	position: absolute;
	inset: auto 1px 1px 1px;
	height: 3px;
	background: var(--tt-sub);
	clip-path: polygon(0 100%, 35% 30%, 60% 65%, 80% 45%, 100% 100%);
}

.tt-row:hover .tt-photo,
.tt-row:focus-within .tt-photo,
.tt-photo:focus-visible {
	opacity: 1;
}

.tt-c-unit {
	font-size: 13px;
	color: var(--tt-sub);
}

.tt-c-expiry {
	font-size: 13px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tt-exp--ok {
	color: var(--tt-sub);
}

.tt-exp--none .tt-exp__none {
	color: var(--tt-ink-40);
}

/* The word carries the meaning; the colour only reinforces it. */
.tt-exp__tag {
	display: inline-block;
	margin-left: .4em;
	padding: 1px 7px;
	border-radius: var(--tt-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.tt-exp--soon time {
	color: #7a5200;
	font-weight: 600;
}

.tt-exp--soon .tt-exp__tag {
	background: #fff4e0;
	color: #7a5200;
}

.tt-exp--expired time {
	color: var(--tt-accent-dark);
	font-weight: 600;
}

.tt-exp--expired .tt-exp__tag {
	background: var(--tt-accent-wash);
	color: var(--tt-accent-dark);
}

.tt-exp__batch {
	display: block;
	font-size: 11.5px;
	font-family: var(--tt-mono);
	color: var(--tt-ink-60);
}

.tt-expiry-note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--tt-ink-60);
	max-width: 74ch;
}

.tt-c-price {
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	white-space: nowrap;
}

.tt-onrequest {
	font-weight: 500;
	font-size: 12.5px;
	font-style: italic;
	color: var(--tt-ink-60);
}

.tt-qty {
	width: 84px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--tt-control);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--tt-ink);
}

.tt-qty:hover {
	border-color: var(--tt-ink-40);
}

.tt-qty.has-value {
	border-color: var(--tt-green);
	font-weight: 700;
}

/* ------------------------------------------------------------ image preview */

.tt-preview {
	position: fixed;
	z-index: 60;
	width: 264px;
	padding: 10px;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(7, 40, 53, .16);
	pointer-events: none;
}

.tt-preview__frame {
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 6px;
	background: var(--tt-bg-2);
	overflow: hidden;
}

.tt-preview__frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tt-preview__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 20px;
	text-align: center;
	font-size: 13px;
	color: var(--tt-ink-60);
}

.tt-preview__caption {
	margin: 8px 2px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

/* --------------------------------------------------------------- totals bar */

.tt-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--tt-ink);
	color: #fff;
}

.tt-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 20px;
}

.tt-bar p {
	margin: 0;
}

.tt-bar__counts {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.tt-bar__total {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.tt-bar__label {
	color: #b9c6cb;
	font-size: 13px;
}

.tt-bar__total strong {
	font-size: 19px;
}

.tt-bar__hidden {
	flex: 1 1 100%;
	order: 3;
	font-size: 13px;
	color: #ffd9d2;
}

.tt-bar__go {
	margin-left: auto;
	background: #fff;
	color: var(--tt-ink);
}

.tt-bar__go:hover,
.tt-bar__go:focus-visible {
	background: #e9eef0;
	color: var(--tt-ink);
}

/* --------------------------------------------------------------------- form */

.tt-form {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--tt-ink);
	scroll-margin-top: 90px;
}

.tt-form__title {
	margin: 0 0 18px;
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;
}

.tt-form__subtitle {
	margin: 32px 0 14px;
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 21px;
}

.tt-summary {
	margin-bottom: 8px;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-radius);
	overflow: hidden;
}

.tt-summary__empty {
	margin: 0;
	padding: 20px;
	color: var(--tt-ink-60);
}

.tt-summary table {
	width: 100%;
	border-collapse: collapse;
}

.tt-summary th,
.tt-summary td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--tt-line-soft);
	text-align: left;
	font-weight: 500;
}

.tt-summary thead th {
	background: var(--tt-bg-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tt-sub);
}

.tt-summary .tt-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tt-summary tfoot th,
.tt-summary tfoot td {
	border-bottom: 0;
	border-top: 2px solid var(--tt-ink);
	font-weight: 700;
	font-size: 16px;
}

.tt-summary__remove {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--tt-control);
	border-radius: 50%;
	background: #fff;
	color: var(--tt-sub);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.tt-summary__remove:hover {
	border-color: var(--tt-accent);
	color: var(--tt-accent);
}

.tt-summary__note {
	margin: 0;
	padding: 10px 14px;
	background: var(--tt-bg-2);
	font-size: 13px;
	color: var(--tt-sub);
}

.tt-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.tt-field {
	margin: 0;
	grid-column: span 6;
}

.tt-field--half {
	grid-column: span 3;
}

.tt-field--third {
	grid-column: span 2;
}

.tt-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
}

.tt-field input,
.tt-field textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid var(--tt-control);
	border-radius: var(--tt-radius);
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--tt-ink);
}

.tt-field textarea {
	min-height: 90px;
	resize: vertical;
}

.tt-field input.is-invalid,
.tt-field textarea.is-invalid,
.tt-terms input.is-invalid {
	/* Colour alone would not carry the message, so the border also thickens. */
	border: 2px solid var(--tt-accent);
	background: var(--tt-accent-wash);
}

.tt-field input.is-invalid + .tt-help::before,
.tt-field .is-invalid ~ .tt-help::before {
	content: "\26A0 ";
	color: var(--tt-accent-dark);
}

.tt-req {
	color: var(--tt-accent);
}

.tt-help {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--tt-ink-60);
}

.tt-terms {
	margin: 22px 0 0;
	font-size: 14px;
}

.tt-terms label {
	display: flex;
	gap: .6em;
	align-items: flex-start;
	cursor: pointer;
}

.tt-terms input {
	margin-top: .25em;
	width: 18px;
	height: 18px;
	flex: none;
}

.tt-form__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--tt-ink-60);
	max-width: 62ch;
}

.tt-form__error {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: var(--tt-radius);
	background: var(--tt-accent-wash);
	border: 1px solid #f0cdc7;
	color: var(--tt-accent-dark);
	font-weight: 600;
}

.tt-form__submit {
	margin: 22px 0 0;
}

.tt-btn[aria-busy="true"] {
	opacity: .65;
	pointer-events: none;
}

/* The honeypot must be reachable by bots and invisible to people. */
.tt-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tt-done {
	padding: 28px;
	border: 1px solid #cfe6dc;
	border-radius: var(--tt-radius);
	background: var(--tt-green-wash);
}

.tt-done h3 {
	margin: 0 0 8px;
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 24px;
}

.tt-draft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: var(--tt-radius);
	background: var(--tt-bg-2);
	border: 1px solid var(--tt-line);
	font-size: 14px;
}

/* -------------------------------------------------------------- narrow view */

@media (max-width: 782px) {
	/* The theme's header shrinks at this width, so the offset follows it. */
	.tt-order {
		--tt-chrome: 89px;
	}
}

@media (max-width: 860px) {
	.tt-table .tt-c-unit,
	.tt-row > .tt-c-unit,
	.tt-table .tt-c-expiry,
	.tt-row > .tt-c-expiry {
		display: none;
	}

	.tt-inline-meta {
		display: block;
	}
}

@media (max-width: 640px) {
	.tt-table .tt-c-sku,
	.tt-row > .tt-c-sku {
		display: none;
	}

	.tt-table .tt-c-price {
		width: 84px;
	}

	.tt-table .tt-c-qty {
		width: 84px;
	}

	.tt-qty {
		width: 68px;
	}

	.tt-c-name {
		padding-right: 34px !important;
	}

	.tt-toolbar {
		gap: 8px;
	}

	.tt-toolbar__jump,
	.tt-toolbar__only {
		flex: 1 1 100%;
	}

	.tt-toolbar__jump select {
		width: 100%;
	}

	/* On a phone the toolbar wraps to three rows. Keeping it stuck would eat a
	   third of the viewport, so only the column headers stay pinned. */
	.tt-toolbar {
		position: static;
	}

	.tt-table thead th {
		top: var(--tt-chrome);
	}

	.tt-cat {
		scroll-margin-top: calc(var(--tt-chrome) + 48px);
	}

	.tt-row {
		scroll-margin-block: calc(var(--tt-chrome) + 48px) 84px;
	}

	.tt-field--half,
	.tt-field--third {
		grid-column: span 6;
	}

	.tt-preview {
		left: 50% !important;
		top: auto !important;
		bottom: 78px;
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-order * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.tt-toolbar,
	.tt-bar,
	.tt-preview,
	.tt-photo,
	.tt-locked__actions {
		display: none !important;
	}

	.tt-cat {
		content-visibility: visible;
		break-inside: auto;
	}
}