/**
 *
 *   FiboFilters
 *   ===========
 *
 *   Theme-side corrections for the FiboFilters shop filters.
 *
 *   ICON
 *   ----
 *   The old BeRocket filters used a Font Awesome chevron (fa-chevron-up,
 *   glyph f077, 16px, #474972) and that is still what casahara.gr shows in
 *   production. Font Awesome was enqueued by BeRocket though, so with that
 *   plugin deactivated the font is no longer loaded at all - pulling in a
 *   whole webfont for one chevron is not worth it, so the same Font Awesome
 *   chevron path is inlined below as an SVG data URI instead. It matches the
 *   production icon without the dependency.
 *
 *   FiboFilters ships its own thinner chevron SVG in the button; that one is
 *   hidden and this background takes its place.
 *
 *   WHY THE BUTTON AND NOT THE ICON
 *   -------------------------------
 *   Sizing FiboFilters' own SVG does not work: it carries max-width: 100%, so
 *   it can never exceed its button, and the button is only as wide as the
 *   icon - the pair clamps itself and ignores any width set on the icon alone,
 *   !important or not. The button is what has to carry the size.
 *
 *   Responsiville's media reset also declares "height: auto !important" for
 *   img/svg, which is why anything set on the icon needs !important.
 *
 *   STATE
 *   -----
 *   The open/closed state is carried by fibofilters-block--collapsed on the
 *   .fibofilters-block wrapper: present when closed, absent when open.
 *
 */


:root {
	--nvm-fibofilters-chevron-size: 16px;
}


/* Lay the heading out so the chevron sits hard right of the filter name. */
.fibofilters-block__headline-box {
	align-items: center;
	cursor: pointer;
}

/* The chevron itself. The colour (#474972) is baked into the data URI below,
   so change it there rather than with a fill or colour property. */
.fibofilters-block__chevron-btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var( --nvm-fibofilters-chevron-size );
	min-width: var( --nvm-fibofilters-chevron-size );
	height: var( --nvm-fibofilters-chevron-size );
	margin-left: auto;
	padding: 0;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23474972' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
	transition: transform 0.2s ease;
}

/* Hide FiboFilters' own thin chevron; the background above replaces it. */
.fibofilters-block__chevron-btn svg,
.fibofilters-block__chevron-btn .fibofilters-block__chevron-btn-icon {
	display: none !important;
}

/* Open shows the chevron as drawn (pointing up, "click to close").
   Closed flips it to point down, "click to open". */
.fibofilters-block--collapsed .fibofilters-block__chevron-btn {
	transform: rotate(180deg);
}


/**
 *   APPLIED FILTER CHIPS
 *   --------------------
 *   .fibofilters-applied-filters-container ends up shorter than the chip row
 *   it contains (46px around 64px of chips) while keeping overflow visible, so
 *   the chips spill downwards over the first row of products. With several
 *   filters applied the chips wrap and the spill grows with them. Letting the
 *   container take its content's height fixes it at every width.
 */
.fibofilters-applied-filters-container {
	height: auto !important;
	min-height: 0 !important;
}


/**
 *   MOBILE DENSITY
 *   --------------
 *   The filter buttons inherit the theme's 17.6px body size, which makes them
 *   38px tall and wraps three buttons onto two rows. Together with the result
 *   count and the ordering dropdown that puts 262px of furniture above the
 *   first product on a phone. Tightening the type and spacing below the
 *   theme's 769px breakpoint buys that back for the products.
 */
@media ( max-width: 768px ) {

	.fibofilters-filter-button,
	.fibofilters-mobile-filters .fibofilters-button {
		font-size: 14px;
		padding: 6px 10px;
		margin: 0 6px 6px 0;
	}

	.fibofilters-mobile-filters {
		padding-bottom: 8px !important;
	}

	.woocommerce-result-count {
		margin-bottom: 6px;
		font-size: 13px;
	}

	.woocommerce-ordering {
		margin-bottom: 8px;
	}

}