/* ══ Mega-search (full-header search overlay) ══ */
html.trc-ms-lock, html.trc-ms-lock body { overflow: hidden !important; }

.trc-ms {
	position: fixed; top: 0; left: 0; right: 0; z-index: var(--trc-z-search, 100070); /* top layer — see trc-sheet.css scale */
	background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.10);
	transform: translateY(-100%);
	transition: transform .5s cubic-bezier(.22,1,.36,1);
	max-height: 100vh; display: flex; flex-direction: column;
	visibility: hidden;
}
.trc-ms.is-open { transform: translateY(0); visibility: visible; }

.trc-ms__backdrop {
	position: fixed; inset: 0; z-index: var(--trc-z-search-scrim, 100060); background: rgba(17,19,21,.38);
	opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.trc-ms__backdrop.is-open { opacity: 1; visibility: visible; }

/* Top bar (dark, mirrors the site header — keeps the white logo visible) */
.trc-ms__bar { display: flex; align-items: center; gap: 18px; padding: 0 32px; height: 92px; background: #0a0a0a; flex: 0 0 auto; }
.trc-ms__logo { flex: 0 0 auto; flex-shrink: 0; display: flex; align-items: center; }
/* Exact width/height are set inline by JS to match the header logo 1:1, so the
   logo never shrinks or resizes when search opens. width/height:auto is only a
   fallback if the header logo can't be measured. */
.trc-ms__logo-img { display: block; width: auto; height: auto; max-width: none; flex-shrink: 0; }
.trc-ms__field { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.trc-ms__ico { width: 24px; height: 24px; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.trc-ms__input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-family: "FiraGO", sans-serif; font-size: 22px; color: #fff; min-width: 0; }
.trc-ms__input::placeholder { color: rgba(255,255,255,.4); }
.trc-ms__close { flex: 0 0 auto; width: 46px; height: 46px; border: 0; background: rgba(255,255,255,.12); border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.trc-ms__close:hover { background: #C62D3C; color: #fff; }

/* Panel */
.trc-ms__panel { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 32px 34px; }
.trc-ms__sec { margin-bottom: 26px; }
.trc-ms__sec-h { font-family: "FiraGO", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 14px; }
.trc-ms__count { font-family: "FiraGO", sans-serif; font-size: 13px; font-weight: 600; color: #6a6a6a; margin: 0 0 18px; }

/* Popular chips */
.trc-ms__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.trc-ms__chip {
	border: 1px solid #e4e4e4; background: #fafafa; color: #333; border-radius: 999px;
	padding: 5px 15px; line-height: 1.4; font-family: "FiraGO", sans-serif; font-size: 13.5px; cursor: pointer;
	transition: border-color .18s, color .18s, background .18s, transform .18s;
	animation: trc-ms-rise .4s cubic-bezier(.22,1,.36,1) backwards; animation-delay: var(--d, 0ms);
}
.trc-ms__chip:hover { border-color: #C62D3C; color: #C62D3C; background: #fff; }

/* Cards grid */
.trc-ms__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.trc-ms__card {
	display: flex; flex-direction: column; text-decoration: none; padding: 14px; border: 1px solid #eee;
	border-radius: 10px; background: #fff; transition: border-color .18s, box-shadow .18s, transform .18s;
	animation: trc-ms-rise .42s cubic-bezier(.22,1,.36,1) backwards; animation-delay: var(--d, 0ms);
}
.trc-ms__card:hover { border-color: #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.07); transform: translateY(-2px); }
.trc-ms__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; background: #fafafa; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.trc-ms__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.trc-ms__title { font-family: "FiraGO", sans-serif; font-size: 13.5px; font-weight: 600; color: #1a1a1a; line-height: 1.35; }
.trc-ms__price { margin-top: 6px; font-family: "FiraGO", sans-serif; font-weight: 700; color: #C62D3C; font-size: 14px; }
.trc-ms__price del { color: #b0b0b0; font-weight: 400; margin-right: 6px; }
.trc-ms__price ins { text-decoration: none; }
.trc-ms__price .woocommerce-Price-amount { color: #C62D3C; }

.trc-ms__noresults { text-align: center; color: #8a8a8a; font-size: 15px; padding: 40px 0; }

@keyframes trc-ms-rise { from { transform: translateY(10px); } }

/* ── Mobile ── */
@media (max-width: 768px) {
	.trc-ms__bar { height: 64px; padding: 0 14px; gap: 10px; }
	.trc-ms__logo { display: none; }
	.trc-ms__input { font-size: 17px; }
	.trc-ms__close { width: 40px; height: 40px; }
	.trc-ms__panel { padding: 18px 14px 28px; }
	.trc-ms__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.trc-ms__sec { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.trc-ms { transition: none; }
	.trc-ms__card, .trc-ms__chip { animation: none; }
}