/**
 * Mobile shop filter toolbar.
 *
 * Intentionally NOT part of the SCSS build under scss/. The Grunt + node-sass pipeline that
 * generates style.css is stale — style.css was hand-edited after the last successful compile
 * (style.css.map is older than style.css), so rules added to
 * scss/layout/_holder-filter-page.scss would never reach the browser, and re-running the
 * build would discard the manual edits currently live. Same arrangement as
 * product-gallery-slider.css. Edit this file directly.
 *
 * Pairs with js/shop-filters.js.
 */

/* ---------------------------------------------------------------- shared ---- */

/*
 * The BeRocket selected-filter chips block (.bapf_sfa_mt_hide) is position:absolute with a
 * negative top offset, so it renders out of flow and lands on top of the content above the
 * container. --chips-height is written by js/shop-filters.js from the block's measured
 * height, and is 0px whenever no filters are active or the block is in flow (mobile), so
 * unfiltered pages are spaced exactly as before.
 *
 * 70px is the container's existing padding-top from style.css.
 */
.holder-filter-page .container {
	padding-top: calc(70px + var(--chips-height, 0px));
}

/* Mobile-only control. Hidden by default so it never appears at tablet/desktop widths. */
.shop-filter-toggle {
	display: none;
}

/*
 * WooCommerce core ships `.woocommerce .woocommerce-ordering { margin: 0 0 1em; }` in its own
 * stylesheet, not the theme's. Spacing for this row is owned by .shop-toolbar (mobile) and by
 * .orderby's own margin (tablet/desktop), so the wrapper's margin only skews the alignment
 * between the Filters button and the sort select.
 */
.holder-filter-page .woocommerce-ordering {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- mobile ---- */

@media (max-width: 767px) {

	.shop-toolbar {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 40px;
	}

	/* style.css centres this on mobile; inside the toolbar it is the right-hand control. */
	.shop-toolbar .woocommerce-ordering {
		justify-content: flex-end;
	}

	body.shop-filters-ready .shop-filter-toggle {
		display: block;
		position: relative;
		margin: 0;
		padding: 0 24px 8px 0;
		border: 0;
		border-bottom: 1px solid #b6b8ba;
		border-radius: 0;
		background-color: transparent;
		color: #06205c;
		font-size: 16px;
		font-weight: bold;
		line-height: 20px;
		text-transform: uppercase;
		cursor: pointer;
	}

	/*
	 * The button and the sort select are both underlined text. Matching line-height and
	 * bottom padding makes their two underlines land on the same line under align-items:
	 * flex-end — otherwise the select's taller intrinsic box pushes its text up. The
	 * .holder-filter-page prefix is needed to outrank style.css's
	 * .holder-filter-page .woocommerce-ordering .orderby, which carries the 40px margin
	 * that now lives on .shop-toolbar.
	 */
	.holder-filter-page .shop-toolbar .woocommerce-ordering .orderby {
		margin: 0;
		padding: 0 0 8px;
		line-height: 20px;
	}

	.shop-filter-toggle:after {
		/* Plain value first: Firefox drops the whole declaration if it can't parse the
		   alt-text form, which would suppress the pseudo-element entirely. */
		content: '+';
		content: '+' / '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 22px;
		font-weight: bold;
		transition: 0.3s;
	}

	.shop-filter-toggle[aria-expanded="true"]:after {
		content: '-';
		content: '-' / '';
	}

	/*
	 * The relocated sidebar sits inside the panel, so drop the column spacing style.css
	 * gives it and the 50px top margin on its first widget.
	 */
	.shop-filter-panel #sidebar {
		margin: 0 0 30px;
	}

	.shop-filter-panel #sidebar .widget:first-child {
		margin-top: 0;
	}

	/*
	 * AOS holds [data-aos] at opacity:0 until it animates, and its offset math is degenerate
	 * inside the collapsed panel. The panel has its own slide animation; this one is not
	 * needed.
	 */
	.shop-filter-panel #sidebar[data-aos] {
		opacity: 1;
		transform: none;
	}

	/* Chips in flow, under the button row and above the panel. */
	.shop-active-filters .bapf_sfa_mt_hide {
		position: static;
		display: block;
		top: auto;
		left: auto;
		margin: 0 0 20px;
	}

	/* style.css puts display:flex on this element; its child ul is not a flex container. */
	.shop-active-filters .berocket_aapf_widget_selected_filter {
		flex-wrap: wrap;
	}

	/* No absolute chips block at this width, so there is nothing to reserve space for. */
	.holder-filter-page .container {
		padding-top: 70px;
	}

	/*
	 * Safety net: once the script has initialised, any sidebar still sitting in its original
	 * column position means relocation failed. Hide it rather than showing filters twice.
	 * Guarded on .shop-filters-ready so that if the script never runs at all, the sidebar
	 * stays visible in its current position and nothing is lost.
	 */
	body.shop-filters-ready .holder-filter-page > .container > #sidebar {
		display: none;
	}
}

/* --------------------------------------------------- tablet and desktop ---- */

@media (min-width: 768px) {

	/* The toolbar wrapper must not affect layout above mobile: display:contents lets
	   .woocommerce-ordering lay out exactly as it does today. */
	.shop-toolbar {
		display: contents;
	}

	.shop-active-filters {
		display: none;
	}

	/*
	 * !important is earned here: jQuery slideUp/slideDown writes an inline display value on
	 * the panel, which would otherwise win.
	 */
	.shop-filter-panel {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.shop-filter-toggle:after {
		transition: none;
	}
}