/*
 * Ajustes da loja sobre o tema Pillar (não é arquivo do tema). Só o que o tema
 * não cobre: peças que o Shopify não tem (WhatsApp, avisos, logo em texto,
 * ícones dos diferenciais) e componentes nossos que ganham o visual do tema.
 */

/* Logo sem imagem: nome da loja no lugar, no peso do título do tema */
.header__logo--text {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  color: rgb(var(--color-foreground));
  white-space: nowrap;
}

.topbar__contact {
  font-size: var(--font-size-static-sm, 1.4rem);
}

.topbar__right {
  gap: 1.6rem;
}

/* Ícones dos diferenciais (Bootstrap Icons 16x16, cor do texto) */
.pillar-diferencial__icone {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Avisos de configuração (o tema não tem "alert") */
.pillar-aviso {
  padding: 1.2rem 1.6rem;
  margin-block: 1.6rem;
  border-radius: var(--blocks-radius, 0.8rem);
  background: rgb(var(--color-secondary-background));
  border-left: 4px solid rgb(var(--color-primary));
}

.pillar-aviso--danger {
  border-left-color: #c4301c;
}

.collection--empty {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

.product-card__note {
  margin-top: 0.4rem;
  color: rgb(var(--color-progress-bar));
}

.pillar-catalogo__header {
  margin-bottom: 2.4rem;
}

.collection__toolbar + .pillar-aviso,
.sticky-element + .pillar-aviso {
  margin-top: 2rem;
}

/* Botão flutuante do WhatsApp (recurso da loja) */
.loja-wa-float {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 20;
  width: 5.6rem;
  height: 5.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.loja-wa-float:hover {
  transform: scale(1.06);
}

.loja-wa-float svg {
  width: 2.8rem;
  height: 2.8rem;
}

@media (max-width: 767px) {
  .loja-wa-float {
    right: 1.6rem;
    bottom: 1.6rem;
    width: 4.8rem;
    height: 4.8rem;
  }
}

/* O tema dá display aos .btn e anula o atributo hidden (botão "Ordenar" sem JS) */
.btn[hidden] {
  display: none;
}

/* Seletor de categoria da busca: largura do texto escolhido (field-sizing, ou a medição do
   JS em navegadores sem suporte), até 30rem (26rem de texto + espaço do ícone); só acima disso entra a reticência.
   --types-w (definida pelo JS) reserva esse espaço no início do campo. */
.search__types {
  min-width: 0;
  max-width: min(30rem, 55%);
}

.search__types .form-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  field-sizing: content;
  text-overflow: ellipsis;
}

.search__types + .search__input {
  padding-inline-start: calc(var(--types-w, 10.8rem) + 1.2rem);
}

@media (min-width: 640px) {
  .search__types {
    min-width: 0;
  }

  .search__types + .search__input {
    padding-inline-start: calc(var(--types-w, 17.2rem) + 1.6rem);
  }
}

/* O preset usa capitalize nos botões ("Shop Now"); em português isso gera
   "Ver Produtos", "Adicionar Ao Carrinho". Mantemos a frase como escrita. */
:root {
  --buttons-transform: none;
}

/* Cabeçalho com logo à esquerda: a busca ocupa todo o espaço livre entre o logo e os ícones
   (o tema a travava em 60rem, deixando um vazio à direita). Sem carrinho não há ícones:
   a busca vai até a margem direita do container. */
@media (min-width: 1024px) {
  .header__top--logo-left {
    --header-grid-template: "logo search icons" / auto minmax(0, 1fr) auto;
  }

  .header__top--logo-left .header__search {
    padding-inline: 4.2rem;
  }

  .header__top--logo-left:not(:has(.cart-drawer-button)) {
    column-gap: 0;
  }

  .header__top--logo-left:not(:has(.cart-drawer-button)) .header__search {
    padding-inline-end: 0;
  }

  .header__top--logo-left:not(:has(.cart-drawer-button)) .header__icons--right {
    display: none;
  }

  .header__top--logo-left .search__form {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

/* Logo da loja "com círculo" (Admin › Identidade): recorte redondo, como no site anterior */
.header__logo--round .logo,
.footer-logo--round {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Card de produto: o botão "Ver opções" era branco sobre foto de fundo branco (sumia) —
   usa a cor primária da loja, com contorno. */
.product-card__action-button.btn--white {
  background-color: rgb(var(--color-button));
  border: 0.1rem solid rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}
.product-card__action-button.btn--white::before {
  background-color: rgb(var(--color-button-text));
}
@media (hover: hover) {
  .product-card__action-button.btn--white:hover {
    color: rgb(var(--color-button));
  }
}