/* ==========================================================================
   Components — buttons, badges, cards, header, footer.
   ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */

.lmt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lmt-space-2);
	padding: 14px 24px;
	/* Comp sets buttons at 15px with a hair of tracking. */
	font-size: 15px;
	letter-spacing: 0.02em;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--lmt-radius);
	cursor: pointer;
	transition: background-color var(--lmt-transition), color var(--lmt-transition), border-color var(--lmt-transition);
}

.lmt-btn--primary {
	background: var(--lmt-red);
	border-color: var(--lmt-red);
	color: var(--lmt-white);
}
.lmt-btn--primary:hover { background: var(--lmt-red-dark); border-color: var(--lmt-red-dark); }

.lmt-btn--dark {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}
.lmt-btn--dark:hover { background: var(--lmt-black-raised); }

.lmt-btn--outline {
	background: transparent;
	border-color: var(--lmt-black);
	color: var(--lmt-black);
}
.lmt-btn--outline:hover { background: var(--lmt-black); color: var(--lmt-white); }

.lmt-section--dark .lmt-btn--outline {
	border-color: var(--lmt-white);
	color: var(--lmt-white);
}
.lmt-section--dark .lmt-btn--outline:hover { background: var(--lmt-white); color: var(--lmt-black); }

.lmt-btn--block { width: 100%; }

/* ---- Badges ------------------------------------------------------------ */

.lmt-badge {
	display: inline-block;
	padding: 4px 9px;
	font-size: var(--lmt-size-xs);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

.lmt-badge--confirmed { background: var(--lmt-black); color: var(--lmt-white); }
.lmt-badge--pending   { background: var(--lmt-pending-tint); color: var(--lmt-red); }
.lmt-badge--neutral   { background: var(--lmt-neutral-tint); color: var(--lmt-grey-700); }
.lmt-badge--new       { background: var(--lmt-red); color: var(--lmt-white); }

/* ---- Card -------------------------------------------------------------- */

.lmt-card {
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	padding: var(--lmt-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-3);
}

.lmt-card--dark {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-card__meta {
	font-size: var(--lmt-size-sm);
	color: var(--lmt-ink-muted);
}
.lmt-card--dark .lmt-card__meta { color: var(--lmt-grey-500); }

/* ---- Alert bar (comp: bloodwork banner) -------------------------------- */

.lmt-alert {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--lmt-space-4);
	align-items: center;
	border: 1px solid var(--lmt-red);
	padding: var(--lmt-space-5);
	background: var(--lmt-white);
}
.lmt-alert__mark {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	background: var(--lmt-red);
	color: var(--lmt-white);
	font-weight: 800;
	line-height: 1;
}
/* The middle grid column: holds the title and its explanation. */
.lmt-alert__body { min-width: 0; }
.lmt-alert__title { font-weight: 700; }
.lmt-alert__text {
	font-size: var(--lmt-size-sm);
	color: var(--lmt-ink-muted);
	margin-top: 4px;
}

@media (max-width: 700px) {
	.lmt-alert { grid-template-columns: auto 1fr; }
	.lmt-alert > :last-child { grid-column: 1 / -1; }
}

/* ---- WooCommerce notices ------------------------------------------------
   Woo ships these as a rounded grey box with a 3px lime rule across the top
   and a tick drawn from its own icon font — a different website's idea of a
   message, printed above ours. Same shape as .lmt-alert instead: white, one
   hairline, and a bar down the left in the colour of what happened.
   ------------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--lmt-space-5);
	padding: 16px 20px;
	border: 1px solid var(--lmt-rule);
	border-left: 3px solid var(--lmt-ink);
	border-radius: 0;
	background: var(--lmt-white);
	color: var(--lmt-ink);
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}

/* Woo's tick, cross and (i) all come from its icon font. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-noreviews::before { content: none; }

.woocommerce-message { border-left-color: var(--lmt-ok); }
.woocommerce-error { border-left-color: var(--lmt-red); }

.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a { color: var(--lmt-ink); font-weight: 700; }

/* The "View cart" / "Continue" links Woo puts inside a notice: a link in a
   sentence, not a second call to action competing with the page's own.

   Qualified with the element, because WooCommerce reaches the same link as
   ".woocommerce:where(...) a.button" — :where() adds nothing, so that is two
   classes and an element, and a plain ".woocommerce-message .button" lost to
   it. This rule was written but never applied: the link rendered as Woo's own
   lavender-grey pill with rounded corners, on the account dashboard and
   anywhere else an add-to-cart notice lands. */
.woocommerce-message a.button,
.woocommerce-message button.button,
.woocommerce-error a.button,
.woocommerce-error button.button,
.woocommerce-info a.button,
.woocommerce-info button.button,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	align-self: flex-start;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	color: var(--lmt-red);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-message a.button:hover,
.woocommerce-message button.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-error button.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-info button.button:hover,
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover { background: none; text-decoration: underline; }

/* ---- Site header ------------------------------------------------------- */

/* The bar is black and the panel it opens is white — the inverse of what they
   were. The toggle bars and the account link both take currentColor, so the
   colour set here carries them. */
.lmt-header {
	position: sticky;
	top: var(--lmt-admin-bar);
	z-index: 50;
	background: var(--lmt-black);
	color: var(--lmt-white);
	border-bottom: 1px solid #222;
}

.lmt-header__inner {
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding: 0 var(--lmt-gutter);
	min-height: var(--lmt-header-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--lmt-space-4);
}

/*
 * The GoHighLevel chat widget injects its <chat-widget> element into this grid,
 * after hydration. It is zero pixels tall and invisible, but a grid item is a
 * grid item: it opened a second row, and the bar's own contents were pushed
 * about 21px up to make space for it — the header loading correctly and then
 * jumping. Anything that is not one of the three things the bar is made of is
 * taken out of the grid's flow; it still renders, and its own fixed-position
 * bubble is unaffected.
 */
.lmt-header__inner > :not(.lmt-menu-toggle):not(.lmt-header__brand):not(.lmt-header__end) {
	position: absolute;
}

.lmt-header__brand { justify-self: center; display: inline-flex; }
.lmt-header__brand img { max-height: 40px; width: auto; }
.lmt-header__brand-text {
	font-family: var(--lmt-font-display);
	text-transform: uppercase;
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0.01em;
}

.lmt-header__end {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--lmt-space-4);
}

/* ---- The cart, where the booking button used to be -------------------- */

.lmt-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A 44px target: this replaced a button, and an icon is a smaller thing
	   to hit than the words it replaced. */
	width: 44px;
	height: 44px;
	margin-right: -8px;
	color: var(--lmt-white);
	border-radius: var(--lmt-radius);
	transition: background var(--lmt-transition), color var(--lmt-transition);
}
.lmt-cart:hover,
.lmt-cart:focus-visible { background: rgba(255, 255, 255, .12); }

.lmt-cart__icon { display: block; }

/* The count rides on the bag rather than beside it, so the control stays one
   thing at one size whether the cart is empty or full. */
.lmt-cart__count {
	position: absolute;
	top: 4px;
	right: 3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--lmt-red);
	color: var(--lmt-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* The same highlight the search and cart buttons get, so the three controls
   in this row behave alike. It only underlined before, which made it the odd
   one out on hover. */
.lmt-header__login {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding-inline: 10px;
	font-size: var(--lmt-size-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--lmt-radius);
	transition: background var(--lmt-transition), color var(--lmt-transition);
}
.lmt-header__login:hover,
.lmt-header__login:focus-visible { background: rgba(255, 255, 255, .12); }

.lmt-menu-toggle {
	display: inline-flex;
	justify-self: start;
	align-items: center;
	gap: var(--lmt-space-3);
	background: none;
	border: 0;
	padding: var(--lmt-space-2) 0;
	cursor: pointer;
	font-size: var(--lmt-size-sm);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
}
.lmt-menu-toggle__bars {
	display: grid;
	gap: 4px;
	width: 22px;
}
.lmt-menu-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform var(--lmt-transition), opacity var(--lmt-transition);
}
.lmt-menu-toggle[aria-expanded="true"] .lmt-menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lmt-menu-toggle[aria-expanded="true"] .lmt-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.lmt-menu-toggle[aria-expanded="true"] .lmt-menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu panel — comp: a full-width black sheet dropping under the header,
   not a full-screen takeover. Fixed rather than absolute so it stays put
   under the sticky header while the page behind it scrolls. */
.lmt-nav-panel {
	position: fixed;
	top: calc(var(--lmt-header-h) + var(--lmt-admin-bar));
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
	background: var(--lmt-white);
	color: var(--lmt-ink);
	border-bottom: 1px solid var(--lmt-rule);
	overflow-y: auto;
	z-index: 49;

	/*
	 * Hidden by visibility rather than display, so the sheet has something to
	 * animate from — display cannot be transitioned, and the panel used to
	 * appear fully formed in a single frame. visibility still takes it out of
	 * the tab order while it is shut, which is the reason not to reach for
	 * opacity alone.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition:
		opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 260ms;
}

.lmt-nav-panel[data-open="true"] {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition:
		opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s;
}

/*
 * The columns follow the sheet in, a beat apart — the same 70ms step the
 * scroll reveals use, so the menu moves like the rest of the site.
 */
.lmt-nav-panel .lmt-nav-col,
.lmt-nav-panel .lmt-nav-account {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lmt-nav-panel[data-open="true"] .lmt-nav-col,
.lmt-nav-panel[data-open="true"] .lmt-nav-account { opacity: 1; transform: none; }

.lmt-nav-panel[data-open="true"] .lmt-nav-col:nth-child(1) { transition-delay: 60ms; }
.lmt-nav-panel[data-open="true"] .lmt-nav-col:nth-child(2) { transition-delay: 130ms; }
.lmt-nav-panel[data-open="true"] .lmt-nav-col:nth-child(3) { transition-delay: 200ms; }
.lmt-nav-panel[data-open="true"] .lmt-nav-col:nth-child(n + 4) { transition-delay: 270ms; }
.lmt-nav-panel[data-open="true"] .lmt-nav-account { transition-delay: 270ms; }

/* Closing, they go together: a staggered exit reads as the menu hesitating. */
.lmt-nav-panel:not([data-open="true"]) .lmt-nav-col,
.lmt-nav-panel:not([data-open="true"]) .lmt-nav-account {
	transition-duration: 120ms;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.lmt-nav-panel,
	.lmt-nav-panel .lmt-nav-col,
	.lmt-nav-panel .lmt-nav-account { transform: none; transition: none; }
}

.lmt-nav-panel__grid {
	display: grid;
	gap: 40px var(--lmt-space-6);
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding: 40px var(--lmt-gutter);
}

/* Comp: 533 / 333 / 333 at a 64px gap, 56px 56px 64px padding. */
@media (min-width: 900px) {
	.lmt-nav-panel__grid {
		grid-template-columns: 1.6fr 1fr 1fr;
		gap: 64px;
		/* The comp runs 40 top / 84 bottom. 40 read as tight under the header,
		   so the air is redistributed rather than added: the panel stays about
		   the same height and the content sits off the edge. */
		padding: 56px var(--lmt-gutter) 68px;
	}
}

.lmt-nav-col { min-width: 0; display: flex; flex-direction: column; }
.lmt-nav-col--display { gap: 24px; }
.lmt-nav-col--list { gap: 17.5px; }

.lmt-nav-col__title {
	font-size: 12px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-nav-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.lmt-nav-col__links a {
	display: block;
	text-decoration: none;
	color: var(--lmt-ink);
}

/* Plain columns: 18px semibold, comfortable target height. */
.lmt-nav-col--list .lmt-nav-col__links a {
	padding-block: 6.5px;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
}
.lmt-nav-col--list .lmt-nav-col__links a:hover .lmt-nav-col__label { color: var(--lmt-red); }

/* The treatments column. Comp: a two-column grid of rows, each row holding
   the name on the left and the price hard right, with a hairline beneath.
   Columns are 250 / 243 at a 6px / 40px gap; rows are 10px 0 with a 1px
   #222 rule. */
.lmt-nav-col--display .lmt-nav-col__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 40px;
}

.lmt-nav-col--display .lmt-nav-col__links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-nav-col--display .lmt-nav-col__label {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(1.375rem, 1rem + 1.1vw, 1.875rem);
	line-height: 1.1;
	text-transform: uppercase;
	/* One line per row, as the comp has it: wrapping doubled the row height. */
	white-space: nowrap;
}
.lmt-nav-col--display .lmt-nav-col__links a:hover .lmt-nav-col__label { color: var(--lmt-red); }

/* Inline beside the name, not stacked under it. */
.lmt-nav-col--display .lmt-nav-col__meta {
	display: inline;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lmt-grey-700);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.lmt-nav-col--display .lmt-nav-col__links { grid-template-columns: minmax(0, 1fr); }
}

.lmt-nav-col__contact {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--lmt-rule);
	font-size: 14px;
}
.lmt-nav-col__hours { color: var(--lmt-grey-700); margin-bottom: 4px; }
.lmt-nav-col__phone { color: var(--lmt-ink); font-weight: 700; text-decoration: none; }
.lmt-nav-col__phone:hover { color: var(--lmt-red); }

@media (max-width: 720px) {
	.lmt-header__login { display: none; }
	.lmt-header__inner { grid-template-columns: auto 1fr auto; }
	.lmt-header__brand { justify-self: center; }
	.lmt-menu-toggle__label { display: none; }
}

/* ---- Site footer ------------------------------------------------------- */

.lmt-footer {
	background: var(--lmt-black);
	color: var(--lmt-white);
	/* Comp: 72px top, 40px bottom. */
	padding-block: clamp(3rem, 6vw, 4.5rem) var(--lmt-space-6);
}

.lmt-footer__grid {
	display: grid;
	gap: var(--lmt-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Comp: brand column is wider than the link columns. */
@media (min-width: 1000px) {
	.lmt-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.7fr; gap: 48px; }
}

.lmt-footer__brand {
	display: flex;
	flex-direction: column;
	/* Without this the logo stretches to the column: it has no intrinsic size,
	   so a flex column sizes it to the full width and max-height flattens it. */
	align-items: flex-start;
	gap: var(--lmt-space-4);
}
.lmt-footer__brand img {
	width: auto;
	max-width: 180px;
	max-height: 40px;
}
.lmt-footer__address { font-size: var(--lmt-size-sm); color: var(--lmt-grey-400); }
.lmt-footer__address a { font-size: 15px; font-weight: 600; color: var(--lmt-white); }

.lmt-footer__col-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow);
	text-transform: uppercase;
	color: #888;
	margin-bottom: var(--lmt-space-4);
}

.lmt-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lmt-space-3); }
.lmt-footer__list a { font-size: 15px; text-decoration: none; color: #ddd; }
.lmt-footer__list a:hover { color: var(--lmt-red); }

.lmt-footer__bottom {
	padding-top: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-black-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--lmt-space-3) var(--lmt-space-5);
	justify-content: space-between;
	font-size: var(--lmt-size-sm);
	color: #777;
}
.lmt-footer__bottom a { color: var(--lmt-grey-500); text-decoration: none; }
.lmt-footer__bottom a:hover { color: var(--lmt-white); }

/* ---- Newsletter -------------------------------------------------------- */

/* Comp: 14px at #aaa on a 21px leading. */
.lmt-footer__news {
	font-size: 14px;
	line-height: 1.5;
	color: #aaa;
	margin-bottom: var(--lmt-space-4);
}

.lmt-subscribe { display: flex; width: 100%; max-width: 340px; }
.lmt-subscribe input[type="email"] { flex: 1 1 auto; min-width: 0; }
.lmt-subscribe button { flex: none; white-space: nowrap; }
.lmt-subscribe input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--lmt-black-line);
	background: var(--lmt-black-raised);
	color: var(--lmt-white);
	font: inherit;
	font-size: var(--lmt-size-sm);
}
.lmt-subscribe input::placeholder { color: var(--lmt-grey-500); }
.lmt-subscribe button {
	flex: 0 0 auto;
	padding: 12px 18px;
	border: 0;
	background: var(--lmt-red);
	color: var(--lmt-white);
	font-weight: 700;
	font-size: var(--lmt-size-sm);
	cursor: pointer;
}
.lmt-subscribe button:hover { background: var(--lmt-red-dark); }

/* ---- Forms ------------------------------------------------------------- */

.lmt-form-layout { display: grid; gap: var(--lmt-space-7); }
.lmt-form-layout > * { min-width: 0; }

@media (min-width: 900px) {
	.lmt-form-layout { grid-template-columns: 1fr 1fr; gap: var(--lmt-space-8); align-items: start; }

	/* The heading stays beside the fields it introduces, the same way the proof
	   panel follows the quotes. Not on the rail shape: there the left column is
	   the form, and the rail is what travels. */
	.lmt-form-layout:not(.lmt-form-layout--rail) > .lmt-stack { align-self: stretch; }

	.lmt-form__intro-inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

/*
 * lmt_section_head() splits into a heading and a 24rem support column, which
 * is right across a full-width band and wrong inside one half of this one:
 * the heading was left about eight characters a line — "TELL US / WHICH /
 * PANEL / YOU / WANT" — with the intro pushed off to the right and
 * bottom-aligned against nothing. In a column it stacks, the way the booking
 * shape already does.
 */
.lmt-form__intro-inner .lmt-head {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lmt-space-4);
	align-items: start;
	margin-bottom: 0;
}

.lmt-form__intro-inner .lmt-head__main .lmt-display-2 { max-width: 18ch; }
.lmt-form__intro-inner .lmt-head__side p { max-width: 34rem; }

.lmt-form-wrap {
	background: var(--lmt-white);
	border: 1px solid var(--lmt-rule);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* Comp: two-up field grid at 20px/24px, capped at 720px. */
.lmt-form__fields { display: grid; gap: 20px 24px; }

@media (min-width: 620px) {
	.lmt-form__fields { grid-template-columns: 1fr 1fr; }
	.lmt-field--textarea,
	.lmt-field--select,
	.lmt-field--chips,
	.lmt-field--checkbox { grid-column: 1 / -1; }

	/* Comp: first and last name share a row, the address takes its own. */
	.lmt-guide-gate .lmt-field--email { grid-column: 1 / -1; }
}

.lmt-field { display: flex; flex-direction: column; gap: 8px; }

.lmt-field__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
}

.lmt-field__req { color: var(--lmt-red); margin-left: 2px; }

.lmt-input {
	width: 100%;
	/* Comp: 16px all round on a tight line. The field inherited the body's
	   leading, which gave it a 28px content box and left the padding looking
	   lopsided against a 53px field in the design. The line-height has to come
	   after `font: inherit`, which is a shorthand and resets it. */
	padding: 16px;
	font: inherit;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	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);
}
textarea.lmt-input { line-height: 1.5; }

.lmt-input:hover { border-color: var(--lmt-grey-600); }
.lmt-input:focus {
	border-color: var(--lmt-black);
	outline: 2px solid var(--lmt-red);
	outline-offset: 1px;
}

select.lmt-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 42px;
}

textarea.lmt-input { resize: vertical; min-height: 7rem; }

.lmt-field__help { font-size: var(--lmt-size-sm); color: var(--lmt-ink-muted); }

.lmt-field--error .lmt-input { border-color: var(--lmt-red); }
.lmt-field__error { font-size: var(--lmt-size-sm); color: var(--lmt-red-dark); font-weight: 600; }

.lmt-form__errors {
	border-left: 3px solid var(--lmt-red);
	background: var(--lmt-red-tint);
	padding: var(--lmt-space-3) var(--lmt-space-4);
	margin-bottom: var(--lmt-space-4);
	font-size: var(--lmt-size-sm);
	font-weight: 600;
	color: var(--lmt-red-dark);
}

/* Comp: the form's submit is a full-width primary action at 18px padding and
   16px type, a step up from the 15px buttons in the header. */
.lmt-form__submit {
	margin-top: var(--lmt-space-5);
	width: 100%;
	/* 17px, not 18: the button carries a 1px border the comp's does not, and
	   the pair lands on the comp's 55px. */
	padding: 17px;
	font-size: 16px;
}

.lmt-form__success {
	border: 1px solid var(--lmt-ok);
	background: var(--lmt-ok-tint);
	color: var(--lmt-ok);
	padding: var(--lmt-space-5);
	font-weight: 600;
}

/* Honeypot — hidden from people, reachable by bots. */
.lmt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Editor-only empty state ------------------------------------------- */

.lmt-empty-state {
	border: 1px dashed var(--lmt-grey-400);
	background: var(--lmt-ground-alt);
	padding: var(--lmt-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--lmt-space-3);
	max-width: var(--lmt-measure);
}
.lmt-empty-state p { margin: 0; }

/* Large hero buttons, per the comp's 20px/36px padding. */
.lmt-btn--lg { padding: 18px 32px; font-size: var(--lmt-size-base); }

/* Ghost button for use over imagery. */
.lmt-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: var(--lmt-white);
}
.lmt-btn--ghost:hover { border-color: var(--lmt-white); background: rgba(255, 255, 255, .1); }

/* ---- Form rail (comp: booking screen summary panel) --------------------- */

/* Comp: the rail is not a card sitting in the page. It is a full-height panel
   bled to the right edge of the window, starting directly under the header —
   440px of it at 1440, with the content column filling the rest. */
.lmt-section--flush { padding-block: 0; }

.lmt-form-layout--rail {
	max-width: none;
	padding-inline: 0;
	gap: 0;
	align-items: stretch;
}

.lmt-form-layout--rail > .lmt-stack {
	padding: 56px var(--lmt-gutter) 64px;
	min-width: 0;
}

/* The headline runs the width of its column here rather than the 20ch the
   split head caps it to, so it sets on one line as the comp does. */
.lmt-form-layout--rail .lmt-display-2 { max-width: none; }

/* No card around the fields — the comp sets them straight on the page. */
.lmt-form-layout--rail .lmt-form-wrap {
	background: none;
	border: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.lmt-form-layout--rail {
		grid-template-columns: minmax(0, 1fr) clamp(20rem, 30vw, 27.5rem);
		min-height: calc(100dvh - var(--lmt-header-h) - var(--lmt-admin-bar));
	}
}

.lmt-rail {
	background: var(--lmt-black);
	color: var(--lmt-white);
	padding: 64px 48px;
}

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

/*
 * What happens next follows the reader down the form. The panel stays put so
 * the black still runs the full height of the column; only the words inside it
 * move, and they stop where the panel ends. Clear of the sticky header, and the
 * admin bar when there is one.
 */
@media (min-width: 900px) {
	.lmt-rail__inner {
		position: sticky;
		top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 40px);
	}
}

@media (max-width: 899px) {
	.lmt-rail { padding: var(--lmt-space-6) var(--lmt-gutter); }
}

.lmt-rail__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-rail__rows { margin: 0; display: flex; flex-direction: column; }

.lmt-rail__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lmt-space-4);
	padding-block: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-size: 14px;
}
.lmt-rail__row:last-child { border-bottom: 0; }

.lmt-rail__row dt { color: #bbb; }
.lmt-rail__row dd { margin: 0; font-weight: 700; text-align: right; }

.lmt-rail__note {
	background: rgba(255, 255, 255, .06);
	padding: var(--lmt-space-4);
	font-size: 13px;
	line-height: 1.55;
	color: #ccc;
}
.lmt-rail__note strong { color: var(--lmt-white); }

/* Directly under the note, as the comp has it — not pushed to the foot of a
   full-height panel where it falls below the fold. */
.lmt-rail__rating { margin-top: 0; }

/* Intro sitting directly under the headline (comp: booking screen), rather
   than in the side column a split head would give it. */
.lmt-head__intro {
	font-size: var(--lmt-size-base);
	line-height: 1.5;
	color: #555;
	max-width: var(--lmt-measure);
}

/* ---- Chips (comp: "what are you interested in?") ----------------------- */

.lmt-field--chips { border: 0; padding: 0; margin: 0; min-width: 0; }

.lmt-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.lmt-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	font-size: var(--lmt-size-sm);
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	cursor: pointer;
	transition: background-color var(--lmt-transition), border-color var(--lmt-transition), color var(--lmt-transition);
}
.lmt-chip:hover { border-color: var(--lmt-black); }

/* The radio itself is visually hidden but stays focusable, so the chip can be
   reached and toggled by keyboard. */
.lmt-chip__input {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lmt-chip__input:checked + .lmt-chip {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

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

/* ---- Consent checkbox --------------------------------------------------- */

.lmt-field--checkbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.lmt-checkbox {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--lmt-red);
	flex: none;
}

.lmt-checkbox__label {
	font-size: 13px;
	line-height: 1.45;
	color: var(--lmt-ink-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.lmt-guide-gate .lmt-checkbox__label { color: #999; }
.lmt-checkbox__label a { color: inherit; }

.lmt-field--checkbox .lmt-field__error { grid-column: 1 / -1; }

/* ---- Account, inside the menu -------------------------------------------
   Only where the header has no room for it. Above 720 the header carries the
   link and this would be the same thing said twice.
   ---------------------------------------------------------------------- */

.lmt-nav-account { display: none; }

@media (max-width: 720px) {
	.lmt-nav-account {
		display: grid;
		gap: 12px;
		max-width: var(--lmt-max);
		margin-inline: auto;
		padding: 0 var(--lmt-gutter) 40px;
	}

	.lmt-nav-account__primary,
	.lmt-nav-account__alt {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 12px 20px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		border: 1px solid var(--lmt-black);
	}

	.lmt-nav-account__primary { background: var(--lmt-black); color: var(--lmt-white); }
	.lmt-nav-account__alt { background: transparent; color: var(--lmt-ink); }
	.lmt-nav-account__alt:hover { background: var(--lmt-black); color: var(--lmt-white); }
}

/* The newsletter box answers in place: the form is replaced by the confirmation
   after a redirect, and an error sits under the row rather than beside the
   field, which is a flex item and would otherwise squeeze it. */
.lmt-subscribe__done {
	max-width: 340px;
	font-size: var(--lmt-size-sm);
	line-height: 1.5;
	color: var(--lmt-grey-400);
}
.lmt-subscribe__error {
	flex-basis: 100%;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--lmt-red);
}
.lmt-signup .lmt-subscribe__done { color: var(--lmt-ink-muted); }

/* ---- Account menu in the header ----------------------------------------
   Opens on hover and on focus. The trigger is still a link to the account,
   so a touch screen — which has no hover — gets there in one tap rather
   than being stuck at a menu it cannot open.
   ------------------------------------------------------------------------ */

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

.lmt-useraccount__trigger { display: inline-flex; align-items: center; gap: 7px; }

.lmt-useraccount__caret {
	width: 0; height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--lmt-transition);
}

.lmt-useraccount__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 13rem;
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	background: var(--lmt-white);
	border: 1px solid var(--lmt-rule);
	color: var(--lmt-ink);

	/* Hidden by visibility so it can fade rather than appear; see the nav
	   panel, which had the same problem with display. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition:
		opacity 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 180ms;
}

/*
 * The gap between the link and the panel would drop the hover on the way
 * down, so the panel's own hit area reaches back up to meet it.
 */
.lmt-useraccount__menu::before {
	content: "";
	position: absolute;
	inset: -10px 0 100% 0;
}

.lmt-useraccount:hover .lmt-useraccount__menu,
.lmt-useraccount:focus-within .lmt-useraccount__menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition:
		opacity 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s;
}

.lmt-useraccount:hover .lmt-useraccount__caret,
.lmt-useraccount:focus-within .lmt-useraccount__caret { transform: rotate(180deg); }

.lmt-useraccount__menu a {
	padding: 10px 18px;
	font-size: var(--lmt-size-sm);
	font-weight: 600;
	color: var(--lmt-ink);
	text-decoration: none;
	white-space: nowrap;
}
.lmt-useraccount__menu a:hover { background: var(--lmt-grey-100); }
.lmt-useraccount__menu a:focus-visible { outline: 2px solid var(--lmt-red); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
	.lmt-useraccount__menu { transform: none; transition: none; }
	.lmt-useraccount__caret { transition: none; }
}

/* ==========================================================================
   The cart drawer

   Lives in components rather than the shop stylesheet: the header carries a
   cart on every page, so the thing it opens has to be styled on every page
   too.
   ========================================================================== */

.lmt-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.lmt-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity var(--lmt-transition);
}
.lmt-drawer[data-open="true"] .lmt-drawer__scrim { opacity: 1; }

.lmt-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--lmt-white);
	border-left: 1px solid var(--lmt-rule);
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
}
.lmt-drawer[data-open="true"] .lmt-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.lmt-drawer__scrim,
	.lmt-drawer__panel { transition: none; }
}

/* Full width: the border would read as a seam down the edge of the screen. */
@media (max-width: 420px) {
	.lmt-drawer__panel { border-left: 0; }
}

.lmt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lmt-space-4);
	padding: var(--lmt-space-5);
	border-bottom: 1px solid var(--lmt-rule);
}

.lmt-drawer__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lmt-ink-muted);
	cursor: pointer;
	border-radius: var(--lmt-radius);
}
.lmt-drawer__close:hover { background: var(--lmt-grey-100); color: var(--lmt-ink); }

/* The list scrolls; the total and the buttons do not. */
.lmt-drawer .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lmt-drawer ul.woocommerce-mini-cart.cart_list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: var(--lmt-space-5);
	list-style: none;
}

/*
 * A line is the product link, then the quantity under it, then the remove
 * control off to the right. The link is WooCommerce's own and holds both the
 * thumbnail and the name, so it carries the inner two-column grid and the line
 * itself only has to separate that from the ×.
 */
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	--lmt-mini-thumb: 64px;
	display: grid;
	grid-template-columns: 1fr 24px;
	gap: 6px var(--lmt-space-4);
	align-items: start;
	padding: 0 0 var(--lmt-space-4);
	margin: 0 0 var(--lmt-space-4);
	border-bottom: 1px solid var(--lmt-rule);
	font-size: 15px;
}
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:last-child { border-bottom: 0; margin-bottom: 0; }

.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove) {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: var(--lmt-mini-thumb) 1fr;
	gap: var(--lmt-space-4);
	align-items: center;
	font-weight: 700;
	color: var(--lmt-ink);
	text-decoration: none;
	line-height: 1.35;
}
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--lmt-red); }

.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	width: var(--lmt-mini-thumb);
	height: var(--lmt-mini-thumb);
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
	background: var(--lmt-grey-100);
	border: 1px solid var(--lmt-rule);
	margin: 0;
	float: none;
}

/* Sits under the name, clear of the thumbnail beside it. */
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
	grid-column: 1;
	grid-row: 2;
	padding-left: calc( var(--lmt-mini-thumb) + var(--lmt-space-4) );
	font-size: 14px;
	color: var(--lmt-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce's remove control is a small × it positions absolutely. */
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
	grid-column: 2;
	grid-row: 1;
	position: static;
	width: 24px;
	height: 24px;
	line-height: 22px;
	font-size: 18px;
	text-align: center;
	color: var(--lmt-ink-muted);
	background: none;
}
.lmt-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:hover { color: var(--lmt-red); background: none; }

.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lmt-space-4);
	margin: 0;
	padding: var(--lmt-space-5);
	border-top: 1px solid var(--lmt-rule);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lmt-ink-muted);
}
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__total .amount,
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__total strong {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lmt-ink);
}

.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__buttons {
	display: grid;
	gap: 10px;
	margin: 0;
	/* Clear of the home indicator where the panel runs to the bottom edge. */
	padding: 0 var(--lmt-space-5) calc( var(--lmt-space-5) + env( safe-area-inset-bottom, 0px ) );
}
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__buttons a.button {
	display: block;
	width: 100%;
	padding: 16px 20px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--lmt-radius);
	border: 1px solid var(--lmt-black);
	background: transparent;
	color: var(--lmt-ink);
	text-decoration: none;
}
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__buttons a.button:hover { background: var(--lmt-black); color: var(--lmt-white); }

/* Checkout is the one to press, so it looks like it. */
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__buttons a.button.checkout {
	order: -1;
	background: var(--lmt-red);
	border-color: var(--lmt-red);
	color: var(--lmt-white);
}
.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__buttons a.button.checkout:hover {
	background: var(--lmt-red-dark);
	border-color: var(--lmt-red-dark);
	color: var(--lmt-white);
}

.lmt-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__empty-message {
	padding: var(--lmt-space-7) var(--lmt-space-5);
	margin: 0;
	text-align: center;
	color: var(--lmt-ink-muted);
}

/* ---- Header search ------------------------------------------------------
   A link to the results page, not a field. The bar is a three-column grid
   with the logo fixed in the middle, and a box wide enough to type into
   either squashed it or opened a second row.
   ------------------------------------------------------------------------ */

/* Sized and shaped like the cart beside it: same 44px target, same square
   corner the comp uses throughout, same hover. A round highlight next to a
   square one in the same bar reads as a mistake, which it was. */
.lmt-header__search {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	/* It is a <button>, so the browser's own chrome has to come off — as a link
	   it had none, and it arrived in the black bar as a white disc. */
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	border-radius: var(--lmt-radius);
	transition: background var(--lmt-transition), color var(--lmt-transition);
}
.lmt-header__search:hover,
.lmt-header__search:focus-visible { background: rgba(255, 255, 255, .12); }

/* Drawn rather than an icon font, the same magnifier as the gallery button. */
.lmt-header__search-glyph {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-radius: 50%;
}
.lmt-header__search-glyph::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 2px;
	height: 7px;
	background: currentColor;
	transform: rotate(-45deg);
	transform-origin: top left;
}


/* ---- Filter chips -------------------------------------------------------
   Shared: the category filter bar and the search page's result types. They
   live here rather than in shop.css because shop.css only loads on the shop,
   the cart, the checkout and the product pages — on a search results page the
   chips arrived as a bulleted list of underlined links.
   ------------------------------------------------------------------------ */

.lmt-refine__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lmt-chip--refine {
	gap: 7px;
	padding: 7px 13px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: var(--lmt-ink);
	border-color: var(--lmt-rule);
	border-radius: 0;
}

.lmt-chip--refine:hover { border-color: var(--lmt-black); background: var(--lmt-grey-100); }

.lmt-chip--refine .lmt-chip__count {
	font-size: 11px;
	font-weight: 700;
	color: var(--lmt-grey-500);
	font-variant-numeric: tabular-nums;
}

.lmt-chip--refine[aria-current="true"] {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-chip--refine[aria-current="true"] .lmt-chip__count { color: var(--lmt-grey-500); }

.lmt-chip--refine[aria-current="true"]:hover {
	background: var(--lmt-red);
	border-color: var(--lmt-red);
	color: var(--lmt-white);
}

/* ---- Header search --------------------------------------------------------
   The field takes the bar over rather than opening a second row beneath it.
   The header is only 72px and a three-column grid with the logo fixed in the
   middle — there is no column wide enough to type into — so while search is
   open it covers the bar, and closing gives the logo and the menu back.

   Absolute against .lmt-header, which is the sticky positioned ancestor, so
   the bar keeps its height whether this is open or not.
   -------------------------------------------------------------------------- */

.lmt-sitesearch {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: var(--lmt-black);
}

.lmt-sitesearch__inner {
	display: flex;
	align-items: center;
	height: 100%;
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding-inline: var(--lmt-gutter);
}

.lmt-sitesearch__form {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: var(--lmt-white);
	border: 1px solid var(--lmt-white);
}

.lmt-sitesearch__icon {
	position: relative;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border: 2px solid var(--lmt-grey-500);
	border-radius: 50%;
}
.lmt-sitesearch__icon::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 2px;
	height: 7px;
	background: var(--lmt-grey-500);
	transform: rotate(-45deg);
	transform-origin: top left;
}

.lmt-sitesearch__form input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 16px;   /* 16px or iOS zooms the page when it takes focus. */
	color: var(--lmt-ink);
	background: none;
}
.lmt-sitesearch__form input:focus { outline: none; }
.lmt-sitesearch__form input::-webkit-search-cancel-button { display: none; }

.lmt-sitesearch__close {
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 0 4px;
	font-size: 22px;
	line-height: 1;
	color: var(--lmt-ink-muted);
	cursor: pointer;
}
.lmt-sitesearch__close:hover { color: var(--lmt-red); }

/* The dropdown hangs below the bar. Measured from .lmt-sitesearch, which is
   the height of the header, so it starts exactly where the header ends. */
.lmt-sitesearch__results {
	position: absolute;
	left: var(--lmt-gutter);
	right: var(--lmt-gutter);
	top: 100%;
	z-index: 60;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	background: var(--lmt-white);
	border: 1px solid var(--lmt-rule);
	border-top: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.lmt-sitesearch__label {
	margin: 0;
	padding: 12px var(--lmt-space-4) 6px;
	font-size: var(--lmt-size-xs);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-label);
	text-transform: uppercase;
	color: var(--lmt-red);
}

.lmt-sitesearch__row {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px var(--lmt-space-4);
	text-decoration: none;
	color: var(--lmt-ink);
}
.lmt-sitesearch__row:hover,
.lmt-sitesearch__row.is-active { background: var(--lmt-grey-100); }

.lmt-sitesearch__thumb {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--lmt-grey-100);
	border: 1px solid var(--lmt-rule);
}
/* Treatments and guides often have no picture. Keep the column so the names
   stay in line, but do not draw an empty box in it. */
.lmt-sitesearch__thumb:empty {
	background: none;
	border: 0;
}

.lmt-sitesearch__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
	box-sizing: border-box;
}

.lmt-sitesearch__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	/* Two lines, then stop: a product name can run to sixty characters. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lmt-sitesearch__meta {
	font-size: 13px;
	font-weight: 700;
	color: var(--lmt-ink-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.lmt-sitesearch__more {
	display: block;
	padding: 12px var(--lmt-space-4);
	border-top: 1px solid var(--lmt-rule);
	font-size: 13px;
	font-weight: 700;
	color: var(--lmt-red);
	text-decoration: none;
}
.lmt-sitesearch__more:hover { text-decoration: underline; }

.lmt-sitesearch__empty {
	margin: 0;
	padding: var(--lmt-space-5) var(--lmt-space-4);
	color: var(--lmt-ink-muted);
}