/*
Theme Name: Santa Arte Católica
Theme URI: https://santaartecatolica.com.br
Description: Tema da Santa Arte Católica — vestuário católico com estética streetwear. Filho do Twenty Twenty-Five. Paleta e tipografia derivadas da marca; a assinatura visual é a fita de missal.
Author: Santa Arte Católica
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: santa-arte
Tags: e-commerce, block-theme, full-site-editing
*/

/* ==========================================================================
   ASSINATURA — A FITA DE MISSAL

   Todo missal tem fitas de cor pendendo da lombada, e cada cor marca um tempo
   litúrgico. É o objeto mais reconhecível deste mundo, e aqui ele vira o
   elemento estrutural da página: quatro fitas penduradas do topo, as cores do
   calendário litúrgico romano (ver "A FITA COMO CALENDÁRIO LITÚRGICO" abaixo
   — é a versão vigente; o sistema de 3 fitas por cor de marca que este
   comentário descrevia foi substituído em 09/08/2026).
   ========================================================================== */

:root {
  --sac-papel:  #F5F5F4;
  --sac-tinta:  #040404;
  --sac-ouro:   #B99955;
  --sac-bordo:  #6A1C23;
  --sac-azul:   #274186;
  --sac-neutro: #BFB1A6;
  /* tamanho fiel ao mockup aprovado (Opção C: Vitrine Elevada) — redesign
     21/08/2026. Era 4px/52px; a fita virou o elemento grande e visível que o
     mockup desenhava, não mais um traço fino. */
  --sac-fita-largura: 20px;
  --sac-fita-vao: 8px;
  --sac-fita-altura: 168px;
  --sac-barra-frete-altura: 34px;
  /* altura REAL do cabeçalho compacto (58px medido em 21/08/2026). Era
     140px — valor do header antigo com logo grande; o main reservava
     espaço demais e criava o vão branco entre a barra e o herói. */
  --sac-header-altura: 58px;

  /* sistema de elevação — introduzido no redesign "Vitrine Elevada", 21/08/2026 */
  --sac-sombra-sm: 0 2px 6px rgba(4,4,4,.08), 0 1px 2px rgba(4,4,4,.05);
  --sac-sombra-md: 0 12px 28px -10px rgba(4,4,4,.20), 0 3px 8px rgba(4,4,4,.08);
  --sac-sombra-lg: 0 30px 70px -20px rgba(4,4,4,.32), 0 10px 20px -10px rgba(4,4,4,.14);
  --sac-sombra-ouro: 0 14px 34px -12px rgba(185,153,85,.5);
}

/* A fita fica FIXA (nunca rola com a página, como no mockup aprovado),
   alinhada à ESQUERDA DA COLUNA DE CONTEÚDO — o mesmo eixo da logo. Ela é
   mais alta que o cabeçalho de propósito: nasce no mesmo topo que ele, passa
   por trás (z-index maior que o do cabeçalho, ver mais abaixo) e sobra
   visível por baixo — como a fita de um missal saindo debaixo da capa. */
.sac-fita {
  position: fixed;
  top: var(--sac-barra-frete-altura);
  left: max(var(--wp--preset--spacing--30, 2rem), calc((100vw - 1320px) / 2));
  width: calc(var(--sac-fita-largura) * 4 + var(--sac-fita-vao) * 3);
  height: var(--sac-fita-altura);
  pointer-events: none;
  z-index: 5;
  display: flex;
  gap: var(--sac-fita-vao);
}

/* espaço reservado pra faixa+cabeçalho FIXOS, no topo do conteúdo real da
   página — como os dois saíram do fluxo normal (position:fixed), é o <main>
   que precisa empurrar o conteúdo pra baixo, não mais o próprio cabeçalho. */
.wp-site-blocks main {
  /* corrigido em 21/08/2026 (2ª rodada): era ".wp-site-blocks > main", que só
     casava na home. Na página de produto o WooCommerce embrulha o <main> num
     wrapper (.woocommerce.product) — o seletor não casava e título/galeria
     ficavam cobertos pelo cabeçalho fixo. */
  padding-top: calc(var(--sac-barra-frete-altura) + var(--sac-header-altura));
  /* o layout do bloco injeta margin-top:24px no main (ritmo vertical do
     Twenty Twenty-Five) — aqui ele só empurra o herói pra baixo do
     cabeçalho fixo, criando o vão branco; zerado em 21/08/2026. */
  margin-top: 0;
}

.sac-fita span {
  display: block;
  width: var(--sac-fita-largura);
  height: 100%;
  /* a ponta chanfrada da fita, como a de um marcador cortado em bisel —
     proporção fiel ao mockup (14% de corte), não mais um valor fixo em
     px que ficava raso demais depois que a fita cresceu pro tamanho novo */
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}

/* No celular a fita fica QUASE do tamanho do desktop, de propósito — mesmo
   princípio de sempre: encolher demais faz ela virar resto de pixel em vez
   de fita reconhecível. Valores exatos do mockup aprovado. */
@media (max-width: 700px) {
  :root { --sac-fita-largura: 13px; --sac-fita-altura: 104px; --sac-fita-vao: 5px; }
  .sac-fita { left: 1.1rem; }
}

/* ==========================================================================
   TIPOGRAFIA DE APOIO

   A marca é uma família só em dois extremos: SANTA ARTE pesado e apertado,
   CATÓLICA leve e espaçado. A página repete essa mesma gramática — nada de
   uma serifada "tradicional" importada de fora, que a marca não tem.
   ========================================================================== */

.sac-sobrancelha {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sac-tinta);
  opacity: .7;
}

.sac-titulo-display {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-wrap: balance;
}

/* ==========================================================================
   PRODUTO — grade e cartão

   Streetwear vive de foto grande e canto reto — isso não mudou. O que mudou
   no redesign "Vitrine Elevada" (21/08/2026): a foto ganhou moldura de fio
   dourado (o dispositivo "vitrine/relicário" do mockup aprovado) e o cartão
   ganhou sombra que se acentua no hover — o sistema de elevação que também
   está no cabeçalho e no botão de WhatsApp. Continua sem borda arredondada
   e sem cor emprestada de fora da paleta.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product {
  text-align: left;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
  border-radius: 0;
  border: 1px solid var(--sac-ouro);
  padding: .5rem;
  box-sizing: border-box;
  background: #fff;
  transition: opacity .35s ease;
}

.woocommerce ul.products li.product:hover a img { opacity: .88; }

.woocommerce ul.products li.product,
li.wc-block-product,
.wc-block-components-product .wc-block-grid__product {
  transition: box-shadow .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product:hover,
li.wc-block-product:hover,
.wc-block-components-product .wc-block-grid__product:hover {
  box-shadow: var(--sac-sombra-md);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product:hover,
  li.wc-block-product:hover,
  .wc-block-components-product .wc-block-grid__product:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   BARRA DE "ADICIONAR" NO HOVER (fidelidade ao mockup) — redesign
   "Vitrine Elevada", 21/08/2026. O botão "Ver opções"/"Adicionar" já
   existia em todo card (bloco e loop clássico) — só ficava sempre visível,
   embaixo do preço. Vira barra ancorada no rodapé do cartão, escondida até
   o hover — sem HTML novo, só reposicionamento. position:absolute tira do
   fluxo normal, então título/preço não pulam quando ela aparece.
   ------------------------------------------------------------------ */
.wc-block-components-product-button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}
li.wc-block-product:hover .wc-block-components-product-button,
li.wc-block-product:focus-within .wc-block-components-product-button {
  opacity: 1;
  transform: translateY(0);
}
.wc-block-components-product-button .wp-block-button__link {
  display: block;
  width: 100%;
  margin: 0 !important;
  border-radius: 0;
  background: var(--sac-tinta) !important;
  color: var(--sac-papel) !important;
  box-shadow: var(--sac-sombra-md);
}

.woocommerce ul.products li.product > a.button.add_to_cart_button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
  box-shadow: var(--sac-sombra-md);
}
.woocommerce ul.products li.product:hover > a.button.add_to_cart_button,
.woocommerce ul.products li.product:focus-within > a.button.add_to_cart_button {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-components-product-button,
  .woocommerce ul.products li.product > a.button.add_to_cart_button {
    transition: opacity .2s ease;
    transform: none;
  }
}
/* toque não tem :hover — garante que o botão continua alcançável mesmo sem
   passar mouse (ele já era clicável antes; isso só preserva o acesso). */
@media (hover: none) {
  .wc-block-components-product-button,
  .woocommerce ul.products li.product > a.button.add_to_cart_button {
    position: static;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-top: .85rem !important;
}

.woocommerce ul.products li.product .price {
  color: var(--sac-tinta);
  font-weight: 700;
  font-size: 0.95rem;
}

.woocommerce span.onsale {
  background: var(--sac-bordo);
  color: var(--sac-papel);
  border-radius: 0;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  min-height: 0;
  min-width: 0;
  padding: .35rem .7rem;
  line-height: 1.2;
}

/* Botões do Woo seguem o botão do tema: reto, caixa alta, espaçado. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  border-radius: 0;
  background: var(--sac-tinta);
  color: var(--sac-papel);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  transition: background .25s ease, color .25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--sac-ouro);
  color: var(--sac-tinta);
}

/* ==========================================================================
   PISO DE QUALIDADE
   ========================================================================== */

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--sac-ouro);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Medida de leitura. Sem isto, um parágrafo numa seção de 1320px estica até
   perder o olho na volta da linha — o texto fica largo porque a caixa é larga,
   não porque o conteúdo pede. */
.sac-medida { max-width: 46ch; }
.sac-medida-titulo { max-width: 15ch; }

@media (max-width: 781px) {
  .sac-medida-titulo { max-width: none; }
}

/* ==========================================================================
   TABELA DE TAMANHOS — <dialog> nativo

   Sair da página do produto para conferir medida é onde a compra se perde.
   O modal abre por cima e devolve o cliente ao mesmo ponto. Nativo, sem
   biblioteca: o <dialog> já traz foco preso, Esc e camada superior de graça.
   ========================================================================== */

.sac-abre-medidas {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sac-ouro);
  color: var(--sac-tinta);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.sac-abre-medidas:hover { color: var(--sac-ouro); }

dialog.sac-medidas {
  border: 1px solid var(--sac-tinta);
  border-radius: 0;
  padding: 2rem;
  max-width: 34rem;
  width: calc(100% - 2rem);
  background: var(--sac-papel);
  color: var(--sac-tinta);
}

dialog.sac-medidas::backdrop { background: rgba(4, 4, 4, .55); }

.sac-medidas__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sac-medidas__topo strong {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sac-medidas__fechar {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sac-tinta);
  padding: 0 .25rem;
}

dialog.sac-medidas table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}

dialog.sac-medidas th,
dialog.sac-medidas td {
  text-align: left;
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--sac-neutro);
  font-size: .9rem;
}

dialog.sac-medidas th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

dialog.sac-medidas tr td:first-child { font-weight: 700; }

.sac-medidas__nota {
  font-size: .8rem;
  line-height: 1.55;
  margin: 0 0 .85rem;
}

/* ==========================================================================
   VITRINE DA HOME

   Grade no desktop, faixa deslizante no celular. São 4 produtos: um carrossel
   esconderia metade e exigiria interação para ver o resto — grade mostra tudo
   de uma vez. No celular, onde não cabem quatro lado a lado, vira faixa com
   scroll-snap, que é o gesto que o dedo já espera. Sem JavaScript.
   ========================================================================== */

.sac-vitrine__topo {
  border-bottom: 1px solid var(--sac-neutro);
  padding-bottom: .85rem;
  margin-bottom: 1.75rem;
}

.sac-ver-todas a,
.sac-ver-linha a {
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sac-ouro);
}

.sac-frete {
  margin-top: 1.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* a grade do Woo dentro da vitrine */
.sac-vitrine .woocommerce ul.products,
.sac-vitrine ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sac-vitrine ul.products::before,
.sac-vitrine ul.products::after { content: none; }

.sac-vitrine ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

@media (max-width: 1024px) {
  .sac-vitrine ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Celular: faixa deslizante em FLEXBOX, não grid.
   Grid rege trilha; para uma faixa que desliza o que se quer é declarar a
   largura do cartão, e `flex: 0 0 <largura>` faz isso sem ambiguidade — não
   cresce, não encolhe. Tentar o mesmo por `grid-auto-columns` não funcionou:
   ele só rege trilhas implícitas e perdia para o CSS do WooCommerce. */
@media (max-width: 600px) {
  .sac-vitrine ul.products {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  .sac-vitrine ul.products li.product {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   OS CARTÕES DE COLEÇÃO — agora clicáveis
   ========================================================================== */

.sac-linha {
  border-top: 6px solid var(--sac-neutro);
  padding: var(--wp--preset--spacing--30);
  height: 100%;
  background: var(--sac-papel);
  transition: box-shadow .25s ease, transform .25s ease;
}

.sac-linha--bordo { border-top-color: var(--sac-bordo); }
.sac-linha--azul  { border-top-color: var(--sac-azul); }

.sac-linha h3 a { text-decoration: none; }
.sac-linha:hover h3 a { color: var(--sac-ouro); }

/* mesmo sistema de elevação dos cartões de produto — redesign "Vitrine
   Elevada", 21/08/2026 */
.sac-linha:hover {
  box-shadow: var(--sac-sombra-md);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .sac-linha:hover { transform: none; }
}

/* O cartão vira coluna flex e empurra o botão para o rodapé. Sem isto, título
   de 3 linhas e de 4 linhas desalinham preço e botão entre os vizinhos — e numa
   grade de produto o olho lê o desalinhamento antes de ler o produto. */
.sac-vitrine ul.products li.product {
  display: flex;
  flex-direction: column;
}

.sac-vitrine ul.products li.product .price { margin-top: .35rem; }

.sac-vitrine ul.products li.product .button,
.sac-vitrine ul.products li.product .added_to_cart {
  margin-top: auto;
  align-self: flex-start;
  text-align: center;
}

/* O painel do submenu do cabeçalho vem do core em #fff com borda cinza-neutra —
   as duas fora da paleta, e a caixa branca aparece sobre o papel #F5F5F4.
   Traz para o cromo da casa: papel, neutro quente e canto reto. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  background-color: var(--sac-papel);
  border: 1px solid var(--sac-neutro);
  border-radius: 0;
}

/* A descricao da colecao vem do core com `.wp-block-term-description p { margin: 0 }`,
   entao dois paragrafos colam num bloco so e a frase seguinte comeca grudada no ponto
   final da anterior. E tambem corre a largura inteira, enquanto o resto do site le
   numa medida. Devolve o respiro e aplica a mesma medida de leitura das outras paginas. */
.wp-block-term-description { max-width: 62ch; }
.wp-block-term-description p + p { margin-top: 1em; }

/* ------------------------------------------------------------------
   A FITA COMO CALENDÁRIO LITÚRGICO — 09/08/2026

   As quatro cores do rito romano, e a do dia sai inteira e mais larga.
   Substitui bordô/azul/ouro, que eram cores da MARCA afirmando um
   sistema que não seguiam: azul não é cor litúrgica romana.
   ------------------------------------------------------------------ */
:root {
  --sac-lit-roxo:     #5B3A7E;
  --sac-lit-branco:   #B99955;
  --sac-lit-verde:    #2F6B45;
  --sac-lit-vermelho: #B3261E;
  --sac-lit-rosa:     #C98BB0;
}

/* largura livre: a fita do dia engorda, e a caixa acompanha */
.sac-fita--liturgica { width: auto; }

/* o title precisa de hover, e o .sac-fita base é pointer-events:none */
/* clicável desde o redesign "Vitrine Elevada" (21/08/2026) — abre o evangelho do dia */
.sac-fita--liturgica { pointer-events: auto; cursor: pointer; }
.sac-fita--liturgica:focus-visible { outline: 2px solid var(--sac-ouro); outline-offset: 3px; }

/* Todas as fitas têm a MESMA largura e altura (100%, ver .sac-fita span
   acima) — quem diferencia recuada de ativa é o scaleX dentro da própria
   animação (ver sac-ondula-recuada / sac-ondula-ativa), exatamente como no
   mockup aprovado. A regra antiga mudava height:34% e width:calc(*2.5) —
   funcionava com a fita pequena (4px/52px), mas com o tamanho novo (20px/
   168px) a fita ativa virava uma barra de 50px, desproporcional. */
.sac-fita--liturgica span:nth-child(1) { background: var(--sac-lit-roxo); }
.sac-fita--liturgica span:nth-child(2) { background: var(--sac-lit-branco); }
.sac-fita--liturgica span:nth-child(3) { background: var(--sac-lit-verde); }
.sac-fita--liturgica span:nth-child(4) { background: var(--sac-lit-vermelho); }

.sac-fita--hoje-roxo     span:nth-child(1),
.sac-fita--hoje-rosa     span:nth-child(1),
.sac-fita--hoje-branco   span:nth-child(2),
.sac-fita--hoje-verde    span:nth-child(3),
.sac-fita--hoje-vermelho span:nth-child(4) {
  animation-name: sac-ondula-ativa;
}

/* Rosa não é uma quinta fita: são dois domingos no ano — Gaudete e Laetare — e ele
   é o roxo clareado. Fica sendo um estado do roxo, não mais uma faixa. */
.sac-fita--hoje-rosa span:nth-child(1) { background: var(--sac-lit-rosa); }

/* A fita que era BRANCA virou DOURADO em 21/08/2026 (pedido do Michel): o
   ouro existe sozinho sobre o papel — não precisa mais do contorno preto
   que o branco puro exigia pra não sumir. */
.sac-fita--hoje-branco span:nth-child(2) {
  background: var(--sac-lit-branco);
}

/* Ondulação contínua — redesign "Vitrine Elevada", 21/08/2026, revisado no
   mesmo dia pra usar scaleX em vez de height/width (ver comentário acima).
   Anima o transform inteiro (não uma custom property) para garantir
   interpolação suave; duração levemente diferente por fita para não
   ficarem sincronizadas feito metrônomo. */
.sac-fita span {
  transform-origin: top center;
  opacity: .32;
  animation-name: sac-ondula-recuada;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.sac-fita span:nth-child(1) { animation-duration: 6.6s; animation-delay: 0s; }
.sac-fita span:nth-child(2) { animation-duration: 7.3s; animation-delay: .4s; }
.sac-fita span:nth-child(3) { animation-duration: 6.1s; animation-delay: .8s; }
.sac-fita span:nth-child(4) { animation-duration: 7.8s; animation-delay: 1.2s; }
@keyframes sac-ondula-recuada {
  0%   { opacity: .32; transform: scaleX(.32) rotate(-1deg); }
  32%  { opacity: .32; transform: scaleX(.32) rotate(.7deg); }
  64%  { opacity: .32; transform: scaleX(.32) rotate(-.5deg); }
  100% { opacity: .32; transform: scaleX(.32) rotate(-1deg); }
}
@keyframes sac-ondula-ativa {
  0%   { opacity: 1; transform: scaleX(1) rotate(-1deg); }
  32%  { opacity: 1; transform: scaleX(1) rotate(.7deg); }
  64%  { opacity: 1; transform: scaleX(1) rotate(-.5deg); }
  100% { opacity: 1; transform: scaleX(1) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sac-fita span { animation: none; opacity: .32; transform: scaleX(.32); }
  .sac-fita--hoje-roxo     span:nth-child(1),
  .sac-fita--hoje-rosa     span:nth-child(1),
  .sac-fita--hoje-branco   span:nth-child(2),
  .sac-fita--hoje-verde    span:nth-child(3),
  .sac-fita--hoje-vermelho span:nth-child(4) {
    opacity: 1; transform: scaleX(1);
  }
}

/* texto só para leitor de tela */
.sac-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------
   SELO DE FRETE GRÁTIS — 09/08/2026

   Bandeira dourada à esquerda, caixa-alta espaçada no rótulo. Mesmo
   vocabulário da .sac-sobrancelha, sem ornamento e sem canto redondo.
   Serve à home e à página de produto.
   ------------------------------------------------------------------ */
.sac-selo-frete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin: var(--wp--preset--spacing--30) 0;
  padding: .8rem 1rem;
  background: rgba(185, 153, 85, .12);
  border-left: 4px solid var(--sac-ouro);
  border-radius: 0;
}

.sac-selo-frete strong {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: var(--sac-tinta);
}

.sac-selo-frete span {
  font-size: .9rem;
  opacity: .85;
}

/* na home o selo é a chamada da vitrine: um degrau maior */
.sac-vitrine .sac-selo-frete {
  padding: 1rem 1.2rem;
}
.sac-vitrine .sac-selo-frete strong { font-size: .92rem; }
.sac-vitrine .sac-selo-frete span   { font-size: 1rem; }

/* Frete e parcela são UMA oferta, não duas caixas. Uma bandeira dourada só, um fundo só,
   as duas linhas dentro. Duas caixas cheias lado a lado brigavam pelo mesmo olhar. */
.sac-compra {
  margin: var(--wp--preset--spacing--30) 0;
  padding: .85rem 1rem;
  background: rgba(185, 153, 85, .12);
  border-left: 4px solid var(--sac-ouro);
}

.sac-compra .sac-selo-frete,
.sac-compra .sac-parcela {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.sac-compra .sac-parcela { margin-top: .55rem; }

.sac-parcela {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.sac-parcela strong {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--sac-tinta);
}

/* wc_price() devolve um <span> com o estilo de preço do tema, MENOR que o texto ao lado —
   o número mais importante da linha saía como o menor dela. Herda o tamanho do strong. */
.sac-parcela strong .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* so o aviso "com juros do cartao" fica aqui agora - o total em reais saiu em 10/08/2026, ver functions.php */
.sac-parcela span { font-size: .82rem; opacity: .8; }
.sac-parcela .woocommerce-Price-amount { white-space: nowrap; }

/* ------------------------------------------------------------------
   LINK DE CUPOM DE CADASTRO — 10/08/2026

   Convite discreto, não modal. Fica acima do botão de compra, no
   mesmo peso visual da tabela de tamanhos — texto pequeno, sem caixa.
   ------------------------------------------------------------------ */
.sac-link-cupom {
  margin: .4rem 0 .8rem;
}
.sac-link-cupom a {
  font-size: .85rem;
  color: var(--sac-ouro);
  text-decoration: underline;
}
.sac-link-cupom a:hover {
  color: var(--sac-tinta);
}

/* Aviso do cupom CLIENTE5 no painel de "Minha conta" — mesma bandeira dourada
   do selo de frete, para soar como a mesma família de oferta. */
.sac-aviso-cupom {
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: .85rem 1rem;
  background: rgba(185, 153, 85, .12);
  border-left: 4px solid var(--sac-ouro);
}
.sac-aviso-cupom p {
  margin: 0;
  font-size: .92rem;
}

/* ------------------------------------------------------------------
   LETREIRO DE FRETE GRÁTIS — 10/08/2026

   Faixa preta no topo de TODA página, texto dourado rolando em loop
   contínuo (CSS puro, sem JS). Fica ACIMA da fita litúrgica — as duas
   não disputam espaço porque a fita foi empurrada para
   top: var(--sac-barra-frete-altura), e o cabeçalho reserva a soma
   das duas alturas.
   ------------------------------------------------------------------ */
.sac-barra-frete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: var(--sac-barra-frete-altura);
  overflow: hidden;
  background: var(--sac-tinta);
  display: flex;
  align-items: center;
}

.sac-barra-frete__trilho {
  display: flex;
  white-space: nowrap;
  animation: sac-rolar 22s linear infinite;
}

.sac-barra-frete__trilho span {
  display: inline-block;
  padding: 0 2rem;
  color: var(--sac-ouro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
}

@keyframes sac-rolar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* quem pede menos movimento na tela recebe a frase parada e centralizada,
   sem duplicata visível */
@media (prefers-reduced-motion: reduce) {
  .sac-barra-frete__trilho {
    animation: none;
    justify-content: center;
    width: 100%;
  }
  .sac-barra-frete__trilho span[aria-hidden="true"] {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Rodapé — ícones de redes sociais
   ------------------------------------------------------------------ */
.sac-social {
  display: flex;
  gap: .9rem;
}

.sac-social a {
  display: inline-flex;
  color: var(--sac-tinta);
}

.sac-social a:hover {
  color: var(--sac-ouro);
}

/* ------------------------------------------------------------------
   Rodapé — selos de confiança
   ------------------------------------------------------------------ */
.sac-selos {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: var(--wp--preset--spacing--20);
}

.sac-selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--sac-tinta);
  text-decoration: none;
}

.sac-selo svg {
  flex-shrink: 0;
  color: var(--sac-ouro);
}

.sac-selo span {
  font-size: .875rem;
  line-height: 1.2;
}

a.sac-selo:hover {
  color: var(--sac-ouro);
}

/* ------------------------------------------------------------------
   RODAPÉ ESCURO (fidelidade ao mockup) — redesign "Vitrine Elevada",
   21/08/2026. Fundo tinta + texto papel, como no mockup aprovado — mantém
   todo o conteúdo real (selos, colunas, links), só troca o cromo de claro
   pra escuro. .sac-selo e .sac-social tinham cor fixa pensada pra fundo
   claro; reescritos aqui pra continuar legíveis no escuro.
   ------------------------------------------------------------------ */
.wp-site-blocks > footer {
  background: var(--sac-tinta);
  color: var(--sac-papel);
}
.wp-site-blocks > footer a {
  color: rgba(245, 245, 244, .82);
}
.wp-site-blocks > footer a:hover {
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
}
.wp-site-blocks > footer p {
  color: rgba(245, 245, 244, .85);
}
.wp-site-blocks > footer .sac-sobrancelha {
  color: var(--sac-ouro);
}
.wp-site-blocks > footer .sac-selo {
  color: var(--sac-papel);
}
.wp-site-blocks > footer .sac-social a {
  color: var(--sac-papel);
}
.wp-site-blocks > footer .sac-social a:hover {
  color: var(--sac-ouro);
}
.wp-site-blocks > footer hr,
.wp-site-blocks > footer .wp-block-group[style*="border-top-color"] {
  border-top-color: rgba(245, 245, 244, .18) !important;
}

/* Badge "Frete grátis" nos cards de produto */
.wc-block-components-product-image {
  position: relative;
}
.sac-badge {
  display: inline-block;
  margin: 0 0 0.4em;
  padding: 0.18em 0.35em;
  background: #040404;
  color: #fff;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
}
.sac-badge--frete-gratis {
  background: var(--sac-ouro, #B99955);
  color: #040404;
  box-shadow: var(--sac-sombra-sm, none);
}

/* Coleção (produto-collection em bloco): o selo fica absoluto SOBRE o mockup,
   na base da imagem. O ancestral de posicionamento é o wrapper da imagem
   (.wc-block-components-product-image), que cobre a foto inteira — o
   inner-container interno é vazio/zero e NÃO pode ser o ancestral. */
.wc-block-components-product-image {
  position: relative;
}
.wc-block-components-product-image .sac-badge {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  margin: 0;
  z-index: 2;
}

/* Loop clássico (home via [products]): badge posicionado relativo ao card */
.products .product {
  position: relative;
}

/* Badge no product-collection em bloco: o <li> é o ancestral posicionado */
li.wc-block-product,
.wc-block-components-product .wc-block-grid__product {
  position: relative;
}

/* ------------------------------------------------------------------
   CABEÇALHO FIXO (fidelidade ao mockup) — redesign "Vitrine Elevada",
   21/08/2026, revisado no mesmo dia pra bater tamanho/posição/movimento do
   mockup aprovado. Barra + cabeçalho + fita agora ficam SEMPRE visíveis
   (position:fixed), empilhados — não é mais "sticky só depois de rolar".
   ------------------------------------------------------------------ */
.wp-site-blocks > header {
  position: fixed;
  top: var(--sac-barra-frete-altura);
  left: 0;
  right: 0;
  /* ACIMA da fita (z-index:5) — igual ao mockup. A fita nasce atrás do
     cabeçalho (fundo opaco a esconde onde as duas se sobrepõem) e só a
     "cauda" que sobra abaixo do cabeçalho fica visível — é assim que ela
     não compete visualmente com a logo. (Corrige uma virada errada de
     21/08: pôr a fita ACIMA do cabeçalho resolvia o clique, mas fazia a
     fita pintar por cima da logo — o problema certo era a fita ser mais
     baixa que o cabeçalho, não a ordem do z-index.) */
  z-index: 10;
  background: var(--sac-papel);
  /* sombra SÓ AO ROLAR (revisado pelo Michel em 21/08/2026, 2ª rodada):
     o pedido anterior era "sombra persistente" — Michel mudou de ideia:
     ela volta a acender só quando a página rola (classe adicionada pelo
     JS em functions.php, santa_arte_sombra_cabecalho). */
  box-shadow: none;
  transition: box-shadow .25s ease;
}
.wp-site-blocks > header.sac-cabecalho--rolado {
  box-shadow: var(--sac-sombra-md);
}

/* ------------------------------------------------------------------
   MARCA DO CABEÇALHO — ícone + nome, fiel ao mockup (era um wp:site-logo
   de 190px, imagem única — pesada e alta o bastante pra colidir com a
   fita). Ícone pequeno (SVG inline) + texto, mesma técnica do rodapé/herói.
   ------------------------------------------------------------------ */
.sac-header__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--sac-tinta);
}
.sac-header__logo-img {
  width: 32px;
  height: 32px;
  color: var(--sac-tinta);
  flex-shrink: 0;
}
.sac-header__wordmark { line-height: 1.05; }
.sac-header__wordmark strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.sac-header__wordmark span {
  display: block;
  font-size: .62rem;
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--sac-ouro);
}

/* ------------------------------------------------------------------
   MARCA DO RODAPÉ — ícone + nome em dourado, como no herói. Substitui
   o wp:site-logo (PNG preto) que sumia no fundo tinta. 21/08/2026.
   ------------------------------------------------------------------ */
.sac-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--sac-papel);
  margin-bottom: 1rem;
}
.sac-footer__brand:hover { opacity: .9; }
.sac-footer__logo-img {
  width: 28px;
  height: 28px;
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
  flex-shrink: 0;
}
.sac-footer__wordmark { line-height: 1.05; }
.sac-footer__wordmark strong {
  display: block;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--sac-papel);
}
.sac-footer__wordmark span {
  display: block;
  font-size: .62rem;
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
}

/* ------------------------------------------------------------------
   BOTÃO DE WHATSAPP FLUTUANTE — redesign "Vitrine Elevada", 21/08/2026
   ------------------------------------------------------------------ */
.sac-whats-flutuante {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.sac-whats-flutuante__dica {
  background: var(--sac-tinta);
  color: var(--sac-papel);
  font-size: .78rem;
  font-weight: 700;
  padding: .55rem .9rem;
  box-shadow: var(--sac-sombra-md);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.sac-whats-flutuante:hover .sac-whats-flutuante__dica,
.sac-whats-flutuante:focus-visible .sac-whats-flutuante__dica {
  opacity: 1;
  transform: translateX(0);
}
.sac-whats-flutuante__botao {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sac-tinta);
  border: 1.5px solid var(--sac-ouro);
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sac-sombra-lg);
}
@media (max-width: 782px) {
  .sac-whats-flutuante { right: 1rem; bottom: 1rem; }
}

/* ------------------------------------------------------------------
   MODAL DO EVANGELHO DO DIA (easter egg da fita) — redesign "Vitrine
   Elevada", 21/08/2026. Mesmo padrão de dialog.sac-medidas, que já
   comprovou centralizar sem hack neste tema (sem reset global de margem).
   ------------------------------------------------------------------ */
dialog.sac-evangelho {
  border: 1px solid var(--sac-ouro);
  border-radius: 0;
  padding: 0;
  max-width: 36rem;
  width: calc(100% - 2.5rem);
  background: var(--sac-papel);
  color: var(--sac-tinta);
  box-shadow: var(--sac-sombra-lg);
}
dialog.sac-evangelho::backdrop { background: rgba(4, 4, 4, .62); }

.sac-evangelho__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(4, 4, 4, .1);
}
.sac-evangelho__liturgia { margin-top: .4rem; font-size: 1.15rem; }
.sac-evangelho__data { margin-top: .5rem; font-size: .8rem; opacity: .65; }
.sac-evangelho__fechar {
  background: none;
  border: 1px solid rgba(4, 4, 4, .15);
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sac-tinta);
  flex-shrink: 0;
}
.sac-evangelho__fechar:hover { border-color: var(--sac-ouro); color: var(--sac-ouro); }

.sac-evangelho__corpo {
  padding: 1.4rem 2rem;
  max-height: 60vh;
  overflow-y: auto;
  font-size: .95rem;
  line-height: 1.75;
}
.sac-evangelho__ref {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sac-ouro);
  font-weight: 700;
  margin-bottom: .35rem;
}
.sac-evangelho__titulo { font-weight: 700; margin-bottom: .9rem; }
.sac-evangelho__carregando,
.sac-evangelho__erro { opacity: .7; font-style: italic; }
.sac-evangelho__fonte {
  padding: 0 2rem 1.4rem;
  font-size: .68rem;
  opacity: .5;
}

/* ------------------------------------------------------------------
   HERÓI ESCURO + FAIXA DE CONFIANÇA (fidelidade ao mockup) — redesign
   "Vitrine Elevada", 21/08/2026. Texto real da home preservado (título,
   subtítulo) — só ganhou o tratamento visual novo. A faixa de confiança
   sobrepõe a base do herói, mesma técnica de elevação do mockup.
   ------------------------------------------------------------------ */
.sac-hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 25% 20%, rgba(185,153,85,.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(39,65,134,.10), transparent 60%),
    linear-gradient(160deg, #0c0b0a 0%, var(--sac-tinta) 55%, #14100d 100%);
  color: var(--sac-papel);
  padding-top: clamp(4rem, 10vw, 7.5rem);
  padding-bottom: clamp(6.5rem, 12vw, 9rem);
  overflow: hidden;
}
.sac-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
.sac-hero__texto { max-width: 60ch; }
.sac-hero__mark {
  width: 88px;
  height: 88px;
  color: var(--sac-ouro);
  opacity: .9;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 8px 22px rgba(185,153,85,.35));
}
.sac-hero__mark svg { width: 100%; height: 100%; display: block; }
.sac-hero .sac-sobrancelha { color: var(--sac-ouro); text-align: center; }
.sac-hero h1 { color: var(--sac-papel); }
.sac-hero h1 em {
  font-style: normal;
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
}
.sac-hero p.sac-medida { color: rgba(245, 245, 244, .75); }
.sac-hero .wp-block-button__link {
  box-shadow: var(--sac-sombra-ouro);
}
.sac-hero .is-style-outline .wp-block-button__link {
  border-color: rgba(245, 245, 244, .35);
  color: var(--sac-papel);
  background: transparent;
}
.sac-hero .is-style-outline .wp-block-button__link:hover {
  border-color: var(--sac-ouro);
  color: var(--sac-ouro);
}

/* Card flutuante no herói — a assinatura da "elevação", redesign 21/08/2026.
   Portado do mockup opcao-c: papel sobre o herói escuro, sombra forte, e a
   animação suave de flutuação (respeita prefers-reduced-motion). */
.sac-hero__float {
  display: flex;
  justify-content: flex-end;
}
.sac-hero__card {
  background: var(--sac-papel);
  color: var(--sac-tinta);
  box-shadow: var(--sac-sombra-lg);
  padding: 1.4rem;
  max-width: 340px;
  width: 100%;
  animation: sac-float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sac-hero__card { animation: none; }
}
@keyframes sac-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.sac-hero__card-link { display: block; text-decoration: none; color: inherit; }
.sac-hero__card-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(185, 153, 85, .4);
  margin-bottom: 1rem;
  background:
    linear-gradient(150deg, #EFEAE0, #E4DCCB 55%, #D9CDB2);
}
.sac-hero__card-foto { width: 100%; height: 100%; object-fit: contain; }
.sac-hero__card-emblema {
  width: 72px;
  height: 72px;
  color: var(--sac-ouro);
  opacity: .35;
}
.sac-hero__card-emblema svg { width: 100%; height: 100%; }
.sac-hero__card-tag {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: var(--sac-tinta);
  color: var(--wp--preset--color--ouro-claro, var(--sac-ouro));
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .55rem;
}
.sac-hero__card-corpo { display: block; }
.sac-hero__card-nome {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.sac-hero__card-preco {
  display: block;
  margin-top: .35rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--sac-bordo);
}
.sac-hero__card-preco .woocommerce-Price-amount { color: inherit; }
.sac-hero__card-parcela {
  display: block;
  font-weight: 600;
  font-size: .75rem;
  color: rgba(4, 4, 4, .6);
  margin-top: .15rem;
}
@media (max-width: 900px) {
  .sac-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sac-hero__float { justify-content: flex-start; }
  .sac-hero__card { margin-left: 0; max-width: 340px; }
}

.sac-confianca {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -3.75rem;
  position: relative;
  z-index: 5;
  background: var(--sac-papel);
  box-shadow: var(--sac-sombra-lg);
}
.sac-confianca__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0;
  padding: 1.5rem 1.4rem;
  border-right: 1px solid rgba(4, 4, 4, .08);
}
.sac-confianca__item:last-child { border-right: none; }
.sac-confianca__item .sac-confianca__icone {
  width: 26px;
  height: 26px;
  color: var(--sac-ouro);
  flex-shrink: 0;
}
.sac-confianca__item .sac-confianca__icone svg { width: 100%; height: 100%; display: block; }
.sac-confianca__item p { margin: 0; font-size: .85rem; }
.sac-confianca__item strong { display: block; font-weight: 700; margin-bottom: .1rem; }
@media (max-width: 900px) {
  .sac-confianca { grid-template-columns: repeat(2, 1fr); }
  .sac-confianca__item:nth-child(2) { border-right: none; }
}
@media (max-width: 600px) {
  .sac-confianca { margin-top: 0; }
}