/**
 * Cabeçalho Shanti — barra topo, logo+tagline, menu, busca e ações.
 * Mobile first.
 */

/* ── barra topo rosa ── */
.sh-barra-topo {
  background: var(--shanti-rosa);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  padding: 11px 0;
}
.sh-barra-topo .sh-header-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.sh-barra-topo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sh-barra-topo a:hover { color: var(--shanti-rosa-light); }
.sh-barra-sep { opacity: 0.5; }

/* ── header ── */
.sh-header {
  background: var(--shanti-creme);
  border-bottom: 1px solid var(--shanti-bege-mid);
  position: sticky;
  top: 0;
  z-index: 500;
}
.sh-header-wrap { max-width: 1400px; margin: 0 auto; padding: 0 18px; }
.sh-header-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  /* impede que menu + busca estourem a largura da tela */
  min-width: 0;
}
.sh-header-linha > * { min-width: 0; }

/* marca */
.sh-marca { display: flex; flex-direction: column; gap: 2px; text-decoration: none; flex-shrink: 0; }
/* largura do logo vem do Customizer do Astra (Aparência → Personalizar → Identidade do site) */
.sh-marca-img { display: block; width: 104px; height: auto; max-width: none; }
.sh-marca-txt {
  font-family: var(--shanti-serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--shanti-preto);
}
.sh-marca-txt em { font-style: normal; color: var(--shanti-rosa); }
.sh-marca-tagline {
  font-family: var(--shanti-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--shanti-cinza);
}

/* menu desktop (escondido no celular) — não encolhe, quem cede é a busca */
.sh-nav { display: none; flex-shrink: 0; }
.sh-nav-lista {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sh-nav-lista li { position: relative; }
.sh-nav-lista a {
  font-family: var(--shanti-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--shanti-preto);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  display: block;
}
.sh-nav-lista a:hover,
.sh-nav-lista .current-menu-item > a { color: var(--shanti-rosa); }
/* item de destaque (classe sh-destaque no menu) — ex.: "+ vendidos" */
.sh-nav-lista > li.sh-destaque > a { color: var(--shanti-rosa); font-weight: 600; }
/* submenu */
.sh-nav-lista .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 200px;
  background: var(--shanti-creme);
  border: 1px solid var(--shanti-bege-mid);
  border-radius: var(--shanti-radius-card);
  box-shadow: 0 14px 34px rgba(17, 16, 16, 0.1);
  padding: 8px 0;
  list-style: none;
  margin: 0;
}
.sh-nav-lista li:hover > .sub-menu,
.sh-nav-lista li:focus-within > .sub-menu { display: block; }
.sh-nav-lista .sub-menu a { padding: 10px 18px; font-size: 15px; }
.sh-nav-lista .sub-menu a:hover { background: var(--shanti-rosa-light); }
/* o Astra injeta uma setinha antes do nome dos itens de submenu — some com ela */
.sh-nav-lista .sub-menu .ast-icon.icon-arrow,
.sh-nav-lista .sub-menu .dropdown-menu-toggle,
.sh-menu-mobile-lista .sub-menu .ast-icon.icon-arrow,
.sh-menu-mobile-lista .sub-menu .dropdown-menu-toggle { display: none; }

/* ações à direita — a busca é quem cede espaço quando aperta */
.sh-header-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.sh-acao { flex-shrink: 0; }
.sh-acao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--shanti-preto);
  position: relative;
  text-decoration: none;
}
.sh-acao svg { width: 21px; height: 21px; }
.sh-acao:hover { color: var(--shanti-rosa); }
.sh-acao--favorito { display: none; }
.sh-sacola-qtd {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--shanti-radius-pill);
  background: var(--shanti-rosa);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* busca */
.sh-busca { position: relative; display: flex; align-items: center; }
.sh-busca .search-field {
  width: 100%;
  border-radius: var(--shanti-radius-pill);
  border: 1.5px solid transparent;
  background: var(--shanti-bege);
  padding: 12px 18px 12px 44px;
  font-family: var(--shanti-sans);
  font-size: 15px;
  color: var(--shanti-preto);
}
.sh-busca .search-field::placeholder { color: #9a9490; }
.sh-busca .search-field:focus {
  outline: none;
  background: var(--shanti-creme);
  border-color: var(--shanti-rosa);
  box-shadow: 0 0 0 3px var(--shanti-rosa-light);
}
.sh-busca-lupa {
  position: absolute;
  left: 15px;
  display: flex;
  color: var(--shanti-cinza);
  pointer-events: none;
}
.sh-busca-lupa svg { width: 17px; height: 17px; }
.sh-busca--desktop { display: none; }
.sh-header-busca-mobile { padding: 0 0 12px; }

/* botão hambúrguer */
.sh-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: none;
  color: var(--shanti-preto);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.sh-menu-btn svg { width: 23px; height: 23px; }

/* ── menu lateral (celular) ── */
.sh-menu-fundo {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 16, 0.5);
  z-index: 900;
}
.sh-menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88%, 340px);
  background: var(--shanti-creme);
  z-index: 901;
  padding: 20px 22px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateX(0);
}
.sh-menu-mobile[hidden], .sh-menu-fundo[hidden] { display: none; }
.sh-menu-mobile-topo { display: flex; align-items: center; justify-content: space-between; }
.sh-menu-fechar {
  border: none;
  background: none;
  color: var(--shanti-preto);
  cursor: pointer;
  padding: 6px;
  display: flex;
}
.sh-menu-fechar svg { width: 22px; height: 22px; }
.sh-menu-mobile-lista, .sh-menu-mobile-lista .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sh-menu-mobile-lista > li > a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--shanti-bege);
  font-family: var(--shanti-serif);
  font-weight: 300;
  font-size: 21px;
  color: var(--shanti-preto);
  text-decoration: none;
}
.sh-menu-mobile-lista > li.sh-destaque > a { color: var(--shanti-rosa); }
.sh-menu-mobile-lista .sub-menu a {
  display: block;
  padding: 9px 0 9px 14px;
  font-family: var(--shanti-sans);
  font-size: 14px;
  color: var(--shanti-cinza);
  text-decoration: none;
}
.sh-menu-mobile-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--shanti-bege);
}
.sh-menu-mobile-rodape a { font-size: 14px; color: var(--shanti-cinza); text-decoration: none; }
.sh-menu-mobile-rodape a:hover { color: var(--shanti-rosa); }

/* dropdown da busca ao vivo dentro do header novo */
.sh-busca .shanti-busca-drop { top: calc(100% + 8px); }

/* ── TABLET ── */
@media (min-width: 760px) {
  .sh-header-wrap { padding: 0 26px; }
  .sh-acao--favorito { display: flex; }
  .sh-busca--desktop { display: flex; flex: 1 1 auto; min-width: 130px; max-width: 240px; }
  .sh-header-busca-mobile { display: none; }
  .sh-header-linha { min-height: 74px; gap: 16px; }
  .sh-marca-img { width: 140px; }
}

/* ── DESKTOP: menu completo aparece ── */
@media (min-width: 1180px) {
  .sh-menu-btn { display: none; }
  .sh-nav { display: block; }
  .sh-nav-lista { gap: 18px; margin-left: 12px; }
  .sh-header-acoes { gap: 8px; }
}

/* ── TELA GRANDE: tudo folgado ── */
@media (min-width: 1440px) {
  .sh-nav-lista { gap: 26px; margin-left: 18px; }
  .sh-busca--desktop { max-width: 300px; }
  .sh-header-acoes { gap: 10px; }
}