/* Busca / descoberta — contraste maior com linguagem Material 3.
   Hierarquia vem de superfícies tonais preenchidas, não de contornos. */

.search-overlay:not(.has-detail) {
  --pm-discovery-bg: #12100f;
  --pm-discovery-section: #1b1816;
  --pm-discovery-button: #332e2a;
  --pm-discovery-button-hover: #403832;
  --pm-discovery-button-pressed: #4a3d35;
  --pm-discovery-text: #fff8f3;
  --pm-discovery-text-muted: #d8c9bf;
}

.search-overlay:not(.has-detail),
.search-overlay:not(.has-detail) .search-overlay-head,
.search-overlay:not(.has-detail) .search-overlay-body,
.search-overlay:not(.has-detail) #catalog-results-panel {
  background: var(--pm-discovery-bg) !important;
}

.search-overlay:not(.has-detail) .search-discovery-section,
.search-overlay:not(.has-detail) .search-shortcuts {
  border: 0 !important;
  background: var(--pm-discovery-section) !important;
  box-shadow: none !important;
}

.search-overlay:not(.has-detail) .search-discovery-card,
.search-overlay:not(.has-detail) .search-discovery-services > button {
  border: 0 !important;
  background: var(--pm-discovery-button) !important;
  color: var(--pm-discovery-text) !important;
  box-shadow: none !important;
}

.search-overlay:not(.has-detail) .search-discovery-card-copy {
  background: var(--pm-discovery-button) !important;
}

.search-overlay:not(.has-detail) .search-discovery-card-copy strong {
  color: var(--pm-discovery-text) !important;
}

.search-overlay:not(.has-detail) .search-discovery-card-copy small {
  color: var(--pm-discovery-text-muted) !important;
}

.search-overlay:not(.has-detail) .search-discovery-card:hover,
.search-overlay:not(.has-detail) .search-discovery-services > button:hover {
  border: 0 !important;
  background: var(--pm-discovery-button-hover) !important;
  box-shadow: none !important;
}

.search-overlay:not(.has-detail) .search-discovery-card:hover .search-discovery-card-copy,
.search-overlay:not(.has-detail) .search-discovery-services > button:hover .search-discovery-card-copy {
  background: var(--pm-discovery-button-hover) !important;
}

.search-overlay:not(.has-detail) .search-discovery-card:active,
.search-overlay:not(.has-detail) .search-discovery-services > button:active {
  background: var(--pm-discovery-button-pressed) !important;
}

.search-overlay:not(.has-detail) .search-shortcuts button {
  border: 0 !important;
  background: var(--pm-discovery-button) !important;
  color: var(--pm-discovery-text) !important;
  box-shadow: none !important;
}

.search-overlay:not(.has-detail) .search-shortcuts button:hover,
.search-overlay:not(.has-detail) .search-shortcuts button:active {
  border: 0 !important;
  background: var(--pm-discovery-button-hover) !important;
}

/* Resultados também ganham a mesma hierarquia tonal para não voltar ao
   cinza quase indistinguível quando a busca é usada. */
.search-overlay:not(.has-detail) .catalog-card {
  border: 0 !important;
  background: var(--pm-discovery-button) !important;
  box-shadow: none !important;
}

.search-overlay:not(.has-detail) .catalog-card-body {
  background: var(--pm-discovery-button) !important;
}

.search-overlay:not(.has-detail) .catalog-card:hover,
.search-overlay:not(.has-detail) .catalog-card:hover .catalog-card-body {
  border: 0 !important;
  background: var(--pm-discovery-button-hover) !important;
  box-shadow: none !important;
}

/* Três artes de descoberta têm uma faixa escura embutida perto da borda
   superior. O card já recorta overflow; ampliamos e deslocamos apenas essas
   imagens para manter o conteúdo útil e retirar a faixa da janela 16:9. */
.search-overlay:not(.has-detail) .search-discovery-card > img[src*="produtos-cabelos-fibras.webp"] {
  object-position: center 62%;
  transform: scale(1.22) translateY(-4%);
}
.search-overlay:not(.has-detail) .search-discovery-card > img[src*="produtos-cuidados.webp"] {
  object-position: center 61%;
  transform: scale(1.20) translateY(-3.5%);
}
.search-overlay:not(.has-detail) .search-discovery-card > img[src*="produtos-cabelo-humano-v3.png"] {
  object-position: center 62%;
  transform: scale(1.22) translateY(-4%);
}

/* Firefox/Android pode recalcular 100dvh em etapas quando a barra do navegador
   aparece/desaparece. Como o overlay já usa inset: 0, não precisamos impor uma
   segunda altura. Isso elimina a faixa preta e mantém a superfície até o fim. */
@media (max-width: 720px) {
  .search-overlay {
    inset: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .search-overlay:not(.has-detail) {
    padding-bottom: 0 !important;
    background: var(--pm-discovery-bg) !important;
  }

  .search-overlay:not(.has-detail) .search-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    background: var(--pm-discovery-bg) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .search-overlay:not(.has-detail) #catalog-results-panel {
    min-height: 100%;
    background: var(--pm-discovery-bg) !important;
  }
}