/* ============================================================================
   POOD — VITRINE (categoria e busca)
   Depende de pood-tokens.css. Cores e medidas saem de var(--pood-*).

   Card de produto e cabecalho da vitrine, na Direcao A.
   Alvo: card "Tela - Vitrine" do design system (claude.ai/design, projeto
   Pood Fitness - Design System), classe .tile de direcao/tela.css.

   Tokens da Direcao A (hex literal, como nos outros blocos publicados):
     var(--pood-fundo) fundo · var(--pood-bloco) bloco · var(--pood-papel) papel · var(--pood-tinta) tinta
     var(--pood-tinta-2) tinta-2 · var(--pood-tinta-3) tinta-3 · var(--pood-linha) linha · var(--pood-linha-2) linha-2
     var(--pood-acento) acento (pontuacao)

   ESCOPO: so a GRADE de categoria e busca - .page-products .column.main.

   O ".column.main" nao e enfeite. A barra lateral tem um widget "Featured" que
   usa as MESMAS classes (.products-grid, .product-labels, .product-item-name),
   com foto de 84px. Sem esse escopo, o selo de sob encomenda saia 81x35 sobre
   uma miniatura de 84px e cobria a imagem inteira. Medido em 13/08/2026.

   A home e a pagina /ofertas usam widgets Smartwave_Filterproducts, que tem
   product_type proprio e NAO seguem porto_settings/category_grid - tambem
   medido. Nao estilize por aqui, ou o card muda em um lugar so.

   O QUE E CONFIGURACAO, NAO CSS (ja aplicado, ver var/backup/vitrine-config-*.json):
     porto_settings/category_grid/product_type        = 14   (era 3)
     porto_settings/category_grid/product_button_pos  = outside
     porto_settings/category/rating_star              = 0
     porto_settings/category/addtowishlist            = 0
     porto_settings/category/addtocompare             = 0
     preorder/exibicao/selo_cor_fundo                 = var(--pood-acento)
     preorder/exibicao/selo_cor_texto                 = var(--pood-tinta)
   O type14 + button_pos=outside e o que poe o botao ABAIXO dos detalhes e
   centraliza o card. Por CSS isso era impossivel: no type3 o botao fica cinco
   niveis dentro do bloco da foto, e "order" so vale entre irmaos.

   A COR DO SELO DE SOB ENCOMENDA NAO SE MUDA AQUI. O JS do PoodModulos_PreOrder
   escreve style inline no elemento; CSS so venceria com !important. A cor sai
   por config:set preorder/exibicao/selo_cor_fundo. Ver §18 do CLAUDE.md.

   NAO esconda .product-labels: o JS do Pre Order usa esse container como ancora
   e o cria quando nao existe. display:none ali faz o selo sumir sem erro nenhum.
*/

/* ---------------------------------------------------------------------------
   1. Grade: float vira grid

   O Porto monta a listagem com float:left + width:33.33% e um mecanismo de
   clear por .nth-child-* que NAO existe no HTML desta loja (medido: zero
   ocorrencias). Com float e sem clear, card mais alto que o vizinho escalona a
   linha seguinte. Isso nao mordia porque o nome era truncado em UMA linha; ao
   liberar duas linhas (bloco 4), passaria a morder.

   Grid resolve os dois: altura de linha uniforme e gap de verdade.
   :not(.owl-carousel) protege carrossel de relacionados dentro da categoria,
   que usa as mesmas classes e quebraria virando grid.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid:not(.owl-carousel) > .product-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 22px;
  margin-left: 0;
  margin-right: 0;
}
.page-products .column.main .products-grid:not(.owl-carousel) > .product-items > .product-item {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. Foto: quadrada, sobre o cinza de bloco

   O fundo aparece enquanto a imagem faz lazyload e nas fotos com transparencia
   - e o mesmo cinza do .ph do design system.

   NAO ha regra de sombra a desligar aqui. No type3 existia
   .product-item-info:hover .product-item-photo:not(.porto-tb-featured-image),
   mas no type14 o proprio .product-item-photo passou a carregar a classe
   .porto-tb-featured-image - o :not() deixou de casar e a sombra nao aparece.
   Escrever box-shadow:none seria regra morta.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .product-item-photo {
  background: var(--pood-bloco);
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
}
.page-products .column.main .products-grid .product-item-info:hover .product-item-photo {
  background: var(--pood-bloco-2);
}

/* ---------------------------------------------------------------------------
   3. Selos: pilula no acento, no canto superior esquerdo

   Vale para o selo de desconto (.sale-label, do Porto) e para o de sob
   encomenda (.preorder-label, criado pelo JS do Pre Order) - so a GEOMETRIA;
   a cor do segundo vem de config, ver o cabecalho deste arquivo.
   O #E27C7C do Porto nao e ajustavel pelo painel: nao ha regra de selo nos
   configed_css. So por CSS mesmo.
--------------------------------------------------------------------------- */
.page-products .column.main .product-labels {
  top: 12px;
  left: 12px;
}
.page-products .column.main .product-labels .product-label {
  padding: 3px 9px;
  margin-bottom: 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
}
.page-products .column.main .product-labels .product-label.sale-label {
  background-color: var(--pood-acento);
  color: var(--pood-tinta);
}
.page-products .column.main .product-labels .product-label.new-label {
  background-color: var(--pood-tinta);
  color: var(--pood-papel);
}

/* ---------------------------------------------------------------------------
   4. Nome: duas linhas, centrado, discreto

   O Porto trunca em uma linha com reticencias em DOIS niveis - no
   .product-item-name (0,1,0) e no .product-item-name a (0,1,1). Desfazer so um
   deixa o outro cortando.
   min-height reserva as duas linhas para o preco nao dancar entre cards de nome
   curto e longo.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .product-item-name,
.page-products .column.main .products-grid .product-item-name a {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.page-products .column.main .products-grid .product-item-name {
  margin: 0 0 5px;
  padding-right: 0;
}
.page-products .column.main .products-grid .product-item-name a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--pood-tinta);
  margin-bottom: 0;
  min-height: 2.7em;
}
.page-products .column.main .products-grid .product-item-name a:hover {
  color: var(--pood-acento);
}

/* ---------------------------------------------------------------------------
   4b. Swatches no card

   Alvo (.sw do design system): faixa centrada de 34px entre a foto e o nome.
   Cor = quadrado de 34 com raio 8, moldura clara e a COR POR DENTRO (inset de
   22%). Tamanho = pilula de 22px com o rotulo.
   Selecionado ganha borda na tinta com um anel de 1px por fora.

   Os swatches so passaram a existir na listagem depois de ligar
   used_in_product_listing no atributo color - antes o dado nem era carregado.
   Mesmo motivo de !important da barra lateral: a regra que dimensiona vem de
   folha servida pelo CDN, ilegivel pelo CSSOM.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .swatch-attribute {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px;
}
.page-products .column.main .products-grid .swatch-attribute-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  flex-wrap: wrap;
}
.page-products .column.main .products-grid .swatch-option.color {
  width: 34px !important;
  height: 34px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 7px !important;
  border: 1px solid var(--pood-linha-2) !important;
  border-radius: 8px !important;
  background-clip: content-box !important;
  outline: 0;
  float: none;
}
.page-products .column.main .products-grid .swatch-option.color.selected {
  border-color: var(--pood-tinta) !important;
  box-shadow: 0 0 0 1px var(--pood-tinta);
}
/* O Porto desenha um CIRCULO por cima do swatch: ::after de 18x18 com raio 9 e
   borda preta, em -3px/-3px. Sobre o quadrado de raio 8 do modelo isso lia como
   dois desenhos disputando o mesmo lugar. Sai - o estado selecionado ja e dito
   pela borda na tinta mais o anel de 1px acima, que e o que o modelo pede. */
.page-products .column.main .products-grid .swatch-option.color::after,
.page-products .sidebar-main .swatch-option.color::after {
  content: none;
}

/* SWATCH DE IMAGEM na vitrine — 24x32.

   Em 26/08/2026 o atributo "color" passou a usar a imagem do produto no
   swatch, e como a chave e do ATRIBUTO ela vale aqui tambem, nao so na PDP.
   Sem esta regra o swatch caia no padrao do Magento e saia com 12x12 —
   medido, e e o tamanho de um ponto.

   Por que 24 e nao os 60 da PDP: o card tem 285px e o rack tem 8 cores.
   Com gap de 7, 8 swatches de 24 pedem 8*24 + 7*7 = 241px e cabem numa
   linha so; com 28 ja seriam 273, colado na borda, e qualquer produto de 9
   cores quebraria. A proporcao e a mesma da PDP e a do catalogo, 3:4.

   Aqui o swatch nao precisa mostrar a peca inteira: ele acompanha um card
   que ja exibe a foto grande logo acima. Basta dizer "existe outra versao". */
.page-products .column.main .products-grid .swatch-option.image,
.page-products .sidebar-main .swatch-option.image {
  width: 24px !important;
  height: 32px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--pood-linha-2) !important;
  border-radius: 6px !important;
  background-clip: border-box !important;
  /* Branco, e nao o tom de bloco: desde 26/08/2026 o `view.xml` gera a
     imagem do swatch com fundo branco, e um cinza por tras dela desenharia
     uma moldura fina onde a foto nao cobrisse exatamente a caixa. */
  background-color: var(--pood-papel) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  outline: 0;
  float: none;
  box-shadow: none;
}

.page-products .column.main .products-grid .swatch-option.image.selected,
.page-products .sidebar-main .swatch-option.image.selected {
  border-color: var(--pood-tinta) !important;
  box-shadow: 0 0 0 1px var(--pood-tinta);
}

.page-products .column.main .products-grid .swatch-option.image::after,
.page-products .sidebar-main .swatch-option.image::after {
  content: none;
}
.page-products .column.main .products-grid .swatch-option.text {
  height: 22px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 9px !important;
  border: 1px solid var(--pood-linha-2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--pood-tinta) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  float: none;
}
.page-products .column.main .products-grid .swatch-option.text.selected {
  background: var(--pood-tinta) !important;
  border-color: var(--pood-tinta) !important;
  color: var(--pood-papel) !important;
}
/* o rotulo do atributo ("Cor", "Tamanho") nao existe no card do modelo */
.page-products .column.main .products-grid .swatch-attribute .swatch-attribute-label {
  display: none;
}

/* Os rotulos que o Magento poe antes do numero - "Preco", "Preco Especial" e
   "A partir de" - nao existem no modelo. Os dois primeiros ja vinham ocultos; o
   "A partir de" nao, e aparecia em todo configuravel.

   Esconder o "A partir de" e correto AQUI e pode nao ser em outra loja: ele
   avisa que o preco mostrado e o menor de uma faixa. Medido no §23.6, os 26
   configuraveis desta loja variam so por COR, com preco identico entre as
   variacoes - nao ha faixa, e o rotulo promete uma escolha mais barata que nao
   existe. No dia em que houver configuravel com precos diferentes entre
   variacoes, esta regra precisa voltar atras. */
.page-products .column.main .products-grid .price-box .price-label {
  display: none;
}

/* ---------------------------------------------------------------------------
   5. Preco

   O tamanho vem de .price-container .price, NAO do .price-box - mexer no
   .price-box nao muda o numero na tela.
   O rotulo "A partir de" sai: em configuravel de cor unica ele so acrescenta
   ruido, e o design system nao o tem.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .product-item-details .price-box {
  margin: 0 0 14px;
  font-weight: 500;
}
.page-products .column.main .products-grid .product-item .price-container .price {
  font-size: 15px;
  font-weight: 500;
  color: var(--pood-tinta);
  font-variant-numeric: tabular-nums;
}
.page-products .column.main .products-grid .product-item .price-box .price-label {
  display: none;
}
.page-products .column.main .products-grid .product-item .old-price .price,
.page-products .column.main .products-grid .product-item .old.price {
  font-size: 12px;
  font-weight: 400;
  color: var(--pood-tinta-2);
}
.page-products .column.main .products-grid .product-item .special-price .price {
  font-weight: 600;
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   6. Botao: a pilula .add do design system

   Alvo (.add em direcao/tela.css): largura TOTAL do card, 38px de altura, borda
   1px na tinta, fundo transparente, e no hover inverte - fundo tinta, texto
   branco. Nao e a .btn--2 vazada: a vitrine tem botao proprio.

   Especificidade: o type14 emite .product-type-advanced, e a regra do Porto que
   pinta o botao e (0,7,0). A cadeia abaixo da (0,8,0) e vence - e o custom_style
   e a ULTIMA folha da pagina, entao empate tambem venceria.
   Sem !important: o unico com !important e .button-pos-outside (com hifen), e o
   type14 emite button-posoutside (sem). Nao casa - e um bug do proprio Porto.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .product-item-info .product-type-advanced .product-item-inner .product-item-actions > .actions-primary .tocart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  margin: 0;
  flex-grow: 1;
  border: 1px solid var(--pood-tinta);
  border-radius: 999px;
  /* shorthand de proposito: a regra do Porto declara "background:none" junto com
     background-color:#212529, e um background-color isolado depois dela pode nao
     bastar dependendo da ordem. O shorthand zera as duas coisas de uma vez. */
  background: transparent;
  color: var(--pood-tinta);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .16s, color .16s, border-color .16s;
}
.page-products .column.main .products-grid .product-item-info .product-type-advanced .product-item-inner .product-item-actions > .actions-primary .tocart:hover,
.page-products .column.main .products-grid .product-item-info .product-type-advanced .product-item-inner .product-item-actions > .actions-primary .tocart:focus-visible {
  background: var(--pood-tinta);
  border-color: var(--pood-tinta);
  color: var(--pood-papel);
}
/* O Porto prefixa o rotulo com um glifo da fonte porto-icons, que nao e o icone
   de sacola do design system. O glifo sai e o desenho certo entra no lugar, pelo
   MESMO pseudo-elemento - nao precisou de template.

   mask-image e nao background-image, pelo motivo do §29.14: com background a cor
   fica presa dentro do arquivo e o hover (que inverte para papel sobre tinta)
   nao poderia mudar. Com mascara, o background-color:currentColor faz o icone
   herdar a cor do rotulo e virar branco junto com ele.

   O SVG vai embutido em data: URI, e aqui isso e seguro - a proibicao do §21.4 e
   do §29.1 vale para atributo de template (o Escaper apaga o prefixo data:) e
   para o custom_style (teto de 64 KB). Este arquivo e do subtema, sem teto, e o
   navegador le o CSS sem passar por Escaper nenhum.

   O traco vai em preto solido no SVG de proposito: a mascara usa o alfa, entao a
   cor de dentro do arquivo nao aparece - so o recorte. */
.page-products .column.main .products-grid .product-item .tocart::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.4 6.4V5.2a3.6 3.6 0 017.2 0v1.2m-9.5 0h11.8l-.9 9.6a1.4 1.4 0 01-1.4 1.3H5.4a1.4 1.4 0 01-1.4-1.3z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.4 6.4V5.2a3.6 3.6 0 017.2 0v1.2m-9.5 0h11.8l-.9 9.6a1.4 1.4 0 01-1.4 1.3H5.4a1.4 1.4 0 01-1.4-1.3z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .16s;
}
.page-products .column.main .products-grid .product-item .tocart:hover::before {
  transform: translateY(-1px);
}
/* o form e o .actions-primary precisam ocupar a largura toda para o botao ocupar */
.page-products .column.main .products-grid .product-item-details .product-item-actions > .actions-primary,
.page-products .column.main .products-grid .product-item-details .product-item-actions form {
  display: block;
  width: 100%;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   6b. Card esgotado

   Alvo (.tile--esgotado): foto em cinza sob um veu claro, nome/preco a 42% de
   opacidade, preco riscado, e no lugar do botao um "Avise-me" vazado discreto.
   No hover a opacidade sobe para 70% e o veu clareia - o card continua legivel
   para quem se interessou, sem competir com os que estao a venda.

   O Magento nao poe classe de esgotado no card: ele troca o <form> do botao por
   <div class="stock unavailable">. Por isso :has() - medido, e o navegador
   suporta. Onde nao houver suporte, o card so nao recebe o tratamento; nada
   quebra, e nenhum produto vendavel e afetado.

   O SELO "Esgotado" NAO ENTRA AQUI. O Porto nao o emite, e cria-lo por
   pseudo-elemento empilharia com o selo de sob encomenda que estes produtos ja
   tem - dois selos disputando o mesmo canto. Precisa de decisao de empilhamento.
   O rotulo "Avise-me" tambem fica para depois: exige o alerta de estoque do
   Magento (catalog/productalert) renderizado na listagem, que e template.
--------------------------------------------------------------------------- */
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable) .product-item-photo {
  filter: grayscale(1);
}
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable) .product-item-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(242, 242, 244, .58);
  transition: background .18s;
  pointer-events: none;
}
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable):hover .product-item-photo::before {
  background: rgba(242, 242, 244, .3);
}
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable) .product-item-name,
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable) .price-box {
  opacity: .42;
  transition: opacity .18s;
}
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable):hover .product-item-name,
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable):hover .price-box {
  opacity: .7;
}
.page-products .column.main .products-grid .product-item-info:has(.stock.unavailable) .price-box .price {
  text-decoration: line-through;
}
/* o aviso ocupa exatamente a caixa do botao, para a linha da grade nao dancar */
.page-products .column.main .products-grid .product-item-details .stock.unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--pood-linha);
  border-radius: 999px;
  background: transparent;
  color: var(--pood-tinta-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   7. Cabecalho da pagina

   H1 vinha 20px/700 em #DB6060 - o vermelho antigo da loja, que a Direcao A
   nao usa. A trilha vinha em caixa alta.

   E o H1 nem aparecia: o Porto esconde o .page-title-wrapper na categoria,
   porque conta que o titulo venha do bloco de descricao. Isso deixava a pagina
   com UM h1 so, o <h1 class="custom-heading"> de dentro do texto da categoria -
   e, depois de o texto ir para o fim da coluna, sem titulo nenhum no topo.

   Revelar o titulo do proprio Magento resolve os dois lados: a categoria volta
   a ter nome na primeira dobra, e o h1 passa a ser o nome dela em vez de uma
   frase de venda. Bate com o modelo, que abre com trilha e titulo.

   ATENCAO: enquanto o texto da categoria trouxer <h1 class="custom-heading">,
   a pagina fica com DOIS h1. O segundo e conteudo de CMS - trocar por h2 e
   edicao de texto, nao de tema. */
.page-products .page-title-wrapper {
  display: block;
}
.page-products .page-title-wrapper .page-title,
.page-products .page-title-wrapper .page-title span {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--pood-tinta);
  text-transform: none;
}
/* A TRILHA MORA NO pood-base.css.
   As oito regras comuns eram IDENTICAS as do pood-institucional.css, palavra
   por palavra, mudando so o prefixo de escopo - e o comentario de la ja
   registrava a divida. Agora os dois escopos entram numa lista de seletores
   so, e la tambem esta a explicacao dos !important e do icone de casa.

   Sobra aqui exclusivamente o que diverge desta tela: o respiro do topo, que
   e 56px na vitrine e 40 nas institucionais, e a margem de baixo. */

/* ---------------------------------------------------------------------------
   8a. Espacamento da pagina

   Medido contra a .folha do design system (padding 56/40/88, trilha com 26 de
   respiro, .cat com gap de 40): a loja vinha com 10px de padding lateral, ZERO
   no topo e as duas colunas COLADAS - gap de 0 onde o modelo pede 40.

   O gap entre colunas sai por padding-right na propria barra lateral, nao por
   margem: os cartoes tem fundo branco, e margem no .sidebar-main empurraria o
   fundo junto. Com padding, o fundo para onde deve e o respiro fica por fora.
   Como o box-sizing e border-box, a largura ja inclui esses 40 - 276 de caixa
   dao 236 de conteudo, que e a medida do modelo.
--------------------------------------------------------------------------- */
.page-products .page-main {
  /* ZERO, e nao 56: o respiro de 56px do topo da folha passou para a faixa da
     trilha, que fica ACIMA do .page-main, e os 26px que separam a trilha do
     titulo sao a margin-bottom do .breadcrumbs logo abaixo. Deixar 26 aqui
     tambem somava com aquela margem e dava 52 - medido. */
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 88px;
}
.page-products .breadcrumbs {
  padding: 56px 0 0;
  margin: 0 0 26px;
}
/* Largura em px, nao em %: a porcentagem se aplica sobre o container JA reduzido
   pelos 40px de padding lateral, e o gap saiu 15 onde devia ser 40. Com 276
   fixos (236 de conteudo + 40 de respiro) e o resto por calc, a conta fecha nas
   duas faixas de container do Porto - 960 entre 992 e 1199, 1136 acima. */
@media (min-width: 992px) {
  /* .columns na cadeia e !important no padding: o Porto define o padding
     lateral das colunas com peso maior, e a primeira versao desta regra saiu
     com 15px onde pedia 40 - a largura pegou, o padding nao. Medido. */
  .page-products .columns .sidebar.sidebar-main {
    width: 276px;
    padding-right: 40px !important;
    padding-left: 0 !important;
  }
  .page-products .columns .column.main {
    width: calc(100% - 276px);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   8b. Fundo da pagina e hover do card

   O design system assenta tudo sobre var(--pood-fundo), e o cartao branco so aparece no
   hover - e isso que da relevo ao card sem sombra nenhuma. A loja estava com
   fundo branco, entao card e pagina tinham a mesma cor e o hover nao teria como
   se destacar.
--------------------------------------------------------------------------- */
.page-products,
.page-products .page-main,
.page-products .columns {
  background: var(--pood-fundo);
}
.page-products .column.main .products-grid .product-item-info {
  position: relative;
  padding: 10px 10px 12px;
  margin: -10px -10px -12px;
  border-radius: 14px;
  transition: background .18s, box-shadow .18s;
}
.page-products .column.main .products-grid .product-item-info:hover {
  background: var(--pood-papel);
  box-shadow: 0 0 0 1px var(--pood-linha);
}

/* ---------------------------------------------------------------------------
   8c. Toolbar: uma so, e so o que o modelo tem

   O Magento renderiza a toolbar DUAS vezes - topo e rodape da listagem. O
   modelo tem uma, no topo, com a contagem e o seletor de ordem. Fora ficam o
   limitador ("Mostrar 12/24/36") e o alternador grade/lista, que o modelo nao
   tem: a grade e a unica forma prevista.
--------------------------------------------------------------------------- */
.page-products .column.main .toolbar-products:last-of-type .toolbar-sorter,
.page-products .column.main .toolbar-products .modes,
.page-products .column.main .toolbar-products .field.limiter {
  display: none;
}
.page-products .column.main .toolbar-products:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

/* filtros ativos: as pilulas do modelo (.at), com o x em circulo */
/* Esta regra JA FOI a pilula do modelo, e a pilula foi removida de proposito -
   ver o bloco "SEM BALAO" logo abaixo. Ela continua existindo com a cadeia
   longa porque e ela que vence: (0,4,0) contra os (0,3,0) do bloco de baixo.
   Escrever a versao sem balao so la embaixo nao mudava nada na tela - medido,
   o chip continuava branco, com borda e raio 999. */
.page-products .sidebar-main .filter-current .item,
.page-products .column.main .filter-current .item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 3px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11.5px;
  color: var(--pood-tinta);
  white-space: normal;
}
.page-products .filter-current {
  margin: 0;
  padding: 0 0 4px;
}
/* SEM BALAO. O modelo poe cada filtro aplicado numa pilula, mas la eles ficam
   na barra da coluna principal, com 880px. Aqui a barra lateral tem 198px
   uteis e o chip de PRECO ("Preço R$ 1.000,00 - R$ 8.000,00") mede 195px
   sozinho - a pilula fica menor que o texto e a informacao quebra dentro dela.

   Entao aqui eles sao linhas de texto, empilhadas, com o botao de remover ao
   lado. Sem moldura nao ha nada para o texto estourar, e ele pode quebrar em
   duas linhas sem parecer defeito. */
.page-products .filter-current .items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.page-products .filter-current .item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
}
/* o nome do atributo e o .at i do modelo: 10px na tinta secundaria, caixa
   normal. Vinha do tamanho do valor e em caixa alta, competindo com ele. */
.page-products .filter-current .filter-label {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  color: var(--pood-tinta-2);
}
.page-products .filter-current .filter-value {
  font-size: 11.5px;
  line-height: 1;
  color: var(--pood-tinta);
}
/* "Limpar tudo" ocupava uma faixa propria de 54px. Vira um link discreto de uma
   linha, colado nos chips. */
.page-products .filter-actions {
  margin: 0 0 14px;
  padding: 0;
}
.page-products .filter-actions .action.clear {
  display: inline-block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-products .filter-actions .action.clear:hover {
  color: var(--pood-acento);
}
.page-products .filter-current .filter-value {
  flex: 1;
  min-width: 0;
}
/* o botao de remover encosta a direita e nunca encolhe */
.page-products .filter-current .action.remove {
  flex: none;
  margin-left: auto;
}
.page-products .filter-current .action.remove {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--pood-fundo);
  color: var(--pood-tinta-2);
}
.page-products .filter-current .action.remove:hover {
  background: var(--pood-tinta);
  color: var(--pood-papel);
}

/* ---------------------------------------------------------------------------
   9. Barra lateral

   Alvo (.lado no design system): tres cartoes brancos empilhados - navegacao de
   subcategorias, filtros e destaques - com borda 1px, raio 14 e 18px de padding.
   Na loja os tres ja existem, com outros nomes:
     .block-category-list        -> navegacao (.lado__bl--nav)
     .layered-filter-block-container -> filtros (.lado__bl)
     .side-custom-block          -> destaques e blocos CMS (.lado__bl--dest)

   A LARGURA CONTINUA 304px, e o alvo pede 236. Nao mexi: a largura vem do
   layout de duas colunas do Porto, que ainda e float - mexer nela sem trocar o
   float por grid escalona a coluna principal, e o modo de falha e visual, sem
   erro. Fica registrado como pendencia da proxima etapa.
--------------------------------------------------------------------------- */
/* O Porto desenha uma moldura de 1px #e7e7e7 em volta do .sidebar-content
   INTEIRO, e os blocos por dentro ja sao cartoes brancos com raio 14. Sao duas
   molduras: um retangulo cinza por fora dos cartoes arredondados. O modelo tem
   so os cartoes.

   A regra do Porto e
     .catalog-category-view .sidebar.sidebar-main .sidebar-content,
     .catalogsearch-result-index .sidebar.sidebar-main .sidebar-content
   e vem de folha servida pelo CDN, que o CSSOM nao le (§29.5) - por isso a
   cadeia abaixo repete os dois contextos em vez de tentar algo mais curto. */
.catalog-category-view .sidebar.sidebar-main .sidebar-content,
.catalogsearch-result-index .sidebar.sidebar-main .sidebar-content {
  border: 0;
  padding: 0;
  background: transparent;
}

.page-products .sidebar-main .block-category-list,
.page-products .sidebar-main .layered-filter-block-container,
.page-products .sidebar-main .side-custom-block > .custom-block {
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}
/* O cartao de filtros PARECE ter dois titulos empilhados - "Filtrar por"
   (Shop By, o .block-title) e "Filtros" (Shopping Options, o .filter-subtitle).
   Nao tem: medido, o .filter-subtitle vem com display:none do proprio Luma,
   porque ele so existe dentro do modal de filtros do celular.

   E o .block-title tambem nao aparecia: no desktop o Luma o esconde, porque ali
   ele e o BOTAO que abre o modal de filtros do celular. Ou seja, o cartao de
   filtros nunca teve titulo nenhum na tela do desktop - o "Opções de Compra"
   que eu tinha registrado como visivel era textContent, nao pixel.

   O titulo do modelo entra por traducao ("Shop By" -> "Filtros" no i18n do
   tema) e por estas duas regras, que desfazem o esconderijo. Sao DUAS porque o
   <strong> de dentro usa o padrao "visualmente oculto" (posicao absoluta com
   recorte), e revelar so o pai deixa a caixa com altura zero - foi o que
   aconteceu na primeira tentativa.

   Dentro de @media com razao, e nao por descuido do §29.17: o que muda aqui e
   estrutural, ligado ao espaco - no celular este mesmo elemento e um botao com
   funcao propria, e transforma-lo em titulo quebraria o modal. */
@media (min-width: 992px) {
  .page-products .sidebar-main .block.filter > .block-title.filter-title {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
  }
  /* o <strong> nao esta so escondido: ele carrega o visual do BOTAO do celular
     - fundo branco, borda #e7e7e7, raio 3 e texto centrado. Revelado sem zerar
     isso, o titulo do cartao vira uma caixa com cara de botao no meio do
     sidebar. Por isso a lista abaixo desfaz o botao alem de desfazer o
     esconderijo. */
  .page-products .sidebar-main .block.filter > .block-title.filter-title strong {
    display: block;
    position: static;
    float: none;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--pood-tinta);
  }
}

/* "Comprar por" (Now Shopping by), o rotulo acima dos chips de filtro ativo. O
   modelo nao tem titulo ali - os proprios chips ja dizem o que sao, cada um com
   o nome do atributo em cima do valor. */
.page-products .filter-current-subtitle {
  display: none;
}

/* titulo de cada cartao: o Porto entrega 15px caixa alta */
.page-products .sidebar-main .block-category-list .block-title,
.page-products .sidebar-main .block-category-list .block-title strong,
.page-products .sidebar-main .filter-subtitle {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--pood-tinta);
}

/* navegacao de subcategorias */
.page-products .sidebar-main .block-category-list .items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products .sidebar-main .block-category-list .item a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--pood-tinta-2);
}
.page-products .sidebar-main .block-category-list .item a:hover {
  background: var(--pood-fundo);
  color: var(--pood-tinta);
}
/* nome a esquerda, contagem a direita - o .lado__cats do modelo */
.page-products .sidebar-main .block-category-list .item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.page-products .sidebar-main .block-category-list .item a b {
  flex: none;
  font-size: 11px;
  font-weight: 400;
  color: var(--pood-tinta-2);
  font-variant-numeric: tabular-nums;
}
/* a subcategoria em que o visitante esta, no fundo escuro do modelo. Ela so
   passa a existir com o PoodModulos_Vitrine: o template do Porto nao marcava
   nada, e numa folha nem chegava a renderizar a lista. */
.page-products .sidebar-main .block-category-list .item.current > a {
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-weight: 500;
}
.page-products .sidebar-main .block-category-list .item.current > a b {
  color: rgba(255, 255, 255, .6);
}
.page-products .sidebar-main .block-category-list .item.current > a:hover {
  background: var(--pood-tinta);
  color: var(--pood-papel);
}

/* filtros */
.page-products .sidebar-main .filter-options-item {
  padding: 0;
  border-bottom: 0;
  border-top: 1px solid var(--pood-linha);
}
.page-products .sidebar-main .filter-options-item:first-of-type {
  border-top: 0;
}
.page-products .sidebar-main .filter-options-title {
  padding: 14px 0;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  color: var(--pood-tinta);
}
.page-products .sidebar-main .filter-options-item.active .filter-options-title {
  font-weight: 600;
}
.page-products .sidebar-main .filter-options-content {
  padding: 0 0 18px;
}
.page-products .sidebar-main .filter-options-content .item,
.page-products .sidebar-main .filter-options-content li {
  font-size: 12.5px;
  line-height: 1.5;
}
.page-products .sidebar-main .filter-options-content .count {
  font-size: 11px;
  font-weight: 500;
  color: var(--pood-tinta-2);
  font-variant-numeric: tabular-nums;
}

/* swatch de cor: o mesmo desenho do card - moldura clara com a cor POR DENTRO,
   nao a cor sangrando ate a borda. O padding com background-clip:content-box
   reproduz o inset de 22% do .fo__pt sem precisar de pseudo-elemento, que o
   Magento nao deixaria livre aqui. */
/* !important e necessario aqui, e e o unico do arquivo. A regra que vence esta
   numa das folhas servidas pelo CDN, que o CSSOM nao deixa ler (SecurityError -
   §29.5): varri as folhas legiveis e nenhuma explica o 28x28 com
   background-clip:border-box que sobrevivia a uma cadeia de (0,4,0). Medido:
   com !important o swatch vai a 30x30, padding 6 e content-box; sem, nao sai
   do lugar. */
.page-products .sidebar-main .swatch-option.color {
  width: 30px !important;
  height: 30px !important;
  min-width: 0;
  padding: 6px !important;
  border: 1px solid var(--pood-linha-2) !important;
  border-radius: 8px !important;
  background-clip: content-box !important;
  outline: 0;
}
.page-products .sidebar-main .swatch-option.color:hover {
  border-color: var(--pood-tinta-2);
  outline: 0;
}
.page-products .sidebar-main .swatch-option.color.selected {
  border-color: var(--pood-tinta);
  box-shadow: 0 0 0 1px var(--pood-tinta);
  outline: 0;
}

/* O swatch-renderer do Magento monta uma "lupa" no hover: um balao flutuante
   com a cor ampliada e o nome. Ela nao existe no modelo e atrapalha - o swatch
   ja mostra a cor, e o balao cobre o card ao lado.

   Os dois elementos sao filhos diretos do <body>, nao do swatch: por isso o
   seletor comeca em body.page-products, e nao em .page-products .column.main
   como o resto do arquivo. Medido: na categoria existe 1 .swatch-option-tooltip
   pendurado no body.

   !important e OBRIGATORIO aqui. Quem exibe o balao e jQuery .show(), que grava
   display:block INLINE no elemento - sem !important a regra perde para o estilo
   inline e o balao continua aparecendo.

   Escopo restrito a vitrine (categoria e busca), que foi onde o efeito foi
   apontado. A PDP usa o mesmo balao e nao esta coberta aqui. */
body.page-products .swatch-option-tooltip,
body.page-products .swatch-option-tooltip-layered {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   9c. Descricao da categoria, no fim da coluna

   O layout do subtema move o category.description para content.bottom. Aqui ele
   ganha a cara de texto de apoio: separado da grade por uma regua, em corpo
   menor e na tinta secundaria. Nao e mais o primeiro conteudo da pagina, entao
   nao deve ter o peso de um.
--------------------------------------------------------------------------- */
.page-products .column.main .category-description {
  margin: 48px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--pood-linha);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pood-tinta-2);
}
.page-products .column.main .category-description h1,
.page-products .column.main .category-description h2,
.page-products .column.main .category-description h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pood-tinta);
}
.page-products .column.main .category-description p {
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   9d. Itens de filtro e o slider de preco

   Alvo: no modelo cada opcao de filtro e uma linha - caixa de marcar, nome a
   esquerda, contagem encostada a direita. E o slider de preco e um trilho de
   3px com o preenchimento no acento e dois punhos brancos de 14px com borda
   escura.

   Na loja o markup e li.item > input + a > span.count > span.filter-count-label,
   com a contagem DENTRO do link. Por isso quem vira flex e o <a>, nao so o
   <li>: a contagem so encosta a direita se o proprio link a empurrar.
--------------------------------------------------------------------------- */
.page-products .sidebar-main .filter-options-content .items .item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 0;
}
/* O item do PRECO nao e uma opcao com caixa de marcar: e o trilho mais as
   caixas De/Ate, que precisam ficar EMPILHADOS. Em linha, o grid das caixas
   dividia largura com o trilho e encolhia para 115px numa caixa de 198. */
.page-products .sidebar-main .filter-options-content .items .item:has(.ln_slider_container) {
  display: block;
}
.page-products .sidebar-main .pood-faixa-cx {
  width: 100%;
}
/* a caixa de marcar centra pelo flex; sem isto ela caia 2px abaixo do nome */
.page-products .sidebar-main .filter-options-content .items .item > input {
  align-self: center;
}
/* !important so no display: medido, a regra do Porto que deixa o link em block
   vence uma cadeia de (0,5,0) - e ela vem de folha servida pelo CDN, que o
   CSSOM nao le (§29.5), entao nao da para saber a especificidade dela sem
   tentar. Sem flex no link a contagem nao encosta a direita: ficava 73px antes
   da borda do cartao. */
.page-products .sidebar-main .filter-options-content .items .item > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--pood-tinta);
}
.page-products .sidebar-main .filter-options-content .items .item > a:hover {
  color: var(--pood-acento);
}
.page-products .sidebar-main .filter-options-content .count {
  font-size: 11px;
  font-weight: 500;
  color: var(--pood-tinta-2);
  font-variant-numeric: tabular-nums;
}
/* o Porto envolve o numero em parenteses por pseudo-elemento; o modelo mostra
   o numero limpo, alinhado a direita. */
.page-products .sidebar-main .filter-options-content .count::before,
.page-products .sidebar-main .filter-options-content .count::after {
  content: none;
}
/* "items" e rotulo para leitor de tela, mas vem com display:block e ocuparia
   uma linha. Volta a ser visualmente oculto sem sair da arvore de acessibilidade. */
.page-products .sidebar-main .filter-options-content .filter-count-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* O punho vinha em #db6060 - o VERMELHO ANTIGO da loja, que a Direcao A nao usa
   e que o §10.4 registra como divida. Ele nasce no configed_css que o painel do
   Porto gera a partir da cor primaria, e essa folha carrega depois de tudo.
   Sem !important o punho continuava vermelho e com 15px; medido depois: 14px,
   branco, borda na tinta. O mesmo vale para o fundo do trilho, que ficava #eee.
   O preenchimento (.ui-slider-range) foi o unico que aceitou sem forcar. */
/* As caixas "De" e "Ate" que o PoodModulos_Vitrine acrescenta abaixo do trilho.
   O Mageplaza nao emite campo nenhum - so o trilho e uma linha de texto. */
.page-products .sidebar-main .pood-faixa-cx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 4px;
}
.page-products .sidebar-main .pood-faixa-cx label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
  cursor: text;
}
/* O "R$" e um prefixo desenhado DENTRO do campo, nao parte do valor: quem
   digita escreve so o numero, e o campo continua legivel como preco. O input
   recua a esquerda para nao passar por cima dele. */
.page-products .sidebar-main .pood-faixa-campo {
  position: relative;
  display: block;
}
.page-products .sidebar-main .pood-faixa-campo i {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pood-tinta-3);
  pointer-events: none;
}
.page-products .sidebar-main .pood-faixa-cx input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px 0 29px;
  border: 1px solid var(--pood-linha);
  border-radius: 10px;
  background: var(--pood-fundo);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  color: var(--pood-tinta);
  font-variant-numeric: tabular-nums;
}
.page-products .sidebar-main .pood-faixa-cx input:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: -1px;
  border-color: var(--pood-acento);
  background: var(--pood-papel);
}

.page-products .sidebar-main .ui-slider {
  height: 3px !important;
  margin: 10px 6px 18px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--pood-bloco) !important;
}
/* O filtro de preco emite TRES <li>: um com o slider de verdade e dois com um
   ln_slider_container vazio, de 35px cada - 70px de vao morto abaixo da barra,
   que era o "quebrado" que aparecia na tela. Medido: o cartao caiu de 209 para
   139px e o slider ficou intacto.

   O corte e por :has(), como no card esgotado (§32.4): mira o <li> que tem
   container de slider mas nao tem .ui-slider dentro. Onde :has() nao houver
   suporte, os dois voltam a ocupar espaco e nada mais quebra. */
.page-products .sidebar-main .filter-options-content .items .item:has(.ln_slider_container):not(:has(.ui-slider)) {
  display: none;
}
/* O preenchimento estava com position:static e height:0 - ou seja, invisivel, e
   o trilho aparecia todo cinza. O jQuery UI conta com
   .ui-slider-range{position:absolute;top:0;height:100%} vindo da folha dele,
   que aqui nao chega ate este elemento. Sem estas tres linhas a barra nao
   mostra faixa nenhuma; com elas, cobre o trilho inteiro em 3px. */
.page-products .sidebar-main .ui-slider-range {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  border: 0;
  border-radius: 999px;
  background: var(--pood-acento);
}
/* top e margin-top tambem precisam forcar: sem eles o punho ficava em
   top:1.5px com margin-top:-4px e o centro dele caia 2,5px abaixo do centro do
   trilho. Medido depois: os tres centros em 726. */
.page-products .sidebar-main .ui-slider-handle {
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -7px !important;
  margin-left: -7px;
  border: 1.5px solid var(--pood-tinta) !important;
  border-radius: 50% !important;
  background: var(--pood-papel) !important;
  background-image: none !important;
  cursor: grab;
}
.page-products .sidebar-main .ui-slider-handle:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   9b. Destaques (o .side-custom-block)

   Alvo (.lado__bl--dest): lista VERTICAL de 4 produtos - miniatura 50px a
   esquerda, nome em duas linhas e preco a direita, cada linha virando um alvo
   de 10px de raio no hover.

   Na loja isso era um CARROSSEL do owl com 9 produtos, um por vez, com foto de
   84px e setas. O script de inicializacao saiu do bloco CMS junto com o
   "Custom HTML Block" de lorem ipsum.

   ESTA REGRA E OBRIGATORIA, nao e acabamento: medido em produca, o CSS do owl
   deixa .owl-carousel em display:none ate o JS acrescentar .owl-loaded. Sem o
   script E sem esta linha, o bloco inteiro fica com ALTURA ZERO e desaparece da
   pagina, sem erro nenhum em log ou console. */
/* o titulo do bloco vem 15px em CAIXA ALTA; o modelo (.lado__t) pede 13px, 600,
   caixa normal - o mesmo tratamento dos outros dois cartoes do sidebar. Ele nao
   entrou na regra de titulo la de cima porque usa .sidebar-title, e nao
   .block-title. */
.page-products .sidebar-main .side-custom-block .sidebar-title,
.page-products .sidebar-main .side-custom-block > .custom-block > h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
  color: var(--pood-tinta);
}
.page-products .sidebar-main .side-custom-block .owl-carousel {
  display: block;
}
.page-products .sidebar-main .side-custom-block .owl-carousel .item {
  width: auto;
}
.page-products .sidebar-main .side-custom-block .product-item {
  width: auto;
  margin: 0;
  padding: 0;
}
/* a linha inteira e o alvo. Na loja a foto e os detalhes sao IRMAOS dentro de
   .product-item-info (nao ha um <a> unico envolvendo os dois, como no modelo),
   entao quem vira a linha flex e o .product-item-info. */
.page-products .sidebar-main .side-custom-block .product-item-info {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: 10px;
  transition: background-color .15s;
}
.page-products .sidebar-main .side-custom-block .product-item-info:hover {
  background: var(--pood-fundo);
}
/* flex-basis, NAO width. Medido: a foto chegava com flex:0 0 84px e um
   width:50px isolado nao movia nada - num item flex quem decide a medida
   principal e o flex-basis, e "width" so entra quando a base e auto. Com
   flex:0 0 50px + max-width a foto foi para 50x50 exatos. */
.page-products .sidebar-main .side-custom-block .product-item-photo {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  max-width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--pood-bloco);
  overflow: hidden;
}
.page-products .sidebar-main .side-custom-block .product-item-photo img {
  width: 50px;
  max-width: 50px;
  height: 50px;
  object-fit: contain;
}
/* O selo "Sob encomenda" fica de fora AQUI, e so aqui. Ele mede 81x35 e a
   miniatura tem 50px - cobriria a foto inteira. O modelo mostra o selo ao lado
   do preco, mas no HTML da loja ele nasce DENTRO do <a> da foto, e nenhum CSS
   move um elemento para outro pai. Trocar de lugar exige sobrescrever o
   side_list.phtml do Smartwave_Filterproducts, que e template - fica para o
   Lote 2. O produto continua marcado na grade e na PDP. */
.page-products .sidebar-main .side-custom-block .product-labels {
  display: none;
}
.page-products .sidebar-main .side-custom-block .product-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.page-products .sidebar-main .side-custom-block .product-item-details > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--pood-tinta);
}
.page-products .sidebar-main .side-custom-block .price-box {
  margin: 0;
}
.page-products .sidebar-main .side-custom-block .price-box .price {
  font-size: 12px;
  font-weight: 600;
  color: var(--pood-tinta);
  font-variant-numeric: tabular-nums;
}
.page-products .sidebar-main .side-custom-block .price-box .old-price .price {
  font-size: 11px;
  font-weight: 400;
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   10. Barra de ordenacao

   Alvo (.barra): uma linha so, com a contagem e o seletor de ordem a direita,
   fechada por uma regua. O Porto entrega sorter, contagem, paginas, limitador e
   modos de exibicao soltos.
--------------------------------------------------------------------------- */
.page-products .column.main .toolbar-products {
  margin: 0 0 24px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--pood-linha);
}
.page-products .column.main .toolbar-products .toolbar-amount,
.page-products .column.main .toolbar-products .sorter-label,
.page-products .column.main .toolbar-products .limiter-text {
  font-size: 12px;
  color: var(--pood-tinta-2);
}
/* O modelo tem SO a contagem e o seletor de ordem. O Porto entrega tambem o
   limitador ("Mostrar 12 24 36 por pagina"). Os modos Grade/Lista saem por
   configuracao (catalog/frontend/list_mode = grid), que e o caminho certo:
   assim o HTML nem chega a ser gerado. O limitador nao tem chave equivalente -
   zerar grid_per_page_values deixaria a lista de opcoes vazia, nao esconderia o
   rotulo -, entao ele sai por CSS mesmo. */
.page-products .column.main .toolbar-products .limiter {
  display: none;
}
/* No modelo a contagem e a ordenacao ficam JUNTAS, encostadas a direita
   (.barra__dir tem margin-left:auto e gap 18). Na loja a barra e flex mas com
   justify-content padrao, entao o seletor de ordem ficava perdido no meio, e a
   contagem vinha com display:none do Porto - a barra do topo nao a mostrava.

   order:-1 na contagem porque no HTML ela vem DEPOIS do seletor; o modelo poe
   o numero antes. Reordenar por CSS evita mexer no template so por causa da
   ordem. */
.page-products .column.main .toolbar-products {
  justify-content: flex-end;
  gap: 18px;
}
.page-products .column.main .toolbar-products .toolbar-amount {
  display: block;
  order: -1;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--pood-tinta-2);
}
/* o justify-content sozinho nao bastava: o seletor de ordem carrega
   margin-right do Porto, que calculado dava 500px e o empurrava para o meio da
   barra. Medido antes 777..1012 numa barra que vai ate 1531; depois, encostado
   na direita. */
.page-products .column.main .toolbar-products .toolbar-sorter {
  margin-right: 0;
}
/* catalog/frontend/list_mode=grid tira os BOTOES Grade/Lista, mas o Porto
   continua emitindo a caixa: medido, sobra um <div class="modes"> </div> vazio
   ocupando espaco na barra. A config faz a parte dela; esta linha recolhe o
   involucro que ela nao tem como remover. */
.page-products .column.main .toolbar-products .modes {
  display: none;
}
/* accent-color: o checkbox do filtro nascia com o azul do sistema; o modelo usa
   o acento da marca. */
/* A caixa de marcar vinha com margin:2px 3.33px 0 0 e vertical-align:baseline -
   3px abaixo do meio do nome do fabricante. Como o <li> ja e flex com
   align-items:center e gap de 9px, a margem so atrapalha: zerada, os dois
   centros coincidem. */
.page-products .sidebar-main .filter-options-content input[type="checkbox"],
.page-products .sidebar-main .filter-options-content input[type="radio"] {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--pood-acento);
}
.page-products .column.main .toolbar-products select {
  height: 32px;
  border: 1px solid var(--pood-linha);
  border-radius: 999px;
  background-color: var(--pood-papel);
  padding: 0 12px;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   8. Respostas

   O container do Porto e fixo em 960px na faixa 992-1199 (medido no cabecalho,
   §29.16), entao 3 colunas seguem cabendo. Abaixo de 992 a sidebar empilha.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .page-products .column.main .products-grid:not(.owl-carousel) > .product-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 18px;
  }
}
@media (max-width: 575px) {
  .page-products .column.main .products-grid:not(.owl-carousel) > .product-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
  }
  .page-products .column.main .products-grid .product-item-name a {
    font-size: 12.5px;
  }
  .page-products .page-title-wrapper .page-title,
  .page-products .page-title-wrapper .page-title span {
    font-size: 27px;
  }
}

/* ---------------------------------------------------------------------------
   A TROCA DE FOTO AO CLICAR NUMA COR NÃO PODE PISCAR

   Relatado pelo Will em 26/08/2026. Medido no instante da troca, amostrando
   o card a cada poucos milissegundos depois do clique:

       antes ....... 265x354  carregada,  natural 300x400
       1200ms ...... 265x181  CARREGANDO, natural 0x0     <- o pulo
       2500ms ...... 265x354  carregada,  natural 450x600

   Enquanto a foto nova baixa, o `<img>` fica sem dimensão natural e colapsa
   173px de altura; quando termina, volta. É esse vai-e-volta que se lê como
   piscada, e ele não tem nada a ver com a proporção do arquivo — aquela já
   foi corrigida antes, declarando `product_swatch_image_medium` em 3:4.

   `aspect-ratio` resolve porque passa a reservar a altura pela PROPORÇÃO, e
   não pelo arquivo: a caixa mantém 3:4 desde o primeiro quadro, esteja a
   imagem carregada ou não. O Magento gera todas as fotos de catálogo em 3:4
   com fundo (§42.14), então a proporção vale para as 100%, inclusive as 22%
   cujo arquivo de origem é quadrado ou paisagem.

   `object-fit: contain` para o caso de o arquivo servido divergir da caixa
   por algum motivo: melhor uma faixa de fundo do que a peça deformada.

   A transição de opacidade suaviza o resto. Sem ela a foto nova aparece de
   um quadro para o outro; com ela, entra. Curta de propósito — 180ms é o
   suficiente para não parecer corte e não o bastante para atrasar quem está
   clicando de cor em cor. */
.page-products .column.main .products-grid .product-image-photo {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity .18s ease;
}

/* O invólucro que o Porto usa também precisa da reserva: sem isto ele
   acompanha a altura do `<img>` e o pulo volta pelo lado de fora. */
.page-products .column.main .products-grid .product-image-container,
.page-products .column.main .products-grid .product-image-wrapper {
  aspect-ratio: 3 / 4;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  display: block;
  overflow: hidden;
}