/* Catálogo Fazendo Aqui — CSS consolidado.
   Ajustes principais: :root define a largura mínima dos cartões e a distância entre eles.
   Edite as variáveis para ajustar cartões e busca em conjunto. */


/* ===== GERAL ===== */

:root {
  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: #18212e;
  background: #f8f9fc;
  font-synthesis: none;
  --largura-cartao: 500px;
  --espacamento-cartoes: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

button,input,a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

.limite {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}


/* ===== CABEÇALHO ===== */

.topo {
  background: #151923;
  color: white;
}

.topo-interno {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cabecalho-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.marca {
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.marca-icone {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #e0ad65;
  color: #20202a;
  font-size: 24px;
}

.link-topo {
  font-size: 14px;
  color: #e4e4ed;
}

.logo-marca {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.redes-sociais {
  display: flex;
  align-items: center;
  gap: 18px;
}

.redes-sociais a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: inherit;
  transition: transform 0.2s ease;
}

.redes-sociais a:hover {
  transform: scale(1.15);
}

.redes-sociais svg {
  width: 27px;
  height: 27px;
}

#whatsapp {
  color: #25D366;
}


/* ===== BANNER ===== */

.hero {
  background: linear-gradient(125deg,#222b3d,#131820);
  color: #fff;
  border-radius: 24px;
  padding: 54px 42px;
  margin: 34px 0 32px;
}

.hero-banner {
  position: relative;
  width: min(100%, 1400px);
  height: clamp(260px, 32vw, 470px);
  margin: 28px auto 32px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  transition: opacity .15s ease-out;
}

.imagem-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sobretitulo {
  color: #d8b47f;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 750;
}

.hero h1 {
  max-width: 650px;
  font-size: clamp(30px,5vw,52px);
  line-height: 1.1;
  letter-spacing: -.04em;
  margin: 14px 0;
}

.hero p {
  max-width: 570px;
  color: #d7dce5;
  line-height: 1.6;
}


/* ===== TÍTULOS E NAVEGAÇÃO ===== */

.secao-cab {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin: 22px 0;
}

.secao-cab h2 {
  margin: 0 0 7px;
  font-size: 26px;
  letter-spacing: -.03em;
}

.secao-cab p {
  color: #667083;
  margin: 0;
  line-height: 1.5;
}

.voltar {
  border: 0;
  background: transparent;
  color: #5c6575;
  padding: 0;
  font-size: 14px;
  margin-top: 34px;
}

.voltar:hover {
  text-decoration: underline;
}

.cab-categoria h1 {
  font-size: clamp(28px,4vw,42px);
  margin: 14px 0 8px;
  letter-spacing: -.04em;
}

.cab-categoria p {
  color: #667083;
  margin: 0 0 26px;
}

.cab-categoria .trilha {
  font-size: 13px;
  color: #9a712f;
  margin: 20px 0 0;
  font-weight: 700;
}


/* ===== CATEGORIAS ===== */

.grade-categorias {
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 24px;
}

.grade-categorias-inicio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-cartao)), 1fr));
  gap: var(--espacamento-cartoes);
}

.categoria {
  border: 1px solid #e8e9ee;
  background: white;
  border-radius: 20px;
  text-align: left;
  padding: 27px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 252px;
  box-shadow: 0 5px 22px #15203007;
  transition: transform .2s,border .2s;
}

.categoria:hover,.categoria:focus-visible {
  transform: translateY(-3px);
  border-color: #d0ac79;
}

.categoria .simbolo {
  font-size: 37px;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: #f6f0e6;
  border-radius: 18px;
  color: #815a24;
}

.categoria strong {
  font-size: 20px;
}

.categoria .desc {
  color: #657184;
  line-height: 1.5;
  font-size: 14px;
  flex: 1;
}

.categoria .explorar {
  color: #a16b25;
  font-weight: 750;
  font-size: 14px;
}

.grade-categorias-inicio .categoria-com-fotos {
  min-height: 500px;
}

.categoria-com-fotos .categoria-fotos {
  width: 100%;
  height: 220px;
  display: grid;
  gap: 5px;
  background: #f0eee9;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.categoria-com-fotos .categoria-fotos.fotos-1 {
  grid-template-columns: 1fr;
}

.categoria-com-fotos .categoria-fotos.fotos-3 {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.categoria-com-fotos .categoria-fotos.fotos-3 .categoria-foto:first-child {
  grid-row: span 2;
}

.categoria-com-fotos .categoria-foto {
  min-width: 0;
  min-height: 0;
}

.categoria-com-fotos .categoria-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.categoria-com-fotos .categoria-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 26px;
  color: inherit;
  text-decoration: none;
}

.categoria-com-fotos .categoria-texto strong {
  font-size: 23px;
}

.categoria-com-fotos .categoria-texto .explorar {
  margin-top: auto;
}


/* ===== CARROSSEL ===== */

.categoria-com-fotos .categoria-carrossel {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  background: #f0eee9;
}

.categoria-com-fotos .categoria-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  pointer-events: none;
}

.categoria-com-fotos .categoria-slide.ativo {
  opacity: 1;
}

.categoria-com-fotos .contador-carrossel {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #161a22b5;
  color: #fff;
  font-size: 12px;
  z-index: 3;
  pointer-events: none;
}

.grade-categorias .categoria img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: #ffffff;
}

.categoria-com-fotos .categoria-imagem-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.categoria-com-fotos .seta-carrossel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(22,26,34,.76);
  color: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background .2s;
}

.categoria-com-fotos .seta-carrossel:hover, .categoria-com-fotos .seta-carrossel:focus-visible {
  background: rgba(22,26,34,.95);
}

.categoria-com-fotos .seta-anterior {
  left: 12px;
}

.categoria-com-fotos .seta-proxima {
  right: 12px;
}


/* ===== BUSCA ===== */

.busca {
  width: 100%;
  max-width: 420px;
  background: white;
  border: 1px solid #dce0e7;
  border-radius: 12px;
  padding: 13px 15px;
  outline-offset: 2px;
  margin: 0 0 24px;
}



.secao-busca {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-cartao)), 1fr));
  column-gap: var(--espacamento-cartoes);
}

.secao-cab .secao-busca {
  width: 100%;
  min-width: 0;
  flex: 1;
}

.secao-busca h2 {
  grid-column: 1 / -1;
}

.busca-inicio {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 20px 0 24px;
  padding: 17px 20px;
  border: 1px solid #dce0e7;
  border-radius: 14px;
  background: white;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}

.secao-busca .busca-inicio {
  width: 100%;
  max-width: none;
  grid-column: 1;
}

.busca-inicio:focus {
  outline: none;
  border-color: #a16b25;
  box-shadow: 0 0 0 3px #a16b2520;
}


/* ===== PRODUTOS ===== */

.grade-produtos {
  margin-bottom: 55px;
  display: grid;
  grid-template-columns: repeat(

    auto-fit,

    minmax(min(100%, 280px), 1fr)

  );
  gap: 24px;
}

.produto {
  background: white;
  border: 1px solid #e7e9ed;
  border-radius: 20px;
  overflow: hidden;
}

.foto {
  height: 300px;
  background: linear-gradient(145deg,#f1f3f7,#e8e9ed);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.foto .vazia {
  color: #929aaa;
  text-align: center;
  padding: 25px;
  max-width: 250px;
}

.foto .vazia span {
  display: block;
  font-size: 52px;
  margin-bottom: 13px;
  color: #ac916b;
}

.miolo {
  padding: 22px;
}

.miolo h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.descricao {
  font-size: 14px;
  color: #6b7484;
  line-height: 1.5;
  margin: 0 0 16px;
}

.preco {
  font-weight: 800;
  margin: 0 0 16px;
}

.legenda {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
}

.cores {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 13px;
}

.cor {
  border: 1px solid #e0e3e8;
  background: white;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #596273;
  font-size: 12px;
}

.cor.ativa {
  border-color: #2a3240;
  color: #141c29;
  box-shadow: 0 0 0 1px #2a3240;
}

.bolinha {
  height: 17px;
  width: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #0002;
  background: var(--cor);
}

.selecionada {
  font-size: 12px;
  color: #647084;
  margin: 0 0 17px;
}

.acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #202b3a;
  color: #fff;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 750;
}

.acao:hover {
  background: #394759;
}

.acao[disabled] {
  background: #a5acb8;
  cursor: not-allowed;
}


/* ===== OUTROS ===== */

.vazio {
  background: white;
  padding: 32px;
  border-radius: 16px;
  color: #697385;
}

.rodape {
  border-top: 1px solid #e4e7ee;
  color: #798192;
  padding: 25px 0;
  font-size: 12px;
  text-align: center;
}

.aviso {
  margin: 0 0 20px;
  color: #805d2d;
  background: #fff4e2;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13px;
}

[hidden] {
  display: none !important;
}

.container, .conteudo, .wrap {
  width: 100%;
  max-width: none;
}


/* ===== TELAS INTERMEDIÁRIAS ===== */
@media (min-width: 701px) and (max-width: 850px) {

  .grade-categorias {
    gap: 10px;
  }

  .categoria {
    padding: 18px;
  }

}


/* ===== DESKTOP ===== */
@media (min-width: 1024px) {

  .container, .conteudo, .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }

  .limite {
    width: 100%;
    max-width: none;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0 auto;
  }

}


/* ===== CELULARES ===== */
@media (max-width: 700px) {

  .topo-interno {
    height: 65px;
  }

  .hero {
    padding: 35px 25px;
    border-radius: 17px;
    margin-top: 20px;
  }

  .grade-categorias {
    grid-template-columns: 1fr;
  }

  .categoria {
    min-height: 188px;
  }

  .grade-produtos {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .foto {
    height: 285px;
  }

  .secao-cab h2 {
    font-size: 23px;
  }

  .grade-categorias-inicio {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .grade-categorias-inicio .categoria-com-fotos {
    min-height: 320px;
  }

  .categoria-com-fotos .categoria-fotos {
    height: 190px;
  }

  .categoria-com-fotos .categoria-texto {
    padding: 18px;
  }

  .categoria-com-fotos .categoria-texto strong {
    font-size: 20px;
  }

  .categoria-com-fotos .categoria-carrossel {
    height: 230px;
  }

  .categoria-com-fotos .seta-carrossel {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .hero-banner {
    height: 240px;
    margin: 18px auto 24px;
    border-radius: 16px;
  }

  .limite {
    padding-left: 16px;
    padding-right: 16px;
  }

}


/* ===== CELULARES PEQUENOS ===== */
@media (max-width: 600px) {

  .logo-marca {
    width: 40px;
    height: 40px;
  }

  .marca {
    gap: 8px;
  }

  .redes-sociais {
    gap: 8px;
  }

  .redes-sociais a {
    width: 34px;
    height: 34px;
  }

}


/* ===== MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {

  .categoria-com-fotos .categoria-slide {
    transition: none;
  }

  .hero-banner {
    transition: none;
  }

}


/* ==================================================
   BARRA DE PESQUISA EM LARGURA TOTAL
   ================================================== */



.secao-cab .secao-busca {
  display: block;
  width: 100%;
  flex: 1;
  min-width: 0;
}

/* Título da pesquisa */
.secao-busca h2 {
  width: 100%;
  margin-bottom: 18px;
}

/* Barra de pesquisa ocupando toda a largura */
.secao-busca .busca-inicio {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;

  margin: 0 0 24px;
  padding: 17px 20px;

  border: 1px solid #dce0e7;
  border-radius: 14px;
  background: #ffffff;

  font-size: 16px;
}


/* ===== BUSCA E FILTROS DA PÁGINA INICIAL ===== */
.busca-com-filtro { display:flex; align-items:stretch; gap:12px; width:100%; margin:0 0 20px; }
.busca-com-filtro .busca-inicio { flex:1; min-width:0; width:auto; margin:0; }
.botao-filtro { flex:0 0 auto; padding:0 22px; border-radius:14px; border:1px solid #dce0e7; background:#fff; color:#202b3a; font-weight:700; }
.botao-filtro:hover, .botao-filtro[aria-expanded="true"] { border-color:#a16b25; background:#fff8ef; }
.painel-filtros { padding:20px; margin:0 0 26px; background:#fff; border:1px solid #e5e7ec; border-radius:16px; }
.campos-filtro { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.campos-filtro label { display:flex; flex-direction:column; gap:8px; color:#384355; font-size:13px; font-weight:700; min-width:0; }
.campos-filtro select { width:100%; min-width:0; padding:12px; border:1px solid #dce0e7; border-radius:10px; background:#fff; color:#18212e; }
.limpar-filtros { margin-top:16px; border:1px solid #dce0e7; background:#f8f9fc; border-radius:10px; padding:10px 16px; }
@media(max-width:900px) { .campos-filtro { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .campos-filtro { grid-template-columns:1fr; } .busca-com-filtro { gap:8px; } .botao-filtro { padding:0 12px; } }

/* Busca e filtros em todas as páginas */
.secao-cab:has(.secao-busca) { width: 100%; }
.secao-cab .secao-busca { display: block; flex: 1; min-width: 0; width: 100%; }
.secao-busca .busca-com-filtro { width: 100%; }
.secao-busca .busca-inicio { width: 100%; max-width: none; min-width: 0; }
#resultados-busca[hidden], .grade-categorias[hidden], .grade-produtos[hidden] { display: none !important; }



/* ==========================================
   CABEÇALHO COM RECOLHIMENTO SUAVE
   ========================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(21, 25, 35, 0.98);
  border-bottom: 2px solid #d8b47f;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.topo-interno {
  height: 96px;
  min-height: 0;

  transition: height 0.3s ease;
}

.logo-marca {
  width: 62px;
  height: 62px;

  transition:
    width 0.3s ease,
    height 0.3s ease;
}

/* Cabeçalho compacto durante a rolagem */
.topo.topo-compacto {
  background: rgba(21, 25, 35, 0.96);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
}

.topo.topo-compacto .topo-interno {
  height: 68px;
}

.topo.topo-compacto .logo-marca {
  width: 44px;
  height: 44px;
}

/* Celulares */
@media (max-width: 700px) {
  .topo-interno {
    height: 76px;
  }

  .topo.topo-compacto .topo-interno {
    height: 60px;
  }

  .logo-marca {
    width: 46px;
    height: 46px;
  }

  .topo.topo-compacto .logo-marca {
    width: 38px;
    height: 38px;
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .topo,
  .topo-interno,
  .logo-marca {
    transition: none;
  }
}


/* ==========================================
   MARGENS E BORDAS DO CABEÇALHO
   ========================================== */

/* Cabeçalho fixo com borda inferior */
.topo {
  width: 100%;
  border-bottom: 2px solid #d8b47f;
  box-sizing: border-box;
}

/* Espaçamento das laterais */
.topo .topo-interno {
  width: 100%;
  max-width: none;

  padding-left: 65px;
  padding-right: 65px;

  box-sizing: border-box;
}

/* Conteúdo do cabeçalho */
.topo .cabecalho-conteudo {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Celulares */
@media (max-width: 700px) {
  .topo .topo-interno {
    padding-left: 20px;
    padding-right: 20px;
  }

  .topo .cabecalho-conteudo {
    gap: 12px;
  }
}

/* ===== NOME E SUBTÍTULO NO CABEÇALHO ===== */
.marca-textos { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
#nome-loja { font-size: 20px; font-weight: 800; line-height: 1.2; }
.marca-subtitulo { font-size: 12px; font-weight: 400; color: #d8b47f; letter-spacing: .4px; line-height: 1.3; }
@media (max-width: 700px) {
  #nome-loja { font-size: 16px; }
  .marca-subtitulo { font-size: 10px; letter-spacing: 0; }
}

/* ===== PESQUISA INTELIGENTE ===== */
.campo-busca-inteligente { position: relative; flex: 1 1 auto; min-width: 0; }
.campo-busca-inteligente .busca-inicio { width: 100%; height: 100%; }
.sugestoes-busca { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 110;
  max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #dce0e7;
  border-radius: 14px; box-shadow: 0 14px 30px rgba(21,25,35,.16); padding: 6px; }
.sugestoes-busca[hidden] { display: none !important; }
.sugestao-item { display:flex; width:100%; flex-direction:column; align-items:flex-start;
  gap:4px; border:0; border-radius:10px; background:transparent; color:#18212e;
  padding:12px 14px; text-align:left; cursor:pointer; }
.sugestao-item:hover, .sugestao-item.ativa, .sugestao-item:focus-visible { background:#fff4e2; outline:none; }
.sugestao-nome { font-weight:650; font-size:14px; }
.sugestao-categoria { font-size:12px; color:#667083; }
@media(max-width:600px) { .sugestoes-busca { max-height: 245px; } }

/* Ordenação geral de produtos */
.barra-ordenacao {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 20px;
}
.barra-ordenacao label { font-size: 14px; color: #536070; font-weight: 600; }
.barra-ordenacao select {
  max-width: 100%; min-width: 190px; padding: 11px 14px;
  background: white; color: #18212e; border: 1px solid #dce0e7;
  border-radius: 11px; font: inherit;
}
@media(max-width: 600px) {
  .barra-ordenacao { justify-content: stretch; }
  .barra-ordenacao select { flex: 1; min-width: 0; }
}

/* ===== CAMINHO DE NAVEGAÇÃO (BREADCRUMB) ===== */
.caminho-navegacao {
  margin: 18px 0 12px;
  color: #667083;
  font-size: 14px;
}
.caminho-navegacao ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.caminho-navegacao li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.caminho-navegacao li + li::before { content: "›"; color: #9aa3af; font-size: 18px; }
.caminho-navegacao a { color: #876026; text-decoration: none; }
.caminho-navegacao a:hover { text-decoration: underline; }
.caminho-navegacao a:focus-visible { outline: 2px solid #a16b25; outline-offset: 3px; border-radius: 3px; }
.caminho-navegacao [aria-current="page"] { color: #313b49; font-weight: 700; }
@media (max-width: 700px) {
  .caminho-navegacao { font-size: 13px; margin-top: 14px; }
}

/* ==========================================================
   EXPERIÊNCIA MOBILE — ajustes sem alterar lógica do catálogo
   ========================================================== */

/* Protege conteúdos e links de estouro horizontal. */
#app, .secao-busca, .cab-categoria, .categoria, .produto { min-width: 0; }
img, svg { max-width: 100%; }

/* Melhora a navegação por teclado e a área de toque em telas sensíveis. */
@media (pointer: coarse) {
  .redes-sociais a,
  .seta-carrossel,
  .cor,
  .botao-filtro,
  .limpar-filtros,
  .acao,
  .sugestao-item,
  .voltar { min-height: 44px; }
  .cor { padding: 9px 12px; }
}

@media (max-width: 700px) {
  /* Cabeçalho fixo, mas com largura bem distribuída. */
  .topo .topo-interno.cabecalho-conteudo {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 12px;
  }
  .marca { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .marca-textos { min-width: 0; gap: 2px; }
  #nome-loja { font-size: clamp(13px, 3.7vw, 16px); overflow-wrap: anywhere; }
  .marca-subtitulo { font-size: clamp(9px, 2.4vw, 10px); line-height: 1.2; }
  .redes-sociais { flex: 0 0 auto; gap: 6px; }
  .redes-sociais a { width: 44px; height: 44px; }
  .redes-sociais svg { width: 25px; height: 25px; }
  .topo .topo-interno { height: 76px; }
  .topo.topo-compacto .topo-interno { height: 62px; }

  /* Área de conteúdo, inclusive o recorte do celular. */
  .limite {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .hero-banner { width: 100%; height: clamp(145px, 46vw, 240px); margin: 16px auto 22px; }
  .secao-cab { margin: 16px 0; }
  .secao-cab h2 { font-size: clamp(20px, 5.6vw, 23px); }
  .cab-categoria h1 { overflow-wrap: anywhere; }

  /* Busca e filtros não criam rolamento horizontal. */
  .busca-com-filtro { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
  .campo-busca-inteligente { min-width: 0; }
  .busca-com-filtro .busca-inicio { min-width: 0; font-size: 16px; padding: 13px 12px; }
  .botao-filtro { min-height: 48px; padding: 0 14px; white-space: nowrap; }
  .painel-filtros { padding: 16px; }
  .campos-filtro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .campos-filtro select { min-height: 46px; font-size: 16px; }
  .limpar-filtros { min-height: 44px; }
  .sugestoes-busca { max-height: min(45vh, 260px); }
  .barra-ordenacao { justify-content: flex-start; gap: 8px; }
  .barra-ordenacao select { flex: 1 1 auto; min-width: 0; min-height: 46px; font-size: 16px; }

  /* Cartões: uma coluna, imagem proporcional e controles confortáveis. */
  .grade-categorias, .grade-categorias-inicio, .grade-produtos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .categoria { padding: 0; overflow: hidden; }
  .grade-categorias-inicio .categoria-com-fotos { min-height: 0; }
  .categoria-com-fotos .categoria-carrossel { height: clamp(190px, 55vw, 290px); }
  .categoria-com-fotos .categoria-texto { padding: 18px; }
  .produto .foto { height: clamp(225px, 75vw, 330px); }
  .produto .miolo { padding: 18px; }
  .cor { max-width: 100%; }
  .caminho-navegacao { line-height: 1.5; }
}

/* Em celulares estreitos, o botão Filtros passa para a linha abaixo. */
@media (max-width: 420px) {
  .busca-com-filtro { flex-wrap: wrap; }
  .campo-busca-inteligente { flex: 1 1 100%; }
  .botao-filtro { flex: 1 1 100%; min-height: 44px; }
  .campos-filtro { grid-template-columns: minmax(0, 1fr); }
  .barra-ordenacao { flex-direction: column; align-items: stretch; }
  .barra-ordenacao select { width: 100%; }
  .redes-sociais { gap: 0; }
  .marca-subtitulo { letter-spacing: 0; }
}

@media (max-width: 360px) {
  /* Evita que a legenda longa empurre os ícones para fora da tela. */
  .marca-subtitulo { display: none; }
  .topo .topo-interno.cabecalho-conteudo { gap: 5px; }
  .logo-marca { width: 38px; height: 38px; }
  .topo.topo-compacto .logo-marca { width: 34px; height: 34px; }
}


/* ===== Favoritos e lista de orçamento ===== */
.atalho-lista{position:fixed;right:22px;bottom:20px;z-index:1050;border:1px solid #d8b47f;background:#151923;color:#fff;border-radius:999px;padding:13px 19px;font-size:15px;font-weight:750;box-shadow:0 5px 25px #0003;min-height:48px;cursor:pointer}
.contador-lista{display:inline-grid;place-items:center;background:#d8b47f;color:#151923;border-radius:50%;min-width:24px;height:24px;margin-left:7px;padding:0 5px}
.acoes-produto{display:flex;flex-direction:column;gap:8px}
.acao-adicionar{background:#f6eee2;color:#4b361e;border:1px solid #d4b78a}
.acao-adicionar:hover{background:#ead7bc}
.botao-favorito{border:1px solid #dce0e7;background:#fff;border-radius:10px;padding:11px 14px;min-height:44px;color:#9b5d41;font-weight:700}
.botao-favorito[aria-pressed="true"]{background:#fff3f1;border-color:#c9786a}
.fundo-minha-lista{position:fixed;inset:0;background:#111827a8;z-index:1200}
.painel-minha-lista{position:fixed;top:0;right:0;height:100dvh;width:min(460px,100%);z-index:1201;background:white;box-shadow:-12px 0 36px #0003;display:flex;flex-direction:column;color:#18212e}
.painel-minha-lista[hidden],.fundo-minha-lista[hidden]{display:none!important}
.topo-minha-lista{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px;border-bottom:1px solid #e9e9ee}
.topo-minha-lista h2{font-size:23px;margin:0}
.topo-minha-lista button{border:0;background:transparent;padding:9px;font-size:21px}
.abas-minha-lista{display:flex;gap:8px;padding:14px 22px;border-bottom:1px solid #eceef1}
.abas-minha-lista button{flex:1;min-height:44px;background:#f5f5f7;border:1px solid #e2e5eb;border-radius:10px}
.abas-minha-lista button.ativa{background:#202b3a;color:#fff}
.conteudo-minha-lista{overflow:auto;flex:1;padding:18px 22px;overscroll-behavior:contain}
.item-minha-lista{padding:15px 0;border-bottom:1px solid #edf0f4}
.item-minha-lista strong{display:block;margin-bottom:7px}
.item-minha-lista p{font-size:13px;color:#596273;margin:5px 0}
.acoes-item-lista{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.acoes-item-lista button{border:1px solid #dce0e7;background:#fff;border-radius:9px;padding:10px 13px;min-height:44px}
.acoes-item-lista label{display:flex;align-items:center;gap:8px;font-size:13px}
.acoes-item-lista input{width:75px;min-height:44px;padding:7px;border:1px solid #dce0e7;border-radius:8px}
.rodape-minha-lista{padding:16px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #eceef1;background:#fff}
.lista-vazia{color:#667083;line-height:1.6}
body.lista-aberta{overflow:hidden}
@media(max-width:700px){.atalho-lista{bottom:calc(12px + env(safe-area-inset-bottom));right:12px;padding:11px 15px}.topo-minha-lista{padding:16px}.abas-minha-lista{padding:12px 16px}.conteudo-minha-lista{padding:12px 16px}.rodape-minha-lista{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.atalho-lista{transition:none}}



/* ==========================================
   BOTÃO VOLTAR AO TOPO
   ========================================== */

.voltar-topo {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #151923;
  color: #d8b47f;

  border: 2px solid #d8b47f;
  border-radius: 50%;

  font-size: 26px;
  font-weight: bold;

  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.voltar-topo:hover {
  transform: translateY(-4px);
  background: #293244;
}

.voltar-topo:focus-visible {
  outline: 3px solid #d8b47f;
  outline-offset: 3px;
}

/* Celulares */
@media (max-width: 700px) {
  .voltar-topo {
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 90px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voltar-topo {
    transition: none;
  }
}


/* ==========================================
   POSICIONAMENTO DO BOTÃO VOLTAR AO TOPO
   ========================================== */

/* Computadores e tablets */
.voltar-topo {
  bottom: 100px;
  right: 28px;
  z-index: 1100;
}

/* Celulares */
@media (max-width: 700px) {
  .voltar-topo {
    bottom: 150px;
    right: 16px;
  }
}


/* Carrinho de compras no cabeçalho */

.carrinho-cabecalho {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  padding: 0;

  border: none;
  background: transparent;
  color: #ffffff;

  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}


/* Carrinho: destaque apenas no ícone */

.carrinho-cabecalho:hover {
  transform: none;
  color: #d8b47f;
}

/* Transição aplicada somente ao desenho */
.carrinho-cabecalho svg {
  transition: transform 0.2s ease;
}

/* Amplia somente o carrinho */
.carrinho-cabecalho:hover svg {
  transform: scale(1.15);
}

/* Divisor permanece com cor e tamanho fixos */
.carrinho-cabecalho::before {
  background: #d8b47f;
}


.carrinho-cabecalho:focus-visible {
  outline: 2px solid #d8b47f;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Celulares */
@media (max-width: 600px) {
  .carrinho-cabecalho {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  .carrinho-cabecalho svg {
    width: 24px;
    height: 24px;
  }
}

/* Gaveta Minha lista: abre da direita e fecha para a direita */
.painel-minha-lista {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(.22,1,.36,1), visibility 320ms;
  will-change: transform;
}
.painel-minha-lista.visivel {
  transform: translateX(0);
  visibility: visible;
}
.fundo-minha-lista {
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms;
}
.fundo-minha-lista.visivel {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .painel-minha-lista, .fundo-minha-lista { transition: none; }
}

/* Botões independentes de limpeza de Orçamento e Favoritos */
.rodape-minha-lista .botao-limpar-lista {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  min-height: 44px;
  border: 1px solid #c67b7b;
  border-radius: 10px;
  background: #fff;
  color: #9b3030;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.rodape-minha-lista .botao-limpar-lista:hover:not(:disabled) {
  background: #fff3f3;
}
.rodape-minha-lista .botao-limpar-lista:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.rodape-minha-lista .botao-limpar-lista[hidden] { display: none !important; }


/* Resumo automático dos itens da gaveta Minha lista */
.resumo-minha-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.resumo-lista-metrica {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #f8f9fc;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
}
.resumo-lista-metrica span {
  font-size: 12px;
  color: #647084;
  line-height: 1.3;
}
.resumo-lista-metrica strong {
  color: #18212e;
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 370px) {
  .resumo-lista-metrica { padding: 9px; }
  .resumo-lista-metrica strong { font-size: 21px; }
}

/* Itens da gaveta: informações à esquerda, ações à direita */
.item-minha-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.descricao-item-lista { min-width: 0; overflow-wrap: anywhere; }
.item-minha-lista .acoes-item-lista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  flex-wrap: nowrap;
}
.quantidade-lista { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.quantidade-lista label { font-size: 11px; font-weight: 700; color: #596273; }
.controle-quantidade { display: flex; align-items: stretch; border: 1px solid #dce0e7; border-radius: 8px; overflow: hidden; background: #fff; }
.controle-quantidade input[type="number"] {
  width: 52px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 2px 5px 7px;
  margin: 0;
  text-align: center;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.controle-quantidade input::-webkit-inner-spin-button,
.controle-quantidade input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.setas-quantidade { display: flex; flex-direction: column; width: 34px; border-left: 1px solid #dce0e7; }
.item-minha-lista .setas-quantidade button {
  flex: 1;
  min-height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f5f6f9;
  font-size: 11px;
  line-height: 1;
}
.item-minha-lista .setas-quantidade button + button { border-top: 1px solid #dce0e7; }
.item-minha-lista .setas-quantidade button:hover:not(:disabled) { background: #e8dfd0; }
.item-minha-lista .setas-quantidade button:disabled { opacity: .35; cursor: not-allowed; }
.item-minha-lista .remover-item-lista { min-height: 34px; padding: 5px 8px; font-size: 12px; }
@media (max-width: 380px) {
  .item-minha-lista { gap: 7px; }
  .controle-quantidade input[type="number"] { width: 42px; }
  .setas-quantidade { width: 30px; }
}


/* Divisor entre WhatsApp e carrinho */

.carrinho-cabecalho {
  position: relative;
  margin-left: 12px;
}

.carrinho-cabecalho::before {
  content: "";
  position: absolute;

  width: 1px;
  height: 26px;

  background: #d8b47f;

  left: -12px;
  top: 50%;
  transform: translateY(-50%);

  pointer-events: none;
}

/* Celulares */
@media (max-width: 700px) {
  .carrinho-cabecalho {
    margin-left: 8px;
  }

  .carrinho-cabecalho::before {
    left: -8px;
    height: 22px;
  }
}

/* Opção antiga ou removida do cadastro: não substituir silenciosamente. */
.aviso-opcao-lista {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid #b45309;
  background: #fff7ed;
  color: #92400e;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

/* Miniaturas dos itens da gaveta Minha lista */
.item-minha-lista {
  grid-template-columns: 88px minmax(0, 1fr) auto;
  margin-left: 16px;
  margin-right: 16px;
}
.miniatura-item-lista {
  position: relative;
  width: 88px;
  height: 88px;
  border: 1px solid #e7e9ed;
  border-radius: 12px;
  background: #f7f8fa;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.miniatura-item-lista img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.miniatura-item-lista .miniatura-vazia {
  position: absolute;
  color: #a3a9b4;
  font-size: 28px;
}
@media (max-width: 700px) {
  .item-minha-lista { grid-template-columns: 64px minmax(0, 1fr) auto; margin-left: 12px; margin-right: 12px; gap: 8px; }
  .miniatura-item-lista { width: 64px; height: 64px; }
}
@media (max-width: 380px) {
  .item-minha-lista { grid-template-columns: 56px minmax(0, 1fr) auto; margin-left: 8px; margin-right: 8px; gap: 6px; }
  .miniatura-item-lista { width: 56px; height: 56px; }
}

/* Bolinha de cor ao lado da variante selecionada */
.detalhe-cor-lista { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.bolinha-cor-lista { display:inline-block; width:14px; height:14px; flex-shrink:0; border-radius:50%; border:1px solid rgba(0,0,0,.22); box-shadow:0 0 0 1px rgba(255,255,255,.5); }
/* Totais de orçamento e subtotais por item */
.preco-item-lista, .subtotal-item-lista { margin:5px 0 0; font-size:12px; }
.subtotal-item-lista { font-weight:700; color:#18212e; }
.total-estimado-lista { margin:12px 16px; padding:14px 16px; border:1px solid #dce0e7; background:#f8f9fc; border-radius:12px; }
.total-estimado-lista[hidden] { display:none!important; }
.linha-total-estimado { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; font-weight:700; }
.linha-total-estimado strong { font-size:20px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.total-estimado-lista p { margin:9px 0 0; font-size:12px; line-height:1.45; color:#647084; }
@media(max-width:700px) { .total-estimado-lista { margin:12px 12px; padding:12px; } .linha-total-estimado strong { font-size:18px; } }

/* Campo de instruções de personalização por item do orçamento */
.campo-observacoes-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.campo-observacoes-lista label { font-size: 12px; font-weight: 700; color: #384355; }
.campo-observacoes-lista textarea {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  resize: vertical; min-height: 66px; max-height: 200px;
  padding: 9px 10px; font: inherit; font-size: 13px; line-height: 1.45;
  color: #18212e; background: #fff; border: 1px solid #dce0e7; border-radius: 9px;
}
.campo-observacoes-lista textarea:focus-visible { outline: 2px solid #a16b25; outline-offset: 1px; }
.campo-observacoes-lista textarea::placeholder { color: #778193; }

/* ===== ETIQUETAS NOS CARTOES DE PRODUTOS ===== */
.foto .etiquetas-produto {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}
.foto .etiqueta-produto {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #243146;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: 0 2px 7px rgba(0,0,0,.12);
}
.foto .etiqueta-novidade { background: #185a48; }
.foto .etiqueta-promocao { background: #a33b2d; }
.foto .etiqueta-mais-vendido { background: #76501e; }
.foto .etiqueta-sob-encomenda { background: #37465b; }
@media (max-width: 700px) {
  .foto .etiquetas-produto { top: 10px; left: 10px; gap: 5px; }
  .foto .etiqueta-produto { font-size: 10px; padding: 5px 8px; }
}

/* ===== Visualização ampliada de fotografias ===== */
.produto .foto img[data-img], .item-minha-lista .miniatura-item-lista img {
  cursor: zoom-in;
}
.produto .foto img[data-img]:focus-visible,
.item-minha-lista .miniatura-item-lista img:focus-visible {
  outline: 3px solid #d8b47f;
  outline-offset: -3px;
}
.visualizador-fotos[hidden] { display: none !important; }
.visualizador-fotos { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; }
.visualizador-fundo { position: absolute; inset: 0; background: rgba(12, 16, 24, .88); }
.visualizador-conteudo { position: relative; z-index: 1; width: min(100%, 1100px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; outline: none; }
.visualizador-imagem { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 125px); object-fit: contain; border-radius: 10px; background: white; }
.visualizador-legenda { margin: 0; color: #fff; text-align: center; font-size: 14px; line-height: 1.4; }
.visualizador-fechar { position: absolute; top: 0; right: 0; z-index: 2; transform: translate(35%, -35%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #dce0e7; color: #151923; font-size: 22px; cursor: pointer; }
.visualizador-fechar:focus-visible { outline: 3px solid #d8b47f; outline-offset: 3px; }
body.foto-ampliada-aberta { overflow: hidden; }
@media (max-width: 700px) {
  .visualizador-fotos { padding: 18px; }
  .visualizador-conteudo { max-height: calc(100dvh - 36px); }
  .visualizador-imagem { max-height: calc(100dvh - 112px); }
  .visualizador-fechar { transform: translate(15%, -45%); }
}


/* ===== BLOCO 3: ACESSIBILIDADE E USABILIDADE ===== */
.pular-conteudo {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 5000;
  background: #fff;
  color: #151923;
  padding: 12px 16px;
  border: 2px solid #a16b25;
  border-radius: 9px;
  transform: translateY(-170%);
}
.pular-conteudo:focus-visible { transform: translateY(0); }
#app:focus { outline: none; }
.produto .foto img[data-img] { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Página inicial: navegação por produto e por serviço */
.grupo-inicio { margin: 28px 0 42px; }
.titulo-grupo-inicio {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 750;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  color: #18212e;
}
.grupo-inicio .grade-categorias { margin-bottom: 0; }
@media (max-width: 700px) {
  .grupo-inicio { margin: 24px 0 34px; }
  .titulo-grupo-inicio { margin-bottom: 14px; }
}

/* Seleção de modalidades de preço — integrada ao cartão atual. */
.campo-modalidade{display:flex;flex-direction:column;gap:7px;margin:12px 0;font-size:.9rem;font-weight:600}
.campo-modalidade select{display:block;width:100%;min-width:0;padding:11px 12px;border:1px solid rgba(180,151,87,.55);border-radius:8px;background:#fff;color:#242424;font:inherit;cursor:pointer}
.campo-modalidade select:focus-visible{outline:3px solid #b9964c;outline-offset:2px}