/**
 * Bernard Spillane - product listings.
 *
 * ALL custom CSS for the [bernard_products] shortcode lives in this one file,
 * for both layouts:
 *
 *   PART 1  Quote CTA          - applies to BOTH layouts, so the fix reaches all
 *                                32 legacy pages as well as the card grid.
 *   PART 2  Detailed card grid - scoped to .bs-products-cards, so it cannot
 *                                affect a legacy page even though the file is
 *                                loaded there.
 *   PART 3  Page sections      - hero / USPs / back-link / process /
 *                                testimonials / final CTA, built as WPBakery
 *                                rows. bs-* classes only, so they are inert on
 *                                pages that do not use them.
 *
 * Nothing new goes into Customizer > Additional CSS (#8567) or the child
 * style.css. Note #8567 is still the authoritative source for the CTA's colour,
 * size and fixed positioning, and for the legacy product grid - it is printed
 * inline in wp_head AFTER this file, so it wins at equal specificity. Every
 * override below therefore carries extra specificity, and matches #8567's
 * `!important` where it has one.
 */
/* ==========================================================================
   PART 1 - Quote CTA (all product pages, both layouts)
   ========================================================================== */
/**
 * Vertical alignment of "Get a quote for selected designs:" against the
 * GET QUOTE button.
 *
 * Measured cause: the two halves are FLOATED columns of unequal height (90px
 * vs 105px) so they top-align; .vc_column-inner adds padding-top:35px with no
 * bottom padding; and the h4 adds margin-top:25px. Net result was the label's
 * centre sitting 5px below the button's, with the bar's content 37px from the
 * top and 2px from the bottom.
 *
 * Why inline-block rather than flex on the widget: on legacy pages
 * custom-css-js #8980 reveals the sticky bar with an INLINE `display:block`,
 * which would beat a stylesheet `display:flex`. vertical-align works whatever
 * the parent's display value is, so one rule serves both layouts.
 */
.bs-qt-widget > .wpb_column {
	display: inline-block;
	float: none;
	vertical-align: middle;
}

/* Theme sets padding-top:35px here and wins at equal specificity (this file is
   enqueued before the theme's own sheet), so this is forced. */
.bs-qt-widget .wpb_column > .vc_column-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.bs-qt-widget .bs-qtn-label h4 {
	margin: 0;
}

/* WPBakery gives button containers a bottom margin. */
.bs-qt-widget .vc_btn3-container {
	margin-bottom: 0;
}

/* Even breathing room, replacing #8567's `padding: 0 !important` on the sticky
   bar. Two classes + !important to outrank it. */
.bs-qt-widget.bs-qt-sticky,
.bs-qt-widget.bs-qt-static {
	padding: 16px 0 !important;
}

@media only screen and (max-width: 767px) {

	/* Stacked - restore separation between label and button. */
	.bs-qt-widget .bs-qtn-label h4 {
		margin-bottom: 12px;
	}
}

/**
 * Let the sticky quote bar sit above the page-title area.
 *
 * The parent theme gives .mkdf-title-holder `z-index: 101`
 * (wilmer/assets/css/modules.min.css) while #8567 gives .bs-qt-sticky
 * `z-index: 100`. Both are positioned, so the title holder wins the stacking
 * order and can cover the bottom-fixed bar - most visibly on a short listing,
 * where the tall title area still reaches the bottom of the viewport.
 *
 * The `body` prefix is only there for specificity: this file is enqueued before
 * the theme's own stylesheet, so a bare .mkdf-title-holder rule would lose at
 * equal specificity. This avoids needing !important.
 *
 * Only loaded on pages carrying [bernard_products], so the rest of the site
 * keeps the theme's value.
 */
body .mkdf-title-holder {
	z-index: 1;
}

/* ==========================================================================
   PART 2 - Detailed card grid ([bernard_products detailed-grid="yes"])
   ==========================================================================
   Ported from .claude/planning/bernardspillane_fencing_wireframes_2 .html
   ("Level 3 - Products"), with the wireframe's Inter/#0a1229 palette swapped
   for the live site's Yantramanav and brand colours.

   Every selector is scoped under .bs-products-cards and targets an explicit
   bs-pc-* class. No bare element selectors (no `button {}`, no `img {}`): the
   quote CTA renders INSIDE this wrapper, and a blanket reset would break the
   styling #8567 gives it.
   ========================================================================== */
.bs-products-cards {
	/* Wireframe token -> live site value. See the plan's colour mapping table. */
	--bs-pc-red: #fe0000;
	/* theme option first_color - identical to the wireframe */
	--bs-pc-navy: #001659;
	/* navy of the existing quote UI, so cards match the popup */
	--bs-pc-muted: #565969;
	/* theme body/p colour */
	--bs-pc-border: #e8e8e9;
	/* theme sticky_header_border_color */
	--bs-pc-light: #f7f7f5;
	/* from the wireframe - no site equivalent */
	--bs-pc-faint: #aaa;
	--bs-pc-radius: 10px;
	font-family: Yantramanav, sans-serif;
}

.bs-products-cards .bs-pc-galleries {
	display: none;
}

/* ---------------------------------------------------------------- grid ---- */
.bs-products-cards .bs-pc-grid {
	display: grid;
	/* minmax(0,1fr) not 1fr: 1fr has a min-content floor, so a long design code
	   or a wide image would push the column and overflow the row. */
	grid-template-columns: repeat(var(--bs-pc-cols, 3), minmax(0, 1fr));
	gap: 20px;
}

/* Match the LEGACY breakpoints (Additional CSS #8567: 33.33% -> 50% -> 100%)
   rather than the wireframe's single 900px, so both layouts reflow alike. */
@media only screen and (max-width: 1110px) {
	.bs-products-cards .bs-pc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 650px) {
	.bs-products-cards .bs-pc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- card ---- */
.bs-products-cards .bs-pc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1.5px solid var(--bs-pc-border);
	border-radius: var(--bs-pc-radius);
	transition: border-color 0.18s, box-shadow 0.18s;
}

.bs-products-cards .bs-pc-card:hover {
	box-shadow: 0 6px 26px rgba(0, 22, 89, 0.09);
}

.bs-products-cards .bs-pc-card.is-selected {
	border-color: var(--bs-pc-red);
	box-shadow: 0 0 0 3px rgba(254, 0, 0, 0.09);
}

/* --------------------------------------------------------------- media ---- */
/* The backdrop behind the product photo is the same image the legacy grid uses
   (#8567 puts it on .vc_single_image-wrapper), so both layouts match. Left to
   tile from the top-left exactly as the legacy rule does - no background-size
   or -repeat there either. background-color is set separately, not via the
   `background` shorthand, which would wipe the image out. */
.bs-products-cards .bs-pc-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 280px;
	overflow: hidden;
	background-color: var(--bs-pc-light);
	background-image: url(/wp-content/uploads/2018/12/shop-title-img-1.jpg) !important;
}

@media only screen and (max-width: 650px) {
	.bs-products-cards .bs-pc-img {
		height: 240px;
	}
}

.bs-products-cards .bs-pc-img--clickable {
	cursor: zoom-in;
}

/* contain, not cover: gate and railing photos are tall and must not be cropped */
.bs-products-cards .bs-pc-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-products-cards .bs-pc-img-ov {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(0, 22, 89, 0.55);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.2s;
}

.bs-products-cards .bs-pc-img-ov svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bs-products-cards .bs-pc-img--clickable:hover .bs-pc-img-ov,
.bs-products-cards .bs-pc-img--clickable:focus .bs-pc-img-ov {
	opacity: 1;
}

/* ------------------------------------------------------ select checkbox ---- */
.bs-products-cards .bs-pc-cb {
	position: absolute;
	top: 11px;
	right: 11px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.bs-products-cards .bs-pc-cb svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity 0.15s;
}

.bs-products-cards .bs-pc-card.is-selected .bs-pc-cb {
	background: var(--bs-pc-red);
	border-color: var(--bs-pc-red);
}

.bs-products-cards .bs-pc-card.is-selected .bs-pc-cb svg {
	opacity: 1;
}

/* ---------------------------------------------------------------- body ---- */
.bs-products-cards .bs-pc-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 13px;
	padding: 16px;
}

/* The parent theme styles h1-h6 (uppercase h6, letter-spacing, margins), so the
   card title is reset explicitly rather than inheriting. */
.bs-products-cards .bs-pc-name {
	margin: 0;
	color: var(--bs-pc-navy);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.bs-products-cards .bs-pc-code {
	margin-top: 4px;
	color: #565969;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bs-products-cards .bs-pc-desc {
	color: #565969;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	margin-top: 0;
}

.bs-products-cards .bs-pc-tag {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 8px;
	background: rgba(254, 0, 0, 0.1);
	border-radius: 20px;
	color: var(--bs-pc-red);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.7;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* ------------------------------------------------------- panel heights ---- */
.bs-products-cards .bs-pc-opt-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
	color: var(--bs-pc-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.bs-products-cards .bs-pc-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bs-products-cards .bs-pc-sz {
	padding: 5px 11px;
	background: #fff;
	border: 1.5px solid var(--bs-pc-border);
	border-radius: 5px;
	color: var(--bs-pc-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.bs-products-cards .bs-pc-sz:hover {
	border-color: var(--bs-pc-navy);
}

.bs-products-cards .bs-pc-sz.is-on {
	background: var(--bs-pc-red);
	border-color: var(--bs-pc-red);
	color: #fff;
}

/* ---------------------------------------------------------- add button ---- */
.bs-products-cards .bs-pc-add {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 12px;
	background: #fff;
	border: 1.5px solid var(--bs-pc-navy);
	border-radius: 6px;
	color: var(--bs-pc-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.bs-products-cards .bs-pc-add:hover {
	background: var(--bs-pc-light);
}

.bs-products-cards .bs-pc-card.is-selected .bs-pc-add {
	background: var(--bs-pc-red);
	border-color: var(--bs-pc-red);
	color: #fff;
}

/* ------------------------------------------------------------ CTA host ---- */
/* Layout only - the CTA itself is handled in PART 1 and #8567. */
.bs-products-cards .bs-pc-cta-host {
	width: 100%;
}

/**
 * Hide the in-flow (static) copy of the quote CTA in the detailed grid.
 *
 * bs_products_render_cta() emits two widgets, and that stays shared with the
 * legacy layout unchanged. On a legacy page the static one sits at the very
 * bottom of the content, so it and the bottom-fixed sticky one read as the same
 * bar. This page has sections BELOW the grid (back-link, process, testimonials,
 * final CTA), so the static one lands mid-page and both are on screen at once -
 * the duplication in the screenshot.
 *
 * Three classes, so it outranks #8567's `.bs-qt-static` and PART 1's
 * two-class padding rule. The element stays in the DOM: custom-css-js #10634
 * binds the popup opener to buttons inside this wrapper, and the JS still keeps
 * its label in step - hiding is enough, and it is trivially reversible.
 *
 * Consequence: with nothing selected there is no CTA bar on screen, since the
 * sticky one only appears once something is added. Each card's own
 * ADD TO QUOTE button carries that affordance instead.
 */
.bs-products-cards .bs-pc-cta-host .bs-qt-static {
	display: none;
}

/* ------------------------------------------------------------ lightbox ---- */
.bs-products-cards .bs-pc-lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Below Popup Maker's overlay (it uses a far higher z-index) so the quote
	   popup can never open behind the gallery. */
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(6, 13, 26, 0.93);
}

/* display:flex above would defeat the hidden attribute on its own. */
.bs-products-cards .bs-pc-lightbox[hidden] {
	display: none;
}

.bs-products-cards .bs-pc-lb {
	display: flex;
	flex-direction: column;
	width: 92vw;
	max-width: 860px;
	max-height: 90vh;
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
}

.bs-products-cards .bs-pc-lb-hd {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bs-pc-border);
}

.bs-products-cards .bs-pc-lb-title {
	color: var(--bs-pc-navy);
	font-size: 16px;
	font-weight: 700;
}

.bs-products-cards .bs-pc-lb-x {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--bs-pc-navy);
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.bs-products-cards .bs-pc-lb-main {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	/* background: var(--bs-pc-light); */
	background-image: url(/wp-content/uploads/2018/12/shop-title-img-1.jpg) !important;
}

.bs-products-cards .bs-pc-lb-main img {
	display: block;
	max-width: 100%;
	max-height: 62vh;
	object-fit: contain;
}

.bs-products-cards .bs-pc-lb-th {
	display: flex;
	flex-shrink: 0;
	gap: 10px;
	padding: 14px 20px;
	overflow-x: auto;
	background: var(--bs-pc-light);
	border-top: 1px solid var(--bs-pc-border);
}

.bs-products-cards .bs-pc-lb-th:empty {
	display: none;
}

.bs-products-cards .bs-pc-lb-thumb {
	flex-shrink: 0;
	width: 78px;
	height: 58px;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 2.5px solid transparent;
	border-radius: 6px;
	cursor: pointer;
}

.bs-products-cards .bs-pc-lb-thumb.is-on {
	border-color: var(--bs-pc-red);
}

.bs-products-cards .bs-pc-lb-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- a11y ---- */
.bs-products-cards .bs-pc-cb:focus-visible,
.bs-products-cards .bs-pc-sz:focus-visible,
.bs-products-cards .bs-pc-add:focus-visible,
.bs-products-cards .bs-pc-img--clickable:focus-visible,
.bs-products-cards .bs-pc-lb-x:focus-visible,
.bs-products-cards .bs-pc-lb-thumb:focus-visible {
	outline: 2px solid var(--bs-pc-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.bs-products-cards .bs-pc-card,
	.bs-products-cards .bs-pc-cb,
	.bs-products-cards .bs-pc-cb svg,
	.bs-products-cards .bs-pc-sz,
	.bs-products-cards .bs-pc-add,
	.bs-products-cards .bs-pc-img-ov {
		transition: none;
	}
}

/* ==========================================================================
   PART 3 - Page sections around the product grid
   ==========================================================================
   The hero / USPs / back-link / process / testimonials / final-CTA blocks from
   the "Level 3 - Products" wireframe, rebuilt as WPBakery rows so the client
   can edit the copy in the page builder.

   Layout and spacing come from WPBakery's own rows and columns; this file only
   supplies the look. Icons are CSS background images rather than inline SVG on
   purpose - inline SVG pasted into a WPBakery text block can be stripped when a
   non-admin saves the page, and the copy stays plain HTML the client can edit.

   Palette follows the site, not the wireframe: navy #001659 instead of the
   wireframe's #0a1229, and the site's existing green #598426 for the
   in-stock box instead of inventing a new dark green.
   ========================================================================== */
.bs-sec-hd,
.bs-sec-hero,
.bs-sec-usps,
.bs-backl,
.bs-sec-process,
.bs-sec-testi,
.bs-sec-fcta {
	font-family: Yantramanav, sans-serif;
}

/* ---------------------------------------------- full-bleed bands ---------- */
/**
 * Full-width backgrounds for the banded sections.
 *
 * The rows sit inside the theme's centred grid (mkdf-grid-1300), so their
 * background stops at the container edge. Two pseudo-elements extend it to the
 * left and right instead:
 *
 *   ::before  ->  right: 100%   (fills everything left of the section)
 *   ::after   ->  left:  100%   (fills everything right of it)
 *
 * Preferred over the `width:100vw; margin-left:-50vw` trick because 100vw
 * INCLUDES the vertical scrollbar, which overshoots by ~15px and can force a
 * horizontal scrollbar.
 *
 * `background-color: inherit` means one rule serves every band - each pseudo
 * picks up its own section's colour, so adding a section needs no new CSS here.
 * The pseudos sit entirely outside the section's box, so they never cover
 * content and need no z-index.
 */
/**
 * IMPORTANT: those ::before/::after pseudos are WPBakery's float CLEARFIX
 * (`display:table` + `clear:both`), not spare capacity. Repurposing them for
 * the bands stops the row containing its floated columns, and the row's height
 * collapses - the band renders as a thin strip with the columns spilling out
 * below it on white.
 *
 * `display: flow-root` gives the row its own block formatting context, so it
 * contains its floats without the pseudos and without `overflow: hidden`, which
 * would clip the very bleed we are adding.
 */
.bs-sec-usps,
.bs-sec-backl,
.bs-sec-process,
.bs-sec-fcta {
	position: relative;
	display: flow-root;
}

/*
 * The `.vc_row` prefix is load-bearing, not decoration. WPBakery uses these
 * same pseudo-elements as a clearfix (`.vc_row:before/:after { content:" ";
 * display:table }`) and the theme's stylesheet is enqueued AFTER this file, so
 * an equal-specificity rule loses. `display: table` in particular is fatal
 * here: a table box takes its height from its content, so the band computed
 * height:0px and painted nothing despite being positioned and coloured
 * correctly. Two classes beats their one, whatever the load order.
 */
.vc_row.bs-sec-usps::before,
.vc_row.bs-sec-usps::after,
.vc_row.bs-sec-backl::before,
.vc_row.bs-sec-backl::after,
.vc_row.bs-sec-process::before,
.vc_row.bs-sec-process::after,
.vc_row.bs-sec-fcta::before,
.vc_row.bs-sec-fcta::after {
	content: "";
	/* block, NOT the inherited table - see above */
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	/* 50vw always covers container edge -> viewport edge, since the container is
	   centred and narrower than the viewport. */
	width: 50vw;
	height: auto;
	background-color: inherit;
	pointer-events: none;
}

.vc_row.bs-sec-usps::before,
.vc_row.bs-sec-backl::before,
.vc_row.bs-sec-process::before,
.vc_row.bs-sec-fcta::before {
	right: 100%;
	left: auto;
}

.vc_row.bs-sec-usps::after,
.vc_row.bs-sec-backl::after,
.vc_row.bs-sec-process::after,
.vc_row.bs-sec-fcta::after {
	left: 100%;
	right: auto;
	/* the clearfix sets clear:both, meaningless on an absolute box but tidier off */
	clear: none;
}

/* The back-link's hairlines have to continue across the bleed, or the divider
   against the process band below stops at the container edge. */
.vc_row.bs-sec-backl::before,
.vc_row.bs-sec-backl::after {
	border-top: 1px solid #e8e8e9;
	border-bottom: 1px solid #e8e8e9;
}

/* ------------------------------------------------- section spacing -------- */
/**
 * Vertical rhythm for the section rows.
 *
 * WPBakery rows carry no vertical padding of their own in this theme, so
 * without this every band butts straight into the next one.
 *
 * Set here rather than as WPBakery `css=".vc_custom_…{padding…}"` attributes:
 * those live in per-post `_wpb_shortcodes_custom_css` meta, which keeps the
 * spacing out of this file and out of version control. The trade-off is that
 * dragging a row's padding in the builder UI will not affect these - the values
 * below are the source of truth.
 *
 * The heading and item rows of the process/testimonial sections are separate
 * WPBakery rows sharing one background, so they are padded as a pair: the
 * heading takes the top, the items row the bottom, and neither adds a seam in
 * the middle.
 */
.bs-sec-hero {
	/* restores the padding the row carried before it was rebuilt */
	padding: 50px 0 60px;
}

.bs-sec-usps {
	padding: 10px 0;
}

.bs-sec-products {
	padding: 50px 0 20px;
}

/* Now a full-bleed band in its own right, so the padding is the band's height
   and the hairlines separate it from the process band below - which is the same
   grey but now also full width, so they read as two stacked bands rather than
   the mismatched seam the earlier white gap was working around. */
.bs-sec-backl {
	padding: 16px 0;
	background: #f7f7f5;
	border-top: 1px solid #e8e8e9;
	border-bottom: 1px solid #e8e8e9;
}

.bs-sec-cats--hd {
	padding: 48px 0 26px;
}

.bs-sec-cats--items {
	padding: 0 0 52px;
}

.bs-sec-process--hd {
	padding: 48px 0 26px;
}

.bs-sec-process--items {
	padding: 0 0 52px;
}

.bs-sec-testi--hd {
	padding: 52px 0 26px;
}

.bs-sec-testi--items {
	padding: 0 0 0;
}

.bs-sec-fcta {
	padding: 52px 0;
}

@media only screen and (max-width: 767px) {
	.bs-sec-hero {
		padding: 30px 0 36px;
	}

	.bs-sec-products {
		padding: 30px 0 10px;
	}

	.bs-sec-process--hd,
	.bs-sec-testi--hd {
		padding: 34px 0 20px;
	}

	.bs-sec-process--items {
		padding: 0 0 30px;
	}

	.bs-sec-testi--items {
		padding: 0 0 0;
	}

	.bs-sec-fcta {
		padding: 36px 0;
	}
}

/* ---------------------------------------------------- section headings ---- */
.bs-sec-hd h2 {
	margin: 10px 0 6px;
	color: #001659;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
}

.bs-sec-hd .bs-sec-sub {
	margin: 0;
	color: #565969;
	font-size: 16px;
	line-height: 26px;
}

/* the little red rule above the heading */
.bs-sec-hd::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: #fe0000;
	border-radius: 2px;
	margin-bottom: 15px;
}

/* ------------------------------------------------- category tiles --------- */
/**
 * "Choose a fencing type" tiles, from the wireframe's Level 1 tab.
 *
 * Built from NATIVE WPBakery elements so the client edits them like any other
 * content - the photo comes from the Media Library via [vc_single_image], the
 * copy from a text block. There is no hand-written anchor wrapping the card.
 *
 * DOM, per tile (one WPBakery column):
 *
 *   .wpb_column.bs-ctile              <- el_class on the column; 15px side
 *     .vc_column-inner                   padding here IS the grid gutter
 *       .wpb_wrapper                  <- the card itself: border, radius, clip
 *         .wpb_text_column.bs-ctile__badge-wrap   (optional, absolute)
 *         .wpb_single_image.bs-ctile__img
 *         .wpb_text_column.bs-ctile__body
 *
 * The card visual sits on .wpb_wrapper, NOT the column: putting it on the
 * column would need its padding zeroed, and that padding is what separates the
 * cards. Deliberately no stock chip.
 *
 * Whole-tile clicking is handled in bs-products-cards.js, which follows the
 * FIRST link inside the tile - the image's own custom link. That keeps the URL
 * in exactly one editable field instead of repeating it on a button.
 */
.bs-sec-cats--items > .wpb_column.bs-ctile > .vc_column-inner > .wpb_wrapper {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e8e8e9;
	border-radius: 10px;
	transition: border-color 0.18s, box-shadow 0.18s;
}

/* JS makes the whole card clickable, so show it */
.bs-ctile {
	cursor: pointer;
}

.bs-ctile:hover > .vc_column-inner > .wpb_wrapper {
	border-color: #001659;
	box-shadow: 0 6px 26px rgba(0, 22, 89, 0.1);
}

/* ---- image ---- */
/**
 * The image box owns the height; the photo is contained inside it.
 *
 * `height: 100%` on the img only resolves if every ancestor up to the sized box
 * has a definite height, and WPBakery nests two between them:
 *
 *   .bs-ctile__img            <- 190px, the sized box
 *     figure.vc_figure        <- needs height:100%
 *       a.vc_single_image-wrapper  <- the custom link; needs height:100%
 *         img                 <- 100% / 100% / contain
 *
 * object-fit: contain means tall or oddly-cropped photos are shown whole rather
 * than sliced, so the box needs a background for the letterboxing to sit on.
 */
.bs-ctile .bs-ctile__img {
	display: block;
	width: 100%;
	height: 280px;
	margin: 0;
	overflow: hidden;
	/* background: #f7f7f5; */
	background-image: url(/wp-content/uploads/2018/12/shop-title-img-1.jpg) !important;
}

.bs-ctile .bs-ctile__img > .vc_figure,
.bs-ctile .bs-ctile__img .vc_single_image-wrapper {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.bs-ctile .bs-ctile__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* the theme rounds images; the card already clips the corners */
	border-radius: 0;
}

/* ---- badge (own text block, floated over the image) ---- */
.bs-ctile .bs-ctile__badge-wrap {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	margin-bottom: 0;
}

.bs-ctile__badge {
	display: inline-block;
	padding: 4px 10px;
	background: #001659;
	border-radius: 20px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---- body ---- */
.bs-ctile .bs-ctile__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-bottom: 0;
	padding: 18px 20px;
}

.bs-ctile .bs-ctile__body > .wpb_wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* the card visual lives on the OUTER wrapper - this inner one must stay bare */
	position: static;
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.bs-ctile__name {
	margin: 0 0 6px;
	color: #001659;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.bs-ctile__desc {
	margin: 0 0 13px;
	color: #565969;
	font-size: 16px;
	line-height: 1.6;
}

.bs-ctile__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 14px;
}

.bs-ctile__chip {
	padding: 3px 9px;
	background: #f7f7f5;
	border: 1px solid #e8e8e9;
	border-radius: 20px;
	color: #777;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
}

.bs-ctile__cta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	color: #fe0000;
	font-size: 15px;
	font-weight: 700;
}

.bs-ctile__cta::after {
	content: "";
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.15s;
}

.bs-ctile:hover .bs-ctile__cta::after {
	transform: translateX(3px);
}

/* Equal-height tiles: the same WPBakery wrapper chain as the testimonials. */
.bs-sec-cats--items > .wpb_column,
.bs-sec-cats--items > .wpb_column > .vc_column-inner {
	display: flex;
	flex-direction: column;
}

.bs-sec-cats--items > .wpb_column > .vc_column-inner {
	flex: 1 1 auto;
}

@media only screen and (max-width: 767px) {
	.bs-sec-cats--items > .wpb_column {
		margin-bottom: 22px;
	}
}

/* ------------------------------------------------------------ hero -------- */
.bs-check {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.bs-check li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 15px;
	font-weight: 500;
	list-style: none;
}

.bs-check li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: #fe0000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 9l3.5 3.5L14 6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: cover;
}

.bs-stock-box {
	margin-bottom: 14px;
	padding: 18px 20px;
	border-radius: 10px;
	background: #0d3d17;
	text-align: center;
}

.bs-stock-box__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 6px;
	color: #5edb7d;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bs-stock-box__top::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5edb7d;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.bs-stock-box p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 15px;
	line-height: 1.5;
}

.bs-contact-box {
	padding: 22px 20px;
	border: 1px solid #e8e8e9;
	border-top: 4px solid #001659;
	border-radius: 10px;
	background: #f7f7f5;
	text-align: center;
}

.bs-contact-box__title {
	margin-bottom: 6px;
	color: #001659;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bs-contact-box p {
	margin: 5px 0 0;
	color: #565969;
	font-size: 15px;
	line-height: 1.5;
}

.bs-hphone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #001659;
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.bs-hphone:hover {
	color: #fe0000;
}

.bs-hphone::before {
	content: "";
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 3.07 11.5a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 2 .82h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L6.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.bs-hphone__lbl {
	margin-top: 0;
	color: #5e6170;
	font-size: 14px;
}

/* ------------------------------------------------------------ USPs -------- */
.bs-sec-usps {
	background: #0a1229;
}

.bs-usp {
	padding: 22px 14px;
	text-align: center;
}

.bs-usp::before {
	content: "";
	display: block;
	width: 38px;
	height: 38px;
	margin: 0 auto 10px;
	border-radius: 8px;
	background-color: rgba(254, 0, 0, 0.15);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
}

.bs-usp__label {
	margin-bottom: 3px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.bs-usp__sub {
	color: rgba(255, 255, 255, 0.45);
	font-size: 14px;
}

.bs-usp--inhouse::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.bs-usp--munster::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.bs-usp--years::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.bs-usp--coating::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- back link -------- */
/* Background and hairlines live on the ROW (.bs-sec-backl) so the full-bleed
   pseudos have something to extend; this is just the inner content. */
.bs-backl {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #888;
	font-size: 15px;
}

.bs-backl::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.bs-backl a {
	color: #fe0000;
	font-weight: 600;
	text-decoration: none;
}

.bs-backl a:hover {
	text-decoration: underline;
}

.bs-backl p {
	margin-top: 0;
}

/* --------------------------------------------------------- process -------- */
.bs-sec-process {
	background: #f7f7f5;
}

/**
 * The connector line between the numbered steps.
 *
 * The wireframe draws this with `.steps::before`, but that pseudo is not
 * available here: .bs-sec-process's ::before/::after are already carrying the
 * full-bleed background bands. The step COLUMNS' pseudos are free (verified:
 * content computes to `none`), so each column draws the segment to its right.
 *
 * Why `left: 50%; width: 100%` is exact rather than approximate: the columns
 * are equal width and each circle is centred in its own column, so one column
 * width IS the distance between two adjacent circle centres (measured: 363px
 * for both). Running from every column except the last means the line spans
 * centre-of-first to centre-of-last, like the wireframe's 12.5%/87.5% inset.
 *
 * `top: 21px` is half the 42px circle, and .bs-step has no top margin, so the
 * column's top edge is the circle's top edge.
 */
.bs-sec-process--items > .wpb_column {
	position: relative;
}

.bs-sec-process--items > .wpb_column:not(:last-child)::before {
	content: "";
	position: absolute;
	/* 21px is the circle's CENTRE, so translateY pulls the line back by half
	   its own height. Without it `top` would place the line's top edge on the
	   centre line and any change of height would drift downwards - at 3px the
	   line would sit 1.5px low. This way the height can be changed freely. */
	top: 21px;
	left: 50%;
	z-index: 0;
	width: 100%;
	height: 3px;
	background: #e0e0dd;
	transform: translateY(-50%);
}

.bs-step {
	padding: 0 12px;
	text-align: center;
}

.bs-step__num {
	position: relative;
	/* above the connector line, so it passes behind the circles */
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #001659;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.bs-step__num::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px;
	border: 2px solid #fe0000;
	border-radius: 50%;
	opacity: 0.32;
}

.bs-step__title {
	margin-bottom: 5px;
	color: #001659;
	font-size: 16px;
	font-weight: 700;
}

.bs-step__sub {
	color: #565969;
	font-size: 15px;
	line-height: 1.5;
}


@media (max-width: 767px) {
	.bs-step__num{
		margin-top: 15px;
	}
}
/* ---------------------------------------------------- testimonials -------- */
/**
 * Testimonials slider.
 *
 * The WPBakery row IS the track and each of its columns is a slide, so a review
 * is still an ordinary WPBakery text block - adding one means adding a column
 * in the builder, with no special markup to remember.
 *
 * Built on CSS scroll-snap rather than the theme's Owl Carousel or Swiper: both
 * are parent-theme assets, and the parent theme is replaced on update. Snap also
 * gives native touch swiping and keyboard scrolling for free; the JS only adds
 * the arrows and dots.
 */
.bs-sec-testi--items {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	-webkit-overflow-scrolling: touch;
	/* the arrows and dots are the affordance; the bar itself just adds noise */
	scrollbar-width: none;
}

.bs-sec-testi--items::-webkit-scrollbar {
	display: none;
}

.bs-sec-testi--items > .wpb_column {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	scroll-snap-align: start;
}

@media only screen and (max-width: 1110px) {
	.bs-sec-testi--items > .wpb_column {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media only screen and (max-width: 650px) {
	.bs-sec-testi--items > .wpb_column {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/**
 * Equal-height cards regardless of copy length.
 *
 * The track stretches the columns to the tallest already, but WPBakery nests
 * two wrappers between the column and the card - each has to be told to FILL
 * its parent, or the card only grows as far as its own text and the row looks
 * ragged.
 */
.bs-sec-testi--items > .wpb_column,
.bs-sec-testi--items > .wpb_column > .vc_column-inner,
.bs-sec-testi--items > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: auto;
}

.bs-sec-testi--items > .wpb_column > .vc_column-inner,
.bs-sec-testi--items > .wpb_column > .vc_column-inner > .wpb_wrapper {
	flex: 1 1 auto;
}

.bs-sec-testi--items .bs-tcard {
	flex: 1 1 auto;
}

/**
 * Pushes the attribution to the bottom so it lines up across cards.
 *
 * WPBakery puts yet another .wpb_wrapper between the text block and its
 * content, so .bs-tcard__text is a GRANDCHILD of the card - flex-grow on it is
 * ignored until that wrapper is itself a filling flex column. Measured: without
 * this the attribution sat 150px down in a 3-line card and 124px in a 2-line
 * one.
 */
.bs-sec-testi--items .bs-tcard {
	display: flex;
	flex-direction: column;
}

.bs-sec-testi--items .bs-tcard > .wpb_wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.bs-sec-testi--items .bs-tcard__text {
	flex: 1 1 auto;
}

/* ---- slider controls (built by bs-products-cards.js) ---- */
.bs-tslider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 22px 0 22px;
}

.bs-tslider-nav[hidden] {
	display: none;
}

.bs-tslider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: #fff;
	border: 1.5px solid #e8e8e9;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.bs-tslider-arrow::before {
	content: "";
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001659' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.bs-tslider-arrow--next::before {
	transform: rotate(180deg);
}

.bs-tslider-arrow:hover:not(:disabled) {
	border-color: #001659;
	background: #f7f7f5;
}

.bs-tslider-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.bs-tslider-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bs-tslider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: #d5d5d8;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}

.bs-tslider-dot.is-on {
	background: #fe0000;
	transform: scale(1.25);
}

.bs-tslider-arrow:focus-visible,
.bs-tslider-dot:focus-visible {
	outline: 2px solid #fe0000;
	outline-offset: 2px;
}

.bs-tcard {
	position: relative;
	padding: 22px;
	border: 1px solid #e8e8e9;
	border-radius: 10px;
	background: #f7f7f5;
}

.bs-tcard::before {
	content: "\201C";
	position: absolute;
	top: 8px;
	left: 14px;
	color: #fe0000;
	font-family: Georgia, serif;
	font-size: 54px;
	line-height: 1;
	opacity: 0.13;
}

.bs-tcard__stars {
	margin-bottom: 10px;
	color: #f5a623;
	font-size: 15px;
	letter-spacing: 1px;
}

.bs-tcard__text {
	position: relative;
	margin-bottom: 14px;
	color: #555;
	font-size: 15px;
	font-style: italic;
	line-height: 1.7;
}

.bs-tcard__author {
	color: #001659;
	font-size: 15px;
	font-weight: 700;
}

.bs-tcard__role {
	margin-top: 2px;
	color: #999;
	font-size: 13px;
	font-weight: 400;
}

/* ------------------------------------------------------- final CTA -------- */
.bs-sec-fcta {
	background: #001659;
	text-align: center;
}

.bs-sec-fcta h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
}

.bs-sec-fcta p {
	margin: 0 0 26px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 16px;
}

.bs-fphone {
	display: flex;
	align-items: center;
	gap: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	flex-direction: column;
	justify-content: center;
	max-width: 310px ;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.bs-fphone:hover {
	color: #fff;
	opacity: 0.85;
}

.bs-fphone::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 3.07 11.5a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 2 .82h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L6.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 13px;
}

.bs-fphone__l {
	display: block;
	margin-bottom: 3px;
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- responsive ------- */
@media only screen and (max-width: 1024px) {

	.bs-sec-hd h2,
	.bs-sec-fcta h3 {
		font-size: 26px;
	}
}

@media only screen and (max-width: 767px) {
	.bs-usp {
		padding: 18px 10px;
	}

	/* stacked columns need their own separation */
	.bs-step,
	.bs-tcard {
		margin-bottom: 26px;
	}

	/* the steps stack here, so a horizontal connector would point nowhere */
	.bs-sec-process--items > .wpb_column:not(:last-child)::before {
		display: none;
	}

	.bs-backl {
		flex-wrap: wrap;
	}

	.bs-fphone {
		font-size: 20px;
	}
}

.bs-sec-hero .mkdf-st-inner h6.mkdf-st-intro-title {
	color: #f00 !important;
}

.bs-sec-hero .mkdf-section-title-holder .mkdf-st-text {
	max-width: 800px;
}

.bs-sec-hero .bs-check {
	margin-bottom: 25px !important;
}

body.bs-q-page .mkdf-title-holder.mkdf-breadcrumbs-type.mkdf-title-va-header-bottom {
	height: auto !important;
}