/*
 * Search (T14): suggestions panel of the navbar overlay (.pg-search) and the search block of the
 * results pages (.pg-search-refine, .pg-search-form). Tokens only. Loads on the Profigarden theme
 * only (Search::assets()).
 *
 *   .pg-search__panel        the list under the search bar; full screen part on phones
 *   .pg-search__list--split  desktop: products in the first column (65 %), .pg-search__side with the
 *                            categories and articles in the second, hairlines between the parts (the
 *                            layout of the Odsypano search); one column on phones, in the same order
 *   .pg-search__group-title  "Produkty", "Kategórie", "Články a stránky"
 *   .pg-search__option       one suggestion (role="option"): --product, --cat, --post, --all
 *     [aria-selected="true"] the suggestion picked with the arrows (focus stays in the field)
 *   .pg-search__note         loading, nothing found, error, "not every word" notice
 *   .pg-search-refine        under the heading of a results page: the form, the notice, the categories
 *   .pg-search-form          field and button in one row
 *
 * Why a product suggestion is not the mini card (.pg-mini, cards.css): a suggestion is one
 * role="option" link that the combobox moves through with aria-activedescendant. The mini card holds
 * its own links (photo, name) and an add to cart button, and an option may contain no interactive
 * element, so the suggestion row has its own markup with the same photo, name and price order.
 */

/* ── Search bar of the overlay (layout from navbar.css) ── */

/* One focus ring, on the bar: the field inside draws none of its own. The transparent outline
   is what forced colours (Windows contrast mode) show, box-shadow disappears there. */
.pg-search .pgn-search-overlay__input:focus-visible {
	outline: none;
}

.pg-search .pgn-search-overlay__bar:focus-within {
	border-color: var(--pg-accent-text);
	box-shadow: 0 0 0 1px var(--pg-accent-text);
	outline: 2px solid transparent;
}

/* ── Suggestions panel ─────────────────────── */

.pg-search__form {
	position: relative;
}

.pg-search__panel {
	position: absolute;
	top: calc(100% + var(--pg-space-4));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	max-height: var(--pg-search-panel-h);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pg-white);
	border: 1px solid var(--pg-line);
	box-shadow: var(--pg-shadow-pop);
	color: var(--pg-text);
	font-family: var(--pg-font-body);
	text-align: left;
}

.pg-search__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.pg-search__list--split {
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
}

/* Categories and articles: the second column, a line between it and the products and between its groups. */
.pg-search__side {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	min-width: 0;
}

.pg-search__group--products + .pg-search__side {
	border-inline-start: 1px solid var(--pg-line);
}

.pg-search__side > .pg-search__group + .pg-search__group {
	border-top: 1px solid var(--pg-line);
}

.pg-search__list[aria-busy="true"] {
	opacity: var(--pg-opacity-busy);
}


.pg-search__group-title {
	padding: var(--pg-space-12) var(--pg-space-16) var(--pg-space-4);
	font-size: var(--pg-fs-12);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
	letter-spacing: var(--pg-tracking-caps);
	text-transform: uppercase;
	color: var(--pg-muted);
}

.pg-search__option {
	display: flex;
	align-items: center;
	gap: var(--pg-space-12);
	min-height: var(--pg-control-h);
	padding: var(--pg-space-8) var(--pg-space-16);
	color: var(--pg-text);
	text-decoration: none;
	transition: background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-search__option:hover {
	background: var(--pg-surface-soft);
	color: var(--pg-text);
}

/* The option chosen with the arrows: focus stays in the field, so the option carries the focus ring.
   The soft background keeps the grey meta text at 4.6:1 (--pg-surface-hover would give 4.4:1). */
.pg-search__option[aria-selected="true"] {
	background: var(--pg-surface-soft);
	outline: 2px solid var(--pg-focus-color);
	outline-offset: -2px;
}

.pg-search__thumb,
.pg-search__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	background: var(--pg-surface-card);
	color: var(--pg-muted);
}

.pg-search__thumb {
	width: var(--pg-space-48);
	height: var(--pg-space-48);
}

.pg-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pg-search__icon {
	width: var(--pg-space-32);
	height: var(--pg-space-32);
}

.pg-search__icon img {
	width: var(--pg-space-24);
	height: var(--pg-space-24);
	object-fit: contain;
}

.pg-search__body {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-4);
	min-width: 0;
}

.pg-search__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--pg-fs-15);
	font-weight: var(--pg-fw-display);
	line-height: var(--pg-lh-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pg-search__name mark {
	background: var(--pg-beige);
	color: inherit;
}

.pg-search__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pg-space-4) var(--pg-space-8);
	font-size: var(--pg-fs-13);
	line-height: var(--pg-lh-snug);
	color: var(--pg-muted);
}

.pg-search__price {
	font-weight: var(--pg-fw-bold);
	color: var(--pg-text);
}

.pg-search__stock {
	color: var(--pg-danger-text);
}

/* Last row: the whole results page, across both columns. Stays at the bottom of a long list. */
.pg-search__option--all {
	grid-column: 1 / -1;
	position: sticky;
	bottom: 0;
	justify-content: center;
	border-top: 1px solid var(--pg-line);
	background: var(--pg-white);
	font-weight: var(--pg-fw-bold);
	color: var(--pg-accent-text);
}

.pg-search__option--all:hover,
.pg-search__option--all[aria-selected="true"] {
	background: var(--pg-surface-soft);
	color: var(--pg-accent-text);
}

.pg-search__note {
	margin: 0;
	padding: var(--pg-space-12) var(--pg-space-16);
	font-size: var(--pg-fs-14);
	line-height: var(--pg-lh-snug);
	color: var(--pg-muted);
}

/* In the flow of the page instead of under the search bar (styleguide). */
.pg-search__panel--static {
	position: static;
	max-height: none;
}

/* Phones: the overlay is full screen (navbar.css, max-width 768px), the list fills the rest of it. */
@media (max-width: 768px) {
	/* The bar has only a bottom line here: the line gets thicker. */
	.pg-search .pgn-search-overlay__bar:focus-within {
		box-shadow: inset 0 -1px 0 var(--pg-accent-text);
	}

	.pg-search .pgn-search-overlay__inner > .pg-search__form {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	.pg-search__panel {
		position: static;
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		border: 0;
		box-shadow: none;
	}

	/* One column: products, categories, articles under each other, a line between them. */
	.pg-search__list--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.pg-search__group--products + .pg-search__side {
		border-inline-start: 0;
		border-top: 1px solid var(--pg-line);
	}
}

/* ── Results pages: search again ───────────── */

/* The words of the visitor are repeated on the page: one long word must wrap, not widen the page. */
.pg-search-refine,
.pg-search-cats,
.pg-search-results .pg-lead {
	overflow-wrap: anywhere;
}

/* A long category name wraps inside its button on a phone (.pg-btn keeps one line elsewhere). */
.pg-search-cats .pg-cluster .pg-btn {
	white-space: normal;
	text-align: start;
}

.pg-search-form {
	display: flex;
	gap: var(--pg-space-8);
	max-width: var(--pg-search-form-w);
}

.pg-search-form .pg-input {
	flex: 1 1 auto;
	min-width: 0;
}

.pg-search-form .pg-btn {
	flex: none;
}