/**
 * Product archives (woocommerce/archive-product.php): page background and
 * breadcrumb (2156:636). The Flowers frame (2156:510) has a white page
 * background, like the homepage.
 */

body.xat-archive {
	background: var(--color-white);
}

/* 2156:636: 24px above, Body/S, muted "Home /", current page in ink.
 * With a banner mascot (from 480) the space above grows by how far the
 * figure rises above the banner: --mascot-rise per px of banner width (the
 * banner scales with its width, hero.css). The header must not cut the hat
 * or its shadow at page load, so 24px stay free under it; the breadcrumb
 * row (20px) and the 16px to the banner sit between. */
.breadcrumb {
	padding-top: var(--space-md);
}

@media (min-width: 480px) {
	.breadcrumb {
		padding-top: max(var(--space-md), calc(var(--mascot-rise, 0) * min(var(--container-max), 100vw - var(--scrollbar) - 2 * var(--container-gutter)) - 12px));
	}
}

/* Sections only set their top space; the Q&A and the reviews carry their own
 * bottom space (2156:868, 2156:902). Whatever else ends the page gets space
 * above the footer, and the cream reviews band keeps the Q&A gap to the
 * section above it. */
.archive-page > .archive-grid:last-child,
.archive-page > .cat-desc:last-child {
	padding-bottom: var(--section-space-m);
}

.archive-grid + .home-reviews,
.cat-desc + .home-reviews {
	margin-top: var(--section-space-s);
}

/* Reviews (2156:902): 96px above the heading, 60px under the cards. */
@media (min-width: 1024px) {
	.xat-archive .home-reviews {
		padding: 96px 0 60px;
	}
}