/* Context for promotions shown in code-defined slots (includes/hook-slots.php).
   The promotion itself is styled by the Current Special block; this only
   places it. Measures and gutters come from the theme's own tokens. */

.bsup-hook {
	--bsup-hook-gutter: var(--sx-page-gutter, var(--bodysoul-page-gutter, 1.6rem));
	--bsup-hook-measure: var(--sx-content-width, var(--bodysoul-content-width, 120rem));
}

/* Under the header: a full-bleed strip, no rounded card edges. */
.bsup-hook--h-top .bsup-feature {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

.bsup-hook--h-top .bsup-feature__body {
	width: min(100% - (var(--bsup-hook-gutter) * 2), var(--bsup-hook-measure));
	margin-inline: auto;
	padding-inline: 0;
}

/* Everywhere else: on the page's measure, with room above and below. */
.bsup-hook:not(.bsup-hook--h-top) {
	width: min(100% - (var(--bsup-hook-gutter) * 2), var(--bsup-hook-measure));
	margin: 2.4rem auto;
}

/* Inside WooCommerce's own columns the page gutter is already applied. */
.bsup-hook--h-product,
.bsup-hook--h-cart,
.bsup-hook--h-checkout,
.bsup-hook--h-shop {
	width: auto;
	margin: 1.6rem 0;
}

/* Shop header: the promotion sits under the intro, full header width. */
.bsup-hook--h-shop-top {
	width: auto;
	margin: 0 0 2.4rem;
}

/* Sidebar under the filters: only where the sidebar is a column. Below 950px
   the theme turns it into a drawer (product-category.scss), and a promotion
   inside a filter drawer is noise. */
.bsup-hook--h-shop-sidebar {
	display: none;
}

@media (min-width: 950px) {
	.bsup-hook--h-shop-sidebar {
		display: block;
		width: auto;
		margin: 2.4rem 0 0;
	}
}

/* ------------------------------------------------------------ shop intro
   The shop / category / brand header (includes/shop-intro.php): the H1 and
   the description's first paragraph, on the breadcrumb's line, as tall as
   its words. The rest of the description prints after the products. */
/* The theme's products header has no gutter of its own (the old band was
   centred, so it never showed); the breadcrumb sits on the page gutter. */
.bsup-intro {
	padding: 1.6rem var(--sx-page-gutter, var(--bodysoul-page-gutter, 1.6rem)) 2.4rem;
}

.bsup-intro__title {
	margin: 0;
	text-wrap: balance;
}

.bsup-intro__text {
	max-width: 64ch;
	margin-top: .8rem;
}

.bsup-intro__text > *,
.bsup-intro-more > * {
	margin: 0 0 1em;
}

.bsup-intro__text > *:last-child,
.bsup-intro-more > *:last-child {
	margin-bottom: 0;
}

.bsup-intro-more {
	max-width: 64ch;
	margin: 4.8rem 0 0;
}

/* The shop page's intro is written inside a layout block (a Row here) that
   brings its own band padding and measure. Inside the header that wrapper's
   spacing is dropped so its copy aligns with the H1 above it. */
.bsup-intro__text > :is(.wp-block-bodysoul-row, .wp-block-aurora-arcade-section, .wp-block-group) {
	padding: 0;
	margin: 0;
	width: auto;
	max-width: none;
	background: none;
}

.bsup-intro__text > :is(.wp-block-bodysoul-row, .wp-block-aurora-arcade-section, .wp-block-group) > * {
	margin: 0 0 1em;
	max-width: none;
}