/**
 * archive.css — the catalogue toolbar.
 *
 * The bar above the product grid: how many results, how to view them, how to
 * sort them. Plus the custom listbox that replaces the native `<select>`, which
 * is the bulk of this file.
 *
 * WHY THE LISTBOX IS HERE AND NOT IN A SHARED FILE. It is the only one on the
 * site today. The day a second one appears — a filter rail, a checkout country
 * picker — `.bedi-select` moves to its own stylesheet unchanged, which is why
 * every rule for it below is written against `.bedi-select` alone and never
 * against `.bedi-toolbar .bedi-select`.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE BAR
 * ====================================================================== */

.bedi-toolbar {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-block-end: var(--bedi-space-md);
	row-gap: var(--bedi-space-3);
}

/*
 * The count is the first thing and it is deliberately quiet: it answers a
 * question nobody asked but everybody checks.
 */
.bedi-toolbar__count {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/*
 * SORT AND THE SWITCHER TRAVEL TOGETHER, HARD RIGHT.
 *
 * The auto margin used to live on the count, and it silently did nothing:
 * woo.css:439 and :445 both set `margin` as a SHORTHAND on
 * `.woocommerce .woocommerce-result-count` / `.woocommerce-ordering` at
 * (0,2,0), which resets every side and outranks a (0,1,0) component rule. With
 * no auto margin left to absorb the slack, `justify-content: space-between`
 * did what it is supposed to do and spread all three children evenly — which
 * is how the sort ended up stranded in the middle of the bar.
 *
 * So the auto margin moves to the SORT and is written at (0,3,0) — class,
 * class, class — to beat those shorthands outright rather than depend on which
 * stylesheet happens to load second. It absorbs the free space BEFORE
 * justify-content gets to distribute any, so space-between is left with
 * nothing to do and the last two children sit flush at the end, one
 * `column-gap` apart.
 *
 * The bottom margin from those same shorthands is zeroed here too: inside a
 * centred flex row it was pushing both controls off the bar's optical centre.
 */
.bedi-toolbar .woocommerce-ordering.bedi-orderby {
	margin-block: 0;
	margin-inline-start: auto;
}

.bedi-toolbar .woocommerce-result-count.bedi-toolbar__count {
	margin-block: 0;
}

/* --- the view switcher --- */

.bedi-toolbar__views {
	background-color: var(--bedi-surface-2);
	border-radius: var(--bedi-radius-lg);
	display: flex;
	gap: 2px;
	padding: 3px;
}

.bedi-toolbar__views[hidden] { display: none; }

.bedi-toolbar__view {
	appearance: none;
	background: none;
	block-size: 32px;
	border: 0;
	border-radius: 9px;
	color: var(--bedi-ink-muted);
	cursor: pointer;
	display: grid;
	inline-size: 34px;
	padding: 0;
	place-items: center;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-toolbar__view:hover { color: var(--bedi-ink); }

/*
 * The pressed one is a white chip on the grey track — a segmented control, not
 * a set of buttons one of which happens to be coloured. `aria-pressed` is the
 * single source of truth for both the look and the announcement.
 */
.bedi-toolbar__view[aria-pressed="true"] {
	background-color: var(--bedi-surface);
	box-shadow: 0 1px 2px rgba(37, 37, 49, 0.16);
	color: var(--bedi-navy);
}

.bedi-toolbar__view:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -1px;
}

/* =========================================================================
 * 2. THE SORT
 * ====================================================================== */

.bedi-orderby {
	align-items: center;
	column-gap: 10px;
	display: flex;
	margin: 0;
}

.bedi-orderby__label {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	white-space: nowrap;
}

/*
 * The native select is `.screen-reader-text` until archive.js hides it, so
 * WooCommerce's own width rules must not be allowed to give it a box in the
 * meantime.
 */
.bedi-orderby select.orderby.screen-reader-text {
	block-size: 1px;
	inline-size: 1px;
}

.bedi-select {
	min-inline-size: 0;
	position: relative;
}

.bedi-select[hidden] { display: none; }

.bedi-select__button {
	align-items: center;
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 40px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	column-gap: 10px;
	cursor: pointer;
	display: flex;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-sm);
	justify-content: space-between;
	min-inline-size: 200px;
	padding-inline: 14px 10px;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-select__button:hover { border-color: var(--bedi-rule-strong); }

.bedi-select__button[aria-expanded="true"] {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
}

.bedi-select__button:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

.bedi-select__value {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bedi-select__chev {
	color: var(--bedi-rule-strong);
	display: inline-flex;
	flex: 0 0 auto;
	transition: transform var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-select__button[aria-expanded="true"] .bedi-select__chev {
	transform: rotate(180deg);
}

/* --- the list --- */

.bedi-select__list {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	box-shadow: 0 18px 44px -22px rgba(37, 37, 49, 0.4);
	inline-size: 100%;
	inset-block-start: calc(100% + 6px);
	/*
	 * ANCHORED TO THE END, NOT THE START. The sort sits at the end of the bar,
	 * so a list that grew from its leading edge would push off the viewport on
	 * a narrow screen while leaving a gap on a wide one.
	 */
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	max-block-size: 320px;
	min-inline-size: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bedi-space-2);
	position: absolute;
	/* Above the page's own sticky furniture but below the header, which must
	   stay reachable. */
	z-index: var(--bedi-z-dropdown);
}

.bedi-select__list[hidden] { display: none; }

.bedi-select__list:not([hidden]) {
	animation: bedi-select-in 160ms var(--bedi-ease-in) 1;
}

@keyframes bedi-select-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bedi-select__option {
	align-items: center;
	block-size: 38px;
	border-radius: 9px;
	color: var(--bedi-ink);
	column-gap: 8px;
	cursor: pointer;
	display: flex;
	font-size: var(--bedi-text-sm);
	padding-inline: 8px 12px;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/*
 * `.is-active` is the KEYBOARD cursor and `:hover` is the pointer's — the same
 * fill, two different inputs, and they are deliberately not merged. A listbox
 * that moves its keyboard cursor on hover loses the visitor's place the moment
 * the mouse drifts across it.
 */
.bedi-select__option.is-active,
.bedi-select__option:hover {
	background-color: var(--bedi-surface-2);
}

.bedi-select__option[aria-selected="true"] {
	color: var(--bedi-navy);
	font-weight: var(--bedi-weight-medium);
}

.bedi-select__tick {
	color: var(--bedi-accent);
	display: inline-flex;
	flex: 0 0 auto;
	/* The space is reserved on every row so choosing a different option does
	   not shift the text of all the others by 24px. */
	opacity: 0;
}

.bedi-select__option[aria-selected="true"] .bedi-select__tick { opacity: 1; }

/* =========================================================================
 * 3. THE VIEWS
 *
 * WooCommerce writes `columns-N` on ul.products from `loop_shop_columns`, and
 * woo.css lays that out. These override the grid for the chosen view only, and
 * they are scoped to a class on the LIST rather than on the body so a page with
 * two grids on it cannot have one of them silently follow the other.
 * ====================================================================== */

.bedi-woo ul.products.is-view-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bedi-woo ul.products.is-view-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * LIST IS ONE COLUMN OF WIDE ROWS, and it is the view that earns its place:
 * on a catalogue of 1,259 network cables the difference between two products is
 * in the name, and a name is what a grid tile has least room for.
 */
.bedi-woo ul.products.is-view-list {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * THE GRID GOES ON THE CARD, NOT ON THE LIST ITEM.
 *
 * The tile is `li.bedi-pcell > article.bedi-pcard > [media, prices, meta, name,
 * actions]` — so the `li` has exactly one child, and making IT the two-column
 * grid produces a 132px column with the whole card in it and an empty second
 * column. Which is precisely what it did.
 *
 * THE ROWS ARE ASSIGNED EXPLICITLY, and the order is deliberately not the
 * grid's. In a tile the price leads because the eye is comparing across a row
 * of four; in a list row the NAME leads, because a list is what someone
 * switches to when the names are the thing they need to read — which is the
 * whole reason this view exists on a catalogue of 1,259 cables.
 */
.bedi-woo ul.products.is-view-list .bedi-pcard {
	align-items: center;
	column-gap: var(--bedi-space-5);
	display: grid;
	/*
	 * THREE COLUMNS AT EVERY WIDTH — photograph, text, button.
	 *
	 * This was two columns and four stacked rows, with the button under the
	 * price. The phone got the three-column version first and it is simply the
	 * better row: the name reads across the full width, the stock and the price
	 * sit together as one block, and the button is beside them instead of a
	 * fourth line down. A 944px desktop row had even more room going to waste
	 * than a 335px one.
	 */
	grid-template-columns: 132px minmax(0, 1fr) auto;
	/*
	 * FIVE ROWS, AND THE TWO EMPTY ONES ARE THE POINT.
	 *
	 * With three `auto` rows the name, the stock line and the price sat 19px
	 * apart while every margin was 0 and this row-gap was 2. The tracks were
	 * measured at 60.1 / 33.7 / 42.1 against contents of 39 / 17 / 25 — each
	 * one about 20px taller than the thing in it.
	 *
	 * The photograph is what inflated them. It is 132px and spans all three, and
	 * grid distributes a spanning item's extra height across the intrinsic
	 * tracks it covers: 132 minus the 81px of text minus the gaps left 47px
	 * spread evenly over the three rows, and `align-items: center` then centred
	 * each line inside its over-tall track. The gaps were the photo, pushed
	 * through the text.
	 *
	 * A spanning item that covers a FLEXIBLE track does not distribute into the
	 * intrinsic ones (CSS Grid §11.5.1), so an `1fr` above and below takes all
	 * the slack, leaves the three text rows at content height, and centres the
	 * group against the photograph as a block instead of spreading it.
	 */
	grid-template-rows: 1fr auto auto auto 1fr;
	row-gap: 2px;
}

.bedi-woo ul.products.is-view-list .bedi-pcard__media {
	grid-column: 1;
	grid-row: 1 / -1;
	inline-size: 132px;
}

/* Over the text column AND the button column: the name is what a list view is
   for, so it gets the whole row rather than stopping short of the button. */
.bedi-woo ul.products.is-view-list .bedi-pcard__name    { grid-column: 2 / -1; grid-row: 2; }
.bedi-woo ul.products.is-view-list .bedi-pcard__meta    { grid-column: 2; grid-row: 3; }
.bedi-woo ul.products.is-view-list .bedi-pcard__prices  { grid-column: 2; grid-row: 4; }
.bedi-woo ul.products.is-view-list .bedi-pcard__actions { grid-column: 3; grid-row: 3 / 5; }

/*
 * The button stops being full width — in a row there is nothing for it to line
 * up with, and a 792px add-to-cart is absurd.
 *
 * `align-items`, NOT `justify-content`. `.bedi-pcard__actions` is
 * `flex-direction: column`, so the main axis is vertical: justify-content
 * moves the button up and down and does nothing at all to its width, while the
 * default cross-axis `stretch` is what was making it fill the row. Setting
 * `width: auto` on the button alone cannot win against stretch either — the
 * cross-axis stretch overrides an auto size, which is why the first two
 * attempts at this both looked like specificity problems and were not.
 */
.bedi-woo ul.products.is-view-list .bedi-pcard__actions {
	align-items: start;
	/*
	 * Centred against the stock-and-price pair it now sits beside. The old
	 * `margin-block-start` was the gap above a button that used to be UNDER
	 * them; in a column of its own it would push the button out of its row.
	 */
	align-self: center;
	margin-block-start: 0;
}

/*
 * SPECIFICITY, AND THE PROPERTY NAME, BOTH MATTER HERE.
 *
 * section-catalog.css sets `.woocommerce ul.products li.product.bedi-pcell
 * .bedi-pcard__cart { width: 100% }` — (0,4,2), and a full-width button is
 * right in a 190px tile. A `.bedi-woo ul.products.is-view-list
 * .bedi-pcard__cart` rule is (0,3,1) and loses to it outright, which is why
 * the first attempt left a 792px add-to-cart across the row.
 *
 * This selector is (0,5,2) and beats it. And it sets `width`, not
 * `inline-size`: the two are separate declarations to the cascade, so
 * overriding the logical property would have left the physical one standing.
 */
.woocommerce ul.products.is-view-list li.product.bedi-pcell .bedi-pcard__cart,
.woocommerce-page ul.products.is-view-list li.product.bedi-pcell .bedi-pcard__cart {
	inline-size: auto;
	padding-inline: 22px;
	width: auto;
}

/*
 * TWO LINES, AND A STEP DOWN FROM --bedi-text-lg.
 *
 * The un-clamped `text-lg` here was argued for on the grounds that a row has
 * the width a tile does not. It does — and these are ERP names of eighty and
 * ninety characters, so what the width bought was four and five lines of 18px
 * type, taller than the photograph beside it and louder than the price. A list
 * of twenty-four of those is not more readable than a grid, it is just longer.
 *
 * `line-clamp` is declared beside the prefixed form so this keeps working when
 * engines drop the prefix; all five declarations are required together, or the
 * clamp does nothing and the third line still paints.
 */
.bedi-woo ul.products.is-view-list .bedi-pcard__name {
	/* section-catalog.css gives the name a 4px lead for the grid tile, where it
	   sits under a photograph. Here it is the top of the stack. */
	margin-block-start: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: var(--bedi-text-base);
	overflow: hidden;
}

@media (max-width: 63.9375em) {
	/* Below the two-column archive breakpoint there is no rail, but there is
	   also not room for four — both grid views land on three. */
	.bedi-woo ul.products.is-view-grid-4,
	.bedi-woo ul.products.is-view-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375em) {
	.bedi-woo ul.products.is-view-grid-4,
	.bedi-woo ul.products.is-view-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * THE SWITCHER COMES BACK ON A PHONE, REDUCED TO TWO.
	 *
	 * It used to be hidden outright, on the reasoning that three choices on a
	 * 360px screen is two to regret. That reasoning was right about THREE and
	 * wrong about hiding it: a phone can show a grid or a list, and those are
	 * genuinely different ways to shop — the list is how you compare long
	 * Georgian product names, the grid is how you scan pictures.
	 *
	 * So the four-up button goes and the other two stay. The three-up button
	 * renders two columns here, which is why it is the one kept: it is simply
	 * "grid" at this size.
	 */
	.bedi-toolbar__view[data-bedi-view="grid-4"] { display: none; }

	.bedi-toolbar { column-gap: var(--bedi-space-3); }

	.bedi-orderby__label { display: none; }

	.bedi-select__button { min-inline-size: 0; }

	/*
	 * The phone keeps the same three columns; only the measurements shrink.
	 * The shape itself moved to the base rules above, where the desktop row now
	 * uses it too.
	 */
	.bedi-woo ul.products.is-view-list .bedi-pcard {
		column-gap: var(--bedi-space-3);
		grid-template-columns: 92px minmax(0, 1fr) auto;
	}

	.bedi-woo ul.products.is-view-list .bedi-pcard__media {
		inline-size: 92px;
	}

	/*
	 * Narrower than the desktop row's 22px. Three columns in 335px is tight —
	 * 92 of photograph, two 12px gaps and whatever the button takes, and what
	 * is left has to hold "დარჩა 3 ცალი" without wrapping.
	 *
	 * Matched to the (0,5,2) selector above, which is what section-catalog.css's
	 * full-width rule actually loses to; written any shorter this does nothing.
	 */
	.woocommerce ul.products.is-view-list li.product.bedi-pcell .bedi-pcard__cart,
	.woocommerce-page ul.products.is-view-list li.product.bedi-pcell .bedi-pcard__cart {
		padding-inline: 14px;
	}
}

/* =========================================================================
 * 4. REDUCED MOTION
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-toolbar__view,
	.bedi-select__button,
	.bedi-select__chev,
	.bedi-select__option {
		transition-duration: 1ms !important;
	}

	.bedi-select__button[aria-expanded="true"] .bedi-select__chev {
		/* The rotation is state, not decoration: without it an open list has no
		   closed counterpart. It simply arrives. */
		transform: rotate(180deg) !important;
	}

	.bedi-select__list:not([hidden]) { animation: none !important; }
}

/* =========================================================================
 * 5. FORCED COLOURS
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-toolbar__views,
	.bedi-toolbar__view,
	.bedi-select__button,
	.bedi-select__list {
		border: 1px solid ButtonText;
	}

	.bedi-toolbar__view[aria-pressed="true"] {
		border: 2px solid Highlight;
	}

	.bedi-select__option[aria-selected="true"],
	.bedi-select__option.is-active {
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}
}

/* =========================================================================
 * THE TOOLBAR ON A PHONE
 *
 * Four controls — filter, count, sort, view switcher — that wrapped into two
 * ragged rows, with the count stranded beside the filter button and the
 * switcher on a line of its own.
 *
 * One rule of thumb decides the new arrangement: the COUNT is information and
 * the other three are controls. So the count goes on its own line directly
 * under the title, where it reads as a subtitle, and the three controls share
 * one full-width row beneath it.
 * ====================================================================== */

@media (max-width: 47.9375em) {

	/*
	 * A GRID, NOT A FLEX ROW.
	 *
	 * The requirement is exact — the switcher takes what it needs, the other
	 * two split the rest in half — and flex kept not delivering it. With
	 * `flex: 1 1 0` and `min-inline-size: 0` on both, the filter still came out
	 * 137px against the sort's 107: something inside the sort was capping it,
	 * and the free space flex could not give to one went to the other.
	 *
	 * `1fr 1fr auto` says the same thing in one line and cannot be argued with
	 * by anything inside the cells — the tracks are sized before the contents
	 * get a say, which is the whole difference between grid and flex here. It
	 * also drops the need to neutralise the desktop auto-margin, because an
	 * auto margin cannot absorb a grid track.
	 */
	.bedi-toolbar {
		column-gap: var(--bedi-space-2);
		display: grid;
		grid-template-columns: 1fr 1fr auto;
		row-gap: var(--bedi-space-3);
	}

	/*
	 * `order: -1` puts the count first whatever the source order, and
	 * `flex: 1 0 100%` makes it take a whole line on its own — which is what
	 * forces the three controls onto the next one.
	 */
	.bedi-toolbar .woocommerce-result-count.bedi-toolbar__count {
		/* The whole first row to itself, whatever the source order. */
		grid-column: 1 / -1;
		margin: 0;
		order: -1;
	}

	/*
	 * FILTER AND SORT SPLIT WHAT IS LEFT, HALF EACH.
	 *
	 * `flex: 1 1 0` rather than `1 1 auto`: with an `auto` basis each one would
	 * start from its own text width and the split would follow the length of
	 * the words rather than the space — "ფილტრი" is half the length of
	 * "ნაგულისხმევი", so the two would never be equal. A zero basis makes the
	 * free space the only input, which is what 50/50 means.
	 *
	 * The auto margin has to go with it. It exists to shove this pair to the
	 * right on a desktop, and an auto margin absorbs free space BEFORE flex
	 * grows anything — so it would eat the slack the halves are meant to
	 * share. (The same mechanism, in the same direction, that centred the
	 * product page's stepper.)
	 */
	/*
	 * The two halves fill their tracks. `min-inline-size: 0` is still needed:
	 * a grid item's automatic minimum is its content, and "ნაგულისხმევი" is
	 * wider than half of a 375px screen, so without it the track would be
	 * pushed past 1fr by its own contents.
	 */
	.bedi-toolbar .bedi-filters__open,
	.bedi-toolbar .woocommerce-ordering.bedi-orderby {
		inline-size: 100%;
		margin-inline: 0;
		min-inline-size: 0;
	}

	.bedi-toolbar .bedi-filters__open {
		justify-content: center;
	}

	/* The select fills its half rather than sitting at its content width. */
	.bedi-toolbar .bedi-orderby .bedi-select,
	.bedi-toolbar .bedi-orderby select {
		inline-size: 100%;
	}

	/* The switcher's track is `auto`, so it is already exactly as wide as its
	   buttons; this only stops it stretching inside that track. */
	.bedi-toolbar__views {
		justify-self: end;
	}
}