.editorial-category-page { color:#2A2718; background:#fff; font-family:Figtree,sans-serif; }
.editorial-category-hero { padding:72px max(24px,5vw) 58px; background:#F3F4EC !important; background-color:#F3F4EC !important; text-align:center; }
.editorial-category-hero>span { display:block; margin-bottom:14px; font-size:9px; font-weight:700; letter-spacing:.24em; }
.editorial-category-hero h1 { margin:0 0 16px; font-family:Fraunces,serif; font-size:clamp(44px,6vw,72px); font-weight:400; line-height:1; text-transform:capitalize; }
.editorial-category-hero p { max-width:600px; margin:0 auto; color:#5F6552; font-size:15px; line-height:1.65; }

/* Filtro de gênero — palavra solta dentro da barra de ferramentas, ao lado de
   "Ordenar por". Já foi um grupo de botões com caixa, centralizado, grande,
   entre o título e a lista — a dona da loja achou que chamava atenção demais
   pra o que é (só mais um filtro, não a escolha principal da página). Agora é
   texto puro: um traço fino embaixo marca a opção ativa, e um leve zoom no
   hover avisa que é clicável sem precisar de fundo nem borda. */
.editorial-category-genero-links { display:flex; align-items:center; gap:16px; }
.editorial-category-genero-links button { padding:2px 0; border:none; border-bottom:1px solid transparent; border-radius:0; background:none; color:#7B806A; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:color .15s ease, border-color .15s ease, transform .15s ease; }
.editorial-category-genero-links button:hover { color:#2A2718; transform:scale(1.08); }
.editorial-category-genero-links button.is-active { color:#2A2718; border-bottom-color:#2A2718; }
.editorial-category-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 max(24px,5vw); padding:28px 0; border-bottom:1px solid #e8e4dc; }
.editorial-category-controls { display:flex; align-items:center; gap:20px; }
.editorial-category-toolbar p { margin:0; color:#7B806A; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.category-sort { position:relative; display:flex; align-items:center; gap:10px; }
.category-sort>span { color:#7B806A; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.category-sort select { min-width:145px; padding:10px 28px 10px 12px; border:0; background:transparent; color:#2A2718; font:600 11px Figtree,sans-serif; appearance:none; outline:none; }
.category-sort svg { position:absolute; right:8px; pointer-events:none; }
.editorial-category-body { padding:48px max(24px,5vw) 110px; }
.editorial-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 22px; }
.editorial-category-card { min-width:0; padding:0; border-radius:0; color:#2A2718; text-align:left; }
.editorial-category-media { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:#F3F4EC !important; background-color:#F3F4EC !important; }
/* Mesmo truque de duas camadas de editorial-home.css (`.stitch-product-image`)
   e de editorial-product.css (`.editorial-product-image-bg/-fg`): a foto de
   baixo cobre o quadro borrada, a de cima mostra a foto inteira sem cortar.
   Sem isso, foto que não bate com o quadro 4:5 deixava uma faixa lisa feia. */
.editorial-category-media img { position:absolute; inset:0; width:100%; height:100%; transition:transform .7s ease; }
.editorial-category-media-bg { object-fit:cover; filter:blur(24px) brightness(.92); transform:scale(1.15); }
.editorial-category-media-fg { object-fit:contain; }
.editorial-category-card:hover img { transform:scale(1.035); }
.editorial-category-media>em { position:absolute; top:12px; left:12px; padding:6px 9px; background:#fff; color:#2A2718; font-size:8px; font-style:normal; font-weight:700; letter-spacing:.14em; }
.editorial-category-buy { position:absolute; right:0; bottom:0; left:0; padding:14px; transform:translateY(100%); background:#2A2718; color:#fff; text-align:center; font-size:9px; font-weight:700; letter-spacing:.16em; transition:transform .25s ease; }
.editorial-category-card:hover .editorial-category-buy { transform:translateY(0); }
.editorial-category-card>strong { display:block; margin:18px 0 6px; overflow:hidden; font-size:16px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; color:#2A2718; }
.editorial-category-card>span:last-child { font-size:16px; font-weight:700; color:#2A2718; }
.editorial-category-fallback { display:grid; place-items:center; width:100%; height:100%; color:#aaa197; font-family:Fraunces,serif; letter-spacing:.18em; }
.editorial-category-empty { padding:100px 24px; background:#f7f5f1 !important; text-align:center; }
.editorial-category-empty h2 { margin:0 0 10px; font-family:Fraunces,serif; font-size:30px; font-weight:400; }
.editorial-category-empty p { color:#5F6552; }
.editorial-category-best-sellers { padding:0 max(24px,5vw) 110px; text-align:center; }
.editorial-category-best-sellers h2 { margin:0 0 38px; font-family:Fraunces,serif; font-size:clamp(30px,3vw,42px); font-weight:400; }
.editorial-category-best-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }

@media(max-width:900px){
  .editorial-category-hero { padding:52px 20px 46px; }
  .editorial-category-hero h1 { font-size:46px; }
  .editorial-category-hero p { font-size:13px; }
  .editorial-category-genero-links { gap:10px; }
  .editorial-category-genero-links button { font-size:10px; }
  .editorial-category-toolbar { margin:0 16px; padding:20px 0; }
  .editorial-category-toolbar>p { display:none; }
  .category-sort>span { display:none; }
  /* Numa tela de 375px os quatro generos (~238px) mais o seletor de ordem nao
     cabem na mesma linha, e a barra empurrava a pagina inteira 24px para o
     lado: o site inteiro andava de lado no telefone. Com a quebra, o seletor
     desce para uma segunda linha SO quando falta espaco - em tela um pouco
     maior os dois continuam lado a lado, como antes. */
  .editorial-category-controls { flex-wrap:wrap; gap:12px 16px; }
  /* `flex:0 0 auto` nos dois lados e o que forca a quebra em vez do
     encolhimento: sem isso, numa tela de 320px o seletor espremia ate 30px e
     sobrava so a setinha, sem a palavra. As duas margens `auto` seguram os
     dois cantos nos dois casos: lado a lado quando cabe (generos na esquerda,
     ordenar na direita) e um embaixo do outro nos mesmos cantos quando nao. */
  .editorial-category-genero-links { flex:0 0 auto; margin-right:auto; }
  .editorial-category-genero-links button { white-space:nowrap; }
  .category-sort { flex:0 0 auto; margin-left:auto; }
  .category-sort select { min-width:0; padding-left:0; }
  .editorial-category-body { padding:32px 14px 72px; }
  .editorial-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 10px; }
  .editorial-category-buy { display:none; }
  .editorial-category-card>strong { margin-top:11px; font-size:13px; }
  .editorial-category-card>span:last-child { font-size:14px; }
  .editorial-category-best-sellers { padding:0 14px 72px; }
  .editorial-category-best-sellers h2 { margin-bottom:24px; font-size:30px; }
  .editorial-category-best-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 10px; }
}

@media(max-width:380px){
  .editorial-category-hero h1 { font-size:40px; }
}

@media(prefers-reduced-motion:reduce){
  .editorial-category-media img,.editorial-category-buy { transition:none !important; }
}

/* Specific fix: sobrescreve o tema global que força texto preto (public/index.css) — essa barra tem fundo escuro de propósito */
.public-store-wrapper .editorial-category-media .editorial-category-buy { color:#ffffff !important; }