/* TND Search Bar v2 — Tamil Nadu Digital */
.tnd-sb {
	--tnd-sb-accent: #0f5132;
	--tnd-sb-hl: #fff4d6;
	--tnd-sb-bg: #fff;
	--tnd-sb-radius: 10px;
	--tnd-sb-h: 46px;
	--tnd-sb-border: #e3e5e8;
	--tnd-sb-text: #1d2327;
	--tnd-sb-muted: #6b7280;
	position: relative;
	width: 100%;
	font-size: 14px;
	line-height: 1.35;
	color: var(--tnd-sb-text);
	box-sizing: border-box;
}
.tnd-sb *, .tnd-sb *::before, .tnd-sb *::after { box-sizing: border-box; }

/* Form */
.tnd-sb__form {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--tnd-sb-h);
	background: var(--tnd-sb-bg);
	border: 1.5px solid var(--tnd-sb-border);
	border-radius: var(--tnd-sb-radius);
	transition: border-color .15s, box-shadow .15s;
	margin: 0;
}
.tnd-sb.is-open .tnd-sb__form,
.tnd-sb__form:focus-within {
	border-color: var(--tnd-sb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tnd-sb-accent) 15%, transparent);
}
.tnd-sb__input {
	flex: 1;
	min-width: 0;
	height: 100% !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 14px !important;
	font-size: 15px !important;
	color: inherit !important;
	margin: 0 !important;
}
.tnd-sb__input::-webkit-search-cancel-button { display: none; }
.tnd-sb__submit,
.tnd-sb__clear,
.tnd-sb__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	color: inherit;
	box-shadow: none;
}
.tnd-sb__submit {
	height: calc(100% - 8px);
	aspect-ratio: 1;
	margin-right: 4px;
	border-radius: calc(var(--tnd-sb-radius) - 3px);
	background: var(--tnd-sb-accent);
	color: #fff;
}
.tnd-sb__submit:hover { filter: brightness(1.1); background: var(--tnd-sb-accent); }
.tnd-sb__clear {
	width: 28px;
	font-size: 22px;
	color: var(--tnd-sb-muted);
	visibility: hidden;
}
.tnd-sb.has-value .tnd-sb__clear { visibility: visible; }
.tnd-sb__spinner {
	width: 16px; height: 16px;
	border: 2px solid var(--tnd-sb-border);
	border-top-color: var(--tnd-sb-accent);
	border-radius: 50%;
	animation: tnd-sb-spin .7s linear infinite;
	display: none;
	margin-right: 4px;
}
.tnd-sb.is-loading .tnd-sb__spinner { display: block; }
.tnd-sb.is-loading .tnd-sb__clear { display: none; }
@keyframes tnd-sb-spin { to { transform: rotate(360deg); } }
.tnd-sb__toggle { display: none; width: 40px; height: 40px; }

/* Dropdown */
.tnd-sb__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 320px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--tnd-sb-border);
	border-radius: 12px;
	box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .25);
	z-index: 99999;
	padding: 6px;
}
.tnd-sb__dropdown[hidden] { display: none; }
.tnd-sb__dropdown a { text-decoration: none !important; color: inherit; }
.tnd-sb__dropdown mark { background: none; color: var(--tnd-sb-accent); font-weight: 700; padding: 0; }
.tnd-sb__item + .tnd-sb__item { border-top: 1px solid #f0f1f3; margin-top: 4px; padding-top: 4px; }

.tnd-sb__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
}
.tnd-sb__product img {
	width: 56px; height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: #f7f7f8;
	flex: none;
}
.tnd-sb__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tnd-sb__name { font-weight: 600; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tnd-sb__meta, .tnd-sb__sku { font-size: 12px; color: var(--tnd-sb-muted); }
.tnd-sb__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tnd-sb__price { font-weight: 700; color: var(--tnd-sb-accent); font-size: 13px; white-space: nowrap; }
.tnd-sb__price del { color: var(--tnd-sb-muted); font-weight: 400; margin-right: 4px; font-size: 12px; }
.tnd-sb__price ins { text-decoration: none; background: none; }
.tnd-sb__price .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.tnd-sb__stock { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.tnd-sb__stock.is-in { background: #e7f6ec; color: #137333; }
.tnd-sb__stock.is-out { background: #fdecea; color: #b42318; }
.tnd-sb__badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--tnd-sb-accent);
	color: #fff;
	white-space: nowrap;
	vertical-align: middle;
}

/* Variation rows (SKU match) */
.tnd-sb__vars {
	margin: 0 8px 6px 76px;
	border-left: 2px solid #eef0f2;
	padding-left: 8px;
}
.tnd-sb__vars-head {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tnd-sb-muted);
	font-weight: 600;
	padding: 2px 6px 4px;
}
.tnd-sb__var {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 8px;
	border: 1px solid transparent;
}
.tnd-sb__var + .tnd-sb__var { margin-top: 2px; }
.tnd-sb__var img { width: 40px; height: 40px; object-fit: contain; border-radius: 5px; background: #f7f7f8; flex: none; }
.tnd-sb__var-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tnd-sb__var-label { font-weight: 600; font-size: 13px; }
.tnd-sb__var-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tnd-sb__var.is-match {
	background: var(--tnd-sb-hl);
	border-color: color-mix(in srgb, var(--tnd-sb-accent) 35%, transparent);
}
.tnd-sb__var-more { display: block; font-size: 12px; padding: 6px; color: var(--tnd-sb-accent) !important; font-weight: 600; }

/* Variation chips (title match) */
.tnd-sb__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 8px 8px 76px; }
.tnd-sb__chips-label { font-size: 11px; color: var(--tnd-sb-muted); }
.tnd-sb__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	padding: 3px 9px 3px 4px;
	border: 1px solid var(--tnd-sb-border);
	border-radius: 20px;
	background: #fff;
}
.tnd-sb__chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.tnd-sb__chip.is-out { opacity: .55; text-decoration: line-through !important; }
.tnd-sb__chip.is-more { padding: 3px 9px; color: var(--tnd-sb-muted); }
.tnd-sb__chip:hover { border-color: var(--tnd-sb-accent); }

/* Hover / keyboard */
.tnd-sb__product:hover, .tnd-sb__var:hover,
.tnd-sb__link.is-active { background: #f4f6f8; }
.tnd-sb__var.is-match:hover, .tnd-sb__var.is-match.is-active { background: var(--tnd-sb-hl); filter: brightness(.98); }
.tnd-sb__link.is-active { outline: 2px solid var(--tnd-sb-accent); outline-offset: -2px; }

.tnd-sb__all {
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	border-top: 1px solid #f0f1f3;
	font-weight: 600;
	color: var(--tnd-sb-accent) !important;
}
.tnd-sb__empty { padding: 18px; text-align: center; color: var(--tnd-sb-muted); }

/* Mobile */
@media (max-width: 767px) {
	.tnd-sb__dropdown { min-width: 0; position: fixed; left: 12px; right: 12px; top: auto; max-height: 70vh; }
	.tnd-sb__vars { margin-left: 8px; }
	.tnd-sb__chips { padding-left: 8px; }
	.tnd-sb--mobile-icon { width: auto; display: inline-block; }
	.tnd-sb--mobile-icon .tnd-sb__toggle { display: inline-flex; }
	.tnd-sb--mobile-icon .tnd-sb__form { display: none; }
	.tnd-sb--mobile-icon.is-expanded {
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 99999;
		background: #fff;
		padding: 10px 12px;
		box-shadow: 0 4px 16px rgba(0,0,0,.12);
		display: block;
		width: 100%;
	}
	.tnd-sb--mobile-icon.is-expanded .tnd-sb__toggle { display: none; }
	.tnd-sb--mobile-icon.is-expanded .tnd-sb__form { display: flex; }
	.tnd-sb--mobile-icon.is-expanded .tnd-sb__dropdown { top: calc(var(--tnd-sb-h) + 26px); }
}