/*
 * Podpowiedzi w wyszukiwarce — panel pod pigułką w nagłówku.
 *
 * `.cg-search` jest już `position: relative` (main.css), więc panel kotwiczy się do niej.
 * Kolorystyka z tokenów: białe tło, złote akcenty, ciemny tekst — jak karty produktu.
 */

.cg-search__suggest {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	z-index: 60;
	max-height: min( 70vh, 520px );
	overflow-y: auto;
	background: var( --cg-white );
	border: 1px solid var( --cg-black-10 );
	border-radius: var( --cg-r-box );
	box-shadow: 0 18px 40px rgba( 0, 0, 0, .18 );
	padding: 8px;
	color: var( --cg-black );
}

.cg-search__suggest[hidden] { display: none; }

.cg-suggest__list { list-style: none; margin: 0; padding: 0; }

.cg-suggest__item { border-radius: var( --cg-r-img ); }
.cg-suggest__item.is-active,
.cg-suggest__item:hover { background: var( --cg-gold-10 ); }

.cg-suggest__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
	color: inherit;
}

.cg-suggest__img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: var( --cg-r-label );
	background: var( --cg-black-05 );
}
.cg-suggest__img--empty { display: inline-block; }

.cg-suggest__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cg-suggest__name {
	font: var( --cg-fw-medium ) var( --cg-fs-small )/1.3 var( --cg-font );
	letter-spacing: var( --cg-tracking );
	color: var( --cg-black );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cg-suggest__sku {
	font-size: 12px;
	color: var( --cg-black-30 );
}

.cg-suggest__price {
	flex: 0 0 auto;
	font: var( --cg-fw-medium ) var( --cg-fs-small )/1 var( --cg-font );
	letter-spacing: var( --cg-tracking );
	color: var( --cg-gold );
	white-space: nowrap;
}
/* „Cena na zapytanie" z fallbacku ma być mniej krzykliwa niż liczba */
.cg-suggest__price .cg-price-ask { color: var( --cg-black-30 ); font-size: 12px; }

.cg-suggest__more {
	display: block;
	margin-top: 4px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	border-radius: var( --cg-r-img );
	background: var( --cg-black-02 );
	font: var( --cg-fw-medium ) var( --cg-fs-small )/1 var( --cg-font );
	letter-spacing: var( --cg-tracking );
	color: var( --cg-gold );
}
.cg-suggest__more:hover { background: var( --cg-gold-10 ); }

.cg-suggest__empty {
	margin: 0;
	padding: 16px 12px;
	text-align: center;
	font-size: var( --cg-fs-small );
	color: var( --cg-black-30 );
}

/*
 * FUN-02 (audyt QA funkcjonalne 21.08): ten sam mechanizm podpowiedzi (wyszukiwarka.js),
 * podpięty też do pola w pełnoekranowej wyszukiwarce mobile. W przeciwieństwie do
 * `.cg-search__suggest` (dymek NAD paskiem desktopu) ten kontener stoi W NORMALNYM
 * PRZEPŁYWIE panelu — overlay nie ma tła, po którym dymek mógłby "pływać".
 */
.cg-search-overlay__suggest {
	margin-top: 12px;
	max-height: min( 60vh, 480px );
	overflow-y: auto;
}
.cg-search-overlay__suggest[hidden] { display: none; }


/* ══ MOBILE (768px) ════════════════════ */

@media (max-width: 900px) {
  .cg-search-overlay__form {
    margin-bottom: 16px;
  }

  .cg-search-overlay__field {
    font-size: 16px;
    padding: 12px;
  }

  .cg-search-overlay__cols {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cg-search-overlay__col {
    width: 100%;
  }

  .cg-search-overlay__head {
    font-size: 14px;
  }

  .cg-search-overlay__col ul li {
    padding: 8px 0;
    font-size: 13px;
  }

  .cg-search-overlay__col a {
    font-size: 13px;
  }
}