/**
 * Homepage redesign.
 *
 * Every rule is scoped under .bms-home (front-page.php's <main>). This theme
 * already layers CSS from four places — parent theme, child style.css,
 * theme_mods inline CSS, and plugin CSS — so an unscoped rule here would
 * quietly restyle the shop, PDP and cart. Nothing in this file applies
 * outside the front page.
 *
 * The design mockup used <image-slot> placeholder elements; those become real
 * <img> here, so the sizing rules target img directly.
 */

.bms-home {
	--navy: #121743;
	--navy-2: #1c2258;
	--ink-60: #6b6e86;
	--ink-40: #9a9cb0;
	--line: #e7e8ef;
	--bg: #eef0f3;
	--panel: #fff;
	--green: #05e415;
	--green-dark: #04c012;
	--green-tint: #e7fde6;
	--amber: #e8920f;
	--radius: 16px;
	--shadow: 0 1px 2px rgba(18, 23, 67, .05), 0 12px 30px -16px rgba(18, 23, 67, .16);
	--shadow-lg: 0 4px 8px rgba(18, 23, 67, .05), 0 22px 44px -18px rgba(18, 23, 67, .22);

	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--navy);
	background: var(--panel);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.bms-home *,
.bms-home *::before,
.bms-home *::after { box-sizing: border-box; }

.bms-home img { display: block; max-width: 100%; height: auto; }
.bms-home a { color: inherit; text-decoration: none; }
.bms-home a:hover { color: var(--green-dark); }

/* Flatsome styles bare <button> globally with min-height:2.5em, min-width:24px,
   line-height:2.4em, margin-right:1em and uppercase text. That turned the 32x5
   slider dots into 37px circles with gaps between them. Reset it here; the
   real buttons (.btn, .padd) use class selectors, which outrank this rule and
   keep their own sizing. */
.bms-home button {
	min-height: 0;
	min-width: 0;
	line-height: normal;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
	box-shadow: none;
}

.bms-home h1,
.bms-home h2,
.bms-home h3 {
	font-family: 'Sora', sans-serif;
	letter-spacing: -.02em;
	margin: 0;
	color: inherit;
}

/* Visible keyboard focus. The design defined no focus state at all, which
   would have left the whole page unusable without a mouse. */
.bms-home a:focus-visible,
.bms-home button:focus-visible,
.bms-home input:focus-visible {
	outline: 3px solid var(--green-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

.bms-home .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Matches Flatsome's container exactly. The theme renders
   `.container, .row { max-width: <site_width - 30>px }` with 15px inner
   padding. Site Width is 1506, so the container is 1476px and content across
   the site starts at calc((100% - 1476px)/2 + 15px).

   These two numbers MUST track the theme's Site Width setting. If it changes,
   update the 1476 here and in .trust-inner, or the homepage stops lining up
   with the header and footer. */
.bms-home .wrap { max-width: 1476px; margin: 0 auto; padding: 0 15px; }

/* ---------------------------------------------------------------- buttons */
.bms-home .btn {
	white-space: nowrap;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 800;
	padding: 13px 26px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.bms-home .btn:active { transform: scale(.97); }
.bms-home .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.bms-home .btn-green { background: var(--green); color: var(--navy); }
.bms-home .btn-green:hover { background: var(--green-dark); color: var(--navy); }
.bms-home .btn-ghost-l {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .35);
}
.bms-home .btn-ghost-l:hover { border-color: #fff; background: rgba(255, 255, 255, .18); color: #fff; }

/* --------------------------------------------------- section + page heads */
.bms-home .sec { padding: 56px 0; }
.bms-home .sec.tint { background: var(--bg); }
.bms-home .sec.navy { background: var(--navy); color: #fff; }

.bms-home .shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.bms-home .shead .l { display: flex; gap: 14px; align-items: flex-start; }
.bms-home .shead .bar {
	width: 5px; height: 38px;
	border-radius: 100px;
	background: var(--green);
	flex: 0 0 auto;
	margin-top: 3px;
}
.bms-home .shead h2 { font-size: 27px; font-weight: 800; line-height: 1.1; }
.bms-home .shead .sub {
	font-size: 13.5px;
	color: var(--ink-60);
	font-weight: 500;
	margin: 4px 0 0;
	max-width: 560px;
}
.bms-home .sec.navy .shead .sub { color: rgba(255, 255, 255, .7); }
.bms-home .shead .more {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--green-dark);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.bms-home .shead .more svg { width: 15px; height: 15px; }

/* The hero is the first thing on the page — no heading block sits above it.
   The page <h1> is the first slide's headline, styled by .slide-body h1. */
.bms-home .bms-home__top {
	/* Needs the .bms-home prefix: `.bms-home .wrap` sets the padding shorthand,
	   which resets padding-top, and it outranks a bare .bms-home__top. */
	padding-top: 30px;
}

/* ------------------------------------------------------------------- hero */
.bms-home .hero {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 16px;
	padding-bottom: 24px;
}
.bms-home .bms-slider {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy);
	box-shadow: var(--shadow);
}
.bms-home .bms-track { display: flex; transition: transform .7s cubic-bezier(.6, .02, .2, 1); }
.bms-home .bms-slide { position: relative; min-width: 100%; height: 420px; }

.bms-home .slide-img { position: absolute; inset: 0; }
.bms-home .slide-img img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .slide-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 23, 67, .2), transparent 40%);
}

.bms-home .slide-panel {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 60%;
	z-index: 2;
	background: linear-gradient(135deg, var(--navy) 0%, #1a2060 100%);
	clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
.bms-home .slide-panel .dotgrid {
	position: absolute; top: 24px; right: 70px;
	width: 120px; height: 80px;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .4) 1.4px, transparent 1.4px);
	background-size: 14px 14px;
}
.bms-home .slide-panel .blob {
	position: absolute; bottom: -70px; left: -70px;
	width: 230px; height: 230px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(5, 228, 21, .32), transparent 68%);
}

.bms-home .slide-body {
	position: absolute;
	top: 50%; left: 76px;
	transform: translateY(-50%);
	z-index: 3;
	color: #fff;
	max-width: 420px;
	/* Reserves the strip the dots sit in, so the stat chips can never end up
	   underneath them on the taller slides. */
	padding-bottom: 26px;
}
.bms-home .slide-body h1,
.bms-home .slide-body h2 {
	font-size: 38px;
	line-height: 1.04;
	font-weight: 800;
	margin-bottom: 12px;
	color: #fff;
}
.bms-home .slide-body h1 em,
.bms-home .slide-body h2 em { font-style: normal; color: var(--green); }
.bms-home .slide-body p { font-size: 15px; color: rgba(255, 255, 255, .82); margin: 0 0 20px; }

.bms-home .deal-badge {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--green);
	color: var(--navy);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 100px;
	margin-bottom: 14px;
}

.bms-home .pricehook { display: flex; align-items: baseline; gap: 9px; margin: 0 0 20px; }
.bms-home .pricehook .from { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.bms-home .pricehook .amt {
	font-family: 'Sora', sans-serif;
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}
.bms-home .pricehook .amt .woocommerce-Price-amount { color: #fff; }

.bms-home .cta-row { display: flex; gap: 11px; flex-wrap: wrap; }

.bms-home .statchips { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.bms-home .statchips span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 100px;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
}
.bms-home .statchips svg { width: 13px; height: 13px; color: var(--green); }

.bms-home .prodchip {
	position: absolute;
	z-index: 4;
	right: 34px; bottom: 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, .96);
	border-radius: 14px;
	padding: 10px 16px 10px 10px;
	box-shadow: 0 16px 34px -14px rgba(18, 23, 67, .55);
}
.bms-home .prodchip .pc-img {
	width: 52px; height: 52px;
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--bg);
}
.bms-home .prodchip .pc-img img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .prodchip .pc-n {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.2;
	max-width: 130px;
}
.bms-home .prodchip .pc-p {
	display: block;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--green-dark);
	margin-top: 2px;
}

.bms-home .bms-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	display: grid;
	place-items: center;
	z-index: 5;
	border: none;
	cursor: pointer;
	transition: background .15s;
}
.bms-home .bms-arrow:hover { background: rgba(255, 255, 255, .92); }
.bms-home .bms-arrow svg { width: 16px; height: 16px; color: #fff; }
.bms-home .bms-arrow:hover svg { color: var(--navy); }
.bms-home .bms-arrow.prev { left: 10px; }
.bms-home .bms-arrow.next { right: 10px; }

.bms-home .bms-dots { position: absolute; bottom: 16px; left: 76px; display: flex; gap: 8px; z-index: 6; }
.bms-home .bms-dot {
	width: 32px; height: 5px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .4);
	overflow: hidden;
	position: relative;
	border: none;
	padding: 0;
	cursor: pointer;
}
.bms-home .bms-dot i { position: absolute; inset: 0; width: 0; background: var(--green); border-radius: 100px; }
.bms-home .bms-dot.on i { animation: bms-fill 6s linear forwards; }
@keyframes bms-fill { from { width: 0; } to { width: 100%; } }

.bms-home .hero-side { display: flex; flex-direction: column; gap: 16px; }
.bms-home .scard {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	flex: 1;
	display: flex;
	align-items: flex-end;
	padding: 20px;
	color: #fff;
	min-height: 130px;
	box-shadow: var(--shadow);
}
.bms-home .scard:hover { color: #fff; }
.bms-home .scard-img { position: absolute; inset: 0; }
.bms-home .scard-img img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .scard-scrim { position: absolute; inset: 0; }
.bms-home .scard.a .scard-scrim { background: linear-gradient(120deg, rgba(18, 23, 67, .92), rgba(18, 23, 67, .5)); }
.bms-home .scard.b .scard-scrim { background: linear-gradient(120deg, rgba(4, 192, 18, .9), rgba(4, 192, 18, .4)); }
.bms-home .scard-c { position: relative; z-index: 2; }
.bms-home .scard .tag {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .9;
	margin-bottom: 3px;
}
.bms-home .scard .h3 {
	display: block;
	font-family: 'Sora', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 5px;
}
.bms-home .scard .lnk { font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.bms-home .scard .lnk svg { width: 13px; height: 13px; }
.bms-home .scard.b .scard-c { color: var(--navy); }

/* ----------------------------------------------------------- trust strip */
.bms-home .trust { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bms-home .trust-inner {
	max-width: 1476px;
	margin: 0 auto;
	padding: 16px 15px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.bms-home .trust .t { display: flex; align-items: center; gap: 12px; }
.bms-home .trust .ti {
	width: 40px; height: 40px;
	border-radius: 11px;
	background: var(--green-tint);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.bms-home .trust .ti svg { width: 21px; height: 21px; color: var(--green-dark); stroke-width: 1.8; }
.bms-home .trust .tt { font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.bms-home .trust .ts { font-size: 11.5px; color: var(--ink-60); font-weight: 600; }

/* ------------------------------------------------------------ categories */
.bms-home .cats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bms-home .cats li { margin: 0; }
.bms-home .cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	text-align: center;
	padding: 8px 4px;
	border-radius: 14px;
	transition: transform .15s;
	height: 100%;
}
.bms-home .cat:hover { transform: translateY(-4px); }
.bms-home .cimg {
	width: 96px; height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg);
	box-shadow: var(--shadow);
	border: 3px solid #fff;
	outline: 1px solid var(--line);
	flex: 0 0 auto;
}
.bms-home .cimg img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .cimg-fallback { display: block; width: 100%; height: 100%; background: var(--bg); }
.bms-home .cat:hover .cimg { outline-color: var(--green); }
.bms-home .cn { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--navy); }

/* ------------------------------------------------------- product carousel */
/* Same cards as .pgrid, laid out as a snapping scroll row so the section can
   carry every discounted line without growing taller. The arrows, dots and
   auto-advance are enhancements on a container that already scrolls natively. */
.bms-home .bms-pslider { position: relative; }

.bms-home .bms-ptrack {
	position: relative;
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	/* Room for the card's hover lift and shadow, which would otherwise be
	   clipped by the scroll container. */
	padding: 6px 2px 10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bms-home .bms-ptrack::-webkit-scrollbar { display: none; }
.bms-home .bms-ptrack:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }

/* Four across at desktop, matching the grid this replaced. */
.bms-home .bms-ptrack > .pcard {
	flex: 0 0 calc((100% - 3 * 18px) / 4);
	scroll-snap-align: start;
}

/* Arrows sit over the row's edges, clear of the cards themselves. */
.bms-home .bms-pnav {
	position: absolute;
	/* Centred on the card row, not on the slider box — the dots below it
	   (8px dot + 14px margin) would otherwise drag the arrows off centre. */
	top: calc(50% - 11px);
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s;
}
.bms-home .bms-pnav.prev { left: -14px; }
.bms-home .bms-pnav.next { right: -14px; }
.bms-home .bms-pnav svg { width: 16px; height: 16px; color: var(--navy); }
.bms-home .bms-pnav:hover { background: var(--green); border-color: var(--green); }
.bms-home .bms-pnav[disabled] { opacity: .3; pointer-events: none; }

/* Nothing to scroll — drop the controls rather than show dead buttons. */
.bms-home .bms-pslider.is-static .bms-pnav,
.bms-home .bms-pslider.is-static .bms-pdots { display: none; }

.bms-home .bms-pdots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.bms-home .bms-pdots:empty { display: none; }
.bms-home .bms-pdots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--line);
	cursor: pointer;
	transition: width .2s, background .2s;
}
.bms-home .bms-pdots button.on { width: 22px; border-radius: 999px; background: var(--green); }

/* ---------------------------------------------------------- product grid */
.bms-home .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bms-home .pcard {
	background: #fff;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform .15s, box-shadow .15s;
}
.bms-home .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bms-home .pimg { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--bg); }
.bms-home .pimg a, .bms-home .pimg img { display: block; width: 100%; height: 100%; }
.bms-home .pimg img { object-fit: cover; }
.bms-home .pbadge {
	position: absolute;
	top: 11px; left: 11px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 100px;
	color: #fff;
}
.bms-home .pbadge.sale { background: var(--green); color: var(--navy); }
.bms-home .pbadge.low { background: var(--amber); }

.bms-home .pbody { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.bms-home .pbrand {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-40);
}
.bms-home .pname {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 37px;
}
.bms-home .pname:hover { color: var(--green-dark); }
.bms-home .prate { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-60); font-weight: 600; }
.bms-home .bms-stars { color: #f5a623; letter-spacing: 1px; font-size: 12px; }
.bms-home .pprice { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bms-home .pprice .now,
.bms-home .pprice .now .woocommerce-Price-amount {
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: var(--navy);
}
.bms-home .pprice .vat { font-size: 11px; color: var(--ink-60); font-weight: 700; }
.bms-home .pprice .was,
.bms-home .pprice .was .woocommerce-Price-amount {
	font-size: 12.5px;
	color: var(--ink-40);
	text-decoration: line-through;
	font-weight: 600;
}
.bms-home .padd {
	margin-top: 10px;
	width: 100%;
	background: var(--green);
	color: var(--navy);
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px;
	border: none;
	cursor: pointer;
	transition: background .14s;
}
.bms-home .padd:hover { background: var(--green-dark); color: var(--navy); }
.bms-home .padd svg { width: 17px; height: 17px; }
.bms-home .pout .padd { background: var(--bg); color: var(--ink-40); pointer-events: none; }

/* ----------------------------------------------------------- track order */
.bms-home .track-blk { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bms-home .track-l .pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(5, 228, 21, .16);
	color: var(--green);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 100px;
	margin-bottom: 16px;
}
.bms-home .track-l .dotlive {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(5, 228, 21, .25);
}
.bms-home .track-l h2 { font-size: 32px; font-weight: 800; line-height: 1.06; margin-bottom: 12px; color: #fff; }
.bms-home .track-l p { font-size: 14.5px; color: rgba(255, 255, 255, .75); margin: 0 0 20px; max-width: 400px; }
.bms-home .track-l ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.bms-home .track-l li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	margin: 0;
}
.bms-home .track-l li svg { width: 19px; height: 19px; color: var(--green); flex: 0 0 auto; }
.bms-home .track-l li a { color: #fff; text-decoration: underline; }

.bms-home .track-card {
	background: #fff;
	border-radius: var(--radius);
	padding: 26px;
	color: var(--navy);
	box-shadow: var(--shadow-lg);
	margin: 0;
}
.bms-home .track-card h3 { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.bms-home .track-card .cap { font-size: 12.5px; color: var(--ink-60); text-align: center; margin: 0 0 20px; }
.bms-home .track-field { margin-bottom: 14px; }
.bms-home .track-field label { display: block; font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.bms-home .track-field input {
	width: 100%;
	height: 46px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 0 15px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--navy);
	box-shadow: none;
	margin: 0;
	transition: border-color .14s;
}
.bms-home .track-field input:focus { border-color: var(--green); }
.bms-home .track-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.bms-home .track-card .secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--ink-60);
	font-weight: 600;
	margin: 14px 0 0;
}
.bms-home .track-card .secure svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------------- about */
.bms-home .about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* The source photos are 1080px squares, so without an explicit height the
	   grid row grew to the image's natural height (~740px) and the section
	   dwarfed everything around it. Height is set on the image column and the
	   text column stretches to match. */
	min-height: 0;
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-top: 22px;
}
.bms-home .sec--about { padding-bottom: 0; }
.bms-home .about-img { position: relative; overflow: hidden; height: 420px; }
.bms-home .a-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.6, .02, .2, 1); }
.bms-home .a-slide { min-width: 100%; height: 100%; }
.bms-home .a-slide img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .a-dots {
	position: absolute;
	bottom: 18px; left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}
.bms-home .a-dots button {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .15s, width .15s;
}
.bms-home .a-dots button.on { background: #fff; width: 24px; border-radius: 100px; }
.bms-home .anav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: grid;
	place-items: center;
	border: none;
	cursor: pointer;
	z-index: 3;
	transition: background .15s;
}
.bms-home .anav:hover { background: rgba(255, 255, 255, .9); }
.bms-home .anav svg { width: 16px; height: 16px; color: #fff; }
.bms-home .anav:hover svg { color: var(--navy); }
.bms-home .anav.l { left: 16px; }
.bms-home .anav.r { right: 16px; }
.bms-home .about-txt {
	background: var(--navy);
	color: #fff;
	padding: 36px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bms-home .about-txt p { font-size: 15.5px; line-height: 1.68; color: rgba(255, 255, 255, .85); margin: 0 0 16px; max-width: 600px; }
.bms-home .about-txt p:last-child { margin-bottom: 0; }
.bms-home .about-img img { width: 100%; height: 100%; object-fit: cover; }
.bms-home .about-txt b { color: #fff; font-weight: 800; }
.bms-home .about-logo { margin-bottom: 22px; }
.bms-home .about-logo img { width: 230px; height: auto; max-width: 60%; }

/* ---------------------------------------------------------------- brands */
/* Brand slider. Every brand with products is in the track; the row scrolls
   rather than wrapping, so adding brands never changes the section's height. */
.bms-home .brands {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 14px;
}

.bms-home .bms-brandtrack {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	/* The row is its own scroll container, so hide its bar rather than let a
	   second horizontal scrollbar appear inside the page. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bms-home .bms-brandtrack::-webkit-scrollbar { display: none; }
.bms-home .bms-brandtrack:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }

.bms-home .bms-brandtrack li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.bms-home .bms-brandtrack li a {
	display: grid;
	place-items: center;
	width: 132px;
	height: 74px;
	padding: 10px 12px;
	border-radius: var(--radius-sm, 11px);
	transition: background .15s;
}
.bms-home .bms-brandtrack li a:hover { background: var(--bg); }
.bms-home .bms-brandtrack img {
	max-width: 100%;
	max-height: 54px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Brand logos arrive in assorted colours; muting them keeps the row calm
	   and lets colour return on hover as the affordance. */
	filter: grayscale(1);
	opacity: .72;
	transition: filter .15s, opacity .15s;
}
.bms-home .bms-brandtrack li a:hover img { filter: none; opacity: 1; }
.bms-home .brands .bn {
	font-family: 'Sora', sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: var(--ink-40);
	letter-spacing: -.02em;
	text-align: center;
	line-height: 1.2;
}
.bms-home .bms-brandtrack li a:hover .bn { color: var(--navy); }

.bms-home .bms-brandnav {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s;
}
.bms-home .bms-brandnav svg { width: 16px; height: 16px; color: var(--navy); }
.bms-home .bms-brandnav:hover { background: var(--green); border-color: var(--green); }
.bms-home .bms-brandnav[disabled] { opacity: .3; pointer-events: none; }

/* --------------------------------------------------------------- reviews */
.bms-home .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bms-home .rev { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 0; }
.bms-home .rev .bms-stars { font-size: 15px; letter-spacing: 2px; }
.bms-home .rev blockquote { margin: 0; padding: 0; border: none; background: none; }
.bms-home .rev blockquote p { font-size: 14.5px; line-height: 1.6; color: #3a3d5e; margin: 12px 0 16px; }
.bms-home .rev .who { display: flex; align-items: center; gap: 11px; }
.bms-home .rev .av {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 14px;
	flex: 0 0 auto;
}
.bms-home .rev .wn { display: block; font-size: 13.5px; font-weight: 800; }
.bms-home .rev .wl { display: block; font-size: 11.5px; color: var(--ink-60); font-weight: 600; }

/* ------------------------------------------------------------- trade CTA */
.bms-home .trade {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy);
	color: #fff;
	padding: 30px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.bms-home .trade .tblob {
	position: absolute;
	right: -40px; top: -40px;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(5, 228, 21, .28), transparent 70%);
}
.bms-home .trade-l, .bms-home .trade-r { position: relative; z-index: 2; }
.bms-home .trade h2 { font-size: 27px; font-weight: 800; margin-bottom: 6px; color: #fff; }
.bms-home .trade p { font-size: 14px; color: rgba(255, 255, 255, .75); margin: 0; max-width: 560px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
	.bms-home .hero { grid-template-columns: 1fr; }
	.bms-home .hero-side { flex-direction: row; }
	.bms-home .pgrid { grid-template-columns: repeat(2, 1fr); }
	.bms-home .bms-ptrack > .pcard { flex-basis: calc((100% - 18px) / 2); }
	.bms-home .cats { grid-template-columns: repeat(4, 1fr); }
	.bms-home .trust-inner { grid-template-columns: repeat(2, 1fr); }
	.bms-home .rev-grid { grid-template-columns: 1fr; }
	.bms-home .about { grid-template-columns: 1fr; }
	.bms-home .about-img { height: 260px; }
	.bms-home .about-txt { padding: 32px 28px; }
}

@media (max-width: 780px) {
	.bms-home .track-blk { grid-template-columns: 1fr; }
	.bms-home .bms-slide { height: 460px; }
	/* The angled navy panel stops being a panel and becomes a full scrim, so
	   the headline keeps its contrast when there is no room beside the image. */
	.bms-home .slide-panel { width: 100%; clip-path: none; opacity: .93; }
	.bms-home .slide-body { left: 24px; right: 24px; max-width: none; }
	.bms-home .slide-body h1,
	.bms-home .slide-body h2 { font-size: 28px; }
	.bms-home .prodchip { display: none; }
	.bms-home .bms-dots { left: 24px; }
	.bms-home .trade { padding: 32px 26px; }
}

@media (max-width: 560px) {
	.bms-home .wrap { padding: 0 15px; }
	.bms-home .trust-inner { grid-template-columns: 1fr; padding: 14px 15px; }
	.bms-home .cats { grid-template-columns: repeat(2, 1fr); }
	.bms-home .pgrid { grid-template-columns: 1fr; }
	.bms-home .bms-ptrack > .pcard { flex-basis: 78%; }
	.bms-home .bms-pnav { display: none; }
	.bms-home .hero-side { flex-direction: column; }
	.bms-home .sec { padding: 40px 0; }
	.bms-home .about-txt { padding: 32px 20px; }
}

/* Respect a reduced-motion preference: no sliding, no auto-advance timer bar.
   The slider still works, it just cuts between slides instead of animating. */
@media (prefers-reduced-motion: reduce) {
	.bms-home .bms-track,
	.bms-home .a-track { transition: none; }
	.bms-home .bms-dot.on i { animation: none; width: 100%; }
	.bms-home .cat:hover,
	.bms-home .pcard:hover { transform: none; }
}

/* Fewer brands than fit the row: the arrows have nothing to do, so hide them
   and centre the logos instead of leaving them hard against the left edge. */
.bms-home .brands.is-static .bms-brandnav { display: none; }
.bms-home .brands.is-static .bms-brandtrack { justify-content: center; }

/* =========================================================== MAIN BANNER
   The banner is contained in the site column, matching the reference layout:
   full-bleed colour bands belong to the strips between sections, while the
   hero itself sits on the same grid as everything else.
   ======================================================================== */
.bms-home .bms-home__top { padding-top: 22px; }

/* Copy is inset from the banner edge rather than aligned to the page column —
   inside a contained banner the panel edge is the reference line, not the page
   gutter. */
.bms-home .bms-home__top .slide-body {
	left: clamp(24px, 3.4vw, 60px);
	max-width: 480px;
}
.bms-home .bms-home__top .bms-dots { left: clamp(24px, 3.4vw, 60px); }

@media (min-width: 1400px) {
	.bms-home .bms-home__top .bms-slide { height: 450px; }
	.bms-home .bms-home__top .slide-body h1,
	.bms-home .bms-home__top .slide-body h2 { font-size: 41px; }
}

@media (max-width: 780px) {
	/* No swipe handler to fall back on, and edge arrows would sit on the copy,
	   so the controls cluster at the bottom right clear of the dots. */
	.bms-home .bms-home__top .bms-arrow {
		top: auto;
		bottom: 18px;
		transform: none;
	}
	.bms-home .bms-home__top .bms-arrow.prev { left: auto; right: 62px; }
	.bms-home .bms-home__top .bms-arrow.next { right: 18px; }
	.bms-home .bms-home__top .slide-body { padding-bottom: 30px; }
}

/* ======================================================= DELIVERY TICKER
   Full-bleed band of scrolling delivery messages.

   The track carries the message list twice and animates to -50%, so copy two
   lands exactly where copy one began and the loop is seamless. Duration is
   long and the motion linear — a fast or eased ticker is hard to read.
   ==================================================================== */
.bms-home .bms-ticker {
	background: var(--navy);
	overflow: hidden;
	/* Contains the track so the off-screen half never widens the page. */
	position: relative;
}
.bms-home .bms-ticker__track {
	display: flex;
	width: max-content;
	animation: bms-ticker-scroll 46s linear infinite;
}
.bms-home .bms-ticker:hover .bms-ticker__track { animation-play-state: paused; }

.bms-home .bms-ticker__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bms-home .bms-ticker__list li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 13px 0;
	white-space: nowrap;
}
/* Bullet separator between messages, in the brand green. */
.bms-home .bms-ticker__list li::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green);
	margin: 0 28px;
	flex: 0 0 auto;
}
.bms-home .bms-ticker__list b {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}
.bms-home .bms-ticker__list span {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .62);
}

@keyframes bms-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/*
 * Moving text is a WCAG 2.2.2 concern, so an explicit reduced-motion
 * preference stops the scroll outright. The band becomes a normal horizontal
 * scroller the reader controls, and the duplicate half is dropped so the
 * message is not repeated.
 */
@media (prefers-reduced-motion: reduce) {
	.bms-home .bms-ticker__track {
		animation: none;
		width: 100%;
		overflow-x: auto;
	}
	.bms-home .bms-ticker__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 560px) {
	.bms-home .bms-ticker__list li::after { margin: 0 18px; }
	.bms-home .bms-ticker__list b,
	.bms-home .bms-ticker__list span { font-size: 11.5px; }
}

/* ====================================================== MINIMAL BANNER
   The banner was carrying most of the page's colour: a navy gradient panel,
   an acid-green pill, green highlight text, a green button, a green glow and
   a full bright-green side card. Reference direction is the opposite — a light
   card, dark text, and one small accent doing all the signalling.

   Scoped to .bms-home__top so only the banner changes; the rest of the page
   keeps its existing treatment.
   ==================================================================== */
.bms-home .bms-home__top .bms-slider {
	background: var(--panel);
	border: 1px solid var(--line);
}

/* Clean split rather than a diagonal.
   A hard diagonal put busy photography right up against flat white, and fading
   the two together just left a hazy band through the middle. Instead the copy
   and the photograph get their own halves with a hairline rule between them —
   the photo is never behind the text, so it stays completely crisp. */
.bms-home .bms-home__top .slide-panel {
	width: 50%;
	clip-path: none;
	background: var(--panel);
	/* Hairline plus a soft cast to the right, so the copy panel reads as
	   sitting above the photograph rather than merely stopping at it. */
	box-shadow:
		1px 0 0 var(--line),
		14px 0 28px -18px rgba(18, 23, 67, .45);
}

/* The divider carries the same green marker the section headings use further
   down the page ("Shop by category" and friends), so the split looks like part
   of the design system rather than a plain rule. */
.bms-home .bms-home__top .slide-panel::after {
	content: "";
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 84px;
	border-radius: 100px;
	background: var(--green);
	box-shadow: 0 0 0 5px var(--panel);
	z-index: 4;
}

.bms-home .bms-home__top .slide-img { left: 50%; }
.bms-home .bms-home__top .slide-body { max-width: 430px; }
.bms-home .bms-home__top .slide-panel .dotgrid,
.bms-home .bms-home__top .slide-panel .blob { display: none; }

/* No scrim needed now the copy sits on a light ground. */
.bms-home .bms-home__top .slide-img::after { background: none; }

/* --- copy --- */
.bms-home .bms-home__top .slide-body { color: var(--navy); }
.bms-home .bms-home__top .slide-body h1,
.bms-home .bms-home__top .slide-body h2 { color: var(--navy); }
.bms-home .bms-home__top .slide-body h1 em,
.bms-home .bms-home__top .slide-body h2 em { color: var(--navy); }
.bms-home .bms-home__top .slide-body p { color: var(--ink-60); }

/* Eyebrow: small uppercase type instead of a filled pill. This is the single
   place the accent colour is spent. */
.bms-home .bms-home__top .deal-badge {
	background: none;
	color: #0a8f22;
	padding: 0;
	margin-bottom: 10px;
	font-size: 11.5px;
	letter-spacing: .12em;
}

.bms-home .bms-home__top .pricehook .from { color: var(--ink-60); }
.bms-home .bms-home__top .pricehook .amt,
.bms-home .bms-home__top .pricehook .amt .woocommerce-Price-amount { color: var(--navy); }

/* --- buttons: one solid navy action, one quiet text link --- */
.bms-home .bms-home__top .btn-green {
	background: var(--navy);
	color: #fff;
}
.bms-home .bms-home__top .btn-green:hover { background: var(--navy-2); color: #fff; }
.bms-home .bms-home__top .btn-ghost-l {
	background: none;
	border: 1px solid var(--line-2, #d5d8e4);
	color: var(--navy);
}
.bms-home .bms-home__top .btn-ghost-l:hover {
	background: var(--bg);
	border-color: var(--navy);
	color: var(--navy);
}

/* --- chips: outline, not filled --- */
.bms-home .bms-home__top .statchips span {
	background: none;
	border: 1px solid #e2e5ee;
	color: var(--ink-60);
}
.bms-home .bms-home__top .statchips svg { color: #0a8f22; }

/* --- controls: neutral, like the reference's thin circular arrows --- */
.bms-home .bms-home__top .bms-arrow {
	background: #fff;
	border: 1px solid #e2e5ee;
}
.bms-home .bms-home__top .bms-arrow svg { color: var(--navy); }
.bms-home .bms-home__top .bms-arrow:hover { background: var(--navy); }
.bms-home .bms-home__top .bms-arrow:hover svg { color: #fff; }

.bms-home .bms-home__top .bms-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d3d7e3;
}
.bms-home .bms-home__top .bms-dot i { display: none; }
.bms-home .bms-home__top .bms-dot.on { background: var(--navy); }

.bms-home .bms-home__top .prodchip { box-shadow: 0 10px 26px -14px rgba(18, 23, 67, .35); }
.bms-home .bms-home__top .prodchip .pc-p { color: var(--navy); }

/* --- side cards ---
   A white wash over a photograph drains it to nothing — the lorry and the
   pallets were barely readable. The photos run at full strength instead, with
   a scrim rising only from the bottom where the text actually sits. Neutral
   navy, so the loud green card is still gone. */
.bms-home .bms-home__top .scard { color: #fff; }
.bms-home .bms-home__top .scard.a .scard-scrim,
.bms-home .bms-home__top .scard.b .scard-scrim {
	background: linear-gradient(180deg,
		rgba(11, 15, 42, 0) 26%,
		rgba(11, 15, 42, .48) 58%,
		rgba(11, 15, 42, .88) 100%);
}
.bms-home .bms-home__top .scard .tag { color: #6ff07d; opacity: 1; }
.bms-home .bms-home__top .scard .h3,
.bms-home .bms-home__top .scard .lnk,
.bms-home .bms-home__top .scard.b .scard-c { color: #fff; }

/* Minimal banner, narrow screens.
   There is no room for a side-by-side split, so the panel becomes a white
   ground that the copy sits on and releases toward the bottom, letting the
   photograph show beneath it rather than being hidden behind an opaque panel. */
@media (max-width: 780px) {
	.bms-home .bms-home__top .slide-img { left: 0; }
	.bms-home .bms-home__top .slide-panel::after { display: none; }
	.bms-home .bms-home__top .slide-panel {
		width: 100%;
		border-right: 0;
		box-shadow: none;
		opacity: 1;
		background: linear-gradient(180deg,
			#ffffff 0%,
			#ffffff 52%,
			rgba(255, 255, 255, .72) 74%,
			rgba(255, 255, 255, 0) 100%);
	}
	.bms-home .bms-home__top .slide-body {
		top: 30px;
		transform: none;
		max-width: none;
	}
}