.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;
}

/* ===== Coloured section panels (sections with a background_color) =====
   The converter restores the legacy background via the wrapper's color support
   (has-background + inline background-color). The rounded-panel treatment that
   the classic theme gave these sections is annalee brand styling and lives
   here. */
.page-section.has-background {
	border-radius: 10px;
}

/* Converted callouts (legacy simple_callout → cta) carry dark brand backgrounds
   (blue/orange), so their text renders light for contrast — matching the classic
   theme. The hero panel (light yellow) keeps its dark text and is a different
   layout class, so it is unaffected. The red action button sets its own colours. */
.page-section-cta.has-background {
	color: var(--color-white, #fff);
}

/* ===== HERO: restore legacy title hierarchy =====
   The converter emits the section_title (an eyebrow like "Share Annalee Smiles
   Daily") as a direct-child .wp-block-heading of .ftps-hero-content, so the
   plugin's main-hero-heading rule
   (`.page-section-hero .ftps-hero-content > .wp-block-heading { font-size: 4.2777em }`)
   sizes it huge, burying the real title. Legacy rendered .ftps-section-title as a
   small uppercase label. Re-assert that here (specificity 0,4,0 beats the plugin's
   0,3,0). The in-content section_text <h2> (the real title) is untouched. */
.page-section-hero .ftps-hero-content > .wp-block-heading.ftps-section-title {
	font-size: var(--label-medium-size);
	font-family: var(--label-medium-font, inherit);
	font-weight: 700;
	line-height: var(--label-medium-line-height);
	letter-spacing: var(--label-medium-letter-spacing);
	text-transform: uppercase;
	margin-top: var(--space-normal);
	margin-bottom: 0;
}

/* Annalee heroes are CONTAINED rounded panels, not full-bleed. The plugin hero
   variation forces width:100vw + negative margin via `.page-section.page-section-hero`
   (0,2,0); neutralise it at equal specificity so the hero fills the wide content
   column (matching the classic theme's margined, rounded panel and its right-half
   image). Panel border-radius comes from the .has-background rule above. */
.page-section.page-section-hero {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Hero image: the figure carries no margin so the image sits flush against the
   panel edges, and only its bottom-right corner is rounded to meet the panel's
   rounded corner. (The theme's .ft-page-sections hero-image radius rules don't
   apply here — the block-rendered hero has no .ft-page-sections ancestor.) */
.page-section-hero figure {
	margin: 0;
}

.page-section-hero img {
	border-bottom-right-radius: 10px;
}

/* When a hero is the FIRST section on the page it acts as the page banner: the
   breadcrumbs above it are hidden, and the panel sits flush at the top with
   square top corners and only the bottom corners rounded. */
body:has(.entry-content > .page-section-hero:first-child) .site-breadcrumbs {
	display: none;
}

.entry-content > .page-section-hero.has-background:first-child {
	border-radius: 0 0 10px 10px;
}

/* The converted hero actions block is emitted center-justified
   (is-content-justification-center); the classic hero left-aligns its CTA to
   match the left-aligned content on wide viewports. */
@media (min-width: 48.5em) {

	.page-section-hero .ftps-hero-content .wp-block-buttons.ftps-actions {
		justify-content: flex-start;
	}
}

/* ===== 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);
	}

}

/* ===== Post-grid product cards (converted post_grid → WC product-collection) =====
   The converter emits center-aligned WC product-collection card blocks (post-title
   link, price, button). Restyle them to match the classic annalee shop-loop card:
   left-aligned, dark non-underlined title, muted "Reg" price format. Selectors
   mirror ul.products .price / .woocommerce-loop-product__title in woocommerce.css. */
.page-section-post-grid .wc-block-product {
	text-align: left;
}

.page-section-post-grid .wp-block-post-title {
	margin: var(--space-xsmall) 0 0;
	font: var(--label-large);
	font-weight: var(--typeface-weight-body-bold);
	text-align: left;
}

.page-section-post-grid .wp-block-post-title a {
	color: var(--color-text, #303133);
	text-decoration: none;
}

.page-section-post-grid .al-product-sku-reviews {
	justify-content: flex-start;
	text-align: left;
}

.page-section-post-grid .wc-block-components-product-price {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-start;
	font: var(--label-large);
	font-weight: var(--typeface-weight-body-bold);
	text-align: left;
}

.page-section-post-grid .wc-block-components-product-price ins {
	order: -1;
	text-decoration: none;
}

.page-section-post-grid .wc-block-components-product-price del {
	color: var(--color-neutral-400);
	font: var(--label-small);
	line-height: 1.5;
	margin-left: 0.5em;
	text-decoration: none;
}

.page-section-post-grid .wc-block-components-product-price del::before {
	content: "Reg ";
}

.page-section-post-grid .wc-block-components-product-button {
	text-align: left;
}

/* Post-grid section header (eyebrow, title, "Shop…" action) centers above the
   grid, matching the classic theme. The product cards below stay left-aligned
   (see rules above). Scoped to the section-inner's direct children so the card
   grid is unaffected. */
.page-section-post-grid > .page-section-inner > .ftps-section-text,
.page-section-post-grid > .page-section-inner > .ftps-section-text h2,
.page-section-post-grid > .page-section-inner > .ftps-actions {
	text-align: center;
}

/* The action is centered and gets breathing room above the grid (the converter
   emits it flush). */
.page-section-post-grid > .page-section-inner > .ftps-actions {
	justify-content: center;
	margin-bottom: var(--space-large);
}