/* Theme v0.1.99 catalog density with uncropped, proportional product imagery. */

.bpal-catalog-grid-controls {
	display: none;
	align-items: center;
	gap: 4px;
}

.bpal-catalog-grid-button {
	display: inline-grid;
	width: 36px;
	height: 36px;
	place-items: center;
	padding: 0;
	background: var(--bpal-white);
	border: 1px solid rgba(14, 39, 66, 0.16);
	border-radius: 0;
	color: var(--bpal-primary);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bpal-catalog-grid-button:hover,
.bpal-catalog-grid-button:focus-visible {
	background: #f5f6f7;
	border-color: rgba(14, 39, 66, 0.42);
	color: var(--bpal-primary);
}

.bpal-catalog-grid-button:focus-visible {
	outline: 2px solid var(--bpal-primary);
	outline-offset: 2px;
}

.bpal-catalog-grid-button[aria-pressed="true"],
.bpal-catalog-grid-button[aria-pressed="true"]:hover,
.bpal-catalog-grid-button[aria-pressed="true"]:focus-visible {
	background: var(--bpal-primary);
	border-color: var(--bpal-primary);
	color: var(--bpal-white);
}

.bpal-catalog-grid-icon {
	display: grid;
	width: 18px;
	height: 15px;
	grid-template-columns: repeat(var(--bpal-grid-icon-columns), minmax(0, 1fr));
	gap: 2px;
}

.bpal-catalog-grid-icon > span {
	display: block;
	min-width: 0;
	background: currentColor;
}

/* The native WooCommerce sort select (search results, tag archives): as high and as quiet as the catalog's own. */
.woocommerce-ordering select {
	min-height: 36px;
	padding: 5px 29px 5px 9px;
	background: var(--bpal-white);
	border: 1px solid rgba(14, 39, 66, 0.13);
	border-radius: 0;
	color: var(--bpal-primary);
	font-size: 0.74rem;
	font-weight: 600;
	box-shadow: none;
}

.woocommerce-ordering select:hover {
	border-color: rgba(14, 39, 66, 0.28);
}

.woocommerce-ordering select:focus-visible {
	outline: 1px solid var(--bpal-primary);
	outline-offset: 2px;
}

.bpal-catalog-card {
	position: relative;
	display: flex !important;
	height: auto;
	min-height: 0;
	max-height: none;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden;
	background: var(--bpal-white);
	border: 0 !important;
	border-bottom: 1px solid rgba(14, 39, 66, 0.09) !important;
	box-shadow: none !important;
}

.bpal-catalog-card > a.woocommerce-loop-product__link {
	display: flex;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.bpal-catalog-card > a.woocommerce-loop-product__link:focus-visible {
	outline: 2px solid var(--bpal-primary);
	outline-offset: -2px;
}

/* Theme 0.10.0: every native and filtered catalog image lives in the same
   non-replaced 4:5 frame. Intrinsic image ratios can no longer change card height. */
.bpal-catalog-card .bpal-product-card__media,
.bpal-catalog-card .bpal-product-image-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	min-height: 0;
	max-height: none;
	flex: 0 0 auto;
	margin: 0 !important;
	overflow: hidden;
	background: #f5f6f7 !important;
}

/* Backward-compatible fallback for cached pre-0.10.0 native card markup. */
.bpal-catalog-card > a.woocommerce-loop-product__link > img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	margin: 0 !important;
	object-fit: contain;
	object-position: center;
	transform: none !important;
}

/* Positioned children cannot affect the wrapper dimensions, including when
   WooCommerce or an optimization plugin independently adds img height:auto. */

.bpal-catalog-card .bpal-product-card__media img,
.bpal-catalog-card .bpal-product-image-frame img,
.woocommerce ul.products li.bpal-catalog-card .bpal-product-card__media img,
.woocommerce ul.products li.bpal-catalog-card .bpal-product-image-frame img,
.woocommerce-page ul.products li.bpal-catalog-card .bpal-product-card__media img,
.woocommerce-page ul.products li.bpal-catalog-card .bpal-product-image-frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0 !important;
	object-fit: contain;
	object-position: center;
	transform: none !important;
}

.bpal-catalog-card .bpal-product-card__media--empty {
	background: #f5f6f7 !important;
}

.bpal-product-card__identity {
	display: grid;
	/* Exact line boxes: 0.72rem×1.25, 0.76rem×1.35, 0.94rem×1.3×2. */
	grid-template-rows: 0.9rem 1.026rem 2.444rem;
	gap: 3px;
	padding: 12px 6px 0;
	min-width: 0;
}

.bpal-product-card__brand,
.bpal-product-card__fit,
.bpal-product-card__type {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	color: var(--bpal-primary);
	text-overflow: ellipsis;
}

.bpal-product-card__brand {
	font-family: var(--bpal-heading);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.055em;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
}

.bpal-product-card__fit {
	color: #67717a;
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
}

.bpal-catalog-card .bpal-product-card__type,
.woocommerce ul.products li.product .bpal-product-card__type,
.woocommerce-page ul.products li.product .bpal-product-card__type {
	display: -webkit-box;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bpal-primary);
	font-family: var(--bpal-heading);
	font-size: 0.94rem;
	font-weight: 550;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* Colours in which the same product is also available (Theme 0.35.0). A fixed row, empty when there is no other
   colour, so every card has the same height. Not links: the card is one. The ring marks the colour of the card. */
.bpal-product-card__colours {
	display: flex;
	height: 1.375rem;
	align-items: center;
	gap: 7px;
	padding: 6px 6px 0;
	min-width: 0;
	overflow: hidden;
}

.bpal-product-card__swatches {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
}

.bpal-swatch {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--bpal-swatch, #a3a7aa);
	box-shadow: inset 0 0 0 1px rgba(14, 39, 66, 0.28);
}

.bpal-swatch--current {
	box-shadow: inset 0 0 0 1px rgba(14, 39, 66, 0.28), 0 0 0 1px var(--bpal-white), 0 0 0 2px var(--bpal-primary);
}

.bpal-product-card__colour-count {
	min-width: 0;
	overflow: hidden;
	color: #67717a;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpal-product-card__price,
.woocommerce ul.products li.product .bpal-product-card__price,
.woocommerce-page ul.products li.product .bpal-product-card__price {
	display: block;
	min-height: 2.625rem;
	margin-top: auto;
	padding: 6px 6px 14px !important;
	color: var(--bpal-primary);
	font-family: var(--bpal-heading);
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: right;
}

.bpal-product-card__price .price {
	padding: 0 !important;
}

.bpal-product-card__price del {
	margin-right: 5px;
	color: #7b838a;
	font-size: 0.78em;
	font-weight: 500;
}

.bpal-product-card__price ins {
	color: var(--bpal-primary);
	font-weight: 700;
	text-decoration: none;
}

.bpal-product-card__badges {
	position: absolute;
	z-index: 3;
	top: 10px;
	left: 10px;
	display: flex;
	max-width: calc(100% - 20px);
	flex-wrap: wrap;
	gap: 5px;
	pointer-events: none;
}

.bpal-product-card__badge {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	justify-content: center;
	padding: 4px 7px;
	border: 1px solid var(--bpal-primary);
	border-radius: 0;
	font-family: var(--bpal-heading);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	line-height: 1;
}

.bpal-product-card__badge--sale {
	background: var(--bpal-primary);
	color: var(--bpal-white);
}

.bpal-product-card__badge--discount {
	background: var(--bpal-white);
	color: var(--bpal-primary);
}

/* Sold out: only in a list when the visitor asked for it; the card says so and its picture steps back. */
.bpal-product-card__badge--soldout {
	background: #59636d;
	color: var(--bpal-white);
}

.bpal-catalog-card.outofstock .bpal-product-image-frame img {
	opacity: 0.55;
}

.bpal-catalog-card:hover {
	transform: none !important;
	box-shadow: none !important;
	border-bottom-color: rgba(14, 39, 66, 0.18) !important;
}

@media (min-width: 1181px) {
	.bpal-catalog-grid-controls {
		display: inline-flex;
	}

	.bpal-catalog-toolbar {
		justify-content: flex-start;
	}

	.bpal-catalog-toolbar .bpal-catalog-count {
		margin-right: auto;
	}

	.bpal-catalog-grid-controls--enhanced {
		margin-left: auto;
	}

	/* One row of 36px controls: the count, the sort select and the density buttons share a line and, with the
	   bottom margin WooCommerce gives the count and the form, a bottom margin. */
	.bpal-catalog-grid-controls--native {
		float: right;
		margin: 0 0 1em 8px;
	}

	.woocommerce-result-count {
		line-height: 36px;
	}

	html:not([data-bpal-catalog-columns]) .bpal-catalog-layout .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="3"] .bpal-catalog-layout .bpal-catalog-results ul.products,
	html:not([data-bpal-catalog-columns]) .woocommerce ul.products,
	html:not([data-bpal-catalog-columns]) .woocommerce-page ul.products,
	html:not([data-bpal-catalog-columns]) .woocommerce .bpal-catalog-layout.is-enhanced .bpal-catalog-results ul.products,
	html:not([data-bpal-catalog-columns]) .woocommerce .bpal-catalog-layout.bpal-catalog-layout--server-ready .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="3"] .woocommerce ul.products,
	html[data-bpal-catalog-columns="3"] .woocommerce-page ul.products,
	html[data-bpal-catalog-columns="3"] .woocommerce .bpal-catalog-layout.is-enhanced .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="3"] .woocommerce .bpal-catalog-layout.bpal-catalog-layout--server-ready .bpal-catalog-results ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	html[data-bpal-catalog-columns="2"] .bpal-catalog-layout .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="2"] .woocommerce ul.products,
	html[data-bpal-catalog-columns="2"] .woocommerce-page ul.products,
	html[data-bpal-catalog-columns="2"] .woocommerce .bpal-catalog-layout.is-enhanced .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="2"] .woocommerce .bpal-catalog-layout.bpal-catalog-layout--server-ready .bpal-catalog-results ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	html[data-bpal-catalog-columns="4"] .bpal-catalog-layout .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="4"] .woocommerce ul.products,
	html[data-bpal-catalog-columns="4"] .woocommerce-page ul.products,
	html[data-bpal-catalog-columns="4"] .woocommerce .bpal-catalog-layout.is-enhanced .bpal-catalog-results ul.products,
	html[data-bpal-catalog-columns="4"] .woocommerce .bpal-catalog-layout.bpal-catalog-layout--server-ready .bpal-catalog-results ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

}

@media (min-width: 1024px) and (max-width: 1180px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce .bpal-catalog-results ul.products,
	.woocommerce-page .bpal-catalog-results ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}


}

@media (max-width: 1023px) {
	.bpal-catalog-grid-controls {
		display: none !important;
	}

}

@media (max-width: 680px) {

	.bpal-product-card__identity {
		/* Exact line boxes: 0.61rem×1.25, 0.66rem×1.35, 0.78rem×1.3×2. */
		grid-template-rows: 0.7625rem 0.891rem 2.028rem;
		gap: 2px;
		padding: 8px 4px 0;
	}

	.bpal-product-card__brand {
		font-size: 0.61rem;
	}

	.bpal-product-card__fit {
		font-size: 0.66rem;
	}

	.bpal-catalog-card .bpal-product-card__type,
	.woocommerce ul.products li.product .bpal-product-card__type,
	.woocommerce-page ul.products li.product .bpal-product-card__type {
		font-size: 0.78rem;
	}

	.bpal-product-card__colours {
		height: 1.1875rem;
		gap: 5px;
		padding: 4px 4px 0;
	}

	.bpal-product-card__swatches {
		gap: 4px;
	}

	.bpal-swatch {
		width: 11px;
		height: 11px;
	}

	.bpal-product-card__colour-count {
		font-size: 0.64rem;
	}

	.bpal-product-card__price,
	.woocommerce ul.products li.product .bpal-product-card__price,
	.woocommerce-page ul.products li.product .bpal-product-card__price {
		min-height: 2.1875rem;
		padding: 4px 4px 9px !important;
		font-size: 0.79rem;
	}

	.bpal-product-card__badges {
		top: 7px;
		left: 7px;
		gap: 3px;
	}

	.bpal-product-card__badge {
		min-height: 21px;
		padding: 3px 5px;
		font-size: 0.56rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpal-catalog-grid-button,
	.bpal-catalog-card > a.woocommerce-loop-product__link > img,
	.bpal-catalog-card .bpal-product-card__media img,
	.bpal-catalog-card .bpal-product-image-frame img {
		transition: none !important;
		transform: none !important;
	}
}

/* Theme v0.7.2: tighter catalog heading position below the site header. */
body.bpal-is-product-overview .bpal-main--woocommerce {
	padding-top: 8px;
}

body.bpal-is-product-overview .bpal-catalog-heading-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	margin: 0 0 8px;
}

body.bpal-is-product-overview .bpal-catalog-heading-row__breadcrumb {
	min-width: 0;
}

body.bpal-is-product-overview .bpal-catalog-heading-row .woocommerce-breadcrumb {
	margin: 0;
}

body.bpal-is-product-overview h1.bpal-catalog-page-title {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: right;
}

body.bpal-is-product-overview .woocommerce-products-header {
	margin: 0;
}

body.bpal-is-product-overview .woocommerce-products-header:empty {
	display: none;
}

body.bpal-is-product-overview .bpal-catalog-results ul.products {
	margin-top: 0 !important;
}

@media (max-width: 1023px) {
	body.bpal-is-product-overview .bpal-main--woocommerce {
		padding-top: 8px;
	}

	body.bpal-is-product-overview .bpal-catalog-heading-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		margin-bottom: 6px;
	}

	body.bpal-is-product-overview h1.bpal-catalog-page-title {
		font-size: 24px;
		text-align: left;
	}
}

/* Theme 0.33.7, desktop: a category page names its category three times (breadcrumb, H1, filter panel) above the
   products. The H1 stays, as the page heading, but as tall as the breadcrumb line (20 px, which is the height of the
   row), and the filter panel no longer repeats the name, so its groups start at the top of the column. On mobile the
   H1 is the only visible title (the panel is a drawer), so nothing changes there. */
@media (min-width: 1024px) {
	body.bpal-is-product-overview h1.bpal-catalog-page-title {
		font-size: 18px;
		line-height: 20px;
	}

	/* Hidden, not removed: product-filters.js keeps its text current for the drawer, and the panel is still named by
	   its aria-label. Only where a heading row names the category; the hub and brand pages have their own heading. */
	body.bpal-is-product-overview:has(.bpal-catalog-heading-row) .bpal-filter-panel__header {
		display: none;
	}

	body.bpal-is-product-overview:has(.bpal-catalog-heading-row) .bpal-filter-feedback:empty {
		margin-top: 0;
	}

	/* Theme 0.38.4: a brand page names its brand in the hero (the H1), so the filter panel does not say it again above its
	   groups. Hidden, not removed, like the category pages above: the panel is still named by its aria-label, and on mobile
	   the drawer keeps its head with the name and the close button. */
	body.bpal-is-product-overview:has(.bpal-brand-hero) .bpal-filter-panel__header {
		display: none;
	}

	body.bpal-is-product-overview:has(.bpal-brand-hero) .bpal-filter-feedback:empty {
		margin-top: 0;
	}
}

/* Theme 0.10.1: hard-stop intrinsic inline sizing from widening catalog grid items. */
body.bpal-is-product-overview .bpal-catalog-results,
body.bpal-is-product-overview .bpal-catalog-results ul.products {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.bpal-catalog-results ul.products > li.product.bpal-catalog-card,
.woocommerce ul.products > li.product.bpal-catalog-card,
.woocommerce-page ul.products > li.product.bpal-catalog-card {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	contain: inline-size;
	overflow: hidden;
}

.bpal-catalog-card > a.woocommerce-loop-product__link {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.bpal-catalog-card .bpal-product-card__media,
.bpal-catalog-card .bpal-product-image-frame {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.bpal-catalog-card .bpal-product-card__media > picture,
.bpal-catalog-card .bpal-product-image-frame > picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.bpal-catalog-card .bpal-product-card__media img,
.bpal-catalog-card .bpal-product-image-frame img,
.bpal-catalog-card .bpal-product-card__media picture > img,
.bpal-catalog-card .bpal-product-image-frame picture > img {
	min-width: 0;
	max-width: 100%;
}


/* Sleeve labels are neutral informative badges, never sale badges. */
.bpal-product-card__badge--sleeve { background: var(--bpal-white); color: var(--bpal-primary); border-color: var(--bpal-primary); }

/* Theme 0.42.0: promotion cards in the product lists (inc/catalog-promo.php, assets/js/instant-fragments.js). A card is
   one link: a picture in the same 4:5 frame as a product, and under it the line that says where the card leads (that
   line is also the purpose of the link for a screen reader). It is no product: it has no .product class, so nothing
   that works on products (analytics, quick add) takes it for one. */
.bpal-catalog-results ul.products > li.bpal-promo-card {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	background: var(--bpal-white);
	border-bottom: 1px solid rgba(14, 39, 66, 0.09);
}

.bpal-catalog-results ul.products > li.bpal-promo-card:hover {
	border-bottom-color: rgba(14, 39, 66, 0.18);
}

.bpal-promo-card__link,
.bpal-promo-card__link:hover {
	display: flex;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	color: var(--bpal-primary);
	text-decoration: none;
}

.bpal-promo-card__link:focus-visible {
	outline: 2px solid var(--bpal-primary);
	outline-offset: -2px;
}

.bpal-promo-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	flex: 0 0 auto;
	overflow: hidden;
	background: #f4efe6;
}

.bpal-catalog-results ul.products > li.bpal-promo-card .bpal-promo-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	/* Core only accepts 4:5 (within 2%), so the picture is the frame: filling it neither crops nor leaves a bar. */
	object-fit: fill;
}

.bpal-promo-card__cta {
	display: block;
	padding: 12px 6px 14px;
	font-family: var(--bpal-heading);
	font-size: 0.94rem;
	font-weight: 550;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.bpal-promo-card__link:hover .bpal-promo-card__cta,
.bpal-promo-card__link:focus-visible .bpal-promo-card__cta {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 680px) {
	.bpal-promo-card__cta {
		padding: 8px 4px 9px;
		font-size: 0.78rem;
	}
}