/**
 * The suggestions panel under the header search box.
 *
 * Drawn to match the storefront it replaces: a white card the width of the
 * box, a small grey section label, then rows of cover, title and price. The
 * covers are portrait because books are, so the thumbnail is 3:4 rather than
 * the square the API's thumbnail size suggests.
 */

/* The form is the positioning context: its box is the search box's border
   box, so the panel lines up with the pill exactly, and being inside the form
   means the panel follows when the mobile header moves the form into its
   search panel. */
form.gp-header__search { position: relative; }

.gp-suggest {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 8px);
	z-index: 120;
	max-block-size: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 0 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

.gp-suggest[hidden] { display: none; }

.gp-suggest__heading {
	margin: 0;
	padding: 10px 18px 8px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.45);
}

.gp-suggest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-suggest__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px;
	text-decoration: none;
	color: inherit;
}

/* One highlight for both the pointer and the arrow keys, so the keyboard
   shows exactly what a click would open. */
.gp-suggest__item.is-active,
.gp-suggest__item:focus-visible {
	background: rgba(6, 78, 59, 0.06);
	outline: 0;
}

.gp-suggest__thumb {
	flex: 0 0 auto;
	inline-size: 48px;
	block-size: 64px;
	object-fit: cover;
	border-radius: 4px;
	background: #f4f4f4;
}

.gp-suggest__thumb--blank {
	display: block;
	border: 1px dashed rgba(0, 0, 0, 0.12);
}

.gp-suggest__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	/* So a long title ellipses instead of pushing the price out of the card. */
	min-inline-size: 0;
}

.gp-suggest__title {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-heading, #161616);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.gp-suggest__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--ink, #040404);
}

.gp-suggest__price-now { font-weight: 600; }

.gp-suggest__price-was {
	font-size: 12.5px;
	color: rgba(0, 0, 0, 0.45);
}

/* Sticky, because the list scrolls: on a phone the sixth cover pushes this
   out of the panel, and the way to the full results should not be something
   you have to scroll to find. */
.gp-suggest__all {
	position: sticky;
	inset-block-end: 0;
	display: block;
	padding: 13px 18px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.07);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--brand-green, #064e3b);
}

.gp-suggest__all:hover { background: rgba(6, 78, 59, 0.05); }

.gp-suggest__note {
	margin: 0;
	padding: 18px;
	font-size: 14px;
	text-align: center;
	color: rgba(0, 0, 0, 0.55);
}

/* Announcements for screen readers; never shown. */
.gp-suggest__live {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 780px) {
	.gp-suggest {
		inset-block-start: calc(100% + 6px);
		max-block-size: min(60vh, 420px);
	}

	.gp-suggest__item { gap: 12px; padding: 10px 14px; }
	.gp-suggest__thumb { inline-size: 42px; block-size: 56px; }
	.gp-suggest__title { font-size: 14px; }
}