/*
 * The catalog filter as a popup.
 *
 * The template puts a second instance of the store's own filter block on the row under the product
 * search, inside a group marked `woo-filter-popup__panel`, and the row itself carries
 * `woo-filter-popup-row`. Nothing here draws a filter: the panel is the Telex block's own output, the
 * same block the sidebar carries, so the copy cannot drift from the original. What is dressed here is the
 * button that opens it - the reader's own filter icon, standing on the row's content edge with its plate
 * level with the sort control in the same row - the panel's own box and its scrollbar, and the one rule of
 * the sidebar's that would reach into the panel and pull its footer out of it.
 *
 * The panel is hidden by this sheet rather than by the markup, which is why the sheet is a frontend
 * one: in the editor the filter stands open and editable instead of sitting behind a control that
 * cannot be pressed there.
 */

/* The funnel hangs from this row, so the panel below it is measured from the row's own box. */
.woo-filter-popup-row {
	align-items: center;
	position: relative;
}

/*
 * The row's height, held open before anything stands in it.
 *
 * The button and the sort copy are the script's work, so on a refresh the row paints empty: only the
 * template's own padding is there - 8px above from `spacing|20`, and `spacing|30` below, which is
 * 10.4px at the desktop width and 8px at a phone's - and the row reads 18.4px where it will read
 * 56.4px. The collection under it then starts 38px lower once the script has run, so the grid the
 * reader is looking at moves down as it arrives; this floor is the reader's ask, and it is here rather
 * than in the script for the reason the rest of the sheet is: the row's height belongs to the sheet.
 *
 * The 38px is the button's own box, which is the sort copy's too - the row's height is theirs, as the
 * button's docblock says - and the two paddings are named by the template's own tokens rather than
 * added up here, so the floor follows those tokens at every width the way the row itself does: 56.4px
 * where the desktop padding stands, 54px at a phone's. It is a floor and not a height, so a taller row
 * stays the children's to make.
 */
.woo-filter-popup-row {
	min-height: calc(38px + var(--wp--preset--spacing--20) + var(--wp--preset--spacing--30));
}

/* One step up under the pointer, under the keyboard, and while the panel stands open - the row's button
   reads as pressed rather than only as hovered. The step is #303030, the figure the reader has asked onto
   this site's controls; it is written out rather than read from the palette's control-hover entry, which
   still holds the older #353535. */
.woo-filter-popup-row .woo-filter-popup__trigger:hover,
.woo-filter-popup-row .woo-filter-popup__trigger:focus-visible,
.woo-filter-popup-row .woo-filter-popup__trigger[aria-expanded="true"] {
	background: #303030;
}

/*
 * The button: the row's filter button, standing on the row's own content edge - the far left of the line
 * above the product collection.
 *
 * Its mark is the script's business and is stated there: a funnel, the filter glyph the reader asked for,
 * drawn by `funnelMark()`. This rule sizes it and names its ink - the palette entry the catalogue's own
 * search marks read, so the funnel cannot drift from them if the palette moves. The plate is filled in
 * `control` and warms to #303030 under the pointer at a 0.15s step, written out since the control-hover entry still spells #353535, with - asked for at the time -
 * the 8px corners the catalogue's search field and its mark are drawn at.
 *
 * This plate has been asked to change size twice. It was first asked for at the sort control's own height -
 * 38px, level with the control at the other end of the row - then down to the size of the product search
 * icon, which is that icon's own button: 34px, plate and drawing box both. The reader has since asked for
 * that to be undone and for the mark inside to be drawn down a step instead, keeping the plate's own dress:
 * the plate and its box are 38px again, and the inset that was the search icon's own - `2px 3px 4px 3px` -
 * is stepped out to `8px 9px 10px 9px`, which draws the funnel in a 20px area - the mark asked down one step
 * at a time, and asked for again, and again, the plate's background kept throughout. A step is 1px on each of
 * the inset's four figures, so the drawing area comes down 2px at a time, and the mark now stands four steps
 * under the 28px area the search icon's mark draws in.
 *
 * That keeps the inset's own shape - a step more at the sides than at the top, two more at the foot - so the
 * mark stands 9px in from the plate's sides, 8px from its top and 10px from its foot. At a 20px area the
 * funnel's stroke lands near 2.1px and the mark is about 16px across, under the 19px at which this drawing
 * stops reading as a funnel at a glance; the figure is the reader's to set, and it has been set past that
 * line deliberately rather than by drift.
 *
 * The row's height is the sort control's, as it was before this plate was ever raised: 38px of content
 * with the row's own 8px above it and 10.4px below, 56.4px at the desktop width - and the plate is that
 * same 38px again, so the row reads it either way. That height is held open from the first paint by the
 * floor at the top of this sheet, which is the row's own rule and the reader's ask. The panel below the
 * row has not moved through any of these asks, and it does not move on the day the panel opens.
 *
 * It is a real control: it takes focus, carries the pointer cursor, and opens the panel below it. The rule
 * above states its three states - hover, keyboard and open - and the panel's own rule is where the popup
 * hangs from the button's edge. It takes the focus back when it shuts the panel, and Escape hands the
 * keyboard to it.
 *
 * The button resets what a button brings of its own - border, padding, margin, and the platform's ink,
 * which would otherwise draw the mark's `currentColor` strokes in black, a shade off the plate. The reader
 * asked the funnel's ink to be the product search marks' own, so this rule names the very entry those
 * three read rather than leaning on `inherit` to arrive at the same value by a different road: the two
 * are the same colour by declaration now, and a change to the palette carries both or neither. Its box is
 * the drawing's own 38px and nothing else.
 */
.woo-filter-popup-row .woo-filter-popup__trigger {
	background: var(--wp--preset--color--control, #292929);
	border: 0;
	border-radius: 8px;
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 38px;
	margin: 0;
	padding: 0;
	transition: background-color 0.15s ease;
	width: 38px;
}

.woo-filter-popup-row .woo-filter-popup__trigger svg {
	box-sizing: border-box;
	display: block;
	height: 38px;
	padding: 8px 9px 10px 9px;
	width: 38px;
}

/*
 * The catalogue's sort control, cloned into the row's far right.
 *
 * The sidebar's filter already carries the catalogue's own sort - its Sort row writes `orderby` on the very
 * query the grid is built from - and its control is measured at 277x38: `#303030` on the trigger, `#e4e6ea`
 * ink, 8px corners, 16px/500, the block's 18px chevron at its right; and under it, when it opens, the block's
 * own menu - `#303030`, 8px corners, `0 8px 24px rgba(0, 0, 0, 0.3)` - with its option rows at `10px 14px`.
 *
 * Nothing here draws any of that. The script copies the sidebar's control node for node, so the block's sheet
 * dresses the copy exactly as it dresses the original - menu and marked option included - and a change to the
 * sidebar's box reaches this one with it. What is written here is only where the copy stands, and a width.
 *
 * The rule carries the row, and the box may shrink. The page sets `margin: 0` on every child of a flex
 * container (`.is-layout-flex > :is(*, div)`, a class and an element) and that outranks a single class, so
 * `margin-left: auto` - which is what puts the clone at the far right - only wins from the row; and
 * `min-width: 0` lets the box give width back rather than overflow, which is what a phone too narrow for the
 * funnel and 277px together to miss the row's content would otherwise see. The 277px is the sidebar's own
 * width: the copy is that box, so it keeps the original's measure rather than filling whatever the row leaves.
 */
.woo-filter-popup-row .woo-sort-clone {
	flex-shrink: 1;
	margin-left: auto;
	min-width: 0;
	width: 277px;
}

/*
 * The panel: the row's own content edge, `spacing|40`, which is the funnel's left edge and the search
 * field's too - the three stand on one line at x 349. It hangs 4px below the row, which is the panel's own
 * left inset - the side it stands on - and puts 14.4px between the funnel's plate and the panel's edge: the
 * row's own `spacing|30` of bottom padding under the mark, 10.4px, plus this 4. The offset was asked down
 * from 8px to 6, and then to 4 on a second ask, and it is the panel's own top that carries it rather than
 * the row's padding, which is the row's and stays. Its own left edge does not move with the mark's size. The
 * doubling that stood it on the plate's raised edge - `spacing|40` of row padding and `spacing|40` of
 * plate margin, 31.2px - went back with the plate's margin, on the same reversal.
 *
 * Its width is chosen against the sidebar's. The sidebar filter draws 309px wide; this panel's own box
 * is 321, it carries no border, and its insets are 6px over the top and bottom, 4px on the left and the
 * `spacing|20` padding of 8px held on the right, which leaves the copy 309px - the same filter at the
 * same width, so the panel reads as the sidebar lifted off the page. The left inset was 6px, the figure
 * the sides had taken from the vertical step; it is the sidebar's own distance from its column now: that
 * column is 325 wide with the filter box at x 4 inside it, so the copy here stands 4px from this panel's
 * edge and the two filters are inset alike, which is what the reader asked of it. The box was 332 while
 * it wore a `spacing|30` padding of 10.4px and a 1px border, then 325 while its padding stood at 8px a
 * side and the rail stood outside it, then 323 while its left inset was 6. The border was asked to go,
 * the padding down a step and then down again, and the bar asked to come inside the popup - and the right
 * inset is the one side that cannot follow the other three: the strip it leaves is the rail's own gutter,
 * and 6px of gutter would put the drawn rail 2px over the filter's right edge. `spacing|20` is the
 * scale's floor at 8px, so the step below it is written out.
 *
 * The three insets are declared `!important`, which no other rule here needs, because the panel's own
 * group carries `padding-right: 0; padding-left: 0` inline - the residue of how it was first written,
 * so that this sheet would own the sides. Inline beats any sheet, and the block editor rewrites those
 * attributes from whatever it loaded whenever the template is saved, so a save brought the 0s back and
 * the filter grew from 309 to 323 with the drawn rail standing 2px over its right edge. The template is
 * clean again, and this is the guard that stops the next save from undoing the insets.
 *
 * The height is capped against the viewport and the rest scrolls inside the panel, which is what lets
 * the funnel be usable on a phone, where the sidebar column is hidden entirely and this is the only
 * filter on the page.
 *
 * The left offset is the row's own inset, because the button that opens this panel stands on that edge -
 * the far left of the line - so the panel's edge and the button's read the same x. The offset stood at that
 * edge plus the width of a second mark while the row carried a pair, the reader's filter icon beside the
 * funnel; the pair is one button again, standing on the edge, so the offset is back to the one inset.
 *
 * A phone leaves this alone: there the panel is not a sheet hung from the mark but the row's whole width,
 * so it keeps the row's own insets as the block below states.
 */
.woo-filter-popup-row .woo-filter-popup__panel {
	background: var(--wp--preset--color--surface-raised, #202020);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
	display: none;
	left: var(--wp--preset--spacing--40, 15.6px);
	max-height: min(72vh, 640px);
	overflow-y: auto;
	padding: 6px var(--wp--preset--spacing--20, 8px) 6px 4px !important;
	position: absolute;
	top: calc(100% + 4px);
	width: 321px;
	z-index: 40;
}

/*
 * The filter's own padding, stepped in the popup.
 *
 * The rows the filter is built from wear the padding, not the shell: measured inside this panel, the shell
 * carries none and every row around it stands at the block's `14px 16px` - the find row the location field
 * sits in and each of the five sections - with the footer at `20px 16px`. The sort row stood in that list
 * too until it was asked out of the panel; the rule below hides it, so it is no longer dressed here.
 *
 * The vertical room was stepped 2px down, so each row's icon, label and control stands 2px nearer the row
 * above and below it than the block leaves it. The sides are the block's own 16px and are left to the block:
 * only the step is stated here, so a reader of this file sees one figure and the sidebar's filter and this
 * one are dressed from the same source horizontally - as the clone in the row above is dressed entirely.
 *
 * The sections are addressed through `__sections` so this step outranks whatever the block's own sheet
 * states on the same rows, and the last section is the one exception: it ends on a tighter 10px bottom than
 * its siblings' 14, and that figure is restated below so the step cannot raise it. The sidebar's filter keeps
 * the block's figures untouched - the panel is the only place this was asked of.
 */
.woo-filter-popup-row .woo-filter__find-section,
.woo-filter-popup-row .woo-filter__sections > .woo-filter__section {
	padding-bottom: 12px;
	padding-top: 12px;
}

.woo-filter-popup-row .woo-filter__sections > .woo-filter__section:last-child {
	padding-bottom: 10px;
}

/* The footer's step is its own rule because the pinned one below is about where the row sits, not how
   much room it keeps: its plates stood at the block's `20px 16px` beside the sections' 14 and 16. */
.woo-filter-popup-row .woo-filter__footer {
	padding-bottom: 18px;
	padding-top: 18px;
}

/*
 * The sort row, asked out of the panel.
 *
 * The popup's filter is the sidebar's block again, and that block always renders its Sort row: its own
 * attributes are the four option lists and a style object, measured in the template, so there is no switch
 * to set and the row cannot be dropped from the markup by the block's own means. It is hidden here instead,
 * in the panel only. The catalogue's sort control already stands in the row above this panel - cloned from
 * the sidebar's own Sort for the reader who asked for it there - so the panel was repeating a control that
 * stays visible the whole time the panel is open. The sidebar keeps its Sort row, and it remains the source
 * the clone in the row above is built from.
 *
 * `display: none` takes the row, its label and its menu out of the panel's flow and out of the tab order at
 * once, which is why the row is left in the markup rather than stripped from it. The block's own sheet gives
 * this row nothing but a background and its padding, so there is no declaration to outrank.
 */
.woo-filter-popup-row .woo-filter__sort-section {
	display: none;
}

/*
 * The panel's bar, drawn rather than styled.
 *
 * The platform's own scrollbar cannot be dressed into the sidebar's rail: on a Mac it is an overlay
 * that fades out when idle, and styling it with ::-webkit-scrollbar gives it neither a width nor a
 * colour there. The sidebar's bar is not a styled scrollbar either - its script draws an 8px strip -
 * so this script draws the same one, and the two rails are the same pair by the same numbers: #252525 for
 * the strip, a square thumb on the palette's control step warming to #303030 under the pointer, no border,
 * no radius and no arrows, the strip grabbable end to end. It stands inside the panel, in its own right
 * inset: the
 * last 8px of the panel's box, the strip the padding there leaves free, so the bar reads as the popup's
 * edge the way the sidebar's reads as its column's - and the filter's copy, which ends where the strip
 * begins, is never covered by it. Nothing hides the rail when the panel is shut: the script builds it as
 * the panel opens and takes it away as the panel closes.
 */
/* No margin on the rail, unlike the sidebar's, and that is the whole of the placement: the script sets
   `left` to the panel's right edge less the bar's own 8px, which lands the strip in the panel's right
   inset. The margin this rule used to carry pushed it back out over the gutter, which is where it was
   asked to stop standing. Its two right corners take the panel's own 10px radius, so the strip's ends
   finish on the panel's rounded edge instead of squaring off over it; the left side stays square, which is
   the edge that meets the filter.

   The reader's ask: the thumb is never to stand outside the rail or the panel. The script clamps it to the
   track in both axes already - its height is the smaller of the track and the panel's share of it, and its
   travel is what is left over - but two things could part the paint from that arithmetic, and both are shut
   here. The rail's own box can be fractional, since a panel's height is whatever its rows come to, while the
   script measures the track with clientHeight, which is whole pixels; a rounded track measured against a
   fractional box leaves the thumb up to a pixel past the rail's foot, and that pixel hangs over the panel's
   rounded bottom edge as well, which is the second half of the ask. `overflow: hidden` is the guarantee that
   does not depend on the two figures agreeing: whatever the script writes, nothing draws outside the rail's
   own 8px box, and the rail's radius rounds the clip so the thumb's ends follow the panel's corners. The
   script rounds the rail's box to whole pixels beside it, so the two agree in the ordinary case and this is
   the belt rather than the brace. */
.woo-filter-popup__rail {
	background-color: #252525;
	border-radius: 0 10px 10px 0;
	box-sizing: border-box;
	overflow: hidden;
	position: fixed;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	width: 8px;
	z-index: 41;
}

/* Square on its left and carrying no border of its own, as the sidebar's thumb is, so the rail reads as one
   straight band down the panel's edge rather than as a channel with something inside it. The right corners
   carry the rail's 10px - the thumb is at the top of the rail until the panel is scrolled, so those are the
   corners standing on the panel's own top-right rounding.

   The second half of the ask is answered here rather than only in the script: `max-height: 100%` is the
   layout's own ceiling, resolving against the rail's set height, so a thumb written too tall is cut to the
   rail even before the rail's clip applies. The two are the same guard in two channels - one in the box, one
   on the paint - and neither depends on the script's figures being right. */
.woo-filter-popup__thumb {
	/* The palette's control step, asked onto every control on the site and onto these thumbs with them:
	   the rail is a thing the reader drags, so it reads the same entry as the fields, pills, links and
	   buttons, in place of the #303030 it stated before. */
	background-color: var(--wp--preset--color--control, #292929);
	border-radius: 0 10px 10px 0;
	box-sizing: border-box;
	cursor: grab;
	left: 0;
	max-height: 100%;
	position: absolute;
	top: 0;
	transition: background-color 0.15s ease;
	width: 8px;
}

/* The warm is the sidebar's own pair and step, and it is keyed to the strip rather than to the thumb,
   so it holds while the thumb is being dragged too. */
.woo-filter-popup__rail:hover .woo-filter-popup__thumb,
.woo-filter-popup__rail.is-dragging .woo-filter-popup__thumb {
	background-color: #303030;
}

.woo-filter-popup__rail.is-dragging .woo-filter-popup__thumb {
	cursor: grabbing;
}

/* While the rail is drawn the panel's own bar stands down, both mechanisms as the sidebar states
   them, so the two never show at once. The railed rule counts one element more than the fallback pair
   at the foot of this block and wins over it however the two are ordered. */
.woo-filter-popup-row .woo-filter-popup__panel.has-woo-filter-popup-rail {
	scrollbar-width: none;
}

.woo-filter-popup-row .woo-filter-popup__panel.has-woo-filter-popup-rail::-webkit-scrollbar {
	display: none;
}

/* Firefox is left its own bar - there is no rail below the desktop breakpoint and no pseudo-element to
   dress - and is given the rail's pair for it, so the panel's bar is the same two colours either way.
   The query keeps this off the browsers that parse ::-webkit-scrollbar and draw the rail instead. */
@supports not selector(::-webkit-scrollbar) {
	.woo-filter-popup-row .woo-filter-popup__panel {
		scrollbar-color: var(--wp--preset--color--control, #292929) #252525;
		scrollbar-width: thin;
	}
}

.woo-filter-popup-row .woo-filter-popup__panel.is-open {
	display: block;
}

/*
 * The sidebar's own filter pins its footer to the foot of the viewport while the filter scrolls behind
 * it, and that rule is written against the body class the sidebar sets - so it is not scoped to the
 * sidebar and would fix this panel's footer to the bottom of the *page*, under the panel and off its
 * left edge. It is answered here rather than avoided: the footer stays inside the panel and stays
 * reachable, pinned to the panel's own foot, which is what the sidebar's footer does one column over.
 *
 * The two `!important`s are the price of the sidebar's selector counting one element more than this
 * one, and the inline `left`/`width` the sidebar's script writes onto its own footer are cleared for
 * the case a future copy of that script reaches this one.
 */
.woo-filter-popup-row .woo-filter-popup__panel .woo-filter__footer {
	bottom: 0 !important;
	left: auto !important;
	position: sticky !important;
	width: auto !important;
	z-index: 1;
}

/* On a phone the row is the whole width of the page, and a 340px panel hung from its left edge would
   walk off the right of the screen: the panel takes the row's own insets and fills what is between. */
@media (max-width: 782px) {
	.woo-filter-popup-row .woo-filter-popup__panel {
		left: var(--wp--preset--spacing--40, 15.6px);
		right: var(--wp--preset--spacing--40, 15.6px);
		width: auto;
	}
}

/* Motion here is a background step, and the site asks for it to stand still. */
@media (prefers-reduced-motion: reduce) {
	.woo-filter-popup-row .woo-filter-popup__trigger,
	.woo-filter-popup__thumb {
		transition: none;
	}
}