/**
 * Product count: the results line beside the sorting dropdown.
 *
 * Sits in the same flex row as the active filter chips and the sorting
 * dropdown (container 4cbd77e in template 724), so it borrows that row's type
 * rather than introducing a third size: the chips are 0.85rem, the select is
 * 1rem, and this reads as a label beside them.
 *
 * ORDER IN THAT ROW: chips, count, sorting. The count and the select belong
 * together as one cluster on the right, and the chips take the left because
 * they are the only thing in the row whose width is unpredictable - anywhere
 * from nothing to half a dozen tags.
 *
 * THE CLUSTER IS A CONTAINER, NOT TWO LOOSE WIDGETS. The count and the select
 * live in inner container `sortgrp` inside the row, so they move as one. Three
 * loose items on one line fit at 1440 and stop fitting well before 1024: the row
 * is only about two thirds of the viewport with the filter sidebar beside it,
 * and at 800px the count was wrapping onto a second line. With the pair grouped
 * and the row set to wrap, the group drops below the chips in one piece as soon
 * as they no longer fit side by side, and comes back up on its own.
 *
 * Three selectors, because Elementor wraps every widget in its own div and the
 * flex items are those wrappers, not what this module prints inside them:
 *
 *   .c-product-count-group  inner container sortgrp. Where the pair sits.
 *   .c-product-count        the count's widget wrapper (widget a1c0u0t).
 *   .nso-product-count      the line itself. Type, colour, reserved height.
 *
 * `margin-left: auto` on the group is what holds it right. The row is
 * `space-between`, which would spread the chips and the group apart evenly and,
 * worse, would throw the group back to the left edge on the many pages where no
 * filter is set and the chips widget is hidden altogether. An auto margin
 * absorbs the free space before justify-content gets a say, so the group sits
 * against the right edge whether there are chips or not. It is scoped above the
 * mobile breakpoint (the kit's viewport_md is 768) because the row turns into a
 * column below it, where an auto left margin would push the group to the right.
 *
 * The line is filled by JavaScript on a filtered request, so it holds its own
 * height while it is still empty. Without that the whole row, the grid and the
 * pagination all shift down by one line the moment the script runs.
 *
 * Colours and the family come from the Elementor kit's globals, per the site
 * convention. No hardcoded brand values here.
 *
 * @package NightSkyOptics
 */

/* The pair, as one flex item of the row. Elementor gives an inner container
   --width: 100%, which would make it claim the whole row. */
.c-product-count-group {
	--width: auto;
	flex: 0 1 auto;
}

/* The count's own wrapper. The group centres it against the 42px sorting
   widget, so the line and "Sort by:" share an optical baseline; the row's
   flex-end used to put it noticeably lower. */
.c-product-count {
	flex: 0 0 auto;
}

/* The line itself. */
.nso-product-count {
	margin: 0;
	min-height: 1.6em;
	color: var( --e-global-color-text, #394460 );
	font-family: var( --e-global-typography-text-font-family, "Open Sans" ), sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
}

/*
 * The sorting widget's visible label is hidden, so the row is one plain
 * sentence and one grey pill rather than two runs of identical navy text 20px
 * apart. The select carries the wording itself: its placeholder reads "Sort
 * by", and once a choice is made it reads "Price low - high", which says what
 * the label used to say.
 *
 * The widget's Label setting is deliberately still "Sort by" even though
 * nothing renders it. JSF builds the select's aria-label from that setting
 * (templates/filters/sorting.php) and falls back to a generic "Sort filter"
 * when it is empty, so clearing it in Elementor would quietly cost the control
 * its accessible name. Hide it here, do not empty it there. The widget is named
 * accordingly in the Elementor navigator.
 *
 * Scoped to the group: other JSF sorting widgets on the site keep their labels.
 */
.c-product-count-group .jet-sorting-label {
	display: none;
}

/* Nothing found: the grid prints its own message, one is enough. */
.nso-product-count--empty {
	display: none;
}

@media screen and (min-width: 768px) {
	.c-product-count-group {
		margin-left: auto;
	}
}

@media screen and (max-width: 767px) {
	.nso-product-count {
		font-size: 0.855rem;
	}
}