/*
 * The shop's own line in the page-title band, and the space under it.
 *
 * The band itself — ground, padding, title, breadcrumb — is styled in
 * sublime-ui/assets/site.css, which is where it has always lived. Nothing
 * here restates any of that; two stylesheets fighting over the same element
 * is how the first attempt at this went wrong. This adds only what is new:
 * the contextual line the shop pages put in the band, and a trim on the
 * first section's top padding, which was set for a four-hundred-pixel slab
 * and leaves a hole under a compact heading.
 *
 * Off with ?zf_subheader=off.
 */

.zf-sub__note {
	margin: 9px auto 0;
	max-width: 48ch;
	font-size: clamp(13.5px, 1.4vw, 15px);
	line-height: 1.5;
	color: #6b6c64;
	text-wrap: balance;
}

/* Where the band carries this line, it shares a row with the breadcrumb
   rather than stacking under it (Atif, 14 Oct 2026), with a dot between
   them. A phone keeps the two on their own lines, where the row would
   wrap anyway. */
@media (min-width: 576px) {

	.breadcumb-content .zf-sub__note,
	.breadcumb-content .breadcumb-menu-style1:has(~ .zf-sub__note),
	.breadcumb-content .breadcumb-menu:has(~ .zf-sub__note) {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		margin-top: 10px !important;
		margin-inline: 0 !important;
		max-width: none;
	}

	.breadcumb-content .zf-sub__note::before {
		content: "·";
		margin: 0 11px;
		color: #c7c2b2;
	}
}

/* The theme opens the first section with 130px of top padding. */
body:not(.home) .breadcumb-wrapper + section.space-top,
body:not(.home) .breadcumb-wrapper + * > section.space-top,
body:not(.home) .breadcumb-wrapper + section.vs-cart-wrapper {
	padding-top: clamp(32px, 4.5vw, 60px);
}

@media (max-width: 782px) {

	.zf-sub__note {
		margin-top: 7px;
		padding-inline: 16px;
	}
}