/**
 * Clarkes Smart Search styles.
 * Override with CSS variables, e.g. .css-search { --css-accent: #1a66d2; }
 */
.css-search {
	--css-accent: var(--c-blue, #1a66d2);
	--css-accent-dark: var(--c-navy, #002d6d);
	--css-ink: var(--c-ink, #2a2b2a);
	--css-muted: var(--c-ink-soft, #5b5e5b);
	--css-line: var(--c-line, #dcdedc);
	--css-bg-soft: var(--c-grey, #f4f4f4);
	--css-sale: var(--c-red, #fb2323);
	--css-ok: var(--c-green, #06ba1f);
	--css-radius: 8px;
	position: relative;
	width: 100%;
	font-family: inherit;
	color: var(--css-ink);
}

.css-search__sr,
.css-search__label {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.css-search__form { position: relative; display: flex; align-items: stretch; margin: 0; }
.css-search__input {
	flex: 1; min-width: 0; width: 100%; height: 46px; margin: 0;
	padding: 0 84px 0 16px;
	border: 2px solid var(--css-accent); border-right: 0;
	border-radius: var(--css-radius) 0 0 var(--css-radius);
	background: #fff; color: var(--css-ink); font: inherit; font-size: 15px;
	-webkit-appearance: none; appearance: none; box-shadow: none;
}
.css-search__input::-webkit-search-cancel-button { display: none; }
.css-search__input:focus { outline: none; box-shadow: 0 0 0 3px rgba(26, 102, 210, 0.2); }
.css-search__submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 46px; padding: 0; margin: 0;
	border: 2px solid var(--css-accent); border-radius: 0 var(--css-radius) var(--css-radius) 0;
	background: var(--css-accent); color: #fff; cursor: pointer;
}
.css-search__submit:hover { background: var(--css-accent-dark); border-color: var(--css-accent-dark); }
.css-search__submit:focus-visible { outline: 3px solid var(--css-accent-dark); outline-offset: 2px; }

.css-search__clear {
	position: absolute; top: 50%; right: 60px; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
	background: var(--css-bg-soft); color: var(--css-muted); cursor: pointer;
}
.css-search__clear[hidden] { display: none; }
.css-search__clear:hover { background: var(--css-line); color: var(--css-ink); }

.css-search__spinner {
	position: absolute; top: 50%; right: 94px; width: 16px; height: 16px; margin-top: -8px;
	border: 2px solid var(--css-line); border-top-color: var(--css-accent); border-radius: 50%;
	opacity: 0; pointer-events: none;
}
.css-search.is-loading .css-search__spinner { opacity: 1; animation: css-spin 0.7s linear infinite; }
@keyframes css-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .css-search.is-loading .css-search__spinner { animation: none; } }

/* Panel ----------------------------------------------------------------- */
.css-search__panel {
	position: absolute; z-index: 1000; top: calc(100% + 6px); left: 0; right: 0;
	max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border: 1px solid var(--css-line); border-radius: var(--css-radius);
	box-shadow: 0 14px 40px rgba(0, 20, 60, 0.2);
}
.css-search__panel[hidden] { display: none; }

.css-search__heading {
	padding: 10px 16px 6px; background: var(--css-bg-soft);
	font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--css-muted);
}
.css-search__note, .css-search__empty { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--css-muted); }
.css-search__note { background: #fff8e5; color: #7a5a00; }

.css-search__panel [role="option"] { text-decoration: none; color: inherit; cursor: pointer; }
.css-search__panel [role="option"].is-active { background: #eaf2ff; box-shadow: inset 3px 0 0 var(--css-accent); }

.css-search__term { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; }
.css-search__term-img { border-radius: 4px; object-fit: cover; }
.css-search__term-name { font-weight: 700; color: var(--css-accent-dark); }
.css-search__term-parent { color: var(--css-muted); font-size: 12.5px; }
.css-search__term-count { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--css-bg-soft); color: var(--css-muted); font-size: 12px; }

.css-search__product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--css-bg-soft); }
.css-search__thumb img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--css-bg-soft); }
.css-search__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.css-search__brand { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--css-muted); }
.css-search__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--css-accent-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.css-search__mark { background: #fff0a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.css-search__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--css-muted); }
.css-search__stock.is-in { color: #0a7a1a; }
.css-search__stock.is-out { color: var(--css-sale); }
.css-search__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.css-search__badge { padding: 1px 7px; border-radius: 3px; background: var(--css-sale); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.css-search__price { font-size: 15px; font-weight: 800; color: var(--css-accent-dark); white-space: nowrap; }
.css-search__price del { display: block; font-size: 12px; font-weight: 500; color: var(--css-muted); }
.css-search__price ins { text-decoration: none; color: var(--css-sale); }

.css-search__all { display: block; padding: 14px 16px; border-top: 1px solid var(--css-line); background: var(--css-bg-soft); text-align: center; font-size: 14px; color: var(--css-accent); font-weight: 600; }
.css-search__all:hover, .css-search__all.is-active { background: var(--css-accent); color: #fff; }

@media (max-width: 600px) {
	.css-search__panel { max-height: 60vh; }
	.css-search__product { grid-template-columns: 48px minmax(0, 1fr); }
	.css-search__thumb img { width: 48px; height: 48px; }
	.css-search__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
}