.page-section-banner .page-section-inner {
	border-radius: 10px;

	.wp-block-heading {
		font: var(--heading-medium);
		text-align: center;
	}

	.wp-block-paragraph {
		text-align: center;
	}
}

.page-section-promo-bar {
	margin: 0;
}

/* ===== MINICART: SUGGESTED PRODUCTS ===== */

/* Grey full-bleed surface only when the section actually holds a product
   collection — other sections placed at this hook stay unstyled. */
.al_mini_cart_before_totals:has(.page-section-product-collection) {
	background-color: var(--color-surface-subtle);
	margin-left: calc(-1 * var(--gutter-width));
	margin-right: calc(-1 * var(--gutter-width));
	margin-top: var(--space-normal);
	padding: var(--space-xsmall) var(--gutter-width);

	@media (min-width: 78.75em) {
		margin-left: calc(-1 * var(--cart-drawer-padding-inline));
		margin-right: calc(-1 * var(--cart-drawer-padding-inline));
		padding: var(--space-xsmall) var(--cart-drawer-padding-inline);
	}

	.minicart-suggested-products-title {
		font: var(--label-x-large);
		margin-top: var(--space-normal);
	}

	ul.products {
		display: block;
	}

	li.product {
		padding: var(--space-normal) 0;

		& + & {
			border-top: 1px solid var(--color-border-muted);
		}
	}

	.product-inner {
		display: flex;
	}

	.ftm-parent-shop-loop-image-wrapper {
		flex-basis: var(--cart-product-image-ratio);
		margin-right: var(--space-normal);
		max-width: var(--cart-image-size-lg);
		min-width: max(80px, var(--cart-product-image-ratio));
	}

	/* Standard WC template: link is a direct child of li and wraps image + text */
	li.product > .woocommerce-LoopProduct-link {
		display: grid;
		grid-template-columns: var(--cart-product-image-ratio) 1fr;
		column-gap: var(--space-normal);
		align-items: start;
	}

	/* Compact product title — inherits theme h2 font/weight but sized for the minicart layout */
	.woocommerce-loop-product__title {
		font-size: 1rem;
		margin-block: 0;
	}

	li.product > .woocommerce-LoopProduct-link img {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: 100%;
		height: auto;
	}

	li.product > .woocommerce-LoopProduct-link .woocommerce-loop-product__title,
	li.product > .woocommerce-LoopProduct-link .al-product-sku-reviews,
	li.product > .woocommerce-LoopProduct-link .price {
		grid-column: 2;
	}

	li.product > .add_to_cart_button {
		margin-top: var(--space-xsmall);
		margin-left: calc(var(--cart-product-image-ratio) + var(--space-normal));
	}

	li.product > .see-details {
		margin-left: var(--space-normal);
	}

	/* Override theme .onsale — !important needed to beat li.product .onsale specificity */
	li .onsale,
	.woocommerce-product-rating,
	.star-rating {
		display: none !important;
	}
}

/* Product-collection presentation for the suggested-products section. Scoped to
   the layout class only (not the cart wrapper) so it also renders when editing
   the Global Section in the block editor. `product_collection` is exclusive to
   this section, so the broad scope is safe. The grey full-bleed wrapper above
   stays keyed to `.al_mini_cart_before_totals`, which only exists on the front
   end — so it stays inert in the editor canvas.

   Doubled `.page-section.page-section-product-collection` (both classes are on
   the block wrapper) so these rules outrank the plugin's own
   `.page-section-product-collection` grid styling without depending on load
   order. */
.page-section.page-section-product-collection {

	.ftps-page-section-inner > .wp-block-heading {
		margin-bottom: var(--space-small);
		padding: 0;
		font: var(--label-x-large);
		font-weight: var(--typeface-weight-body-bold, 400);
		text-align: left;
	}

	/* One product per row — collapse the responsive multi-column grid. The
	   `.wp-block-woocommerce-product-collection` step matches the plugin's grid
	   selector depth so this wins. */
	.wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	/* Hairline divider between stacked products. */
	.wc-block-product {
		padding: var(--space-normal) 0;
	}

	.wc-block-product + .wc-block-product {
		border-top: 1px solid var(--wp--custom--color--neutral--200, #e0e0e0);
	}

	/* Card row: image left, details right, aligned to the top. */
	.wc-block-product > .is-nowrap {
		align-items: flex-start;
		gap: var(--space-normal);
	}

		/* Fixed-width product image; let it scale within its column. */
		.wp-block-woocommerce-product-image {
			flex: 0 0 auto;
			width: 6.5rem;
		}

		.wp-block-woocommerce-product-image img {
		height: auto;
	}

	/* Details column fills the remaining width and reads left-to-right, with a
	single tight gap driving the vertical rhythm. */
	.is-nowrap > .is-vertical {
		flex: 1 1 auto;
		align-items: flex-start;
		gap: 0;
		text-align: left;
		flex-direction: column;
	}

	/* Override the block-level centering on title / price / button, and drop the
	base per-element margins so only the column gap spaces things out. */
	h2.wp-block-post-title,
	.wp-block-woocommerce-product-price,
	.wp-block-woocommerce-product-button {
		margin-top: 0;
		margin-bottom: 0;
		text-align: left;
	}

	/* Match the regular product-grid price treatment (see `ul.products .price`
	   in woocommerce.css): sale price first via `order` rather than the plugin
	   default `row-reverse`, with a muted, smaller "Reg" original price. */
	.wc-block-components-product-price {
		flex-direction: row;
		justify-content: flex-start;

		ins {
			order: -1;
			text-decoration: none;
		}

		del {
			color: var(--color-neutral-400);
			font: var(--label-small);
			line-height: 1.5;
			margin-left: 0.5em;
			text-decoration: none;
		}

		del::before {
			content: "Reg ";
		}
	}

	a.add_to_cart_button:not(.button) {
		color: var(--color-white);
	}

}