/**
 * BP Bumper Finder — frontend styles.
 * BerleyPro brand defaults: red #CB333B accent, dark #1A1A1A, square corners,
 * uppercase tracking. Every value is a CSS variable so the Bricks element's
 * style controls can override them per-instance.
 */

.bp-bf {
	/* ---- defaults (overridable from Bricks) ---- */
	--bp-bf-accent:      #CB333B;
	--bp-bf-accent-text: #ffffff;
	--bp-bf-accent-dark: #A8282E;
	--bp-bf-dark:        #1A1A1A;
	--bp-bf-muted:       #555555;
	--bp-bf-border:      #d6d6d6;
	--bp-bf-card-bg:     #ffffff;
	--bp-bf-surface:     #f1f1f1;

	--bp-bf-max-w:       1100px;
	--bp-bf-gap:         32px;
	--bp-bf-card-pad:    32px;
	--bp-bf-radius:      0px;

	--bp-bf-title-size:    40px;
	--bp-bf-kicker-size:   12px;
	--bp-bf-subtitle-size: 16px;
	--bp-bf-step-size:     14px;

	--bp-bf-btn-h:         52px;
	--bp-bf-btn-px:        28px;
	--bp-bf-btn-size:      14px;
	--bp-bf-btn-tracking:  1.5px;

	--bp-bf-search-h:      56px;
	--bp-bf-search-size:   16px;
	--bp-bf-search-px:     20px;
	--bp-bf-search-radius: 0px;

	--bp-bf-tile-w:        160px;
	--bp-bf-tile-h:        88px;
	--bp-bf-tile-gap:      12px;
	--bp-bf-tile-size:     14px;

	--bp-bf-shadow:    0 2px 8px rgba(0,0,0,0.06);
	--bp-bf-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
	--bp-bf-trans:     200ms ease;

	max-width: var(--bp-bf-max-w);
	margin: 0 auto;
	padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 32px);
	font-family: inherit;
	color: var(--bp-bf-dark);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--bp-bf-gap);
}
.bp-bf *, .bp-bf *::before, .bp-bf *::after { box-sizing: border-box; }

/* ===== HEADER ===== */
.bp-bf__header { text-align: center; }
.bp-bf__kicker {
	display: inline-block;
	font-size: var(--bp-bf-kicker-size);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bp-bf-accent);
	margin-bottom: 12px;
}
.bp-bf__title {
	font-weight: 700;
	font-size: var(--bp-bf-title-size);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 12px;
	color: var(--bp-bf-dark);
}
.bp-bf__title-accent { color: var(--bp-bf-accent); }
.bp-bf__subtitle {
	max-width: 640px;
	margin: 0 auto;
	color: var(--bp-bf-muted);
	font-size: var(--bp-bf-subtitle-size);
	line-height: 1.5;
}

/* ===== SEARCH ===== */
.bp-bf__search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 700px;
	margin: 0 auto;
	width: 100%;
}
.bp-bf__search-icon {
	position: absolute;
	left: var(--bp-bf-search-px);
	width: 20px; height: 20px;
	color: var(--bp-bf-muted);
	pointer-events: none;
}
.bp-bf__search {
	width: 100%;
	height: var(--bp-bf-search-h);
	font-size: var(--bp-bf-search-size);
	padding: 0 calc(var(--bp-bf-search-px) + 28px);
	font-family: inherit;
	background: var(--bp-bf-card-bg);
	color: var(--bp-bf-dark);
	border: 2px solid var(--bp-bf-border);
	border-radius: var(--bp-bf-search-radius);
	transition: border-color var(--bp-bf-trans), box-shadow var(--bp-bf-trans);
}
.bp-bf__search:focus {
	outline: none;
	border-color: var(--bp-bf-accent);
	box-shadow: 0 0 0 3px rgba(203,51,59,0.12);
}
.bp-bf__search-clear {
	position: absolute;
	right: 12px;
	width: 32px; height: 32px;
	background: var(--bp-bf-surface);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--bp-bf-dark);
	display: flex; align-items: center; justify-content: center;
}
.bp-bf__search-clear:hover { background: var(--bp-bf-border); }

/* ===== STEP LABEL ===== */
.bp-bf__step-label {
	font-size: var(--bp-bf-step-size);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bp-bf-muted);
	margin-bottom: 12px;
}

/* ===== FEATURED ===== */
.bp-bf__featured {}
.bp-bf__featured-track {
	display: flex;
	gap: var(--bp-bf-tile-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 8px;
	padding-bottom: 6px;
	margin: 0 -4px;
	padding-left: 4px;
	padding-right: 4px;
	scrollbar-width: thin;
}
.bp-bf__featured-track::-webkit-scrollbar { height: 6px; }
.bp-bf__featured-track::-webkit-scrollbar-thumb { background: var(--bp-bf-border); border-radius: 3px; }

/* ===== TILES (brand + featured) ===== */
.bp-bf__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 0 0 auto;
	width: var(--bp-bf-tile-w);
	min-height: var(--bp-bf-tile-h);
	padding: 14px 16px;
	background: var(--bp-bf-card-bg);
	color: var(--bp-bf-dark);
	border: 2px solid var(--bp-bf-border);
	border-radius: var(--bp-bf-radius);
	font-family: inherit;
	font-size: var(--bp-bf-tile-size);
	font-weight: 700;
	cursor: pointer;
	scroll-snap-align: start;
	transition: border-color var(--bp-bf-trans), background var(--bp-bf-trans), transform var(--bp-bf-trans), box-shadow var(--bp-bf-trans);
	text-align: center;
}
.bp-bf__tile:hover {
	border-color: var(--bp-bf-accent);
	transform: translateY(-2px);
	box-shadow: var(--bp-bf-shadow);
}
.bp-bf__tile.is-active {
	border-color: var(--bp-bf-accent);
	background: var(--bp-bf-accent);
	color: var(--bp-bf-accent-text);
}
.bp-bf__tile-name {
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.bp-bf__tile-count, .bp-bf__tile-brand, .bp-bf__tile-ends {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bp-bf-muted);
}
.bp-bf__tile.is-active .bp-bf__tile-count,
.bp-bf__tile.is-active .bp-bf__tile-brand,
.bp-bf__tile.is-active .bp-bf__tile-ends { color: rgba(255,255,255,0.85); }

/* Featured tiles are bigger + horizontal */
.bp-bf__tile--featured {
	flex-direction: row;
	width: 280px;
	min-height: 96px;
	gap: 12px;
	text-align: left;
}
.bp-bf__tile-img {
	flex: 0 0 72px;
	width: 72px; height: 72px;
	background: var(--bp-bf-surface);
	border: 1px solid var(--bp-bf-border);
	border-radius: var(--bp-bf-radius);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.bp-bf__tile-img img { width: 100%; height: 100%; object-fit: cover; }
.bp-bf__tile-img--placeholder {
	background: linear-gradient(135deg, var(--bp-bf-surface), var(--bp-bf-border));
}
.bp-bf__tile-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bp-bf__tile-meta .bp-bf__tile-name { text-align: left; font-size: 14px; }

/* Brand track horizontal scroll (Step 1 — tiles that slide over) */
.bp-bf__brand-track {
	display: flex;
	gap: var(--bp-bf-tile-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	padding-left: 4px; padding-right: 4px;
	scrollbar-width: thin;
}
.bp-bf__brand-track::-webkit-scrollbar { height: 6px; }
.bp-bf__brand-track::-webkit-scrollbar-thumb { background: var(--bp-bf-border); border-radius: 3px; }

/* ===== MODEL GRID ===== */
.bp-bf__model-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.bp-bf__model-card {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	align-items: center;
	background: var(--bp-bf-card-bg);
	border: 2px solid var(--bp-bf-border);
	border-radius: var(--bp-bf-radius);
	padding: 14px;
	cursor: pointer;
	font-family: inherit;
	color: var(--bp-bf-dark);
	text-align: left;
	transition: border-color var(--bp-bf-trans), transform var(--bp-bf-trans), box-shadow var(--bp-bf-trans);
}
.bp-bf__model-card:hover {
	border-color: var(--bp-bf-accent);
	transform: translateY(-1px);
	box-shadow: var(--bp-bf-shadow);
}
.bp-bf__model-card.is-active {
	border-color: var(--bp-bf-accent);
	box-shadow: 0 0 0 2px var(--bp-bf-accent), var(--bp-bf-shadow-lg);
}
.bp-bf__model-img {
	width: 88px; height: 88px;
	background: var(--bp-bf-surface);
	border: 1px solid var(--bp-bf-border);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.bp-bf__model-img img { width: 100%; height: 100%; object-fit: cover; }
.bp-bf__model-img--placeholder { background: linear-gradient(135deg, var(--bp-bf-surface), var(--bp-bf-border)); }
.bp-bf__model-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bp-bf__model-brand {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bp-bf-muted);
}
.bp-bf__model-name {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--bp-bf-dark);
}
.bp-bf__model-name small { font-size: 12px; opacity: 0.7; }
.bp-bf__chip {
	display: inline-block;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--bp-bf-surface);
	color: var(--bp-bf-dark);
	padding: 4px 8px;
	border-radius: 999px;
	width: fit-content;
}

/* ===== END BUTTON ROW ===== */
.bp-bf__end-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.bp-bf__end-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 18px 16px;
	min-height: 96px;
	background: var(--bp-bf-card-bg);
	color: var(--bp-bf-dark);
	border: 2px solid var(--bp-bf-border);
	border-radius: var(--bp-bf-radius);
	cursor: pointer;
	font-family: inherit;
	transition: all var(--bp-bf-trans);
}
.bp-bf__end-btn:hover:not(:disabled):not(.is-disabled) {
	border-color: var(--bp-bf-accent);
	transform: translateY(-1px);
}
.bp-bf__end-btn.is-active {
	border-color: var(--bp-bf-accent);
	background: var(--bp-bf-accent);
	color: var(--bp-bf-accent-text);
}
.bp-bf__end-btn.is-disabled,
.bp-bf__end-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--bp-bf-surface);
}
.bp-bf__end-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.bp-bf__end-price {
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.bp-bf__end-help {
	font-size: 11px;
	font-style: italic;
	color: var(--bp-bf-muted);
}
.bp-bf__end-btn.is-active .bp-bf__end-help { color: rgba(255,255,255,0.85); }

/* ===== RESULT CARD ===== */
.bp-bf__result {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms ease, transform 300ms ease;
}
.bp-bf__result.is-shown { opacity: 1; transform: translateY(0); }

.bp-bf__card {
	background: var(--bp-bf-card-bg);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	box-shadow: var(--bp-bf-shadow-lg);
	overflow: hidden;
}
@media (max-width: 760px) { .bp-bf__card { grid-template-columns: 1fr; } }

.bp-bf__result-img {
	background: var(--bp-bf-surface);
	min-height: 280px;
	display: flex; align-items: center; justify-content: center;
}
.bp-bf__result-img img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; padding: 24px; }
.bp-bf__result-img--placeholder {
	background: linear-gradient(135deg, var(--bp-bf-surface), var(--bp-bf-border));
}

.bp-bf__card-body { padding: var(--bp-bf-card-pad); display: flex; flex-direction: column; gap: 16px; }

.bp-bf__match-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: rgba(203,51,59,0.1);
	color: var(--bp-bf-accent);
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.bp-bf__match-badge::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bp-bf-accent);
}
.bp-bf__card-title {
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}
.bp-bf__card-sub { color: var(--bp-bf-muted); font-size: 14px; margin: 0; }
.bp-bf__card-sku { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; color: var(--bp-bf-dark); }

.bp-bf__card-priceqty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--bp-bf-border);
	border-bottom: 1px solid var(--bp-bf-border);
}
.bp-bf__price-block { display: flex; flex-direction: column; gap: 4px; }
.bp-bf__price-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bp-bf-muted);
}
.bp-bf__price-value {
	font-size: 28px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bp-bf-dark);
}

/* qty +/- with number input */
.bp-bf__qty {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bp-bf__qty-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bp-bf-muted);
	margin-right: 4px;
}
.bp-bf__qty-btn {
	width: 36px; height: 36px;
	border: 1px solid var(--bp-bf-border);
	background: var(--bp-bf-card-bg);
	color: var(--bp-bf-dark);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	border-radius: var(--bp-bf-radius);
	transition: border-color var(--bp-bf-trans), background var(--bp-bf-trans);
}
.bp-bf__qty-btn:hover { border-color: var(--bp-bf-accent); }
.bp-bf__qty-input {
	width: 56px; height: 36px;
	text-align: center;
	font-size: 16px;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--bp-bf-border);
	background: var(--bp-bf-card-bg);
	color: var(--bp-bf-dark);
	border-radius: var(--bp-bf-radius);
	-moz-appearance: textfield;
}
.bp-bf__qty-input::-webkit-outer-spin-button,
.bp-bf__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* primary add-to-cart */
.bp-bf__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--bp-bf-btn-h);
	padding: 0 var(--bp-bf-btn-px);
	font-size: var(--bp-bf-btn-size);
	font-weight: 700;
	letter-spacing: var(--bp-bf-btn-tracking);
	text-transform: uppercase;
	font-family: inherit;
	color: var(--bp-bf-accent-text);
	background: var(--bp-bf-accent);
	border: none;
	border-radius: var(--bp-bf-radius);
	cursor: pointer;
	transition: background var(--bp-bf-trans), transform var(--bp-bf-trans);
	margin-top: auto;
}
.bp-bf__add:hover { background: var(--bp-bf-accent-dark); }
.bp-bf__add:active { transform: translateY(1px); }
.bp-bf__add:disabled, .bp-bf__add.is-loading { opacity: 0.6; cursor: wait; }
.bp-bf__add svg { width: 18px; height: 18px; }

/* ===== reset ===== */
.bp-bf__reset {
	background: none;
	border: none;
	color: var(--bp-bf-muted);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 0;
	align-self: center;
}
.bp-bf__reset:hover { color: var(--bp-bf-accent); }

/* ===== empty state ===== */
.bp-bf__empty {
	padding: 32px;
	text-align: center;
	color: var(--bp-bf-muted);
	background: var(--bp-bf-surface);
	font-size: 14px;
}

/* ===== toast ===== */
.bp-bf__toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(120%);
	background: var(--bp-bf-dark);
	color: #fff;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: var(--bp-bf-shadow-lg);
	transition: transform 300ms ease;
	z-index: 1000;
	border-radius: var(--bp-bf-radius);
}
.bp-bf__toast--shown { transform: translateX(-50%) translateY(0); }
.bp-bf__toast--error { background: var(--bp-bf-accent-dark); }

/* ===== step visibility (animation hooks) ===== */
.bp-bf__step[hidden] { display: none !important; }
.bp-bf__cascade { display: flex; flex-direction: column; gap: var(--bp-bf-gap); }

/* ===== mobile tweaks ===== */
@media (max-width: 600px) {
	.bp-bf__title { font-size: clamp(28px, 8vw, 36px); }
	.bp-bf__model-grid { grid-template-columns: 1fr; }
	.bp-bf__card-priceqty { flex-direction: column; align-items: flex-start; }
}


/* ===== ARROWS + EDGE FADE FOR BRAND ROW (v1.2.0) ===== */
.bp-bf__brand-section {
	position: relative;
	margin-inline: -8px;
	padding-inline: 8px;
}
.bp-bf__brand-section .bp-bf__brand-track {
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.bp-bf__brand-section .bp-bf__brand-track::-webkit-scrollbar { display: none; }

/* Fade edges — visible only when there's content past the edge */
.bp-bf__brand-section::before,
.bp-bf__brand-section::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 200ms ease;
}
.bp-bf__brand-section::before {
	left: 0;
	background: linear-gradient(90deg, var(--bp-bf-card-bg) 0%, transparent 100%);
}
.bp-bf__brand-section::after {
	right: 0;
	background: linear-gradient(-90deg, var(--bp-bf-card-bg) 0%, transparent 100%);
}
.bp-bf__brand-section.is-scroll-from-start::before { opacity: 1; }
.bp-bf__brand-section.is-scroll-to-end-not::after { opacity: 1; }

/* Arrow buttons */
.bp-bf__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bp-bf-dark);
	color: #fff;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	font-family: inherit;
	line-height: 1;
	padding: 0;
}
.bp-bf__arrow:hover { background: var(--bp-bf-accent); transform: translateY(-50%) scale(1.05); }
.bp-bf__arrow:disabled, .bp-bf__arrow.is-disabled {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.8);
}
.bp-bf__arrow--prev { left: -16px; }
.bp-bf__arrow--next { right: -16px; }

/* Hide arrows on touch/small screens — swipe is the affordance there */
@media (max-width: 720px) {
	.bp-bf__arrow { display: none; }
	.bp-bf__brand-section { margin-inline: 0; padding-inline: 0; }
}

/* Featured kayak tiles get a subtle highlight ring */
.bp-bf__tile--featured {
	border-color: var(--bp-bf-accent);
}


/* =========================================================================
   v1.3.0 — MOBILE RESPONSIVENESS FIX (2026-05-09)
   --------------------------------------------------------------------------
   Bug: on iPhone-class viewports the .bp-bf root was rendering at its full
   --bp-bf-max-w (1100px), overflowing horizontally by ~675px. Root cause:
   .bp-bf is display:flex without an explicit width:100%, AND its flex
   children (.bp-bf__featured-track, .bp-bf__brand-track, .bp-bf__model-grid,
   .bp-bf__end-row) generate min-content widths of 1400px+ which bubble up
   through flexbox's default min-width:auto and force the root to its
   max-width.
   Fix part 1: pin .bp-bf to 100% of its parent and zero-out min-width on
   horizontally-scrolling flex children so they don't push the root wider.
   Fix part 2: at <=600px, swap the brand-track from horizontal swipe
   carousel into a 2-column wrap grid for better discoverability of all 13
   brands on a single screen. Featured-track (top 5 kayaks) stays as a
   swipe carousel — different intent, different UX.
   ========================================================================= */

.bp-bf {
	width: 100%;
}

.bp-bf > *,
.bp-bf__cascade,
.bp-bf__cascade > *,
.bp-bf__featured,
.bp-bf__brand-section,
.bp-bf__featured-track,
.bp-bf__brand-track,
.bp-bf__model-grid,
.bp-bf__end-row {
	min-width: 0;
}

/* Mobile: brand tile picker becomes a 2-column wrap grid */
@media (max-width: 600px) {
	.bp-bf__brand-section {
		margin-inline: 0;
		padding-inline: 0;
	}
	.bp-bf__brand-track {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		overflow-x: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.bp-bf__brand-track .bp-bf__tile {
		width: auto;
		min-width: 0;
		min-height: 72px;
		padding: 12px 10px;
	}
	/* Hide the carousel-edge fade gradients — irrelevant on a wrap grid */
	.bp-bf__brand-section::before,
	.bp-bf__brand-section::after { display: none; }

	/* Tighten the section title so it doesn't dominate the screen */
	.bp-bf__title {
		font-size: clamp(22px, 6.5vw, 32px);
		line-height: 1.15;
	}

	/* Search bar full-width on mobile, no left/right gutter */
	.bp-bf__search-wrap {
		max-width: 100%;
	}

	/* Featured carousel — keep it horizontal (swipe is right for top-5),
	   but slim the tile width so 2 fit per screen instead of 1.5 */
	.bp-bf__tile--featured {
		width: 240px;
		min-height: 84px;
	}
	.bp-bf__tile-img {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
	}
}