/* Products title bar: the Color / Brand / Diameter dropdowns, the On Sale / Clearance toggles and
   the "Sort by" control. Shared by the collection pages (.js-product-title,
   default_product_collection.html and default_product_collection_landing_page.html) and the search
   results page (.product-sort-bar, public_page_search.html); the JS is public-product-filters.js.
   This sheet is that script's stylesheet: the two controllers that load the script
   (public_page_product_collection.py, public_page_product_search.py) link it beside their own page
   sheet, so the bar's rules ride only the pages that render it rather than every page under
   public.css. The bar's container is each page's own - .page-controls in public-collections.css and
   .product-sort-bar in public-search.css - and what sits inside it is styled here.

   The bar reads left to right: the sidebar filter's result count, Clear Filters and tags while it is
   running the page, then the facet dropdowns, then the toggles, with the sort control alone taking
   the auto margin to the right edge. It wraps - the three dropdowns, both toggles and the sort control
   come to ~1100px between them, more than the products column at any viewport, and as a single flex
   line they ran past the column and gave the whole page a horizontal scrollbar. On a wrapped line a
   group lands at the bar's left edge and the sort control's auto margin still carries it right.
   Groups are spaced by the bar's column gap, so a hidden group costs no gap of its own. */
.js-product-title,
.product-sort-bar {
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 8px;
}

/* Clear Filters (public-product-filters.js shows it while any filter is on; it binds the click for
   the search page and public-collections.js binds it for the collection pages) is ordered after the
   filter groups, ahead of the sort control, rather than sitting where the markup has it between the
   result count and the tags: it reads as the end of the filters, and a 60px link no longer opens a
   line of its own when the dropdowns after it don't fit beside it. Same size as the filter labels it
   sits among (the bar's other type is 14px); the bar's column gap spaces it, so no margin of its own. */
.collect-filter-clear-link {
	order: 1;
	font-size: 14px;
	font-weight: normal;
	color: #065798;
	cursor: pointer;
}

.collection-sort-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	order: 2;
}

/* On Sale / Clearance toggles. Hidden state is a class, not inline display, because
   public-product-filters.js reveals and hides them by class as the cards on the page change. The
   per-toggle hidden selector doubles up the class so it outranks the .collection-flag-filter display
   rule below - as a bare class it lost the cascade to that later rule and a hidden Clearance toggle
   showed on any page whose On Sale toggle was visible. */
.collection-flag-filters {
	display: flex;
	align-items: center;
	gap: 16px;
}

.collection-flag-filters-hidden,
.collection-flag-filter.collection-flag-filter-hidden {
	display: none;
}

.collection-flag-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 6px;
	border: 1px solid transparent;  /* recolored by .collection-filter-dirty below; transparent so checking never shifts the bar */
	border-radius: 5px;
	color: #2C3D4F;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}

/* Color / Brand / Diameter dropdowns - built in the browser out of the cards' data-a facets
   (public-product-filters.js's COLLECTION_FACET_FILTERS), so no template ships this markup and a page
   can gain a dropdown mid-load as its cards arrive. The group sits between the sidebar filter's summary
   and the toggles. Hidden state is a class for the same reason it is on the toggles. The group wraps
   within itself, so on a narrow column it is never wider than its widest dropdown. */
.collection-facet-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.collection-facet-filters-hidden,
.collection-facet-filter.collection-facet-filter-hidden {
	display: none;
}

.collection-facet-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #2C3D4F;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}

/* Same control as the sort dropdown beside it, sized to its own values rather than to that one's
   175px floor - three of these plus the sort control share the bar */
.collection-facet-dropdown {
	padding: 5px 10px;
	max-width: 200px;
	color: #2C3D4F;
	background: #FFF;
	border: 1px solid #e2e9e9;
	border-radius: 5px;
	box-shadow: 1px 1px 0px 0px #e6e6e6;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: normal;
	cursor: pointer;
}

/* Element + class so this outranks the bootstrap partial's input[type=checkbox] { margin: 4px 0 0 },
   which otherwise pushes the box 2px below the label text it sits beside */
input.collection-flag-checkbox {
	margin: 0;
	cursor: pointer;
}

/* Cards a toggle or a facet dropdown filtered out. Two classes, not one: each control clears its
   own wholesale, so sharing a class would have either one un-hiding the other's cards. !important
   because the sidebar collection filter and the widget loaders show()/hide() cards inline, and the
   filters have to compose rather than clobber */
.products-container .product-single.collection-flag-hidden,
.products-container .product-single.collection-facet-hidden {
	display: none !important;
}

/* The search page's collection results while a flag toggle is on - the carousel strip and the
   collection widgets in the grid (syncSearchCollectionResults in public-search.js). Its own class,
   not collection-flag-hidden: that one marks single cards that fail the checked flags, this one
   suppresses whole sections while any toggle filters. No !important, unlike the card rule above:
   nothing show()/hides these inline on the search page (public-collections.js, which does, only
   loads on collection pages), and each compound outranks the display:flex layout rules
   (.page-search .mh--carousel-scroller, .products-container .collection-single) on its own. */
#jsSearchCollectionsCarousel.search-collections-hidden,
.products-container > .collection-single.search-collections-hidden {
	display: none;
}

.collection-sort-controls label {
	margin: 0;
	color: #2C3D4F;
	font-size: 14px;
	font-weight: bold;
}

.collection-sort-dropdown {
	padding: 5px 10px;
	min-width: 175px;
	color: #2C3D4F;
	background: #FFF;
	border: 1px solid #e2e9e9;
	border-radius: 5px;
	box-shadow: 1px 1px 0px 0px #e6e6e6;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
}

/* A control the shopper has moved off its default - a facet or sort value picked, a toggle checked
   (marked on its label, the visible element) - wears the orange border. collection-filter-dirty is
   set by syncCollectionControlDirtyState in public-product-filters.js. */
.collection-facet-dropdown.collection-filter-dirty,
.collection-sort-dropdown.collection-filter-dirty,
.collection-flag-filter.collection-filter-dirty {
	border-color: #F39C0F;
}

@media screen and (max-width: 767px) {
	/* Each group owns its row on a phone: the wrap above would otherwise pack the toggles beside a
	   dropdown or two and split the sort control's label from its dropdown across the last line */
	.collection-facet-filters,
	.collection-flag-filters,
	.collection-sort-controls {
		flex: 1 1 100%;
	}

	/* Three dropdowns don't fit one phone row; the group wraps them, and each takes the width it needs */
	.collection-facet-dropdown {
		max-width: 45vw;
	}

	.collection-sort-controls {
		justify-content: space-between;
	}

	.collection-sort-dropdown {
		min-width: 0;
		flex: 1 1 auto;
	}
}