/**
 * Bradford Gallery Manager - editorial section widgets.
 * Ported from the hand-coded /gallery/ page (g2-* rules), resolved to their
 * final cascaded state and namespaced under .bgm-sec so nothing leaks.
 */

.bgm-sec {
	--bgm-ink: #171717;
	--bgm-muted: #5a5a52;
	--bgm-dim: #6a6a62;
	--bgm-faint: #8a8477;
	--bgm-soft: #ffffff;
	--bgm-line: #e5e1d7;
	--bgm-plate: #f0f0f0;
	--bgm-serif: "Noto Serif", Georgia, serif;
	--bgm-sans: "Montserrat", system-ui, -apple-system, sans-serif;
	color: var(--bgm-ink);
}

.bgm-sec *,
.bgm-sec *::before,
.bgm-sec *::after { box-sizing: border-box; }

.bgm-sec .bgm-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

.bgm-sec-block { padding: clamp(46px, 5vw, 74px) 0; }

/* Typography - declared outright so the section does not depend on theme rules */
.bgm-sec h1,
.bgm-sec h2,
.bgm-sec h3 {
	font-family: var(--bgm-serif);
	font-weight: 400;
	color: var(--bgm-ink);
	line-height: 1.18;
}
.bgm-sec h1 { font-size: clamp(38px, 4.6vw, 62px); margin: 6px 0 16px; }
.bgm-sec h2 { font-size: clamp(30px, 3.2vw, 44px); margin: 0; }
.bgm-sec h3 { font-size: clamp(18px, 1.6vw, 24px); margin: 0 0 4px; }
.bgm-sec p { line-height: 1.6; }

.bgm-sec .bgm-eyebrow {
	font-family: var(--bgm-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bgm-faint);
	margin: 0 0 14px;
}

.bgm-sec .bgm-lede { color: var(--bgm-muted); margin: 8px 0 26px; }

.bgm-sec a { color: var(--bgm-ink); text-decoration: none; }
.bgm-sec a:hover { opacity: .65; }

.bgm-sec .bgm-link {
	font-family: var(--bgm-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	display: inline-block;
	color: var(--bgm-ink);
}
.bgm-sec .bgm-link b { font-weight: 700; }

/* ---------------- Hero ---------------- */
.bgm-hero { padding-top: clamp(120px, 12vw, 168px); padding-bottom: 0; }
.bgm-hero .bgm-wrap { text-align: center; max-width: 720px; }
.bgm-hero .bgm-sub {
	max-width: 560px;
	margin: 0 auto 22px;
	color: #54544c;
}

/* ---------------- Category cards (image above, text below) ---------------- */
.bgm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bgm-card { display: block; color: var(--bgm-ink); }
.bgm-card-shot { position: relative; display: block; overflow: hidden; margin: 0 0 16px; }
.bgm-card-shot { aspect-ratio: 1 / 1; }
.bgm-card-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	background: var(--bgm-plate);
	transition: transform .45s;
}
.bgm-card:hover .bgm-card-shot img { transform: scale(1.04); }
.bgm-tag {
	position: absolute;
	bottom: 18px;
	right: 24px;
	z-index: 6;
	font-family: var(--bgm-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	opacity: .92;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
	pointer-events: none;
}
.bgm-card h3 { margin: 0 0 8px; }
.bgm-card p { color: var(--bgm-muted); font-size: 14px; margin: 0 0 12px; }

/* ---------------- Tile rows ---------------- */
.bgm-row { display: grid; gap: 26px; }
.bgm-row.c2 { grid-template-columns: repeat(2, 1fr); }
.bgm-row.c3 { grid-template-columns: repeat(3, 1fr); }
.bgm-row.c4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bgm-row.c5 { grid-template-columns: repeat(5, 1fr); }

.bgm-tile { display: block; color: var(--bgm-ink); }
.bgm-shot {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bgm-plate);
	margin-bottom: 12px;
}
.bgm-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s;
}
.bgm-tile:hover .bgm-shot img { transform: scale(1.04); }
.bgm-kicker {
	font-family: var(--bgm-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: var(--bgm-ink);
	margin: 0 0 4px;
}
.bgm-tile h3 { margin: 0 0 4px; }
.bgm-tile .bgm-desc { font-size: 13px; color: var(--bgm-muted); line-height: 1.45; margin: 0 0 8px; }

/* ---------------- Skin: "Home page (editorial tiles)" ----------------
   Reproduces the .hpx .g2-tile row of the home page (2026-09-17, site clean-up Phase 2) so the
   Trend Alert section can be served by this widget with no visible change: ink 14px eyebrow,
   heading with 8px below, centred 52ch intro, 30px before the row, 26px gaps, 1-col under 560px,
   white plate, larger tile title, hover dims the link only (not the whole tile). */
.bgm-skin-g2.bgm-sec-block { padding: 0; }
.bgm-skin-g2 .bgm-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; color: var(--bgm-ink); margin: 0 0 14px; }
.bgm-skin-g2 h2 { margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.bgm-skin-g2 .bgm-lede { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.4; color: var(--bgm-dim); max-width: 52ch; margin: 8px auto 30px; text-align: center; }
.bgm-skin-g2 .bgm-row.c4 { gap: 26px; }
.bgm-skin-g2 .bgm-shot { background: #fff; }
.bgm-skin-g2 .bgm-shot img { transition: transform .45s; }
.bgm-skin-g2 .bgm-tile h3 { font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 6px; line-height: 1.2; }
.bgm-skin-g2 .bgm-kicker { margin: 0 0 4px; line-height: 1.5; }
.bgm-skin-g2 a.bgm-tile:hover { opacity: 1; }
.bgm-skin-g2 .bgm-tile:hover .bgm-link { opacity: .6; }
@media (max-width: 900px) {
	.bgm-sec.bgm-skin-g2 .bgm-wrap { padding: 0 32px; } /* the home page keeps its 32px gutter on phones; outranks the 20px rule below */
}
@media (max-width: 560px) {
	.bgm-skin-g2 .bgm-row.c4 { grid-template-columns: 1fr; }
}

/* Finish tiles carry a fixed heading size in the reference design */
.bgm-finishes .bgm-tile h3 { font-size: 22px; }

/* ---------------- Brand logos ---------------- */
.bgm-makers { display: grid; grid-template-columns: 1fr 2.4fr; gap: 30px; align-items: center; }
.bgm-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bgm-logo {
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}
.bgm-logo img { max-width: 100%; max-height: 86px; width: auto; height: auto; mix-blend-mode: multiply; }

/* ---------------- Projects ---------------- */
.bgm-projects-head { text-align: center; }
.bgm-projects-head .bgm-lede { margin: 8px 0 30px; }
.bgm-projgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.bgm-projgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.bgm-projgrid.c4 { grid-template-columns: repeat(4, 1fr); }
.bgm-proj { display: block; color: var(--bgm-ink); cursor: pointer; }
.bgm-proj .bgm-shot { margin-bottom: 0; }
/* Every card image is a filled square; the site-wide img{height:auto} rule must not win here. */
.bgm-sec .bgm-shot img, .bgm-sec .bgm-card-shot img { height: 100% !important; width: 100% !important; object-fit: cover; object-position: center; }
.bgm-proj-ey {
	display: block;
	font-family: var(--bgm-sans);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bgm-faint);
	margin: 14px 0 4px;
}
.bgm-proj h3 { font-size: 22px; margin: 0 0 6px; }
.bgm-proj-view {
	font-family: var(--bgm-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1.5px solid var(--bgm-ink);
	padding-bottom: 2px;
	color: var(--bgm-ink);
}
.bgm-projgrid:not(.is-all) .bgm-proj.is-more { display: none; }

/* Skin "Home page" for the projects row (site clean-up Phase 2, 2026-09-17): the home page's
   .pw-grid-hp — 4 columns with 26/22px gaps, two columns below 900px (also on phones), brand tag
   hidden on the cards, no block padding, header rendered by the page instead of the widget. */
.bgm-skin-g2.bgm-projects.bgm-sec-block { padding: 0; }
.bgm-sec.bgm-skin-g2.bgm-projects .bgm-wrap { max-width: none; padding: 0; } /* the page section supplies the 1200/32px wrap */
.bgm-skin-g2 .bgm-projects-head:empty { display: none; }
.bgm-skin-g2 .bgm-projgrid.c4 { gap: 26px 22px; }
.bgm-skin-g2 .bgm-proj .bgm-tag { display: none; }
.bgm-skin-g2 .bgm-proj h3 { line-height: 1.2; }
@media (max-width: 900px) {
	.bgm-sec.bgm-skin-g2 .bgm-projgrid.c4 { grid-template-columns: 1fr 1fr; }
	.bgm-sec.bgm-skin-g2.bgm-projects .bgm-wrap { padding: 0; }
}
@media (max-width: 520px) {
	.bgm-sec.bgm-skin-g2 .bgm-projgrid.c4 { grid-template-columns: 1fr 1fr; }
}
.bgm-morewrap { text-align: center; margin-top: 38px; }
.bgm-more-btn {
	font-family: var(--bgm-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: none;
	border: 0;
	border-bottom: 1.5px solid var(--bgm-ink);
	color: var(--bgm-ink);
	padding: 0 0 3px;
	cursor: pointer;
}
.bgm-more-btn b { font-weight: 400; font-size: 13px; }

/* Project modal */
.bgm-pmodal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(23, 23, 23, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 5vh 20px;
}
.bgm-psheet { background: #fff; max-width: 1040px; width: 100%; padding: 44px 48px 60px; position: relative; }
.bgm-pmodal.bgm-sec .bgm-pclose {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 28px;
	line-height: 1;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--bgm-ink);
}
.bgm-sec .bgm-lede a { color: var(--bgm-ink); text-decoration: underline; text-underline-offset: 3px; }
.bgm-psheet h2 { font-size: 38px; margin: 8px 0 14px; }
.bgm-pey { font-family: var(--bgm-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bgm-faint); margin: 0; }
.bgm-pmeta { display: flex; gap: 44px; margin: 12px 0 16px; flex-wrap: wrap; }
.bgm-pmeta .k { font-family: var(--bgm-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bgm-faint); margin-bottom: 3px; display: block; }
.bgm-pmeta .v { font-family: var(--bgm-serif); font-size: 16px; }
.bgm-pmeta .v a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bgm-pblurb { color: var(--bgm-muted); font-size: 16px; line-height: 1.6; max-width: 600px; margin: 0 0 26px; }
.bgm-pgal .bgm-pgal-item { display: block; overflow: hidden; background: var(--bgm-plate); }
.bgm-pgal .bgm-pgal-item img { cursor: zoom-in; }
.bgm-pgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bgm-pgal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--bgm-plate); }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
	.bgm-sec .bgm-wrap { padding: 0 20px; }
	.bgm-cards,
	.bgm-makers { grid-template-columns: 1fr; }
	.bgm-row.c4,
	.bgm-row.c5 { grid-template-columns: 1fr 1fr; }
	.bgm-projgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.bgm-logos { grid-template-columns: repeat(3, 1fr); }
	.bgm-psheet { padding: 32px 22px; }
	.bgm-pgal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.bgm-row.c4,
	.bgm-row.c5,
	.bgm-projgrid { grid-template-columns: 1fr; }
}

/* ---------------- Buttons inside our components ----------------
   The Elementor kit styles every <button> (accent background, focus ring).
   Reset with higher specificity so no theme colour bleeds into the gallery. */
.bgm-sec [hidden] { display: none !important; }
.bgm-sec button,
.bgm-sec [type="button"] {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--bgm-sans);
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--bgm-ink);
	box-shadow: none;
	text-shadow: none;
	padding: 0;
	line-height: 1;
	cursor: pointer;
}
.bgm-sec button:hover,
.bgm-sec button:focus,
.bgm-sec button:active {
	background: none;
	background-color: transparent;
	color: var(--bgm-ink);
	box-shadow: none;
	outline: none;
}
.bgm-sec button:focus-visible { outline: 2px solid var(--bgm-ink); outline-offset: 2px; }

/* ---------------- Justified mosaic ----------------
   Rows of images scaled to fill the width at their own ratio (sized by JS,
   see sections.js justify()). Nothing is cropped; squares keep the column
   rhythm of the reference grid. */
.bgm-mosaic {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-content: flex-start;
}
.bgm-mosaic > .bgm-cell { flex: 0 0 auto; }
.bgm-mosaic > .bgm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- The Collection modal (grid → detail) ----------------
   Port of the site-wide ng-modal the reference cards open. */
.bgm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(23, 23, 23, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 3vh 16px;
	font-family: var(--bgm-sans);
	color: var(--bgm-ink);
	-webkit-overflow-scrolling: touch;
}
body.bgm-modal-open { overflow: hidden; }

.bgm-modal .bgm-sheet {
	background: #fff;
	max-width: 1600px;
	width: 100%;
	padding: 40px 44px 48px;
	position: relative;
	min-height: 40vh;
}
.bgm-modal.bgm-sec .bgm-x {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 28px;
	line-height: 1;
	color: var(--bgm-ink);
	z-index: 2;
	width: 32px;
	height: 32px;
}

.bgm-modal .bgm-m-ey {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bgm-faint);
	text-align: center;
	margin: 0;
}
.bgm-modal .bgm-m-title {
	font-family: var(--bgm-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.15;
	text-align: center;
	margin: 8px 0 4px;
	color: var(--bgm-ink);
}
.bgm-modal .bgm-m-count { text-align: center; color: var(--bgm-faint); font-size: 13px; margin: 0 0 26px; }

.bgm-modal .bgm-m-grid { gap: 14px; }
.bgm-modal .bgm-m-cell {
	display: block;
	overflow: hidden;
	background: #f0f0f0;
	cursor: pointer;
	position: relative;
}
.bgm-modal .bgm-m-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.bgm-modal .bgm-m-cell:hover img { transform: scale(1.05); }
.bgm-modal .bgm-m-msg { grid-column: 1 / -1; text-align: center; color: var(--bgm-faint); padding: 40px 0; font-size: 14px; }

.bgm-modal .bgm-m-foot { text-align: center; margin-top: 30px; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.bgm-modal .bgm-m-foot a,
.bgm-modal.bgm-sec .bgm-m-foot button {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1.5px solid var(--bgm-ink);
	padding-bottom: 2px;
	color: var(--bgm-ink);
	text-decoration: none;
}

.bgm-modal.bgm-sec .bgm-m-back {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bgm-ink);
	margin-bottom: 20px;
}

.bgm-modal .bgm-m-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 44px;
	align-items: start;
}
.bgm-modal .bgm-m-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	width: min(100%, 86vh);
	margin-inline: auto;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgm-modal .bgm-m-stage img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f0f0f0; }
.bgm-modal.bgm-sec .bgm-m-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(0, 0, 0, .12);
	font-size: 20px;
	color: var(--bgm-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: .12s;
}
.bgm-modal.bgm-sec .bgm-m-nav:hover { background: var(--bgm-ink); color: #fff; }
.bgm-modal .bgm-m-prev { left: 14px; }
.bgm-modal .bgm-m-next { right: 14px; }

.bgm-modal .bgm-m-row { padding: 12px 0; border-bottom: 1px solid #eee; }
.bgm-modal .bgm-m-row .k { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bgm-faint); margin-bottom: 4px; }
.bgm-modal .bgm-m-row .v { font-family: var(--bgm-serif); font-size: 20px; color: var(--bgm-ink); line-height: 1.3; }
.bgm-modal .bgm-m-row .v a { color: inherit; text-decoration: none; }
.bgm-modal .bgm-m-row .v a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bgm-modal .bgm-m-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.bgm-modal .bgm-m-actions a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 16px;
	border: 1.5px solid var(--bgm-ink);
	color: var(--bgm-ink);
	background: #fff;
	transition: .12s;
}
.bgm-modal .bgm-m-actions a:hover { background: var(--bgm-ink); color: #fff; opacity: 1; }
.bgm-modal .bgm-m-actions svg { width: 14px; height: 14px; fill: currentColor; }
.bgm-modal .bgm-m-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; scrollbar-width: thin; }
.bgm-modal .bgm-m-thumbs img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; cursor: pointer; opacity: .55; transition: opacity .2s; }
.bgm-modal .bgm-m-thumbs img:hover { opacity: .85; }
.bgm-modal .bgm-m-thumbs img.is-on { opacity: 1; outline: 2px solid var(--bgm-ink); outline-offset: -2px; }

@media (max-width: 1024px) {
	.bgm-modal .bgm-m-detail { grid-template-columns: 1fr; }
	.bgm-modal .bgm-m-stage { width: min(100%, 72vh); }
}
@media (max-width: 760px) {
	.bgm-modal { padding: 0; }
	.bgm-modal .bgm-sheet { padding: 32px 22px 40px; min-height: 100vh; }
	.bgm-modal .bgm-m-title { font-size: 30px; }
}

/* Gallery card sits in a wider wrap than the editorial sections. */
.bgm-sec .bgm-wrap-wide { max-width: 1280px; }
.bgm-gallery-w.bgm-sec-block { padding-top: clamp(30px, 4vw, 54px); }


/* ---------------- Brand Card Rail (bgm_brand_cards) ----------------
   Ported 2026-09-17 from the home page's #fbc block (.fbc-*) plus the column sizing that
   snippet 74470 (bhf-peek-css) added: 2.5 cards per view on desktop so a half card always
   peeks at the right edge, 1.5 on tablets, 80vw on phones (arrows hidden there). Arrows use
   class + descendant selectors so the theme reset's [type=button] rules cannot recolour them. */
.bgm-bcr{font-family:'Montserrat',sans-serif;color:#171717;box-sizing:border-box;margin-top:8px}
.bgm-bcr *{box-sizing:border-box}
.bgm-bcr-wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative}
.bgm-bcr-carousel{position:relative}
.bgm-bcr-rail{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:calc((100% - 52px) / 2.5);column-gap:26px;row-gap:26px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 16px;scrollbar-width:none}
.bgm-bcr[data-rows="1"] .bgm-bcr-rail{grid-template-rows:1fr}
.bgm-bcr-rail::-webkit-scrollbar{display:none}
.bgm-bcr-rail:focus-visible{outline:1.5px solid #171717;outline-offset:2px}
.bgm-bcr-card{width:100%;aspect-ratio:1/1;scroll-snap-align:start;display:block;line-height:0;overflow:hidden;text-decoration:none}
/* height/width !important: Elementor's .elementor img{height:auto} would otherwise shorten the non-square cards */
.bgm-bcr-card img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:left center;display:block;transition:transform .5s ease}
.bgm-bcr-card:hover img{transform:scale(1.03)}
.bgm-bcr .bgm-bcr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;padding:0;border-radius:50%;border:1px solid #E2DDD2;background:#F3EFE7;box-shadow:0 3px 14px rgba(23,23,23,.13);font-size:22px;line-height:1;cursor:pointer;color:#171717;display:flex;align-items:center;justify-content:center;transition:background .2s ease,box-shadow .2s ease;font-family:inherit}
.bgm-bcr .bgm-bcr-arrow:hover,.bgm-bcr .bgm-bcr-arrow:focus{background:#fff;box-shadow:0 4px 18px rgba(23,23,23,.2);color:#171717;border-color:#E2DDD2}
.bgm-bcr .bgm-bcr-arrow:focus-visible{outline:1.5px solid #171717;outline-offset:2px}
.bgm-bcr .bgm-bcr-arrow.prev{left:-8px}
.bgm-bcr .bgm-bcr-arrow.next{right:-8px}
.bgm-bcr .bgm-bcr-arrow[disabled]{opacity:.22;cursor:default;box-shadow:0 2px 8px rgba(0,0,0,.08)}
@media(max-width:900px) and (min-width:601px){.bgm-bcr-rail{grid-auto-columns:calc((100% - 26px) / 1.5)}}
@media(max-width:600px){.bgm-bcr .bgm-bcr-arrow{display:none}.bgm-bcr-rail{grid-auto-columns:80vw}}

/* Brand Gallery Rail (bgm_brand_rail, 2026-09-20): square photo tiles, 3.5 up with the next one peeking, inside a
   page section that already sets the wrap width (the featured-brand pages' .sp container) */
.bgm-brail{margin-top:22px}
.bgm-brail .bgm-bcr-wrap{max-width:none;padding:0}
.bgm-brail .bgm-bcr-rail{grid-template-rows:1fr;grid-auto-columns:calc((100% - 3 * 20px) / 3.5);column-gap:20px;padding:8px 2px 16px;cursor:grab}
.bgm-brail .bgm-bcr-card{background:#f3efe7}
.bgm-brail .bgm-bcr-card img{object-position:center}
.bgm-brail .bgm-bcr-arrow.prev{left:-14px}
.bgm-brail .bgm-bcr-arrow.next{right:-14px}
.bgm-brail-empty{grid-column:1/-1;margin:0;font-size:14px;color:#6a6a62}
.bgm-brail-cta{margin:22px 0 0}
@media(max-width:900px) and (min-width:601px){.bgm-brail .bgm-bcr-rail{grid-auto-columns:calc((100% - 2 * 16px) / 2.5);column-gap:16px}}
@media(max-width:600px){.bgm-brail .bgm-bcr-rail{grid-auto-columns:calc((100% - 14px) / 1.4);column-gap:14px}.bgm-brail .bgm-bcr-arrow{display:flex;width:40px;height:40px;font-size:18px}.bgm-brail .bgm-bcr-arrow.prev{left:-6px}.bgm-brail .bgm-bcr-arrow.next{right:-6px}}

/* ─── Finishes (bgm_finish_gallery / bgm_finish_rail, 2026-09-21): the Finish Gallery block is bradford-design-system.css §10 verbatim with the bgm-fg prefix; the rail tiles are the brand pages' .am-fin look ─── */
   Port of the page's fg-css + fg-lb-css. The head type (eyebrow 14/700/.12em, h2 clamp(38px,3.1vw,50px)/1.14/-.015em,
   lead clamp(21px,1.6vw,25px)/1.4 #6a6a62) and the LEFT-aligned captions came from snippet 24129's .bh-doc rules,
   the underlined link from 25732's a.bh-dl — all authored here so the widget stands on its own. */
.bgm-fg{--ink:#171717;--line:#e4e0d6;--muted:#6a6a62;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--ink)}
.bgm-fg .bgm-fg-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,4vw,52px)}
.bgm-fg .bgm-fg-head{text-align:center;max-width:72ch;margin:0 auto 76px}
.bgm-fg .bgm-fg-eyebrow{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#171717;margin:0 0 20px;padding:0}
.bgm-fg .bgm-fg-h2{font-family:'Noto Serif',Georgia,serif;font-weight:400;font-size:clamp(38px,3.1vw,50px);line-height:1.14;letter-spacing:-.015em;color:#171717;margin:0 0 24px;padding:0;text-align:center}
.bgm-fg .bgm-fg-sub{font-family:'Montserrat',sans-serif;font-weight:400;font-size:clamp(21px,1.6vw,25px);line-height:1.4;color:var(--muted);margin:0 auto 44px;padding:0}
.bgm-fg .bgm-fg-dlwrap{margin:0;text-align:center}
.bgm-fg a.bgm-fg-dl{display:inline-block;font-family:'Montserrat',system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:#171717;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.bgm-fg a.bgm-fg-dl:hover{opacity:.6}
.bgm-fg a.bgm-fg-dl[hidden]{display:none}
.bgm-fg .bgm-fg-tabs{display:flex;flex-wrap:wrap;gap:22px 30px;justify-content:center;border-bottom:1px solid var(--line);margin:8px 0 56px;padding:0}
.bgm-fg .bgm-fg-tabs button{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 0 14px;margin:0;cursor:pointer;font-family:inherit;line-height:1.5;box-shadow:none}
.bgm-fg .bgm-fg-tabs button.is-on,.bgm-fg .bgm-fg-tabs button:hover{color:var(--ink);background:none}
.bgm-fg .bgm-fg-tabs button.is-on{border-bottom-color:var(--ink)}
.bgm-fg .bgm-fg-branddl{margin:48px 0 56px}
.bgm-fg .bgm-fg-pane[hidden]{display:none}
.bgm-fg .bgm-fg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:38px 24px;align-items:start}
.bgm-fg .bgm-fg-grouphead{grid-column:1/-1;font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;line-height:1.5;color:#171717;margin:18px 0 2px;padding:0 0 10px;border-bottom:1px solid var(--line);text-align:left}
.bgm-fg .bgm-fg-grid>.bgm-fg-grouphead:first-child{margin-top:0}
.bgm-fg .bgm-fg-card{text-align:left;cursor:default}
.bgm-fg.has-pop .bgm-fg-card{cursor:pointer}
.bgm-fg .bgm-fg-card:focus-visible{outline:2px solid #171717;outline-offset:3px}
.bgm-fg .bgm-fg-card.is-found{outline:2px solid #171717;outline-offset:3px}   /* the swatch a site-search result opened (finishes.js) */
.bgm-fg .bgm-fg-tile{background:#fff;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bgm-fg .bgm-fg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.bgm-fg .bgm-fg-card span{display:block;font-size:13px;font-weight:600;color:#171717;margin-top:12px;line-height:1.35;text-align:left}
@media(max-width:1000px){.bgm-fg .bgm-fg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.bgm-fg .bgm-fg-head{margin:0 auto 52px}.bgm-fg .bgm-fg-sub{margin:0 auto 32px}}
@media(max-width:600px){.bgm-fg .bgm-fg-grid{grid-template-columns:repeat(2,1fr)}}
/* lightbox (#fgLB port) */
.bgm-fg-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(20,18,14,.82);padding:24px;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.5}
.bgm-fg-lb.is-on{display:flex}
.bgm-fg-lb .bgm-fg-box{position:relative;background:#fff;max-width:940px;width:100%;max-height:88vh;display:flex;overflow:hidden;border-radius:4px;box-shadow:0 24px 64px rgba(0,0,0,.45)}
.bgm-fg-lb .bgm-fg-img{flex:0 0 54%;background:#f4f1ea;display:flex;align-items:center;justify-content:center}
.bgm-fg-lb .bgm-fg-img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.bgm-fg-lb .bgm-fg-panel{flex:1;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.bgm-fg-lb .bgm-fg-eye{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#6a6a62;margin-bottom:16px}
.bgm-fg-lb .bgm-fg-name{font-family:"Noto Serif",Georgia,serif;font-size:1.7rem;line-height:1.22;color:#171717;font-weight:400}
.bgm-fg-lb .bgm-fg-x{position:absolute;top:12px;right:16px;background:none!important;border:0!important;box-shadow:none!important;font-size:28px;line-height:1;padding:8px 16px;color:#171717!important;cursor:pointer;z-index:2}
.bgm-fg-lb .bgm-fg-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55)!important;color:#fff!important;border:0!important;box-shadow:none!important;width:42px;height:42px;padding:8px 16px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.bgm-fg-lb .bgm-fg-nav:hover{background:rgba(0,0,0,.75)!important}
.bgm-fg-lb .bgm-fg-prev{left:12px}
.bgm-fg-lb .bgm-fg-next{right:12px}
@media(max-width:640px){.bgm-fg-lb .bgm-fg-box{flex-direction:column;max-height:92vh;overflow:auto}.bgm-fg-lb .bgm-fg-img{flex:none;width:100%}.bgm-fg-lb .bgm-fg-panel{padding:28px 26px}}

.bgm-fr{margin-top:4px}
.bgm-fr .bgm-bcr-wrap{max-width:none;padding:0}
.bgm-fr .bgm-bcr-rail{grid-template-rows:1fr;grid-auto-columns:clamp(140px,15vw,182px);column-gap:clamp(14px,2vw,26px);padding:8px 2px 16px;cursor:grab}
.bgm-fr .bgm-bcr-card{aspect-ratio:auto;text-align:center;line-height:1.35;overflow:visible}
.bgm-fr .bgm-fr-sq{aspect-ratio:1/1;background:#fff;overflow:hidden;margin-bottom:12px;display:flex;align-items:center;justify-content:center;padding:8px}
.bgm-fr .bgm-fr-sq img{max-width:100%!important;max-height:100%;width:auto!important;height:auto!important;object-fit:contain;display:block;transition:none;transform:none}
.bgm-fr.bgm-fr-cover .bgm-fr-sq{display:block;padding:0}
.bgm-fr.bgm-fr-cover .bgm-fr-sq img{width:100%!important;height:100%!important;object-fit:cover;max-width:none;max-height:none}
.bgm-fr .bgm-bcr-card:hover img{transform:none}
/* labels: what the brand pages actually rendered (the page kit's `.sp p` rule beat the 13px widget rule): 16–18px, 600, muted, 18px below */
.bgm-fr .bgm-fr-nm{font-family:"Montserrat",sans-serif;font-size:clamp(16px,1.35vw,18px);font-weight:600;letter-spacing:.02em;color:#4a4a44;line-height:1.62;margin:0 0 18px}
.bgm-fr .bgm-fr-cd{font-family:"Montserrat",sans-serif;font-size:clamp(16px,1.35vw,18px);font-weight:600;letter-spacing:.1em;color:#4a4a44;line-height:1.62;margin:0 0 18px}
.bgm-fr .bgm-bcr-arrow{top:calc(8px + clamp(70px,7.5vw,91px))}
.bgm-fr .bgm-bcr-arrow.prev{left:-14px}
.bgm-fr .bgm-bcr-arrow.next{right:-14px}
.bgm-fr-empty{grid-column:1/-1;margin:0;font-size:14px;color:#6a6a62}
.bgm-fr-guide{margin:14px 0 0}
@media(max-width:600px){.bgm-fr .bgm-bcr-arrow{display:flex;width:40px;height:40px;font-size:18px}.bgm-fr .bgm-bcr-arrow.prev{left:-6px}.bgm-fr .bgm-bcr-arrow.next{right:-6px}}

/* drag-to-scroll on every .bgm-bcr rail (2026-09-21): grab / grabbing cursors, no text selection or image ghost while dragging */
.bgm-bcr-rail{cursor:grab;user-select:none;-webkit-user-select:none}
.bgm-bcr-rail.is-grabbing{cursor:grabbing}
.bgm-bcr-rail.is-grabbing *{cursor:grabbing}
.bgm-bcr-rail img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}