/* ==========================================================================
   My Account
   Comp: 280px sidebar with a hairline right edge, main column at 48/56/64.
   ========================================================================== */

.woocommerce-account .lmt-account {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a grid item's min-width is auto, so the stacked
	   nav would size to the full width of its horizontal link strip and push
	   the whole page sideways. */
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--lmt-max);
	margin-inline: auto;
}

.lmt-account__nav,
.lmt-account__main { min-width: 0; }

@media (min-width: 900px) {
	.woocommerce-account .lmt-account {
		grid-template-columns: 280px minmax(0, 1fr);
		/* Short screens — an empty Orders list — used to end a couple of
		   hundred pixels down and hand the rest to the footer, which left the
		   sticky menu nothing to travel in. */
		min-height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
	}
}

/* ---- Sidebar ---- */

.lmt-account__nav {
	padding-block: 48px;
	border-bottom: 1px solid var(--lmt-rule-soft);
}

.lmt-account__nav-inner { display: flex; flex-direction: column; }

@media (min-width: 900px) {
	.lmt-account__nav { border-bottom: 0; border-right: 1px solid var(--lmt-rule-soft); }

	/*
	 * The menu follows the reader down. An order history or a long
	 * conversation runs well past the sidebar, and having to scroll back to
	 * the top to reach Messages is the whole reason a sidebar is worth having.
	 *
	 * Capped to the viewport and allowed to scroll itself: on a short window a
	 * sticky block taller than the screen simply loses its bottom, which here
	 * would be the phone number.
	 */
	.lmt-account__nav-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 24px);
		/* Only bites on a window too short to hold the menu; a wider margin
		   here clipped the phone number into a scrollbar on an ordinary
		   laptop. */
		max-height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar) - 40px);
		overflow-y: auto;
	}
}

.lmt-account__who { padding: 0 40px 32px; }

.lmt-account__label {
	font-size: 12px; font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow); text-transform: uppercase;
	color: #888; margin-bottom: 8px;
}
.lmt-account__name {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 28px; line-height: 1; text-transform: uppercase;
}
.lmt-account__since { font-size: 13px; color: #777; margin-top: 6px; }

.lmt-account__links { list-style: none; margin: 0; padding: 0; }

.lmt-account__links a {
	display: flex; justify-content: space-between; align-items: center; gap: var(--lmt-space-3);
	padding: 14px 40px;
	font-size: 15px; font-weight: 600;
	text-decoration: none;
	color: var(--lmt-ink);
	border-left: 3px solid transparent;
	transition: background-color var(--lmt-transition), border-color var(--lmt-transition);
}
.lmt-account__links a:hover { background: var(--lmt-grey-100); }

.lmt-account__links .is-active a {
	background: var(--lmt-grey-100);
	border-left-color: var(--lmt-red);
}

/* Log out reads as secondary, per the comp. */
.lmt-account__links .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--lmt-grey-500); }

.lmt-account__badge {
	font-size: 11px; font-weight: 700;
	background: var(--lmt-red); color: var(--lmt-white);
	padding: 3px 7px;
}

/* Under the screen it belongs to, not at the foot of the menu — see
   my-account.php for why it moved. */
.lmt-account__help {
	margin-top: var(--lmt-space-7);
	padding-top: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule-soft);
	font-size: 13px; color: #777; line-height: 1.6;
}
.lmt-account__help p + p { margin-top: 4px; }
.lmt-account__help a { color: var(--lmt-ink); font-weight: 700; text-decoration: none; }

/* ---- Main column ---- */

.lmt-account__main { padding: 48px var(--lmt-gutter) 64px; }

@media (min-width: 900px) {
	.lmt-account__main { padding: 48px 56px 64px; }
}

.lmt-account__head {
	display: flex; flex-wrap: wrap; gap: var(--lmt-space-4);
	justify-content: space-between; align-items: flex-end;
	margin-bottom: 36px;
}
.lmt-account__title {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1; text-transform: uppercase;
	margin-top: 10px;
}
.lmt-account__head-actions {
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

/* Once it wraps under the heading it is no longer the right-hand end of a row,
   and a date right-aligned to the button's edge reads as a stray indent. */
@media (max-width: 700px) {
	.lmt-account__head-actions { align-items: flex-start; }
}
.lmt-account__date { font-size: 14px; color: #777; }
.lmt-account__lede { font-size: 16px; color: var(--lmt-ink-muted); max-width: var(--lmt-measure); margin-bottom: var(--lmt-space-6); }

.lmt-account__h2 {
	font-family: var(--lmt-font-display); font-weight: 400;
	font-size: 22px; line-height: 1; text-transform: uppercase;
}
.lmt-account__section-head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--lmt-space-3); margin-bottom: var(--lmt-space-4);
}
.lmt-account__block { margin-bottom: var(--lmt-space-7); }
.lmt-account__block .lmt-account__h2 { margin-bottom: var(--lmt-space-4); }
.lmt-account__empty {
	padding: var(--lmt-space-5);
	background: var(--lmt-grey-100);
	font-size: 15px; color: var(--lmt-ink-muted);
}

/* ---- Next appointment ---- */

.lmt-next {
	background: var(--lmt-black); color: var(--lmt-white);
	padding: 36px 40px;
	display: grid; gap: 40px; align-items: center;
	margin-bottom: 20px;
}
@media (min-width: 800px) { .lmt-next { grid-template-columns: minmax(0, 1fr) auto; } }

.lmt-next__body { min-width: 0; }

.lmt-next__when {
	font-family: var(--lmt-font-display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	line-height: 1; text-transform: uppercase;
	margin-bottom: 10px;
}
.lmt-next__meta { font-size: 16px; color: #bbb; }
.lmt-next__flags { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; font-size: 14px; }

.lmt-flag { display: flex; align-items: center; gap: 8px; }
.lmt-flag::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--lmt-ok); flex: none;
}
.lmt-flag.is-pending::before { background: var(--lmt-red); }

.lmt-next__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.lmt-next__soon { font-size: 13px; color: #999; max-width: 14rem; }

/* ---- Alert ---- */

.lmt-account__main .lmt-alert { margin-bottom: 20px; }

/* ---- Dashboard split ---- */

.lmt-account__split { display: grid; gap: var(--lmt-space-6); margin-bottom: var(--lmt-space-6); }
@media (min-width: 900px) { .lmt-account__split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; } }

/* One thing across the width, where the split used to put two side by side. */
.lmt-account__single { margin-bottom: var(--lmt-space-6); }

/* ---- Appointment rows ---- */

.lmt-appts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lmt-rule); }

.lmt-appt {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--lmt-space-4);
	align-items: center;
	padding: 18px 20px;
	border-bottom: 1px solid var(--lmt-rule-soft);
}
.lmt-appt:last-child { border-bottom: 0; }

.lmt-appt__date {
	display: flex; flex-direction: column; align-items: center;
	border-right: 1px solid var(--lmt-rule-soft);
	padding-right: var(--lmt-space-4);
}
.lmt-appt__mon {
	font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--lmt-ink-muted);
}
.lmt-appt__day { font-family: var(--lmt-font-display); font-size: 26px; line-height: 1; }

.lmt-appt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lmt-appt__type { font-weight: 700; font-size: 15px; }
.lmt-appt__meta { font-size: 13px; color: var(--lmt-ink-muted); }

.lmt-appts--past .lmt-appt { opacity: .65; }

/* ---- Latest order ---- */

.lmt-order-card {
	border: 1px solid var(--lmt-rule);
	padding: var(--lmt-space-5);
	display: flex; flex-direction: column; gap: var(--lmt-space-3);
}
.lmt-order-card__top {
	display: flex; justify-content: space-between; gap: var(--lmt-space-3);
	font-size: 13px; color: var(--lmt-ink-muted);
}
.lmt-order-card__items { font-weight: 700; font-size: 16px; }
.lmt-order-card__row { display: flex; justify-content: space-between; gap: var(--lmt-space-3); font-size: 14px; }
.lmt-order-card__note {
	background: var(--lmt-grey-100);
	padding: var(--lmt-space-4);
	font-size: 13px; line-height: 1.5; color: var(--lmt-ink-muted);
}

/* ---- Tiles ---- */

.lmt-account__tiles {
	display: grid; gap: var(--lmt-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.lmt-tile {
	display: flex; flex-direction: column; gap: 8px;
	border: 1px solid var(--lmt-rule);
	padding: var(--lmt-space-5);
	text-decoration: none; color: var(--lmt-ink);
	transition: border-color var(--lmt-transition);
}
.lmt-tile:hover { border-color: var(--lmt-black); }
/* Above the title, so the three titles still line up across the row: an icon
   on one tile only would have pushed that one's title down. */
.lmt-tile__icon {
	flex: none;
	color: var(--lmt-red);
	margin-bottom: 2px;
}

.lmt-tile__title { font-weight: 700; font-size: 16px; }
.lmt-tile__text { font-size: 14px; color: var(--lmt-ink-muted); line-height: 1.5; }

/* ---- Lab results ---- */

.lmt-labs { border: 1px solid var(--lmt-rule); margin-bottom: var(--lmt-space-6); }
.lmt-labs__head {
	padding: var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule-soft);
}
.lmt-labs__drawn { font-size: 13px; color: var(--lmt-ink-muted); margin-top: 4px; }

.lmt-labs__note {
	padding: var(--lmt-space-5);
	background: var(--lmt-grey-100);
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 15px; line-height: 1.55;
}
.lmt-labs__note-title {
	font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--lmt-ink-muted); margin-bottom: 6px;
}

.lmt-labs__table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.lmt-labs__table th,
.lmt-labs__table td {
	text-align: left; padding: 14px 20px;
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 14px; vertical-align: top;
}
.lmt-labs__table thead th {
	font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--lmt-ink-muted);
	background: var(--lmt-grey-100);
}
.lmt-labs__table tbody tr:last-child th,
.lmt-labs__table tbody tr:last-child td { border-bottom: 0; }

.lmt-labs__marker { display: block; font-weight: 600; }
.lmt-labs__why { display: block; font-size: 12px; font-weight: 400; color: var(--lmt-ink-muted); margin-top: 2px; }
.lmt-labs__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.lmt-labs__value.is-out { color: var(--lmt-red); }
.lmt-labs__flag {
	display: block; margin-top: 2px;
	font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--lmt-ok);
}
.lmt-labs__flag.is-out { color: var(--lmt-red); }
.lmt-labs__range { color: var(--lmt-ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Messages ---- */

.lmt-thread { border: 1px solid var(--lmt-rule); margin-bottom: var(--lmt-space-5); }
.lmt-thread__head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: var(--lmt-space-3);
	padding: var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule-soft);
}
.lmt-thread__subject { font-size: 17px; font-weight: 700; }
.lmt-thread__with { font-size: 13px; color: var(--lmt-ink-muted); margin-top: 4px; }

.lmt-thread__messages { list-style: none; margin: 0; padding: var(--lmt-space-5); display: flex; flex-direction: column; gap: var(--lmt-space-4); }
.lmt-msg { padding: var(--lmt-space-4); background: var(--lmt-grey-100); }
.lmt-msg--mine { background: var(--lmt-white); border: 1px solid var(--lmt-rule); }
.lmt-msg__meta {
	display: flex; flex-wrap: wrap; gap: var(--lmt-space-3);
	font-size: 13px; color: var(--lmt-ink-muted); margin-bottom: 6px;
}
.lmt-msg__meta strong { color: var(--lmt-ink); }
.lmt-msg__text { font-size: 15px; line-height: 1.55; }

/* WooCommerce's own tables inside the account area. */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--lmt-rule-soft); text-align: left; }

.lmt-next__ics {
	font-size: 13px;
	color: #999;
	text-align: center;
	text-decoration: none;
}
.lmt-next__ics:hover { color: var(--lmt-white); }
/* WooCommerce's own layout stylesheet floats the account navigation at 30%
   and the content at 68%. Float is ignored on a grid item but width is not,
   so without this the main column renders two-thirds wide inside its track
   and the right of the page sits empty. Loaded after Woo's, same specificity. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ---- Below the two-column breakpoint ----
   Stacked, the sidebar pushed the dashboard a full screen down. The links
   become a horizontal strip instead, so the patient lands on their content. */

@media (max-width: 899px) {
	.lmt-account__nav { padding-block: 28px 0; }

	.lmt-account__who { padding: 0 var(--lmt-gutter) 20px; }
	.lmt-account__name { font-size: 24px; }

	.lmt-account__links {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-inline: var(--lmt-gutter);
		border-bottom: 1px solid var(--lmt-rule-soft);
	}
	.lmt-account__links::-webkit-scrollbar { display: none; }

	.lmt-account__links li { flex: none; }

	.lmt-account__links a {
		gap: 6px;
		padding: 10px 14px;
		white-space: nowrap;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}
	.lmt-account__links .is-active a {
		background: none;
		border-bottom-color: var(--lmt-red);
	}

	.lmt-account__help {
		margin-top: 0;
		padding: 20px var(--lmt-gutter) 0;
	}

	.lmt-account__main { padding-top: 32px; }
}

/* ---- Message compose ---- */

.lmt-thread__compose {
	padding: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule-soft);
	background: var(--lmt-grey-100);
}

.lmt-reply { display: flex; flex-direction: column; gap: var(--lmt-space-3); align-items: flex-start; }
.lmt-reply .lmt-input { width: 100%; }
.lmt-reply textarea { resize: vertical; }

.lmt-thread--new .lmt-thread__compose { background: var(--lmt-white); }

.lmt-alert--ok { border-color: var(--lmt-ok); }
.lmt-alert--ok .lmt-alert__mark { background: var(--lmt-ok); }

/* ==========================================================================
   Signed-out account screen — sign in / create account.

   Measured from the comp at 1440x900: a 720/720 split, the aside padded 56
   and the panel 64/120, which puts the form in a 480 column. Every figure
   below is one of those measurements.
   ========================================================================== */

.lmt-auth {
	display: grid;
	min-height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
	background: var(--lmt-white);
}

@media (min-width: 900px) {
	.lmt-auth { grid-template-columns: 1fr 1fr; }
}

/* ---- Left: the pitch ---- */

/*
 * The comp put a logo at the top of this panel and the pitch on the floor. The
 * logo was taken out, so the auto margin that held the pitch down was keeping
 * 500px of empty black above a block with nothing above it any more.
 */
.lmt-auth__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--lmt-space-6);
	padding: 56px;
	background: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-auth__pitch { display: flex; flex-direction: column; gap: 24px; }

.lmt-auth__pitch-title {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
	line-height: 0.95;
	text-transform: uppercase;
	max-width: 520px;
	text-wrap: balance;
}

.lmt-auth__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

@media (min-width: 620px) {
	.lmt-auth__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lmt-auth__features li { display: grid; grid-template-columns: 21px 1fr; align-items: start; }
.lmt-auth__tick { color: var(--lmt-red); }

.lmt-auth__stars { color: var(--lmt-red); font-size: 14px; line-height: 21px; letter-spacing: 1px; display: inline-block; }

/* ---- Right: the form ---- */

.lmt-auth__panel {
	display: flex;
	flex-direction: column;
	/*
	 * Centred, so the padding above the first thing matches the space under
	 * the last. The column is at least a screen tall — the form was pinned to
	 * the top of it and grew a wider and wider band of nothing beneath as the
	 * window got taller, which on a 1080 screen left the sign-in box sitting
	 * in the top third.
	 */
	justify-content: center;
	padding: 64px var(--lmt-gutter);
	background: var(--lmt-white);
}

@media (min-width: 1200px) {
	.lmt-auth__panel { padding: 64px 120px; }
}

.lmt-auth__panel > * { max-width: 480px; width: 100%; }

/* Tabs: a hairline across the column with a red marker under the live one. */
.lmt-auth__tabs {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 40px;
}

.lmt-auth__tab {
	padding-bottom: 16px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	color: var(--lmt-grey-500);
	text-decoration: none;
}
.lmt-auth__tab.is-active { color: var(--lmt-ink); border-bottom-color: var(--lmt-red); }
.lmt-auth__tab:hover { color: var(--lmt-ink); }

.lmt-auth__title {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
	line-height: 1;
	text-transform: uppercase;
}

.lmt-auth__lede {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--lmt-grey-700);
}

.lmt-auth__form { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }

.lmt-auth__field { display: flex; flex-direction: column; gap: 8px; margin: 0; }

.lmt-auth__field label,
.lmt-auth__field-head label {
	font-size: 13px;
	/* Explicit: on the body's line-height the label ran 21px against the comp's
	   16, and every measurement below it inherited the drift. */
	line-height: 16px;
	font-weight: 700;
	color: var(--lmt-grey-700);
}

/* The password label and its Forgot link share a line. */
.lmt-auth__field-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lmt-space-3); }

.lmt-auth__forgot { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--lmt-red); text-decoration: none; }
.lmt-auth__forgot:hover { text-decoration: underline; }

.lmt-auth .lmt-input { height: 51px; }

.lmt-auth__remember {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #444;
}
.lmt-auth__remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--lmt-black); }

.lmt-auth__submit {
	appearance: none;
	border: 0;
	height: 55px;
	margin-top: 8px;
	background: var(--lmt-black);
	color: var(--lmt-white);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--lmt-transition);
}
.lmt-auth__submit:hover { background: var(--lmt-black-raised, #1a1a1a); }

.lmt-auth__switch {
	margin-top: 32px;
	font-size: 15px;
	color: var(--lmt-grey-700);
	text-align: center;
}
.lmt-auth__switch a { color: var(--lmt-ink); font-weight: 700; text-decoration: none; }
.lmt-auth__switch a:hover { text-decoration: underline; }

/*
 * It used to be pinned to the floor with margin-top:auto. That is what opened
 * the gap: the form sat at the top, this sat at the bottom, and the emptiness
 * between them was the whole difference. It travels with the rest now.
 */
.lmt-auth__fineprint {
	margin-top: 0;
	padding-top: 48px;
	font-size: 12px;
	line-height: 18px;
	color: #888;
}
/* A phone number broken across two lines reads as two numbers. */
.lmt-auth__fineprint a { color: var(--lmt-grey-700); font-weight: 600; white-space: nowrap; }

/* WooCommerce prints its notices above the screen; keep them in the column. */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding-inline: var(--lmt-gutter);
}

/*
 * WooCommerce styles form.login and form.register as a bordered, padded,
 * rounded box with 2em margins. That inset the fields 21px and took 42px off
 * their width, so the column no longer matched the comp's 480.
 */
/* Matched on the element too: WooCommerce's own rule is .woocommerce form.login,
   which outranks a selector made only of classes. */
.lmt-auth form.woocommerce-form,
.lmt-auth form.login,
.lmt-auth form.register {
	border: 0;
	padding: 0;
	border-radius: 0;
	margin: 32px 0 0;
}

/* Sits 45px under the features, as the comp has it. */
.lmt-auth__rating { margin-top: 21px; }

/*
 * The comp's feature grid is 548 wide, not the full column: two 262 columns at
 * a 24 gap, which puts the second tick on 342. Left to fill the column the
 * pairs drifted 30px apart.
 */
/*
 * Our Figtree renders these lines about 12px wider than the comp's export, so
 * at the comp's exact 262 columns the two longest features wrapped to a second
 * line — visibly wrong in a way a couple of pixels is not. The width is taken
 * out of the gap instead, which keeps the second column starting where the comp
 * puts it while giving each line room to stay on one.
 */
@media (min-width: 620px) {
	.lmt-auth__features {
		grid-template-columns: repeat(2, minmax(0, 276px));
		column-gap: 12px;
	}
}

/* The comp's 56px inset is a half-screen measurement. On a phone the two
   halves are stacked and the aside should share the page gutter the panel
   already uses, rather than eating 112px of a 375 screen. */
@media (max-width: 899px) {
	.lmt-auth__aside { padding: 40px var(--lmt-gutter); gap: var(--lmt-space-5); }
	.lmt-auth__panel { padding: 40px var(--lmt-gutter); }
	.lmt-auth__fineprint { padding-top: 32px; }
}

/* ==========================================================================
   The conversation with the care team.

   Read as a chat: the log scrolls, the box you write in stays put underneath.
   ========================================================================== */

.lmt-chat {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	margin-top: var(--lmt-space-5);
}

.lmt-chat__log {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--lmt-space-5);
	/* Tall enough to read a conversation in, short enough that the box you
	   write in is on screen without scrolling to find it. */
	max-height: min(60vh, 34rem);
	min-height: 12rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lmt-chat__empty {
	margin: auto;
	max-width: 26rem;
	text-align: center;
	color: var(--lmt-ink-muted);
	font-size: 15px;
	line-height: 1.6;
}

.lmt-chat__day {
	align-self: center;
	margin: var(--lmt-space-2) 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-grey-500);
}

.lmt-chat__row { display: flex; }
.lmt-chat__row--mine { justify-content: flex-end; }

.lmt-chat__bubble {
	max-width: min(80%, 32rem);
	padding: 12px 16px;
	background: var(--lmt-grey-100);
	color: var(--lmt-ink);
}

/* The patient's own messages, so the two sides of the conversation are
   distinguishable without reading the names. */
.lmt-chat__row--mine .lmt-chat__bubble { background: var(--lmt-black); color: var(--lmt-white); }

.lmt-chat__who {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-red);
	margin-bottom: 6px;
}

.lmt-chat__text { font-size: 15px; line-height: 1.55; }

.lmt-chat__time {
	margin-top: 6px;
	font-size: 11px;
	color: var(--lmt-grey-500);
}
.lmt-chat__row--mine .lmt-chat__time { color: var(--lmt-grey-400); text-align: right; }

/* ---- Writing ---- */

.lmt-chat__compose {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 12px;
	border-top: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
}

.lmt-chat__input {
	flex: 1;
	min-width: 0;
	resize: none;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	color: var(--lmt-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	padding: 12px 14px;
	max-height: 9rem;
	overflow-y: auto;
}
.lmt-chat__input:focus-visible { outline: 2px solid var(--lmt-red); outline-offset: -2px; }

.lmt-chat__send {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	cursor: pointer;
	background: var(--lmt-red);
	color: var(--lmt-white);
	font-size: 20px;
	line-height: 1;
	transition: background-color var(--lmt-transition);
}
.lmt-chat__send:hover { background: var(--lmt-red-dark); }

.lmt-chat__note {
	margin-top: var(--lmt-space-3);
	font-size: 13px;
	line-height: 1.6;
	color: var(--lmt-ink-muted);
}
.lmt-chat__note a { color: var(--lmt-ink); font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   The screens WooCommerce renders itself — account details, addresses, saved
   payment methods, orders.

   Ours are built from the site's own components. These arrive as WooCommerce's
   default markup, so they are mapped onto the same fields, buttons and rules
   rather than left looking like a different website.
   ========================================================================== */

/*
 * The address form is a bare "<form method="post" novalidate>" — the
 * woocommerce-address-fields class is on a div inside it, and the fields
 * themselves are a further div down. Selectors written against the form
 * element matched nothing, which left that one screen as browser defaults.
 */
.lmt-account form.woocommerce-EditAccountForm,
.lmt-account .woocommerce-address-fields,
.lmt-account .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-4);
	max-width: 42rem;
	margin-top: var(--lmt-space-5);
}

/* Which address you are editing, above its fields. */
.lmt-account .woocommerce-MyAccount-content form > h2 {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: var(--lmt-space-5) 0 0;
}

/* Woo lays its rows out with floats and a clearfix; the gap above does the job. */
.lmt-account .woocommerce-form-row,
.lmt-account .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

/*
 * The row is the grid cell now, so it fills it. Matched through the form
 * element because Woo's own ".woocommerce form .form-row-first { width: 47% }"
 * otherwise wins on specificity and leaves the name fields at 47% of an
 * already-halved column — two stubs beside a full-width email.
 */
.lmt-account form.woocommerce-EditAccountForm .form-row,
.lmt-account .woocommerce-address-fields .form-row {
	width: 100%;
	float: none;
}

/*
 * Woo pairs first and last name with float classes. Widths alone leave them
 * stacked inside a flex column, so the form becomes a two-column grid and the
 * pair takes a column each; everything else spans both.
 */
@media (min-width: 640px) {
	.lmt-account form.woocommerce-EditAccountForm,
	.lmt-account .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--lmt-space-4);
		row-gap: var(--lmt-space-4);
		align-items: start;
	}

	.lmt-account form.woocommerce-EditAccountForm > *,
	.lmt-account .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }

	.lmt-account form.woocommerce-EditAccountForm > p.form-row-first,
	.lmt-account .woocommerce-address-fields__field-wrapper > p.form-row-first { grid-column: 1; }

	.lmt-account form.woocommerce-EditAccountForm > p.form-row-last,
	.lmt-account .woocommerce-address-fields__field-wrapper > p.form-row-last { grid-column: 2; }
}

/* Below the grid breakpoint the wrapper still has to space its own rows. */
@media (max-width: 639px) {
	.lmt-account .woocommerce-address-fields__field-wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--lmt-space-4);
	}
}

.lmt-account .woocommerce-form-row label,
.lmt-account .form-row label,
.lmt-account .woocommerce-address-fields label {
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	color: var(--lmt-grey-700);
}

.lmt-account .required { color: var(--lmt-red); text-decoration: none; }

/* Matched at least as tightly as ".woocommerce form .form-row .input-text",
   which otherwise sets the padding and leaves the field 37px tall. */
.lmt-account form .form-row .input-text,
.lmt-account form .form-row select,
.lmt-account input[type="text"],
.lmt-account input[type="email"],
.lmt-account input[type="tel"],
.lmt-account input[type="password"],
.lmt-account select,
.lmt-account .select2-selection {
	width: 100%;
	height: 51px;
	padding: 0 14px;
	border: 1px solid var(--lmt-rule);
	border-radius: 0;
	background: var(--lmt-white);
	color: var(--lmt-ink);
	font: inherit;
	font-size: 16px;
}

.lmt-account input:focus-visible,
.lmt-account select:focus-visible { outline: 2px solid var(--lmt-red); outline-offset: -2px; }

/* Woo's password toggle sits inside the field. */
.lmt-account .woocommerce-password-hint,
.lmt-account span.description,
.lmt-account em {
	font-size: 13px;
	line-height: 1.5;
	font-style: normal;
	color: var(--lmt-ink-muted);
}

/* The browser's own fieldset border and legend are the loudest thing on the
   page; this is a section of a form, not a box. */
.lmt-account fieldset {
	border: 0;
	border-top: 1px solid var(--lmt-rule);
	margin: var(--lmt-space-4) 0 0;
	padding: var(--lmt-space-5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-4);
}

.lmt-account fieldset legend {
	padding: 0;
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--lmt-ink);
}

.lmt-account button[type="submit"],
.lmt-account .woocommerce-Button,
.lmt-account .button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 51px;
	padding: 14px 28px;
	border: 1px solid var(--lmt-black);
	border-radius: 0;
	background: var(--lmt-black);
	color: var(--lmt-white);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--lmt-transition);
}
.lmt-account button[type="submit"]:hover,
.lmt-account .woocommerce-Button:hover,
.lmt-account .button:hover { background: var(--lmt-black-raised, #1a1a1a); }

/* Addresses: the two cards Woo prints side by side. */
.lmt-account .woocommerce-Addresses {
	display: grid;
	gap: var(--lmt-space-4);
	margin-top: var(--lmt-space-5);
	width: 100%;
	max-width: none;
}
@media (min-width: 780px) {
	.lmt-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; }

	/*
	 * Placed rather than auto-flowed. Woo floats these two — one left, one
	 * right — and against those floats auto-placement dropped billing into the
	 * second column and pushed shipping onto a second row, so the pair read as
	 * a staircase. Named columns put them back beside each other.
	 */
	.lmt-account .woocommerce-Addresses > .col-1 { grid-column: 1; grid-row: 1; }
	.lmt-account .woocommerce-Addresses > .col-2 { grid-column: 2; grid-row: 1; }
}

/*
 * Woo lays this pair out as floated halves — ".col2-set .col-1 { width: 48% }".
 * Inside the grid the float is ignored but the width is not, so each card sat
 * at 48% of its own track: two narrow slips of card with the title wrapping a
 * word per line. The track is the column; the card fills it.
 */
.lmt-account .woocommerce-Addresses > .col-1,
.lmt-account .woocommerce-Addresses > .col-2,
.lmt-account .woocommerce-Address {
	width: 100%;
	float: none;
}

.lmt-account .woocommerce-Address {
	border: 1px solid var(--lmt-rule);
	padding: var(--lmt-space-5);
	margin: 0;
	max-width: none;
	gap: var(--lmt-space-3);
}

.lmt-account .woocommerce-Address-title h2,
.lmt-account .woocommerce-Address-title h3 {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
}

/* The action sits at the foot of the card, so a pair of cards with different
   amounts of address in them still line their links up. */
.lmt-account .woocommerce-Address .edit {
	align-self: flex-start;
	margin-top: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lmt-red);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.lmt-account .woocommerce-Address .edit:hover { background: none; text-decoration: underline; }
.lmt-account .woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--lmt-grey-700); }

/* Saved payment methods, and the tables Woo prints for orders. */
.lmt-account table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--lmt-space-5);
	font-size: 15px;
}
.lmt-account table th,
.lmt-account table td {
	text-align: left;
	padding: 14px 12px;
	border-bottom: 1px solid var(--lmt-rule-soft);
}
.lmt-account table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-grey-700);
}
.lmt-account table td .button { min-height: 40px; padding: 8px 16px; font-size: 13px; }

/* ==========================================================================
   Notifications — a switch per marketing channel.

   The control is a real checkbox with the box hidden and a track drawn beside
   it, so it keeps the label, the keyboard and the form post that a div would
   have had to reimplement.
   ========================================================================== */

.lmt-prefs {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 42rem;
	margin-top: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule);
}

.lmt-prefs__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lmt-space-5);
	padding: 22px 0;
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-prefs__text { min-width: 0; }

.lmt-prefs__label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.lmt-prefs__note {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lmt-ink-muted);
}

.lmt-prefs__warn {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lmt-red);
}
.lmt-prefs__warn a { color: var(--lmt-red); font-weight: 700; }

.lmt-prefs .lmt-btn { align-self: flex-start; margin-top: var(--lmt-space-5); }

.lmt-prefs__foot {
	max-width: 42rem;
	margin-top: var(--lmt-space-4);
	font-size: 13px;
	line-height: 1.6;
	color: var(--lmt-ink-muted);
}

/* ---- The switch ---- */

.lmt-switch { position: relative; flex: none; display: inline-flex; }

/* Kept in the layout rather than display:none, so it stays focusable and the
   focus ring has something to sit on. */
.lmt-switch__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.lmt-switch__track {
	display: block;
	width: 52px;
	height: 30px;
	padding: 3px;
	background: var(--lmt-grey-300);
	transition: background-color var(--lmt-transition);
}

.lmt-switch__dot {
	display: block;
	width: 24px;
	height: 24px;
	background: var(--lmt-white);
	transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lmt-switch__input:checked + .lmt-switch__track { background: var(--lmt-ok); }
.lmt-switch__input:checked + .lmt-switch__track .lmt-switch__dot { transform: translateX(22px); }

.lmt-switch__input:focus-visible + .lmt-switch__track {
	outline: 2px solid var(--lmt-red);
	outline-offset: 2px;
}

.lmt-switch__input:disabled { cursor: not-allowed; }
.lmt-switch__input:disabled + .lmt-switch__track { opacity: 0.45; }

@media (max-width: 480px) {
	.lmt-prefs__row { gap: var(--lmt-space-4); }
}

/* ---- Settings tabs ------------------------------------------------------
   Account details, Addresses, Notifications and Payment methods used to be
   four of the nine items in the sidebar. They are housekeeping — done once
   and left alone — so they sit behind Account settings, and this row is how
   you move between them.
   ------------------------------------------------------------------------ */

.lmt-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--lmt-space-5);
	margin-bottom: var(--lmt-space-6);
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-subnav__link {
	position: relative;
	padding: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lmt-ink-muted);
	text-decoration: none;
	white-space: nowrap;
}
.lmt-subnav__link:hover { color: var(--lmt-ink); }

.lmt-subnav__link.is-current { color: var(--lmt-ink); }

/* The rule sits on the tab rather than under the row, so it reads as the
   current one rather than as a second border. */
.lmt-subnav__link.is-current::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--lmt-red);
}

/* The lede belongs to the screen, not the row of tabs above it. */
.lmt-account__main .lmt-subnav + .lmt-account__lede { margin-top: 0; }

/* A message on its way out: drawn immediately, dimmed until the server has it,
   so sending never feels like nothing happened. */
.lmt-chat__row.is-pending .lmt-chat__bubble { opacity: 0.55; }

.lmt-chat__error {
	flex-basis: 100%;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--lmt-red);
}
.lmt-chat__error.is-quiet { color: var(--lmt-ink-muted); }

/* The link staff set on the GoHighLevel contact. Above the released panels,
   because it is the whole report and they are the summary. */
.lmt-labs-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lmt-space-4);
	margin-bottom: var(--lmt-space-6);
	padding: var(--lmt-space-5);
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
}
.lmt-labs-link p {
	margin-top: 4px;
	font-size: 14px;
	color: var(--lmt-ink-muted);
}
.lmt-labs-link .lmt-btn { flex: none; }

/* The reports themselves, uploaded by the care team. */
.lmt-labs-docs {
	margin-bottom: var(--lmt-space-6);
}

/* Headings are reset to margin 0 site-wide, so each one carries its own gap.
   space-4 is what .lmt-account__section-head and .lmt-account__block already
   use, so both headings on this screen sit the same distance off what follows
   them as every other heading in the account. */
.lmt-labs-docs .lmt-account__h2,
.lmt-labs-send .lmt-account__h2 {
	margin-bottom: var(--lmt-space-4);
}
.lmt-labs-docs__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lmt-labs-docs__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lmt-space-3);
	padding: var(--lmt-space-4);
	border: 1px solid var(--lmt-rule);
}
/* One border between neighbours rather than two. */
.lmt-labs-docs__item + .lmt-labs-docs__item { border-top: 0; }

.lmt-labs-docs__mark {
	flex: none;
	color: var(--lmt-ink-muted);
}
.lmt-labs-docs__name {
	/* Takes the row, so the button sits hard right however long the name is. */
	flex: 1 1 12ch;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 15px;
	font-weight: 600;
}
.lmt-labs-docs__size {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--lmt-ink-muted);
}
.lmt-labs-docs__get {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ==========================================================================
   The conversation screen, full height.

   Every other account screen is a document that scrolls. This one is a window:
   a box that scrolled inside a page that also scrolled meant two scrollbars for
   one conversation, and the box you write in wandered off as you read.

   The account row is exactly the window here rather than at least it, the log
   takes whatever height is left, and it is the only thing that scrolls.
   ========================================================================== */

/*
 * Also min-height: a window too short to hold the heading, the exchange and
 * the box you write in would clip them rather than scroll, and a page that
 * scrolls beats one that hides its send button.
 *
 * 560 is what the fixed parts actually need — heading, lede, the compose row
 * and the line under it come to about 370 — leaving a usable log. The first
 * guess at this was 620, which was above a browser window on a 1366x768
 * laptop and quietly turned the whole thing off.
 */
@media (min-width: 900px) and (min-height: 560px) {
	.lmt-messages-screen .lmt-account {
		height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
		min-height: 0;
	}

	/* min-height:0 all the way down: a flex or grid child refuses to shrink
	   below its content otherwise, and the log would push the compose box off
	   the bottom instead of scrolling. */
	.lmt-messages-screen .lmt-account__main {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
		padding-bottom: var(--lmt-space-5);
	}

	.lmt-messages-screen .lmt-chat {
		flex: 1;
		min-height: 0;
		margin-bottom: 0;
	}

	.lmt-messages-screen .lmt-chat__log {
		flex: 1;
		min-height: 0;
		/* The cap that made sense in a scrolling page is what stops it filling
		   the window here. */
		max-height: none;
	}

	/* The head and the lede keep their own height; only the log gives way. */
	.lmt-messages-screen .lmt-account__head,
	.lmt-messages-screen .lmt-account__lede,
	.lmt-messages-screen .lmt-alert,
	.lmt-messages-screen .lmt-chat__note { flex: none; }

	.lmt-messages-screen .lmt-account__lede { margin-bottom: var(--lmt-space-4); }
	.lmt-messages-screen .lmt-chat__note { margin-top: var(--lmt-space-4); }

	/*
	 * "Need help?" is the phone number and the hours, and the line under the
	 * conversation already gives both. Two of them on the one screen that has
	 * no room to spare cost the exchange 150px of height.
	 */
	.lmt-messages-screen .lmt-account__help { display: none; }

	/*
	 * Nothing below the window to scroll to. Leaving the footer there meant the
	 * page still scrolled — so the screen behaved exactly as it had, and the
	 * only visible change was a shorter conversation. This is the one screen
	 * that is an application rather than a page; the footer's links are on
	 * every other one.
	 */
	.lmt-messages-screen .lmt-footer { display: none; }
	.lmt-messages-screen #main { min-height: 0; }
	.lmt-messages-screen .lmt-app { padding-block: 0; }

	/*
	 * The heading block is the only thing competing with the exchange for the
	 * height, so it is tightened here rather than everywhere.
	 */
	.lmt-messages-screen .lmt-account__head { margin-bottom: 14px; }
	.lmt-messages-screen .lmt-account__lede { margin-bottom: 12px; }
	.lmt-messages-screen .lmt-account__main { padding-top: 28px; }
}

/* The join link on a listed appointment. A row is a date, a description and a
   status; this is the one thing in it you act on. */
.lmt-appt__join {
	grid-column: 2;
	justify-self: start;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lmt-red);
	text-decoration: none;
}
.lmt-appt__join:hover { text-decoration: underline; }

/* ==========================================================================
   The sign-in screen fits the window.

   It was exactly one window tall and then carried the site footer, so the page
   scrolled by the height of that footer — and with history.scrollRestoration on
   "auto", a reload painted the screen correctly and then jumped to wherever the
   previous visit had been scrolled to. Nothing to restore if nothing scrolls.
   ========================================================================== */

@media (min-width: 900px) and (min-height: 620px) {
	.lmt-auth-screen .lmt-footer { display: none; }

	/* Height, not min-height: min- lets it grow past the window and start the
	   page scrolling again. */
	.lmt-auth-screen .lmt-auth {
		height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
		min-height: 0;
	}

	/* A window too short for the form scrolls the column rather than clipping
	   the sign-in button off the bottom of it. */
	.lmt-auth-screen .lmt-auth__panel,
	.lmt-auth-screen .lmt-auth__aside { overflow-y: auto; }
}

/* ---- Upload labs --------------------------------------------------------
   Results are emailed to the patient and never reach the clinic, so this
   screen is a place to hand them over rather than a place to collect them.
   ------------------------------------------------------------------------ */

.lmt-labs-note {
	margin: 0 0 var(--lmt-space-5);
	padding: 12px 16px;
	border: 1px solid var(--lmt-rule);
	border-left: 3px solid var(--lmt-ink);
	font-size: 15px;
}
.lmt-labs-note--ok { border-left-color: var(--lmt-ok); }
.lmt-labs-note--no { border-left-color: var(--lmt-red); }

.lmt-labs-send {
	padding: var(--lmt-space-5);
	margin-bottom: var(--lmt-space-6);
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
}

.lmt-labs-send__lede {
	margin: 0 0 var(--lmt-space-5);
	max-width: 62ch;
	color: var(--lmt-grey-700);
	line-height: 1.6;
}

.lmt-labs-send__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lmt-space-4);
}

.lmt-labs-send__field { flex: 1 1 18rem; min-width: 0; }

.lmt-labs-send__field input[type="file"] {
	width: 100%;
	font: inherit;
	font-size: 15px;
}
.lmt-labs-send__field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 14px;
	border: 1px solid var(--lmt-black);
	border-radius: var(--lmt-radius);
	background: transparent;
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.lmt-labs-send__field input[type="file"]::file-selector-button:hover {
	background: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-labs-send__small {
	margin: var(--lmt-space-4) 0 0;
	font-size: 13px;
	color: var(--lmt-ink-muted);
}

/* Taking a file back: quieter than the download beside it. */
.lmt-labs-docs__form { flex: none; margin: 0; }

/* The account stylesheet makes every submit button a filled black one, and
   this is not that: it is the quiet way out beside a download. Matching that
   rule's reach so it does not arrive as the loudest thing in the row. */
.lmt-account button[type="submit"].lmt-labs-docs__remove {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--lmt-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.lmt-account button[type="submit"].lmt-labs-docs__remove:hover { color: var(--lmt-red); }

/* ---- Subscriptions ---- */

.lmt-subs {
	display: flex; flex-direction: column; gap: var(--lmt-space-4);
	margin-bottom: var(--lmt-space-6);
}

/* Wider than the dashboard's single order card, which sits in its own column. */
.lmt-subs__card { background: var(--lmt-white); }

/* A date staff have not worked yet. Reads as a state, not a warning. */
.lmt-subs__soon {
	margin-left: 8px;
	font-weight: 400; font-size: 13px; color: var(--lmt-ink-muted);
}

/* Cancelling: a disclosure, so the consequences are read before the button
   that acts on them exists on the page. */
.lmt-subs__stop { border-top: 1px solid var(--lmt-rule-soft); padding-top: var(--lmt-space-3); }

/* Words only. It had a +/− after it, which took the underline with it and read
   as a stray character; the words already say what clicking does. Open, it
   turns to full ink, so it still shows which state it is in. */
.lmt-subs__stop-open {
	display: inline-block;
	font-size: 13px; color: var(--lmt-ink-muted);
	text-decoration: underline; text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}
.lmt-subs__stop-open::-webkit-details-marker { display: none; }
.lmt-subs__stop-open::marker { content: ""; }
.lmt-subs__stop-open:hover { color: var(--lmt-red); }
.lmt-subs__stop[open] .lmt-subs__stop-open { color: var(--lmt-ink); }

.lmt-subs__stop-body {
	display: flex; flex-direction: column; gap: var(--lmt-space-3);
	margin-top: var(--lmt-space-4);
	padding: var(--lmt-space-4);
	background: var(--lmt-grey-100);
	font-size: 14px; line-height: 1.5;
}
.lmt-subs__stop-body p { margin: 0; }
.lmt-subs__stop-small { font-size: 13px; color: var(--lmt-ink-muted); }
.lmt-subs__stop-body form { margin: 0; }

/* The confirm is an outline button, not the page's filled black one: it is the
   destructive half of a pair and should not be the loudest thing on the card. */
.lmt-account .lmt-subs__stop-body button[type="submit"] {
	align-self: flex-start;
	background: none;
	color: var(--lmt-red);
	border: 1px solid var(--lmt-red);
}
.lmt-account .lmt-subs__stop-body button[type="submit"]:hover {
	background: var(--lmt-red);
	color: var(--lmt-white);
}

/* Ones that have stopped. A list, not cards: there is nothing to do with them. */
.lmt-subs__past { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lmt-rule); }
.lmt-subs__past-item {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--lmt-space-3);
	padding: 14px 0;
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 15px;
}
.lmt-subs__past-name { color: var(--lmt-ink-muted); }
.lmt-subs__past-state {
	flex: none;
	font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--lmt-ink-muted);
}
.lmt-subs__restart { margin: 0; font-size: 13px; color: var(--lmt-ink-muted); }

/* ==========================================================================
   Orders
   The comp's order history: one bordered list, a grey header band, the order
   number as the way in. Values are the comp's own.
   ========================================================================== */

.lmt-orders-wrap {
	border: 1px solid var(--lmt-grey-300);
	overflow-x: auto;
}

.lmt-account .lmt-orders {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.lmt-account .lmt-orders thead th {
	padding: 14px 24px;
	border: 0;
	background: var(--lmt-grey-100);
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--lmt-grey-600);
	text-align: left;
	white-space: nowrap;
}

.lmt-account .lmt-orders tbody th,
.lmt-account .lmt-orders tbody td {
	padding: 20px 24px;
	border: 0;
	border-top: 1px solid var(--lmt-grey-300);
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.lmt-account .lmt-orders .lmt-orders__order a {
	font-weight: 700;
	color: var(--lmt-ink);
	text-decoration: none;
	white-space: nowrap;
}
.lmt-account .lmt-orders .lmt-orders__order a:hover { color: var(--lmt-red); }

.lmt-account .lmt-orders .lmt-orders__date { color: var(--lmt-grey-700); white-space: nowrap; }

.lmt-account .lmt-orders .lmt-orders__status {
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	white-space: nowrap;
}

.lmt-account .lmt-orders .lmt-orders__num,
.lmt-account .lmt-orders .lmt-orders__total { text-align: right; }
.lmt-account .lmt-orders .lmt-orders__total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lmt-orders__actions {
	display: flex; justify-content: flex-end; gap: 12px;
	margin-top: 6px;
	font-size: 13px;
}
.lmt-orders__actions a { color: var(--lmt-red); font-weight: 700; }

.lmt-orders__pages { display: flex; gap: 12px; margin-top: var(--lmt-space-5); }

/* A phone: each order becomes a small card — number and total across the top,
   what was in it, then the date and status. */
@media (max-width: 700px) {
	.lmt-account .lmt-orders thead { display: none; }
	.lmt-account .lmt-orders tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 6px 16px;
		padding: 16px 18px;
		border-top: 1px solid var(--lmt-grey-300);
	}
	.lmt-account .lmt-orders tbody tr:first-child { border-top: 0; }
	.lmt-account .lmt-orders tbody th,
	.lmt-account .lmt-orders tbody td { padding: 0; border: 0; }
	.lmt-account .lmt-orders .lmt-orders__order  { grid-column: 1; grid-row: 1; }
	.lmt-account .lmt-orders .lmt-orders__total  { grid-column: 2; grid-row: 1; }
	.lmt-account .lmt-orders .lmt-orders__items  { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
	.lmt-account .lmt-orders .lmt-orders__date   { grid-column: 1; grid-row: 3; font-size: 13px; }
	.lmt-account .lmt-orders .lmt-orders__status { grid-column: 2; grid-row: 3; text-align: right; }
}

/* ---- One order ---- */

.lmt-order-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin: -20px 0 var(--lmt-space-6);
	font-size: 15px;
	color: var(--lmt-grey-700);
}
.lmt-order-meta__status {
	padding: 4px 9px;
	background: var(--lmt-grey-100);
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--lmt-ink);
}

/* Section labels inside the order, as the comp labels its cards. */
.lmt-account .lmt-order__title {
	margin: 0 0 12px;
	font-family: var(--lmt-font-body);
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	line-height: 1.3;
	color: var(--lmt-grey-600);
}

.lmt-order-updates { margin-bottom: var(--lmt-space-6); }
.lmt-order-updates__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--lmt-grey-300); }
.lmt-order-updates__item { padding: 18px 24px; }
.lmt-order-updates__item + .lmt-order-updates__item { border-top: 1px solid var(--lmt-grey-300); }
.lmt-order-updates__when { margin: 0 0 4px; font-size: 13px; color: var(--lmt-grey-600); }
.lmt-order-updates__text { font-size: 15px; line-height: 1.55; }
.lmt-order-updates__text p { margin: 0; }

.lmt-account .lmt-order { margin-bottom: var(--lmt-space-6); }

.lmt-account .lmt-order-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--lmt-grey-300);
	font-size: 15px;
}

.lmt-account .lmt-order-table thead th {
	padding: 14px 24px;
	border: 0;
	background: var(--lmt-grey-100);
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--lmt-grey-600);
	text-align: left;
}
.lmt-account .lmt-order-table thead th:last-child { text-align: right; }

.lmt-account .lmt-order-table tbody td {
	padding: 18px 24px;
	border: 0;
	border-top: 1px solid var(--lmt-grey-300);
	vertical-align: top;
	text-align: left;
}
.lmt-account .lmt-order-table tbody td:last-child { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lmt-account .lmt-order-table .product-name a { color: var(--lmt-ink); font-weight: 600; text-decoration: none; }
.lmt-account .lmt-order-table .product-name a:hover { color: var(--lmt-red); }
.lmt-account .lmt-order-table .product-quantity { margin-left: 4px; font-weight: 400; color: var(--lmt-grey-600); white-space: nowrap; }

.lmt-account .lmt-order-table tfoot th,
.lmt-account .lmt-order-table tfoot td {
	padding: 10px 24px;
	border: 0;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
.lmt-account .lmt-order-table tfoot tr:first-child th,
.lmt-account .lmt-order-table tfoot tr:first-child td {
	padding-top: 18px;
	border-top: 1px solid var(--lmt-grey-300);
}
.lmt-account .lmt-order-table tfoot th { font-weight: 400; color: var(--lmt-grey-700); text-align: left; }
.lmt-account .lmt-order-table tfoot td { font-weight: 700; color: var(--lmt-ink); text-align: right; font-variant-numeric: tabular-nums; }
/* "via Pharmacy Shipping 3 to 4 Business Days", which WooCommerce sets small. */
.lmt-account .lmt-order-table tfoot small { display: block; font-size: 12px; font-weight: 400; color: var(--lmt-grey-600); }

.lmt-account .lmt-order-table .lmt-order-table__row--order_total th,
.lmt-account .lmt-order-table .lmt-order-table__row--order_total td {
	padding-top: 16px;
	padding-bottom: 20px;
	border-top: 1px solid var(--lmt-grey-300);
	vertical-align: baseline;
	font-size: 16px;
	color: var(--lmt-ink);
}
.lmt-account .lmt-order-table .lmt-order-table__row--order_total td {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
}

.lmt-order-table__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* "Order again", which WooCommerce hangs under the table on completed orders. */
.lmt-account .order-again a.button {
	display: inline-flex; align-items: center;
	min-height: 0;
	margin-top: var(--lmt-space-4);
	padding: 12px 20px;
	border: 1px solid var(--lmt-ink);
	border-radius: 0;
	background: none;
	color: var(--lmt-ink);
	font-size: 14px; font-weight: 700;
}
.lmt-account .order-again a.button:hover { background: var(--lmt-ink); color: var(--lmt-white); }

/* ---- Addresses on an order ----

   WooCommerce's own markup, restyled rather than rewritten, so the fields other
   plugins add to it still land. Its selectors are ".woocommerce" plus the same
   classes used here, so these tie on weight and win by loading later. The
   col2-set clearfix pseudo-elements would otherwise become grid items. */

.lmt-account .woocommerce-customer-details { margin-top: var(--lmt-space-6); }

.lmt-account .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 20px;
}
.lmt-account .woocommerce-customer-details .woocommerce-columns--addresses::before,
.lmt-account .woocommerce-customer-details .woocommerce-columns--addresses::after { display: none; }
.lmt-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.lmt-account .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 12px;
	font-family: var(--lmt-font-body);
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	line-height: 1.3;
	color: var(--lmt-grey-600);
}

.lmt-account .woocommerce-customer-details address {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--lmt-grey-300);
	border-radius: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lmt-ink);
}

.lmt-account .woocommerce-customer-details address .woocommerce-customer-details--phone,
.lmt-account .woocommerce-customer-details address .woocommerce-customer-details--email {
	margin: 8px 0 0;
	padding-left: 0;
	font-size: 14px;
	color: var(--lmt-grey-700);
}
.lmt-account .woocommerce-customer-details address .woocommerce-customer-details--phone::before,
.lmt-account .woocommerce-customer-details address .woocommerce-customer-details--email::before {
	content: none;
	display: none;
}