/* =====================================================================
   SilkCat — ajustes próprios, por cima da Base Visual (silk-ui.css, silk-fx.css)
   e das classes do Tailwind. Sem build. Cores da marca: navy #072A40, navy escuro
   #031C26, dourado #D2B87D, dourado escuro #A9823C, laranja #D98032. Nunca verde na UI.
   ===================================================================== */

/* Tela de carregamento só na primeira página da visita (ver base.html) */
html.sem-splash body::before, html.sem-splash body::after { display: none !important; }

.rolagem-oculta { scrollbar-width: none; }
.rolagem-oculta::-webkit-scrollbar { display: none; }

/* ---------- cabeçalho público ---------- */
.menu-link { position: relative; padding: 6px 0; white-space: nowrap; transition: color .15s; }
.menu-link:hover { color: #D98032; }
.menu-link.on { color: #D98032; }
.menu-link.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: #D98032; }
.contador-selecao { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D98032; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.menu-celular-item { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 12px;
  color: #031C26; font-weight: 600; font-size: 15px; }
.menu-celular-item .si { color: #A9823C; }
.menu-celular-item:hover { background: #faf5ea; }

.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #78716c; }
.migalhas a:hover { color: #072A40; text-decoration: underline; }
.migalhas > span { color: #031C26; font-weight: 600; }
.migalhas .si { color: #a8a29e; }

/* ---------- pílulas (Base Visual) ---------- */
.pilula { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 9999px; padding: 7px 16px;
  font-size: 14px; font-weight: 600; border: 1px solid #e7e5e4; background: #fff; color: #031C26; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; }
.pilula:hover { border-color: #D2B87D; }
.pilula.ativa { background: #072A40; border-color: #072A40; color: #fff; }
.pilula-n { font-weight: 500; font-size: 12.5px; color: #a8a29e; }
.pilula.ativa .pilula-n { color: #E8DCB8; }
.pilula-sm { padding: 4px 11px; font-size: 12.5px; }

/* ---------- selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 4px; border-radius: 9999px; padding: 3px 10px; font-size: 11.5px;
  font-weight: 600; line-height: 1.3; white-space: nowrap; }
.selo-ok { background: #e6f2eb; color: #1c7a4a; }
.selo-atencao { background: #fbf0dd; color: #a86a12; }
.selo-erro { background: #fbe9e6; color: #b3392f; }
.selo-escuro { background: rgba(3,28,38,.82); color: #fff; }
.selo-claro { background: rgba(255,255,255,.92); color: #031C26; border: 1px solid #e7e5e4; }
.selo-bege { background: #f4ecd9; color: #6b5220; }
.selo-cinza { background: #f0efed; color: #57534e; }

/* ---------- código do produto ---------- */
.codigo-vitrine { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: #A9823C; text-transform: uppercase; }
.sugestao .codigo-vitrine { font-size: 12.5px; }
.codigo-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; background: #f4ecd9;
  color: #031C26; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.chip-codigo { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #f4ecd9; color: #3a2d0a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------- vitrine ---------- */
.cartao-produto { position: relative; }
.quadro-retrato { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; background: #f4efe6; border: 1px solid #ece4d4;
  overflow: hidden; transition: box-shadow .2s, transform .2s; }
.cartao-produto:hover .quadro-retrato { box-shadow: 0 16px 34px -22px rgba(7,42,64,.45); }
.sel-btn { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e7e5e4;
  background: #fff; color: #072A40; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(7,42,64,.5); transition: background .15s, color .15s, transform .1s; }
.sel-btn .si { width: 18px; height: 18px; stroke-width: 2.2; }
.sel-btn:active { transform: scale(.94); }
.sel-btn.on { background: #072A40; border-color: #072A40; color: #fff; }
@media (max-width: 639px) { .sel-btn { width: 42px; height: 42px; top: 8px; right: 8px; } }

.bloco-catalogo { display: block; min-width: 78%; overflow: hidden; border-radius: 22px; border: 1px solid #ece4d4; background: #fff;
  box-shadow: 0 1px 2px rgba(7,42,64,.05); transition: box-shadow .2s, transform .2s; }
.bloco-catalogo:hover { box-shadow: 0 18px 38px -24px rgba(7,42,64,.45); transform: translateY(-2px); }
@media (min-width: 640px) { .bloco-catalogo { min-width: 0; } }

/* barra da seleção (fixa no rodapé enquanto houver item) */
.barra-selecao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 35; width: min(620px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px;
  background: #031C26; color: #fff; box-shadow: 0 22px 44px -18px rgba(3,28,38,.7); }
.barra-selecao.hidden { display: none; }
@media (max-width: 639px) { .barra-selecao.so-computador { display: none !important; } }

/* página do produto */
.carrossel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; border-radius: 22px; }
.carrossel-item { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.quadro-produto { aspect-ratio: 4 / 5; border-radius: 22px; background: #fff; border: 1px solid #ece4d4; padding: 18px; }
.miniatura { display: block; width: 100%; border-radius: 12px; border: 1px solid #ece4d4; background: #fff; padding: 4px 4px 6px; cursor: pointer; }
.miniatura.on { border: 2px solid #072A40; }
.ponto { width: 7px; height: 7px; border-radius: 9999px; background: #d6d3d1; transition: width .2s, background .2s; }
.ponto.on { width: 20px; background: #072A40; }
.acoes-produto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #e9dfcc; }
.acoes-produto .sbtn { height: 48px; }
.acoes-produto .sbtn-icon { width: 52px; }

/* ---------- cabeçalho: faixa superior com a busca (Solicitação 4) ---------- */
.faixa-topo { background: #031C26; color: #E8DCB8; }
.faixa-botao { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; border-radius: 10px;
  color: #E8DCB8; transition: background .15s, color .15s; }
.faixa-botao:hover { background: rgba(255,255,255,.08); color: #fff; }
.campo-busca { width: 100%; height: 36px; padding: 0 40px 0 14px; border-radius: 10px; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(232,220,184,.22); transition: background .15s, border-color .15s; }
.campo-busca::placeholder { color: rgba(232,220,184,.7); }
.campo-busca:focus { outline: none; background: rgba(255,255,255,.16); border-color: #D2B87D; }
.campo-busca::-webkit-search-cancel-button { display: none; }
.campo-busca-botao { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #E8DCB8; }
.campo-busca-botao:hover { color: #fff; }
[data-busca-celular] .campo-busca { height: 46px; font-size: 16px; color: #031C26; background: #f5f5f4; border-color: #e7e5e4; }
[data-busca-celular] .campo-busca::placeholder { color: #a8a29e; }
[data-busca-celular] .campo-busca:focus { background: #fff; border-color: #072A40; }
[data-busca-celular] .campo-busca-botao { color: #78716c; }
.sugestoes { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  overflow: auto; border-radius: 16px; background: #fff; border: 1px solid #ece4d4; box-shadow: 0 24px 48px -20px rgba(3,28,38,.45);
  color: #031C26; text-transform: none; letter-spacing: normal; padding: 6px 0; }
.sugestoes.hidden { display: none; }
[data-busca-celular] .sugestoes { position: static; width: 100%; margin-top: 8px; max-height: 65vh; box-shadow: none; }
.sugestoes-titulo { padding: 10px 16px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #A9823C; }
.sugestao { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 16px; font-size: 14px; color: #031C26; }
.sugestao:hover, .sugestao:focus { background: #faf5ea; outline: none; }
.sugestao-produto { min-height: 60px; }
.sugestao-foto { flex: none; width: 40px; height: 50px; border-radius: 8px; background: #f4efe6; padding: 2px; overflow: hidden; }
.sugestao-todos { border-top: 1px solid #f5f5f4; margin-top: 4px; font-weight: 600; color: #072A40; }

/* ---------- títulos das seções da página inicial ---------- */
.titulo-secao { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 38px; line-height: 1.05; color: #A9823C; text-align: center; }
.titulo-secao em { font-style: italic; font-weight: 500; }
@media (min-width: 640px) { .titulo-secao { font-size: 48px; } }

/* ---------- banner de ponta a ponta (D3 e D4) ---------- */
/* A imagem do banner é peça feita para o site: preenche o espaço, recorte central (object-cover).
   Foto de produto nunca entra aqui. Tamanho das letras acompanha a largura do banner (cqi),
   para a prévia do admin sair igual ao site. */
.banner-carrossel { position: relative; overflow: hidden; container-type: inline-size; background: #031C26; height: clamp(420px, 42vw, 680px); }
@media (max-width: 767px) { .banner-carrossel { height: auto; aspect-ratio: 4 / 5; max-height: 80vh; } }
.banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.banner-slide.on { opacity: 1; visibility: visible; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-sombra { position: absolute; inset: 0;
  background: radial-gradient(75% 65% at 50% 55%, rgba(3,28,38,.46), rgba(3,28,38,.12) 85%), linear-gradient(180deg, rgba(3,28,38,.12), rgba(3,28,38,.38)); }
.banner-fundo-marca { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(115deg, #031C26 0%, #072A40 48%, #6b4a2c 100%); }
.banner-fundo-marca::after { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 75% at 78% 35%, rgba(242,179,61,.2), transparent 70%); }
.banner-folha { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); height: 118%; width: auto; color: #D2B87D; opacity: .16; }
.banner-texto { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 9%; color: #fff; text-shadow: 0 2px 18px rgba(3,28,38,.5); }
.banner-rotulo { font-size: clamp(10px, 1cqi, 12.5px); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #E8DCB8; }
.banner-titulo { margin-top: .35em; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.02;
  font-size: clamp(34px, 6.4cqi, 88px); max-width: 16em; }
.banner-destaque { color: #E8DCB8; }
.banner-sub { margin-top: .9em; max-width: 36em; font-size: clamp(14px, 1.45cqi, 19px); line-height: 1.5; color: rgba(255,255,255,.9); }
.banner-botao-area { margin-top: clamp(18px, 2.4cqi, 34px); }
.banner-botao { text-shadow: none; }
.banner-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.82); color: #031C26;
  box-shadow: 0 8px 20px -10px rgba(3,28,38,.6); transition: background .15s; }
.banner-seta:hover { background: #fff; }
.banner-seta .si { width: 22px; height: 22px; }
.banner-seta-esq { left: 18px; } .banner-seta-dir { right: 18px; }
@media (max-width: 767px) { .banner-seta { width: 38px; height: 38px; } .banner-seta-esq { left: 10px; } .banner-seta-dir { right: 10px; } }
.banner-pontos { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.banner-ponto { width: 9px; height: 9px; border-radius: 9999px; background: rgba(255,255,255,.55); transition: width .25s, background .25s; }
.banner-ponto.on { width: 26px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .banner-slide, .banner-ponto, .vitrine-trilho { transition: none !important; } }

/* ---------- catálogos em destaque (3 blocos retrato) ---------- */
.bloco-destaque { display: block; min-width: 78%; }
@media (min-width: 640px) { .bloco-destaque { min-width: 0; } }
.bloco-destaque-quadro { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: #f4efe6; border: 1px solid #ece4d4;
  transition: box-shadow .2s; }
.bloco-destaque:hover .bloco-destaque-quadro { box-shadow: 0 20px 40px -24px rgba(7,42,64,.5); }

/* ---------- carrossel "Mais vendidos" (D5) e grade das listagens (D6) ---------- */
.vitrine-trilho { --por-vez: 2; --vc-gap: 16px; display: flex; gap: var(--vc-gap); transition: transform .45s ease; }
@media (min-width: 1024px) { .vitrine-trilho { --por-vez: 4; --vc-gap: 24px; } }
.vitrine-item { flex: 0 0 calc((100% - (var(--por-vez) - 1) * var(--vc-gap)) / var(--por-vez)); min-width: 0; }
.vitrine-seta { position: absolute; top: 38%; z-index: 6; width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; background: #fff; color: #031C26; border: 1px solid #ece4d4; box-shadow: 0 10px 22px -12px rgba(3,28,38,.55); }
.vitrine-seta[hidden] { display: none; }
.vitrine-seta:hover { border-color: #D2B87D; }
.vitrine-seta-esq { left: -8px; } .vitrine-seta-dir { right: -8px; }
@media (min-width: 1280px) { .vitrine-seta-esq { left: -22px; } .vitrine-seta-dir { right: -22px; } }
.grade-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px; }
@media (min-width: 768px) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; } }

/* ---------- rodapé (D7) ---------- */
.rodape-faixa { background: #f4ecd9; border-top: 1px solid #e9dfcc; }
.rodape-corpo { background: #fff; border-top: 1px solid #e9dfcc; }
.rede-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px;
  background: #031C26; color: #E8DCB8; transition: background .15s, color .15s; }
.rede-link:hover { background: #072A40; color: #fff; }
.rodape-titulo { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #A9823C; }
.rodape-link { display: block; padding: 5px 0; font-size: 14.5px; color: #44403c; }
.rodape-link:hover { color: #031C26; text-decoration: underline; text-decoration-color: #D2B87D; text-underline-offset: 4px; }

/* ---------- páginas de texto (Quem somos, Ajuda) ---------- */
.texto-pagina { max-width: 46rem; font-size: 16.5px; line-height: 1.75; color: #44403c; }
.texto-pagina h2 { margin-top: 2.2rem; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; line-height: 1.15; color: #031C26; }
.texto-pagina h3 { margin-top: 1.4rem; font-weight: 700; font-size: 16px; color: #031C26; }
.texto-pagina p { margin-top: .85rem; }
.texto-pagina ol, .texto-pagina ul { margin-top: .85rem; padding-left: 1.3rem; }
.texto-pagina ol { list-style: decimal; } .texto-pagina ul { list-style: disc; }
.texto-pagina li { margin-top: .4rem; padding-left: .2rem; }
.texto-pagina li::marker { color: #A9823C; font-weight: 700; }

/* ---------- campos ---------- */
.caixa { width: 18px; height: 18px; accent-color: #072A40; cursor: pointer; }

/* ---------- modo escuro (o dark-mode.js cuida das classes do Tailwind) ---------- */
html.silk-dark .pilula { background: #11181d; border-color: #283540; color: #e6edf2; }
html.silk-dark .pilula.ativa { background: #0e3a55; border-color: #0e3a55; }
html.silk-dark .quadro-retrato, html.silk-dark .quadro-produto, html.silk-dark .miniatura { background: #1a242b; border-color: #283540; }
html.silk-dark .bloco-catalogo { background: #1a242b; border-color: #283540; color: #e6edf2; }
html.silk-dark .codigo-chip, html.silk-dark .chip-codigo, html.silk-dark .selo-bege { background: rgba(210,184,125,.18); color: #f0e6d0; }
html.silk-dark .sel-btn { background: #1a242b; border-color: #283540; color: #e6edf2; }
html.silk-dark .sel-btn.on { background: #0e3a55; border-color: #0e3a55; }
html.silk-dark .menu-celular-item, html.silk-dark .migalhas > span { color: #e6edf2; }
html.silk-dark .acoes-produto { background: rgba(13,20,24,.94); border-top-color: #283540; }
html.silk-dark .sugestoes { background: #11181d; border-color: #283540; color: #e6edf2; }
html.silk-dark .sugestao, html.silk-dark .sugestao-todos { color: #e6edf2; }
html.silk-dark .sugestao:hover, html.silk-dark .sugestao:focus { background: #1a242b; }
html.silk-dark .sugestao-foto, html.silk-dark .bloco-destaque-quadro { background: #1a242b; border-color: #283540; }
html.silk-dark [data-busca-celular] .campo-busca { background: #11181d; border-color: #283540; color: #e6edf2; }
html.silk-dark .vitrine-seta { background: #1a242b; border-color: #283540; color: #e6edf2; }
html.silk-dark .rodape-faixa { background: #11181d; border-color: #283540; }
html.silk-dark .rodape-corpo { background: #0d1418; border-color: #283540; }
html.silk-dark .rodape-link, html.silk-dark .texto-pagina { color: #c9d3da; }
html.silk-dark .texto-pagina h2, html.silk-dark .texto-pagina h3 { color: #e6edf2; }

/* aviso flutuante sobe quando há barra fixa no rodapé */
body:has(.barra-selecao:not(.hidden)) #toast, body:has(.acoes-produto) #toast { bottom: 96px !important; }