/* ==========================================================================
   Ebook Theme - WooCommerce
   Loaded only on shop, product, cart, checkout and account screens.

   Contents
   1.  Shop layout + toolbar
   2.  Product grid
   3.  Single product
   4.  Add to cart + variations
   5.  Tabs, reviews, related
   6.  Mini cart
   7.  Cart page
   8.  Checkout
   9.  My account + downloads
   10. Woo notices
   11. Block cart/checkout overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop layout + toolbar
   -------------------------------------------------------------------------- */
.bl-shop {
	align-items: start;
	row-gap: var(--bl-s8);
}

@media (min-width: 1024px) {

	.bl-shop__sidebar {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
		display: block;
		max-height: calc(100vh - var(--bl-header-h) - var(--bl-s10));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* On mobile the sidebar lives inside a drawer */
@media (max-width: 1023px) {
	.bl-shop__sidebar {
		display: none;
	}
}

.bl-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bl-s3);
	margin-block-end: var(--bl-s6);
	padding-block-end: var(--bl-s4);
	border-block-end: 1px solid var(--bl-border);
}

.bl-shop__count {
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	margin: 0;
}

.bl-shop__tools {
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
	margin-inline-start: auto;
}

.woocommerce-ordering select {
	min-height: 40px;
	padding-block: var(--bl-s2);
	font-size: var(--bl-fs-sm);
	width: auto;
	min-width: 180px;
}

/* Active filter chips */
.bl-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-s2);
	margin-block-end: var(--bl-s5);
}

.bl-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-s1);
	padding: var(--bl-s1) var(--bl-s2) var(--bl-s1) var(--bl-s3);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-sm);
	background: var(--bl-surface-2);
	color: var(--bl-text);
	font-size: var(--bl-fs-sm);
	text-decoration: none;
}

.bl-chip:hover {
	border-color: var(--bl-danger);
	color: var(--bl-danger);
}

/* Category pill filter row */
.bl-termbar {
	display: flex;
	gap: var(--bl-s2);
	overflow-x: auto;
	scrollbar-width: none;
	margin-block-end: var(--bl-s6);
	padding-block-end: var(--bl-s1);
}

.bl-termbar::-webkit-scrollbar {
	display: none;
}

.bl-termbar a {
	flex-shrink: 0;
	padding: var(--bl-s2) var(--bl-s4);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-sm);
	background: var(--bl-surface);
	color: var(--bl-text);
	font-size: var(--bl-fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--bl-t), background-color var(--bl-t), color var(--bl-t);
}

.bl-termbar a:hover {
	border-color: var(--bl-border-strong);
	color: var(--bl-ink);
}

.bl-termbar a.is-active {
	background: var(--bl-ink);
	border-color: var(--bl-ink);
	color: var(--bl-bg);
}

/* --------------------------------------------------------------------------
   2. Product grid
   -------------------------------------------------------------------------- */
/* Four across on desktop, two on tablet, one on a phone. Stated rather than
   derived from a minimum card width: auto-fill at 200px put six on a wide
   screen and three on a tablet, which is a different page from the one that
   was asked for. */
.woocommerce ul.products,
.bl-products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products,
	.bl-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.bl-products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* A sidebar takes a quarter of the row, so the grid loses a column. */
	.bl-shop--sidebar ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bl-products--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.woocommerce ul.products li.product,
.bl-products > li {
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto !important;
	float: none !important;
	clear: none !important;
}

/* Neutralise core Woo grid floats we are replacing with CSS grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* --------------------------------------------------------------------------
   3. Single product
   -------------------------------------------------------------------------- */
.bl-product {
	align-items: start;
	row-gap: var(--bl-s10);
	padding-block: var(--bl-s10);
}

.bl-product__media {
	position: relative;
}

@media (min-width: 900px) {
	.bl-product__media {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
	}
}

.bl-product__cover {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: var(--bl-r-lg);
	overflow: hidden;
	background: var(--bl-surface-3);
	box-shadow: var(--bl-shadow-lg);
}

.bl-product__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-product__gallery {
	display: flex;
	gap: var(--bl-s2);
	margin-block-start: var(--bl-s4);
	overflow-x: auto;
	scrollbar-width: thin;
}

.bl-product__gallery button {
	flex: 0 0 64px;
	border: 2px solid transparent;
	border-radius: var(--bl-r-sm);
	overflow: hidden;
	background: var(--bl-surface-3);
	aspect-ratio: 2 / 3;
	padding: 0;
}

.bl-product__gallery button.is-active {
	border-color: var(--bl-ink);
}

.bl-product__gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-product__header {
	margin-block-end: var(--bl-s5);
}

.bl-product__title {
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	margin-block: var(--bl-s2) var(--bl-s3);
}

.bl-product__byline {
	color: var(--bl-muted);
	font-size: var(--bl-fs-md);
}

.bl-product__byline a {
	color: var(--bl-ink);
	font-weight: 600;
	text-decoration: none;
}

.bl-product__byline a:hover {
	color: var(--bl-ink);
	text-decoration: underline;
	text-decoration-color: var(--bl-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.bl-product__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bl-s4);
	margin-block-end: var(--bl-s5);
	padding-block: var(--bl-s4);
	border-block: 1px solid var(--bl-border);
}

.bl-product__spec {
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-product__spec strong {
	color: var(--bl-ink);
	font-weight: 600;
}

.bl-product__short {
	margin-block-end: var(--bl-s6);
	color: var(--bl-text);
	font-size: var(--bl-fs-lg);
	line-height: 1.65;
}

.bl-product__short p:not(:last-child) {
	margin-block-end: var(--bl-s3);
}

/* Purchase box - the conversion surface */
.bl-buybox {
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.bl-buybox__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bl-s3);
	margin-block-end: var(--bl-s2);
}

.bl-buybox__save {
	padding: 2px var(--bl-s2);
	border-radius: var(--bl-r-sm);
	background: var(--bl-success-soft);
	color: var(--bl-success);
	font-size: var(--bl-fs-sm);
	font-weight: 700;
}

.bl-buybox__vat {
	margin-block-end: var(--bl-s5);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-buybox__actions {
	display: grid;
	gap: var(--bl-s3);
}

.bl-buybox__guarantee {
	display: flex;
	align-items: flex-start;
	gap: var(--bl-s2);
	margin-block-start: var(--bl-s5);
	padding-block-start: var(--bl-s5);
	border-block-start: 1px solid var(--bl-border);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-buybox__guarantee svg {
	color: var(--bl-success);
	flex-shrink: 0;
	margin-block-start: 1px;
}

/* --------------------------------------------------------------------------
   4. Add to cart + variations
   -------------------------------------------------------------------------- */
.bl-buybox form.cart,
.bl-buybox .variations_form {
	display: grid;
	gap: var(--bl-s4);
	margin: 0;
}

.bl-buybox .quantity {
	display: inline-flex;
}

.woocommerce div.product form.cart .button,
.bl-buybox button[type="submit"],
.bl-buybox .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bl-s2);
	width: 100%;
	min-height: 52px;
	padding: 0.875rem var(--bl-s6);
	border: 1px solid var(--bl-action);
	border-radius: var(--bl-r);
	background: var(--bl-action);
	color: var(--bl-action-contrast);
	font-size: var(--bl-fs-base);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--bl-t), border-color var(--bl-t);
}

.woocommerce div.product form.cart .button:hover,
.bl-buybox .single_add_to_cart_button:hover {
	background: var(--bl-action-hover);
	border-color: var(--bl-action-hover);
}

.bl-buybox .single_add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Variation selector */
.variations {
	display: grid;
	gap: var(--bl-s4);
	margin: 0;
	border: 0;
}

.variations tbody,
.variations tr,
.variations td,
.variations th {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: start;
}

.variations th.label {
	margin-block-end: var(--bl-s2);
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
}

.variations td.value {
	position: relative;
}

.reset_variations {
	display: inline-block;
	margin-block-start: var(--bl-s2);
	font-size: var(--bl-fs-sm);
}

.woocommerce-variation-price {
	margin-block-end: var(--bl-s3);
}

.woocommerce-variation-availability {
	font-size: var(--bl-fs-sm);
	color: var(--bl-muted);
}

/* Grouped products (bundles) */
.woocommerce div.product form.cart .group_table {
	display: grid;
	gap: var(--bl-s3);
}

.woocommerce div.product form.cart .group_table tr {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--bl-s3);
	padding: var(--bl-s3);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r);
}

.woocommerce div.product form.cart .group_table td {
	padding: 0;
	border: 0;
}

/* Stock status */
.stock.in-stock {
	color: var(--bl-success);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
}

.stock.out-of-stock {
	color: var(--bl-danger);
	font-weight: 600;
}

.woocommerce #reviews ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bl-s6);
}

.woocommerce #reviews .comment_container {
	display: flex;
	gap: var(--bl-s4);
}

.woocommerce #reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--bl-r-full);
	flex-shrink: 0;
}

.woocommerce #reviews .comment-text {
	flex: 1;
}

.woocommerce #reviews .meta {
	margin-block-end: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.woocommerce #reviews .meta strong {
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
}

.woocommerce .star-rating,
.woocommerce p.stars {
	color: var(--bl-star);
}

.woocommerce p.stars a {
	text-decoration: none;
}

/* Related / upsells */
.bl-related {
	padding-block: var(--bl-s12);
	border-block-start: 1px solid var(--bl-border);
}

/* --------------------------------------------------------------------------
   6. Mini cart
   -------------------------------------------------------------------------- */
.bl-minicart {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bl-minicart__items {
	display: grid;
	gap: var(--bl-s5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-minicart__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--bl-s4);
	align-items: start;
}

.bl-minicart__thumb {
	border-radius: var(--bl-r-sm);
	overflow: hidden;
	background: var(--bl-surface-3);
	aspect-ratio: 2 / 3;
}

.bl-minicart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-minicart__name {
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.bl-minicart__name:hover {
	color: var(--bl-ink);
	text-decoration: underline;
	text-decoration-color: var(--bl-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.bl-minicart__qty {
	margin-block-start: 2px;
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-minicart__remove {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--bl-r-sm);
	color: var(--bl-muted);
	text-decoration: none;
	transition: background-color var(--bl-t), color var(--bl-t);
}

.bl-minicart__remove:hover {
	background: var(--bl-danger-soft);
	color: var(--bl-danger);
}

.bl-minicart__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--bl-s4);
	color: var(--bl-ink);
	font-size: var(--bl-fs-lg);
	font-weight: 700;
}

.bl-minicart__actions {
	display: grid;
	gap: var(--bl-s2);
}

.bl-minicart__empty {
	display: grid;
	place-items: center;
	gap: var(--bl-s4);
	padding-block: var(--bl-s12);
	text-align: center;
	color: var(--bl-muted);
}

/* --------------------------------------------------------------------------
   7. Cart page
   -------------------------------------------------------------------------- */
/* The section around this already sets the rhythm for an application screen,
   so the grid does not add a second helping of it on top. */
.bl-cart {
	align-items: start;
	row-gap: var(--bl-s8);
}

@media (min-width: 1024px) {
	.bl-cart__summary {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
	}
}

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--bl-surface);
}

.woocommerce table.shop_table th {
	padding: var(--bl-s4) var(--bl-s5);
	background: var(--bl-surface-2);
	color: var(--bl-ink);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
	text-align: start;
	text-transform: none;
	border-block-end: 1px solid var(--bl-border);
}

.woocommerce table.shop_table td {
	padding: var(--bl-s5);
	border-block-end: 1px solid var(--bl-border);
	vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
	border-block-end: 0;
}

.woocommerce table.cart img {
	width: 56px;
	border-radius: var(--bl-r-sm);
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--bl-r-full);
	color: var(--bl-muted) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--bl-t), color var(--bl-t);
}

.woocommerce a.remove:hover {
	background: var(--bl-danger-soft);
	color: var(--bl-danger) !important;
}

/* Stack the cart table into cards on small screens */
@media (max-width: 767px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table tr {
		position: relative;
		margin-block-end: var(--bl-s4);
		border: 1px solid var(--bl-border);
		border-radius: var(--bl-r);
	}

	.woocommerce table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bl-s4);
		padding: var(--bl-s3) var(--bl-s4);
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		color: var(--bl-muted);
		font-size: var(--bl-fs-sm);
		font-weight: 600;
	}

	.woocommerce table.shop_table td.product-remove::before,
	.woocommerce table.shop_table td.product-thumbnail::before {
		content: none;
	}
}

.bl-cart__summary-box {
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.bl-cart__summary-box h2 {
	margin-block-end: var(--bl-s5);
	font-size: var(--bl-fs-h4);
}

.woocommerce .cart_totals table {
	border: 0;
	background: none;
}

.woocommerce .cart_totals th,
.woocommerce .cart_totals td {
	padding: var(--bl-s3) 0;
	background: none;
	border-block-end: 1px solid var(--bl-border);
	font-size: var(--bl-fs-md);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-block-end: 0;
	color: var(--bl-ink);
	font-size: var(--bl-fs-lg);
	font-weight: 700;
}

.woocommerce .cart_totals td {
	text-align: end;
}

.woocommerce .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bl-s2);
	width: 100%;
	min-height: 52px;
	margin-block-start: var(--bl-s5);
	border-radius: var(--bl-r);
	background: var(--bl-action);
	color: var(--bl-action-contrast);
	font-size: var(--bl-fs-base);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce .checkout-button:hover {
	background: var(--bl-action-hover);
	color: var(--bl-action-contrast);
}

/* --------------------------------------------------------------------------
   8. Checkout
   -------------------------------------------------------------------------- */
.bl-checkout {
	align-items: start;
	row-gap: var(--bl-s8);
}

@media (min-width: 1024px) {
	.bl-checkout__aside {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
	}
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--bl-s2);
	margin: 0 0 var(--bl-s4);
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: var(--bl-fs-md);
	font-weight: 500;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 640px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--bl-s4);
	}

	.woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce-shipping-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	margin-block-end: var(--bl-s5);
	font-size: var(--bl-fs-h4);
}

#order_review_heading {
	margin-block: var(--bl-s8) var(--bl-s5);
}

.woocommerce-checkout-review-order {
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.woocommerce-checkout-review-order table.shop_table {
	border: 0;
	background: none;
}

.woocommerce-checkout-review-order th,
.woocommerce-checkout-review-order td {
	padding: var(--bl-s3) 0;
	background: none;
}

#payment {
	margin-block-start: var(--bl-s5);
	background: none;
	border-radius: 0;
}

#payment ul.payment_methods {
	display: grid;
	gap: var(--bl-s2);
	padding: 0;
	margin: 0 0 var(--bl-s5);
	border: 0;
	list-style: none;
}

#payment ul.payment_methods li {
	padding: var(--bl-s4);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r);
	background: var(--bl-surface-2);
}

#payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-s2);
	font-weight: 600;
	cursor: pointer;
}

#payment div.payment_box {
	margin-block-start: var(--bl-s3);
	padding: var(--bl-s4);
	border-radius: var(--bl-r-sm);
	background: var(--bl-surface);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

#payment div.payment_box::before {
	content: none;
}

#place_order {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--bl-r);
	background: var(--bl-action);
	color: var(--bl-action-contrast);
	font-size: var(--bl-fs-base);
	font-weight: 600;
	cursor: pointer;
}

#place_order:hover {
	background: var(--bl-action-hover);
}

/* Digital-goods checkout: hide shipping UI that never applies */
.bl-checkout--digital .woocommerce-shipping-fields,
.bl-checkout--digital .shipping {
	display: none;
}

/* Order received */
.woocommerce-order {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--bl-s12);
}

.woocommerce-thankyou-order-received {
	margin-block-end: var(--bl-s6);
	padding: var(--bl-s5);
	border-radius: var(--bl-r);
	background: var(--bl-success-soft);
	color: var(--bl-success);
	font-size: var(--bl-fs-lg);
	font-weight: 600;
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--bl-s4);
	margin: 0 0 var(--bl-s8);
	padding: var(--bl-s5);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface-2);
	list-style: none;
}

.woocommerce ul.order_details li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	border: 0;
	float: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.order_details li strong {
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
}

/* --------------------------------------------------------------------------
   9. My account + downloads
   -------------------------------------------------------------------------- */
.bl-account {
	display: grid;
	gap: var(--bl-s8);
	align-items: start;
	padding-block: var(--bl-s10);
}

@media (min-width: 900px) {
	.bl-account {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: var(--bl-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: var(--bl-s3);
	padding: var(--bl-s3) var(--bl-s4);
	border-radius: var(--bl-r);
	color: var(--bl-text);
	font-size: var(--bl-fs-md);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--bl-t), color var(--bl-t);
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--bl-surface-2);
	color: var(--bl-ink);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--bl-surface-2);
	color: var(--bl-ink);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--bl-highlight);
}

/* Download library - the core of a digital store's account area */
.bl-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--bl-s5);
}

.bl-download {
	display: flex;
	gap: var(--bl-s4);
	padding: var(--bl-s4);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	transition: border-color var(--bl-t), box-shadow var(--bl-t);
}

.bl-download:hover {
	border-color: var(--bl-border-strong);
	box-shadow: var(--bl-shadow-sm);
}

.bl-download__cover {
	flex: 0 0 64px;
	aspect-ratio: 2 / 3;
	border-radius: var(--bl-r-sm);
	overflow: hidden;
	background: var(--bl-surface-3);
}

.bl-download__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-download__body {
	display: flex;
	flex-direction: column;
	gap: var(--bl-s1);
	min-width: 0;
	flex: 1;
}

.bl-download__title {
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
	line-height: 1.35;
}

.bl-download__meta {
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-download__actions {
	margin-block-start: auto;
	padding-block-start: var(--bl-s3);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content > h2:first-child {
	margin-block-end: var(--bl-s5);
	font-size: var(--bl-fs-h3);
}

/* Login / register */
.bl-auth {
	max-width: 440px;
	margin-inline: auto;
	padding: var(--bl-s8);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.woocommerce form.login,
.woocommerce form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce form.login .button,
.woocommerce form.register .button,
.woocommerce-form-login__submit {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: var(--bl-r);
	background: var(--bl-action);
	color: var(--bl-action-contrast);
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. Woo notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bl-s3);
	margin: 0 0 var(--bl-s6);
	padding: var(--bl-s4) var(--bl-s5);
	border: 1px solid var(--bl-border);
	border-inline-start-width: 3px;
	border-radius: var(--bl-r);
	background: var(--bl-surface-2);
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message {
	background: var(--bl-success-soft);
	border-color: var(--bl-success);
}

.woocommerce-info {
	background: var(--bl-highlight-soft);
	border-color: var(--bl-highlight);
}

.woocommerce-error {
	background: var(--bl-danger-soft);
	border-color: var(--bl-danger);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-inline-start: auto;
	padding: var(--bl-s2) var(--bl-s4);
	border-radius: var(--bl-r-sm);
	background: var(--bl-ink);
	color: var(--bl-bg);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

/* Generic Woo button reset so plugin buttons inherit the design system */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bl-s2);
	min-height: 44px;
	padding: 0.625rem var(--bl-s5);
	border: 1px solid var(--bl-border-strong);
	border-radius: var(--bl-r);
	background: var(--bl-surface);
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bl-t), border-color var(--bl-t), color var(--bl-t);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--bl-surface-2);
	border-color: var(--bl-muted);
	color: var(--bl-ink);
}

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--bl-action);
	border-color: var(--bl-action);
	color: var(--bl-action-contrast);
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--bl-action-hover);
	border-color: var(--bl-action-hover);
	color: var(--bl-action-contrast);
}

/* --------------------------------------------------------------------------
   11. Block cart/checkout overrides
   WooCommerce Blocks ship their own styles; these align them with the theme
   without fighting their internals.
   -------------------------------------------------------------------------- */
.wc-block-components-button:not(.is-link) {
	min-height: 48px;
	border-radius: var(--bl-r);
	background: var(--bl-action);
	color: var(--bl-action-contrast);
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--bl-action-hover);
}

.wc-block-components-text-input input,
.wc-block-components-textarea {
	border-radius: var(--bl-r) !important;
	border-color: var(--bl-border-strong) !important;
	background: var(--bl-surface) !important;
	color: var(--bl-ink) !important;
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-cart-items {
	border-color: var(--bl-border) !important;
}

.wc-block-components-title,
.wc-block-components-product-name {
	color: var(--bl-ink) !important;
	font-family: var(--bl-font-display) !important;
}

.wc-block-components-totals-item__value {
	color: var(--bl-ink);
	font-weight: 600;
}

.wc-block-cart,
.wc-block-checkout {
	--wp--preset--color--contrast: var(--bl-ink);
}

/* --------------------------------------------------------------------------
   12. Shop sidebar visibility
   The filter drawer is a mobile affordance only; on desktop the sidebar is
   already on screen, so the button would just be noise.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.bl-shop__filter-btn {
		display: none;
	}

	#bl-filter-drawer {
		display: none;
	}
}

.bl-shop__main {
	min-width: 0;
}

/* Checkout two-column split inherits from .bl-checkout; the inner col2-set
   that WooCommerce prints must not re-introduce its own columns. */
.bl-checkout .col2-set,
.bl-checkout .col-1,
.bl-checkout .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

.bl-checkout .col2-set::after {
	content: none;
}

/* Coupon form inside the order summary */
.bl-checkout__aside .checkout_coupon {
	margin: 0 0 var(--bl-s5);
	padding: var(--bl-s5);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r);
	background: var(--bl-surface-2);
}

.bl-checkout__aside .checkout_coupon .form-row {
	margin-block-end: var(--bl-s3);
}

.bl-checkout__aside .checkout_coupon .form-row-last {
	margin-block-end: 0;
}

/* Login prompt at the top of the details column */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
	margin-block-end: var(--bl-s5);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login.woocommerce-form-login {
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r);
	padding: var(--bl-s5);
	margin-block-end: var(--bl-s6);
	background: var(--bl-surface-2);
}

/* Cross-sells sit in the cart summary column, so they need a tighter grid */
.bl-cart__summary .cross-sells ul.products {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr));
	gap: var(--bl-s4);
}

.bl-cart__summary .cross-sells > h2 {
	margin-block: var(--bl-s8) var(--bl-s4);
	font-size: var(--bl-fs-h4);
}

.bl-cart__summary .cart_totals > h2 {
	margin-block-end: var(--bl-s4);
	font-size: var(--bl-fs-h4);
}

/* WooCommerce prints the totals inside .cart-collaterals; give it the card. */
.bl-cart__summary .cart_totals {
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.bl-cart__main {
	min-width: 0;
}

/* Cart action row: coupon on the left, update on the right */
.woocommerce table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-s3);
	align-items: center;
	justify-content: space-between;
	background: var(--bl-surface-2);
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: var(--bl-s2);
	flex: 1 1 260px;
}

.woocommerce table.cart td.actions .coupon input[type="text"] {
	max-width: 220px;
}

.woocommerce table.cart td.actions::before {
	content: none;
}

/* --------------------------------------------------------------------------
   13. My account layout
   WooCommerce prints the navigation and the content as siblings inside
   .woocommerce; turning that into a grid avoids overriding my-account.php.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--bl-s8);
	align-items: start;
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: span 3;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: span 9;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
	}
}

/*
 * The signed-out account screen holds two panels side by side, so it is
 * capped at a width two of them fit in rather than the 460px it used to be -
 * that was set when the columns had no layout at all and one narrow card was
 * the best available answer.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 920px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   14. Block cart and checkout
   These pages are rendered by WooCommerce Blocks on modern installs. They ship
   their own layout, so the theme only aligns spacing and the container.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: none;
	margin-inline: 0;
}

.wc-block-cart,
.wc-block-checkout {
	--wp--style--global--wide-size: var(--bl-container);
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border-radius: var(--bl-r-lg);
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	font-size: var(--bl-fs-md);
}

.wc-block-components-product-name {
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-image img {
	border-radius: var(--bl-r-sm);
}

.wc-block-components-checkout-step__heading,
.wc-block-cart__submit-container {
	margin-block-start: var(--bl-s5);
}

.wc-block-components-notice-banner {
	border-radius: var(--bl-r);
}

/* Shipping UI never applies to a cart of downloads. */
.bl-checkout--digital .wc-block-checkout__shipping-option,
.bl-checkout--digital .wc-block-components-shipping-rates-control {
	display: none;
}

/* --------------------------------------------------------------------------
   15. Table of contents
   -------------------------------------------------------------------------- */
.bl-toc {
	counter-reset: bl-toc;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--bl-border);
}

.bl-toc__item {
	counter-increment: bl-toc;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--bl-s3);
	align-items: baseline;
	padding-block: var(--bl-s4);
	border-block-end: 1px solid var(--bl-border);
}

.bl-toc__item::before {
	content: counter( bl-toc, decimal-leading-zero );
	color: var(--bl-muted);
	font-family: var(--bl-font-mono);
	font-size: var(--bl-fs-xs);
}

.bl-toc__title {
	color: var(--bl-ink);
	font-weight: 600;
}

.bl-toc__note {
	grid-column: 2;
	color: var(--bl-muted);
	font-size: var(--bl-fs-md);
}

/* The editorial introduction, above the product description. */
.bl-product__intro {
	margin-block-end: var(--bl-s5);
	padding-block-end: var(--bl-s5);
	border-block-end: 1px solid var(--bl-border);
	font-size: var(--bl-fs-lg);
	color: var(--bl-text);
}


/* --------------------------------------------------------------------------
   Shop filter bar
   --------------------------------------------------------------------------
   Search, collection, sort. Three GET forms in one row; each one changes what
   the page is, so each gets a URL rather than a spinner.
   -------------------------------------------------------------------------- */
.bl-shopbar {
	border-block-end: 1px solid var(--bl-border);
	background: var(--bl-surface-2);
}

.bl-shopbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bl-s3);
	padding-block: var(--bl-s4);
}

.bl-shopbar__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
	flex: 1 1 18rem;
	min-width: 0;
}

.bl-shopbar__icon {
	position: absolute;
	inset-inline-start: var(--bl-s3);
	color: var(--bl-muted);
	pointer-events: none;
}

.bl-shopbar__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline-start: calc(var(--bl-s3) * 2 + 18px);
	background: var(--bl-surface);
}

.bl-shopbar__filter {
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
}

.bl-shopbar__filter select,
.bl-shopbar__sort select {
	background: var(--bl-surface);
}

/* WooCommerce wraps its ordering control in a form of its own. */
.bl-shopbar__sort .woocommerce-ordering {
	margin: 0;
}

@media (max-width: 599px) {
	.bl-shopbar__search {
		flex-basis: 100%;
	}

	.bl-shopbar__filter,
	.bl-shopbar__sort {
		flex: 1 1 auto;
	}

	.bl-shopbar__filter select,
	.bl-shopbar__sort select,
	.bl-shopbar__sort .woocommerce-ordering {
		width: 100%;
	}
}

/* A wide card and a 2:3 cover make a very tall card - two columns across a
   tablet gives each cover half the viewport. The same cap the home-page grids
   use, so a book keeps its proportions without the card losing its own. */
.woocommerce ul.products .bl-book__cover,
.bl-products .bl-book__cover {
	max-width: var(--bl-cover-max, none);
}

@media (min-width: 600px) {
	.woocommerce ul.products,
	.bl-products {
		--bl-cover-max: 260px;
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.bl-products {
		--bl-cover-max: 300px;
	}
}

/* --------------------------------------------------------------------------
   Single product: the buy column and the details below it
   -------------------------------------------------------------------------- */

/* Badges sit with the copy rather than on top of the artwork. On a card the
   cover is the whole tile so an overlay is the only place for them; here the
   buy column has room, and the cover stays a cover. */
.bl-badges--inline {
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-s2);
	margin-block-end: var(--bl-s4);
}

.bl-product__cat {
	margin-block-end: var(--bl-s2);
	font-size: var(--bl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bl-product__cat a {
	color: var(--bl-muted);
	text-decoration: none;
	transition: color var(--bl-t);
}

.bl-product__cat a:hover,
.bl-product__cat a:focus-visible {
	color: var(--bl-ink);
}

.bl-product__preview {
	margin-block-start: var(--bl-s4);
}

/* Three short assurances under the button. A list, because that is what it
   is, and because each line is a separate claim a reader may care about. */
.bl-buybox__assurance {
	display: grid;
	gap: var(--bl-s2);
	margin: var(--bl-s5) 0 0;
	padding: 0;
	list-style: none;
}

.bl-buybox__assurance li {
	display: flex;
	align-items: flex-start;
    gap: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.45;
}

.bl-buybox__assurance svg {
	flex-shrink: 0;
	margin-block-start: 1px;
	color: var(--bl-success);
}

/* ---- Product details ---------------------------------------------------- */

.bl-details {
	margin-block-start: var(--bl-s12);
	padding-block-start: var(--bl-s8);
	border-block-start: 1px solid var(--bl-border);
}

.bl-details__title {
	margin-block-end: var(--bl-s5);
	font-size: var(--bl-fs-h3);
	color: var(--bl-ink);
}

.bl-details__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	overflow: hidden;
}

@media (min-width: 768px) {
	.bl-details__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bl-details__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bl-s4);
	padding: var(--bl-s4) var(--bl-s5);
	border-block-start: 1px solid var(--bl-border);
}

/* The first row of each column needs no rule above it. */
.bl-details__row:first-child {
	border-block-start: 0;
}

@media (min-width: 768px) {
	.bl-details__row:nth-child(2) {
		border-block-start: 0;
	}

	/* A hairline between the two columns, not around every cell. */
	.bl-details__row:nth-child(even) {
		border-inline-start: 1px solid var(--bl-border);
	}
}

.bl-details__row dt {
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-details__row dt svg {
	color: var(--bl-muted);
}

.bl-details__row dd {
	margin: 0;
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
	text-align: end;
}

/* --------------------------------------------------------------------------
   Product page: the long-form sections
   --------------------------------------------------------------------------
   Set out in order rather than hidden behind tabs. The hierarchy does the
   work a tab strip pretends to do: a heading you can see, a rule above it,
   and enough space that each section reads as its own piece.
   -------------------------------------------------------------------------- */
.bl-content {
	margin-block-start: var(--bl-s12);
}

/* A jump list, not a tab strip: it names every section instead of hiding all
   but one, and it still reads as a summary when nothing is clicked. */
.bl-content__jump {
	padding: var(--bl-s5) var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface-2);
}

.bl-content__jump-title {
	margin-block-end: var(--bl-s3);
	color: var(--bl-muted);
	font-family: var(--bl-font);
	font-size: var(--bl-fs-xs);
	font-weight: 600;
	letter-spacing: var(--bl-eyebrow-tracking);
	text-transform: uppercase;
}

.bl-content__jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-s2) var(--bl-s5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-content__jump a {
	color: var(--bl-text);
	font-size: var(--bl-fs-md);
	font-weight: 500;
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color var(--bl-t), border-color var(--bl-t);
}

.bl-content__jump a:hover,
.bl-content__jump a:focus-visible {
	color: var(--bl-ink);
	border-block-end-color: var(--bl-highlight);
}

.bl-content__section {
	margin-block-start: var(--bl-s12);
	padding-block-start: var(--bl-s8);
	border-block-start: 1px solid var(--bl-border);
	/* Clear the sticky header when a jump link lands here. */
	scroll-margin-block-start: calc(var(--bl-header-h) + var(--bl-s6));
}

.bl-content__heading {
	margin-block-end: var(--bl-s5);
	font-size: var(--bl-fs-h2);
	color: var(--bl-ink);
	max-width: 20ch;
}

.bl-content__subheading {
	margin-block-end: var(--bl-s4);
	font-family: var(--bl-font);
	font-size: var(--bl-fs-md);
	font-weight: 700;
	color: var(--bl-ink);
}

/* The opening line of the overview, set larger than the body it introduces. */
.bl-content__lede {
	max-width: 46ch;
	margin-block-end: var(--bl-s6);
	color: var(--bl-ink);
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.bl-content__split {
	display: grid;
	gap: var(--bl-s8);
}

@media (min-width: 768px) {
	.bl-content__split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Checklists --------------------------------------------------------- */

.bl-checks {
	display: grid;
	gap: var(--bl-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.bl-checks--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bl-s3) var(--bl-s8);
	}
}

.bl-checks li {
	display: flex;
	align-items: flex-start;
	gap: var(--bl-s3);
	color: var(--bl-text);
	font-size: var(--bl-fs-lg);
	line-height: 1.5;
	max-width: 46ch;
}

.bl-checks svg {
	flex-shrink: 0;
	margin-block-start: 3px;
	color: var(--bl-success);
}

/* --------------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------------- */
.bl-account-nav ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-account-nav a {
	display: flex;
	align-items: center;
	gap: var(--bl-s3);
	padding: var(--bl-s3) var(--bl-s4);
	border-radius: var(--bl-r);
	color: var(--bl-muted);
	font-size: var(--bl-fs-md);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--bl-t), color var(--bl-t);
}

.bl-account-nav a:hover {
	background: var(--bl-surface-2);
	color: var(--bl-ink);
}

.bl-account-nav .is-active a {
	background: var(--bl-surface-2);
	color: var(--bl-ink);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--bl-highlight);
}

.bl-account-nav__label {
	flex: 1 1 auto;
	min-width: 0;
}

.bl-account-nav__count {
	flex-shrink: 0;
	min-width: 22px;
	padding-inline: 6px;
	border-radius: var(--bl-r-full);
	background: var(--bl-surface-3);
	color: var(--bl-ink);
	font-size: var(--bl-fs-xs);
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- Dashboard ---------------------------------------------------------- */

.bl-dash__head {
	margin-block-end: var(--bl-s8);
}

.bl-dash__greeting {
	font-size: var(--bl-fs-h2);
	color: var(--bl-ink);
}

.bl-dash__sub {
	margin-block-start: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-lg);
}

.bl-dash__shelf-head,
.bl-dash__links {
	margin-block-start: var(--bl-s10);
}

.bl-dash__shelf-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bl-s4);
	margin-block: 0 var(--bl-s5);
}

.bl-dash__title {
	font-size: var(--bl-fs-h4);
	color: var(--bl-ink);
}

.bl-dash__all {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-s2);
	color: var(--bl-ink);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bl-dash__all:hover {
	text-decoration: underline;
	text-decoration-color: var(--bl-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* The shelf: covers, close together, the way books sit on one. */
.bl-shelf {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bl-s5) var(--bl-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.bl-shelf {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.bl-shelf a {
	display: grid;
	gap: var(--bl-s2);
	text-decoration: none;
}

.bl-shelf__cover {
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: var(--bl-r-sm);
	background: var(--bl-surface-3);
	box-shadow: var(--bl-shadow-sm);
	overflow: hidden;
	transition: transform var(--bl-t), box-shadow var(--bl-t);
}

.bl-shelf__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.bl-shelf a:hover .bl-shelf__cover {
		transform: translateY(-3px);
		box-shadow: var(--bl-shadow-md);
	}
}

.bl-shelf__title {
	color: var(--bl-text);
	font-size: var(--bl-fs-xs);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ---- The rest of the account, as destinations --------------------------- */

.bl-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bl-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.bl-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bl-tile {
	display: flex;
	align-items: center;
	gap: var(--bl-s3);
	padding: var(--bl-s4) var(--bl-s5);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	color: var(--bl-ink);
	text-decoration: none;
	transition: border-color var(--bl-t), box-shadow var(--bl-t);
}

.bl-tile:hover {
	border-color: var(--bl-border-strong);
	box-shadow: var(--bl-shadow-sm);
}

.bl-tile__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--bl-r);
	background: var(--bl-surface-2);
	color: var(--bl-accent);
}

.bl-tile__label {
	flex: 1 1 auto;
	font-size: var(--bl-fs-md);
	font-weight: 600;
}

.bl-tile__count {
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce clearfixes its .woocommerce wrapper with ::before and ::after.
   In a grid container those pseudo-elements are grid items: they take the
   first cell each, which pushed the navigation into column two and bumped the
   content onto a second row. Same fix already applied to ul.products. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

/* WooCommerce lays the account page out with floats and percentage widths
   (30% / 68%). Inside the grid above, those percentages are read against the
   grid area rather than the page, so the navigation came out at 30% of its
   own column and the content at 68% of its own. The grid owns the columns;
   the items fill them. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* --------------------------------------------------------------------------
   Cart
   --------------------------------------------------------------------------
   Rows and a summary rather than a six-column table: a digital cart has no
   weight, no destination and usually no quantity, and a table built for those
   spends most of its width on empty cells.
   -------------------------------------------------------------------------- */
.bl-cart {
	display: grid;
	gap: var(--bl-s8);
	align-items: start;
}

@media (min-width: 900px) {
	.bl-cart {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem);
		gap: var(--bl-s10);
	}

	.bl-cart__summary {
		position: sticky;
		inset-block-start: calc(var(--bl-header-h) + var(--bl-s6));
	}
}

.bl-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--bl-border);
}

.bl-cart__item {
	display: grid;
	/* Cover, detail, amounts, remove. Four children need four tracks: with
	   three the remove link wrapped onto a row of its own. */
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--bl-s4);
	padding-block: var(--bl-s5);
	border-block-end: 1px solid var(--bl-border);
}

.bl-cart__cover {
	width: 64px;
	aspect-ratio: 2 / 3;
	border-radius: var(--bl-r-sm);
	background: var(--bl-surface-3);
	overflow: hidden;
}

.bl-cart__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-cart__name {
	font-size: var(--bl-fs-lg);
	font-weight: 600;
	line-height: 1.35;
	color: var(--bl-ink);
}

.bl-cart__name a {
	color: inherit;
	text-decoration: none;
}

.bl-cart__name a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bl-highlight);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.bl-cart__note {
	display: flex;
	align-items: center;
	gap: var(--bl-s2);
	margin-block-start: var(--bl-s1);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-cart__note svg {
	color: var(--bl-success);
}

.bl-cart__amounts {
	display: flex;
	align-items: center;
	gap: var(--bl-s4);
	white-space: nowrap;
}

.bl-cart__price {
	color: var(--bl-ink);
	font-size: var(--bl-fs-md);
	font-weight: 600;
}

.bl-cart__line {
	color: var(--bl-muted);
	font-size: var(--bl-fs-md);
}

.bl-cart__remove {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--bl-r);
	color: var(--bl-muted);
	text-decoration: none;
	transition: background-color var(--bl-t), color var(--bl-t);
}

.bl-cart__remove:hover {
	background: var(--bl-danger-soft);
	color: var(--bl-danger-text);
}

.bl-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bl-s3);
	padding-block-start: var(--bl-s5);
}

.bl-cart__coupon {
	display: flex;
	gap: var(--bl-s2);
	margin-inline-start: auto;
}

.bl-cart__coupon input {
	width: 12rem;
	max-width: 100%;
}

@media (max-width: 599px) {
	.bl-cart__item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: var(--bl-s3);
	}

	.bl-cart__remove {
		grid-row: 1;
		grid-column: 3;
	}

	.bl-cart__amounts {
		grid-column: 2 / -1;
		gap: var(--bl-s3);
	}

	.bl-cart__coupon {
		margin-inline-start: 0;
		width: 100%;
	}

	.bl-cart__coupon input {
		flex: 1 1 auto;
		width: auto;
	}
}


/* WooCommerce floats the totals panel at 48%, which inside the summary column
   above means 48% of that column rather than of the page - the panel came out
   half its width with the figures spilling past it. Same float-inside-grid
   conflict as the account navigation. */
/* Specificity matters here: WooCommerce sets this through
   .woocommerce-page .cart-collaterals .cart_totals, which outranks a
   two-class selector, so the panel stayed at 48%. */
.woocommerce-cart .bl-cart .bl-cart__summary .cart_totals,
.woocommerce-cart .bl-cart .bl-cart__summary .cross-sells {
	float: none;
	width: auto;
}

.bl-cart__summary .cart-collaterals::before,
.bl-cart__summary .cart-collaterals::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Digital checkout
   --------------------------------------------------------------------------
   Two columns: the details on the left, the order beside them on the right.

   This was a single 640px column for a while, on the argument that an email
   field and a name do not fill half a page. What that missed is that the
   summary is the reason the page exists - stacked underneath, the order being
   paid for scrolls out of sight exactly when the buyer is deciding. Beside
   the form it stays visible, and stays put while the form is filled in.

   The column split only applies once there is room for it. Below 1024px the
   grid collapses to one column on its own and the summary follows the form,
   which is the right order on a phone.
   -------------------------------------------------------------------------- */

/*
 * The aside is a column, not a card. #order_review already carries the panel
 * treatment - a second one around it is a box inside a box, and pays for the
 * same padding twice.
 */

.bl-checkout__aside > h3,
.bl-checkout__aside #order_review_heading {
	margin-block: 0 var(--bl-s5);
	font-family: var(--bl-font-display);
	font-size: var(--bl-fs-h4);
	font-weight: var(--bl-display-weight);
	letter-spacing: var(--bl-display-tracking);
}


/* Each field on its own row: three fields side by side is a form that looks
   like it is hiding something. */
.bl-checkout--digital .form-row {
	width: 100%;
	float: none;
	padding-inline: 0;
}

.bl-checkout--digital .form-row input.input-text,
.bl-checkout--digital .form-row .select2-container,
.bl-checkout--digital .form-row select {
	width: 100%;
}

/* The hint under the email field carries the one thing that matters here. */
.bl-checkout--digital .form-row .description {
	display: block;
	margin-block-start: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}

.bl-checkout--digital #order_review_heading {
	margin-block-end: var(--bl-s4);
	font-size: var(--bl-fs-h4);
}

.bl-checkout--digital .woocommerce-billing-fields h3,
.bl-checkout--digital #order_review_heading {
	color: var(--bl-ink);
}

/* WooCommerce splits #customer_details into two 47% floated halves through
   .woocommerce .col2-set .col-1, which outranks a two-class selector - the
   single column above still came out as two. Stated at matching specificity
   so the one column is actually one. */
.woocommerce-checkout .bl-checkout--digital .col2-set,
.woocommerce-checkout .bl-checkout--digital .col2-set .col-1,
.woocommerce-checkout .bl-checkout--digital .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	padding: 0;
}

.woocommerce-checkout .bl-checkout--digital .col2-set .col-2:empty {
	display: none;
}

/* Anything a plugin adds to the order group - a newsletter opt-in, say -
   follows the billing fields rather than sitting beside them. */
.woocommerce-checkout .bl-checkout--digital .col2-set .col-2 {
	margin-block-start: var(--bl-s6);
}

/* The note under the email field. Not WooCommerce's hidden tooltip: this one
   is meant to be read before anything is typed. */
.bl-field-note {
	display: block;
	margin-block-start: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.5;
}

/* WooCommerce prints an "Additional information" heading whether or not
   anything ended up under it. On a digital checkout, usually nothing does. */
.woocommerce-checkout .bl-checkout--digital .col-2:not(:has(.form-row)) {
	display: none;
}

/* ==========================================================================
   The free resource form
   ==========================================================================
   Takes the place of the buy box on a gated free title, so it carries the
   same weight: same box, same padding, same shadow. It is the primary action
   on the page and should not look like a newsletter strip that wandered in.
   -------------------------------------------------------------------------- */

.bl-claim {
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

.bl-claim__title {
	margin: 0 0 var(--bl-s2);
	font-size: var(--bl-fs-h4);
	line-height: var(--bl-lh-snug);
}

.bl-claim__text {
	margin: 0 0 var(--bl-s5);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.55;
}

.bl-claim__error {
	margin: 0 0 var(--bl-s4);
	padding: var(--bl-s3) var(--bl-s4);
	border-radius: var(--bl-r);
	background: var(--bl-danger-soft);
	color: var(--bl-danger-text);
	font-size: var(--bl-fs-sm);
}

.bl-claim__form {
	display: grid;
	gap: var(--bl-s4);
}

.bl-claim__field label {
	display: block;
	margin-block-end: var(--bl-s1);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
}

/* The honeypot. Moved out of sight rather than display:none, because the
   crawlers worth catching skip anything that is not rendered at all. */
.bl-claim__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bl-claim__note {
	margin: 0;
	color: var(--bl-muted);
	font-size: var(--bl-fs-xs);
	line-height: 1.5;
}

/* ---- After the claim ---------------------------------------------------- */

.bl-claim--done {
	border-color: var(--bl-success);
	background: var(--bl-success-soft);
}

.bl-claim__tick {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-block-end: var(--bl-s4);
	border-radius: var(--bl-r-full);
	background: var(--bl-success);
	color: var(--bl-surface);
}

.bl-claim--done .bl-claim__text {
	color: var(--bl-success-text);
}

.bl-claim__files {
	display: grid;
	gap: var(--bl-s2);
	margin-block-end: var(--bl-s4);
}

.bl-claim--done .bl-claim__note {
	color: var(--bl-success-text);
}

.bl-claim--done .bl-claim__note a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   Standing in for WooCommerce's stylesheet
   ==========================================================================
   inc/performance.php dequeues WooCommerce's 118KB of CSS on shop screens,
   because this file already styles them. Three things genuinely depended on
   it, and they live here now. Everything else was being overridden anyway.

   The stars are text rather than WooCommerce's webfont: the font ships with
   the stylesheet that is no longer loading, and two characters cost nothing.
   -------------------------------------------------------------------------- */

/* 1. The quantity field, which without this stretches to fill its column. */
.quantity {
	display: inline-block;
}

.quantity .qty {
	width: 4.5rem;
	min-width: 0;
	text-align: center;
}

/* 2. The rating shown on a review. Five outlines, with the filled ones
      clipped to a percentage by the inline width WooCommerce prints. */
.star-rating {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 5.4em;
	height: 1.2em;
	line-height: 1.2;
	font-size: 1em;
	font-family: inherit;
}

.star-rating::before,
.star-rating span::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.star-rating::before {
	content: "\2606\2606\2606\2606\2606";
	color: var(--bl-border-strong);
}

.star-rating span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	padding-block-start: 1.2em;
}

.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	color: var(--bl-star);
}

/* 3. The star picker on the review form, which is five links WooCommerce
      expects to be drawn as stars and stacked on top of each other. */
.comment-form-rating p.stars {
	margin: 0 0 var(--bl-s4);
	line-height: 1;
}

.comment-form-rating p.stars a {
	position: relative;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	margin-inline-end: 2px;
	overflow: hidden;
	text-indent: -999em;
	text-decoration: none;
}

.comment-form-rating p.stars a::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1.4em;
	font-size: 1.3em;
	line-height: 1;
	text-indent: 0;
	content: "\2606";
	color: var(--bl-border-strong);
	transition: color var(--bl-t);
}

.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:focus-visible::before,
.comment-form-rating p.stars.selected a.active::before,
.comment-form-rating p.stars.selected a:not(.active)::before {
	content: "\2605";
	color: var(--bl-star);
}

/* The one after the selected star, and everything past it, stays hollow. */
.comment-form-rating p.stars.selected a.active ~ a::before {
	content: "\2606";
	color: var(--bl-border-strong);
}

/* ==========================================================================
   Sign in and register
   ==========================================================================
   WooCommerce ships these as two floated columns, and the float came from the
   stylesheet the theme no longer loads - so they stacked into a narrow band
   with half the screen empty beside them. A grid, and two panels that look
   like each other.
   -------------------------------------------------------------------------- */

.bl-auth__intro {
	max-width: 52ch;
	margin: 0 auto var(--bl-s8);
	text-align: center;
}

.bl-auth__title {
	margin: var(--bl-s2) 0 var(--bl-s3);
	font-size: var(--bl-fs-h2);
	line-height: var(--bl-lh-snug);
}

.bl-auth__lede {
	margin: 0;
	color: var(--bl-muted);
	font-size: var(--bl-fs-lg);
	line-height: 1.6;
}

.woocommerce-account .col2-set#customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bl-s6);
	align-items: stretch;
}

@media (min-width: 860px) {
	.woocommerce-account .col2-set#customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bl-s8);
	}
}

/* WooCommerce's own clearfix would otherwise take two grid cells. */
.woocommerce-account .col2-set#customer_login::before,
.woocommerce-account .col2-set#customer_login::after {
	content: none;
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: auto;
	display: flex;
	flex-direction: column;
	padding: var(--bl-s8);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

/* The register panel is the offer, so it reads a shade warmer. */
.woocommerce-account #customer_login .u-column2 {
	border-color: var(--bl-border-strong);
	background: var(--bl-surface-2);
}

.woocommerce-account #customer_login h2 {
	margin: 0;
	font-family: var(--bl-font);
	font-size: var(--bl-fs-h4);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bl-auth__lead {
	margin: var(--bl-s2) 0 var(--bl-s6);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.55;
}

.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.bl-auth__benefits {
	margin: 0 0 var(--bl-s6);
	padding: 0;
	display: grid;
	gap: var(--bl-s3);
	list-style: none;
}

.bl-auth__benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.45;
}

.bl-auth__benefits svg {
	flex-shrink: 0;
	margin-block-start: 1px;
	color: var(--bl-success-text);
}

/* The submit sits at the foot of each panel, so the two line up. */
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit {
	margin-block-start: auto;
	width: 100%;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-s2);
	margin-block-end: var(--bl-s5);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: var(--bl-s4) 0 0;
	font-size: var(--bl-fs-sm);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	color: var(--bl-muted);
	font-size: var(--bl-fs-xs);
	line-height: 1.55;
}

.bl-auth__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bl-s2);
	margin: var(--bl-s8) 0 0;
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	text-align: center;
}

.bl-auth__foot svg {
	flex-shrink: 0;
	color: var(--bl-success-text);
}

/* ==========================================================================
   Account screens: the elements WooCommerce leaves to the theme
   ==========================================================================
   Browser defaults and the theme's editorial defaults landing where neither
   was meant to go: a display serif on a panel heading, a highlighter pen
   through an order number, a hairline fieldset from 1998.
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-order-details h2,
.woocommerce-order-details h3,
.woocommerce-customer-details h2,
.woocommerce-customer-details h3 {
	margin: var(--bl-s8) 0 var(--bl-s4);
	font-family: var(--bl-font);
	font-size: var(--bl-fs-h4);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: var(--bl-lh-snug);
}

.woocommerce-MyAccount-content > :first-child {
	margin-block-start: 0;
}

/*
 * WooCommerce marks the order number, date and status with <mark>, and the
 * theme paints <mark> like a highlighter. Through an order number that reads
 * as a redaction somebody forgot to finish.
 */
.woocommerce-MyAccount-content mark,
.woocommerce-order mark,
.woocommerce-thankyou-order-details mark {
	padding: 0;
	background: none;
	color: var(--bl-ink);
	font-weight: 600;
}

/* address is italic by default, which is not how anyone writes an address. */
.woocommerce-customer-details address,
.woocommerce-MyAccount-content address {
	margin: 0;
	padding: var(--bl-s5);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r);
	background: var(--bl-surface-2);
	font-style: normal;
	line-height: 1.7;
}

/* The password-change fieldset, as a panel rather than a hairline box. */
.woocommerce-MyAccount-content fieldset {
	margin: var(--bl-s6) 0;
	padding: var(--bl-s6);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface-2);
}

.woocommerce-MyAccount-content legend {
	padding: 0;
	font-size: var(--bl-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bl-muted);
}

/* A field hint is a hint, not an aside in a novel. */
.woocommerce-MyAccount-content form em,
.woocommerce-MyAccount-content .woocommerce-form-row span.description {
	display: block;
	margin-block-start: var(--bl-s1);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	font-style: normal;
}

/*
 * First and last name side by side. The account forms have no field wrapper
 * to hang a grid on, unlike the billing and shipping ones above, so the grid
 * goes on the form and everything that is not a name row spans both columns.
 */
@media (min-width: 640px) {
	.woocommerce form.woocommerce-EditAccountForm,
	.woocommerce form.edit-account,
	.woocommerce .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--bl-s4);
		align-items: start;
	}

	.woocommerce form.woocommerce-EditAccountForm > :not(.form-row-first):not(.form-row-last),
	.woocommerce form.edit-account > :not(.form-row-first):not(.form-row-last),
	.woocommerce .woocommerce-address-fields__field-wrapper > :not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}

/*
 * The main action in an account panel is a real button. WooCommerce gives
 * "Save changes" and "Order again" the same neutral class as everything else,
 * so without this the only button on the screen looks like a cancel link.
 */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-account #customer_login .button {
	background: var(--bl-action);
	border-color: var(--bl-action);
	color: var(--bl-action-contrast);
	font-weight: 600;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-button.button:hover,
.woocommerce-account #customer_login .button:hover {
	background: var(--bl-action-hover);
	border-color: var(--bl-action-hover);
}

/* "View" on a row of orders stays quiet: it is one of many, not the action. */
.woocommerce-orders-table .woocommerce-button.button {
	background: var(--bl-surface);
	border-color: var(--bl-border-strong);
	color: var(--bl-ink);
	font-weight: 600;
}

.woocommerce-orders-table .woocommerce-button.button:hover {
	background: var(--bl-surface-2);
	border-color: var(--bl-ink);
}

/* The order-number cell had a stray divider from the default table styling. */
.woocommerce-orders-table td,
.woocommerce-orders-table th {
	border-inline: 0;
}

/* A status reads better with a dot against it than as a bare word. */
.woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-end: var(--bl-s2);
	border-radius: var(--bl-r-full);
	background: var(--bl-success-text);
	vertical-align: middle;
}

/*
 * A notice with a button in it: message first, action after, on one line when
 * there is room. WooCommerce prints the button first in the markup.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bl-s3) var(--bl-s5);
}

.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button {
	order: 2;
	margin-inline-start: auto;
	flex-shrink: 0;
}

/* Three shortcuts in a two-column grid leave a hole where a fourth would go. */
@media (min-width: 1100px) {
	.bl-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Billing and shipping side by side. Same col2-set WooCommerce uses on the
 * login screen, and the same reason it was stacking: the float that laid it
 * out came from the stylesheet the theme no longer loads.
 */
.woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bl-s6);
	margin-block-start: var(--bl-s8);
	align-items: start;
}

@media (min-width: 860px) {
	.woocommerce-Addresses.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bl-s8);
	}
}

.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after {
	content: none;
}

.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2 {
	float: none;
	width: auto;
}

.woocommerce-Addresses .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bl-s3);
}

.woocommerce-Addresses .woocommerce-Address-title h2,
.woocommerce-Addresses .woocommerce-Address-title h3 {
	margin: 0;
}

/* The edit link is the action on this panel, so it looks like one. */
.woocommerce-Addresses .woocommerce-Address-title .edit {
	padding: var(--bl-s1) var(--bl-s3);
	border: 1px solid var(--bl-border-strong);
	border-radius: var(--bl-r-sm);
	color: var(--bl-ink);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
	text-decoration: none;
	background-image: none;
}

.woocommerce-Addresses .woocommerce-Address-title .edit:hover {
	background: var(--bl-surface-2);
	border-color: var(--bl-ink);
}

/*
 * WooCommerce marks the order number cell as a row header, so it is a <th>
 * inside <tbody> and was picking up the heading row's grey fill - which read
 * as a stray divider down the first column. It is a cell like any other.
 */
.woocommerce table.shop_table tbody th {
	background: transparent;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* The cart and order totals keep their label column bold, because there the
   <th> really is a label rather than a cell. */
.woocommerce table.shop_table.order_details tfoot th,
.woocommerce table.cart_totals tbody th,
.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 600;
}

/*
 * WooCommerce prints the coupon remove control as the literal text
 * "[Remove]". The brackets are its own string, not something the theme
 * should filter away, so it is dressed as the small secondary action it is
 * rather than left looking like unformatted output.
 */
.woocommerce-remove-coupon {
	margin-inline-start: var(--bl-s2);
	color: var(--bl-muted);
	font-size: var(--bl-fs-xs);
	text-decoration: none;
	background-image: none;
}

.woocommerce-remove-coupon:hover,
.woocommerce-remove-coupon:focus-visible {
	color: var(--bl-danger-text);
	text-decoration: underline;
}

/* The coupon row label carries the code, which is usually typed in caps. */
.cart-discount th {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Sign in, with registration switched off

   Everything above is scoped to #customer_login, which WooCommerce only
   prints when the store takes registrations. With them off there is one form
   and none of it applied: the panel treatment, the heading size, the measure.
   The form inherited the full width of a wide container, so two fields ran to
   920px under an introduction set to 52ch, and the two measures fought.

   One form is one card. It sits on the same centred axis as the introduction
   above it and stops at a width a password field deserves.
   -------------------------------------------------------------------------- */

/* Matches the specificity of the 920px cap above, and comes after it, so the
   single-card case narrows without that rule having to know about this one. */
.bl-auth-view--single:not(.logged-in) .woocommerce {
	max-width: 30rem;
}

.bl-auth-view--single form.login,
.bl-auth-view--single form.lost_reset_password {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--bl-s8);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow-sm);
}

/*
 * WooCommerce prints its own "Login" heading, which repeats the title the
 * theme has already set above it at display size. Kept for screen readers,
 * because it is what names the form, and taken out of the layout.
 */
.bl-auth-view--single .woocommerce > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bl-auth-view--single form.login .bl-auth__lead,
.bl-auth-view--single form.lost_reset_password p:first-of-type {
	margin-block: 0 var(--bl-s6);
}

/* The submit is the only action in the card, so it takes the full width. */
.bl-auth-view--single form.login .woocommerce-form-login__submit,
.bl-auth-view--single form.lost_reset_password button[type="submit"] {
	width: 100%;
	justify-content: center;
}

.bl-auth-view--single .woocommerce-LostPassword {
	margin: var(--bl-s4) 0 0;
	text-align: center;
}

/* A leading icon beside centred text that wraps looks detached from it, so
   the note reads as a caption: aligned to the card, icon on the first line. */
.bl-auth-view--single .bl-auth__foot {
	align-items: flex-start;
	max-width: 30rem;
	margin-block-start: var(--bl-s6);
	margin-inline: auto;
	text-align: start;
}

.bl-auth-view--single .bl-auth__foot svg {
	flex: none;
	margin-block-start: 2px;
}

/*
 * The page header already announces the screen, and the introduction repeats
 * it in the store's own words. Two full section rhythms between them leaves a
 * void, so the sign-in screen opens tighter than a content section does.
 */
/*
 * Cart, checkout and account are application screens. Their title is a
 * label rather than an opening, so it opens on a tighter rhythm than an
 * editorial page does - at the full section height the header and the
 * introduction below it are separated by more space than either occupies.
 */
.woocommerce-account .bl-page-header,
.woocommerce-cart .bl-page-header,
.woocommerce-checkout .bl-page-header {
	padding-block: var(--bl-s8) var(--bl-s6);
}

.woocommerce-account .bl-page-header + .bl-section,
.woocommerce-cart .bl-page-header + .bl-section,
.woocommerce-checkout .bl-page-header + .bl-section {
	padding-block: var(--bl-s8) var(--bl-s16);
}

/* --------------------------------------------------------------------------
   Shop refinements

   Tightening only. The grid, the palette, the card anatomy and every hook
   stay as they are - these rules adjust rhythm, weight and state so the
   first row of covers is reached sooner and reads more deliberately.
   -------------------------------------------------------------------------- */

/* ---- Opening rhythm ----------------------------------------------------- */

/*
 * The shop header is a label above a catalogue, not an essay opening. At the
 * editorial height the first row of covers started below the fold on a laptop,
 * which is the one thing a shop cannot afford.
 */
.woocommerce-shop .bl-page-header,
.tax-product_cat .bl-page-header,
.tax-bl_author .bl-page-header,
.tax-bl_format .bl-page-header,
.tax-bl_level .bl-page-header {
	padding-block: var(--bl-s8) var(--bl-s6);
}

.woocommerce-shop .bl-page-header .bl-eyebrow,
.tax-product_cat .bl-page-header .bl-eyebrow {
	margin-block-end: var(--bl-s2);
}

.woocommerce-shop .bl-page-header__title,
.tax-product_cat .bl-page-header__title {
	margin-block: 0;
}

.woocommerce-shop .bl-page-header__text,
.tax-product_cat .bl-page-header__text {
	margin-block-start: var(--bl-s3);
	max-width: 54ch;
}

/* The grid section opens right under the bar rather than a screen below it. */
.woocommerce-shop .bl-shopbar + .bl-section,
.tax-product_cat .bl-shopbar + .bl-section {
	padding-block-start: var(--bl-s8);
}

/* ---- Search and filter bar ---------------------------------------------- */

/*
 * One control group rather than three loose ones: a single row height, the
 * search and its button reading as one field, and the two selects sized so
 * they stop looking like an afterthought at the end of the row.
 */
.bl-shopbar__inner {
	gap: var(--bl-s2);
	padding-block: var(--bl-s3);
}

.bl-shopbar__search {
	gap: 0;
}

.bl-shopbar__search input[type="search"] {
	height: 44px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	border-inline-end: 0;
}

.bl-shopbar__search .bl-btn {
	height: 44px;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	flex: none;
}

.bl-shopbar__filter select,
.bl-shopbar__sort select {
	height: 44px;
	min-width: 12rem;
	font-size: var(--bl-fs-md);
}

/* Focus belongs to the pair, not to half of it. */
.bl-shopbar__search:focus-within input[type="search"],
.bl-shopbar__search:focus-within .bl-btn {
	border-color: var(--bl-ink);
}

/* ---- Result count -------------------------------------------------------- */

.bl-shop__toolbar {
	margin-block-end: var(--bl-s5);
	padding-block-end: var(--bl-s3);
}

.bl-shop__count {
	font-size: var(--bl-fs-sm);
	letter-spacing: 0.01em;
}

/* ---- Cards --------------------------------------------------------------- */

.woocommerce ul.products .bl-book,
.bl-products .bl-book {
	gap: var(--bl-s4);
}

.bl-book__body {
	gap: 6px;
}

/* The collection line is a label, so it reads as one. */
.bl-book__cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-muted);
}

/* A title at 15px under a 2:3 cover reads as a caption. */
.bl-book__title {
	font-size: var(--bl-fs-base);
	line-height: 1.3;
}

/*
 * Two lines are reserved for the title in a grid, so a one-line title does
 * not pull the price and the button up out of line with the row beside it.
 * Titles longer than two lines still run on - nothing is clipped.
 */
.woocommerce ul.products .bl-book__title,
.bl-products .bl-book__title {
	min-height: 2.6em;
}

.bl-book__title a {
	transition: color var(--bl-t);
}

.bl-book:hover .bl-book__title a {
	color: var(--bl-accent);
}

/* Two lines of description, so every card in a row ends on the same line. */
.bl-book__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--bl-fs-sm);
	line-height: 1.55;
	color: var(--bl-muted);
}

/*
 * A rating and an add-to-cart button are both optional - a grouped title has
 * neither - and their absence used to pull the price up out of line with the
 * card beside it. The price row is pinned to the foot of the body instead, and
 * a card with no button reserves the space one would have taken, so every
 * price in a row sits on the same line whatever the card above it contains.
 */
/* The card has to fill its cell before anything inside it can be pushed to
   the foot of the card. */
.woocommerce ul.products .bl-book,
.bl-products .bl-book {
	height: 100%;
}

.woocommerce ul.products .bl-book__body,
.bl-products .bl-book__body {
	flex: 1 1 auto;
}

.woocommerce ul.products .bl-book__meta,
.bl-products .bl-book__meta {
	margin-block-start: auto;
	padding-block-start: var(--bl-s2);
}

/* The card gap, the actions margin and the button itself - the exact space a
   card with a button spends below its body. */
.woocommerce ul.products .bl-book:not(:has(.bl-book__actions)) .bl-book__body,
.bl-products .bl-book:not(:has(.bl-book__actions)) .bl-book__body {
	padding-block-end: calc(var(--bl-s4) + var(--bl-s2) + 36px);
}

/* Price is the last thing read before the decision, so it sits apart. */
.bl-book .bl-price {
	margin-block-start: 2px;
	font-size: var(--bl-fs-lg);
}

.bl-book .bl-price del,
.bl-book .bl-price .bl-price__was {
	font-size: var(--bl-fs-sm);
}

/* ---- Badges -------------------------------------------------------------- */

/*
 * Smaller and tighter to the corner. A badge is an annotation on the cover,
 * and at the previous size two of them took a fifth of the artwork.
 */
/* Clear of the spine: that gradient is 8% of the cover and reads as the
   binding, so a badge sitting on it looks misplaced rather than applied. */
.bl-book .bl-badges {
	inset-block-start: var(--bl-s3);
	inset-inline-start: calc(8% + var(--bl-s2));
	gap: 5px;
}

.bl-book .bl-badge {
	padding: 2px 7px;
	font-size: 10px;
	letter-spacing: 0.06em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ---- Hover ---------------------------------------------------------------- */

/*
 * The cover already lifts. Lifting the whole card instead makes the row feel
 * loose, so the lift stays on the artwork and everything else just sharpens.
 */
.bl-book:hover .bl-book__cover {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.bl-book:hover .bl-book__cover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Related products and upsells

   WooCommerce prints these as a bare <section> with an unclassed <h2>, and
   the theme had no rules for either - so the section began exactly where the
   review form ended, its heading sat on top of its own grid, and the last row
   of cards ran straight into the footer with nothing between them.
   -------------------------------------------------------------------------- */

.woocommerce section.related,
.woocommerce section.upsells,
.woocommerce div.product section.related,
.woocommerce div.product section.upsells {
	margin-block-start: var(--bl-s16);
	padding-block-start: var(--bl-s12);
	padding-block-end: var(--bl-s20);
	border-block-start: 1px solid var(--bl-border);
}

/*
 * A heading at display size announces a page. This one announces four covers
 * underneath it, so it takes the size the other section headings use and
 * leaves room before the grid it introduces.
 */
.woocommerce section.related > h2,
.woocommerce section.upsells > h2 {
	margin-block-end: var(--bl-s8);
	font-family: var(--bl-font-display);
	font-size: var(--bl-fs-h4);
	font-weight: var(--bl-display-weight);
	letter-spacing: var(--bl-display-tracking);
	line-height: var(--bl-lh-snug);
}

/*
 * Two related titles in a four-column grid leave two empty cells. The cards
 * keep their width rather than stretching to fill the row, which is what the
 * rest of the shop does - a wider card here would not match anything.
 */
.woocommerce section.related ul.products,
.woocommerce section.upsells ul.products {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Collection header

   A category archive swaps .bl-page-header for .bl-cat-header so it can carry
   the collection's own icon and accent - but nothing styled that class, so it
   fell back to browser defaults and opened on a different rhythm from the shop
   it sits under. It now matches, and spends the accent on the icon.
   -------------------------------------------------------------------------- */

.bl-cat-header {
	padding-block: var(--bl-s8) var(--bl-s6);
	border-block-end: 1px solid var(--bl-border);
}

/* The collection mark, in the collection's own colour. */
.bl-cat-header__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-block-end: var(--bl-s4);
	border-radius: var(--bl-r-sm);
	background: var(--bl-c-soft, var(--bl-surface-2));
	color: var(--bl-c, var(--bl-accent));
}

.bl-cat-header__title {
	margin-block: 0;
	font-size: var(--bl-fs-h1);
}

.bl-cat-header__text {
	margin-block-start: var(--bl-s3);
	max-width: 54ch;
	color: var(--bl-muted);
	font-size: var(--bl-fs-lg);
	line-height: 1.6;
}

/* Same as the shop: the grid opens directly under the bar. */
.bl-cat-header + .bl-shopbar + .bl-section,
.tax-product_cat .bl-shopbar + .bl-section {
	padding-block-start: var(--bl-s8);
}

/* --------------------------------------------------------------------------
   Product meta

   WooCommerce prints the category and tag line straight after the buy box
   with no margins of its own, so it sat against the panel above it at the
   same size and weight as the body copy. It is a footnote to the purchase,
   not part of it.
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_meta,
.bl-product-page .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-s2) var(--bl-s5);
	margin-block-start: var(--bl-s5);
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
	line-height: 1.5;
}

.woocommerce div.product .product_meta a,
.bl-product-page .product_meta a {
	color: var(--bl-ink);
}

/* The grouped buy box waits for a choice before its button will act. */
/* WooCommerce's own .button.alt carries one more class than the rule below
   would have, so the scope is widened to match it rather than left to lose. */
.woocommerce .bl-buybox .single_add_to_cart_button[disabled],
.woocommerce .bl-buybox .single_add_to_cart_button.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--bl-surface-2);
	border-color: var(--bl-border-strong);
	color: var(--bl-muted);
}

.woocommerce .bl-buybox .single_add_to_cart_button[disabled]:hover,
.woocommerce .bl-buybox .single_add_to_cart_button.is-disabled:hover {
	background: var(--bl-surface-2);
	border-color: var(--bl-border-strong);
}

/* --------------------------------------------------------------------------
   Placeholder covers at thumbnail size

   The jacket placeholder sets its title at cover scale. On a 64px cart thumb
   that clipped mid-word - "The Mar Sys" - which reads as broken rather than
   as a placeholder. The title is already beside it in both these places, so
   the tile only has to look like a cover, not carry the name.
   -------------------------------------------------------------------------- */

.bl-cart__item .bl-book__placeholder,
.bl-minicart .bl-book__placeholder,
.bl-shelf .bl-book__placeholder {
	padding: var(--bl-s2) var(--bl-s2) var(--bl-s2) calc(var(--bl-s2) + 5px);
	font-size: 9px;
	letter-spacing: 0;
	line-height: 1.2;
	overflow: hidden;
	/* A single long title word is wider than a 64px tile, so it is allowed to
	   break rather than run past the edge. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.bl-cart__item .bl-book__placeholder::before,
.bl-minicart .bl-book__placeholder::before,
.bl-shelf .bl-book__placeholder::before {
	width: 5px;
}

/* The mini cart footer keeps Checkout on screen.

   It is the last child of the scrolling body rather than a sibling of it, so
   a long cart on a short screen would scroll the button out of reach. An auto
   top margin holds it at the foot of the panel while the cart is short, and
   sticky keeps it there once the items start scrolling behind it - it already
   carries its own background and top rule, so nothing shows through. */
.bl-drawer__body .bl-minicart > .bl-drawer__foot {
	position: sticky;
	inset-block-end: calc(var(--bl-s5) * -1);
	z-index: 1;
}