.tp-search {
	--tp-search-h: 45px;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--tp-search-h);
	background: #fcfcfc;
	border: 1px solid #c8c8c8;
	border-radius: 8px;
	font: inherit;
}
.tp-search:focus-within { border-color: #0050a5; background: #fff; }
.tp-search__icon { position: absolute; left: 12px; width: 20px; height: 20px; color: #333; pointer-events: none; }
.tp-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 12px 0 40px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: #626262;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.tp-search__input::-webkit-search-cancel-button { cursor: pointer; }
.tp-search__submit {
	height: 100%;
	padding: 0 18px;
	border: 0;
	background: #0050a5;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	/* Rounded only on the outer side, inside the box (1px border kept around it). */
	margin-right: -1px;
	height: calc(100% + 2px);
	border-radius: 0 8px 8px 0;
	transition: background-color .15s;
}
.tp-search__submit:hover { background: #003f82; }
.tp-search.is-loading .tp-search__icon { animation: tp-search-pulse .8s ease-in-out infinite alternate; }
@keyframes tp-search-pulse { to { opacity: .35; } }

.tp-search__panel {
	position: absolute;
	top: calc(100% + 1px);
	left: -1px;
	right: -1px;
	z-index: 1000;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e3e3;
	box-shadow: 0 10px 20px rgba(1, 7, 39, .08);
	text-align: left;
}
.tp-search__group { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.tp-search__heading { padding: 4px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a99; }
.tp-search__heading small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tp-search__cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px; }
.tp-search__cat { padding: 4px 10px; border-radius: 999px; background: #eef5ff; color: #0050a5; font-size: 13px; text-decoration: none; }
.tp-search__cat span { color: #8a8a99; font-size: 12px; }
.tp-search__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 16px;
	color: #444;
	text-decoration: none;
}
.tp-search__item img { width: 56px; height: 56px; object-fit: contain; background: #fafafa; }
.tp-search__info { display: flex; flex-direction: column; min-width: 0; }
.tp-search__title { font-size: 14px; line-height: 1.35; color: #222; }
.tp-search__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 12px; color: #8a8a99; }
.tp-search__meta span + span { color: #0050a5; }
.tp-search__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 600; color: #0050a5; white-space: nowrap; }
.tp-search__price del { color: #8a93a6; font-size: 12px; font-weight: 400; }
.tp-search mark { background: none; color: inherit; font-weight: 700; }
.tp-search__item:hover, .tp-search__item.is-active,
.tp-search__cat:hover, .tp-search__cat.is-active { background: #f2f7fd; }
.tp-search__cat.is-active { outline: 2px solid #0050a5; }
.tp-search__all { display: block; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #0050a5; text-align: center; text-decoration: none; }
.tp-search__all:hover, .tp-search__all.is-active { background: #f2f7fd; }
.tp-search__empty { padding: 16px; font-size: 14px; color: #626262; }

@media (max-width: 767px) {
	.tp-search__submit { display: none; }
	.tp-search__item { grid-template-columns: 48px 1fr; row-gap: 0; }
	.tp-search__item img { grid-row: span 2; }
	.tp-search__item img { width: 48px; height: 48px; }
	.tp-search__price { grid-column: 2; }
}

/* Results page: related categories */
.tpb-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.tpb-cats__label { color: #7a8293; font-size: 13.5px; font-weight: 600; }
.tpb-cats__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #dfe5ee; border-radius: 999px; background: #fff; color: #13284f; font-size: 13.5px; text-decoration: none; }
.tpb-cats__chip span { color: #7a8293; font-size: 12px; }
.tpb-cats__chip:hover { border-color: #0050a5; color: #0050a5; }
/* Results page: nothing found */
.tpb-empty { padding: 28px; border-radius: 14px; background: #f6f3ef; }
.tpb-empty__title { margin: 0 0 6px; color: #13284f; font-size: 21px; font-weight: 700; }
.tpb-empty__fix { margin: 0 0 8px; font-size: 16px; }
.tpb-empty__fix a { color: #0050a5; font-weight: 700; text-decoration: underline; }
.tpb-empty__tips { margin: 0 0 18px; color: #4a5570; font-size: 15px; }
.tpb-empty__label { margin: 0 0 10px; color: #7a8293; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tpb-empty__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tpb-empty__chips a { display: inline-block; padding: 8px 15px; border: 1px solid #dfe5ee; border-radius: 999px; background: #fff; color: #13284f; font-size: 14.5px; }
.tpb-empty__chips a:hover { border-color: #0050a5; color: #0050a5; }
.tpb-empty__wa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #fff; }
.tpb-empty__wa p { margin: 0; color: #13284f; font-size: 15px; }
.tpb-empty__wa a { display: inline-flex; padding: 11px 18px; border-radius: 8px; background: #25d366; color: #fff; font-weight: 600; }
.tpb-empty__wa a:hover { background: #1ebe5b; }

/* Skeleton rows while the first suggestions load. */
@keyframes tp-search-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.tp-search__skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.tp-search__skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 37%, #eef1f5 63%); background-size: 400% 100%; animation: tp-search-shimmer 1.4s ease infinite; }
.tp-search__skel--img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; }
.tp-search__skel-lines { display: grid; flex: 1 1 auto; gap: 8px; }
.tp-search__skel--short { width: 45%; }
@media (prefers-reduced-motion: reduce) { .tp-search__skel { animation: none; } }