/**
 * NKALL Meilisearch — GRID layout (full-screen search environment).
 *
 * Proportions taken from VapeGreen's overlay, measured live 2026-08-19:
 * white ground, pill-shaped category chips (6px/12px padding, 14px text),
 * a 5-across product grid on wide screens, images at object-fit: contain.
 *
 * Every selector is .nkall-mg-* — nothing here can reach the theme.
 */

html.nkall-mg-open,
html.nkall-mg-open body {
	overflow: hidden;
}

.nkall-mg {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #171717;
	font-size: 16px;
	line-height: 1.4;
}

.nkall-mg[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ top bar */

/* The close button and the field are ONE centred group. Previously the close
   sat at the far left edge while the field was centred, so on a wide screen the
   two were ~200px apart and the X was easy to miss. */
.nkall-mg-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 1232px;
	margin: 0 auto;
	padding: 14px 16px;
	flex: 0 0 auto;
}

.nkall-mg-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #171717;
	cursor: pointer;
}

.nkall-mg-close:hover {
	background: #f3f4f6;
}

.nkall-mg-close svg {
	width: 24px;
	height: 24px;
}

/* 🔴 The icons are FLEX CHILDREN, not absolutely positioned over the input.
   The first version put the magnifier at `left: 14px` and relied on the input
   carrying `padding-left: 44px` to clear it — but Kadence's own input rules won
   on specificity, the padding never applied, and the magnifier sat on top of
   the customer's text. Laying the row out with flex removes the failure mode
   entirely: the input simply cannot slide under an icon. */
.nkall-mg-field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 1080px;
	min-height: 58px;
	padding: 0 16px;
	border: 2px solid #171717;
	border-radius: 12px;
	background: #fff;
}

.nkall-mg-field:focus-within {
	box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.14);
}

.nkall-mg-mag {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: #171717;
	pointer-events: none;
}

/* Every declaration that Kadence might otherwise win is set here, on a selector
   specific enough (.nkall-mg .nkall-mg-input) to beat a bare `input` rule. */
.nkall-mg .nkall-mg-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #111827;
	/* 18px: larger than the old 16px so the bar reads as a primary control,
	   and comfortably above the 16px floor below which iOS Safari zooms. */
	font-size: 18px;
	line-height: 1.4;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.nkall-mg .nkall-mg-input:focus {
	border: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
}

.nkall-mg-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
}

.nkall-mg-clear svg {
	width: 18px;
	height: 18px;
}

.nkall-mg-clear:hover {
	background: #e5e7eb;
	color: #111827;
}

/* ---------------------------------------------------------------- meta line */

/* One shared content column. VapeGreen's overlay measured ~1118px of content
   centred in a 1440px viewport, with the meta line, pills and grid all sharing
   the same left edge — so they all sit in this container, not just the grid. */
.nkall-mg-metarow > *,
.nkall-mg-inner {
	max-width: 1200px;
}

.nkall-mg-metarow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 1232px; /* 1200 + 2 x 16px gutter */
	margin: 0 auto;
	padding: 0 16px 12px;
	border-bottom: 1px solid #e5e7eb;
	flex: 0 0 auto;
	min-height: 20px;
}

.nkall-mg-meta {
	font-size: 14px;
	color: #6b7280;
}

.nkall-mg-timing {
	font-size: 12px;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 6px;
	padding: 3px 8px;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- scroll body */

.nkall-mg-body {
	position: relative;
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #f9fafb;
}

.nkall-mg-inner {
	margin: 0 auto;
	padding: 16px;
}

/* -------------------------------------------------------------------- pills */

.nkall-mg-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 14px;
	scrollbar-width: thin;
}

.nkall-mg-pills[hidden] {
	display: none;
}

.nkall-mg-pill {
	flex: 0 0 auto;
	padding: 6px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 9999px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.nkall-mg-pill:hover {
	border-color: #d1d5db;
	background: #f3f4f6;
}

.nkall-mg-pill.is-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

/* --------------------------------------------------------------------- grid */

.nkall-mg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
	align-items: stretch;
}

.nkall-mg-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
}

.nkall-mg-card:hover {
	border-color: #d1d5db;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.nkall-mg-media {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	background: #fff;
}

.nkall-mg-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nkall-mg-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	/* Two lines, then ellipsis — so every card in a row stays the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nkall-mg-brand {
	font-size: 13px;
	color: #9ca3af;
}

.nkall-mg-price {
	margin-top: auto;
	padding-top: 6px;
	font-size: 17px;
	font-weight: 700;
}

.nkall-mg-price del {
	opacity: 0.55;
	font-weight: 400;
	margin-right: 4px;
}

/* Mix & Match offer badge.
   The background and text colour come from CSS custom properties set inline by
   PHP from the plugin settings, so an operator can switch between a gradient
   and a solid colour without touching this file. The fallbacks below are
   ShopVapesUK's own product-card gradient, sampled from a live card
   2026-08-19 (`linear-gradient(90deg, #8860d0 28%, #5680e9 75%, #5ab9ea 99%)`),
   so search results carry the store's styling rather than a generic green. */
.nkall-mg-offer {
	margin-top: 8px;
	padding: 7px 10px;
	border-radius: 6px;
	background: var(--nkall-meili-offer-bg, linear-gradient(90deg, #8860d0 28%, #5680e9 75%, #5ab9ea 99%));
	color: var(--nkall-meili-offer-fg, #fff);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.01em;
}

.nkall-mg-oos {
	margin-top: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	background: #f3f4f6;
	color: #b32d2e;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ------------------------------------------------------------ empty / footer */

.nkall-mg-empty {
	grid-column: 1 / -1;
	margin: 48px 0;
	text-align: center;
	color: #6b7280;
	font-size: 15px;
}

/* Zero-height marker the IntersectionObserver watches. It sits after the grid,
   and its `rootMargin` is what makes the next page arrive before the customer
   reaches empty space. */
.nkall-mg-sentinel {
	height: 1px;
	margin: 0;
}

.nkall-mg-sentinel[hidden] {
	display: none;
}

.nkall-mg-footer {
	display: flex;
	justify-content: center;
	/* Bottom padding clears the floating button so the last row of cards and the
	   end-of-results line are never hidden underneath it. */
	padding: 20px 0 96px;
}

.nkall-mg-end {
	margin: 0;
	font-size: 14px;
	color: #9ca3af;
}

/* Floating "View all N results" — pinned to the bottom of the VIEWPORT, so it
   stays put however far the customer scrolls the grid.
   🔴 `fixed`, not `absolute`: absolute inside the scrolling body would scroll
   away with the content, which is exactly what this control must not do.
   It is inside .nkall-mg, so it disappears with the overlay. */
.nkall-mg-float {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 2;

	display: inline-block;
	max-width: calc(100% - 32px);
	padding: 12px 24px;
	border-radius: 9999px;
	background: #171717;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.nkall-mg-float:hover {
	background: #000;
	color: #fff;
}

.nkall-mg-float[hidden] {
	display: none;
}

.nkall-mg-viewall {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #d1d5db;
	border-radius: 9999px;
	background: #fff;
	color: #2563eb;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.nkall-mg-viewall:hover {
	background: #f3f4f6;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 640px) {
	.nkall-mg-bar {
		gap: 6px;
		padding: 10px 12px;
	}

	.nkall-mg-close {
		width: 38px;
		height: 38px;
	}

	.nkall-mg-field {
		min-height: 52px;
		padding: 0 12px;
		gap: 10px;
	}

	.nkall-mg .nkall-mg-input {
		height: 48px;
		font-size: 17px;
	}

	.nkall-mg-inner {
		padding: 12px;
	}

	.nkall-mg-float {
		bottom: 14px;
		padding: 11px 18px;
		font-size: 14px;
	}

	.nkall-mg-footer {
		padding: 16px 0 84px;
	}

	.nkall-mg-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}

	.nkall-mg-name {
		font-size: 14px;
	}

	.nkall-mg-price {
		font-size: 16px;
	}

}