/* =====================================================================================================
   Summit B2B customer portal: design system, shell and page sections.
   Spec: docs/b2b-redesign/DESIGN.md. Loaded after modern.css, custom.css, customb2b.css and any inline
   <style> in <head>. Every selector is scoped under body.b2bp or a b2bp- class, so nothing leaks into the
   staff side that shares modern.css / custom.css.

   Sections
     1. Tokens
     2. Base and typography
     3. Shell: band, layout, sidebar, top bar, content, footer
     4. Components: page head, panel, figure cards, toolbar, inputs, buttons, segmented control, pills,
        data table (+ phone rows), qty stepper, empty / loading / error, image fallback, line clamp, utilities
     5. Login
     6. Dashboard
     7. Catalogue (inventory, product, cart, compare)   - reserved for group 2
     8. Account (quotes, orders, invoices, Order List, statement) - reserved for group 3
     9. Motion: page fade, .b2bp-enter stagger, press, lift, dropdown grow, skeleton shimmer, reduced motion
   ===================================================================================================== */


/* ----- 1. Tokens ------------------------------------------------------------------------------------ */

body.b2bp {
	--b2b-ink: #132649;
	--b2b-ink-2: #4f5d73;
	--b2b-ink-3: #5b6b80;
	--b2b-on-fill: #132649;        /* text on orange, green and teal fills (4.8:1 or better) */
	--b2b-on-fill-strong: #050b17; /* text on the #3b7ddd blue and #1a9b94 teal-hover fills (4.8:1) */
	--b2b-accent: #1f56c4;
	--b2b-accent-tint: #eef3fc;
	--b2b-accent-line: #b9cbef;
	--b2b-ground: #f5f6f8;
	--b2b-surface: #fff;
	--b2b-subtle: #f6f8fb;
	--b2b-hover: #eef1f5;
	--b2b-line: #e3e8ee;
	--b2b-line-strong: #7a8799;

	--b2b-quotes: #6b3fc4;
	--b2b-orders: #1f56c4;
	--b2b-invoices: #0f766e;
	--b2b-owing: #a14f00;

	--b2b-success: #1a7f37;
	--b2b-success-tint: #e8f5ec;
	--b2b-warning: #8a5300;
	--b2b-warning-tint: #fff4e0;
	--b2b-danger: #b42318;
	--b2b-danger-tint: #fdeceb;

	--b2b-font: "Helvetica Neue", Arial, sans-serif;
	--b2b-radius: 10px;
	--b2b-radius-ctl: 6px;
	--b2b-ctl: 36px;
	--b2b-row: 44px;
	--b2b-gutter: 24px;
	--b2b-sidebar: 240px;
	--b2b-topbar: 56px;
	--b2b-float: 0 8px 24px rgba(19, 38, 73, .14);

	/* v2 (round 2): brand surfaces, shadcn button variants, elevation, motion. Spec: DESIGN-r2.md */
	--b2b-brand-950: #081733;
	--b2b-brand-900: #0b1d3f;
	--b2b-brand-800: #12305f;
	--b2b-brand-grad: linear-gradient(135deg, #0b1d3f 0%, #12305f 55%, #1f56c4 100%);
	--b2b-on-brand: #fff;
	--b2b-on-brand-2: rgba(255, 255, 255, .72);
	--b2b-brand-line: rgba(255, 255, 255, .16);

	--b2b-primary: #2563eb;
	--b2b-primary-hover: #1d4ed8;
	--b2b-primary-active: #1e40af;
	--b2b-primary-fg: #fff;
	--b2b-secondary: #f1f5f9;
	--b2b-secondary-hover: #e2e8f0;
	--b2b-secondary-fg: #0f172a;
	--b2b-outline-line: #d5dce6;
	--b2b-destructive: #dc2626;
	--b2b-destructive-hover: #b91c1c;
	--b2b-ring: 0 0 0 3px rgba(37, 99, 235, .28);
	/* Commerce CTA on brand (navy) surfaces: header Cart, hero Search. Navy text on amber: 10:1. */
	--b2b-cta: #fbbf24;
	--b2b-cta-hover: #f59e0b;
	--b2b-cta-active: #d97706;
	--b2b-cta-fg: #0b1d3f;

	--b2b-radius-lg: 14px;
	--b2b-radius-btn: 8px;
	--b2b-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
	--b2b-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .07);
	--b2b-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .06);
	--b2b-shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, .16), 0 4px 10px -4px rgba(15, 23, 42, .08);

	--b2b-ease-out: cubic-bezier(.22, 1, .36, 1);
	--b2b-ease-io: cubic-bezier(.65, 0, .35, 1);
	--b2b-dur-1: 120ms;
	--b2b-dur-2: 180ms;
	--b2b-dur-3: 240ms;
	--b2b-dur-4: 360ms;
}

@media (max-width: 767.98px) {
	body.b2bp {
		--b2b-ctl: 44px;
		--b2b-gutter: 16px;
	}
}


/* ----- 2. Base and typography ----------------------------------------------------------------------- */

body.b2bp {
	background: var(--b2b-ground) !important;
	color: var(--b2b-ink);
	font-family: var(--b2b-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/* :where() keeps these at element specificity, so .btn, .nav-link and page classes still win. */
:where(body.b2bp) a {
	color: var(--b2b-accent);
}
:where(body.b2bp) a:hover {
	color: var(--b2b-ink);
}
:where(body.b2bp) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--b2b-ink);
	font-family: var(--b2b-font);
}
.b2bp .text-muted {
	color: var(--b2b-ink-3) !important;
}
.b2bp .b2bp-num,
.b2bp .num {
	font-variant-numeric: tabular-nums;
}

/* One focus ring for every interactive element. */
.b2bp a:focus-visible,
.b2bp button:focus-visible,
.b2bp input:focus-visible,
.b2bp select:focus-visible,
.b2bp textarea:focus-visible,
.b2bp summary:focus-visible,
.b2bp [role="button"]:focus-visible,
.b2bp [tabindex]:focus-visible {
	outline: 2px solid var(--b2b-primary);
	outline-offset: 2px;
	box-shadow: none;
}


/* ----- 3. Shell ------------------------------------------------------------------------------------- */

/* 3.1 The navy hero band goes: titles sit on the ground. The body classes stay in the markup. */
.b2bp .wrapper::before,
body.b2bp.b2b-tall-header-band .wrapper::before,
body.b2bp.b2b-order-list-page .wrapper::before,
body.b2bp.b2b-product-detail-header-band .wrapper::before,
body.b2bp.b2b-header-band-102 .wrapper::before {
	display: none !important;
	height: 0 !important;
	background: none !important;
}

/* Text the band used to carry is ink on the ground now. */
.b2bp .header-title {
	color: var(--b2b-ink) !important;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}
.b2bp .header-subtitle {
	color: var(--b2b-ink-2) !important;
	font-size: 14px;
	margin: 4px 0 0;
}
.b2bp main.content .header .text-white,
.b2bp main.content .header.text-white {
	color: var(--b2b-ink-2) !important;
}
.b2bp main.content .header .btn-link.text-white:hover {
	color: var(--b2b-ink) !important;
}
@media (max-width: 767.98px) {
	.b2bp .header-title {
		font-size: 20px;
	}
}

/* Spark's navy loading splash would flash before the light shell; the CSS is in <head>, so no FOUC. */
.b2bp .splash {
	display: none !important;
}

/* 3.2 Layout. overflow:clip keeps Spark's clipping without making the wrapper a scroll container,
   so the sidebar and top bar can stick. */
.b2bp .wrapper {
	background: var(--b2b-ground);
	overflow: hidden;
	overflow: clip;
}
.b2bp .main {
	min-width: 0;
	background: var(--b2b-ground);
}
@media (max-width: 767.98px) {
	.b2bp .main {
		overflow: hidden;
		overflow: clip;
	}
}

/* 3.3 Sidebar (shadcn/ui Sidebar, inset variant): navy logo row continuous with the top bar over a cool grey
   #e9edf2 column, a step darker than the #f5f6f8 main so the two read as separate surfaces, with a crisp right
   hairline; "Shop" / "Account" group labels, 36px items. One absolutely positioned highlight (.b2bp-nav-hl,
   moved by B2BP.navHighlight) slides to the hovered or focused item as a faint tint and rests on the active one
   as a white card; the active item also gets a 3px primary indicator. Desktop toggle = 68px icon rail with
   tooltips; below 992 = off-canvas sheet from the left over a fading backdrop.
   Contrast on #e9edf2: labels #5b6778 = 4.9 (slate-500 #64748b would be 4.05); items #334155 = 8.8, 8.0 on the
   hover tint; active ink on white = 15+; indicator and focus ring #2563eb = 4.4 against the grey (3:1 UI). */
body.b2bp {
	--b2b-topbar: 60px;
	--b2b-rail: 68px;
	/* r2 light sidebar, revert: --b2b-sidebar-bg: #fbfcfd; --b2b-sidebar-line: var(--b2b-line); --b2b-sidebar-ink: var(--b2b-ink-2); --b2b-sidebar-label: var(--b2b-ink-3); */
	--b2b-sidebar-bg: #e9edf2;
	--b2b-sidebar-line: #d8dee6;
	--b2b-sidebar-ink: #334155;
	--b2b-sidebar-label: #5b6778;
	--b2b-sidebar-hover: rgba(15, 23, 42, .05);
}
.b2bp .sidebar {
	background: var(--b2b-sidebar-bg) !important;
	border-right: 0;
	/* 1px right border as an inset hairline: the navy logo row paints over it, so the top band stays unbroken. */
	box-shadow: inset -1px 0 0 var(--b2b-sidebar-line);
	max-width: var(--b2b-sidebar);
	min-width: var(--b2b-sidebar);
	/* Spark animates margin-left / left; widths snap here, the sheet below 992 sets its own transform transition. */
	transition: none;
	z-index: 1030;
}
.b2bp .sidebar > aside {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}
/* modern.css gives .sidebar-content height:100%, which resolved against the stretched nav (the whole page
   height), so the aside became a scroll container (scrollHeight 1144 in 900 at 1440x900) whose bar sat on the
   sidebar / main seam. Natural height instead (about 430px). If a short viewport still overflows, the menu
   scrolls by wheel, touch and keyboard focus with the bar hidden. */
.b2bp .sidebar .sidebar-content {
	height: auto;
	min-height: 0;
}
.b2bp .sidebar > aside {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.b2bp .sidebar > aside::-webkit-scrollbar {
	height: 0;
	width: 0;
}
/* A sidebar squeezed to (nearly) nothing must not leave the 3px active indicator or the highlight as a blue
   sliver at the page edge (seen on product-1440 in after-r2). The aside is a size container; below the rail
   width the indicator and highlight are not drawn. */
.b2bp .sidebar > aside {
	container-type: inline-size;
}
@container (max-width: 40px) {
	.b2bp .sidebar .sidebar-link.b2bp-active::before,
	.b2bp .sidebar .sidebar-link[aria-current="page"]::before,
	.b2bp .sidebar .b2bp-nav-hl {
		display: none;
	}
}
.b2bp .sidebar-brand,
.b2bp .sidebar-brand:hover {
	align-items: center;
	background: var(--b2b-brand-900) !important;
	border-bottom: 0;
	box-shadow: none;
	display: flex;
	height: var(--b2b-topbar);
	overflow: hidden;
	padding: 0 22px;
	position: relative;
	text-align: left !important;
}
/* Rail <-> full width snaps (no width animation); continuity comes from opacity and transform: a navy veil
   over the wordmark fades out on expand, and the item labels fade and slide in. */
.b2bp .sidebar-brand::after {
	background: var(--b2b-brand-900);
	bottom: 0;
	content: "";
	left: 52px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity var(--b2b-dur-3) var(--b2b-ease-out);
}
.b2bp .sidebar-brand img,
.b2bp .sidebar-brand .headerLogoSize {
	display: block;
	flex: 0 0 auto;
	height: 26px;
	max-width: none;
	object-fit: cover;
	object-position: left center;
	width: 102px;
}
.b2bp .sidebar .sidebar-brand:focus-visible {
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: -4px;
}
.b2bp .sidebar-content,
.b2bp .sidebar-nav {
	background: transparent;
}
.b2bp .sidebar-nav {
	padding: 12px 0 16px;
}
.b2bp .sidebar-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 12px;
	position: relative;
}
.b2bp .sidebar .b2bp-nav-label {
	color: var(--b2b-sidebar-label);
	display: block;
	font-size: 12px;
	font-weight: 500;
	height: 32px;
	line-height: 32px;
	overflow: hidden;
	padding: 0 10px;
	position: relative;
	transition: opacity var(--b2b-dur-2) ease;
	white-space: nowrap;
}
.b2bp .sidebar .b2bp-nav-label ~ .b2bp-nav-label {
	margin-top: 10px;
}
.b2bp .sidebar .sidebar-link,
.b2bp .sidebar a.sidebar-link {
	align-items: center;
	background: transparent;
	border: 0 !important;
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-sidebar-ink);
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	height: 36px;
	line-height: 20px;
	margin: 0;
	min-height: 36px;
	padding: 0 14px !important;
	position: relative;
	transition: color var(--b2b-dur-1) ease, background-color var(--b2b-dur-1) ease;
	white-space: nowrap;
	z-index: 1;
}
.b2bp .sidebar .sidebar-link > span {
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity var(--b2b-dur-2) ease, transform var(--b2b-dur-2) var(--b2b-ease-out);
}
.b2bp .sidebar .sidebar-link .fas,
.b2bp .sidebar .sidebar-link .far,
.b2bp .sidebar .sidebar-link svg {
	color: inherit;
	flex: 0 0 16px;
	font-size: 14px;
	margin: 0 !important;
	text-align: center;
	transition: color var(--b2b-dur-1) ease;
	width: 16px;
}
.b2bp .sidebar .sidebar-link:hover,
.b2bp .sidebar .sidebar-link:focus-visible,
.b2bp .sidebar .sidebar-link.b2bp-hl-at {
	color: var(--b2b-ink);
}
/* Without the script (or before it runs) the active item carries the white card itself. */
.b2bp .sidebar .sidebar-link.b2bp-active,
.b2bp .sidebar .sidebar-link[aria-current="page"] {
	background: var(--b2b-surface);
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), var(--b2b-shadow-xs);
	color: var(--b2b-ink);
	font-weight: 600;
}
.b2bp .sidebar .sidebar-item.b2bp-hl-ready > .sidebar-link {
	background: transparent;
	box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .sidebar .sidebar-item:not(.b2bp-hl-ready) > .sidebar-link:not(.b2bp-active):hover {
		background: var(--b2b-sidebar-hover);
	}
}
.b2bp .sidebar .sidebar-link.b2bp-active::before,
.b2bp .sidebar .sidebar-link[aria-current="page"]::before {
	background: var(--b2b-primary);
	border-radius: 0 3px 3px 0;
	bottom: 8px;
	content: "";
	left: -12px;
	position: absolute;
	top: 8px;
	width: 3px;
}
.b2bp .sidebar .b2bp-nav-hl {
	background: var(--b2b-sidebar-hover);
	border-radius: var(--b2b-radius-btn);
	box-shadow: none;
	height: 36px;
	left: 12px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 12px;
	top: 0;
	transition: transform var(--b2b-dur-2) var(--b2b-ease-io), opacity var(--b2b-dur-1) ease, background-color var(--b2b-dur-1) ease, box-shadow var(--b2b-dur-1) ease;
	z-index: 0;
}
.b2bp .sidebar .b2bp-nav-hl.b2bp-nav-hl--on {
	opacity: 1;
}
/* Resting on the current page (set by B2BP.navHighlight): the white active card. */
.b2bp .sidebar .b2bp-nav-hl.b2bp-nav-hl--active {
	background: var(--b2b-surface);
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), var(--b2b-shadow-xs);
}
/* First placement: no slide from the top. */
.b2bp .sidebar .b2bp-nav-hl.b2bp-nav-hl--jump {
	transition: none;
}
.b2bp .sidebar .sidebar-link:focus-visible {
	outline-offset: -2px;
}
/* modern.css removes the outline on nav links (.navbar .nav-item a:focus, .nav-link:focus-visible), so the
   shared ring is restated for the top bar and sidebar at a higher specificity. */
.b2bp .sidebar a:focus-visible,
.b2bp .sidebar button:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--b2b-primary);
	outline-offset: -2px;
}
@media (max-width: 767.98px) {
	.b2bp .sidebar a.sidebar-link {
		height: 44px;
		min-height: 44px;
	}
}

/* Desktop: Spark's toggle (.toggled) collapses the sidebar to an icon rail instead of hiding it. */
@media (min-width: 992px) {
	.b2bp .sidebar,
	.b2bp .sidebar.toggled {
		margin-left: 0 !important;
	}
	.b2bp .sidebar .sidebar-content {
		left: 0 !important;
	}
	.b2bp .sidebar.toggled {
		max-width: var(--b2b-rail);
		min-width: var(--b2b-rail);
	}
	.b2bp .sidebar.toggled .sidebar-brand img,
	.b2bp .sidebar.toggled .sidebar-brand .headerLogoSize {
		width: 28px;
	}
	.b2bp .sidebar.toggled .sidebar-link > span {
		opacity: 0;
		pointer-events: none;
		transform: translateX(-6px);
		transition: none;
	}
	.b2bp .sidebar.toggled .sidebar-brand::after {
		opacity: 1;
		transition: none;
	}
	/* The group label text goes; a short hairline marks the group break in the rail. */
	.b2bp .sidebar.toggled .b2bp-nav-label {
		color: transparent;
		pointer-events: none;
	}
	.b2bp .sidebar.toggled .b2bp-nav-label::after {
		background: var(--b2b-sidebar-line);
		content: "";
		height: 1px;
		left: 12px;
		position: absolute;
		right: 12px;
		top: 50%;
	}
	.b2bp .sidebar.toggled .sidebar-link > span {
		width: 0;
	}
	/* Tooltips need to escape the rail. */
	.b2bp .sidebar.toggled > aside {
		overflow: visible;
	}
	.b2bp .sidebar.toggled .sidebar-link::after {
		background: var(--b2b-secondary-fg);
		border-radius: 6px;
		box-shadow: var(--b2b-shadow-md);
		color: #fff;
		content: attr(data-b2bp-tip);
		font-size: 12px;
		font-weight: 500;
		left: calc(100% + 10px);
		line-height: 16px;
		opacity: 0;
		padding: 6px 8px;
		pointer-events: none;
		position: absolute;
		top: 50%;
		transform: translate(-4px, -50%);
		transition: opacity var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
		white-space: nowrap;
		z-index: 5;
	}
	.b2bp .sidebar.toggled .sidebar-link:hover::after,
	.b2bp .sidebar.toggled .sidebar-link:focus-visible::after {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

/* Below 992: off-canvas sheet over the page, opened by the same Spark toggle (.toggled). The backdrop is a
   div.b2bp-backdrop added by b2b-portal.js and shown with body.b2bp-nav-open. */
@media (max-width: 991.98px) {
	.b2bp .sidebar {
		bottom: 0;
		box-shadow: inset -1px 0 0 var(--b2b-sidebar-line);
		left: 0;
		margin-left: 0 !important;
		max-width: min(var(--b2b-sidebar), 86vw);
		min-width: min(var(--b2b-sidebar), 86vw);
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: transform var(--b2b-dur-2) var(--b2b-ease-io), visibility 0s linear var(--b2b-dur-2);
		visibility: hidden;
		z-index: 1045;
	}
	.b2bp .sidebar.toggled {
		box-shadow: inset -1px 0 0 var(--b2b-sidebar-line), var(--b2b-shadow-lg);
		transform: translateX(0);
		transition: transform var(--b2b-dur-3) var(--b2b-ease-out), visibility 0s;
		visibility: visible;
	}
	.b2bp .sidebar > aside {
		height: 100%;
		max-height: none;
	}
	.b2bp .sidebar .sidebar-content {
		left: 0 !important;
	}
}
.b2bp .b2bp-backdrop {
	background: rgba(8, 23, 51, .42);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--b2b-dur-2) ease;
	z-index: 1040;
}
@media (max-width: 991.98px) {
	.b2bp.b2bp-nav-open .b2bp-backdrop {
		opacity: 1;
		pointer-events: auto;
		transition-duration: var(--b2b-dur-3);
	}
}
@media (min-width: 992px) {
	.b2bp .b2bp-backdrop {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.b2bp .sidebar,
	.b2bp .sidebar.toggled,
	.b2bp .sidebar .b2bp-nav-hl {
		transition: none;
	}
	/* Opacity only: labels fade in place. */
	.b2bp .sidebar .sidebar-link > span {
		transform: none !important;
		transition: opacity var(--b2b-dur-2) ease;
	}
}

/* 3.4 Top bar: 60 navy brand surface, white text. Actions read as e-commerce controls: Cart = solid primary
   pill with a white count badge (the most prominent), Compare = outline-on-navy pill with a badge, Logout and
   the hamburger = ghost on navy. The count badges bump (B2BP: .b2bp-bump) when their number changes. */
.b2bp .main > aside:first-of-type {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1020;
}
.b2bp .navbar-theme {
	/* r2 solid, revert: background: linear-gradient(90deg, var(--b2b-brand-900) 0%, var(--b2b-brand-900) 45%, #0f2a57 100%); */
	/* Soft gradient: a quiet navy shift left to right; starts at brand-900 so it meets the sidebar logo row. */
	background: linear-gradient(90deg, var(--b2b-brand-900) 0%, #10295a 60%, #163a7a 100%);
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--b2b-brand-line), 0 1px 2px rgba(8, 23, 51, .12);
	color: var(--b2b-on-brand);
	flex-wrap: nowrap;
	gap: 8px;
	height: var(--b2b-topbar);
	padding: 0 20px 0 12px;
}
.b2bp .navbar-theme .navbar-nav {
	align-items: center;
	flex-direction: row;
	gap: 8px;
}
.b2bp .navbar-theme .navbar-collapse {
	display: flex !important;
	flex-basis: auto;
	min-width: 0;
}
.b2bp .navbar-theme .nav-item {
	margin: 0 !important;
}
.b2bp .navbar-theme .navbar-nav .nav-link {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--b2b-on-brand);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	height: 36px;
	line-height: 20px;
	padding: 0 12px;
	transition: color var(--b2b-dur-1) ease, background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
	white-space: nowrap;
}
.b2bp .navbar-theme .navbar-nav .nav-link .fas {
	color: inherit;
	font-size: 14px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .navbar-theme .navbar-nav .nav-link:hover {
		background: rgba(255, 255, 255, .14);
		color: var(--b2b-on-brand);
	}
}
.b2bp .navbar-theme .navbar-nav .nav-link:active {
	transform: scale(.97);
}
/* Compare: a lighter glass pill on navy (white text 7.8:1 or better; the border is .36 rather than .32 so
   the outline itself reaches 3:1 against the bar: 4.2 at the left, 3.4 at the bar's lightest end #163a7a). */
.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-compare {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .36);
	color: var(--b2b-on-brand);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-compare:hover {
		background: rgba(255, 255, 255, .2);
		border-color: rgba(255, 255, 255, .44);
	}
}
/* Cart: translucent bright yellow (#facc15 at .92), the one filled action in the bar; the navy shows through a touch.
   Ink #0f172a on the blended fill 9.8:1 or better (hover #fde047 13.5:1, active #eab308 9.3:1); the fill against
   the bar 5.8:1 at the middle of the bar, 8.6:1 at the left. */
.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-cart {
	background: rgba(250, 204, 21, .92);
	border-color: rgba(253, 224, 71, .6);
	box-shadow: 0 0 0 3px rgba(250, 204, 21, .12), 0 1px 2px rgba(8, 23, 51, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #0f172a;
	font-weight: 600;
	padding: 0 8px 0 14px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-cart:hover {
		background: #fde047;
		border-color: #fde047;
		color: #0f172a;
	}
}
.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-cart:active {
	background: #eab308;
	border-color: #eab308;
	color: #0f172a;
}
.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-compare {
	padding-right: 8px;
}
/* Focus on navy: a white outline (10.9:1 or better across the bar) with an amber halo outside it. */
.b2bp .navbar .nav-item a:focus-visible,
.b2bp .navbar .nav-item button:focus-visible,
.b2bp .navbar .sidebar-toggle:focus-visible {
	box-shadow: 0 0 0 5px rgba(251, 191, 36, .55);
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 2px;
}

/* Sidebar trigger (shadcn/ui SidebarTrigger): ghost icon button on navy with the lucide PanelLeft glyph at 18px.
   The panel strip left of the divider fills faintly while the sidebar is open (aria-expanded, kept in sync by
   B2BP), so the icon mirrors the layout. r2 hamburger, revert: <i class="hamburger align-self-center"> in
   header.jspx and the .hamburger bar rule. Contrast: white glyph on brand-900 16.6:1, on the hover fill 12.5:1. */
.b2bp .sidebar-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-on-brand);
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	margin: 0;
	padding: 0;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
	width: 36px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .sidebar-toggle:hover {
		background: rgba(255, 255, 255, .10);
	}
}
.b2bp .sidebar-toggle:active {
	transform: scale(.97);
}
.b2bp .sidebar-toggle .b2bp-trigger-icon {
	display: block;
	flex: 0 0 18px;
	height: 18px;
	pointer-events: none;
	width: 18px;
}
.b2bp .sidebar-toggle .b2bp-trigger-panel {
	opacity: 0;
	transition: opacity var(--b2b-dur-2) ease;
}
.b2bp .sidebar-toggle[aria-expanded="true"] .b2bp-trigger-panel {
	opacity: .35;
}

/* Count badge: the id'd span is the badge and the only element that holds the number. */
.b2bp .b2bp-count {
	align-items: center;
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	color: var(--b2b-on-brand);
	display: inline-flex;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	height: 20px;
	justify-content: center;
	line-height: 1;
	min-width: 20px;
	padding: 0 6px;
}
.b2bp .b2bp-count.b2bp-count--on {
	background: var(--b2b-on-brand);
	box-shadow: none;
	color: var(--b2b-brand-900);
}
/* Cart count: an ink chip with yellow-300 numerals (13.5:1) on the yellow pill. */
.b2bp .b2bp-hdr-cart .b2bp-count,
.b2bp .b2bp-hdr-cart .b2bp-count.b2bp-count--on {
	background: #0f172a;
	color: #fde047;
}
.b2bp .b2bp-hdr-compare .b2bp-count,
.b2bp .b2bp-hdr-compare .b2bp-count.b2bp-count--on {
	background: var(--b2b-on-brand);
	color: var(--b2b-brand-900);
}
.b2bp .b2bp-count.b2bp-bump {
	animation: b2bp-bump var(--b2b-dur-2) var(--b2b-ease-out);
}
@keyframes b2bp-bump {
	from {
		transform: scale(.85);
	}
}

@media (max-width: 767.98px) {
	.b2bp .navbar-theme {
		padding: 0 8px;
	}
	.b2bp .navbar-theme .navbar-nav {
		gap: 4px;
	}
	.b2bp .navbar-theme .navbar-nav .nav-link {
		height: 44px;
		justify-content: center;
		min-width: 44px;
		padding: 0 10px;
	}
	.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-cart,
	.b2bp .navbar-theme .navbar-nav .nav-link.b2bp-hdr-compare {
		padding: 0 6px 0 12px;
	}
	.b2bp .sidebar-toggle {
		height: 44px;
		width: 44px;
	}
	.b2bp .b2bp-topbar-label {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/* 3.5 Content: ground, gutter 24 (16 phone), max-width 1440. */
.b2bp main.content {
	margin-top: 0 !important;
	padding: var(--b2b-gutter) var(--b2b-gutter) 32px;
}
.b2bp main.content > .container-fluid {
	margin: 0 auto;
	max-width: 1440px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
.b2bp main.content .header {
	margin-bottom: 24px;
}
.b2bp .card {
	border: 1px solid var(--b2b-line);
	border-radius: 12px;
	box-shadow: var(--b2b-shadow-sm);
}

/* 3.6 Footer: quiet; 13px ink-3, top hairline, links separated by a middle dot. */
.b2bp .footer {
	background: transparent;
	border-top: 1px solid var(--b2b-line);
	color: var(--b2b-ink-3);
	font-size: 13px;
	padding: 20px var(--b2b-gutter);
}
.b2bp .footer .list-inline-item:not(:last-child) {
	margin-right: 0;
}
.b2bp .footer .list-inline-item + .list-inline-item::before {
	color: var(--b2b-line-strong);
	content: "\00B7";
	margin: 0 8px;
}
.b2bp .b2bp-footer-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1440px;
}
.b2bp .footer p,
.b2bp .footer ul {
	font-size: 13px;
	margin: 0;
}
.b2bp .footer a,
.b2bp .footer a.text-muted {
	color: var(--b2b-ink-3) !important;
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .footer a:hover {
		color: var(--b2b-ink) !important;
		text-decoration: underline;
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-footer-inner {
		flex-direction: column;
		text-align: center;
	}
	.b2bp .footer a {
		display: inline-block;
		line-height: 44px;
	}
}

/* 3.7 Favourite star (moved from pageinclude/header.jspx; same class names, restyled). */
.b2bp .b2b-fav-star {
	align-items: center;
	background: rgba(255, 255, 255, .9);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--b2b-line);
	color: var(--b2b-line-strong);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	height: 30px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 30px;
	z-index: 3;
}
/* Below 768 the hit area grows to 44x44 around the same 30px visible star. */
@media (max-width: 767.98px) {
	.b2bp .b2b-fav-star.b2b-fav-star-inline {
		position: relative;
	}
	.b2bp .b2b-fav-star::after {
		bottom: -7px;
		content: "";
		left: -7px;
		position: absolute;
		right: -7px;
		top: -7px;
	}
}
.b2bp .b2b-fav-star:hover,
.b2bp .b2b-fav-star.b2b-fav-on {
	color: #c78a00;
}
.b2bp .b2b-fav-star:focus-visible {
	outline: 2px solid var(--b2b-accent);
	outline-offset: 2px;
}
.b2bp .b2b-fav-star.b2b-fav-busy {
	opacity: .5;
	pointer-events: none;
}
.b2bp .b2b-fav-star-inline {
	background: none;
	box-shadow: none;
	margin-left: 8px;
	position: static;
	vertical-align: middle;
}
.b2bp .b2b-fav-divider {
	border-top: 1px solid var(--b2b-line);
	margin: 4px 0 16px;
}

/* 3.8 Shared legacy text: the order-card date (customb2b.css #7b8ca8, 3.4:1) moves to ink-3 (5.4:1). */
.b2bp .b2b-order-card-date,
.b2bp .b2b-order-card-date .fa-angle-right {
	color: var(--b2b-ink-3);
}


/* ----- 4. Components -------------------------------------------------------------------------------- */

/* 4.1 Page head */
.b2bp .b2bp-page-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	justify-content: space-between;
	margin: 0 0 24px;
}
.b2bp .b2bp-page-title {
	color: var(--b2b-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}
.b2bp .b2bp-page-meta {
	color: var(--b2b-ink-2);
	font-size: 14px;
	margin: 4px 0 0;
}
.b2bp .b2bp-page-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-page-head {
		margin-bottom: 16px;
	}
	.b2bp .b2bp-page-title {
		font-size: 20px;
	}
}

/* 4.2 Panel */
.b2bp .b2bp-panel {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: 12px;
	box-shadow: var(--b2b-shadow-sm);
	margin-bottom: 16px;
	min-width: 0;
}
.b2bp .b2bp-panel-head {
	align-items: center;
	border-bottom: 1px solid var(--b2b-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	padding: 14px 16px;
}
.b2bp .b2bp-panel-title {
	color: var(--b2b-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}
.b2bp .b2bp-panel-meta {
	color: var(--b2b-ink-3);
	font-size: 13px;
	margin: 0;
}
.b2bp .b2bp-panel-body {
	padding: 16px;
}
.b2bp .b2bp-panel-foot {
	border-top: 1px solid var(--b2b-line);
	padding: 12px 16px;
}
.b2bp .b2bp-panel-scroll {
	overflow-x: auto;
}

/* 4.3 Figure cards */
.b2bp .b2bp-kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}
.b2bp .b2bp-kpi {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius);
	color: var(--b2b-ink);
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 16px;
	text-decoration: none;
	transition: border-color .12s ease-in-out;
}
.b2bp a.b2bp-kpi:hover {
	border-color: var(--b2b-line-strong);
	color: var(--b2b-ink);
}
.b2bp .b2bp-kpi-label {
	align-items: center;
	color: var(--b2b-ink-3);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
}
.b2bp .b2bp-kpi-sw {
	background: var(--b2b-line-strong);
	border-radius: 2px;
	flex: 0 0 8px;
	height: 8px;
	width: 8px;
}
.b2bp .b2bp-kpi-value {
	color: var(--b2b-ink);
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.2;
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-kpi-sub {
	color: var(--b2b-ink-2);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.b2bp .b2bp-kpi--quotes .b2bp-kpi-sw { background: var(--b2b-quotes); }
.b2bp .b2bp-kpi--orders .b2bp-kpi-sw { background: var(--b2b-orders); }
.b2bp .b2bp-kpi--invoices .b2bp-kpi-sw { background: var(--b2b-invoices); }
.b2bp .b2bp-kpi--owing .b2bp-kpi-sw { background: var(--b2b-owing); }
.b2bp .b2bp-kpi--quotes .b2bp-kpi-value { color: var(--b2b-quotes); }
.b2bp .b2bp-kpi--orders .b2bp-kpi-value { color: var(--b2b-orders); }
.b2bp .b2bp-kpi--invoices .b2bp-kpi-value { color: var(--b2b-invoices); }
.b2bp .b2bp-kpi--owing .b2bp-kpi-value { color: var(--b2b-owing); }
.b2bp .b2bp-kpi .b2bp-kpi-value.b2bp-zero { color: var(--b2b-ink); }
@media (max-width: 1023.98px) {
	.b2bp .b2bp-kpi {
		flex-basis: calc(50% - 6px);
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-kpis {
		gap: 8px;
		margin-bottom: 16px;
	}
	.b2bp .b2bp-kpi {
		flex-basis: calc(50% - 4px);
		padding: 12px;
	}
	.b2bp .b2bp-kpi-value {
		font-size: 24px;
	}
}

/* 4.4 Toolbar / filter bar */
.b2bp .b2bp-toolbar {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}
.b2bp .b2bp-field {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.b2bp .b2bp-field--grow {
	flex: 1 1 240px;
}
.b2bp .b2bp-label,
.b2bp .b2bp-field > label {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 600;
	margin: 0;
}
.b2bp .b2bp-toolbar-end {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-left: auto;
}
.b2bp .b2bp-toolbar-count {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.b2bp .b2bp-search {
	position: relative;
}
.b2bp .b2bp-search > .b2bp-search-icon {
	color: var(--b2b-ink-3);
	font-size: 14px;
	left: 11px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.b2bp .b2bp-search > .form-control {
	padding-left: 32px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-toolbar .b2bp-field,
	.b2bp .b2bp-toolbar-end {
		flex: 1 1 100%;
		margin-left: 0;
	}
}

/* 4.5 Inputs and selects */
/* One field line for inputs, textareas, selects and input-group addons: #8893a5 is 3.1:1 on white (1.4.11),
   hover #64748b 4.8:1. Buttons and cards keep outline-line. */
.b2bp {
	--b2b-field-line: #8893a5;
	--b2b-field-line-hover: #64748b;
}
.b2bp .form-control,
.b2bp .form-select {
	background-color: var(--b2b-surface);
	border: 1px solid var(--b2b-field-line);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink);
	font-size: 14px;
	min-height: var(--b2b-ctl);
	transition: border-color var(--b2b-dur-1) ease, box-shadow var(--b2b-dur-1) ease;
}
.b2bp .form-control-sm,
.b2bp .form-select-sm {
	border-radius: 7px;
	font-size: 13px;
	min-height: 32px;
}
.b2bp .form-control-lg {
	font-size: 15px;
	min-height: 44px;
}
.b2bp .form-control::placeholder {
	color: var(--b2b-ink-3);
	opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .form-control:hover {
		border-color: var(--b2b-field-line-hover);
	}
}
/* Ring focus (shadcn): the border turns primary (5.2:1) and a 3px soft ring sits outside it. */
.b2bp .form-control:focus,
.b2bp .form-select:focus,
.b2bp .form-control:focus-visible,
.b2bp .form-select:focus-visible,
.b2bp .form-check-input:focus-visible {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
	outline: 0;
}
.b2bp .form-check-input {
	border-color: var(--b2b-line-strong);
}
.b2bp .form-check-input:checked {
	background-color: var(--b2b-primary);
	border-color: var(--b2b-primary);
}
.b2bp .form-control.is-invalid,
.b2bp .form-select.is-invalid {
	border-color: var(--b2b-destructive);
}
.b2bp .form-control.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .22);
}
.b2bp .form-control:disabled,
.b2bp .form-control[readonly],
.b2bp .form-select:disabled {
	background-color: var(--b2b-subtle);
	color: var(--b2b-ink-2);
}
/* Selects as a shadcn SelectTrigger on the native <select> (the open list stays native: no JS custom select).
   36px (44 on phones via --b2b-ctl), 14/400 ink, lucide chevron-down 16px slate-500 (4.8:1) 12px from the
   right. select.form-control covers batchprint's status select, which predates form-select. */
.b2bp .form-select,
.b2bp select.form-control:not([multiple]):not([size]) {
	--bs-form-select-bg-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--b2b-surface);
	background-image: var(--bs-form-select-bg-img);
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border: 1px solid var(--b2b-field-line);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink);
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	height: var(--b2b-ctl);
	line-height: 20px;
	min-height: 0;
	padding: 0 36px 0 12px;
	text-overflow: ellipsis;
}
.b2bp .form-select.form-select-sm {
	border-radius: var(--b2b-radius-btn);
	font-size: 14px;
	height: 32px;
}
@media (max-width: 767.98px) {
	.b2bp .form-select.form-select-sm {
		height: var(--b2b-ctl);
	}
}
/* In an input group ($ From / $ To) the select joins its addon: square inner corners. */
.b2bp .input-group > .form-select:not(:first-child) {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}
.b2bp .input-group > .form-select:not(:last-child) {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .form-select:hover,
	.b2bp select.form-control:not([multiple]):not([size]):hover {
		border-color: var(--b2b-field-line-hover);
	}
}
.b2bp select.form-control:not([multiple]):not([size]):focus,
.b2bp select.form-control:not([multiple]):not([size]):focus-visible {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
	outline: 0;
}
.b2bp .form-select:disabled,
.b2bp select.form-control:not([multiple]):not([size]):disabled {
	background-color: var(--b2b-surface);
	color: var(--b2b-ink);
	cursor: not-allowed;
	opacity: .5;
}
.b2bp .form-label {
	color: var(--b2b-ink-2);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}
.b2bp .input-group-text {
	background: var(--b2b-subtle);
	border-radius: var(--b2b-radius-btn);
	border-color: var(--b2b-field-line);
	color: var(--b2b-ink-2);
}

/* 4.6 Buttons (DESIGN-r2 "Buttons"): shadcn/ui variants mapped onto the btn-* classes already in the markup,
   so no markup or JS changes. Bootstrap 5 draws every state from the --bs-btn-* variables, so each variant
   sets those; hover values apply only under (hover: hover) and (pointer: fine), so touch never sticks.
     Primary      btn-primary btn-success btn-info btn-teal btn-purple
     Secondary    btn-secondary btn-light btn-warning btn-exit
     Outline      btn-outline-primary btn-outline-secondary
     Destructive  btn-danger (solid), btn-outline-danger (white, red text)
     Ghost        btn-ghost; btn-link is ghost-shaped with primary text, because it reads as a link
     Selected     btn-cart-success: deviation from "primary". product.jspx and inventory.js swap btn-primary
                  ("Add to cart") for btn-cart-success ("Added in cart"); a primary-tint keeps the two states
                  distinct while staying in the blue family (#1d4ed8 on #eff6ff, 6.2:1).
   Sizes 36 (default) / 32 (btn-sm) / 44 (btn-lg, and every non-sm button below 768). Press scale: section 9. */
body.b2bp .btn {
	--bs-btn-border-radius: var(--b2b-radius-btn);
	--bs-btn-box-shadow: none;
	--bs-btn-focus-box-shadow: none;
	--bs-btn-font-size: 14px;
	--bs-btn-font-weight: 500;
	--bs-btn-line-height: 20px;
	--bs-btn-padding-y: 7px;
	--bs-btn-padding-x: 14px;
	--bs-btn-disabled-opacity: .5;
	align-items: center;
	box-shadow: none;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	line-height: 20px;
	min-height: 36px;
	/* Labels wrap between words only, never mid-word. */
	overflow-wrap: normal;
	text-align: center;
	transition: color var(--b2b-dur-1) ease, background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease, box-shadow var(--b2b-dur-1) ease, opacity var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
	vertical-align: middle;
	white-space: normal;
	word-break: normal;
}
body.b2bp .btn-sm {
	--bs-btn-font-size: 13px;
	--bs-btn-padding-y: 5px;
	--bs-btn-padding-x: 12px;
	--bs-btn-border-radius: 7px;
	gap: 8px;
	min-height: 32px;
}
body.b2bp .btn-lg {
	--bs-btn-border-radius: var(--b2b-radius-btn);
	--bs-btn-font-size: 15px;
	--bs-btn-padding-y: 11px;
	--bs-btn-padding-x: 20px;
	min-height: 44px;
}
body.b2bp .btn-block {
	display: flex;
	width: 100%;
}
body.b2bp .btn.d-none {
	display: none !important;
}
body.b2bp .btn:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--b2b-primary);
	outline-offset: 2px;
}
body.b2bp .btn:disabled,
body.b2bp .btn.disabled,
body.b2bp fieldset:disabled .btn {
	box-shadow: none;
	opacity: .5;
}
@media (max-width: 767.98px) {
	body.b2bp .btn:not(.btn-sm):not(.btn-link) {
		--bs-btn-padding-y: 11px;
		min-height: 44px;
	}
}

/* Primary */
body.b2bp .btn-primary,
body.b2bp .btn-success,
body.b2bp .btn-info,
body.b2bp .btn-teal,
body.b2bp .btn-purple {
	--b2bp-fg: var(--b2b-primary-fg);
	--bs-btn-bg: var(--b2b-primary);
	--bs-btn-border-color: var(--b2b-primary);
	--bs-btn-hover-bg: var(--b2b-primary);
	--bs-btn-hover-border-color: var(--b2b-primary);
	--bs-btn-active-bg: var(--b2b-primary-active);
	--bs-btn-active-border-color: var(--b2b-primary-active);
	--bs-btn-disabled-bg: var(--b2b-primary);
	--bs-btn-disabled-border-color: var(--b2b-primary);
	box-shadow: var(--b2b-shadow-xs);
}
/* cart.jspx paints .btn-teal (and its hover/focus/active) with direct properties; restate from the variables. */
body.b2bp .btn-teal,
body.b2bp .btn-teal:focus {
	background-color: var(--bs-btn-bg);
	border-color: var(--bs-btn-border-color);
}
body.b2bp .btn-teal:hover {
	background-color: var(--bs-btn-hover-bg);
	border-color: var(--bs-btn-hover-border-color);
}
body.b2bp .btn-teal:active {
	background-color: var(--bs-btn-active-bg);
	border-color: var(--bs-btn-active-border-color);
}

/* Selected (see the note above). The pages' own .btn-cart-success style is !important. */
body.b2bp .btn-cart-success {
	--b2bp-fg: var(--b2b-primary-hover);
	background-color: #eff6ff !important;
	border-color: #bfdbfe !important;
}
body.b2bp .btn-cart-success:active,
body.b2bp .btn-cart-success.active {
	background-color: #dbeafe !important;
	border-color: #93c5fd !important;
}

/* Secondary */
body.b2bp .btn-secondary,
body.b2bp .btn-light,
body.b2bp .btn-warning,
body.b2bp .btn-exit {
	--b2bp-fg: var(--b2b-secondary-fg);
	--bs-btn-bg: var(--b2b-secondary);
	--bs-btn-border-color: #e2e8f0;
	--bs-btn-hover-bg: var(--b2b-secondary);
	--bs-btn-hover-border-color: #e2e8f0;
	--bs-btn-active-bg: #cbd5e1;
	--bs-btn-active-border-color: #cbd5e1;
	--bs-btn-disabled-bg: var(--b2b-secondary);
	--bs-btn-disabled-border-color: #e2e8f0;
}

/* Outline */
body.b2bp .btn-outline-primary,
body.b2bp .btn-outline-secondary {
	--b2bp-fg: var(--b2b-secondary-fg);
	--bs-btn-bg: var(--b2b-surface);
	--bs-btn-border-color: var(--b2b-outline-line);
	--bs-btn-hover-bg: var(--b2b-surface);
	--bs-btn-hover-border-color: var(--b2b-outline-line);
	--bs-btn-active-bg: var(--b2b-secondary-hover);
	--bs-btn-active-border-color: #cbd5e1;
	--bs-btn-disabled-bg: var(--b2b-surface);
	--bs-btn-disabled-border-color: var(--b2b-outline-line);
	box-shadow: var(--b2b-shadow-xs);
}

/* Destructive */
body.b2bp .btn-danger {
	--b2bp-fg: #fff;
	--bs-btn-bg: var(--b2b-destructive);
	--bs-btn-border-color: var(--b2b-destructive);
	--bs-btn-hover-bg: var(--b2b-destructive);
	--bs-btn-hover-border-color: var(--b2b-destructive);
	--bs-btn-active-bg: #991b1b;
	--bs-btn-active-border-color: #991b1b;
	--bs-btn-disabled-bg: var(--b2b-destructive);
	--bs-btn-disabled-border-color: var(--b2b-destructive);
	box-shadow: var(--b2b-shadow-xs);
}
body.b2bp .btn-outline-danger {
	--b2bp-fg: var(--b2b-destructive);
	--bs-btn-bg: var(--b2b-surface);
	--bs-btn-border-color: #fecaca;
	--bs-btn-hover-bg: var(--b2b-surface);
	--bs-btn-hover-border-color: #fecaca;
	--bs-btn-active-bg: #fee2e2;
	--bs-btn-active-border-color: #fca5a5;
	--bs-btn-disabled-bg: var(--b2b-surface);
	--bs-btn-disabled-border-color: #fecaca;
	box-shadow: var(--b2b-shadow-xs);
}

/* Ghost and link */
body.b2bp .btn-ghost,
body.b2bp .btn-link {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-bg: var(--b2b-secondary-hover);
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: transparent;
	--bs-btn-font-weight: 500;
	text-decoration: none;
}
body.b2bp .btn-ghost {
	--bs-btn-color: var(--b2b-secondary-fg);
	--bs-btn-hover-color: var(--b2b-secondary-fg);
	--bs-btn-active-color: var(--b2b-secondary-fg);
	--bs-btn-disabled-color: var(--b2b-secondary-fg);
}
body.b2bp .btn-link {
	--bs-btn-color: var(--b2b-primary-hover);
	--bs-btn-hover-color: var(--b2b-primary-active);
	--bs-btn-active-color: var(--b2b-primary-active);
	--bs-btn-disabled-color: var(--b2b-ink-3);
	--bs-btn-active-bg: #dbeafe;
}

@media (hover: hover) and (pointer: fine) {
	body.b2bp .btn-primary,
	body.b2bp .btn-success,
	body.b2bp .btn-info,
	body.b2bp .btn-teal,
	body.b2bp .btn-purple {
		--bs-btn-hover-bg: var(--b2b-primary-hover);
		--bs-btn-hover-border-color: var(--b2b-primary-hover);
	}
	body.b2bp .btn-cart-success:hover {
		background-color: #dbeafe !important;
		border-color: #93c5fd !important;
	}
	body.b2bp .btn-secondary,
	body.b2bp .btn-light,
	body.b2bp .btn-warning,
	body.b2bp .btn-exit {
		--bs-btn-hover-bg: var(--b2b-secondary-hover);
		--bs-btn-hover-border-color: #cbd5e1;
	}
	body.b2bp .btn-outline-primary,
	body.b2bp .btn-outline-secondary {
		--bs-btn-hover-bg: var(--b2b-secondary);
		--bs-btn-hover-border-color: #cbd5e1;
	}
	body.b2bp .btn-danger {
		--bs-btn-hover-bg: var(--b2b-destructive-hover);
		--bs-btn-hover-border-color: var(--b2b-destructive-hover);
	}
	body.b2bp .btn-outline-danger {
		--bs-btn-hover-bg: #fef2f2;
		--bs-btn-hover-border-color: #fca5a5;
	}
	body.b2bp .btn-outline-danger:hover {
		--b2bp-fg: var(--b2b-destructive-hover);
	}
	body.b2bp .btn-ghost {
		--bs-btn-hover-bg: var(--b2b-secondary);
	}
	body.b2bp .btn-link {
		--bs-btn-hover-bg: #eff6ff;
	}
}

/* 4.6a Button text. modern.css forces #fff (or #343a40 on btn-light) on hover/focus/active/disabled with
   selectors up to (0,4,0), and the catalogue pages force white on btn-cart-success, so the variant
   foreground (--b2bp-fg, set per variant above) is applied with !important in every state. */
body.b2bp .btn-primary,
body.b2bp .btn-primary:hover,
body.b2bp .btn-primary:focus,
body.b2bp .btn-primary:active,
body.b2bp .btn-primary.active,
body.b2bp .btn-primary:disabled,
body.b2bp .btn-primary.disabled,
body.b2bp .show > .btn-primary,
body.b2bp .btn-success,
body.b2bp .btn-success:hover,
body.b2bp .btn-success:focus,
body.b2bp .btn-success:active,
body.b2bp .btn-success.active,
body.b2bp .btn-success:disabled,
body.b2bp .btn-success.disabled,
body.b2bp .show > .btn-success,
body.b2bp .btn-info,
body.b2bp .btn-info:hover,
body.b2bp .btn-info:focus,
body.b2bp .btn-info:active,
body.b2bp .btn-info.active,
body.b2bp .btn-info:disabled,
body.b2bp .btn-info.disabled,
body.b2bp .show > .btn-info,
body.b2bp .btn-teal,
body.b2bp .btn-teal:hover,
body.b2bp .btn-teal:focus,
body.b2bp .btn-teal:active,
body.b2bp .btn-teal.active,
body.b2bp .btn-teal:disabled,
body.b2bp .btn-teal.disabled,
body.b2bp .show > .btn-teal,
body.b2bp .btn-purple,
body.b2bp .btn-purple:hover,
body.b2bp .btn-purple:focus,
body.b2bp .btn-purple:active,
body.b2bp .btn-purple.active,
body.b2bp .btn-purple:disabled,
body.b2bp .btn-purple.disabled,
body.b2bp .show > .btn-purple,
body.b2bp .btn-cart-success,
body.b2bp .btn-cart-success:hover,
body.b2bp .btn-cart-success:focus,
body.b2bp .btn-cart-success:active,
body.b2bp .btn-cart-success.active,
body.b2bp .btn-cart-success:disabled,
body.b2bp .btn-cart-success.disabled,
body.b2bp .show > .btn-cart-success,
body.b2bp .btn-secondary,
body.b2bp .btn-secondary:hover,
body.b2bp .btn-secondary:focus,
body.b2bp .btn-secondary:active,
body.b2bp .btn-secondary.active,
body.b2bp .btn-secondary:disabled,
body.b2bp .btn-secondary.disabled,
body.b2bp .show > .btn-secondary,
body.b2bp .btn-light,
body.b2bp .btn-light:hover,
body.b2bp .btn-light:focus,
body.b2bp .btn-light:active,
body.b2bp .btn-light.active,
body.b2bp .btn-light:disabled,
body.b2bp .btn-light.disabled,
body.b2bp .show > .btn-light,
body.b2bp .btn-warning,
body.b2bp .btn-warning:hover,
body.b2bp .btn-warning:focus,
body.b2bp .btn-warning:active,
body.b2bp .btn-warning.active,
body.b2bp .btn-warning:disabled,
body.b2bp .btn-warning.disabled,
body.b2bp .show > .btn-warning,
body.b2bp .btn-exit,
body.b2bp .btn-exit:hover,
body.b2bp .btn-exit:focus,
body.b2bp .btn-exit:active,
body.b2bp .btn-exit.active,
body.b2bp .btn-exit:disabled,
body.b2bp .btn-exit.disabled,
body.b2bp .show > .btn-exit,
body.b2bp .btn-outline-primary,
body.b2bp .btn-outline-primary:hover,
body.b2bp .btn-outline-primary:focus,
body.b2bp .btn-outline-primary:active,
body.b2bp .btn-outline-primary.active,
body.b2bp .btn-outline-primary:disabled,
body.b2bp .btn-outline-primary.disabled,
body.b2bp .show > .btn-outline-primary,
body.b2bp .btn-outline-secondary,
body.b2bp .btn-outline-secondary:hover,
body.b2bp .btn-outline-secondary:focus,
body.b2bp .btn-outline-secondary:active,
body.b2bp .btn-outline-secondary.active,
body.b2bp .btn-outline-secondary:disabled,
body.b2bp .btn-outline-secondary.disabled,
body.b2bp .show > .btn-outline-secondary,
body.b2bp .btn-danger,
body.b2bp .btn-danger:hover,
body.b2bp .btn-danger:focus,
body.b2bp .btn-danger:active,
body.b2bp .btn-danger.active,
body.b2bp .btn-danger:disabled,
body.b2bp .btn-danger.disabled,
body.b2bp .show > .btn-danger,
body.b2bp .btn-outline-danger,
body.b2bp .btn-outline-danger:hover,
body.b2bp .btn-outline-danger:focus,
body.b2bp .btn-outline-danger:active,
body.b2bp .btn-outline-danger.active,
body.b2bp .btn-outline-danger:disabled,
body.b2bp .btn-outline-danger.disabled,
body.b2bp .show > .btn-outline-danger {
	color: var(--b2bp-fg) !important;
}
/* Teal info badges keep dark text (white on #20c997 is 2.1:1). */
body.b2bp .bg-info {
	color: var(--b2b-on-fill) !important;
}

/* 4.6b Button icons. One rule portal-wide, so buttons of one kind never mix:
     Action buttons (add, order, print, delete, filter, retry, new order, show all, change range, log in)
       carry a leading 14px icon, 8px from the label, in every variant.
     Dismiss buttons (Cancel, Close, Clear beside Apply) and pure navigation (Continue shopping, Browse
       products, Continue to dashboard, All support tickets) are text only.
   Markup that already has an <i class="fa ..."> keeps it. Where a script sets the label (Add to Compare,
   mylist Add) or builds the button (empty states, Retry), the icon is a ::before glyph keyed on the id /
   handler / href already in the markup, so no markup or JS changes. Glyphs are Font Awesome 6 Free solid,
   the font the portal loads; the "/ ''" alt text keeps them out of the accessible name. Add to cart and
   the in-compare tick are drawn in 7a. */
body.b2bp .btn > i.fa,
body.b2bp .btn > i.fas,
body.b2bp .btn > i.far,
body.b2bp .btn.b2bp-add::before,
body.b2bp .btn#addToCartBtn::before {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
}
body.b2bp .btn#addToCompareBtn::before,
body.b2bp .btn.b2bp-ml-add::before,
body.b2bp .btn#mylistRetryBtn::before,
body.b2bp .btn.b2bp-acct-retry::before,
body.b2bp .btn[onclick^="applyFilter"]::before,
body.b2bp .btn[onclick*="daterange"]::before,
body.b2bp .btn[onclick^="b2bQuotesShowAllDates"]::before,
body.b2bp .btn[onclick^="b2bOrdersShowAllDates"]::before,
body.b2bp .btn[onclick^="b2bInvoicesShowAll"]::before,
body.b2bp .b2bp-empty .btn[onclick^="clearFilter"]::before,
body.b2bp .b2bp-empty .btn[onclick^="clearB2bFiltersToolbar"]::before {
	-webkit-font-smoothing: antialiased;
	flex: 0 0 auto;
	font-family: "Font Awesome 6 Free";
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
}
body.b2bp .btn#addToCompareBtn::before {
	content: "\f24e";
	content: "\f24e" / "";
}
body.b2bp .btn.b2bp-ml-add::before {
	content: "\f217";
	content: "\f217" / "";
}
body.b2bp .btn#mylistRetryBtn::before,
body.b2bp .btn.b2bp-acct-retry::before {
	content: "\f2f9";
	content: "\f2f9" / "";
}
body.b2bp .btn[onclick^="applyFilter"]::before {
	content: "\f0b0";
	content: "\f0b0" / "";
}
body.b2bp .btn[onclick*="daterange"]::before {
	content: "\f073";
	content: "\f073" / "";
}
body.b2bp .btn[onclick^="b2bQuotesShowAllDates"]::before,
body.b2bp .btn[onclick^="b2bOrdersShowAllDates"]::before,
body.b2bp .btn[onclick^="b2bInvoicesShowAll"]::before {
	content: "\f03a";
	content: "\f03a" / "";
}
body.b2bp .b2bp-empty .btn[onclick^="clearFilter"]::before {
	content: "\f00d";
	content: "\f00d" / "";
}
body.b2bp .b2bp-empty .btn[onclick^="clearB2bFiltersToolbar"]::before {
	content: "\f2ea";
	content: "\f2ea" / "";
}
/* New order links (quotes, orders, invoices; static and empty-state) get the plus mylist already has in
   its markup. Own rule: a browser without :has() drops only this one, and then shows no doubled icon. */
body.b2bp a.btn[href$="/b2b/inventory?newOrder=1"]:not(:has(> i))::before {
	-webkit-font-smoothing: antialiased;
	content: "\f067";
	content: "\f067" / "";
	flex: 0 0 auto;
	font-family: "Font Awesome 6 Free";
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
}

/* 4.7 Segmented control: buttons inside .b2bp-seg; selected = aria-pressed / aria-selected / .active */
.b2bp .b2bp-seg {
	background: var(--b2b-secondary);
	border: 1px solid transparent;
	border-radius: var(--b2b-radius-btn);
	display: inline-flex;
	gap: 2px;
	max-width: 100%;
	overflow-x: auto;
	padding: 3px;
}
.b2bp .b2bp-seg > button,
.b2bp .b2bp-seg > a {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--b2b-ink-2);
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	text-decoration: none;
	transition: color var(--b2b-dur-1) ease, background-color var(--b2b-dur-2) ease, box-shadow var(--b2b-dur-2) ease;
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-seg > button:hover,
	.b2bp .b2bp-seg > a:hover {
		color: var(--b2b-ink);
	}
}
.b2bp .b2bp-seg > [aria-pressed="true"],
.b2bp .b2bp-seg > [aria-selected="true"],
.b2bp .b2bp-seg > [aria-current="page"],
.b2bp .b2bp-seg > .active {
	background: var(--b2b-surface);
	box-shadow: var(--b2b-shadow-sm);
	color: var(--b2b-ink);
	font-weight: 600;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-seg > button,
	.b2bp .b2bp-seg > a {
		height: 40px;
	}
}

/* 4.8 Status pills and badges (shadcn Badge): 22px, 12/600, tinted fill with a same-hue hairline. */
.b2bp .b2bp-pill {
	align-items: center;
	background: var(--b2b-hover);
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: 999px;
	color: var(--b2b-ink-2);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 4px;
	height: 22px;
	line-height: 1;
	padding: 0 9px;
	white-space: nowrap;
}
.b2bp .badge {
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
}
.b2bp .b2bp-pill--open { background: var(--b2b-accent-tint); color: var(--b2b-accent); }
.b2bp .b2bp-pill--done { background: var(--b2b-success-tint); color: var(--b2b-success); }
.b2bp .b2bp-pill--warn { background: var(--b2b-warning-tint); color: var(--b2b-warning); }
.b2bp .b2bp-pill--danger { background: var(--b2b-danger-tint); color: var(--b2b-danger); }
.b2bp .b2bp-pill--neutral { background: var(--b2b-hover); color: var(--b2b-ink-2); }

/* 4.9 Data table */
.b2bp table.b2bp-table {
	border-collapse: collapse;
	color: var(--b2b-ink);
	font-size: 13px;
	margin: 0;
	width: 100%;
}
.b2bp table.b2bp-table > thead > tr > th {
	background: #f8fafc;
	border: 0;
	border-bottom: 1px solid var(--b2b-line);
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 600;
	height: 40px;
	padding: 8px 12px;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}
.b2bp table.b2bp-table > tbody > tr > td,
.b2bp table.b2bp-table > tfoot > tr > td,
.b2bp table.b2bp-table > tfoot > tr > th {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--b2b-line);
	height: var(--b2b-row);
	padding: 10px 12px;
	vertical-align: middle;
}
.b2bp table.b2bp-table > tbody > tr:last-child > td {
	border-bottom: 0;
}
.b2bp table.b2bp-table > tbody > tr > td {
	transition: background-color var(--b2b-dur-1) ease;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp table.b2bp-table > tbody > tr:hover > td {
		background: #f8fafc;
	}
}
.b2bp table.b2bp-table .num,
.b2bp table.b2bp-table th.num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}
.b2bp table.b2bp-table .b2bp-neg {
	color: var(--b2b-danger);
}
.b2bp table.b2bp-table td:first-child a {
	font-weight: 600;
}
/* Sortable header: B2BP.sortTable puts a <button> in th[data-sort]. */
.b2bp table.b2bp-table th .b2bp-sort {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 4px;
	margin: 0 -4px;
	padding: 2px 4px;
	white-space: nowrap;
}
.b2bp table.b2bp-table th.num .b2bp-sort {
	flex-direction: row-reverse;
}
.b2bp table.b2bp-table th .b2bp-sort:hover {
	color: var(--b2b-ink);
}
.b2bp table.b2bp-table th .b2bp-sort::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	content: "";
	display: inline-block;
	height: 0;
	opacity: .35;
	width: 0;
}
.b2bp table.b2bp-table th[aria-sort="ascending"] .b2bp-sort::after {
	border-bottom: 5px solid currentColor;
	border-top: 0;
	opacity: 1;
}
.b2bp table.b2bp-table th[aria-sort="descending"] .b2bp-sort::after {
	opacity: 1;
}
.b2bp table.b2bp-table th[aria-sort="ascending"],
.b2bp table.b2bp-table th[aria-sort="descending"] {
	color: var(--b2b-ink);
}
/* Phone sort bar: B2BP.sortTable puts it before each table with th[data-sort]; only shown below 768,
   where the thead (and its sort buttons) is hidden. */
.b2bp .b2bp-sortbar {
	display: none;
}

/* Phone rows: each tr becomes a labelled block (labels from data-label, set by B2BP.labelRows). */
@media (max-width: 767.98px) {
	.b2bp table.b2bp-table,
	.b2bp table.b2bp-table > tbody,
	.b2bp table.b2bp-table > tbody > tr,
	.b2bp table.b2bp-table > tbody > tr > td,
	.b2bp table.b2bp-table > tfoot,
	.b2bp table.b2bp-table > tfoot > tr,
	.b2bp table.b2bp-table > tfoot > tr > td,
	.b2bp table.b2bp-table > tfoot > tr > th {
		display: block;
		width: 100%;
	}
	.b2bp table.b2bp-table > thead {
		display: none;
	}
	.b2bp .b2bp-sortbar {
		align-items: center;
		border-bottom: 1px solid var(--b2b-line);
		display: flex;
		gap: 8px;
		padding: 8px 16px;
	}
	.b2bp .b2bp-sortbar-label {
		color: var(--b2b-ink-3);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
		margin: 0;
		white-space: nowrap;
	}
	.b2bp .b2bp-sortbar .form-select {
		flex: 1 1 auto;
		min-height: 44px;
		min-width: 0;
		width: auto;
	}
	.b2bp .b2bp-sortbar .btn {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		gap: 6px;
		justify-content: center;
		min-height: 44px;
		white-space: nowrap;
	}
	.b2bp table.b2bp-table > tbody > tr,
	.b2bp table.b2bp-table > tfoot > tr {
		border-bottom: 1px solid var(--b2b-line);
		padding: 12px 16px;
	}
	.b2bp table.b2bp-table > tbody > tr:last-child {
		border-bottom: 0;
	}
	.b2bp table.b2bp-table > tbody > tr:hover > td {
		background: transparent;
	}
	.b2bp table.b2bp-table > tbody > tr > td,
	.b2bp table.b2bp-table > tfoot > tr > td,
	.b2bp table.b2bp-table > tfoot > tr > th {
		border: 0;
		display: flex;
		gap: 12px;
		height: auto;
		justify-content: space-between;
		min-height: 0;
		padding: 2px 0;
		text-align: right;
	}
	.b2bp table.b2bp-table > tbody > tr > td[data-label]::before,
	.b2bp table.b2bp-table > tfoot > tr > td[data-label]::before {
		color: var(--b2b-ink-3);
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
		text-align: left;
	}
	.b2bp table.b2bp-table > tbody > tr > td:first-child {
		font-size: 14px;
		padding-bottom: 6px;
	}
	.b2bp table.b2bp-table > tbody > tr > td.b2bp-cell-hide-sm,
	.b2bp table.b2bp-table > tbody > tr > td:empty {
		display: none;
	}
	.b2bp table.b2bp-table > tbody > tr > td > * {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* 4.10 Qty stepper: − [input] + as one outline control: white segments, line-strong border (3.6:1),
   secondary hover, whatever btn-* class the buttons carry. */
.b2bp .b2bp-qty {
	align-items: stretch;
	display: inline-flex;
	height: var(--b2b-ctl);
}
.b2bp .b2bp-qty > button {
	--b2bp-fg: var(--b2b-secondary-fg);
	--bs-btn-bg: var(--b2b-surface);
	--bs-btn-active-bg: var(--b2b-secondary-hover);
	--bs-btn-disabled-bg: var(--b2b-surface);
	--bs-btn-border-color: var(--b2b-line-strong);
	--bs-btn-hover-border-color: var(--b2b-line-strong);
	--bs-btn-active-border-color: var(--b2b-line-strong);
	--bs-btn-disabled-border-color: var(--b2b-line-strong);
	--bs-btn-hover-bg: var(--b2b-surface);
	align-items: center;
	box-shadow: none;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 var(--b2b-ctl);
	font-size: 16px;
	height: auto;
	justify-content: center;
	line-height: 1;
	min-height: 0;
	padding: 0;
	width: var(--b2b-ctl);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-qty > button {
		--bs-btn-hover-bg: var(--b2b-secondary);
	}
}
.b2bp .b2bp-qty > button:first-child {
	border-radius: var(--b2b-radius-btn) 0 0 var(--b2b-radius-btn);
	border-right: 0;
}
.b2bp .b2bp-qty > button:last-child {
	border-left: 0;
	border-radius: 0 var(--b2b-radius-btn) var(--b2b-radius-btn) 0;
}
.b2bp .b2bp-qty > button:disabled {
	--b2bp-fg: var(--b2b-line-strong);
	cursor: default;
	opacity: 1;
}
.b2bp .b2bp-qty > input {
	-moz-appearance: textfield;
	border: 1px solid var(--b2b-line-strong);
	border-radius: 0;
	color: var(--b2b-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	height: 100%;
	min-height: 0;
	padding: 0 4px;
	text-align: center;
	width: 56px;
}
.b2bp .b2bp-qty > input::-webkit-outer-spin-button,
.b2bp .b2bp-qty > input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.b2bp .b2bp-qty > input:focus-visible,
.b2bp .b2bp-qty > button:focus-visible {
	outline-offset: 0;
	position: relative;
	z-index: 1;
}

/* 4.11 Empty, loading, error */
.b2bp .b2bp-empty,
.b2bp .b2bp-loading,
.b2bp .b2bp-error {
	border: 1px dashed var(--b2b-line-strong);
	border-radius: 12px;
	color: var(--b2b-ink-2);
	margin: 16px;
	padding: 32px 16px;
	text-align: center;
}
.b2bp .b2bp-empty-title {
	color: var(--b2b-ink);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
}
.b2bp .b2bp-empty p,
.b2bp .b2bp-error p {
	font-size: 14px;
	margin: 0 0 16px;
}
.b2bp .b2bp-empty > :last-child,
.b2bp .b2bp-error > :last-child {
	margin-bottom: 0;
}
.b2bp .b2bp-loading {
	border-style: solid;
	border-color: var(--b2b-line);
	color: var(--b2b-ink-3);
	text-align: left;
}
.b2bp .b2bp-skel {
	background: var(--b2b-hover);
	border-radius: 6px;
	display: block;
	height: 12px;
	margin: 0 0 12px;
	overflow: hidden;
	position: relative;
}
.b2bp .b2bp-skel:nth-child(2n) { width: 82%; }
.b2bp .b2bp-skel:nth-child(3n) { width: 64%; }
.b2bp .b2bp-skel:last-child { margin-bottom: 0; }
.b2bp .b2bp-error {
	background: var(--b2b-danger-tint);
	border-color: transparent;
	color: var(--b2b-danger);
}

/* 4.12 Image box and fallback */
.b2bp .b2bp-img {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--b2b-surface);
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.b2bp .b2bp-img > img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}
.b2bp .b2bp-img-fallback {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--b2b-subtle);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-ctl);
	color: var(--b2b-line-strong);
	display: flex;
	font-size: 24px;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
	min-height: 48px;
	width: 100%;
}
.b2bp .b2bp-img > .b2bp-img-fallback {
	border: 0;
	border-radius: 0;
	height: 100%;
}
.b2bp img.b2bp-img-broken {
	display: none !important;
}

/* 4.13 Long names and utilities */
.b2bp .b2bp-clamp-2 {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-sr {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.b2bp .b2bp-muted {
	color: var(--b2b-ink-3);
}
.b2bp .b2bp-neg {
	color: var(--b2b-danger);
}

/* 4.14 Generic Bootstrap parts at low specificity (:where), so the page sections' scoped rules
   (.b2bp-pager, .b2bp-prod accordion) still win. Pagination = ghost buttons, the current page an
   outline with a primary tint; accordion = hairline rows with a ring focus; dropdowns = popover surface. */
:where(body.b2bp) .pagination {
	--bs-pagination-border-width: 0;
	gap: 4px;
}
:where(body.b2bp) .pagination .page-link {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--b2b-radius-btn) !important;
	color: var(--b2b-secondary-fg);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	height: 36px;
	justify-content: center;
	min-width: 36px;
	padding: 0 10px;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body.b2bp) .pagination a.page-link:hover {
		background: var(--b2b-secondary);
		color: var(--b2b-secondary-fg);
	}
}
:where(body.b2bp) .pagination .page-item.active .page-link,
:where(body.b2bp) .pagination .page-link[aria-current="page"] {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: var(--b2b-primary-hover);
	font-weight: 600;
}
:where(body.b2bp) .pagination .page-item.disabled .page-link {
	background: transparent;
	color: var(--b2b-ink-3);
	opacity: .6;
}
@media (max-width: 767.98px) {
	:where(body.b2bp) .pagination .page-link {
		height: 44px;
		min-width: 44px;
	}
}
:where(body.b2bp) .accordion {
	--bs-accordion-border-color: var(--b2b-line);
	--bs-accordion-border-radius: 12px;
	--bs-accordion-inner-border-radius: 11px;
	--bs-accordion-btn-focus-box-shadow: var(--b2b-ring);
	--bs-accordion-active-bg: var(--b2b-surface);
	--bs-accordion-active-color: var(--b2b-ink);
	--bs-accordion-btn-color: var(--b2b-ink);
}
:where(body.b2bp) .accordion-button {
	font-size: 14px;
	font-weight: 600;
	min-height: 48px;
}
:where(body.b2bp) .accordion-button::after {
	transition: transform var(--b2b-dur-2) var(--b2b-ease-io);
}
:where(body.b2bp) .accordion-button:focus-visible {
	box-shadow: var(--b2b-ring);
	outline: 2px solid var(--b2b-primary);
	outline-offset: -2px;
}
:where(body.b2bp) .dropdown-menu {
	--bs-dropdown-border-color: var(--b2b-line);
	--bs-dropdown-border-radius: 10px;
	--bs-dropdown-link-hover-bg: var(--b2b-secondary);
	--bs-dropdown-link-active-bg: #eff6ff;
	--bs-dropdown-link-active-color: var(--b2b-primary-hover);
	box-shadow: var(--b2b-shadow-md);
	font-size: 14px;
	padding: 4px;
}
:where(body.b2bp) .dropdown-menu .dropdown-item {
	border-radius: 6px;
	padding: 7px 10px;
}


/* ----- 5. Login ------------------------------------------------------------------------------------- */
/* HEAD layout restored (PLAN-round2 #1): a navy brand band across the top with the light Alpen logo left and
   "Learn more" right; the card is centred and overlaps the band, the Alpen (or business) logo centred in its
   head, "Customer Portal" + one line, floating-label Username / Pin, a large full-width primary "Log in". */

.b2bp main.b2bp-login {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 100vh;
	padding: 0 0 48px;
	position: relative;
	width: 100%;
}
.b2bp .b2bp-login-band {
	align-self: stretch;
	background:
		radial-gradient(52% 110% at 82% -12%, rgba(96, 165, 250, .38) 0%, rgba(96, 165, 250, 0) 62%),
		radial-gradient(36% 70% at 6% 112%, rgba(37, 99, 235, .30) 0%, rgba(37, 99, 235, 0) 70%),
		var(--b2b-brand-grad);
	flex: 0 0 auto;
	height: 320px;
	overflow: hidden;
	position: relative;
}
/* A faint dot grid that fades out towards the card. */
.b2bp .b2bp-login-band::after {
	background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.5px);
	background-size: 22px 22px;
	content: "";
	inset: 0;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	pointer-events: none;
	position: absolute;
}
.b2bp .b2bp-login-bar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	padding: 24px 32px;
	position: relative;
	z-index: 1;
}
.b2bp .b2bp-login-band-logo {
	display: block;
	height: 30px;
	width: auto;
}
.b2bp a.b2bp-login-learn {
	align-items: center;
	border: 1px solid var(--b2b-brand-line);
	border-radius: 999px;
	color: var(--b2b-on-brand);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	text-decoration: none;
	transition: background-color var(--b2b-dur-2) ease, border-color var(--b2b-dur-2) ease;
}
.b2bp a.b2bp-login-learn > span {
	display: inline-block;
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp a.b2bp-login-learn:hover {
		background: rgba(255, 255, 255, .10);
		border-color: rgba(255, 255, 255, .28);
		color: var(--b2b-on-brand);
	}
	.b2bp a.b2bp-login-learn:hover > span {
		transform: translateX(2px);
	}
}
.b2bp a.b2bp-login-learn:focus-visible {
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 2px;
}

.b2bp .card.b2bp-login-card {
	animation: b2bp-login-in var(--b2b-dur-4) var(--b2b-ease-out) 60ms backwards;
	background: var(--b2b-surface);
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-lg);
	margin: -184px 0 0;
	max-width: 440px;
	overflow: hidden;
	position: relative;
	width: calc(100% - 32px);
	z-index: 1;
}
@keyframes b2bp-login-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
.b2bp .b2bp-login-card-head {
	padding: 40px 40px 8px;
	text-align: center;
}
.b2bp .b2bp-login-logo {
	display: inline-block;
	height: 36px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}
.b2bp .b2bp-login-logo.b2bp-login-logo--business {
	height: auto;
	max-height: 72px;
	max-width: 60%;
}
.b2bp .b2bp-login-card-body {
	padding: 20px 40px 32px;
}
.b2bp .b2bp-login-title {
	color: var(--b2b-ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0 0 4px;
	text-align: center;
}
.b2bp .b2bp-login-meta {
	color: var(--b2b-ink-2);
	font-size: 14px;
	margin: 0 0 28px;
	text-align: center;
}
.b2bp .b2bp-login-field {
	margin: 0 0 16px;
}
.b2bp .b2bp-login .form-floating > .form-control {
	border-radius: var(--b2b-radius-btn);
	font-size: 15px;
	height: 56px;
	min-height: 56px;
	padding: 24px 14px 8px;
}
/* Floating labels need an invisible placeholder (4.5 colours placeholders for ordinary fields). */
.b2bp .form-floating > .form-control::placeholder {
	color: transparent;
}
.b2bp .b2bp-login .form-floating > label {
	color: var(--b2b-ink-3);
	font-size: 15px;
	padding: 17px 15px;
}
.b2bp .b2bp-login .form-floating > .form-control:focus ~ label,
.b2bp .b2bp-login .form-floating > .form-control:not(:placeholder-shown) ~ label,
.b2bp .b2bp-login .form-floating > .form-control:-webkit-autofill ~ label {
	color: var(--b2b-ink-2);
	opacity: 1;
	transform: scale(.8) translateY(-10px) translateX(3px);
}
.b2bp .b2bp-login .form-floating > .form-control:focus ~ label {
	color: var(--b2b-primary-hover);
}
.b2bp .b2bp-login .btn.b2bp-login-submit {
	--bs-btn-font-size: 15px;
	--bs-btn-font-weight: 600;
	height: 48px;
	margin-top: 8px;
	width: 100%;
}
/* Log in is an <input> (no children, no ::before), so its 4.6b leading icon (right-to-bracket, white, 14px)
   is a background image placed 8px left of the centred label: the label ("Log in", 15/600) is about 44px,
   so icon + gap + label = 66px; 22px extra left padding moves the label right by half of that. */
.b2bp .b2bp-login input.btn.b2bp-login-submit {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9V320H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32H160V129.9c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416h64c17.7 0 32-14.3 32-32V128c0-17.7-14.3-32-32-32H352c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c53 0 96 43 96 96V384c0 53-43 96-96 96H352c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/svg%3E");
	background-position: left calc(50% - 26px) center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	padding-left: calc(var(--bs-btn-padding-x) + 22px);
}
.b2bp .b2bp-login-error {
	background: var(--b2b-danger-tint);
	border: 1px solid rgba(180, 35, 24, .16);
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-danger);
	font-size: 14px;
	margin: -12px 0 20px;
	padding: 10px 12px;
	text-align: center;
}
.b2bp .b2bp-login-alt {
	border-top: 1px solid var(--b2b-line);
	color: var(--b2b-ink-2);
	font-size: 13px;
	margin: 28px 0 0;
	padding-top: 20px;
	text-align: center;
}
.b2bp .b2bp-login-alt a {
	color: var(--b2b-primary-hover);
	font-weight: 600;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-login-band {
		height: 216px;
	}
	.b2bp .b2bp-login-bar {
		padding: 16px;
	}
	.b2bp .b2bp-login-band-logo {
		height: 26px;
	}
	.b2bp a.b2bp-login-learn {
		min-height: 44px;
	}
	.b2bp .card.b2bp-login-card {
		margin-top: -112px;
	}
	.b2bp .b2bp-login-card-head {
		padding: 28px 20px 4px;
	}
	.b2bp .b2bp-login-card-body {
		padding: 16px 20px 24px;
	}
	.b2bp .b2bp-login-title {
		font-size: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.b2bp .card.b2bp-login-card {
		animation-name: b2bp-fade;
	}
}


/* ----- 6. Dashboard --------------------------------------------------------------------------------- */
/* v2 order: hero (greeting + search) -> figures -> promotions banner -> quick actions. The figures answer the
   page's question (what is open, what do I owe) and stay above the fold at 1440x900; the banner follows at full
   width, uncropped, as the original showed it; quick actions close the page (New order is also in the menu). */

/* Entrance: one staggered rise per block (40ms via --i), opacity only under reduced motion.
   fill-mode backwards releases transform after the run so hover lifts still work. */
@keyframes b2bp-dash-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@keyframes b2bp-dash-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
.b2bp .b2bp-dash-in {
	animation: b2bp-dash-rise var(--b2b-dur-4) var(--b2b-ease-out) backwards;
	animation-delay: calc(var(--i, 0) * 40ms);
}
@media (prefers-reduced-motion: reduce) {
	.b2bp .b2bp-dash-in {
		animation-name: b2bp-dash-fade;
		animation-duration: var(--b2b-dur-2);
	}
}

/* Hero: brand gradient card, two soft radial highlights and concentric rings drawn with gradients. */
.b2bp .b2bp-dash-hero {
	background:
		radial-gradient(circle at 92% -30%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 45%),
		radial-gradient(circle at 70% 140%, rgba(96, 165, 250, .32) 0, rgba(96, 165, 250, 0) 50%),
		var(--b2b-brand-grad);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-md);
	color: var(--b2b-on-brand);
	isolation: isolate;
	margin: 0 0 24px;
	overflow: hidden;
	padding: 32px 32px 28px;
	position: relative;
}
.b2bp .b2bp-dash-hero::before,
.b2bp .b2bp-dash-hero::after {
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
.b2bp .b2bp-dash-hero::before {
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 0 0 40px rgba(255, 255, 255, .035), 0 0 0 80px rgba(255, 255, 255, .025);
	height: 280px;
	right: -60px;
	top: -150px;
	width: 280px;
}
.b2bp .b2bp-dash-hero::after {
	background: radial-gradient(circle, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 70%);
	bottom: -120px;
	height: 240px;
	right: 22%;
	width: 240px;
}
.b2bp .b2bp-dash-hero .b2bp-dash-hero-head {
	margin: 0 0 20px;
}
.b2bp .b2bp-dash-hero .header-title {
	color: var(--b2b-on-brand) !important;
	font-size: 28px;
	letter-spacing: -.01em;
}
.b2bp .b2bp-dash-hero .header-subtitle {
	color: var(--b2b-on-brand-2) !important;
	font-size: 15px;
	margin-top: 6px;
}

/* Search: a white command bar on the brand band. Barcode, field and Search sit inside one white surface, so the
   blue primary Search (markup keeps btn-secondary) reads as blue on white instead of blending into the gradient.
   The catalogue search (.b2bp-inv-search, inventory.jspx) is the same component: the rules below are shared and
   7a v2 only swaps the white ring for a line border on the light page. */
.b2bp .b2bp-dash-search {
	margin: 0;
}
.b2bp .b2bp-dash-search .input-group,
.b2bp .b2bp-inv-search .input-group {
	align-items: center;
	background: #fff;
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-md), 0 0 0 1px rgba(255, 255, 255, .6);
	flex-wrap: nowrap;
	gap: 4px;
	padding: 5px;
	transition: box-shadow var(--b2b-dur-2) ease;
}
.b2bp .b2bp-dash-search .input-group:focus-within {
	box-shadow: var(--b2b-shadow-md), 0 0 0 4px rgba(147, 197, 253, .6);
}
/* !important: Bootstrap's input-group joins (:not(:first-child) / :not(:last-child) chains) out-rank this. */
.b2bp .b2bp-dash-search .input-group > .btn,
.b2bp .b2bp-dash-search .input-group > .form-control,
.b2bp .b2bp-inv-search .input-group > .btn,
.b2bp .b2bp-inv-search .input-group > .form-control {
	border-radius: var(--b2b-radius-btn) !important;
	margin-left: 0 !important;
	min-height: 40px;
}
.b2bp .b2bp-dash-search .input-group > .form-control,
.b2bp .b2bp-inv-search .input-group > .form-control {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--b2b-ink);
	font-size: 15px;
	min-width: 0;
	padding: 0 8px;
}
.b2bp .b2bp-dash-search .input-group > .form-control:focus,
.b2bp .b2bp-inv-search .input-group > .form-control:focus {
	background: transparent;
	box-shadow: var(--b2b-ring);
	position: relative;
	z-index: 3;
}
.b2bp .b2bp-dash-search .input-group > .btn-light,
.b2bp .b2bp-dash-search .input-group > .btn-light:hover,
.b2bp .b2bp-inv-search .input-group > .btn-light,
.b2bp .b2bp-inv-search .input-group > .btn-light:hover {
	background: var(--b2b-secondary);
	border: 0;
	color: var(--b2b-ink-2);
	padding: 0 14px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-dash-search .input-group > .btn-light:hover,
	.b2bp .b2bp-inv-search .input-group > .btn-light:hover {
		background: var(--b2b-secondary-hover);
		color: var(--b2b-ink);
	}
}
.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn,
.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary {
	background: var(--b2b-primary);
	border: 1px solid var(--b2b-primary);
	box-shadow: var(--b2b-shadow-xs);
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	padding: 0 20px;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn,
body.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary,
body.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:hover,
body.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:focus,
body.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:active {
	color: var(--b2b-primary-fg) !important;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn:hover,
	.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:hover {
		background: var(--b2b-primary-hover);
		border-color: var(--b2b-primary-hover);
	}
}
.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn:active,
.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:active {
	background: var(--b2b-primary-active);
	border-color: var(--b2b-primary-active);
	transform: scale(.97);
}
/* White ring on the navy band (the blue system ring would vanish on the gradient). */
.b2bp .b2bp-dash-hero .btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	position: relative;
	z-index: 4;
}
/* Inside the white bar the white ring would vanish: use the primary ring there. */
.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn:focus-visible,
.b2bp .b2bp-inv-search .input-group > .btn:focus-visible {
	outline: 2px solid var(--b2b-primary);
	outline-offset: 2px;
	position: relative;
	z-index: 4;
}

/* Figure cards: accent tint wash, accent border, icon chip, big tabular value. */
.b2bp .b2bp-dash-kpis {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0 0 24px;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi {
	--kpi: var(--b2b-ink-2);
	--kpi-tint: var(--b2b-subtle);
	--kpi-line: var(--b2b-line);
	background: linear-gradient(135deg, var(--kpi-tint) 0%, #fff 65%);
	border: 1px solid var(--kpi-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	gap: 2px;
	padding: 20px;
	position: relative;
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out), box-shadow var(--b2b-dur-2) ease, border-color var(--b2b-dur-2) ease;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi--quotes { --kpi: var(--b2b-quotes); --kpi-tint: #f3eefc; --kpi-line: #ddd0f5; }
.b2bp .b2bp-dash-kpis .b2bp-kpi--orders { --kpi: var(--b2b-orders); --kpi-tint: #ebf2fe; --kpi-line: #c9daf8; }
.b2bp .b2bp-dash-kpis .b2bp-kpi--invoices { --kpi: var(--b2b-invoices); --kpi-tint: #e7f6f3; --kpi-line: #bfe3dc; }
.b2bp .b2bp-dash-kpis .b2bp-kpi--owing { --kpi: var(--b2b-owing); --kpi-tint: #fdf2e6; --kpi-line: #f2d6b6; }
.b2bp .b2bp-dash-kpis .b2bp-kpi-sw {
	display: none;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi-label {
	color: var(--b2b-ink-2);
	font-size: 13px;
	font-weight: 600;
	gap: 10px;
	margin: 0 0 10px;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi-chip {
	align-items: center;
	background: var(--kpi-tint);
	border: 1px solid var(--kpi-line);
	border-radius: 10px;
	color: var(--kpi);
	display: inline-flex;
	flex: 0 0 36px;
	font-size: 15px;
	height: 36px;
	justify-content: center;
	width: 36px;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi-value {
	color: var(--kpi);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.15;
	margin: 0;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi .b2bp-kpi-value.b2bp-zero {
	color: var(--b2b-ink);
}
.b2bp .b2bp-dash-kpis .b2bp-kpi-sub {
	color: var(--b2b-ink-2);
	margin-top: 2px;
}
.b2bp .b2bp-dash-kpis .b2bp-kpi::after {
	color: var(--b2b-ink-3);
	content: "\2192";
	font-size: 16px;
	opacity: 0;
	position: absolute;
	right: 20px;
	top: 26px;
	transform: translateX(-4px);
	transition: opacity var(--b2b-dur-2) ease, transform var(--b2b-dur-2) var(--b2b-ease-out);
}
.b2bp .b2bp-dash-kpis a.b2bp-kpi:hover {
	border-color: var(--kpi-line);
}
.b2bp .b2bp-dash-kpis a.b2bp-kpi:active {
	transform: scale(.985);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-dash-kpis a.b2bp-kpi:hover {
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-2px);
	}
	.b2bp .b2bp-dash-kpis a.b2bp-kpi:hover::after {
		color: var(--kpi);
		opacity: 1;
		transform: none;
	}
}

/* Promotions banner: full image uncropped (as the original), rounded frame, crossfade, pill indicators. */
.b2bp .b2bp-promo {
	margin: 0 0 24px;
}
.b2bp .b2bp-promo .carousel {
	background: var(--b2b-subtle);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-sm);
	overflow: hidden;
	width: 100%;
}
.b2bp .b2bp-promo .carousel-inner {
	border-radius: inherit;
}
.b2bp .b2bp-promo .b2b-carousel-slide-link {
	display: block;
	line-height: 0;
}
.b2bp .b2bp-promo .b2b-carousel-slide-img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}
.b2bp .b2bp-promo .b2bp-img-fallback {
	aspect-ratio: 3 / 1;
	border: 0;
	border-radius: 0;
}
.b2bp .b2bp-promo .carousel-fade .carousel-item {
	transition-duration: .6s;
	transition-timing-function: var(--b2b-ease-io);
}
.b2bp .b2bp-promo .carousel-indicators {
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.b2bp .b2bp-promo .carousel-indicators [data-bs-target] {
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
	height: 6px;
	margin: 0;
	opacity: .6;
	transition: opacity var(--b2b-dur-2) ease;
	width: 8px;
}
.b2bp .b2bp-promo .carousel-indicators .active {
	opacity: 1;
	width: 24px;
}
/* One slide: no indicator to show. */
.b2bp .b2bp-promo .carousel-indicators [data-bs-target]:only-child {
	display: none;
}
.b2bp .b2bp-promo .carousel-control-prev,
.b2bp .b2bp-promo .carousel-control-next {
	align-items: center;
	background: rgba(255, 255, 255, .82);
	border-radius: 50%;
	box-shadow: var(--b2b-shadow-md);
	height: 40px;
	margin: 0 16px;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) scale(.92);
	transition: opacity var(--b2b-dur-2) ease, transform var(--b2b-dur-2) var(--b2b-ease-out), background-color var(--b2b-dur-1) ease;
	width: 40px;
}
.b2bp .b2bp-promo .carousel-control-prev-icon,
.b2bp .b2bp-promo .carousel-control-next-icon {
	filter: invert(1) grayscale(1) brightness(.25);
	height: 16px;
	width: 16px;
}
.b2bp .b2bp-promo .carousel:hover .carousel-control-prev,
.b2bp .b2bp-promo .carousel:hover .carousel-control-next,
.b2bp .b2bp-promo .carousel-control-prev:focus-visible,
.b2bp .b2bp-promo .carousel-control-next:focus-visible {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}
.b2bp .b2bp-promo .carousel-control-prev:hover,
.b2bp .b2bp-promo .carousel-control-next:hover {
	background: #fff;
}
/* Touch screens have no hover: keep the controls visible. */
@media (hover: none) {
	.b2bp .b2bp-promo .carousel-control-prev,
	.b2bp .b2bp-promo .carousel-control-next {
		opacity: .9;
		transform: translateY(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.b2bp .b2bp-promo .carousel-fade .carousel-item {
		transition-duration: .2s;
	}
	.b2bp .b2bp-promo .carousel-control-prev,
	.b2bp .b2bp-promo .carousel-control-next {
		transform: translateY(-50%);
	}
}

/* Quick actions: icon chip, title + sub, CTA on the right. New order carries the primary CTA. */
.b2bp .b2bp-jobs {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 0 0 24px;
}
.b2bp .b2bp-job {
	align-items: center;
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink);
	display: flex;
	gap: 16px;
	min-width: 0;
	padding: 20px;
	text-decoration: none;
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out), box-shadow var(--b2b-dur-2) ease, border-color var(--b2b-dur-2) ease;
}
.b2bp a.b2bp-job:hover {
	border-color: var(--b2b-outline-line);
	color: var(--b2b-ink);
}
.b2bp a.b2bp-job:active {
	transform: scale(.985);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp a.b2bp-job:hover {
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-2px);
	}
}
.b2bp .b2bp-job-icon {
	align-items: center;
	background: var(--b2b-secondary);
	border-radius: 12px;
	color: var(--b2b-ink-2);
	display: inline-flex;
	flex: 0 0 44px;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	width: 44px;
}
.b2bp .b2bp-job--primary .b2bp-job-icon {
	background: var(--b2b-accent-tint);
	color: var(--b2b-primary);
}
.b2bp .b2bp-job-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.b2bp .b2bp-job-title {
	color: var(--b2b-ink);
	font-size: 16px;
	font-weight: 600;
}
.b2bp .b2bp-job-sub {
	color: var(--b2b-ink-2);
	font-size: 13px;
}
.b2bp .b2bp-job-end {
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
}
.b2bp .b2bp-job-count {
	color: var(--b2b-ink);
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
}
.b2bp .b2bp-job-count-label {
	color: var(--b2b-ink-3);
	font-size: 12px;
}
/* Decorative CTA inside the card link (the whole card is the link). */
.b2bp .b2bp-job-cta {
	align-items: center;
	background: var(--b2b-primary);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-primary-fg);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	pointer-events: none;
	transition: background-color var(--b2b-dur-1) ease;
	white-space: nowrap;
}
.b2bp a.b2bp-job:hover .b2bp-job-cta {
	background: var(--b2b-primary-hover);
}

/* 2 x 2 until 4 cards fit in one row (auto-fit left a 3 + 1 orphan between 1024 and 1279). */
@media (max-width: 1279.98px) {
	.b2bp .b2bp-dash-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-dash-hero {
		margin-bottom: 16px;
		padding: 20px 16px 16px;
	}
	.b2bp .b2bp-dash-hero .b2bp-dash-hero-head {
		margin-bottom: 16px;
	}
	.b2bp .b2bp-dash-hero .header-title {
		font-size: 22px;
	}
	.b2bp .b2bp-dash-hero .header-subtitle {
		font-size: 14px;
	}
	.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn,
	.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary {
		padding: 0 14px;
	}
	.b2bp .b2bp-dash-search .input-group > .btn-light,
	.b2bp .b2bp-inv-search .input-group > .btn-light {
		min-width: 44px;
		padding: 0 12px;
	}
	.b2bp .b2bp-dash-search .input-group > .btn,
	.b2bp .b2bp-dash-search .input-group > .form-control,
	.b2bp .b2bp-inv-search .input-group > .btn,
	.b2bp .b2bp-inv-search .input-group > .form-control {
		min-height: 44px;
	}
	.b2bp .b2bp-dash-kpis {
		gap: 8px;
		margin-bottom: 16px;
	}
	.b2bp .b2bp-dash-kpis .b2bp-kpi {
		padding: 14px;
	}
	.b2bp .b2bp-dash-kpis .b2bp-kpi-label {
		gap: 8px;
		margin-bottom: 8px;
	}
	.b2bp .b2bp-dash-kpis .b2bp-kpi-chip {
		flex-basis: 32px;
		font-size: 14px;
		height: 32px;
		width: 32px;
	}
	.b2bp .b2bp-dash-kpis .b2bp-kpi-value {
		font-size: 22px;
	}
	.b2bp .b2bp-dash-kpis .b2bp-kpi::after {
		display: none;
	}
	.b2bp .b2bp-promo,
	.b2bp .b2bp-jobs {
		margin-bottom: 16px;
	}
	.b2bp .b2bp-jobs {
		gap: 8px;
		grid-template-columns: 1fr;
	}
	.b2bp .b2bp-job {
		gap: 12px;
		padding: 16px;
	}
	.b2bp .b2bp-job-icon {
		flex-basis: 40px;
		height: 40px;
		width: 40px;
	}
	.b2bp .b2bp-job-cta {
		height: 44px;
		padding: 0 14px;
	}
	.b2bp .b2bp-promo .carousel-control-prev,
	.b2bp .b2bp-promo .carousel-control-next {
		height: 36px;
		margin: 0 8px;
		width: 36px;
	}
}


/* ----- 7. Catalogue (inventory, product, cart, compare) --------------------------------------------- */
/* Reserved for group 2. */


/* ----- 8. Account (quotes, orders, invoices, Order List, statement) -------------------------------- */
/* Reserved for group 3. */


/* ===== 7b. Cart, compare ===== */

/* Cart: lines 8/12 + sticky summary 4/12 from 1200, stacked below. */
.b2bp .b2bp-cart {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}
.b2bp .b2bp-cart > .b2bp-panel,
.b2bp .b2bp-cart-side > .b2bp-panel {
	margin-bottom: 0;
}
.b2bp .b2bp-cart-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
@media (min-width: 1200px) {
	.b2bp .b2bp-cart {
		align-items: start;
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}
}
/* Sticky only where the whole column fits (viewport 900px+ tall); no inner scroll region. */
@media (min-width: 1200px) and (min-height: 900px) {
	.b2bp .b2bp-cart-side {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--b2b-topbar) + 16px);
	}
}
/* Empty cart: the summary column stays in the DOM (JS reads it) but is not shown. */
.b2bp .b2bp-cart.b2bp-cart--empty {
	grid-template-columns: minmax(0, 1fr);
}
.b2bp .b2bp-cart.b2bp-cart--empty .b2bp-cart-side {
	display: none;
}

/* Credit hold: warning banner, no shadow, no side stripe, no icon disc. */
.b2bp .b2b-credit-banner.b2bp-cart-banner {
	align-items: flex-start;
	background: var(--b2b-warning-tint);
	border: 1px solid rgba(138, 83, 0, .28);
	border-radius: var(--b2b-radius);
	box-shadow: none;
	color: var(--b2b-warning);
	display: flex;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
}
.b2bp .b2bp-cart-banner .b2b-portal-alert-icon {
	background: none;
	border-radius: 0;
	font-size: 16px;
	height: auto;
	margin: 1px 0 0;
	width: auto;
}
.b2bp .b2bp-cart-banner .b2b-portal-alert-title {
	color: var(--b2b-warning);
	font-size: 14px;
	margin: 0 0 2px;
}
.b2bp .b2bp-cart-banner .b2b-portal-alert-text {
	color: var(--b2b-warning);
	font-size: 14px;
}

/* Cart lines: thumb · name + code + pills · unit price · stepper · remove. Laid out by panel width. */
.b2bp .b2bp-cart-lines {
	container-type: inline-size;
}
.b2bp .b2bp-cart-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.b2bp .b2bp-cart-line.b2b-line-item-card {
	align-items: center;
	border: 0;
	border-bottom: 1px solid var(--b2b-line);
	border-radius: 0;
	box-shadow: none;
	display: grid;
	gap: 8px 16px;
	grid-template-areas: "thumb info price qty remove";
	grid-template-columns: 64px minmax(0, 1fr) minmax(112px, auto) auto auto;
	overflow: visible;
	padding: 12px 16px;
	transition: none;
}
.b2bp .b2bp-cart-line.b2b-line-item-card:hover {
	box-shadow: none;
}
.b2bp .b2bp-cart-line:last-child {
	border-bottom: 0;
}
.b2bp .b2bp-cart-thumb.b2b-line-item-thumb {
	aspect-ratio: 1 / 1;
	background: none;
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-ctl);
	grid-area: thumb;
	max-height: none;
	overflow: hidden;
	width: 64px;
}
.b2bp .b2bp-cart-thumb .b2bp-img {
	height: 100%;
}
.b2bp .b2bp-cart-info {
	grid-area: info;
	min-width: 0;
}
.b2bp .b2bp-cart-name {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.b2bp .b2bp-cart-name:hover {
	color: var(--b2b-accent);
	text-decoration: underline;
}
.b2bp .b2bp-cart-sub {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 4px;
	min-width: 0;
}
.b2bp .b2bp-cart-code {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	min-width: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-cart-sub .b2b-stock-badge.b2bp-pill {
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0;
	min-width: 0;
	padding: 0 8px;
}

/* Unit price: the b2bBuildCartPriceHtml output, restyled (values and text untouched). */
.b2bp .b2bp-cart-price {
	grid-area: price;
	min-width: 0;
	text-align: right;
}
.b2bp .b2bp-cart-price h4 {
	color: var(--b2b-ink);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 !important;
	white-space: nowrap;
}
.b2bp .b2bp-cart-price h4 .small {
	color: var(--b2b-ink-3) !important;
	font-size: 12px;
	font-weight: 400;
}
.b2bp .b2bp-cart-price h4.b2b-price-promo {
	color: var(--b2b-success);
}
.b2bp .b2bp-cart-price h4.b2bp-neg {
	color: var(--b2b-danger);
}
.b2bp .b2bp-cart-price .b2b-cart-price-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0 !important;
}
.b2bp .b2bp-cart-price .b2b-promo-badge {
	background: var(--b2b-warning-tint);
	border: 0;
	border-radius: 999px;
	color: var(--b2b-warning);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 2px 8px;
	text-align: left;
	white-space: normal;
}
.b2bp .b2bp-cart-price .b2b-promo-badge > .fa-tag {
	color: var(--b2b-warning);
}
.b2bp .b2bp-cart-price .b2b-price-was {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}
.b2bp .b2bp-cart-qty {
	grid-area: qty;
}
.b2bp .b2bp-cart-remove {
	grid-area: remove;
}
.b2bp .b2bp-cart-remove .btn {
	align-items: center;
	display: inline-flex;
	height: var(--b2b-ctl);
	justify-content: center;
	padding: 0;
	width: var(--b2b-ctl);
}
@container (max-width: 639.98px) {
	.b2bp .b2bp-cart-line.b2b-line-item-card {
		align-items: start;
		grid-template-areas:
			"thumb info info"
			"thumb price price"
			"qty qty remove";
		grid-template-columns: 56px minmax(0, 1fr) auto;
	}
	.b2bp .b2bp-cart-thumb.b2b-line-item-thumb {
		width: 56px;
	}
	.b2bp .b2bp-cart-price {
		text-align: left;
	}
	.b2bp .b2bp-cart-price .b2b-cart-price-row {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	.b2bp .b2bp-cart-price .b2b-cart-price-row .b2b-promo-badge {
		order: 3;
	}
	.b2bp .b2bp-cart-remove {
		justify-self: end;
	}
}

/* Summary panel */
.b2bp .b2bp-cart-totals {
	margin: 0;
}
.b2bp .b2bp-cart-total-row {
	align-items: baseline;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 3px 0;
}
.b2bp .b2bp-cart-total-row dt {
	color: var(--b2b-ink-2);
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}
.b2bp .b2bp-cart-total-row dt .b2bp-muted {
	font-size: 12px;
}
.b2bp .b2bp-cart-total-row dd {
	color: var(--b2b-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}
.b2bp .b2bp-cart-total-row.b2bp-cart-grand {
	border-top: 1px solid var(--b2b-line);
	margin-top: 6px;
	padding-top: 10px;
}
.b2bp .b2bp-cart-grand dt {
	color: var(--b2b-ink);
	font-size: 15px;
	font-weight: 600;
}
.b2bp .b2bp-cart-grand dd {
	font-size: 18px;
	font-weight: 600;
}
.b2bp .b2bp-cart-field {
	margin-top: 12px;
}
.b2bp .b2bp-cart-field > .b2bp-label {
	display: block;
	margin-bottom: 4px;
}
.b2bp .b2bp-cart-field textarea.form-control {
	min-height: 56px;
	resize: vertical;
}
.b2bp .b2bp-cart-acks {
	border: 0;
	margin: 12px 0 0;
	min-width: 0;
	padding: 0;
}
.b2bp .b2bp-cart-acks > legend {
	float: none;
	margin-bottom: 8px;
	padding: 0;
	width: auto;
}
.b2bp .b2bp-cart-acks .b2bCartAckRow {
	gap: 10px;
	margin: 0 0 8px;
	min-height: 24px;
}
.b2bp .b2bp-cart-acks .b2bCartAckRow:last-child {
	margin-bottom: 0;
}
.b2bp .b2bp-cart-acks .b2bCartAckRow .form-check-input {
	border-color: var(--b2b-line-strong);
	height: 24px;
	margin-top: 0;
	min-height: 24px;
	min-width: 24px;
	width: 24px;
}
.b2bp .b2bp-cart-acks .b2bCartAckRow .form-check-input:checked {
	background-color: var(--b2b-accent);
	border-color: var(--b2b-accent);
}
.b2bp .b2bp-cart-acks .form-check-label {
	color: var(--b2b-ink-2);
	cursor: pointer;
	font-size: 13px;
	line-height: 1.45;
	padding-top: 2px;
}
.b2bp .b2bp-cart-acks .form-check-label a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.b2bp .b2bp-cart-actions {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.b2bp .b2bp-cart-actions > .btn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	min-width: 0;
	white-space: nowrap;
}
.b2bp .b2bp-cart-actions > .btn-ghost {
	border-color: var(--b2b-line-strong);
}
/* Header link buttons (original btn-link, no fill): keep the 24/44px target. */
.b2bp .b2bp-cart-head-actions > .btn-link,
.b2bp .b2bp-compare-head-actions > .btn-link {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	min-height: var(--b2b-ctl);
}
.b2bp .b2bp-cart-order.btn-group {
	display: flex;
	grid-column: 1 / -1;
	position: relative;
	width: 100%;
}
.b2bp .b2bp-cart-order > #b2bOrderMenuBtn {
	border-radius: var(--b2b-radius-ctl);
	flex: 1 1 auto;
	width: 100%;
}
.b2bp .b2bp-cart-order #orderMenu {
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-ctl);
	box-shadow: var(--b2b-float);
	margin-bottom: 4px;
	padding: 4px;
}
.b2bp .b2bp-cart-order #orderMenu a {
	border-radius: 4px;
	color: var(--b2b-ink);
	font-size: 14px;
	min-height: 36px;
	padding: 8px 12px;
}
.b2bp .b2bp-cart-order #orderMenu a:hover {
	background: var(--b2b-subtle);
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-cart-order #orderMenu a {
		min-height: 44px;
		padding: 12px;
	}
}

/* Supplier details: a small collapsed panel under the summary. */
.b2bp .b2bp-cart-supplier > summary {
	align-items: center;
	color: var(--b2b-ink);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 6px;
	list-style: none;
	min-height: 44px;
	padding: 10px 16px;
}
.b2bp .b2bp-cart-supplier > summary::-webkit-details-marker {
	display: none;
}
.b2bp .b2bp-cart-supplier > summary::before {
	border-bottom: 2px solid var(--b2b-ink-3);
	border-right: 2px solid var(--b2b-ink-3);
	content: "";
	flex: 0 0 auto;
	height: 7px;
	margin-right: 4px;
	transform: rotate(-45deg);
	transition: transform .15s ease;
	width: 7px;
}
.b2bp .b2bp-cart-supplier[open] > summary::before {
	transform: rotate(45deg);
}
.b2bp .b2bp-cart-supplier > summary .b2bp-muted {
	font-weight: 400;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.b2bp .b2bp-cart-supplier-body {
	border-top: 1px solid var(--b2b-line);
	padding: 12px 16px 16px;
}
.b2bp .b2bp-cart-supplier-body p {
	color: var(--b2b-ink-2);
	font-size: 13px;
	margin: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-cart-supplier-body .b2bp-cart-supplier-name {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

/* Compare: products as columns, attributes as rows with hairlines; sideways scroll only when needed. */
.b2bp .b2bp-compare-panel {
	overflow: hidden;
}
.b2bp .b2bp-compare-scroll {
	overflow-x: auto;
}
.b2bp .b2bp-compare-scroll:focus-visible {
	outline-offset: -2px;
}
.b2bp table.b2bp-compare {
	border-collapse: separate;
	border-spacing: 0;
	color: var(--b2b-ink);
	font-size: 13px;
	margin: 0;
	max-width: calc(140px + var(--b2bp-compare-cols, 4) * 340px);
	min-width: calc(140px + var(--b2bp-compare-cols, 4) * 200px);
	table-layout: fixed;
	width: 100%;
}
.b2bp table.b2bp-compare th,
.b2bp table.b2bp-compare td {
	background: var(--b2b-surface);
	border-bottom: 1px solid var(--b2b-line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.b2bp table.b2bp-compare tbody tr:last-child > * {
	border-bottom: 0;
}
.b2bp table.b2bp-compare .b2bp-compare-rowhead {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 600;
	left: 0;
	position: -webkit-sticky;
	position: sticky;
	width: 140px;
	z-index: 1;
}
.b2bp table.b2bp-compare thead .b2bp-compare-product {
	font-weight: 400;
}
.b2bp .b2bp-compare-thumb {
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-ctl);
	display: block;
	margin: 0 0 12px;
	max-width: 144px;
	overflow: hidden;
}
.b2bp .b2bp-compare-thumb .b2bp-img > img.product-image {
	height: 100%;
	padding: 8px;
	width: 100%;
}
.b2bp .b2bp-compare-name {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.b2bp .b2bp-compare-name:hover {
	color: var(--b2b-accent);
	text-decoration: underline;
}
.b2bp .b2bp-compare-code {
	color: var(--b2b-ink-3);
	display: block;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	margin-top: 4px;
	overflow-wrap: anywhere;
}
.b2bp table.b2bp-compare .b2bp-compare-price {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}
.b2bp table.b2bp-compare .b2bp-compare-price.b2bp-neg {
	color: var(--b2b-danger);
}
.b2bp table.b2bp-compare .b2bp-pill {
	gap: 4px;
}
.b2bp table.b2bp-compare .product-desc-scroll {
	max-height: 160px;
	overflow-y: auto;
	color: var(--b2b-ink-2);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	white-space: pre-line;
}
.b2bp table.b2bp-compare td {
	overflow-wrap: anywhere;
}
.b2bp .b2bp-compare-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 200px;
}
.b2bp .b2bp-compare-actions > .btn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	min-height: 32px;
	white-space: nowrap;
}
@media (max-width: 767.98px) {
	.b2bp table.b2bp-compare {
		min-width: calc(104px + var(--b2bp-compare-cols, 4) * 184px);
	}
	.b2bp table.b2bp-compare th,
	.b2bp table.b2bp-compare td {
		padding: 12px;
	}
	.b2bp table.b2bp-compare .b2bp-compare-rowhead {
		width: 104px;
	}
	.b2bp .b2bp-compare-actions > .btn {
		min-height: 44px;
	}
}

/* ----- 7b v2 (round 2): cart and compare polish on the v2 system. Overrides the round-1 rules above. ----- */

/* Cart panels: v2 card surface. */
.b2bp .b2bp-cart > .b2bp-panel,
.b2bp .b2bp-cart-side > .b2bp-panel {
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-sm);
}
.b2bp .b2bp-cart-lines {
	overflow: hidden;
}
@media (min-width: 1200px) {
	.b2bp .b2bp-cart {
		gap: 24px;
	}
}

/* Lines: hover tint, thumb on a soft stage, compact stepper, quiet remove. */
.b2bp .b2bp-cart-line.b2b-line-item-card {
	padding: 16px 20px;
	transition: background-color var(--b2b-dur-1) ease;
}
.b2bp .b2bp-cart-line.b2b-line-item-card:hover {
	background: #f8fafc;
}
.b2bp .b2bp-cart-thumb.b2b-line-item-thumb {
	background: #f8fafc;
	border-radius: 10px;
}
.b2bp .b2bp-cart-name {
	font-weight: 600;
}
.b2bp .b2bp-cart-price h4 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.b2bp .b2bp-cart-qty .b2bp-qty {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-outline-line);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	overflow: hidden;
}
.b2bp .b2bp-cart-qty .b2bp-qty > .btn,
.b2bp .b2bp-cart-qty .b2bp-qty > .btn:hover,
.b2bp .b2bp-cart-qty .b2bp-qty > .btn:active {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--b2b-ink-2);
}
.b2bp .b2bp-cart-qty .b2bp-qty > .btn:hover {
	background: var(--b2b-secondary);
	color: var(--b2b-ink);
}
.b2bp .b2bp-cart-qty .b2bp-qty > input {
	border: 0;
	border-left: 1px solid var(--b2b-line);
	border-right: 1px solid var(--b2b-line);
}
.b2bp .b2bp-cart-qty .b2bp-qty > input:focus-visible {
	box-shadow: var(--b2b-ring);
	outline: 0;
}
/* Remove: destructive ghost icon (markup keeps btn-danger). */
body.b2bp .b2bp-cart-remove .btn.btn-danger,
body.b2bp .b2bp-compare-actions .btn.btn-danger {
	background: transparent;
	border: 1px solid transparent;
	box-shadow: none;
	color: var(--b2b-ink-3) !important;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
}
body.b2bp .b2bp-cart-remove .btn.btn-danger:hover,
body.b2bp .b2bp-cart-remove .btn.btn-danger:focus-visible {
	background: var(--b2b-danger-tint);
	border-color: #f6c9c5;
	color: var(--b2b-danger) !important;
}
body.b2bp .b2bp-compare-actions .btn.btn-danger {
	border-color: #f1c4bf;
	color: var(--b2b-danger) !important;
}
body.b2bp .b2bp-compare-actions .btn.btn-danger:hover {
	background: var(--b2b-danger-tint);
	color: var(--b2b-danger) !important;
}
/* Compare Added in cart: the catalogue's selected look (primary tint from 4.6, no shadow, primary text);
   compare.js already renders its own check / cart-plus icon, so no ::before here. */
body.b2bp .b2bp-compare-actions .btn.btn-cart-success,
body.b2bp .b2bp-compare-actions .btn.btn-cart-success:hover {
	box-shadow: none;
	color: var(--b2b-primary-hover) !important;
}
body.b2bp .b2bp-compare-actions .btn.btn-primary,
body.b2bp .b2bp-compare-actions .btn.btn-primary:hover {
	color: var(--b2b-primary-fg) !important;
}
body.b2bp .b2bp-cart-remove .btn.btn-danger:active,
body.b2bp .b2bp-compare-actions .btn.btn-danger:active {
	transform: scale(.97);
}

/* Summary: v2 card, larger grand total, big primary Order (markup keeps btn-teal). */
.b2bp .b2bp-cart-summary .b2bp-panel-body {
	padding: 20px;
}
.b2bp .b2bp-cart-total-row.b2bp-cart-grand {
	background: #f8fafc;
	border: 1px solid var(--b2b-line);
	border-radius: 10px;
	margin-top: 8px;
	padding: 12px 14px;
}
.b2bp .b2bp-cart-grand dd {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
}
.b2bp .b2bp-cart-acks {
	background: #f8fafc;
	border: 1px solid var(--b2b-line);
	border-radius: 10px;
	padding: 12px 14px;
}
.b2bp .b2bp-cart-actions {
	background: var(--b2b-surface);
	padding: 16px 20px 20px;
}
body.b2bp .b2bp-cart-order > .btn#b2bOrderMenuBtn {
	background: var(--b2b-primary);
	border: 1px solid var(--b2b-primary);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-sm);
	align-items: center;
	color: var(--b2b-primary-fg) !important;
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	min-height: 48px;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .b2bp-cart-order > .btn#b2bOrderMenuBtn:hover {
	background: var(--b2b-primary-hover);
	border-color: var(--b2b-primary-hover);
	color: var(--b2b-primary-fg) !important;
}
body.b2bp .b2bp-cart-order > .btn#b2bOrderMenuBtn:active {
	background: var(--b2b-primary-active);
	transform: scale(.97);
}
/* Disabled until the statements are accepted: muted, not a faded primary. */
body.b2bp .b2bp-cart-order > .btn#b2bOrderMenuBtn:disabled {
	background: var(--b2b-secondary);
	border-color: var(--b2b-outline-line);
	box-shadow: none;
	color: var(--b2b-ink-3) !important;
	opacity: 1;
}
.b2bp .b2bp-cart-order #orderMenu {
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-lg);
}

/* Empty cart / compare: icon disc above the title, solid card instead of the dashed box. */
.b2bp #cartItemsContainer > .b2bp-empty,
.b2bp #compareItemsContainer > .b2bp-empty {
	border: 0;
	margin: 0;
	padding: 48px 24px;
}
.b2bp #cartItemsContainer > .b2bp-empty::before,
.b2bp #compareItemsContainer > .b2bp-empty::before {
	align-items: center;
	background: linear-gradient(135deg, var(--b2b-accent-tint), #fff);
	border: 1px solid var(--b2b-accent-line);
	border-radius: 50%;
	box-shadow: 0 0 0 8px rgba(238, 243, 252, .6);
	color: var(--b2b-primary);
	content: "\f07a";
	display: flex;
	font-family: "Font Awesome 6 Free";
	font-size: 24px;
	font-weight: 900;
	height: 64px;
	justify-content: center;
	margin: 0 auto 20px;
	width: 64px;
}
.b2bp #compareItemsContainer > .b2bp-empty::before {
	content: "\f24e";
}
.b2bp #cartItemsContainer > .b2bp-empty .b2bp-empty-title,
.b2bp #compareItemsContainer > .b2bp-empty .b2bp-empty-title {
	font-size: 17px;
}
.b2bp #cartItemsContainer > .b2bp-empty .btn,
.b2bp #compareItemsContainer > .b2bp-empty .btn {
	min-height: 44px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Compare: v2 card, sticky first column with an edge shadow, header row on a muted band. */
.b2bp .b2bp-compare-panel {
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-sm);
}
.b2bp table.b2bp-compare thead th,
.b2bp table.b2bp-compare thead td {
	background: #f8fafc;
}
.b2bp table.b2bp-compare .b2bp-compare-rowhead {
	background: #f8fafc;
	box-shadow: inset -1px 0 0 var(--b2b-line), 6px 0 8px -6px rgba(15, 23, 42, .12);
	color: var(--b2b-ink-2);
	letter-spacing: .01em;
}
.b2bp table.b2bp-compare tbody tr:hover > td {
	background: #fbfcfd;
}
.b2bp .b2bp-compare-thumb {
	background: var(--b2b-surface);
	border-radius: 10px;
}
.b2bp table.b2bp-compare .b2bp-compare-price {
	font-size: 16px;
	font-weight: 700;
}


/* ===== 7a. Catalogue: inventory, product ===== */

/* Inventory head: title, result count in the meta line, search, toolbar. */
.b2bp .b2bp-inv-head {
	margin-bottom: 16px;
}
.b2bp .b2bp-inv-meta {
	display: flex;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
	gap: 4px 16px;
	min-height: 21px;
}
.b2bp .b2bp-inv-meta > #resultCount:empty {
	display: none;
}
.b2bp .b2bp-inv-search {
	margin: 0 0 12px;
}
.b2bp .b2bp-inv-toolbar {
	align-items: center;
	gap: 8px;
}
.b2bp .b2bp-inv-tool {
	display: flex;
}
/* Browse mode hides Filters; the slot no longer needs to hold space. */
.b2bp #b2bFilterBtnWrap.b2b-filter-placeholder-hidden {
	display: none;
}
.b2bp .b2bp-inv-toolbar .btn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	min-height: var(--b2b-ctl);
	white-space: nowrap;
}
/* Filters keeps btn-link's transparent fill; only a border frames it (text colour from .header .text-white). */
.b2bp #filterSortBtn {
	--bs-btn-border-color: var(--b2b-line-strong);
	--bs-btn-hover-border-color: var(--b2b-line-strong);
	--bs-btn-active-border-color: var(--b2b-line-strong);
	padding-left: 12px;
	padding-right: 12px;
	text-decoration: none;
}
.b2bp .b2bp-inv-toolbar .fa {
	font-size: 13px;
}
/* Tile / List keep btn-link's transparent fill in every state; selection is text + 1px inset line. */
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:hover,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:focus,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:active {
	background: transparent;
	color: var(--b2b-ink-3);
	min-height: 0;
	text-decoration: none;
}
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:hover {
	color: var(--b2b-ink);
}
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link[aria-pressed="true"] {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--b2b-line-strong);
	color: var(--b2b-ink);
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-inv-toolbar .b2bp-toolbar-end {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/* Filter sheet (#offcanvasExample): labels above controls, Clear / Apply footer. */
.b2bp .b2bp-sheet {
	--bs-offcanvas-width: 360px;
	max-width: 100vw;
}
.b2bp .b2bp-sheet .offcanvas-header {
	border-bottom: 1px solid var(--b2b-line);
	padding: 16px 20px;
}
.b2bp .b2bp-sheet .offcanvas-title {
	color: var(--b2b-ink);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}
.b2bp .b2bp-sheet .offcanvas-body {
	padding: 20px;
}
.b2bp .b2bp-sheet-field {
	border: 0;
	margin: 0 0 20px;
	min-width: 0;
	padding: 0;
}
.b2bp .b2bp-sheet-field > legend {
	float: none;
	margin: 0 0 4px;
	padding: 0;
	width: auto;
}
.b2bp .b2bp-sheet-foot {
	border-top: 1px solid var(--b2b-line);
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 12px 20px;
}
.b2bp .b2bp-sheet-foot > .btn {
	min-height: var(--b2b-ctl);
}

/* Category browse (#categoryBrowsePanel): compact cards; the open button and the star are siblings. */
.b2bp .b2bp-cat-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.b2bp .b2bp-cat-grid > .b2b-fav-divider {
	grid-column: 1 / -1;
	margin: 0;
}
.b2bp .b2bp-cat {
	min-width: 0;
}
.b2bp .b2bp-cat-card {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius);
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: border-color .15s;
}
.b2bp .b2bp-cat-card:hover {
	border-color: var(--b2b-accent-line);
}
.b2bp .b2bp-cat-open {
	background: transparent;
	border: 0;
	color: var(--b2b-ink);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 10px;
	text-align: left;
	width: 100%;
}
.b2bp .b2bp-cat-open:focus-visible {
	border-radius: var(--b2b-radius);
	outline: 2px solid var(--b2b-accent);
	outline-offset: -2px;
}
.b2bp .b2bp-cat-thumb {
	align-items: center;
	aspect-ratio: 16 / 10;
	background: var(--b2b-subtle);
	border-radius: var(--b2b-radius-ctl);
	display: flex;
	flex: none;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}
.b2bp .b2bp-cat-thumb > img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}
.b2bp .b2bp-cat-initial {
	color: var(--b2b-ink-3);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}
.b2bp .b2bp-cat-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	min-height: 2.6em;
}
/* List layout: one line per category, thumb on the left. */
.b2bp .b2b-cat-layout-list .b2bp-cat-grid {
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.b2bp .b2b-cat-layout-list .b2bp-cat-open {
	align-items: center;
	flex-direction: row;
	gap: 12px;
	padding: 8px 48px 8px 8px;
}
.b2bp .b2b-cat-layout-list .b2bp-cat-thumb {
	aspect-ratio: 1 / 1;
	width: 48px;
}
.b2bp .b2b-cat-layout-list .b2bp-cat-initial {
	font-size: 18px;
}
.b2bp .b2b-cat-layout-list .b2bp-cat-name {
	min-height: 0;
}
.b2bp .b2b-cat-layout-list .b2bp-cat-card > .b2b-fav-star {
	top: calc(50% - 15px);
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-cat-grid {
		gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	.b2bp .b2b-cat-layout-list .b2bp-cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Product list rows: thumb · name + code + stock · price · star + Add. */
.b2bp .b2bp-plist {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius);
}
.b2bp .b2bp-prow {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 56px minmax(0, 1fr) auto auto;
	padding: 12px 16px;
}
.b2bp .b2bp-prow + .b2bp-prow {
	border-top: 1px solid var(--b2b-line);
}
.b2bp .b2bp-prow:hover {
	background: var(--b2b-subtle);
}
.b2bp .b2bp-prow-thumb,
.b2bp .b2bp-ptile-img {
	text-decoration: none;
}
.b2bp .b2bp-prow-thumb {
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-ctl);
	height: 56px;
	width: 56px;
}
.b2bp .b2bp-prow-thumb .b2bp-img-fallback,
.b2bp .b2bp-ptile-img .b2bp-img-fallback {
	font-size: 18px;
	min-height: 0;
}
.b2bp .b2bp-prow-main {
	min-width: 0;
}
.b2bp .b2bp-prow-name,
.b2bp .b2bp-ptile-name {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.b2bp .b2bp-prow-name:hover,
.b2bp .b2bp-ptile-name:hover {
	color: var(--b2b-accent);
	text-decoration: underline;
}
.b2bp .b2bp-prow-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 4px;
}
.b2bp .b2bp-prow-code,
.b2bp .b2bp-ptile-code {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prow-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.b2bp .b2bp-price {
	color: var(--b2b-ink);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}
.b2bp .b2bp-price-meta {
	color: var(--b2b-ink-3);
	font-size: 12px;
	white-space: nowrap;
}
.b2bp .b2bp-prow-actions {
	align-items: center;
	display: flex;
	gap: 8px;
}
.b2bp .b2bp-prow-actions > .b2b-fav-star-inline {
	margin-left: 0;
}
.b2bp .b2bp-add {
	min-height: 32px;
	min-width: 112px;
	white-space: nowrap;
}
.b2bp .b2bp-plist > .b2bp-empty,
.b2bp .b2bp-ptiles > .b2bp-empty {
	grid-column: 1 / -1;
}
.b2bp .b2bp-ptiles > .b2bp-empty {
	background: var(--b2b-surface);
	margin: 0;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-prow {
		gap: 8px 12px;
		grid-template-areas: "thumb main main" "thumb price actions";
		grid-template-columns: 56px minmax(0, 1fr) auto;
		padding: 12px;
	}
	.b2bp .b2bp-prow-thumb { grid-area: thumb; align-self: start; }
	.b2bp .b2bp-prow-main { grid-area: main; }
	.b2bp .b2bp-prow-price { grid-area: price; align-items: flex-start; text-align: left; }
	.b2bp .b2bp-prow-actions { grid-area: actions; }
	.b2bp .b2bp-add {
		min-height: 44px;
	}
}

/* Product tiles: 2 to 5 columns. */
.b2bp .b2bp-ptiles {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.b2bp .b2bp-ptile {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition: border-color .15s;
}
.b2bp .b2bp-ptile:hover {
	border-color: var(--b2b-accent-line);
}
.b2bp .b2bp-ptile-img {
	border-bottom: 1px solid var(--b2b-line);
	padding: 12px;
}
.b2bp .b2bp-ptile-img > .b2bp-img-fallback {
	border-radius: var(--b2b-radius-ctl);
}
.b2bp .b2bp-ptile-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
}
.b2bp .b2bp-ptile-name {
	min-height: 2.6em;
}
.b2bp .b2bp-ptile-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
}
.b2bp .b2bp-ptile-price {
	display: flex;
	flex-direction: column;
}
.b2bp .b2bp-ptile .b2bp-add {
	margin-top: 8px;
	width: 100%;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-ptiles {
		gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	.b2bp .b2bp-ptile-img {
		padding: 8px;
	}
	.b2bp .b2bp-ptile-body {
		padding: 10px;
	}
}

/* Pagination: ghost page buttons, the current page outlined. */
.b2bp .b2bp-pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin: 0;
}
/* Page links keep the theme's pagination fills (white, blue active, grey disabled); only shape and size change. */
.b2bp .b2bp-pager .page-item .page-link {
	align-items: center;
	border-radius: var(--b2b-radius-ctl);
	color: var(--b2b-ink-2);
	display: inline-flex;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	gap: 6px;
	height: 36px;
	justify-content: center;
	margin: 0;
	min-width: 36px;
	padding: 0 10px;
	text-decoration: none;
}
.b2bp .b2bp-pager .page-item .page-link .fa {
	font-size: 12px;
}
.b2bp .b2bp-pager .page-item a.page-link:hover {
	color: var(--b2b-ink);
}
.b2bp .b2bp-pager .page-item a.page-link:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--b2b-accent);
	outline-offset: 1px;
}
.b2bp .b2bp-pager .page-item.active .page-link {
	color: var(--b2b-on-fill-strong);
	font-weight: 600;
}
.b2bp .b2bp-pager .page-item.disabled .page-link {
	color: var(--b2b-ink-3);
	opacity: .6;
}
.b2bp .b2bp-pager .b2bp-pager-gap .page-link {
	min-width: 24px;
	opacity: 1;
	padding: 0 4px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-pager .page-item .page-link {
		height: 44px;
		min-width: 44px;
	}
	.b2bp .b2bp-pager .b2bp-pager-text {
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/* Product page: image panel 5/12, info column 7/12; stacks below 992 (Bootstrap col-lg). */
.b2bp .b2bp-prod-head {
	align-items: center;
	margin-bottom: 16px;
}
.b2bp .b2bp-prod-eyebrow {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}
.b2bp #goToCompareBtn {
	--bs-btn-padding-y: 0;
	align-items: center;
	gap: 8px;
	min-height: var(--b2b-ctl);
	text-decoration: none;
}
.b2bp #goToCompareBtn,
.b2bp #goToCompareBtn[style*="inline-block"] {
	display: inline-flex !important;
}
.b2bp .b2bp-prod-img {
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius);
	max-height: 480px;
	padding: 24px;
}
.b2bp .b2bp-prod-img > .b2bp-img-fallback {
	border-radius: var(--b2b-radius-ctl);
	font-size: 48px;
}
.b2bp .b2bp-prod-card {
	position: relative;
}
.b2bp .b2bp-prod-card > .card-body {
	padding: 24px;
}
.b2bp .b2bp-prod-name {
	color: var(--b2b-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 44px 8px 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-meta {
	color: var(--b2b-ink-3);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 4px 16px;
	margin: 0 0 20px;
}
.b2bp .b2bp-prod-code {
	color: var(--b2b-ink-2);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-price {
	margin: 0 0 20px;
}
.b2bp .b2bp-prod-price-now {
	color: var(--b2b-ink);
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
.b2bp .b2bp-prod-price-now.b2b-price-promo {
	color: var(--b2b-success);
}
/* Negative money: danger text, rendered string (with its minus sign) untouched */
.b2bp .b2bp-price.b2bp-price--neg,
.b2bp .b2bp-prod-price-now.b2bp-price--neg,
.b2bp .b2bp-prod-price-now.b2b-price-promo.b2bp-price--neg {
	color: var(--b2b-danger);
}
.b2bp .b2bp-prod-price small {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-weight: 400;
}
.b2bp .b2bp-prod-price .b2b-price-was {
	color: var(--b2b-ink-3);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.b2bp .b2bp-prod-buy {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: 0 0 16px;
}
.b2bp .b2bp-prod-buy .b2bp-qty > input.form-control {
	border-radius: 0;
	box-shadow: none;
	height: 100%;
	padding: 0 4px;
}
.b2bp .b2bp-prod-stock {
	align-items: center;
	display: flex;
	height: var(--b2b-ctl);
}
.b2bp #stockStatusBadge.b2bp-pill {
	font-size: 13px;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
}
.b2bp #stockStatusBadge.b2bp-pill:empty {
	display: none;
}
.b2bp .b2bp-prod-actions {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0 0 24px;
	max-width: 480px;
}
.b2bp .b2bp-prod-actions > .btn {
	min-height: 44px;
}
.b2bp .b2bp-prod .accordion-flush {
	border-top: 1px solid var(--b2b-line);
}
.b2bp .b2bp-prod .accordion-flush .accordion-item {
	background: transparent;
	border-bottom: 1px solid var(--b2b-line);
}
/* Accordion buttons keep the theme's collapsed/expanded fills (modern.css); only type and spacing change. */
.b2bp .b2bp-prod .accordion-flush .accordion-button {
	box-shadow: none;
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	min-height: 44px;
	padding: 12px 16px;
}
.b2bp .b2bp-prod .accordion-flush .accordion-button:focus-visible {
	outline: 2px solid var(--b2b-accent);
	outline-offset: 2px;
}
.b2bp .b2bp-prod .accordion-flush .accordion-body {
	color: var(--b2b-ink-2);
	font-size: 14px;
	overflow-wrap: anywhere;
	padding: 4px 16px 16px;
}
.b2bp .b2bp-prod .accordion-flush .accordion-body .bold {
	color: var(--b2b-ink);
	font-weight: 600;
}
@media (max-width: 991.98px) {
	.b2bp .b2bp-prod-img {
		max-height: 360px;
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-prod-card > .card-body {
		padding: 16px;
	}
	.b2bp .b2bp-prod-name {
		font-size: 20px;
	}
	.b2bp .b2bp-prod-price-now {
		font-size: 24px;
	}
	.b2bp .b2bp-prod-img {
		max-height: 300px;
		padding: 16px;
	}
	.b2bp .b2bp-prod-actions {
		max-width: none;
	}
}

/* ----- 7a v2 (round 2): catalogue polish on the v2 system. Overrides the round-1 rules above. ----- */

/* Search: the hero command bar (section 6 shares every rule). There is no navy band here, so a 1px field-line
   border (3:1, the same as inputs and selects in 4.5) and shadow-sm replace the white ring, and focus shows the
   system blue halo. */
.b2bp .b2bp-inv-search .input-group {
	border: 1px solid var(--b2b-field-line);
	box-shadow: var(--b2b-shadow-sm);
	transition: border-color var(--b2b-dur-2) ease, box-shadow var(--b2b-dur-2) ease;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-inv-search .input-group:hover {
		border-color: var(--b2b-field-line-hover);
	}
}
.b2bp .b2bp-inv-search .input-group:focus-within {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-shadow-sm), 0 0 0 4px rgba(37, 99, 235, .18);
}

/* Toolbar: Filters as an outline button with a count chip, Clear filters as ghost. */
.b2bp .b2bp-inv-toolbar #filterSortBtn {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-outline-line);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink) !important;
	font-weight: 500;
	height: var(--b2b-ctl);
	padding: 0 12px;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
}
.b2bp .b2bp-inv-toolbar #filterSortBtn:hover {
	background: var(--b2b-subtle);
	border-color: var(--b2b-line-strong);
}
.b2bp .b2bp-inv-toolbar #filterSortBtn .b2bp-count {
	background: var(--b2b-secondary);
	color: var(--b2b-ink);
}
.b2bp .b2bp-inv-toolbar #filterSortBtn .b2bp-count.b2bp-count--on {
	background: var(--b2b-primary);
	color: var(--b2b-primary-fg);
}
.b2bp .b2bp-inv-toolbar #b2bClearFiltersBtn {
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-ink-2) !important;
	font-weight: 500;
	height: var(--b2b-ctl);
	padding: 0 12px;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
}
.b2bp .b2bp-inv-toolbar #b2bClearFiltersBtn:hover {
	background: var(--b2b-secondary) !important;
	color: var(--b2b-ink) !important;
}

/* Tile / List: shadcn segmented control (muted track, raised white thumb on the pressed item). */
.b2bp .b2bp-inv-toolbar .b2bp-seg {
	background: var(--b2b-secondary);
	border: 0;
	border-radius: var(--b2b-radius-btn);
	padding: 3px;
}
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:hover,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:focus,
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:active {
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	color: var(--b2b-ink-3);
	font-weight: 500;
	height: 30px;
	padding: 0 12px;
	transition: background-color var(--b2b-dur-2) ease, color var(--b2b-dur-2) ease, box-shadow var(--b2b-dur-2) ease;
}
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:hover {
	color: var(--b2b-ink);
}
.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link[aria-pressed="true"] {
	background: var(--b2b-surface);
	box-shadow: var(--b2b-shadow-sm);
	color: var(--b2b-ink);
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link,
	.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:hover,
	.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:focus,
	.b2bp .b2bp-inv-toolbar .b2bp-seg > .btn-link:active {
		height: 38px;
	}
}

/* Category cards: soft elevation, gradient thumb, lift on hover (fine pointers). */
.b2bp .b2bp-cat-grid {
	gap: 16px;
}
.b2bp .b2bp-cat-card {
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out), box-shadow var(--b2b-dur-2) ease, border-color var(--b2b-dur-2) ease;
}
.b2bp .b2bp-cat-open {
	gap: 12px;
	padding: 12px;
}
.b2bp .b2bp-cat-open:focus-visible {
	border-radius: var(--b2b-radius-lg);
}
.b2bp .b2bp-cat-thumb {
	background: linear-gradient(135deg, #eef3fc 0%, #f8fafc 70%);
	border-radius: 10px;
}
.b2bp .b2bp-cat-initial {
	color: var(--b2b-accent);
	font-size: 30px;
	opacity: .55;
}
.b2bp .b2bp-cat-name {
	font-size: 13px;
	letter-spacing: .01em;
}
.b2bp .b2bp-cat-card:active {
	transform: scale(.985);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-cat-card:hover {
		border-color: var(--b2b-outline-line);
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-2px);
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-cat-grid {
		gap: 8px;
	}
}

/* Product tiles: image stage, price block, full-width primary Add to cart. */
.b2bp .b2bp-ptiles {
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.b2bp .b2bp-ptile {
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out), box-shadow var(--b2b-dur-2) ease, border-color var(--b2b-dur-2) ease;
}
.b2bp .b2bp-ptile-img {
	background: #f8fafc;
	border-bottom: 1px solid var(--b2b-line);
	padding: 16px;
}
.b2bp .b2bp-ptile-img > img {
	mix-blend-mode: multiply;
	transition: transform var(--b2b-dur-4) var(--b2b-ease-out);
}
.b2bp .b2bp-ptile-img > .b2bp-img-fallback {
	background: transparent;
}
.b2bp .b2bp-ptile-body {
	gap: 4px;
	padding: 14px 16px 16px;
}
.b2bp .b2bp-ptile-code {
	letter-spacing: .02em;
}
.b2bp .b2bp-ptile-foot {
	align-items: flex-end;
	padding-top: 10px;
}
.b2bp .b2bp-ptile .b2bp-price,
.b2bp .b2bp-prow .b2bp-price {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.b2bp .b2bp-ptile .b2bp-add {
	margin-top: 12px;
	min-height: 40px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-ptile:hover {
		border-color: var(--b2b-outline-line);
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-2px);
	}
	.b2bp .b2bp-ptile:hover .b2bp-ptile-img > img {
		transform: scale(1.04);
	}
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-ptiles {
		gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	.b2bp .b2bp-ptile-img {
		padding: 10px;
	}
	.b2bp .b2bp-ptile-body {
		padding: 10px 12px 12px;
	}
	.b2bp .b2bp-ptile .b2bp-price {
		font-size: 16px;
	}
	.b2bp .b2bp-ptile .b2bp-add {
		min-height: 44px;
	}
}

/* Tiles always fill their grid track. Round 1 shipped inventory.js under the original ?v=2 URL, so a browser
   holding the cached original script wraps each card in Bootstrap col-6 col-lg-3; its 25% width shrank the
   tiles to ~57px inside the track (names broke per letter, Add to cart wrapped). Neutralise any col-* wrapper,
   keep every flex child shrinkable, and keep the image stage square with or without an image. */
.b2bp .b2bp-ptiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}
.b2bp .b2bp-ptiles > * {
	min-width: 0;
}
.b2bp .b2bp-ptiles > [class*="col-"] {
	flex: none;
	margin: 0;
	max-width: none;
	padding: 0;
	width: auto;
}
.b2bp .b2bp-ptiles > [class*="col-"] > .card {
	height: 100%;
}
.b2bp .b2bp-ptile {
	width: auto;
}
.b2bp .b2bp-ptile-img {
	aspect-ratio: 1 / 1;
	width: 100%;
}
.b2bp .b2bp-ptile-img > .b2bp-img-fallback {
	height: 100%;
	width: 100%;
}
.b2bp .b2bp-ptile-body,
.b2bp .b2bp-ptile-foot,
.b2bp .b2bp-ptile-price {
	min-width: 0;
}
.b2bp .b2bp-ptile-price {
	flex: 1 1 auto;
}
.b2bp .b2bp-ptile-foot > .b2bp-pill {
	flex: 0 0 auto;
	white-space: nowrap;
}
.b2bp .b2bp-ptile-name {
	overflow-wrap: break-word;
}
.b2bp .b2bp-ptile .b2bp-add {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-ptiles {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}
}

/* List rows: one elevated card, hover tint, thumb on a soft stage. */
.b2bp .b2bp-plist {
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	overflow: hidden;
}
.b2bp .b2bp-prow {
	padding: 12px 20px;
	transition: background-color var(--b2b-dur-1) ease;
}
.b2bp .b2bp-prow:hover {
	background: #f8fafc;
}
.b2bp .b2bp-prow-thumb {
	background: #f8fafc;
	border-radius: 10px;
}
.b2bp .b2bp-prow .b2bp-add {
	min-height: 36px;
	min-width: 132px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-prow {
		padding: 12px;
	}
	.b2bp .b2bp-prow .b2bp-add {
		min-height: 44px;
		min-width: 0;
	}
}

/* Add to cart: icon drawn in CSS so the texts JS sets ("Add to cart" / "Adding..." / "Added in cart") stay
   the only content. Added = primary tint (4.6 selected state), not a second primary. */
.b2bp .b2bp-add,
.b2bp #addToCartBtn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
}
.b2bp .b2bp-add::before,
.b2bp #addToCartBtn::before {
	content: "\f217";
	font-family: "Font Awesome 6 Free";
	font-size: .95em;
	font-weight: 900;
	line-height: 1;
}
.b2bp .b2bp-add:disabled::before,
.b2bp #addToCartBtn:disabled::before {
	animation: b2bp-cat-spin .8s linear infinite;
	content: "\f110";
}
.b2bp .b2bp-add.btn-cart-success::before,
.b2bp #addToCartBtn.btn-cart-success::before {
	animation: none;
	content: "\f00c";
}
.b2bp .btn.b2bp-add.btn-cart-success,
.b2bp .btn#addToCartBtn.btn-cart-success {
	box-shadow: none;
}
/* Primary fill set here (not only via the shared btn-primary rule) so Add to cart reads as the main action
   whatever the global button map does; the !important colour beats 4.6a's text-on-fill override. */
body.b2bp .btn.b2bp-add.btn-primary,
body.b2bp .btn#addToCartBtn.btn-primary {
	background: var(--b2b-primary);
	border: 1px solid var(--b2b-primary);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-primary-fg) !important;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .btn.b2bp-add.btn-primary:hover,
body.b2bp .btn#addToCartBtn.btn-primary:hover {
	background: var(--b2b-primary-hover);
	border-color: var(--b2b-primary-hover);
	color: var(--b2b-primary-fg) !important;
}
body.b2bp .btn.b2bp-add.btn-primary:active,
body.b2bp .btn#addToCartBtn.btn-primary:active {
	background: var(--b2b-primary-active);
	border-color: var(--b2b-primary-active);
	color: var(--b2b-primary-fg) !important;
}
body.b2bp .btn.b2bp-add.btn-primary:disabled,
body.b2bp .btn#addToCartBtn.btn-primary:disabled {
	background: var(--b2b-primary);
	border-color: var(--b2b-primary);
	color: var(--b2b-primary-fg) !important;
	opacity: .7;
}
body.b2bp .btn.b2bp-add:active,
body.b2bp .btn#addToCartBtn:active {
	transform: scale(.97);
}
body.b2bp .btn.b2bp-add.btn-cart-success,
body.b2bp .btn.b2bp-add.btn-cart-success:hover,
body.b2bp .btn#addToCartBtn.btn-cart-success,
body.b2bp .btn#addToCartBtn.btn-cart-success:hover {
	color: var(--b2b-primary-hover) !important;
}
/* In Compare (JS swaps btn-secondary for btn-warning, text "In Compare"): the same selected look as
   Added in cart (primary tint + check) so it no longer reads like Add to Compare. */
.b2bp #addToCompareBtn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
}
body.b2bp .btn#addToCompareBtn.btn-warning,
body.b2bp .btn#addToCompareBtn.btn-warning:hover,
body.b2bp .btn#addToCompareBtn.btn-warning:focus,
body.b2bp .btn#addToCompareBtn.btn-warning:disabled,
body.b2bp .b2bp-ptile .btn.btn-warning,
body.b2bp .b2bp-ptile .btn.btn-warning:hover,
body.b2bp .b2bp-prow .btn.btn-warning,
body.b2bp .b2bp-prow .btn.btn-warning:hover {
	background-color: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	box-shadow: none;
	color: var(--b2b-primary-hover) !important;
}
body.b2bp .btn#addToCompareBtn.btn-warning:active {
	background-color: #dbeafe !important;
	border-color: #93c5fd !important;
}
.b2bp #addToCompareBtn.btn-warning::before,
.b2bp .b2bp-ptile .btn.btn-warning::before,
.b2bp .b2bp-prow .btn.btn-warning::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-size: .95em;
	font-weight: 900;
	line-height: 1;
}
@keyframes b2bp-cat-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.b2bp .b2bp-add:disabled::before,
	.b2bp #addToCartBtn:disabled::before {
		animation: none;
	}
}

/* Pagination: ghost pages, current page in the primary fill. */
.b2bp .b2bp-pager {
	gap: 6px;
	margin-top: 8px;
}
.b2bp .b2bp-pager .page-item .page-link {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--b2b-radius-btn);
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
}
.b2bp .b2bp-pager .page-item:first-child .page-link,
.b2bp .b2bp-pager .page-item:last-child .page-link {
	background: var(--b2b-surface);
	border-color: var(--b2b-outline-line);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink);
}
.b2bp .b2bp-pager .page-item a.page-link:hover {
	background: var(--b2b-secondary);
	color: var(--b2b-ink);
}
.b2bp .b2bp-pager .page-item.active .page-link {
	background: var(--b2b-primary);
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-primary-fg);
}
.b2bp .b2bp-pager .page-item.disabled .page-link {
	background: var(--b2b-surface);
	box-shadow: none;
	color: var(--b2b-ink-3);
	opacity: .55;
}
.b2bp .b2bp-pager .b2bp-pager-gap .page-link,
.b2bp .b2bp-pager .b2bp-pager-gap .page-link:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* Empty results: no dashed box inside the list card; a solid card when the tile grid holds it. */
.b2bp .b2bp-plist > .b2bp-empty {
	border: 0;
	margin: 0;
	padding: 40px 24px;
}
.b2bp .b2bp-ptiles > .b2bp-empty {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	padding: 40px 24px;
}
/* Empty results: an icon disc above the title. */
.b2bp .b2bp-inv .b2bp-empty::before,
.b2bp .b2bp-plist > .b2bp-empty::before,
.b2bp .b2bp-ptiles > .b2bp-empty::before {
	align-items: center;
	background: linear-gradient(135deg, var(--b2b-accent-tint), #fff);
	border: 1px solid var(--b2b-accent-line);
	border-radius: 50%;
	color: var(--b2b-primary);
	content: "\f002";
	display: flex;
	font-family: "Font Awesome 6 Free";
	font-size: 20px;
	font-weight: 900;
	height: 56px;
	justify-content: center;
	margin: 0 auto 12px;
	width: 56px;
}

/* Go to compare count on the light page head (the shared .b2bp-count is drawn for the dark top bar). */
.b2bp #goToCompareBtn .b2bp-count {
	background: var(--b2b-secondary);
	color: var(--b2b-ink);
}

/* Product page: gallery + details on the left, sticky buy box on the right (992+); stacked below. */
@media (min-width: 992px) {
	.b2bp .b2bp-prod.b2bp-prod--v2 {
		align-items: start;
		display: grid;
		gap: 24px;
		grid-template-areas: "gallery main" "details main";
		grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
		grid-template-rows: auto 1fr;
		margin: 0;
	}
	.b2bp .b2bp-prod--v2 > .b2bp-prod-gallery,
	.b2bp .b2bp-prod--v2 > .b2bp-prod-main,
	.b2bp .b2bp-prod--v2 > .b2bp-prod-details {
		margin: 0 !important;
		max-width: none;
		padding: 0;
		width: auto;
	}
	.b2bp .b2bp-prod--v2 > .b2bp-prod-gallery { grid-area: gallery; }
	.b2bp .b2bp-prod--v2 > .b2bp-prod-details { grid-area: details; }
	.b2bp .b2bp-prod--v2 > .b2bp-prod-main {
		grid-area: main;
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--b2b-topbar) + 16px);
	}
}
@media (max-width: 991.98px) {
	.b2bp .b2bp-prod--v2 > .b2bp-prod-details {
		margin-bottom: 16px;
	}
}
.b2bp .b2bp-prod--v2 .b2bp-prod-img {
	aspect-ratio: 4 / 3;
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-xs);
	max-height: 560px;
	padding: 32px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-img > .b2bp-img-fallback {
	background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 70%);
	border-radius: 10px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-card,
.b2bp .b2bp-prod--v2 .b2bp-prod-info {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-sm);
	margin: 0;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-name {
	font-size: 22px;
	letter-spacing: -.01em;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-meta {
	margin-bottom: 16px;
}
/* Price card: muted panel holding price, quantity, stock and the actions. */
.b2bp .b2bp-prod-buybox {
	background: #f8fafc;
	border: 1px solid var(--b2b-line);
	border-radius: 12px;
	padding: 16px;
}
.b2bp .b2bp-prod-buybox .b2bp-prod-price {
	border-bottom: 1px solid var(--b2b-line);
	margin: 0 0 16px;
	padding: 0 0 16px;
}
.b2bp .b2bp-prod-buybox .b2bp-prod-price-now {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
}
.b2bp .b2bp-prod-buybox .b2bp-qty {
	background: var(--b2b-surface);
	border-radius: var(--b2b-radius-btn);
}
/* Focus ring on the stepper inputs (the round-1 box-shadow: none above would otherwise remove the v2 ring). */
.b2bp .b2bp-prod-buy .b2bp-qty > input.form-control:focus,
.b2bp .b2bp-prod-buy .b2bp-qty > input.form-control:focus-visible {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
	position: relative;
	z-index: 1;
}
.b2bp .b2bp-prod-buybox .b2bp-prod-actions {
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	max-width: none;
}
.b2bp .b2bp-prod-buybox .b2bp-prod-actions > .btn {
	font-weight: 600;
	min-height: 48px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-info > .card-body {
	padding: 8px 24px 12px;
}
.b2bp .b2bp-prod-info-title {
	color: var(--b2b-ink);
	font-size: 16px;
	font-weight: 600;
	margin: 12px 0 8px;
}
/* Accordion v2: hairline rows, white in both states, chevron turns; colours of the theme replaced. */
.b2bp .b2bp-prod--v2 .accordion-flush {
	border-top: 0;
}
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-item:last-child {
	border-bottom: 0;
}
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-button,
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-button:not(.collapsed) {
	background: transparent;
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	min-height: 52px;
	padding: 14px 4px;
}
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-button:hover {
	color: var(--b2b-primary);
}
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-button::after {
	transition: transform var(--b2b-dur-3) var(--b2b-ease-out);
}
.b2bp .b2bp-prod--v2 .accordion-flush .accordion-body {
	padding: 0 4px 16px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-prod--v2 .b2bp-prod-img {
		padding: 16px;
	}
	.b2bp .b2bp-prod--v2 .b2bp-prod-name {
		font-size: 20px;
	}
	.b2bp .b2bp-prod-buybox {
		padding: 12px;
	}
	.b2bp .b2bp-prod-buybox .b2bp-prod-price-now {
		font-size: 26px;
	}
	.b2bp .b2bp-prod--v2 .b2bp-prod-info > .card-body {
		padding: 4px 16px 8px;
	}
}

/* Active filter chips (#b2bActiveFilters, built by b2bRenderFilterChips): one pill per applied sheet filter, the
   whole pill removes it; Clear all is a ghost link. Hidden (attribute) when nothing is applied or in browse mode. */
.b2bp .b2bp-chips {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.b2bp .b2bp-chips[hidden] {
	display: none;
}
.b2bp .b2bp-chip {
	align-items: center;
	background: var(--b2b-secondary);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--b2b-ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	line-height: 1.2;
	max-width: 100%;
	min-height: 32px;
	min-width: 0;
	padding: 0 6px 0 12px;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
.b2bp .b2bp-chip-name {
	color: var(--b2b-ink-3);
	flex: 0 0 auto;
}
.b2bp .b2bp-chip-value {
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.b2bp .b2bp-chip > .fa-xmark {
	align-items: center;
	border-radius: 999px;
	color: var(--b2b-ink-3);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 11px;
	height: 20px;
	justify-content: center;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
	width: 20px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-chip:hover {
		background: var(--b2b-secondary-hover);
	}
	.b2bp .b2bp-chip:hover > .fa-xmark {
		background: rgba(15, 23, 42, .08);
		color: var(--b2b-ink);
	}
}
.b2bp .b2bp-chip:active {
	transform: scale(.97);
}
.b2bp .b2bp-chip:focus-visible {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
	outline: 0;
}
/* Toolbar Clear filters steps aside while the chip row (with its own Clear all) is visible; class set in b2bRenderFilterChips. */
.b2bp #b2bClearBtnWrap.b2bp-clear-replaced {
	display: none;
}
/* Empty results (drawProducts): Clear filters and Browse categories sit side by side, wrapping on narrow screens. */
.b2bp .b2bp-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.b2bp .b2bp-chips .b2bp-chips-clear {
	font-size: 13px;
	min-height: 32px;
	padding: 0 8px;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-chip,
	.b2bp .b2bp-chips .b2bp-chips-clear {
		min-height: 44px;
	}
	.b2bp .b2bp-chip {
		padding: 0 10px 0 14px;
	}
}


/* ----- 7a v3 (round 2): product detail, bold. Navy hero band (breadcrumb, name, copyable code chips, favourite,
   Go to compare); the image stage and the buy box overlap its lower edge; tabs for the product information;
   phone quick-buy bar. Overrides the 7a and 7a v2 product rules above. ----- */

/* Hero band: the dashboard banner's brand gradient and glows. */
.b2bp .b2bp-prod-hero {
	background:
		radial-gradient(circle at 92% -30%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 45%),
		radial-gradient(circle at 70% 140%, rgba(96, 165, 250, .32) 0, rgba(96, 165, 250, 0) 50%),
		var(--b2b-brand-grad);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-md);
	color: var(--b2b-on-brand);
	min-height: 200px;
	padding: 20px 32px 88px;
}
.b2bp .b2bp-prod-hero-top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0 0 12px;
}
.b2bp .b2bp-prod-crumbs {
	min-width: 0;
}
.b2bp .b2bp-prod-crumbs ol {
	align-items: center;
	color: rgba(255, 255, 255, .8);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 500;
	gap: 4px 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.b2bp .b2bp-prod-crumbs li {
	align-items: center;
	display: inline-flex;
	min-width: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-crumbs li + li::before {
	content: "\f054";
	content: "\f054" / "";
	font-family: "Font Awesome 6 Free";
	font-size: 9px;
	font-weight: 900;
	margin: 0 10px;
	opacity: .7;
}
.b2bp .b2bp-prod-crumbs a {
	border-radius: 4px;
	color: var(--b2b-on-brand);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 3px;
}
.b2bp .b2bp-prod-crumbs a:focus-visible {
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 2px;
}
.b2bp .b2bp-prod-hero-actions {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.b2bp .b2bp-prod-hero .b2bp-prod-name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--b2b-on-brand);
	display: -webkit-box;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	margin: 0 0 16px;
	max-width: 1000px;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-hero .b2bp-prod-meta {
	color: var(--b2b-on-brand);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 8px;
	margin: 0;
}
/* Meta chips: translucent white pills; Code and Barcode end in a copy button. */
.b2bp .b2bp-prod-chip {
	align-items: center;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	display: inline-flex;
	gap: 6px;
	max-width: 100%;
	min-height: 32px;
	padding: 0 12px;
}
.b2bp .b2bp-prod-chip-k {
	color: rgba(255, 255, 255, .8);
	font-weight: 500;
}
.b2bp .b2bp-prod-hero .b2bp-prod-code {
	color: var(--b2b-on-brand);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-copy {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 12px;
	height: 26px;
	justify-content: center;
	margin-right: -8px;
	padding: 0;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
	width: 26px;
}
.b2bp .b2bp-prod-copy:focus-visible {
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 1px;
}
.b2bp .b2bp-prod-copy:active {
	transform: scale(.97);
}
.b2bp .b2bp-prod-copy.is-copied {
	color: #86efac;
}
/* Favourite and Go to compare restyled for the navy band (IDs, classes and data-* as before). */
.b2bp .b2bp-prod-hero .b2b-fav-star {
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
	color: var(--b2b-on-brand);
	font-size: 15px;
	height: 36px;
	position: relative;
	right: auto;
	top: auto;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
	width: 36px;
}
.b2bp .b2bp-prod-hero .b2b-fav-star.b2b-fav-on {
	color: #fcd34d;
}
.b2bp .b2bp-prod-hero .b2b-fav-star:focus-visible {
	outline-color: var(--b2b-on-brand);
}
body.b2bp .b2bp-prod-hero .btn#goToCompareBtn {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-on-brand) !important;
	font-size: 14px;
	font-weight: 600;
	min-height: 36px;
	padding: 0 6px 0 12px !important;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .b2bp-prod-hero .btn#goToCompareBtn:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 2px;
}
body.b2bp .b2bp-prod-hero .btn#goToCompareBtn .b2bp-count {
	background: var(--b2b-on-brand);
	color: var(--b2b-brand-900);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-prod-crumbs a:hover {
		text-decoration: underline;
	}
	.b2bp .b2bp-prod-copy:hover {
		background: rgba(255, 255, 255, .18);
		color: var(--b2b-on-brand);
	}
	.b2bp .b2bp-prod-hero .b2b-fav-star:hover {
		background: rgba(255, 255, 255, .2);
		color: #fcd34d;
	}
	body.b2bp .b2bp-prod-hero .btn#goToCompareBtn:hover {
		background: rgba(255, 255, 255, .2);
	}
}

/* Gallery and buy box sit over the band's lower edge, inset so the band frames them. */
.b2bp .b2bp-prod-hero + .b2bp-prod {
	--bs-gutter-x: 0;
	margin: -64px 24px 0;
	position: relative;
	z-index: 1;
}
@media (min-width: 992px) {
	.b2bp .b2bp-prod-hero + .b2bp-prod.b2bp-prod--v2 {
		margin: -64px 24px 0;
	}
}
.b2bp .b2bp-prod--v2 .b2bp-prod-card {
	box-shadow: var(--b2b-shadow-lg);
}
.b2bp .b2bp-prod--v2 .b2bp-prod-card > .card-body {
	padding: 24px;
}

/* Image stage: studio backdrop (radial slate-50 to white, faint dot grid); white product shots blend into it. */
.b2bp .b2bp-prod--v2 .b2bp-prod-stage {
	background:
		radial-gradient(rgba(15, 23, 42, .07) 1px, rgba(15, 23, 42, 0) 1.6px) 0 0 / 18px 18px,
		radial-gradient(ellipse at 50% 45%, #fff 0%, #fff 30%, #f8fafc 68%, #eef2f7 100%);
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-lg);
	max-height: 600px;
	padding: 0;
}
.b2bp .b2bp-prod-zoom {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: inherit;
	cursor: zoom-in;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 40px;
	position: absolute;
}
.b2bp .b2bp-prod-zoom:focus-visible {
	outline: 2px solid var(--b2b-primary);
	outline-offset: -4px;
}
.b2bp .b2bp-prod-zoom > img {
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: contain;
	transition: transform var(--b2b-dur-4) var(--b2b-ease-out);
	width: 100%;
}
.b2bp .b2bp-prod-zoom > .b2bp-img-fallback {
	display: none;
}
.b2bp .b2bp-prod-zoom-hint {
	align-items: center;
	background: rgba(15, 23, 42, .72);
	border-radius: 999px;
	bottom: 12px;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 10px;
	position: absolute;
	right: 12px;
}
.b2bp .b2bp-prod-noimg {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: absolute;
	text-align: center;
}
.b2bp .b2bp-prod-stage:not(.b2bp-prod-stage--empty) > .b2bp-prod-noimg,
.b2bp .b2bp-prod-stage--empty > .b2bp-prod-zoom {
	display: none;
}
.b2bp .b2bp-prod-noimg-ico {
	align-items: center;
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: 20px;
	box-shadow: var(--b2b-shadow-sm);
	color: #94a3b8;
	display: flex;
	font-size: 40px;
	height: 96px;
	justify-content: center;
	margin-bottom: 8px;
	width: 96px;
}
.b2bp .b2bp-prod-noimg-t {
	color: var(--b2b-ink-2);
	font-size: 15px;
	font-weight: 600;
}
.b2bp .b2bp-prod-noimg-code {
	color: var(--b2b-ink-3);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* Buy box: one white card; price 40/800 with an inc GST pill, then quantity + stock, actions, assurance. */
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-prod-price {
	margin: 0 0 20px;
	padding: 0 0 20px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-prod-price-now {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: 40px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	gap: 4px 12px;
	letter-spacing: -.03em;
	line-height: 1.1;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-prod-price-now small {
	align-self: center;
	background: var(--b2b-secondary);
	border-radius: 999px;
	color: var(--b2b-ink-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 4px 10px;
	white-space: nowrap;
}
.b2bp .b2bp-prod-buybox .b2b-cart-price-row {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.b2bp .b2bp-prod-buybox .b2b-promo-badge {
	align-items: center;
	background: var(--b2b-warning-tint);
	border-radius: 999px;
	color: var(--b2b-warning);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: .02em;
	line-height: 1.35;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 4px 10px;
	text-align: left;
	white-space: normal;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2b-price-was {
	color: var(--b2b-ink-3);
	font-size: 15px;
	text-decoration: line-through;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2b-price-was small {
	font-size: 12px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buy {
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 20px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buy label {
	color: var(--b2b-ink-2);
	font-size: 13px;
	font-weight: 600;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-qty {
	height: 44px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-qty > button {
	flex-basis: 44px;
	width: 44px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buy .b2bp-qty > input.form-control {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	width: 64px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-stock {
	height: 44px;
}
.b2bp .b2bp-prod--v2 #stockStatusBadge.b2bp-pill {
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-prod-actions {
	gap: 10px;
}
body.b2bp .b2bp-prod-buybox .btn#addToCartBtn {
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	min-height: 52px;
	width: 100%;
}
/* Add to Compare as an outline button; In Compare keeps its selected tint (btn-warning rules above). */
body.b2bp .b2bp-prod-buybox .btn#addToCompareBtn {
	min-height: 44px;
	width: 100%;
}
body.b2bp .b2bp-prod-buybox .btn#addToCompareBtn.btn-secondary {
	--bs-btn-bg: var(--b2b-surface);
	--bs-btn-border-color: var(--b2b-outline-line);
	--bs-btn-hover-bg: var(--b2b-surface);
	--bs-btn-hover-border-color: var(--b2b-outline-line);
	--bs-btn-active-bg: var(--b2b-secondary);
	font-size: 15px;
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .b2bp-prod-buybox .btn#addToCompareBtn.btn-secondary {
		--bs-btn-hover-bg: var(--b2b-secondary);
	}
}
.b2bp .b2bp-prod-assure {
	border-top: 1px solid var(--b2b-line);
	color: var(--b2b-ink-2);
	display: grid;
	font-size: 14px;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
}
.b2bp .b2bp-prod-assure > li {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-assure > li > i {
	align-items: center;
	background: var(--b2b-success-tint);
	border-radius: 50%;
	color: var(--b2b-success);
	display: inline-flex;
	flex: 0 0 26px;
	font-size: 11px;
	height: 26px;
	justify-content: center;
}

/* Product information: shadcn tabs over the accordion panels (headers hidden once the tabs run). */
.b2bp .b2bp-prod--v2 .b2bp-prod-info > .card-body {
	padding: 20px 24px 24px;
}
.b2bp .b2bp-prod--v2 .b2bp-prod-info-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}
.b2bp .b2bp-prod-tabs {
	background: var(--b2b-secondary);
	border-radius: 10px;
	display: inline-flex;
	gap: 4px;
	margin: 0 0 20px;
	max-width: 100%;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: none;
}
.b2bp .b2bp-prod-tabs::-webkit-scrollbar {
	display: none;
}
.b2bp .b2bp-prod-tabs[hidden] {
	display: none;
}
.b2bp .b2bp-prod-tab {
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: var(--b2b-ink-2);
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	min-height: 36px;
	padding: 0 16px;
	transition: background-color var(--b2b-dur-2) ease, color var(--b2b-dur-2) ease, box-shadow var(--b2b-dur-2) ease;
	white-space: nowrap;
}
.b2bp .b2bp-prod-tab[aria-selected="true"] {
	background: var(--b2b-surface);
	box-shadow: var(--b2b-shadow-sm);
	color: var(--b2b-ink);
}
.b2bp .b2bp-prod-tab:focus-visible {
	outline: 2px solid var(--b2b-primary);
	outline-offset: -2px;
}
.b2bp .b2bp-prod .b2bp-tabs-on > .accordion-item {
	border: 0;
}
.b2bp .b2bp-tabs-on > .accordion-item > .accordion-header {
	display: none;
}
.b2bp .b2bp-tabs-on .accordion-collapse.show {
	animation: b2bp-fade var(--b2b-dur-3) ease;
}
.b2bp .b2bp-prod--v2 .b2bp-tabs-on .accordion-body {
	padding: 0;
}
.b2bp .b2bp-tabs-on .accordion-collapse:focus-visible {
	border-radius: var(--b2b-radius-btn);
	outline: 2px solid var(--b2b-primary);
	outline-offset: 4px;
}
.b2bp .b2bp-prod-desc {
	color: var(--b2b-ink-2);
	font-size: 15px;
	line-height: 1.65;
	max-width: 75ch;
	white-space: pre-line;
}
.b2bp .b2bp-prod-quiet {
	color: var(--b2b-ink-3);
	font-size: 14px;
}
.b2bp .b2bp-prod-specs {
	display: grid;
	gap: 0 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}
.b2bp .b2bp-prod-specs > div {
	border-bottom: 1px solid var(--b2b-line);
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
	padding: 12px 0;
}
.b2bp .b2bp-prod-specs dt {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-weight: 500;
}
.b2bp .b2bp-prod-specs dd {
	color: var(--b2b-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-prod-kv > p {
	border-bottom: 1px solid var(--b2b-line);
	display: flex;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	margin: 0 !important;
	max-width: 560px;
	padding: 12px 0;
}
.b2bp .b2bp-prod-kv > p .bold {
	font-weight: 500;
}
.b2bp .b2bp-docs {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.b2bp .b2bp-doc-item,
.b2bp .b2bp-doc-none {
	margin: 0;
}
.b2bp .b2bp-doc {
	align-items: center;
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: 12px;
	color: var(--b2b-ink);
	display: flex;
	gap: 12px;
	height: 100%;
	min-height: 64px;
	padding: 12px 14px;
	text-decoration: none;
	transition: border-color var(--b2b-dur-2) ease, box-shadow var(--b2b-dur-2) ease, transform var(--b2b-dur-2) var(--b2b-ease-out);
}
.b2bp .b2bp-doc:focus-visible {
	outline: 2px solid var(--b2b-primary);
	outline-offset: 2px;
}
.b2bp .b2bp-doc:active {
	transform: scale(.985);
}
.b2bp .b2bp-doc-ico {
	align-items: center;
	background: var(--b2b-accent-tint);
	border-radius: 10px;
	color: var(--b2b-accent);
	display: flex;
	flex: 0 0 40px;
	font-size: 17px;
	height: 40px;
	justify-content: center;
}
.b2bp .b2bp-doc-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}
.b2bp .b2bp-doc-title {
	font-size: 14px;
	font-weight: 600;
}
.b2bp .b2bp-doc-sub {
	color: var(--b2b-ink-3);
	font-size: 12px;
}
.b2bp .b2bp-doc-go {
	color: var(--b2b-ink-3);
	font-size: 12px;
}
.b2bp .b2bp-doc-none {
	align-items: center;
	border: 1px dashed var(--b2b-line);
	border-radius: 12px;
	color: var(--b2b-ink-3);
	display: flex;
	font-size: 13px;
	min-height: 64px;
	padding: 12px 14px;
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-prod-zoom:hover > img {
		transform: scale(1.03);
	}
	.b2bp .b2bp-prod-tab:hover {
		color: var(--b2b-ink);
	}
	.b2bp .b2bp-doc:hover {
		border-color: var(--b2b-accent-line);
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-1px);
	}
}

/* Lightbox (built by b2bpProdLightbox, appended to body). */
html.b2bp-lb-open {
	overflow: hidden;
}
.b2bp .b2bp-lightbox {
	align-items: center;
	background: rgba(8, 23, 51, .84);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 64px 24px 24px;
	position: fixed;
	transition: opacity var(--b2b-dur-3) ease;
	z-index: 1065;
}
.b2bp .b2bp-lightbox.is-open {
	opacity: 1;
}
.b2bp .b2bp-lightbox-figure {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	max-height: 100%;
	max-width: min(1100px, 100%);
	transform: scale(.96);
	transition: transform var(--b2b-dur-4) var(--b2b-ease-out);
}
.b2bp .b2bp-lightbox.is-open .b2bp-lightbox-figure {
	transform: none;
}
.b2bp .b2bp-lightbox-figure > img {
	background: var(--b2b-surface);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-lg);
	cursor: zoom-out;
	max-height: calc(100vh - 150px);
	max-width: 100%;
	object-fit: contain;
	padding: 24px;
}
.b2bp .b2bp-lightbox-figure > figcaption {
	color: var(--b2b-on-brand);
	font-size: 14px;
	font-weight: 500;
	max-width: 70ch;
	overflow-wrap: anywhere;
	text-align: center;
}
.b2bp .b2bp-lightbox-close {
	align-items: center;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	color: var(--b2b-on-brand);
	display: flex;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	position: absolute;
	right: 16px;
	top: 16px;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
	width: 44px;
}
.b2bp .b2bp-lightbox-close:focus-visible {
	outline: 2px solid var(--b2b-on-brand);
	outline-offset: 2px;
}
.b2bp .b2bp-lightbox-close:active {
	transform: scale(.97);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-lightbox-close:hover {
		background: rgba(255, 255, 255, .22);
	}
}

/* Phone quick-buy bar: slides up while the buy box actions are off screen (b2bpProdBar). */
.b2bp .b2bp-prod-bar {
	display: none;
}

@media (max-width: 991.98px) {
	.b2bp .b2bp-prod-hero + .b2bp-prod > .b2bp-prod-gallery,
	.b2bp .b2bp-prod-hero + .b2bp-prod > .b2bp-prod-main {
		margin-bottom: 16px !important;
	}
}
@media (max-width: 767.98px) {
	/* Phone hero: compact visible controls (32-36px) whose 44px hit areas come from transparent ::after
	   extensions that never reach a neighbouring control. */
	.b2bp .b2bp-prod-hero {
		min-height: 0;
		padding: 14px 12px 64px;
	}
	.b2bp .b2bp-prod-hero .b2bp-prod-name {
		font-size: 22px;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	.b2bp .b2bp-prod-hero-top {
		margin-bottom: 10px;
	}
	.b2bp .b2bp-prod-crumbs {
		flex: 1 1 100%;
	}
	.b2bp .b2bp-prod-crumbs ol {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.b2bp .b2bp-prod-crumbs li {
		display: block;
		flex: 0 0 auto;
		max-width: 55%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.b2bp .b2bp-prod-crumbs li:first-child {
		max-width: none;
		overflow: visible;
	}
	.b2bp .b2bp-prod-crumbs li:last-child {
		flex: 0 1 auto;
		max-width: none;
	}
	.b2bp .b2bp-prod-crumbs a {
		display: inline-block;
		position: relative;
	}
	.b2bp .b2bp-prod-crumbs a::after {
		bottom: -12px;
		content: "";
		left: -4px;
		position: absolute;
		right: -4px;
		top: -12px;
	}
	.b2bp .b2bp-prod-hero-actions {
		margin-left: auto;
	}
	.b2bp .b2bp-prod-meta {
		gap: 12px 6px;
	}
	.b2bp .b2bp-prod-chip {
		font-size: 12px;
		gap: 4px;
		padding: 0 4px 0 8px;
	}
	.b2bp .b2bp-prod-hero .b2bp-prod-code {
		font-size: 12px;
	}
	.b2bp .b2bp-prod-chip--unit {
		display: none;
	}
	.b2bp .b2bp-prod-copy {
		height: 22px;
		margin-right: 0;
		position: relative;
		width: 22px;
	}
	.b2bp .b2bp-prod-copy::after {
		bottom: -11px;
		content: "";
		left: -11px;
		position: absolute;
		right: -11px;
		top: -11px;
	}
	.b2bp .b2bp-prod-hero .b2b-fav-star::after {
		bottom: -4px;
		left: -4px;
		right: -4px;
		top: -4px;
	}
	body.b2bp .b2bp-prod-hero .btn#goToCompareBtn {
		position: relative;
	}
	body.b2bp .b2bp-prod-hero .btn#goToCompareBtn::after {
		bottom: -4px;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: -4px;
	}
	.b2bp .b2bp-prod-hero + .b2bp-prod {
		margin: -48px 12px 0;
	}
	.b2bp .b2bp-prod-zoom {
		padding: 24px;
	}
	.b2bp .b2bp-prod--v2 .b2bp-prod-card > .card-body {
		padding: 20px 16px;
	}
	.b2bp .b2bp-prod--v2 .b2bp-prod-buybox .b2bp-prod-price-now {
		font-size: 34px;
	}
	.b2bp .b2bp-prod--v2 .b2bp-prod-info > .card-body {
		padding: 16px;
	}
	.b2bp .b2bp-prod-tab {
		min-height: 44px;
		padding: 0 14px;
	}
	.b2bp .b2bp-prod-specs {
		grid-template-columns: minmax(0, 1fr);
	}
	.b2bp .b2bp-prod-kv > p {
		max-width: none;
	}
	.b2bp .b2bp-docs {
		grid-template-columns: minmax(0, 1fr);
	}
	.b2bp .b2bp-lightbox {
		padding: 72px 12px 16px;
	}
	.b2bp .b2bp-lightbox-figure > img {
		padding: 12px;
	}
	/* While the bar is up, reserve its measured height (safe-area padding included) below the footer. Body is
	   viewport-tall here and the page overflows it, so the space goes on .main, which holds content and footer. */
	body.b2bp.b2bp-prod-page.b2bp-prod-bar-on .main {
		padding-bottom: var(--b2bp-prod-bar-h, calc(69px + env(safe-area-inset-bottom)));
	}
	.b2bp .b2bp-prod-bar {
		align-items: center;
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--b2b-line);
		bottom: 0;
		box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
		display: flex;
		gap: 12px;
		left: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		transform: translateY(110%);
		transition: transform var(--b2b-dur-3) var(--b2b-ease-out), visibility 0s linear var(--b2b-dur-3);
		visibility: hidden;
		z-index: 1030;
	}
	.b2bp .b2bp-prod-bar.is-on {
		transform: none;
		transition: transform var(--b2b-dur-3) var(--b2b-ease-out), visibility 0s;
		visibility: visible;
	}
	.b2bp .b2bp-prod-bar-info {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}
	.b2bp .b2bp-prod-bar-price {
		color: var(--b2b-ink);
		font-size: 20px;
		font-variant-numeric: tabular-nums;
		font-weight: 800;
		letter-spacing: -.02em;
		line-height: 1.15;
		white-space: nowrap;
	}
	.b2bp .b2bp-prod-bar-price small {
		color: var(--b2b-ink-3);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0;
		margin-left: 4px;
	}
	.b2bp .b2bp-prod-bar-qty {
		color: var(--b2b-ink-3);
		font-size: 12px;
	}
	body.b2bp .b2bp-prod-bar .btn.b2bp-prod-bar-btn {
		border-radius: 10px;
		flex: 0 0 auto;
		font-size: 15px;
		font-weight: 600;
		min-height: 48px;
		padding: 0 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b2bp .b2bp-prod-zoom:hover > img,
	.b2bp .b2bp-doc:hover,
	.b2bp .b2bp-doc:active,
	.b2bp .b2bp-prod-copy:active,
	.b2bp .b2bp-lightbox-close:active,
	.b2bp .b2bp-lightbox-figure,
	.b2bp .b2bp-prod-bar {
		transform: none;
	}
	.b2bp .b2bp-prod-zoom > img,
	.b2bp .b2bp-lightbox-figure,
	.b2bp .b2bp-prod-bar,
	.b2bp .b2bp-prod-bar.is-on {
		transition: none;
	}
}

/* 7b v3 (round 2): cart money in brand blue and "Accept all statements".
   Money keeps the server/JS strings; only colour and size change. Blue, not green/red, which mean status here
   (a negative unit price keeps its danger tone). */
.b2bp .b2bp-cart-price h4,
.b2bp .b2bp-cart-price h4.b2b-price-promo,
.b2bp .b2bp-cart-total-row dd {
	color: #1d4ed8;
}
.b2bp .b2bp-cart-total-row dd {
	font-weight: 600;
}
.b2bp .b2bp-cart-price h4.b2bp-neg {
	color: var(--b2b-danger);
}
.b2bp .b2bp-cart-total-row.b2bp-cart-grand {
	background: #eff6ff;
	border-color: #bfdbfe;
}
.b2bp .b2bp-cart-grand dt {
	color: var(--b2b-ink);
	font-weight: 700;
}
.b2bp .b2bp-cart-grand dt .b2bp-muted {
	color: var(--b2b-ink-2);
	font-weight: 500;
}
.b2bp .b2bp-cart-grand dd {
	color: #1d4ed8;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.b2bp .b2bp-cart-acks .b2bp-cart-ackall {
	align-items: center;
	border-bottom: 1px solid var(--b2b-line);
	margin: 0 0 10px;
	padding-bottom: 10px;
}
.b2bp .b2bp-cart-acks .b2bp-cart-ackall .form-check-label {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	padding-top: 0;
}
.b2bp .b2bp-cart-acks .b2bCartAckRow .form-check-input:indeterminate {
	background-color: var(--b2b-accent);
	border-color: var(--b2b-accent);
}
.b2bp .b2bp-cart-acks .b2bCartAckRow .form-check-input:focus-visible {
	border-color: var(--b2b-accent);
	box-shadow: 0 0 0 3px rgba(31, 86, 196, .35);
	outline: 0;
}
@media (max-width: 767.98px) {
	.b2bp .b2bp-cart-acks .b2bp-cart-ackall {
		min-height: 44px;
	}
	.b2bp .b2bp-cart-acks .b2bp-cart-ackall .form-check-label {
		align-items: center;
		display: flex;
		min-height: 44px;
	}
	.b2bp .b2bp-cart-grand dd {
		font-size: 24px;
	}
}

/* 7b v3: cart row selection (b2bCartSelDecorate). A checkbox column before the thumbnail, a toolbar above the
   list with Select all, the live "N selected" count and the bulk actions (shown only while rows are selected).
   Checkboxes show at 20px inside 44px labels; the label overhangs only the column gaps. */
.b2bp .b2bp-cart-list--sel .b2bp-cart-line.b2b-line-item-card {
	grid-template-areas: "sel thumb info price qty remove";
	grid-template-columns: 24px 64px minmax(0, 1fr) minmax(112px, auto) auto auto;
}
.b2bp .b2bp-cart-line.is-selected {
	background: #f5f9ff;
}
.b2bp .b2bp-cart-sel,
.b2bp .b2bp-cart-selall {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	margin: 0;
}
.b2bp .b2bp-cart-sel {
	grid-area: sel;
	height: 44px;
	justify-content: center;
	margin: -10px;
	width: 44px;
}
.b2bp .b2bp-cart-sel .form-check-input,
.b2bp .b2bp-cart-selall .form-check-input {
	border-color: var(--b2b-line-strong);
	cursor: pointer;
	flex: 0 0 auto;
	float: none;
	height: 20px;
	margin: 0;
	width: 20px;
}
.b2bp .b2bp-cart-sel .form-check-input:checked,
.b2bp .b2bp-cart-sel .form-check-input:indeterminate,
.b2bp .b2bp-cart-selall .form-check-input:checked,
.b2bp .b2bp-cart-selall .form-check-input:indeterminate {
	background-color: var(--b2b-accent);
	border-color: var(--b2b-accent);
}
.b2bp .b2bp-cart-sel .form-check-input:focus-visible,
.b2bp .b2bp-cart-selall .form-check-input:focus-visible {
	border-color: var(--b2b-accent);
	box-shadow: 0 0 0 3px rgba(31, 86, 196, .35);
	outline: 0;
}
.b2bp .b2bp-cart-selbar {
	align-items: center;
	background: #f8fafc;
	border-bottom: 1px solid var(--b2b-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-height: 52px;
	padding: 4px 16px;
}
.b2bp .b2bp-cart-selall {
	color: var(--b2b-ink-2);
	font-size: 13px;
	font-weight: 600;
	gap: 12px;
	min-height: 44px;
}
.b2bp .b2bp-cart-bulk-count {
	color: var(--b2b-ink);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin-left: auto;
}
.b2bp .b2bp-cart-bulk {
	align-items: center;
	display: flex;
	gap: 4px;
}
.b2bp .b2bp-cart-bulk[hidden] {
	display: none;
}
body.b2bp .b2bp-cart-bulk .btn {
	align-items: center;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
}
body.b2bp .b2bp-cart-bulk .btn.btn-outline-danger {
	background: var(--b2b-surface);
	border: 1px solid #b91c1c;
	border-radius: var(--b2b-radius-btn);
	color: #b91c1c !important;
	transition: background-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .b2bp-cart-bulk .btn.btn-outline-danger:focus-visible {
	box-shadow: 0 0 0 3px rgba(185, 28, 28, .3);
	outline: 0;
}
body.b2bp .b2bp-cart-bulk .btn.btn-link {
	color: var(--b2b-ink-2) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.b2bp .b2bp-cart-bulk .btn:active {
	transform: scale(.97);
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .b2bp-cart-bulk .btn.btn-outline-danger:hover {
		background: #fef2f2;
	}
	body.b2bp .b2bp-cart-bulk .btn.btn-link:hover {
		color: var(--b2b-ink) !important;
	}
}
@container (max-width: 639.98px) {
	.b2bp .b2bp-cart-list--sel .b2bp-cart-line.b2b-line-item-card {
		grid-template-areas:
			"sel thumb info info"
			"sel thumb price price"
			"qty qty qty remove";
		grid-template-columns: 24px 56px minmax(0, 1fr) auto;
	}
	.b2bp .b2bp-cart-sel {
		align-self: start;
		margin: 6px -10px -10px;
	}
}
@media (max-width: 767.98px) {
	body.b2bp .b2bp-cart-bulk .btn {
		min-height: 44px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.b2bp .b2bp-cart-bulk .btn:active {
		transform: none;
	}
}

/* Reduced motion for sections 6, 7a and 7b (placed last so it wins at equal specificity): no hover lifts, press
   scales, arrow slides or image zoom; disclosure chevrons snap. Colour, border, shadow and opacity feedback stay. */
@media (prefers-reduced-motion: reduce) {
	.b2bp .b2bp-dash-hero .b2bp-dash-search .input-group > .btn.b2bp-dash-search-btn:active,
	.b2bp .b2bp-inv-search .input-group > .btn.btn-secondary:active,
	.b2bp .b2bp-dash-kpis .b2bp-kpi,
	.b2bp .b2bp-dash-kpis .b2bp-kpi::after,
	.b2bp .b2bp-dash-kpis a.b2bp-kpi:active,
	.b2bp .b2bp-dash-kpis a.b2bp-kpi:hover,
	.b2bp a.b2bp-job:active,
	.b2bp a.b2bp-job:hover,
	body.b2bp .b2bp-cart-remove .btn.btn-danger:active,
	body.b2bp .b2bp-compare-actions .btn.btn-danger:active,
	body.b2bp .b2bp-cart-order > .btn#b2bOrderMenuBtn:active,
	.b2bp .b2bp-cat-card:active,
	.b2bp .b2bp-cat-card:hover,
	.b2bp .b2bp-ptile:active,
	.b2bp .b2bp-ptile:hover,
	.b2bp .b2bp-ptile:hover .b2bp-ptile-img > img,
	body.b2bp .btn.b2bp-add:active,
	body.b2bp .btn#addToCartBtn:active,
	.b2bp .b2bp-chip:active {
		transform: none;
	}
	.b2bp .b2bp-cart-supplier > summary::before,
	.b2bp .b2bp-prod--v2 .accordion-flush .accordion-button::after {
		transition: none;
	}
}

/* ===== 8b. Account: order list, statement ===== */

/* Order List: list select, item count and Delete list in the panel head; light product rows
   (40px thumb, name, muted code + stock line, price, compact stepper, Add); sticky action bar. */
.b2bp .b2bp-ml-head {
	display: block;
}
.b2bp .b2bp-ml-toolbar {
	margin: 0;
}
.b2bp .b2bp-ml-toolbar .b2bp-field--grow {
	flex: 1 1 320px;
	max-width: 480px;
}
.b2bp .b2bp-ml-count {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: var(--b2b-ctl);
	margin-left: auto;
	white-space: nowrap;
}
.b2bp .b2bp-ml-count:empty {
	display: none;
}
/* Delete list keeps btn-outline-danger, the destructive-outline variant. */
.b2bp .b2bp-ml-toolbar #deleteMyListBtn {
	white-space: nowrap;
}
.b2bp .b2bp-ml-count:empty + #deleteMyListBtn {
	margin-left: auto;
}
/* Sort by (mylist.js sortMyList): select + square direction button with the field border, at every
   width, so the B2BP phone sort bar (Product / Price only) is not shown for this table. */
.b2bp .b2bp-ml-sort-ctl {
	display: flex;
	gap: 6px;
}
.b2bp .b2bp-ml-sort .form-select {
	width: 164px;
}
.b2bp .b2bp-ml-toolbar .b2bp-ml-sortdir {
	--bs-btn-border-color: var(--b2b-field-line);
	--bs-btn-hover-border-color: var(--b2b-field-line-hover);
	--bs-btn-disabled-border-color: var(--b2b-field-line);
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--b2b-ctl);
	justify-content: center;
	padding: 0;
	width: var(--b2b-ctl);
}
.b2bp .b2bp-ml .b2bp-sortbar {
	display: none;
}

/* Checkboxes: 16px, line-strong border, primary fill with a white check (as the dialog options, 10). */
.b2bp .b2bp-ml-all input[type="checkbox"],
.b2bp .b2bp-ml-hit input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--b2b-surface) no-repeat center / 12px 12px;
	border: 1px solid var(--b2b-line-strong);
	border-radius: 4px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 16px;
	margin: 0;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
	width: 16px;
}
.b2bp .b2bp-ml-all input[type="checkbox"]:checked,
.b2bp .b2bp-ml-hit input[type="checkbox"]:checked {
	background-color: var(--b2b-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	border-color: var(--b2b-primary);
}
.b2bp .b2bp-ml-all input[type="checkbox"]:focus-visible,
.b2bp .b2bp-ml-hit input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2b-primary);
	outline: none;
}
.b2bp .b2bp-ml-hit {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	margin: -6px;
	min-height: 32px;
	min-width: 32px;
}

/* Table: rows ~60px, cells centred, hover tint (4.9) and a selected tint. */
.b2bp .b2bp-ml-table > tbody > tr > td {
	padding-bottom: 10px;
	padding-top: 10px;
}
.b2bp .b2bp-ml-table .b2bp-ml-c-check {
	padding-left: 20px;
	padding-right: 4px;
	width: 44px;
}
.b2bp .b2bp-ml-table .b2bp-ml-c-thumb {
	padding-left: 8px;
	padding-right: 4px;
	width: 56px;
}
.b2bp .b2bp-ml-table > tbody > tr.b2bp-ml-row:has(.mylist-item-checkbox:checked) > td {
	background: var(--b2b-accent-tint);
}
.b2bp .b2bp-ml-table > tbody > tr.b2bp-ml-row:has(.mylist-item-checkbox:checked) > td:first-child {
	box-shadow: inset 2px 0 0 var(--b2b-primary);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-ml-table > tbody > tr.b2bp-ml-row:has(.mylist-item-checkbox:checked):hover > td {
		background: #e4ecfb;
	}
}
.b2bp .b2bp-ml-img {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: 8px;
	height: 40px;
	width: 40px;
}
.b2bp .b2bp-ml-img > .b2bp-img-fallback {
	color: var(--b2b-ink-3);
	font-size: 15px;
	min-height: 0;
}
.b2bp .b2bp-ml-table .b2bp-ml-c-name {
	min-width: 200px;
}
.b2bp .b2bp-ml-name {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
}
.b2bp .b2bp-ml-name:hover {
	color: var(--b2b-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.b2bp .b2bp-ml-meta {
	align-items: center;
	color: var(--b2b-ink-3);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 4px 8px;
	line-height: 18px;
	margin-top: 2px;
}
.b2bp .b2bp-ml-code {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.b2bp .b2bp-ml-meta .b2bp-ml-stock {
	font-size: 11px;
	font-weight: 500;
	height: 18px;
	padding: 0 7px;
}
.b2bp .b2bp-ml-pricebox {
	align-items: flex-end;
	display: inline-flex;
	flex-direction: column;
}
.b2bp .b2bp-ml-price {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}
.b2bp .b2bp-ml-gst {
	color: var(--b2b-ink-3);
	font-size: 12px;
	line-height: 16px;
}
.b2bp .b2bp-ml-table .b2bp-ml-c-qty,
.b2bp .b2bp-ml-table .b2bp-ml-c-add {
	white-space: nowrap;
	width: 1%;
}
.b2bp .b2bp-ml-table .b2bp-ml-c-add {
	padding-right: 20px;
	text-align: right;
}
/* Compact 32px stepper (4.10 at row size). */
.b2bp .b2bp-ml-table .b2bp-qty {
	height: 32px;
}
.b2bp .b2bp-ml-table .b2bp-qty > button {
	flex-basis: 32px;
	font-size: 11px;
	width: 32px;
}
.b2bp .b2bp-ml-table .b2bp-qty > input {
	font-size: 13px;
	width: 44px;
}
.b2bp .b2bp-ml-add {
	min-width: 64px;
}

/* Sticky action bar: Select all, "N selected", Add selected to cart. */
.b2bp .b2bp-ml-foot {
	align-items: center;
	background: var(--b2b-surface);
	border-radius: 0 0 var(--b2b-radius) var(--b2b-radius);
	bottom: 0;
	box-shadow: 0 -6px 16px -12px rgba(15, 23, 42, .35);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 10px 20px;
	position: -webkit-sticky;
	position: sticky;
	z-index: 2;
}
.b2bp .b2bp-ml-all {
	align-items: center;
	color: var(--b2b-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	margin: 0;
	min-height: 36px;
}
.b2bp .b2bp-ml-selected {
	color: var(--b2b-ink-3);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.b2bp .b2bp-ml-foot #addMyListToCartBtn {
	margin-left: auto;
}
.b2bp .b2bp-ml-error-title {
	color: var(--b2b-danger);
}

/* Loading: skeleton rows shaped like the item rows. */
.b2bp .b2bp-loading.b2bp-ml-loading {
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.b2bp .b2bp-ml-skel-row {
	align-items: center;
	border-bottom: 1px solid var(--b2b-line);
	display: flex;
	gap: 16px;
	padding: 12px 20px;
}
.b2bp .b2bp-ml-skel-row:last-child {
	border-bottom: 0;
}
.b2bp .b2bp-ml-skel-row .b2bp-skel {
	flex: 0 0 auto;
	margin: 0;
}
.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-check {
	border-radius: 4px;
	height: 16px;
	width: 16px;
}
.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-thumb {
	border-radius: 8px;
	height: 40px;
	width: 40px;
}
.b2bp .b2bp-ml-skel-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.b2bp .b2bp-ml-skel-text > .b2bp-skel:first-child {
	height: 12px;
	width: 55%;
}
.b2bp .b2bp-ml-skel-text > .b2bp-skel:last-child {
	height: 10px;
	width: 30%;
}
.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-price {
	width: 64px;
}
.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-qty {
	border-radius: 8px;
	height: 32px;
	width: 172px;
}

/* Phone: each product is a block: check + 40px thumb beside the name and meta line, the price
   under the name, then the stepper and Add. 44px targets; the action bar stays sticky. */
@media (max-width: 767.98px) {
	.b2bp .b2bp-ml-head {
		padding: 12px 16px;
	}
	.b2bp .b2bp-ml-toolbar .b2bp-field--grow {
		flex-basis: 100%;
		max-width: none;
	}
	.b2bp .b2bp-ml-sort .form-select {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
	.b2bp .b2bp-ml-count {
		line-height: 44px;
		margin-left: 0;
	}
	.b2bp .b2bp-ml-toolbar #deleteMyListBtn {
		margin-left: auto;
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row {
		column-gap: 12px;
		display: grid;
		grid-template-areas:
			"check thumb name name"
			"check thumb price price"
			"check thumb qty add";
		grid-template-columns: 24px 40px minmax(0, 1fr) auto;
		row-gap: 8px;
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row > td {
		align-items: center;
		justify-content: flex-start;
		padding: 0;
		text-align: left;
		width: auto;
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row > td::before {
		content: none;
		display: none;
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row > td.b2bp-ml-c-check,
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row > td.b2bp-ml-c-thumb {
		align-items: flex-start;
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row > td.b2bp-ml-c-name {
		display: block;
		font-size: 14px;
	}
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-check { grid-area: check; }
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-thumb { grid-area: thumb; }
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-name { grid-area: name; }
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-price { grid-area: price; }
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-qty { grid-area: qty; }
	.b2bp table.b2bp-ml-table > tbody > tr > td.b2bp-ml-c-add { grid-area: add; justify-content: flex-end; }
	/* Selected tint on the whole block (cells are transparent here). */
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row:has(.mylist-item-checkbox:checked) {
		background: var(--b2b-accent-tint);
		box-shadow: inset 3px 0 0 var(--b2b-primary);
	}
	.b2bp table.b2bp-ml-table > tbody > tr.b2bp-ml-row:has(.mylist-item-checkbox:checked) > td {
		background: transparent;
		box-shadow: none;
	}
	.b2bp .b2bp-ml-hit {
		margin: -12px 0 0 -8px;
		min-height: 44px;
		min-width: 44px;
	}
	.b2bp .b2bp-ml-pricebox {
		align-items: baseline;
		flex-direction: row;
		gap: 4px;
	}
	.b2bp .b2bp-ml-table .b2bp-qty {
		height: 44px;
	}
	.b2bp .b2bp-ml-table .b2bp-qty > button {
		flex-basis: 44px;
		width: 44px;
	}
	.b2bp .b2bp-ml-table .b2bp-qty > input {
		width: 52px;
	}
	.b2bp .b2bp-ml-add {
		min-height: 44px;
	}
	.b2bp .b2bp-ml-foot {
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.b2bp .b2bp-ml-all {
		min-height: 44px;
	}
	.b2bp .b2bp-ml-selected {
		margin-left: auto;
	}
	.b2bp .b2bp-ml-foot #addMyListToCartBtn {
		flex: 1 1 100%;
		margin-left: 0;
	}
	.b2bp .b2bp-ml-skel-row {
		gap: 12px;
		padding: 12px 16px;
	}
	.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-price,
	.b2bp .b2bp-ml-skel-row .b2bp-ml-skel-qty {
		display: none;
	}
}

/* Statement: options + account strip, aging figures, ledger table with totals. */
.b2bp .b2bp-st-toolbar {
	margin: 0;
}
.b2bp .b2bp-st-toolbar .b2bp-field {
	flex: 0 1 200px;
}
/* The calendar trigger sits inside the input on the right (trigger rules: 8a "Date fields"). */
.b2bp .b2bp-st-date {
	display: block;
	position: relative;
}
.b2bp .b2bp-st-date .form-control {
	min-width: 0;
	width: 100%;
}
.b2bp .b2bp-st-account {
	border-top: 1px solid var(--b2b-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 0;
	padding: 12px 16px;
}
.b2bp .b2bp-st-account-item {
	min-width: 0;
}
.b2bp .b2bp-st-account dt label {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 600;
	margin: 0;
}
.b2bp .b2bp-st-account dd {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 2px 0 0;
}
.b2bp .b2bp-st-plain {
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: var(--b2b-ink);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	max-width: 100%;
	padding: 0;
	width: 16ch;
}
.b2bp .b2bp-st-h2 {
	color: var(--b2b-ink);
	font-size: 15px;
	font-weight: 600;
	margin: 24px 0 12px;
}
/* Amounts never break mid-number: a card that cannot fit its amount wraps to the next row. */
.b2bp .b2bp-st-figure .b2bp-kpi {
	flex: 1 1 140px;
	min-width: auto;
}
.b2bp .b2bp-st-figure .b2bp-kpi-value {
	overflow-wrap: normal;
	white-space: nowrap;
}
.b2bp .b2bp-st-figure .b2bp-st-lead {
	border-color: var(--b2b-owing);
	flex: 1.6 1 220px;
}
.b2bp .b2bp-st-figure .b2bp-kpi-value {
	font-size: 22px;
}
.b2bp .b2bp-st-figure .b2bp-st-lead .b2bp-kpi-value {
	font-size: 28px;
}
.b2bp .b2bp-st-figure .b2bp-kpi-sub {
	color: var(--b2b-ink-3);
	font-size: 12px;
}
.b2bp .b2bp-st-figure .b2bp-kpi-value.b2bp-st-zero {
	color: var(--b2b-ink-3);
}
.b2bp .b2bp-st-figure .b2bp-kpi-value.b2bp-st-warn {
	color: var(--b2b-warning);
}
.b2bp .b2bp-st-figure .b2bp-kpi-value.b2bp-st-danger {
	color: var(--b2b-danger);
}
.b2bp .b2bp-st-ledger .b2bp-panel-head {
	align-items: baseline;
}
.b2bp table.b2bp-st-table > thead > tr > th:nth-child(n+3),
.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(n+3) {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	width: 1%;
}
.b2bp table.b2bp-st-table > thead > tr > th:first-child,
.b2bp table.b2bp-st-table > tbody > tr > td:first-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 1%;
}
.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(2) {
	overflow-wrap: anywhere;
}
.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(5) {
	font-weight: 600;
}
.b2bp table.b2bp-st-table a.statement-invoice-link {
	color: var(--b2b-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.b2bp table.b2bp-st-table a.statement-invoice-link:hover {
	color: var(--b2b-ink);
}
.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-total-row > td {
	background: var(--b2b-subtle);
	font-weight: 600;
}
.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-empty-row > td {
	padding: 0;
}
.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-empty-row:hover > td {
	background: transparent;
}
/* Statement totals: four stat tiles (label, icon chip, 22px value) with a tone each, no side accent bar (user request). Opening balance slate,
   total invoices blue, total payments green, closing balance the navy hero. Values (fmt:formatNumber) and ids
   are untouched; every value colour is AA (4.5:1+) on its own tint. 4 across from 1024, 2 x 2 below, 1 below 480. */
.b2bp .b2bp-st-totals {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 16px;
}
.b2bp .b2bp-st-total {
	--b2bp-st-tint: #f8fafc;
	--b2bp-st-line: #e2e8f0;
	--b2bp-st-chip: #e2e8f0;
	--b2bp-st-value: var(--b2b-ink);
	--b2bp-st-label: var(--b2b-ink-3);
	--b2bp-st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
	align-items: center;
	background: var(--b2bp-st-tint);
	border: 1px solid var(--b2bp-st-line);
	border-radius: var(--b2b-radius);
	box-shadow: var(--b2b-shadow-xs);
	display: grid;
	gap: 8px 12px;
	grid-template-areas: "label chip" "value value";
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
	padding: 14px 16px;
}
.b2bp .b2bp-st-total::before {
	background: var(--b2bp-st-chip) var(--b2bp-st-icon) no-repeat center / 16px 16px;
	border-radius: var(--b2b-radius-btn);
	content: "";
	grid-area: chip;
	height: 32px;
	width: 32px;
}
.b2bp .b2bp-st-total dt {
	color: var(--b2bp-st-label);
	font-size: 12px;
	font-weight: 500;
	grid-area: label;
	letter-spacing: .04em;
	line-height: 16px;
	text-transform: uppercase;
}
.b2bp .b2bp-st-total dd {
	color: var(--b2bp-st-value);
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	grid-area: value;
	letter-spacing: -.01em;
	line-height: 28px;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: left;
}
.b2bp .b2bp-st-total--invoices {
	--b2bp-st-tint: #eff6ff;
	--b2bp-st-line: #dbeafe;
	--b2bp-st-chip: #dbeafe;
	--b2bp-st-value: #1d4ed8;
	--b2bp-st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
}
.b2bp .b2bp-st-total--payments {
	--b2bp-st-tint: #ecfdf5;
	--b2bp-st-line: #d1fae5;
	--b2bp-st-chip: #d1fae5;
	--b2bp-st-value: #047857;
	--b2bp-st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}
.b2bp .b2bp-st-total--closing {
	--b2bp-st-chip: rgba(255, 255, 255, .14);
	--b2bp-st-value: #fff;
	--b2bp-st-label: rgba(255, 255, 255, .8);
	--b2bp-st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E");
	background: var(--b2b-brand-grad);
	border-color: transparent;
	box-shadow: var(--b2b-shadow-md);
}
.b2bp .b2bp-st-total--closing dd {
	font-size: 24px;
}
/* 4 across beside the sidebar leaves ~170px a tile: tighter chip, padding and tracking keep labels on one line. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.b2bp .b2bp-st-totals {
		gap: 10px;
	}
	.b2bp .b2bp-st-total {
		gap: 8px;
		padding: 12px;
	}
	.b2bp .b2bp-st-total::before {
		background-size: 14px 14px;
		height: 28px;
		width: 28px;
	}
	.b2bp .b2bp-st-total dt {
		letter-spacing: .02em;
	}
}
@media (max-width: 1023.98px) {
	.b2bp .b2bp-st-totals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 479.98px) {
	.b2bp .b2bp-st-totals {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 1023.98px) {
	.b2bp .b2bp-st-figure .b2bp-st-lead {
		flex-basis: 100%;
	}
}
/* Phone: each transaction is a labelled block; totals stack as label/value rows. */
@media (max-width: 767.98px) {
	.b2bp .b2bp-st-toolbar .b2bp-field,
	.b2bp .b2bp-st-toolbar .b2bp-toolbar-end .btn {
		flex: 1 1 100%;
	}
	.b2bp .b2bp-st-plain {
		font-size: 14px;
	}
	.b2bp .b2bp-st-figure .b2bp-kpi {
		flex: 1 1 calc(50% - 4px);
	}
	.b2bp .b2bp-st-figure .b2bp-st-lead {
		flex-basis: 100%;
	}
	.b2bp .b2bp-st-figure .b2bp-kpi-value {
		font-size: 18px;
	}
	.b2bp .b2bp-st-figure .b2bp-st-lead .b2bp-kpi-value {
		font-size: 24px;
	}
	.b2bp table.b2bp-st-table > tbody > tr > td,
	.b2bp table.b2bp-st-table > tbody > tr > td:first-child,
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(n+3) {
		white-space: normal;
		width: 100%;
	}
	.b2bp table.b2bp-st-table > tbody > tr > td:first-child {
		font-size: 13px;
		padding-bottom: 2px;
	}
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(2) {
		font-size: 14px;
		font-weight: 600;
		text-align: left;
	}
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(2)::before {
		display: none;
	}
	/* Rows written without data-label still get their labels. */
	.b2bp table.b2bp-st-table > tbody > tr > td:not([data-label]):not([colspan])::before {
		color: var(--b2b-ink-3);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
		text-align: left;
	}
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(1):not([data-label]):not([colspan])::before { content: "Date"; }
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(3):not([data-label]):not([colspan])::before { content: "Amount"; }
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(4):not([data-label]):not([colspan])::before { content: "Invoice balance"; }
	.b2bp table.b2bp-st-table > tbody > tr > td:nth-child(5):not([data-label]):not([colspan])::before { content: "Running balance"; }
	.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-empty-row > td::before {
		content: none;
	}
	.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-empty-row {
		padding: 0;
	}
	.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-empty-row > td {
		display: block;
		text-align: center;
	}
	.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-total-row {
		background: var(--b2b-subtle);
	}
	.b2bp table.b2bp-st-table > tbody > tr.b2bp-st-total-row > td {
		background: transparent;
	}
	.b2bp .b2bp-st-totals {
		padding: 12px;
	}
}


/* ===== 8a. Account: quotes, orders, invoices ===== */
/* One template for the three lists: toolbar of filters, then a panel with table.b2bp-acct-table built
   by spark/js/b2b-account.js (and the same markup server-side). */

/* Toolbar. dateutils shows .range / .specify with jQuery show(), which clears the inline display:none,
   so these groups take display:flex from here. */
.b2bp .b2bp-acct-toolbar .form-select {
	min-width: 180px;
}
.b2bp .b2bp-acct-dates {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.b2bp .b2bp-acct-toolbar .datepicker-field {
	display: block;
	position: relative;
}
.b2bp .b2bp-acct-toolbar .datepicker-field .datepicker.form-control {
	width: 150px;
}

/* Date fields (statement, quotes, orders): dateutils.js puts img.ui-datepicker-trigger (16px outline
   SVG) right after each .datepicker input; it sits inside the input on the right as an icon button. */
body.b2bp .b2bp-st-date .datepicker.form-control,
body.b2bp .datepicker-field .datepicker.form-control {
	padding-right: 38px;
}
body.b2bp .b2bp-st-date .ui-datepicker-trigger,
body.b2bp .datepicker-field .ui-datepicker-trigger {
	border-radius: var(--b2b-radius-ctl);
	box-sizing: border-box;
	cursor: pointer;
	height: 28px;
	margin: 0;
	padding: 6px;
	position: absolute;
	right: 5px;
	top: calc(50% - 14px);
	transition: background-color var(--b2b-dur-1) ease;
	width: 28px;
}
body.b2bp .b2bp-st-date .ui-datepicker-trigger:focus-visible,
body.b2bp .datepicker-field .ui-datepicker-trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-primary);
	outline: none;
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .b2bp-st-date .ui-datepicker-trigger:hover,
	body.b2bp .datepicker-field .ui-datepicker-trigger:hover {
		background-color: var(--b2b-secondary-hover);
	}
}
@media (max-width: 767.98px) {
	body.b2bp .b2bp-st-date .datepicker.form-control,
	body.b2bp .datepicker-field .datepicker.form-control {
		padding-right: 46px;
	}
	body.b2bp .b2bp-st-date .ui-datepicker-trigger,
	body.b2bp .datepicker-field .ui-datepicker-trigger {
		height: 44px;
		padding: 14px;
		right: 0;
		top: calc(50% - 22px);
		width: 44px;
	}
}

/* Date picker popup (#ui-datepicker-div, appended to body): white card, slate day grid, primary
   selected day. Replaces the pages' inline z-index and remote icon-sprite rules. */
body.b2bp .ui-datepicker.ui-widget {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-line);
	border-radius: 12px;
	box-shadow: var(--b2b-shadow-lg);
	box-sizing: border-box;
	color: var(--b2b-ink);
	font-family: var(--b2b-font);
	font-size: 13px;
	margin-top: 6px;
	padding: 12px;
	width: 284px;
	z-index: 1055 !important;
}
body.b2bp .ui-datepicker .ui-datepicker-header {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--b2b-ink);
	padding: 0 0 8px;
	position: relative;
}
body.b2bp .ui-datepicker .ui-datepicker-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 32px;
	margin: 0 40px;
	text-align: center;
}
body.b2bp .ui-datepicker .ui-datepicker-prev,
body.b2bp .ui-datepicker .ui-datepicker-next {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-outline-line);
	border-radius: var(--b2b-radius-btn);
	box-sizing: border-box;
	cursor: pointer;
	height: 32px;
	top: 0;
	transition: background-color var(--b2b-dur-1) ease;
	width: 32px;
}
body.b2bp .ui-datepicker .ui-datepicker-prev { left: 0; }
body.b2bp .ui-datepicker .ui-datepicker-next { right: 0; }
body.b2bp .ui-datepicker .ui-datepicker-prev-hover,
body.b2bp .ui-datepicker .ui-datepicker-next-hover {
	background: var(--b2b-secondary);
	border: 1px solid var(--b2b-outline-line);
	top: 0;
}
body.b2bp .ui-datepicker .ui-datepicker-prev-hover { left: 0; }
body.b2bp .ui-datepicker .ui-datepicker-next-hover { right: 0; }
body.b2bp .ui-datepicker .ui-datepicker-prev.ui-state-disabled,
body.b2bp .ui-datepicker .ui-datepicker-next.ui-state-disabled {
	cursor: default;
	opacity: .4;
}
body.b2bp .ui-datepicker .ui-datepicker-prev .ui-icon,
body.b2bp .ui-datepicker .ui-datepicker-next .ui-icon {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px !important;
	display: block;
	height: 16px;
	left: 50%;
	margin: -8px 0 0 -8px;
	position: absolute;
	top: 50%;
	width: 16px;
}
body.b2bp .ui-datepicker .ui-datepicker-next .ui-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}
/* Month / year: the select trigger's border, radius and chevron, kept compact for the calendar head. */
body.b2bp .ui-datepicker .ui-datepicker-title select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--b2b-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 14px 14px;
	border: 1px solid var(--b2b-field-line);
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	color: var(--b2b-ink);
	cursor: pointer;
	font-size: 13px;
	height: 28px;
	margin: 0 2px;
	padding: 0 24px 0 8px;
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .ui-datepicker .ui-datepicker-title select:hover {
		border-color: var(--b2b-field-line-hover);
	}
}
body.b2bp .ui-datepicker .ui-datepicker-title select:focus-visible {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
	outline: 0;
}
body.b2bp .ui-datepicker table.ui-datepicker-calendar {
	border-collapse: separate;
	border-spacing: 2px;
	font-size: 13px;
	margin: 0 -2px;
	width: calc(100% + 4px);
}
body.b2bp .ui-datepicker .ui-datepicker-calendar th {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 500;
	height: 28px;
	padding: 0;
	text-align: center;
}
body.b2bp .ui-datepicker .ui-datepicker-calendar td {
	padding: 0;
}
body.b2bp .ui-datepicker .ui-datepicker-calendar .ui-state-default {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-ink);
	display: flex;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	height: 34px;
	justify-content: center;
	padding: 0;
	text-align: center;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
}
body.b2bp .ui-datepicker .ui-datepicker-calendar a.ui-state-default:hover,
body.b2bp .ui-datepicker .ui-datepicker-calendar a.ui-state-hover {
	background: var(--b2b-secondary);
	color: var(--b2b-secondary-fg);
}
body.b2bp .ui-datepicker .ui-datepicker-calendar .ui-datepicker-today .ui-state-default {
	box-shadow: inset 0 0 0 1px var(--b2b-outline-line);
	font-weight: 600;
}
body.b2bp .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default,
body.b2bp .ui-datepicker .ui-datepicker-calendar .ui-state-active {
	background: var(--b2b-primary);
	box-shadow: none;
	color: var(--b2b-primary-fg);
	font-weight: 600;
}
body.b2bp .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day a.ui-state-hover {
	background: var(--b2b-primary-hover);
	color: var(--b2b-primary-fg);
}
body.b2bp .ui-datepicker .ui-datepicker-calendar a.ui-state-default:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2b-primary);
	outline: none;
}
body.b2bp .ui-datepicker .ui-datepicker-unselectable .ui-state-default {
	color: #94a3b8;
}

/* Panel and table */
.b2bp .b2bp-acct-scroll {
	border-radius: var(--b2b-radius);
	overflow-x: auto;
}
.b2bp .b2bp-acct-scroll:focus-visible {
	outline: 2px solid var(--b2b-accent);
	outline-offset: -2px;
}
.b2bp .b2bp-acct-table th.b2bp-acct-date,
.b2bp .b2bp-acct-table td.b2bp-acct-date,
.b2bp .b2bp-acct-table td.b2bp-acct-status {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.b2bp .b2bp-acct-table td.b2bp-acct-num {
	min-width: 104px;
}
.b2bp .b2bp-acct-table td.b2bp-acct-po {
	font-variant-numeric: tabular-nums;
	min-width: 88px;
}
.b2bp .b2bp-acct-table td.b2bp-acct-ref,
.b2bp .b2bp-acct-table td.b2bp-acct-proj {
	max-width: 320px;
	min-width: 120px;
}
.b2bp .b2bp-acct-table .b2bp-clamp-2,
.b2bp .b2bp-acct-wrap {
	overflow-wrap: anywhere;
}
.b2bp .b2bp-acct-table a.b2b-order-card-link {
	align-items: center;
	color: var(--b2b-accent);
	display: inline-flex;
	font-weight: 600;
	min-height: 24px;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.b2bp .b2bp-acct-table a.b2b-order-card-link:hover {
	color: var(--b2b-accent);
	text-decoration: underline;
}
.b2bp .b2bp-acct-stack {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.b2bp .b2bp-acct-site {
	color: var(--b2b-ink-3);
	font-size: 12px;
}
.b2bp .b2bp-acct-site .fa {
	margin-right: 2px;
}
/* The amount was a white-on-blue badge (3.9:1); now plain ink, right-aligned, tabular. */
.b2bp .b2bp-acct-table .b2b-order-amount {
	color: var(--b2b-ink);
	font-weight: 600;
}
.b2bp .b2bp-acct-table .b2b-order-amount.b2bp-neg {
	color: var(--b2b-danger);
}
.b2bp .b2bp-acct-table th.b2bp-acct-print,
.b2bp .b2bp-acct-table td.b2bp-acct-print {
	padding-left: 4px;
	padding-right: 8px;
	text-align: right;
	width: 48px;
}
/* Print keeps btn-light (secondary) in the markup but is drawn as the outline variant at btn-sm size:
   a quiet per-row action that does not compete with the number link or the status badge. */
body.b2bp .btn.b2bp-acct-print-btn {
	--b2bp-fg: var(--b2b-ink-2);
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
	--bs-btn-bg: var(--b2b-surface);
	--bs-btn-border-color: var(--b2b-outline-line);
	--bs-btn-hover-bg: var(--b2b-surface);
	--bs-btn-hover-border-color: var(--b2b-outline-line);
	--bs-btn-active-bg: var(--b2b-secondary-hover);
	--bs-btn-active-border-color: #cbd5e1;
	align-items: center;
	box-shadow: var(--b2b-shadow-xs);
	display: inline-flex;
	font-size: 13px;
	height: 32px;
	justify-content: center;
	min-height: 0;
	width: 32px;
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .btn.b2bp-acct-print-btn:hover {
		--b2bp-fg: var(--b2b-ink);
		--bs-btn-hover-bg: var(--b2b-secondary);
		--bs-btn-hover-border-color: #cbd5e1;
	}
}
.b2bp .b2bp-acct-table tr.b2bp-acct-skel > td .b2bp-skel {
	height: 10px;
	margin: 0;
}
.b2bp .b2bp-acct-table tr.b2bp-acct-skel:hover > td {
	background: transparent;
}

/* Tablet and small laptop: tighter cells so all eight columns fit without sideways scrolling. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.b2bp table.b2bp-acct-table > thead > tr > th,
	.b2bp table.b2bp-acct-table > tbody > tr > td {
		padding-left: 6px;
		padding-right: 6px;
	}
	.b2bp table.b2bp-acct-table > thead > tr > th:first-child,
	.b2bp table.b2bp-acct-table > tbody > tr > td:first-child {
		padding-left: 12px;
	}
	.b2bp .b2bp-acct-table td.b2bp-acct-num,
	.b2bp .b2bp-acct-table td.b2bp-acct-po {
		min-width: 0;
	}
	.b2bp .b2bp-acct-table td.b2bp-acct-ref,
	.b2bp .b2bp-acct-table td.b2bp-acct-proj {
		max-width: 200px;
		min-width: 88px;
	}
	.b2bp .b2bp-acct-table td.b2bp-acct-date {
		white-space: normal;
	}
}

@media (max-width: 767.98px) {
	.b2bp .b2bp-acct-toolbar .form-select {
		min-width: 0;
		width: 100%;
	}
	.b2bp .b2bp-acct-dates {
		flex: 1 1 100%;
	}
	.b2bp .b2bp-acct-toolbar .datepicker-field .datepicker.form-control {
		width: 100%;
	}
	.b2bp .b2bp-acct-scroll {
		overflow: visible;
	}
	/* Phone rows: number, amount and Print on the first line, then label: value pairs. */
	.b2bp table.b2bp-acct-table > tbody > tr {
		align-items: center;
		column-gap: 12px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td {
		grid-column: 1 / -1;
		max-width: none;
		min-width: 0;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td:first-child {
		font-size: 13px;
		padding-bottom: 2px;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-num {
		font-size: 14px;
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
		padding: 0;
		text-align: left;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-amt {
		font-size: 14px;
		grid-column: 2;
		grid-row: 1;
		padding: 0;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-print {
		grid-column: 3;
		grid-row: 1;
		padding: 0;
		width: auto;
	}
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-num::before,
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-amt::before,
	.b2bp table.b2bp-acct-table > tbody > tr > td.b2bp-acct-print::before {
		content: none;
	}
	.b2bp .b2bp-acct-table a.b2b-order-card-link {
		min-height: 44px;
	}
	body.b2bp .btn.b2bp-acct-print-btn {
		height: 44px;
		width: 44px;
	}
	.b2bp .b2bp-acct-stack {
		align-items: flex-end;
	}
	.b2bp table.b2bp-acct-table > tbody > tr.b2bp-acct-skel {
		display: block;
	}
	.b2bp table.b2bp-acct-table > tbody > tr.b2bp-acct-skel > td {
		padding: 4px 0;
	}
}

/* Empty states (quotes, orders, invoices, statement ledger): a quiet solid card with an icon chip. */
.b2bp .b2bp-acct-list > .b2bp-empty,
.b2bp .b2bp-st-ledger .b2bp-empty {
	background: var(--b2b-subtle);
	border: 1px solid var(--b2b-line);
	padding: 32px 16px 28px;
}
.b2bp .b2bp-acct-list > .b2bp-empty::before,
.b2bp .b2bp-st-ledger .b2bp-empty::before {
	background: var(--b2b-surface) no-repeat center / 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 13h6M9 17h3'/%3E%3C/svg%3E");
	border: 1px solid var(--b2b-line);
	border-radius: 10px;
	box-shadow: var(--b2b-shadow-xs);
	content: "";
	display: block;
	height: 40px;
	margin: 0 auto 12px;
	width: 40px;
}

/* Statement aging cards: a faint top-down tint; overdue buckets with money owing tint warm. */
.b2bp .b2bp-st-figure .b2bp-kpi {
	background: linear-gradient(180deg, var(--b2b-accent-tint) 0%, var(--b2b-surface) 72%);
}
.b2bp .b2bp-st-figure .b2bp-kpi:has(.b2bp-st-warn) {
	background: linear-gradient(180deg, var(--b2b-warning-tint) 0%, var(--b2b-surface) 72%);
}
.b2bp .b2bp-st-figure .b2bp-kpi:has(.b2bp-st-danger) {
	background: linear-gradient(180deg, var(--b2b-danger-tint) 0%, var(--b2b-surface) 72%);
}
.b2bp .b2bp-st-figure .b2bp-kpi:has(.b2bp-st-zero) {
	background: var(--b2b-surface);
}
.b2bp .b2bp-st-figure .b2bp-st-lead {
	background: linear-gradient(180deg, #fdf2e6 0%, var(--b2b-surface) 72%);
}

/* ----- 10. Dialogs (SweetAlert2 v7: print, logout, add / delete confirmations, alerts) ------------- */

/* Every swal( dialog in the portal, shadcn Dialog anatomy: dark blurred backdrop; 440px white card with a
   slate-200 ring and deep elevation; header zone (icon chip, title, description) padded 24; optional body
   (print options, below a hairline); footer band (slate-50, top hairline, full card width) with right-aligned
   36px actions (Cancel outline, Confirm primary). Toasts (footer.js)
   are .swal2-toast, not .swal2-modal, and keep their own look. SweetAlert2 v7 removes the dialog on the
   popup's animationend, so the popup must always run an animation (reduced motion: opacity only). */
body.b2bp:not(.swal2-toast-shown) > .swal2-container {
	padding: 16px;
}
body.b2bp:not(.swal2-toast-shown) > .swal2-container.swal2-shown {
	-webkit-animation: b2bp-dlg-fade var(--b2b-dur-3) ease both;
	animation: b2bp-dlg-fade var(--b2b-dur-3) ease both;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	background-color: rgba(2, 6, 23, .55);
}
body.b2bp:not(.swal2-toast-shown) > .swal2-container.swal2-shown:has(> .swal2-hide) {
	-webkit-animation: b2bp-dlg-fade-out var(--b2b-dur-1) ease forwards;
	animation: b2bp-dlg-fade-out var(--b2b-dur-1) ease forwards;
}
/* width: the print dialogs pass width 450 inline; one 440px card for every dialog. */
body.b2bp .swal2-popup.swal2-modal {
	border: 1px solid #e2e8f0;
	border-radius: var(--b2b-radius-lg);
	box-shadow: 0 0 0 1px rgba(2, 6, 23, .04), 0 24px 48px -12px rgba(2, 6, 23, .35), var(--b2b-shadow-lg);
	color: var(--b2b-ink);
	font-family: var(--b2b-font);
	font-size: 14px;
	max-width: calc(100vw - 32px);
	padding: 24px;
	width: 440px !important;
}
body.b2bp .swal2-popup.swal2-modal.swal2-show {
	-webkit-animation: b2bp-dlg-in var(--b2b-dur-3) var(--b2b-ease-out) both;
	animation: b2bp-dlg-in var(--b2b-dur-3) var(--b2b-ease-out) both;
}
body.b2bp .swal2-popup.swal2-modal.swal2-hide {
	-webkit-animation: b2bp-dlg-out var(--b2b-dur-1) ease-in forwards;
	animation: b2bp-dlg-out var(--b2b-dur-1) ease-in forwards;
}
/* Header row: icon chip (native .swal2-icon or the ::before chip below) level with the title, 12px gap.
   --b2bp-dlg-chip is the chip size (36px on phones); the description is indented to the title text. */
body.b2bp .swal2-popup.swal2-modal {
	--b2bp-dlg-chip: 40px;
}
/* The title's first line is centred on the chip by padding (chip - 26px line) / 2, so a two-line title
   (long list names) grows downward and keeps a 6px gap above the description. */
body.b2bp .swal2-popup.swal2-modal .swal2-header {
	align-items: flex-start;
	flex-direction: row;
	gap: 12px;
	padding-right: 24px;
}
body.b2bp .swal2-popup.swal2-modal .swal2-title {
	color: var(--b2b-ink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 26px;
	margin: 0;
	min-width: 0;
	padding: calc((var(--b2bp-dlg-chip) - 26px) / 2) 0 6px;
	text-align: left;
}
body.b2bp .swal2-popup.swal2-modal .swal2-content,
body.b2bp .swal2-popup.swal2-modal #swal2-content {
	color: #475569;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	text-align: left;
}
body.b2bp .swal2-popup.swal2-modal .swal2-title:empty {
	margin: 0;
	padding: 0;
}
/* No title (logout "Proceed to logout?"): the one line is the question, so it reads as the heading. */
body.b2bp .swal2-popup.swal2-modal:has(.swal2-title:empty) #swal2-content {
	color: var(--b2b-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
/* Dialogs with a chip: description under the title text, 4px below the title line. */
body.b2bp .swal2-popup.swal2-modal:has(.swal2-icon[style*="flex"], .b2bp-dlg-options, .swal2-title:empty) #swal2-content,
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain #swal2-content {
	margin-top: 0;
	padding-left: calc(var(--b2bp-dlg-chip) + 12px);
}
/* No title: the question moves up into the header row, centred on the chip. */
body.b2bp .swal2-popup.swal2-modal:has(.swal2-icon[style*="flex"], .b2bp-dlg-options, .swal2-title:empty):has(.swal2-title:empty) #swal2-content {
	margin-top: calc(-1 * var(--b2bp-dlg-chip));
	min-height: var(--b2bp-dlg-chip);
	padding-top: calc((var(--b2bp-dlg-chip) - 24px) / 2);
}
/* Print: only the description is indented; the options body keeps the full card width. */
body.b2bp .swal2-popup.swal2-modal:has(.swal2-icon[style*="flex"], .b2bp-dlg-options, .swal2-title:empty):has(.b2bp-dlg-options) #swal2-content {
	padding-left: 0;
}
body.b2bp .swal2-popup.swal2-modal:has(.b2bp-dlg-options) .b2bp-dlg-desc {
	padding-left: calc(var(--b2bp-dlg-chip) + 12px);
}

/* Icons: the 80px animated rings become a 40px tinted chip with an outline glyph. */
body.b2bp .swal2-popup.swal2-modal .swal2-icon {
	-webkit-animation: b2bp-dlg-fade var(--b2b-dur-3) ease both;
	animation: b2bp-dlg-fade var(--b2b-dur-3) ease both;
	background: var(--b2b-accent-tint) no-repeat center / 20px 20px;
	border: 0;
	border-radius: 999px;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: var(--b2bp-dlg-chip);
	line-height: var(--b2bp-dlg-chip);
	margin: 0;
	min-width: var(--b2bp-dlg-chip);
	width: var(--b2bp-dlg-chip);
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon > * {
	display: none !important;
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon.swal2-warning {
	background-color: var(--b2b-warning-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon.swal2-error {
	background-color: var(--b2b-danger-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon.swal2-success {
	background-color: var(--b2b-success-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f37' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon.swal2-info {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f56c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal .swal2-icon.swal2-question {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f56c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
}

/* Header chip for dialogs that pass no (v7-known) type: print (printer), logout (.b2bp-dlg-logout: log-out,
   slate) and other confirmations without a title (question). */
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain:not(:has(.swal2-icon[style*="flex"])) .swal2-header::before,
body.b2bp .swal2-popup.swal2-modal:has(.b2bp-dlg-options):not(:has(.swal2-icon[style*="flex"])) .swal2-header::before,
body.b2bp .swal2-popup.swal2-modal:has(.swal2-title:empty):not(:has(.swal2-icon[style*="flex"])) .swal2-header::before {
	background: var(--b2b-accent-tint) no-repeat center / 20px 20px;
	border-radius: 999px;
	content: "";
	flex: 0 0 auto;
	height: var(--b2bp-dlg-chip);
	margin: 0;
	width: var(--b2bp-dlg-chip);
}
body.b2bp .swal2-popup.swal2-modal:has(.swal2-title:empty):not(:has(.swal2-icon[style*="flex"])) .swal2-header::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f56c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal:has(.b2bp-dlg-options):not(:has(.swal2-icon[style*="flex"])) .swal2-header::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f56c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-logout:not(:has(.swal2-icon[style*="flex"])) .swal2-header::before {
	background-color: var(--b2b-secondary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

/* Close (x), only where a page asks for showCloseButton. */
body.b2bp .swal2-popup.swal2-modal .swal2-close {
	align-items: center;
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-ink-3);
	display: flex;
	font-family: var(--b2b-font);
	font-size: 22px;
	height: 32px;
	line-height: 1;
	right: 12px;
	top: 12px;
	transition: background-color var(--b2b-dur-1) ease, color var(--b2b-dur-1) ease;
	width: 32px;
}
body.b2bp .swal2-popup.swal2-modal .swal2-close:hover {
	background: var(--b2b-secondary);
	color: var(--b2b-ink);
}
body.b2bp .swal2-popup.swal2-modal .swal2-close:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2b-primary);
	outline: none;
}

/* Actions: DOM order is Confirm, Cancel; row-reverse puts Confirm at the far right, Cancel before it.
   SweetAlert writes confirmButtonColor / cancelButtonColor inline, hence !important on the fills. */
/* Footer band: negative margins stretch .swal2-actions over the card's 24px padding to its edges. */
body.b2bp .swal2-popup.swal2-modal .swal2-actions {
	background: #f8fafc;
	border-radius: 0 0 calc(var(--b2b-radius-lg) - 1px) calc(var(--b2b-radius-lg) - 1px);
	border-top: 1px solid #e2e8f0;
	box-sizing: border-box;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
	margin: 24px -24px -24px;
	padding: 16px 24px;
	width: calc(100% + 48px);
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled {
	align-items: center;
	background-image: none;
	border: 1px solid transparent;
	border-radius: var(--b2b-radius-btn);
	box-shadow: var(--b2b-shadow-xs);
	display: inline-flex;
	font-family: var(--b2b-font);
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	height: 36px;
	justify-content: center;
	line-height: 20px;
	margin: 0;
	min-width: 80px;
	padding: 0 16px;
	width: auto; /* custom.css fixes .swal2-styled at 150px */
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease, transform var(--b2b-dur-1) var(--b2b-ease-out);
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm {
	background-color: var(--b2b-primary) !important;
	color: var(--b2b-primary-fg);
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover {
	background-color: var(--b2b-primary-hover) !important;
	background-image: none;
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
	background-color: var(--b2b-primary-active) !important;
	background-image: none;
}
/* Print dialogs (they hold .b2bp-dlg-options): printer glyph before "Print", drawn in currentColor. */
body.b2bp .swal2-popup.swal2-modal:has(.b2bp-dlg-options) .swal2-actions:not(.swal2-loading) .swal2-confirm::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	width: 16px;
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel {
	background-color: var(--b2b-surface) !important;
	border-color: var(--b2b-outline-line) !important; /* swal writes border-left / -right colour inline */
	color: var(--b2b-secondary-fg);
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:hover,
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:active {
	background-color: var(--b2b-secondary) !important;
	background-image: none;
}
/* Retention dialogs (.b2bp-dlg-retain: logout; delete confirmations moved to .b2bp-dlg-confirm below). The safe choice keeps the customer in the portal,
   so it is the primary, focused button (focusCancel) on the right; the leaving / destructive choice stays one
   click away but quiet, on the left: outline for "Sign out". DOM order is
   Confirm, Cancel, so a plain row puts Cancel at the right (phones: column-reverse puts it on top). */
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions {
	flex-direction: row;
	justify-content: flex-end;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel {
	background-color: var(--b2b-primary) !important;
	border-color: transparent !important;
	color: var(--b2b-primary-fg);
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:hover {
	background-color: var(--b2b-primary-hover) !important;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:active {
	background-color: var(--b2b-primary-active) !important;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm {
	background-color: var(--b2b-surface) !important;
	border-color: var(--b2b-outline-line) !important;
	color: var(--b2b-secondary-fg);
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover,
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
	background-color: var(--b2b-secondary) !important;
}

/* Delete / remove confirmations (.b2bp-dlg-confirm: cart remove item, empty cart, compare clear all, delete
   list). Same card, chip, layout and motion as the dialogs above; only the colours, the buttons and the title
   change. The question is the title, bold and centred on the card (with an icon, the header's right padding
   mirrors the chip); the warning chip (type "warning") turns red, colour only; two equal 44px
   buttons in one row on every width: Cancel first (reverseButtons), filled red-700 and focused (focusCancel),
   the destructive choice red outline on the right. red-700 #b91c1c: white on it and it on white 6.5:1. */
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm {
	--b2bp-dlg-red: #b91c1c;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-header {
	padding-right: 0;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm:has(.swal2-icon[style*="flex"]) .swal2-header {
	padding-right: calc(var(--b2bp-dlg-chip) + 12px);
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-title {
	color: #0f172a;
	flex: 1 1 auto;
	text-align: center;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-icon.swal2-warning {
	background-color: var(--b2b-danger-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled {
	flex: 1 1 0;
	height: 44px;
	min-width: 0;
	width: auto;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel {
	background-color: var(--b2bp-dlg-red) !important;
	border-color: var(--b2bp-dlg-red) !important;
	color: #fff;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:hover {
	background-color: #991b1b !important;
	border-color: #991b1b !important;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:active {
	background-color: #7f1d1d !important;
	border-color: #7f1d1d !important;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm {
	background-color: var(--b2b-surface) !important;
	border-color: var(--b2bp-dlg-red) !important;
	color: var(--b2bp-dlg-red);
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover,
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
	background-color: #fef2f2 !important;
	border-color: var(--b2bp-dlg-red) !important;
	color: #991b1b;
}
body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-styled:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2bp-dlg-red);
}
@media (max-width: 479.98px) {
	body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions {
		flex-direction: row;
	}
	body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-confirm .swal2-actions:not(.swal2-loading) .swal2-styled {
		width: auto;
	}
}
body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled:active {
	-webkit-transform: scale(.97);
	transform: scale(.97);
}
body.b2bp .swal2-popup.swal2-modal .swal2-styled:focus {
	box-shadow: var(--b2b-shadow-xs);
	outline: none;
}
body.b2bp .swal2-popup.swal2-modal .swal2-styled:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2b-primary);
}
body.b2bp .swal2-popup.swal2-modal .swal2-styled[disabled] {
	cursor: not-allowed;
	opacity: .5;
}
body.b2bp .swal2-popup.swal2-modal .swal2-footer {
	border-top-color: var(--b2b-line);
	color: var(--b2b-ink-2);
	font-size: 13px;
	justify-content: flex-start;
	margin-top: 20px;
	padding-top: 16px;
}

/* Text input (cart "Customer List Title") and its validation line. */
body.b2bp .swal2-popup.swal2-modal .swal2-input {
	border: 1px solid var(--b2b-field-line);
	border-radius: var(--b2b-radius-ctl);
	box-shadow: none;
	color: var(--b2b-ink);
	font-size: 14px;
	height: 40px;
	margin: 16px 0 0;
	padding: 0 12px;
	transition: border-color var(--b2b-dur-1) ease, box-shadow var(--b2b-dur-1) ease;
}
body.b2bp .swal2-popup.swal2-modal .swal2-input:focus {
	border-color: var(--b2b-primary);
	box-shadow: var(--b2b-ring);
}
body.b2bp .swal2-popup.swal2-modal .swal2-input::placeholder {
	color: var(--b2b-ink-3);
}
body.b2bp .swal2-popup.swal2-modal .swal2-input.swal2-inputerror {
	border-color: var(--b2b-danger) !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .18) !important;
}
body.b2bp .swal2-popup.swal2-modal .swal2-validationerror {
	background: var(--b2b-danger-tint);
	border-radius: var(--b2b-radius-ctl);
	color: var(--b2b-danger);
	font-size: 13px;
	font-weight: 500;
	justify-content: flex-start;
	margin-top: 8px;
	padding: 8px 10px;
}
body.b2bp .swal2-popup.swal2-modal .swal2-validationerror::before {
	background-color: var(--b2b-danger);
	height: 18px;
	line-height: 18px;
	margin: 0 8px 0 0;
	min-width: 18px;
	width: 18px;
}

/* Print options (quotes, orders, invoices): a bordered checkbox row per option. The inputs keep their
   ids (#swal-showDetails, #swal-billingAddress), defaults and .checked reads. */
body.b2bp .b2bp-dlg-desc {
	margin: 0;
}
/* Body zone: a hairline across the card separates it from the header (title + description). */
body.b2bp .b2bp-dlg-options {
	border-top: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 20px -24px 0;
	padding: 20px 24px 0;
}
body.b2bp .b2bp-dlg-check {
	align-items: center;
	border: 1px solid var(--b2b-line);
	border-radius: var(--b2b-radius-btn);
	color: var(--b2b-ink);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	margin: 0;
	min-height: 44px;
	padding: 10px 12px;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
	-webkit-user-select: none;
	user-select: none;
}
body.b2bp .b2bp-dlg-check:has(input:checked) {
	background: var(--b2b-accent-tint);
	border-color: var(--b2b-accent-line);
}
body.b2bp .b2bp-dlg-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--b2b-surface) no-repeat center / 12px 12px;
	border: 1px solid var(--b2b-line-strong);
	border-radius: 4px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 16px;
	margin: 0;
	transition: background-color var(--b2b-dur-1) ease, border-color var(--b2b-dur-1) ease;
	width: 16px;
}
body.b2bp .b2bp-dlg-check input[type="checkbox"]:checked {
	background-color: var(--b2b-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	border-color: var(--b2b-primary);
}
body.b2bp .b2bp-dlg-check input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 2px var(--b2b-surface), 0 0 0 4px var(--b2b-primary);
	outline: none;
}
body.b2bp .b2bp-dlg-check-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
body.b2bp .b2bp-dlg-check-hint {
	color: var(--b2b-ink-3);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}
@media (hover: hover) and (pointer: fine) {
	body.b2bp .b2bp-dlg-check:hover {
		background: var(--b2b-subtle);
	}
	body.b2bp .b2bp-dlg-check:has(input:checked):hover {
		background: #e4ecfb;
	}
}

/* Phone: full-width stacked actions, Confirm on top, 44px targets. */
@media (max-width: 479.98px) {
	body.b2bp .swal2-popup.swal2-modal {
		--b2bp-dlg-chip: 36px;
		padding: 20px;
	}
	body.b2bp .swal2-popup.swal2-modal .swal2-actions {
		flex-direction: column;
		margin: 20px -20px -20px;
		padding: 16px 20px;
		width: calc(100% + 40px);
	}
	body.b2bp .swal2-popup.swal2-modal.b2bp-dlg-retain .swal2-actions {
		flex-direction: column-reverse;
	}
	body.b2bp .b2bp-dlg-options {
		margin: 16px -20px 0;
		padding: 16px 20px 0;
	}
	body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled {
		height: 44px;
		width: 100%;
	}
}
@media (max-width: 767.98px) {
	body.b2bp .swal2-popup.swal2-modal .swal2-close {
		height: 44px;
		right: 6px;
		top: 6px;
		width: 44px;
	}
}

@-webkit-keyframes b2bp-dlg-in {
	from { opacity: 0; -webkit-transform: scale(.96); transform: scale(.96); }
	to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes b2bp-dlg-in {
	from { opacity: 0; -webkit-transform: scale(.96); transform: scale(.96); }
	to { opacity: 1; -webkit-transform: none; transform: none; }
}
@-webkit-keyframes b2bp-dlg-out {
	from { opacity: 1; -webkit-transform: none; transform: none; }
	to { opacity: 0; -webkit-transform: scale(.97); transform: scale(.97); }
}
@keyframes b2bp-dlg-out {
	from { opacity: 1; -webkit-transform: none; transform: none; }
	to { opacity: 0; -webkit-transform: scale(.97); transform: scale(.97); }
}
@-webkit-keyframes b2bp-dlg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes b2bp-dlg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes b2bp-dlg-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes b2bp-dlg-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.b2bp .swal2-popup.swal2-modal.swal2-show {
		-webkit-animation: b2bp-dlg-fade var(--b2b-dur-2) ease both;
		animation: b2bp-dlg-fade var(--b2b-dur-2) ease both;
	}
	body.b2bp .swal2-popup.swal2-modal.swal2-hide {
		-webkit-animation: b2bp-dlg-fade-out var(--b2b-dur-1) ease forwards;
		animation: b2bp-dlg-fade-out var(--b2b-dur-1) ease forwards;
	}
	body.b2bp .swal2-popup.swal2-modal .swal2-actions:not(.swal2-loading) .swal2-styled:active {
		-webkit-transform: none;
		transform: none;
	}
}

/* Toasts (showB2BToast in footer.js: "Added to cart", "Removed from cart", ...), shadcn Sonner look: one white
   card under the header, status icon on the left, title over the optional text. The layout lives here only;
   footer.js used to rebuild the popup from the close promise, which drew a second, wider toast as it faded.
   SweetAlert sets display:flex inline on show, hence the !important on display. */
body.b2bp.swal2-toast-shown > .swal2-container.swal2-top {
	min-width: 0;
	top: 12px;
}
body.b2bp .swal2-popup.swal2-toast {
	-webkit-column-gap: 12px;
	align-items: center;
	background: var(--b2b-surface);
	border: 1px solid #e2e8f0;
	border-radius: var(--b2b-radius);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06);
	column-gap: 12px;
	display: grid !important;
	font-family: var(--b2b-font);
	grid-template-columns: auto minmax(0, 1fr);
	max-width: calc(100vw - 32px);
	min-width: 280px;
	padding: 12px 18px 12px 14px;
	width: auto;
}
body.b2bp .swal2-popup.swal2-toast .swal2-header {
	display: contents;
}
body.b2bp .swal2-popup.swal2-toast .swal2-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}
body.b2bp .swal2-popup.swal2-toast .swal2-title {
	color: var(--b2b-ink);
	font-size: 14px;
	font-weight: 600;
	grid-column: 2;
	grid-row: 1;
	line-height: 20px;
	margin: 0;
	text-align: left;
}
body.b2bp .swal2-popup.swal2-toast .swal2-content {
	color: var(--b2b-ink-2);
	font-size: 13px;
	grid-column: 2;
	grid-row: 2;
	justify-content: flex-start;
	line-height: 18px;
	margin: 2px 0 0;
	padding: 0;
	text-align: left;
}


/* ----- 9. Motion ------------------------------------------------------------------------------------ */
/* Shared motion (DESIGN-r2 "Motion"). Only transform, opacity and filter animate. Tokens: --b2b-dur-1..4
   (120/180/240/360ms), --b2b-ease-out (enter), --b2b-ease-io (move). Utilities for every section:

     .b2bp-enter          staggered entrance: fade + 6px rise; set style="--i:N" (0, 1, 2 ...) per item,
                          delay = 60ms + N x 40ms, capped at 480ms. Use on cards, KPI tiles, list rows.
     .b2bp-press          press scale .97 on :active (all .btn get this automatically).
     .b2bp-press-card     press scale .985 on :active, for clickable cards / tiles (a.card gets it).
     .b2bp-lift           fine-pointer hover: 1px rise + shadow-md, for clickable cards.
     .b2bp-fade-in        one-off fade (dur-3), no movement.
     .b2bp-skel           skeleton bar (4.11); shimmers here, pulses under reduced motion.
     .dropdown-menu.show  grows from its trigger (automatic).
     main.content         fades in with a 4px rise once per page load (automatic; not on login).
     Keyframes            b2bp-fade, b2bp-rise, b2bp-grow, b2bp-shimmer, b2bp-pulse, b2bp-bump (3.4)
     JS (b2b-portal.js)   B2BP.bump(el) replays the badge bump; B2BP.reducedMotion() -> true / false.

   prefers-reduced-motion: entrances and dropdowns keep a plain fade, every transform (rise, press, lift,
   bump, shimmer, sidebar slide) is dropped. */

@keyframes b2bp-fade {
	from {
		opacity: 0;
	}
}
@keyframes b2bp-rise {
	from {
		opacity: 0;
		transform: translateY(var(--b2bp-rise, 6px));
	}
}
@keyframes b2bp-grow {
	from {
		opacity: 0;
		scale: .97;
		translate: 0 -4px;
	}
}
@keyframes b2bp-shimmer {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(100%);
	}
}
@keyframes b2bp-pulse {
	50% {
		opacity: .55;
	}
}

/* Page content: once per load. fill-mode backwards leaves no transform on the element afterwards, so
   sticky and fixed descendants behave normally once it ends. */
.b2bp main.content:not(.b2bp-login) {
	--b2bp-rise: 4px;
	animation: b2bp-rise var(--b2b-dur-3) var(--b2b-ease-out) backwards;
}
.b2bp .b2bp-enter {
	animation: b2bp-rise var(--b2b-dur-4) var(--b2b-ease-out) backwards;
	animation-delay: min(calc(60ms + var(--i, 0) * 40ms), 480ms);
}
.b2bp .b2bp-fade-in {
	animation: b2bp-fade var(--b2b-dur-3) ease backwards;
}

/* Press */
body.b2bp .btn:not(:disabled):not(.disabled):active,
.b2bp .b2bp-press:active {
	transform: scale(.97);
}
.b2bp .b2bp-press {
	transition: transform var(--b2b-dur-1) var(--b2b-ease-out);
}
.b2bp a.card,
.b2bp .b2bp-press-card,
.b2bp .b2bp-lift {
	transition: transform var(--b2b-dur-2) var(--b2b-ease-out), box-shadow var(--b2b-dur-2) ease;
}
.b2bp a.card:active,
.b2bp .b2bp-press-card:active {
	transform: scale(.985);
}
@media (hover: hover) and (pointer: fine) {
	.b2bp .b2bp-lift:hover {
		box-shadow: var(--b2b-shadow-md);
		transform: translateY(-1px);
	}
	.b2bp .b2bp-lift:active {
		transform: scale(.985);
	}
}

/* Dropdowns grow from the trigger. The individual scale / translate properties are used because Popper
   positions the menu with an inline transform. */
.b2bp .dropdown-menu.show {
	animation: b2bp-grow var(--b2b-dur-2) var(--b2b-ease-out);
	transform-origin: top center;
}
.b2bp .dropdown-menu-end.show,
.b2bp .dropdown-menu[data-bs-popper].dropdown-menu-end.show {
	transform-origin: top right;
}
.b2bp .dropdown-menu[data-popper-placement^="top"].show,
.b2bp .dropup .dropdown-menu.show {
	animation-name: b2bp-fade;
	transform-origin: bottom center;
}

/* Skeleton shimmer */
.b2bp .b2bp-skel::after {
	animation: b2bp-shimmer 1.4s var(--b2b-ease-io) infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
	content: "";
	inset: 0;
	position: absolute;
	transform: translateX(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.b2bp main.content:not(.b2bp-login),
	.b2bp .b2bp-enter,
	.b2bp .dropdown-menu.show {
		animation-name: b2bp-fade;
	}
	body.b2bp .btn:not(:disabled):not(.disabled):active,
	.b2bp .b2bp-press:active,
	.b2bp a.card:active,
	.b2bp .b2bp-press-card:active,
	.b2bp .b2bp-lift:hover,
	.b2bp .b2bp-lift:active,
	.b2bp .navbar-theme .navbar-nav .nav-link:active,
	.b2bp .sidebar-toggle:active,
	.b2bp a.b2bp-login-learn:hover > span {
		transform: none;
	}
	.b2bp .b2bp-count.b2bp-bump {
		animation: none;
	}
	.b2bp .b2bp-skel::after {
		animation: none;
		display: none;
	}
	.b2bp .b2bp-skel {
		animation: b2bp-pulse 1.6s ease-in-out infinite;
	}
}