/*
 * search.css — sökpanelen på desktop och förslagen under fältet.
 *
 * Laddas på varje sidvisning, av samma skäl som cart.css: sökikonen står
 * i sidhuvudet på varje sida, alltså kan panelen fällas ut från varje
 * sida. Hämtades stilarna först vid klick hade panelen slagit upp ostylad.
 *
 * Här ligger bara det som syns efter en interaktion. Fältet i menylådan
 * stylas av nav-mobile.css och ikonen i sidhuvudet av base.css, så inget
 * som ritas vid första paint väntar på den här filen.
 *
 * Lagren är deklarerade i base.css, som alltid laddas före den här.
 */

@layer components {
	/* ---------------------------------------------------------------- */
	/* Panelen under sidhuvudet — desktop                                */
	/* ---------------------------------------------------------------- */

	/*
	 * Under brytpunkten finns ingen panel: fältet står överst i menylådan
	 * och ikonen i sidhuvudet är dold (base.css).
	 */
	@media (max-width: 767px) {
		.search-panel {
			display: none;
		}
	}

	/*
	 * Kant i kant som megapanelen, och med samma skugga — det är samma
	 * sorts yta som fälls ut ur samma rad, och två olika utföranden hade
	 * lästs som två olika menyer.
	 */
	.search-panel {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: 25;
		background: var(--color-paper);
		border-block-start: 1px solid var(--color-line);
		box-shadow: 0 3px 3px rgb(0 0 0 / 0.06);
		animation: search-panel-in 0.15s ease;
	}

	@keyframes search-panel-in {
		from {
			opacity: 0;
			translate: 0 calc(var(--space-3xs) * -1);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.search-panel {
			animation-duration: 0.01ms;
		}
	}

	.search-panel__inner {
		padding-block: var(--space-m);
	}

	/*
	 * Fältet i panelen är en pill, inte en rad med hårstreck under: i
	 * lådan avdelar linjen sökrutan från menyraderna, här står fältet
	 * ensamt på en tom yta och behöver en egen form för att läsas som
	 * något man kan skriva i.
	 */
	.search-panel .nav-search {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: 3px 3px 3px var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		transition: border-color 0.15s, background 0.15s;
	}

	.search-panel .nav-search:focus-within {
		border-color: var(--color-accent);
		background: var(--color-paper);
	}

	/*
	 * Fokusringen flyttas från fältet till pillen omkring det. Samma ring
	 * som resten av sajten (base.css), men ritad runt formen man faktiskt
	 * ser — en rektangel inuti en pill läser sig som ett fel.
	 *
	 * `:has(:focus-visible)` och inte `:focus-within`: ringen ska komma på
	 * tangentbord, inte på musklick, precis som överallt annars.
	 */
	.search-panel .nav-search:has(.nav-search__input:focus-visible) {
		outline: 2px solid var(--color-ink);
		outline-offset: 2px;
	}

	.search-panel .nav-search__input:focus-visible {
		outline: none;
	}

	.search-panel .nav-search__input {
		flex: 1;
		min-width: 0;
		padding-block: var(--space-2xs);
		border: 0;
		background: none;
		font: inherit;
		color: var(--color-ink);
	}

	/*
	 * Webkits egen kryssknapp tas bort. Den ritas ovanpå vår
	 * sökknapp och ger två träffytor bredvid varandra som gör olika
	 * saker — Escape och en markering tömmer fältet lika bra.
	 */
	.nav-search__input::-webkit-search-cancel-button {
		appearance: none;
	}

	.nav-search__input::placeholder {
		color: var(--color-ink-muted);
	}

	.search-panel .nav-search__submit {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: var(--color-button-text);
		transition: background 0.15s;
	}

	.search-panel .nav-search__submit:hover {
		background: var(--color-accent-ink);
	}

	.search-panel .nav-search__submit svg {
		width: 20px;
		height: 20px;
	}

	/* ---------------------------------------------------------------- */
	/* Förslagen — samma lista i lådan och i panelen                     */
	/* ---------------------------------------------------------------- */

	/*
	 * Länkarna i listan skrivs `.search-suggest .search-suggest__…`, inte
	 * bara med sin egen klass. Skälet är `.site-nav a` i base.css: den
	 * sätter `display: block` och en hoverfärg på varje länk i menyn, och
	 * med två delar i selektorn vinner den över en ensam klass. I lådan
	 * ligger förslagen inuti menyn, så utan omslaget hade träffarna ritats
	 * som menyrader där — och som kort på desktop. Samma lista ska se
	 * likadan ut på båda platserna.
	 */
	.search-suggest {
		padding-block-start: var(--space-s);
	}

	/* I lådan följer listan sökrutans egen indragning. */
	.site-nav .search-suggest {
		padding: var(--space-2xs) var(--space-s) var(--space-s);
		border-block-end: 1px solid var(--color-line);
	}

	.search-suggest__group + .search-suggest__group {
		margin-block-start: var(--space-s);
	}

	.search-suggest__label {
		margin: 0 0 var(--space-2xs);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		/* Under ~14 px räcker inte accentfärgens kontrast — se base.css. */
		color: var(--color-ink-muted);
	}

	/*
	 * Varumärken och kategorier är brickor, inte rader: en träff på ett
	 * varumärke är en hel hylla och ska gå att se på en blick, medan
	 * produkterna under är enskilda saker man jämför.
	 */
	.search-suggest__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.search-suggest .search-suggest__chip {
		display: inline-flex;
		padding: 6px 12px;
		border-radius: var(--radius-pill);
		background: var(--color-surface-blush);
		color: var(--color-ink);
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
	}

	.search-suggest .search-suggest__chip:hover,
	.search-suggest .search-suggest__chip:focus-visible {
		background: var(--color-accent);
		color: var(--color-button-text);
	}

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

	.search-suggest .search-suggest__link {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: var(--space-2xs);
		align-items: center;
		padding: var(--space-3xs);
		border-radius: var(--radius-card);
		color: var(--color-ink);
		text-decoration: none;
	}

	.search-suggest__text {
		min-width: 0;
	}

	.search-suggest .search-suggest__link:hover,
	.search-suggest .search-suggest__link:focus-visible {
		background: var(--color-surface);
		color: var(--color-ink);
	}

	.search-suggest__img {
		width: 48px;
		height: 48px;
		border-radius: 8px;
		background: var(--color-surface);
		object-fit: cover;
	}

	.search-suggest__title {
		display: block;
		font-size: 0.875rem;
		line-height: 1.35;
	}

	.search-suggest__price {
		display: block;
		margin-block-start: 2px;
		color: var(--color-accent-ink);
		font-size: 0.8125rem;
		font-weight: 700;
	}

	.search-suggest__empty {
		margin: 0;
		color: var(--color-body);
		font-size: 0.875rem;
	}

	.search-suggest .search-suggest__all {
		display: inline-block;
		margin-block-start: var(--space-s);
		color: var(--color-accent-ink);
		font-size: 0.875rem;
		font-weight: 600;
	}

	/*
	 * I panelen ligger produkterna i två spalter. Panelen är 1200 px bred
	 * och en enspaltslista där hade varit sex rader text i ett band av
	 * tomrum.
	 */
	@media (min-width: 768px) {
		.search-panel .search-suggest__list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-3xs) var(--space-m);
		}
	}

	/* ---------------------------------------------------------------- */
	/* Sökresultatsidan                                                  */
	/* ---------------------------------------------------------------- */

	/*
	 * Träffade varumärken och kategorier ovanför griden. Samma brickor som
	 * i förslagen — samma sorts genväg ska se likadan ut oavsett var den
	 * dyker upp.
	 */
	.search-matches {
		margin-block: var(--space-s) var(--space-m);
	}

	.search-matches__label {
		margin: 0 0 var(--space-2xs);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.search-matches__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs);
		margin: 0 0 var(--space-s);
		padding: 0;
		list-style: none;
	}

	.search-matches__link {
		display: inline-flex;
		padding: 8px 14px;
		border-radius: var(--radius-pill);
		background: var(--color-surface-blush);
		color: var(--color-ink);
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
	}

	.search-matches__link:hover,
	.search-matches__link:focus-visible {
		background: var(--color-accent);
		color: var(--color-button-text);
	}
}