/* Lobshop Checkout — L44 design.
   Left column 490px: order summary, billing, invoicing.
   Right column 450px: collect-or-ship, payment.
   Cells are gainsboro separated by strokes shown through grid gaps, matching
   the cart exactly. */

.lbx-checkout {
	--lbx-fg: #111111;
	--lbx-muted: #8a857c;
	--lbx-green: #00a95c;
	--lbx-red: #d2342a;
	--lbx-blue: #82d8d5;    /* empty required field, flagged on submit */
	--lbx-deliver: #62a8e5;  /* the Deliver bar — a different blue from the one above */
	--lbx-pink: #e6b5c9;    /* Edit cart, so it reads against the grey cells */
	/* Cells are TRANSPARENT with a 3px stroke: the page shows through them.
	   Built with the gap method — container carries the stroke colour, cells
	   carry the page colour, so shared edges never double up. */
	--lbx-line: #efefef;      /* stroke */
	--lbx-cell: #dcdcdc;      /* = page background */
	--lbx-fill: #efefef;      /* the one filled cell: TOTAL */
	--lbx-gap: 3px;
	--lbx-left: 490px;
	--lbx-right: 450px;
	--lbx-colgap: 64px;
	--lbx-row-h: 70px;        /* order rows */
	--lbx-foot-h: 35px;       /* edit cart / total row */
	--lbx-cell-h: 50px;       /* form cells */
	--lbx-pill-h: 50px;
	--lbx-pay-h: 350px;
	--lbx-panel-h: 350px;
	/* Econt collapses to just its "Edit delivery details" button once a
	   destination is confirmed. This gap under the collapsed panel is what keeps
	   the Place order button level with the bottom of the post code cell —
	   adjust it if the left column's height ever changes. */
	--lbx-collapsed-note-gap: 20px;
	--lbx-btn-h: 50px;
	--lbx-thumb: 47px;
	--lbx-price-col: 170px;
	--lbx-top: 40px;
	--lbx-font: "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-family: var(--lbx-font);
	color: var(--lbx-fg);
	width: calc( var(--lbx-left) + var(--lbx-colgap) + var(--lbx-right) );
	max-width: 100%;
	margin: var(--lbx-top) auto 60px;
	box-sizing: border-box;
}
.lbx-checkout *, .lbx-checkout *::before, .lbx-checkout *::after { box-sizing: border-box; }

.lbx-cols {
	display: grid;
	grid-template-columns: var(--lbx-left) var(--lbx-right);
	gap: var(--lbx-colgap);
	align-items: start;
}

.lbx-h {
	text-align: left;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
	letter-spacing: 0.01em;
}
.lbx-col--left > .lbx-h:not(:first-of-type),
.lbx-billing .lbx-h,
.lbx-invoicing .lbx-h { margin-top: 34px; }
.lbx-col > .lbx-h:first-of-type { margin-top: 0; }

/* FooEvents drops a script-only wrapper at the top of the left column, whose
   whitespace text nodes give it height and push the first heading down out of
   line with the right column. */
.lbx-checkout .lbx-col--left > .woocommerce-additional-fields,
.lbx-checkout .lbx-col--left > .woocommerce-shipping-fields {
	position: absolute !important;
	width: 0; height: 0;
	margin: 0 !important; padding: 0 !important;
	overflow: hidden;
}
.lbx-checkout .woocommerce-shipping-fields:empty { display: none; }

/* ---------- Order summary ---------- */
.lbx-list {
	background: var(--lbx-line);
	padding: var(--lbx-gap);
	display: grid;
	gap: var(--lbx-gap);
}
.lbx-row {
	display: grid;
	grid-template-columns: var(--lbx-thumb) 1fr var(--lbx-price-col);
	grid-template-rows: var(--lbx-row-h);
	gap: var(--lbx-gap);
}
.lbx-row > * { background: var(--lbx-cell); }
.lbx-thumb { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lbx-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbx-mail {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: #7ad3d0; color: #ffffff;
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}
.lbx-name {
	display: flex; flex-direction: column; justify-content: center;
	padding: 8px 16px; overflow: hidden; line-height: 1.25;
}
.lbx-name__t { font-weight: 700; text-transform: uppercase; font-size: 15px; }
.lbx-name__s { color: #6d6e71; text-transform: uppercase; font-size: 15px; margin-top: 3px; }
.lbx-name dl, .lbx-name .variation { margin: 3px 0 0; font-size: 12px; color: var(--lbx-muted); }
.lbx-price { display: flex; align-items: center; justify-content: center; font-size: 20px; white-space: nowrap; }

/* Discount / delivery lines, then the footer row. */
.lbx-row--line { grid-template-columns: 1fr var(--lbx-price-col); grid-template-rows: var(--lbx-foot-h); }
.lbx-line-label, .lbx-line-val { display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.lbx-line-label { font-size: 14px; }
/* Same size as the item prices above it, so the column reads as one figure. */
.lbx-line-val { font-size: 20px; white-space: nowrap; }

.lbx-row--total { grid-template-columns: 150px 1fr var(--lbx-price-col); grid-template-rows: var(--lbx-foot-h); }
.lbx-row--total > * { font-size: 15px; }
.lbx-edit {
	background: var(--lbx-pink);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; text-transform: uppercase; text-decoration: none; color: var(--lbx-fg);
}
.lbx-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.lbx-total-label, .lbx-total-sum {
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 20px !important; text-transform: uppercase; white-space: nowrap;
}
/* The only filled cell in the design. */
.lbx-total-label { background: var(--lbx-fill) !important; }
.lbx-hidden-shipping { display: none; }

/* ---------- Form cells ----------
   Our own markup: a .lbx-block is the stroke frame, .lbx-cell items are the
   page colour, so the gaps read as 3px outlines exactly as in the design. */
.lbx-block {
	background: var(--lbx-line);
	padding: var(--lbx-gap);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lbx-gap);
	margin-bottom: 33px;
	width: 100%;
}
.lbx-block:last-child { margin-bottom: 0; }

.lbx-cell {
	position: relative;
	background: var(--lbx-cell);
	min-height: var(--lbx-cell-h);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.lbx-cell--wide { grid-column: 1 / -1; }

.lbx-cell .lbx-lbl {
	position: absolute;
	left: 14px; right: 14px; top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #6d6e71;
	text-align: center;
	pointer-events: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: top 0.14s ease, font-size 0.14s ease, transform 0.14s ease;
}
/* Once there is a value the label shrinks to a caption so the field name is
   never lost — the empty state is exactly as drawn. */
.lbx-cell.is-filled .lbx-lbl,
.lbx-cell.is-focus .lbx-lbl {
	top: 7px;
	transform: none;
	font-size: 10px;
	text-align: left;
}

.lbx-cell .lbx-input {
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	color: var(--lbx-fg);
	text-align: center;
	padding: 18px 14px 8px;
	height: var(--lbx-cell-h);
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}
.lbx-cell.is-filled .lbx-input,
.lbx-cell.is-focus .lbx-input { text-align: left; }
.lbx-cell.is-focus { box-shadow: inset 0 -3px 0 0 var(--lbx-green); }

.lbx-cell .lbx-textarea {
	resize: none;
	height: var(--lbx-cell-h) !important;
	min-height: 0 !important;
	overflow: hidden;
}
.lbx-cell .lbx-select {
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, #6d6e71 50%), linear-gradient(135deg, #6d6e71 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 4px), calc(100% - 13px) calc(50% + 4px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* The theme skins inputs with their own border/shadow, which shows as a second
   stroke inside our cell. Everything the browser or theme could draw on a
   control is stripped here — the cell provides the only outline. */
.lbx-checkout .lbx-cell input,
.lbx-checkout .lbx-cell select,
.lbx-checkout .lbx-cell textarea,
.lbx-checkout .lbx-cell input:focus,
.lbx-checkout .lbx-cell select:focus,
.lbx-checkout .lbx-cell textarea:focus {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	background-color: transparent !important;
	background-image: none;
	min-height: 0 !important;
	max-height: none !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
	-webkit-box-shadow: none !important;
}
.lbx-checkout .lbx-cell .lbx-select {
	background-image: linear-gradient(45deg, transparent 50%, #6d6e71 50%), linear-gradient(135deg, #6d6e71 50%, transparent 50%) !important;
	background-position: calc(100% - 18px) calc(50% + 4px), calc(100% - 13px) calc(50% + 4px) !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}
.lbx-checkout .lbx-cell input::-webkit-outer-spin-button,
.lbx-checkout .lbx-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Anything WooCommerce or another plugin still renders the old way. */
.lbx-checkout .form-row {
	margin: 0 !important; padding: 0 !important;
	width: auto !important; float: none !important; clear: none !important;
}
/* Hide stray WooCommerce rows in OUR billing area only. FooEvents renders its
   attendee and seating fields as .form-row too, and those must stay. */
.lbx-checkout .lbx-fields > .form-row { display: none; }

/* ---------- Checkboxes ---------- */
.lbx-block--addr { margin-bottom: 0; }
.lbx-checks { margin-top: 12px; display: grid; gap: 14px; }
.lbx-check,
.lbx-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 18px;
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	text-align: left;
	color: var(--lbx-fg);
	background: transparent !important;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
/* Both checkbox labels stay on a single line, at the same 20px size. */
.lbx-check span,
.lbx-checkout .woocommerce-form__label-for-checkbox span { white-space: nowrap; }
.lbx-checkout .lbx-check span { font-size: 20px !important; }
/* Supplied artwork, both states. The square inside the file is 13.78 units of
   a 27.74 viewBox, so a 28px sprite gives the 14px box in the design. */
.lbx-check input[type="checkbox"],
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 35px !important; height: 31px !important;
	flex: 0 0 35px;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	background: url("checkbox-off.svg") center / contain no-repeat !important;
	cursor: pointer;
}
.lbx-check input[type="checkbox"]:checked,
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked {
	background-image: url("checkbox-on.svg") !important;
	background-color: transparent !important;
}
/* Themes commonly draw their own tick with a pseudo-element on the input or
   its label. Ours is the artwork itself, so anything drawn on top must go. */
.lbx-check input[type="checkbox"]::before,
.lbx-check input[type="checkbox"]::after,
.lbx-check input[type="checkbox"]:checked::before,
.lbx-check input[type="checkbox"]:checked::after,
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]::before,
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]::after,
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked::before,
.lbx-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked::after {
	content: none !important;
	display: none !important;
	background: none !important;
}
.lbx-check--same { margin: 0 0 22px; }

/* Newsletter: heart at twice the drawn size, centred against the checkbox. */
.lbx-checkout .woocommerce-form__label-for-checkbox span {
	display: inline-flex; align-items: center;
	font-size: 0;                 /* hide MailPoet's own wording */
}
/* Our replacement wording, at the normal size. */
.lbx-checkout .woocommerce-form__label-for-checkbox span::before {
	content: "Sign me up for updates!";
	font-size: 20px;
	white-space: nowrap;
}
/* Heart AFTER the text now. */
.lbx-checkout .woocommerce-form__label-for-checkbox span::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 24px; height: 21px;
	margin-left: 12px;
	background-image: url("heart-broken.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
/* The whole heart fills more of its viewBox than the broken one, so the
   artwork is scaled inside the same box — keeps both optically equal without
   moving the text beside it. */
.lbx-checkout .woocommerce-form__label-for-checkbox input:checked + span::after {
	background-image: url("heart.svg");
}
.lbx-checkout .woocommerce-form__label-for-checkbox + .form-row { display: none !important; }

/* ---------- Collect or ship ---------- */
/* Each row is its own stroke frame, set 15px apart. */
.lbx-fulfil { display: grid; gap: 15px; }
.lbx-pills,
.lbx-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lbx-gap);
	background: var(--lbx-line);
	padding: var(--lbx-gap);
}
.lbx-econt { margin-top: 15px; }
.lbx-pill {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: var(--lbx-pill-h);
	padding: 6px 0 !important;
	text-indent: 0 !important;
	background: var(--lbx-cell);
	font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em;
	cursor: pointer; text-align: center;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.lbx-pill > span {
	display: block;
	width: 100%;
	padding: 0 8px;
	margin: 0 !important;
	text-align: center !important;
	text-indent: 0 !important;
	line-height: 1.25;
}
/* The radio must take no space at all, and themes commonly draw a custom radio
   with a ::before on the label — both would shift the text right of centre. */
.lbx-pill input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important; height: 0 !important;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important;
	left: 0; top: 0;
	pointer-events: none;
	appearance: none; -webkit-appearance: none;
}
.lbx-pill::before, .lbx-pill::after,
.lbx-pill > span::before, .lbx-pill > span::after { content: none !important; display: none !important; }
.lbx-pill:hover { background: #d0d0d0; }
.lbx-pill.is-on, .lbx-pill.is-on:hover { background: var(--lbx-green); }
.lbx-pill.is-on, .lbx-pill.is-on span { color: #ffffff !important; }

.lbx-pickup, .lbx-econt { margin-top: var(--lbx-gap); }

.lbx-cell--select {
	background: var(--lbx-cell);
	min-height: var(--lbx-row-h);
	display: flex; align-items: center;
}
.lbx-cell--select select {
	width: 100%; background: transparent !important; border: 0 !important; outline: none !important;
	box-shadow: none !important; border-radius: 0 !important;
	font: inherit; font-size: 20px; text-transform: uppercase;
	color: var(--lbx-fg); padding: 0 12px; height: 100% !important;
	appearance: none; -webkit-appearance: none; cursor: pointer;
	/* Matches the Collect / Delivery pills above. text-align-last is what
	   actually centres the closed state of a select. */
	text-align: center; text-align-last: center; line-height: normal;
}

.lbx-econt__inner {
	background: transparent;
	border: var(--lbx-gap) solid var(--lbx-line);
	min-height: var(--lbx-panel-h);
	display: block;
	overflow: hidden;
}

/* ---- Econt OneCheckout ----
   Econt hides our billing block and appends its own panel to the left column.
   We keep the billing fields (its iframe is pre-filled from them) and let the
   iframe fill the panel on the right. */
.lbx-checkout #customer_details { display: block !important; }
.lbx-checkout #place_iframe_here {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: 100%;
}
.lbx-checkout #place_iframe_here::before,
.lbx-checkout #place_iframe_here::after { display: none !important; }
/* Its own heading is redundant inside our panel. */
.lbx-checkout #place_iframe_here > h3 { display: none !important; }
.lbx-checkout #delivery_with_econt_iframe {
	display: block;
	width: 100% !important;
	height: calc( var(--lbx-panel-h) - 2 * var(--lbx-gap) ) !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent;
}
.lbx-checkout .econt-button,
.lbx-checkout #edit_details {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	width: 100%; min-height: 44px;
	margin: var(--lbx-gap) 0 0 !important;
	padding: 0 14px !important;
	border: var(--lbx-gap) solid var(--lbx-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--lbx-fg) !important;
	font: inherit; font-size: 15px; text-transform: uppercase;
	cursor: pointer;
}
.lbx-checkout .econt-button:hover,
.lbx-checkout #edit_details:hover { background: var(--lbx-green) !important; color: #ffffff !important; }

.lbx-note { font-size: 13px; color: #5f5e5a; margin: 10px 0 0; line-height: 1.5; }
.lbx-warn { font-size: 13px; color: var(--lbx-red); margin: 0 0 10px; }

/* ---------- Empty required fields ----------
   Flagged when Place order is pressed and again when the server rejects the
   submission; cleared per cell as soon as it is filled in. */
/* The attendee rows are FooEvents' markup, not ours, so they need naming
   separately — the fill and the label treatment are the same. */
.lbx-mode-tickets .fooevents-attendee .form-row.lbx-missing { background: var(--lbx-blue); }
.lbx-mode-tickets .fooevents-attendee .form-row.lbx-missing label { color: var(--lbx-fg); }

.lbx-cell.lbx-missing,
.lbx-cell--select.lbx-missing {
	background: var(--lbx-blue);
}
.lbx-cell.lbx-missing > label,
.lbx-cell.lbx-missing .lbx-lab { color: var(--lbx-fg); }

/* ---------- Delivery not yet priced ----------
   Econt only quotes once the customer has confirmed a destination. Until then
   the Delivery line is present but empty of a figure, and the total is labelled
   as provisional so it never reads as final. */
.lbx-row--line.is-pending .lbx-line-val {
	color: var(--lbx-muted);
	font-style: italic;
	text-transform: none;
	font-size: 14px;
}
.lbx-row--total.is-pending .lbx-total-label,
.lbx-row--total.is-pending .lbx-total-sum { color: var(--lbx-muted); }

/* Econt's failures, held open rather than flashed for 3.5 seconds. */
.lbx-error {
	font-size: 13px;
	line-height: 1.5;
	color: var(--lbx-red);
	border: var(--lbx-gap) solid var(--lbx-red);
	padding: 10px 12px;
	margin: 10px 0 0;
}

/* Once Econt's iframe closes, the panel no longer needs to reserve its full
   height — it holds only the edit button. The panel's own stroke is dropped so
   the button's identical 3px border is the single outline; without this the two
   sit 3px apart and read as a doubled edge. The note below takes the freed
   space back so the Place order button keeps its alignment with the left
   column's last address cell. */
.lbx-econt.is-collapsed .lbx-econt__inner {
	border: 0;
	min-height: 0;
	overflow: visible;
}
.lbx-econt.is-collapsed #edit_details,
.lbx-econt.is-collapsed .econt-button-details {
	margin-top: 0 !important;
}
.lbx-econt.is-collapsed [data-lbx-deliverynote] {
	margin-top: var(--lbx-collapsed-note-gap);
}

/* Econt renders its own alert; ours replaces it. */
.lbx-checkout .econt-alert { display: none !important; }

.lbx-checkout #place_order.lbx-is-blocked,
.lbx-checkout #place_order:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	border-color: var(--lbx-muted) !important;
	color: var(--lbx-muted) !important;
}
.lbx-checkout #place_order.lbx-is-blocked:hover,
.lbx-checkout #place_order:disabled:hover {
	background: transparent !important;
	color: var(--lbx-muted) !important;
}

/* ---------- Payment ---------- */
.lbx-payment {
	margin-top: 18px;
	background: transparent;
	border: var(--lbx-gap) solid var(--lbx-line);
	min-height: var(--lbx-pay-h);
	padding: 22px 24px;
	display: flex; flex-direction: column;
}
.lbx-payment .payment_methods { list-style: none; margin: 0; padding: 0; }
.lbx-payment .payment_methods li { list-style: none; margin: 0 0 8px; position: relative; }
.lbx-payment .payment_methods label {
	text-transform: uppercase; font-size: 17px; display: block; margin: 0 0 6px; cursor: pointer;
}
.lbx-payment .payment_methods input[type="radio"] { display: none; }
.lbx-payment .payment_methods img { max-height: 22px; width: auto; display: inline-block; margin: 0 3px 4px 0; }
.lbx-payment .payment_box {
	position: static !important; float: none !important; transform: none !important;
	width: auto !important; max-width: 100% !important;
	background: transparent !important;
	margin: 4px 0 0 !important; padding: 0 !important;
	font-size: 15px; text-align: left !important; text-transform: none !important;
}
.lbx-payment .payment_box::before, .lbx-payment .payment_box::after { display: none !important; }
.lbx-payment .payment_box p { margin: 0; text-align: left; text-indent: 0; padding-left: 0; }
.lbx-payment .payment_methods label { text-align: left; }
/* The gateway's own list indent left this text sitting in from the paragraph
   beneath it; everything in the block now shares one left edge. */
.lbx-checkout #payment .payment_methods,
.lbx-checkout #payment .payment_methods li,
.lbx-checkout #payment .payment_box,
.lbx-checkout #payment .payment_box p {
	margin-left: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
}
.lbx-payment .woocommerce-privacy-policy-text { clear: both; font-size: 14px; line-height: 1.55; margin: 0; }
.lbx-payment .place-order { margin-top: auto; padding-top: 0; }
.lbx-checkout #payment .place-order {
	margin-top: 15px;
	padding-top: 0;
}
.lbx-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0; }
.lbx-payment .place-order .button { width: 100%; }

.lbx-checkout #place_order {
	width: 100%;
	display: flex; align-items: center; justify-content: center;
	min-height: var(--lbx-btn-h);
	/* Green, matching Add to cart and the cart's Checkout — one colour for the
	   step that moves you forward, all the way through. */
	border: 3px solid var(--lbx-green) !important;
	background: var(--lbx-green) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	font: inherit; font-size: 30px; text-transform: uppercase; letter-spacing: 0.01em;
	cursor: pointer; width: 100%; min-height: 60px;
	transition: background-color 0.12s ease, color 0.12s ease;
}
/* Darker while hovered and held, since the resting state is now the accent
   colour rather than an outline. */
.lbx-checkout #place_order:hover { background: #009152 !important; border-color: #009152 !important; color: #ffffff !important; }
.lbx-checkout #place_order:active { background: #007a45 !important; border-color: #007a45 !important; }

.lbx-checkout #place_order.lbx-is-placing {
	/* Deliberately not green: while it is working it should not look like it is
	   still inviting a press. */
	background: var(--lbx-fg) !important;
	border-color: var(--lbx-fg) !important;
	color: #ffffff !important;
	cursor: progress;
}
/* WooCommerce blocks the form while it submits, but the overlay is invisible
   unless something styles it — which is a large part of why pressing the button
   felt like nothing happened. */
.lbx-checkout .blockUI.blockOverlay {
	background: #ffffff !important;
	opacity: 0.55 !important;
}

.lbx-thanks h2 { text-transform: uppercase; font-weight: 400; font-size: 22px; margin: 26px 0 8px; }

/* ---------- Order received ----------
   Same grid vocabulary as the cart and the checkout summary: transparent cells
   on a stroke-coloured background, uppercase throughout. */
.lbx-ty {
	--lbx-fg: #111111;
	--lbx-muted: #8a857c;
	--lbx-green: #00a95c;
	--lbx-line: #efefef;
	--lbx-cell: #dcdcdc;
	--lbx-fill: #efefef;
	--lbx-gap: 3px;
	--lbx-row-h: 70px;
	--lbx-foot-h: 35px;
	--lbx-price-col: 170px;
	--lbx-thumb: 47px;
	--lbx-font: "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-family: var(--lbx-font);
	color: var(--lbx-fg);
	width: 1000px; max-width: 100%;
	margin: 40px auto 70px;
	box-sizing: border-box;
}
.lbx-ty *, .lbx-ty *::before, .lbx-ty *::after { box-sizing: border-box; }

.lbx-ty__h {
	text-transform: uppercase; font-weight: 400;
	font-size: clamp(30px, 4.5vw, 46px);
	text-align: center; margin: 0 0 10px;
}
.lbx-ty__lead {
	text-align: center; font-size: 16px; margin: 0 0 30px; color: var(--lbx-fg);
}
.lbx-ty__lead strong { font-weight: 700; }

/* Order / date / payment strip */
.lbx-ty__meta {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lbx-gap);
	background: var(--lbx-line); padding: var(--lbx-gap); margin-bottom: 22px;
}
.lbx-ty__cell {
	background: var(--lbx-cell); min-height: 60px;
	display: flex; flex-direction: column; justify-content: center;
	padding: 8px 16px;
}
.lbx-ty__lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lbx-muted); }
.lbx-ty__val { font-size: 16px; text-transform: uppercase; margin-top: 3px; }

.lbx-ty__list { margin-bottom: 22px; }
.lbx-ty__total .lbx-total-label,
.lbx-ty__total .lbx-total-sum { background: var(--lbx-fill); }
.lbx-ty__list .lbx-row--total { grid-template-columns: 1fr var(--lbx-price-col); }

/* Fulfilment + billing */
.lbx-ty__cols {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
	margin-bottom: 30px;
}
.lbx-ty__h2 {
	text-transform: uppercase; font-weight: 400; font-size: 20px;
	margin: 0 0 10px; padding-bottom: 8px;
	border-bottom: var(--lbx-gap) solid var(--lbx-line);
}
.lbx-ty__h2--sub { margin-top: 22px; }
.lbx-ty__big { font-size: 18px; text-transform: uppercase; margin: 0 0 4px; }
.lbx-ty__p { font-size: 15px; line-height: 1.5; margin: 0 0 4px; text-transform: uppercase; }
.lbx-ty__p address { font-style: normal; }
.lbx-ty__note { font-size: 13px; line-height: 1.5; color: #5f5e5a; margin: 10px 0 0; }
.lbx-ty__track { color: var(--lbx-fg); text-underline-offset: 3px; }

.lbx-ty__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
.lbx-ty__btn {
	display: flex; align-items: center; justify-content: center;
	min-height: 60px; border: 3px solid var(--lbx-fg);
	background: transparent; color: var(--lbx-fg);
	text-decoration: none; text-transform: uppercase;
	font-size: 22px; letter-spacing: 0.01em;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.lbx-ty__btn:hover { background: var(--lbx-fg); color: #ffffff; }
.lbx-ty__btn--go { border-color: var(--lbx-green); background: var(--lbx-green); color: #ffffff; }
.lbx-ty__btn--go:hover { background: transparent; color: var(--lbx-green); }

@media (max-width: 860px) {
	.lbx-ty__meta { grid-template-columns: 1fr; }
	.lbx-ty__cols, .lbx-ty__cta { grid-template-columns: 1fr; gap: 22px; }
	.lbx-ty__btn { min-height: 52px; font-size: 18px; }
}

/* ---------- Mobile: stack, order summary first ---------- */
@media (max-width: 1000px) {
	/* The theme adds `.woocommerce-checkout.page .woocommerce { padding: 27px }`
	   on the checkout only — the cart's wrapper has none — which is why the two
	   pages never matched. The gutter is moved onto that wrapper so notices get
	   it too, and taken off our own containers so the two don't stack. One extra
	   class beats the theme's selector without needing !important. */
	body.woocommerce-checkout.page .woocommerce {
		padding-left: 15px;
		padding-right: 15px;
	}
	.lbx-checkout { --lbx-colgap: 30px; width: 100%; padding-left: 0; padding-right: 0; }
	/* Stacked in document order, which is already the order wanted: your order,
	   billing, collect or ship, payment. Flattening the columns and reordering
	   with `order` only scrambled them. */
	.lbx-cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.lbx-col { display: block; }
	.lbx-col--right { margin-top: 0; }
	/* Gutter comes from the wrapper above, same as the checkout form. */
	.lbx-ty { padding-left: 0; padding-right: 0; }
}
@media (max-width: 700px) {
	.lbx-checkout { --lbx-top: 90px; --lbx-row-h: 64px; --lbx-price-col: 96px; --lbx-thumb: 54px; }
	.lbx-h { font-size: 21px; }
	.lbx-row--total { grid-template-columns: 100px 1fr var(--lbx-price-col); }
	.lbx-checkout #place_order { font-size: 18px; }
	.lbx-payment { min-height: 0; padding: 18px; }
	.lbx-cell--select select { font-size: 18px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.lbx-pill, .lbx-checkout #place_order, .lbx-checkout .form-row > label { transition: none; }
}

/* ================= Ticket orders =================
   Full-width order block, then Who's booking left and invoicing / payment
   right. Each event is an event row, its attendee rows indented past the
   colour tile, and the last one carries the footer. Frames overlap by the
   stroke width so shared edges read as a single 3px line. */
.lbx-mode-tickets {
	--lbx-right: 490px;
	--lbx-colgap: 23px;
	--lbx-ev-price: 170px;   /* price / total / merged cell — all three must match */
	--lbx-ev-label: 168px;
	--lbx-ev-tile: 46px;
}
/* Only the left column is flattened into the grid — its heading and the order
   block need to span both columns. The right column stays a real block and
   sits in column two as one grid item, so everything inside it (pills, the
   Econt panel, the pickup note, payment) stacks in source order underneath the
   pills. Flattening this one too made each of those a grid item of its own:
   they were then auto-placed row by row against the tall billing block
   opposite, which is how the Econt panel ended up in column one underneath the
   billing fields, hundreds of pixels below its own blue header. */
.lbx-mode-tickets .lbx-col--left { display: contents; }
.lbx-mode-tickets .lbx-col--right { display: block; grid-column: 2; }
.lbx-mode-tickets .lbx-cols { row-gap: 34px; }
.lbx-mode-tickets .lbx-col--left > .lbx-h,
.lbx-mode-tickets .lbx-events,
.lbx-mode-tickets #order_review { grid-column: 1 / -1; }
.lbx-mode-tickets #customer_details { grid-column: 1; }
/* Invoicing and payment stack inside one grid cell in column two. */
.lbx-mode-tickets .lbx-rightcol {
	grid-column: 2;
	/* flow-root, so the offset below actually applies. As a plain block this
	   wrapper let payment's top margin collapse straight through it: the
	   column's own 43px won (margins collapse to the larger of the two) and
	   the drop was silently discarded, leaving Place Order sitting 13px high
	   of the postcode cell opposite. */
	display: flow-root;
	/* How far the payment block sits below the top of the column when no
	   invoice is wanted — tuned so Place Order ends level with the postcode
	   cell opposite. One value to nudge if the billing block ever changes. */
	--lbx-pay-drop: 13px;
}
.lbx-mode-tickets #payment { grid-column: auto; margin-top: var(--lbx-pay-drop); }
/* With invoicing open, payment follows it and lands level with the ticks. */
.lbx-mode-tickets.lbx-inv-open #payment { margin-top: 33px; }
.lbx-mode-tickets .lbx-invoicing > .lbx-h:first-child { margin-top: 0; }

/* Both columns start level, and 25px lower than the last pass. The value is
   shared so the two can't drift apart. */
.lbx-mode-tickets .lbx-cols { row-gap: 0; --lbx-tickets-top: 43px; }
.lbx-mode-tickets .lbx-billing > .lbx-h:first-child { margin-top: var(--lbx-tickets-top); }
.lbx-mode-tickets .lbx-rightcol { margin-top: var(--lbx-tickets-top); }
/* A ticket order that also carries goods puts the fulfilment block in column
   two, but it was never given that same offset — so Collect / Deliver started
   straight under the order block, a heading's height above BILLING DETAILS
   opposite. The shared value keeps the two column tops level. */
.lbx-mode-tickets .lbx-fulfil { margin-top: var(--lbx-tickets-top); }
/* Whichever of the two comes first carries the offset. With goods in the
   order that is fulfilment, and payment simply follows the panel above it. */
.lbx-mode-tickets .lbx-fulfil ~ .lbx-rightcol { margin-top: 0; }

.lbx-events { display: block; }
.lbx-stub { display: none !important; }
.lbx-mode-tickets #order_review { min-height: 0; }
.lbx-ev { margin-bottom: 33px; }
.lbx-ev:last-child { margin-bottom: 0; }

.lbx-ev__row {
	background: var(--lbx-line);
	padding: var(--lbx-gap);
	display: grid;
	grid-template-columns: var(--lbx-ev-tile) 1fr var(--lbx-ev-price);
	gap: var(--lbx-gap);
}
.lbx-ev__row > * { background: var(--lbx-cell); }
.lbx-ev__tile { min-height: 59px; }
.lbx-ev__name {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding: 8px 10px; line-height: 1.25; overflow: hidden; text-align: left;
}
.lbx-ev__t { font-weight: 700; text-transform: uppercase; font-size: 15px; }
.lbx-ev__q { color: #6d6e71; font-size: 15px; margin-top: 3px; }
.lbx-ev__price { display: flex; align-items: center; justify-content: center; font-size: 20px; white-space: nowrap; }

/* Attendee rows and the footer sit indented past the tile, and pull up by the
   stroke width so the frames share one edge. */
.lbx-ev__att:not(:empty),
.lbx-ev__foot {
	background: var(--lbx-line);
	padding: var(--lbx-gap);
	margin-left: calc( var(--lbx-ev-tile) + var(--lbx-gap) );
	margin-top: calc( -1 * var(--lbx-gap) );
	display: grid;
	gap: var(--lbx-gap);
}
.lbx-ev__foot { grid-template-columns: var(--lbx-ev-label) 1fr var(--lbx-ev-price); }
.lbx-ev__foot > * { background: var(--lbx-cell); min-height: 35px; }
/* .lbx-ev__foot > * sets every footer cell grey and, matching .lbx-edit's
   specificity while sitting later in the file, was winning. Named explicitly so
   Edit cart keeps its pink in ticket mode too, on both breakpoints. */
.lbx-mode-tickets .lbx-edit { font-size: 13px; background: var(--lbx-pink); }
.lbx-mode-tickets .lbx-total-label,
.lbx-mode-tickets .lbx-total-sum { min-height: 35px; }

/* FooEvents' own markup, laid into the grid. */
.lbx-mode-tickets .fooevents-eventname { display: none; }
.lbx-mode-tickets .fooevents-attendee {
	display: grid;
	/* The last two columns must add up to the 170px price column above,
	   gap included, or every right edge in the block sits 3px out. */
	grid-template-columns: var(--lbx-ev-label) 1fr 1fr calc( ( var(--lbx-ev-price) - var(--lbx-gap) ) / 2 ) calc( ( var(--lbx-ev-price) - var(--lbx-gap) ) / 2 );
	/* Seated rows are 70px overall: two sub-cells sharing that height with the
	   stroke between them, so they line up with the 35px non-seated rows. */
	grid-template-rows: calc( ( 70px - var(--lbx-gap) ) / 2 ) calc( ( 70px - var(--lbx-gap) ) / 2 );
	gap: var(--lbx-gap);
	min-height: 70px;
}
.lbx-mode-tickets .fooevents-attendee > * { background: var(--lbx-cell); min-height: 0; }

/* Column one is two stacked cells: the attendee number, then the chart link. */
.lbx-mode-tickets .fooevents-attendee-number {
	grid-column: 1; grid-row: 1;
	display: flex; align-items: center; justify-content: center;
	margin: 0 !important; padding: 0 8px;
	background: var(--lbx-fill);
	font-size: 13px; font-weight: 400; text-transform: uppercase;
	line-height: 1; text-align: center;
}
.lbx-mode-tickets .fooevents-attendee .fooevents_seating_chart {
	grid-column: 1; grid-row: 2;
	display: flex !important; align-items: center; justify-content: center;
	margin: 0 !important; padding: 0 8px !important;
	/* Pink so it reads as the one thing to press in the block. */
	background: var(--lbx-pink) !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	color: var(--lbx-fg) !important;
	font: inherit; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase;
	text-decoration: none;
	min-height: 0 !important; width: auto;
}
.lbx-mode-tickets .fooevents-attendee .fooevents_seating_chart:hover {
	background: var(--lbx-fg) !important; color: #ffffff !important;
}
/* The theme gives .button a height of its own, which overflowed the 33.5px
   track and painted over the stroke beneath. Both sub-cells are pinned to
   their track instead. */
.lbx-mode-tickets .fooevents-attendee-number,
.lbx-mode-tickets .fooevents-attendee .fooevents_seating_chart {
	height: 100% !important;
	max-height: 100% !important;
	min-height: 0 !important;
	line-height: 1 !important;
	overflow: hidden;
}

/* The four fields span both sub-rows, so they read as full-height cells. */
.lbx-mode-tickets .fooevents-attendee-first-name { grid-column: 2; grid-row: 1 / 3; }
.lbx-mode-tickets .fooevents-attendee-last-name  { grid-column: 3; grid-row: 1 / 3; }
.lbx-mode-tickets .fooevents-attendee .seating-class-row  { grid-column: 4; grid-row: 1 / 3; }
.lbx-mode-tickets .fooevents-attendee .seating-class-seat { grid-column: 5; grid-row: 1 / 3; }

.lbx-mode-tickets .fooevents-checkout-attendee-info { display: none !important; }

/* The event's option attribute ("Multiple Day Events: One Session") is echoed
   into the attendee block. It is chosen on the event page and already carried
   by the ticket name above, so all it did here was auto-place into a second
   grid row and push a stray cell above the footer. Hidden rather than removed
   in PHP: the markup is FooEvents' own, and display:none takes the row with
   it, so Edit cart / Total sit straight under the name fields again. */
.lbx-mode-tickets .fooevents-attendee dl,
.lbx-mode-tickets .fooevents-attendee .variation,
.lbx-mode-tickets .lbx-ev__att dl,
.lbx-mode-tickets .lbx-ev__att .variation,
.lbx-mode-tickets .lbx-ev > dl,
.lbx-mode-tickets .lbx-ev > .variation { display: none !important; }
.lbx-mode-tickets .fooevents-attendee .form-row {
	display: flex !important; align-items: center;
	margin: 0 !important; padding: 0 !important;
	width: auto !important; float: none !important;
	position: relative;
}
.lbx-mode-tickets .fooevents-attendee .form-row > label {
	position: absolute; left: 10px; right: 10px; top: 50%;
	transform: translateY(-50%);
	margin: 0; font-size: 13px; text-transform: uppercase; color: #6d6e71;
	pointer-events: none; text-align: center;
	white-space: nowrap; overflow: hidden;
}
.lbx-mode-tickets .fooevents-attendee .form-row.is-filled > label,
.lbx-mode-tickets .fooevents-attendee .form-row.seating-class > label { display: none; }
.lbx-mode-tickets .fooevents-attendee .form-row .required { display: none; }
.lbx-mode-tickets .fooevents-attendee .woocommerce-input-wrapper { width: 100%; }
.lbx-mode-tickets .fooevents-attendee input[type="text"],
.lbx-mode-tickets .fooevents-attendee select {
	width: 100%;
	background: transparent !important;
	border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; outline: 0 !important;
	font: inherit; font-size: 14px; color: var(--lbx-fg);
	text-align: center;
	padding: 0 8px !important;
	height: 100% !important; min-height: 0 !important;
	margin: 0 !important;
	appearance: none; -webkit-appearance: none;
}
/* Events without seating: a single 35px row, the attendee label full height,
   and the row/seat columns merged into one empty outlined cell. */
.lbx-mode-tickets .fooevents-attendee.is-noseat {
	/* One whole column instead of two halves: 83.5px each rounded differently
	   from the 170px cells above and below, which is what put the edges out. */
	grid-template-columns: var(--lbx-ev-label) 1fr 1fr var(--lbx-ev-price);
	grid-template-rows: 1fr;
	min-height: 35px;
}
.lbx-mode-tickets .fooevents-attendee.is-noseat::after { grid-column: 4; }
/* The name fields span two rows for seated events. With only one row here,
   that span invented a second row and left every cell 3px short. */
.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-first-name,
.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-last-name {
	grid-row: 1;
}
.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-number {
	grid-row: 1;
	align-items: center;
}
.lbx-mode-tickets .fooevents-attendee.is-noseat::after {
	content: "";
	grid-row: 1;
	background: var(--lbx-cell);
}

.lbx-mode-tickets .fooevents-attendee .seating-class select {
	font-size: 13px;
	padding: 0 4px !important;
	text-align: center;
	text-align-last: center;
}
#fooevents_seating_dialog { display: none; }

@media (max-width: 1000px) {
	.lbx-mode-tickets .lbx-cols { grid-template-columns: minmax(0, 1fr); }
	.lbx-mode-tickets .lbx-col { display: block; }
	.lbx-mode-tickets #customer_details,
	.lbx-mode-tickets .lbx-col--right,
	.lbx-mode-tickets .lbx-rightcol,
	.lbx-mode-tickets #payment { grid-column: 1; }
	.lbx-mode-tickets .lbx-rightcol { margin-top: 34px; }
	/* Stacked, so it spaces like every other block rather than holding the
	   desktop column offset. */
	.lbx-mode-tickets .lbx-fulfil { margin-top: 34px; }
	.lbx-mode-tickets #payment { margin-top: 0; }
	.lbx-mode-tickets .lbx-billing > .lbx-h:first-child { margin-top: 34px; }
	/* ---- Event summary, mobile ----
	   Every row spans the full block, so the colour tile's left edge lines up
	   with everything beneath it. The desktop indent past the tile is what made
	   the attendee grid overflow on a phone. */
	.lbx-ev__row { grid-template-columns: 40px 1fr 96px; }
	.lbx-ev__tile { min-height: 65px; }
	.lbx-ev__att:not(:empty), .lbx-ev__foot { margin-left: 0; }
	.lbx-ev__foot { grid-template-columns: 1fr 2fr 1fr; }
	.lbx-ev__foot > * { min-height: 35px; }

	/* Attendee block: label full width, names half and half, then chart at 1/2
	   with row and seat at 1/4 each. Four equal columns carry all three rows. */
	.lbx-mode-tickets .fooevents-attendee {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 35px 35px 35px;
		min-height: 0;
	}
	.lbx-mode-tickets .fooevents-attendee-number {
		grid-column: 1 / -1; grid-row: 1;
	}
	.lbx-mode-tickets .fooevents-attendee-first-name { grid-column: 1 / 3; grid-row: 2; }
	.lbx-mode-tickets .fooevents-attendee-last-name  { grid-column: 3 / 5; grid-row: 2; }
	.lbx-mode-tickets .fooevents-attendee .fooevents_seating_chart {
		grid-column: 1 / 3; grid-row: 3;
		justify-content: center;
		font-size: 11px;
	}
	.lbx-mode-tickets .fooevents-attendee .seating-class-row  { grid-column: 3 / 4; grid-row: 3; }
	.lbx-mode-tickets .fooevents-attendee .seating-class-seat { grid-column: 4 / 5; grid-row: 3; }

	/* Without seating there is no third row, and the filler cell the desktop
	   layout needs to square off its price column is not wanted here. */
	.lbx-mode-tickets .fooevents-attendee.is-noseat {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 35px 35px;
		min-height: 0;
	}
	.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-number { grid-column: 1 / -1; grid-row: 1; }
	.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-first-name { grid-column: 1 / 3; grid-row: 2; }
	.lbx-mode-tickets .fooevents-attendee.is-noseat .fooevents-attendee-last-name  { grid-column: 3 / 5; grid-row: 2; }
	.lbx-mode-tickets .fooevents-attendee.is-noseat::after { display: none; }
}

/* ==========================================================================
   Fulfilment block — radio row over one connected panel

   The two options are now chosen by radios in a heading row, and the coloured
   bar beneath is drawn from whichever is selected. The radios are still the
   real inputs, so the shipping method reaches the server exactly as before —
   this is presentation only.

   The label is display: contents, which lets its word sit in the heading row
   and its bar span the full width underneath, without either being wrapped in
   markup that would have to be kept in step with the rates.
   ========================================================================== */

.lbx-fulfil { gap: 0; }

.lbx-pills {
	/* No stroke frame on the heading row: the frame starts at the bar. */
	background: transparent !important;
	padding: 0 !important;
	gap: 0 26px !important;
	grid-template-rows: auto auto;
	align-items: center;
}

.lbx-pill {
	display: contents !important;
}

/* Selector written as a child rule so it outranks `.lbx-pill > span`, which
   sets display: block on both spans. That rule is why the circle sat above the
   word instead of beside it — and why the unselected option's bar stayed on
   screen, showing "Delivery" above the green one. */
.lbx-pill > .lbx-pill__word {
	grid-row: 1;
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 0 0 14px !important;
	font-size: 30px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--lbx-fg);
	cursor: pointer;
	background: none !important;
	width: auto !important;
	text-align: left !important;
}

/* The circle is drawn in CSS rather than loaded from radio-off.svg /
   radio-on.svg. Those files carry their colours in an internal <style> block,
   and whatever serves them was flattening that away — the unselected circle
   came back as a solid black disc (an SVG <circle> with no stylesheet applied
   defaults to fill:black, stroke:none) instead of the empty ring it should be.
   A border and a background cannot be flattened, and they reproduce the
   artwork exactly: 3px stroke, #231f20 empty when off, green filled with the
   #efefef stroke when on.

   Written over an earlier rule that blanks every pseudo-element on the pill's
   spans — it was there to stop the theme decorating the old buttons, and it
   would otherwise swallow this circle too. */
.lbx-pill > .lbx-pill__word::before {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* 25px, not 27: the artwork's ring was 25.16px across inside a 27px box
	   (r 11.08 plus a 3px stroke). Drawing the border on a 27px element made
	   the whole circle a size bigger than designed. */
	width: 25px;
	height: 25px;
	border: 3px solid #231f20;
	border-radius: 50%;
	background: transparent !important;
}

.lbx-pill.is-on > .lbx-pill__word::before {
	border-color: #efefef;
	background: var(--lbx-green) !important;
}

/* The old buttons turned their text white when chosen. The heading word stays
   dark now — only the bar beneath it is filled. */
.lbx-pill.is-on .lbx-pill__word { color: var(--lbx-fg) !important; }
.lbx-pill.is-on .lbx-pill__bar { color: #ffffff !important; }

/* Only the chosen option draws the bar, and it spans both columns. */
.lbx-pill > .lbx-pill__bar {
	grid-row: 2;
	grid-column: 1 / -1;
	display: none !important;
	align-items: center;
	justify-content: center;
	min-height: var(--lbx-pill-h);
	padding: 6px 12px;
	border: var(--lbx-gap) solid var(--lbx-line);
	border-bottom: 0;
	color: #ffffff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
}

.lbx-pill.is-on > .lbx-pill__bar { display: flex !important; }
.lbx-pill[data-mode="pickup"].is-on .lbx-pill__bar { background: var(--lbx-green); }
.lbx-pill[data-mode="ship"].is-on .lbx-pill__bar { background: var(--lbx-deliver); }

/* Attached to the bar with no gap. */
.lbx-fulfil .lbx-pickup { margin-top: 0; }

/* Exactly the billing fields: filled with the page colour, not transparent.
   The container behind them is #efefef and shows through the 3px gaps as the
   stroke — so a transparent cell reveals that stroke colour across its whole
   face and reads lighter than the page, which is what went wrong. */
.lbx-fulfil .lbx-grid2 .lbx-cell--select,
.lbx-fulfil .lbx-cell--select {
	background: var(--lbx-cell) !important;
}

/* The flag has to win against the fill above, which carries !important and
   sits later in the file than the .lbx-missing rule — so the class was landing
   on these two cells and changing nothing. Same weight, later position, and
   the hover fill is beaten too: a flagged cell stays flagged under the
   pointer, or moving the mouse over it would look like it had been cleared. */
.lbx-fulfil .lbx-grid2 .lbx-cell--select.lbx-missing,
.lbx-fulfil .lbx-cell--select.lbx-missing,
.lbx-fulfil .lbx-cell--select.lbx-missing:hover {
	background: var(--lbx-blue) !important;
}

/* The Econt panel hangs off the blue bar the same way. */
.lbx-econt {
	margin-top: 0 !important;
	border: var(--lbx-gap) solid var(--lbx-line);
	border-top: 0;
}

/* ---- Fulfilment: cell height, hover and type size ---- */

.lbx-fulfil .lbx-cell--select {
	min-height: 50px !important;
	transition: background-color 0.12s ease;
}

/* Filling with the stroke colour on hover: the cell and the frame become one
   solid shape, which is the only fill available that does not introduce a
   colour the block does not already use. */
.lbx-fulfil .lbx-cell--select:hover {
	background: var(--lbx-line) !important;
}

/* The bar and the two selects read at the same size. */
.lbx-pill > .lbx-pill__bar { font-size: 20px; }

.lbx-fulfil .lbx-cell--select,
.lbx-checkout .lbx-fulfil .lbx-cell--select select {
	font-size: 20px !important;
}

/* ---- Typed values are sentence case ----
   The field name above an empty cell stays uppercase; it is a separate label,
   not the input's own text. Only what someone types is left alone, so a name,
   an address or a note reads the way it was written. Selects keep their caps —
   those are chosen from a list, not typed. */
.lbx-checkout .lbx-cell input,
.lbx-checkout .lbx-cell textarea {
	text-transform: none !important;
}

/* ---- Fulfilment on narrow screens ----
   1fr carries a min-content floor, so once the circle plus the word is wider
   than half the screen the two columns push the grid past its container and it
   overhangs on the right. minmax(0, 1fr) lets the columns shrink instead, and
   the word steps down so it still fits rather than being clipped. */

.lbx-pills {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.lbx-pill > .lbx-pill__word {
	min-width: 0;
}

@media (max-width: 1000px) {
	.lbx-pills { gap: 0 14px !important; }

	.lbx-pill > .lbx-pill__word {
		font-size: 22px;
		gap: 9px;
		padding-bottom: 12px !important;
	}

	.lbx-pill > .lbx-pill__word::before {
		width: 20px;
		height: 20px;
	}
}

/* The two collection selects stack on narrow screens. Side by side each has
   barely half the width, and a native select cannot wrap its value — it just
   truncates, so "Collection day" was being cut off. Full width each gives them
   the room instead. */
@media (max-width: 1000px) {
	.lbx-fulfil .lbx-grid2 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ---- Courier markup on a booking ----
   Backstop for anything Econt still prints on a ticket-only checkout: some of
   it renders outside our form, so the body class is what the selectors hang
   off. unhook_courier() and strip_courier_assets() should mean there is
   nothing left for these to catch — they cost nothing if so, and cover the
   closures that cannot be unhooked by name. */
.lbx-booking-only #place_iframe_here,
.lbx-booking-only #delivery_with_econt_calculate_shipping,
.lbx-booking-only .econt-alert,
.lbx-booking-only .econt-button { display: none !important; }