/*
 * Algolia dropdown: lay the theme's product cards out in a grid.
 *
 * parts/product-block.php wraps each card in Bootstrap columns
 * (.col-md-6.col-lg-4.item), sized for a .row. In the dropdown the grid below
 * owns the sizing instead, so the column widths are neutralised here.
 *
 * The card look itself comes from the theme: the grid element also carries
 * .cards-container.grid-view, which is what the theme's .product-card rules
 * are scoped to. Selectors here are prefixed with .innbak-algolia-results so
 * they outrank that class's own layout rules.
 */
/*
 * Positioning and show/hide are ours. They used to come from SearchWP Live
 * Ajax Search's stylesheet and the base styles it printed in wp_footer; with
 * that plugin deactivated the box fell back to position: static and rendered
 * at the bottom of the page, out of sight.
 */
.innbak-algolia-results {
	position: absolute;
	display: none;
	overflow-y: auto;
	max-height: calc(100dvh - 166px);
	background: #fff;
	z-index: 1000;
	box-sizing: border-box;
}
.innbak-algolia-results.searchwp-live-search-results-showing {
	display: block;
	border: 0.1rem solid #efefef;
	margin-top: -5px;
}
.innbak-algolia-results .results_info {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 1.5rem;
}
.innbak-algolia-results.is-loading .innbak-algolia-cards {
	opacity: .55;
	transition: opacity .15s;
}
.innbak-algolia-results .innbak-algolia-cards {
	display: grid;
	/*
	 * As many columns as fit at 330px each — never narrower. The theme sizes
	 * the quantity spinner and "+ bæta í körfu" at half the card each; below
	 * ~330px the button text wraps and the footer grows from 55px to 78px
	 * (listing cards are ~350px). A fixed four columns hit that on
	 * laptop-width windows.
	 */
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 1.5rem;
	padding: 0 1.5rem 1.5rem;
}
@media (max-width: 400px) {
	.innbak-algolia-results .innbak-algolia-cards { grid-template-columns: 1fr; }
}
.innbak-algolia-results .innbak-algolia-cards > .item {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
}
.innbak-algolia-results .innbak-algolia-cards .product-card {
	height: 100%;
}
.innbak-algolia-all {
	padding: 0 1.5rem 1.5rem;
	text-align: center;
}
.innbak-algolia-empty {
	padding: 0 1.5rem 1.5rem;
}