/*
 * AuctionForge skin — account.
 *
 * AF's modals (login, register, verify phone, bid / buy-now confirmation, request approval,
 * payment method, increments table, search, ID photo), its SweetAlert notices, the account notices
 * and sale-approval states it shows on every AF page, its own page header (the profile page) and
 * the profile page, in the original contact form's language (form.colourful): uppercase futura labels with a
 * red asterisk, white bordered inputs, the bordered "marketing" box for check boxes, teal block
 * buttons, Baskerville navy headings, teal links.
 *
 * Two things make the selectors long:
 * - default.css has its own .modal component (a fixed white panel, translate3d(-50%) !important,
 *   z-index 49), and AF's modal root carries the class "modal" too. The root is reset first.
 * - AF's inline <style id="bidspirit-custom-styles"> is printed after this file and sets button
 *   colours with !important, so those are overridden with !important and higher specificity.
 *
 * AF's forms have placeholders but no labels, so the labels are drawn from the field names
 * (see "Field labels"); a field without a mapping keeps its placeholder instead.
 */

/* ======================================================================
   Modal shell
   ====================================================================== */

/* The root is only a wrapper: AF shows it with display:block (.is-open) and positions the overlay. */
html body .bp-modal.modal.micromodal-slide {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	box-shadow: none;
	transform: none !important;
	transition: none;
}

/* The page behind stays put while a modal is open (the original locked it with html.modal-active). */
html:has(body .bp-modal.modal.is-open) {
	overflow: hidden;
}

/* The original .modal-overlay colour. */
html body .bp-modal.modal.micromodal-slide .modal__overlay {
	background-color: rgba(19, 65, 100, 0.75);
}

html body .bp-modal.modal.micromodal-slide .modal__overlay.bg-dark {
	background-color: rgba(8, 37, 62, 0.92);
}

html body .bp-modal.modal.micromodal-slide .modal__overlay__inner {
	width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 3.75rem 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* White panel with the site's blue-green bar along the top (the strip under the header). */
html body .bp-modal.modal.micromodal-slide .modal__container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 32.5rem;
	height: auto;
	margin: 0 auto;
	padding: 2.25rem 2.5rem 1.875rem;
	border: 0;
	border-radius: 0;
	background: linear-gradient(to right, #025d74 0%, #025d74 36%, #78c9ce 68%, #78cea1 100%) left top / 100% 0.375rem no-repeat, #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide.modal__sale-content .modal__container,
html body .bp-modal.modal.micromodal-slide .modal__container.modal__container-2 {
	max-width: 42.5rem;
}

html body .bp-modal.modal.micromodal-slide#modal-steps .modal__container {
	max-width: 30rem;
}

/* The ID photo viewer has no heading: keep the photo clear of the close button. */
html body .bp-modal.modal.micromodal-slide#modal-photoId .modal__container {
	max-width: 42.5rem;
	padding-top: 3.75rem;
}

html body .bp-modal.modal.micromodal-slide#modal-photoId #idPhotoImage {
	display: block;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	html body .bp-modal.modal.micromodal-slide .modal__overlay,
	html body .bp-modal.modal.micromodal-slide .modal__container {
		animation: none;
	}
}

/* ---------- Header: a Baskerville heading over a rule, like the page headings ---------- */

html body .bp-modal.modal.micromodal-slide .modal__header {
	display: block;
	position: static;
	height: auto;
	margin: 0 0 1.25rem;
	padding: 0 2.5rem 0.9375rem 0;
	border-bottom: 1px solid #d7dad6;
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .modal__header .modal__title,
html body .bp-modal.modal.micromodal-slide .modal__title {
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--sb-navy);
	font-family: var(--sb-font-heading);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	text-transform: capitalize;
}

/* AF's grey avatar above the title. */
html body .bp-modal.modal.micromodal-slide .modal__header .modal__title::before {
	content: none;
	display: none;
}

html body .bp-modal.modal.micromodal-slide .modal__header .modal__subtitle,
html body .bp-modal.modal.micromodal-slide .modal__subtitle {
	width: 100%;
	margin: 0.4375rem 0 0;
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

/* ---------- Close button (the original modal's navy close, teal on hover) ---------- */

html body .bp-modal.modal.micromodal-slide .modal__close {
	position: absolute;
	top: 1.125rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.3125rem;
	background: transparent;
	color: var(--sb-navy-dark);
	font-size: 1.375rem;
	line-height: 1;
	opacity: 1;
	cursor: pointer;
	transition: color 200ms linear;
}

html body .bp-modal.modal.micromodal-slide .modal__close::before {
	content: "\f00d";
	color: inherit;
	font-family: "FontAwesome";
	font-weight: normal;
	line-height: 1;
}

html body .bp-modal.modal.micromodal-slide .modal__close:hover,
html body .bp-modal.modal.micromodal-slide .modal__close:focus {
	background: transparent;
	color: var(--sb-teal);
	opacity: 1;
}

html body .bp-modal.modal.micromodal-slide .modal__close:focus-visible {
	outline: 2px solid var(--sb-teal) !important;
	outline-offset: 0;
}

/* The increments table is the one modal AF prints without a close button (Escape and the backdrop
   close it). Its panel's parent carries data-micromodal-close and MicroModal closes on a click whose
   target's parent has it, so the same navy × drawn on the panel closes it like the other modals'. */
html body .bp-modal.modal.micromodal-slide#modal-steps .modal__container::after {
	content: "\f00d";
	position: absolute;
	top: 1.125rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--sb-navy-dark);
	font-family: "FontAwesome";
	font-size: 1.375rem;
	font-weight: normal;
	line-height: 1;
	cursor: pointer;
}

/* ---------- Body text, links, errors ---------- */

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content {
	margin: 0;
	padding: 0;
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .modal__content p {
	margin: 0 0 0.9375rem;
	color: var(--sb-text);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .modal__container a:not(.bp-btn) {
	color: var(--sb-teal);
	font-weight: 700;
	text-decoration: none;
}

html body .bp-modal.modal.micromodal-slide .modal__container a:not(.bp-btn):hover,
html body .bp-modal.modal.micromodal-slide .modal__container a:not(.bp-btn):focus {
	color: var(--sb-navy-dark);
	text-decoration: none;
}

html body .bp-modal.modal.micromodal-slide .modal__container a:focus-visible,
html body.bp_profile_page #profile-page a:focus-visible {
	outline: 2px solid var(--sb-teal);
	outline-offset: 2px;
}

/* The original's .validation-advice / .form-req-status red. */
html body .bp-modal.modal.micromodal-slide .errors-group,
html body.bp_profile_page #profile-page .errors-group {
	margin: 0 0 0.9375rem;
	color: #b20000;
	font-family: var(--sb-font-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .errors-group:not(:empty),
html body.bp_profile_page #profile-page .errors-group:not(:empty) {
	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(178, 0, 0, 0.3);
	border-left: 4px solid #b20000;
	border-radius: 5px;
	background: #fdf4f4;
}

html body .bp-modal.modal.micromodal-slide .errors-group p,
html body.bp_profile_page #profile-page .errors-group p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

html body .bp-modal.modal.micromodal-slide p.bp-text-red,
html body .bp-modal.modal.micromodal-slide .bp-text-red,
html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-error,
html body .bp-modal.modal.micromodal-slide .bp-from .af-field-error,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-error,
html body.bp_profile_page #profile-page #updateDetailsSection .af-field-error {
	color: #b20000;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-error,
html body .bp-modal.modal.micromodal-slide .bp-from .af-field-error,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-error,
html body.bp_profile_page #profile-page #updateDetailsSection .af-field-error {
	font-family: var(--sb-font-body);
	font-size: 0.8125rem;
	line-height: 1.35;
}

html body .bp-modal.modal.micromodal-slide .bp-from .af-field-error,
html body.bp_profile_page #profile-page #updateDetailsSection .af-field-error {
	margin: 0.3125rem 0 0;
}

/* ---------- Footer (links under a rule; button rows) ---------- */

html body .bp-modal.modal.micromodal-slide .modal__container .modal__footer,
html body .bp-modal.modal.micromodal-slide .modal__container > footer {
	height: auto;
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid #d7dad6;
}

html body .bp-modal.modal.micromodal-slide .modal__container .modal__footer:empty {
	display: none;
}

html body .bp-modal.modal.micromodal-slide .modal__footer .modal_links {
	justify-content: flex-start;
	margin: 0;
}

html body .bp-modal.modal.micromodal-slide .modal__footer .modal_links__item,
html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group .bp-form-group__link {
	margin: 0;
	color: var(--sb-teal);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
}

html body .bp-modal.modal.micromodal-slide .modal__footer .modal_links__item:hover,
html body .bp-modal.modal.micromodal-slide .modal__footer .modal_links__item:focus,
html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group .bp-form-group__link:hover,
html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group .bp-form-group__link:focus {
	color: var(--sb-navy-dark);
	text-decoration: none;
}

/* Button rows: Cancel / I don't agree on the left of the main action, all on the right. */
html body .bp-modal.modal.micromodal-slide .modal__container .modal__footer.bp-d-flex,
html body .bp-modal.modal.micromodal-slide .modal__container > footer.bp-d-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.625rem;
}

html body .bp-modal.modal.micromodal-slide .modal__footer.bp-d-flex > .bp-d-flex {
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

html body .bp-modal.modal.micromodal-slide .modal__footer.bp-d-flex > .bp-d-flex.bp-mr-auto {
	margin-right: auto;
}

html body .bp-modal.modal.micromodal-slide .modal__footer .bp-btn.bp-mr-10 {
	margin-right: 0 !important;
}

/* ======================================================================
   Buttons inside modals and on the profile page
   The original .button: myriad 600 uppercase, teal, navy on hover; .button.secondary is slate.
   (default.css also styles every <button> as a teal block, and as a 1.4rem block under 50rem.)
   On the profile page only the account form and the payment-methods tab: the lot cards in the
   other tabs belong to the catalogue skin, and the invoices keep AF's inline-styled buttons.
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide .bp-btn,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0.9375rem 1.875rem;
	border: 0;
	border-radius: 0.3125rem;
	font-family: var(--sb-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 1;
	transition: background-color 200ms linear, color 200ms linear;
}

html body .bp-modal.modal.micromodal-slide .bp-btn:focus-visible,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn:focus-visible {
	outline: 2px solid var(--sb-navy-dark);
	outline-offset: 2px;
}

/* Main action: teal. */
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-black,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-primal,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-black,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-default {
	border: 0 !important;
	background-color: var(--sb-teal) !important;
	color: #fff !important;
}

/* Alternatives and Cancel / I don't agree: slate, like .button.secondary. */
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-border,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-outline-default,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-outline-primal,
html body .bp-modal.modal.micromodal-slide#modal-verify-phone .bp-btn.bp-btn-default {
	border: 0 !important;
	background-color: var(--sb-slate) !important;
	color: #fff !important;
}

html body .bp-modal.modal.micromodal-slide .bp-btn:not(.modal__close, [disabled], .bp-disabled):hover,
html body .bp-modal.modal.micromodal-slide .bp-btn:not(.modal__close, [disabled], .bp-disabled):focus,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-black:hover,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-black:focus,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-default:hover,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-default:focus {
	border-color: var(--sb-navy-dark) !important;
	background-color: var(--sb-navy-dark) !important;
	color: #fff !important;
	opacity: 1;
}

/* AF dims a disabled button and one waiting for the server (.is-busy, with its spinner). */
html body .bp-modal.modal.micromodal-slide .bp-btn:is([disabled], .bp-disabled, .is-busy),
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn:is([disabled], .bp-disabled, .is-busy) {
	opacity: 0.65;
}

/* "Terms of sale" is a plain link beside the buttons. */
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link:hover,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link:focus {
	padding-right: 0;
	padding-left: 0;
	background-color: transparent !important;
	font-family: var(--sb-font-body);
	font-weight: 700;
	text-transform: none;
}

html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link {
	color: var(--sb-teal) !important;
}

html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link:hover,
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-default.bp-btn-link:focus {
	color: var(--sb-navy-dark) !important;
}

/* The form submits fill their column, like the original .button.block. */
html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-black,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-black {
	display: flex;
	width: 100%;
}

html body .bp-modal.modal.micromodal-slide .bp-btn.bp-btn-sm,
html body.bp_profile_page #profile-page :is(#updateDetailsSection, #profile-payment-methods-section) .bp-btn.bp-btn-sm {
	padding: 0.46875rem 1.25rem;
}

/* ======================================================================
   Forms: the original form.colourful
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide .bp-from,
html body.bp_profile_page #profile-page #updateDetailsSection {
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group {
	margin: 0 0 0.75rem;
	text-align: left;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group .bp-form-control,
html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-control,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-control {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.46875rem 0.625rem;
	border: 1px solid #89a0b2;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: none;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	transition: border-color 200ms linear, box-shadow 200ms linear;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-control:focus,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-control:focus {
	border-color: var(--sb-navy-dark);
	box-shadow: 0 0 0 3px rgba(73, 158, 170, 0.3);
	outline: none;
}

/* Fields that have a label drawn above them hide the placeholder (it repeats the label). */
html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-control::placeholder,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-control::placeholder {
	color: var(--sbaf-placeholder, #8a99a8);
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 1;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-control:disabled,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-control:disabled {
	background-color: var(--sb-band);
	color: var(--sb-text);
	cursor: default;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group select.bp-form-control,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group select.bp-form-control {
	cursor: pointer;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-control.is-invalid,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-control.is-invalid {
	border-color: #b20000 !important;
	box-shadow: 0 0 0 3px rgba(178, 0, 0, 0.12);
}

/* Password eye */
html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-control.bp-form-control_eye,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-control.bp-form-control_eye {
	padding-right: 2.5rem;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group.bp-form-group_svg .svg-icon,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group.bp-form-group_svg .svg-icon,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group.bp-form-group_svg svg.icon {
	right: 0.625rem;
	width: 1.25rem;
	height: 1.25rem;
	opacity: 0.55;
}

/* ---------- Field labels ----------
   Drawn on the field's .bp-form-group from --sbaf-label (set per field below); the red asterisk is the
   group's ::after and only appears on required fields that have a label. Both sit on the first line
   of the field's flex group (AF stops it wrapping from 577px; it has to wrap for the input to drop
   to the line below). */

html body .bp-modal.modal.micromodal-slide .bp-form-group:has(.bp-form-control),
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group:has(.bp-form-control, select) {
	flex-wrap: wrap;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group:has(.bp-form-control)::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group:has(.bp-form-control, select)::before {
	content: var(--sbaf-label);
	display: block;
	order: -2;
	flex: 0 0 auto;
	margin: 0 0 0.3rem;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-nav);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group:has(.bp-form-control[required])::after,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group:has(.bp-form-control[required], select[required])::after {
	content: var(--sbaf-required);
	order: -1;
	flex: 1 0 0%;
	margin: 0 0 0.3rem;
	color: #b20000;
	font-family: var(--sb-font-nav);
	font-size: 0.875rem;
	line-height: 1.2;
}

/* Login (both fields are needed; no asterisks, as on most sign-in forms) */
html body .bp-modal.modal.micromodal-slide .bp-login-api .bp-form-group:has([name="email"]) { --sbaf-label: "Email Address"; --sbaf-placeholder: transparent; }
html body .bp-modal.modal.micromodal-slide .bp-login-api .bp-form-group:has([name="password"]) { --sbaf-label: "Password"; --sbaf-placeholder: transparent; }

/* Register */
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(> .bp-form-group__inner .bp-form-control) { --sbaf-required: "*"; --sbaf-placeholder: transparent; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has([name="firstName"]) { --sbaf-label: "First Name"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has([name="lastName"]) { --sbaf-label: "Last Name"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has([name="email"]) { --sbaf-label: "Email Address"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has([name="phone"]) { --sbaf-label: "Telephone No."; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has([name="password"]) { --sbaf-label: "Password"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="countryCode"], [name="shipCountryCode"])) { --sbaf-label: "Country"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="address"], [name="shipAddress"])) { --sbaf-label: "Street Address"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="city"], [name="shipCity"])) { --sbaf-label: "Town / City"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="state"], [name="shipState"])) { --sbaf-label: "State"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="province"], [name="shipProvince"])) { --sbaf-label: "State / Province"; }
html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is([name="zipCode"], [name="shipZip"])) { --sbaf-label: "Postcode"; }

/* Verify phone (the code field keeps its "Enter the 4-digit code" hint) */
html body .bp-modal.modal.micromodal-slide#modal-verify-phone .bp-form-group:has(#verifyPhoneNumber) { --sbaf-label: "Telephone No."; --sbaf-placeholder: transparent; }
html body .bp-modal.modal.micromodal-slide#modal-verify-phone .bp-form-group:has(#verifyPhoneCode) { --sbaf-label: "Verification Code"; }

/* Profile ("My Account" form; AF ids each field's group addressField<name> / shippingField<name>) */
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group:is([id^="addressField"], [id^="shippingField"]) { --sbaf-required: "*"; --sbaf-placeholder: transparent; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldfirstName { --sbaf-label: "First Name"; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldlastName { --sbaf-label: "Last Name"; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldemail { --sbaf-label: "Email Address"; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldpassword { --sbaf-label: "New Password"; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldphone { --sbaf-label: "Telephone No."; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldsecondPhone { --sbaf-label: "Second Telephone No."; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldid { --sbaf-label: "ID Number"; }
html body.bp_profile_page #profile-page #updateDetailsSection #addressFieldtaxNumber { --sbaf-label: "Tax Number"; }
html body.bp_profile_page #profile-page #updateDetailsSection #shippingFieldrecipientName { --sbaf-label: "Recipient Name"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldcountryCode, #shippingFieldcountryCode) { --sbaf-label: "Country"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldaddress, #shippingFieldaddress) { --sbaf-label: "Street Address"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldcity, #shippingFieldcity) { --sbaf-label: "Town / City"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldstate, #shippingFieldstate) { --sbaf-label: "State"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldprovince, #shippingFieldprovince) { --sbaf-label: "State / Province"; }
html body.bp_profile_page #profile-page #updateDetailsSection :is(#addressFieldzipCode, #shippingFieldzipCode) { --sbaf-label: "Postcode"; }

/* Section headings in the long forms ("Billing Address", "Shipping Address"). */
html body .bp-modal.modal.micromodal-slide .bp-from .af-addr-head,
html body.bp_profile_page #profile-page #updateDetailsSection .af-addr-head {
	width: 100%;
	margin: 0.625rem 0 0.75rem;
	padding: 0.9375rem 0 0;
	border-top: 1px solid #d7dad6;
	color: rgba(8, 37, 62, 0.8);
	font-family: var(--sb-font-heading);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-transform: capitalize;
}

/* ---------- select2 (phone code, country): drawn like the inputs ---------- */

html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default .select2-selection--single,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: auto;
	min-height: 2.25rem;
	max-height: none;
	border: 1px solid #89a0b2;
	border-radius: 5px;
	background-color: #fff;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default .select2-selection--single .select2-selection__rendered,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0.46875rem 1.75rem 0.46875rem 0.625rem;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.3;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default .select2-selection--single .select2-selection__placeholder,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #8a99a8;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default .select2-selection--single .select2-selection__arrow,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 0.375rem;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default.select2-container--focus .select2-selection--single,
html body .bp-modal.modal.micromodal-slide .bp-form-group .select2-container--default.select2-container--open .select2-selection--single,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default.select2-container--focus .select2-selection--single,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--sb-navy-dark);
	box-shadow: 0 0 0 3px rgba(73, 158, 170, 0.3);
}

/* Phone: code and number side by side, the code a little wider than AF's 30% so the country shows. */
html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group .bp-form-group__inner.bp-form-group__inline.bp-form-group__list,
html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__inline.bp-form-group__list,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__inline.bp-form-group__list {
	align-items: stretch;
	gap: 0.625rem;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > .select2,
html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > select.bp-form-control,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__list > .select2 {
	flex: 0 0 40%;
	min-width: 0;
}

html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > input.bp-form-control,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__list > input.bp-form-control {
	flex: 1 1 0%;
	min-width: 0;
}

/* The dropdown is appended to <body>: style the ones opened from a modal or the profile form. */
html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-dropdown,
html body.bp_profile_page > .select2-container--open .select2-dropdown {
	border: 1px solid var(--sb-navy-dark);
	border-radius: 0 0 5px 5px;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.875rem;
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-dropdown--above,
html body.bp_profile_page > .select2-container--open .select2-dropdown--above {
	border-radius: 5px 5px 0 0;
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-results__option,
html body.bp_profile_page > .select2-container--open .select2-results__option {
	position: static;
	padding: 0.375rem 0.625rem;
	background: #fff;
	color: var(--sb-navy-dark);
	font-weight: 400;
	line-height: 1.3;
}

/* default.css gives every <li> the site's teal bullet; select2's options are <li>s. */
html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-results__option::before,
html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-results__option::after,
html body.bp_profile_page > .select2-container--open .select2-results__option::before,
html body.bp_profile_page > .select2-container--open .select2-results__option::after {
	content: none;
	display: none;
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-results__option[aria-selected="true"],
html body.bp_profile_page > .select2-container--open .select2-results__option[aria-selected="true"] {
	background: var(--sb-row);
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-results__option--highlighted[aria-selected],
html body.bp_profile_page > .select2-container--open .select2-results__option--highlighted[aria-selected] {
	background: var(--sb-teal);
	color: #fff;
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-search__field,
html body.bp_profile_page > .select2-container--open .select2-search__field {
	border: 1px solid #89a0b2;
	border-radius: 5px;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
}

html body:has(.bp-modal.modal.is-open) > .select2-container--open .select2-search__field:focus,
html body.bp_profile_page > .select2-container--open .select2-search__field:focus {
	border-color: var(--sb-navy-dark);
	box-shadow: 0 0 0 3px rgba(73, 158, 170, 0.3);
	outline: none;
}

/* ---------- Check boxes ----------
   AF hides the real input and draws the box with the label's ::before. The label hangs beside
   it, in the navy Arial of the original marketing box. */

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-check,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-check {
	justify-content: flex-start;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input + label,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input + label {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: auto;
	margin: 0;
	padding: 0 0 0 1.625rem;
	border: 0;
	background: none;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input + label::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input + label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 1.0625rem;
	height: 1.0625rem;
	margin: 0;
	border: 1px solid #89a0b2;
	border-radius: 0.1875rem;
	background: #fff;
	transition: background-color 150ms linear, border-color 150ms linear;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input:checked + label::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input:checked + label::before {
	border-color: var(--sb-teal);
	background: var(--sb-teal);
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input:checked + label::after,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input:checked + label::after {
	content: "";
	position: absolute;
	top: 0.1875rem;
	left: 0.375rem;
	display: block;
	width: 0.3125rem;
	height: 0.5625rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input:focus + label::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input:focus + label::before {
	outline: none;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group input.bp-form-check-input:focus-visible + label::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group input.bp-form-check-input:focus-visible + label::before {
	outline: 2px solid var(--sb-navy-dark);
	outline-offset: 2px;
}

html body .bp-modal.modal.micromodal-slide .bp-from .bp-form-group.is-invalid input.bp-form-check-input + label::before,
html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group.is-invalid input.bp-form-check-input + label::before {
	border-color: #b20000;
}

/* Consent and notification choices sit in the original marketing box; touching boxes merge. */
html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group.bp-form-check,
html body .bp-modal.modal.micromodal-slide #subBidFormSection,
html body.bp_profile_page #profile-page #updateDetailsSection #invitationsEnabled,
html body.bp_profile_page #profile-page #updateDetailsSection #bp-alert-email-prefs {
	display: block;
	box-sizing: border-box;
	margin: 0.3125rem 0 1.25rem;
	padding: 0.75rem 0.9375rem;
	border: 2px solid #89a0b2;
	border-radius: 5px;
	background: #fafafa;
}

html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group.bp-form-check:has(+ .bp-form-check),
html body.bp_profile_page #profile-page #updateDetailsSection #invitationsEnabled:has(+ #bp-alert-email-prefs) {
	margin-bottom: 0;
	padding-bottom: 0.375rem;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
}

html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group.bp-form-check + .bp-form-check,
html body.bp_profile_page #profile-page #updateDetailsSection #invitationsEnabled + #bp-alert-email-prefs {
	margin-top: 0;
	padding-top: 0.375rem;
	border-top: 0;
	border-radius: 0 0 5px 5px;
}

html body .bp-modal.modal.micromodal-slide #subBidFormSection .bp-form-group.bp-form-check,
html body.bp_profile_page #profile-page #updateDetailsSection #bp-alert-email-prefs .bp-form-group.bp-form-check {
	margin: 0;
	padding: 0.375rem 0;
	border: 0;
	background: none;
}

html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group.bp-form-check + .bp-form-check,
html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group.bp-form-check:has(+ .bp-form-check) {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* ======================================================================
   Login
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide .bp-login-api .bp-form-group.bp-form-check {
	margin: 0.25rem 0 1.125rem;
}

html body .bp-modal.modal.micromodal-slide .bp-login-api .bp-form-group:has(.doForgotten) {
	justify-content: flex-start;
	margin: 0.25rem 0 0;
}

/* ======================================================================
   Register: name, address and postcode fields in pairs on wider screens (like the contact form)
   ====================================================================== */

@media only screen and (min-width: 50.0625rem) {
	html body .bp-modal.modal.micromodal-slide#modal-register .modal__container {
		max-width: 47.5rem;
	}

	html body .bp-modal.modal.micromodal-slide .bp-register-api {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	/* (no ids here: the pairing rule below has to outrank these) */
	html body .bp-modal.modal.micromodal-slide .bp-register-api > *,
	html body .bp-modal.modal.micromodal-slide .bp-register-api .af-reg-details > *,
	html body .bp-modal.modal.micromodal-slide .bp-register-api .af-reg-details > div > * {
		grid-column: 1 / -1;
	}

	/* The address wrappers hand their fields to the form's grid (AF's .hidden still wins). */
	html body .bp-modal.modal.micromodal-slide .bp-register-api .af-reg-details,
	html body .bp-modal.modal.micromodal-slide .bp-register-api .af-reg-details > div:has(> .bp-form-group) {
		display: contents;
	}

	html body .bp-modal.modal.micromodal-slide .bp-register-api .bp-form-group:has(:is(
		[name="firstName"], [name="lastName"],
		[name="countryCode"], [name="address"], [name="city"], [name="state"], [name="province"], [name="zipCode"],
		[name="shipCountryCode"], [name="shipAddress"], [name="shipCity"], [name="shipState"], [name="shipProvince"], [name="shipZip"]
	)) {
		grid-column: auto;
	}

	/* The submit sits in the right-hand column, as "Submit Your Enquiry" does. */
	html body .bp-modal.modal.micromodal-slide .bp-register-api > .bp-form-group:has(#sendRegister) {
		grid-column: 2;
		margin-top: 0.3125rem;
	}
}

/* ======================================================================
   Verify phone
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneSendStep,
html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneCodeStep .bp-d-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 0.3125rem;
}

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneSendStep .bp-btn.bp-btn-black {
	width: 100%;
}

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneSendStep .bp-btn.bp-btn-default {
	flex: 1 1 12rem;
	padding-right: 1rem;
	padding-left: 1rem;
}

/* AF's .bp-text-small is 0.7em !important: too small for the only instruction in the box. */
html body .bp-modal.modal.micromodal-slide#modal-verify-phone .modal__content p.bp-text-small {
	font-size: 0.875rem !important;
}

/* No .bp-from here, so AF's code-and-number row is not a flex row. */
html body .bp-modal.modal.micromodal-slide#modal-verify-phone .bp-form-group .bp-form-group__inner.bp-form-group__list {
	display: flex;
}

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneCodeStep .bp-btn {
	flex: 1 1 auto;
	width: auto;
}

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneCodeStep .bp-form-group__inner {
	margin-bottom: 0.625rem;
}

html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneStatus {
	margin: 0.625rem 0 0;
	font-size: 0.8125rem;
}

/* ======================================================================
   Bid / buy-now confirmation: label-value rows, the terms note, the agreement buttons
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0.625rem 0;
	border-bottom: 1px solid #d7dad6;
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
}

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item strong {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-nav);
	font-size: 0.875rem;
	font-weight: 400;
	text-align: left;
	text-transform: uppercase;
}

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item span {
	display: block;
	flex: 1 1 12rem;
	min-width: 0;
	color: var(--sb-text);
	font-weight: 400;
	text-align: right;
}

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item span.bp-text-red,
html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item .bp-text-strong {
	color: var(--sb-navy);
	font-weight: 700;
}

/* Spacer <br>s between the rows and notes: the paragraph margins do that job. */
html body .bp-modal.modal.micromodal-slide .modal__container .modal__content > br {
	display: none;
}

/* The notes after the rows ("By clicking I agree ...") */
html body .bp-modal.modal.micromodal-slide .modal__container .modal__content .modal__content__item ~ p:not(.modal__content__item) {
	margin-top: 1.25rem;
}

html body .bp-modal.modal.micromodal-slide .modal__content .bp-text-red.bp-mb-0 {
	margin-bottom: 0.3125rem !important;
}

html body .bp-modal.modal.micromodal-slide #additional-notice {
	margin: 0 0 0.625rem;
}

html body .bp-modal.modal.micromodal-slide .modal__container .modal__content.bp-mb-30 {
	margin-bottom: 0 !important;
}

/* ======================================================================
   Request approval / payment method: the card picker and the legal agreements
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide #request-approval-form .bp-form-group {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.625rem;
	margin: 0;
}

html body .bp-modal.modal.micromodal-slide #request-approval-form .bp-form-group > .bp-col {
	padding: 0;
}

/* The add-card button matches the picker's height (the original .button.small). */
html body .bp-modal.modal.micromodal-slide #request-approval-form .bp-btn {
	width: 100%;
	height: 100%;
	min-height: 2.25rem;
	padding: 0.46875rem 1rem;
}

html body .bp-modal.modal.micromodal-slide .af-legal-agreement-section {
	border: 2px solid #89a0b2;
	border-radius: 5px;
}

html body .bp-modal.modal.micromodal-slide .af-legal-agreement-section .af-agreement-header {
	background: var(--sb-band);
	border-bottom: 1px solid #d7dad6;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-nav);
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
}

html body .bp-modal.modal.micromodal-slide .af-legal-agreement-section .af-agreement-scroll-box {
	color: var(--sb-text);
	font-family: var(--sb-font-body);
}

html body .bp-modal.modal.micromodal-slide .af-legal-agreement-section .af-agreement-checkbox {
	background: #fafafa;
	border-top: 1px solid #d7dad6;
}

html body .bp-modal.modal.micromodal-slide .af-legal-agreement-section .af-agreement-checkbox label {
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
}

html body .bp-modal.modal.micromodal-slide .modal__content .modal__content-overflow {
	border: 1px solid #d7dad6;
}

html body .bp-modal.modal.micromodal-slide .payment-form {
	border-radius: 5px;
	background: var(--sb-band);
}

/* ======================================================================
   Increments table: the original table (navy head, striped rows)
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide .bp-table,
html body.bp_profile_page #profile-page .bp-table {
	width: 100%;
	margin: 0 0 0.625rem;
	border: 0;
	border-collapse: collapse;
	font-family: var(--sb-font-nav);
}

html body .bp-modal.modal.micromodal-slide .bp-table tr th,
html body.bp_profile_page #profile-page .bp-table tr th {
	padding: 0.625rem 0.9375rem;
	border: 0;
	background-color: var(--sb-navy-dark);
	background-image: none; /* default.css draws ../img/hr.png here, which never existed (404 on the original too) */
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

html body .bp-modal.modal.micromodal-slide .bp-table tr td,
html body.bp_profile_page #profile-page .bp-table tr td {
	padding: 0.625rem 0.9375rem;
	border: 0;
	background-color: transparent;
	background-image: none;
	color: var(--sb-text);
	font-size: 0.9375rem;
	line-height: 1.3;
	vertical-align: middle;
}

html body .bp-modal.modal.micromodal-slide .bp-table tr:nth-child(even) td,
html body.bp_profile_page #profile-page .bp-table tbody tr:nth-child(even) td {
	background-color: var(--sb-row);
}

html body .bp-modal.modal.micromodal-slide .bp-table tr:hover td,
html body.bp_profile_page #profile-page .bp-table tbody tr:hover td {
	background-color: rgba(73, 158, 170, 0.2);
}

/* ======================================================================
   Search (a full-width panel at the top of the screen)
   ====================================================================== */

html body .bp-modal.modal.micromodal-slide.top-content-modal .modal__overlay {
	align-items: flex-start;
}

html body .bp-modal.modal.micromodal-slide.top-content-modal .modal__overlay__inner {
	position: absolute;
	top: 0;
	padding: 0;
}

html body .bp-modal.modal.micromodal-slide.top-content-modal .modal__container {
	max-width: none;
	padding: 2.25rem max(1.25rem, calc((100% - 75rem) / 2)) 1.25rem;
}

/* This close sits outside the panel, which AF stacks at z-index 999. */
html body .bp-modal.modal.micromodal-slide.top-content-modal .modal__overlay__inner > .modal__close {
	top: 1.125rem;
	right: 1rem;
	z-index: 1000;
}

html body .bp-modal.modal.micromodal-slide.top-content-modal .modal__header {
	padding-right: 3rem;
}

html body .bp-modal.modal.micromodal-slide #searchform .bp-form-group {
	margin: 0;
}

html body .bp-modal.modal.micromodal-slide #searchform .bp-form-group .bp-form-group__inner-search .bp-form-control {
	min-height: 3rem;
	padding: 0.625rem 3.5rem 0.625rem 0.9375rem;
	font-size: 1.125rem;
}

html body .bp-modal.modal.micromodal-slide #searchform .bp-btn.bp-btn-search {
	position: absolute;
	top: 50%;
	right: 0.3125rem;
	width: 2.75rem;
	height: 2.5rem;
	padding: 0;
	background-color: transparent !important;
	transform: translateY(-50%);
}

html body .bp-modal.modal.micromodal-slide #searchform .bp-btn.bp-btn-search:hover,
html body .bp-modal.modal.micromodal-slide #searchform .bp-btn.bp-btn-search:focus {
	background-color: var(--sb-row) !important;
}

html body .bp-modal.modal.micromodal-slide #searchform .bp-btn.bp-btn-search::after {
	width: 1.25rem;
	height: 1.25rem;
}

/* ======================================================================
   Small screens
   ====================================================================== */

@media only screen and (max-width: 50rem) {
	html body .bp-modal.modal.micromodal-slide .modal__overlay__inner {
		padding: 1.25rem 0.625rem;
	}

	html body .bp-modal.modal.micromodal-slide .modal__container {
		padding: 1.875rem 1.25rem 1.5rem;
	}

	html body .bp-modal.modal.micromodal-slide .modal__header .modal__title,
	html body .bp-modal.modal.micromodal-slide .modal__title {
		font-size: 1.5625rem;
	}

	html body .bp-modal.modal.micromodal-slide .modal__close,
	html body .bp-modal.modal.micromodal-slide#modal-steps .modal__container::after {
		top: 0.875rem;
		right: 0.625rem;
	}

	/* Main action first, full width; the terms link under the buttons. */
	html body .bp-modal.modal.micromodal-slide .modal__container .modal__footer.bp-d-flex,
	html body .bp-modal.modal.micromodal-slide .modal__container > footer.bp-d-flex {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	html body .bp-modal.modal.micromodal-slide .modal__footer.bp-d-flex > .bp-d-flex {
		flex-direction: column-reverse;
		align-items: stretch;
		flex-basis: auto;
		order: 0;
		margin: 0;
	}

	html body .bp-modal.modal.micromodal-slide .modal__footer.bp-d-flex > .bp-d-flex.bp-mr-auto {
		align-items: center;
		margin-right: 0;
	}

	html body .bp-modal.modal.micromodal-slide .modal__footer.bp-d-flex .bp-btn,
	html body .bp-modal.modal.micromodal-slide .modal__container > footer.bp-d-flex .bp-btn {
		width: 100%;
	}

	html body .bp-modal.modal.micromodal-slide#modal-verify-phone #verifyPhoneSendStep .bp-btn {
		flex-basis: 100%;
	}

	html body .bp-modal.modal.micromodal-slide #request-approval-form .bp-form-group {
		flex-wrap: wrap;
	}

	html body .bp-modal.modal.micromodal-slide #request-approval-form .bp-form-group > .bp-col {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 30rem) {
	/* Phone code above the number when there is no room for both. */
	html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list,
	html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__list {
		flex-wrap: wrap;
	}

	html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > .select2,
	html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > select.bp-form-control,
	html body .bp-modal.modal.micromodal-slide .bp-form-group .bp-form-group__inner.bp-form-group__list > input.bp-form-control,
	html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__list > .select2,
	html body.bp_profile_page #profile-page #updateDetailsSection .bp-form-group .bp-form-group__inner.bp-form-group__list > input.bp-form-control {
		flex: 0 0 100%;
	}
}

/* ======================================================================
   SweetAlert notices (forgotten password, sign-in errors, confirmations)
   ====================================================================== */

html body .swal2-container.swal2-backdrop-show,
html body .swal2-container.swal2-noanimation {
	background: rgba(19, 65, 100, 0.75);
}

html body .swal2-container .swal2-popup {
	padding: 2rem 1.875rem 1.875rem;
	border-radius: 0;
	background: linear-gradient(to right, #025d74 0%, #025d74 36%, #78c9ce 68%, #78cea1 100%) left top / 100% 0.375rem no-repeat, #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	color: var(--sb-text);
	font-family: var(--sb-font-body);
}

html body .swal2-container .swal2-popup .swal2-title {
	color: var(--sb-navy);
	font-family: var(--sb-font-heading);
	font-size: 1.5625rem;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
}

html body .swal2-container .swal2-popup .swal2-html-container,
html body .swal2-container .swal2-popup .swal2-content {
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	line-height: 1.45;
}

html body .swal2-container .swal2-popup .swal2-html-container a {
	color: var(--sb-teal);
	font-weight: 700;
}

html body .swal2-container .swal2-popup .swal2-actions {
	gap: 0.625rem;
	margin-top: 1.5rem;
}

html body .swal2-container .swal2-popup .swal2-styled {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0.9375rem 1.875rem;
	border: 0;
	border-radius: 0.3125rem;
	box-shadow: none;
	font-family: var(--sb-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

html body .swal2-container .swal2-popup .swal2-styled.swal2-confirm {
	background: var(--sb-teal);
	color: #fff;
}

html body .swal2-container .swal2-popup .swal2-styled.swal2-cancel,
html body .swal2-container .swal2-popup .swal2-styled.swal2-deny {
	background: var(--sb-slate);
	color: #fff;
}

/* Swal focuses its confirm button when it opens, so only a keyboard focus turns it navy. */
html body .swal2-container .swal2-popup .swal2-styled:hover,
html body .swal2-container .swal2-popup .swal2-styled:focus-visible {
	background: var(--sb-navy-dark);
	background-image: none;
	color: #fff;
}

html body .swal2-container .swal2-popup .swal2-styled:focus-visible {
	box-shadow: 0 0 0 3px rgba(73, 158, 170, 0.5);
	outline: none;
}

html body .swal2-container .swal2-popup .swal2-close {
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
}

html body .swal2-container .swal2-popup .swal2-close:hover {
	color: var(--sb-teal);
}

html body .swal2-container .swal2-icon.swal2-info {
	border-color: var(--sb-teal);
	color: var(--sb-teal);
}

html body .swal2-container .swal2-icon.swal2-question {
	border-color: var(--sb-slate);
	color: var(--sb-slate);
}

html body .swal2-container .swal2-popup .swal2-input,
html body .swal2-container .swal2-popup .swal2-textarea {
	border: 1px solid #89a0b2;
	border-radius: 5px;
	box-shadow: none;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
}

html body .swal2-container .swal2-popup .swal2-input:focus,
html body .swal2-container .swal2-popup .swal2-textarea:focus {
	border-color: var(--sb-navy-dark);
	box-shadow: 0 0 0 3px rgba(73, 158, 170, 0.3);
}

html body .swal2-container .swal2-popup .swal2-input-label {
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-nav);
	font-size: 0.875rem;
	text-transform: uppercase;
}

@media only screen and (max-width: 50rem) {
	/* Stacked, main action (Swal puts it first) on top. */
	html body .swal2-container .swal2-popup .swal2-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	html body .swal2-container .swal2-popup .swal2-styled {
		width: 100%;
	}
}

/* ======================================================================
   Account notices and this sale's approval state, on every AF page: AF's JS fills #bp-notice-block
   (account pending / incomplete / blocked: the list, catalogue and lot pages) and #auctionApprovalInfo
   (catalogue and lot). One treatment for all of them, so the same notice looks the same everywhere:
   the original pale box for the notices, and the "Participate" call as the original next-auction box
   with its .button. (AF draws a pink "danger" alert and a centred grey card.) Where the blocks sit is
   up to each area: lists.css, catalogue.css, lot.css.
   ====================================================================== */

html body #bp-notice-block .bp-alert,
html body #auctionApprovalInfo .bp-alert {
	--bs-alert-bg: var(--sb-pale);
	--bs-alert-color: var(--sb-navy-dark);
	--bs-alert-border-color: var(--sb-pale);
	--bs-alert-border: 2px solid var(--sb-pale);
	--bs-alert-border-radius: 0.125rem;
	--bs-alert-padding-x: 1.25rem;
	--bs-alert-padding-y: 0.9375rem;
	margin: 0 !important; /* AF's .bp-mt-10 utility is !important */
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: left;
}

html body #bp-notice-block .bp-alert p,
html body #auctionApprovalInfo .bp-alert p {
	margin: 0 0 0.3125rem;
	color: inherit;
	font-size: inherit;
	text-align: inherit;
}

html body #bp-notice-block .bp-alert p:last-child,
html body #auctionApprovalInfo .bp-alert p:last-child {
	margin-bottom: 0;
}

html body #bp-notice-block .bp-alert a,
html body #auctionApprovalInfo .bp-alert a {
	color: var(--sb-teal);
	font-weight: 700;
}

html body #bp-notice-block .bp-alert a:hover,
html body #auctionApprovalInfo .bp-alert a:hover {
	color: var(--sb-navy-dark);
}

/* "Missing information: • Address • Phone": AF's red bullet characters sat on top of default.css's
   teal list dots; the original dots only. */
html body #bp-notice-block .af-notice-missing ul {
	margin: 0.3125rem 0 0;
	justify-content: flex-start;
	gap: 0.25rem 1.25rem;
}

html body #bp-notice-block .af-notice-missing li {
	padding: 0 0 0 1.125rem;
	font-size: inherit;
}

html body #bp-notice-block .af-notice-missing li::before {
	content: " ";
	margin: 0;
	color: inherit;
}

/* "You're one step from bidding" + Participate: a heading line and its .button beside it. */
html body #auctionApprovalInfo .af-gate2 {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 1.25rem;
	margin: 0;
	padding: 0.9375rem 1.25rem;
	border: 2px solid #fff;
	border-radius: 0.125rem;
	background: #fff;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	text-align: left;
}

html body #auctionApprovalInfo .af-gate2__ok {
	flex-basis: 100%;
	color: var(--sb-teal-dark);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
}

html body #auctionApprovalInfo .af-gate2__msg {
	margin: 0;
	color: var(--sb-navy);
	font-family: var(--sb-font-heading);
	font-size: 1.125rem;
	line-height: 1.4;
}

html body #auctionApprovalInfo .bp-btn.bp-btn-default {
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 0.9375rem 1.875rem;
	border: 0;
	border-radius: 0.3125rem;
	background-color: var(--sb-teal) !important;
	color: #fff !important;
	font-family: var(--sb-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms linear;
}

html body #auctionApprovalInfo .bp-btn.bp-btn-default:hover,
html body #auctionApprovalInfo .bp-btn.bp-btn-default:focus {
	background-color: var(--sb-navy-dark) !important;
	color: #fff !important;
}

html body #auctionApprovalInfo .bp-btn.bp-btn-default:focus-visible {
	outline: 2px solid var(--sb-navy-dark);
	outline-offset: 2px;
}

@media only screen and (max-width: 50rem) {
	/* As the original's mobile .button: the call fills the box. */
	html body #auctionApprovalInfo .af-gate2__btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ======================================================================
   AF's own page header (.bp-header-simple: the profile page, and any AF page whose header the theme
   templates do not replace) as the original photo band that auctionforge/main/auction_list.php
   prints on the list pages: the photo at the band's height, the white futura caption on the left,
   the blue-green bar under it. AF's version was a fixed 215px block with a navy Baskerville title
   centred on the dark photo, hard to read and like nothing on the original site.
   The band's height follows its 1920x380 photo, as shobrook-rotating.js sizes it (photo height
   less 10px, the photo at least 600px wide; from 1180px the fixed site header covers its top 50px),
   and its caption sits where that script puts it. Percentage padding is relative to the width.
   ====================================================================== */

html body .bp-container-fluid:has(> .bp-header.bp-header-simple) {
	margin: 0;
	padding: 0;
}

html body .bp-container-fluid > .bp-header.bp-header-simple {
	display: block;
	position: relative;
	box-sizing: content-box;
	width: auto;
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0 0 max(calc(19.7917% - 10px), 108.75px);
	border: 0 solid transparent;
	border-bottom-width: 0.75rem;
	/* the original .gradient-blue-green bar */
	border-image: linear-gradient(to right, #025d74 0%, #025d74 36%, #78c9ce 68%, #78cea1 100%) 1;
	background-color: var(--sb-navy-dark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: left;
}

html body .bp-container-fluid > .bp-header.bp-header-simple .bp-header__overlay {
	display: none;
}

html body .bp-container-fluid > .bp-header.bp-header-simple .bp-header__content {
	display: block;
	position: absolute;
	top: calc(50% + 0.9375rem);
	right: 0;
	left: 0;
	box-sizing: border-box;
	max-width: 93.75rem;
	margin: 0 auto;
	padding: 0 0.625rem;
	transform: translateY(-50%);
	text-align: left;
}

html body .bp-container-fluid > .bp-header.bp-header-simple .bp-header__content h1 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--sb-font-nav);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-transform: capitalize;
}

@media only screen and (min-width: 73.75rem) {
	html body .bp-container-fluid > .bp-header.bp-header-simple {
		padding-bottom: calc(19.7917% - 60px);
		background-position: center -55px;
		background-size: 100% auto;
	}

	html body .bp-container-fluid > .bp-header.bp-header-simple .bp-header__content {
		top: calc(50% - 0.625rem);
	}
}

/* Above 1368px the band's photo is pinned at its own top rather than centred. */
@media only screen and (min-width: 85.5625rem) {
	html body .bp-container-fluid > .bp-header.bp-header-simple {
		background-position: center -50px;
	}
}

@media only screen and (min-width: 96.9375rem) {
	html body .bp-container-fluid > .bp-header.bp-header-simple .bp-header__content h1 {
		font-size: 2.5rem;
	}
}

/* ======================================================================
   Profile page
   ====================================================================== */

/* AF's empty row between the header and the page kept a 45px margin. */
html body.bp_profile_page .bp-container-fluid + .bp-content:empty {
	margin-bottom: 0;
}

/* Signed out: AF's Log in / Register pair, as the original .button and .button.secondary. */
html body .bp-btn.bp-btn-login.bp-header__btn,
html body .bp-btn.bp-btn-register.bp-header__btn {
	min-width: 11.25rem;
	margin: 0;
	padding: 0.9375rem 1.875rem;
	border: 0 !important;
	font-family: var(--sb-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

html body .bp-btn.bp-btn-register.bp-header__btn {
	background-color: var(--sb-slate) !important;
}

html body .bp-btn.bp-btn-login.bp-header__btn:hover,
html body .bp-btn.bp-btn-login.bp-header__btn:focus,
html body .bp-btn.bp-btn-register.bp-header__btn:hover,
html body .bp-btn.bp-btn-register.bp-header__btn:focus {
	background: var(--sb-navy-dark) !important;
	color: #fff !important;
}

html body .bp-btn.bp-btn-login.bp-header__btn:focus-visible,
html body .bp-btn.bp-btn-register.bp-header__btn:focus-visible {
	outline: 2px solid var(--sb-navy-dark);
	outline-offset: 2px;
}

html body.bp_profile_page #profile-page {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

html body.bp_profile_page #profile-page > .bp-content .bp-col.bp-d-flex:has(> .bp-header__btn) {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
}

/* Small screens: the original's mobile .button (full width, large type), as the list pages'
   View Auction and the catalogue's buttons. */
@media only screen and (max-width: 50rem) {
	html body.bp_profile_page #profile-page > .bp-content .bp-col.bp-d-flex:has(> .bp-header__btn) {
		flex-direction: column;
		align-items: stretch;
	}

	html body.bp_profile_page #profile-page .bp-btn.bp-header__btn {
		display: block;
		width: 100%;
		min-width: 0;
		padding: 1.25rem 1.875rem;
		font-size: 1.40625rem;
		text-align: center;
	}
}

/* Signed in: the tabs are the original pagination chips (teal, navy for the current one). */
html body.bp_profile_page #profile-page .bp-tabs-link {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3125rem;
}

html body.bp_profile_page #profile-page .bp-tabs-link a.nav-link {
	padding: 0.625rem 1rem;
	border-radius: 0.3125rem;
	background-color: var(--sb-teal);
	color: #fff;
	font-family: var(--sb-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 200ms linear;
}

html body.bp_profile_page #profile-page .bp-tabs-link a.nav-link:hover,
html body.bp_profile_page #profile-page .bp-tabs-link a.nav-link:focus,
html body.bp_profile_page #profile-page .bp-tabs-link a.nav-link.active {
	background-color: var(--sb-navy-dark);
	color: #fff;
}

html body.bp_profile_page #profile-page .bp-tabs-link a.logoutLink {
	background-color: var(--sb-slate);
}

@media only screen and (max-width: 63.9375rem) {
	/* The tab bar is hidden here; its empty wrapper keeps AF's 45px margin otherwise. */
	html body.bp_profile_page #profile-page > .bp-content:has(.bp-tabs-link) {
		margin-bottom: 0;
	}
}

/* Under 1024px AF turns the tabs into an accordion. */
html body.bp_profile_page #profile-page .bp-spoiler-trigger {
	padding: 0.625rem 2rem 0.625rem 0;
	border-bottom: 1px solid #d7dad6;
	background-position: right 0.5rem center;
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-nav);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
}

html body.bp_profile_page #profile-page .bp-spoiler-trigger:hover,
html body.bp_profile_page #profile-page .bp-spoiler-trigger.active {
	color: var(--sb-teal);
}

html body.bp_profile_page #profile-page .bp-spoiler-trigger > span {
	padding: 0;
	border: 0;
}

html body.bp_profile_page #profile-page #bp-logout .bp-spoiler-trigger {
	color: var(--sb-slate);
}

html body.bp_profile_page #profile-page .bp-tabs-content p.title,
html body.bp_profile_page #profile-page .bp-user-state .title {
	color: var(--sb-navy-dark);
	font-family: var(--sb-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
}

html body.bp_profile_page #profile-page .bp-tabs-content .bp-tabs-block form {
	max-width: 47.5rem;
}

/* The account form: pairs of fields on wider screens, like the registration form. */
@media only screen and (min-width: 50.0625rem) {
	html body.bp_profile_page #profile-page #updateDetailsSection {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	html body.bp_profile_page #profile-page #updateDetailsSection > *,
	html body.bp_profile_page #profile-page #updateDetailsSection #wrpShippingField > * {
		grid-column: 1 / -1;
	}

	html body.bp_profile_page #profile-page #updateDetailsSection #wrpShippingField:not(.hidden) {
		display: contents;
	}

	html body.bp_profile_page #profile-page #updateDetailsSection :is(
		#addressFieldfirstName, #addressFieldlastName, #addressFieldemail, #addressFieldpassword,
		#addressFieldcountryCode, #addressFieldaddress, #addressFieldcity, #addressFieldstate, #addressFieldprovince, #addressFieldzipCode,
		#shippingFieldcountryCode, #shippingFieldaddress, #shippingFieldcity, #shippingFieldstate, #shippingFieldprovince, #shippingFieldzipCode
	) {
		grid-column: auto;
	}

	html body.bp_profile_page #profile-page #updateDetailsSection > .bp-form-group:has(#sendUpdate) {
		grid-column: 2;
	}
}

/* "My shipping address is the same": AF draws this check box on a label that is itself a group. */
html body.bp_profile_page #profile-page #updateDetailsSection #shippingFields label.bp-form-group {
	margin: 0;
}

html body.bp_profile_page #profile-page #updateDetailsSection #shippingFields .bp-form-group__inner {
	align-items: flex-start;
}