/**
 *
 *   Category hero
 *   =============
 *
 *   Mobile density for the shop/category hero: breadcrumb, title and
 *   description. At 414px wide the hero occupied 293px before a single
 *   product appeared, the h1 alone accounting for 177px of it - the heading
 *   clamp in theme.typography.css resolves to 31.2px at that width.
 *
 *   These rules only apply below the theme's 769px breakpoint; desktop keeps
 *   the full-size hero. The h1 selector carries .category-title as well as
 *   .responsiville so it outweighs the clamp rule, and the breadcrumb needs
 *   !important because the base rule in style.css uses it.
 *
 */

@media ( max-width: 768px ) {

	.woocommerce-breadcrumb {
		margin: 8px 0;
		padding: 5px 10px !important;
		font-size: 11px !important;
	}

	.responsiville h1.category-title,
	h1.category-title {
		font-size: 22px;
		line-height: 1.2;
	}

	/* The title text is wrapped in <span class="bigger">, which is sized
	   inline (47px) rather than by any stylesheet - hence !important. Setting
	   it to inherit keeps it tied to the h1 size above. */
	.responsiville h1.category-title .bigger,
	h1.category-title .bigger {
		font-size: inherit !important;
		line-height: inherit !important;
	}

	/* Hidden on phones to get the products above the fold. The text stays in
	   the markup, so it is still crawled and still shown on desktop. */
	.category-description {
		display: none;
	}

	/* style.css targets this as ".category-hero-content #primary", an ID
	   selector, so the same shape is needed here to outrank it. */
	.category-hero-content #primary,
	.category-hero-content #primary.content-area {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* The 40px top margin on the sidebar is most of the white space between
	   the title and the products. */
	#secondary.shop-sidebar {
		margin-top: 6px;
	}

}