/**
 * Breadcrumbs, chips, pagination.
 *
 * From Components.dc.html ("ניווט") and Category.dc.html. The header's own
 * navigation lives in 97-header.css; this file is the in-page wayfinding.
 *
 * Selectors name WooCommerce's markup alongside the theme's, because core
 * renders the breadcrumb and the pagination itself and this theme overrides
 * neither template.
 */

/* ---- breadcrumbs ---- */

/* `.woocommerce .woocommerce-breadcrumb` is how WooCommerce styles this — two
 * classes to the theme's one — so the trail took WooCommerce's grey and its
 * 0.92em until the theme matched that shape. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	margin: 0;
	padding: 0;
	font-size: var(--hp-text-sm);
	color: var(--hp-text-muted);
}

.woocommerce-breadcrumb a{
	color: var(--hp-text-muted);
}

.woocommerce-breadcrumb a:hover{
	color: var(--hp-link);
}

/* ---- chips ----
 * Category pills and the removable filter chips on the archive toolbar.
 */

.hp-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--hp-space-2);
	padding: var(--hp-space-2) var(--hp-space-4);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	background: transparent;
	color: var(--hp-text);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		background-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-chip:hover,
.hp-chip:focus-visible {
	background: var(--hp-accent-tint);
	border-color: var(--hp-accent);
	color: var(--hp-link);
}

.hp-chip[aria-current="true"],
.hp-chip[aria-selected="true"],
.hp-chip.is-current{
	background: var(--hp-brand);
	background-image: var(--hp-gloss);
	border-color: var(--hp-brand);
	color: var(--hp-text-inverse);
}

/* A selected chip must not fade towards the hover tint when pointed at — it
 * stays the strongest thing in the row. */
.hp-chip[aria-selected="true"]:hover,
.hp-chip.is-current:hover{
	background-color: var(--hp-brand-hover);
	border-color: var(--hp-brand-hover);
	color: var(--hp-text-inverse);
}

.hp-chip__remove {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-base);
	line-height: 1;
}

.hp-chip--removable:hover .hp-chip__remove {
	color: var(--hp-sale);
}

/* ---- archive toolbar ----
 * Filters and active chips at the leading edge, result count and the ordering
 * dropdown at the trailing edge. Core prints the last two into the middle of
 * this row; inc/class-archive.php wraps them.
 */

.hp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-4);
	padding-block: var(--hp-space-6) var(--hp-space-5);
}

.hp-toolbar__filters,
.hp-toolbar__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
}

.hp-toolbar__controls {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
}

/* Core floats both of these; the toolbar is flex, so the floats have to go or
 * they drop out of the row. */
.woocommerce .hp-toolbar__controls .woocommerce-result-count,
.woocommerce .hp-toolbar__controls .woocommerce-ordering {
	float: none;
}

/* ---- pagination ----
 * Round page markers, the current one solid. Core prints an unordered list of
 * links inside .woocommerce-pagination.
 */

.woocommerce nav.woocommerce-pagination,
.hp-pagination {
	padding-block-start: var(--hp-space-10);
	text-align: center;
}

/* Core's form has no list to lay out, so the row is made here. */
.hp-pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
}

/* Wraps, because it has to. This shop paginates to 112 pages, so the row is
 * nine markers wide — 416px against a 390px phone, which pushed the whole
 * document sideways. */
.woocommerce nav.woocommerce-pagination ul,
.hp-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li,
.hp-pagination ul li {
	margin: 0;
	padding: 0;
	border: none;
	overflow: visible;
}

/**
 * Two markups, one treatment.
 *
 * WooCommerce prints its pagination as `ul > li > a.page-numbers`. Core's
 * `the_posts_pagination()` — the blog, a category, search — prints
 * `div.nav-links > a.page-numbers` with no list at all. The first version of
 * this rule addressed only the list form, so on every post archive the page
 * numbers rendered as bare 9x17px links.
 */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.hp-pagination ul li a,
.hp-pagination ul li span,
.hp-pagination .nav-links > a,
.hp-pagination .nav-links > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	padding: 0;
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	background: transparent;
	color: var(--hp-text);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	line-height: 1;
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		background-color var(--hp-duration-fast) var(--hp-ease);
}

/* A page marker fills on hover rather than merely darkening its ring, so the
 * target a pointer is on and the page it is already on are drawn the same way —
 * one solid, everything else outlined. */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.hp-pagination ul li a:hover,
.hp-pagination ul li a:focus-visible,
.hp-pagination .nav-links > a:hover,
.hp-pagination .nav-links > a:focus-visible {
	border-color: var(--hp-accent);
	background: var(--hp-accent-tint);
	color: var(--hp-link);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.hp-pagination ul li span.current,
.hp-pagination .nav-links > span.current {
	background: var(--hp-brand);
	border-color: var(--hp-brand);
	color: var(--hp-text-inverse);
	font-weight: 700;
}

/* The ellipsis is not a target, so it loses the ring and reads as a gap. */
.woocommerce nav.woocommerce-pagination ul li span.dots,
.hp-pagination ul li span.dots,
.hp-pagination .nav-links > span.dots {
	border-color: transparent;
	color: var(--hp-text-muted);
	font-weight: 400;
}

/* ---- the discovery strip ----
 * Under the hero: a search field, a row of tabs, and a panel that changes with
 * them. Every panel is already in the document and switching only toggles
 * `hidden`, so a tab costs no request and no layout beyond its own band.
 */

.hp-discover {
	padding-block: var(--hp-space-10);
	background: var(--hp-surface);
	border-block-end: 1px solid var(--hp-border);
}

.hp-discover__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-6);
}

.hp-discover__search {
	display: flex;
	justify-content: center;
}

/* FiboSearch prints its own wrapper; it takes the same measure as the theme's
 * form so the band looks the same with the plugin on or off. */
.hp-discover__search .dgwt-wcas-search-wrapp,
.hp-discover__search .hp-search {
	/* `flex: none` is what makes the width below take effect at all: the header
	 * form is `flex: 1`, whose zero basis wins over `width` inside a flex row,
	 * so without this the field stretches the full container. */
	flex: none;
	width: min(100%, 34rem);
	max-width: none;
	margin-inline: auto;
}

.hp-discover__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hp-space-3);
}

.hp-discover__panel {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-5);
}

.hp-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The panel's own footer link. Set apart from the chips above it so it does not
 * read as one more of them. */
.hp-discover__all {
	align-self: center;
	color: var(--hp-link);
	font-size: var(--hp-text-sm);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition:
		color var(--hp-duration-fast) var(--hp-ease),
		text-decoration-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-discover__all:hover,
.hp-discover__all:focus-visible {
	color: var(--hp-link-hover);
	text-decoration-color: currentColor;
}

/* A placeholder chip has no label, so it needs a width of its own to be
 * visible at all. */
.hp-chip.is-placeholder {
	width: 7rem;
	height: 2.25rem;
	border-style: dashed;
	background: var(--hp-surface-subtle);
}

@media (max-width: 45rem) {
	.hp-discover {
		padding-block: var(--hp-space-6);
	}

	/* The tab row scrolls rather than wrapping to three lines and pushing the
	 * panel off the first screen. */
	.hp-discover__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-inline: calc(var(--hp-space-4) * -1);
		padding-inline: var(--hp-space-4);
		scrollbar-width: none;
	}

	.hp-discover__tabs::-webkit-scrollbar {
		display: none;
	}

	.hp-discover__tabs > .hp-chip {
		flex: none;
	}
}