/* Phase 5: horizontal product filter bar (native WooCommerce block-based
   filtering — woocommerce/product-filters + children). Loads after
   ww-shop.css (design tokens) and ww-shop-cards.css, on WooCommerce pages
   only. Selectors are written specific enough to win the cascade against
   WooCommerce/Ollie core block CSS on their own — except font-size, which
   needs !important: the "FILTER:"/"SORT BY:" label and the filter-button
   <h3> headings are core paragraph/heading blocks with a fontSize
   attribute set, so WordPress emits a `has-*-font-size` global-styles
   utility class on them, and every one of those carries `!important`
   (baked in by wp_get_global_stylesheet()) — a plain font-size here loses
   to it regardless of selector specificity.

   Presentation only: this file never touches data-wp-interactive /
   data-wp-on--* / data-wp-bind--* attributes or removes/replaces any block
   markup — it only adds layout, color and open/close (display) styling on
   top of the native, already-functional Interactivity-API blocks. The
   actual filtering (debounced fetch + history.pushState, no full reload)
   is entirely WooCommerce core behaviour; see ww-shop-filters.js for the
   dropdown open/close presentation layer this CSS depends on. */

/* ---------------------------------------------------------------------
   Filter Bar: filter buttons + active chips on the left, sort + product
   count on the right, one border-bottom under the whole bar. Two-column
   grid so the (possibly two-row-tall, once chips appear) filter column
   doesn't stretch the sort/count column's vertical position.
------------------------------------------------------------------------ */
.woocommerce .ww-filter-bar,
.woocommerce-page .ww-filter-bar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 24px;
	border-bottom: 1px solid var(--shop-border);
	padding-top: 16px;
	padding-bottom: 16px;
}

@media screen and ( max-width: 768px ) {
	.woocommerce .ww-filter-bar,
	.woocommerce-page .ww-filter-bar {
		grid-template-columns: 1fr;
		row-gap: 12px;
	}
}

/* Sort + product count: right column, laid out on one line. */
.woocommerce .ww-filter-sort-count,
.woocommerce-page .ww-filter-sort-count {
	/* Overrides WordPress's default block-flow spacing (a stray 32px
	   margin-top core adds between stacked block children) — this group
	   is a side-by-side grid column now, not the second item in a
	   vertical stack, so that margin has nothing to push it away from
	   and was the entire cause of it sitting well below the filter
	   buttons on its left. Confirmed via getBoundingClientRect(): before
	   this fix the two columns' vertical centers were 36.65px apart. */
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	white-space: nowrap;
}

/* The catalog-sorting block's <form> carries WooCommerce's classic
   ".woocommerce-ordering { margin: 0 0 1em }" default (16.8px here) —
   invisible extra space below the real <select>, not part of what's
   drawn on screen. align-items:center above centers the WRAPPER's box,
   margin included, so the select's actual visible text still landed
   ~8px above "59 products" / "SORT BY:" even though the boxes measured
   as centered. Confirmed via getBoundingClientRect(): the wrapper's box
   center was 409.51 but the select's own visible box center was 401.11.
   Zeroing this margin makes the wrapper's box equal its visible content
   again, so centering the box now actually centers what's drawn. */
.woocommerce .ww-filter-sort-count .woocommerce-ordering,
.woocommerce-page .ww-filter-sort-count .woocommerce-ordering {
	margin: 0;
}

@media screen and ( max-width: 768px ) {
	.woocommerce .ww-filter-sort-count,
	.woocommerce-page .ww-filter-sort-count {
		justify-content: space-between;
		white-space: normal;
	}
}

/* Left column wrapper: "FILTER:" label + the product-filters block's
   buttons, side by side. Gutenberg's flex layout support already sets
   display:flex on .ww-filter-controls-row (via the block's own
   layout:{"type":"flex"} attribute) — this just adds the gap/alignment
   the default block-supports gap doesn't give us. */
.woocommerce .ww-filter-controls-row,
.woocommerce-page .ww-filter-controls-row {
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
}

.woocommerce .ww-filter-controls-row .ww-filter-label,
.woocommerce-page .ww-filter-controls-row .ww-filter-label {
	flex-shrink: 0;
}

.woocommerce .ww-filter-controls-row .ww-filter-controls,
.woocommerce-page .ww-filter-controls-row .ww-filter-controls {
	min-width: 0;
}

@media screen and ( max-width: 768px ) {
	.woocommerce .ww-filter-controls-row,
	.woocommerce-page .ww-filter-controls-row {
		flex-wrap: wrap;
	}
}

/* "FILTER:" / "SORT BY:" labels — plain uppercase-style text, matching
   the filter buttons' font family but muted/lighter so the buttons
   themselves stay the visual focus. */
.woocommerce .ww-filter-label,
.woocommerce-page .ww-filter-label,
.woocommerce .ww-sort-label,
.woocommerce-page .ww-sort-label {
	margin: 0;
	font-family: 'Overpass', sans-serif;
	font-weight: 700;
	font-size: 12px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--shop-text-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Filter buttons row. WooCommerce renders each attribute filter
   (Product type / Manufacturer / Anime Franchise — Phase 7 swapped these
   in for the earlier generic Category/Availability/Price filters, same
   product-filters block family) as a direct child of
   .wc-block-product-filters__content when showFilterDrawer is disabled
   (see the archive-product template — set to render inline instead of
   behind a "Filter products" overlay button). Wrap them so they sit side
   by side with a 10px gap.
------------------------------------------------------------------------ */
.woocommerce .ww-filter-controls .wc-block-product-filters__content,
.woocommerce-page .ww-filter-controls .wc-block-product-filters__content {
	display: flex;
	flex-direction: row;
	width: auto;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

/* Each attribute filter (Product type / Manufacturer / Anime Franchise)
   becomes the positioning context for its own dropdown panel. All three
   render the same woocommerce/product-filter-attribute block — it doesn't
   get a per-attribute wrapper class the way the old taxonomy/status/price
   blocks did — so one selector now covers what used to need three. */
.woocommerce .ww-filter-controls .wp-block-woocommerce-product-filter-attribute,
.woocommerce-page .ww-filter-controls .wp-block-woocommerce-product-filter-attribute {
	position: relative;
}

/* ---------------------------------------------------------------------
   The filter button itself: the block's own <h3> heading, repurposed as
   a click target by ww-shop-filters.js (which adds role="button" /
   tabindex, and toggles the .ww-filter-open class below — it never
   touches WooCommerce's own data-wp-* bindings).
------------------------------------------------------------------------ */
.woocommerce .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading,
.woocommerce-page .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-family: 'Overpass', sans-serif;
	font-weight: 700;
	font-size: 13px !important;
	color: var(--shop-text);
	background: #fff;
	border: 1.5px solid var(--shop-border-control);
	border-radius: 8px;
	padding: 8px 30px 8px 16px;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Caret, drawn as a CSS chevron so no extra icon asset is needed. */
.woocommerce .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading::after,
.woocommerce-page .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.2s ease, color 0.15s ease;
}

/* Hover state. */
.woocommerce .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading:hover,
.woocommerce-page .ww-filter-controls .wp-block-woocommerce-product-filter-attribute > h3.wp-block-heading:hover {
	border-color: #FF2D78;
	color: #C71585;
	box-shadow: 0 0 0 3px rgba(255,45,120,0.08);
}

.woocommerce .ww-filter-controls h3.wp-block-heading:hover::after,
.woocommerce-page .ww-filter-controls h3.wp-block-heading:hover::after {
	transform: translateY(-25%) rotate(225deg);
}

/* Open state (class added by ww-shop-filters.js). */
.woocommerce .ww-filter-controls .ww-filter-open > h3.wp-block-heading,
.woocommerce-page .ww-filter-controls .ww-filter-open > h3.wp-block-heading {
	background: var(--shop-accent-gradient);
	color: #fff;
	border-color: transparent;
	box-shadow: none;
}

.woocommerce .ww-filter-controls .ww-filter-open > h3.wp-block-heading::after,
.woocommerce-page .ww-filter-controls .ww-filter-open > h3.wp-block-heading::after {
	color: #fff;
	transform: translateY(-25%) rotate(225deg);
}

/* ---------------------------------------------------------------------
   Dropdown panel: hidden by default (CSS-only, so there is no flash of
   an expanded list before JS attaches), revealed only when the parent
   filter type carries .ww-filter-open. The three attribute filters all
   use the checkbox-list display style; the price-slider selectors are
   kept (currently unused) in case a price filter is reintroduced later.
------------------------------------------------------------------------ */
.woocommerce .ww-filter-controls .wc-block-product-filter-checkbox-list,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-checkbox-list,
.woocommerce .ww-filter-controls .wc-block-product-filter-price-slider,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-price-slider {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	min-width: 220px;
	max-width: min(320px, 90vw);
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	padding: 0.75rem 0;
	z-index: 40;
}

.woocommerce .ww-filter-controls .ww-filter-open .wc-block-product-filter-checkbox-list,
.woocommerce-page .ww-filter-controls .ww-filter-open .wc-block-product-filter-checkbox-list,
.woocommerce .ww-filter-controls .ww-filter-open .wc-block-product-filter-price-slider,
.woocommerce-page .ww-filter-controls .ww-filter-open .wc-block-product-filter-price-slider {
	display: block;
}

/* Price slider needs horizontal breathing room the checkbox list doesn't. */
.woocommerce .ww-filter-controls .wc-block-product-filter-price-slider__content,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-price-slider__content {
	padding: 0.25rem 1rem;
}

/* Checkbox rows. */
.woocommerce .ww-filter-controls .wc-block-product-filter-checkbox-list__items,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
}

.woocommerce .ww-filter-controls .wc-block-product-filter-checkbox-list__label,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--shop-text);
	padding: 6px 16px;
	cursor: pointer;
	transition: background 0.1s ease;
}

.woocommerce .ww-filter-controls .wc-block-product-filter-checkbox-list__label:hover,
.woocommerce-page .ww-filter-controls .wc-block-product-filter-checkbox-list__label:hover {
	background: rgba(255,45,120,0.04);
}

/* ---------------------------------------------------------------------
   Active filter chips row. Hides itself natively via
   data-wp-bind--hidden="!state.hasActiveFilters" (and the matching
   product-filter-clear-button block renders nothing server-side when
   there are no active filters) — no custom empty-state CSS needed here.
------------------------------------------------------------------------ */
/* :not([hidden]) is required here — the block sets the native `hidden`
   attribute itself (data-wp-bind--hidden="!state.hasActiveFilters") to make
   this row collapse to zero space when no filters are active. A plain
   `.ww-filter-active-row { display: flex }` rule would have the same
   specificity as the UA stylesheet's `[hidden] { display: none }` and, by
   loading later, would win and force the (empty) row to stay visible with
   its margin-top — reserving unwanted space WooCommerce's own block
   already avoids. */
.woocommerce .ww-filter-active-row:not([hidden]),
.woocommerce-page .ww-filter-active-row:not([hidden]) {
	flex-basis: 100%;
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

/* Ollie's own theme stylesheet (assets/styles/woocommerce.css) also styles
   .wc-block-product-filter-removable-chips__item at (0,2,0) specificity and
   loads after WooCommerce's block CSS, so a plain ".woocommerce X" rule
   (also (0,2,0)) can lose that tie depending on enqueue order. Scoping
   through the block's own .ww-filter-active-row className (already added
   via the block's className attribute) raises these rules to (0,3,0) so
   they win unconditionally, no !important needed. */
.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__items,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
}

.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__item,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	background: var(--shop-accent-gradient);
	color: #fff;
	font-family: 'Overpass', sans-serif;
	font-weight: 600;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: opacity 0.15s ease;
}

.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__item:hover,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__item:hover {
	opacity: 0.85;
}

.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__label,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__label {
	color: #fff;
}

.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__remove,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__remove {
	display: inline-flex;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #fff;
}

.woocommerce .ww-filter-active-row .wc-block-product-filter-removable-chips__remove-icon,
.woocommerce-page .ww-filter-active-row .wc-block-product-filter-removable-chips__remove-icon {
	width: 10px;
	height: 10px;
	fill: #fff;
}

/* "Clear filters" — plain text link, not a filled button. */
.woocommerce .wc-block-product-filter-clear-button .wp-block-button__link,
.woocommerce-page .wc-block-product-filter-clear-button .wp-block-button__link {
	background: transparent;
	border: none;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--shop-text-muted);
	text-decoration: underline;
	transition: color 0.15s ease;
}

.woocommerce .wc-block-product-filter-clear-button .wp-block-button__link:hover,
.woocommerce-page .wc-block-product-filter-clear-button .wp-block-button__link:hover {
	color: #FF2D78;
}

/* ---------------------------------------------------------------------
   Sort select (woocommerce/catalog-sorting) and product count — recolor
   only, the controls and their no-reload behaviour already exist.
------------------------------------------------------------------------ */
.woocommerce .wc-block-catalog-sorting select.orderby,
.woocommerce-page .wc-block-catalog-sorting select.orderby {
	font-family: 'Overpass', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--shop-text);
	background: transparent;
	border: none;
	border-bottom: 1.5px solid var(--shop-border-control);
	border-radius: 0;
	padding: 4px 2px;
}

.woocommerce .wc-block-catalog-sorting select.orderby:hover,
.woocommerce-page .wc-block-catalog-sorting select.orderby:hover {
	border-bottom-color: #FF2D78;
	color: #0F1111;
}

.woocommerce .wc-block-product-results-count p.woocommerce-result-count,
.woocommerce-page .wc-block-product-results-count p.woocommerce-result-count {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: var(--shop-text-muted);
}

/* ---------------------------------------------------------------------
   Collection/archive title.
------------------------------------------------------------------------ */
.woocommerce .wp-block-query-title,
.woocommerce-page .wp-block-query-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	color: var(--shop-card-title);
	font-size: 1.8rem;
}

@media screen and ( min-width: 750px ) {
	.woocommerce .wp-block-query-title,
	.woocommerce-page .wp-block-query-title {
		font-size: 2.5rem;
	}
}

/* ---------------------------------------------------------------------
   Pagination — stock wp:query-pagination markup, recolor only.
------------------------------------------------------------------------ */
.woocommerce .wp-block-query-pagination a,
.woocommerce-page .wp-block-query-pagination a,
.woocommerce .wp-block-query-pagination span.page-numbers,
.woocommerce-page .wp-block-query-pagination span.page-numbers {
	color: var(--shop-text);
}

.woocommerce .wp-block-query-pagination a:hover,
.woocommerce-page .wp-block-query-pagination a:hover,
.woocommerce .wp-block-query-pagination a:focus,
.woocommerce-page .wp-block-query-pagination a:focus {
	color: #FF2D78;
}

.woocommerce .wp-block-query-pagination span.page-numbers.current,
.woocommerce-page .wp-block-query-pagination span.page-numbers.current {
	color: #FF2D78;
}