/* Catalog: brand tiles, product cards, brand/product headers, spec tables. */

/* Brand tiles: two columns as in the owner's wireframe; brand colour via --bpg-tile. */
.bpg-tiles {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.bpg-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 8.5rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	background: var(--bpg-tile, var(--wp--preset--color--ink));
	color: var(--bpg-tile-text, var(--wp--preset--color--paper));
	text-decoration: none;
	transition: transform 120ms ease;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
/* Halftone of the second colour: round dots that grow toward the top-right corner until they merge.
   The mask keeps its proportions (cover) so dots stay round at any tile size. */
.bpg-tile[style]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bpg-tile-2);
	-webkit-mask: url("../halftone-mask.svg?v=2") right top / cover no-repeat;
	mask: url("../halftone-mask.svg?v=2") right top / cover no-repeat;
}
/* Single-column tiles are boxier (about 2.5:1), so they get a mask drawn to that shape. */
@media (max-width: 30rem) {
	.bpg-tile[style]::before {
		-webkit-mask-image: url("../halftone-mask-narrow.svg?v=2");
		mask-image: url("../halftone-mask-narrow.svg?v=2");
	}
}
.bpg-tile:hover { color: var(--bpg-tile-text, var(--wp--preset--color--paper)); transform: translateY(-2px); }
.bpg-tile__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading-md); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.bpg-tile__count { margin-top: 0.5rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--tracking); }

@media (max-width: 30rem) {
	.bpg-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.bpg-tile { transition: none; }
	.bpg-tile:hover { transform: none; }
}

/* Product cards. */
.bpg-cards {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.bpg-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: var(--wp--preset--color--paper);
}
.bpg-card__link:hover { border-color: var(--wp--preset--color--electric); color: var(--wp--preset--color--ink); }
.bpg-card__type { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--slate); }
.bpg-card__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading-sm); font-weight: 800; line-height: 1.2; margin-top: 0.3rem; }
.bpg-card__link:hover .bpg-card__name { color: var(--wp--preset--color--electric); }
.bpg-card__specs { margin: var(--wp--preset--spacing--30) 0 0; display: grid; gap: 0.25rem; }
.bpg-card__specs div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: 0.25rem; }
.bpg-card__specs dt { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }
.bpg-card__specs dd { margin: 0; font-weight: 600; text-align: right; }
.bpg-card__pending { margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--slate); font-style: italic; font-size: var(--wp--preset--font-size--small); }
.bpg-card__band { margin-top: auto; padding-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }

/* Brand header: a colour band when the brand colour is known. */
.bpg-brand-head { padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--line); }
.bpg-brand-head[style] .bpg-brand-head__name {
	display: inline-block;
	padding: 0.15em 0.4em;
	border-radius: var(--wp--custom--radius);
	background: var(--bpg-tile);
	color: var(--bpg-tile-text);
}
.bpg-brand-head__name { margin: 0; }
.bpg-brand-head__about { max-width: 44rem; font-size: var(--wp--preset--font-size--lead); }
.bpg-brand-products { margin-top: var(--wp--preset--spacing--50); }

/* Product header. */
.bpg-product-head__type { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--wp--custom--tracking); }
.bpg-product-head__name { margin: 0.25rem 0 0; }
.bpg-product-head__about { max-width: 44rem; }
.bpg-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius);
}
.bpg-buy__band { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--heading-sm); }
.bpg-buy__band span { display: block; font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }
.bpg-buy__disclosure { flex-basis: 100%; margin: 0; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--ink); }

/* Spec tables. */
.bpg-specs { margin-top: var(--wp--preset--spacing--60); }
.bpg-specs__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
.bpg-specs__table { width: 100%; border-collapse: collapse; }
.bpg-specs__table caption {
	text-align: left;
	font-weight: 700;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.bpg-specs__table th,
.bpg-specs__table td {
	text-align: left;
	vertical-align: top;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.bpg-specs__table th { font-weight: 400; color: var(--wp--preset--color--slate); width: 50%; padding-right: 1rem; }
.bpg-specs__table td { font-weight: 600; }
.bpg-specs__table caption {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking);
}
.bpg-buy { border-left: 4px solid var(--wp--preset--color--volt); }
/* FTC: the paid-link note must be easy to notice (size and contrast like body text) and sit right
   next to the buttons. Same font and size as the Amazon line below it, but bold. */
.bpg-buy__paid { flex-basis: 100%; margin: 0; font-family: inherit; font-size: var(--wp--preset--font-size--base); font-weight: 700; color: var(--wp--preset--color--ink); }
/* Where to buy: equal buttons, one row on wide screens, stacked on phones. */
.bpg-buy__sellers { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }

/* Size calculator: appliance checklist beside a sticky result panel; stacks on phones. */
.bpg-calc { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--wp--preset--spacing--50); align-items: start; margin-top: var(--wp--preset--spacing--40); }
.bpg-calc__group { border: 0; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }
.bpg-calc__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--wp--preset--color--line); cursor: pointer; }
.bpg-calc__item input { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--electric); flex: none; }
.bpg-calc__name { flex: 1; }
.bpg-calc__watts { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); white-space: nowrap; }
.bpg-calc__result { position: sticky; top: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--mist); border-left: 4px solid var(--wp--preset--color--electric); border-radius: var(--wp--custom--radius); }
.bpg-calc__result .bpg-headline { margin-top: 0; grid-template-columns: 1fr 1fr; }
.bpg-calc__hint { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--small); }
.bpg-calc__models { list-style: none; margin: var(--wp--preset--spacing--20) 0 0; padding: 0; display: grid; gap: 0.6rem; }
.bpg-calc__models a { font-family: var(--wp--preset--font-family--display); font-weight: 700; display: block; }
.bpg-calc__models span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }
@media (max-width: 47.99rem) {
	.bpg-calc { grid-template-columns: 1fr; }
	.bpg-calc__result { position: static; order: -1; }
}

/* All-products page: one group per type, a thin blue line fading out to the right between groups. */
.bpg-type-group { margin-top: var(--wp--preset--spacing--50); }
.bpg-type-group + .bpg-type-group { padding-top: var(--wp--preset--spacing--50); position: relative; }
.bpg-type-group + .bpg-type-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--wp--preset--color--electric), transparent);
}
.bpg-type-group__title { margin: 0; font-size: var(--wp--preset--font-size--heading-sm); display: flex; align-items: baseline; gap: 0.6rem; }
.bpg-type-group__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.bpg-type-group__title a:hover { color: var(--wp--preset--color--electric); }
.bpg-type-group__count { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--slate); }
.bpg-type-group .bpg-cards { margin-top: var(--wp--preset--spacing--30); }

/* Type page intro. */
.bpg-type-intro { max-width: 46rem; margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--slate); }

/* Similar models: a compact two-column list of links under the spec table. */
.bpg-related { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--line); }
.bpg-related h2 { margin: 0; font-size: var(--wp--preset--font-size--heading-sm); }
.bpg-related__list { list-style: none; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 var(--wp--preset--spacing--40); }
.bpg-related__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); text-decoration: none; }
.bpg-related__list a:hover .bpg-related__name { color: var(--wp--preset--color--electric); }
.bpg-related__name { font-weight: 600; }
.bpg-related__watts { flex-shrink: 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }
.bpg-related__more { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--small); }