/*
 * StoreBolt – search dropdown ("Showroom" design).
 *
 * Every rule is scoped to the dropdown panel on the storefront
 * (`.maswcas-search__results--split`) or to the template part's root block
 * in the Site Editor canvas (`.maswcas-search__dropdown--split`), so nothing
 * here reaches the rest of the page.
 *
 * In attach mode StoreBolt injects its own stylesheet after this one, so the
 * scope is written at (0,2,0) to out-rank the plugin's (0,1,0) scope without
 * depending on load order. The plugin's dark palette is left untouched.
 */

.maswcas-search__results.maswcas-search__results--split,
.editor-styles-wrapper .maswcas-search__dropdown--split {

	/* Palette */
	&:not([data-maswcas-scheme="dark"]) {
		--maswcas-surface: #fff;
		--maswcas-ink: #111;
		--maswcas-ink-muted: #737373;
		--maswcas-hover: #f7f7f9;
		--maswcas-hover-soft: #f7f7f9;
		--maswcas-sunken: #f2f1ee;
		--maswcas-line: #ececef;
		--maswcas-pill-edge: #e3e3e6;
		--maswcas-chip-edge: #d9d9dd;
		--maswcas-invert-fill: #111;
		--maswcas-invert-ink: #fff;
		--maswcas-warn: #b45309;
		--maswcas-rail: #f7f7f9;
		--maswcas-accent: var(--wp--preset--color--primary, #0047c5);
		--maswcas-accent-ink: #fff;
		--maswcas-accent-soft: #eef2fd;
		--maswcas-mark-fill: #ffe500;
		--maswcas-mark-ink: #111;
		--maswcas-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.12);
	}

	border-radius: 16px;

	/* Room between the search box and the panel, so the panel's shadow
	   doesn't run into the box. StoreBolt's positioner reads this. */
	--maswcas-gap: 10px;

	/* A 300px rail with a hairline on its inline-end edge. */
	@media (min-width: 720px) {
		grid-template-columns: 300px minmax(0, 1fr);
		background-image: linear-gradient(to right, var(--maswcas-rail) 0 299px, var(--maswcas-line) 299px 300px, transparent 300px);

		&:dir(rtl) {
			background-image: linear-gradient(to left, var(--maswcas-rail) 0 299px, var(--maswcas-line) 299px 300px, transparent 300px);
		}
	}

	/* Section eyebrows */
	& .maswcas-search__terms-title,
	& .maswcas-search__history-title,
	& .maswcas-search__trending-title {
		color: var(--maswcas-ink-muted);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		opacity: 1;
	}

	& .maswcas-search__terms-head,
	& .maswcas-search__history-head,
	& .maswcas-search__trending-head {
		padding: 20px 28px 8px;
	}

	& .maswcas-search__history-clear {
		font-size: 12px !important;
		font-weight: 600 !important;
	}

	/* A completion row's term shares the trending term's class. */
	& .maswcas-search__completion-item .maswcas-search__trending-term {
		padding-block: 9px;
		font-size: 15px;
	}

	/* Trending pills */
	& .maswcas-search__trending--pills ul.maswcas-search__trending-list {
		gap: 8px;
		padding: 2px 28px 6px !important;
	}

	& .maswcas-search__trending--pills .maswcas-search__trending-item {
		border-color: var(--maswcas-pill-edge);
		border-radius: 999px;
		background: var(--maswcas-surface);
		box-shadow: none;

		&:hover,
		&:focus-within {
			border-color: var(--maswcas-accent);
			background: var(--maswcas-surface);
			box-shadow: none;
		}

		&:has(.maswcas-search__option--active) {
			border-color: var(--maswcas-accent);
			background: var(--maswcas-accent-soft);
			box-shadow: none;
		}
	}

	& .maswcas-search__trending--pills .maswcas-search__trending-term {
		padding: 8px 12px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
	}

	& .maswcas-search__trending--pills .maswcas-search__trending-icon + .maswcas-search__trending-term {
		padding-inline-start: 8px;
	}

	& .maswcas-search__trending--pills .maswcas-search__trending-icon {
		flex-basis: 13px;
		width: 13px;
		height: 13px;
		color: var(--maswcas-accent);
		opacity: 1;
	}

	/* Rail rows: recent searches, completions, categories and brands */
	& ul.maswcas-search__completion-list,
	& ul.maswcas-search__history-list,
	& ul.maswcas-search__terms-list,
	& .maswcas-search__trending:not(.maswcas-search__trending--pills) ul.maswcas-search__trending-list {
		padding: 0 16px 2px !important;
	}

	& li.maswcas-search__completion-item,
	& li.maswcas-search__history-item,
	& .maswcas-search__trending:not(.maswcas-search__trending--pills) li.maswcas-search__trending-item {
		gap: 8px;
		padding-inline-start: 12px !important;
	}

	& .maswcas-search__history-term,
	& .maswcas-search__trending:not(.maswcas-search__trending--pills) .maswcas-search__trending-term {
		padding-block: 9px;
		font-size: 15px;
	}

	& .maswcas-search__history-icon,
	& .maswcas-search__completion-icon,
	& .maswcas-search__trending:not(.maswcas-search__trending--pills) .maswcas-search__trending-icon,
	& .maswcas-search__term-icon {
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		padding: 0;
		color: var(--maswcas-ink-muted);
		opacity: 1;
	}

	& .maswcas-search__history-remove {
		color: #c4c4c8 !important;
		opacity: 1 !important;

		&:hover,
		&:focus {
			color: var(--maswcas-ink-muted) !important;
		}
	}

	& .maswcas-search__completion-item:hover,
	& .maswcas-search__history-item:hover,
	& .maswcas-search__term-item:hover,
	& .maswcas-search__term-item:focus-within {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	& .maswcas-search__completion-item:has(.maswcas-search__option--active),
	& .maswcas-search__history-item:has(.maswcas-search__option--active) {
		background: var(--maswcas-surface);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	& .maswcas-search__history-term.maswcas-search__option--active,
	& .maswcas-search__completion-item .maswcas-search__option--active {
		background-color: transparent;
	}

	& .maswcas-search__term-suggestion {
		gap: 12px;
		padding: 9px 12px;
		font-size: 15px;
		line-height: 1.25;
	}

	& .maswcas-search__term-icon {
		margin-top: 0.1em;
	}

	& .maswcas-search__term-name {
		font-weight: 700;
	}

	& .maswcas-search__term-crumb,
	& .maswcas-search__term-count {
		color: var(--maswcas-ink-muted);
		font-size: 12px;
		opacity: 1;
	}

	/* A brand reads on one line: "Kestrel · 12 products". */
	& .maswcas-search__brands .maswcas-search__term-name {
		display: inline;
		font-weight: 400;
	}

	& .maswcas-search__brands .maswcas-search__term-name + .maswcas-search__term-count {
		font-size: 15px;

		&::before {
			content: "· ";
		}
	}

	/* Refinement chips */
	& .maswcas-search__facets {
		padding: 20px 28px 4px;
	}

	& .maswcas-search__facet {
		border-color: var(--maswcas-pill-edge);
		background: var(--maswcas-surface);
		font-size: 14px;
		font-weight: 600;

		&:hover {
			border-color: var(--maswcas-accent);
			background: var(--maswcas-surface);
		}
	}

	& .maswcas-search__facet--active,
	& .maswcas-search__facet--active:hover {
		border-color: var(--maswcas-invert-fill);
		background: var(--maswcas-invert-fill);
	}

	/* Popular products (before typing) */
	& .maswcas-search__popular {
		padding: 20px 20px 12px;
	}

	& .maswcas-search__popular > .maswcas-search__terms-head {
		align-items: baseline;
		padding: 0 10px 6px;
	}

	& .maswcas-search__popular-all {
		gap: 6px;
		font-size: 13px;
		font-weight: 700;
	}

	& ul.maswcas-search__popular-list {
		gap: 4px;
		padding: 0 !important;
	}

	& .maswcas-search__popular-link {
		padding: 10px;

		&:hover,
		&:focus {
			background: var(--maswcas-hover-soft);
		}
	}

	& .maswcas-search__popular-media {
		border-radius: 10px;
	}

	& .maswcas-search__popular-badge {
		padding: 2px 7px;
		font-size: 11px;
	}

	& .maswcas-search__popular-title {
		display: -webkit-box;
		min-height: 2.6em;
		overflow: hidden;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	& .maswcas-search__popular-price {
		margin-top: 2px;
		font-size: 14px;
		font-weight: 700;

		& del {
			color: #a3a3a3;
			font-size: 12px;
			opacity: 1;
		}
	}

	/* Products column */
	& .maswcas-search__products {
		padding: 20px 20px 12px;
	}

	& .maswcas-search__products > .maswcas-search__terms-head {
		align-items: baseline;
		padding: 0 12px 8px;
	}

	& .maswcas-search__products-count {
		color: var(--maswcas-ink-muted);
		font-size: 13px;
		font-weight: 600;
		opacity: 1;
	}

	& .maswcas-search__products ul.maswcas-search__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 0 !important;
	}

	& .maswcas-search__link {
		padding: 10px 12px;
		border-radius: 12px;

		&:hover,
		&:focus {
			background: var(--maswcas-hover-soft);
		}

		&.maswcas-search__option--active {
			background: var(--maswcas-accent-soft);
			box-shadow: inset 0 0 0 1.5px var(--maswcas-accent);
		}
	}

	& .maswcas-search__thumb img {
		border-radius: 10px;
		background: var(--maswcas-sunken);
	}

	& .maswcas-search__body {
		min-width: 0;
	}

	& .maswcas-search__title {
		margin-bottom: 3px;
		overflow: hidden;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	& .maswcas-search__title .maswcas-search__mark {
		border-radius: 4px;
	}

	& .maswcas-search__sku,
	& .maswcas-search__attributes,
	& .maswcas-search__stock,
	& .maswcas-search__rating {
		color: var(--maswcas-ink-muted);
		font-size: 13px;
		opacity: 1;
	}

	& .maswcas-search__stock--out-of-stock {
		color: var(--maswcas-danger);
		font-weight: 600;
	}

	& .maswcas-search__stock--available-on-backorder {
		color: var(--maswcas-warn);
		font-weight: 600;
	}

	& .maswcas-search__link > .maswcas-search__price {
		gap: 2px;
		font-size: 15px;
		font-weight: 700;

		& del {
			color: #a3a3a3;
			font-size: 12px;
			opacity: 1;
		}
	}

	& .maswcas-search__empty {
		font-size: 15px;
	}

	/* Footers: the tip line before typing, the see-all row while searching */
	& .maswcas-search__tip {
		padding: 12px 20px;
		font-size: 13px;
	}

	& .maswcas-search__all {
		padding: 12px 20px;
	}

	& .maswcas-search__all-label {
		font-size: 14px;
		font-weight: 700;
	}

	& .maswcas-search__all-keys {
		gap: 6px;
		font-size: 12px;
	}

	& .maswcas-search__all-key + .maswcas-search__all-key {
		margin-inline-start: 8px;
	}

	& .maswcas-search__all-cap {
		border-color: var(--maswcas-chip-edge);
		font-size: 11px;
		font-weight: 600;
	}

	& .maswcas-search__all-brand {
		font-size: 12px;
		font-weight: 600;
	}

	& .maswcas-search__all-bolt {
		color: #fab219;
	}
}