/* Matter Search — widget de pesquisa único. Escopado a .ms-root. */
.ms-root{
  --ms-accent:#4A7259;
  --ms-ink:#0F0F0F;
  --ms-mute:#8A8F96;
  --ms-line:#EBEBEB;
  --ms-surface:#FFFFFF;
  /* Fonte da marca. O body do site herda a pilha do sistema (Roboto), por isso
     é preciso declará-la aqui, senão os resultados saíam em Roboto enquanto o
     resto do site usa a fonte da marca. Puxa a fonte GLOBAL do Elementor, para
     acompanhar automaticamente se a fonte do site mudar; o Plus Jakarta Sans
     é só o fallback. Sobreponível pelos controlos de tipografia do widget. */
  --ms-font:var(--e-global-typography-text-font-family, 'Plus Jakarta Sans'),
            -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position:relative;
  display:inline-flex;
  line-height:0;
}
/* o painel vive fora do fluxo, por isso a fonte é aplicada a ele e a tudo o
   que contém (incluindo o HTML dos preços vindo do WooCommerce) */
.ms-panel,
.ms-panel *{font-family:var(--ms-font)}

/* botão do ícone — background forçado a transparente em TODOS os estados,
   senão o reset do tema pinta o :active/tap com o seu rosa. */
.ms-toggle,
.ms-toggle:hover,
.ms-toggle:focus,
.ms-toggle:active{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent !important;
  border:0;padding:6px;margin:0;cursor:pointer;
  color:var(--ms-ink);font-size:22px;line-height:1;border-radius:8px;
  box-shadow:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease;
}
.ms-toggle:hover{opacity:.65}
.ms-toggle:focus-visible{outline:2px solid var(--ms-accent);outline-offset:2px}
.ms-toggle svg,.ms-toggle i{width:1em;height:1em;font-size:inherit}
.ms-toggle svg{fill:currentColor}

/* painel */
.ms-panel{
  position:absolute;top:calc(100% + var(--ms-gap, 10px));z-index:1200;
  width:420px;max-width:calc(100vw - 32px);
  background:var(--ms-surface);
  border:1px solid var(--ms-line);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(15,15,15,.14), 0 2px 8px rgba(15,15,15,.06);
  padding:12px;
  transform-origin:top center;
  transform:translateY(6px) scale(.98);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s cubic-bezier(.18,.88,.32,1.06),
             transform .22s cubic-bezier(.18,.88,.32,1.06),
             visibility .22s;
}
.ms-root.is-right .ms-panel{right:0}
.ms-root.is-left  .ms-panel{left:0}
.ms-root.is-open .ms-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* campo */
.ms-field{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--ms-line);border-radius:10px;
  padding:0 10px;background:#fff;
  transition:border-color .15s ease;
}
/* focus discreto: só escurece a borda para o verde, sem glow em volta */
.ms-field:focus-within{border-color:var(--ms-accent)}
.ms-field-icon{color:var(--ms-mute);flex:none}

/* Reset FORTE do input: o tema do site dá border/background/altura aos inputs
   e isso criava um "campo dentro do campo". Anulamos tudo, escopado a .ms-root. */
.ms-root .ms-input{
  flex:1;min-width:0;
  border:0 !important;outline:0 !important;background:transparent !important;
  box-shadow:none !important;
  -webkit-appearance:none;appearance:none;
  border-radius:0;
  height:auto;min-height:0;line-height:normal;
  font:inherit;font-size:15px;color:var(--ms-ink);
  padding:11px 0;margin:0;
}
.ms-root .ms-input:focus{border:0 !important;box-shadow:none !important;outline:0 !important}
.ms-input::placeholder{color:var(--ms-mute);opacity:1}
/* mata toda a decoração nativa de campos de pesquisa (iOS/WebKit) */
.ms-input::-webkit-search-cancel-button,
.ms-input::-webkit-search-decoration,
.ms-input::-webkit-search-results-button,
.ms-input::-webkit-search-results-decoration{display:none;-webkit-appearance:none}

/* botão limpar — background transparente em todos os estados (senão o
   reset do tema pinta o :active com o seu rosa) */
.ms-root .ms-clear,
.ms-root .ms-clear:hover,
.ms-root .ms-clear:focus,
.ms-root .ms-clear:active{
  border:0 !important;background:transparent !important;box-shadow:none !important;
  -webkit-appearance:none;-webkit-tap-highlight-color:transparent;
  cursor:pointer;color:var(--ms-mute);
  font-size:20px;line-height:1;padding:2px 4px;border-radius:6px;flex:none;
}
.ms-root .ms-clear:hover{color:var(--ms-ink)}
.ms-root .ms-clear:focus-visible{outline:2px solid var(--ms-accent);outline-offset:1px}

/* resultados */
.ms-results{margin-top:8px;max-height:min(60vh,440px);overflow-y:auto;
  display:flex;flex-direction:column;gap:8px}
.ms-results:empty{display:none}

/* barra de scroll discreta (no mobile quem faz scroll é o próprio painel) */
.ms-results::-webkit-scrollbar,
.ms-panel::-webkit-scrollbar{width:5px}
.ms-results::-webkit-scrollbar-track,
.ms-panel::-webkit-scrollbar-track{background:transparent}
.ms-results::-webkit-scrollbar-thumb,
.ms-panel::-webkit-scrollbar-thumb{background:rgba(15,15,15,.14);border-radius:6px}
.ms-results,.ms-panel{scrollbar-width:thin;scrollbar-color:rgba(15,15,15,.14) transparent}

.ms-hint{padding:12px 8px;color:var(--ms-mute);font-size:13px;text-align:center}

.ms-item{
  display:flex;align-items:center;gap:16px;
  padding:12px 12px;border-radius:12px;text-decoration:none;color:inherit;
  transition:background .12s ease;
}
.ms-item:hover,.ms-item.is-active{background:#F7F7F6}
.ms-item:focus-visible{outline:2px solid var(--ms-accent);outline-offset:-2px}
.ms-thumb{
  width:72px;height:72px;flex:none;border-radius:10px;overflow:hidden;background:#F2F2F0;
  display:flex;align-items:center;justify-content:center;
}
.ms-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* nome, preço e cores com respiração entre si (não encavalitados) */
.ms-meta{min-width:0;flex:1;display:flex;flex-direction:column}
.ms-title{
  font-size:15px;font-weight:600;color:var(--ms-ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ms-price{font-size:13px;color:var(--ms-mute);margin-top:5px;line-height:1.2}
.ms-price ins{text-decoration:none;color:var(--ms-accent);font-weight:600}
.ms-price del{opacity:.6;margin-right:4px}

/* amostras de cor */
.ms-swatches{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
.ms-dot{
  width:13px;height:13px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(15,15,15,.12);
}
.ms-more{font-size:11px;color:var(--ms-mute);font-weight:600;line-height:1}

.ms-all{
  display:block;text-align:center;margin-top:6px;padding:10px;
  border-top:1px solid var(--ms-line);
  color:var(--ms-accent);font-size:13px;font-weight:600;text-decoration:none;
}
.ms-all:hover{text-decoration:underline}

.ms-spinner{
  width:18px;height:18px;margin:12px auto;display:block;
  border:2px solid var(--ms-line);border-top-color:var(--ms-accent);border-radius:50%;
  animation:ms-spin .7s linear infinite;
}
@keyframes ms-spin{to{transform:rotate(360deg)}}

/* fundo escurecido (só no mobile, quando a caixa é um modal centrado) */
.ms-backdrop{
  position:fixed;inset:0;z-index:1190;
  background:rgba(15,15,15,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, visibility .2s;
  display:none;
}

/* Mobile e tablet: a caixa fica ANCORADA abaixo do ícone (não a meio do ecrã,
   senão o teclado tapa-a), mas CENTRADA horizontalmente no ecrã.
   O `top` é calculado em JS a partir da posição real do ícone (--ms-anchor-top),
   porque com position:fixed o `100%` deixaria de ser a altura do ícone. */
@media (max-width:1024px){
  .ms-backdrop{display:block}
  .ms-root.is-open .ms-backdrop{opacity:1;visibility:visible;pointer-events:auto}

  .ms-panel,
  .ms-root.is-right .ms-panel,
  .ms-root.is-left .ms-panel{
    position:fixed;z-index:1200;
    top:var(--ms-anchor-top, 78px);
    left:50%;right:auto;bottom:auto;
    width:calc(100vw - 32px);max-width:460px;
    /* --ms-avail-h vem do JS e desconta o teclado (visualViewport); o calc()
       é só o fallback para quando o JS ainda não correu. */
    max-height:var(--ms-avail-h, calc(100dvh - var(--ms-anchor-top, 78px) - 16px));
    overflow:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-50%) translateY(6px) scale(.98);
    transform-origin:top center;
  }
  .ms-root.is-open .ms-panel{transform:translateX(-50%) translateY(0) scale(1)}
  .ms-results{max-height:none}
}

@media (prefers-reduced-motion:reduce){
  .ms-panel{transition:opacity .01s}
  .ms-spinner{animation:none}
}

/* ── clone do sticky do Elementor ──────────────────────────────────────────
   Quando o header fica sticky, o Elementor Pro CLONA a secção para servir de
   espaçador e esconde o clone com `visibility:hidden` (ver addSpacer() em
   elementor-pro/assets/lib/sticky/jquery.sticky.js). Mas `visibility` é
   herdada, e um descendente que volte a declarar `visible` reaparece — que é
   exatamente o que `.ms-root.is-open .ms-panel` faz. Era isto que duplicava a
   caixa de pesquisa ao abrir e rolar: a real ficava fixa com o header e a do
   clone ficava presa à página. `display:none` não tem esse furo.
   O clone nunca é inicializado pelo JS, por isso não perde nada em ser
   escondido por completo. */
.elementor-sticky__spacer .ms-panel,
.elementor-sticky__spacer .ms-backdrop{
  display:none !important;
}