/* Refinamento visual — Drogaria Mais Barato
   Camada complementar: preserva a estrutura e os comportamentos existentes.

   AS CORES SAEM DO LOGO, e não do gosto de quem desenhou.

   Esta camada nasceu puxando o tom da marca para o violeta (#302783) e
   enchendo a página de lilás. O efeito era o contrário do pretendido: o
   logo virava o único amarelo da tela e parecia adesivo colado sobre um
   template de terceiro. A farmácia viu antes de nós.

   Então as três cores vêm medidas do arquivo do logo:

     azul-marinho #242490   o que sustenta a marca - SUSTENTA
     amarelo      #FCF000   64% dos pixels do logo - CHAMA
     vermelho     #CC1824   o menor pedaço         - AVISA

   A divisão de trabalho é o que impede a tela de virar panfleto. O azul
   é o que mais aparece; o amarelo entra uma vez por tela, no passo que
   vale dinheiro (carrinho, economia, finalizar); o vermelho fica no
   corte de preço e no aviso de receita, e em mais nada - usado em pouca
   coisa para continuar significando alguma.

   A REGRA DO AMARELO: sempre preenchimento com letra escura, nunca
   texto. #FCF000 sobre branco dá cerca de 1,1:1 de contraste - é
   ilegível. É assim que ele aparece no próprio logo, e é por isso que
   --sobre-destaque existe ao lado dele. */
:root {
  --premium-roxo: #242490;
  --premium-roxo-escuro: #1a1a6e;
  --premium-lilas: #e9e9f4;
  --premium-fundo: #f7f8fa;
  --premium-borda: #e4e6ee;
  --premium-sombra: 0 8px 24px rgba(20, 23, 40, .07);
  --premium-sombra-hover: 0 14px 30px rgba(20, 23, 40, .13);
}

body {
  background: var(--premium-fundo);
  color: #202136;
}

.header {
  background: linear-gradient(115deg, var(--premium-roxo-escuro), var(--premium-roxo));
  box-shadow: 0 3px 16px rgba(25, 20, 77, .16);
}

.logo {
  border-radius: 10px;
  padding: 4px 8px;
}

.busca-container {
  border-bottom-color: transparent;
  background: rgba(247, 248, 252, .94);
}

.busca-wrapper input {
  min-height: 44px;
  border: 1px solid #e1e2ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 23, 40, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.busca-wrapper input:focus {
  outline: none;
  border-color: #7770c5;
  box-shadow: 0 0 0 4px rgba(80, 69, 166, .12);
}

.btn-buscar {
  border-radius: 12px;
  transition: transform .18s ease, filter .18s ease;
}

.btn-buscar:hover { filter: brightness(1.07); }
.btn-buscar:active { transform: scale(.97); }

.filtros-wrap {
  background: rgba(247, 248, 252, .94);
}

.filtros {
  gap: 9px;
  padding-top: 8px;
  padding-bottom: 10px;
}

.filtros button,
.filtros a {
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.filtros button:hover,
.filtros a:hover {
  transform: translateY(-1px);
}

.recado-loja {
  margin: 8px 14px 14px;
  padding: 11px 16px;
  /* Era um degradê lilás com texto violeta - o mesmo lilás que ocupava
     na página o lugar que é do amarelo. Agora é o amarelo da marca na
     sua forma clara, com o texto no azul escuro por cima. É a terceira
     aparição do amarelo na primeira tela, junto do carrinho e do selo
     de economia, e as três são preenchimento com letra escura. */
  border: 1px solid var(--destaque-linha);
  border-radius: 12px;
  background: var(--destaque-suave);
  color: var(--marca-escura);
}




.mais-vendidos,
.promos {
  margin-top: 18px;
  margin-bottom: 18px;
}

.mais-vendidos h2,
.promos h2 {
  letter-spacing: -.025em;
}

#produtos {
  scroll-margin-top: 132px;
}

.card {
  border: 1px solid var(--premium-borda);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(34, 29, 92, .035);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #d8d5f4;
  box-shadow: var(--premium-sombra-hover);
}

.produto-foto {
  background: linear-gradient(180deg, #fff, #fbfbff);
}

.produto-nome-link,
.produto-nome-wrap {
  color: #26263a;
}

.card-preco,
.produto-preco-box {
  font-variant-numeric: tabular-nums;
}

.card .btn,
.card button,
.card a[class*="add"] {
  transition: transform .16s ease, filter .16s ease;
}

.card button:hover,
.card a[class*="add"]:hover {
  filter: brightness(1.04);
}

.carrinho-barra {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -8px 26px rgba(25, 20, 77, .15);
}

.carrinho-barra-cta {
  border-radius: 10px;
}

.toast {
  border-radius: 12px;
  box-shadow: var(--premium-sombra);
}

/* O rodapé claro. A COR DO TEXTO vem junto, obrigatoriamente.

   Trocar só o fundo deixou o rodapé branco sobre branco: o `color` do
   style.css é rgba(255,255,255,.82), feito para o fundo azul-escuro
   original. Na home publicada isso virou um retângulo vazio de 381px
   onde estavam o CNPJ, o CRF da farmacêutica, a autorização sanitária
   e o aviso da Portaria 344 — a identificação que a farmácia é obrigada
   a exibir, apagada sem erro nenhum no console.

   Por isso fundo e tinta andam no mesmo bloco daqui em diante. */
.rodape {
  margin-top: 34px;
  border-top: 1px solid var(--premium-borda);
  background: #fff;
  color: #51566b;
}

/* A primeira linha é o nome e o CNPJ, que o style.css põe em branco
   para o fundo escuro. */
.rodape p:first-child { color: #24213f; }

.rodape a { color: var(--premium-roxo); }

.rodape-container {
  max-width: 1120px;
  margin: 0 auto;
  line-height: 1.65;
}

.rodape-agencia {
  background: #f0eff8;
}

/* Movimento discreto; respeita a preferência de acessibilidade do visitante. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (min-width: 900px) {

  .recado-loja {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .card {
    border-radius: 17px;
  }
}

@media (max-width: 639px) {
  .busca-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .recado-loja {
    margin: 4px 10px 8px;
    padding: 9px 12px;
    font-size: 12px;
  }


  .card {
    border-radius: 12px;
  }

  .card:hover {
    transform: none;
  }
}


/* Segunda camada: consistência de marca e hierarquia visual. */
:root {
  --marca: #242490;
  --marca-escura: #1a1a6e;
  /* Antes #f0effb: lilás. Agora o próprio azul da marca a 10% sobre
     branco - continua claro, mas é azul, e não violeta. */
  --marca-clara: #e9e9f4;
  --marca-xclara: #f4f4fa;
  --papel: #f7f8fa;
  --papel-forte: #eff1f5;
  --papel-vidro: rgba(247, 248, 250, .92);
  --linha: #e4e6ee;

  /* O amarelo da marca. Só preenchimento: ver a regra no topo. */
  --destaque: #FCF000;
  --destaque-escuro: #e3d800;
  --sobre-destaque: #15171C;
  --destaque-suave: #fff8cc;
  --destaque-linha: #f0de8a;

  /* O vermelho, para o corte de preço e o aviso de receita. */
  --corte: #CC1824;
  --corte-suave: #fbe4e6;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-botao: 11px;
  --sombra-sm: 0 2px 8px rgba(20, 23, 40, .05);
  --sombra-md: 0 10px 24px rgba(20, 23, 40, .10);
  --sombra-lg: 0 -8px 26px rgba(20, 23, 40, .14);
}

.header {
  /* Era um degradê de três roxos atravessando a tela. Sai: degradê
     azul-violeta é assinatura de template genérico, e o logo tinha de
     brigar com um fundo que mudava de cor atrás dele. Fica o azul da
     marca, chapado, com um fio mais escuro embaixo para o cartão
     branco da busca ter em que se apoiar. */
  background: var(--marca);
  border-bottom: 1px solid var(--marca-escura);
}

/* O CARRINHO É AMARELO.

   É o passo que vale dinheiro, e é o único lugar do cabeçalho onde o
   amarelo da marca entra. Antes era uma pastilha translúcida sobre o
   roxo: sumia no fundo, e o logo ficava sendo o único amarelo da tela.

   Letra escura por cima, como manda a regra do amarelo (15:1 de
   contraste). */
.header-carrinho {
  border: 1px solid var(--destaque-escuro);
  border-radius: 12px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}

.header-carrinho:hover {
  background: var(--destaque-escuro);
  transform: translateY(-1px);
}

/* A bolinha da quantidade inverte: escura sobre o amarelo. */
.header-carrinho .header-carrinho-qtd {
  background: var(--sobre-destaque);
  color: var(--destaque);
}

.header-carrinho .ic { color: var(--sobre-destaque); }

.header-whats {
  border-radius: 11px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}

.busca-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.filtros-wrap {
  border-bottom-color: #e7e6f4;
}

.filtros button,
.filtros a {
  min-height: 36px;
}




.mais-vendidos,
.promos,
.barra-resultado {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.mais-vendidos h2,
.promos h2 {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.3;
  font-weight: 800;
  color: #24213f;
}

#produtos {
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.card,
.card-mini {
  border-color: #e6e7f0;
  box-shadow: 0 3px 10px rgba(20, 23, 40, .05);
}

.card {
  padding: 10px;
  gap: 9px;
}

.card .produto-foto {
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfbff 100%);
}

.card .produto-nome-link {
  font-size: 13px;
  line-height: 1.4;
  color: #29283c;
}

.card .preco {
  color: #28216f;
  font-size: 17px;
  letter-spacing: -.35px;
}

.btn-add {
  min-height: 40px;
  box-shadow: 0 2px 5px rgba(48, 39, 131, .12);
}

.btn-add:hover {
  box-shadow: 0 5px 12px rgba(48, 39, 131, .18);
}

.card .produto-foto:focus-visible,
.card .produto-nome-link:focus-visible,
.btn-add:focus-visible,
.btn-buscar:focus-visible,
.header a:focus-visible,
.carrinho-barra:focus-visible {
  outline: 3px solid rgba(105, 94, 198, .65);
  outline-offset: 3px;
}

.carrinho {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.carrinho-barra {
  background: var(--marca-escura);
}

.carrinho-barra-cta {
  /* O amarelo já vivia aqui, sozinho e meio desbotado. Agora é o da
     marca e tem companhia - o mesmo amarelo do carrinho no topo e do
     selo de economia no card. */
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-weight: 800;
}

.toast {
  border: 1px solid rgba(48, 39, 131, .12);
}

/* Grade com 4 produtos por linha em telas grandes, sem apertar os cards. */
@media (min-width: 640px) {
  #produtos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
  }

  .card {
    padding: 12px;
    gap: 10px;
  }
}

@media (min-width: 980px) {
  #produtos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
  }

  .card .produto-nome-link {
    font-size: 13.5px;
  }

  .card .preco {
    font-size: 18px;
  }
}

@media (min-width: 1280px) {
  #produtos {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 639px) {
  .header {
    gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-carrinho {
    gap: 5px;
    padding: 7px 8px;
  }

  .busca-container {
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #produtos {
    gap: 10px;
    padding: 10px;
  }

  .card {
    padding: 8px;
    gap: 8px;
  }

  .card .produto-nome-link {
    font-size: 12px;
  }

  .card .preco {
    font-size: 16px;
  }

  .btn-add {
    min-height: 38px;
    font-size: 12px;
  }

  /* O respiro de 18px que a camada premium deu aos blocos é folgado no
     desktop e caro no celular: ele empurrou o primeiro produto de 300px
     para 310px, e o teste-home-dobra existe porque produto abaixo da
     primeira dobra é produto que metade das visitas nunca vê. No
     celular o respiro fica em 6px; no desktop continua 18px. */
  .mais-vendidos {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 6px;
  }
}


/* =====================================================
   O BANNER NO COMPUTADOR
   =====================================================

   Numa tela de 1440, o banner ocupava 439px de altura: começava em
   392px e terminava em 831px. Numa janela de 900, isso é a primeira
   tela inteira sem um único produto — o título "Destaques da semana"
   ficava cortado na borda de baixo. No celular o mesmo banner tem
   138px e o primeiro card aparece em 543px, que é o certo; o defeito
   era só aqui.

   A conta é simples: 3:1 numa faixa de 1250px dá 417px de altura. Não
   é o banner que está errado, é a largura que o deixamos ocupar.

   Por isso a correção é na LARGURA e não no object-fit. Trocar
   `contain` por `cover` resolveria a altura cortando a arte — e a
   razão escrita em style.css continua valendo: banner cortado é
   dinheiro de mídia jogado fora, e ninguém percebe pelo painel. Com
   920px a peça continua inteira, em 3:1, e cabe em 307px.

   No celular nada muda: a regra só vale de 980px para cima.
   ===================================================== */
@media (min-width: 980px) {
  .promos {
    max-width: 920px;
  }

  /* Os pontinhos acompanham a faixa, senão ficam centralizados na
     página e não embaixo do banner. */
  .promos-pontos {
    max-width: 920px;
  }
}

/* Vitrine da loja. As páginas de produto, carrinho e encarte usam a base comum. */
.vitrine-loja {
  --vitrine-largura: 1240px;
  --vitrine-margem: max(14px, calc((100% - var(--vitrine-largura)) / 2));
}

.vitrine-loja .header,
.vitrine-loja .busca-container {
  padding-inline: var(--vitrine-margem);
  background: #fff;
  border-bottom-color: var(--linha);
}

.vitrine-loja .header {
  box-shadow: none;
}

.vitrine-loja .logo {
  box-shadow: none;
}

.vitrine-loja .titulo .status-aberto {
  color: #1a683b;
}

.vitrine-loja .titulo .status-fechado {
  color: #a4312b;
}

.vitrine-loja .header .btn-voltar,
.vitrine-loja .header-whats {
  color: var(--marca-escura);
  background: var(--marca-xclara);
  box-shadow: none;
}

.vitrine-loja .header .btn-voltar:hover,
.vitrine-loja .header-whats:hover {
  background: var(--marca-clara);
}

.vitrine-loja .busca-wrapper {
  min-width: 0;
}

.vitrine-loja .busca-wrapper input {
  background: #f4f6fb;
  box-shadow: none;
}

.vitrine-loja .filtros-wrap {
  padding-bottom: 0;
  border-bottom: 0;
  background: var(--marca-escura);
}

.vitrine-loja .filtros {
  gap: 0;
  padding: 0 var(--vitrine-margem);
}

.vitrine-loja .filtros :is(button, a) {
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  transform: none;
}

.vitrine-loja .filtros :is(button, a):hover,
.vitrine-loja .filtros :is(button, a).ativo {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.vitrine-loja .filtros :is(button, a).ativo {
  box-shadow: inset 0 -3px var(--destaque);
}

.vitrine-loja .filtros :is(button, a):focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.vitrine-loja .filtros-barra {
  height: 4px;
  margin: 0 var(--vitrine-margem);
  border-radius: 0;
  background: rgba(255, 255, 255, .18);
}

.vitrine-loja .filtros-barra .filtros-thumb {
  border-radius: 0;
  background: #e4e9ff;
}

.vitrine-apresentacao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  margin: 12px var(--vitrine-margem) 0;
  padding: clamp(15px, 2.4vw, 30px);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(110deg, var(--marca-escura), #244a9a);
}

.vitrine-apresentacao h2 {
  font-size: clamp(1.35rem, 3.15vw, 2.85rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.vitrine-loja .recado-loja {
  justify-content: flex-start;
  max-width: none;
  margin: 0 var(--vitrine-margem);
  padding: 3px 0;
  border: 0;
  background: none;
  text-align: left;
}

.vitrine-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
}

.vitrine-acoes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.vitrine-whats {
  padding-inline: 11px;
  border-radius: 10px;
  background: var(--destaque);
  color: var(--sobre-destaque);
}

.vitrine-whats:hover {
  background: var(--destaque-escuro);
}

.vitrine-catalogo {
  color: #fff;
}

.vitrine-catalogo:hover {
  text-decoration: underline;
}

.vitrine-acoes a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.vitrine-ilustracao {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(135px, 20vw, 255px);
  min-height: 112px;
}

.vitrine-ilustracao::before {
  position: absolute;
  z-index: -1;
  width: 135%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #8ab5ff66, transparent 68%);
  content: "";
}

.vitrine-ilustracao-cruz {
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 27px;
  background: #edf4ff;
  box-shadow: 0 10px 20px #0a20554d;
  transform: rotate(-12deg);
}

.vitrine-ilustracao-cruz::before {
  width: 58%;
  aspect-ratio: 1;
  background: #3055a5;
  clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%);
  content: "";
}

.vitrine-ilustracao .ic {
  position: absolute;
  right: 14%;
  bottom: 0;
  padding: 7px;
  border-radius: 13px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  transform: rotate(12deg);
}

#vitrine-destaques {
  scroll-margin-top: calc(var(--teto-grudado, 215px) + 8px);
}

.vitrine-loja .mais-vendidos,
.vitrine-loja #categoriasHome {
  max-width: calc(var(--vitrine-largura) + 28px);
  margin-inline: auto;
}

.vitrine-loja .mais-vendidos h2,
.vitrine-loja .categoria-bloco-header h2 {
  color: var(--marca-escura);
  font-size: clamp(17px, 1.75vw, 22px);
  letter-spacing: -.025em;
}

.vitrine-loja .card-mini {
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 639px) {
  .vitrine-loja {
    --vitrine-margem: 10px;
  }

  .vitrine-apresentacao {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
    border-radius: 16px;
  }

  .vitrine-ilustracao {
    display: none;
  }
}

@media (min-width: 980px) {
  .vitrine-abertura:has(#promos:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 8px var(--vitrine-margem) 0;
  }

  .vitrine-abertura:has(#promos:not([hidden])) .vitrine-apresentacao {
    margin: 0;
  }

  .vitrine-abertura:has(#promos:not([hidden])) .vitrine-ilustracao {
    width: clamp(100px, 11vw, 155px);
  }

  .vitrine-campanha .promos {
    padding: 0;
    scroll-padding-inline: 0;
  }

  .vitrine-campanha .promos-pontos {
    margin: 8px 0 0;
  }
}