/**
 * Levendar account area.
 *
 * Mobile-first throughout: every rule here is the phone layout, and the two
 * media queries at the bottom only widen it. Tokens are the checkout's, so
 * the two surfaces stay one design.
 */

.lva-body {
	--lva-ink: #000;
	--lva-muted: rgba(0, 0, 0, 0.56);
	--lva-line: #e5e5e5;
	--lva-line-strong: #d1d1d1;
	--lva-panel: rgb(246, 246, 246);
	--lva-button: rgb(35, 35, 35);
	--lva-brand: rgb(37, 72, 40);
	--lva-danger: #b3261e;
	--lva-radius: 14px;
	--lva-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	margin: 0;
	background: #fff;
	color: var(--lva-ink);
	font-family: var(--lva-font);
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* The theme's Elementor kit sets headings to Belleza and the body to Work
   Sans at a specificity our class selectors lose to, and form controls never
   inherit font-family from an ancestor at all. Both need naming outright —
   the checkout carries the same override for the same reason. */
.lva-body,
.lva-body h1,
.lva-body h2,
.lva-body h3,
.lva-body input,
.lva-body button,
.lva-body select,
.lva-body textarea {
	font-family: var(--lva-font) !important;
}

.lva-body * {
	box-sizing: border-box;
}

/* An inline stylesheet on the site paints every bare <a> navy blue
   (rgb(30,48,110)) — it showed up on anything in here we had not coloured
   by hand, including the links WooCommerce prints inside its own forms.
   Anchors in the account area inherit their surroundings instead, and
   hovering anything interactive goes to the brand green.

   `:not(.lva-button)` matters: an anchor styled as a button carries its own
   colour, and without the exclusion this pair — (0,2,1) against the button
   rule's (0,2,0) — repainted "Sign out" from white to inherited black, then
   green on hover. */
.lva-body .lva-main a:not(.lva-button) {
	color: inherit;
}

.lva-body .lva-main a:not(.lva-button):hover {
	color: var(--lva-brand);
}

.lva-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Keeps the footer off the home indicator on iOS without a fixed inset
	   on Android, where the variable resolves to 0. */
	padding-bottom: env(safe-area-inset-bottom);
}

.lva-main {
	flex: 1 0 auto;
}

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

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

.lva-header {
	border-bottom: 1px solid var(--lva-line);
}

.lva-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1060px;
	margin: 0 auto;
	padding: 16px 20px;
}

.lva-header__logo img {
	display: block;
	height: 30px;
	width: auto;
}

.lva-header__logo span {
	font-size: 18px;
	font-weight: 600;
	color: var(--lva-ink);
}

.lva-header__logo {
	text-decoration: none;
}

.lva-avatar:hover {
	border-color: var(--lva-brand);
	color: var(--lva-brand);
}

.lva-avatar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--lva-line);
	background: var(--lva-panel);
	color: var(--lva-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	flex: 0 0 auto;
}

/* ---------- shell + nav ---------- */

.lva-shell {
	max-width: 1060px;
	margin: 0 auto;
	padding: 20px;
}

/* Tabs on a phone, a rail on a desktop — same markup either way. */
.lva-nav {
	display: flex;
	gap: 22px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--lva-line);
}

.lva-nav__link {
	padding: 0 0 10px;
	color: var(--lva-muted);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.lva-nav__link.is-active {
	color: var(--lva-ink);
	border-bottom-color: var(--lva-ink);
}

.lva-content {
	min-width: 0;
}

/* ---------- primitives ---------- */

.lva-card {
	background: #fff;
	border: 1px solid var(--lva-line);
	border-radius: var(--lva-radius);
	padding: 16px;
	margin: 0 0 12px;
}

.lva-card__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

.lva-muted {
	color: var(--lva-muted);
}

/* The theme puts `margin-top: 10px` on every <button>. On an <a> styled as
   a button there is no such margin, so a row holding one of each — "Edit"
   beside a heading, "Change" beside a value — came out with the button
   sitting 10px lower than everything it was supposed to line up with. */
.lva-body .lva-button {
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--lva-button);
	border-radius: 999px;
	background: var(--lva-button);
	color: #fff;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none;
	cursor: pointer;
	/* Below 44px a control is hard to hit accurately on a phone. */
	min-height: 40px;
}

/* Colour has to be restated on hover, not merely inherited from the base
   rule. Excluding `.lva-button` from the account-wide anchor hover left the
   theme's bare `a:hover { color: … }` as the winner at (0,1,1), which
   flipped the white label light blue on hover. */
.lva-body .lva-button:hover {
	opacity: 0.9;
	color: #fff;
}

.lva-body .lva-button--quiet:hover {
	color: var(--lva-ink);
}

.lva-body .lva-button--quiet {
	background: var(--lva-panel) !important;
	border-color: var(--lva-line) !important;
	color: var(--lva-ink) !important;
}

.lva-button[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* `.lva-link` is a <button> wherever it triggers an action rather than
   navigates, and the theme paints every <button> as a solid dark-green
   uppercase pill with 3px tracking — the "Resend code" and "Cancel" controls
   came out as full-width blocks. Specificity alone does not settle it, so
   these are forced. Only the properties the theme actually sets are marked;
   the rest stay overridable. */
.lva-body .lva-link {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--lva-muted) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none;
	border-radius: 0 !important;
	width: auto !important;
	min-height: 0 !important;
	cursor: pointer;
}

.lva-body .lva-link:hover {
	color: var(--lva-brand) !important;
	text-decoration: underline;
}

.lva-body .lva-link[disabled] {
	color: var(--lva-muted) !important;
	cursor: default;
	text-decoration: none;
}

.lva-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.lva-actions--signout {
	margin-top: 24px;
}

.lva-error {
	margin: 10px 0 0;
	color: var(--lva-danger);
	font-size: 13.5px;
}

.lva-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--lva-panel);
	color: var(--lva-muted);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

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

.lva-field {
	margin: 0 0 14px;
}

.lva-field__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--lva-muted);
}

.lva-field__control {
	position: relative;
}

/* Scoped with the body class, not left as a bare `.lva-input`.
   The theme's base.css and Contact Form 7's fields.css both style
   `input[type="text"], input[type="email"], …` — attribute selectors that
   outrank a single class, so the unscoped rule lost its radius, background
   and border colour on the real site while looking correct in isolation.
   `.lva-body .lva-input` clears them without reaching for !important. */
.lva-body .lva-input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--lva-line-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--lva-ink);
	/* 16px exactly: iOS Safari zooms the viewport on focus for anything
	   smaller, and the page never zooms back out. */
	font-size: 16px;
	line-height: 1.3;
	appearance: none;
}

.lva-body .lva-input:focus {
	outline: none;
	border-color: var(--lva-ink);
	box-shadow: 0 0 0 1px var(--lva-ink);
}

.lva-body .lva-field__control .lva-input {
	padding-right: 52px;
}

.lva-body .lva-input--code {
	letter-spacing: 8px;
	font-size: 20px;
	font-weight: 600;
}

/* The theme gives every <button> `margin-top: 10px` and `padding: 10px 20px`.
   Both wreck this one: the margin drops it 10px below the input's centre
   line, and the horizontal padding eats the whole 40px box, collapsing the
   grid content area to zero width so the icon spills 8px past centre.
   Zeroed explicitly — the centring here depends on the box being exactly
   40x40 with nothing inside it but the icon. */
.lva-body .lva-field__submit {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 8px;
	background: none !important;
	color: var(--lva-ink) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	cursor: pointer;
}

.lva-body .lva-field__submit:hover {
	background: var(--lva-panel);
}

.lva-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
	font-size: 14px;
	cursor: pointer;
}

.lva-body .lva-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--lva-ink);
}

/* ---------- sign in ---------- */

.lva-signin {
	max-width: 380px;
	margin: 0 auto;
	padding: 48px 20px 64px;
}

.lva-signin__title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
}

.lva-signin__lede {
	margin: 0 0 20px;
	color: var(--lva-muted);
	font-size: 14px;
}

.lva-signin__lede strong {
	color: var(--lva-ink);
}

.lva-signin__legal {
	margin: 14px 0 0;
	color: var(--lva-muted);
	font-size: 12.5px;
	text-align: center;
}

.lva-signin__legal a {
	color: var(--lva-muted);
}

.lva-signin__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
}

/* ---------- orders ---------- */

.lva-welcome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
}

.lva-welcome__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.lva-welcome__sub {
	margin: 2px 0 0;
	color: var(--lva-muted);
}

.lva-orders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lva-order-card {
	padding: 14px;
}

.lva-order-card__thumbs {
	display: flex;
	gap: 8px;
	/* A long order scrolls its thumbnails sideways rather than wrapping into
	   a tall block that pushes the status and the price off screen. */
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 12px;
	text-decoration: none;
	scrollbar-width: none;
}

.lva-order-card__thumbs::-webkit-scrollbar {
	display: none;
}

.lva-thumb {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--lva-panel);
}

.lva-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lva-thumb--more {
	color: var(--lva-muted);
	font-size: 13px;
	font-weight: 600;
}

.lva-order-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lva-order-card__meta {
	min-width: 0;
}

.lva-order-card__status {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.lva-order-card__line {
	margin: 2px 0 0;
	color: var(--lva-muted);
	font-size: 13.5px;
}

.lva-pager {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

/* ---------- order detail ---------- */

.lva-order__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.lva-back {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	color: var(--lva-ink);
	text-decoration: none;
}

.lva-order__title {
	flex: 1 1 auto;
	min-width: 0;
}

.lva-order__title h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
}

.lva-order__title p {
	margin: 1px 0 0;
	color: var(--lva-muted);
	font-size: 13px;
}

.lva-timeline ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lva-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 18px 1fr;
	column-gap: 10px;
	padding-bottom: 14px;
}

.lva-timeline__step:last-child {
	padding-bottom: 0;
}

/* The connector is drawn from each step down to the next, so it stops at the
   last dot instead of trailing into empty space. */
.lva-timeline__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 16px;
	bottom: 2px;
	width: 1px;
	background: var(--lva-line);
}

.lva-timeline__dot {
	width: 9px;
	height: 9px;
	margin: 6px auto 0;
	border-radius: 50%;
	background: var(--lva-line-strong);
}

.lva-timeline__step.is-current .lva-timeline__dot {
	background: var(--lva-ink);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.lva-timeline__label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lva-muted);
}

.lva-timeline__step.is-current .lva-timeline__label {
	color: var(--lva-ink);
}

.lva-timeline__date {
	grid-column: 2;
	color: var(--lva-muted);
	font-size: 13px;
}

.lva-tracking__number {
	font-variant-numeric: tabular-nums;
	/* Long waybill numbers must not force the card wide on a 360px phone. */
	word-break: break-all;
}

.lva-body .lva-copy {
	margin-left: 8px;
	padding: 3px 9px !important;
	border: 1px solid var(--lva-line) !important;
	border-radius: 999px !important;
	background: var(--lva-panel) !important;
	color: var(--lva-ink) !important;
	font-size: 12px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
}

.lva-tracking__link {
	margin-top: 12px;
	width: 100%;
}

.lva-items__list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.lva-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: start;
	gap: 12px;
	padding: 10px 0;
}

.lva-item:first-child {
	padding-top: 0;
}

.lva-item__media {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: visible;
}

.lva-item__media img,
.lva-item__media .lva-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: var(--lva-panel);
}

.lva-item__qty {
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--lva-button);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.lva-item__body {
	display: block;
	min-width: 0;
}

.lva-item__name {
	display: block;
	font-size: 14.5px;
}

.lva-item__meta {
	display: block;
	color: var(--lva-muted);
	font-size: 13px;
}

.lva-item__meta p {
	margin: 0;
}

.lva-item__price {
	font-size: 14.5px;
	white-space: nowrap;
}

.lva-totals {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--lva-line);
}

.lva-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 14px;
}

.lva-total dt,
.lva-total dd {
	margin: 0;
	color: var(--lva-muted);
}

.lva-total:last-child dt,
.lva-total:last-child dd {
	color: var(--lva-ink);
	font-size: 16px;
	font-weight: 700;
}

.lva-rows {
	margin: 0;
}

.lva-row {
	display: grid;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lva-line);
}

.lva-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.lva-row:first-child {
	padding-top: 0;
}

.lva-row dt {
	color: var(--lva-muted);
	font-size: 13px;
}

.lva-row dd {
	margin: 0;
	font-size: 14.5px;
}

/* ---------- profile ---------- */

.lva-block {
	margin-bottom: 26px;
}

.lva-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.lva-block__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.lva-contact {
	padding: 4px 16px;
}

.lva-contact__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lva-line);
	list-style: none;
}

.lva-contact__row:last-child {
	border-bottom: 0;
}

.lva-contact__label {
	flex: 0 0 auto;
	color: var(--lva-muted);
	font-size: 14px;
}

.lva-contact__value {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-size: 14px;
	/* Long addresses break rather than widening the card. */
	overflow-wrap: anywhere;
}

.lva-address {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.lva-address__pin {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--lva-panel);
	color: var(--lva-ink);
}

.lva-address__body {
	flex: 1 1 auto;
	min-width: 0;
}

.lva-address__name {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.lva-address__text {
	display: block;
	color: var(--lva-muted);
	font-size: 13.5px;
}

.lva-address__chevron {
	flex: 0 0 auto;
	color: var(--lva-muted);
	display: grid;
	place-items: center;
}

.lva-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lva-toggle-row__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
}

/* Flex, not the default inline label. As an inline box the <label> reserved
   descender space below the track — a 29px box around a 26px control — which
   pushed the whole switch off the row's centre line by ~1.5px and left the
   knob looking untucked. `line-height: 0` stops any stray leading coming
   back through the theme's typography. */
.lva-switch {
	position: relative;
	display: flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

.lva-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.lva-switch__track {
	display: block;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--lva-line-strong);
	transition: background 0.15s ease;
}

.lva-switch__track::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 3px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.lva-switch input:checked + .lva-switch__track {
	background: var(--lva-button);
}

.lva-switch input:checked + .lva-switch__track::after {
	transform: translateX(20px);
}

.lva-switch input:focus-visible + .lva-switch__track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lva-ink);
}

.lva-empty {
	color: var(--lva-muted);
}

.lva-empty p {
	margin: 0;
}

/* ---------- WooCommerce address form, skinned ---------- */

/* These values are copied from the checkout's own input treatment
   (levendar-checkout-suite/src/style.css, "text inputs"): 1px line-strong
   border, 8px radius, 11px/13px padding, 14.5px text, and the same
   ink-coloured 1px focus ring. The address form and the checkout collect the
   same data and should not look like two different products.

   Everything is qualified with `.lva-body` and forced where the theme reaches
   in with an attribute selector. The theme styles `input[type="text"], …` at
   (0,1,1) and Contact Form 7 styles the same set again, both setting padding,
   radius and background — a plain `.lva-woo-form .input-text` ties or loses
   depending on which sheet prints last. */

.lva-body .lva-woo-form .woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: 2px;
}

.lva-body .lva-woo-form p {
	margin: 0 0 12px;
}

/* Our own <h1> already names the form in the page header; WooCommerce's
   template prints an <h2> with the same words directly beneath it. */
.lva-body .lva-woo-form h2,
.lva-body .lva-woo-form h3 {
	display: none;
}

.lva-body .lva-woo-form label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--lva-muted);
}

.lva-body .lva-woo-form .required {
	border: 0;
	color: var(--lva-muted);
	text-decoration: none;
}

.lva-body .lva-woo-form .input-text,
.lva-body .lva-woo-form input[type="text"],
.lva-body .lva-woo-form input[type="email"],
.lva-body .lva-woo-form input[type="tel"],
.lva-body .lva-woo-form select,
.lva-body .lva-woo-form textarea {
	width: 100%;
	margin: 0 !important;
	padding: 11px 13px !important;
	border: 1px solid var(--lva-line-strong) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--lva-ink) !important;
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	appearance: none;
}

.lva-body .lva-woo-form .input-text:focus,
.lva-body .lva-woo-form input:focus,
.lva-body .lva-woo-form select:focus,
.lva-body .lva-woo-form textarea:focus {
	outline: none;
	border-color: var(--lva-ink) !important;
	box-shadow: 0 0 0 1px var(--lva-ink);
}

/* Country and state become select2 widgets once wc-country-select loads, so
   the control the shopper actually sees is a rendered div, not the <select>
   styled above. Same box, same focus ring. */
.lva-body .lva-woo-form .select2-container--default .select2-selection--single {
	height: auto;
	padding: 11px 13px;
	border: 1px solid var(--lva-line-strong);
	border-radius: 8px;
	background: #fff;
}

.lva-body .lva-woo-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--lva-ink);
	font-size: 14.5px;
	line-height: 1.4;
}

.lva-body .lva-woo-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 8px;
	height: auto;
	transform: translateY(-50%);
}

.lva-body .lva-woo-form .select2-container--default.select2-container--open .select2-selection--single,
.lva-body .lva-woo-form .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--lva-ink);
	box-shadow: 0 0 0 1px var(--lva-ink);
}

/* WooCommerce renders "Save address" as `.button`, which the theme paints as
   an uppercase dark slab with the same 10px top margin that hit our own
   buttons. */
.lva-body .lva-woo-form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 4px 0 0 !important;
	padding: 11px 20px !important;
	border: 1px solid var(--lva-button) !important;
	border-radius: 999px !important;
	background: var(--lva-button) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
}

.lva-body .lva-woo-form .woocommerce-invalid .input-text {
	border-color: var(--lva-danger) !important;
}


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

.lva-footer {
	margin-top: 40px;
	padding: 20px;
}

.lva-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 1060px;
	margin: 0 auto;
	font-size: 12.5px;
}

.lva-footer a {
	color: var(--lva-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lva-footer a:hover {
	color: var(--lva-brand);
}

/* ---------- wider screens ---------- */

@media (min-width: 768px) {
	.lva-header__inner {
		padding: 20px 32px;
	}

	.lva-header__logo img {
		height: 34px;
	}

	.lva-shell {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr);
		gap: 40px;
		padding: 40px 32px;
	}

	/* The rail loses the tab underline and stacks. */
	.lva-nav {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		border-bottom: 0;
	}

	.lva-nav__link {
		padding: 4px 0;
		border-bottom: 0;
	}

	.lva-nav__link.is-active {
		border-bottom: 0;
	}

	.lva-card {
		padding: 20px;
	}

	.lva-signin {
		padding-top: 15vh;
	}

	.lva-tracking__link {
		width: auto;
	}

	.lva-footer__inner {
		justify-content: flex-start;
		padding: 0;
	}
}

@media (min-width: 1024px) {
	.lva-shell {
		grid-template-columns: 220px minmax(0, 640px);
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lva-switch__track,
	.lva-switch__track::after {
		transition: none;
	}
}