/* ==========================================================================
   Benjamin Moore France — redesign layer
   Loaded after the legacy stylesheet; new components use bm- prefixed classes
   so the old CSS never fights them.
   Tokens are taken from the Figma mock (file hxm0hJDNKsKcqpJQBs5gWb).
   ========================================================================== */

/* --- webfonts -------------------------------------------------------------
   Licensed files supplied by the client, converted to woff2.
   Proxima Nova ships no Medium (500) — 500 is mapped to Semibold, which is the
   closer match for the nav / labels / buttons that use it in the mock.
   Moderat is the mock's face for the home H1 and the tare prices; the client
   supplied it on 2026-08-12, so `--bm-font-hero` now resolves to it and falls
   back to Macklin Display. Three families to license, not two. */
@font-face{
	font-family:'Moderat';
	src:url('../fonts/moderat-regular.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Moderat';
	src:url('../fonts/moderat-medium.woff2') format('woff2');
	font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Moderat';
	src:url('../fonts/moderat-bold.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Proxima Nova';
	src:url('../fonts/proximanova-light.woff2') format('woff2');
	font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Proxima Nova';
	src:url('../fonts/proximanova-regular.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Proxima Nova';
	src:url('../fonts/proximanova-semibold.woff2') format('woff2');
	font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Proxima Nova';
	src:url('../fonts/proximanova-semibold.woff2') format('woff2');
	font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Proxima Nova';
	src:url('../fonts/proximanova-bold.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Macklin Display';
	src:url('../fonts/macklindisplay-regular.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Macklin Display';
	src:url('../fonts/macklindisplay-medium.woff2') format('woff2');
	font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Macklin Display';
	src:url('../fonts/macklindisplay-bold.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
}

:root{
	/* palette */
	--bm-navy:#001641;
	--bm-dark:#1D262F;
	--bm-black:#000000;
	--bm-white:#FFFFFF;
	--bm-mist:#ECF4F5;
	--bm-ink-2:#2D2D2D;
	--bm-grey:#828282;
	--bm-grey-2:#9A9A9A;
	--bm-grey-3:#B9BAB7;
	--bm-line:#BDBDBD;
	--bm-line-2:#E0E0E0;
	--bm-bg-soft:#EFEFEF;
	--bm-red:#8C1F1D;
	--bm-red-bright:#CD163F;
	--bm-terracotta:#D86236;
	--bm-brick:#BA3B35;
	--bm-green:#28604B;

	/* type */
	--bm-font:'Proxima Nova',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	--bm-font-display:'Macklin Display','Prata',Georgia,'Times New Roman',serif;
	--bm-font-hero:'Moderat','Macklin Display','Prata',Georgia,'Times New Roman',serif;
	--bm-teal:#2C8395;

	/* layout
	   The mock is drawn at 1440 with a 76px gutter, but the design is meant to
	   run edge to edge — so the container is unbounded and the gutter keeps the
	   mock's 5.28% ratio instead, capped so it stops growing on huge monitors. */
	--bm-container:none;
	--bm-gutter:clamp(41px,5.28vw,160px);
	--bm-header-h:120px;

	/* radii */
	--bm-r-sm:4px;
	--bm-r-md:8px;
	--bm-r-lg:12px;
	--bm-r-pill:20px;
}

/* --- shared container ---------------------------------------------------- */
.bm-container{
	width:100%;
	max-width:var(--bm-container);
	margin:0 auto;
	padding:0 var(--bm-gutter);
	box-sizing:border-box;
}

/* ==========================================================================
   HEADER
   Figma: screen "Colors Item" / Header — 1440x120.
   Two states: solid white on inner pages, transparent-over-hero on the home
   page (the mock shows a white logo and white icons there).
   ========================================================================== */
.bm-header{
	position:relative;
	z-index:120;
	background:var(--bm-white);
	font-family:var(--bm-font);
}
.bm-header__inner{
	display:flex;
	align-items:center;
	height:var(--bm-header-h);
}
.bm-header__logo{
	display:block;
	flex:0 0 auto;
	width:239px;
	height:38px;
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-image:url('/assets/main-logo-black-e3f6f2a1b4ef331efd39463ac93b5ac4b5ea70c576631b5448937e8007e4dddd.svg');
	margin:0;
}

/* primary nav */
.bm-nav{
	display:flex;
	align-items:center;
	gap:53px;
	/* the mock puts the nav 211px after the logo at 1440 — keep that ratio */
	margin:0 0 0 clamp(40px,14.65vw,240px);
	padding:0;
	list-style:none;
}
.bm-nav__item{margin:0;padding:0;position:static;}
.bm-nav__link{
	display:flex;
	align-items:center;
	gap:7px;
	height:var(--bm-header-h);
	font:400 16px/20px var(--bm-font);
	color:var(--bm-black);
	text-decoration:none;
	text-transform:none;
	letter-spacing:0;
	white-space:nowrap;
	transition:opacity .18s ease;
}
.bm-nav__link:hover{opacity:.65;}
.bm-nav__chev{
	display:block;
	width:10px;height:6px;
	flex:none;
	transition:transform .2s ease;
}
.bm-nav__chev svg{display:block;width:100%;height:100%;}

/* second level — a full-width drawer under the header, as on the old site but
   without the thumbnails. `.bm-nav__item` stays position:static so the drawer
   resolves against `.bm-header`. */
.bm-drawer{
	position:absolute;
	left:0;right:0;
	top:100%;
	background:var(--bm-white);
	border-top:1px solid var(--bm-line-2);
	box-shadow:0 12px 24px rgba(0,0,0,.08);
	padding:36px 0 44px;
	opacity:0;
	visibility:hidden;
	transform:translateY(-8px);
	transition:opacity .2s ease,transform .2s ease,visibility .2s;
	z-index:5;
}
.bm-nav__item--has-sub:hover .bm-drawer,
.bm-nav__item--has-sub:focus-within .bm-drawer{
	opacity:1;
	visibility:visible;
	transform:none;
}
.bm-nav__item--has-sub:hover .bm-nav__chev,
.bm-nav__item--has-sub:focus-within .bm-nav__chev{transform:rotate(180deg);}
/* Multi-column rather than grid: it flows top-to-bottom then across, which is
   how the old drawer's columns read, and it stays packed left instead of
   stretching the links apart on a wide monitor. */
.bm-drawer__list{
	list-style:none;
	margin:0;padding:0;
	columns:4 240px;
	column-gap:56px;
	max-width:1120px;
}
.bm-drawer__item{margin:0 0 18px;padding:0;break-inside:avoid;}
.bm-drawer__link{
	display:inline-block;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-dark);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:border-color .18s ease;
}
.bm-drawer__link:hover{border-bottom-color:var(--bm-dark);}

/* right-hand icon rail */
.bm-header__tools{
	display:flex;
	align-items:center;
	margin-left:auto;
	gap:28px;
}
.bm-tool{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--bm-black);
	text-decoration:none;
	background:none;
	border:0;
	padding:0;
	cursor:pointer;
	position:relative;
	transition:opacity .18s ease;
}
.bm-tool:hover{opacity:.65;}
.bm-tool svg{display:block;height:18px;width:auto;}
.bm-tool--pin svg{height:15px;}
.bm-tool--search svg{height:17px;}
.bm-tool--user svg{height:15px;}
.bm-tool--cart svg{height:19px;}
.bm-tool__count{
	position:absolute;
	top:-7px;right:-9px;
	min-width:16px;height:16px;
	border-radius:8px;
	background:var(--bm-red-bright);
	color:#fff;
	font:600 10px/16px var(--bm-font);
	text-align:center;
}
/* language switcher — the header shows the active flag, the drop-down names both */
.bm-lang{
	position:relative;
	display:inline-flex;
	align-items:center;
	margin-left:46px;
	color:var(--bm-black);
}
.bm-lang__btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:none;
	border:0;
	padding:6px 0;
	cursor:pointer;
	color:inherit;
}
.bm-lang__flag{
	display:block;
	width:24px;height:16px;
	flex:none;
	border-radius:2px;
	overflow:hidden;
}
.bm-lang__flag svg{display:block;width:100%;height:100%;}
.bm-lang__chev{display:block;width:10px;height:6px;flex:none;transition:transform .2s ease;}
.bm-lang__chev svg{display:block;width:100%;height:100%;}
.bm-lang__drop{
	position:absolute;
	top:calc(100% + 10px);
	right:0;
	min-width:172px;
	margin:0;padding:6px 0;
	list-style:none;
	background:var(--bm-white);
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-md);
	box-shadow:0 10px 22px rgba(0,0,0,.1);
	opacity:0;
	visibility:hidden;
	transform:translateY(-6px);
	transition:opacity .18s ease,transform .18s ease,visibility .18s;
	z-index:10;
}
.bm-lang:hover .bm-lang__drop,
.bm-lang:focus-within .bm-lang__drop,
.bm-lang.is-open .bm-lang__drop{
	opacity:1;
	visibility:visible;
	transform:none;
}
.bm-lang:hover .bm-lang__chev,
.bm-lang:focus-within .bm-lang__chev,
.bm-lang.is-open .bm-lang__chev{transform:rotate(180deg);}
.bm-lang__opt{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 16px;
	font:400 15px/20px var(--bm-font);
	color:var(--bm-dark);
	text-decoration:none;
	white-space:nowrap;
}
.bm-lang__opt:hover{background:var(--bm-bg-soft);}
.bm-lang__opt--active{font-weight:600;}

/* home page: transparent header sitting on top of the hero */
.bm-header--overlay{
	position:absolute;
	top:0;left:0;right:0;
	background:transparent;
}
.bm-header--overlay .bm-header__logo{
	background-image:url('/assets/main-logo-5c68d9afb27bb0a9260fe8e4beb17c8e7edcb8654305a005ac6373feb81f208d.svg');
}
.bm-header--overlay .bm-nav__link,
.bm-header--overlay .bm-tool,
.bm-header--overlay .bm-lang{color:var(--bm-white);}
.bm-header--overlay .bm-burger span,
.bm-header--overlay .bm-burger span:before,
.bm-header--overlay .bm-burger span:after{background:var(--bm-white);}

/* burger — hidden on desktop */
.bm-burger{
	display:none;
	width:44px;height:44px;
	margin-left:auto;
	align-items:center;justify-content:center;
	background:none;border:0;cursor:pointer;
}
.bm-burger span{
	display:block;width:22px;height:2px;background:var(--bm-black);
	position:relative;transition:.2s ease;
}
.bm-burger span:before,.bm-burger span:after{
	content:'';position:absolute;left:0;width:22px;height:2px;background:var(--bm-black);
	transition:.2s ease;
}
.bm-burger span:before{top:-7px;}
.bm-burger span:after{top:7px;}
/* the legacy script toggles .mobile-menu-toggler--opened */
.bm-burger.is-open span,
.bm-burger.mobile-menu-toggler--opened span{background:transparent;}
.bm-burger.is-open span:before,
.bm-burger.mobile-menu-toggler--opened span:before{top:0;transform:rotate(45deg);}
.bm-burger.is-open span:after,
.bm-burger.mobile-menu-toggler--opened span:after{top:0;transform:rotate(-45deg);}

/* ==========================================================================
   FOOTER
   Figma: Components / Footer — 1440x382, #1D262F
   ========================================================================== */
.bm-footer{
	background:var(--bm-dark);
	color:var(--bm-white);
	font-family:var(--bm-font);
	padding:82px 0 0;
}
.bm-footer__grid{
	display:grid;
	/* The mock's fixed 219/310/168/214 columns left all the slack to the social
	   column, so the content bunched up on the left of a wide screen. Four
	   flexible columns spread it evenly; the socials still hug the right edge. */
	grid-template-columns:repeat(4,minmax(0,1fr)) auto;
	gap:0 clamp(28px,3.2vw,61px);
	align-items:start;
}
.bm-footer__brand{
	font:500 20px/24px var(--bm-font);
	color:var(--bm-white);
	margin:0 0 19px;
}
.bm-footer__tagline{
	font:300 16px/24px var(--bm-font);
	color:var(--bm-white);
	margin:0;
}
.bm-footer__contacts{
	display:flex;
	gap:9px;
	font:400 12px/16px var(--bm-font);
	color:var(--bm-mist);
	padding-top:3px;
}
.bm-footer__contacts svg{flex:0 0 auto;margin-top:-3px;color:var(--bm-white);}
/* the legacy sheet sets a dark colour on p/a, which beats inheritance */
.bm-footer__contacts p,
.bm-footer__contacts div{margin:0 0 16px;color:var(--bm-mist);}
.bm-footer__contacts div{margin:0;}
.bm-footer__contacts p:last-child{margin-bottom:0;}
.bm-footer__contacts a{color:var(--bm-mist);text-decoration:none;}
.bm-footer__contacts a:hover{text-decoration:underline;}
/* Cloudflare rewrites the mail link; keep its span readable too */
.bm-footer__contacts .__cf_email__{color:var(--bm-mist);}
.bm-footer__brand,
.bm-footer__tagline{color:var(--bm-white);}
.bm-footer__bottom{color:var(--bm-white);}

.bm-footer__links{
	list-style:none;
	margin:0;padding:3px 0 0;
	font:400 12px/22px var(--bm-font);
}
.bm-footer__links a{
	color:var(--bm-mist);
	text-decoration:none;
}
.bm-footer__links a:hover{text-decoration:underline;}

.bm-footer__social{
	display:flex;
	justify-content:flex-end;
	gap:14px;
	padding-top:3px;
}
.bm-footer__social a{color:var(--bm-bg-soft);line-height:0;}
.bm-footer__social a:hover{opacity:.75;}

/* review badges — mock has them centred between the columns and the copyright */
.bm-footer__ratings{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:20px 46px;
	margin-top:52px;
}
.bm-rating{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:12px 20px;
	border:1px solid rgba(255,255,255,.28);
	border-radius:var(--bm-r-md);
	color:var(--bm-white);
	text-decoration:none;
	font-family:var(--bm-font);
}
a.bm-rating:hover{border-color:rgba(255,255,255,.6);}
.bm-rating__logo{display:block;line-height:0;color:var(--bm-white);}
.bm-rating__logo svg{display:block;height:24px;width:auto;}
.bm-rating--av .bm-rating__logo svg{height:22px;}
.bm-rating__score{font:700 20px/1 var(--bm-font);}
.bm-rating__count{font:400 15px/1 var(--bm-font);color:var(--bm-grey-3);}
/* two star rows stacked: a grey track and a gold overlay clipped to the score */
.bm-rating__stars{position:relative;display:block;line-height:0;}
.bm-rating__stars-bg,
.bm-rating__stars-fg{display:flex;gap:3px;}
.bm-rating__stars-fg{
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
.bm-rating__stars svg{display:block;flex:none;}
/* Google: gold star outlines */
.bm-rating__stars--gold svg{height:17px;width:18px;}
.bm-rating__stars--gold .bm-rating__stars-bg{fill:rgba(255,255,255,.28);}
.bm-rating__stars--gold .bm-rating__stars-fg{fill:#FBBC05;}
/* Verified Reviews: the mock's tile glyph — dark star on a white square.
   `currentColor` paints the tile, so the track just dims it. */
.bm-rating__stars--tile{gap:0;}
.bm-rating__stars--tile .bm-rating__stars-bg,
.bm-rating__stars--tile .bm-rating__stars-fg{gap:5px;}
.bm-rating__stars--tile svg{height:22px;width:22px;}
.bm-rating__stars--tile .bm-rating__stars-bg{color:rgba(255,255,255,.3);}
.bm-rating__stars--tile .bm-rating__stars-fg{color:var(--bm-white);}

.bm-footer__bottom{
	margin-top:56px;
	padding:0 0 21px;
	text-align:center;
	font:400 12px/16px var(--bm-font);
	color:var(--bm-white);
}
.bm-footer__ratings + .bm-footer__bottom{margin-top:34px;}

/* ==========================================================================
   Responsive — mock breakpoints are 1440 / 834 / 393
   ========================================================================== */
/* tablet — mock "Colors Item - Tablet": 834x120, no nav, five icons, burger */
@media (max-width:1199px){
	:root{--bm-gutter:41px;--bm-header-h:120px;}
	.bm-nav{display:none;}
	.bm-header__tools{gap:18px;}
	.bm-lang{display:none;}
	.bm-burger{display:flex;margin-left:72px;}
	.bm-footer__grid{
		grid-template-columns:1fr 1fr;
		gap:40px 40px;
	}
	.bm-footer__social{justify-content:flex-start;}
	/* Two columns means the contacts block sits directly above the second menu
	   column. In the mock the house icon hangs out into the gutter so the
	   address text and the links below it share one left edge — without this the
	   menu starts 33px left of the address. */
	.bm-footer__contacts{position:relative;padding-left:0;}
	.bm-footer__contacts > svg{position:absolute;left:-33px;top:3px;}
}
/* phone — mock "Colors Item - Phone": 393x79, logo + cart + burger only */
@media (max-width:767px){
	:root{--bm-gutter:27px;--bm-header-h:79px;}
	.bm-header__logo{width:213px;height:33px;}
	.bm-header__tools{gap:22px;}
	.bm-header__tools .bm-tool--pin,
	.bm-header__tools .bm-tool--search,
	.bm-header__tools .bm-tool--user,
	.bm-header__tools .bm-tool--list{display:none;}
	.bm-tool--cart svg{height:22px;}
	.bm-burger{margin-left:22px;}
	.bm-footer{padding-top:48px;}
	.bm-footer__grid{grid-template-columns:1fr;gap:32px;text-align:center;}
	.bm-footer__bottom{margin-top:32px;}
	/* the mock centres every footer row on a phone, with the house icon on its
	   own line above the address rather than beside it */
	.bm-footer__contacts{flex-direction:column;align-items:center;gap:12px;}
	.bm-footer__contacts > svg{position:static;}
	.bm-footer__links{display:flex;flex-direction:column;align-items:center;}
	.bm-footer__social{justify-content:center;}
	.bm-footer__ratings{justify-content:center;}
}
@media (max-width:419px){
	:root{--bm-gutter:16px;}
	.bm-header__logo{width:180px;height:28px;}
}

/* An off-canvas `.bm-drawer` / `.bm-scrim` pair used to live here. Nothing ever
   rendered it — the mobile menu uses the legacy `.mobile-menu-container`
   markup — and it silently overrode the header's submenu drawer, so it is gone. */

/* ==========================================================================
   BUTTONS — Figma component set "Button"
   All share: 9px/30px padding, 20px radius, Proxima Nova 400 16/20, ls .2
   ========================================================================== */
.bm-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:9px 30px;
	border-radius:var(--bm-r-pill);
	border:1px solid transparent;
	font:400 16px/20px var(--bm-font);
	letter-spacing:.2px;
	text-decoration:none;
	cursor:pointer;
	transition:opacity .18s ease,background .18s ease,color .18s ease;
	white-space:nowrap;
}
.bm-btn:hover{opacity:.85;}
.bm-btn--main{background:var(--bm-teal);border-color:var(--bm-teal);color:#fff;}
.bm-btn--black{background:var(--bm-ink-2);border-color:var(--bm-ink-2);color:#fff;}
.bm-btn--white{background:#fff;border-color:#fff;color:var(--bm-ink-2);}
.bm-btn--outline{background:var(--bm-dark);border-color:#fff;color:#fff;}
.bm-btn--red{background:#BC2F43;border-color:var(--bm-red-bright);color:#fff;}
.bm-btn--disabled,.bm-btn[disabled]{background:var(--bm-line-2);border-color:var(--bm-line-2);color:#fff;pointer-events:none;}
.bm-btn--sm{padding:4px 16px;}
.bm-btn--sm-red{background:var(--bm-red-bright);border-color:#BC2F43;color:#fff;padding:4px 16px;}
.bm-btn--sm-outline{background:var(--bm-dark);border-color:#fff;color:#fff;padding:4px 16px;}

/* ==========================================================================
   HOME — hero
   Figma "Desktop - alt": media 1440x846, H1 Moderat 500 48/48 at (77,560),
   subtitle Proxima Nova 300 20/24 at (77,676), White button at (77,726)
   ========================================================================== */
.bm-hero{
	position:relative;
	/* 846/1440 = 58.75% — holding the mock's proportion means a wide screen shows
	   the whole photo instead of a zoomed-in crop; capped so it stops growing. */
	min-height:clamp(846px,58.75vw,1000px);
	display:flex;
	align-items:flex-end;
	overflow:hidden;
	background:var(--bm-dark);
}
.bm-hero__media{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:0;
}
.bm-hero::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.45) 100%);
	z-index:1;
}
.bm-hero__inner{
	position:relative;
	z-index:2;
	width:100%;
	padding-bottom:82px;
}
.bm-hero__title{
	margin:0 0 20px;
	max-width:640px;
	font:500 48px/48px var(--bm-font-hero);
	color:var(--bm-white);
	text-transform:none;/*the legacy sheet uppercases h1*/
	letter-spacing:0;
}
.bm-hero__subtitle{
	margin:0 0 26px;
	max-width:520px;
	font:300 20px/24px var(--bm-font);
	color:var(--bm-white);
}
.bm-hero .bm-btn{margin:0;}

@media (max-width:1199px){
	.bm-hero{min-height:640px;}
	.bm-hero__title{font-size:40px;line-height:42px;}
	.bm-hero__inner{padding-bottom:64px;}
}
@media (max-width:767px){
	.bm-hero{min-height:520px;}
	.bm-hero__title{font-size:30px;line-height:34px;}
	.bm-hero__subtitle{font-size:16px;line-height:22px;}
	.bm-hero__inner{padding-bottom:44px;}
}

/* ==========================================================================
   HOME — section shell + card rail
   Figma: "News and promotion" (y916) and "Find Your Product" (y3031).
   Heading Macklin Display 400 48/58; "See all" Proxima Nova 300 20/24.
   Cards 282 wide: image 353 tall (radius 4 4 0 0) + coloured caption 139 tall.
   The fifth card is clipped in the mock — the rail scrolls horizontally.
   ========================================================================== */
.bm-section{padding:70px 0 0;font-family:var(--bm-font);}
.bm-section__head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:24px;
	margin:0 0 59px;
}
.bm-section__title{
	margin:0;
	font:400 48px/58px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;
	letter-spacing:0;
}
.bm-section__all{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font:300 20px/24px var(--bm-font);
	color:var(--bm-black);
	text-decoration:none;
	white-space:nowrap;
}
.bm-section__all:hover{opacity:.65;}
.bm-section__all:after{
	content:'';
	width:7px;height:12px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* horizontal rail — Swiper (already bundled) with arrows; bleeds right like the mock */
.bm-rail-wrap{position:relative;}
.bm-rail{
	display:flex;
	gap:18px;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	scroll-behavior:smooth;
	scroll-snap-type:x proximity;
	padding-bottom:4px;
	width:100%;
	scrollbar-width:none;
}
.bm-rail::-webkit-scrollbar{display:none;}
.bm-rail__nav{
	position:absolute;top:176px;
	width:44px;height:44px;border-radius:50%;
	border:1px solid var(--bm-line);
	background:rgba(255,255,255,.94);
	cursor:pointer;z-index:3;
	display:flex;align-items:center;justify-content:center;
	transition:opacity .18s ease,box-shadow .18s ease;
	box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.bm-rail__nav:hover{box-shadow:0 4px 14px rgba(0,0,0,.14);}
.bm-rail__nav:before{
	content:'';width:10px;height:16px;background:var(--bm-black);
	-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.bm-rail__nav--prev{left:-22px;}
.bm-rail__nav--prev:before{transform:rotate(180deg);}
.bm-rail__nav--next{right:-22px;}
.bm-rail__nav.is-disabled{opacity:.35;pointer-events:none;}
.bm-card{
	flex:0 0 282px;
	width:282px;
	scroll-snap-align:start;
	display:flex;
	flex-direction:column;
	text-decoration:none;
	border-radius:var(--bm-r-sm);
	overflow:hidden;
	background:var(--bm-bg-soft);
}
.bm-card__media{
	display:block;
	width:282px;
	height:353px;
	flex:0 0 353px;
	background:var(--bm-line-2);
	overflow:hidden;
}
.bm-card__media picture{display:block;width:100%;height:100%;}
.bm-card__media img{display:block;width:100%;height:100%;object-fit:cover;}
.bm-card__body{
	height:139px;
	padding:37px 28px 20px;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
}
.bm-card__text{
	margin:0;
	font:400 16px/16px var(--bm-font);
	display:-webkit-box;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
/* caption palette from the mock, paired for contrast */
.bm-card:nth-child(5n+1) .bm-card__body{background:#8F6259;}
.bm-card:nth-child(5n+2) .bm-card__body{background:#56504D;}
.bm-card:nth-child(5n+3) .bm-card__body{background:#F1E8C3;}
.bm-card:nth-child(5n+4) .bm-card__body{background:#D7CAA6;}
.bm-card:nth-child(5n+5) .bm-card__body{background:#7A7263;}
.bm-card:nth-child(5n+1) .bm-card__text,
.bm-card:nth-child(5n+2) .bm-card__text,
.bm-card:nth-child(5n+5) .bm-card__text{color:var(--bm-white);}
.bm-card:nth-child(5n+3) .bm-card__text,
.bm-card:nth-child(5n+4) .bm-card__text{color:var(--bm-ink-2);}

@media (max-width:1199px){
	.bm-section{padding-top:56px;}
	.bm-section__title{font-size:36px;line-height:44px;}
	.bm-section__head{margin-bottom:40px;}
}
@media (max-width:767px){
	.bm-section{padding-top:40px;}
	.bm-section__title{font-size:28px;line-height:34px;}
	.bm-section__head{margin-bottom:28px;flex-direction:column;align-items:flex-start;gap:10px;}
	.bm-section__all{font-size:16px;line-height:20px;}
	.bm-card{flex-basis:240px;}
	.bm-card__media{width:240px;height:300px;}
	.bm-card__body{padding:24px 20px 18px;min-height:118px;}
}

/* ==========================================================================
   HOME — "Choose a collection"
   Figma y1656–2606: dark rail on the left (#1F262E, 411 wide at 1440),
   hero shot on the right, a strip of six swatches, then palette copy + CTA.
   ========================================================================== */
.bm-collections{
	position:relative;
	display:grid;
	grid-template-columns:411px minmax(0,1fr);
	background:var(--bm-white);
	font-family:var(--bm-font);
	margin-top:90px;
}
.bm-collections__aside{
	background:#1F262E;
	color:var(--bm-white);
	/* Left padding must be the shared gutter, not a copy of the ratio: the token
	   is clamped at both ends, so a bare 5.28vw drifts away from every other
	   block below ~780px and above ~3030px. */
	padding:217px 60px 60px var(--bm-gutter);
	box-sizing:border-box;
}
.bm-collections__title{
	margin:0 0 10px;
	/*
	font:400 48px/48px var(--bm-font-display);
	*/
	font:400 40px/40px var(--bm-font-display);
	color:var(--bm-white);
	text-transform:none;
	letter-spacing:0;
}
.bm-collections__sub{
	margin:0 0 35px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-white);
}
.bm-collections__filters{
	list-style:none;
	margin:0 0 24px;
	padding:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
}
.bm-collections__more{
	display:inline-block;
	font:400 16px/20px var(--bm-font);
	letter-spacing:.2px;
	color:var(--bm-white);
	text-decoration:none;
}
.bm-collections__more:hover{
	color:var(--bm-white);
	opacity:.7;
}

.bm-collections__main{position:relative;min-width:0;}
.bm-collections__pane{display:none;}
.bm-collections__pane.is-active{display:block;}
.bm-collections__shot{
	position:relative;
	height:517px;
	background:var(--bm-line-2);
	overflow:hidden;
}
.bm-collections__shot picture,
.bm-collections__shot img{display:block;width:100%;height:100%;object-fit:cover;}

/* swatch strip, overlapping the bottom of the shot like the mock */
.bm-swatches{
	display:flex;
	gap:14px;
	padding:0 0 0 78px;
	margin-top:-42px;
	position:relative;
	z-index:2;
	overflow-x:auto;
	scrollbar-width:none;
}
.bm-swatches::-webkit-scrollbar{display:none;}
.bm-swatch{
	flex:0 0 124px;
	height:126px;
	border-radius:2px;
	padding:10px 12px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	text-decoration:none;
	background:var(--bm-line-2);
}
.bm-swatch__name{font:600 14px/18px var(--bm-font);}
.bm-swatch__code{font:400 14px/18px var(--bm-font);}
.bm-swatch--light .bm-swatch__name,
.bm-swatch--light .bm-swatch__code{color:var(--bm-ink-2);}
.bm-swatch--dark .bm-swatch__name,
.bm-swatch--dark .bm-swatch__code{color:var(--bm-white);}

.bm-collections__copy{padding:78px 78px 90px;max-width:640px;}
.bm-collections__name{
	margin:0 0 16px;
	font:500 40px/40px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;
	letter-spacing:0;
}
.bm-collections__text{
	margin:0 0 40px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.bm-collections__text p{margin:0 0 10px;}

@media (max-width:1199px){
	.bm-collections{grid-template-columns:1fr;margin-top:56px;}
	.bm-collections__aside{padding:56px 41px;}
	.bm-collections__title{font-size:36px;line-height:40px;}
	.bm-collections__filters{flex-direction:row;flex-wrap:wrap;}
	.bm-collections__shot{height:380px;}
	.bm-swatches{padding-left:41px;margin-top:-36px;}
	.bm-collections__copy{padding:48px 41px 64px;}
	.bm-collections__name{font-size:30px;line-height:34px;}
}
@media (max-width:767px){
	.bm-collections__aside{padding:40px 27px;}
	.bm-collections__title{font-size:28px;line-height:32px;}
	.bm-collections__shot{height:260px;}
	.bm-swatches{padding-left:27px;gap:10px;}
	.bm-swatch{flex-basis:108px;height:112px;}
	.bm-collections__copy{padding:36px 27px 48px;}
}

/* --- product variant of the card rail (Find Your Product, y3031) ---------- */
.bm-card--product .bm-card__media{background:var(--bm-bg-soft);display:flex;align-items:center;justify-content:center;}
.bm-card--product .bm-card__media img{width:auto;height:auto;max-width:273px;max-height:273px;object-fit:contain;}
.bm-card--product .bm-card__media picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.bm-card--product .bm-card__text{font:400 20px/34px var(--bm-font);-webkit-line-clamp:3;}
.bm-card--product:nth-child(5n+1) .bm-card__body{background:#F1E8C3;}
.bm-card--product:nth-child(5n+2) .bm-card__body{background:#A9B3AB;}
.bm-card--product:nth-child(5n+3) .bm-card__body{background:#E6DFD1;}
.bm-card--product:nth-child(5n+4) .bm-card__body{background:#F1E8C3;}
.bm-card--product:nth-child(5n+5) .bm-card__body{background:#D7CAA6;}
.bm-card--product .bm-card__text{color:var(--bm-ink-2)!important;}

/* ==========================================================================
   HOME — advantages strip (Figma y3801–3951)
   Icons ~75px, captions Fira Sans 350 20/25, centred, five across
   ========================================================================== */
.bm-advantages{padding:96px 0 100px;font-family:var(--bm-font);}
.bm-advantages__grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:40px 24px;
	align-items:start;
}
.bm-advantages__item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:22px;
}
.bm-advantages__icon{
	width:75px;height:75px;
	display:flex;align-items:center;justify-content:center;
	color:var(--bm-black);
}
.bm-advantages__icon svg{width:100%;height:100%;}
.bm-advantages__icon img{max-width:75px;max-height:75px;}
.bm-advantages__name{
	margin:0;
	font:350 20px/25px 'Fira Sans',var(--bm-font);
	color:var(--bm-black);
	max-width:190px;
}
.bm-advantages__text{
	margin:0;
	font:400 14px/20px var(--bm-font);
	color:var(--bm-grey);
	max-width:220px;
}
@media (max-width:1199px){
	.bm-advantages{padding:64px 0 72px;}
	.bm-advantages__grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
	.bm-advantages{padding:44px 0 52px;}
	.bm-advantages__grid{grid-template-columns:repeat(2,1fr);gap:32px 16px;}
	.bm-advantages__name{font-size:17px;line-height:22px;}
}

/* ==========================================================================
   HOME — Color Samples promo (Figma y2681–2918)
   ========================================================================== */
.bm-promo{padding:96px 0 0;font-family:var(--bm-font);}
.bm-promo__grid{
	display:grid;
	/* mock: 624 image / 120 gap / 542 text — kept as ratios so the pair scales
	   with the page instead of leaving all the slack to the text column */
	grid-template-columns:624fr 542fr;
	gap:clamp(48px,8.3vw,150px);
	align-items:center;
}
/* Two layered pictures, as in the mock: the wide lifestyle shot, with the
   sample jar overlapping its right-hand end and bleeding past top and bottom.
   Positions are percentages of the shot so the pair scales together.
   Mock geometry: shot 624x216 at x=77, jar 324x269 at x=441, 21px higher. */
.bm-promo__media{position:relative;}
.bm-promo__shot picture,
.bm-promo__shot img{display:block;width:100%;height:auto;border-radius:14px;}
.bm-promo__jar{
	position:absolute;
	left:58.3%;
	top:-14%;
	width:47%;
	z-index:2;
	pointer-events:none;
}
.bm-promo__jar picture,
.bm-promo__jar img{display:block;width:100%;height:auto;}
.bm-promo__title{
	margin:0 0 24px;
	font:400 48px/58px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-promo__text{
	margin:0 0 34px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.bm-promo__text p{margin:0 0 10px;}
@media (max-width:1199px){
	.bm-promo{padding-top:64px;}
	.bm-promo__grid{gap:48px;}
	.bm-promo__title{font-size:34px;line-height:42px;}
}
@media (max-width:767px){
	.bm-promo{padding-top:44px;}
	.bm-promo__grid{grid-template-columns:1fr;gap:28px;}
	.bm-promo__title{font-size:28px;line-height:34px;}
}

/* ==========================================================================
   COLOUR DETAIL PAGE — Figma "Colors Item"
   Hero paints the page with the colour itself; then shades, combinations
   and similar colours, each a strip of swatches.
   ========================================================================== */
.bm-color__hero{
	position:relative;
	min-height:513px;
	color:var(--bm-white);
	font-family:var(--bm-font);
	overflow:hidden;
}
.bm-color__hero .bm-container{position:relative;z-index:2;}
.bm-color__crumbs{
	padding:22px 0 0;
	font:400 16px/18px var(--bm-font);
}
.bm-color__crumbs a{color:var(--bm-white);text-decoration:underline;}
.bm-color__crumbs span{opacity:.85;}
.bm-color__crumbs i{font-style:normal;padding:0 8px;opacity:.7;}
.bm-color__grid{
	display:grid;
	grid-template-columns:minmax(0,560px) minmax(0,721px);
	gap:24px;
	align-items:start;
}
.bm-color__name{
	margin:105px 0 0;
	font:400 72px/79px var(--bm-font-display);
	letter-spacing:-1.5px;
	color:var(--bm-white);
	text-transform:none;
}
.bm-color__code{
	margin:18px 0 0;
	font:700 28px/35px var(--bm-font);
	letter-spacing:-.3px;
}
.bm-color__desc{
	margin:18px 0 0;
	max-width:448px;
	font:400 16px/24px var(--bm-font);
}
.bm-color__meta{margin:22px 0 0;}
.bm-color__row{
	display:flex;
	align-items:center;
	gap:12px;
	font:500 20px/24px var(--bm-font);
	margin-bottom:6px;
}
.bm-color__row small{font:400 16px/24px var(--bm-font);}
.bm-color__label{font:500 20px/24px var(--bm-font);margin:22px 0 2px;}
.bm-color__collection{font:400 16px/24px var(--bm-font);}
.bm-color__cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:42px 0 60px;}
.bm-color__cta .bm-btn{padding:14px 30px;font:500 20px/24px var(--bm-font);}
.bm-btn--onlight{background:#fff;border-color:var(--bm-black);color:var(--bm-ink-2);}
.bm-color__shot{
	margin-top:93px;
	border-radius:var(--bm-r-sm);
	overflow:hidden;
	min-height:1px;
}
.bm-color__shot picture,
.bm-color__shot img{display:block;width:100%;height:auto;}
.bm-color__fav{
	background:none;border:0;padding:0;cursor:pointer;
	color:var(--bm-white);line-height:0;
}


/* light colours need dark type on the hero */
.bm-color__hero--light,
.bm-color__hero--light .bm-color__name,
.bm-color__hero--light .bm-color__crumbs,
.bm-color__hero--light .bm-color__crumbs a,
.bm-color__hero--light .bm-color__fav{color:var(--bm-ink-2);}
.bm-color__hero--light .bm-color__crumbs a{color:var(--bm-ink-2);}
.bm-color__hero--light .bm-btn--onlight{border-color:var(--bm-ink-2);}

/* --- swatch strips -------------------------------------------------------- */
.bm-cstrip{padding:70px 0 0;font-family:var(--bm-font);}
.bm-cstrip__title{
	margin:0 0 42px;
	font:400 48px/58px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-cstrip__sub{
	margin:-30px 0 34px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.bm-cstrip__band{
	display:flex;
	align-items:stretch;
	gap:14px;
	padding:28px 26px;
	border-radius:2px;
	overflow-x:auto;
	scrollbar-width:none;
}
.bm-cstrip__band::-webkit-scrollbar{display:none;}
.bm-cstrip__self{
	flex:0 0 214px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding:4px 0;
}
.bm-cchip{
	flex:0 0 262px;
	min-height:184px;
	border-radius:2px;
	padding:14px 16px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	text-decoration:none;
}
.bm-cchip__name,
.bm-cstrip__self b{font:600 14px/18px var(--bm-font);display:block;}
.bm-cchip__code,
.bm-cstrip__self span{font:400 14px/18px var(--bm-font);display:block;}
.bm-cchip--light,.bm-cchip--light *{color:var(--bm-ink-2);}
.bm-cchip--dark,.bm-cchip--dark *{color:var(--bm-white);}

/* --- colour combinations -------------------------------------------------- */
.bm-combos{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:52px;
}
.bm-combo{
	display:grid;
	grid-template-columns:285px minmax(0,278px);
	gap:12px;
}
.bm-combo__main{
	min-height:364px;
	border-radius:2px;
	padding:18px 20px;
	box-sizing:border-box;
	display:flex;flex-direction:column;justify-content:space-between;
	text-decoration:none;
}
.bm-combo__side{display:flex;flex-direction:column;gap:12px;}
.bm-combo__side .bm-cchip{flex:1 1 auto;min-height:175px;}

@media (max-width:1199px){
	.bm-color__hero{min-height:auto;padding-bottom:40px;}
	.bm-color__grid{grid-template-columns:1fr;}
	.bm-color__name{margin-top:56px;font-size:52px;line-height:58px;}
	.bm-color__shot{margin-top:24px;}
	.bm-cstrip{padding-top:52px;}
	.bm-cstrip__title{font-size:36px;line-height:44px;margin-bottom:30px;}
	.bm-combos{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:767px){
	.bm-color__name{font-size:38px;line-height:42px;margin-top:36px;letter-spacing:-.5px;}
	.bm-color__code{font-size:22px;line-height:28px;}
	.bm-color__cta{margin:28px 0 36px;gap:12px;}
	.bm-color__cta .bm-btn{padding:11px 22px;font-size:16px;line-height:20px;}
	.bm-cstrip{padding-top:40px;}
	.bm-cstrip__title{font-size:28px;line-height:34px;}
	.bm-cstrip__band{padding:18px 16px;}
	.bm-cchip{flex-basis:200px;min-height:150px;}
	.bm-cstrip__self{flex-basis:150px;}
	.bm-combo{grid-template-columns:1fr 1fr;}
	.bm-combo__main{min-height:260px;}
}

/* The legacy sheet puts padding-top on .page-content; redesigned pages start
   flush under the header, so drop it wherever a bm- section leads the page.
   Scoped with :has so pages still on the old markup keep their spacing. */
.page-content:has(> .product-show-page),
.page-content:has(> .catalog),
.page-content:has(> .bm-color),
.page-content:has(> .bm-hero),
.page-content:has(> .bm-section),
.page-content:has(> .bm-collections),
.page-content:has(> .bm-promo),
.page-content:has(> .bm-plist),
.page-content:has(> .bm-pindex){padding-top:0;}

/* ==========================================================================
   COLOUR LISTING — Figma "Red" / "Choose a collection - Item"
   Banner in the family colour, filter pills, then a dense swatch grid.
   ========================================================================== */
.bm-plist__banner{
	min-height:254px;
	display:flex;
	align-items:flex-end;
	font-family:var(--bm-font);
	color:var(--bm-white);
}
.bm-plist__banner--light{color:var(--bm-ink-2);}
.bm-plist__banner .bm-container{width:100%;padding-bottom:18px;}
.bm-plist__crumbs{
	padding:39px 0 0;
	font:400 14px/18px var(--bm-font);
}
.bm-plist__crumbs a{color:inherit;text-decoration:underline;}
.bm-plist__crumbs span{opacity:.85;}
.bm-plist__name{
	margin:38px 0 0;
	font:400 96px/120px var(--bm-font-display);
	letter-spacing:-.3px;
	text-transform:none;
	color:inherit;
}
.bm-plist__body{padding:57px 0 90px;font-family:var(--bm-font);}
.bm-plist__title{
	margin:0 0 24px;
	font:400 48px/58px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-plist__filters{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	list-style:none;
	margin:0 0 22px;
	padding:0;
}
.bm-pill{
	display:inline-flex;
	align-items:center;
	padding:5px 24px;
	border:1px solid var(--bm-ink-2);
	border-radius:var(--bm-r-md);
	background:var(--bm-white);
	color:var(--bm-ink-2);
	font:400 16px/20px var(--bm-font);
	letter-spacing:.2px;
	text-decoration:none;
	white-space:nowrap;
	transition:background .18s ease,color .18s ease;
}
.bm-pill:hover{background:var(--bm-bg-soft);}
.bm-pill--active{background:var(--bm-ink-2);color:var(--bm-white);}
.bm-plist__count{
	margin:0 0 34px;
	font:400 20px/24px var(--bm-font);
	color:var(--bm-black);
}
/* Клиент 11.09 п.1: колонок было жёстко семь, и подборка из десяти цветов
   раскладывалась как 7+3 — во втором ряду четыре дырки. Число колонок для
   десктопа считает шаблон (десять цветов → 5+5) и отдаёт в --bm-swcols-lg;
   если нацело не делится, карточки последнего ряда растягиваются и дырки не
   остаётся. Планшет и телефон остаются на своих 4 и 2 — поэтому значение с
   элемента читается только здесь, а медиазапросы его перекрывают. */
.bm-swgrid{
	--bm-swcols:var(--bm-swcols-lg,7);
	--bm-swgap:8px;
	display:flex;
	flex-wrap:wrap;
	gap:var(--bm-swgap);
	/* the mock runs this grid edge to edge, not inside the page gutter */
	margin-left:calc(10px - var(--bm-gutter));
	margin-right:calc(10px - var(--bm-gutter));
}
.bm-swgrid > *{
	flex-grow:1;
	flex-shrink:1;
	flex-basis:calc((100% - (var(--bm-swcols) - 1) * var(--bm-swgap)) / var(--bm-swcols));
	/* одинокая карточка в последнем ряду не должна расползаться на всю ширину */
	max-width:calc((100% - (var(--bm-swcols) - 1) * var(--bm-swgap)) / var(--bm-swcols) * 2 + var(--bm-swgap));
	min-width:0;
}
.bm-sw{
	position:relative;
	min-height:93px;
	padding:16px 22px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	text-decoration:none;
	transition:transform .15s ease;
}
.bm-sw:hover{transform:scale(1.03);z-index:2;}
.bm-sw__name{font:600 14px/18px var(--bm-font);}
.bm-sw__code{font:400 14px/18px var(--bm-font);}
.bm-sw--light,.bm-sw--light *{color:var(--bm-ink-2);}
.bm-sw--dark,.bm-sw--dark *{color:var(--bm-white);}

@media (max-width:1199px){
	.bm-plist__banner{min-height:200px;}
	.bm-plist__name{font-size:64px;line-height:78px;margin-top:24px;}
	.bm-plist__body{padding:40px 0 64px;}
	.bm-plist__title{font-size:36px;line-height:44px;}
	.bm-swgrid{--bm-swcols:4;
	            margin-left:calc(8px - var(--bm-gutter));margin-right:calc(8px - var(--bm-gutter));}
}
@media (max-width:767px){
	.bm-plist__banner{min-height:150px;}
	.bm-plist__name{font-size:40px;line-height:52px;margin-top:16px;}
	.bm-plist__crumbs{padding-top:22px;}
	.bm-plist__body{padding:28px 0 44px;}
	.bm-plist__title{font-size:28px;line-height:34px;}
	.bm-swgrid{--bm-swcols:2;
	            margin-left:calc(6px - var(--bm-gutter));margin-right:calc(6px - var(--bm-gutter));}
	.bm-sw{padding:12px 14px;min-height:84px;}
}

/* ==========================================================================
   COLOUR INDEX — Figma "Color by Family" / "Choose a collection"
   Heading + filter pills, then one section per family/collection:
   full-bleed shot, big name, five sample swatches, "show all" link.
   ========================================================================== */
.bm-pindex{font-family:var(--bm-font);padding:64px 0 0;}
.bm-pindex__title{
	margin:0 0 16px;
	font:400 48px/58px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-pindex__sub{
	margin:0 0 34px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.bm-pfam{margin:0 0 92px;}
.bm-pfam__shot{
	height:499px;
	background:var(--bm-line-2);
	overflow:hidden;
}
.bm-pfam__shot picture,
.bm-pfam__shot img{display:block;width:100%;height:100%;object-fit:cover;}
.bm-pfam__name{
	margin:44px 0 32px;
	font:400 96px/120px var(--bm-font-display);
	letter-spacing:-.3px;
	color:var(--bm-black);
	text-transform:none;
}
.bm-pfam__name a{color:inherit;text-decoration:none;}
.bm-pfam__name a:hover{opacity:.7;}
.bm-pfam__row{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:14px;
	margin-bottom:26px;
	/* sits closer to the page edge than the text above it (Figma: 48/1440) */
	margin-left:calc(48px - var(--bm-gutter));
	margin-right:calc(48px - var(--bm-gutter));
}
.bm-pfam__row .bm-sw{min-height:143px;}
.bm-pfam__more{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font:400 20px/24px var(--bm-font);
	color:var(--bm-black);
	text-decoration:none;
}
.bm-pfam__more:hover{opacity:.65;}
/* the right-pointing chevron moved into the markup as a downward one */

@media (max-width:1199px){
	.bm-pindex{padding-top:44px;}
	.bm-pindex__title{font-size:36px;line-height:44px;}
	.bm-pfam{margin-bottom:64px;}
	.bm-pfam__shot{height:340px;}
	.bm-pfam__name{font-size:64px;line-height:76px;margin:32px 0 24px;}
	.bm-pfam__row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
	                margin-left:calc(24px - var(--bm-gutter));margin-right:calc(24px - var(--bm-gutter));}
}
@media (max-width:767px){
	.bm-pindex{padding-top:32px;}
	.bm-pindex__title{font-size:28px;line-height:34px;}
	.bm-pfam{margin-bottom:44px;}
	.bm-pfam__shot{height:220px;}
	.bm-pfam__name{font-size:40px;line-height:48px;margin:24px 0 18px;}
	.bm-pfam__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
	                margin-left:calc(12px - var(--bm-gutter));margin-right:calc(12px - var(--bm-gutter));}
	.bm-pfam__row .bm-sw{min-height:110px;}
	.bm-pfam__more{font-size:16px;line-height:20px;}
}

/* ==========================================================================
   CATALOGUE — Figma "Catalog"
   Card: grey media block 322x294 with a 235px shot, then name / article /
   price / pack size. The filter sidebar keeps its legacy markup (AJAX hooks)
   and is only restyled.
   ========================================================================== */
.bm-pcard{
	display:flex;
	flex-direction:column;
	text-decoration:none;
	color:var(--bm-black);
	font-family:var(--bm-font);
}
.bm-pcard__media{
	position:relative;
	height:294px;
	background:var(--bm-bg-soft);
	border-radius:var(--bm-r-sm);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	margin-bottom:22px;
}
.bm-pcard__media picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.bm-pcard__media img{max-width:235px;max-height:235px;width:auto;height:auto;object-fit:contain;display:block;}
.bm-pcard__badge{
	position:absolute;
	top:13px;left:15px;
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:5px 7px;
	border-radius:var(--bm-r-md);
	background:var(--bm-black);
	color:var(--bm-white);
	font:400 14px/18px var(--bm-font);
}
.bm-pcard__name{
	margin:0 0 4px;
	font:700 16px/20px var(--bm-font);
	color:var(--bm-black);
}
.bm-pcard__art{
	margin:0 0 14px;
	font:300 16px/20px var(--bm-font);
	color:var(--bm-black);
}
.bm-pcard__price{
	margin:0 0 6px;
	font:700 28px/34px var(--bm-font);
	color:var(--bm-black);
}
.bm-pcard__pack{
	margin:0;
	font:300 16px/20px var(--bm-font);
	color:var(--bm-black);
}

/* grid + frame (legacy classes kept for the AJAX filters) */
.catalog-full-list{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:44px 10px;
	list-style:none;
	margin:0;
	padding:0;
}
.catalog-full-list > li{margin:0;padding:0;list-style:none;}
.catalog .catalog__heading h2{
	font:500 32px/38px var(--bm-font)!important;
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none;
}
.catalog .search-categories .name,
.catalog .search-categories h6{
	font:500 24px/31px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;
}
.catalog .paint-line__item a{
	display:inline-flex;align-items:center;
	padding:5px 24px;
	border:1px solid var(--bm-ink-2);
	border-radius:var(--bm-r-md);
	background:var(--bm-white);
	color:var(--bm-ink-2);
	font:400 16px/20px var(--bm-font);
	letter-spacing:.2px;
	text-decoration:none;
}
.catalog .paint-line__item.active a{background:var(--bm-ink-2);color:var(--bm-white);}

@media (max-width:1199px){
	.catalog-full-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 10px;}
	.bm-pcard__media{height:240px;}
}
@media (max-width:767px){
	/* the mock gives a phone one full-width card per row, not a 2-up grid */
	.catalog-full-list{grid-template-columns:minmax(0,1fr);gap:24px 8px;}
	.bm-pcard__media{height:300px;margin-bottom:14px;}
	.bm-pcard__media img{max-width:230px;max-height:230px;}
	.bm-pcard__name{font-size:16px;line-height:21px;}
	.bm-pcard__art,.bm-pcard__pack{font-size:14px;line-height:18px;}
	.bm-pcard__price{font-size:22px;line-height:28px;}
}

/* ==========================================================================
   PRODUCT DETAIL — Figma "Heritage Red 2024-20"
   The markup is left untouched (tare/quantity/calculator/buy are all JS-bound);
   everything here restyles the existing classes. Image moves to the left and
   the buying column to the right, per the mock.
   ========================================================================== */
.product-show-page{font-family:var(--bm-font);}
.product-show-page .wrapper--breadcrumbs{max-width:var(--bm-container);padding:0 var(--bm-gutter);box-sizing:border-box;}
.product-show{
	display:grid;
	grid-template-columns:minmax(0,620px) minmax(0,1fr);
	gap:60px;
	align-items:start;
	padding:34px 0 46px;
	border:0;
}
.product-show > .half-width{width:auto;max-width:none;float:none;margin:0;}
.product-show > .half-width.img-side{order:-1;}          /* image first */
/* The chosen colour is painted by `.product-color-preview`, which the legacy
   sheet absolutely positions over the right half of the image block with the
   tin (z-index 1) in front of it. So the grey has to live on the block itself —
   putting it on .product-image hid the colour completely. */
.product-show > .half-width.img-side .product-media{
	background:var(--bm-bg-soft);
	border-radius:var(--bm-r-sm);
	overflow:hidden;
}
.product-show > .half-width.img-side .product-image{
	background:none;
	display:flex;align-items:center;justify-content:center;
	min-height:520px;
	width:100%;
}
.product-show .img-side .product-image picture{display:flex;align-items:center;justify-content:center;}
.product-show .img-side .product-image img{max-width:70%;height:auto;object-fit:contain;}
/* the legacy sheet swaps these two: .img-side.half-width on desktop,
   .img-side.mobile below 768 — don't fight it, just scope our rules */
/* The legacy sheet hides `.img-side.half-width` below its own desktop
   breakpoint and falls back to `.img-side.mobile`; hiding the mobile block from
   768 up meant that between 768 and that breakpoint — the whole tablet range —
   neither was shown and the product had no photo at all. */
/* Our tablet layout keeps the two-column product grid, so the desktop image
   block is the right one there — the legacy `.mobile` block is written for the
   stacked phone layout and lands on top of the title at 834. Keep the desktop
   block down to the phone breakpoint and only then swap. */
@media (min-width:768px){
	.product-show .img-side.mobile{display:none!important;}
	.product-show .img-side.half-width{display:flex!important;}
}
@media (max-width:767px){
	.product-show .img-side.mobile{display:flex;}
	.product-show .img-side.half-width{display:none;}
}

.product-show__number{
	font:500 16px/20px var(--bm-font);
	color:var(--bm-grey);
	margin:0 0 6px;
}
.product-show__name{display:flex;align-items:flex-start;gap:14px;margin:0 0 10px;}
.product-show__name h1{
	margin:0;
	font:700 36px/44px var(--bm-font)!important;
	color:var(--bm-black);
	text-transform:none!important;
	letter-spacing:0;
}
.product-show__name .icon--heart{flex:0 0 auto;margin-top:8px;order:2;}

/* tare rows: name — price — quantity */
.product-calculator__tares{list-style:none;margin:22px 0 0;padding:0;}
.product-calculator__tares .tare{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto auto;
	align-items:center;
	gap:20px;
	padding:9px 0;
	border:0;
}
.product-calculator__tares .tare .volume{
	font:400 20px/26px var(--bm-font);
	color:var(--bm-black);
}
/* one-line tare names only where there is room for them */
@media (min-width:768px){
	.product-calculator__tares .tare .volume{white-space:nowrap;}
}
.product-calculator__tares .tare .price{
	font:700 20px/24px var(--bm-font-hero);
	color:var(--bm-black);
	white-space:nowrap;
}
.product-calculator__tares .tare .quantity{display:inline-flex;align-items:center;gap:10px;}
.product-calculator__tares .tare .quantity input{
	width:44px;text-align:center;border:0;background:none;
	font:500 20px/26px var(--bm-font);color:var(--bm-black);
}

/* area calculator row */
.product-calculator__area{
	display:flex;
	align-items:center;
	gap:18px;
	margin:14px 0 0;
	flex-wrap:wrap;
}
.product-calculator__area .name,
.product-calculator__area label{font:400 20px/26px var(--bm-font);color:var(--bm-black);}
.product-calculator__area input[type=number],
.product-calculator__area input[type=text]{
	width:110px;
	border:0;border-bottom:1px solid var(--bm-line);
	background:none;padding:4px 2px;
	font:500 20px/26px var(--bm-font);color:var(--bm-black);
}
#calculate-btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:6px 22px;border-radius:var(--bm-r-pill);
	border:1px solid var(--bm-ink-2);background:#fff;color:var(--bm-ink-2);
	font:400 16px/20px var(--bm-font);text-decoration:none;
}
#calculate-btn:hover{background:var(--bm-bg-soft);}

/* total */
.product-calculator__total{margin:34px 0 0;}
.product-calculator__total .price{
	margin:0;
	font:700 48px/53px var(--bm-font);
	color:var(--bm-black);
}
.product-calculator__total .price .name{
	font:400 20px/26px var(--bm-font);
	color:var(--bm-grey);
}
.product-calculator__total .tax{
	margin:6px 0 0;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}

/* buy row */
.product-show__buttons{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:36px 0 0;}
.product-show__buttons .btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:13px 30px;border-radius:var(--bm-r-pill);
	font:500 20px/24px var(--bm-font);
	text-decoration:none;border:1px solid transparent;
}
.product-show__buttons .btn--black,
.product-show__buttons #choose-color{background:var(--bm-ink-2);border-color:var(--bm-ink-2);color:#fff;}
.product-show__buttons .btn--green,
.product-show__buttons .js-buy{background:var(--bm-teal);border-color:var(--bm-teal);color:#fff;}
.product-show__buttons .js-buy[disabled]{background:var(--bm-line-2);border-color:var(--bm-line-2);color:#fff;}
.product-show__delivery{margin:26px 0 0;font:400 16px/24px var(--bm-font);color:var(--bm-black);}

/* colour preview chip */
.product-color-preview{border-radius:var(--bm-r-sm);}
.product-color-preview .choosed-color-wrapper .name{font:500 32px/38px var(--bm-font);}
.product-color-preview .choosed-color-wrapper .number{font:500 16px/20px var(--bm-font);}

/* quantity steppers stay 12px in the legacy sheet — enlarge the hit area */
.product-calculator__tares .tare .quantity .quantity-btn{
	width:16px;height:16px;
	flex:0 0 16px;
	opacity:.9;
}
.product-calculator__tares .tare .quantity .quantity-btn[disabled]{opacity:.35;}

/* lower sections — the template uses h4 for section titles and h6 for sub-heads */
.product-details{border:0;padding:44px 0 0;}
.product-details > h4,
.product-details h2,
.product-details h3,
.product-details .title{
	font:500 32px/38px var(--bm-font)!important;
	color:var(--bm-black);
	text-transform:none!important;
	letter-spacing:0;
	margin:0 0 26px;
}
.product-details h6{
	font:500 20px/26px var(--bm-font)!important;
	color:var(--bm-black);
	text-transform:none!important;
	margin:0 0 14px;
}
.product-details__description,
.product-details__specifications{font:400 16px/24px var(--bm-font);color:var(--bm-black);}

@media (max-width:1199px){
	/* keep two columns on tablet, just tighter */
	.product-show{grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:28px;padding-top:24px;}
	.product-show > .half-width.img-side .product-image{min-height:300px;}
	.product-show .img-side .product-image img{max-width:78%;}
	.product-calculator__tares .tare{gap:12px;}
	.product-calculator__tares .tare .volume{font-size:16px;line-height:22px;}
	.product-calculator__tares .tare .price{font-size:18px;line-height:22px;}
	.product-calculator__area .name,
	.product-calculator__area label{font-size:16px;line-height:22px;}
	.product-show__name h1{font-size:28px!important;line-height:34px!important;}
	.product-calculator__total .price{font-size:38px;line-height:44px;}
}
@media (max-width:767px){
	/* one column — the desktop image column is display:none here (the legacy
	   sheet swaps in .img-side.mobile), so a second track would sit empty and
	   squeeze the copy while overflowing the viewport. */
	.product-show{grid-template-columns:minmax(0,1fr);gap:22px;}
	/* buy bar stays the legacy sticky footer */
	.product-show__buttons{margin:0;gap:10px;justify-content:center;}
	.product-show > .half-width.img-side .product-image{min-height:280px;}
	.product-show__name h1{font-size:24px!important;line-height:30px!important;}
	/* phone: name on its own row, price left, stepper right */
	.product-calculator__tares .tare{
		grid-template-columns:minmax(0,1fr) auto;
		gap:2px 12px;
		align-items:center;
	}
	.product-calculator__tares .tare .volume{
		grid-column:1/-1;
		font-size:16px;line-height:22px;
	}
	.product-calculator__tares .tare .price{
		grid-column:1;justify-self:start;
		font-size:18px;line-height:22px;
	}
	.product-calculator__tares .tare .quantity{grid-column:2;justify-self:end;}
	.product-show .img-side.mobile{margin:8px 0 18px;}
	.product-calculator__area .name,
	.product-calculator__area label{font-size:16px;line-height:22px;}
	.product-calculator__total .price{font-size:32px;line-height:38px;}
	.product-show__buttons .btn{width:100%;}
	.product-details h2,.product-details h3,.product-details .title{font-size:24px!important;line-height:30px!important;}
}

/* ==========================================================================
   BASKET — Figma "Basket step 1/2/3"
   Markup comes from core/basket.php (get_html_product / get_html_cart) and is
   injected by JS, so this is styling only — no markup or hooks were changed.
   ========================================================================== */
.cart-modal{
	font-family:var(--bm-font);
	background:var(--bm-white);
}
.cart-content__header,
.order-form__header{
	font:500 32px/38px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;
	letter-spacing:0;
	margin:0 0 6px;
}
.cart-content__header .count,
.cart-content__header span{
	font:400 16px/24px var(--bm-font);
	color:var(--bm-grey);
}

/* one line item */
.cart-product{
	display:grid;
	grid-template-columns:76px minmax(0,1fr) auto;
	gap:0 18px;
	align-items:start;
	padding:22px 0;
	border-bottom:1px solid var(--bm-line-2);
	position:relative;
}
.cart-product .js-remove-product{
	position:absolute;top:22px;right:0;
	opacity:.5;
}
.cart-product .js-remove-product:hover{opacity:1;}
.cart-product__info{
	grid-column:1/3;
	display:grid;
	grid-template-columns:76px minmax(0,1fr);
	gap:0 18px;
	align-items:center;
}
.cart-product__info img{
	width:76px;height:76px;
	object-fit:contain;
	background:var(--bm-bg-soft);
	border-radius:var(--bm-r-sm);
	padding:6px;
	box-sizing:border-box;
}
.cart-product__info p{
	margin:0;
	font:700 20px/26px var(--bm-font);
	color:var(--bm-black);
}
.cart-product__info p b{
	display:block;
	font:500 16px/22px var(--bm-font);
	color:var(--bm-grey);
}
/* tare rows inside a line item */
.cart-product__tares{
	grid-column:1/3;
	list-style:none;
	margin:12px 0 0;
	padding:0;
}
.cart-product__tares li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:4px 0;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-black);
}
.cart-product__summary{
	grid-column:3;
	grid-row:1/4;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:12px;
	text-align:right;
}
.cart-product__summary .color{
	min-width:120px;
	border-radius:var(--bm-r-sm);
	padding:10px 12px;
	text-align:left;
}
.cart-product__summary .color p{
	margin:0;
	font:500 14px/18px var(--bm-font);
	color:var(--bm-white);
}
.cart-product__summary .color p:last-child{font-weight:400;opacity:.9;}
.cart-product__summary .total-price h6{
	margin:0;
	font:700 24px/30px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;
}
.cart-product__summary .is_tinting p{
	margin:0;font:400 14px/18px var(--bm-font);color:var(--bm-grey);
}

/* totals + steps */
.cart-total,.cart-content__footer .total{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	padding:22px 0 0;
	font:700 28px/34px var(--bm-font);
	color:var(--bm-black);
}
.cart-content__footer .js-cart-tax{
	font:400 16px/24px var(--bm-font);
	color:var(--bm-grey);
}
.cart-modal__btns{
	display:flex;flex-wrap:wrap;gap:14px;
	padding:22px 0 0;
}
.cart-modal__btns .btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:13px 30px;border-radius:var(--bm-r-pill);
	font:500 20px/24px var(--bm-font);
	border:1px solid transparent;
}
.cart-modal__btns .btn--dark-grey{background:#fff;border-color:var(--bm-ink-2);color:var(--bm-ink-2);}
.cart-modal__btns .btn--green{background:var(--bm-teal);border-color:var(--bm-teal);color:#fff;}
.cart-modal__btns .btn[disabled]{background:var(--bm-line-2);border-color:var(--bm-line-2);color:#fff;}

/* delivery form (step 2) */
.order-form__header{font:500 24px/31px var(--bm-font);margin:0 0 18px;}
.order-form .line{margin:0 0 16px;}
.order-form label{
	display:block;
	font:300 16px/24px var(--bm-font);
	color:var(--bm-grey);
	margin:0 0 4px;
}
.order-form input[type=text],
.order-form input[type=email],
.order-form input[type=tel],
.order-form textarea,
.order-form select{
	width:100%;
	box-sizing:border-box;
	padding:11px 14px;
	border:1px solid var(--bm-line);
	border-radius:var(--bm-r-md);
	background:#fff;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-black);
}
.order-form input:focus,.order-form textarea:focus,.order-form select:focus{
	outline:none;border-color:var(--bm-ink-2);
}
.promo-code{display:flex;gap:12px;align-items:center;margin:18px 0 0;}

/* order confirmation (step 3) */
.order-step{font-family:var(--bm-font);}
.order-wrapper h4,
.order-wrapper h5,
.order-step h4{
	font:600 24px/30px var(--bm-font)!important;
	color:var(--bm-black);
	text-transform:none!important;
	margin:0 0 18px;
}
.order-wrapper p,
.order-step p{font:400 18px/26px var(--bm-font);color:var(--bm-black);margin:0 0 8px;}
.order-wrapper b,
.order-step b{font-weight:600;}

@media (max-width:767px){
	.cart-content__header,.order-form__header{font-size:24px;line-height:30px;}
	.cart-product{grid-template-columns:64px minmax(0,1fr);gap:0 12px;}
	.cart-product__info{grid-template-columns:64px minmax(0,1fr);gap:0 12px;}
	.cart-product__info img{width:64px;height:64px;}
	.cart-product__info p{font-size:17px;line-height:22px;}
	.cart-product__summary{grid-column:1/-1;grid-row:auto;align-items:flex-start;text-align:left;margin-top:12px;}
	.cart-total,.cart-content__footer .total{font-size:22px;line-height:28px;}
	.cart-modal__btns .btn{width:100%;}
}

/* ==========================================================================
   ACCOUNT — order list / order page / auth + edit forms
   Figma "Basket step 3" for the order layout; forms follow the basket styles.
   Templates in template/user/ are untouched — styling only.
   ========================================================================== */
.order-page,.orders-list,.form_cabinet,.login-form,.auth_form,
.edit-password-page,.messages,.bonuses{font-family:var(--bm-font);}

.order-page__info,
.order-general-info,
.order-delivery{margin:0 0 34px;}
.order-page h4,.order-page h5,
.order-delivery h4,.order-general-info h4{
	font:600 24px/30px var(--bm-font)!important;
	color:var(--bm-black);
	text-transform:none!important;
	letter-spacing:0;
	margin:0 0 18px;
}
.order-page p,
.order-delivery p,
.order-general-info p{
	margin:0 0 10px;
	font:400 18px/26px var(--bm-font);
	color:var(--bm-black);
}
.order-general-info b,
.order-delivery b{font-weight:600;}
.js-order-status,.order-page .opened{font-weight:700;}

/* ordered items table */
.order-product{
	display:grid;
	grid-template-columns:72px minmax(0,1fr) auto auto;
	gap:0 18px;
	align-items:center;
	padding:18px 0;
	border-bottom:1px solid var(--bm-line-2);
}
.order-product img{
	width:72px;height:72px;object-fit:contain;
	background:var(--bm-bg-soft);border-radius:var(--bm-r-sm);padding:6px;box-sizing:border-box;
}
.order-product-info .name,
.order-product .name{font:600 16px/22px var(--bm-font);color:var(--bm-black);}
.order-product .cell,
.order-product .date,
.order-product .new-price{font:400 16px/22px var(--bm-font);color:var(--bm-black);}
.order-product .color{
	min-width:96px;border-radius:var(--bm-r-sm);padding:8px 10px;
}
.order-product .color p{margin:0;font:500 13px/17px var(--bm-font);color:#fff;}

/* orders list */
.orders-list{list-style:none;margin:0;padding:0;}
.orders-list > li,.orders-list .item{
	padding:20px 0;
	border-bottom:1px solid var(--bm-line-2);
}
.orders-list .name,.orders-list .date{font:400 16px/22px var(--bm-font);color:var(--bm-black);}

/* cabinet + auth forms */
.form_cabinet .form-group,
.login-form .form-group,
.auth_form .form-group,
.edit-field{margin:0 0 16px;}
.form_cabinet label,
.login-form label,
.auth_form label,
.edit-field label{
	display:block;
	font:300 16px/24px var(--bm-font);
	color:var(--bm-grey);
	margin:0 0 4px;
}
.form_cabinet input[type=text],.form_cabinet input[type=email],
.form_cabinet input[type=tel],.form_cabinet input[type=password],
.login-form input[type=text],.login-form input[type=email],
.login-form input[type=password],.auth_form input[type=text],
.auth_form input[type=email],.auth_form input[type=password],
.edit-field input,.form_cabinet select,.form_cabinet textarea{
	width:100%;box-sizing:border-box;
	padding:11px 14px;
	border:1px solid var(--bm-line);
	border-radius:var(--bm-r-md);
	background:#fff;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-black);
}
.form_cabinet input:focus,.login-form input:focus,
.auth_form input:focus,.edit-field input:focus{outline:none;border-color:var(--bm-ink-2);}

/* buttons inside the cabinet follow the mock's pill shapes */
.form_cabinet .btn,.login-form .btn,.auth_form .btn,
.orders-list .btn,.order-page .btn,.js-reorder-btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:11px 26px;border-radius:var(--bm-r-pill);
	font:500 18px/24px var(--bm-font);
	border:1px solid transparent;text-decoration:none;
}
.form_cabinet .btn--green,.login-form .btn--green,
.auth_form .btn--green,.js-reorder-btn{background:var(--bm-teal);border-color:var(--bm-teal);color:#fff;}
.form_cabinet .btn--white,.login-form .btn--white,.auth_form .btn--white{
	background:#fff;border-color:var(--bm-ink-2);color:var(--bm-ink-2);
}
.flash-message,.form_messages,.message{
	font:400 16px/24px var(--bm-font);
	border-radius:var(--bm-r-md);
	padding:12px 16px;
	background:var(--bm-bg-soft);
	color:var(--bm-black);
}

@media (max-width:767px){
	.order-page h4,.order-page h5,
	.order-delivery h4,.order-general-info h4{font-size:20px!important;line-height:26px!important;}
	.order-page p,.order-delivery p,.order-general-info p{font-size:16px;line-height:23px;}
	.order-product{grid-template-columns:56px minmax(0,1fr);gap:8px 12px;}
	.order-product img{width:56px;height:56px;}
	.order-product .cell,.order-product .new-price{grid-column:2;}
	.form_cabinet .btn,.login-form .btn,.auth_form .btn{width:100%;}
}

/* ==========================================================================
   Modal stacking — the legacy sheet gives the cart z-index 101 / login 110 and
   pins the cart at top:84px (the old header height). Our header is 120px tall
   and sits at z-index 120, so both modals ended up underneath it.
   ========================================================================== */
/* Only touch the OPEN state — `.cart-modal.hidden{top:-100%}` and
   `.hidden{opacity:0;z-index:-1}` are what park the panels off-screen. */
.cart-modal:not(.hidden){
	top:var(--bm-header-h);
	height:calc(100% - var(--bm-header-h));
	z-index:130;
}
.login-form.visible{z-index:135;}
.overlay:not(.hidden),.js-overlay:not(.hidden),.modal-overlay:not(.hidden){z-index:125;}

@media (max-width:767px){
	.bm-rail__nav{display:none;}
}

/* ==========================================================================
   CATALOGUE HEADER — Figma "Catalog": just an H1 and a search field.
   The old banner with the "popular / all products" toggles is gone.
   ========================================================================== */
.bm-cathead{padding:34px 0 26px;font-family:var(--bm-font);}
.bm-cathead__inner{
	display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.bm-cathead__title{
	margin:0;
	font:500 32px/38px var(--bm-font)!important;
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none!important;
}
.bm-cathead__search{
	position:relative;
	flex:0 1 428px;
	display:flex;align-items:center;
}
.bm-cathead__search input{
	width:100%;box-sizing:border-box;
	height:50px;padding:0 46px 0 18px;
	border:1px solid var(--bm-line);
	border-radius:var(--bm-r-md);
	background:#fff;
	font:300 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.bm-cathead__search input::placeholder{color:var(--bm-grey);}
.bm-cathead__search input:focus{outline:none;border-color:var(--bm-ink-2);}
.bm-cathead__search button{
	position:absolute;right:14px;
	width:19px;height:19px;padding:0;border:0;background:none;cursor:pointer;
	color:var(--bm-black);
}
.bm-cathead__search button svg{width:100%;height:100%;display:block;}
@media (max-width:767px){
	.bm-cathead{padding:22px 0 18px;}
	.bm-cathead__title{font-size:24px!important;line-height:30px!important;}
	.bm-cathead__search{flex:1 1 100%;}
}

/* ==========================================================================
   PRODUCT DETAILS — Figma "Item nocolor" / "Heritage Red 2024-20"
   The mock keeps the copy open in two columns, then collapses Specifications
   and Documentation into accordion rows.
   ========================================================================== */
/* chosen colour, named under the title */
.bm-pcolor{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:0 8px;
	margin:10px 0 0;
	padding:0;
	background:none !important;
	font:400 20px/26px var(--bm-font);
	color:var(--bm-ink-2);
}
.bm-pcolor.is-empty{display:none;}
.bm-pcolor__label{color:var(--bm-grey);}
.bm-pcolor .name{font-weight:600;}
.bm-pcolor .number{color:var(--bm-grey);}

/* the legacy sheet pins .product-details__description to max-width:440px */
.bm-pdetails__copy{
	max-width:none;
	margin-right:0;
	columns:2 320px;
	column-gap:64px;
	margin-bottom:8px;
}
.bm-pdetails__copy > *{break-inside:avoid;}
.bm-pdetails__copy ul,
.bm-pdetails__copy ol{break-inside:auto;}

.bm-acc{border-top:1px solid var(--bm-line-2);}
.bm-acc__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	width:100%;
	padding:26px 0;
	background:none;
	border:0;
	cursor:pointer;
	text-align:left;
	font:500 32px/38px var(--bm-font);
	color:var(--bm-dark);
}
/* the section title above them shares the same style in the mock */
.bm-pdetails > h4{
	font:500 32px/38px var(--bm-font);
	color:var(--bm-dark);
	margin:0 0 34px;
	text-transform:none;
}
.bm-acc__chev{
	display:block;
	width:18px;height:10px;
	flex:none;
	transition:transform .2s ease;
}
.bm-acc__chev svg{display:block;width:100%;height:100%;}
.bm-acc__head[aria-expanded="true"] .bm-acc__chev{transform:rotate(180deg);}
/* collapsed by default; JS sets an explicit height so it can animate */
.bm-acc__body{
	overflow:hidden;
	height:0;
	transition:height .25s ease;
}
.bm-acc__body > *{padding-bottom:32px;}
.bm-pdocs{display:flex;flex-wrap:wrap;gap:32px 64px;}
.bm-pdocs__group{min-width:240px;}

.bm-pdetails__share{
	border-top:1px solid var(--bm-line-2);
	padding-top:26px;
}
@media (max-width:767px){
	.bm-pdetails__copy{columns:1;}
	.bm-acc__head,
	.bm-pdetails > h4{font-size:24px;line-height:29px;}
	.bm-acc__head{padding:20px 0;}
	.bm-pcolor{font-size:17px;line-height:23px;}
}

/* ==========================================================================
   TEXT / SERVICE PAGES  (п.10)
   The footer menu, the About Us branch, mobile_application and
   download_colors_and_tools have no screen in the mock, so they are brought to
   the new design through their shared legacy wrappers rather than per template:
   `.page-header`, `.text-page-content`, `.two-col-grid`, `.ip-heading`.
   Redesigned pages don't carry these classes, so nothing already done is hit.
   ========================================================================== */
.page-content:has(> * > .page-header),
.page-content:has(> .page-header),
.page-content:has(> .ip-heading),
.page-content:has(> .site-map-page){padding-top:0;}

/* page title — flat, left aligned, same type as the catalogue H1.
   Transparent, not white: body is #FBFBFB, and a white band would seam. */
.page-header,
.page-header--gray{
	background:transparent;
	box-shadow:none;
	text-align:left;
	padding:44px 0 26px;
}
.page-header > .wrapper,
.page-header{
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	box-sizing:border-box;
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4{
	margin:0;
	font:500 32px/38px var(--bm-font);
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none;
}

/* body copy — readable measure, aligned to the site gutter, never justified */
.text-page-content,
.contacts-page .wrapper--page,
.partners-page .wrapper--partners,
.site-map-page .wrapper--1034{
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	max-width:none;
	margin:0;
	box-sizing:border-box;
}
.text-page-content{padding-bottom:80px;font-family:var(--bm-font);}
.text-page-content > *{max-width:900px;}
.text-page-content p,
.text-page-content li{
	text-align:left;
	font:400 16px/26px var(--bm-font);
	color:var(--bm-ink-2);
}
.text-page-content p{margin:0 0 16px;}
.text-page-content h1,.text-page-content h2,.text-page-content h3,
.text-page-content h4,.text-page-content h5,.text-page-content h6{
	margin:38px 0 14px;
	font:500 22px/28px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;
}
.text-page-content ul,
.text-page-content ol{margin:0 0 18px;padding-left:20px;}
.text-page-content li{margin:0 0 8px;list-style:disc;}
.text-page-content ol li{list-style:decimal;}
.text-page-content a{color:var(--bm-teal);text-decoration:none;}
.text-page-content a:hover{text-decoration:underline;}
.text-page-content table{border-collapse:collapse;max-width:100%;}
.text-page-content td,.text-page-content th{
	border:1px solid var(--bm-line-2);
	padding:10px 14px;
	font:400 15px/22px var(--bm-font);
}

/* FAQ / feedbacks — the two-column shell */
.two-col-grid{
	max-width:none;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	gap:48px;
	box-sizing:border-box;
}
.two-col-grid__left .bg{background:transparent;}
.two-col-grid__left,
.two-col-grid__right{width:auto;}
.two-col-grid__left{flex:0 0 200px;}
.two-col-grid__right{flex:1;}
.faq-page .question,
.faq-page .questions__item{font-family:var(--bm-font);}
.faq-page .question__title,
.faq-page .questions__item .title,
.faq-page h6{
	font:500 18px/26px var(--bm-font);
	color:var(--bm-black);
}
.faq-page .question__answer,
.faq-page .questions__item .text{
	font:400 16px/26px var(--bm-font);
	color:var(--bm-ink-2);
}

/* news / promotions listing */
.ip-heading{
	background:transparent;
	padding:44px 0 8px;
}
.ip-heading .wrapper{
	max-width:none;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	box-sizing:border-box;
}
.ip-heading h1,.ip-heading h2,.ip-heading h3{
	margin:0;
	font:500 32px/38px var(--bm-font);
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none;
	text-align:left;
}
.ip-body .wrapper{
	max-width:none;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	box-sizing:border-box;
}

/* sitemap */
.site-map-page__heading{
	background:transparent;
	padding:44px 0 10px;
}
.site-map-page__heading h1,
.site-map-page__heading h2,
.site-map-page__heading h3{
	margin:0;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	font:500 32px/38px var(--bm-font);
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none;
	text-align:left;
}
.site-map-page a{color:var(--bm-dark);text-decoration:none;}
.site-map-page a:hover{text-decoration:underline;}

@media (max-width:767px){
	.page-header,.page-header--gray{padding:28px 0 18px;}
	.page-header h1,.page-header h2,.page-header h3,.page-header h4,
	.ip-heading h1,.ip-heading h2,.ip-heading h3,
	.site-map-page__heading h1,.site-map-page__heading h2,.site-map-page__heading h3{
		font-size:24px;line-height:30px;
	}
	.two-col-grid{flex-direction:column;gap:20px;}
	.two-col-grid__left{flex:none;}
	.text-page-content{padding-bottom:48px;}
}

/* Phone: the favourite icon is pinned to the right of the title block, but the
   legacy sheet reserves no room for it, so long names run underneath. */
@media (max-width:767px){
	.product-show__name h1{padding-right:36px;}
}

/* Colours landing (/colors) — the last block still pinned to a centred 1034px
   island; bring it onto the site gutter like everything else. */
.page-content:has(> .colors-page){padding-top:0;}
.colors-page{padding:44px 0 60px;font-family:var(--bm-font);}
.colors-page > .wrapper--1034{
	max-width:none;
	width:100%;
	padding:0 var(--bm-gutter);
	margin:0;
	box-sizing:border-box;
}
.colors-page h2{
	margin:0 0 30px;
	max-width:none;
	font:500 32px/38px var(--bm-font);
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-align:left;
	text-transform:none;
}
.colors-page .articles-list{
	display:grid;
	/* auto-fill with a capped track keeps the cards a sane size and packed
	   left when there are only two of them */
	grid-template-columns:repeat(auto-fill,minmax(300px,420px));
	justify-content:start;
	gap:24px;
	margin:0;padding:0;
	list-style:none;
}
.colors-page .article-item{width:auto;max-width:none;margin:0;padding:0;float:none;}
.colors-page .article-shadow{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:18px;
	height:100%;
	padding:44px 24px;
	background:var(--bm-white);
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-md);
	box-shadow:none;
	text-decoration:none;
	transition:border-color .18s ease,box-shadow .18s ease;
}
.colors-page .article-shadow:hover{
	border-color:var(--bm-grey-3);
	box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.colors-page .color-page-img{max-width:120px;height:auto;}
.colors-page .article-shadow h4{
	margin:0;
	font:500 20px/26px var(--bm-font);
	color:var(--bm-dark);
	text-align:center;
	text-transform:none;
}
@media (max-width:767px){
	.colors-page{padding:28px 0 40px;}
	.colors-page h2{font-size:24px;line-height:30px;}
	.colors-page .articles-list{grid-template-columns:1fr;}
}

/* ==========================================================================
   CATALOGUE PAGE  (/products …)
   ========================================================================== */
/* the legacy .wrapper is a centred 1312px box; align it to the site gutter */
.catalog .catalog-content-top-line > .wrapper,
.catalog .catalog-content > .wrapper{
	max-width:none;
	width:100%;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	margin:0;
	box-sizing:border-box;
}

/* --- sorting -------------------------------------------------------------
   The mock has no sort control at all. Hidden rather than deleted: drop this
   one block (or set the flag to `block`) and the legacy control is back, JS
   and markup untouched. The mobile FILTER button must stay visible. */
.catalog .catalog-content-top-line .dropdown-type--category,
.catalog .sorting-mobile{display:none;}
/* --- end sorting --------------------------------------------------------- */

/* the top line now only carries the filter button and active-filter chips */
.catalog .catalog-content-top-line{
	background:transparent;
	box-shadow:none;
	min-height:0;
	padding:6px 0 0;
}
.catalog .catalog-content-top-line > .wrapper{
	display:flex;
	align-items:center;
	gap:18px;
	min-height:0;
}
.catalog .result-line .clean{
	font:400 14px/20px var(--bm-font);
	color:var(--bm-teal);
	cursor:pointer;
}

/* product card hover — lift the tile and let the shot grow slightly */
.bm-pcard__media{overflow:hidden;transition:box-shadow .2s ease;}
.bm-pcard__media img{transition:transform .35s ease;}
.bm-pcard:hover .bm-pcard__media{box-shadow:0 10px 24px rgba(0,0,0,.10);}
.bm-pcard:hover .bm-pcard__media img{transform:scale(1.05);}
.bm-pcard__name{transition:color .18s ease;}
.bm-pcard:hover .bm-pcard__name{color:var(--bm-teal);}

/* pagination */
.catalog .pagination{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:8px;
	list-style:none;
	margin:56px 0 0;
	padding:0;
}
.catalog .pagination li{margin:0;padding:0;}
.catalog .pagination li a,
.catalog .pagination li span{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 12px;
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-sm);
	font:400 16px/20px var(--bm-font);
	color:var(--bm-dark);
	text-decoration:none;
	background:var(--bm-white);
	transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.catalog .pagination li a:hover{border-color:var(--bm-dark);}
.catalog .pagination li.active a,
.catalog .pagination li.active span{
	background:var(--bm-dark);
	border-color:var(--bm-dark);
	color:var(--bm-white);
	cursor:default;
}
/* the "1" of the current page is a bare <a> with no href */
.catalog .pagination li a:not([href]){cursor:default;}
@media (max-width:767px){
	.catalog .pagination{margin-top:36px;gap:6px;}
	.catalog .pagination li a,
	.catalog .pagination li span{min-width:36px;height:36px;padding:0 9px;font-size:15px;}
}

/* header search panel — drops below the header like the nav drawer */
.bm-header .header__search{
	display:block;
	position:absolute;
	top:100%;
	left:0;right:0;
	width:100%;
	padding:22px 0;
	background:var(--bm-white);
	border-top:1px solid var(--bm-line-2);
	box-shadow:0 12px 24px rgba(0,0,0,.08);
	opacity:0;
	visibility:hidden;
	transform:translateY(-8px);
	transition:opacity .2s ease,transform .2s ease,visibility .2s;
	z-index:8;
}
.bm-header.bm-search-open .header__search{
	opacity:1;
	visibility:visible;
	transform:none;
}
.bm-header .header__search .search-form{
	width:100%;
	max-width:none;
	margin:0;
	padding:0 var(--bm-gutter);
	background:none;
	box-sizing:border-box;
}
.bm-header .header__search .input{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 20px;
	background:var(--bm-bg-soft);
	border-radius:24px;
}
.bm-header .header__search .icon--search{display:none;}
.bm-header .header__search .icon--search-input{
	display:block;
	flex:0 0 auto;
	width:17px;height:17px;
	background-size:contain;
	background-repeat:no-repeat;
	opacity:.55;
}
.bm-header .header__search #search{
	flex:1;
	min-width:0;
	border:0;
	background:none;
	outline:none;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-black);
}

/* --- breadcrumbs: no underline anywhere ---------------------------------- */
.bm-color__crumbs a,
.bm-plist__crumbs a,
.breadcrumbs-container a,
.wrapper--breadcrumbs a{text-decoration:none;}
.bm-color__crumbs a:hover,
.bm-plist__crumbs a:hover,
.breadcrumbs-container a:hover,
.wrapper--breadcrumbs a:hover{text-decoration:none;opacity:.7;}

/* --- news / promotions listing -------------------------------------------
   The legacy heading is a background-image band with 50–200px of padding on
   the title. The redesign has no such band. */
.ip-heading{background-image:none !important;}
.ip-heading h1,
.ip-heading h2{padding:0 !important;}

/* --- article page --------------------------------------------------------
   Breadcrumbs sat on top of the legacy 84px page padding, and the 900px
   measure that suits legal copy is wrong for an article with full-width
   imagery, so the body follows the site gutter here instead. */
.breadcrumbs-container{padding-top:18px;padding-bottom:2px;}
.breadcrumbs-container .wrapper,
.article-page .wrapper--page,
.article-page .wrapper--1034{
	max-width:none;
	width:100%;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	margin:0;
	box-sizing:border-box;
}
.article-page .text-page-content > *{max-width:none;}
.article-page .text-page-content img{max-width:100%;height:auto;}

/* --- cart modal buttons --------------------------------------------------
   The legacy bar is position:absolute at width:100% with the arrow-notch
   chevrons; it needs room so the buttons stop touching the panel edges. */
.cart-modal:not(.hidden) .cart-modal__btns{
	position:sticky;
	bottom:0;
	width:100%;
	padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));
	display:flex;
	justify-content:center;
	gap:0;
	box-sizing:border-box;
}
.cart-modal:not(.hidden) .cart-modal__btns .btn{
	width:auto;
	flex:1 1 0;
	max-width:200px;
}

/* --- palette / family cards: name over the photo, centred "see all" ------- */
.bm-pfam--shot .bm-pfam__shot{position:relative;}
.bm-pfam--shot .bm-pfam__shot::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.42) 100%);
}
.bm-pfam--shot .bm-pfam__name{
	position:absolute;
	left:0;right:0;
	bottom:0;
	z-index:2;
	margin:0;
	padding:0 var(--bm-gutter) 46px;
	box-sizing:border-box;
	color:var(--bm-white);
	text-align:left;
}
.bm-pfam--shot .bm-pfam__name a{color:var(--bm-white);}
.bm-pfam__foot{
	display:flex;
	justify-content:center;
	margin-top:34px;
}
.bm-pfam__chev{
	display:block;
	width:14px;height:8px;
	flex:none;
	transition:transform .2s ease;
}
.bm-pfam__chev svg{display:block;width:100%;height:100%;}
.bm-pfam__more:hover .bm-pfam__chev{transform:translateY(3px);}
@media (max-width:767px){
	.bm-pfam--shot .bm-pfam__name{padding-bottom:26px;}
	.bm-pfam__foot{margin-top:24px;}
}

/* --- product: thumbnail column ------------------------------------------- */
.product-show .img-side{display:flex;gap:20px;align-items:flex-start;}
.product-show .img-side .product-media{position:relative;flex:1;min-width:0;}
.product-show .img-side .product-image{flex:1;min-width:0;}
.bm-pthumbs{
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:0 0 77px;
	order:-1;
}
.bm-pthumb{
	width:77px;height:77px;
	padding:6px;
	background:var(--bm-bg-soft);
	border:1px solid transparent;
	border-radius:var(--bm-r-sm);
	cursor:pointer;
	box-sizing:border-box;
	transition:border-color .18s ease;
}
.bm-pthumb picture,
.bm-pthumb img{display:block;width:100%;height:100%;object-fit:contain;}
.bm-pthumb:hover{border-color:var(--bm-grey-3);}
.bm-pthumb.is-active{border-color:var(--bm-dark);}

/* --- product details: spacing, and the share row the mock does not have ---
   Drop this one rule to bring sharing back; markup and JS are untouched. */
.bm-pdetails__share{display:none;}
/* --- end share ----------------------------------------------------------- */
.bm-pdetails{padding-top:8px;}
.bm-pdetails > h4{margin:0 0 28px;}

@media (max-width:767px){
	.product-show .img-side{gap:12px;}
	.bm-pthumbs{flex:0 0 58px;flex-direction:row;order:1;overflow-x:auto;}
	.bm-pthumb{width:58px;height:58px;flex:0 0 58px;}
}
.text-page-content p:empty{display:none;}

/* ==========================================================================
   Round 3 corrections
   ========================================================================== */
/* the mock's hover is on the whole card: a 3px spread, zero-blur shadow at 25% */
.bm-pcard:hover .bm-pcard__media{box-shadow:none;}
.bm-pcard:hover .bm-pcard__media img{transform:none;}
.bm-pcard{
	border-radius:var(--bm-r-sm);
	transition:box-shadow .18s ease;
}
.bm-pcard:hover{box-shadow:0 0 0 3px rgba(0,0,0,.25);}

/* "Best Selling" flag — driven by the product's `hit` checkbox */
.bm-pcard__flag{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0 0 10px;
	font:500 20px/26px var(--bm-font);
	color:var(--bm-dark);
}
.bm-pcard__flag svg{display:block;width:22px;height:22px;flex:none;}

/* the legacy sheet indents this heading by 100px */
.bm-pdetails > h4{padding:0 0 4px !important;}

/* palette cards: the swatch row was flush against the photo */
.bm-pfam__row{margin-top:34px;}
.bm-pfam--shot .bm-container{padding-top:0;}

/* article body follows the site gutter, not the 900px legal-copy measure */
.article-page .text-page-content > *,
.text-page-content.article-page > *{max-width:none;}
.text-page-content.article-page .wrapper,
.text-page-content.article-page .wrapper--page,
.text-page-content.article-page .wrapper--1034{
	max-width:none;
	width:100%;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	margin:0;
	box-sizing:border-box;
}

/* ==========================================================================
   ACCOUNT / PROJECTS — Figma "Projects - desktop" / "Projects item - desktop"
   ========================================================================== */
.bm-account{font-family:var(--bm-font);}
.bm-account .user-menu .link a{
	display:block;
	padding:9px 0;
	font:400 18px/26px var(--bm-font);
	color:var(--bm-dark);
	text-decoration:none;
}
.bm-account .user-menu .link a.active{font-weight:600;}
.bm-account__body{min-width:0;}
.bm-acct-head{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	margin:0 0 34px;
}
.bm-acct-title{
	margin:0;
	font:500 32px/38px var(--bm-font);
	letter-spacing:-.5px;
	color:var(--bm-black);
	text-transform:none;
}
.bm-acct-title--edit{outline:0;border-bottom:1px dashed transparent;}
.bm-acct-title--edit:focus{border-bottom-color:var(--bm-grey-3);}
.bm-acct-crumbs{
	font:400 14px/20px var(--bm-font);color:var(--bm-grey);margin:0 0 10px;
}
.bm-acct-crumbs a{color:var(--bm-grey);text-decoration:none;}
.bm-acct-crumbs i{font-style:normal;padding:0 6px;}

/* project list */
.bm-projects{list-style:none;margin:0;padding:0;}
.bm-project{
	display:flex;align-items:center;gap:20px;
	padding:26px 0;
	border-bottom:1px solid var(--bm-line-2);
}
.bm-project__name{
	flex:1;min-width:0;
	font:400 24px/31px var(--bm-font);
	color:var(--bm-black);text-decoration:none;
}
.bm-project__name:hover{color:var(--bm-teal);}
.bm-project__count{font:400 16px/21px var(--bm-font);color:var(--bm-grey);white-space:nowrap;}
.bm-project__del{
	background:none;border:0;cursor:pointer;color:var(--bm-grey);padding:6px;line-height:0;
}
.bm-project__del svg{width:16px;height:16px;display:block;}
.bm-project__del:hover{color:var(--bm-red-bright);}

/* add-a-colour row */
.bm-proj-add{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0 30px;}
.bm-proj-add form{display:flex;align-items:center;gap:8px;flex:0 1 380px;
	border:1px solid var(--bm-line);border-radius:var(--bm-r-sm);padding:12px 16px;}
.bm-proj-add input{flex:1;min-width:0;border:0;outline:0;background:none;
	font:400 16px/24px var(--bm-font);color:var(--bm-black);}
.bm-proj-add button{background:none;border:0;cursor:pointer;line-height:0;color:var(--bm-dark);}
.bm-proj-add button svg{width:16px;height:16px;display:block;}
.bm-proj-count{font:400 16px/21px var(--bm-font);color:var(--bm-grey);white-space:nowrap;}

/* colour grid — the mock lays out five per row */
.bm-proj-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
	gap:10px;
}
.bm-proj-color{
	position:relative;
	min-height:143px;
	border-radius:var(--bm-r-sm);
	overflow:hidden;
}
.bm-proj-color__link{
	display:flex;flex-direction:column;justify-content:space-between;
	height:100%;padding:18px 20px;text-decoration:none;color:inherit;
}
.bm-proj-color__name{font:600 14px/18px var(--bm-font);}
.bm-proj-color__code{font:400 14px/18px var(--bm-font);}
.bm-sw--light .bm-proj-color__name,.bm-sw--light .bm-proj-color__code{color:var(--bm-black);}
.bm-sw--dark .bm-proj-color__name,.bm-sw--dark .bm-proj-color__code{color:var(--bm-white);}
.bm-proj-color__note,
.bm-proj-color__del{
	position:absolute;top:8px;
	background:rgba(255,255,255,.85);border:0;border-radius:50%;
	width:26px;height:26px;cursor:pointer;line-height:0;
	display:flex;align-items:center;justify-content:center;
	opacity:0;transition:opacity .15s ease;color:var(--bm-dark);
}
.bm-proj-color__note{right:40px;}
.bm-proj-color__del{right:8px;}
.bm-proj-color:hover .bm-proj-color__note,
.bm-proj-color:hover .bm-proj-color__del,
.bm-proj-color__note:focus,.bm-proj-color__del:focus{opacity:1;}
.bm-proj-color__note svg,.bm-proj-color__del svg{width:14px;height:14px;display:block;}
.bm-proj-hint{margin:16px 0 0;font:400 14px/20px var(--bm-font);color:var(--bm-grey);}

/* notes */
.bm-proj-sub{margin:44px 0 20px;font:500 24px/30px var(--bm-font);color:var(--bm-black);text-transform:none;}
.bm-proj-notes{display:flex;flex-direction:column;gap:18px;}
.bm-proj-note{display:flex;gap:20px;align-items:flex-start;}
.bm-proj-note__sw{
	flex:0 0 182px;min-height:110px;border-radius:var(--bm-r-sm);
	padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;
}
.bm-proj-note__body{flex:1;min-width:0;font:400 16px/24px var(--bm-font);color:var(--bm-ink-2);}
.bm-proj-note__body p{margin:0 0 6px;}
.bm-proj-note__area{color:var(--bm-grey);}

.bm-proj-foot{
	display:flex;align-items:center;justify-content:flex-end;gap:24px;
	margin-top:44px;padding-top:26px;border-top:1px solid var(--bm-line-2);
}

/* note editor */
.bm-note-modal{
	position:fixed;inset:0;z-index:200;
	background:rgba(0,0,0,.45);
	display:flex;align-items:center;justify-content:center;padding:20px;
}
.bm-note-modal.hidden{display:none;}
.bm-note-modal__box{
	position:relative;width:min(480px,100%);
	background:var(--bm-white);border-radius:var(--bm-r-md);padding:28px;
}
.bm-note-modal__box h4{margin:0 0 18px;font:500 22px/28px var(--bm-font);text-transform:none;}
.bm-note-modal__box label{display:block;margin:0 0 16px;font:400 14px/20px var(--bm-font);color:var(--bm-grey);}
.bm-note-modal__box textarea,
.bm-note-modal__box input{
	display:block;width:100%;margin-top:6px;box-sizing:border-box;
	border:1px solid var(--bm-line);border-radius:var(--bm-r-sm);padding:10px 14px;
	font:400 16px/24px var(--bm-font);color:var(--bm-black);
}
.bm-note-modal__close{
	position:absolute;top:10px;right:14px;background:none;border:0;
	font-size:26px;line-height:1;cursor:pointer;color:var(--bm-grey);
}
@media (max-width:767px){
	.bm-acct-head{flex-direction:column;align-items:flex-start;gap:14px;}
	.bm-proj-add{flex-direction:column;align-items:stretch;}
	.bm-proj-note{flex-direction:column;}
	.bm-proj-note__sw{flex:none;width:100%;}
	.bm-proj-foot{flex-direction:column;align-items:stretch;}
}

/* ==========================================================================
   ACCOUNT — corrections against the mock
   Sidebar sits on a grey panel (mock: 380x1437 #EFEFEF bleeding off the left),
   sidebar links Proxima Nova 20/69, project names 24/31, counts 16/21.
   ========================================================================== */
.user-account{position:relative;}
.user-account .two-col-grid__left{position:relative;flex:0 0 300px;}
.user-account .two-col-grid__left .bg{
	position:absolute;
	top:-40px;bottom:-40px;
	right:0;
	width:100vw;
	background:var(--bm-bg-soft);
}
.user-account .user-menu{position:relative;padding:34px 40px 40px 0;}
.user-account .user-menu .link a{
	padding:0;
	margin:0 0 26px;
	font:400 20px/26px var(--bm-font);
	color:var(--bm-black);
}
.user-account .user-menu .link:last-child a{margin-bottom:0;}
.user-account .user-menu .link a.active{font-weight:600;}
.user-account .two-col-grid__right{padding:34px 0 60px;}
.bm-acct-title{font:400 32px/40px var(--bm-font);}

/* "New Project" / "Add general note": a plus icon and plain text, per the mock */
.bm-acct-add{
	display:inline-flex;align-items:center;gap:14px;
	margin:22px 0 8px;padding:0;
	background:none;border:0;cursor:pointer;
	font:400 18px/23px var(--bm-font);
	color:var(--bm-black);
}
.bm-acct-add__ico{display:block;width:17px;height:17px;flex:none;line-height:0;}
.bm-acct-add__ico svg{display:block;width:100%;height:100%;}
.bm-acct-add:hover{color:var(--bm-teal);}

.bm-acct-crumbs{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.bm-acct-help{font:400 16px/21px var(--bm-font);color:var(--bm-dark);text-decoration:none;}
.bm-acct-help:hover{text-decoration:underline;}

/* project rows */
.bm-project{padding:22px 0;gap:24px;}
.bm-project__name{font:400 24px/31px var(--bm-font);}
.bm-project__count{font:400 16px/21px var(--bm-font);}
.bm-project__swatches{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;justify-content:flex-end;}
.bm-project__swatches i{display:block;width:25px;height:25px;flex:none;border-radius:2px;}

/* colour tile tools — three white icons centred, revealed on hover */
.bm-proj-color__tools{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;gap:12px;
	background:rgba(0,0,0,.28);
	opacity:0;transition:opacity .15s ease;
}
.bm-proj-color:hover .bm-proj-color__tools,
.bm-proj-color__tools:focus-within{opacity:1;}
.bm-proj-tool{
	width:24px;height:24px;padding:0;line-height:0;
	background:none;border:0;cursor:pointer;color:var(--bm-white);
}
.bm-proj-tool svg{display:block;width:100%;height:100%;}
.bm-proj-tool:hover{opacity:.75;}

/* notes: heading row with the add control, and per-note edit/delete */
.bm-proj-notes-head{
	display:flex;align-items:center;justify-content:space-between;gap:20px;
	margin:44px 0 18px;
}
.bm-proj-notes-head .bm-proj-sub{margin:0;}
.bm-proj-notes-head .bm-acct-add{margin:0;}
.bm-proj-note{position:relative;}
/* the mock draws these plainly, not on hover */
.bm-proj-note__acts{
	display:flex;gap:8px;align-items:flex-start;margin-left:auto;
	flex:none;
}
.bm-proj-note__act{
	width:26px;height:26px;padding:5px;line-height:0;
	background:none;border:0;cursor:pointer;color:var(--bm-grey);
}
.bm-proj-note__act svg{display:block;width:100%;height:100%;}
.bm-proj-note__act:hover{color:var(--bm-dark);}
.bm-proj-note--general{padding-left:0;}
.bm-proj-note--general .bm-proj-note__body{padding-top:2px;}

@media (max-width:1199px){
	.user-account .two-col-grid__left{flex:0 0 240px;}
	.user-account .user-menu{padding-right:24px;}
}
@media (max-width:767px){
	.user-account .two-col-grid__left{flex:none;}
	.user-account .two-col-grid__left .bg{left:-20px;right:-20px;width:auto;}
	.user-account .user-menu{padding:20px 0;}
	.user-account .user-menu .link a{margin-bottom:14px;font-size:18px;}
	.bm-project{flex-wrap:wrap;}
	.bm-project__swatches{width:100%;justify-content:flex-start;}
}

/* logout reads as a secondary action and needs room under it on short pages */
.user-account .user-menu .link:last-child a{
	color:var(--bm-grey);
	margin-top:22px;
}
.user-account .user-menu{padding-bottom:64px;}
.user-account .two-col-grid{align-items:stretch;}

@media (max-width:767px){
	/* the column layout made the input stretch to the row height */
	.bm-proj-add{flex-direction:column;align-items:stretch;gap:12px;}
	.bm-proj-add form{flex:0 0 auto;align-self:stretch;}
	.bm-proj-add input{width:100%;}
	.bm-acct-crumbs{flex-direction:column;align-items:flex-start;gap:6px;}
	.bm-acct-title{font-size:26px;line-height:32px;}
	.bm-proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.bm-proj-notes-head{flex-direction:column;align-items:flex-start;gap:10px;}
	.bm-proj-color__tools{opacity:1;background:rgba(0,0,0,.18);}
}

/* shared dialog (new project, confirmations) — same shell as the note editor */
.bm-dialog .bm-note-modal__box{width:min(420px,100%);}
.bm-dialog__btns{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}
.bm-dialog .bm-btn{padding:11px 22px;font:500 16px/20px var(--bm-font);}
.bm-btn--ghost{
	background:none;
	border:1px solid var(--bm-line);
	color:var(--bm-dark);
	border-radius:var(--bm-r-pill);
	cursor:pointer;
}
.bm-btn--ghost:hover{border-color:var(--bm-dark);}
.bm-dialog .js-bm-dialog-field{margin:0;}

/* ==========================================================================
   PRODUCT — colour selected  (Figma "Heritage Red 2024-20")
   The chosen colour fills a full-bleed band behind the breadcrumb, the badge
   and the title; the tin overlaps its lower edge. Nothing sits behind the tin
   in either state — the earlier grey block was wrong.
   ========================================================================== */
.product-show-page{position:relative;}
.product-show-page.is-tinted::before{
	content:'';
	position:absolute;
	top:0;left:50%;
	width:100vw;
	transform:translateX(-50%);
	height:var(--bm-tint-h,310px);
	background:var(--bm-tint);
	z-index:0;
}
.product-show-page.is-tinted > *{position:relative;z-index:1;}
/* white type on the band */
.product-show-page.is-tinted .wrapper--breadcrumbs > .breadcrumbs,
.product-show-page.is-tinted .breadcrumbs,
.product-show-page.is-tinted .breadcrumbs a,
.product-show-page.is-tinted .product-show__number,
.product-show-page.is-tinted .product-show__name h1,
.product-show-page.is-tinted .bm-pcard__flag,
.product-show-page.is-tinted .bm-pcolor,
.product-show-page.is-tinted .bm-pcolor .name,
.product-show-page.is-tinted .bm-pcolor .number,
.product-show-page.is-tinted .bm-pcolor__label{color:var(--bm-white);}
.product-show-page.is-tinted .product-show__name .icon{filter:brightness(0) invert(1);}
/* pale colours keep the dark type */
.product-show-page.is-tinted--light .breadcrumbs,
.product-show-page.is-tinted--light .breadcrumbs a,
.product-show-page.is-tinted--light .product-show__number,
.product-show-page.is-tinted--light .product-show__name h1,
.product-show-page.is-tinted--light .bm-pcolor,
.product-show-page.is-tinted--light .bm-pcolor .name,
.product-show-page.is-tinted--light .bm-pcolor .number,
.product-show-page.is-tinted--light .bm-pcolor__label{color:var(--bm-black);}
.product-show-page.is-tinted--light .product-show__name .icon{filter:none;}

/* no panel behind the tin — the mock puts it straight on the page */
.product-show > .half-width.img-side .product-media{background:none;border-radius:0;}
.product-show > .half-width.img-side .product-image{background:none;}
/* the swatch overlay belonged to the old design; the band replaces it */
.product-show .product-color-preview{display:none;}

/* the fallback heights only matter until the script measures the real one */
@media (max-width:1199px){
	.product-show-page.is-tinted::before{height:var(--bm-tint-h,270px);}
}
@media (max-width:767px){
	.product-show-page.is-tinted::before{height:var(--bm-tint-h,230px);}
}

/* ==========================================================================
   Wishlist retired in favour of Projects.
   Delete this block to bring the old favourites controls back — markup and JS
   are untouched.
   ========================================================================== */
.product-show__name .js-favorites,          /* heart on the product card */
.color-show .js-favorites,                  /* heart on the colour card */
.js-favorites.icon--heart,
.js-favorites.icon--heart-green,
.user-menu .favorites-link{display:none !important;}
.product-show__name h1{padding-right:0;}
/* --- end wishlist ---------------------------------------------------------- */

/* checkout: one button per step is already handled by the legacy sheet
   (`.cart-modal__btns .btn:first-child, :disabled, .btn--dark-grey{display:none}`),
   which `handleCartStep` drives by swapping btn--green/btn--dark-grey and clearing
   `disabled`. A second `:has(.order-step-N.current)` rule set here overlapped it and
   between them every button ended up hidden — do not re-add one. */
.cart-modal__btns .btn{width:auto;flex:0 1 260px;}

/* product page head — breadcrumbs and the Best Selling flag sit above the shot,
   the article hangs off the title as a superscript (Figma "Item nocolor") */
.product-show-page .wrapper--breadcrumbs{padding-top:28px;}
.bm-pbreadcrumbs{
	font:400 14px/20px var(--bm-font);
	color:var(--bm-grey);
	margin:0 0 34px;
}
.bm-pbreadcrumbs a{color:var(--bm-grey);text-decoration:none;}
.bm-pbreadcrumbs a:hover{text-decoration:underline;}
.bm-pflag{
	display:inline-flex;align-items:center;gap:9px;
	margin:0 0 18px;
	font:500 20px/26px var(--bm-font);
	color:var(--bm-dark);
}
.bm-pflag svg{display:block;width:20px;height:20px;flex:none;}
.product-show__name h1 .bm-part{
	font-size:.42em;
	font-weight:400;
	vertical-align:super;
	margin-left:4px;
	letter-spacing:0;
}
/* the old standalone article line is redundant now */
.product-show__number{display:none;}
/* white on the tinted band */
.product-show-page.is-tinted .bm-pbreadcrumbs,
.product-show-page.is-tinted .bm-pbreadcrumbs a,
.product-show-page.is-tinted .bm-pflag{color:var(--bm-white);}
.product-show-page.is-tinted--light .bm-pbreadcrumbs,
.product-show-page.is-tinted--light .bm-pbreadcrumbs a,
.product-show-page.is-tinted--light .bm-pflag{color:var(--bm-black);}

/* ==========================================================================
   CATALOGUE — corrections against Figma "Catalog"
   ========================================================================== */
/* Best Selling: a black pill in the top-left corner of the shot */
.bm-pcard__media{position:relative;}
.bm-pcard__flag{
	position:absolute;
	top:12px;left:12px;
	z-index:2;
	display:inline-flex;align-items:center;gap:6px;
	padding:6px 12px;
	border-radius:var(--bm-r-pill);
	background:var(--bm-dark);
	color:var(--bm-white);
	font:400 13px/16px var(--bm-font);
	margin:0;
}
.bm-pcard__flag svg{display:block;width:13px;height:13px;flex:none;}

/* section pills — the mock keeps them in sentence case and lets them wrap
   instead of running off the right edge */
.catalog .paint-line{flex-wrap:wrap;gap:10px 12px;}
.catalog .paint-line__item a{
	text-transform:none;
	font:400 15px/20px var(--bm-font);
	padding:9px 18px;
	white-space:nowrap;
}

/* the filter headings carry no collapse chevron in the mock */
.catalog .search-categories .object > .name .icon,
.catalog .search-categories .arrow,
.catalog .search-categories .name::after{display:none;}
/* no collapse arrow on the filter headings in the mock */
.catalog .search-categories .wrapper-dropdown > span.name::before,
.catalog .search-categories .wrapper-dropdown > span.name::after{display:none;}

/* ==========================================================================
   BASKET PANEL — Figma "Basket step 1 / 2"
   The panel is grey and each line item is a white card whose top band is
   filled with the chosen colour (`--bm-cart-color`, set in core/basket.php).
   Everything here is scoped to the open panel; `.cart-modal.hidden` is what
   parks it off-screen and must keep its own top/z-index.
   ========================================================================== */
.cart-modal:not(.hidden){background:var(--bm-bg-soft);}
.cart-modal:not(.hidden) .js-cart-modal__products{padding:0 24px 8px;}

/* dim the page behind the panel */
.page-content.with-modal::after{
	content:'';
	position:fixed;inset:0;
	background:rgba(0,0,0,.45);
	z-index:120;
	pointer-events:none;
}

/* close button, injected by ue.js */
.cart-modal__close{
	position:absolute;top:14px;right:20px;
	width:32px;height:32px;
	display:flex;align-items:center;justify-content:center;
	border:0;background:none;cursor:pointer;
	font:300 30px/1 var(--bm-font);
	color:var(--bm-ink-2);
	/* `.order-step` is position:relative with z-index:5 and spans the full panel
	   width, so at z-index 2 the close button was painted underneath its header
	   and every tap landed on `.cart-content__header`. */
	z-index:20;
}
.cart-modal__close:hover{opacity:.6;}

.cart-modal:not(.hidden) .cart-content__header,
.cart-modal:not(.hidden) .order-form__header{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	padding:34px 0 26px;margin:0;
}
.cart-modal:not(.hidden) .cart-content__header h6,
.cart-modal:not(.hidden) .order-form__header h6{
	margin:0;font:400 40px/48px var(--bm-font-display);
	color:var(--bm-black);text-transform:none;letter-spacing:0;
}
.cart-modal:not(.hidden) .cart-content__header p,
.cart-modal:not(.hidden) .order-form__header p{
	margin:0;font:400 16px/24px var(--bm-font);color:var(--bm-grey);
	text-align:right;white-space:nowrap;
}
.cart-modal:not(.hidden) .order-form__header p b{color:var(--bm-black);font-weight:600;}

/* --- one line item as a white card --------------------------------------- */
.cart-modal:not(.hidden) .cart-product{
	position:relative;
	display:block;
	background:var(--bm-white);
	border:0;border-radius:var(--bm-r-sm);
	padding:0;margin:0 0 22px;
	overflow:hidden;
}
.cart-modal:not(.hidden) .cart-product .js-remove-product{
	top:-6px;right:-6px;
	opacity:.55;z-index:3;
}
/* the coloured band: photo on the left, name and colour on the fill */
.cart-modal:not(.hidden) .cart-product__info{
	display:grid;
	grid-template-columns:104px minmax(0,1fr);
	gap:0 16px;
	align-items:center;
	padding:16px 18px 16px 0;
	background:var(--bm-cart-color,var(--bm-bg-soft));
}
.cart-modal:not(.hidden) .cart-product__info img{
	width:104px;height:104px;
	background:none;border-radius:0;padding:0;
	object-fit:contain;
}
.cart-modal:not(.hidden) .cart-product__info p{
	font:700 17px/22px var(--bm-font);
	color:var(--bm-black);
}
.cart-modal:not(.hidden) .cart-product__info p b{
	display:inline;font:400 17px/22px var(--bm-font);color:inherit;opacity:.8;
}
.cart-product__colorline{
	margin:6px 0 0!important;
	font:400 15px/20px var(--bm-font)!important;
	opacity:.9;
}
.cart-product--dark .cart-product__info p,
.cart-product--dark .cart-product__info p b{color:var(--bm-white);}
.cart-product--light .cart-product__info p,
.cart-product--light .cart-product__info p b{color:var(--bm-ink-2);}

/* body of the card: tare rows on the left, price under them */
.cart-modal:not(.hidden) .cart-product__tares{
	margin:0;padding:16px 18px 0;
}
.cart-modal:not(.hidden) .cart-product__tares li{
	justify-content:flex-start;gap:0;
	padding:5px 0;
}
.cart-modal:not(.hidden) .cart-product__tares li input{
	margin-left:auto;width:64px;text-align:center;
	border:0;border-bottom:1px solid var(--bm-line);
	background:none;font:400 16px/22px var(--bm-font);
}
.cart-modal:not(.hidden) .cart-product__summary{
	display:block;padding:8px 18px 18px;text-align:left;
}
/* the colour now reads on the band, so the old chip is redundant */
.cart-modal:not(.hidden) .cart-product__summary .color{display:none;}
.cart-modal:not(.hidden) .cart-product__summary .total-price h6{
	font:700 22px/28px var(--bm-font);
}

/* --- promo code ----------------------------------------------------------- */
.cart-modal:not(.hidden) .promo-code{
	display:flex;align-items:center;gap:0;
	margin:6px 0 26px;
	background:var(--bm-white);
	border:1px solid var(--bm-line);
	border-radius:var(--bm-r-pill);
	padding:4px 6px 4px 20px;
	flex-wrap:wrap;
}
.cart-modal:not(.hidden) .promo-code input{
	flex:1 1 auto;min-width:0;
	border:0;background:none;outline:none;
	font:400 16px/24px var(--bm-font);
	padding:10px 0;
}
.cart-modal:not(.hidden) .promo-code .js-promo-apply{
	flex:none;border:0;background:none;cursor:pointer;
	padding:10px 16px;
	font:500 16px/24px var(--bm-font);
	color:var(--bm-black);
}
.cart-modal:not(.hidden) .promo-code .js-promo-apply:hover{opacity:.65;}
.promo-code__msg{
	flex:1 0 100%;
	padding:0 0 6px 14px;
	font:400 14px/20px var(--bm-font);
}
.promo-code__msg.is-ok{color:#1f7a3d;}
.promo-code__msg.is-bad{color:#b3261e;}

/* --- totals --------------------------------------------------------------- */
.cart-modal:not(.hidden) .cart-content__footer .total{
	display:block;padding:0;
}
.cart-modal:not(.hidden) .cart-content__footer .total h6{
	display:inline;order:2;
	font:400 24px/30px var(--bm-font);
	color:var(--bm-grey);text-transform:none;
}
.cart-modal:not(.hidden) .cart-total{
	display:flex;align-items:baseline;gap:8px;
	flex-wrap:wrap;padding:0;
}
.cart-modal:not(.hidden) .cart-total h4{
	margin:0;font:700 40px/48px var(--bm-font);color:var(--bm-black);
	text-transform:none;
}
.cart-modal:not(.hidden) .cart-content__footer .total{
	display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.cart-modal:not(.hidden) .cart-content__footer .total > h6{order:2;}
.cart-modal:not(.hidden) .cart-content__footer .total > h6::before{content:'/';margin-right:2px;}
.cart-modal:not(.hidden) .cart-total p{
	flex:1 0 100%;margin:4px 0 0;
	font:400 16px/24px var(--bm-font);color:var(--bm-grey);
}

/* --- step button ---------------------------------------------------------- */
.cart-modal:not(.hidden) .cart-modal__btns{
	justify-content:flex-start;
	padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));
	background:var(--bm-bg-soft);
}
.cart-modal:not(.hidden) .cart-modal__btns .btn--green{
	background:var(--bm-black);border-color:var(--bm-black);color:var(--bm-white);
}
.cart-modal:not(.hidden) .cart-modal__btns .btn{max-width:260px;}

@media (max-width:767px){
	.cart-modal:not(.hidden) .js-cart-modal__products{padding:0 16px 8px;}
	.cart-modal:not(.hidden) .cart-content__header h6,
	.cart-modal:not(.hidden) .order-form__header h6{font-size:32px;line-height:38px;}
	.cart-modal:not(.hidden) .cart-product__info{grid-template-columns:88px minmax(0,1fr);}
	.cart-modal:not(.hidden) .cart-product__info img{width:88px;height:88px;}
	.cart-modal:not(.hidden) .cart-modal__btns{padding-left:16px;padding-right:16px;}
	.cart-modal:not(.hidden) .cart-modal__btns .btn{max-width:none;flex:1 1 100%;}
}

/* --- basket panel: flow fixes ------------------------------------------- */
/* The legacy sheet pins `.cart-content__footer` absolutely to the bottom of
   `.order-wrapper`, which is itself a fixed-height overflow:hidden box — so the
   promo/total block sat on top of the product list. The mock has them stacked,
   with only the list scrolling. */
.cart-modal:not(.hidden) .order-step-1{
	display:flex;flex-direction:column;height:100%;
}
.cart-modal:not(.hidden) .order-step-1 .order-wrapper{
	flex:1 1 auto;height:auto;min-height:0;overflow:auto;padding-bottom:0;
}
.cart-modal:not(.hidden) .cart-content__body{overflow:visible;height:auto;}
.cart-modal:not(.hidden) .cart-content__footer{
	position:static;flex:none;
	background:none;padding:16px 0 4px;
}
.cart-modal:not(.hidden) .promo-code input{width:auto;}

/* the sprite icon is white and vanishes on a dark colour band; mask the mock's
   trash outline instead so it takes the text colour of the card */
.cart-modal:not(.hidden) .cart-product .js-remove-product{
	width:22px;height:22px;
	background-image:none;
	background-color:currentColor;
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22><path d=%22M7.5594 1.93212e-05L10.9408 1.93212e-05C11.1572 -0.000120679 11.3457 -0.00024057 11.5237 0.0281894C12.227 0.140499 12.8356 0.579149 13.1646 1.21084C13.2478 1.37073 13.3073 1.54961 13.3756 1.75494L13.4873 2.08984C13.5062 2.14653 13.5116 2.16258 13.5161 2.17522C13.6913 2.65934 14.1453 2.9866 14.6599 2.99964C14.6735 2.99998 14.69 3.00004 14.7501 3.00004L17.7501 3.00004C18.1643 3.00004 18.5001 3.33583 18.5001 3.75004C18.5001 4.16425 18.1643 4.50004 17.7501 4.50004L0.75 4.50004C0.33579 4.50004 0 4.16425 0 3.75004C0 3.33583 0.33579 3.00004 0.75 3.00004L3.75008 3.00004C3.81013 3.00004 3.8267 2.99998 3.84023 2.99964C4.35488 2.9866 4.80891 2.65936 4.98402 2.17524C4.98863 2.16252 4.99392 2.14681 5.01291 2.08984L5.12452 1.75497C5.19281 1.54965 5.25233 1.37073 5.33559 1.21084C5.66453 0.579149 6.27313 0.140499 6.97643 0.0281894C7.15445 -0.00024057 7.343 -0.000120679 7.5594 1.93212e-05ZM6.25815 3.00004C6.30966 2.89902 6.35531 2.79404 6.39458 2.68548C6.4065 2.65252 6.4182 2.61742 6.43322 2.57234L6.53302 2.27293C6.62419 1.99942 6.64519 1.94363 6.66601 1.90364C6.77566 1.69308 6.97853 1.54686 7.21296 1.50942C7.2575 1.50231 7.317 1.50004 7.6053 1.50004L10.8948 1.50004C11.1831 1.50004 11.2427 1.50231 11.2872 1.50942C11.5216 1.54686 11.7245 1.69308 11.8342 1.90364C11.855 1.94363 11.876 1.99941 11.9671 2.27293L12.0669 2.57216L12.1056 2.6855C12.1449 2.79406 12.1905 2.89902 12.242 3.00004L6.25815 3.00004Z%22 fill=%22currentColor%22 fill-rule=%22evenodd%22 transform=%22translate(2.75 2.25)%22/><path d=%22M1.49837 0.70014C1.47082 0.28684 1.11344 -0.0258607 0.700139 0.00168929C0.286849 0.0292393 -0.0258608 0.386619 0.00168924 0.799919L0.465139 7.75163C0.550639 9.03443 0.619699 10.0705 0.781669 10.8836C0.950069 11.7289 1.23649 12.435 1.82808 12.9884C2.41968 13.5419 3.14323 13.7807 3.99788 13.8925C4.8199 14 5.85828 14 7.14388 14L8.02278 14C9.30838 14 10.3468 14 11.1689 13.8925C12.0235 13.7807 12.7471 13.5419 13.3387 12.9884C13.9303 12.435 14.2167 11.7289 14.3851 10.8836C14.5471 10.0705 14.6161 9.03443 14.7016 7.75163L15.1651 0.799919C15.1926 0.386619 14.8799 0.0292393 14.4666 0.00168929C14.0533 -0.0258607 13.6959 0.28684 13.6684 0.70014L13.2084 7.59923C13.1186 8.94713 13.0546 9.88493 12.914 10.5905C12.7776 11.275 12.5873 11.6373 12.3139 11.8931C12.0405 12.1488 11.6663 12.3147 10.9743 12.4052C10.2609 12.4985 9.32088 12.5 7.97008 12.5L7.19668 12.5C5.84588 12.5 4.90583 12.4985 4.19243 12.4052C3.50043 12.3147 3.12627 12.1488 2.85286 11.8931C2.57945 11.6373 2.38911 11.275 2.25276 10.5905C2.1122 9.88493 2.04817 8.94713 1.95831 7.59923L1.49837 0.70014Z%22 fill=%22currentColor%22 transform=%22translate(4.41602 7.75)%22/><path d=%22M0.675427 0.00377555C1.08759 -0.0374245 1.45517 0.263275 1.49637 0.675475L1.99637 5.67548C2.03757 6.08757 1.73687 6.45517 1.32467 6.49638C0.912528 6.53758 0.544997 6.23688 0.503777 5.82468L0.00377718 0.824676C-0.0374328 0.412576 0.263277 0.0449755 0.675427 0.00377555Z%22 fill=%22currentColor%22 transform=%22translate(8.75 10.25)%22/><path d=%22M1.32468 0.00377555C1.73688 0.0449755 2.03758 0.412576 1.99638 0.824676L1.49638 5.82468C1.45518 6.23688 1.08758 6.53758 0.675475 6.49638C0.263275 6.45517 -0.0374245 6.08757 0.00377555 5.67548L0.503776 0.675475C0.544976 0.263275 0.912576 -0.0374245 1.32468 0.00377555Z%22 fill=%22currentColor%22 transform=%22translate(13.25 10.25)%22/></svg>") no-repeat center/22px 22px;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22><path d=%22M7.5594 1.93212e-05L10.9408 1.93212e-05C11.1572 -0.000120679 11.3457 -0.00024057 11.5237 0.0281894C12.227 0.140499 12.8356 0.579149 13.1646 1.21084C13.2478 1.37073 13.3073 1.54961 13.3756 1.75494L13.4873 2.08984C13.5062 2.14653 13.5116 2.16258 13.5161 2.17522C13.6913 2.65934 14.1453 2.9866 14.6599 2.99964C14.6735 2.99998 14.69 3.00004 14.7501 3.00004L17.7501 3.00004C18.1643 3.00004 18.5001 3.33583 18.5001 3.75004C18.5001 4.16425 18.1643 4.50004 17.7501 4.50004L0.75 4.50004C0.33579 4.50004 0 4.16425 0 3.75004C0 3.33583 0.33579 3.00004 0.75 3.00004L3.75008 3.00004C3.81013 3.00004 3.8267 2.99998 3.84023 2.99964C4.35488 2.9866 4.80891 2.65936 4.98402 2.17524C4.98863 2.16252 4.99392 2.14681 5.01291 2.08984L5.12452 1.75497C5.19281 1.54965 5.25233 1.37073 5.33559 1.21084C5.66453 0.579149 6.27313 0.140499 6.97643 0.0281894C7.15445 -0.00024057 7.343 -0.000120679 7.5594 1.93212e-05ZM6.25815 3.00004C6.30966 2.89902 6.35531 2.79404 6.39458 2.68548C6.4065 2.65252 6.4182 2.61742 6.43322 2.57234L6.53302 2.27293C6.62419 1.99942 6.64519 1.94363 6.66601 1.90364C6.77566 1.69308 6.97853 1.54686 7.21296 1.50942C7.2575 1.50231 7.317 1.50004 7.6053 1.50004L10.8948 1.50004C11.1831 1.50004 11.2427 1.50231 11.2872 1.50942C11.5216 1.54686 11.7245 1.69308 11.8342 1.90364C11.855 1.94363 11.876 1.99941 11.9671 2.27293L12.0669 2.57216L12.1056 2.6855C12.1449 2.79406 12.1905 2.89902 12.242 3.00004L6.25815 3.00004Z%22 fill=%22currentColor%22 fill-rule=%22evenodd%22 transform=%22translate(2.75 2.25)%22/><path d=%22M1.49837 0.70014C1.47082 0.28684 1.11344 -0.0258607 0.700139 0.00168929C0.286849 0.0292393 -0.0258608 0.386619 0.00168924 0.799919L0.465139 7.75163C0.550639 9.03443 0.619699 10.0705 0.781669 10.8836C0.950069 11.7289 1.23649 12.435 1.82808 12.9884C2.41968 13.5419 3.14323 13.7807 3.99788 13.8925C4.8199 14 5.85828 14 7.14388 14L8.02278 14C9.30838 14 10.3468 14 11.1689 13.8925C12.0235 13.7807 12.7471 13.5419 13.3387 12.9884C13.9303 12.435 14.2167 11.7289 14.3851 10.8836C14.5471 10.0705 14.6161 9.03443 14.7016 7.75163L15.1651 0.799919C15.1926 0.386619 14.8799 0.0292393 14.4666 0.00168929C14.0533 -0.0258607 13.6959 0.28684 13.6684 0.70014L13.2084 7.59923C13.1186 8.94713 13.0546 9.88493 12.914 10.5905C12.7776 11.275 12.5873 11.6373 12.3139 11.8931C12.0405 12.1488 11.6663 12.3147 10.9743 12.4052C10.2609 12.4985 9.32088 12.5 7.97008 12.5L7.19668 12.5C5.84588 12.5 4.90583 12.4985 4.19243 12.4052C3.50043 12.3147 3.12627 12.1488 2.85286 11.8931C2.57945 11.6373 2.38911 11.275 2.25276 10.5905C2.1122 9.88493 2.04817 8.94713 1.95831 7.59923L1.49837 0.70014Z%22 fill=%22currentColor%22 transform=%22translate(4.41602 7.75)%22/><path d=%22M0.675427 0.00377555C1.08759 -0.0374245 1.45517 0.263275 1.49637 0.675475L1.99637 5.67548C2.03757 6.08757 1.73687 6.45517 1.32467 6.49638C0.912528 6.53758 0.544997 6.23688 0.503777 5.82468L0.00377718 0.824676C-0.0374328 0.412576 0.263277 0.0449755 0.675427 0.00377555Z%22 fill=%22currentColor%22 transform=%22translate(8.75 10.25)%22/><path d=%22M1.32468 0.00377555C1.73688 0.0449755 2.03758 0.412576 1.99638 0.824676L1.49638 5.82468C1.45518 6.23688 1.08758 6.53758 0.675475 6.49638C0.263275 6.45517 -0.0374245 6.08757 0.00377555 5.67548L0.503776 0.675475C0.544976 0.263275 0.912576 -0.0374245 1.32468 0.00377555Z%22 fill=%22currentColor%22 transform=%22translate(13.25 10.25)%22/></svg>") no-repeat center/22px 22px;
	top:14px;right:14px;
}
.cart-product--dark .js-remove-product{color:var(--bm-white);}
.cart-product--light .js-remove-product,
.cart-product:not(.cart-product--tinted) .js-remove-product{color:var(--bm-ink-2);}

/* --- colour page: CTA row moved out of the coloured band ------------------ */
/* Figma "Colors Item": the buy buttons sit below the band, on the page
   background, not on the colour itself. */
.bm-color__actions{background:var(--bm-bg-soft);}
.bm-color__actions .bm-color__cta{
	display:flex;align-items:center;gap:16px;
	padding:34px 0 40px;margin:0;
}
.bm-cstrip__sub{
	margin:-18px 0 26px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-grey);
}
@media (max-width:767px){
	.bm-color__actions .bm-color__cta{padding:24px 0 28px;gap:12px;flex-wrap:wrap;}
	.bm-cstrip__sub{margin:-10px 0 18px;}
}

/* --- basket: the tin overhangs the coloured band, as in the mock ---------- */
.cart-modal:not(.hidden) .cart-product{overflow:visible;}
.cart-modal:not(.hidden) .cart-product__info{
	border-radius:var(--bm-r-sm) var(--bm-r-sm) 0 0;
}
.cart-modal:not(.hidden) .cart-product__info img{
	height:126px;margin-bottom:-22px;position:relative;z-index:1;
}

/* --- colour hero: text colour --------------------------------------------
   Only `.bm-color__name` carried an explicit colour, so `<p class="bm-color__desc">`
   fell through to the legacy sheet's dark paragraph colour and went unreadable on
   every dark colour. Set it on the hero and let the light variant flip it back. */
.bm-color__hero,
.bm-color__hero .bm-color__desc,
.bm-color__hero .bm-color__code,
.bm-color__hero .bm-color__row,
.bm-color__hero .bm-color__label,
.bm-color__hero .bm-color__collection{color:var(--bm-white);}
.bm-color__hero--light,
.bm-color__hero--light .bm-color__desc,
.bm-color__hero--light .bm-color__code,
.bm-color__hero--light .bm-color__row,
.bm-color__hero--light .bm-color__label,
.bm-color__hero--light .bm-color__collection{color:var(--bm-ink-2);}

/* ==========================================================================
   RESPONSIVE CONFORMANCE — Figma tablet (834) / phone (393)
   ========================================================================== */

/* --- section head: title and "see all" stay on one line ------------------
   The mock keeps them on a single row at every width; only the type shrinks. */
@media (max-width:767px){
	.bm-section__head{
		flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;
	}
	.bm-section__all{white-space:nowrap;}
}

/* --- catalogue filters: one scrolling row, never a stack ------------------
   Wrapping put seven rows of pills (~230px) above the first product on a phone.
   `.paint-line-container` already scrolls horizontally in the legacy sheet. */
@media (max-width:1199px){
	.catalog .paint-line{flex-wrap:nowrap;justify-content:flex-start;}
	.catalog .paint-line__item{flex:none;}
	.catalog .paint-line-container{
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.catalog .paint-line-container::-webkit-scrollbar{display:none;}
}

/* --- home: "Choose a collection" -----------------------------------------
   The mock keeps the two-column split on a tablet (dark aside ~36%) and only
   stacks on a phone, where the copy block stays on the dark ground. */
@media (max-width:1199px){
	.bm-collections{grid-template-columns:300px minmax(0,1fr);}
	.bm-collections__aside{padding:56px 32px 56px var(--bm-gutter);}
	.bm-collections__filters{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;}
	.bm-collections__copy{padding:40px 32px 56px;}
}
@media (max-width:767px){
	.bm-collections{grid-template-columns:1fr;}
	.bm-collections__aside{padding:40px 27px;}
	.bm-collections__filters{
		flex-direction:row;flex-wrap:wrap;gap:10px;
	}
	.bm-collections__filters > *{flex:0 1 calc(50% - 5px);}
	/* the description and its button sit on the dark ground in the mock */
	.bm-collections__copy{
		background:#1F262E;
		padding:32px 27px 44px;
	}
	.bm-collections__name,
	.bm-collections__text,
	.bm-collections__text p{color:var(--bm-white);}
	.bm-collections__copy .bm-btn,
	.bm-collections__copy .bm-btn--black{
		background:none;border:1px solid var(--bm-white);color:var(--bm-white);
	}
}

/* --- "add to project" control on colour swatches --------------------------
   Injected by ue.js into every swatch that carries a colour code. */
.bm-sw,.bm-swatch,.bm-cchip{position:relative;}
.bm-sw__add{
	position:absolute;right:10px;bottom:10px;
	width:22px;height:22px;padding:0;
	display:flex;align-items:center;justify-content:center;
	border:0;background:none;cursor:pointer;
	color:inherit;opacity:.65;
	transition:opacity .15s ease,transform .15s ease;
}
.bm-sw__add svg{width:18px;height:18px;display:block;}
.bm-sw__add svg path{fill:currentColor;}
.bm-sw__add:hover{opacity:1;transform:scale(1.08);}
.bm-sw__add.is-added{opacity:1;}
.bm-sw__add.is-added::after{
	content:'';position:absolute;inset:-5px;
	border:1px solid currentColor;border-radius:50%;
	opacity:.5;
}

/* --- account: tablet/phone navigation bar --------------------------------
   Figma replaces the grey sidebar with a strip under the header: the current
   section with a chevron on the left, Logout on the right. Below 1200 the
   sidebar is hidden and this takes over; above it, the bar is not rendered. */
.bm-acctbar{display:none;}
@media (max-width:1199px){
	.bm-acctbar{
		display:block;
		background:var(--bm-bg-soft);
		border-bottom:1px solid var(--bm-line-2);
	}
	.bm-acctbar__inner{
		position:relative;
		display:flex;align-items:center;justify-content:space-between;gap:16px;
		padding:16px var(--bm-gutter);
	}
	.bm-acctbar__current{
		display:inline-flex;align-items:center;gap:10px;
		border:0;background:none;padding:0;cursor:pointer;
		font:600 20px/26px var(--bm-font);
		color:var(--bm-black);
	}
	.bm-acctbar__current::after{
		content:'';width:10px;height:10px;
		border-right:2px solid currentColor;border-bottom:2px solid currentColor;
		transform:rotate(45deg) translate(-2px,-2px);
		transition:transform .15s ease;
	}
	.bm-acctbar__current[aria-expanded="true"]::after{
		transform:rotate(225deg) translate(-3px,-3px);
	}
	.bm-acctbar__out{
		font:400 16px/24px var(--bm-font);
		color:var(--bm-grey);text-decoration:none;
	}
	.bm-acctbar__out:hover{color:var(--bm-black);}
	.bm-acctbar__drop{
		display:none;
		position:absolute;left:var(--bm-gutter);top:calc(100% - 6px);
		min-width:240px;z-index:60;
		background:var(--bm-white);
		border:1px solid var(--bm-line-2);
		border-radius:var(--bm-r-sm);
		box-shadow:0 12px 28px rgba(0,0,0,.12);
		padding:8px 0;
	}
	.bm-acctbar.is-open .bm-acctbar__drop{display:block;}
	.bm-acctbar__drop a{
		display:block;padding:10px 20px;
		font:400 17px/24px var(--bm-font);
		color:var(--bm-black);text-decoration:none;
	}
	.bm-acctbar__drop a:hover{background:var(--bm-bg-soft);}
	.bm-acctbar__drop a.active{font-weight:600;}
	/* the sidebar and its grey ground are what the bar replaces */
	.user-account .two-col-grid__left{display:none;}
}

/* the bar is emitted inside `.two-col-grid`, so it lands in the sidebar cell
   unless it is told to span; and the sidebar it replaces is hidden by its own
   class, not by a page-level one */
@media (max-width:1199px){
	.bm-acctbar{
		grid-column:1/-1;
		margin:0 calc(var(--bm-gutter) * -1);
	}
	.two-col-grid__left{display:none!important;}
	.two-col-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* `.two-col-grid` is a flexbox despite the name, so the bar has to claim a full
   row rather than a grid column, or it becomes a 292px-wide sidebar of its own */
@media (max-width:1199px){
	.two-col-grid{flex-wrap:wrap!important;align-items:flex-start;}
	.bm-acctbar{flex:0 0 100%;width:100%;margin:0;align-self:flex-start;}
	.two-col-grid__right{flex:1 1 100%;width:100%;}
}

/* the strip is full-bleed in the mock; the gutter lives on its inner row */
@media (max-width:1199px){
	.bm-acctbar{
		margin-left:calc(var(--bm-gutter) * -1)!important;
		margin-right:calc(var(--bm-gutter) * -1)!important;
		width:auto!important;
	}
}

/* flex-basis:100% capped the right edge, so the negative margin only pulled the
   left one out; size it from the gutter instead */
@media (max-width:1199px){
	.bm-acctbar{
		flex:0 0 auto!important;
		width:calc(100% + var(--bm-gutter) * 2)!important;
	}
}

/* --- collection head: the collection's own photo -------------------------- */
.bm-plist__banner--shot{
	position:relative;
	min-height:525px;
	display:flex;align-items:flex-end;
	background:var(--bm-ink-2);
	overflow:hidden;
}
.bm-plist__shot{position:absolute;inset:0;z-index:0;}
.bm-plist__shot picture,
.bm-plist__shot img{display:block;width:100%;height:100%;object-fit:cover;}
/* keep the name and crumbs legible over any photo */
.bm-plist__banner--shot::after{
	content:'';position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.45) 100%);
}
.bm-plist__banner--shot > .bm-container{position:relative;z-index:2;width:100%;}
.bm-plist__banner--shot .bm-plist__name,
.bm-plist__banner--shot .bm-plist__crumbs,
.bm-plist__banner--shot .bm-plist__crumbs a{color:var(--bm-white);}
@media (max-width:1199px){.bm-plist__banner--shot{min-height:360px;}}
@media (max-width:767px){.bm-plist__banner--shot{min-height:240px;}}

/* --- project page: title row actions -------------------------------------- */
.bm-proj-titlerow{
	display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
}
.bm-proj-titlerow .bm-acct-title{margin-right:0;min-width:0;}
.bm-proj-actions{position:relative;display:flex;align-items:center;gap:14px;flex:none;padding-top:10px;}
.bm-proj-action{
	width:26px;height:26px;padding:0;line-height:0;
	border:0;background:none;cursor:pointer;color:var(--bm-ink-2);
}
.bm-proj-action svg{display:block;width:100%;height:100%;}
.bm-proj-action:hover{opacity:.65;}
.bm-proj-action.is-done{color:#1f7a3d;}
.bm-proj-menu{
	display:none;
	position:absolute;right:0;top:calc(100% + 8px);z-index:40;
	min-width:210px;
	background:var(--bm-white);
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-sm);
	box-shadow:0 12px 28px rgba(0,0,0,.12);
	padding:6px 0;
}
.bm-proj-actions.is-open .bm-proj-menu{display:block;}
.bm-proj-menu button{
	display:block;width:100%;text-align:left;
	padding:10px 18px;border:0;background:none;cursor:pointer;
	font:400 16px/22px var(--bm-font);color:var(--bm-black);
}
.bm-proj-menu button:hover{background:var(--bm-bg-soft);}

/* the mock keeps the per-colour tools visible in the tile corner, not behind a
   hover scrim — they are the only way to reach notes on a touch screen */
.bm-proj-color__tools{
	inset:auto 10px 10px auto;
	background:none;
	opacity:1;
	gap:10px;
}
.bm-proj-color__tools,
.bm-proj-color:hover .bm-proj-color__tools{opacity:1;}
.bm-proj-tool{width:20px;height:20px;opacity:.8;}
.bm-proj-tool:hover{opacity:1;}
.bm-proj-color.bm-sw--light .bm-proj-tool{color:var(--bm-ink-2);}
.bm-proj-color.bm-sw--dark .bm-proj-tool{color:var(--bm-white);}

/* the mock has no advantages strip inside the account */
.user-account .bm-advantages,
.user-account .advantages{display:none;}

/* the collection page shows no result count in the mock; family listings do */
.bm-plist:has(.bm-plist__banner--shot) .bm-plist__count{display:none;}

@media print{
	.bm-header,.bm-footer,.bm-acctbar,.two-col-grid__left,
	.bm-proj-actions,.bm-proj-add,.bm-advantages,.advantages,
	.c-notifier,.cart-modal{display:none!important;}
	.bm-proj-color__tools{display:none!important;}
	.bm-proj-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
	body{background:#fff;}
}

@media (max-width:767px){
	.bm-proj-titlerow{flex-direction:column;gap:10px;}
	.bm-proj-actions{padding-top:0;}
}

/* --- basket step 2: checkboxes and the billing block ---------------------- */
.cart-modal:not(.hidden) .order-form .line--check{margin:0 0 14px;}
.cart-modal:not(.hidden) .order-form .line--check label{
	display:flex;align-items:flex-start;gap:12px;cursor:pointer;
	font:400 15px/21px var(--bm-font);color:var(--bm-black);margin:0;
}
.cart-modal:not(.hidden) .order-form .line--check input[type=checkbox]{
	flex:none;width:20px;height:20px;margin:1px 0 0;
	accent-color:var(--bm-black);
}
.cart-modal:not(.hidden) .order-form h6{
	margin:22px 0 14px;
	font:600 22px/28px var(--bm-font);
	color:var(--bm-black);text-transform:none;
}
.cart-modal:not(.hidden) .order-form .line:first-child h6{margin-top:0;}
.cart-modal:not(.hidden) .order-form__billing.hidden{display:none;}

/* --- order page: Figma "Basket step 3" ------------------------------------ */
.order-page .order-table__header,
.order-page .order-product{
	display:grid;
	grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));
	gap:16px;align-items:center;
}
.order-page .order-table__header .cell p{
	margin:0;font:400 15px/21px var(--bm-font);color:var(--bm-grey);
}
.order-page .order-product{
	padding:18px 0;border-bottom:1px solid var(--bm-line-2);
}
.order-page .order-product .cell p{margin:0;font:400 16px/22px var(--bm-font);}
.order-page .order-product-info{
	display:flex;align-items:center;gap:0;
	background:var(--bm-bg-soft);border-radius:var(--bm-r-sm);overflow:hidden;
}
.order-page .order-product-info img{
	width:96px;height:96px;object-fit:contain;flex:none;position:relative;z-index:1;
}
.order-page .order-product-info > div{padding:12px 16px;min-width:0;}
.order-page .order-product-info a{color:inherit;text-decoration:none;font-weight:700;}
.order-page .order-product-info .color{
	margin:6px 0 0;padding:6px 10px;border-radius:4px;display:inline-block;
}
.order-page .order-product-info .color p{color:var(--bm-white);font-size:13px;line-height:17px;}
.order-page .order-table__total ul{list-style:none;margin:22px 0 0;padding:0;}
.order-page .order-table__total li{
	display:flex;align-items:baseline;justify-content:flex-end;gap:20px;margin:0 0 10px;
}
.order-page .order-table__total li b{font:500 20px/26px var(--bm-font);}
.order-page .order-table__total li.big b{font:700 28px/34px var(--bm-font);}
.order-page .order-table__total .price{font:700 40px/48px var(--bm-font);margin:0;}
.order-page .order-table__total .tax{font:400 16px/24px var(--bm-font);color:var(--bm-grey);margin:4px 0 0;text-align:right;}
.order-delivery__place span{margin-right:14px;}
.bm-paymethods{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0;}
.bm-paymethod{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:136px;padding:10px 18px;
	border:1px solid var(--bm-line);border-radius:var(--bm-r-pill);
	font:500 15px/21px var(--bm-font);color:var(--bm-black);background:var(--bm-white);
}
.bm-paymethod.is-selected{border-color:var(--bm-black);box-shadow:inset 0 0 0 1px var(--bm-black);}
/* the mock has no advantages strip on the order page */
.order-page ~ .bm-advantages,
.order-page ~ .advantages{display:none;}

@media (max-width:767px){
	.order-page .order-table__header{display:none;}
	.order-page .order-product{grid-template-columns:minmax(0,1fr);gap:8px;}
	.order-page .order-table__total .price{font-size:30px;line-height:36px;}
}

/* --- one step button, restored ------------------------------------------
   The legacy sheet hides `.btn:first-child`, `.btn:disabled` and
   `.btn--dark-grey`, which is exactly the "only the button for this step"
   behaviour — `handleCartStep` swaps those classes as you move between steps.
   An earlier `.cart-modal__btns .btn{display:inline-flex}` here overrode it and
   brought all of them back. Keep the display rule off that selector and restate
   the hide with enough specificity to win. */
.cart-modal:not(.hidden) .cart-modal__btns .btn:first-child,
.cart-modal:not(.hidden) .cart-modal__btns .btn:disabled,
.cart-modal:not(.hidden) .cart-modal__btns .btn--dark-grey{display:none!important;}

/* every field in the mock's form is full width, including the postcode */
.cart-modal:not(.hidden) .order-form input[type=text],
.cart-modal:not(.hidden) .order-form .postcode-field{width:100%;max-width:none;}

/* --- order page: line item ------------------------------------------------ */
.order-page .order-product-info > div{flex:1 1 auto;min-width:0;}
.order-page .order-product-info a{display:inline-block;}
.order-page .order-product--tinted .order-product-info{background:var(--bm-cart-color);}
.order-page .order-product--dark .order-product-info,
.order-page .order-product--dark .order-product-info a,
.order-page .order-product--dark .order-product-info p{color:var(--bm-white);}
.order-page .order-product--light .order-product-info,
.order-page .order-product--light .order-product-info a,
.order-page .order-product--light .order-product-info p{color:var(--bm-ink-2);}
/* the colour already fills the block, so the chip inside it is redundant */
.order-page .order-product--tinted .order-product-info .color{
	background:none!important;padding:0;margin:4px 0 0;
}
.order-page .order-product--tinted .order-product-info .color p{
	color:inherit;display:inline;margin-right:6px;
}
/* the legacy sheet keeps this wrapper hidden until its payment JS runs */
.order-page .payment-methods{display:flex!important;}

/* the legacy sheet sizes these cells in percentages (40/15/15…), which inside a
   grid track collapses the product column; the grid owns the widths now */
.order-page .order-table .cell{width:auto!important;display:block;}
.order-page .order-product-info{width:100%!important;display:flex!important;}
.order-page .order-product-info img{max-width:none!important;max-height:none!important;}
.order-page .order-product--dark .order-product-info *{color:var(--bm-white)!important;}
.order-page .order-product--light .order-product-info *{color:var(--bm-ink-2)!important;}

/* ==========================================================================
   COLOUR PICKER — Figma "Paint>Color wizard" / "Paint>Buy color sample"
   Full-screen search: field, two dropdowns, labelled swatch grid, pager.
   Every hook the bundle needs (.js-color-cell, .js-color-cat, .scroll-container,
   .js-set-product-color) is preserved; this is presentation only.
   ========================================================================== */
#product-colors-modal .modal-dialog{max-width:none;margin:0;height:100%;}
#product-colors-modal .modal-content{
	border:0;border-radius:0;min-height:100%;background:var(--bm-white);
}
#product-colors-modal .wrapper--modal{
	max-width:none;padding:0 var(--bm-gutter) 40px;
}
#product-colors-modal .modal-header{
	border:0;padding:34px 0 22px;
}
#product-colors-modal .modal-title{
	font:500 32px/38px var(--bm-font);color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
#product-colors-modal .close{
	position:absolute;top:26px;right:var(--bm-gutter);
	width:34px;height:34px;opacity:1;border:0;background:none;cursor:pointer;
	font-size:0;
}
#product-colors-modal .close::before,
#product-colors-modal .close::after{
	content:'';position:absolute;left:4px;top:16px;width:26px;height:2px;
	background:var(--bm-black);
}
#product-colors-modal .close::before{transform:rotate(45deg);}
#product-colors-modal .close::after{transform:rotate(-45deg);}

.bm-cw{display:block;margin:0 0 26px;}
.bm-cw__cats{display:none;}
.bm-cw__search{
	display:flex;align-items:center;gap:12px;
	max-width:420px;margin:0;padding:0 0 10px;
	border-bottom:1px solid var(--bm-line);
}
.bm-cw__search input{
	flex:1 1 auto;border:0;background:none;outline:none;
	font:400 17px/24px var(--bm-font);
}
.bm-cw__filters{
	display:flex;align-items:flex-end;gap:44px;flex-wrap:wrap;
	margin:0 0 30px;
}
.bm-cw__field{display:block;flex:1 1 320px;min-width:0;}
.bm-cw__label{
	display:block;margin:0 0 8px;
	font:600 20px/26px var(--bm-font);color:var(--bm-black);
}
.bm-cw__field select{
	width:100%;
	border:0;border-bottom:1px solid var(--bm-line);
	border-radius:0;background:none;
	padding:0 24px 10px 0;
	font:400 17px/24px var(--bm-font);color:var(--bm-black);
	appearance:none;-webkit-appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%232D2D2D' stroke-width='1.6'/></svg>");
	background-repeat:no-repeat;background-position:right 2px center;background-size:16px;
}
.bm-cw__clear{
	flex:none;border:0;background:none;cursor:pointer;padding:0 0 10px;
	font:400 16px/24px var(--bm-font);color:var(--bm-ink-2);
	text-decoration:underline;
}
.bm-cw__clear:hover{opacity:.65;}

/* the swatch grid replaces the old scroller + preview panel */
#product-colors-modal .choice-container{display:block;}
#product-colors-modal .choice{width:auto;}
#product-colors-modal .scroll-wrapper{max-height:none;overflow:visible;}
#product-colors-modal .scroll-container{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:8px;
}
#product-colors-modal .result{display:none;}
#product-colors-modal .color-cell{
	position:relative;
	display:flex;flex-direction:column;justify-content:space-between;
	width:auto;height:118px;margin:0;border-radius:0;
	padding:14px 16px;box-sizing:border-box;
	text-decoration:none;
	transition:transform .14s ease,box-shadow .14s ease;
}
#product-colors-modal .color-cell.is-hidden{display:none;}
#product-colors-modal .color-cell:hover{
	transform:scale(1.06);z-index:3;
	box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.color-cell__name{font:600 14px/18px var(--bm-font);}
.color-cell__code{font:400 14px/18px var(--bm-font);}
.color-cell--light .color-cell__name,
.color-cell--light .color-cell__code{color:var(--bm-ink-2);}
.color-cell--dark .color-cell__name,
.color-cell--dark .color-cell__code{color:var(--bm-white);}

.bm-cw__foot{
	display:flex;align-items:center;justify-content:space-between;gap:20px;
	margin:26px 0 0;
}
.bm-cw__count{font:400 16px/24px var(--bm-font);color:var(--bm-ink-2);}
.bm-cw__pager{display:flex;align-items:center;gap:4px;}
.bm-cw__page{
	min-width:28px;height:28px;padding:0 6px;
	border:0;background:none;cursor:pointer;
	font:400 16px/28px var(--bm-font);color:var(--bm-black);
}
.bm-cw__page.is-current{background:var(--bm-black);color:var(--bm-white);}
.bm-cw__page:disabled{opacity:.3;cursor:default;}

@media (max-width:1199px){
	#product-colors-modal .scroll-container{grid-template-columns:repeat(4,minmax(0,1fr));}
	#product-colors-modal .modal-title{font-size:26px;line-height:32px;}
	.bm-cw__filters{gap:24px;}
}
@media (max-width:767px){
	#product-colors-modal .scroll-container{grid-template-columns:repeat(2,minmax(0,1fr));}
	#product-colors-modal .color-cell{height:104px;padding:12px 14px;}
	.bm-cw__filters{flex-direction:column;align-items:stretch;gap:18px;}
	.bm-cw__clear{align-self:flex-start;padding-bottom:0;}
	.bm-cw__foot{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* the legacy grid flows in columns (7 fixed rows, auto columns, sideways
   scroll); the mock is a plain row-flow grid, so those have to be undone */
#product-colors-modal .scroll-container{
	grid-auto-flow:row!important;
	grid-template-rows:none!important;
	grid-auto-columns:auto!important;
	grid-template-columns:repeat(6,minmax(0,1fr))!important;
	grid-gap:8px!important;
	height:auto!important;
	overflow:visible!important;
	padding-bottom:0!important;
}
#product-colors-modal .color-cell{height:118px!important;}
/* `.checkbox-wrapper` reserves room for a radio tick this field does not have */
.bm-cw__search{padding-left:0!important;line-height:normal;}
.bm-cw__search .icon--search-input{position:static;flex:none;}
#product-colors-modal .bm-cw__field select.modal-select{width:100%!important;margin:0;}
#product-colors-modal .bm-cw__filters{flex-wrap:nowrap;}
@media (max-width:1199px){
	#product-colors-modal .scroll-container{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
	#product-colors-modal .bm-cw__filters{flex-wrap:wrap;}
}
@media (max-width:767px){
	#product-colors-modal .scroll-container{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
	#product-colors-modal .color-cell{height:104px!important;}
}

/* `.modal-dialog-centered` vertically centres the dialog, which pushes the
   header above the viewport once the grid is taller than the screen */
#product-colors-modal{overflow-y:auto;}
#product-colors-modal .modal-dialog-centered{
	align-items:flex-start!important;
	min-height:0!important;
}

/* the bundle shows only the "choosed" select; the mock keeps both live */
#product-colors-modal .bm-cw__field select.custom-select{
	display:block!important;visibility:visible!important;
}
.bm-cw__label{white-space:nowrap;}
.bm-cw__field{flex:1 1 320px;max-width:420px;}

/* --- featured colour, Figma "Color by Family" ----------------------------- */
.bm-feat{
	display:grid;
	grid-template-columns:minmax(0,62%) minmax(0,38%);
	min-height:340px;
	font-family:var(--bm-font);
}
.bm-feat__shot{position:relative;overflow:hidden;background:var(--bm-line-2);}
.bm-feat__shot picture,
.bm-feat__shot img{display:block;width:100%;height:100%;object-fit:cover;}
.bm-feat__over{
	position:absolute;inset:auto 0 0 0;
	display:flex;flex-direction:column;align-items:flex-start;gap:2px;
	padding:0 0 34px var(--bm-gutter);
	color:var(--bm-white);
	text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.bm-feat__kicker{
	font:400 40px/48px var(--bm-font-display);
	margin:0 0 6px;
}
.bm-feat__over .bm-feat__name{font:600 16px/22px var(--bm-font);}
.bm-feat__over .bm-feat__code{font:400 16px/22px var(--bm-font);margin:0 0 14px;}
.bm-feat__over .bm-btn{
	margin-top:6px;text-shadow:none;
	background:var(--bm-white);border-color:var(--bm-white);color:var(--bm-ink-2);
}
.bm-feat__side{
	display:flex;flex-direction:column;justify-content:flex-end;
	padding:34px 40px;
	color:var(--bm-white);
}
.bm-feat__side--light{color:var(--bm-ink-2);}
.bm-feat__side .bm-feat__name{font:600 16px/22px var(--bm-font);}
.bm-feat__side .bm-feat__code{font:400 16px/22px var(--bm-font);}
.bm-feat__text{margin:8px 0 0;font:400 16px/24px var(--bm-font);max-width:340px;}

@media (max-width:1199px){
	.bm-feat{min-height:250px;}
	.bm-feat__kicker{font-size:30px;line-height:36px;}
	.bm-feat__side{padding:24px 27px;}
}
@media (max-width:767px){
	.bm-feat{grid-template-columns:minmax(0,1fr);}
	.bm-feat__shot{min-height:260px;}
	.bm-feat__over{padding-left:27px;padding-bottom:26px;}
}

/* ==========================================================================
   REVIEW FIXES — 2026-08-12
   ========================================================================== */

/* --- home: collection preview swatches ------------------------------------
   The add-to-project control is only meaningful with a session; ue.js hides it
   for guests, this is the belt-and-braces half so it never flashes in. */
body:not(.is-signed-in) .bm-swatches .bm-sw__add{display:none;}

/* on a phone the preview strip sits on the photo, with no seam between the
   shot and the copy below it */
@media (max-width:767px){
	.bm-collections__shot{margin-bottom:0;}
	.bm-swatches{
		margin-top:-112px;
		position:relative;
		z-index:2;
		padding-bottom:0;
	}
	.bm-collections__copy{margin-top:0;padding-top:26px;}
}

/* --- home: Color Samples — the jar overhangs the photo --------------------
   It must break the shot's right edge and stand a little taller than it, as in
   the mock; `width`/`left` are percentages of the media block, so nudging them
   keeps the jar's own aspect ratio intact. */
.bm-promo__media{position:relative;overflow:visible;}
.bm-promo__shot{overflow:visible;}
.bm-promo__jar{
	left:60%;
	top:-19%;
	width:50%;
}

/* --- home: advantages, last icon centred on a phone ----------------------- */
@media (max-width:767px){
	.bm-advantages__grid > *:last-child:nth-child(odd){
		grid-column:1/-1;
		justify-self:center;
	}
}

/* --- catalogue: card ------------------------------------------------------ */
.bm-pcard{
	border:1px solid transparent;
	border-radius:var(--bm-r-sm);
	transition:border-color .18s ease,box-shadow .18s ease;
}
.bm-pcard__body{
	display:flex;flex-direction:column;
	padding:0 18px 18px;
}
.bm-pcard__media{margin-bottom:16px;}
/* the mock outlines the whole card on hover; nothing else moves */
.bm-pcard:hover{
	border-color:var(--bm-teal);
	box-shadow:0 8px 22px rgba(0,0,0,.07);
}
.bm-pcard:hover .bm-pcard__media{box-shadow:none;}
.bm-pcard:hover .bm-pcard__media img{transform:none;}
.bm-pcard:hover .bm-pcard__name{color:var(--bm-black);}

/* --- catalogue: filter column and the row above the grid ------------------ */
.catalog .search-categories{border:0;}
.catalog .search-categories .object,
.catalog .search-categories .wrapper-dropdown{border:0;}
.catalog .catalog-content-top-line{border:0;padding-bottom:18px;}
.catalog .catalog-content{padding-top:8px;}
.catalog-full-list{margin-top:18px;}
/* the left column was flush against the page edge */
.catalog .search-categories{padding-right:32px;}

/* --- product page: cart panel and the page behind it ---------------------- */
/* While a panel is open the header stays white and pinned, so scrolling the
   page behind it cannot carry it off and strand the panel mid-screen. Off that
   state the header keeps whatever the page gave it — on the home page it is
   transparent over the hero, and repainting it white hid the logo and nav. */
.page-content.with-modal::after{z-index:120;}
.cart-modal:not(.hidden){z-index:130;}
body.bm-modal-open .bm-header,
body.bm-modal-open .header,
body.bm-modal-open #header{
	position:fixed;top:0;left:0;right:0;
	z-index:140;
	background:var(--bm-white);
}
/* on the home page the header is the `--overlay` variant: white wordmark and
   white type for the hero. Against the pinned white bar it has to fall back to
   the ordinary dark treatment. */
body.bm-modal-open .bm-header--overlay .bm-header__logo{
	background-image:url('/assets/main-logo-black-e3f6f2a1b4ef331efd39463ac93b5ac4b5ea70c576631b5448937e8007e4dddd.svg');
}
body.bm-modal-open .bm-header--overlay .bm-nav__link,
body.bm-modal-open .bm-header--overlay .bm-tool,
body.bm-modal-open .bm-header--overlay .bm-lang{color:var(--bm-ink-2);}
body.bm-modal-open .bm-header--overlay .bm-burger span,
body.bm-modal-open .bm-header--overlay .bm-burger span:before,
body.bm-modal-open .bm-header--overlay .bm-burger span:after{background:var(--bm-ink-2);}

/* the body had a second helping of the panel's own padding */
.cart-modal:not(.hidden) .cart-content__body{padding:0;}

/* the sticky button bar covered the last checkbox of step 2 */
.cart-modal:not(.hidden) .order-form__body{padding-bottom:18px;}
.cart-modal:not(.hidden) .order-step-2{
	display:flex;flex-direction:column;height:100%;
}
.cart-modal:not(.hidden) .order-step-2 .order-form{
	flex:1 1 auto;min-height:0;overflow:auto;
}

/* --- text pages: no 900px measure ---------------------------------------- */
.text-page-content > *{max-width:none;}

/* --- account: colour tile tools, always visible, bottom right ------------- */
.bm-proj-color__tools{
	position:absolute;
	inset:auto 10px 10px auto!important;
	display:flex;align-items:center;justify-content:flex-end;
	background:none!important;
	opacity:1!important;
	gap:10px;
}

/* --- account: notes ------------------------------------------------------- */
.bm-proj-note{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	gap:0 20px;
	align-items:center;
	padding:18px 0;
	border-bottom:1px solid var(--bm-line-2);
}
.bm-proj-note:last-child{border-bottom:0;}
.bm-proj-note__tools{display:flex;align-items:center;gap:14px;}

/* the pill rail and the filter column both carried a hairline the mock has not */
.catalog .paint-line-container--catalog{border-bottom:0;}
.catalog .search-categories,
.catalog .search-categories > *,
.catalog .catalog-content .search-categories{border-right:0!important;border-left:0!important;}
.catalog .search-categories .object{border-bottom:0;}

/* --- mobile drawer: it was white type on a white sheet -------------------- */
@media (max-width:1199px){
	.bm-drawer{
		background:var(--bm-white);
		border:1px solid var(--bm-line-2);
		border-radius:var(--bm-r-sm);
		box-shadow:0 14px 34px rgba(0,0,0,.12);
		padding:10px 0;
		columns:auto;
	}
	.bm-drawer__link,
	.bm-drawer__list a,
	.bm-drawer a{color:var(--bm-black)!important;}
	.bm-drawer__link{border-bottom:0;padding:10px 20px;display:block;}
	.bm-drawer__link:hover{background:var(--bm-bg-soft);}
}

/* --- catalogue: the filter button rides the category row on a phone -------- */
@media (max-width:767px){
	.catalog .inline-wrapper{
		display:flex;align-items:center;gap:12px;
	}
	.catalog .inline-wrapper .show-filter-btn{
		display:inline-flex!important;align-items:center;gap:8px;
		flex:none;white-space:nowrap;
		font:400 16px/20px var(--bm-font);color:var(--bm-black);
		text-decoration:none;
	}
	.catalog .inline-wrapper .paint-line{flex:1 1 auto;min-width:0;}
}

/* --- product page: mobile ------------------------------------------------- */
@media (max-width:767px){
	.product-calculator__tares .tare{
		display:grid;
		grid-template-columns:minmax(0,1fr) auto;
		align-items:center;
		gap:4px 12px;
	}
	.product-calculator__tares .tare .volume{grid-column:1;white-space:normal;}
	.product-calculator__tares .tare .price{grid-column:1;}
	.product-calculator__tares .tare .quantity{
		grid-column:2;grid-row:1/3;justify-self:end;
	}
	/* the details block ran edge to edge and picked up a grey ground the desktop
	   version does not have */
	.product-details.bordered,
	.bm-pdetails{
		padding-left:var(--bm-gutter);
		padding-right:var(--bm-gutter);
		background:transparent;
	}
}

/* --- login panel: same treatment as the cart, header stays white ---------- */
.login-form.visible{
	top:var(--bm-header-h);
	height:calc(100% - var(--bm-header-h));
	z-index:135;
	background:var(--bm-bg-soft);
}
.login-form.visible .wrapper,
.login-form.visible .login-form__inner{padding:28px 24px;}
.login-form.visible h5,
.login-form.visible h6{
	font:400 32px/38px var(--bm-font-display);
	color:var(--bm-black);text-transform:none;letter-spacing:0;
	margin:0 0 18px;
}
.login-form.visible input[type=text],
.login-form.visible input[type=email],
.login-form.visible input[type=password]{
	width:100%;box-sizing:border-box;
	padding:12px 16px;margin:0 0 14px;
	border:1px solid var(--bm-line);border-radius:var(--bm-r-md);
	background:var(--bm-white);
	font:400 16px/22px var(--bm-font);
}
.login-form.visible .btn{
	border-radius:var(--bm-r-pill);
	background:var(--bm-black);border-color:var(--bm-black);color:var(--bm-white);
	padding:13px 30px;font:500 18px/24px var(--bm-font);
}

/* --- footer: the brand is set in the display face in the mock ------------- */
.bm-footer__brand{
	font:400 28px/32px var(--bm-font-display);
	letter-spacing:0;
	text-transform:none;
}
@media (max-width:767px){.bm-footer__brand{font-size:24px;line-height:28px;}}

/* --- account: "How to Use Projects" carries a question mark --------------- */
.bm-acct-help{display:inline-flex;align-items:center;gap:8px;}
.bm-acct-help::before{
	content:'';
	width:20px;height:20px;flex:none;
	border-radius:50%;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='none' stroke='black' stroke-width='1.6'/><path d='M7.6 7.6a2.4 2.4 0 1 1 3 2.3c-.5.2-.8.6-.8 1.1v.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='10' cy='14.4' r='.9' fill='black'/></svg>") no-repeat center/20px 20px;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='none' stroke='black' stroke-width='1.6'/><path d='M7.6 7.6a2.4 2.4 0 1 1 3 2.3c-.5.2-.8.6-.8 1.1v.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='10' cy='14.4' r='.9' fill='black'/></svg>") no-repeat center/20px 20px;
}

/* --- basket panel: make the long lists actually scroll ---------------------
   The panel is a fixed-height sheet, but nothing between it and the step
   content was told to bound its height, so a basket with more than a couple of
   lines — and the whole step-2 form — simply overflowed out of view. Constrain
   the chain: panel → products wrapper → step → scrolling region. */
.cart-modal:not(.hidden){
	display:flex;
	flex-direction:column;
	overflow:hidden;
}
.cart-modal:not(.hidden) .js-cart-modal__products{
	flex:1 1 auto;
	min-height:0;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
.cart-modal:not(.hidden) .order-step{
	flex:1 1 auto;
	min-height:0;
}
.cart-modal:not(.hidden) .order-step:not(.current){display:none;}
.cart-modal:not(.hidden) .order-step-1,
.cart-modal:not(.hidden) .order-step-2{
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:0;
}
.cart-modal:not(.hidden) .order-step-1 .order-wrapper,
.cart-modal:not(.hidden) .order-step-2 .order-form{
	flex:1 1 auto;
	min-height:0;
	height:auto;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	padding-bottom:8px;
}
/* the promo/total block stays put under the scrolling list */
.cart-modal:not(.hidden) .cart-content__footer{flex:none;}
.cart-modal:not(.hidden) .cart-modal__btns{flex:none;position:static;}

/* ==========================================================================
   REVIEW FIXES — round 2
   ========================================================================== */

/* --- buttons: the legacy sheet repaints every <a> on hover ----------------
   `a:hover{color:#2D2D2D}` outranks `.bm-btn--black{color:#fff}`, so the label
   of any link-button turned dark grey on its own dark ground and read as
   disabled. Pin the colour per variant for the hover state too. */
a.bm-btn:hover,
a.bm-btn:focus,
.bm-btn--black:hover,
a.bm-btn--black:hover{color:#fff;}
a.bm-btn--white:hover,
a.bm-btn--onlight:hover{color:var(--bm-ink-2);}
.bm-btn:hover{opacity:.88;}
#buy-paint{position:relative;z-index:2;}

/* --- header while the mobile menu is open --------------------------------- */
body.bm-modal-open .bm-header--overlay{background:var(--bm-white);}

/* --- product page: the tare stepper was clipped on a phone ----------------
   The `auto` track collapsed to the width of one control, so minus/value/plus
   ran off the right edge. Give the stepper a floor and let the name shrink. */
@media (max-width:767px){
	.product-calculator__tares .tare{
		grid-template-columns:minmax(0,1fr) 124px;
	}
	.product-calculator__tares .tare .quantity{
		min-width:124px;
		display:flex;align-items:center;justify-content:space-between;gap:6px;
		position:static;
	}
	.product-calculator__tares .tare .quantity > *{flex:none;}
	.product-calculator__tares .tare .quantity input{
		width:38px;text-align:center;min-width:0;
	}
}

/* --- project colour tiles: tools on hover, centred ------------------------ */
.bm-proj-color__tools{
	position:absolute;
	inset:0!important;
	display:flex;align-items:center;justify-content:center;
	gap:12px;
	background:rgba(0,0,0,.28)!important;
	opacity:0!important;
	transition:opacity .15s ease;
}
.bm-proj-color:hover .bm-proj-color__tools,
.bm-proj-color__tools:focus-within{opacity:1!important;}
.bm-proj-tool{width:24px;height:24px;color:var(--bm-white)!important;opacity:1;}
.bm-proj-tool:hover{opacity:.75;}
/* touch screens have no hover — keep them reachable there */
@media (hover:none){
	.bm-proj-color__tools{opacity:1!important;background:rgba(0,0,0,.18)!important;}
}

/* --- "Questions?" panel — Figma "Basket step 3" / Projects ----------------- */
.contact-us-section{
	font-family:var(--bm-font);
	text-align:center;
	padding:78px var(--bm-gutter) 96px;
}
.contact-us-section h6{
	margin:0 0 14px;
	font:600 24px/30px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.contact-us-section .link,
.contact-us-section p{
	margin:0 auto;
	max-width:640px;
	font:400 20px/28px var(--bm-font);
	color:var(--bm-black);
}
.contact-us-section a{
	color:var(--bm-black);
	text-decoration:underline;
	text-underline-offset:3px;
}
.contact-us-section a:hover{opacity:.7;}
@media (max-width:767px){
	.contact-us-section{padding:52px var(--bm-gutter) 62px;}
	.contact-us-section h6{font-size:20px;line-height:26px;}
	.contact-us-section .link,
	.contact-us-section p{font-size:17px;line-height:24px;}
}

/* --- Color>Paint wizard — Figma "Color_Paint wizard" ---------------------- */
.bm-wizard{
	position:fixed;top:var(--bm-header-h);right:0;bottom:0;
	width:min(760px,100%);
	background:var(--bm-white);
	z-index:135;
	overflow-y:auto;
	box-shadow:-18px 0 40px rgba(0,0,0,.12);
	font-family:var(--bm-font);
}
.bm-wizard.hidden{display:none;}
.bm-wizard__close{
	position:absolute;top:18px;right:24px;
	width:34px;height:34px;border:0;background:none;cursor:pointer;
	font:300 32px/1 var(--bm-font);color:var(--bm-ink-2);
}
.bm-wizard__close:hover{opacity:.6;}
.bm-wizard__inner{padding:34px 40px 48px;}
.bm-wizard__title{
	margin:0 0 26px;
	font:600 32px/38px var(--bm-font);color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-wizard__color{
	display:flex;flex-direction:column;justify-content:space-between;
	width:260px;height:140px;
	padding:16px 18px;margin:0 0 34px;
	color:var(--bm-white);
}
.bm-wizard__color--light{color:var(--bm-ink-2);}
.bm-wizard__cname{font:600 15px/20px var(--bm-font);}
.bm-wizard__ccode{font:400 15px/20px var(--bm-font);}
.bm-wizard__field{margin:0 0 30px;max-width:520px;}
.bm-wizard__label{
	display:block;margin:0 0 8px;
	font:600 20px/26px var(--bm-font);color:var(--bm-black);
}
.bm-wizard__select{
	width:100%;
	border:0;border-bottom:1px solid var(--bm-line);border-radius:0;
	background:none;padding:0 24px 10px 0;
	font:400 17px/24px var(--bm-font);color:var(--bm-black);
	appearance:none;-webkit-appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%232D2D2D' stroke-width='1.6'/></svg>");
	background-repeat:no-repeat;background-position:right 2px center;background-size:16px;
}
.bm-wizard__sub{
	margin:0 0 18px;
	font:600 22px/28px var(--bm-font);color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-wizard__grid{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.bm-wizard__card{
	display:grid;grid-template-columns:110px minmax(0,1fr);
	gap:0 14px;align-items:center;
	border:1px solid var(--bm-line-2);border-radius:var(--bm-r-sm);
	text-decoration:none;color:var(--bm-black);
	transition:border-color .18s ease;
	overflow:hidden;
}
.bm-wizard__card.is-hidden{display:none;}
.bm-wizard__card:hover{border-color:#CEDFE4;}
.bm-wizard__shot{
	display:flex;align-items:center;justify-content:center;
	height:118px;background:var(--bm-bg-soft);
}
.bm-wizard__shot img{max-width:82px;max-height:98px;width:auto;height:auto;object-fit:contain;}
.bm-wizard__meta{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 0;}
.bm-wizard__pname{font:600 15px/20px var(--bm-font);}
.bm-wizard__part{font:400 14px/19px var(--bm-font);color:var(--bm-grey);}
.bm-wizard__price{font:700 20px/26px var(--bm-font);margin-top:6px;}

@media (max-width:1199px){
	.bm-wizard{width:100%;}
	.bm-wizard__inner{padding:28px var(--bm-gutter) 40px;}
}
@media (max-width:767px){
	.bm-wizard__grid{grid-template-columns:minmax(0,1fr);}
	.bm-wizard__title{font-size:26px;line-height:32px;}
	.bm-wizard__color{width:100%;}
}
.bm-wizard__pack{font:400 14px/19px var(--bm-font);color:var(--bm-grey);}

/* ==========================================================================
   DESIGNER REVIEW 2026-08-18 — "Moore Правки" (comments #1–#55)
   One consolidated pass; each cluster is tagged with the comment numbers.
   ========================================================================== */

/* #1 — logo text on the same optical line as the nav and icons */
.bm-header__logo{margin-top:-6px;}

/* #19 #25 — a barely-there hairline under every white header; the transparent
   home header keeps none until a modal pins it white */
.bm-header{box-shadow:inset 0 -1px 0 rgba(29,38,47,.08);}
.bm-header--overlay{box-shadow:none;}
body.bm-modal-open .bm-header,
body.bm-modal-open .bm-header--overlay{box-shadow:inset 0 -1px 0 rgba(29,38,47,.08);}

/* #2 #6 — rails end at the screen edge: the last card is cut by the viewport,
   not by a white gutter */
.bm-rail{
	width:calc(100% + var(--bm-gutter));
	margin-right:calc(-1*var(--bm-gutter));
	padding-right:var(--bm-gutter);
}
/* #3 — mouse dragging (ue.js adds .is-dragging while the pointer is down) */
@media (hover:hover) and (pointer:fine){
	.bm-rail{cursor:grab;}
	.bm-rail.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none;}
	.bm-rail.is-dragging .bm-card{pointer-events:none;}
}

/* #4 — the area under the collection photo sits on F7F7F7, and its height is
   pinned so switching collections never moves the blocks below */
.bm-collections__main{background:#F7F7F7;}
.bm-collections__copy{min-height:310px;}
@media (max-width:1199px){ .bm-collections__copy{min-height:280px;} }
@media (max-width:767px){ .bm-collections__copy{min-height:0;} }

/* #5 — name / code / add-to-list of the photo's colour, top right on the shot */
.bm-shotcolor{
	position:absolute;top:26px;right:34px;z-index:2;
	display:flex;flex-direction:column;align-items:flex-end;gap:2px;
	text-align:right;color:var(--bm-white);
	text-shadow:0 1px 8px rgba(0,0,0,.18);
}
.bm-shotcolor__name{
	font:500 22px/28px var(--bm-font);
	color:var(--bm-white);text-decoration:none;
}
.bm-shotcolor__name:hover,
.bm-shotcolor__name:focus{color:var(--bm-white);text-decoration:none;opacity:.85;}
.bm-shotcolor__code{font:400 14px/18px var(--bm-font);opacity:.95;}
.bm-shotcolor .bm-sw__add{
	position:static;margin-top:6px;
	opacity:1;color:var(--bm-white);
	width:24px;height:24px;
}
.bm-shotcolor .bm-sw__add svg{width:22px;height:22px;}
@media (max-width:767px){
	.bm-shotcolor{top:16px;right:16px;}
	.bm-shotcolor__name{font-size:18px;line-height:23px;}
}

/* #7 — the delivery truck reads smaller than its neighbours; scale it up */
.bm-advantages__item:nth-child(4) .bm-advantages__icon svg{
	transform:scale(1.18);transform-origin:center;
}

/* #8 — footer typography per the reference: lighter, tighter, the wordmark on
   two lines, narrower column gaps */
.bm-footer__brand{max-width:230px;}
.bm-footer__tagline{font:300 15px/24px var(--bm-font);}
.bm-footer__contacts p,
.bm-footer__contacts div{font:300 15px/24px var(--bm-font);}
.bm-footer__contacts p{margin-bottom:12px;}
.bm-footer__links a{font:300 15px/26px var(--bm-font);}
.bm-footer__links li{margin:0 0 2px;}
@media (min-width:1200px){
	.bm-footer__grid{column-gap:56px;}
}

/* #9 #10 — the Google badge keeps its pill (border + soft fill, as in the
   mock); only the Verified Reviews picture is frameless. The left slot is the
   `reviews_widget` editable region (Elfsight replaces the placeholder). */
.bm-footer__ratings .bm-rating,
.bm-footer__ratings a.bm-rating{
	border:1px solid rgba(255,255,255,.28);
	border-radius:12px;
	background:rgba(255,255,255,.06);
	padding:12px 20px;
}
.bm-footer__ratings a.bm-rating:hover{border-color:rgba(255,255,255,.55);}
.bm-rating--widget{display:flex;align-items:center;gap:10px;}
.bm-footer__ratings .bm-rating--av,
.bm-footer__ratings a.bm-rating--av{border:0;background:none;padding:0;}

/* colour cards everywhere — the add-to-list control shows on hover only where
   a mouse exists; touch keeps it always on (board note + #14 #17) */
@media (hover:hover) and (pointer:fine){
	.bm-sw .bm-sw__add,
	.bm-swatch .bm-sw__add,
	.bm-cchip .bm-sw__add{opacity:0;}
	.bm-sw:hover .bm-sw__add,
	.bm-swatch:hover .bm-sw__add,
	.bm-cchip:hover .bm-cchip .bm-sw__add,
	.bm-cchip:hover .bm-sw__add{opacity:1;}
}
.bm-sw__add svg{width:20px;height:20px;}

/* #12 — family banner: a NARROW solid band in the family's colour, never a
   photo (collections keep their photo hero) */
.bm-plist__banner--family{min-height:212px;}
.bm-plist__banner--family .bm-plist__shot{display:none;}
@media (max-width:767px){
	.bm-plist__banner--family{min-height:150px;}
}

/* #16 — colour hero: the text block was glued to the band's bottom edge */
.bm-color__hero .bm-container{padding-bottom:42px;}
.bm-color__meta{margin-bottom:6px;}

/* #15 — optional interior photo on the right of the band, rounded, hanging
   over the lower edge (renders only when colors.photo is set) */
.bm-color__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;}
.bm-color__grid > div:first-child{grid-column:1;}
.bm-color__shot{
	grid-column:2;
	position:relative;z-index:2;
	margin-bottom:-96px;
	border-radius:var(--bm-r-md);
	overflow:hidden;
	justify-self:end;
	width:min(100%,686px);
}
.bm-color__shot img{display:block;width:100%;height:auto;}
@media (max-width:1199px){
	.bm-color__shot{margin-bottom:-60px;}
}
@media (max-width:767px){
	.bm-color__grid{grid-template-columns:minmax(0,1fr);}
	.bm-color__shot{grid-column:1;margin:18px 0 -48px;width:100%;}
}

/* #17 — no grey strip behind the CTAs; the icon button joins the row */
.bm-color__actions{background:none;}
.bm-color__actions .bm-container{background:none;}
.bm-color__addlist{
	display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;padding:0;
	border:0;background:none;cursor:pointer;
	color:var(--bm-ink-2);
}
.bm-color__addlist svg{width:24px;height:24px;display:block;}
.bm-color__addlist:hover{opacity:.65;}
.bm-color__addlist.is-added{color:var(--bm-black);}

/* #18 — the colour band wraps every tile: padding instead of clipping, on
   Other Shades and Similar Colors alike */
.bm-cstrip__band{padding:22px 24px;}
.bm-cstrip__band > .bm-cchip{flex:0 0 262px;}

/* #26 — catalogue category pills: smaller, denser, packed to the left */
.catalog .paint-line{justify-content:flex-start;gap:8px 10px;}
.catalog .paint-line__item a{
	padding:5px 16px;
	font:400 14px/18px var(--bm-font);
	border-radius:6px;
}

/* #27 — filter sidebar: calmer type, rounded checkboxes */
.catalog .search-categories .name,
.catalog .search-categories h6{font:500 20px/26px var(--bm-font);}
.catalog .search-categories label,
.catalog .search-categories .checkbox-wrapper{
	font:300 15px/22px var(--bm-font);
	color:var(--bm-ink-2);
}
.catalog .search-categories input[type=checkbox]{
	appearance:none;-webkit-appearance:none;
	width:18px;height:18px;flex:0 0 18px;
	border:1px solid #C6C6C6;border-radius:5px;
	background:var(--bm-white);
	display:inline-grid;place-content:center;
	vertical-align:-4px;margin:0 8px 0 0;
	cursor:pointer;
}
.catalog .search-categories input[type=checkbox]:checked{
	background:var(--bm-ink-2);border-color:var(--bm-ink-2);
}
.catalog .search-categories input[type=checkbox]:checked::before{
	content:'';width:10px;height:8px;
	background:var(--bm-white);
	clip-path:polygon(14% 44%,0 62%,40% 100%,100% 16%,84% 2%,38% 70%);
}

/* #29 — product cards: code and volume in light grey */
.bm-pcard__art{color:var(--bm-grey);}
.bm-pcard__pack{color:var(--bm-grey);}

/* #30 — card hover: thicker light blue-grey outline, no shadow */
.bm-pcard{border:2px solid transparent;border-radius:var(--bm-r-sm);}
.bm-pcard:hover{
	border-color:#CEDFE4;
	box-shadow:none;
}

/* #21 — accessories are shot on white; their media box follows */
.bm-pcard--white .bm-pcard__media{background:var(--bm-white);border:1px solid var(--bm-line-2);}

/* #20 — wizard cards: the tin photos share one grey; fill the box with it so
   odd photo heights leave no white strips */
.bm-wizard__shot{background:#F0F0F0;align-self:stretch;height:auto;min-height:118px;}
.bm-wizard__shot img{mix-blend-mode:normal;}

/* #24 — the type selector loses the browser focus ring and gets air */
.bm-wizard__select{
	outline:none;
	padding:10px 2px 12px;
}
.bm-wizard__select:focus,
.bm-wizard__select:focus-visible{
	outline:none;box-shadow:none;
	border-bottom-color:var(--bm-ink-2);
}

/* --- product page (#31–#42) ---------------------------------------------- */

/* #31 — the quantity stepper is one bordered box, as on the original site */
.product-calculator__tares .tare .quantity{
	border:1px solid #D9D9D9;border-radius:6px;
	padding:3px 6px;gap:2px;
	background:var(--bm-white);
}
.product-calculator__tares .tare .quantity input{
	width:34px;font:400 16px/22px var(--bm-font);
}
.product-calculator__tares .tare .quantity .quantity-btn{
	width:20px;height:20px;flex:0 0 20px;
}
@media (max-width:767px){
	.product-calculator__tares .tare .quantity{min-width:0;justify-content:space-between;}
}

/* #32 — the whole calculator column reads denser */
.product-calculator__tares .tare{padding:6px 0;gap:14px;}
.product-calculator__tares .tare .volume{font-size:16px;line-height:24px;}
.product-calculator__tares .tare .price{font:600 16px/24px var(--bm-font);}
.product-calculator__area{margin:10px 0 0;gap:14px;}
.product-calculator__area .name,
.product-calculator__area label{font-size:16px;line-height:24px;}
.product-calculator__area input[type=number],
.product-calculator__area input[type=text]{font-size:16px;line-height:24px;width:96px;}
.product-calculator__total{margin:26px 0 0;}
.product-calculator__total .price{font:700 40px/46px var(--bm-font);}
.product-show__buttons{margin:24px 0 0;gap:14px;}
.product-show__delivery{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--bm-grey);}

/* #33 — Calculate sleeps until an area is typed (ue.js flips .is-ready) */
#calculate-btn{background:#EFEFEF;border-color:#EFEFEF;color:#9F9F9F;}
#calculate-btn.is-ready{background:#fff;border-color:var(--bm-ink-2);color:var(--bm-ink-2);}

/* #34 — VAT share under the total (ue.js keeps it current) */
.bm-vat{margin:6px 0 0;font:400 14px/20px var(--bm-font);color:var(--bm-grey);}

/* #35 #42 — the teal Buy is a leftover: grey when idle, black when armed */
.product-show__buttons .btn--green,
.product-show__buttons .js-buy{background:var(--bm-black);border-color:var(--bm-black);color:#fff;}
.product-show__buttons .js-buy[disabled]{background:#EDEDED;border-color:#EDEDED;color:#9F9F9F;}

/* #36 — no divider above Product Details */
.product-details{border-top:0!important;}
.product-show-page hr,
.product-details__top-line{display:none;}

/* #37 — more air between the last accordion and the footer */
.product-show-page{padding-bottom:96px;}

/* #39 #40 — a bigger product shot */
.product-show > .half-width.img-side .product-image{min-height:520px;}
.product-show .img-side .product-image img{max-width:92%;}
@media (max-width:1199px){
	.product-show > .half-width.img-side .product-image{min-height:360px;}
}

/* #38 — colour search: the hovered cell pops instantly — big, thick white
   frame, no shadow, no easing */
#product-colors-modal .color-cell{transition:none;}
#product-colors-modal .color-cell:hover{
	transform:scale(1.38);
	z-index:5;
	border:6px solid var(--bm-white);
	box-shadow:none;
}

/* --- basket panel (#43–#51) ---------------------------------------------- */

/* #49 — margins: content column narrower, room on the right for the trash */
.cart-modal:not(.hidden) .js-cart-modal__products{padding:0 46px 8px 24px;}

/* #43 — the title is plain sans, not the display serif */
.cart-modal:not(.hidden) .cart-content__header,
.cart-modal:not(.hidden) .order-form__header{padding:24px 0 16px;}
.cart-modal:not(.hidden) .cart-content__header h6,
.cart-modal:not(.hidden) .order-form__header h6{
	font:600 24px/30px var(--bm-font);
}
.cart-modal:not(.hidden) .cart-content__header p,
.cart-modal:not(.hidden) .order-form__header p{font-size:14px;line-height:20px;}

/* #51 — the header stays out of the scroll region; only the list scrolls,
   behind a thin custom bar */
.cart-modal:not(.hidden) .order-step-1 .order-wrapper{
	display:flex;flex-direction:column;
	overflow:hidden;
}
.cart-modal:not(.hidden) .cart-content__header{flex:0 0 auto;}
.cart-modal:not(.hidden) .cart-content__body{
	flex:1 1 auto;min-height:0;
	overflow-y:auto;
	scrollbar-width:thin;
	scrollbar-color:#C9C9C9 transparent;
	padding-right:6px;
}
.cart-modal:not(.hidden) .cart-content__body::-webkit-scrollbar{width:4px;}
.cart-modal:not(.hidden) .cart-content__body::-webkit-scrollbar-thumb{
	background:#C9C9C9;border-radius:2px;
}
.cart-modal:not(.hidden) .cart-content__body::-webkit-scrollbar-track{background:transparent;}

/* #44 #45 — card: tin on the left hanging over the split, info on the right;
   the top half of the card carries the colour */
.cart-modal:not(.hidden) .cart-product{overflow:visible;border-radius:6px;}
.cart-modal:not(.hidden) .cart-product__info{
	position:relative;
	display:block;
	min-height:96px;
	padding:16px 16px 14px 132px;
	border-radius:6px 6px 0 0;
}
.cart-modal:not(.hidden) .cart-product__info img{
	position:absolute;left:14px;top:14px;
	width:104px;height:126px;
	object-fit:contain;
	z-index:2;
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.cart-modal:not(.hidden) .cart-product__info p{font:600 16px/22px var(--bm-font);}
.cart-modal:not(.hidden) .cart-product__tares{padding:14px 16px 0 132px;}
.cart-modal:not(.hidden) .cart-product__tares li{padding:4px 0;}
.cart-modal:not(.hidden) .cart-product__summary{padding:8px 16px 14px 132px;}
/* #46 — the line price */
.cart-modal:not(.hidden) .cart-product__summary .total-price h6{
	font:700 20px/26px var(--bm-font);
}

/* #50 — the delete icon lives outside the card, in the right gutter */
.cart-modal:not(.hidden) .cart-product .js-remove-product{
	top:2px;right:-30px;
}

/* #47 — promo row margins */
.cart-modal:not(.hidden) .promo-code{margin:12px 0 18px;}

/* #48 — totals per the original: tighter, with the VAT share underneath */
.cart-modal:not(.hidden) .cart-total h4{font:700 34px/40px var(--bm-font);}
.cart-modal:not(.hidden) .cart-content__footer .total h6{font-size:20px;line-height:26px;}
.cart-modal:not(.hidden) .cart-total .bm-cart-vat{
	flex:1 0 100%;margin:2px 0 0;
	font:400 14px/20px var(--bm-font);color:var(--bm-grey);
}

@media (max-width:767px){
	.cart-modal:not(.hidden) .js-cart-modal__products{padding:0 34px 8px 16px;}
	.cart-modal:not(.hidden) .cart-product__info{padding-left:150px;}
	.cart-modal:not(.hidden) .cart-product__info img{width:138px;height:180px;left:4px;top:-4px;max-width:none;}
	.cart-modal:not(.hidden) .cart-product__tares,
	.cart-modal:not(.hidden) .cart-product__summary{padding-left:150px;}
	.cart-modal:not(.hidden) .cart-product .js-remove-product{right:-26px;}
}

/* --- order page (#52–#55) ------------------------------------------------- */

/* #52 — white sheet under the whole page (the header hairline separates it) */
body:has(.order-page){background:var(--bm-white);}
.order-page{background:var(--bm-white);}

/* #53 — the address block: darker, larger, breathing */
.order-page .order-delivery ul li{
	font:400 16px/26px var(--bm-font);
	color:var(--bm-ink-2);
}
.order-page .order-general-info ul li{font:400 16px/26px var(--bm-font);color:var(--bm-ink-2);}

/* #54 — line item: tin on the left in its grey box, the colour band behind
   the text only, lower than the old full-height fill */
.order-page .order-product-info{
	display:flex;align-items:center;position:relative;
	/* the legacy sheet clips this box, which beheaded the taller tin */
	overflow:visible;
}
.order-page .order-product-info img{
	width:96px;height:112px;object-fit:contain;
	background:#F0F0F0;padding:6px;
	position:relative;z-index:2;flex:0 0 auto;
}
.order-page .order-product--tinted .order-product-info > div{
	background:var(--bm-cart-color);
	margin-left:-24px;
	padding:14px 18px 14px 42px;
	border-radius:0 4px 4px 0;
	min-height:96px;
	display:flex;flex-direction:column;justify-content:center;
}
.order-page .order-product--dark .order-product-info > div p,
.order-page .order-product--dark .order-product-info > div a{color:var(--bm-white);}
.order-page .order-product--light .order-product-info > div p,
.order-page .order-product--light .order-product-info > div a{color:var(--bm-ink-2);}
/* the colour chip flattens into a plain caption on the band */
.order-page .order-product-info .color{
	background:none!important;padding:0;margin:4px 0 0;
	display:flex;gap:8px;align-items:baseline;
}
.order-page .order-product-info .color p{margin:0;font:400 13px/17px var(--bm-font);color:inherit;}

/* #55 — the totals get the mock's scale */
.order-page .order-table__total .big b{font:600 22px/28px var(--bm-font);}
.order-page .order-table__total .big .price{font:700 34px/40px var(--bm-font);}
.order-page .order-table__total .tax{font:400 14px/20px var(--bm-font);color:var(--bm-grey);}

/* #31 fix-up — the tare row squeezes .quantity to its input; give the box an
   explicit width and put the buttons back in flow, without their circles */
.product-calculator__tares .tare .quantity,
.product-calculator__tares li .quantity{
	width:104px;min-width:104px;flex:0 0 104px;
	display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
	padding:4px 6px;
}
.product-calculator__tares .tare .quantity .quantity-btn{
	position:relative;flex:0 0 20px;
	border:0;border-radius:0;background:none;
}
.product-calculator__tares .tare .quantity input{flex:0 0 34px;width:34px;}

/* #36 fix-up — the line above Product Details is the previous block's
   .bordered::before; the accordion keeps its own separators */
.product-show.bordered::before{display:none;}

/* #50 fix-up — the scroll box clips anything outside the card, so the card
   leaves a 34px lane inside the scroller and the trash lives there */
.cart-modal:not(.hidden) .js-cart-modal__products{padding:0 24px 8px;}
.cart-modal:not(.hidden) .cart-content__body .cart-product{margin-right:34px;}
.cart-modal:not(.hidden) .cart-product .js-remove-product{right:-30px;}

/* #54 fix-up — the legacy sheet stripes every second tare line grey; the mock
   rows sit on plain white */
.order-page .order-product .cell p:nth-child(2){background:none;}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 2 (pravki_fr.odt, 2026-08-22): the red items
   ========================================================================== */

/* swatch add-to-list: readable on any colour — the chip's own text colour */
.bm-sw--dark .bm-sw__add,
.bm-swatch--dark .bm-sw__add,
.bm-cchip--dark .bm-sw__add{color:var(--bm-white);}
.bm-sw--light .bm-sw__add,
.bm-swatch--light .bm-sw__add,
.bm-cchip--light .bm-sw__add{color:var(--bm-ink-2);}

/* #11 — Couleur du moment: no text shadow; the photo darkens towards the
   caption instead */
.bm-feat__over{text-shadow:none;z-index:2;}
.bm-feat__shot::after{
	content:'';position:absolute;inset:0;
	background:rgba(0,0,0,.34);
	pointer-events:none;
}
.bm-feat__shot picture,
.bm-feat__shot img{position:relative;}
.bm-feat__over .bm-btn{box-shadow:none;}

/* #17 — the LRV info glyph vanished on dark colour bands: repaint the sprite */
.bm-color__hero:not(.bm-color__hero--light) .icon--info{filter:invert(1) brightness(1.7);}

/* #26 — the pills were stretched by the legacy flex-grow, which read as
   centred: they hug their text and pack left */
.catalog .paint-line__item{flex:0 0 auto;margin:0;}
.catalog .paint-line__item a{width:auto;}

/* #27 — the visible checkbox is the <i class=icon-checked>, not the input */
.catalog .search-categories .checkbox-wrapper{
	position:relative;
	display:block;
	/* everything in the column shares one left edge: the heading loses its own
	   indent below, the box sits on that edge, and the label text clears it */
	padding-left:22px!important;
}
.catalog .search-categories .checkbox-wrapper .icon-checked{
	width:14px;height:14px;flex:0 0 14px;
	/* stays in flow (so it never overlaps a wrapped line) but is pulled back
	   out of the label's indent, which lines it up with the "Collection"
	   heading while the text keeps clear of it */
	display:inline-block;
	position:relative;top:2px;
	margin:0 8px 0 -22px;/* pulls the box back onto the heading's text edge */
	border:1px solid #C6C6C6;border-radius:4px;
	background:var(--bm-white) none;
	box-shadow:none;
}
.catalog .search-categories .checkbox-wrapper .icon-checked::before{display:none;}
.catalog .search-categories .checkbox-wrapper input:checked ~ .icon-checked{
	background:var(--bm-ink-2);border-color:var(--bm-ink-2);
}
.catalog .search-categories .checkbox-wrapper input:checked ~ .icon-checked::after{
	content:'';position:absolute;left:2px;top:3px;width:8px;height:7px;
	background:var(--bm-white);
	clip-path:polygon(14% 44%,0 62%,40% 100%,100% 16%,84% 2%,38% 70%);
}

/* #31 — stepper: finer glyphs. Only the PLUS carries the vertical bar — the
   blanket ::before rule turned the minus into a second plus. */
.product-calculator__tares .tare .quantity .quantity-btn--plus::before{width:1px!important;height:9px!important;}
.product-calculator__tares .tare .quantity .quantity-btn--minus::before{width:0!important;height:0!important;}
.product-calculator__tares .tare .quantity .quantity-btn::after{width:9px!important;height:1px!important;}
.product-calculator__tares .tare .quantity .quantity-btn[disabled]{
	opacity:1;
	background:#F1F1F1;border-radius:4px;
}
.product-calculator__tares .tare .quantity .quantity-btn[disabled]::before,
.product-calculator__tares .tare .quantity .quantity-btn[disabled]::after{background:#B9B9B9;}

/* #33 #42 — Buy per the mock: white outline pill with pale text while idle,
   black when armed; both CTAs share the mock's width */
.product-show__buttons .btn,
.product-show__buttons #choose-color,
.product-show__buttons .js-buy{min-width:196px;}
.product-show__buttons .js-buy[disabled]{
	background:var(--bm-white);
	border:1px solid #E3E3E3;
	color:#C6C6C6;
}

/* #32 #35 — one more density pass on the right column */
.product-calculator__tares .tare{padding:3px 0;}
.product-calculator__area{margin:6px 0 0;}
.product-calculator__total{margin:20px 0 0;}
.product-show__buttons{margin:20px 0 0;}
.product-show__delivery{margin:12px 0 0;}

/* #34 — the VAT line is one quiet grey piece, label and figure alike */
.product-calculator__total .tax,
.product-calculator__total .tax span,
.product-calculator__total .tax .js-tax{
	color:var(--bm-grey)!important;
	font:400 14px/20px var(--bm-font)!important;
}
.product-calculator__total .tax .js-tax{margin:0 3px 0 4px;}

/* #44 #45 — basket card: the tin clearly straddles the colour split. The
   catalogue PNGs frame the can inside ~30% transparent margin, so the box has
   to be that much larger for the can itself to read at the mock's size. */
.cart-modal:not(.hidden) .cart-product__info{min-height:118px;padding-left:196px;}
.cart-modal:not(.hidden) .cart-product__info img{
	width:180px;height:236px;top:-6px;left:6px;
	max-width:none;min-width:0;
}
.cart-modal:not(.hidden) .cart-product__tares{padding:18px 16px 0 196px;}
.cart-modal:not(.hidden) .cart-product__summary{padding:8px 16px 16px 196px;}

/* #47 — promo pill: inner spacing per the mock */
.cart-modal:not(.hidden) .promo-code{padding:2px 4px 2px 16px;}
.cart-modal:not(.hidden) .promo-code input{padding:8px 0;font-size:15px;}
.cart-modal:not(.hidden) .promo-code .js-promo-apply{padding:8px 14px;}

/* #48 — "/Total" sits right next to the figure */
.cart-modal:not(.hidden) .cart-content__footer .total{justify-content:flex-start;}

/* order page — the tin outgrows the colour band (top and bottom) */
.order-page .order-product-info img{
	width:210px;height:auto;
	/* the PNG frames the can inside ~18% transparent margin on each side, so
	   the negative margins claw that dead space back out of the flow */
	margin:-51px -38px;
	padding:0;background:none;
	max-width:none;
}
.order-page .order-product--tinted .order-product-info > div{
	min-height:92px;
	/* the mock runs the colour band under the tin's left edge */
	margin-left:-26px;
	padding:14px 18px 14px 42px;
}
/* and the grand total carries the grey "/Total" mark, as in the mock */
.order-page .order-table__total .bm-total-mark{
	font:400 20px/26px var(--bm-font);color:var(--bm-grey);margin-left:6px;
}

/* #48 fix-up — the VAT line's 100% flex-basis stretched .cart-total, shoving
   "/Total" to the far edge; flatten the wrapper so price, mark and VAT line
   lay out directly in the footer row */
.cart-modal:not(.hidden) .cart-content__footer .total{
	display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:8px;
}
.cart-modal:not(.hidden) .cart-content__footer .cart-total{display:contents;}
.cart-modal:not(.hidden) .cart-content__footer .cart-total h4{order:0;margin:0;}
.cart-modal:not(.hidden) .cart-content__footer .total > h6{order:1;margin:0;}
.cart-modal:not(.hidden) .cart-content__footer .cart-total .bm-cart-vat{
	order:2;flex:1 0 100%;margin:0;
}

/* #27 fix-up — the legacy glyph bleeds through the checked box; rebuild the
   tick from scratch, dead centre */
.catalog .search-categories .checkbox-wrapper .icon-checked::after{
	content:'';
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-54%);
	width:10px;height:8px;margin:0;
	background:transparent;
	border:0;
	clip-path:none;
	display:none;
}
.catalog .search-categories .checkbox-wrapper input:checked ~ .icon-checked::after{
	display:block;
	left:50%;top:50%;
	transform:translate(-50%,-54%);
	background:var(--bm-white);
	clip-path:polygon(14% 44%,0 62%,40% 100%,100% 16%,84% 2%,38% 70%);
}
.catalog .search-categories .checkbox-wrapper .icon-checked{background-image:none!important;}
.catalog .search-categories .checkbox-wrapper .icon-checked i,
.catalog .search-categories .checkbox-wrapper .icon-checked svg{display:none;}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 3 (pravki_fr.odt, 2026-08-22 19:43)
   ========================================================================== */

/* rail drag: scroll snapping re-snapped after every programmatic scroll, so the
   drag and its momentum moved in steps instead of gliding */
.bm-rail.is-dragging{
	scroll-snap-type:none;
	scroll-behavior:auto;
}

/* catalogue pills: the row is an inline-flex inside a text-align:center
   wrapper, which centred the whole strip — the mock packs it to the left.
   Left-aligning the wrapper is enough; forcing width:100% pulled the row out
   of the gutter. The wide gaps were the legacy 16px/20px padding on each
   item, not the flex gap. */
.catalog .inline-wrapper,
.catalog .paint-line-container{text-align:left;}
.catalog .paint-line{justify-content:flex-start;}
.catalog .paint-line__item{padding:0!important;}
/* the strip's own container is full-bleed, so it needs the page gutter to line
   up with the heading above it. Its legacy drop shadow painted a hairline right
   under the pills — the mock has nothing there. */
.catalog .paint-line-container{
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	box-sizing:border-box;
	box-shadow:none;
}

/* links inside content read as dark underlined text in the mock — the teal was
   a leftover of the original build */
.product-details a,
.text-page-content a,
.bm-pdetails a,
.order-page .contact-us-section a,
.cart-modal a:not(.btn):not(.bm-btn){
	color:inherit;
	text-decoration:none;
	border-bottom:1px solid currentColor;
}
/* the ordered-product name is plain text in the mock */
.order-page .order-product-info a{text-decoration:none;border-bottom:0;}
.product-details a:hover,
.text-page-content a:hover,
.bm-pdetails a:hover{color:var(--bm-black);opacity:.7;}

/* tinted product page: the mock leaves ~45px of colour under the colour line
   and ~60px of white before the first tare row — the band was landing on the
   rows themselves */
.product-show-page.is-tinted .product-calculator{padding-top:52px;}
@media (max-width:767px){
	.product-show-page.is-tinted .product-calculator{padding-top:34px;}
}

/* the right column still read loose against the mock */
.product-calculator__tares .tare{padding:2px 0;}
.product-calculator__tares{margin-top:2px;}
.product-calculator__total{margin:16px 0 0;}
.product-show__buttons{margin:18px 0 0;}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 4 (pravki_fr.odt, 2026-08-22 20:36)
   ========================================================================== */

/* the rails would not drag by a card's photo or text: the browser started its
   own native image/link drag and swallowed the pointer stream */
.bm-rail img,
.bm-rail a,
.bm-rail .bm-card{
	-webkit-user-drag:none;
	user-select:none;
}

/* the divider is the last thing under the product accordions in the mock —
   .bordered draws a second hairline of its own */
.product-details.bordered::before{display:none;}

/* promo pill: the mock insets the placeholder ~24px and keeps the block tight
   against the total below it */
.cart-modal:not(.hidden) .promo-code{
	padding:0 6px 0 24px;
	margin:12px 0 14px;
	min-height:48px;
}
.cart-modal:not(.hidden) .promo-code input{padding:0;line-height:24px;}
.cart-modal:not(.hidden) .promo-code .js-promo-apply{padding:12px 14px;}

/* order page: the colour band is what shrinks, so the tin reads bigger — the
   line is three rows in the mock, not four */
.order-page .order-product--tinted .order-product-info > div{
	min-height:0;
	padding:10px 18px 10px 42px;
}
.order-page .order-product-info p{margin:0 0 2px;}
.order-page .order-product-info p:last-child{margin-bottom:0;}
.order-page .order-product-info .bm-oart{
	font:400 15px/22px var(--bm-font);
	opacity:.85;margin-left:6px;
}

/* the ordered-product name is an inline-block filling the column, which pushed
   the article code onto its own line and grew the colour band by a row */
.order-page .order-product-info a{display:inline;}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 6 (pravki_fr.odt, 2026-08-23 15:05)
   ========================================================================== */

/* the filter rows carry a legacy 22px side padding, which pushed the whole
   column in from the "Collection" heading; the label keeps its own 22px so a
   wrapped line still clears the box */
.catalog .search-categories .dropdown > li,
.catalog .search-categories ul > li{
	padding-left:0!important;
	padding-right:0!important;
}

/* the promo message reserved a row inside the pill even while empty — it
   belongs under the field, and only once it has something to say */
.cart-modal:not(.hidden) .promo-code{position:relative;}
.promo-code__msg{
	position:absolute;left:20px;right:20px;top:100%;
	flex:none;padding:4px 0 0;
}
.promo-code__msg:empty{display:none;}

/* order rows: the taller tin needs room, otherwise it crowds the separators */
.order-page .order-product{padding:40px 0;}
.order-page .order-table__header .cell{padding-bottom:10px;}

/* the slide-over filter panel sits flush against the screen edge once the row
   padding is gone — inset the whole panel so heading and boxes move together */
@media (max-width:1199px){
	.catalog .search-categories{padding-left:16px;}
}

/* filter column: no frame, no drop shadow, everything on one left edge — the
   legacy form carries a 0 2px 2px shadow and the section headings their own
   22px indent */
.catalog .search-categories,
.catalog .search-categories form,
.catalog .search-categories .wrapper-dropdown,
.catalog .search-categories .dropdown-type,
.catalog .search-categories .dropdown{
	border:0!important;
	box-shadow:none!important;
}
.catalog .search-categories .name,
.catalog .search-categories h6{padding-left:0!important;}

/* no grey wash behind a hovered filter row — it only drew attention to the
   row's own left edge */
.catalog .search-categories li:hover,
.catalog .search-categories .checkbox-wrapper:hover,
.catalog .search-categories .dropdown > li:hover{background:none!important;}

/* the slide-over filter panel must stay opaque over the listing */
@media (max-width:1199px){
	.catalog .search-categories,
	.catalog .search-categories form{background:var(--bm-white);}
}

/* the whole filter row toggles its checkbox, so it should read as clickable */
.catalog .search-categories .checkbox-wrapper,
.catalog .search-categories label{cursor:pointer;}

/* ==========================================================================
   ROUND 8 — 2026-08-23: teal purge, content links, pager, feedbacks columns
   ========================================================================== */

/* 1. the original build's teal is retired site-wide. The token first, so every
   redesign rule that referenced it follows. */
:root{--bm-teal:#2D2D2D;}

/* then the legacy sheet's own hard-coded #2C8395 — every selector it uses */
.article-news .news-products .price,
.color-family-links a,
.color-collections-links a,
.contacts-info a,
.contact-us-section a,
.location-info .address,
.login-form .form-link a,
.login-form .line .terms a,
.orders-list .cell a:not(.btn),
.other .other-heading span,
.product-calculator__total .price,
.product-details__description a,
.product-details__safety a,
.search-page__categories li span,
.secret-page .contact-us p a,
.site-map-page .column-row .column__link a,
.tags-line .tags-list a,
.user-account .edit,
.user-professional p span{color:var(--bm-ink-2);}
.btn--green{background:var(--bm-ink-2);border-color:var(--bm-ink-2);}
.cart-modal__btns .btn--green::after{color:inherit;}

/* 2. content links: one underline only — the border, never text-decoration
   (the legacy sheet underlines these, which doubled the line) */
.article-text a,
.article-news a:not(.btn):not(.bm-btn):not(.ssb-icon),
.contacts-info a,
.contact-us-section a,
.product-details__description a,
.product-details__safety a,
.site-map-page .column-row .column__link a,
.tags-line .tags-list a,
.secret-page .contact-us p a,
.login-form .form-link a,
.login-form .line .terms a,
.user-account .edit{
	text-decoration:none!important;
	border-bottom:1px solid currentColor;
	color:var(--bm-ink-2);
}

/* 3. the pager sat straight on the footer */
/* `.catalog .pagination` earlier in this sheet is more specific, so the gap has
   to be set at the same weight */
.catalog .pagination{margin-bottom:76px;}
.pagination{margin-bottom:76px;}
@media (max-width:767px){
	.catalog .pagination,
	.pagination{margin-bottom:48px;}
}

/* 4. feedbacks: the reviews column inherited the 200px sidebar width meant for
   the account nav — here the reviews are the main column and the form the aside */
.feedbacks-page.two-col-grid{align-items:flex-start;}
.feedbacks-page .two-col-grid__left{flex:1 1 auto;min-width:0;}
.feedbacks-page .two-col-grid__right{flex:0 0 420px;max-width:420px;}
@media (max-width:991px){
	.feedbacks-page .two-col-grid__right{flex:1 1 100%;max-width:none;}
}

/* site map: the underline is set on the wrapper div, not on the link, so the
   link's own border landed under a second line */
.site-map-page .column-row .column__link{text-decoration:none;}

/* the separate billing address follows the delivery one in the same column */
.order-page .order-billing__title{margin-top:26px;}
.order-page .order-billing{margin:0;padding:0;list-style:none;}
.order-page .order-billing li{
	font:400 16px/26px var(--bm-font);
	color:var(--bm-ink-2);
	margin:0;padding:0;list-style:none;
}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 9 (Figma comments #56–#78, 2026-08-25)
   ========================================================================== */

/* #60 — on very wide screens the full-bleed gutter let the two product columns
   stretch until the price/stepper pair sat at the far edge */
.product-show{max-width:1440px;margin-left:auto;margin-right:auto;}
.product-details,
.bm-pdetails{max-width:1440px;margin-left:auto;margin-right:auto;}

/* #63 #68 — the title sits level with the "Best Selling" flag, as in the mock */
.product-show{padding-top:0;}
.product-show > .half-width:not(.img-side){margin-top:-18px;}

/* #62 #71 — a bigger tin */
.product-show .img-side .product-image img{max-width:88%;}

/* #69 — the chosen colour line reads larger */
.bm-pcolor .name{font-size:22px;line-height:28px;}
.bm-pcolor .number{font-size:18px;line-height:24px;}

/* #61 — "Free delivery" is the same quiet grey line as the VAT one, and sits
   close under the buttons */
.product-show__delivery{
	margin:14px 0 0;
	font:400 14px/20px var(--bm-font);
	color:var(--bm-grey);
}
.product-show__delivery b,
.product-show__delivery strong{font-weight:400;color:var(--bm-grey);}

/* #72 — between 1200 and 1439 the desktop metrics were applied to a column
   that is already tablet-narrow, so the tare name and its price collided */
@media (min-width:1200px) and (max-width:1439px){
	.product-show{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:28px;}
	.product-calculator__tares .tare{gap:12px;}
	.product-calculator__tares .tare .volume{font-size:16px;line-height:22px;white-space:normal;}
	.product-calculator__tares .tare .price{font-size:16px;line-height:22px;}
	.product-show__name h1{font-size:30px!important;line-height:36px!important;}
	.product-calculator__total .price{font-size:36px;line-height:42px;}
}

/* #59 — the last row of products nearly touched the footer */
.catalog .catalog-full-list{margin-bottom:72px;}
@media (max-width:767px){ .catalog .catalog-full-list{margin-bottom:44px;} }

/* #58 — "Autres nuances" / "Similar colors": the tiles scale with the width
   instead of keeping a fixed 262px, so the band always wraps all four */
.bm-cstrip__band{flex-wrap:nowrap;}
.bm-cstrip__band > .bm-cchip{flex:1 1 0;min-width:0;}
.bm-cstrip__self{flex:0 0 clamp(140px,16%,220px);}
@media (max-width:767px){
	.bm-cstrip__band{flex-wrap:wrap;}
	.bm-cstrip__band > .bm-cchip{flex:1 1 42%;}
}

/* #56 — the active collection pill kept white text on its white background
   once the pointer left it */
.bm-collections__filters .bm-btn--white,
.bm-collections__filters .bm-btn--white:hover,
.bm-collections__filters .bm-btn--white:focus{
	background:var(--bm-white);
	border-color:var(--bm-white);
	color:var(--bm-ink-2);
}

/* #57 — the home collection swatches behave like every other colour card:
   the add-to-list control appears on hover (it used to be hidden for guests) */
body:not(.is-signed-in) .bm-swatches .bm-sw__add{display:flex;}

/* #66 — the colour search sheet covers the page: no strip of dimmed background
   left at the right edge */
#product-colors-modal:not(.hidden),
#product-colors-modal.show{width:100%;max-width:none;left:0;right:0;}
#product-colors-modal .modal-dialog{max-width:none;width:100%;margin:0;}

/* #65 — the close button draws its cross twice: the sprite on the inner span
   and our own glyph on the button. Keep one. */
#product-colors-modal .close > span{display:none;}

/* #73 — a wider filter column fits the long product names */
@media (min-width:1200px){
	.catalog .two-col-grid__left,
	.catalog .search-categories{flex:0 0 300px;max-width:300px;}
}

/* the breadcrumb and the flag follow the same cap, otherwise they hang far to
   the left of the product block on a wide screen */
.product-show-page .wrapper--breadcrumbs{max-width:1440px;margin-left:auto;margin-right:auto;}


/* #75 — the light/dark hint on the colour band lost to the panel-scoped rule
   above, so every band drew black text, unreadable on the dark colours */
.cart-modal:not(.hidden) .cart-product--dark .cart-product__info p,
.cart-modal:not(.hidden) .cart-product--dark .cart-product__info p b,
.cart-modal:not(.hidden) .cart-product--dark .cart-product__info a,
.cart-modal:not(.hidden) .cart-product--dark .cart-product__colorline,
.cart-modal:not(.hidden) .cart-product--dark .cart-product__info .bm-cart-art{color:var(--bm-white)!important;}
.cart-modal:not(.hidden) .cart-product--light .cart-product__info p,
.cart-modal:not(.hidden) .cart-product--light .cart-product__info p b,
.cart-modal:not(.hidden) .cart-product--light .cart-product__info a,
.cart-modal:not(.hidden) .cart-product--light .cart-product__colorline,
.cart-modal:not(.hidden) .cart-product--light .cart-product__info .bm-cart-art{color:var(--bm-ink-2)!important;}

/* #74 #76 — the tin reads at the mock's proportion (a third of the card) */
.cart-modal:not(.hidden) .cart-product__info{padding-left:214px;}
.cart-modal:not(.hidden) .cart-product__info img{width:200px;height:262px;top:-10px;}
.cart-modal:not(.hidden) .cart-product__tares{padding-left:214px;}
.cart-modal:not(.hidden) .cart-product__summary{padding-left:214px;}
@media (max-width:767px){
	.cart-modal:not(.hidden) .cart-product__info{padding-left:150px;}
	.cart-modal:not(.hidden) .cart-product__info img{width:138px;height:180px;top:-4px;}
	.cart-modal:not(.hidden) .cart-product__tares,
	.cart-modal:not(.hidden) .cart-product__summary{padding-left:150px;}
}

/* #77 — more air above the panel title */
.cart-modal:not(.hidden) .cart-content__header,
.cart-modal:not(.hidden) .order-form__header{padding-top:34px;}

/* #78 — the article rides at the end of the name instead of taking a row */
.cart-modal:not(.hidden) .cart-product__info .bm-cart-art{
	font:400 15px/22px var(--bm-font);opacity:.85;margin-left:6px;
}

/* the mock's basket panel is wider than the legacy 512px — with the tin at the
   mock's proportion the text column needs that room */
@media (min-width:768px){
	.cart-modal:not(.hidden){width:580px;max-width:92vw;}
}

/* Client, 2026-08-25: the hero and the "Couleur du moment" block take 75% of
   the viewport height, but never more than they do today — so on a short
   laptop screen the next block peeks in, and on a tall screen nothing grows. */
.bm-hero{min-height:min(75vh,clamp(846px,58.75vw,1000px));}
@media (max-width:1199px){ .bm-hero{min-height:min(75vh,640px);} }
@media (max-width:767px){ .bm-hero{min-height:min(75vh,520px);} }

@media (min-width:768px){
	.bm-feat{max-height:min(75vh,1007px);overflow:hidden;}
	.bm-feat__shot{height:100%;}
	.bm-feat__shot picture,
	.bm-feat__shot img{height:100%;object-fit:cover;}
}

/* the cookie bar carries two buttons now — the legacy sheet stacks them at
   max-width:120px, which left no room for a second one */
.c-notifier p{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;}
.c-notifier .btn{
	display:inline-flex!important;
	align-items:center;justify-content:center;
	flex:none;max-width:none!important;margin:0!important;
}
.c-notifier .btn--outline{
	background:none;
	border:1px solid currentColor;
	color:inherit;
}

/* the legacy bar is a fixed 38px strip, which cut off the second button */
.c-notifier{height:auto!important;min-height:0;padding:12px 0;overflow:visible;}
.c-notifier .wrapper{height:auto;}
.c-notifier p{margin:0;}
.c-notifier .btn{padding:7px 20px;font-size:14px;line-height:20px;}

/* --- basket step 2: payment method chooser -------------------------------- */
/* the radios sit inside js-delivery-form so the bundle serialises them with
   the rest of the form; the checkbox rules above only target input[type=checkbox] */
.cart-modal:not(.hidden) .order-form__payment{margin:0 0 4px;}
.cart-modal:not(.hidden) .order-form__payment .line--check label{flex-wrap:wrap;}
.cart-modal:not(.hidden) .order-form__payment input[type=radio]{
	flex:none;width:20px;height:20px;margin:1px 0 0;
	accent-color:var(--bm-black);
}
.cart-modal:not(.hidden) .order-form__payment .payment-hint{
	flex-basis:100%;margin:2px 0 0 32px;font-style:normal;
	font:400 14px/20px var(--bm-font);color:var(--bm-grey);
}

/* --- order page: payment state and the notice after returning from Stripe -- */
.bm-paystate{
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 18px;border-radius:var(--bm-r-pill);
	font:500 15px/21px var(--bm-font);
}
.bm-paystate--paid{background:var(--bm-green);color:var(--bm-white);}
.bm-paystate--pending{border:1px dashed var(--bm-line);color:var(--bm-grey);}
.order-page__msg{
	margin:0 0 24px;padding:16px 20px;border-radius:var(--bm-r-sm);
	font:400 16px/24px var(--bm-font);
}
.order-page__msg--ok{background:var(--bm-green);color:var(--bm-white);}
.order-page__msg--warn{
	background:var(--bm-bg-soft);color:var(--bm-black);
	border:1px solid var(--bm-line);
}

/* the order page must not dead-end when payment was cancelled or declined:
   the notice promises the order can be paid later, this is the way to do it */

/* the three sit in one row but came from different places: the chips carry a
   border, the paid badge does not, and .btn brings its own padding from the
   legacy bundle — so they rendered at three different heights. One box for all
   three; the border colour is then set per variant so nobody loses its outline. */
.bm-paymethods{align-items:stretch;}
.bm-paymethod,
.bm-paystate,
.bm-paylink{
	box-sizing:border-box;min-height:44px;
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 18px;
	border-width:1px;border-style:solid;
	border-radius:var(--bm-r-pill);
	font:500 15px/21px var(--bm-font);
	text-decoration:none;
}
.bm-paymethod{border-color:var(--bm-line);}
.bm-paymethod.is-selected{border-color:var(--bm-black);}
.bm-paystate--pending{border-style:dashed;border-color:var(--bm-line);}
.bm-paystate--paid{border-color:var(--bm-green);}
/* .btn--green sets only a background, so the resting text colour would fall
   back to the legacy .btn dark grey — unreadable on it. Only the resting state
   is set here: the legacy `.btn:hover` inverts the button to a white
   background, and pinning the text white for :hover too left it white on
   white. The border colour is left to `.btn--green` (--bm-ink-2) so the
   inverted state still has an outline instead of dissolving into the page. */
.bm-paylink{color:var(--bm-white);}
/* Two rules from elsewhere fought this row and both had to be answered here,
   which is why the selector is this specific:
   - the legacy bundle margins `.order-page .payment-methods .btn` 10px on top,
     and only the button carried it, so the row grew and the chips stretched up
     to meet it rather than lining up;
   - the cabinet's own `.order-page .btn` sets 18px/24px and 11px padding,
     which made the button 48px tall against the chips' 44px.
   Spacing between the three now comes from the container's gap alone. */
/* `.orders-list .btn` carries the same cabinet 18px/11px sizing as
   `.order-page .btn`, so the orders list needs the same answer as the order
   page - otherwise the button there is 48px against the chips' 44px. */

/* Method and state ride along with the order number in the first cell (432px
   there); the pay button takes the last cell, which lines up under the
   products' "reorder" column. Putting all three in that last cell was the
   obvious idea and it does not fit: 136+193+179px against a 336px column, so
   they stacked three rows deep. */
.shopping-order__total .bm-payinfo{margin:10px 0 0;}
.shopping-order__total .bm-paycell{text-align:right;}
/* Below 1023px the legacy sheet hides every cell of the total row but the
   first. Right for the empty ones, but it would take the pay button with them
   - and on a phone it is the one thing worth keeping. */
@media screen and (max-width:1023px){
	.shopping-order__total .cell.bm-paycell{
		display:block;width:100%;padding:16px 0 0;text-align:left;
	}
}
.order-page .payment-methods .bm-paylink,
.orders-list .bm-paylink{
	margin:0;
	padding:10px 22px;
	font:500 15px/21px var(--bm-font);
	/* `.order-page .btn` pins the border transparent and outranks
	   `.btn--green`, so on hover — where the legacy sheet flips the button to a
	   white background — it turned into a white rectangle with no outline.
	   Other cabinet buttons keep their border colour; this one now does too. */
	border-color:var(--bm-ink-2);
}

/* ==========================================================================
   DESIGNER REVIEW — ROUND 11 (pravki_fr2.odt, 2026-08-26)
   Comment numbers below are the ones in that file.
   ========================================================================== */

/* #1 — the Elfsight Google-Reviews embed brings its own card, so our pill
   (border + fill + padding) drew a second frame around it. Only the PHP
   fallback badge keeps the pill. */
.bm-footer__ratings .bm-rating--widget,
.bm-footer__ratings a.bm-rating--widget{
	/* MUST stay a flex container: the region's value carries comments and
	   newlines around the embed, and in a block container those whitespace text
	   nodes make an empty ~20px line box above the widget. A flex container
	   drops whitespace-only nodes instead of turning them into items. */
	display:flex;
	align-items:center;
	/* those same whitespace nodes still make a ~4px anonymous flex item, and the
	   inherited gap adds 10 more, pushing the badge off the row's centre */
	gap:0;
	font-size:0;
	border:0;
	border-radius:0;
	background:none;
	padding:0;
}
.bm-rating--widget > div,
.bm-rating--widget [class*="elfsight-app"]{margin:0;font-size:16px;}

/* #2 — "Couleur du moment" was capped with max-height + overflow:hidden, and
   the pane bottom-aligns its text, so the last line and the block's own bottom
   padding were sliced off on a short screen. Cap the PHOTO instead: the grid
   row then follows the shorter of the two, and nothing is ever cut. */
@media (min-width:768px){
	.bm-feat{max-height:none;overflow:visible;}
	.bm-feat__shot{max-height:min(75vh,1007px);}
}

/* #2 — the home "Choisissez une collection" photo follows the same 75% rule as
   the hero: never taller than it is today, never taller than 75vh. */
.bm-collections__shot{height:min(75vh,517px);}
.bm-collections__shot picture,
.bm-collections__shot img{object-position:center;}
/* #2 — the hero: cropping it evenly top and bottom cut the sofa and the lamp,
   which is where the shot's composition lives. Anchor the crop to the bottom
   so only the ceiling goes as the block gets shorter. */
.bm-hero__media{object-position:center bottom;}
@media (max-width:1199px){ .bm-collections__shot{height:min(75vh,380px);} }
@media (max-width:767px){ .bm-collections__shot{height:min(75vh,260px);} }

/* #3 — the logo art has ~7% of empty box under it, so centring the BOX put the
   wordmark below the nav's baseline. Lift it until the two baselines meet.
   Only where the nav exists; below 1200px the box is centred as before. */
.bm-header__logo{margin-top:0;}
@media (min-width:1200px){
	.bm-header__logo{position:relative;top:-8px;}
}

/* #4 — footer typography back to the mock: 12/16 at regular weight, no extra
   margin under each row, and the column tracks in the mock's proportions
   (77 / 380 / 749 / 978 at 1440) instead of four equal ones. */
.bm-footer__links{font:400 12px/16px var(--bm-font);}
.bm-footer__links a{font:400 12px/16px var(--bm-font);}
.bm-footer__links li{margin:0;}
.bm-footer__contacts{font:400 12px/16px var(--bm-font);}
.bm-footer__contacts p,
.bm-footer__contacts div{font:400 12px/16px var(--bm-font);}
.bm-footer__contacts p{margin:0 0 16px;}
.bm-footer__contacts p:last-child{margin-bottom:0;}
@media (min-width:1200px){
	.bm-footer__grid{
		grid-template-columns:23.5% 28.6% 17.8% minmax(0,1fr) auto;
		column-gap:0;
	}
}

/* #5 — the product block used a centred 1440px box, so on a wide screen it
   floated in the middle of the page while the header sat on the gutter. It now
   follows the site gutter like `.catalog .catalog-content > .wrapper`. */
.product-show,
.product-details,
.bm-pdetails{max-width:none;margin-left:0;margin-right:0;}
.product-show-page .wrapper--breadcrumbs{
	max-width:none;
	width:100%;
	margin:0;
	padding-left:var(--bm-gutter);
	padding-right:var(--bm-gutter);
	box-sizing:border-box;
}
/* #6 — with the block full-bleed the right column must stop growing, or the
   tare name and its price drift to opposite edges ("на широких екранах улітає
   розмір банки"). The photo column takes the slack; the tin keeps its size. */
@media (min-width:1440px){
	/* Both columns keep their 1440 widths and stay side by side at the left
	   gutter — `space-between` opened a gap between the tin and the buy block on
	   a wide screen ("на больших экранах влево чтобы не было разрыва"). The
	   slack goes to the right, exactly as the mock leaves it at 1440. */
	.product-show{
		grid-template-columns:minmax(0,620px) minmax(0,608px);
		justify-content:start;
	}
	/* the details block below keeps the same right edge, so the page has one */
	.product-show,
	.product-details,
	.bm-pdetails{max-width:1288px;margin-right:auto;}
}

/* #6 — legacy inner padding on the buy block and the total; the mock spaces
   them with margins only (VAT line → buttons 41px, buttons → delivery 26px). */
/* Only from 769 up: at 768 and below the legacy sheet turns the buy row into a
   fixed bottom bar and the total into a tighter block, and both rely on their
   own padding — an unscoped `padding:0` here left the black button flush
   against the bar's white edge. */
@media (min-width:769px){
	.product-calculator__total{padding:0;margin:41px 0 0;}
	.product-show__buttons{padding:0;margin:34px 0 0;}
}
/* the fixed bar breathes on the page's own gutter */
@media (max-width:768px){
	.product-show__buttons{padding:16px var(--bm-gutter);}
}
.product-show__delivery{margin:20px 0 0;}
/* the legacy sheet colours <p> #242424, which beat the container's grey — the
   line is meant to read exactly like the VAT one */
.product-show__delivery p{color:var(--bm-grey);margin:0;}

/* #6 — the title sits level with the "Meilleure vente" flag, as in the mock */
@media (min-width:1200px){
	.product-show > .half-width:not(.img-side){margin-top:-39px;}
}

/* #7 — the colour picker is a full-screen white sheet, but the scroll box is
   the .modal itself: its scrollbar lane sat over the dark backdrop and read as
   a grey strip down the right edge. */
#product-colors-modal{
	background:var(--bm-white);
	scrollbar-color:#c9c9c9 var(--bm-white);
}
#product-colors-modal::-webkit-scrollbar{width:10px;background:var(--bm-white);}
#product-colors-modal::-webkit-scrollbar-track{background:var(--bm-white);}
#product-colors-modal::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:5px;}

/* #8 — the drawer shows the section's own picture (razdel.photo, the images the
   old markup already used). Children WITH a photo become cards in a row;
   children without one are grouped into a plain list in the next column. */
.bm-drawer{border-top:0;padding:24px 0 44px;}
.bm-drawer__inner{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:28px 47px;
}
/* the cards and the text group share ONE row of columns, so the list lands in
   the slot after the last card rather than on a line of its own */
.bm-drawer__cards{
	display:contents;
	list-style:none;
	margin:0;padding:0;
}
.bm-drawer__card{flex:0 0 258px;max-width:258px;margin:0;padding:0;}
.bm-drawer__cardlink{display:block;text-decoration:none;color:var(--bm-dark);}
.bm-drawer__shot{
	display:block;
	aspect-ratio:256/180;
	background:var(--bm-line-2);
	border-radius:var(--bm-r-sm);
	overflow:hidden;
}
.bm-drawer__shot picture{display:block;height:100%;}
.bm-drawer__shot img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	transition:transform .3s ease;
}
.bm-drawer__cardlink:hover .bm-drawer__shot img{transform:scale(1.04);}
.bm-drawer__caption{
	display:block;
	margin-top:20px;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-dark);
	border-bottom:1px solid transparent;
}
.bm-drawer__cardlink:hover .bm-drawer__caption{border-bottom-color:var(--bm-dark);}
/* the text-only group sits in the column after the last card */
.bm-drawer__inner .bm-drawer__list{
	columns:auto;
	max-width:258px;
	flex:0 0 258px;
	padding-top:2px;
}
.bm-drawer__inner .bm-drawer__item{margin:0 0 10px;}

/* #8 — an open submenu turns the transparent home header white, exactly like a
   modal does, so the drawer and the header read as one white sheet. */
.bm-header--overlay:has(.bm-nav__item--has-sub:hover),
.bm-header--overlay:has(.bm-nav__item--has-sub:focus-within){
	background:var(--bm-white);
}
.bm-header--overlay:has(.bm-nav__item--has-sub:hover) .bm-header__logo,
.bm-header--overlay:has(.bm-nav__item--has-sub:focus-within) .bm-header__logo{
	background-image:url('/assets/main-logo-black-e3f6f2a1b4ef331efd39463ac93b5ac4b5ea70c576631b5448937e8007e4dddd.svg');
}
.bm-header--overlay:has(.bm-nav__item--has-sub:hover) .bm-nav__link,
.bm-header--overlay:has(.bm-nav__item--has-sub:hover) .bm-tool,
.bm-header--overlay:has(.bm-nav__item--has-sub:hover) .bm-lang,
.bm-header--overlay:has(.bm-nav__item--has-sub:focus-within) .bm-nav__link,
.bm-header--overlay:has(.bm-nav__item--has-sub:focus-within) .bm-tool,
.bm-header--overlay:has(.bm-nav__item--has-sub:focus-within) .bm-lang{
	color:var(--bm-black);
}
/* the header hairline would cut across the open drawer */
.bm-header:has(.bm-nav__item--has-sub:hover),
.bm-header:has(.bm-nav__item--has-sub:focus-within){box-shadow:none;}

/* ==========================================================================
   MOBILE PASS — client screenshots 2026-08-26 (pravki_mobile) + Figma phone
   ========================================================================== */

/* --- burger ---------------------------------------------------------------
   On the home page `body.bm-modal-open .bm-header--overlay .bm-burger span`
   repainted the middle bar, so the open state drew three strokes (an asterisk)
   instead of an X. */
.bm-burger.is-open span,
.bm-burger.mobile-menu-toggler--opened span,
body.bm-modal-open .bm-header--overlay .bm-burger.is-open span,
body.bm-modal-open .bm-header--overlay .bm-burger.mobile-menu-toggler--opened span{
	background:transparent;
}

/* --- mobile menu: everything the phone header has no room for ------------- */
.mobile-menu__user{padding:6px 20px 28px;}
.bm-mmenu__tools{list-style:none;margin:0;padding:0;}
.bm-mmenu__tools li{margin:0;padding:0;}
.bm-mmenu__tools a{
	display:flex;
	align-items:center;
	gap:14px;
	padding:13px 0;
	font:400 16px/22px var(--bm-font);
	color:var(--bm-dark);
	text-decoration:none;
	text-transform:none;
	letter-spacing:0;
}
.bm-mmenu__tools a:hover{opacity:.7;}
.bm-mmenu__ico{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;flex:none;
	color:var(--bm-dark);
}
.bm-mmenu__ico svg{display:block;width:18px;height:auto;}
.bm-mmenu__lang{
	display:flex;
	gap:10px;
	list-style:none;
	margin:16px 0 0;
	padding:0;
}
.bm-mmenu__lang li{margin:0;}
.bm-mmenu__langopt{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 15px;
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-pill);
	color:var(--bm-dark);
	text-decoration:none;
	font:400 15px/20px var(--bm-font);
	text-transform:none;
}
.bm-mmenu__langopt.is-active{border-color:var(--bm-dark);}
.bm-mmenu__langopt .bm-lang__flag{width:22px;height:15px;border-radius:2px;overflow:hidden;}
.bm-mmenu__social{display:flex;gap:22px;margin:26px 0 0;}
.bm-mmenu__social a{color:var(--bm-dark);line-height:0;}
.bm-mmenu__social a:hover{opacity:.7;}
.bm-mmenu__social svg{display:block;width:20px;height:20px;}

/* --- footer: the wordmark keeps a 230px box, which parked it on the left of
   the centred phone column --------------------------------------------- */
@media (max-width:767px){
	.bm-footer__brand{margin-left:auto;margin-right:auto;}
}

/* --- product page, phone (Figma "Heritage Red - Phone") ------------------- */
@media (max-width:767px){
	/* the mock shows the tin then a horizontal thumbnail rail, then the title;
	   the thumbnails only exist inside the desktop image block, so use that one
	   and drop the legacy `.mobile` copy */
	.product-show .img-side.mobile{display:none!important;}
	.product-show .img-side.half-width{display:flex!important;flex-direction:column;gap:14px;}
	.product-show > .half-width.img-side .product-image{min-height:0;}
	.product-show .img-side .product-image img{max-width:74%;}
	.bm-pthumbs{
		flex:0 0 auto;
		flex-direction:row;
		order:1;
		gap:8px;
		overflow-x:auto;
		scrollbar-width:none;
	}
	.bm-pthumbs::-webkit-scrollbar{display:none;}
	.bm-pthumb{width:64px;height:54px;flex:0 0 64px;}

	/* tare row: name | price | stepper on one line */
	.product-calculator__tares .tare{
		grid-template-columns:minmax(0,1fr) auto auto;
		gap:0 12px;
		align-items:center;
	}
	.product-calculator__tares .tare .volume{
		grid-column:1;justify-self:start;
		font-size:16px;line-height:22px;
	}
	.product-calculator__tares .tare .price{
		grid-column:2;justify-self:end;
		font-size:16px;line-height:22px;
	}
	.product-calculator__tares .tare .quantity{grid-column:3;justify-self:end;}

	/* the m² row is one line too */
	.product-calculator__area{flex-wrap:nowrap;gap:10px;align-items:center;}
	.product-calculator__area > span{flex:0 0 auto;}
	.product-calculator__area .js-calculate-by-area{flex:1 1 60px;min-width:0;}
	.product-calculator__area .btn{flex:0 0 auto;padding-left:16px;padding-right:16px;}
}
/* the buy row is NOT a fixed bar in the mock — the two buttons sit in the flow,
   side by side. 768 (not 767) because that is where the legacy sheet pins it. */
@media (max-width:768px){
	.product-show__buttons{
		position:static;
		width:auto;
		background:none;
		box-shadow:none;
		padding:0;
		margin:26px 0 0;
		gap:12px;
		flex-wrap:nowrap;
		justify-content:flex-start;
	}
	.product-show__buttons .btn{width:auto;flex:1 1 0;min-width:0;}
}

/* --- basket panel, phone (Figma "Basket step 1/2 - Phone") ---------------- */
@media (max-width:767px){
	/* the card was 273px inside a 393px screen: 24px of panel padding plus
	   16px of step padding plus the 34px trash lane on every side */
	/* the trash lane has to stay inside the scroll box, so the width has to come
	   off the container's right padding instead; the header and footer keep
	   their own inset so nothing touches the screen edge */
	.cart-modal:not(.hidden) .cart-modal__products{padding:0 0 8px 8px;}
	.cart-modal:not(.hidden) .order-step{padding-left:9px;padding-right:0;}
	.cart-modal:not(.hidden) .cart-content__header,
	.cart-modal:not(.hidden) .order-form__header,
	.cart-modal:not(.hidden) .cart-content__footer{padding-right:17px;}
	.cart-modal:not(.hidden) .cart-product__info,
	.cart-modal:not(.hidden) .cart-product__tares,
	.cart-modal:not(.hidden) .cart-product__summary{padding-right:10px;}
	.cart-modal:not(.hidden) .cart-content__header,
	.cart-modal:not(.hidden) .order-form__header{padding-top:18px;}
	/* the mock centres the total block. `.cart-total` stays display:contents —
	   turning it into a column put the "/Total" label under the amount. */
	.cart-modal:not(.hidden) .cart-content__footer .total{justify-content:center;text-align:center;}
	.cart-modal:not(.hidden) .cart-content__footer .cart-total .bm-cart-vat{text-align:center;}
}

/* --- the whole site scrolled 393px sideways on a phone -------------------
   The legacy script lifts the submenu panels out of the menu and appends them
   to <body> as `position:absolute; left:0; transform:translateX(100%)`, i.e.
   one screen width to the right of the initial containing block. Body/html
   overflow cannot clip an element positioned against the ICB, so park them to
   the LEFT instead: overflow past the left edge never adds scrollable width.
   The panel still slides in from off-screen, just from the other side. */
/* above the mobile breakpoint the menu is not used at all, but the panels are
   children of <body>, so `display:none` on `.mobile-menu-container` never
   reached them and every desktop page scrolled a whole screen sideways too */
@media (min-width:1200px){
	.mobile-menu__panel{display:none;}
}
@media (max-width:1199px){
	.mobile-menu__panel{transform:translateX(-100%);}
	.mobile-menu__panel.mobile-menu__panel--opened{transform:translateX(0);}
	/* the script moves the panels out to <body>, where the legacy z-index 10
	   left them painting *behind* the menu container (102) — an opened submenu
	   or the search panel was simply invisible */
	.mobile-menu__panel{z-index:103;}
}

/* --- mobile submenu panels: they live on <body>, so they inherit none of the
   menu's padding and used to sit under the fixed header ------------------- */
@media (max-width:1199px){
	.mobile-menu__panel{padding-top:var(--bm-header-h);background:var(--bm-white);}
	.mobile-menu__panel > ul{list-style:none;margin:0;padding:18px 20px 40px;}
	.mobile-menu__panel > ul > li{margin:0;}
	.mobile-menu__panel > ul > li > a{
		display:flex;
		align-items:center;
		padding:13px 0;
		font:400 16px/22px var(--bm-font);
		color:var(--bm-dark);
		text-decoration:none;
		text-transform:none;
		letter-spacing:0;
	}
	.mobile-menu__panel > ul > li:first-child > a{padding:4px 0 10px;}
	.mobile-menu__panel > ul > li:nth-child(2) > a{
		font:500 16px/22px var(--bm-font);
		text-transform:uppercase;
		padding-bottom:6px;
	}
	.mobile-menu__panel .search-form{width:100%;}
}

/* --- product phone, second pass ------------------------------------------ */
@media (max-width:767px){
	/* the legacy sheet leaves flex sizing on these (`flex:1 1 0` on the name,
	   `flex:0 0 115px` on the price) which fights the grid — clear it and let
	   the three columns size themselves */
	.product-calculator__tares .tare{grid-template-columns:minmax(0,1fr) auto 104px;}
	.product-calculator__tares .tare .volume,
	.product-calculator__tares .tare .price{flex:none;width:auto;white-space:nowrap;}
	.product-calculator__tares .tare .volume{justify-self:start;}
	.product-calculator__tares .tare .price{justify-self:end;font-weight:700;}
	.product-calculator__tares .tare .quantity{width:104px;justify-self:end;}
}
/* the two buy buttons share one row on a phone, so they need the smaller
   label size the mock uses — `.btn--big` is 20px and wrapped every label */
@media (max-width:768px){
	.product-show__buttons .btn{
		font-size:16px;
		line-height:22px;
		padding:11px 14px;
		white-space:nowrap;
	}
}

/* --- phone hero: at 393 the cover crop is horizontal, and centring it landed
   on the wall junction. The mock frames the bed, which sits left of centre. */
@media (max-width:767px){
	.bm-hero__media{object-position:26% bottom;}
}

/* --- cookie bar: "Refuser" dropped onto a second line -------------------- */
/* Two causes. The bar still used the legacy centred 1312px `.wrapper` instead
   of the site gutter, and its `<p>` is a wrapping flex row whose first item is
   the sentence — so the row broke between the two buttons before the text ever
   wrapped. Align it to the page gutter and let the sentence wrap instead, so
   Accepter and Refuser always stay together. */
.c-notifier .wrapper{
	max-width:none;
	width:100%;
	margin:0;
	padding:0 var(--bm-gutter);
	box-sizing:border-box;
}
@media (min-width:768px){
	.c-notifier p{
		flex-wrap:nowrap;
		justify-content:flex-start;
		text-align:left;
		gap:12px;
	}
	/* the sentence and the two buttons are three flex items, so
	   `space-between` pushed Accepter and Refuser to opposite ends on a wide
	   screen. Park the whole slack before the first button instead. */
	.c-notifier p .btn:first-of-type{margin-left:auto!important;}
}

/* --- colour picker on a phone: the filter row becomes a column, and
   `.bm-cw__field{flex:1 1 320px}` then reads as a 320px HEIGHT, so each
   single select sat in a 320px void ------------------------------------- */
@media (max-width:767px){
	.bm-cw__field{flex:0 0 auto;max-width:none;}
}

/* --- empty basket: no promo field, no 0.00 total, no checkout button ------ */
.cart-modal:not(.hidden) .order-step-1.is-empty .cart-content__footer{display:none;}
.cart-modal:not(.hidden):has(.order-step-1.is-empty.current) .cart-modal__btns{display:none;}
.bm-cart-empty{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:22px;
	padding:48px 20px 40px;
	text-align:center;
}
.bm-cart-empty p{
	margin:0;
	font:400 18px/26px var(--bm-font);
	color:var(--bm-grey);
}

/* --- the basket panel opened UNDER its own dimmer on tablet and phone -----
   The legacy sheet drops the panel to z-index 101 while the body is locked:
   `@media (max-width:1023px){ body.no-scroll .cart-modal{z-index:101} }` —
   (0,3,1), which outranks the `.cart-modal:not(.hidden){z-index:130}` above and
   left the panel below the 120 backdrop. Everything looked greyed out and the
   close button read as unclickable. */
@media (max-width:1023px){
	body.no-scroll .cart-modal:not(.hidden){z-index:130;}
}

/* --- a section whose filters are all single-option (testers, fan decks) now
   renders no filter form at all; drop the empty 300px column with it -------- */
.catalog .search-categories:not(:has(form)){display:none;}

/* ==========================================================================
   CLIENT DOCX 25.08 — #5 family / collection pages get a photo, a description,
   a curated "most popular" strip and a fan-deck CTA
   ========================================================================== */
/* the family banner was deliberately photo-less; the client asked for the same
   treatment benjaminmoore.com gives every "…Paint Colors" page, so a family
   with a photo now uses it and only falls back to the tinted band without one */
.bm-plist__banner--family.bm-plist__banner--shot{min-height:360px;}
.bm-plist__banner--family.bm-plist__banner--shot .bm-plist__shot{display:block;}
@media (max-width:767px){
	.bm-plist__banner--family.bm-plist__banner--shot{min-height:220px;}
}

.bm-plist__intro{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px 40px;
	margin:0 0 30px;
}
.bm-plist__text{
	flex:1 1 520px;
	max-width:760px;
	font:400 16px/24px var(--bm-font);
	color:var(--bm-ink-2);
}
.bm-plist__text p{margin:0 0 10px;}
.bm-plist__text p:last-child{margin-bottom:0;}
.bm-plist__fandeck{flex:0 0 auto;margin:0;}

.bm-plist__popular{margin:0 0 42px;}
.bm-plist__subtitle{
	margin:0 0 18px;
	font:500 32px/38px var(--bm-font);
	color:var(--bm-black);
	text-transform:none;
	letter-spacing:0;
}
@media (max-width:767px){
	.bm-plist__subtitle{font-size:24px;line-height:30px;}
	.bm-plist__intro{margin-bottom:24px;}
}

/* ==========================================================================
   CLIENT DOCX 25.08 — #6 / #6.1 the "Couleurs" landing page
   Every drop-down item gets a card, and each card lists what is inside it so
   the visitor jumps straight to a family / collection / trend.
   ========================================================================== */
.bm-cstart{padding:44px 0 72px;font-family:var(--bm-font);}
.bm-cstart__title{
	margin:0 0 34px;
	font:500 40px/44px var(--bm-font-display);
	color:var(--bm-black);
	text-transform:none;letter-spacing:0;
}
.bm-cstart__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
	gap:34px 32px;
	list-style:none;margin:0;padding:0;
}
.bm-cstart__card{margin:0;padding:0;min-width:0;}
.bm-cstart__head{display:block;text-decoration:none;color:var(--bm-dark);}
.bm-cstart__shot{
	display:block;
	aspect-ratio:256/180;
	background:var(--bm-bg-soft);
	border-radius:var(--bm-r-sm);
	overflow:hidden;
}
.bm-cstart__shot picture{display:block;height:100%;}
.bm-cstart__shot img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	transition:transform .3s ease;
}
.bm-cstart__head:hover .bm-cstart__shot img{transform:scale(1.04);}
.bm-cstart__shot--icon{
	display:flex;align-items:center;justify-content:center;
	color:var(--bm-dark);
}
.bm-cstart__shot--icon svg{width:44px;height:44px;}
.bm-cstart__name{
	display:block;
	margin-top:18px;
	font:500 20px/26px var(--bm-font);
	color:var(--bm-dark);
	border-bottom:1px solid transparent;
}
.bm-cstart__head:hover .bm-cstart__name{border-bottom-color:var(--bm-dark);}
.bm-cstart__list{
	list-style:none;
	margin:12px 0 0;padding:0;
	font:400 15px/22px var(--bm-font);
}
.bm-cstart__list li{margin:0 0 6px;}
.bm-cstart__list a{
	color:var(--bm-ink-2);
	text-decoration:none;
	border-bottom:1px solid transparent;
}
.bm-cstart__list a:hover{border-bottom-color:currentColor;}
@media (max-width:767px){
	.bm-cstart{padding:28px 0 48px;}
	.bm-cstart__title{font-size:28px;line-height:32px;margin-bottom:24px;}
	.bm-cstart__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px;}
	.bm-cstart__name{font-size:17px;line-height:22px;margin-top:12px;}
	.bm-cstart__list{font-size:14px;line-height:20px;}
}

/* --- catalogue head: the purpose chooser sits where the search box was ----- */
.bm-cathead__pick{flex:0 1 420px;max-width:420px;}
.bm-cathead__select{
	width:100%;
	appearance:none;-webkit-appearance:none;
	padding:14px 44px 14px 22px;
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-pill);
	background:var(--bm-white);
	font:400 16px/22px var(--bm-font);
	color:var(--bm-dark);
	cursor:pointer;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232D2D2D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 20px center;
	background-size:12px 8px;
}
.bm-cathead__select:focus{outline:none;border-color:var(--bm-dark);}
@media (max-width:767px){
	.bm-cathead__pick{flex:1 1 100%;max-width:none;}
	.bm-cathead__select{padding:12px 40px 12px 18px;font-size:15px;}
}

/* --- trends: one scrolling row instead of a grid --------------------------
   Client 27.08 #4. A trend carries a different number of colours every year,
   so a grid left the last row ragged and each year would have needed its own
   layout. The rail takes any count without tuning. */
.bm-swrail{align-items:stretch;}
.bm-swrail .bm-sw{
	flex:0 0 210px;
	min-height:190px;
	scroll-snap-align:start;
}
.bm-swrail-wrap .bm-rail__nav{top:calc(50% - 22px);}
@media (max-width:1199px){
	.bm-swrail .bm-sw{flex:0 0 180px;min-height:170px;}
}
@media (max-width:767px){
	.bm-swrail .bm-sw{flex:0 0 150px;min-height:150px;}
	.bm-swrail-wrap .bm-rail__nav{display:none;}
}

/* Guides: the listing card, the article header and the product strip all live
   inside .text-page-content, whose own list and link styles leak into them. */

/* the product strip under an article is the catalogue card, and the catalogue
   card is an <li> — the article bullets every list item in its text column */
.text-page-content .catalog-full-list{padding-left:0;margin-left:0;}
.text-page-content .catalog-full-list>li{list-style:none;}

/* …and rules a line under every link in that column, which is why the cards
   carried a border and an underline the catalogue never shows */
.text-page-content .catalog-full-list .bm-pcard,
.text-page-content .catalog-full-list .bm-pcard:hover,
.text-page-content .catalog-full-list .bm-pcard:focus{
	border:0;
	text-decoration:none;
	line-height:normal;
	color:var(--bm-black);
}

/* Covers on a section listing: one box for every card, the photo whole inside
   it, the way the home rail shows them. Guides carry near-square product shots
   while the editorial articles carry landscape ones, so without a fixed box the
   grid went ragged — 812/517 is the proportion the existing covers already had. */
#inspiration-content .article-item .article-shadow picture,
#inspiration-content .article-item .article-shadow > img{
	display:block;
	width:100%;
	aspect-ratio:812/517;
	background:var(--bm-bg-soft);
}
#inspiration-content .article-item .article-shadow picture img,
#inspiration-content .article-item .article-shadow > img{
	width:100%;
	height:100%;
	object-fit:contain;
}

/* Same for the header shot of an article: it was sized to cover the 682x422
   band, so a square product photo grew past 890px and spilled out of it */
.article-page .page-header-container .right-side{
	overflow:hidden;
	background:var(--bm-bg-soft);
}
.article-page .page-header-container .position--img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-height:0;
	object-fit:contain;
}

/* Qui sommes-nous: the copy starts with a heading, and its 38px top margin sat
   on top of the block's own padding, leaving a bare band under the page title.
   Other text pages open with a paragraph, so this only shows here. */
.text-page-content .article-text > h1:first-child,
.text-page-content .article-text > h2:first-child,
.text-page-content .article-text > h3:first-child{margin-top:0;}

/* Guides cards now carry the article headline instead of the short product
   name (client 09.09), so the caption needs room for four lines — at 20/34 it
   clipped halfway through the third. */
.bm-card--product .bm-card__body{height:155px;}
.bm-card--product .bm-card__text{font:400 17px/24px var(--bm-font);-webkit-line-clamp:4;}

/* "Choisissez une collection" on a phone (client 09.09: desktop is fine, the
   phone layout is not). The four collection pills were declared as a 50/50 wrap,
   but their labels never shrink — "Williamsburg® Paint Color Collection" alone
   is 322px — so every pill took its own row and the dark panel grew past 410px
   for one heading. One swipeable row instead, the way the catalogue pill rows
   already behave on a phone, and the swatch strip lands on a card. */
@media (max-width:767px){
	.bm-collections__aside{padding:32px 27px 28px;}
	/* the aside is a grid item: without min-width:0 its automatic minimum is the
	   width of the whole pill row, so the panel would grow to ~1030px and take
	   the page with it instead of letting the row scroll */
	.bm-collections,
	.bm-collections__aside,
	.bm-collections__filters{min-width:0;}
	.bm-collections__aside{overflow:hidden;}
	.bm-collections__filters{
		flex-wrap:nowrap;
		gap:8px;
		/* márgenes в обе стороны выводят ряд за поля панели; нижний отступ из
		   базового правила при этом затирался, и «Toutes les collections»
		   прилипала к ряду плашек */
		margin:0 -27px 20px;
		padding:2px 27px;
		overflow-x:auto;
		scroll-snap-type:x proximity;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.bm-collections__filters::-webkit-scrollbar{display:none;}
	.bm-collections__filters > *{flex:0 0 auto;scroll-snap-align:start;}
	.bm-swatches{scroll-snap-type:x proximity;}
	.bm-swatches > *{scroll-snap-align:start;}
}

/* --- home: colour of the year (client 09.09, item 4) ----------------------
   Replaces the old hero block. Three stacked pieces: the hero keeps the
   existing .bm-hero geometry, then a preview of the palette, then the trend
   colours as photo cards with the colour itself as the caption ground. */
.bm-coty__eyebrow{
	display:block;
	margin:0 0 14px;
	font:500 14px/18px var(--bm-font);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--bm-white);
	opacity:.85;
}

.bm-cotyp{padding:72px 0;background:var(--bm-bg-soft);}
.bm-cotyp__inner{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:56px;
	align-items:center;
}
.bm-cotyp__shot{display:block;overflow:hidden;border-radius:var(--bm-r-sm);}
.bm-cotyp__shot img,
.bm-cotyp__shot picture{display:block;width:100%;height:auto;}
.bm-cotyp__title{margin:0 0 18px;font:400 40px/48px var(--bm-font-display);color:var(--bm-black);}
.bm-cotyp__text{margin:0 0 28px;}
.bm-cotyp__text p{margin:0 0 12px;font:400 16px/26px var(--bm-font);color:var(--bm-ink-2);}

.bm-cotyc{padding:0 0 84px;background:var(--bm-bg-soft);}
.bm-cotyc__rail{gap:18px;}
.bm-cotyc__card{
	flex:0 0 282px;
	display:flex;
	flex-direction:column;
	text-decoration:none;
	scroll-snap-align:start;
}
.bm-cotyc__media{
	display:block;
	width:282px;
	height:353px;
	flex:0 0 353px;
	overflow:hidden;
	background:var(--bm-line-2);
}
.bm-cotyc__media img,
.bm-cotyc__media picture{display:block;width:100%;height:100%;object-fit:cover;}
.bm-cotyc__body{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:22px 24px 26px;
	box-sizing:border-box;
	min-height:96px;
}
.bm-cotyc__name{font:500 18px/24px var(--bm-font);color:var(--bm-white);}
.bm-cotyc__code{font:400 15px/20px var(--bm-font);color:var(--bm-white);opacity:.8;}
.bm-cotyc__card--light .bm-cotyc__name,
.bm-cotyc__card--light .bm-cotyc__code{color:var(--bm-ink-2);}

@media (max-width:1199px){
	.bm-cotyp{padding:56px 0;}
	.bm-cotyp__inner{gap:32px;}
	.bm-cotyp__title{font-size:32px;line-height:40px;}
}
@media (max-width:767px){
	.bm-cotyp{padding:40px 0;}
	.bm-cotyp__inner{grid-template-columns:1fr;gap:24px;}
	.bm-cotyp__title{font-size:26px;line-height:34px;}
	.bm-cotyc{padding-bottom:56px;}
	.bm-cotyc__card{flex:0 0 240px;}
	.bm-cotyc__media{width:240px;height:300px;flex-basis:300px;}
	.bm-coty__eyebrow{font-size:12px;letter-spacing:.12em;}
}

/* footer nav on a palette page — back to its section and across to the others */
.bm-pnav{padding:0 0 84px;background:var(--bm-white);}
.bm-pnav__inner{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:767px){
	.bm-pnav{padding-bottom:48px;}
	.bm-pnav__inner{gap:10px;}
	.bm-pnav .bm-btn{flex:1 1 100%;justify-content:center;}
}

/* ==== ревью дизайнера 10.09 ============================================== */

/* #1 меню в шапке моргало: между пунктами лежало 53px пустоты (gap на .bm-nav),
   курсор на пути к соседнему пункту терял :hover, выпадашка закрывалась, а на
   главной вдобавок перекрашивалась шапка через :has(). Тот же зазор переносим
   внутрь ссылки — пункты смыкаются, мёртвой зоны нет, визуально ничего не
   сдвигается (левый отступ навигации компенсируем на половину зазора). */
.bm-nav{gap:0;margin-left:calc(clamp(40px,14.65vw,240px) - 26.5px);}
.bm-nav__link{padding:0 26.5px;}
/* подстраховка: закрытие с небольшой задержкой, открытие мгновенное */
.bm-drawer{transition:opacity .2s ease .14s,visibility .2s .14s,transform .2s ease .14s;}
.bm-nav__item--has-sub:hover .bm-drawer,
.bm-nav__item--has-sub:focus-within .bm-drawer{transition-delay:0s;}

/* #6 «Projets»: серая подложка колонки шла ±40px от самой колонки, поэтому
   сверху и снизу оставались белые куски. Привязываем её к секции целиком. */
.user-account .two-col-grid__left{position:static;}
.user-account .two-col-grid__left .bg{top:0;bottom:0;}

/* #10 карточки «Guides produits» на главной: фото должно заполнять кадр.
   Ограничение 273px остаётся у карточек товара — там банки на светлой
   подложке, их обрезать нельзя. Отличаем модификатором. */
.bm-card--product.bm-card--photo .bm-card__media img{
	max-width:none;max-height:none;
	width:100%;height:100%;
	object-fit:cover;
}

/* #2 #5 длинное название коллекции вылезало за тёмную панель на широких
   экранах — обрезаем многоточием, как предлагал дизайнер */
.bm-collections__filters .bm-btn{
	max-width:100%;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/* …но во флекс-колонке элемент — это <li>, а кнопка лежит внутри него: ограничение
   на кнопке считалось от ширины <li>, а тот растягивался по длине названия, и
   «Williamsburg® Paint Color Collection» всё равно уходил за панель. Ограничиваем
   сам <li>. На телефоне ряд плашек прокручивается вбок — там это не нужно. */
@media (min-width:768px){
	.bm-collections__filters > li{max-width:100%;min-width:0;}
}

/* #3 при переключении коллекций высота блока прыгала и двигала всё ниже:
   панели показывались через display:none/block. Держим их все в потоке одной
   ячейкой грида — высота блока равна самой высокой панели и не меняется. */
/* только от планшета: на телефоне панели идут по одной, там переключение не
   двигает соседние блоки в пределах экрана, а лишняя высота была бы заметна */
@media (min-width:768px){
	.bm-collections__main{display:grid;grid-template-columns:minmax(0,1fr);}
	.bm-collections__pane{
		display:block;
		grid-area:1/1;
		min-width:0;
		visibility:hidden;
		opacity:0;
		pointer-events:none;
	}
	.bm-collections__pane.is-active{visibility:visible;opacity:1;pointer-events:auto;}
}

/* #8 ряд плашек коллекций на телефоне вставал не с начала: виновата привязка
   прокрутки, она подтягивала ряд к ближайшей плашке мимо левого поля */
@media (max-width:767px){
	.bm-collections__filters{scroll-snap-type:none;scroll-padding-left:27px;}
	.bm-collections__filters > *{scroll-snap-align:none;}
}

/* #11 #12 иконка фильтра пропала не из-за вёрстки: легаси-CSS ссылается на
   /assets/filter-ico-23f63ac9….svg, а этого файла на диске нет — ссылка отдаёт
   404 и картинка не рисуется. Оригинал не сохранился, поэтому рисуем свою и
   вешаем маской, чтобы она красилась текущим цветом текста, как остальные
   иконки строки. */
.icon--filter{
	background-image:none;
	background-color:currentColor;
	-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'><g fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'><path d='M1 2.6h2.6M8.4 2.6h10.6M1 7.5h8.4M14.2 7.5h4.8M1 12.4h1.8M7.6 12.4h11.4'/><circle cx='6' cy='2.6' r='2.1'/><circle cx='11.8' cy='7.5' r='2.1'/><circle cx='4.7' cy='12.4' r='2.1'/></g></svg>") no-repeat center/contain;
	mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'><g fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'><path d='M1 2.6h2.6M8.4 2.6h10.6M1 7.5h8.4M14.2 7.5h4.8M1 12.4h1.8M7.6 12.4h11.4'/><circle cx='6' cy='2.6' r='2.1'/><circle cx='11.8' cy='7.5' r='2.1'/><circle cx='4.7' cy='12.4' r='2.1'/></g></svg>") no-repeat center/contain;
}

/* #4 подпись цвета на фото коллекции: на светлом снимке белый текст пропадал.
   Яркость угла считается в palette_1.php и на светлом ставится этот класс. */
.bm-shotcolor--onlight,
.bm-shotcolor--onlight .bm-shotcolor__name,
.bm-shotcolor--onlight .bm-shotcolor__name:hover,
.bm-shotcolor--onlight .bm-shotcolor__name:focus,
.bm-shotcolor--onlight .bm-shotcolor__code,
.bm-shotcolor--onlight .bm-sw__add{color:var(--bm-ink-2);}
.bm-shotcolor--onlight{text-shadow:0 1px 8px rgba(255,255,255,.45);}

/* #9 на телефоне полоска образцов лежала целиком на фото (margin-top:-112px —
   ровно высота карточки). Дизайнер хочет как в макете: половина на фото,
   половина на тёмной подложке. Сдвигаем на половину высоты и освобождаем
   место в тексте под полоской. */
@media (max-width:767px){
	.bm-swatches{margin-top:-56px;}
	.bm-collections__copy{padding-top:82px;}
}

/* #7 в корзине банка вылезала на 10px выше цветной плашки. Ставим её вплотную
   к верхней кромке и добавляем те же 13px снизу, чтобы линия раздела осталась
   ровно по середине банки, как просил дизайнер. */
.cart-modal:not(.hidden) .cart-product__info{min-height:131px;}
.cart-modal:not(.hidden) .cart-product__info img{top:0;}

/* #13 цветная плашка в карточке товара уезжала после скролла/касания на
   телефоне: она рисовалась как 100vw с left:50% и translateX(-50%). На iOS
   100vw не совпадает с видимой шириной, а горизонтальный «резиновый» сдвиг
   при касании смещает такой блок. .product-show-page и так занимает всю
   ширину, поэтому растягиваем плашку по краям родителя — без vw и transform. */
.product-show-page.is-tinted::before{
	left:0;
	right:0;
	width:auto;
	transform:none;
}

/* #16 меню открывалось под корзиной: открытая корзина занимает z-index 130,
   а мобильное меню оставалось на 102/103. Поднимаем меню над корзиной, а
   панель логина — над меню, чтобы порядок был предсказуемым. */
@media (max-width:1199px){
	.mobile-menu-container{z-index:140;}
	.mobile-menu__panel{z-index:141;}
}
.login-form.visible{z-index:150;}

/* #15 при оформлении не видно, что список полей продолжается вниз: показываем
   тонкую полоску прокрутки и оставляем под неё место справа */
@media (max-width:767px){
	.cart-modal:not(.hidden) .cart-content__body,
	.cart-modal:not(.hidden) .js-cart-modal__products,
	.cart-modal:not(.hidden) .order-step{
		scrollbar-width:thin;
		scrollbar-color:rgba(29,38,47,.35) transparent;
	}
	.cart-modal:not(.hidden) .cart-content__body::-webkit-scrollbar,
	.cart-modal:not(.hidden) .js-cart-modal__products::-webkit-scrollbar,
	.cart-modal:not(.hidden) .order-step::-webkit-scrollbar{display:block;width:4px;}
	.cart-modal:not(.hidden) .cart-content__body::-webkit-scrollbar-thumb,
	.cart-modal:not(.hidden) .js-cart-modal__products::-webkit-scrollbar-thumb,
	.cart-modal:not(.hidden) .order-step::-webkit-scrollbar-thumb{
		background:rgba(29,38,47,.35);
		border-radius:4px;
	}
	.cart-modal:not(.hidden) .order-step{padding-right:14px;}
}

/* #14 страница оплаты/заказа на телефоне: шапка таблицы скрывается, и значения
   оставались без подписей — голые «1» и «171,00 €». Подписи берём из тех же
   слов словаря, что и шапка (data-label в template/user/order.php). */
@media (max-width:767px){
	.order-page .order-product .cell[data-label]{
		display:flex;
		align-items:baseline;
		justify-content:space-between;
		gap:12px;
	}
	.order-page .order-product .cell[data-label]::before{
		content:attr(data-label);
		flex:0 0 auto;
		font:400 14px/22px var(--bm-font);
		color:var(--bm-grey);
	}
	.order-page .order-product .cell[data-label] p{margin:0;text-align:right;}
}

/* ==========================================================================
   КЛИЕНТ 10.09 — п.1 статья про цвет года и п.2 страницы тенденций
   Страница тенденции собрана по образцу benjaminmoore.com: цвет года крупным
   блоком, палитра, интерьеры с подписями цветов, ссылка на статью. Всё
   появляется только при заполненных данных, поэтому год без цвета года и без
   галереи выглядит как раньше.
   ========================================================================== */

/* --- цвет года на странице тенденции ------------------------------------- */
.bm-coty2{padding:72px 0;background:var(--bm-bg-soft);}
.bm-coty2__inner{
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
	gap:56px;
	align-items:center;
}
.bm-coty2__shot{display:block;overflow:hidden;border-radius:var(--bm-r-sm);background:var(--bm-line-2);}
.bm-coty2__shot img,
.bm-coty2__shot picture{display:block;width:100%;height:auto;}
.bm-coty2__eyebrow{
	display:block;
	margin:0 0 14px;
	font:500 12px/16px var(--bm-font);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--bm-grey);
}
.bm-coty2__name{
	margin:0 0 18px;
	font:400 40px/48px var(--bm-font-display);
	color:var(--bm-black);
}
.bm-coty2__name span{color:var(--bm-grey);}
.bm-coty2__sw{
	display:block;
	width:120px;
	height:56px;
	margin:0 0 24px;
	border-radius:var(--bm-r-sm);
}
.bm-coty2--light .bm-coty2__sw{box-shadow:inset 0 0 0 1px var(--bm-line-2);}
.bm-coty2__text{margin:0 0 28px;}
.bm-coty2__text p{margin:0 0 12px;font:400 16px/26px var(--bm-font);color:var(--bm-ink-2);}
.bm-coty2__text p:last-child{margin-bottom:0;}
.bm-coty2__row{display:flex;flex-wrap:wrap;gap:12px 16px;}
.bm-coty2__row .bm-btn{margin:0;}
@media (max-width:1023px){
	.bm-coty2__inner{gap:32px;}
	.bm-coty2__name{font-size:32px;line-height:40px;}
}
@media (max-width:767px){
	.bm-coty2{padding:40px 0;}
	.bm-coty2__inner{grid-template-columns:minmax(0,1fr);gap:24px;}
	.bm-coty2__name{font-size:28px;line-height:34px;}
	.bm-coty2__sw{width:96px;height:44px;margin-bottom:18px;}
}

/* --- интерьеры палитры с подписью цвета ---------------------------------- */
.bm-pgal{margin:56px 0 0;}
.bm-pgal__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:24px;
}
.bm-pgal__item{
	display:flex;
	flex-direction:column;
	gap:12px;
	text-decoration:none;
	border:0;
	color:var(--bm-black);
}
.bm-pgal__media{
	display:block;
	overflow:hidden;
	border-radius:var(--bm-r-sm);
	background:var(--bm-bg-soft);
	aspect-ratio:4/5;
}
.bm-pgal__media img,
.bm-pgal__media picture{display:block;width:100%;height:100%;object-fit:cover;}
.bm-pgal__media picture img{border-radius:0;}
.bm-pgal__tag{display:flex;align-items:center;gap:10px;min-width:0;}
.bm-pgal__dot{
	flex:0 0 auto;
	width:18px;
	height:18px;
	border-radius:50%;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.bm-pgal__cname{
	flex:0 1 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font:500 15px/22px var(--bm-font);
	color:var(--bm-black);
}
.bm-pgal__ccode{flex:0 0 auto;font:400 14px/22px var(--bm-font);color:var(--bm-grey);}
.bm-pgal__item:hover .bm-pgal__cname{opacity:.7;}
@media (max-width:767px){
	.bm-pgal{margin-top:36px;}
	.bm-pgal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
	.bm-pgal__cname{font-size:14px;}
}

/* --- «читайте также»: статья, привязанная к палитре ---------------------- */
.bm-pread{margin:56px 0 0;}
.bm-pread__grid{
	display:grid;
	/* auto-fill c 1fr отдавало одинокой карточке ровно 320px, и текст в ней
	   ужимался до 120px — трек ограничен сверху, поэтому одна карточка
	   занимает нормальную ширину, а не всю строку */
	grid-template-columns:repeat(auto-fill,minmax(320px,480px));
	gap:24px;
	justify-content:start;
}
.bm-pread__item{
	display:grid;
	grid-template-columns:160px minmax(0,1fr);
	gap:20px;
	align-items:center;
	padding:16px;
	border:1px solid var(--bm-line-2);
	border-radius:var(--bm-r-sm);
	text-decoration:none;
	color:var(--bm-black);
	background:var(--bm-white);
}
.bm-pread__item:hover{border-color:var(--bm-line);}
.bm-pread__media{
	display:block;
	overflow:hidden;
	border-radius:var(--bm-r-sm);
	background:var(--bm-bg-soft);
	aspect-ratio:4/3;
}
.bm-pread__media img,
.bm-pread__media picture{display:block;width:100%;height:100%;object-fit:cover;}
.bm-pread__body{display:block;min-width:0;}
.bm-pread__name{display:block;margin:0 0 8px;font:500 18px/24px var(--bm-font);}
.bm-pread__text{display:block;font:400 14px/22px var(--bm-font);color:var(--bm-grey);}
@media (max-width:767px){
	.bm-pread{margin-top:36px;}
	.bm-pread__grid{grid-template-columns:minmax(0,1fr);gap:14px;}
	.bm-pread__item{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:12px;}
	.bm-pread__name{font-size:16px;line-height:22px;}
}

/* --- в статье: брошюра, цвет года, палитра ------------------------------- */
.bm-acta{margin:36px 0;}
.bm-acta__row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 16px;
	padding:22px 0;
	border-top:1px solid var(--bm-line-2);
	border-bottom:1px solid var(--bm-line-2);
}
/* .text-page-content подчёркивает каждую ссылку в тексте — кнопкам это ни к чему */
.bm-acta__row .bm-btn,
.bm-acta__row .bm-btn:hover,
.bm-acta__row .bm-btn:focus{
	margin:0;
	border-bottom-width:1px;
	text-decoration:none;
	line-height:normal;
}
/* .text-page-content a ставит color:inherit и специфичностью бьёт саму кнопку —
   тёмная кнопка получала тёмный текст на тёмном фоне */
.bm-acta__row .bm-btn--black,
.bm-acta__row .bm-btn--black:hover,
.bm-acta__row .bm-btn--black:focus{color:var(--bm-white);}
.bm-acta__row .bm-btn--onlight,
.bm-acta__row .bm-btn--onlight:hover,
.bm-acta__row .bm-btn--onlight:focus{color:var(--bm-ink-2);}
.bm-acta__dot{
	display:inline-block;
	width:14px;
	height:14px;
	margin-right:10px;
	border-radius:50%;
	vertical-align:-2px;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
@media (max-width:767px){
	.bm-acta{margin:24px 0;}
	.bm-acta__row{padding:16px 0;gap:10px 12px;}
}

/* --- подпись под фотографией внутри статьи ------------------------------- */
.bm-figcap{
	display:block;
	margin:10px 0 0;
	font:400 14px/20px var(--bm-font);
	color:var(--bm-grey);
}

/* Полоса цветов в статье: карточки лежали одной строкой без переноса, и восемь
   цветов Color Trends уезжали за край текстовой колонки. Сетка подстраивается
   под любое их число — у статьи с двумя цветами вид не меняется. */
.article-news--colors .news-colors{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:26px 30px;
}
.article-news--colors .news-colors__item{margin:0;}
@media (max-width:767px){
	/* два в ряд: восемь цветов одной колонкой уводили начало текста статьи
	   почти на экран вниз */
	.article-news--colors .news-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}
	.article-news--colors .paint-short{gap:10px;}
	.article-news--colors .paint-short .btn{white-space:normal;}
}

/* Ряд «Partager» — легаси-компонент: иконки рисовались фоновыми картинками, и при
   наведении легаси-CSS подменял их на синий вариант (такого цвета в редизайне нет),
   а сами ссылки, будучи обычными <a> в текстовой колонке, получали от
   .text-page-content / .bm-pdetails подчёркивающую линию под каждой иконкой 20×20.
   Знаки теперь те же фирменные, что в подвале (template/inc/share_icons.php), и
   ведут себя как остальные иконки — меняется только прозрачность.
   Селектор в два класса: правила легаси и текстовой колонки тоже двухклассовые. */
.social-share-button a.ssb-icon,
.social-share-button a.ssb-icon:hover,
.social-share-button a.ssb-icon:focus{
	width:20px;
	height:20px;
	background-image:none;
	border-bottom:0;
	text-decoration:none;
	line-height:0;
	color:var(--bm-ink-2);
	opacity:1;
}
.social-share-button a.ssb-icon:hover{opacity:.7;}
.social-share-button a.ssb-icon svg{display:block;width:20px;height:20px;}

/* ==========================================================================
   КЛИЕНТ 11.09 п.2 — быстрый набор тестеров прямо из палитры
   Кнопка живёт в плашке цвета по тому же принципу, что «Ajouter au projet» в
   каталоге: тем же размером, тем же currentColor, чтобы читалась и на светлом,
   и на тёмном цвете. Появляется только в палитре тестера (data-quick-add).
   ========================================================================== */
.bm-cw__add{
	position:absolute;right:10px;bottom:10px;
	width:22px;height:22px;padding:0;
	display:flex;align-items:center;justify-content:center;
	border:0;background:none;cursor:pointer;
	color:inherit;opacity:.65;
	transition:opacity .15s ease,transform .15s ease;
}
.bm-cw__add svg{width:18px;height:18px;display:block;}
.bm-cw__add:hover{opacity:1;transform:scale(1.12);}
.bm-cw__add:disabled{cursor:default;}
.bm-cw__add.is-done{opacity:1;}
.bm-cw__add.is-done::after{
	content:'';position:absolute;inset:-5px;
	border:1px solid currentColor;border-radius:50%;
	opacity:.5;
}
/* строка под плашками: сколько набрали и переход в корзину.
   Появляется только после первого добавления — до него её нет в разметке. */
.bm-cw__qa{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:14px 20px;
	margin:26px 0 0;
	padding:18px 0 0;
	border-top:1px solid var(--bm-line-2);
}
.bm-cw__qa-n{font:500 16px/24px var(--bm-font);color:var(--bm-ink-2);}
.bm-cw__qa .bm-btn{margin:0;}
@media (max-width:767px){
	.bm-cw__qa{margin-top:18px;padding-top:14px;}
	.bm-cw__qa .bm-btn{width:100%;}
}

/* Клиент 14.09: /fr/colors/application-mobile «поехала». Шаблон текстовой страницы
   заворачивает контент в .article-news--row, а у легаси-правила
   `.article-news--row .wrapper{display:flex}` нет ограничения на прямого потомка.
   В этой странице контент вставлен вместе со своей обёрткой .article-news >
   .wrapper (так его скопировали со старого сайта), и вложенная обёртка тоже
   становилась флекс-контейнером — абзацы выстраивались в строку и налезали друг
   на друга. Вложенную обёртку возвращаем в обычный поток. */
.article-news--row .wrapper .wrapper{display:block;}

/* --- клиент 22.09 п.1: карточка коллекции в списке ------------------------
   Подпись «какой цвет на фотографии» и полоска цветов, которую клиент набирает
   сам (поле «Most popular» в карточке палитры). Раньше полоска была всегда из
   первых пяти по порядку, то есть OC-1…OC-5, и ничего не говорила о коллекции. */
.bm-pfam__row--c1{grid-template-columns:repeat(1,minmax(0,1fr));}
.bm-pfam__row--c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.bm-pfam__row--c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.bm-pfam__row--c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.bm-pfam__row--c5{grid-template-columns:repeat(5,minmax(0,1fr));}

.bm-pfam__pick{
	position:absolute;
	z-index:3;
	top:28px;
	right:var(--bm-gutter);
	display:inline-flex;
	align-items:center;
	gap:12px;
	max-width:calc(100% - var(--bm-gutter) * 2);
	padding:10px 16px;
	box-sizing:border-box;
	border-radius:999px;
	/* фотографии светлые и тёмные вперемешку, поэтому подпись несёт свою подложку */
	background:rgba(0,0,0,.46);
	color:var(--bm-white);
	text-decoration:none;
	transition:background .2s ease;
}
.bm-pfam__pick:hover{background:rgba(0,0,0,.62);}
.bm-pfam__pickchip{
	display:block;
	width:22px;height:22px;
	flex:none;
	border-radius:50%;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.bm-pfam__picktext{display:flex;flex-direction:column;min-width:0;}
.bm-pfam__pickname{
	font:400 18px/22px var(--bm-font);
	color:var(--bm-white);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.bm-pfam__pickcode{font:400 14px/18px var(--bm-font);color:rgba(255,255,255,.78);}

@media (max-width:1199px){
	.bm-pfam__pick{top:20px;padding:8px 14px;gap:10px;}
	.bm-pfam__pickchip{width:18px;height:18px;}
	.bm-pfam__pickname{font-size:16px;line-height:20px;}
	.bm-pfam__pickcode{font-size:13px;line-height:16px;}
}
@media (max-width:767px){
	.bm-pfam__pick{top:14px;padding:7px 12px;gap:8px;}
	.bm-pfam__pickchip{width:16px;height:16px;}
	.bm-pfam__pickname{font-size:14px;line-height:18px;}
	.bm-pfam__pickcode{font-size:12px;line-height:15px;}
	/* на телефоне полоска в две колонки — иначе цвета становятся нечитаемо узкими */
	.bm-pfam__row--c3,
	.bm-pfam__row--c4,
	.bm-pfam__row--c5{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* клиент 22.09 п.2: те же карточки коллекций внутри статьи — отбиваем от текста
   и от подвала, заголовка раздела здесь нет, его роль играет заголовок статьи */
.bm-pindex--inarticle{padding-top:12px;margin-top:8px;}
.bm-pindex--inarticle .bm-pfam:last-child{margin-bottom:0;}