/**
 * EquaShop Pro — storefront "Other categories" rubric (product page).
 *
 * The Free core ships no styling for this Pro-only section (its blocks render but
 * stack with no breathing room), so the four spacing points are defined here. Each
 * is driven by a --equashop-cat-gap-* custom property with a sensible default, so the
 * rubric is aerated out of the box; the layout configurator overrides any of the four
 * per product by setting the matching property inline on the section.
 *
 * Scoped to .equashop-shop (the mandatory storefront wrapper) — never :root, so the
 * variables never leak outside an EquaShop surface. Low specificity so a theme's
 * "Additional CSS" can still win without !important.
 */
.equashop-shop .equashop-categories {
	--equashop-cat-gap-head: 1.5rem;   /* (1) heading "Our other categories" -> first category name */
	--equashop-cat-gap-title: 0.85rem; /* (2) a category name -> its first product                  */
	--equashop-cat-gap-items: 0.75rem; /* (3) between products of the same category                 */
	--equashop-cat-gap-cats: 2.5rem;   /* (4) last product of a category -> next category name       */
}

/* (1) gap between the section heading and the first category. The section's own top
   margin (.equashop-detail__section) still separates it from the previous rubric. */
.equashop-shop .equashop-categories > h2 {
	margin: 0 0 var( --equashop-cat-gap-head );
}

/* (4) gap between consecutive categories (the first one is spaced by gap-head above). */
.equashop-shop .equashop-categories .equashop-category + .equashop-category {
	margin-top: var( --equashop-cat-gap-cats );
}

/* (2) gap between a category name and its first product. */
.equashop-shop .equashop-categories .equashop-category__title {
	margin: 0 0 var( --equashop-cat-gap-title );
}

/* (3) products of a category stack with a consistent vertical rhythm. */
.equashop-shop .equashop-categories .equashop-minis {
	display: flex;
	flex-direction: column;
	gap: var( --equashop-cat-gap-items );
}