/* =========================================================================
   BAYOUPEP USA — Wholesale program
   Notices, checkout terms, account panels and application form additions.
   Uses the design-system tokens so the wholesale flow reads as part of the
   site rather than a bolted-on plugin screen (UI-01, UI-02).
   ====================================================================== */

/* -------------------------------------------------------------------------
   The required wholesale notice (cart, checkout, before Place Order).
   Deliberately high-contrast: this must not read as fine print (spec 4.5).
   ---------------------------------------------------------------------- */
.bp-wh-notice {
	position: relative;
	margin: 0 0 24px;
	padding: 20px 22px 20px 26px;
	border: 1px solid rgba(var(--bp-primary-rgb), .45);
	border-left: 4px solid var(--bp-primary);
	border-radius: var(--bp-radius, 14px);
	background:
		linear-gradient(180deg, rgba(var(--bp-primary-rgb), .10), rgba(var(--bp-primary-rgb), .03)),
		var(--bp-glass, rgba(255, 255, 255, .03));
	box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.bp-wh-notice__title {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--bp-display, inherit);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.35;
}

.bp-wh-notice__text {
	margin: 0;
	color: var(--bp-muted, #b8b8c8);
	font-size: 14px;
	line-height: 1.7;
}

.bp-wh-notice__points {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.bp-wh-notice__points li {
	position: relative;
	padding-left: 22px;
	color: var(--bp-ink, #ececf2);
	font-size: 13.5px;
	line-height: 1.6;
}

.bp-wh-notice__points li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bp-primary);
	box-shadow: 0 0 10px rgba(var(--bp-primary-rgb), .9);
}

.bp-wh-notice__points strong { color: #fff; }

/* -------------------------------------------------------------------------
   The terms list + acknowledgement checkbox at checkout.
   ---------------------------------------------------------------------- */
.bp-wh-terms {
	margin: 0 0 16px;
	padding: 18px 20px;
	border: 1px solid var(--bp-line, rgba(255, 255, 255, .1));
	border-radius: var(--bp-radius-sm, 10px);
	background: rgba(255, 255, 255, .02);
}

.bp-wh-terms__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bp-wh-terms__list {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 6px;
	color: var(--bp-muted, #b8b8c8);
	font-size: 13.5px;
	line-height: 1.65;
}

/* The checkbox row itself — large tap target, never clipped on mobile. */
.woocommerce form .form-row.bp-wh-ack,
.bp-wh-ack {
	display: block;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid rgba(var(--bp-primary-rgb), .4);
	border-radius: var(--bp-radius-sm, 10px);
	background: rgba(var(--bp-primary-rgb), .07);
}

.bp-wh-ack label,
.bp-wh-ack .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--bp-ink, #ececf2);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
	overflow: visible;
	white-space: normal;
}

.bp-wh-ack input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--bp-primary);
	cursor: pointer;
}

.bp-wh-ack .required { color: #ff6b6b; }

/* -------------------------------------------------------------------------
   "Wholesale price" cue on the product page.
   ---------------------------------------------------------------------- */
.bp-wh-pricetag {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px;
	border: 1px solid rgba(var(--bp-primary-rgb), .55);
	border-radius: 999px;
	background: rgba(var(--bp-primary-rgb), .14);
	color: var(--bp-primary-hover, #3a6af0);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
   My Account -> Wholesale
   ---------------------------------------------------------------------- */
.bp-wh-acct-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.bp-wh-acct-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

.bp-wh-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bp-wh-badge--ok   { background: rgba(26, 127, 55, .18);  border: 1px solid rgba(26, 127, 55, .5);  color: #4ade80; }
.bp-wh-badge--wait { background: rgba(178, 106, 0, .18);  border: 1px solid rgba(178, 106, 0, .5);  color: #fbbf24; }
.bp-wh-badge--err  { background: rgba(179, 45, 46, .18);  border: 1px solid rgba(179, 45, 46, .5);  color: #f87171; }

.bp-wh-acct-note {
	margin: 0 0 14px;
	color: var(--bp-muted, #b8b8c8);
	font-size: 14px;
	line-height: 1.7;
}

.bp-wh-acct-terms {
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid var(--bp-line, rgba(255, 255, 255, .1));
	border-radius: var(--bp-radius-sm, 10px);
	background: rgba(255, 255, 255, .02);
}

.bp-wh-acct-terms h3 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bp-wh-acct-terms ul {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 6px;
	color: var(--bp-muted, #b8b8c8);
	font-size: 13.5px;
	line-height: 1.65;
}

.bp-wh-acct-sub {
	margin: 26px 0 12px;
	font-size: 16px;
}

/* The orders table must scroll inside itself rather than pushing the page
   sideways on a phone (UI-04). */
.bp-wh-orders {
	width: 100%;
	border-collapse: collapse;
}

.bp-wh-orders th,
.bp-wh-orders td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--bp-line, rgba(255, 255, 255, .1));
	font-size: 13.5px;
	text-align: left;
	white-space: nowrap;
}

.bp-wh-orders th {
	color: var(--bp-muted, #b8b8c8);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Application form additions (section legends, checkbox rows).
   ---------------------------------------------------------------------- */
.bp-pf-legend {
	grid-column: 1 / -1;
	margin: 18px 0 2px;
	color: var(--bp-primary-hover, #3a6af0);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bp-pf-legend:first-child { margin-top: 0; }

.bp-pf-agree {
	display: grid;
	gap: 12px;
	margin: 18px 0 4px;
	padding: 16px 18px;
	border: 1px solid var(--bp-line, rgba(255, 255, 255, .1));
	border-radius: var(--bp-radius-sm, 10px);
	background: rgba(255, 255, 255, .02);
}

.bp-pf-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--bp-ink, #ececf2);
	font-size: 13.5px;
	line-height: 1.6;
	cursor: pointer;
}

.bp-pf-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--bp-primary);
	cursor: pointer;
}

.bp-pf-check a { color: var(--bp-primary-hover, #3a6af0); }

.bp-pf-check--inline {
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--bp-muted, #b8b8c8);
}

.bp-pf-agree__note {
	margin: 0;
	color: var(--bp-muted, #b8b8c8);
	font-size: 13px;
	line-height: 1.7;
}

.bp-pf-agree__note strong { color: #fff; }

/* Mirrored shipping address reads as derived, not editable. */
#bp-wh-ship-addr.is-mirrored {
	opacity: .6;
	cursor: not-allowed;
}

/* Affiliate: pending-approval panel replacing the referral tools. */
.bp-aff-pending {
	margin: 0 0 20px;
	padding: 22px 24px;
	border-radius: var(--bp-radius, 14px);
}

.bp-aff-pending__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.bp-aff-pending__text {
	margin: 0 0 10px;
	color: var(--bp-muted, #b8b8c8);
	font-size: 14px;
	line-height: 1.7;
}

.bp-aff-pending__text:last-child { margin-bottom: 0; }
.bp-aff-pending__text strong { color: #fff; }

.bp-aff-note--terms {
	margin-top: 10px;
	font-size: 13px;
	opacity: .85;
}

/* -------------------------------------------------------------------------
   Mobile (UI-03, UI-04): nothing clipped, nothing overflowing.
   ---------------------------------------------------------------------- */
@media (max-width: 782px) {
	.bp-wh-notice {
		padding: 16px 16px 16px 20px;
		border-radius: var(--bp-radius-sm, 10px);
	}

	.bp-wh-notice__title { font-size: 15px; }
	.bp-wh-notice__text,
	.bp-wh-notice__points li { font-size: 13px; }

	.bp-wh-terms,
	.bp-wh-acct-terms,
	.bp-pf-agree { padding: 14px 15px; }

	.bp-wh-ack { padding: 13px 14px; }
	.bp-wh-ack label { font-size: 13.5px; }

	/* Let the orders table scroll on its own instead of the page. */
	.bp-wh-account .bp-wh-orders {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.bp-wh-acct-title { font-size: 19px; }
}

@media (max-width: 480px) {
	.bp-wh-notice__points li { padding-left: 18px; }
	.bp-pf-legend { font-size: 10.5px; }
}

/* -------------------------------------------------------------------------
   Cart page placement.

   The cart page is a two-column grid (items left, order summary right), and
   woocommerce.css lists which direct children span both columns — the hero,
   the notices wrapper, cart-empty, return-to-shop and woocommerce-info.

   The wholesale notices were never added to that list, so the grid
   auto-placed them into a single cell and left the cell beside them empty.
   That empty cell rendered as a tall blank gap between the page heading and
   the cart table, roughly the height of the notice itself.

   These are full-width announcements about the whole order, not column
   content, so they span both tracks. This also keeps the notice above the
   fold on the cart page instead of pushing the items down.
   ---------------------------------------------------------------------- */
.woocommerce-cart .woocommerce > .bp-wh-notice,
.woocommerce-cart .woocommerce > .bp-wh-min-notice,
.woocommerce-cart .woocommerce > .bp-wh-terms {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}

/* The minimum notice renders inside the cart form, directly above the table.
   Keep its spacing tight so the two notices do not read as separate blocks
   floating apart from the items they describe. */
.woocommerce-cart .woocommerce-cart-form .bp-wh-min-notice {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   Minimum-order notice (cart + checkout).

   Built from the design-system tokens rather than pale status colours. The
   first version used a light green/amber background with an inline text
   colour, which broke on this dark theme: the theme styles <strong> light for
   its own background, so "Minimum met." rendered near-white on pale green and
   was effectively invisible.

   Colour here is carried by the border, a low-opacity tint and the flag text,
   all over the site's dark surface — so nothing depends on inherited colours
   and every child element stays legible.
   ---------------------------------------------------------------------- */
.bp-wh-min-notice {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--bp-line);
	border-left: 4px solid var(--bp-muted, #8a8aa0);
	border-radius: var(--bp-radius-sm, 10px);
	background: var(--bp-glass, rgba(255, 255, 255, .03));
	color: var(--bp-ink, #ececf2);
	font-size: 14px;
	line-height: 1.65;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Force legibility on every descendant — the theme's global <strong> and link
   colours must not win inside this box. */
.bp-wh-min-notice,
.bp-wh-min-notice * {
	color: var(--bp-ink, #ececf2);
}

.bp-wh-min-notice .amount,
.bp-wh-min-notice bdi {
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

/* Minimum reached. */
.bp-wh-min-notice.is-met {
	border-left-color: #34c06a;
	background:
		linear-gradient(180deg, rgba(52, 192, 106, .12), rgba(52, 192, 106, .04)),
		var(--bp-glass, rgba(255, 255, 255, .03));
}

.bp-wh-min-notice.is-met .bp-wh-min-notice__flag {
	color: #5fe093;
	font-weight: 700;
}

/* Still short of the minimum. */
.bp-wh-min-notice.is-short {
	border-left-color: #e4b44c;
	background:
		linear-gradient(180deg, rgba(228, 180, 76, .12), rgba(228, 180, 76, .04)),
		var(--bp-glass, rgba(255, 255, 255, .03));
}

.bp-wh-min-notice.is-short .amount,
.bp-wh-min-notice.is-short bdi {
	color: #ffd98a;
}

/* On checkout the notice sits above the two-column form, so give it the same
   outer spacing as the wholesale notice above it. */
.woocommerce-checkout .bp-wh-min-notice {
	margin: 0 clamp(10px, 2vw, 28px) 20px;
}

/* =========================================================================
   Cart / checkout notice block — presentation pass.

   Three problems this fixes:

   1. Alignment. form.checkout carries its own side padding, and the two
      notices sit outside it, so the blue notice, the green notice and the
      Billing details panel below all started at slightly different left
      edges. They now share one inset so the column reads as a single edge.

   2. Height. The notice stacked its three confirmations as a vertical list,
      which pushed the actual checkout form a long way down the page. On
      desktop they now sit as a three-up row under a divider — the same
      information, roughly a third of the vertical space.

   3. Weight. Padding and type sizes were tuned for a standalone alert rather
      than a block sitting directly above a form.
   ====================================================================== */

/* --- shared inset so notices line up with the form beneath them --- */
.woocommerce-checkout .bp-wh-notice,
.woocommerce-checkout .bp-wh-min-notice {
	margin-left: clamp(10px, 2vw, 28px);
	margin-right: clamp(10px, 2vw, 28px);
}

.woocommerce-checkout .bp-wh-notice {
	margin-bottom: 12px;
}

.woocommerce-checkout .bp-wh-min-notice {
	margin-bottom: 22px;
}

/* --- tighter notice --- */
.woocommerce-cart .bp-wh-notice,
.woocommerce-checkout .bp-wh-notice {
	padding: 18px 22px 16px;
}

.bp-wh-notice__title {
	font-size: 15px;
	margin-bottom: 6px;
}

.bp-wh-notice__text {
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 92ch;
}

/* --- the three confirmations as a row, not a stack --- */
@media (min-width: 860px) {
	.bp-wh-notice__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px 26px;
		margin-top: 14px;
		padding-top: 13px;
		border-top: 1px solid var(--bp-line);
	}

	.bp-wh-notice__points li {
		font-size: 13px;
		line-height: 1.5;
	}
}

/* --- slimmer minimum bar --- */
.bp-wh-min-notice {
	padding: 12px 15px;
	font-size: 13.5px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Breathing room.

   The compacting pass above went too far: the notice, the minimum bar and the
   form beneath ended up almost touching, which reads as cramped rather than
   tidy. These values restore proper separation while keeping the three-up
   points row that saved the real vertical space.

   Spacing steps up as the blocks get more important: inside a box < between
   the two notices < between the notice group and the form. That rhythm is
   what makes a stack read as deliberate instead of collapsed.
   ---------------------------------------------------------------------- */

/* Clear the step indicator above. */
.woocommerce-checkout .bp-wh-notice,
.woocommerce-cart .woocommerce > .bp-wh-notice {
	margin-top: 18px;
}

/* Between the notice and the minimum bar. */
.woocommerce-checkout .bp-wh-notice,
.woocommerce-cart .woocommerce > .bp-wh-notice {
	margin-bottom: 20px;
}

/* Between the minimum bar and the form / cart table below it. */
.woocommerce-checkout .bp-wh-min-notice {
	margin-bottom: 38px;
}

.woocommerce-cart .bp-wh-min-notice {
	margin-bottom: 26px;
}

/* A little more room inside both boxes. */
.woocommerce-cart .bp-wh-notice,
.woocommerce-checkout .bp-wh-notice {
	padding: 22px 26px 20px;
}

.bp-wh-min-notice {
	padding: 15px 18px;
}

/* Let the points row settle away from the paragraph above it. */
@media (min-width: 860px) {
	.bp-wh-notice__points {
		gap: 12px 30px;
		margin-top: 18px;
		padding-top: 16px;
	}
}

/* -------------------------------------------------------------------------
   Private wholesale catalogue ([bayoupe_wholesale_catalog]).

   Built from the design-system tokens so the wholesale storefront reads as
   part of the site rather than a bare product list.
   ---------------------------------------------------------------------- */
.bp-whsf__intro {
	margin: 0 0 14px;
	color: var(--bp-muted, #b8b8c8);
	font-size: 14px;
}

.bp-whsf__filter {
	width: 100%;
	max-width: 420px;
	margin: 0 0 22px;
	padding: 12px 15px;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-sm, 10px);
	background: var(--bp-bg-2, rgba(255, 255, 255, .04));
	color: var(--bp-ink, #ececf2);
	font-size: 14px;
}

.bp-whsf__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 18px;
}

.bp-whsf__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius, 14px);
	background: var(--bp-glass, rgba(255, 255, 255, .03));
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bp-whsf__card:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--bp-primary-rgb), .5);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.bp-whsf__media img {
	width: 100%;
	height: auto;
	border-radius: var(--bp-radius-sm, 10px);
	background: var(--bp-bg-2, rgba(255, 255, 255, .04));
}

.bp-whsf__name {
	color: var(--bp-ink, #ececf2);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
}

.bp-whsf__case {
	color: var(--bp-muted, #b8b8c8);
	font-size: 12.5px;
}

.bp-whsf__price {
	margin-top: auto;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.bp-whsf-locked {
	padding: 22px 24px;
	border: 1px solid var(--bp-line);
	border-left: 4px solid var(--bp-primary);
	border-radius: var(--bp-radius, 14px);
	background: var(--bp-glass, rgba(255, 255, 255, .03));
}

@media (max-width: 520px) {
	.bp-whsf__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.bp-whsf__card { padding: 12px; }
}

/* -------------------------------------------------------------------------
   Catalogue pagination.

   Paging is done in the browser rather than with links, so the filter keeps
   searching the whole catalogue instead of only the page on screen. These are
   buttons, not anchors, and are styled to read as page controls.
   ---------------------------------------------------------------------- */
/* The script pages the grid by setting the `hidden` attribute on every card it
   is not showing. `hidden` is display:none in the user-agent stylesheet, and
   ANY author rule beats a user-agent one whatever the specificity — so
   .bp-whsf__card's own `display: flex` above was quietly overriding it and no
   card ever went away. That is what "the pagination is not working" was: the
   page buttons were fine, all 53 cards simply stayed on screen underneath
   them. */
.bp-whsf__card[hidden] {
	display: none !important;
}

.bp-whsf__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 32px 0 0;
}

.bp-whsf__pager:empty {
	display: none;
}

.bp-whsf__page {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-sm, 10px);
	background: var(--bp-glass, rgba(255, 255, 255, .03));
	color: var(--bp-ink, #ececf2);
	font-family: var(--bp-caps, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.bp-whsf__page:hover:not(:disabled):not(.is-current) {
	border-color: rgba(var(--bp-primary-rgb), .55);
	color: #fff;
}

.bp-whsf__page.is-current {
	background: var(--bp-primary);
	border-color: var(--bp-primary);
	color: #fff;
	cursor: default;
}

.bp-whsf__page:disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* Breathing room beneath the catalogue, so the last row of products does not
   sit hard against the footer. */
.bp-whsf {
	padding-bottom: clamp(48px, 7vw, 96px);
}

/* -------------------------------------------------------------------------
   Catalogue width.

   The page body sits inside .bp-wrap (capped at 1280px) and .bp-prose (capped
   at 820px). Those caps exist for reading — an article should not run the full
   width of a monitor — but a product grid is the opposite case: the narrower
   the column, the fewer products per row and the more scrolling to see the
   catalogue.

   Only the .bp-prose cap is lifted. The outer .bp-wrap stays, so the grid
   aligns with the header rather than running to the viewport edge.
   ---------------------------------------------------------------------- */
/* The page keeps the site container (.bp-wrap, 1280px) so the catalogue
   lines up with the header logo and navigation. Only the prose cap below is
   lifted — that one exists for reading line length and has no business
   constraining a product grid to 820px. */

.bp-whsf-page .bp-page__body .bp-prose {
	max-width: none;
}

/* With the full width available, allow more cards per row on large screens
   while keeping each one big enough to read. */
@media (min-width: 1400px) {
	.bp-whsf__grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 22px;
	}
}

/* -------------------------------------------------------------------------
   Approved-account banner on /wholesale/ (.bp-whsf-cta).

   Rendered by bp_whsf_wholesale_page_link() for signed-in wholesale
   customers and spliced into the page hero, directly under the subtitle.

   It previously had no styling at all and was prepended to the content,
   which on the Full-Bleed template meant it sat outside every container —
   pinned to the left edge of the viewport and hidden behind the fixed
   header, with only the button showing as a stray blue bar.
   ---------------------------------------------------------------------- */
.bp-whsf-cta {
	max-width: 620px;
	margin: 26px auto 0;
	padding: 18px 24px 22px;
	border: 1px solid rgba(var(--bp-primary-rgb), 0.32);
	border-radius: var(--bp-radius);
	background: var(--bp-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
}

.bp-whsf-cta__msg {
	margin: 0 0 16px;
	color: var(--bp-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* A live-status dot, matching the hero eyebrow above it. */
.bp-whsf-cta__msg strong {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bp-ink);
	font-weight: 600;
}

.bp-whsf-cta__msg strong::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}

.bp-whsf-cta__act {
	margin: 0;
}

@media (max-width: 640px) {
	.bp-whsf-cta {
		margin-top: 20px;
		padding: 16px 18px 20px;
	}

	.bp-whsf-cta .bp-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   "Wholesale account" notice above the price on a product page
   (.bp-wh-viewing, printed by bp_whord_notice()).

   Its styling used to be inline on the element: a #e8f1ff box with #12356b
   text, written for a light page. On this theme that put a bright light-mode
   panel in the middle of the product summary. Rebuilt from the design-system
   tokens, with the label reusing .bp-wh-pricetag's treatment so the two cues
   on that column read as a set.
   ---------------------------------------------------------------------- */
.bp-wh-viewing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid rgba(var(--bp-primary-rgb), .30);
	border-radius: var(--bp-radius-sm, 10px);
	background: rgba(var(--bp-primary-rgb), .10);
}

.bp-wh-viewing__tag {
	flex: none;
	padding: 3px 10px;
	border: 1px solid rgba(var(--bp-primary-rgb), .55);
	border-radius: 999px;
	background: rgba(var(--bp-primary-rgb), .16);
	color: var(--bp-primary-hover, #3a6af0);
	font-family: var(--bp-caps);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bp-wh-viewing__msg {
	color: var(--bp-muted, #c2c2d6);
	font-size: 14px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Case specification list on a product page (.bp-wh-case, printed by
   bp_whcat_case_meta()).

   It had no styling anywhere and rendered as a default browser bullet list —
   disc markers, browser margins, inline bold labels — directly above a
   styled buy box.

   Rebuilt as a spec block on the SAME grid as the variation rows below it:
   the 104px label column and 18px gutter here are deliberately identical to
   the ones in woocommerce.css (BUY BOX ALIGNMENT), so "Strengths", "Case
   quantity" and "Wholesale price" line up with "Amount" and "Quantity", and
   their values line up with the dropdowns and the add-to-cart button. Keep
   the two in step if either changes. No side padding, for the same reason.
   ---------------------------------------------------------------------- */
.bp-wh-case {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	border-top: 1px solid var(--bp-line);
}

.bp-wh-case li {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	align-items: baseline;
	gap: 4px 18px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--bp-line);
	color: var(--bp-ink);
	font-size: 14px;
	line-height: 1.55;
}

.bp-wh-case li::marker {
	content: "";
}

.bp-wh-case strong {
	color: var(--bp-muted);
	font-family: var(--bp-caps);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The value needs its own element: the li is a grid, so every child
   becomes a grid item. The price row holds two wc_price() spans plus
   text, which without this wrapper scatter across the cells instead of
   sitting on one line. */
.bp-wh-case__v {
	min-width: 0;
}

/* wc_price() wraps the figure, and the theme sets that span to display:block
   for the main price. Inline here, or the range breaks across three lines. */
.bp-wh-case .woocommerce-Price-amount {
	display: inline;
	color: var(--bp-ink);
	font-size: inherit;
	font-weight: 600;
}

@media (max-width: 560px) {
	.bp-wh-case li {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* -------------------------------------------------------------------------
   Doubled rule above the case spec list.

   Two elements were each drawing their own separator into the same gap:

     .woocommerce-product-details__short-description  border-bottom + 8px margin
     .bp-wh-case                                      border-top

   Because bp_whcat_show_case_info() runs at priority 25 and WooCommerce
   prints the short description at 20, the two are adjacent siblings — so the
   borders landed 8px apart and read as a double line above STRENGTHS.

   The short description's own bottom rule already separates it from what
   follows, so the spec list drops its top border rather than the other way
   round: that keeps the description looking the same as on every other
   product page, and keeps .bp-wh-case's own border-top for the case where it
   is rendered without a short description above it.
   ---------------------------------------------------------------------- */
.single-product div.product .woocommerce-product-details__short-description + .bp-wh-case {
	border-top: 0;
}

/* -------------------------------------------------------------------------
   Catalogue page chrome (/wholesale-catalog).

   Scoped to the .bp-whsf-page body class that bp_whsf_body_class() adds, so
   none of it reaches the other pages wholesale.css is loaded on.

   These rules used to be an inline <style> block built in PHP, addressed to
   .page-id-5210 and to a .bp-page__hero element that this template does not
   render — so the half of it that mattered had been doing nothing. They live
   here now, against the classes that are actually in the markup.
   ---------------------------------------------------------------------- */

/* The theme's generic page banner is replaced by the hero that
   bp_whsf_hero() prints at the top of the content. */
.bp-whsf-page .bp-banner {
	display: none;
}

/* The hero is emitted inside .bp-prose, which is a reading column. A hero is
   not, so it steps back out to the full width of the viewport. Both <html>
   and <body> are overflow-x: hidden site-wide, so 100vw cannot introduce a
   horizontal scrollbar here. */
.bp-whsf-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: clamp(26px, 4vw, 44px);
}

/* The page body pads 130px off its top to clear the fixed header, because on
   an ordinary page its first element is body copy that would otherwise sit
   underneath the navigation. The hero brings its own 120px of clearance for
   exactly the same reason — so here the two stacked up and the section's
   padding drew a 57px strip of bare page background between the header and
   the top of the hero. The hero's clearance is the one to keep: it is the
   element doing the covering. */
.bp-whsf-page .bp-page__body {
	padding-top: 0;
}

/* "WHOLESALE CATALOG" on one line.
 *
 * Two things were breaking it: .bp-legal-hero-inner caps at 880px, and the
 * title's own clamp() has a 48px floor. At the 92px ceiling the words need
 * about 940px, so they wrapped on every desktop; at the 48px floor they need
 * about 490px, so they wrapped on every phone too — the one width it held
 * together was somewhere in the middle.
 *
 * The column is widened to fit the line, and the size becomes purely
 * viewport-relative below the ceiling: this face renders the phrase at
 * roughly 10.25x its font size, so 8.2vw keeps it inside the hero's side
 * padding from a 320px phone upward, and it stops growing at the same 92px
 * the programme pages use.
 */
.bp-whsf-hero .bp-legal-hero-inner {
	max-width: 1120px;
}

.bp-whsf-hero .bp-legal-title {
	font-size: min(92px, 8.2vw);
	white-space: nowrap;
}

/* The page body carries an <h2> repeating the page title, which was there to
   introduce a catalogue that arrived with no heading of its own. The hero
   heading says it now, so the duplicate goes — matched through the hero so a
   second, genuine heading added to the page later is left alone. */
.bp-whsf-page .bp-prose > .bp-whsf-hero + h2 {
	display: none;
}

/* Content must be visible on arrival, not on scroll.

   The theme reveals .bp-reveal sections with an IntersectionObserver as they
   come into view. On a page whose whole purpose is a product list, and whose
   hero fills the first screen, that means arriving at what looks like a blank
   page until you happen to scroll. */
.bp-whsf-page .bp-page__body.bp-reveal,
.bp-whsf-page .bp-page__body .bp-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* A filter box the width of the grid reads as a search bar for the site. */
.bp-whsf-page .bp-whsf__filter {
	max-width: 340px;
}