/*!
 * Bollard Boys Site — commerce sections: 02 Shop by Application, 03 Full Catalogue.
 * Ported from ShopByApplication.module.css and FullCatalogue.module.css.
 *
 * Every selector starts `body.bbs-active .bbs-home` (see bbs-tokens.css). Links that
 * set their own colour also restate it on :hover, because the scoped base rule
 * `... a:hover` is (0,3,2) and would otherwise repaint the whole card in accent.
 */

/* =========================================================================
   02 — Shop by Application
   ========================================================================= */

body.bbs-active .bbs-home .bbs-shop {
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding-block: 116px 100px;
	padding-inline: var(--bbs-gutter);
}

body.bbs-active .bbs-home .bbs-shop__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 34px;
}

body.bbs-active .bbs-home .bbs-shop__head-copy {
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-shop__eyebrow,
body.bbs-active .bbs-home .bbs-catalogue__eyebrow {
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bbs-muted);
}

body.bbs-active .bbs-home .bbs-shop__title {
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 50px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	color: var(--bbs-text);
}

/* The hit area grows to 44px+ via ::before without moving the underline. */
body.bbs-active .bbs-home .bbs-shop__all {
	position: relative;
	font-family: var(--bbs-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--bbs-navy);
	white-space: nowrap;
	color: var(--bbs-navy);
}

body.bbs-active .bbs-home .bbs-shop__all::before,
body.bbs-active .bbs-home .bbs-shop__inline-link::before {
	content: "";
	position: absolute;
	inset: -12px -10px;
}

body.bbs-active .bbs-home .bbs-shop__all:hover {
	color: var(--bbs-accent);
	border-bottom-color: var(--bbs-accent);
}

/* Filter chips ------------------------------------------------------------ */

body.bbs-active .bbs-home .bbs-shop__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

body.bbs-active .bbs-home .bbs-shop__filter-item {
	display: flex;
	min-width: 0;
	max-width: 100%;
}

body.bbs-active .bbs-home .bbs-shop__filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
	border: 1px solid var(--bbs-border-strong);
	background: var(--bbs-surface);
	padding: 13px 20px;
	font-family: var(--bbs-font-mono);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bbs-text);
	white-space: nowrap;
}

body.bbs-active .bbs-home .bbs-shop__filter:hover {
	border-color: var(--bbs-navy);
	background: var(--bbs-surface);
	color: var(--bbs-navy);
}

/* Product grid ------------------------------------------------------------ */

body.bbs-active .bbs-home .bbs-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

body.bbs-active .bbs-home .bbs-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-border);
	color: var(--bbs-text);
}

body.bbs-active .bbs-home .bbs-card:hover {
	border-color: var(--bbs-navy);
	background: var(--bbs-surface);
	color: var(--bbs-text);
}

body.bbs-active .bbs-home .bbs-card__media {
	position: relative;
	height: 262px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-card__media--dark {
	background: var(--bbs-plate-dark);
}

/* The grey plate carries the pre-cropped automatic shot edge to edge. */
body.bbs-active .bbs-home .bbs-card__media--grey {
	background: var(--bbs-photo-grey);
	padding: 0;
}

body.bbs-active .bbs-home .bbs-card__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

body.bbs-active .bbs-home .bbs-card__media--grey .bbs-card__img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

body.bbs-active .bbs-home .bbs-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbs-navy);
	/* No token for the translucent plate; the design's 94% white. */
	background: rgba(255, 255, 255, 0.94);
	padding: 6px 9px;
}

/* Made to order (onbackorder) and Out of stock share the neutral variant; only "In stock"
   carries the navy. */
body.bbs-active .bbs-home .bbs-card__badge--made,
body.bbs-active .bbs-home .bbs-card__badge--out {
	color: var(--bbs-muted);
}

body.bbs-active .bbs-home .bbs-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px 26px;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-card__title {
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--bbs-text);
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-home .bbs-card__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--bbs-muted);
}

body.bbs-active .bbs-home .bbs-card__price-row {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--bbs-border-soft);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

body.bbs-active .bbs-home .bbs-card__price {
	min-width: 0;
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	color: var(--bbs-navy);
}

/* WooCommerce price_html internals: sale prices, amounts, range separators. */
body.bbs-active .bbs-home .bbs-card__price :is(ins, .amount, bdi) {
	color: inherit;
	background: none;
	text-decoration: none;
	font-weight: inherit;
}

body.bbs-active .bbs-home .bbs-card__price del {
	margin-right: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--bbs-muted);
}

body.bbs-active .bbs-home .bbs-card__price del .amount {
	color: inherit;
}

body.bbs-active .bbs-home .bbs-card__price .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.bbs-active .bbs-home .bbs-card__sku {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbs-faint);
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-home .bbs-card__supply {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbs-muted);
}

/* Quote line (replaces the design's "Also available" strip) and empty state. */
body.bbs-active .bbs-home .bbs-shop__more,
body.bbs-active .bbs-home .bbs-shop__empty {
	font-family: var(--bbs-font-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbs-muted);
}

body.bbs-active .bbs-home .bbs-shop__more {
	margin: 34px 0 0;
}

body.bbs-active .bbs-home .bbs-shop__empty {
	margin: 0;
	max-width: 70ch;
}

body.bbs-active .bbs-home .bbs-shop__inline-link {
	position: relative;
	color: var(--bbs-navy);
	border-bottom: 1px solid currentColor;
	white-space: nowrap;
}

body.bbs-active .bbs-home .bbs-shop__inline-link:hover {
	color: var(--bbs-accent);
}

/* =========================================================================
   03 — Full Catalogue
   ========================================================================= */

body.bbs-active .bbs-home .bbs-catalogue {
	background: var(--bbs-surface);
	border-top: 1px solid var(--bbs-border);
}

body.bbs-active .bbs-home .bbs-catalogue__inner {
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding-block: 100px;
	padding-inline: var(--bbs-gutter);
}

body.bbs-active .bbs-home .bbs-catalogue__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

body.bbs-active .bbs-home .bbs-catalogue__head-copy {
	max-width: 58ch;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-catalogue__title {
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 50px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 14px 0;
	color: var(--bbs-text);
}

body.bbs-active .bbs-home .bbs-catalogue__lede {
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--bbs-body);
}

body.bbs-active .bbs-home .bbs-catalogue__badge {
	max-width: 100%;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.5;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bbs-muted-alt);
	border: 1px solid var(--bbs-border-strong);
	padding: 12px 16px;
}

body.bbs-active .bbs-home .bbs-catalogue__note {
	margin: -18px 0 22px;
	max-width: 62ch;
	font-family: var(--bbs-font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--bbs-muted-alt);
}

body.bbs-active .bbs-home .bbs-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.bbs-active .bbs-home .bbs-catalogue__grid-item {
	display: flex;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-catalogue__tile {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 16px;
	border: 1px solid var(--bbs-border);
	background: var(--bbs-surface);
	color: var(--bbs-text);
}

body.bbs-active .bbs-home .bbs-catalogue__tile:hover {
	border-color: var(--bbs-navy);
	background: var(--bbs-surface);
	color: var(--bbs-text);
}

body.bbs-active .bbs-home .bbs-catalogue__tile-name {
	min-width: 0;
	font-family: var(--bbs-font-display);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.3;
	color: var(--bbs-text);
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-home .bbs-catalogue__tile-count {
	flex-shrink: 0;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-label, 13px);
	color: var(--bbs-faint);
}

/* Crash-rated band -------------------------------------------------------- */

body.bbs-active .bbs-home .bbs-catalogue__crash {
	background: var(--bbs-dark-navy);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-catalogue__crash-inner {
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding-block: 84px 88px;
	padding-inline: var(--bbs-gutter);
}

body.bbs-active .bbs-home .bbs-catalogue__crash-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

body.bbs-active .bbs-home .bbs-catalogue__crash-head-copy {
	max-width: 52ch;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-catalogue__crash-eyebrow {
	font-family: var(--bbs-font-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bbs-blue-200);
}

body.bbs-active .bbs-home .bbs-catalogue__crash-title {
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-catalogue__crash-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bbs-surface);
	background: var(--bbs-navy);
	padding: 18px 26px;
}

body.bbs-active .bbs-home .bbs-catalogue__crash-cta:hover {
	color: var(--bbs-surface);
	background: var(--bbs-accent);
}

body.bbs-active .bbs-home .bbs-catalogue__families {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.bbs-active .bbs-home .bbs-catalogue__family-item {
	display: flex;
	min-width: 0;
}

body.bbs-active .bbs-home .bbs-catalogue__family {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 26px 28px;
	border: 1px solid var(--bbs-hairline);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-catalogue__family:hover {
	border-color: var(--bbs-blue-300);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-catalogue__family-name {
	font-family: var(--bbs-font-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-catalogue__family-ratings {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-label, 13px);
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbs-blue-200);
}

body.bbs-active .bbs-home .bbs-catalogue__family-body {
	display: block;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--bbs-on-dark-low);
}

body.bbs-active .bbs-home .bbs-catalogue__family-action {
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bbs-blue-100);
}

body.bbs-active .bbs-home .bbs-catalogue__family:hover .bbs-catalogue__family-action {
	color: var(--bbs-surface);
}

/* =========================================================================
   Breakpoints: 1180 / 1080 / 980 / 900 / 640 / 440 / 380
   ========================================================================= */

@media (max-width: 1180px) {
	body.bbs-active .bbs-home .bbs-shop__title,
	body.bbs-active .bbs-home .bbs-catalogue__title {
		font-size: 46px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__family {
		padding: 24px 22px 26px;
	}
}

@media (max-width: 1080px) {
	body.bbs-active .bbs-home .bbs-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.bbs-active .bbs-home .bbs-catalogue__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	body.bbs-active .bbs-home .bbs-catalogue__crash-title {
		font-size: 34px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__family-name {
		font-size: 24px;
	}
}

@media (max-width: 900px) {
	body.bbs-active .bbs-home .bbs-shop {
		padding-block: 80px;
	}
	body.bbs-active .bbs-home .bbs-shop__title,
	body.bbs-active .bbs-home .bbs-catalogue__title {
		font-size: 38px;
	}
	body.bbs-active .bbs-home .bbs-shop__head {
		flex-wrap: wrap;
		gap: 20px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__inner,
	body.bbs-active .bbs-home .bbs-catalogue__crash-inner {
		padding-block: 72px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.bbs-active .bbs-home .bbs-catalogue__families {
		grid-template-columns: minmax(0, 1fr);
	}
	body.bbs-active .bbs-home .bbs-catalogue__crash-title {
		font-size: 30px;
	}
}

@media (max-width: 640px) {
	body.bbs-active .bbs-home .bbs-shop__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Let a chip wrap rather than push past the viewport if the mono face falls back wider. */
	body.bbs-active .bbs-home .bbs-shop__filter {
		white-space: normal;
	}
	body.bbs-active .bbs-home .bbs-card__price-row {
		flex-wrap: wrap;
		gap: 4px 12px;
	}
	body.bbs-active .bbs-home .bbs-shop__inline-link {
		white-space: normal;
	}
	body.bbs-active .bbs-home .bbs-catalogue__lede {
		font-size: 17px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__badge {
		letter-spacing: 0.07em;
	}
	body.bbs-active .bbs-home .bbs-catalogue__family {
		padding: 22px 20px 24px;
	}
}

/* Two catalogue columns stop being readable once each tile is under ~150px. */
@media (max-width: 440px) {
	body.bbs-active .bbs-home .bbs-catalogue__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 380px) {
	body.bbs-active .bbs-home .bbs-shop__title,
	body.bbs-active .bbs-home .bbs-catalogue__title {
		font-size: 32px;
	}
	body.bbs-active .bbs-home .bbs-card__body {
		padding: 20px 18px 22px;
	}
	body.bbs-active .bbs-home .bbs-shop__filter {
		padding-inline: 14px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__crash-title {
		font-size: 26px;
	}
	body.bbs-active .bbs-home .bbs-catalogue__family-name {
		font-size: 23px;
	}
}