/* ==========================================================================
   Cart and checkout.

   These two pages were the only ones on the site still wearing WooCommerce's
   own clothes: system-grey buttons, borderless tables, form fields nothing
   else on the site looks like, and no heading at all on either page.

   They are also built out of two different things, which is why this file is
   in two halves. The cart is the block cart, so its markup is wc-block-*
   components. The checkout is the classic shortcode, so its markup is the
   older woocommerce-* form. Nothing here changes either — it dresses both to
   match, using the same tokens, fields and buttons as the rest of the site.
   ========================================================================== */

/* ---- The page heading both pages were missing ------------------------- */

.lmt-shop-head {
	padding-block: var(--lmt-space-7) var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule);
	margin-bottom: var(--lmt-space-6);
}

.lmt-shop-head__title {
	font-family: var(--lmt-font-display);
	font-size: clamp(34px, 6vw, 54px);
	line-height: .95;
	text-transform: uppercase;
	margin: 6px 0 0;
}

.lmt-shop-head__note {
	margin-top: 10px;
	font-size: 15px;
	color: var(--lmt-ink-muted);
	max-width: 52ch;
}

/* A step marker, because cart and checkout are two points on one path and
   neither page said which one you were on. */
.lmt-shop-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: var(--lmt-space-4);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-grey-500);
}
.lmt-shop-steps__sep { color: var(--lmt-grey-400); }
.lmt-shop-steps__step.is-here { color: var(--lmt-red); }

/* ==========================================================================
   Cart — the block cart
   ========================================================================== */

.wc-block-cart {
	margin-bottom: var(--lmt-space-8);
}

/* The two columns, with the summary held beside the items rather than
   floating free of them. */
.wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 0; }

@media (min-width: 1000px) {
	.wc-block-components-sidebar-layout { gap: var(--lmt-space-7); }
	.wc-block-cart__main { flex-basis: auto; }
	.wc-block-cart__sidebar { flex: 0 0 360px; max-width: 360px; }
}

/* ---- The list of items ---- */

.wc-block-cart-items__header {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-grey-600);
	border-bottom: 1px solid var(--lmt-ink);
}

.wc-block-cart-items__row td { border-top: 0; }
.wc-block-cart-items__row { border-bottom: 1px solid var(--lmt-rule); }

.wc-block-cart-item__image img {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
}

.wc-block-components-product-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lmt-ink);
	text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--lmt-red); }

/* The catalogue writes "*REQUIRES LAB WORK" into 32 product titles. It is
   information a patient should see, so it is not hidden — it is set apart
   from the name so the name still reads as a name. */
.wc-block-components-product-metadata__description {
	font-size: 14px;
	color: var(--lmt-ink-muted);
}

.wc-block-components-product-price__value { font-weight: 600; }
.wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 17px; }

/* ---- The quantity stepper ---- */

.wc-block-components-quantity-selector {
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
}
.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input {
	font-weight: 600;
	color: var(--lmt-ink);
	font-variant-numeric: tabular-nums;
}

.wc-block-components-quantity-selector__button {
	color: var(--lmt-grey-700);
	font-weight: 700;
	transition: color var(--lmt-transition), background var(--lmt-transition);
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--lmt-white);
	background: var(--lmt-ink);
	opacity: 1;
}

.wc-block-cart-item__remove-link {
	font-size: 13px;
	color: var(--lmt-ink-muted);
	text-underline-offset: 3px;
}
.wc-block-cart-item__remove-link:hover { color: var(--lmt-red); }

/* ---- The summary panel ---- */

.wc-block-cart__sidebar {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
	padding: var(--lmt-space-5);
}

.wc-block-cart__totals-title {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-grey-600);
	margin-bottom: var(--lmt-space-3);
}

.wc-block-components-totals-wrapper { border-color: var(--lmt-rule-soft); }
.wc-block-components-totals-item__label { color: var(--lmt-ink-muted); }
.wc-block-components-totals-item__value { font-weight: 600; }

.wc-block-components-totals-footer-item {
	font-size: 20px;
	font-weight: 700;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--lmt-ink); }

.wc-block-components-panel__button { font-weight: 600; color: var(--lmt-ink); }

/* ---- Proceed to checkout ---- */

.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
	background: var(--lmt-red);
	border: 1px solid var(--lmt-red);
	border-radius: var(--lmt-radius);
	color: var(--lmt-white);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	padding: 18px 24px;
	min-height: 0;
	transition: background var(--lmt-transition), border-color var(--lmt-transition);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--lmt-red-dark);
	border-color: var(--lmt-red-dark);
	color: var(--lmt-white);
}

/* ---- Coupon field ----

   WooCommerce ships this input at 50px with 4px corners and a 1.5px near-black
   border, beside a button the theme has already made 60px, square and 1px. The
   two sat side by side looking like parts of different forms — and because the
   floating label reserves the top 24px, the caret sat at the bottom of a box
   taller than the text in it. Matched to the button it shares a row with. */
.wc-block-components-totals-coupon__form {
	align-items: stretch;
	gap: 8px;
}
.wc-block-components-totals-coupon__input { flex: 1; }
.wc-block-components-totals-coupon__input input[type="text"] {
	height: 100%;
	padding: 22px 14px 8px;
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
	font-size: 15px;
	color: var(--lmt-ink);
}
.wc-block-components-totals-coupon__input input[type="text"]:focus {
	border-color: var(--lmt-ink);
	outline: none;
	box-shadow: none;
}
/* The label rides in the space the padding above reserves for it. At rest it
   is the placeholder, so it centres: WooCommerce pins it at "top: 25px" for
   its own 50px input, which sits 5px high in a field the height of the button.
   Once there is something to type over, its own shrink-and-rise is left be. */
.wc-block-components-totals-coupon__input label {
	left: 14px;
	font-size: 15px;
	color: var(--lmt-ink-muted);
}
.wc-block-components-totals-coupon__input:not(.is-active) label {
	top: 50%;
	transform: translateY(-50%);
}
.wc-block-components-totals-coupon__button { flex: none; }

/* ==========================================================================
   Checkout — the classic form
   ========================================================================== */

.woocommerce-checkout .lmt-shell > .woocommerce { margin-bottom: var(--lmt-space-8); }

/* Two columns where there is room: the form on the left, what you are paying
   for on the right, which is the order the page is read in. */
@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		gap: var(--lmt-space-7);
		align-items: start;
	}
	/* Rows named rather than left to auto-placement: the form is one tall
	   item in column 1, and the heading and the summary are two short ones
	   stacked beside it. Without the span, row 1 took its height from the
	   form and the summary was pushed below all of it. */
	.woocommerce-checkout form.checkout { align-content: start; }
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; }

	/* The summary travels with the reader down a long form. */
	.woocommerce-checkout form.checkout #order_review {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 24px);
	}
}

/* Something upstream draws a hard black box around the field wrapper — not
   WooCommerce core and not this file. It reads as an input the fields have
   been dropped inside, which is exactly what it is not. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	border: 0;
	padding: 0;
}

/* Woo floats these two side by side; the grid above is doing that job. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: auto; }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lmt-rule);
	margin: var(--lmt-space-6) 0 var(--lmt-space-4);
}
.woocommerce-checkout #customer_details h3:first-child { margin-top: 0; }

/* ---- Fields, matching the ones the rest of the site uses ---- */

.woocommerce-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 0 0 var(--lmt-space-4);
}

.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
}
.woocommerce-checkout .form-row .required {
	color: var(--lmt-red);
	text-decoration: none;
	border: 0;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	padding: 16px;
	font: inherit;
	font-size: 16px;
	line-height: 1.2;
	color: var(--lmt-ink);
	background: var(--lmt-white);
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	transition: border-color var(--lmt-transition);
	height: auto;
}
.woocommerce-checkout .form-row textarea { line-height: 1.5; min-height: 7rem; resize: vertical; }

.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row select:hover { border-color: var(--lmt-grey-600); }

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--lmt-black);
	outline: 2px solid var(--lmt-red);
	outline-offset: 1px;
}

/* Two on a line where the pair belongs together. */
@media (min-width: 600px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		display: inline-flex;
		width: calc(50% - 8px);
		vertical-align: top;
	}
	.woocommerce-checkout .form-row-first { margin-right: 12px; }
}

/* The driver's licence upload.
   The plugin hides the real file input and puts a button in its place, so the
   thing to dress is the button. The row it sits in is a bare table, which is
   why it arrived looking like nothing else on the page. */
.woocommerce-checkout .alg_checkout_files_upload_button {
	padding: 14px 22px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--lmt-ink);
	background: var(--lmt-white);
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	cursor: pointer;
	transition: border-color var(--lmt-transition), background var(--lmt-transition);
}
.woocommerce-checkout .alg_checkout_files_upload_button:hover {
	border-color: var(--lmt-black);
	background: var(--lmt-grey-100);
}

/* The upload's own table, which has no class of its own to hold on to. */
.woocommerce-checkout .woocommerce-checkout-review-order ~ table,
.woocommerce-checkout form.checkout table:not(.shop_table) { border: 0; margin: 0 0 var(--lmt-space-4); }
.woocommerce-checkout form.checkout table:not(.shop_table) td { border: 0; padding: 0 0 8px; }

/* ---- The order review panel ---- */

.woocommerce-checkout #order_review {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
	padding: var(--lmt-space-5);
}

/* WooCommerce's own ".woocommerce table.shop_table" wins on specificity, so
   the table kept its border inside the panel and the summary became a box in
   a box. One box is enough. */
.woocommerce-checkout .woocommerce table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	margin: 0;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--lmt-rule-soft);
	font-size: 15px;
	text-align: left;
}
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child { text-align: right; }

/* WooCommerce draws a 20%-black top rule on every body and footer cell with
   ".woocommerce table.shop_table tbody th" — two classes and three elements.
   With the cells collapsed into a table it mostly lost to the lighter bottom
   rule above, but anywhere the collapse did not happen it drew a second,
   darker line. There is one rule between rows here, and it is the light one. */
.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table td { border-top: 0; }

.woocommerce-checkout .shop_table thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-grey-600);
	border-bottom-color: var(--lmt-ink);
}

.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
	font-size: 20px;
	font-weight: 700;
	border-bottom: 0;
	padding-top: var(--lmt-space-4);
}

/* The shipping row reads like every row around it: its name on the left, its
   price on the right, and the method's own long name small beneath the price.

   It used to set both cells to display: block, to give "Pharmacy Shipping 3 to
   4 Business Days: $20.00" the full width instead of wrapping it over four
   lines. In a table that does the opposite. Block cells are wrapped in one
   anonymous cell, which lands in the first column, so the label and price
   stacked into the left 255px, the right column sat empty beside them, and the
   borders stopped short at the column edge. The long name is now split from
   the price where WooCommerce builds it — see lmt_shipping_method_label() —
   so the row can stay a row. */
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals th { vertical-align: top; }
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals td { text-align: right; vertical-align: top; }

.woocommerce-checkout ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-checkout ul#shipping_method li { padding: 0; }
.woocommerce-checkout ul#shipping_method label {
	font-size: 14px;
	font-weight: 400;
	color: var(--lmt-ink);
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce-checkout ul#shipping_method .amount { font-weight: 700; }

/* ".woocommerce ul#shipping_method li label" makes the label inline, and its id
   out-ranks any number of classes, so this matches it with the id included. */
.woocommerce-checkout .woocommerce ul#shipping_method li label { display: block; }
.woocommerce-checkout ul#shipping_method li { margin: 0; }
.lmt-ship__price { display: block; font-size: 15px; font-weight: 700; }
.lmt-ship__name {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--lmt-ink-muted);
}

/* A narrow column is not the place for long product names at reading size. */
.woocommerce-checkout .shop_table .cart_item td,
.woocommerce-checkout .shop_table .cart_item th {
	font-size: 14px;
	line-height: 1.45;
	vertical-align: top;
}
.woocommerce-checkout .shop_table .product-quantity {
	font-weight: 400;
	color: var(--lmt-ink-muted);
	white-space: nowrap;
}

/* ---- Payment ---- */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: var(--lmt-space-5);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--lmt-space-4);
	border-bottom: 1px solid var(--lmt-rule);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 14px;
	margin-bottom: 8px;
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
}
.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--lmt-ink);
	display: inline;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--lmt-grey-100);
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
	font-size: 14px;
	color: var(--lmt-ink-muted);
	margin: 12px 0 0;
	padding: 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* The Zelle gateway draws its own bordered fieldset inside the payment box,
   which made three nested boxes where there should be one. */
.woocommerce-checkout #payment fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lmt-white);
	background: var(--lmt-red);
	border: 1px solid var(--lmt-red);
	border-radius: var(--lmt-radius);
	cursor: pointer;
	transition: background var(--lmt-transition), border-color var(--lmt-transition);
}
.woocommerce-checkout #place_order:hover {
	background: var(--lmt-red-dark);
	border-color: var(--lmt-red-dark);
}

/* ---- Coupon and notices ---- */

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message {
	background: var(--lmt-grey-100);
	border: 1px solid var(--lmt-rule);
	border-left: 3px solid var(--lmt-red);
	border-radius: 0;
	color: var(--lmt-ink);
	font-size: 15px;
	padding: 14px 16px;
	margin-bottom: var(--lmt-space-5);
	list-style: none;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before { display: none; }

.woocommerce-checkout .woocommerce-error {
	background: var(--lmt-red-tint);
	border: 1px solid var(--lmt-red);
	border-radius: 0;
	color: var(--lmt-red-dark);
	padding: 14px 16px;
	margin-bottom: var(--lmt-space-5);
	list-style: none;
}
.woocommerce-checkout .woocommerce-error::before { display: none; }

/* The same pair as the cart's coupon field, in the classic markup: two floated
   half-width rows, so the field came out narrow beside a button spanning the
   rest of the panel, and 3px shorter than it. Laid out as the row it reads as,
   with the button sized to its own words. */
.woocommerce-checkout form.checkout_coupon {
	border: 1px solid var(--lmt-rule);
	border-radius: 0;
	padding: var(--lmt-space-5);
	margin-bottom: var(--lmt-space-5);
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.woocommerce-checkout form.checkout_coupon .form-row {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}
.woocommerce-checkout form.checkout_coupon .form-row-first { flex: 1; }
.woocommerce-checkout form.checkout_coupon .form-row-last { flex: none; }
.woocommerce-checkout form.checkout_coupon #coupon_code { width: 100%; }
.woocommerce-checkout form.checkout_coupon .clear { display: none; }

.woocommerce-checkout form.checkout_coupon button,
.woocommerce-cart .button {
	padding: 16px 22px;
	/* Matches the input's own normal line-height, so the two are the same
	   height without either one being given a fixed one. */
	line-height: 1.2;
	font-weight: 700;
	color: var(--lmt-white);
	background: var(--lmt-black);
	border: 1px solid var(--lmt-black);
	border-radius: var(--lmt-radius);
	cursor: pointer;
}
.woocommerce-checkout form.checkout_coupon button:hover,
.woocommerce-cart .button:hover { background: var(--lmt-black-raised); }

/* ---- The empty cart ----------------------------------------------------

   This was a full-page weeping emoji above a shout in condensed capitals,
   with a row of "New in store" medication under it. The recommendations are
   gone in PHP; what is left is a quiet line and a way onward.
   ------------------------------------------------------------------------ */

.wp-block-woocommerce-empty-cart-block {
	max-width: 46ch;
	margin-inline: auto;
	padding: var(--lmt-space-7) 0 var(--lmt-space-8);
	text-align: center;
}

/* WooCommerce hangs its crying-face icon off this class. A clinic telling
   somebody their basket is empty does not need to look sad about it. */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
	content: none;
}

.wp-block-woocommerce-empty-cart-block h2.with-empty-cart-icon {
	font-family: var(--lmt-font-display);
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 var(--lmt-space-3);
}

.wp-block-woocommerce-empty-cart-block p { color: var(--lmt-ink-muted); margin: 0; }

/* "Browse store" was a bare underlined link doing the job of the only action
   on the page. */
.wp-block-woocommerce-empty-cart-block p a {
	display: inline-block;
	margin-top: var(--lmt-space-4);
	padding: 16px 24px;
	background: var(--lmt-red);
	border: 1px solid var(--lmt-red);
	border-radius: var(--lmt-radius);
	color: var(--lmt-white);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--lmt-transition), border-color var(--lmt-transition);
}
.wp-block-woocommerce-empty-cart-block p a:hover {
	background: var(--lmt-red-dark);
	border-color: var(--lmt-red-dark);
	color: var(--lmt-white);
}

/* The dotted rule and the "New in store" heading belonged to the products
   that are no longer rendered; without them they divide nothing. */
.wp-block-woocommerce-empty-cart-block > hr.wp-block-separator,
.wp-block-woocommerce-empty-cart-block > h2:not(.with-empty-cart-icon) {
	display: none;
}

.cart-empty {
	font-family: var(--lmt-font-display);
	font-size: clamp(26px, 4vw, 34px);
	text-transform: uppercase;
	line-height: 1.05;
}

/* ==========================================================================
   Category archives and product pages

   Both are WooCommerce's own templates. The loop is dressed to match the
   product row section, so a card looks the same whether it was placed on a
   treatment page or found by browsing a category.
   ========================================================================== */

/* ---- Breadcrumb ---- */

.woocommerce-breadcrumb {
	margin: var(--lmt-space-5) 0 0;
	font-size: 13px;
	color: var(--lmt-ink-muted);
}
.woocommerce-breadcrumb a { color: var(--lmt-ink-muted); text-underline-offset: 3px; }
.woocommerce-breadcrumb a:hover { color: var(--lmt-red); }

/* ---- Archive header ---- */

.woocommerce-products-header,
.woocommerce-shop .page-header,
.tax-product_cat .page-header { padding-block: var(--lmt-space-5) 0; }

.woocommerce-products-header__title,
.woocommerce-shop h1.page-title,
.tax-product_cat h1.page-title {
	font-family: var(--lmt-font-display);
	font-size: clamp(34px, 6vw, 54px);
	line-height: .95;
	text-transform: uppercase;
	margin: 6px 0 0;
}

/* The category description is a wall of text at full page width. Held to a
   readable measure and set at reading size, not heading size. */
.term-description,
.woocommerce-products-header .term-description {
	max-width: 68ch;
	margin-top: var(--lmt-space-4);
	font-size: 15px;
	line-height: 1.65;
	color: var(--lmt-ink-muted);
}
.term-description p + p { margin-top: .8em; }

/* ---- The bar above the grid ---- */

.woocommerce-notices-wrapper:empty { display: none; }

.tax-product_cat .woocommerce-result-count,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering {
	margin: 0;
}

.woocommerce-shop .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count {
	font-size: 13px;
	color: var(--lmt-ink-muted);
}

.woocommerce-shop .woocommerce-ordering select,
.tax-product_cat .woocommerce-ordering select {
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
	color: var(--lmt-ink);
}

/* Count and sorting on one line, with a rule under them, rather than floated
   against each other. */
.woocommerce-shop ul.products,
.tax-product_cat ul.products {
	clear: both;
	border-top: 1px solid var(--lmt-rule);
	padding-top: var(--lmt-space-6);
	margin-top: var(--lmt-space-4);
}

/* ---- The loop, dressed as the product row's cards ---- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lmt-space-5);
	margin: 0 0 var(--lmt-space-7);
	padding: 0;
	list-style: none;
}
@media (min-width: 560px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* WooCommerce clears its float layout with ::before and ::after on the list.
   A pseudo-element is a grid item like any other, so the first one sat in cell
   one and pushed every product along by a column — an empty space top left and
   the row wrapping one early, all the way down the page. Same shape of bug as
   the chat widget in the header. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none; }

/* Woo floats and widths the items; the grid above is doing that job.
   clear matters as much as float: WooCommerce puts clear:both on the first
   item of each row, which in a float layout starts the row and in a grid
   pushes that item onto a row of its own — leaving the first cell empty and
   the grid off by one for the rest of the page. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	transition: border-color var(--lmt-transition);
}
.woocommerce ul.products li.product:hover { border-color: var(--lmt-grey-600); }

.woocommerce ul.products li.product a img,
ul.products li.product a img {
	aspect-ratio: 4 / 3;
	/* Contain: vials and boxes shot on white, and cover cuts the label off.
	   Padded, so a wide box shot does not reach the edges while a tall vial
	   sits inset — see the same fix on .lmt-product__media. */
	object-fit: contain;
	padding: 18px;
	box-sizing: border-box;
	background: var(--lmt-grey-100);
	border-bottom: 1px solid var(--lmt-rule);
	margin: 0;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	padding: var(--lmt-space-4) var(--lmt-space-4) 0;
	margin: 0;
	color: var(--lmt-ink);
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	display: block;
	padding: 6px var(--lmt-space-4) 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lmt-ink);
}
.woocommerce ul.products li.product .price del { color: var(--lmt-ink-muted); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* The whole tile is a link in Woo's markup; this is the part that looks like
   a button, pushed to the bottom so a row of cards lines up. */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
	margin: auto var(--lmt-space-4) var(--lmt-space-4);
	padding: 13px 18px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--lmt-ink);
	background: transparent;
	border: 1px solid var(--lmt-black);
	border-radius: var(--lmt-radius);
	transition: background var(--lmt-transition), color var(--lmt-transition);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--lmt-black);
	color: var(--lmt-white);
}
.woocommerce ul.products li.product .added_to_cart {
	margin: 0 var(--lmt-space-4) var(--lmt-space-4);
	font-size: 13px;
	color: var(--lmt-red);
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--lmt-red);
	color: var(--lmt-white);
	border-radius: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* ---- Pagination ---- */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: 10px 15px;
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
	font-weight: 600;
	color: var(--lmt-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

/* ==========================================================================
   A single product
   ========================================================================== */

.single-product div.product {
	display: grid;
	gap: var(--lmt-space-6);
	padding-block: var(--lmt-space-6) var(--lmt-space-8);
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--lmt-space-7);
		align-items: start;
	}
	.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
	.single-product div.product .summary { grid-column: 2; }
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .up-sells { grid-column: 1 / -1; }
}

/* Woo widths these with inline percentages. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .woocommerce-product-gallery img {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
}

.single-product .product_title {
	font-family: var(--lmt-font-display);
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.02;
	text-transform: uppercase;
	margin: 0 0 var(--lmt-space-3);
}

/* WooCommerce sets these from woocommerce.css with selectors carrying more
   weight than a plain class pair — ".woocommerce div.product p.price" for the
   price and ".woocommerce button.button.alt" for the button, which is where
   the olive and the lilac were coming from. Matched in kind rather than shouted
   over with !important. */
.woocommerce.single-product div.product .summary .price,
.woocommerce.single-product div.product .summary .price .amount,
.single-product .summary .price,
.single-product .summary .price .amount {
	font-size: 26px;
	font-weight: 700;
	/* WooCommerce ships a lilac for this, which belongs to nothing here. */
	color: var(--lmt-ink);
}
.single-product .summary .price del { font-size: 18px; color: var(--lmt-ink-muted); font-weight: 400; }
.single-product .summary .price ins { text-decoration: none; }

.single-product .woocommerce-product-details__short-description {
	margin: var(--lmt-space-4) 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--lmt-ink-muted);
	max-width: 56ch;
}

/* ---- Add to cart ---- */

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin: var(--lmt-space-5) 0 var(--lmt-space-4);
}

.single-product form.cart .quantity input.qty {
	width: 84px;
	height: 100%;
	padding: 16px 10px;
	font: inherit;
	font-size: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
	color: var(--lmt-ink);
}

.woocommerce.single-product div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.single-product .single_add_to_cart_button {
	flex: 1 1 auto;
	padding: 17px 28px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lmt-white);
	background: var(--lmt-red);
	border: 1px solid var(--lmt-red);
	border-radius: var(--lmt-radius);
	cursor: pointer;
	transition: background var(--lmt-transition), border-color var(--lmt-transition);
}
.woocommerce.single-product div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
	background: var(--lmt-red-dark);
	border-color: var(--lmt-red-dark);
}

.single-product .product_meta {
	margin-top: var(--lmt-space-5);
	padding-top: var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule);
	font-size: 13px;
	color: var(--lmt-ink-muted);
	display: grid;
	gap: 6px;
}
.single-product .product_meta > span { display: block; }
.single-product .product_meta a { color: var(--lmt-ink); text-underline-offset: 3px; }
.single-product .product_meta a:hover { color: var(--lmt-red); }

/* ---- Description tabs ---- */

.single-product .woocommerce-tabs { margin-top: var(--lmt-space-6); }

.single-product .woocommerce-tabs ul.tabs {
	margin: 0 0 var(--lmt-space-5);
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid var(--lmt-rule);
}
.single-product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 4px;
	margin-bottom: -1px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
	border-bottom: 2px solid transparent;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--lmt-ink);
	border-bottom-color: var(--lmt-red);
}

.single-product .woocommerce-Tabs-panel { max-width: 72ch; }
.single-product .woocommerce-Tabs-panel h2 { display: none; }
.single-product .woocommerce-Tabs-panel p { margin-bottom: 1em; }

/* ---- Related ---- */

.single-product .related > h2,
.single-product .up-sells > h2 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lmt-grey-600);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lmt-rule);
	margin: var(--lmt-space-7) 0 var(--lmt-space-5);
}

/* ==========================================================================
   Category archive — the bar above the grid

   The heading, the count and the sorting arrived as three things at three
   heights: a floated select sitting higher than the count it belongs beside,
   and no line between any of it and the products.
   ========================================================================== */

.tax-product_cat .woocommerce-products-header + .woocommerce-notices-wrapper,
.woocommerce-shop .woocommerce-products-header + .woocommerce-notices-wrapper,
.woocommerce-shop .page-header + .woocommerce-notices-wrapper,
.tax-product_cat .page-header + .woocommerce-notices-wrapper { margin: 0; }

.tax-product_cat .woocommerce-result-count,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering {
	float: none;
	display: block;
}

/* One row: how many there are on the left, how to sort them on the right,
   with a rule under both and the grid beneath that. */
@media (min-width: 700px) {
	.woocommerce-shop .woocommerce-result-count,
	.tax-product_cat .woocommerce-result-count {
		display: inline-block;
		margin-top: var(--lmt-space-5);
	}
	.woocommerce-shop .woocommerce-ordering,
	.tax-product_cat .woocommerce-ordering {
		display: inline-block;
		float: right;
		margin-top: var(--lmt-space-5);
	}
}

.woocommerce-shop .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
}

/* ---- The consult mark, so a card says the same thing wherever it is ---- */

.woocommerce ul.products li.product .lmt-loop-rx {
	display: inline-block;
	margin: 8px var(--lmt-space-4) 0;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lmt-red-dark);
	background: var(--lmt-red-tint);
}

/* ==========================================================================
   A single product — the parts WooCommerce leaves as a bare table
   ========================================================================== */

/* The variation picker is a table with a label in one cell and a select in
   the next, which at this width put "Subscription" and its dropdown on one
   cramped line with nothing lining up. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

.single-product table.variations { margin: 0 0 var(--lmt-space-4); }
.single-product table.variations tr + tr { margin-top: var(--lmt-space-4); }

.single-product table.variations th.label label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
}

.single-product table.variations td.value select {
	width: 100%;
	padding: 16px;
	font: inherit;
	font-size: 16px;
	line-height: 1.2;
	color: var(--lmt-ink);
	background: var(--lmt-white);
	border: 1px solid var(--lmt-grey-400);
	border-radius: var(--lmt-radius);
}
.single-product table.variations td.value select:hover { border-color: var(--lmt-grey-600); }
.single-product table.variations td.value select:focus {
	border-color: var(--lmt-black);
	outline: 2px solid var(--lmt-red);
	outline-offset: 1px;
}

.single-product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--lmt-ink-muted);
	text-underline-offset: 3px;
}
.single-product .reset_variations:hover { color: var(--lmt-red); }

/* The price WooCommerce shows once a variation is chosen. */
.single-product .woocommerce-variation-price { margin-bottom: var(--lmt-space-4); }
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price .amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--lmt-ink);
}

/* Before a variation is picked the button is deliberately inert. Half
   opacity on a red button reads as broken rather than waiting, so it says
   what it is instead. */
.woocommerce.single-product div.product form.cart button.single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.disabled {
	background: var(--lmt-grey-200);
	border-color: var(--lmt-grey-400);
	color: var(--lmt-grey-600);
	opacity: 1;
	cursor: not-allowed;
}
.woocommerce.single-product div.product form.cart button.single_add_to_cart_button.disabled:hover,
.single-product .single_add_to_cart_button.disabled:hover {
	background: var(--lmt-grey-200);
	border-color: var(--lmt-grey-400);
}

/* Categories: six of them, comma separated, in the same weight as everything
   else around it. Set quieter, since it is a footnote and not the offer. */
.single-product .product_meta .posted_in { line-height: 1.6; }
.single-product .product_meta .posted_in a { color: var(--lmt-ink-muted); }
.single-product .product_meta .posted_in a:hover { color: var(--lmt-red); }

/* ==========================================================================
   The container WooCommerce's own templates never had

   The theme wraps its pages in .lmt-shell — a max width and a gutter. The
   category archive and the single product are WooCommerce's templates inside
   WooCommerce's own <main class="site-main">, which has neither, so cards ran
   to the very edge of the screen at every width. Nothing else on the site
   does that.
   ========================================================================== */

.tax-product_cat .content-area,
.woocommerce-shop .content-area,
.tax-product_tag .content-area,
.single-product .content-area,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .content-area {
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding-inline: var(--lmt-gutter);
	box-sizing: border-box;
}

/* ---- Two to a row on a phone --------------------------------------------

   One product per screen, each with an image half a metre tall, is not
   browsing — it is a slideshow. Two fit legibly from the narrowest phone up.
   ------------------------------------------------------------------------ */

.woocommerce ul.products,
ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Three between a tablet and a small laptop. Two columns held all the way to
   1000px, which at 960 made each card nearly half a metre of screen. */
@media (min-width: 700px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* At two-up the card has half the room, so its furniture comes down a size. */
@media (max-width: 559px) {
	.woocommerce ul.products,
	ul.products { gap: var(--lmt-space-3); }

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
		padding: var(--lmt-space-3) var(--lmt-space-3) 0;
	}
	.woocommerce ul.products li.product .price,
	ul.products li.product .price { font-size: 14px; padding: 4px var(--lmt-space-3) 0; }

	.woocommerce ul.products li.product .button,
	ul.products li.product .button {
		margin: auto var(--lmt-space-3) var(--lmt-space-3);
		padding: 11px 10px;
		font-size: 13px;
	}
	.woocommerce ul.products li.product .lmt-loop-rx { margin-inline: var(--lmt-space-3); }
	.woocommerce ul.products li.product a img,
	ul.products li.product a img { padding: 12px; }
}

/* ---- The bar above the grid, on a phone ---- */

@media (max-width: 699px) {
	.woocommerce-shop .woocommerce-result-count,
	.tax-product_cat .woocommerce-result-count { margin: var(--lmt-space-4) 0 var(--lmt-space-3); }
	.woocommerce-shop .woocommerce-ordering,
	.tax-product_cat .woocommerce-ordering { margin-bottom: var(--lmt-space-4); }
	.woocommerce-shop .woocommerce-ordering select,
	.tax-product_cat .woocommerce-ordering select { width: 100%; }
}

/* ---- What sits under the grid ---- */

.woocommerce nav.woocommerce-pagination { margin-bottom: var(--lmt-space-7); }

/* ---- The last of WooCommerce's float layout -----------------------------

   woocommerce-smallscreen.css floats alternate items left and right and
   clears every other one, with :nth-child() selectors that outrank a plain
   ".woocommerce ul.products li.product". In a grid the effect is items taken
   out of flow at their shrink-to-fit width, so a row came out 169px, 81px,
   81px, 169px instead of two equal columns.

   Matched selector for selector — attribute and pseudo-class included — so
   this wins on ordering rather than on !important.
   ------------------------------------------------------------------------ */

.woocommerce ul.products[class*="columns-"] li.product:nth-child(n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(n),
.woocommerce ul.products li.product:nth-child(n),
ul.products li.product:nth-child(n) {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

/* ---- The category page's own header -------------------------------------

   Shares .lmt-shop-head with the cart and checkout, so the three pages a
   patient moves through — category, cart, checkout — open the same way.
   ------------------------------------------------------------------------ */

.lmt-shop-head--category { margin-bottom: 0; }
.lmt-shop-head--category .lmt-shop-head__note {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
	margin-top: 12px;
}

/* WooCommerce's own header element is empty now that the title is ours. */
.woocommerce-shop .woocommerce-products-header:empty,
.tax-product_cat .woocommerce-products-header:empty { display: none; }

/* The count and the sorting sit under the header's rule rather than making
   one of their own. */
.tax-product_cat .woocommerce-result-count,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering { margin-top: var(--lmt-space-4); }

.woocommerce-shop ul.products,
.tax-product_cat ul.products {
	border-top: 0;
	padding-top: var(--lmt-space-5);
	margin-top: var(--lmt-space-3);
}

/* ==========================================================================
   The product page, given the same treatment as the rest of the site
   ========================================================================== */

.single-product div.product { padding-block: var(--lmt-space-6) var(--lmt-space-7); }

/* ---- The gallery, as a well rather than a loose picture ---- */

.single-product .woocommerce-product-gallery {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
	padding: var(--lmt-space-6);
}
.single-product .woocommerce-product-gallery img {
	border: 0;
	background: none;
	mix-blend-mode: multiply;   /* the photographs are shot on white */
}
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }

/* ---- The buy column ---- */

.single-product .lmt-product-eyebrow { margin-bottom: 10px; }
.single-product .lmt-product-eyebrow a { color: inherit; text-decoration: none; }
.single-product .lmt-product-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.single-product .summary .price {
	display: block;
	padding-bottom: var(--lmt-space-4);
	margin-bottom: var(--lmt-space-4);
	border-bottom: 1px solid var(--lmt-rule);
}

/* ---- Consult required: a notice, not a badge ----

   Thirty-two of these need an appointment before anybody can be prescribed
   them. On a page whose whole job is to sell one, that is the first thing to
   say, and it is said in the brand's own red rather than a warning yellow —
   it is not an error, it is how the clinic works. */
.lmt-product-notice {
	border: 1px solid var(--lmt-red);
	border-left-width: 3px;
	background: var(--lmt-red-tint);
	padding: var(--lmt-space-4) var(--lmt-space-5);
	margin-bottom: var(--lmt-space-5);
	display: grid;
	gap: 10px;
	justify-items: start;
}
/* Two classes, because ".lmt-product-notice p" below is one class plus an
   element and would otherwise win: the title was rendering at the body's 15px
   in the body's ink, not the 13px red it is written as here. */
.lmt-product-notice .lmt-product-notice__title {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lmt-red-dark);
}
.lmt-product-notice p { font-size: 15px; line-height: 1.6; color: var(--lmt-ink); }
/* base.css sets "p + p { margin-top: 1rem }", which stacked on top of the grid
   gap and put 26px between the title and the sentence under it. The gap owns
   the spacing in here. */
.lmt-product-notice p + p { margin-top: 0; }
.lmt-product-notice .lmt-btn { margin-top: 4px; }

/* ---- What the clinic promises ---- */

.lmt-product-assurances {
	list-style: none;
	margin: var(--lmt-space-5) 0 0;
	padding: var(--lmt-space-5) 0 0;
	border-top: 1px solid var(--lmt-rule);
	display: grid;
	gap: 10px;
}
.lmt-product-assurances li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	font-size: 15px;
	color: var(--lmt-ink-muted);
}
.lmt-product-assurances svg { color: var(--lmt-red); margin-top: 3px; }

/* ---- The description, in the column, above the button ---- */

.lmt-product-about {
	margin-bottom: var(--lmt-space-5);
	font-size: 16px;
	line-height: 1.65;
	color: var(--lmt-ink-muted);
	max-width: 52ch;
}
.lmt-product-about p + p { margin-top: .9em; }
.lmt-product-about strong { color: var(--lmt-ink); font-weight: 700; }
.lmt-product-about ul,
.lmt-product-about ol { margin: .9em 0 0; padding-left: 1.2em; }
.lmt-product-about li + li { margin-top: 4px; }

/* ---- Related ---- */

.single-product .related {
	border-top: 1px solid var(--lmt-rule);
	padding-block: var(--lmt-space-7) var(--lmt-space-8);
}
.single-product .related > h2 {
	border: 0;
	padding: 0;
	margin: 0 0 var(--lmt-space-5);
}

/* ---- The card's one button ---- */

.woocommerce ul.products li.product .lmt-loop-view,
ul.products li.product .lmt-loop-view {
	display: block;
	text-decoration: none;
}

/* A product that starts with an appointment rather than a basket. */
.lmt-product-start { margin: var(--lmt-space-5) 0 0; }
.lmt-product-start .lmt-btn { width: 100%; text-align: center; }

/* A card's name gets two lines, whatever the catalogue calls the thing.
   The short name and the bracket trimming handle almost all of it; this is
   the backstop, so nothing anybody types can push the price and the button
   out of line across a row. The full name is on the product page. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.lmt-product__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Narrowing a category

   Rows of chips, one row per question, separated by the same hairlines the
   rest of the site is built from. No panel and no fill: this sits between the
   category heading and the products, and a grey slab there reads as a form
   bolted onto the page rather than part of it.

   The number on a chip is how many products are left if you click it, given
   everything else already chosen.
   ========================================================================== */

.lmt-refine {
	margin: 0 0 var(--lmt-space-6);
}

/* The category head already draws a rule under itself; a second one 24px below
   it reads as a mistake rather than as structure. */
.lmt-refine > .lmt-refine__group:first-of-type { border-top: 0; }

/* Only a control on a phone — see the media query at the end. */
.lmt-refine__toggle {
	display: none;
	list-style: none;
}
.lmt-refine__toggle::-webkit-details-marker { display: none; }

.lmt-refine__group {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: var(--lmt-space-5);
	align-items: start;
	padding: var(--lmt-space-4) 0;
	border-bottom: 1px solid var(--lmt-rule);
}

/* Same eyebrow as the section headings, so the rows read as labelled rather
   than as a control panel. */
.lmt-refine__heading {
	margin: 0;
	padding-top: 7px;
	font-family: var(--lmt-font-body);
	font-size: var(--lmt-size-xs);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-red);
	line-height: 1;
}

/* The one that is on. Clicking it again takes it off, so it reads as held
   down; the hover turns it red to say that clicking now removes it. */

/* Just the way out. The count sits under this already, in WooCommerce's own
   "Showing 1-12 of 40" line, and saying it twice helps nobody. */
.lmt-refine__clear {
	display: inline-block;
	padding: var(--lmt-space-3) 0 0;
	font-size: var(--lmt-size-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--lmt-red);
	text-decoration: none;
}
.lmt-refine__clear:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.lmt-refine__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lmt-space-3);
		padding: 14px 0;
		/* No rule on top: the category head draws one directly above. */
		border-bottom: 1px solid var(--lmt-rule);
		font-size: var(--lmt-size-xs);
		font-weight: 700;
		letter-spacing: var(--lmt-tracking-label);
		text-transform: uppercase;
		cursor: pointer;
	}

	/* A chevron that turns over when it opens. */
	.lmt-refine__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-right: 2px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform var(--lmt-transition);
	}
	.lmt-refine[open] .lmt-refine__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }

	.lmt-refine__toggle-count {
		margin-left: auto;
		display: grid;
		place-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		background: var(--lmt-red);
		color: var(--lmt-white);
		font-size: 11px;
		letter-spacing: 0;
	}

	.lmt-refine[open] .lmt-refine__toggle { border-bottom-color: transparent; }

	.lmt-refine__group {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: var(--lmt-space-3) 0;
	}

	.lmt-refine > .lmt-refine__group:first-of-type { border-top: 0; }

	.lmt-refine__heading { padding-top: 0; }

	/* Smaller here: six of these wrap to three rows, and the rows are the whole
	   reason the block was taller than the screen. */
	.lmt-chip--refine {
		padding: 6px 10px;
		font-size: 13px;
		gap: 5px;
	}
	.lmt-chip--refine .lmt-chip__count { font-size: 10px; }
}

/* ==========================================================================
   The long-form product page

   Everything the old site said about a product, in this site's language. Most
   of it reuses what the section library already has — .lmt-faq, the checklist
   ticks, the display headings — so what is here is only the parts a product
   page has that no other page does.
   ========================================================================== */

/* ---- In the buy column -------------------------------------------------- */

.lmt-product-subtitle {
	margin: -4px 0 0;
	font-size: 17px;
	line-height: 1.4;
	color: var(--lmt-ink-muted);
}

/* Every block in the buy column carries the space below it and none above.
   These carried none either way, so whatever came next sat straight on them:
   with a consult notice following, the two borders touched; with the
   description following, the chip row read as the paragraph's first line. */
.lmt-product-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--lmt-space-5);
	padding: 0;
	list-style: none;
}

.lmt-product-chips li {
	padding: 5px 11px;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
}

.lmt-product-note {
	/* Same join as the notice above: it followed the assurances list with
	   nothing between them. */
	margin: var(--lmt-space-5) 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
	font-size: 14px;
	line-height: 1.5;
	color: var(--lmt-grey-700);
}

/* ---- The sections below ------------------------------------------------- */

/* The buy column already ends on generous space; these follow full width. */
.lmt-product-section { margin-top: 0; }

/* Centred column, so the one collapsed row on the page is not a full-width
   rule with three words on it.

   Not .lmt-product-about — that is already the short blurb up in the buy
   column, and reusing the name put this element's styles on that one. */
.lmt-longdesc {
	max-width: 46rem;
	margin-inline: auto;
}

/* An h2 for the outline, sized as the row it sits in rather than as a
   display heading. */
.lmt-longdesc__title {
	margin: 0;
	font-family: var(--lmt-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

/* The description is written with <br> and asterisked lists, so it needs the
   room a paragraph gets rather than the FAQ answer's tighter column. */
.lmt-longdesc .lmt-longdesc__body {
	max-width: none;
	color: var(--lmt-grey-700);
}

/* ---- How it works ------------------------------------------------------- */

/*
 * Three across, so six cards are two full rows. auto-fit resolved to five at
 * this width and stranded the sixth on a row of its own — and six is what 154
 * of the 155 products carry.
 */
.lmt-howcards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* One hairline between cards rather than a border each: the gap is the
	   rule, the way the comp's grids are drawn. */
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .16);
}

.lmt-howcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--lmt-space-6);
	background: var(--lmt-black);
}

.lmt-howcard__badge {
	margin: 0;
	font-size: var(--lmt-size-xs);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-howcard__title {
	margin: 0;
	font-family: var(--lmt-font-display);
	font-size: 22px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--lmt-white);
}

.lmt-howcard__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--lmt-grey-500);
}

/* ---- Why patients choose it --------------------------------------------- */

/* Always three, on every product that has any. */
.lmt-whypoints {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lmt-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.lmt-whypoint {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--lmt-space-4);
	align-items: start;
	padding-top: var(--lmt-space-4);
	border-top: 2px solid var(--lmt-black);
}

/* The number is a real sequence — these are read in order — not decoration. */
.lmt-whypoint__n {
	font-family: var(--lmt-font-display);
	font-size: 20px;
	line-height: 1;
	color: var(--lmt-red);
}

.lmt-whypoint__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.lmt-whypoint__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lmt-grey-700);
}

.lmt-whypoints__note {
	margin: var(--lmt-space-6) 0 0;
	padding-top: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule);
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lmt-grey-700);
}

/* ---- Overview ----------------------------------------------------------- */

.lmt-overview {
	display: grid;
	gap: var(--lmt-space-7);
	align-items: center;
}

@media (min-width: 900px) {
	.lmt-overview { grid-template-columns: 1fr 1.1fr; gap: 72px; }
	.lmt-overview--noimage { grid-template-columns: 1fr; }
}

.lmt-overview__media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
}

.lmt-overview__body { display: flex; flex-direction: column; gap: var(--lmt-space-4); }

/* The shared checklist runs two columns, which leaves the third tick alone on
   a second row. There are exactly three here, on all 151 that have them. */
.lmt-overview .lmt-checklist__list { grid-template-columns: 1fr; }

.lmt-overview__intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--lmt-grey-700);
}

/* ---- Placing the long-form sections ------------------------------------
   WooCommerce puts everything after the summary inside div.product, which
   this theme lays out as a two-column grid — so the five sections became grid
   items and stacked two to a row, the About sitting beside the How. They span
   the grid instead.

   The box stays in flow at the container's width so its text lines up exactly
   with the gallery, the breadcrumb and the related products; only the
   background reaches the edges of the window. Bleeding the box itself moved
   every heading 7.5px left of everything else on the page, because 50vw counts
   the scrollbar and the container does not.
   ------------------------------------------------------------------------ */

.single-product div.product > .lmt-product-section {
	position: relative;
	grid-column: 1 / -1;
}

/* The grid cell is already inset by the page gutter; the shell would add it
   a second time. */
.single-product div.product > .lmt-product-section > .lmt-shell {
	max-width: none;
	padding-inline: 0;
}

.single-product div.product > .lmt-product-section::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Overhangs by the scrollbar's width, which is invisible on a background
	   and is clipped below in any case. */
	margin-inline: calc( 50% - 50vw );
	z-index: -1;
}

.single-product div.product > .lmt-section--dark::before { background: var(--lmt-black); }
.single-product div.product > .lmt-section--light::before { background: var(--lmt-white); }

/* Clip, not hidden: hidden would make this a scroll container and break the
   sticky header above it. */
.single-product .content-area { overflow-x: clip; }

@media (min-width: 640px) {
	.lmt-howcards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.lmt-howcards { grid-template-columns: repeat(3, 1fr); }
	.lmt-whypoints { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Breadcrumb, and the product gallery
   ========================================================================== */

/* WooCommerce styles this at .woocommerce .woocommerce-breadcrumb, which
   outranked the single class this theme was using — so the margin never
   applied and the trail sat flush against the bottom of the header with no
   space at all above it. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
	margin: var(--lmt-space-6) 0 var(--lmt-space-5);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--lmt-ink-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--lmt-ink-muted);
	text-decoration: underline;
	text-decoration-color: var(--lmt-rule);
	text-underline-offset: 3px;
}
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--lmt-red);
	text-decoration-color: currentColor;
}

/* A rule under it on a product page, where nothing else separates the trail
   from the photograph. The category page has its own ruled header and would
   end up with two lines. */
.single-product .woocommerce-breadcrumb {
	padding-bottom: var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule);
}

/* ---- Gallery ------------------------------------------------------------ */

.single-product div.product .woocommerce-product-gallery { position: relative; }

/* One shape for the main image whatever shape the file is, so moving between
   a square photo and a 2:1 one does not resize the whole column. */
/* :not(.zoomImg) so this never applies to a zoom overlay again — giving that
   copy a square and object-fit is what broke its sizing. */
.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
	aspect-ratio: 1;
	object-fit: contain;
}

/*
 * Thumbnails. WooCommerce floats these at 25% and half-fades them, and with
 * the picture's own proportions left alone a square thumbnail sat beside a
 * 2:1 one at half its height — a ragged row. A square frame each, the image
 * contained inside it.
 */
.single-product.woocommerce div.product div.images ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.single-product.woocommerce div.product div.images ol.flex-control-thumbs li {
	width: auto;
	margin: 0;
	float: none;
	list-style: none;
}

.single-product.woocommerce div.product div.images ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
	background: var(--lmt-white);
	border: 1px solid var(--lmt-rule);
	opacity: 1;
	cursor: pointer;
	transition: border-color var(--lmt-transition);
}

.single-product.woocommerce div.product div.images ol.flex-control-thumbs img:hover,
.single-product.woocommerce div.product div.images ol.flex-control-thumbs img.flex-active {
	border-color: var(--lmt-black);
	opacity: 1;
}

/*
 * The button that opens the lightbox.
 *
 * Ours, not WooCommerce's. Its own magnifier is only created when the hover
 * zoom is on — which it is not, because the zoom laid a 2044px copy of the
 * photo over the top of it — and WordPress turned that one into an emoji
 * served from s.w.org anyway. This one is drawn in CSS and clicks the gallery
 * link, which is what WooCommerce binds the lightbox to when zoom is off.
 */
.lmt-gallery-zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
	font-size: 0;
	text-decoration: none;
	transition: background-color var(--lmt-transition), border-color var(--lmt-transition);
}
.lmt-gallery-zoom:hover { background: var(--lmt-black); border-color: var(--lmt-black); }

.lmt-gallery-zoom::before {
	content: "";
	width: 13px;
	height: 13px;
	border: 2px solid var(--lmt-ink);
	border-radius: 50%;
}
.lmt-gallery-zoom::after {
	content: "";
	position: absolute;
	right: 11px;
	bottom: 11px;
	width: 2px;
	height: 8px;
	background: var(--lmt-ink);
	transform: rotate(-45deg);
}
.lmt-gallery-zoom:hover::before { border-color: var(--lmt-white); }
.lmt-gallery-zoom:hover::after { background: var(--lmt-white); }

/* ---- How it is taken, on the card ---------------------------------------
   A small label over the picture on the listings. Square, like every other
   label on the site — --lmt-radius is 0 and the comp is square-cornered
   throughout.
   ------------------------------------------------------------------------ */

.woocommerce ul.products li.product,
ul.products li.product { position: relative; }

.woocommerce ul.products li.product .lmt-loop-form,
ul.products li.product .lmt-loop-form {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--lmt-ink);
	/* Slightly translucent: the photographs are shot on white and a solid
	   block reads as a sticker stuck on the page rather than part of it. */
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--lmt-rule);
	border-radius: var(--lmt-radius);
}

/* Injections are the one form somebody screens out on sight, so it is the one
   that carries a colour. */
.woocommerce ul.products li.product .lmt-loop-form--injectable,
ul.products li.product .lmt-loop-form--injectable {
	color: var(--lmt-red-dark);
	border-color: var(--lmt-red);
}

/* Two cards to a row on a phone: the picture is 160px wide and the badge was
   taking 92 of them. */
@media (max-width: 559px) {
	.woocommerce ul.products li.product .lmt-loop-form,
	ul.products li.product .lmt-loop-form {
		top: 6px;
		left: 6px;
		padding: 3px 6px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}

/* ---- Repeat this order ---- */

/* Sits directly above Place order, which is where the terms it states become
   binding. Bordered rather than a plain paragraph so it is not read as the
   small print under the total. */
.lmt-subs-optin {
	margin: 0 0 var(--lmt-space-4);
	padding: var(--lmt-space-4);
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-grey-100);
}

.lmt-subs-optin__title {
	margin: 0 0 12px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}

/* This renders inside .form-row.place-order, and WooCommerce's own
   ".woocommerce form .form-row label" reaches it with three classes. Matched
   here so the checkbox and its sentence sit on one line. */
.woocommerce form .form-row label.lmt-subs-optin__row,
.woocommerce-page form .form-row label.lmt-subs-optin__row,
.lmt-subs-optin__row {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	margin: 0 0 12px;
	cursor: pointer;
}

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

   A checkbox drawn as a switch. Square, like every other control in the comp,
   rather than the rounded pill borrowed from a phone. The knob is the input's
   own ::before, which appearance: none allows in every current browser.

   Off draws its track in the muted ink rather than a light grey, so the
   control's edge holds 3:1 against the panel behind it: an off switch still has
   to be seen to be a switch. The movement is a transform, which base.css's
   reduced-motion rule already cuts to nothing. */
.woocommerce-checkout .lmt-subs-optin__row input.lmt-subs-optin__switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 44px; height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--lmt-ink-muted);
	border-radius: var(--lmt-radius);
	background: var(--lmt-white);
	cursor: pointer;
	transition: background var(--lmt-transition), border-color var(--lmt-transition);
}
.woocommerce-checkout .lmt-subs-optin__row input.lmt-subs-optin__switch::before {
	content: "";
	position: absolute;
	top: 3px; left: 3px;
	width: 16px; height: 16px;
	background: var(--lmt-ink-muted);
	transition: transform var(--lmt-transition), background var(--lmt-transition);
}
.woocommerce-checkout .lmt-subs-optin__row input.lmt-subs-optin__switch:checked {
	background: var(--lmt-red);
	border-color: var(--lmt-red);
}
.woocommerce-checkout .lmt-subs-optin__row input.lmt-subs-optin__switch:checked::before {
	background: var(--lmt-white);
	transform: translateX(20px);
}
.woocommerce-checkout .lmt-subs-optin__row input.lmt-subs-optin__switch:focus-visible {
	outline: 2px solid var(--lmt-ink);
	outline-offset: 2px;
}

/* The checkout stylesheet uppercases its labels, and this one is a sentence. */
.woocommerce-checkout .lmt-subs-optin__text,
.lmt-subs-optin__text {
	/* Takes the row, so the sentence wraps against the switch rather than
	   stopping short of it, and every switch lines up on the right edge. */
	flex: 1;
	min-width: 0;
	font-size: 14px; line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.lmt-subs-optin__note {
	margin: 12px 0 0;
	font-size: 12px; line-height: 1.5; color: var(--lmt-ink-muted);
}

/* ==========================================================================
   Order received
   The comp's "Order placed" state from the lab checkout: the confirmation in
   a 640px column on the left, the order in a 460px black panel on the right.
   ========================================================================== */

.lmt-thanks {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	align-items: start;
	margin-block: var(--lmt-space-7) var(--lmt-space-8);
}

.lmt-thanks__main { padding: 64px 80px 80px 0; }
.lmt-thanks__body { max-width: 640px; }

.lmt-thanks__mark {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	margin-bottom: 28px;
	background: var(--lmt-red);
	color: var(--lmt-white);
	font-size: 30px; line-height: 1;
}
.lmt-thanks__mark--failed { background: var(--lmt-black); }

.lmt-thanks__title {
	margin: 0 0 20px;
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: 64px;
	line-height: .95;
	text-transform: uppercase;
}

.lmt-thanks__lede {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--lmt-grey-700);
}
.lmt-thanks__lede strong { color: var(--lmt-ink); font-weight: 700; }

/* A gateway's own instructions, set apart so they read as the thing to act on. */
.lmt-thanks__payment {
	margin-bottom: 32px;
	padding: 24px 28px;
	background: var(--lmt-grey-100);
	border-left: 3px solid var(--lmt-red);
	font-size: 15px;
	line-height: 1.6;
}
.lmt-thanks__payment > :first-child { margin-top: 0; }
.lmt-thanks__payment > :last-child { margin-bottom: 0; }
.lmt-thanks__payment h2,
.lmt-thanks__payment h3 {
	margin: 0 0 8px;
	font-family: var(--lmt-font-body);
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lmt-thanks__payment p { margin: 0; }
/* Zelle closes its notice with <br><hr><br>, which would draw a rule and two
   blank lines inside a box that already has an edge. */
.lmt-thanks__payment > br,
.lmt-thanks__payment > hr { display: none; }

.lmt-thanks__next {
	display: flex; flex-direction: column; gap: 16px;
	margin-bottom: 32px;
	padding: 28px;
	border: 1px solid var(--lmt-grey-300);
}
.lmt-thanks__next-title {
	margin: 0;
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--lmt-grey-500);
}
.lmt-thanks__steps {
	display: flex; flex-direction: column; gap: 16px;
	margin: 0; padding: 0;
	list-style: none;
}
.lmt-thanks__step { display: flex; gap: 14px; font-size: 16px; line-height: 1.5; }
.lmt-thanks__step-n { flex: none; font-family: var(--lmt-font-display); color: var(--lmt-red); }

.lmt-thanks__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lmt-thanks__link { padding: 18px 8px; font-size: 16px; font-weight: 700; color: var(--lmt-ink); }
.lmt-thanks__link:hover { color: var(--lmt-red); }

.lmt-thanks__extra { margin-top: 32px; }

/* ---- The summary panel ---- */

.lmt-thanks__summary {
	display: flex; flex-direction: column; gap: 28px;
	padding: 64px 48px;
	background: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-thanks__eyebrow {
	margin: 0 0 -12px;
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-thanks__items {
	display: flex; flex-direction: column; gap: 14px;
	margin: 0; padding: 0 0 24px;
	list-style: none;
	border-bottom: 1px solid var(--lmt-black-line);
}
.lmt-thanks__item {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	font-size: 15px; line-height: 1.4;
}
.lmt-thanks__item-name { font-weight: 600; }
.lmt-thanks__item-qty { margin-left: 6px; font-weight: 400; color: #bbb; }
.lmt-thanks__item-price { flex: none; font-variant-numeric: tabular-nums; }

.lmt-thanks__rows { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: 15px; }
.lmt-thanks__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lmt-thanks__row dt { color: #bbb; font-weight: 400; }
.lmt-thanks__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* WooCommerce appends "via <shipping method>" in a small tag inside the value. */
.lmt-thanks__row dd small { display: block; font-size: 12px; color: #bbb; }

.lmt-thanks__row--total {
	margin-top: 2px;
	padding-top: 14px;
	border-top: 1px solid var(--lmt-black-line);
	font-size: 18px;
}
.lmt-thanks__row--total dt { color: var(--lmt-white); }
.lmt-thanks__row--total dd { font-family: var(--lmt-font-display); font-size: 32px; line-height: 1; }

.lmt-thanks__ship {
	padding: 18px 20px;
	background: var(--lmt-black-soft);
	font-size: 13px; line-height: 1.6;
	color: #bbb;
}
.lmt-thanks__ship-title {
	margin: 0 0 6px;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--lmt-grey-500);
}
.lmt-thanks__ship address { font-style: normal; }

/* ---- Narrow screens: the comp's mobile state ---- */

@media (max-width: 960px) {
	.lmt-thanks { grid-template-columns: minmax(0, 1fr); margin-block: var(--lmt-space-6); }
	.lmt-thanks__main { padding: 0 0 var(--lmt-space-6); }
	.lmt-thanks__mark { width: 52px; height: 52px; margin-bottom: 20px; font-size: 24px; }
	.lmt-thanks__title { font-size: 44px; margin-bottom: 12px; }
	.lmt-thanks__lede { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
	.lmt-thanks__next { padding: 18px; gap: 10px; }
	.lmt-thanks__steps { gap: 10px; }
	.lmt-thanks__step { font-size: 14px; gap: 12px; }
	.lmt-thanks__actions .lmt-btn { flex: 1 1 100%; text-align: center; }
	.lmt-thanks__summary { padding: 32px 24px; }
}