/* ==========================================================================
   Shopex Search — estilos mínimos. Tudo o que é layout de listagem (grid,
   cards, toolbar, pílulas) vem do tema; aqui só o que o tema não tem.
   ========================================================================== */

/* ---- Formulário de busca ----------------------------------------------
   O tema só estilizou o formulário do FiboSearch (borda 1.5px, raio, fundo
   surface, botão primário 44px); o formulário nativo dele ficou sem caixa.
   Aqui o mesmo visual é aplicado ao formulário nativo (header e subheader)
   e ao shortcode [shopex_search], com foco em anel da cor primária.
   ------------------------------------------------------------------------ */
.spxs-form,
.header-search > form[role="search"],
.subheader-search > form[role="search"]{
  display:flex;align-items:center;width:100%;height:44px;margin:0;
  border:1.5px solid var(--c-border,#e9ecef);border-radius:var(--radius,8px);
  background:var(--c-surface,#f8f9fa);overflow:hidden;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.06));
  transition:border-color var(--dur,.2s) var(--ease,ease),background var(--dur,.2s) var(--ease,ease),box-shadow var(--dur,.2s) var(--ease,ease)
}
@media(hover:hover){
  .spxs-form:hover,
  .header-search > form[role="search"]:hover,
  .subheader-search > form[role="search"]:hover{border-color:var(--c-text-muted,#adb5bd)}
}
.spxs-form:focus-within,
.header-search > form[role="search"]:focus-within,
.subheader-search > form[role="search"]:focus-within{
  border-color:var(--c-primary,#0b3d7a);background:var(--c-bg,#fff);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb,11,61,122),.14),var(--shadow-md,0 4px 12px rgba(0,0,0,.08))
}

/* ícone da lupa (esquerda) */
.spxs-form .spxs-icon,
.header-search > form[role="search"] .header-search-icon,
.subheader-search > form[role="search"] .subheader-search-icon{
  width:18px;height:18px;flex-shrink:0;margin-left:var(--s-3,12px);color:var(--c-text-muted,#adb5bd);
  transition:color var(--dur,.2s) var(--ease,ease)
}
.spxs-form:focus-within .spxs-icon,
.header-search > form[role="search"]:focus-within .header-search-icon,
.subheader-search > form[role="search"]:focus-within .subheader-search-icon{color:var(--c-primary,#0b3d7a)}

/* campo */
.spxs-form input[type="search"],
.header-search > form[role="search"] input[type="search"],
.subheader-search > form[role="search"] input[type="search"]{
  flex:1;height:100%;min-width:0;padding:0 var(--s-3,12px);margin:0;
  border:0;outline:0;box-shadow:none;background:transparent;
  font:inherit;font-size:1rem;line-height:1;color:var(--c-text,#212529);
  -webkit-appearance:none;appearance:none
}
.spxs-form input[type="search"]::placeholder,
.header-search > form[role="search"] input[type="search"]::placeholder,
.subheader-search > form[role="search"] input[type="search"]::placeholder{color:var(--c-text-muted,#adb5bd);opacity:1}
.spxs-form input[type="search"]::-webkit-search-decoration,
.header-search > form[role="search"] input[type="search"]::-webkit-search-decoration,
.subheader-search > form[role="search"] input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
.spxs-form input[type="search"]::-webkit-search-cancel-button,
.header-search > form[role="search"] input[type="search"]::-webkit-search-cancel-button,
.subheader-search > form[role="search"] input[type="search"]::-webkit-search-cancel-button{cursor:pointer;opacity:.6}

/* botão (direita, cor primária) */
.spxs-form button[type="submit"],
.header-search > form[role="search"] button[type="submit"],
.subheader-search > form[role="search"] button[type="submit"]{
  flex-shrink:0;width:48px;height:100%;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-primary,#0b3d7a);color:var(--c-primary-text,#fff);border:0;border-radius:0;
  cursor:pointer;transition:background var(--dur,.2s) var(--ease,ease)
}
.spxs-form button[type="submit"] svg,
.header-search > form[role="search"] button[type="submit"] svg,
.subheader-search > form[role="search"] button[type="submit"] svg{width:18px;height:18px;display:block}
@media(hover:hover){
  .spxs-form button[type="submit"]:hover,
  .header-search > form[role="search"] button[type="submit"]:hover,
  .subheader-search > form[role="search"] button[type="submit"]:hover{background:var(--c-primary-hover,#082c5a)}
}
.spxs-form button[type="submit"]:focus-visible,
.header-search > form[role="search"] button[type="submit"]:focus-visible,
.subheader-search > form[role="search"] button[type="submit"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}

/* no celular o subheader tem pouca altura: campo um tantinho mais baixo */
@media(max-width:600px){
  .subheader-search > form[role="search"]{height:42px}
}

/* ---- Pílulas: wrapper próprio (mesmas regras do .spx-pills-wrap do tema,
        sem a classe para o JS do tema não se ligar duas vezes) ---- */
.spxs-pills-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}
.spxs-pills-wrap:not(.has-overflow) .spx-filter-pills{-webkit-mask-image:none;mask-image:none}
.spxs-listing .spx-pill{cursor:pointer}
.spxs-listing .spx-pill.is-active{background:var(--c-primary,#0b3d7a);border-color:var(--c-primary,#0b3d7a);color:var(--c-primary-text,#fff)}
.spxs-listing .spx-pill.is-active .spx-pill-count{background:rgba(255,255,255,.18);color:var(--c-primary-text,#fff)}
@media(hover:hover){.spxs-listing .spx-pill.is-active:hover{color:var(--c-primary-text,#fff);border-color:var(--c-primary,#0b3d7a)}}
/* No toque o tema neutraliza o :hover das pílulas com !important; a ativa precisa continuar legível. */
@media(hover:none),(pointer:coarse){.spxs-listing .spx-pill.is-active:hover{border-color:var(--c-primary,#0b3d7a)!important;color:var(--c-primary-text,#fff)!important}}
.spxs-listing .spx-pill:focus-visible,.spxs-listing .spx-active-pill:focus-visible{outline:2px solid var(--c-primary,#0b3d7a);outline-offset:2px}

/* ---- Estado de carregamento: mantém a listagem anterior visível ---- */
.spxs-wrap{position:relative}
.spxs-wrap.is-loading .spxs-listing{opacity:.55;pointer-events:none;transition:opacity .15s ease}
.spxs-wrap.is-loading::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--c-primary,#0b3d7a),transparent);background-size:40% 100%;animation:spxsBar .9s linear infinite}
@keyframes spxsBar{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes spxsL{from{transform:translateX(-40%)}to{transform:translateX(80%)}}

/* ---- Erro / vazio ---- */
.spxs-empty{text-align:center;padding:var(--s-12,48px) 0}
.spxs-error{font-size:1rem;color:var(--c-text-muted,#adb5bd);margin-bottom:var(--s-4,16px)}
.spxs-retry{font:inherit}
body.spxs-active .spxs-pagination{display:none} /* sem JS a paginação fica visível */

/* ---- Skeleton (primeiro carregamento) ---- */
.spxs-listing--skeleton{padding-top:var(--s-4,16px)}
.spxs-skel-head{margin-bottom:var(--s-4,16px)}
.spxs-skel-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-4,16px)}
.spxs-skel-pills{display:flex;gap:8px;margin-bottom:var(--s-4,16px);overflow:hidden}
.spxs-skel-pill{display:inline-block;width:96px;height:30px;border-radius:20px;background:var(--c-surface,#f8f9fa);flex-shrink:0}
.spxs-skel{background:var(--c-bg,#fff);border:1px solid var(--c-border,#e9ecef);border-radius:var(--radius,8px);overflow:hidden;padding-bottom:var(--s-3,12px)}
.spxs-skel-img{aspect-ratio:1;background:var(--c-surface,#f8f9fa)}
.spxs-skel-line{height:12px;margin:10px var(--s-3,12px) 0;border-radius:6px;background:var(--c-surface,#f8f9fa)}
.spxs-skel-line--short{width:45%}
.spxs-skel-line--price{width:35%;height:18px}
.spxs-skel-line--title{width:240px;height:22px;margin-left:0}
.spxs-skel-img,.spxs-skel-line,.spxs-skel-pill{position:relative;overflow:hidden}
.spxs-skel-img::after,.spxs-skel-line::after,.spxs-skel-pill::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:spxsShimmer 1.2s ease-in-out infinite}
@keyframes spxsShimmer{to{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){
  .spxs-wrap.is-loading::after,.spxs-skel-img::after,.spxs-skel-line::after,.spxs-skel-pill::after{animation:none}
}

/* ---- Balão minimalista ("Digite pelo menos N letras para buscar.") ---- */
.spxs-balloon{position:fixed;z-index:10050;max-width:min(360px,calc(100vw - 16px));padding:8px 12px;border-radius:10px;background:var(--c-text,#212529);color:#fff;font-size:.8125rem;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;pointer-events:none}
.spxs-balloon.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.spxs-balloon::before{content:"";position:absolute;top:-6px;left:var(--spxs-arrow-x,50%);width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg);border-radius:2px}
.spxs-balloon.is-above{transform:translateY(4px)}
.spxs-balloon.is-above.is-open{transform:none}
.spxs-balloon.is-above::before{top:auto;bottom:-6px}
.spxs-balloon-text{display:block;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.spxs-balloon{transition:none;transform:none}}

/* ---- aviso "Exibindo resultados para…" / "mostrando os mais parecidos" ---- */
.spxs-notice{margin-top:var(--s-2,8px);font-size:.875rem;color:var(--c-text-muted,#6c757d);line-height:1.5}
.spxs-notice strong{color:var(--c-text,#212529)}
.spxs-notice a{color:var(--c-primary,#0b3d7a);text-decoration:underline;text-underline-offset:2px}