/*
Theme Name: KRETÉC
Template: storefront
Description: Tema filho do Storefront com a identidade visual do coletivo KRETÉC (preto/branco/bege, Bebas Neue).
Author: KRETÉC
Version: 0.9.10
*/

/*
  Como ler este arquivo:
  - As primeiras regras (variáveis de cor/fonte, body, títulos) valem pro site inteiro.
  - Depois vêm blocos por área da tela (CABEÇALHO, RODAPÉ, HERO, CATÁLOGO), cada um com
    um título "====" facilitando achar a parte que você quer mexer.
  - Comentário sem "por quê" é porque a regra é só estética (cor, espaçamento, fonte) — o
    nome da classe já diz o que ela faz. Comentário CHEIO aparece só quando tem um motivo
    menos óbvio por trás (um bug do Storefront, uma pegadinha de CSS etc.).
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

:root {
  --preto: #0a0a0a;
  --branco: #f5f4f0;
  --cinza: #8a8a8a;
  --cinza-claro: #e8e6e0;
  --accent: #c8b89a;
  /* vermelho extraído da própria arte da logo (design-references/kretec-logotipo.jpg) — usado
     na barra do rodapé */
  --vermelho: #e2340a;
  /* bege/creme extraído do rascunho de layout enviado pra cor do cabeçalho */
  --bege-header: #f7edd2;
  --fonte-display: 'Bebas Neue', sans-serif;
  --fonte-corpo: 'DM Sans', sans-serif;
}

body {
  font-family: var(--fonte-corpo);
  background: var(--branco);
  color: var(--preto);
}

h1, h2, h3,
.site-title,
.woocommerce-loop-product__title {
  font-family: var(--fonte-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--preto);
}

/* sem o retângulo roxo de foco em QUALQUER link/botão/campo do site (menu, setas de
   carrossel, campo de busca etc.) — vale pro site inteiro de propósito, não só um elemento.
   O roxo especificamente (não só um contorno genérico do navegador) vem de uma regra da
   própria WooCommerce Blocks (wc-blocks.css, carregado em TODA página, não só na loja):
   ":focus{outline:2px solid currentColor!important}" — herda a cor de marca roxa do
   WooCommerce como contorno. Como é "!important", só um "!important" nosso, com
   especificidade maior (seletor por elemento, não universal), consegue vencer. Troca por um
   contorno mais discreto (na cor da nossa marca) só quando o foco vem de navegação por
   teclado (:focus-visible), pra não perder a acessibilidade de quem usa Tab. */
a:focus,
button:focus,
input:focus,
.main-navigation a:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--preto) !important;
  outline-offset: 2px;
}

/* ================================
   CABEÇALHO (markup real do Storefront, reskinado)
   ================================ */
.site-header {
  border-bottom: 1px solid var(--preto);
  background: var(--branco);
}

/* o Storefront aplica um respiro extra (margin-bottom: ~4.24em) embaixo do header só na
   home, a não ser que se use o template "Homepage" dele mesmo — como front-page.php é
   nosso próprio template (não o dele), esse respiro sobrava e criava um vão gigante entre
   o header e o hero. !important necessário: a regra original do Storefront tem
   especificidade maior que um simples ".home .site-header". */
.home .site-header {
  margin-bottom: 0 !important;
}

.site-branding .site-title,
.site-branding .site-title a {
  font-size: 2rem;
  letter-spacing: 0.12em;
  color: var(--preto);
  text-decoration: none;
}

/* logo de verdade (definido via Custom Logo do WordPress — ver install.sh, que importa
   assets/img/logo-kretec.png e configura automaticamente). Enquanto nenhum logo estiver
   configurado, o Storefront cai de volta pro texto do .site-title acima. */
.custom-logo-link {
  display: inline-block;
}

/* seletor ancorado em "#masthead" (id do <header>) de propósito: o Storefront tem uma regra
   própria ".site-header .site-branding img { height:auto; max-width:230px; }" com a mesma
   especificidade (2 classes + 1 elemento) — um id sempre ganha desse empate, não tem como
   depender de "quem carrega depois" pra ter certeza.

   SEM position:absolute aqui (like tinha antes): naquela fileira antiga, sozinha e com
   espaço sobrando, dava pra deixar a logo "estourar" maior que a própria caixa sem afetar
   mais nada. Agora que menu/busca/carrinho dividem a MESMA fileira, isso colapsava a
   largura reservada da logo quase a zero e o menu ficava por baixo dela. Em fluxo normal, a
   logo reserva o espaço horizontal de verdade que ocupa — sem sobreposição. */
#masthead .site-branding img.custom-logo {
  height: 110px;
  width: auto;
  max-width: none;
  display: block;
}

/* o Storefront dá "margin-bottom: 1.41575em" pro .custom-logo-link (pensado pra fileira
   antiga, onde ele era o único elemento e sobrava espaço embaixo) — sem zerar isso aqui, essa
   margem "fantasma" abaixo da logo desequilibra a centralização vertical da fileira: o
   align-items:center centraliza a CAIXA inteira (imagem + margem), então a imagem em si fica
   deslocada pra cima, sobrando mais espaço visível acima dela que abaixo */
#masthead .custom-logo-link {
  margin-bottom: 0;
}

.main-navigation .menu a {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cinza);
  text-transform: uppercase;
  font-family: var(--fonte-corpo);
}

.site-header-cart a.cart-contents {
  color: var(--preto);
}

/* "line-height: 1" nesses três — sem isso, a entrelinha padrão da fonte sobra mais embaixo
   do texto do que em cima (é assim que fonte funciona, sobra de espaço pro "rabo" de letras
   como j/g/p que esses textos nem têm), e mesmo com align-items:center a fileira inteira, o
   TEXTO em si parecia sempre um pouco mais pra baixo do centro de verdade da logo ao lado */
#masthead .storefront-primary-navigation .main-navigation .menu a,
#masthead .storefront-primary-navigation .site-header-cart,
#masthead .storefront-primary-navigation .site-search input {
  line-height: 1;
}

/* logo + menu + busca + carrinho, todos numa fileira só (ver functions.php, que move a logo
   e a busca do Storefront pra dentro dessa mesma fileira) — o Storefront original usa floats
   com porcentagens pensadas pra DUAS fileiras (logo+busca numa, menu+carrinho noutra); com
   os 4 juntos aqui, essas porcentagens antigas não fecham mais em 100% e quebram a linha, por
   isso reseta tudo pra width:auto/float:none e deixa o flexbox abaixo cuidar do alinhamento.

   DUAS coisas importantes aqui:
   1) Seletores ancorados em "#masthead" (o id do <header>) de propósito — o Storefront tem
      uma regra ".woocommerce-active .site-header .site-branding { width:73.9% }" com 3
      classes de especificidade, mais forte que um seletor com só 2 classes (foi o que
      causava aquela caixa gigante em volta da logo, empurrando o menu bem pra longe). Um id
      (#masthead) sempre ganha de qualquer combinação de classes, não tem como empatar.
   2) Tudo dentro de "@media (min-width: 768px)" DE PROPÓSITO — é o mesmo ponto de corte que
      o próprio Storefront usa pra trocar do menu hambúrguer (mobile) pro menu horizontal
      (desktop). Sem essa media query, esse flexbox valia em qualquer largura de tela e
      brigava com o jeito que o Storefront posiciona o botão de menu/hambúrguer no mobile,
      quebrando a responsividade. Abaixo de 768px, o cabeçalho usa o CSS original do
      Storefront, intocado — só a partir do breakpoint desktop que a fileira única entra. */
@media (min-width: 768px) {
  /* o Storefront centraliza ".col-full" com margem automática (max-width: ~1064px) — cancela
     isso (max-width:none + margem zerada) pra fileira ocupar a largura real do .site-header
     (que já é 100% da tela, sem precisar de nenhum "truque de 100vw"). NÃO usei o mesmo
     truque 100vw do .hero/.secao-lista aqui de propósito: 100vw conta a largura da barra de
     rolagem do navegador junto, então fica um pouco MAIOR que a área visível de verdade —
     nas outras seções isso passa despercebido, mas aqui, com o carrinho encostado bem na
     borda direita (margin-left:auto abaixo), esse excesso cortava o "R$0,00" pra fora da
     tela. Cancelar o max-width em vez de forçar 100vw evita esse problema por completo. */
  #masthead .storefront-primary-navigation .col-full {
    display: flex;
    align-items: center;
    /* 2 à esquerda (logo+menu) e 2 à direita (busca+carrinho): flex-start (padrão) mantém
       os 4 grudados no início, e o margin-left:auto no 3º item (.site-search, algumas linhas
       abaixo) empurra ELE e o que vem depois dele (o carrinho) pro fim da fileira — sobra um
       vão grande só entre os dois grupos, com gap pequeno dentro de cada par */
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1.5rem;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 2.5rem;
  }

  /* o Storefront dá "padding-top: 2.617924em" (~42px) pro .site-header nesse breakpoint —
     não tem relação com o tamanho da logo, é só respiro que ele reserva por padrão. Cortar
     isso aqui encolhe o cabeçalho de verdade sem precisar mexer no tamanho da logo (a
     tentativa anterior de "estourar" a logo pra fora de uma caixa menor vazava visualmente
     pra baixo da linha do cabeçalho — essa abordagem não tem esse risco). */
  #masthead.site-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #masthead .storefront-primary-navigation .site-branding,
  #masthead .storefront-primary-navigation #site-navigation,
  #masthead .storefront-primary-navigation .site-search,
  #masthead .storefront-primary-navigation .site-header-cart {
    float: none;
    width: auto;
    margin: 0;
  }

  /* empurra busca + carrinho (que vêm depois dela no HTML) pro lado direito da fileira,
     mantendo logo + menu grudados à esquerda — cria os "2 grupos" (ver comentário no
     .col-full acima) */
  #masthead .storefront-primary-navigation .site-search {
    margin-left: auto;
  }

  /* o link do carrinho (".cart-contents") vem do Storefront com "padding: 1.618em 0" (~26px
     em cima e embaixo) — mesma ideia do padding da busca logo abaixo: pensado pra uma área
     de carrinho com espaço de sobra, deixando esse item bem mais "inchado" que os outros 3
     nessa fileira compacta (foi confirmado com bordas de debug: a caixa do carrinho ficava
     visivelmente maior/deslocada). Zerando aqui, sobra só o texto/ícone de verdade. */
  #masthead .storefront-primary-navigation .site-header-cart .cart-contents {
    padding: 0;
  }

  /* o ícone da sacola é um "::after" com float:right e nenhuma margem — sem isso, ele fica
     colado direto na última letra de "item" */
  #masthead .storefront-primary-navigation .site-header-cart .cart-contents::after {
    margin-left: 0.5em;
  }

  /* o widget de busca (".widget_product_search") vem do Storefront com "padding: 1.618em"
     (~26px) e um fundo cinza claro — pensado pra quando a busca tinha uma fileira só pra
     ela, com espaço de sobra. Nessa fileira única e compacta, essa caixa ficava BEM mais
     alta que logo/menu/carrinho, esticando a fileira toda e fazendo a centralização vertical
     nunca bater direito (o alinhamento sempre "seguia" a altura da busca, não das outras
     peças). Zerando o padding/fundo aqui, o campo de busca fica do tamanho do próprio
     input — do mesmo porte que os outros itens da fileira. */
  #masthead .storefront-primary-navigation .site-search .widget_product_search {
    padding: 0;
    background: none;
  }
}

/* ================================
   RODAPÉ
   ================================ */
/* o texto padrão do Storefront ("Built with Storefront...") foi trocado pela barra vermelha
   abaixo via remove_action/add_action em functions.php — storefront_credit não é mais usado */
.site-footer {
  border-top: none;
  background: var(--vermelho);
  padding: 0;
}

/* mesmo truque de "quebrar o container" usado em .hero/.secao-lista (ver comentário lá em
   cima) — sem isso a barra vermelha ficaria só na largura do conteúdo (~1064px), com faixa
   branca dos dois lados em telas largas, em vez de ir de ponta a ponta */
.kretec-rodape-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
}

/* ícone à esquerda (justify-content: space-between acima empurra ele pra ponta oposta dos
   links) — altura pequena de propósito, só pra caber na faixa do rodapé sem esticar ela;
   width:auto mantém a proporção original do arquivo */
.kretec-rodape-icone {
  height: 3.5rem;
  width: auto;
  flex-shrink: 0;
}

.kretec-rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

/* no mobile o Storefront/WooCommerce sobrepõe uma barra FIXA embaixo da tela (ícones de
   conta/busca/carrinho, ".storefront-handheld-footer-bar", ~4.24em de altura, só aparece
   abaixo de 768px — mesmo ponto de corte usado aqui) por cima de QUALQUER conteúdo — inclusive
   o nosso rodapé vermelho, que ficava escondido atrás dela. Sobra de espaço só embaixo do
   nosso conteúdo (não encolhe o ícone/links) pra a faixa vermelha continuar até o fim da tela
   por trás da barra fixa, sem deixar vão da cor de fundo do site aparecendo entre as duas. */
@media (max-width: 768px) {
  .kretec-rodape-cta {
    padding-bottom: 5.5rem;
  }
}

.kretec-rodape-cta a {
  color: var(--preto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.kretec-rodape-cta a:hover {
  text-decoration: underline;
}

/* ================================
   HERO (página inicial)
   ================================ */
/* front-page.php roda dentro do <div class="col-full"> que o Storefront abre no header
   (max-width: ~1064px, centralizado com margem) — sem isso, o hero e o catálogo ficam com
   uma faixa branca dos dois lados em telas largas, em vez de ocupar a largura toda como no
   design antigo. O truque "quebra o container" (100vw + margem negativa calc) estica de
   volta até a borda da viewport, ignorando o max-width do pai.
   Pro carrossel de peças (#lista) ter overflow de verdade e rolar mesmo ocupando a tela
   toda, é preciso ter peças suficiente pra passar da largura da tela — ver os produtos
   "placeholder" extras no install.sh, servem só pra isso enquanto não tem peças reais. */
.hero,
.secao-lista {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* "NOVO DROP" e "VER CATÁLOGO" (texto/botão) saíram — o hero agora é só a faixa retangular
   com o gif de fundo, sem nenhum conteúdo por cima.
   aspect-ratio 2/1 casa exatamente com o corte do gif (1080x540) — a caixa acompanha essa
   proporção em qualquer largura de tela, então o cover nunca precisa cortar por cima do que
   já foi enquadrado no vídeo (ver assets/img/hero-serigrafia.gif).
   padding em volta do gif: background-clip diferente pra imagem (content-box, para dentro do
   padding) e pra cor (border-box, até a ponta) é o que deixa a faixa preta sobrando dos 4
   lados — sem isso o cover pintaria por baixo do padding e cobriria a faixa toda de novo. */
.hero {
  aspect-ratio: 2 / 1;
  padding: 4rem;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--preto);
  background-image: url('assets/img/hero-serigrafia.gif');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: content-box, border-box;
}

/* ================================
   CATÁLOGO (grid de cards na página inicial)
   ================================ */
.secao-lista {
  padding: 3rem 2.5rem;
  background: var(--branco);
}

.secao-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 500;
  margin-bottom: 1rem;
}

.secao-titulo {
  font-family: var(--fonte-display);
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  color: var(--preto);
  margin-bottom: 2rem;
  font-weight: 400;
}

/* carrossel horizontal (foto em cima, dados embaixo, rolando de lado) — troca a lista
   vertical de antes; as setas (.carrossel-seta) só chamam scrollBy() no trilho (#lista),
   ver assets/js/carrossel.js */
.carrossel-wrap {
  /* variável usada tanto na largura do card quanto na altura da seta logo abaixo — muda os
     dois juntos, sem precisar repetir o número em mais de um lugar */
  --card-largura: 220px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* scrollbar-width/::-webkit-scrollbar escondem a barra de rolagem nativa — a navegação
   pretendida é pelas setas (arrastar/roda do mouse continua funcionando igual, só não
   aparece a barra visualmente) */
/* SEM "scroll-behavior: smooth" aqui de propósito: com essa propriedade no CSS, um
   scrollTo({behavior:'auto'}) no JS deixa de ser instantâneo — passa a respeitar o CSS e
   anima suave mesmo assim (é assim que a especificação define "auto"). Isso quebrava o
   "pulo" instantâneo do loop do carrossel.js. O suave dos cliques normais já vem explícito
   em cada chamada de scrollBy/scrollTo no JS (behavior: 'smooth'), não precisa daqui. */
/* Regra por CLASSE (não só o antigo "#lista"): carrossel.js já conecta setas a QUALQUER
   ".carrossel-wrap" da página via querySelectorAll, então generalizar aqui deixa esse
   comportamento de scroll pronto pro trilho do carrossel de peças (#lista) E pros trilhos
   de foto da seção "02 — BLOG" (.coletivo-trilho, ver front-page.php), sem duplicar CSS. */
.carrossel-trilho {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  flex: 1;
  min-width: 0; /* sem isso um filho flex não deixa o container encolher/rolar direito */
  scrollbar-width: none;
}
.carrossel-trilho::-webkit-scrollbar {
  display: none;
}

.card {
  flex: 0 0 var(--card-largura);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.card-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--cinza-claro);
}

.card-foto.card-sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
}

/* bloco de texto abaixo da foto — nome, preço, cor, tamanho */
.card-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.card-info h3 {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--preto);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}

.card-info p {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--cinza);
  letter-spacing: 0.04em;
}

.card-info .card-preco {
  font-size: 1rem;
  font-weight: 500;
  color: var(--preto);
  letter-spacing: 0.02em;
}

/* sem caixa (sem borda/fundo) — só o glifo "‹ ›" mesmo. A altura é igual à da foto
   (aspect-ratio 3/4 de --card-largura) de propósito: como o botão é um flex container
   centralizado, o glifo cai exatamente no meio da FOTO, não do card inteiro (que ainda tem
   nome/preço/cor/tamanho embaixo, o que puxaria o centro pra baixo se fosse a altura toda) */
.carrossel-seta {
  flex-shrink: 0;
  width: 2.5rem;
  height: calc(var(--card-largura) * 4 / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--preto);
  font-size: 2.75rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}

.carrossel-seta:hover {
  opacity: 0.55;
}

/* sobrescreve o contorno de foco genérico definido mais acima (a:focus-visible/
   button:focus-visible) — pra ESTE botão específico ("sem caixa" de propósito, só o glifo
   ‹ ›) o próprio esmaecido (mesmo efeito do :hover acima) já é sinalização suficiente de
   foco, sem precisar de nenhum contorno em volta */
.carrossel-seta:focus-visible {
  outline: none !important;
  opacity: 0.55;
}

@media (max-width: 480px) {
  .carrossel-wrap { --card-largura: 160px; }
}

#lista:empty::before {
  content: "Nenhuma peça cadastrada ainda.";
  font-size: 0.85rem;
  color: var(--cinza);
  font-style: italic;
  padding: 2rem;
}

/* ================================
   BLOG/COLETIVO (seção "02 — BLOG" na home, ver front-page.php)
   ================================ */
/* cada .coletivo-item é uma "matéria": foto(s) de um lado, texto do outro, alternando de
   lado a cada item (ver nth-child abaixo) — layout combinado com a Sofia (mockup no card do
   Jira). O conteúdo (título/autor/texto) hoje é hardcoded direto no front-page.php, não vem
   de posts de verdade — é só placeholder até a Sofia mandar o texto final de cada peça. */
.secao-coletivo {
  margin-top: 2rem;
}

.secao-coletivo .secao-titulo {
  margin-bottom: 2rem;
}

.coletivo-item {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

/* item par (2º, 4º...) inverte de lado — mesmo HTML (foto sempre antes do texto na marcação,
   melhor pra leitor de tela/ordem de tabulação), só o visual troca via row-reverse */
.coletivo-item:nth-child(even) {
  flex-direction: row-reverse;
}

.coletivo-item-media {
  flex: 0 0 var(--coletivo-media-largura, 560px);
  min-width: 0;
}

/* trilho de foto por item: reaproveita a mesma engrenagem do carrossel da home
   (.carrossel-wrap/.carrossel-trilho/.carrossel-seta, ver assets/js/carrossel.js — o script
   já conecta setas a QUALQUER ".carrossel-wrap" da página sozinho) — só a foto muda de
   flex-basis (100% em vez da largura fixa de card do catálogo), pra rolar 1 foto inteira por
   clique em vez de 1 card. */
.coletivo-trilho {
  gap: 0;
  border-radius: 12px;
}

.coletivo-foto {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* "align-items: stretch" (em vez do "flex-start" padrão de .carrossel-wrap) + altura "auto"
   na seta faz ela esticar sozinha até a altura de verdade da foto ao lado — resolve tanto
   o desktop (largura fixa, --coletivo-media-largura) quanto o mobile (.coletivo-item-media
   vira width:100% no media query abaixo, a foto muda de altura de acordo com a tela). Uma
   altura calculada a partir de uma largura fixa (como fazia antes) ficava errada assim que
   a largura da caixa passava a ser fluida — sobrava um espaço em branco enorme embaixo da
   foto no celular, do tamanho da seta "sobrando" além da foto de verdade. */
.coletivo-carrossel-wrap {
  align-items: stretch;
}

.coletivo-carrossel-wrap .carrossel-seta {
  height: auto;
}

.coletivo-item-texto {
  flex: 1;
  min-width: 0;
  padding-top: 0.5rem;
}

.coletivo-item-titulo {
  font-family: var(--fonte-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--preto);
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.coletivo-item-autor {
  font-size: 0.85rem;
  color: var(--cinza);
  margin-bottom: 1.2rem;
}

.coletivo-item-corpo {
  font-size: 1rem;
  line-height: 1.7;
}

.coletivo-item-corpo p {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .coletivo-item,
  .coletivo-item:nth-child(even) {
    flex-direction: column;
    gap: 1.5rem;
  }

  .coletivo-item-media {
    flex-basis: auto;
    width: 100%;
  }
}

/* ================================
   LOJA (grid nativo do WooCommerce — página "Loja" /loja, categorias, busca)
   ================================ */
/* mesma ideia de lista vertical do catálogo da home (#lista/.card acima), mas aplicada no
   grid padrão que o próprio WooCommerce desenha nessas páginas — por isso os seletores usam
   a marcação nativa dele (ul.products, li.product) em vez das nossas classes .card/#lista */
.woocommerce ul.products {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--cinza-claro);
}

.woocommerce ul.products li.product {
  width: 100%;
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--cinza-claro);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  text-decoration: none;
}

.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .card-foto {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* "sem foto" (ver woocommerce/content-product.php) é uma <div>, não uma <img> — a regra
   acima cuida do tamanho/proporção dos dois, essa aqui só centraliza o texto dentro dela */
.woocommerce ul.products li.product .card-sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--preto);
  margin: 0 0 0.4rem;
}

.woocommerce ul.products li.product .price {
  font-size: 1rem;
  font-weight: 500;
}

.woocommerce ul.products li.product .button {
  margin-top: 0.75rem;
}

@media (max-width: 480px) {
  .woocommerce ul.products li.product img { width: 96px; }
}

@media (max-width: 768px) {
  .hero { padding: 2rem; }

  .secao-lista { padding: 2rem 1.5rem; }
}

/* ================================
   BLOG (page-blog.php — lista — e single.php — post individual)
   ================================ */
/* o <main> de page-blog.php roda dentro do ".col-full" que o Storefront abre no header, e
   esse ".col-full" tem seu próprio max-width (~1064px, regra do Storefront, não nossa) — sem
   isso aqui, o max-width maior do <main> (ver page-blog.php) não tem efeito NENHUM, porque o
   pai já corta antes: um filho não consegue ficar mais largo que o próprio pai. */
.page-template-page-blog-php .col-full {
  max-width: 1500px;
}

/* o Storefront dá margin-bottom (1.618em) + padding (1em em cima/embaixo) PRÓPRIOS pro
   ".storefront-breadcrumb" — somado ao padding-top de 3rem do <main> logo abaixo (ver
   page-blog.php), sobrava um vão enorme entre o "Início > Coletivo" e o título grande da
   página. Zera só a margem/padding de baixo do breadcrumb (o de cima continua, separando
   ele do cabeçalho) — quem sobra de respiro é só o padding do <main> mesmo. */
.page-template-page-blog-php .storefront-breadcrumb {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* post individual (single.php): título, autor, imagem, data e texto, nessa ordem — layout
   combinado com a Sofia, coluna única centralizada igual a page-exemplo.php */
.kretec-post-titulo {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}

.kretec-post-autor {
  font-size: 0.85rem;
  color: var(--cinza);
  margin-bottom: 2rem;
}

.kretec-post-imagem {
  border: 1px solid var(--preto);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.kretec-post-imagem img {
  display: block;
  width: 100%;
  height: auto;
}

.kretec-post-sem-imagem {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
}

.kretec-post-data {
  font-size: 0.85rem;
  color: var(--cinza);
  margin-bottom: 2.5rem;
}

.kretec-post-texto {
  font-size: 1rem;
  line-height: 1.7;
}

.kretec-post-texto p {
  margin-bottom: 1.2rem;
}

.kretec-post-voltar {
  margin-top: 3rem;
}

.kretec-post-voltar a {
  color: var(--preto);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.kretec-post-voltar a:hover {
  text-decoration: underline;
}

/* lista do blog (page-blog.php) — mesma linguagem visual da grade nativa da loja
   (.woocommerce ul.products acima): lista vertical, foto pequena à esquerda, texto à
   direita, separador fino entre itens */
.kretec-blog-lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cinza-claro);
}

.kretec-blog-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--cinza-claro);
  text-decoration: none;
  color: inherit;
}

.kretec-blog-item-foto {
  width: 280px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.kretec-blog-item-sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
}

.kretec-blog-item-info h2 {
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--preto);
  margin: 0 0 0.4rem;
}

.kretec-blog-item-meta {
  font-size: 0.85rem;
  color: var(--cinza);
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}

.kretec-blog-item-resumo {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--preto);
}

.kretec-blog-vazio {
  padding: 2rem 0;
  font-size: 0.85rem;
  color: var(--cinza);
  font-style: italic;
}

/* bloco de instrução pra quem quer sugerir um post (sem formulário público — a publicação
   continua sendo feita pela administração, ver comentário no topo de page-blog.php) */
.kretec-blog-cta {
  margin-top: 3rem;
  padding: 2rem 2.5rem;
  background: var(--cinza-claro);
}

.kretec-blog-cta h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.kretec-blog-cta p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--preto);
}

.kretec-blog-cta a {
  color: var(--preto);
  font-weight: 500;
}

@media (max-width: 480px) {
  .kretec-blog-item { flex-direction: column; }
  .kretec-blog-item-foto { width: 100%; aspect-ratio: 1 / 1; }
}