/* ============================================================================
   POOD — BASE
   O que é comum a todas as telas. Depende de pood-tokens.css, que carrega antes.

   Duas partes, com naturezas diferentes:

   1. CORREÇÕES GLOBAIS — valem para a loja inteira, sem depender de classe.
      Hoje só uma: a família tipográfica dos controles.

   2. PRIMITIVOS — classes .pood-* que as telas usam em vez de reescrever
      botão, selo e cartão a cada vez. Não afetam nada que não as use.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. A Open Sans sai

   Medido no card Direção → Tipografia: a loja já é Poppins em 675 elementos, e
   a Open Sans sobrevive APENAS nos botões — a única quebra de família do site.
   O card chama isto de "a mudança de menor risco e maior efeito visível".

   Só a família muda. Tamanho, peso e caixa de cada botão continuam sendo
   decididos por quem estiliza aquele botão.

   `font: inherit` nao serve aqui: zeraria tambem tamanho e peso que o Porto
   define, e o efeito colateral seria grande demais para uma correcao de familia.
--------------------------------------------------------------------------- */
button,
input,
select,
textarea,
.action.primary,
.action.secondary,
.actions-toolbar .action {
  font-family: var(--pood-fonte);
}


/* ---------------------------------------------------------------------------
   1b. Trilha (breadcrumbs)

   Estava DUPLICADA, palavra por palavra, em pood-vitrine.css e em
   pood-institucional.css - as mesmas oito regras, mudando só o prefixo de
   escopo. O comentário do institucional já registrava a dívida ("ao mexer numa,
   mexer na outra"), que é o pior tipo de acordo: depende de alguém lembrar.

   Aqui os dois escopos entram como LISTA. Agrupar não altera especificidade:
   cada seletor da lista continua valendo o que valia sozinho.

   Escopos: vitrine, PDP e institucionais. A PDP entrou em 25/08/2026 — ate
   entao a trilha dela era a do Porto crua, e o Will a viu pelo que ela e: uma
   FAIXA BRANCA de largura total (1485 x 109) no meio de uma pagina cinza,
   com o texto em caixa alta.

   O que NÃO é comum fica em cada tela, porque de fato diverge: o respiro do
   topo (56px na vitrine e na PDP, 40 nas institucionais) e a margem de baixo.

   O que o Porto faz e precisa ser desfeito: caixa alta, faixa branca de largura
   total, separador em glifo da fonte porto-icons — por isso ele não aparece
   numa busca por ">" — e a palavra "Início" jogada 9999px para fora da tela por
   text-indent, sobrando só um ícone de casa.

   OS !important NÃO SÃO PREFERÊNCIA. A regra do Porto vem de folha servida pelo
   CDN, que o CSSOM não consegue ler (§29.5), e uma cadeia de (0,4,0) não a
   moveu: medido, o text-indent continuava -9999px e o separador continuava
   sendo o caractere de uso privado da fonte.

   E o ícone de casa é um ::AFTER do link, não um ::before — anular o ::before
   deixava a casa colada na palavra "Início". Não confundir com o ::after do
   <li>, que é a barra separadora.
--------------------------------------------------------------------------- */
:is(.page-products,.catalog-product-view) .breadcrumbs,
.page-wrapper:has(.inst) .breadcrumbs {
  background: transparent;
}
:is(.page-products,.catalog-product-view) .breadcrumbs .items,
.page-wrapper:has(.inst) .breadcrumbs .items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  /* 1236 e não 1080: a trilha é filha do .page-wrapper e se centraliza na
     JANELA, enquanto o conteúdo se centraliza dentro do .page-main. Com bases
     diferentes as duas não alinham - medido, 68px de desvio. */
  max-width: 1236px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
:is(.page-products,.catalog-product-view) .breadcrumbs,
:is(.page-products,.catalog-product-view) .breadcrumbs a,
:is(.page-products,.catalog-product-view) .breadcrumbs li,
:is(.page-products,.catalog-product-view) .breadcrumbs strong,
.page-wrapper:has(.inst) .breadcrumbs,
.page-wrapper:has(.inst) .breadcrumbs a,
.page-wrapper:has(.inst) .breadcrumbs li,
.page-wrapper:has(.inst) .breadcrumbs strong {
  font-size: 11.5px;
  font-weight: var(--pood-p-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pood-tinta-2);
}
:is(.page-products,.catalog-product-view) .breadcrumbs a:hover,
.page-wrapper:has(.inst) .breadcrumbs a:hover {
  color: var(--pood-tinta);
}
:is(.page-products,.catalog-product-view) .breadcrumbs .items .item::after,
.page-wrapper:has(.inst) .breadcrumbs .items .item::after {
  content: "/" !important;
  font-family: var(--pood-fonte) !important;
  font-size: 11.5px !important;
  line-height: 1;
  margin: 0 0 0 7px;
  color: var(--pood-tinta-3);
}
:is(.page-products,.catalog-product-view) .breadcrumbs .items .item:last-child::after,
.page-wrapper:has(.inst) .breadcrumbs .items .item:last-child::after {
  content: none !important;
}
:is(.page-products,.catalog-product-view) .breadcrumbs .item.home a,
.page-wrapper:has(.inst) .breadcrumbs .item.home a {
  width: auto !important;
  text-indent: 0 !important;
}
/* O `.items` carrega um `::after` com `border-bottom: 1px solid #E7E7E7` — um
   fio de ponta a ponta sob a trilha, na mesma cor fora da paleta do fio que o
   Porto punha no `.box-tocart`. O card nao tem fio nenhum ali: o respiro de
   26px ja separa a trilha do conteudo. Achado na PDP em 25/08/2026, e vale
   para as tres telas, que herdavam o mesmo. */
:is(.page-products,.catalog-product-view) .breadcrumbs .items::after,
.page-wrapper:has(.inst) .breadcrumbs .items::after {
  content: none;
}

:is(.page-products,.catalog-product-view) .breadcrumbs .item.home a::before,
:is(.page-products,.catalog-product-view) .breadcrumbs .item.home a::after,
.page-wrapper:has(.inst) .breadcrumbs .item.home a::before,
.page-wrapper:has(.inst) .breadcrumbs .item.home a::after {
  content: none !important;
}


/* ---------------------------------------------------------------------------
   2. Primitivos

   Uma forma só de botão, em três pesos de ação — é a regra do card
   Direção → Botões. Altura 40, pílula, sem caixa alta.

   OS NOMES DE CLASSE DAS TELAS ENTRAM AQUI, e não copiam estas regras.
   O conteúdo CMS usa `btn btn--1`, que é o nome do design system e o que
   permite comparar a página com o modelo linha a linha; `.pood-btn` é o nome
   interno. Em vez de manter as duas definições em sincronia — que foi o que
   aconteceu com a trilha —, os dois nomes apontam para a MESMA regra.
--------------------------------------------------------------------------- */
.pood-btn,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--pood-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--pood-r);
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
/* o Porto tem regra de maior especificidade para <a> que faz papel de botão, e
   sem forçar a altura ela vira a da linha do texto: medido 98x20 em vez de
   98x40, ou seja, o padding vertical simplesmente não existia. O !important
   fica SÓ onde o Porto alcança, e não na forma do primitivo. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn {
  height: var(--pood-h) !important;
  text-decoration: none;
}

/* 1 = ação principal · 2 = secundária · 3 = acento, para o que converte */
.pood-btn--1,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn--1 { background: var(--pood-tinta); color: #FFFFFF; }
.pood-btn--1:hover,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn--1:hover { background: #000000; color: #FFFFFF; }

.pood-btn--2,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn--2 { background: var(--pood-papel); border-color: var(--pood-linha); color: var(--pood-tinta); }
.pood-btn--2:hover,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn--2:hover { border-color: var(--pood-tinta); }

.pood-btn--3 { background: var(--pood-acento); color: var(--pood-tinta); font-weight: var(--pood-p-forte); }
.pood-btn--3:hover { background: var(--pood-acento-h); }

.pood-btn--bloco,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .btn--bloco { width: 100%; }
.pood-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* rótulo: o único lugar com caixa alta em toda a direção.
   `.rotulo` é o nome que vem do design system e está no conteúdo CMS. */
.pood-rotulo,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .rotulo {
  margin: 0;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
/* dentro de um texto que já é 600, o <b> é ênfase de marca: sem esta regra ele
   iria a 700 e a linha ficaria com dois pesos. */
.pood-rotulo b,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .rotulo b {
  font-weight: var(--pood-p-forte);
}

/* selo: a pílula do acento, usada sobre foto */
.pood-selo {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--pood-r);
  background: var(--pood-acento);
  color: var(--pood-tinta);
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: .02em;
  line-height: 1.5;
}
.pood-selo--tinta { background: var(--pood-tinta); color: #FFFFFF; }

/* cartão: a superfície branca dos formulários e das laterais.

   OS VALORES SÃO OS DO DESIGN SYSTEM, e não os meus — corrigido em 15/08/2026.
   Quando fiz a Contato, `.cartao` era usado pela tela e NÃO estava declarado no
   tela.css, então apontei para este primitivo, que eu havia escrito com padding
   18px e borda em --pood-linha. A folha do design system foi atualizada desde
   então e agora declara: padding 30px 32px 32px, borda em --linha-2, e flex em
   coluna. O primitivo passou a valer isso, e a Contato acompanhou — ela estava
   divergente sem que o comparador acusasse, porque eu havia comparado contra os
   meus valores e não contra os do modelo.

   O flex em coluna não é enfeite: é o que permite ao `.cartao--novo` empurrar o
   botão para o rodapé do cartão com `margin-top:auto`, alinhando os dois
   cartões pela base mesmo com textos de alturas diferentes. */
.pood-cartao,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .cartao {
  display: flex;
  flex-direction: column;
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha-2);
  border-radius: var(--pood-r-cartao);
  padding: var(--pood-pad-cartao);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .cartao h2 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--pood-p-medio);
  letter-spacing: -.02em;
}

/* número que não dança ao trocar de dígito — preço, quantidade, total */
.pood-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   1c. A linha de frete (logo, nome, prazo, valor)

   Veio do `pood-carrinho.css` em 25/08/2026, quando a cotação da PÁGINA DO
   PRODUTO passou a usar o mesmo desenho. Mesma decisão da trilha logo acima:
   dois escopos numa LISTA, em vez de duas cópias para manter em sincronia.

   O logo é escolhido pelo CSS a partir de `data-frete="carrier_method"`, e é
   por isso que a cotação da PDP precisou passar a devolver o código do
   carrier: antes a resposta trazia só título e preço.

   O que NÃO veio junto fica no carrinho, porque só existe lá: o cartão
   selecionável, o radio dentro do label e o estado escolhido.

   Caminho relativo das imagens: esta folha e as do módulo moram sob a mesma
   raiz estática do tema.
--------------------------------------------------------------------------- */
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* Nome em cima, prazo embaixo — e nao os dois na mesma linha. Em 350px de
   coluna o texto corrido quebrava no meio do nome. */
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-txt b {
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1.25;
  color: var(--pood-tinta);
}
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-txt em {
  font-style: normal;
  font-size: 11px;
  font-weight: var(--pood-p-normal);
  line-height: 1.35;
  color: var(--pood-tinta-2);
}
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-txt em:empty { display: none; }
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-v {
  flex: none;
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-v .price { font-weight: var(--pood-p-medio); }

/* Os logos vem do PoodModulos_Transportadora. O caminho e relativo porque esta
   folha e as imagens do modulo moram sob a MESMA raiz estatica do tema. */
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo[data-frete="correios_correios_mm_03220"] { background-image: url(../PoodModulos_Transportadora/images/sedex.jpg); }
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo[data-frete="correios_correios_mm_03298"] { background-image: url(../PoodModulos_Transportadora/images/pac.jpg); }
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo[data-frete^="poodtransportadora_retirada"] { background-image: url(../PoodModulos_Transportadora/images/retirada-pood.jpg); }
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo[data-frete^="poodtransportadora_"] { background-image: url(../PoodModulos_Transportadora/images/transportadora.jpg); }
:is(.checkout-cart-index,.catalog-product-view) .pood-fr-logo[data-frete="poodtransportadora_retirada"] { background-image: url(../PoodModulos_Transportadora/images/retirada-pood.jpg); }

/* ---------------------------------------------------------------------------
   O CHECK DO PORTO SAI DO SWATCH ESCOLHIDO

   Apontado pelo Will em 26/08/2026: ao clicar numa cor ficava um "v" no meio
   do swatch. Vem de `pub/media/porto/web/css/custom.css`:

       .swatch-option.color.selected::before,
       .swatch-option.image.selected::before {
         content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
         position: absolute; left: 0; top: 50%; ... }

   🔴 POR QUE ELE ESCAPOU DE DUAS MEDIÇÕES MINHAS

   Eu havia lido o `::before` pelo computado e concluído que ele "não desenha
   nada": bordas 0, sem fundo, sem imagem, sem sombra. Estava certo em cada
   propriedade e errado na conclusão — o desenho é um GLIFO DE FONTE, ou seja
   texto. Nenhuma das propriedades que eu media podia revelá-lo, e o próprio
   `content` volta como `""` na leitura porque é um caractere de uso privado
   do Font Awesome, que não imprime.

   O que resolveu foi varrer as folhas atrás de toda regra que casasse com
   `.selected`, em vez de interrogar o elemento. Fica a regra: quando algo
   aparece na tela e o computado do elemento não explica, procure QUEM
   declara, não O QUE está aplicado.

   Sai porque o estado escolhido já é dito pela borda na tinta mais o anel de
   1px, que é o que o modelo pede — o check era um terceiro sinal para o mesmo
   fato, e ainda por cima cobrindo a foto do produto.
--------------------------------------------------------------------------- */
body .swatch-option.color.selected::before,
body .swatch-option.image.selected::before,
body .swatch-option.selected::before {
  content: none !important;
}
/* ---------------------------------------------------------------------------
   MAPA DE CORES — a cor da opção e a tinta que se lê sobre ela

   Os hex saíram de `eav_attribute_option_swatch` em 26/08/2026. A tinta não
   foi escolhida a olho: é a que dá maior razão de contraste WCAG contra cada
   fundo, calculada por luminância relativa. Nenhuma fica abaixo de 5:1, e o
   mínimo exigido para texto pequeno é 4,5:1.

       Preto    21,0:1 branco     Vermelho  5,3:1 preto
       Azul      8,6:1 branco     Verde     7,6:1 preto
       Marrom    7,6:1 branco     Amarelo  17,2:1 preto
       Roxo      6,3:1 branco     Cinza     5,3:1 preto
       Madeira   5,9:1 branco     Rosa     13,7:1 preto
                                  Laranja   7,2:1 preto
                                  Branco   21,0:1 preto
                                  Cromo    14,6:1 preto

   Vermelho e Cinza são os apertados, ambos em 5,3:1 — passam, mas se alguém
   trocar o hex dessas duas vale refazer a conta antes de confiar.

   Se uma cor nova for cadastrada sem entrar aqui, o balão cai no fallback
   (cinza com texto branco) e continua legível. Falha em aberto.
--------------------------------------------------------------------------- */
.swatch-option[data-option-id="9"]  { --pood-swatch-cor: #000000; --pood-swatch-tinta: #FFFFFF; }  /* Preto */
.swatch-option[data-option-id="10"] { --pood-swatch-cor: #ff0000; --pood-swatch-tinta: #17171A; }  /* Vermelho */
.swatch-option[data-option-id="11"] { --pood-swatch-cor: #4caf4f; --pood-swatch-tinta: #17171A; }  /* Verde */
.swatch-option[data-option-id="12"] { --pood-swatch-cor: #0000ff; --pood-swatch-tinta: #FFFFFF; }  /* Azul */
.swatch-option[data-option-id="13"] { --pood-swatch-cor: #ffeb3b; --pood-swatch-tinta: #17171A; }  /* Amarelo */
.swatch-option[data-option-id="14"] { --pood-swatch-cor: #808080; --pood-swatch-tinta: #17171A; }  /* Cinza */
.swatch-option[data-option-id="15"] { --pood-swatch-cor: #6d4c41; --pood-swatch-tinta: #FFFFFF; }  /* Marrom */
.swatch-option[data-option-id="16"] { --pood-swatch-cor: #ffc0cb; --pood-swatch-tinta: #17171A; }  /* Rosa */
.swatch-option[data-option-id="17"] { --pood-swatch-cor: #9c27b0; --pood-swatch-tinta: #FFFFFF; }  /* Roxo */
.swatch-option[data-option-id="30"] { --pood-swatch-cor: #ed751a; --pood-swatch-tinta: #17171A; }  /* Laranja */
.swatch-option[data-option-id="31"] { --pood-swatch-cor: #ffffff; --pood-swatch-tinta: #17171A; }  /* Branco */
.swatch-option[data-option-id="37"] { --pood-swatch-cor: #d7d7d7; --pood-swatch-tinta: #17171A; }  /* Cromo */
.swatch-option[data-option-id="41"] { --pood-swatch-cor: #8b592b; --pood-swatch-tinta: #FFFFFF; }  /* Madeira */

/* A tooltip nativa sai das duas telas: ela repete o que o swatch já mostra. */
body .swatch-option-tooltip,
body .swatch-option-tooltip-layered {
  display: none !important;
}

/* 🔴 `overflow: visible` NO SWATCH — sem isto o balão não aparece, e foi o
   que me custou três rodadas de diagnóstico errado.

   O `.swatch-option.image` vem com `overflow: hidden`. Um pseudo-elemento
   absoluto dentro de uma caixa com overflow escondido é RECORTADO: o balão
   existia, tinha `content`, largura, fundo e z-index corretos — o
   `getComputedStyle` devolvia tudo certo — e a tela não desenhava nada.

   Foi o Will quem insistiu, contra três medições minhas que diziam
   "funciona". O que desfez o engano foi um screenshot do container com o
   hover ativo: os oito swatches apareciam perfeitos e não havia balão
   nenhum. Vale a regra que esta base já registra em outros pontos: quando
   o computado e a tela discordam, a tela ganha.

   `visible` é seguro aqui: `background-size: contain` não transborda a
   caixa, então a foto do swatch continua contida como antes. */
body.catalog-product-view .product-add-form .swatch-option,
body.page-products .column.main .products-grid .swatch-option {
  position: relative;
  overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   O BALÃO — a cor de fundo, o nome em cima, abrindo para baixo

   ABRE PARA BAIXO, e não para cima. Medido no card da vitrine, que é onde
   aperta: a foto vai até 781, o swatch começa em 795 — 14px de folga, e o
   balão pede 34. Para cima ele invadiria os últimos 20px da foto, e nenhum
   ajuste de tamanho resolve. Para baixo o que fica coberto é o nome do
   produto, que volta quando o mouse sai; a foto, que é o que o cliente
   compara ao passar pelas cores, fica livre.

   `width`/`height` em `auto !important` porque o `::after` do Porto declara
   18x18 na vitrine (o círculo do §32.4) e o balão herdava esses 18: media
   20px de largura para uma palavra que ocupa 48, e me levou a concluir,
   errado, que `attr()` não resolvia. Resolve.
--------------------------------------------------------------------------- */
body.catalog-product-view .product-add-form .swatch-option:hover::after,
body.page-products .column.main .products-grid .swatch-option:hover::after {
  content: attr(data-option-label);
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;

  width: auto !important;
  height: auto !important;
  min-width: 0;
  max-width: none;

  background: var(--pood-swatch-cor, var(--pood-tinta-3));
  color: var(--pood-swatch-tinta, var(--pood-papel));

  font-size: 11px;
  font-weight: var(--pood-p-forte);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 7px 10px;

  /* A moldura de 1px existe para o Branco e o Cromo: sobre o papel da página
     eles não teriam contorno nenhum e o balão sumiria. */
  border: 1px solid var(--pood-linha);
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .20);
  pointer-events: none;
}

/* A seta, apontando para o swatch. O `::before` é do Magento no estado
   escolhido e ali já está zerado, então pode servir aqui. */
body.catalog-product-view .product-add-form .swatch-option:hover::before,
body.page-products .column.main .products-grid .swatch-option:hover::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 41;
  width: 0 !important;
  height: 0 !important;
  border: 5px solid transparent;
  border-bottom-color: var(--pood-swatch-cor, var(--pood-tinta-3));
  background: none;
  pointer-events: none;
}

/* O container recorta o balão se ficar com overflow escondido. */
.catalog-product-view .product-add-form .swatch-attribute-options,
.page-products .column.main .products-grid .swatch-attribute-options,
.page-products .column.main .products-grid .swatch-attribute {
  overflow: visible;
}

.page-products .column.main .products-grid .swatch-option {
  position: relative;
}