/* ── Full-screen search ──────────────────────────────────────────────────────
   Woodmart owns the panel shell (opening, closing, the form). Everything below
   styles the content injected into it from inc/search.php: the resting state
   (Top Categories beside a Most Wanted grid) and the live results that replace
   it while typing.

   The two states are swapped with classes on the panel rather than by emptying
   the DOM — going back to an empty field then costs no re-render, and the
   default grid keeps its images warm. */

/* The panel is position:fixed at viewport height with overflow:visible, so a
   grid taller than the screen simply spills off it — and Load More makes that
   the normal case. The body becomes the scrolling region instead of the panel:
   the close button and the search field stay put while results scroll under
   them. min-height:0 is what actually allows it — without it a flex child
   refuses to shrink below its content and never overflows. */
.wd-search-full-screen .sp-search__body {
	display: flex;
	/* flex-start, not the default stretch: the body has a definite height (it is
	   the scroller), so stretched columns get that height and the product grid
	   spills out of its own column — which is why the column's bottom padding
	   did nothing. Sized to content, the column ends below the last row and its
	   padding becomes real scrollable space. */
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 0 20px;
	text-align: left;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Categories stay in view while the products beside them scroll. */
@media (min-width: 1025px) {
	.wd-search-full-screen .sp-search__sidebar {
		position: sticky;
		top: 0;
		align-self: flex-start;
	}
}

.wd-search-full-screen .sp-search__sidebar {
	flex: 0 0 190px;
}

/* Bottom breathing room lives on the content column, not on the scroller.
   A flex scroll container's own padding-bottom is dropped from the scrollable
   area, so the last row of cards ended flush against the panel edge — measured
   at exactly 0px of clearance. Padding here is part of the content, so it is
   always scrolled to. */
.wd-search-full-screen .sp-search__main {
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 40px;
}

.wd-search-full-screen .sp-search__side-title,
.wd-search-full-screen .sp-search__main-title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #242424;
}

.wd-search-full-screen .sp-search__cats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-search-full-screen .sp-search__cats li {
	margin: 0 0 9px;
}

.wd-search-full-screen .sp-search__cats a {
	font-size: 14px;
	line-height: 1.35;
	color: #686868;
	text-decoration: none;
	transition: color 0.15s ease;
}

.wd-search-full-screen .sp-search__cats a:hover {
	color: #242424;
}

/* Four across on desktop, matching the shop grid's density. The cards are the
   catalogue's own, so they bring their own internals. */
.wd-search-full-screen .sp-search__grid,
.wd-search-full-screen .sp-search__results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.wd-search-full-screen .sp-search__results:empty {
	display: none;
}

/* ── state swap ──────────────────────────────────────────────────────────── */

/* Typing hides the resting block; results take its place. */
.wd-search-full-screen.sp-searching .sp-search__default {
	display: none;
}

.wd-search-full-screen:not(.sp-has-results) .sp-search__foot {
	display: none;
}

.wd-search-full-screen .sp-search__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

.wd-search-full-screen .sp-search__more {
	height: 40px;
	padding: 0 26px;
	border: 1px solid #242424;
	border-radius: 4px;
	background: #fff;
	color: #242424;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.wd-search-full-screen .sp-search__more:hover:not(:disabled) {
	background: #242424;
	color: #fff;
}

.wd-search-full-screen .sp-search__more:disabled {
	opacity: 0.6;
	cursor: default;
}

.wd-search-full-screen .sp-search__count {
	font-size: 12px;
	color: #686868;
}

.wd-search-full-screen .sp-search__viewall {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #242424;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wd-search-full-screen .sp-search__empty {
	margin: 10px 0 0;
	font-size: 14px;
	color: #686868;
}

/* ── narrower screens ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.wd-search-full-screen .sp-search__body {
		flex-direction: column;
		gap: 24px;
		margin-top: 22px;
	}

	.wd-search-full-screen .sp-search__sidebar {
		flex: 0 0 auto;
	}

	/* Horizontal chips: a vertical list of categories would push the products
	   off-screen on a phone. */
	.wd-search-full-screen .sp-search__cats {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wd-search-full-screen .sp-search__cats li {
		margin: 0;
	}

	.wd-search-full-screen .sp-search__cats a {
		display: block;
		padding: 7px 12px;
		border: 1px solid rgba(36, 36, 36, 0.16);
		border-radius: 4px;
		font-size: 12px;
	}

	.wd-search-full-screen .sp-search__main {
		padding-bottom: 28px;
	}

	.wd-search-full-screen .sp-search__grid,
	.wd-search-full-screen .sp-search__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}