/* ===========================================================================
   PDP na Direção A — card "Tela — PDP" do design system.

   Escopo: `.catalog-product-view`. Sem isso, `.product-info-main` e
   `.product-item` aparecem em widget de relacionados, na vitrine e no
   carrinho — foi assim que o selo de sob encomenda quase cobriu a
   miniatura da barra lateral quando a vitrine foi feita (§32.2).

   Carrega DEPOIS de todo o CSS do Porto (§33.2), então as regras aqui
   vencem por empate de especificidade. Onde precisou de mais peso, está
   dito na própria regra por quê.

   ETAPAS 1 e 2. Fora daqui: a galeria (depende de foto, não de código) e o
   mobile, não conferido. O parcelamento vive no PoodModulos_Checkout, que é
   quem lê a configuração do Pagar.me.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. O chão da página

   A loja inteira já assenta na Direção A sobre `--pood-fundo`; a PDP era a
   única tela do funil ainda em branco puro (medido: `rgb(255,255,255)`).
--------------------------------------------------------------------------- */
.catalog-product-view,
.catalog-product-view .page-main,
.catalog-product-view .columns {
  background: var(--pood-fundo);
}

.catalog-product-view .page-main {
  padding-top: 40px;
  padding-bottom: 72px;
}
/* ---------------------------------------------------------------------------
   2. As duas colunas — GRADE, e não mais float

   ⚠️ A Etapa 1 dizia aqui, com todas as letras, "não converto o pai em grade".
   O motivo estava certo: `.column.main` carrega, além da galeria e da caixa de
   compra, as abas, o popup de autenticação, o form key e um `div.clearer` do
   Porto — e num contêiner de grade cada um deles vira célula. Medido em
   25/08/2026: são 3 elementos de altura zero mais o `clearer`, mais o
   `::after` de clearfix do próprio container.

   O que mudou é que o float tinha um custo maior, e ele só apareceu quando
   alguém olhou a página inteira em vez da caixa de compra:

     produto              foto    caixa de compra    vão morto à esquerda
     FBP-01 pronta-entrega 609            653                    92px
     SR005 sob encomenda   601           1080                 * 511px *

   O vão não é do layout de duas colunas: é o cartão de aviso de sob encomenda
   (379px) inflando a caixa. Com float, a descrição só pode começar depois que
   o float da direita termina — então ela esperava, e entre o fim da foto e ela
   ficavam 511px de nada. Em 190 produtos, os de maior ticket.

   Na grade, a caixa de compra ATRAVESSA as duas linhas (`grid-row: 1 / span 2`)
   e a descrição sobe para a linha 2 da coluna 1, encostando na foto. Medido
   depois: vão de 511 para 32px, e a página encolheu 460px.

   Os elementos invisíveis continuam virando células — de altura zero, com
   `row-gap: 0`, sem efeito nenhum. O `clearer` e o `::after` são desligados
   explicitamente, que é a mesma lição do §29.3: pseudo de clearfix dentro de
   um contêiner moderno deixa de ser enfeite e vira estrutura.

   A proporção é a do card (`1.05fr .95fr`, gap 56) — e é exatamente a que a
   loja já tinha: 609 | 56 | 551 em 1216.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .catalog-product-view .column.main {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }

  /* Clearfix do container e o `div.clearer` do Porto: ambos existiam para
     encerrar os floats que não existem mais aqui. Deixados, ocupam célula. */
  .catalog-product-view .column.main::before,
  .catalog-product-view .column.main::after {
    content: none;
  }

  .catalog-product-view .column.main > .clearer {
    display: none;
  }

  .catalog-product-view .column.main > .product.media {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .catalog-product-view .column.main > .product-info-main {
    grid-column: 2;
    grid-row: 1;
    float: none;
    width: auto;
    margin: 0;
  }

  /* LARGURA CHEIA, por decisão do Will em 25/08/2026.

     Ela chegou a viver na coluna 1, embaixo da foto, para preencher o vão de
     511px que o cartão de sob encomenda abre. Funcionava para o vão e ficava
     errada para o texto: uma coluna de 600px encostada à esquerda, com metade
     da faixa vazia à direita.

     O vão volta, e é o preço desta escolha. Fechá-lo agora depende de encolher
     o aviso de sob encomenda (379px), que é texto do admin. */
  .catalog-product-view .column.main > .product.attribute.overview {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .catalog-product-view .column.main > .product.info.detailed {
    grid-column: 1 / -1;
  }

  /* As avaliações também atravessam, e por um motivo que só a tela mostrou:
     ao sair da faixa de abas, a seção deixou de ser filha do bloco de
     detalhes e passou a ser filha DIRETA desta grade. Sem declarar a coluna,
     a colocação automática a jogou numa célula de 609px — metade do contêiner
     —, com a lista de avaliações espremida à esquerda e o resto vazio.

     Nada no HTML denunciava isso: a seção renderizava inteira, no lugar
     certo, com todo o conteúdo. Só a largura estava errada. */
  .catalog-product-view .column.main > .pood-av {
    grid-column: 1 / -1;
  }
}

/* A GALERIA ASSENTA NO FUNDO DA PÁGINA, não em branco.

   A Etapa 1 pôs `--pood-papel` aqui, raciocinando que as fotos reais têm fundo
   branco e que um stage cinza viraria moldura. A tela desmentiu: as fotos NÃO
   preenchem o palco — quando a imagem é mais estreita que ele, sobram faixas
   BRANCAS nas laterais, e é a faixa que vira moldura, não o contrário.
   Relatado pelo Will em 25/08/2026.

   Com `--pood-fundo`, a sobra some dentro da página: onde não há foto, lê-se
   o mesmo cinza de tudo em volta.

   ⚠️ Se um dia entrar foto com fundo branco recortado, ela passa a se destacar
   como um retângulo claro sobre o cinza. O certo então é a foto ganhar fundo
   transparente, não o palco voltar a ser branco. */
.catalog-product-view .product.media .fotorama__stage,
.catalog-product-view .product.media .fotorama__stage__frame {
  background: var(--pood-fundo);
}

.catalog-product-view .product.media .fotorama__wrap {
  border-radius: 8px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   3. A ORDEM DA CAIXA DE COMPRA — o que resolve os mil pixels

   Medido antes: título 292, avaliações 334, preço 398, descrição curta 442
   (310px de altura), disponibilidade 772, formulário 845, botão em 1307.

   `order` e não `<move>`: o Porto entrega esses blocos como irmãos no DOM
   ainda que o layout os aninhe em pais diferentes (ver o XML do layout).

   `.product-info-main` NÃO tem pseudo-elemento de clearfix — conferido
   (`content: none` em `::before` e `::after`), então virar flex não repete
   o desalinhamento do menu do §29.3, onde um `::after` de clearfix virou
   item de verdade e comeu um `gap` inteiro.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .catalog-product-view .product-info-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* As setas ‹ › de produto anterior/próximo. Eram `float: right`, que um
     contêiner flex ignora; sem isto elas viravam uma linha própria no topo. */
  .catalog-product-view .product-info-main .prev-next-products {
    order: -1;
    align-self: flex-end;
    margin-bottom: 2px;
  }

  .catalog-product-view .product-info-main .product-info-stock-sku { order: 1; }
  .catalog-product-view .product-info-main .page-title-wrapper     { order: 2; }
  .catalog-product-view .product-info-main .product-reviews-summary{ order: 3; }
  .catalog-product-view .product-info-main .product-info-price     { order: 4; }
  .catalog-product-view .product-info-main .product-add-form       { order: 5; }

  /* Os selos de confiança, logo abaixo do botão de compra — é onde o card os põe. */
  .catalog-product-view .product-info-main .pood-pdp-selos         { order: 6; }

  /* A cotação de frete do `MestreMage_ShippingQuoteProductPage`. Não tem classe
     — o id é a única âncora — e por isso nascia com `order: 0`, caindo antes de
     tudo o que tem ordem. Consultar frete é o passo DEPOIS de decidir comprar. */
  .catalog-product-view .product-info-main #simularFrete           { order: 7; }

  .catalog-product-view .product-info-main .product-social-links   { order: 8; }

  /* Seguro: se um dia o `<move>` da descrição curta deixar de valer, ela cai
     no fim da caixa em vez de voltar para o meio, entre o preço e a compra. */
  .catalog-product-view .product-info-main .product.attribute.overview { order: 9; }
}

/* ---------------------------------------------------------------------------
   3.1. Avaliações — o estado vazio

   A loja tem 318 avaliações aprovadas, mas em 71 produtos de 459. Nos outros
   388 o core renderiza cinco estrelas apagadas mais "Seja o primeiro a
   avaliar": 64px de sinal fraco logo acima do preço, num rack de R$ 7.302.

   O convite fica — com avaliações chegando, o link tem valor —, mas sem as
   estrelas vazias. Some o desenho de nota que não existe, não o caminho para
   escrever a primeira.

   Onde HÁ avaliação, nada disto se aplica: `.empty` é a classe que o próprio
   core põe só quando não há.
--------------------------------------------------------------------------- */
.catalog-product-view .product-reviews-summary.empty .rating-summary {
  display: none;
}

/* O Porto pendura um `::after` com `content: ""` e `display: block` neste bloco
   — um filete decorativo que, com a margem dele, respondia por 37 dos 64px
   quando o único conteúdo é um link de 25px. Mesma família do §29.3: pseudo do
   tema que não é enfeite, é estrutura. Some só no estado vazio. */
.catalog-product-view .product-reviews-summary::after {
  content: none;
}

.catalog-product-view .product-reviews-summary.empty {
  margin: 0 0 14px;
}

/* As cinco estrelas apagadas NAO vinham do `.rating-summary` — vinham de um
   `::before` com glifo da fonte `porto-icons` pendurado no `.reviews-actions`.
   Esconder o `.rating-summary` limpou o markup e deixou o desenho na tela;
   achado por screenshot em 25/08/2026, depois de a medicao do DOM dizer que
   estava tudo certo. Terceira vez que um pseudo do Porto se disfarca de
   conteudo (§29.3, §37.2).

   So no estado vazio: onde ha avaliacao, as estrelas sao a nota de verdade. */
.catalog-product-view .product-reviews-summary.empty .reviews-actions::before {
  content: none;
}

.catalog-product-view .product-reviews-summary.empty .reviews-actions {
  margin: 0;
  font-size: var(--pood-t-apoio);
}

.catalog-product-view .product-reviews-summary.empty .reviews-actions a {
  color: var(--pood-tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.catalog-product-view .product-reviews-summary.empty .reviews-actions a:hover {
  color: var(--pood-tinta);
}

/* Com avaliação: nota e contagem numa linha só, como o card. */
.catalog-product-view .product-reviews-summary:not(.empty) {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
}

.catalog-product-view .product-reviews-summary:not(.empty) .reviews-actions {
  margin: 0;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   4. Sobrancelha: categoria e SKU

   Sobe para o topo e vira rótulo, no lugar do bloco de 58px que ficava
   solto entre a descrição e as variações.
--------------------------------------------------------------------------- */
/* O Porto já entrega este bloco como flex, mas os dois filhos vinham em
   largura cheia e quebravam em duas linhas — 72px onde cabe uma de 18. */
.catalog-product-view .product-info-stock-sku .stock,
.catalog-product-view .product-info-stock-sku .product.attribute.sku {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.catalog-product-view .product-info-stock-sku {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
  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-3);
}

.catalog-product-view .product-info-stock-sku .sku .type,
.catalog-product-view .product-info-stock-sku .stock span {
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-3);
}

.catalog-product-view .product-info-stock-sku .sku .value {
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   5. Título e preço

   Medido antes: 30px peso 700 em `#222529`. O card pede 29px peso 500 em
   `--pood-tinta`, e os tokens de produto já existem no `pood-tokens.css`
   desde a vitrine — aqui é só passar a usá-los.
--------------------------------------------------------------------------- */
.catalog-product-view .page-title-wrapper.product {
  margin: 0 0 10px;
}

.catalog-product-view .page-title-wrapper.product .page-title {
  margin: 0;
}

.catalog-product-view .page-title-wrapper.product .base {
  font-size: var(--pood-t-produto);
  font-weight: var(--pood-p-medio);
  line-height: var(--pood-lh-produto);
  letter-spacing: var(--pood-ls-produto);
  color: var(--pood-tinta);
  text-transform: none;
}

.catalog-product-view .product-info-price {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pood-linha);
}

.catalog-product-view .product-info-price .price-box {
  margin: 0;
}

.catalog-product-view .product-info-price .price-final_price .price {
  font-size: 26px;
  font-weight: var(--pood-p-forte);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--pood-tinta);
}

/* 🔴 O PREÇO ANTIGO DUPLICAVA AO ESCOLHER UMA COR — corrigido em 26/08/2026.

   Relatado pelo Will. O core emite DOIS blocos de preço antigo: o `.old-price`
   visível e um `.old-price.sly-old-price.no-display`, que nasce escondido e
   existe para o JS mostrar o "de" da VARIAÇÃO escolhida. O Porto não honra o
   `no-display`, e ao clicar numa cor o `swatch-renderer` faz `.show()` — que
   escreve `display: inline` INLINE no elemento.

   Medido antes de corrigir: 3 preços visíveis viravam 5, com "Preço R$ 6.193,00"
   aparecendo duas vezes.

   ⚠️ AQUI VAI `!important`, E ISSO CONTRARIA O QUE EU MESMO ESCREVI ANTES.

   A nota anterior dizia que `!important` faria a variação em promoção perder o
   "de" para sempre, porque o `.show()` do jQuery escreve inline e só uma
   declaração `!important` o vence. O raciocínio estava certo; a premissa é que
   era falsa — e foi medida agora:

     - 27 dos 28 configuráveis têm preço IDÊNTICO entre as variações, então o
       "de" da variação e o do pai são o mesmo número;
     - no único que diverge (PSJV7MM, R$ 110 a R$ 195, com duas variações em
       promoção), o `.old-price` NORMAL já exibe "Preço R$ 195,00" ao escolher
       a variação — conferido no navegador.

   Ou seja: em 28 de 28 o `sly` não acrescenta informação nenhuma. Escondê-lo
   não custa nada, e mantê-lo custa um preço repetido na tela.

   Se um dia existir configurável cujas variações tenham "de" diferentes E o
   bloco normal não acompanhar, esta regra precisa voltar a ser condicional. */
.catalog-product-view .product-info-main .sly-old-price,
.catalog-product-view .product-info-main .old-price.sly-old-price {
  display: none !important;
}

/* "De" riscado, quando há promoção. */
.catalog-product-view .product-info-price .old-price .price {
  font-size: 14px;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-3);
  text-decoration: line-through;
}

/* A linha de parcelamento, irmã do price box no layout.

   `.product-info-price` vira flex-column para a linha cair sob o preço, como no
   card. O bloco não vive DENTRO do price box de propósito: renderizar ali
   exigiria sobrescrever o template de preço de toda a loja para acrescentar
   uma linha numa tela só. */
.catalog-product-view .product-info-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.catalog-product-view .pood-pdp-parcela {
  margin-top: 4px;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
}
/* A linha do DESCONTO À VISTA, logo abaixo do parcelamento.

   As duas convivem: o parcelamento fala de quem paga em cartão, o desconto de
   quem paga em PIX ou boleto. Um produto pode ter as duas, só uma, ou nenhuma
   — 41 dos 224 vendáveis não parcelam e mesmo assim ganham o desconto.

   `display: block` porque `.product-info-price` é coluna flex e as duas linhas
   precisam empilhar, não sentar lado a lado.

   O VALOR em peso forte e na tinta cheia; o resto da frase em apoio. É o preço
   que o cliente procura com o olho, e a explicação existe para ele não achar,
   no carrinho, que a promessa não valeu — o desconto só entra quando o método
   é escolhido no checkout. */
.pood-pdp-parcela,
.pood-pdp-avista {
  display: block;
}

.pood-pdp-avista {
  margin-top: 3px;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
}

/* O VALOR maior que o resto da frase: e o numero que o cliente procura com o
   olho, e a 13px ele competia de igual para igual com a explicacao ao lado.
   Ajustado a pedido do Will em 26/08/2026. */
.pood-pdp-avista b {
  font-size: 15px;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}


.catalog-product-view .product-info-price .price-label {
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   6. O botão

   Cinco divergências de uma vez: 48px → 40, raio 0 → pílula, 14px/700 →
   12,5px/500, CAIXA ALTA → normal, `#222529` → `--pood-tinta`.

   O `!important` no raio existe porque o Porto declara
   `.button-pos-outside .tocart { border-radius: 0 !important }`. Na vitrine
   aquela regra nunca casava, porque o template emite `button-posoutside`
   sem hífen (§32.4) — aqui a classe sai certa, e a regra dele venceria.
--------------------------------------------------------------------------- */
.catalog-product-view .product-add-form .box-tocart .action.tocart {
  height: 40px;
  min-height: 40px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--pood-r) !important;
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s;
}

.catalog-product-view .product-add-form .box-tocart .action.tocart:hover {
  background: #000;
  color: var(--pood-papel);
}

/* A pílula de quantidade, no mesmo desenho da sacola (§39.7). */
.catalog-product-view .product-add-form .box-tocart .field.qty {
  margin: 0 12px 0 0;
}

.catalog-product-view .product-add-form .box-tocart .field.qty .control {
  height: 40px;
}

.catalog-product-view .product-add-form .box-tocart .input-text.qty {
  height: 40px;
  border-radius: var(--pood-r);
  border: 1px solid var(--pood-linha);
  background: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: 13px;
  color: var(--pood-tinta);
}

.catalog-product-view .product-add-form .box-tocart {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 20px 0 0;
}

/* ---------------------------------------------------------------------------
   7. Variações — o MESMO desenho da vitrine

   Padronizado em 26/08/2026 a pedido do Will: a PDP mostrava o desenho
   antigo — círculo de 28px com a cor preenchendo tudo — enquanto a vitrine
   já usava o quadrado do modelo. Medido nas duas páginas antes de mexer:

       vitrine   34x34 · raio 8 · borda 1px --pood-linha-2 · padding 7 ·
                 background-clip: content-box  (a cor fica POR DENTRO)
       PDP       28x28 · raio 999px · sem borda · box-shadow inset

   Note os 28: este arquivo pedia 30 e o computado dava 28, ou seja o nosso
   valor NÃO estava vencendo. O Porto declara o tamanho com mais peso, e é
   por isso que aqui vai `!important` — a vitrine já precisava dele pela
   mesma razão (§32.4). Não é preferência, é a única forma de a regra valer.

   O Porto ainda desenha um CÍRCULO por cima do swatch: `::after` de 18x18
   com borda preta em -3px/-3px. Sobre o quadrado de raio 8 isso lia como
   dois desenhos disputando o mesmo lugar. Sai — o estado escolhido já é
   dito pela borda na tinta mais o anel de 1px.
--------------------------------------------------------------------------- */
.catalog-product-view .product-add-form .swatch-attribute {
  margin: 0 0 18px;
}

.catalog-product-view .product-add-form .swatch-attribute-label {
  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-3);
}

.catalog-product-view .product-add-form .swatch-attribute-options {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  flex-wrap: wrap;
}

.catalog-product-view .product-add-form .swatch-option::after {
  content: none;
}

/* Cor e imagem partilham a moldura; o que muda é o miolo, logo abaixo. */
.catalog-product-view .product-add-form .swatch-option.color,
.catalog-product-view .product-add-form .swatch-option.image {
  width: 34px !important;
  height: 34px !important;
  min-width: 0;
  margin: 0 !important;
  border: 1px solid var(--pood-linha-2) !important;
  border-radius: 8px !important;
  outline: 0;
  float: none;
  box-shadow: none;
}

/* COR: o padding mais o content-box são o que empurram a cor para dentro da
   moldura, em vez de ela pintar a borda também. É o desenho da vitrine. */
.catalog-product-view .product-add-form .swatch-option.color {
  padding: 7px !important;
  background-clip: content-box !important;
}

/* IMAGEM: 60x80, e não o quadrado da cor.

   O atributo "color" passou a usar a imagem do produto para o swatch em
   26/08/2026, e aí o swatch deixa de comunicar uma cor chapada e passa a
   mostrar o produto naquela cor. Duas consequências:

   1. A PROPORÇÃO tem de ser a da foto, 3:4 (§42.14). Num quadrado a peça
      sai cortada em cima e embaixo — logo onde está a estrutura do rack.
   2. O tamanho sobe de 34 para 80 de altura, a pedido do Will. A 34px a
      foto não se lê: medido, reduzidas àquele tamanho as oito cores davam
      todas o mesmo cinza (200-218 em cada canal), porque o fundo claro
      domina a área. A 80 a peça aparece.

   "contain" e não "cover": a foto do catálogo já é 3:4 e traz respiro
   próprio; "cover" cortaria as bordas da peça sem necessidade. O fundo em
   tom de bloco faz a sobra desaparecer.

   O padding aqui seria erro — encolheria a foto dentro da própria moldura.
   A resolução do arquivo vem do "view.xml" do subtema: 120x160, contra os
   30x20 que o Magento serve por padrão. */
.catalog-product-view .product-add-form .swatch-option.image {
  width: 60px !important;
  height: 80px !important;
  padding: 0 !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;
}

.catalog-product-view .product-add-form .swatch-option.color:hover,
.catalog-product-view .product-add-form .swatch-option.image:hover {
  border-color: var(--pood-tinta-3) !important;
}

.catalog-product-view .product-add-form .swatch-option.color.selected,
.catalog-product-view .product-add-form .swatch-option.image.selected {
  border-color: var(--pood-tinta) !important;
  box-shadow: 0 0 0 1px var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   8. A descrição curta, já fora da caixa de compra

   O `<move>` do layout a trouxe para cima das abas. Ela ocupa a LARGURA DA
   PÁGINA, por decisão do Will em 25/08/2026 — ver a nota na seção 2.

   Já teve teto de 68ch aqui, pela leitura. Saiu junto: com a caixa de leitura
   dentro de uma faixa de 1216px, o texto ficava encostado à esquerda com
   metade do espaço vazio, que foi exatamente a reclamação. SEGUE SEM TETO, e
   é decisão do Will de 25/08/2026, não esquecimento.

   🔴 REESCRITA EM 22/09/2026, e a causa foi um defeito MEU.

   A versão anterior punha `display: block` em TODO `strong` daqui, tratando-o
   como subtítulo. Em muitos produtos ele é — mas medido no catálogo inteiro
   são 136 ocorrências de negrito NO MEIO DA FRASE contra 66 de subtítulo.
   Resultado, relatado pelo Will na PDP do PR-275: `O <strong>Power Rack Pood
   275</strong> é…` desenhava o "O" sozinho numa linha e o negrito na seguinte,
   esticado nos 1216px.

   A regra era deliberada, não acidental — e ainda assim errada para a maioria
   dos casos. Intenção não é medição.

   O HTML dos 269 produtos foi normalizado no mesmo dia, e é isso que torna
   este CSS simples: **subtítulo agora é `<h3>`**, e negrito é só ênfase.

   🔴 A PRIMEIRA TENTATIVA DE CORREÇÃO TAMBÉM FALHOU, e a lição é boa.
   Eu havia produzido `<p><strong>Título</strong></p>` e escrito
   `p:has(> strong:only-child)` para distinguir. **`:only-child` conta apenas
   ELEMENTOS**, então `<p>O <strong>X</strong> é o conjunto…</p>` casa
   igualmente — o strong é o único *elemento* filho, com os nós de texto à
   volta não contando. O negrito inline continuou em bloco.

   Não existe seletor CSS para "este elemento é todo o conteúdo, inclusive o
   texto". Quando a distinção não cabe num seletor, ela pertence à marcação —
   e a marcação honesta para um subtítulo é um cabeçalho.

   As tags possíveis aqui são exatamente 9: p, h3, strong, em, ul, ol, li, br,
   a. Qualquer outra foi desaninhada, então não há `div`, `span` nem `style`
   para disputar com estas regras.
--------------------------------------------------------------------------- */
/* A DESCRIÇÃO ENTROU NA MESMA FAIXA BRANCA DO BLOCO DE ESPECIFICAÇÕES
   (decisão do Will, 22/09/2026). As duas deixaram de ser seções soltas sobre
   o cinza e passaram a ser UMA seção de detalhes do produto: rótulo, texto,
   fio, e então imagem de medidas + tabela.

   A faixa é pintada pela mesma técnica do bloco de especificações —
   `box-shadow` espalhado e `clip-path` — e não por `width: 100vw`, que no
   Windows incluiria a barra de rolagem e criaria rolagem horizontal. */
.catalog-product-view .column.main > .product.attribute.overview {
  margin: var(--pood-gap-secao) 0 0;
  padding: 46px 0;
  background: var(--pood-papel);
  box-shadow: 0 0 0 100vmax var(--pood-papel);
  clip-path: inset(0 -100vmax);
  /* 15px e não o corpo de 14: este é o texto de entrada do produto, o
     primeiro que a pessoa lê depois do preço. */
  font-size: 15px;
  line-height: 1.72;
  color: var(--pood-tinta-2);
}

/* Quando o bloco de especificações vem logo depois, as duas faixas se juntam
   numa só: esta fecha com menos respiro e o fio de separação fica na de
   baixo, que sabe pelo combinador de irmão que veio depois desta. */
.catalog-product-view .column.main > .product.attribute.overview:has(+ [class*="pood-custom-block"]) {
  padding-bottom: 38px;
}

/* O RÓTULO DA SEÇÃO. O texto vem do layout (`at_label`), não daqui — ver o
   comentário no `catalog_product_view.xml` do subtema. Aqui é só o desenho,
   e é o mesmo dos outros rótulos da Direção A: 9,5px, caixa alta, espaçado. */
.catalog-product-view .column.main > .product.attribute.overview > .type {
  display: block;
  margin: 0 0 17px;
  font-size: var(--pood-t-rotulo);
  line-height: 1;
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}

/* A COLUNA DE TEXTO ACOMPANHA A IMAGEM DE MEDIDAS LOGO ABAIXO.

   62% não é número escolhido a olho: a grade do bloco de especificações é
   `minmax(0,1.8fr) minmax(300px,1fr)` com 44px de intervalo, o que dá 753px
   de 1216 para a imagem — exatamente 61,9%. As duas passam a começar e
   terminar na mesma linha vertical.

   Isso também resolve a linha de ~150 caracteres que a largura cheia
   produzia. A §42 registra que o teto de 68ch foi retirado em agosto porque
   deixava o texto encostado à esquerda com metade do espaço vazio — aqui o
   espaço não sobra: ele faz parte de uma seção com rótulo em cima e conteúdo
   embaixo. */
.catalog-product-view .column.main > .product.attribute.overview > .value {
  max-width: 62%;
}

.catalog-product-view .column.main > .product.attribute.overview p {
  margin: 0 0 15px;
}
.catalog-product-view .column.main > .product.attribute.overview > .value > *:first-child {
  margin-top: 0;
}
.catalog-product-view .column.main > .product.attribute.overview > .value > *:last-child {
  margin-bottom: 0;
}

/* SUBTÍTULO — sobe em contraste e desce em tamanho, que é como o resto da
   Direção A trata rótulo de seção. O respiro de cima é maior que o de baixo
   de propósito: ele pertence ao texto que vem DEPOIS dele, não ao anterior.

   O reset é explícito porque `h3` carrega estilo do Porto e do core: tamanho,
   peso, caixa e margem próprios. */
.catalog-product-view .column.main > .product.attribute.overview h3 {
  margin: 28px 0 7px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: var(--pood-p-forte);
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--pood-tinta);
}
.catalog-product-view .column.main > .product.attribute.overview h3::before,
.catalog-product-view .column.main > .product.attribute.overview h3::after {
  content: none;
}

/* ÊNFASE NO MEIO DA FRASE — continua inline. É esta regra que o defeito
   anterior atropelava. */
.catalog-product-view .column.main > .product.attribute.overview strong {
  color: var(--pood-tinta);
  font-weight: var(--pood-p-medio);
}
.catalog-product-view .column.main > .product.attribute.overview em {
  font-style: italic;
  color: var(--pood-tinta);
}

/* LISTAS — marcador desenhado, não o disco do navegador: o disco fica grande,
   escuro e alinhado pela baseline errada. O ponto no acento amarra a lista ao
   resto da identidade. */
.catalog-product-view .column.main > .product.attribute.overview ul,
.catalog-product-view .column.main > .product.attribute.overview ol {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}
.catalog-product-view .column.main > .product.attribute.overview li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 19px;
}
.catalog-product-view .column.main > .product.attribute.overview li:last-child {
  margin-bottom: 0;
}
.catalog-product-view .column.main > .product.attribute.overview ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pood-acento);
}
.catalog-product-view .column.main > .product.attribute.overview ol {
  counter-reset: pood-ol;
}
.catalog-product-view .column.main > .product.attribute.overview ol > li {
  counter-increment: pood-ol;
}
.catalog-product-view .column.main > .product.attribute.overview ol > li::before {
  content: counter(pood-ol) ".";
  position: absolute;
  left: 0;
  color: var(--pood-acento);
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
}

/* Link no texto: sem sublinhado padrão, com fio próprio que acende no acento —
   o mesmo tratamento da tabela de especificações. */
.catalog-product-view .column.main > .product.attribute.overview a {
  color: var(--pood-tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--pood-linha);
}
.catalog-product-view .column.main > .product.attribute.overview a:hover {
  color: var(--pood-acento);
  border-bottom-color: currentColor;
}

@media (max-width: 991px) {
  .catalog-product-view .column.main > .product.attribute.overview {
    padding: 32px 0;
    font-size: 14.5px;
    line-height: 1.68;
  }
  /* Em tela estreita a medida de 62% viraria uma coluna espremida: a largura
     disponível já é a medida de leitura. */
  .catalog-product-view .column.main > .product.attribute.overview > .value {
    max-width: none;
  }
  .catalog-product-view .column.main > .product.attribute.overview:has(+ [class*="pood-custom-block"]) {
    padding-bottom: 26px;
  }
  .catalog-product-view .column.main > .product.attribute.overview + [class*="pood-custom-block"] {
    padding-top: 26px;
  }
  .catalog-product-view .column.main > .product.attribute.overview h3 {
    margin-top: 22px;
  }
}

/* ---------------------------------------------------------------------------
   9. Selos de confiança

   Medidas do card "Tela — PDP": grade, gap 14, respiro 20 acima e 18 abaixo do
   fio, rótulo 12/600 e apoio 11 em tinta-2.

   O card tem TRÊS colunas fixas (`repeat(3,1fr)`); aqui são no máximo dois
   selos, e o de prazo só existe em item sob encomenda. `auto-fit` com mínimo
   evita a coluna vazia que `repeat(3,1fr)` deixaria — e evita também que um
   selo sozinho se estique por toda a caixa.

   O `border-top` mora no bloco e não numa regra solta: sem selo nenhum o
   template devolve zero byte, e um fio sem conteúdo acima do simulador de
   frete seria um risco pendurado no vazio.
--------------------------------------------------------------------------- */
.catalog-product-view .pood-pdp-selos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pood-linha);
}

.catalog-product-view .pood-pdp-selos span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-product-view .pood-pdp-selos b {
  font-size: 12px;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
}

.catalog-product-view .pood-pdp-selos em {
  font-style: normal;
  font-size: 11px;
  color: var(--pood-tinta-2);
}

/* Numa coluna, o card vira linha: rótulo à esquerda, apoio à direita. */
@media (max-width: 900px) {
  .catalog-product-view .pood-pdp-selos {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .catalog-product-view .pood-pdp-selos span {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------------------
   10. "Sob encomenda" na sobrancelha

   O rótulo troca no template (`Magento_Catalog/product/view/type/default.phtml`
   e o irmão do agrupado); aqui ele só ganha a cor do acento, para não se ler
   como um "Em estoque" mais comprido. A classe `stock available` continua no
   elemento de propósito: ela é a que o Porto e o core estilizam, e o produto
   ESTÁ disponível para compra — o que muda é o prazo, não a disponibilidade.
--------------------------------------------------------------------------- */
.catalog-product-view .product-info-stock-sku .stock.pood-sob-encomenda span,
.catalog-product-view .product-info-stock-sku .stock.pood-sob-encomenda .label {
  color: var(--pood-acento);
}

/* ---------------------------------------------------------------------------
   11. Os dois fios que o Porto pendura na linha de compra

   `.box-tocart` vem com `border-top` E `border-bottom`, ambos `#E7E7E7` — uma
   cor que não está na paleta. Revelado pelo fio dos selos: com ele na tela
   passaram a existir TRÊS fios em 130px, em dois tons diferentes, e o card
   tem um só. Medido em 25/08/2026 na PDP do SR005, em y=253, 339 e 379.

   Não são meus e não são novos; o selo apenas os pôs em evidência. Saem porque
   o respiro já separa a linha de compra do que vem antes e depois — que é como
   o card resolve (`.acao{margin-top:22px}`, sem borda nenhuma).
--------------------------------------------------------------------------- */
.catalog-product-view .product-info-main .box-tocart {
  border-top: 0;
  border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   12. O "de" riscado sobe para linha própria

   O card empilha: `<s>` riscado, preço final, parcelas — `.pdp-preco` é
   `flex-direction: column`. A loja punha o "de" à ESQUERDA do final, na mesma
   linha, o que dá ao preço antigo o mesmo peso visual do que vale.
--------------------------------------------------------------------------- */
.catalog-product-view .product-info-price .price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.catalog-product-view .product-info-price .old-price .price {
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   13. A área de detalhes

   O conteúdo da aba vinha num retângulo BRANCO de 1216 × 1680, sem raio e com
   `padding: 30px 0 15px` — ou seja, respiro em cima e embaixo e ZERO nas
   laterais, com o texto encostando na borda. Tudo em volta é `--pood-fundo`.
   Era o que se lia como "espaçamento errado": não é falta de espaço, é um
   bloco de cor errada com o texto colado nele.

   Assenta no fundo da página, como as seções do card, e ocupa a largura toda
   (ver a nota sobre medida de leitura na regra dos filhos, mais abaixo).

   A seção inteira ganha o respiro do card (`margin-top: 64; padding-top: 30;
   border-top`), que ela não tinha — vinha com 0 nos três.
--------------------------------------------------------------------------- */
.catalog-product-view .product.info.detailed {
  margin-top: var(--pood-gap-secao);
  padding-top: 30px;
  border-top: 1px solid var(--pood-linha);
}

.catalog-product-view .product.data.items > .data.item.content,
.catalog-product-view .product.data.items > .item.content {
  background: transparent;
  padding: 30px 0 0;
  margin-top: 24px;
}

/* LARGURA CHEIA, e nao medida de leitura.

   Eu tinha posto `max-width: 68ch` aqui pensando em legibilidade — 1216px a
   14px sao ~150 caracteres por linha. O Will reprovou na tela: o texto ficava
   "comprimido a esquerda", com metade da faixa vazia a direita, e a area de
   Detalhes deixava de ter o tamanho da pagina.

   Ele esta certo, e o card concorda: as secoes de conteudo dele usam a largura
   toda e a repartem em COLUNAS (`1fr 340px` no bloco com foto, `1fr 1fr` nas
   especificacoes) — nunca uma coluna estreita encostada a esquerda. O texto
   corrido longo desta loja ainda pede uma solucao de colunas; enquanto ela nao
   existe, largura cheia e o que o Will quer ver. */

/* As abas eram 14px/700 em caixa alta, o peso de um H2 para o que é
   navegação. Viram rótulo, no corpo do sistema. */
.catalog-product-view .product.data.items > .data.item.title,
.catalog-product-view .product.data.items > .item.title {
  padding: 0 0 12px;
  margin-right: 28px;
}

.catalog-product-view .product.data.items > .data.item.title > a,
.catalog-product-view .product.data.items > .item.title > a {
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pood-tinta-2);
  padding: 0;
}

/* ---------------------------------------------------------------------------
   14. O botão de consultar frete

   `input#sendFrete.action.primary`, do `MestreMage_ShippingQuoteProductPage`:
   `#1979C3` — o azul do Magento Blank —, 48px, canto reto e caixa alta, ao
   lado de um campo de 50px também reto. Nada disso é da paleta.

   ⚠️ `!important` aqui NÃO é preguiça, e custou meia dúzia de medições
   contraditórias para provar. A regra que pinta o azul vem de folha servida
   pelo CDN e ilegível pelo CSSOM (§29.5), e ela própria usa `!important`:
   testado com `<style>` novo, `#sendFrete { background-color: … }` sem
   `!important` NÃO vence, e com `!important` vence — inclusive pelo seletor
   mais simples. Mesmo caso dos swatches do §32.4.
--------------------------------------------------------------------------- */
.catalog-product-view #simularFrete .input-text {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--pood-linha);
  padding: 0 14px;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta);
}

.catalog-product-view #sendFrete {
  height: 40px;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background-color: var(--pood-tinta) !important;
  color: var(--pood-papel);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  text-transform: none;
  letter-spacing: 0;
}

.catalog-product-view #sendFrete:hover {
  background-color: var(--pood-tinta-2) !important;
}

/* ---------------------------------------------------------------------------
   15. A trilha

   O desenho é comum a três telas e mora em `pood-base.css`; aqui fica só o que
   diverge, que é o respiro — a mesma divisão que a vitrine já usa.

   `padding-top` do `.page-main` vai a ZERO: os 56px do topo passam para a
   faixa da trilha, que fica ACIMA do `.page-main`, e os 26px que a separam do
   conteúdo são a margem dela. Somar os dois dá 52 onde deviam ser 26 — medido
   na vitrine quando aquela tela foi feita.
--------------------------------------------------------------------------- */
.catalog-product-view .breadcrumbs {
  padding: 56px 0 0;
  margin: 0 0 26px;
}

.catalog-product-view .page-main {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   16. Os controles de compra: contornos do Porto e um texto fora do centro

   Quatro defeitos numa linha só, todos relatados pelo Will em 25/08/2026 e
   todos da mesma família — o Porto desenha estes controles como caixas de
   48px com `border: 1px solid #E7E7E7`, a cor fora da paleta que já apareceu
   no `.box-tocart` e no fio da trilha.

     − e +            contorno de 1px em volta de cada um, e 48px de altura
                      dentro de uma pílula de 40 — por isso "estouravam"
     ♡ e comparar     mesma caixa de 48 com contorno, canto reto
     Adicionar        `line-height: 48px` num botão de `height: 40px`: o texto
                      assenta 8px ABAIXO do centro. Era o "não está alinhado"

   Os `::before` e `::after` do − e do + NÃO saem: eles não são contorno, são
   os próprios sinais, desenhados com `border-top` e `border-left`. Zerá-los
   apagaria os símbolos — a lição do §39.1, onde o reset esqueceu a borda e
   levou a barra do sinal junto.
--------------------------------------------------------------------------- */
/* ⚠️ `.qty-changer a` e nao `.qty-dec`: medido, o segundo NAO vence. O Porto
   ancora estes botoes por TIPO, e tipo soma especificidade — a mesma licao do
   §37.2, onde `.details-qty button` derrotou `.details-qty .pood-mc-passo`. */
.catalog-product-view .box-tocart .qty-changer a {
  border: 0;
  height: 40px;
  line-height: 40px;
  background: transparent;
}

.catalog-product-view .product-social-links .action.towishlist,
.catalog-product-view .product-social-links .action.tocompare,
.catalog-product-view .product-addto-links .action.towishlist,
.catalog-product-view .product-addto-links .action.tocompare,
.catalog-product-view .box-tocart ~ * .action.towishlist,
.catalog-product-view .box-tocart ~ * .action.tocompare {
  border: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 999px;
  background: transparent;
}

/* Centro de verdade: com flex o texto não depende de `line-height` casar com
   a altura, e o ícone da sacola fica alinhado com ele. */
.catalog-product-view .box-tocart .action.primary.tocart,
.catalog-product-view .box-tocart button.tocart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.catalog-product-view .box-tocart .action.primary.tocart span,
.catalog-product-view .box-tocart button.tocart span {
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   17. A lista de fretes cotados

   O desenho da LINHA — logo, nome, prazo, valor — mora em `pood-base.css`,
   compartilhado com o carrinho. Aqui fica só a caixa que as contém, que é
   diferente: no carrinho cada linha é um cartão selecionável, com radio; aqui
   é consulta, e o cliente não escolhe nada.

   Por isso a linha não tem borda nem fundo próprio: um fio de 1px separa uma
   da outra, como numa lista de valores, e o cartão fica para a tela onde a
   escolha de fato acontece.
--------------------------------------------------------------------------- */
.catalog-product-view #containerFrete {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pood-linha-2);
}

.catalog-product-view #containerFrete .pood-fr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pood-linha-2);
}

/* Uma linha sem `.pood-fr-item` é a mensagem de erro do módulo ("Selecione as
   opções do produto", "não foi possível encontrar métodos"). Ela continua
   sendo um <li> solto, e precisa de estilo próprio para não sair sem respiro
   colada no fio. */
.catalog-product-view #containerFrete li:not(.pood-fr-item) {
  padding: 11px 0;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   18. Mobile — auditado em 375px (CDP, viewport real) em 25/08/2026

   O que a tela larga escondia. Medido com emulação de dispositivo pelo
   protocolo do DevTools, e não por iframe ou `resize_window`: os dois já
   falsearam medição nesta base (§29.11, §37.7).
--------------------------------------------------------------------------- */

/* 🔴 O SELO ESTAVA INTEIRO FORA DA TELA.

   Medido: `.pood-pdp-selos` com `width: 0` e `left: 355` num viewport de 375 —
   o texto "Frete grátis / acima de R$ 5.000" começava DEPOIS da borda direita.

   A causa é o `.prev-next-products`, que o Porto solta com `float: right` no
   topo da caixa de compra. Um elemento em grade ou flex estabelece contexto de
   formatação, e contexto de formatação NÃO invade área de float: sem espaço
   livre, encolhe a zero e é empurrado para o lado. O irmão `.product-social-
   links`, que é bloco comum, não sofre — por isso o defeito era só deste.

   `clear` e não `width: 100%`: os dois devolvem os 335px, mas só o `clear`
   trata a causa. Com `width` o elemento continuaria disputando a linha com o
   float, e o próximo bloco em grade que entrasse ali repetiria o problema. */
.catalog-product-view .pood-pdp-selos {
  clear: both;
}

@media (max-width: 991px) {
  /* As grades do conteúdo do produto são Bootstrap, escritas no admin, e
     trazem `margin: 0 -10px`. Empilhadas no mobile essa margem não separa
     nada — só sangra 10px para fora, deixando a descrição desalinhada do
     resto da página. Medido: `.row` em left 10 onde o conteúdo está em 20. */
  .catalog-product-view .product.data.items .row {
    margin-left: 0;
    margin-right: 0;
  }

  .catalog-product-view .product.data.items [class*="col-md-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* O Porto entrega os swatches com 28px. Num toque de dedo isso é pequeno —
     a recomendação de acessibilidade é 44, e 36 é o que cabe sem quebrar a
     linha de 8 cores deste rack. */
  /* `min-height` e nao `height`: medido, o `height` NAO vence — o Porto o
     declara com mais peso e o swatch ficava 36 de largura por 28 de altura.
     Contra `min-height` nao ha concorrente, e nao precisa de `!important`. */
  .catalog-product-view .product-add-form .swatch-option.color,
  .catalog-product-view .product-add-form .swatch-option.image {
    width: 38px !important;
    height: 38px !important;
  }

  /* O miolo cresce junto, senao a cor fica um ponto no meio de uma moldura
     grande: 7 de padding em 34 deixa 18 de cor; em 38 tem de ser 8 para
     manter a mesma proporcao. */
  .catalog-product-view .product-add-form .swatch-option.color {
    padding: 8px !important;
  }
}

/* ---------------------------------------------------------------------------
   21. Custom Block: a faixa de medidas e especificações

   O CONTEÚDO É MARKUP DO SITE ANTIGO. Os 92 produtos vendáveis que têm este
   bloco trazem, dentro do próprio atributo, a grade do Bootstrap:

       <div class="col-md-8"> …imagem de medidas… </div>
       <div class="col-md-4"> …tabela de especificações… </div>

   SÃO DUAS CAUSAS, e a segunda só apareceu ao medir na tela — deduzir teria
   levado à correção errada:

   1. O .column.main da PDP é um GRID de duas colunas (609px + 551px). A
      descrição curta e a longa declaram "grid-column: 1 / -1" e atravessam
      as duas; este bloco não declarava nada, caía na primeira coluna e ficava
      com 609px de 1216 — metade da página. A imagem, de 810px naturais, era
      exibida a 386.

   2. O bootstrap.optimized.min.css que o Porto carrega É Bootstrap 4: define
      .col-md-8 como "flex: 0 0 66.67%" MAIS "max-width: 66.67%", e sem
      nenhuma media query. Como o pai não é contêiner flex, o flex fica
      inerte e só o max-width aplica. Medido: col-md-8 = 406px, col-md-4 =
      203px com a tabela transbordando a 237 e empilhando embaixo.

   CORRIGIDO POR CSS, NÃO POR CONTEÚDO. Reescrever a marcação de 92 produtos
   trocaria um defeito conhecido por 92 chances de errar num texto que é do
   Will. O que precisa mudar é a apresentação.

   Escopo estrito: col-md-8 é nome genérico e o Bootstrap vale para a página
   inteira. O seletor cobre custom_block e custom_block_2, que hoje está
   vazio em todos os produtos mas existe no admin.
   --------------------------------------------------------------------------- */

/* A faixa atravessa as duas colunas do grid e pinta de branco de fora a
   fora. O fundo sai por box-shadow com espalhamento, não por width:100vw:
   no Windows a vw inclui a barra de rolagem e a página ganharia rolagem
   horizontal. O clip-path apara em cima e embaixo, senão a sombra cobriria
   a página inteira. Medido: o body tem overflow-x hidden, então a pintura
   para exatamente na borda da janela. */
.catalog-product-view [class*="pood-custom-block"] {
  grid-column: 1 / -1;
  /* Só a margem de cima — ver o comentário de `--pood-gap-secao`. Era
     `44px 0`, e os 44 de baixo somavam com os da descrição logo abaixo,
     abrindo um vão de 108px que não era escolha de ninguém. */
  margin: var(--pood-gap-secao) 0 0;
  padding: 46px 0 48px;
  background: var(--pood-papel);
  box-shadow: 0 0 0 100vmax var(--pood-papel);
  clip-path: inset(0 -100vmax);
  font-family: var(--pood-fonte);
}

/* JUNTA-SE À FAIXA DA DESCRIÇÃO quando vem logo depois dela: some a margem
   entre as duas e entra o fio que separa o texto do conteúdo técnico.

   O combinador de irmão adjacente resolve isto sem `:has()` — e resolve
   também o caso em que o bloco aparece sozinho, sem descrição acima, onde um
   fio no topo seria um risco pendurado no vazio. */
.catalog-product-view .column.main > .product.attribute.overview + [class*="pood-custom-block"] {
  margin-top: 0;
  padding-top: 38px;
  border-top: 1px solid var(--pood-linha);
}

/* O layout declara at_label como "none", então o rótulo não sai. Se um dia
   alguém trocar, ele não deve aparecer solto no meio da faixa. */
.catalog-product-view [class*="pood-custom-block"] > .type { display: none; }

/* Imagem e tabela lado a lado. O :has() decide sozinho: 7 dos 92 produtos
   têm só a imagem, e neles a coluna única é o certo — sem ele sobraria
   metade da faixa vazia. Onde o navegador não suportar, cai no empilhado,
   que é o comportamento de hoje e não uma regressão. */
.catalog-product-view [class*="pood-custom-block"] > .value {
  display: grid;
  gap: 44px;
  align-items: start;
}
.catalog-product-view [class*="pood-custom-block"] > .value:has(.col-md-4) {
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
}

/* Desarma o Bootstrap DENTRO do bloco. O min-width:0 é obrigatório: item de
   grade nasce com min-width:auto e a tabela larga empurraria a coluna para
   fora — foi o que produziu a tabela de 237px numa caixa de 203. */
.catalog-product-view [class*="pood-custom-block"] [class*="col-md-"] {
  flex: none;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  float: none;
  position: static;
}
.catalog-product-view [class*="pood-custom-block"] .block,
.catalog-product-view [class*="pood-custom-block"] .block_content {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* A imagem é um DESENHO DE MEDIDAS, não foto de produto: os números só se
   leem se ela ocupar a coluna inteira. A maior medida em 810px de largura,
   e a coluna dá cerca de 750 — logo reduz, nunca amplia. */
.catalog-product-view [class*="pood-custom-block"] .block_content img,
.catalog-product-view [class*="pood-custom-block"] .col-md-8 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pood-r-caixa);
}

/* esp001, SR001 e PW8BAR têm mais de uma imagem; sem respiro elas colam. */
.catalog-product-view [class*="pood-custom-block"] .block_content img + img {
  margin-top: 18px;
}

/* A tabela ganha cartão próprio. A faixa é branca, então aqui o cartão usa
   --pood-fundo — o inverso do resto da página, que é o que o destaca. */
/* O respiro do cartão passa a ser o do projeto (`--pood-pad-cartao`, os
   30/32/32 medidos no design system) em vez dos 26/28 que eu havia escolhido
   a olho. Relatado pelo Will: "parece que ficou tudo muito colado nessa
   parte". Num cartão de 419px de largura com dez linhas, 26px de topo deixam
   o rótulo encostado na borda. */
.catalog-product-view [class*="pood-custom-block"] .produto-espec {
  background: var(--pood-fundo);
  border-radius: var(--pood-r-cartao);
  padding: var(--pood-pad-cartao);
}

/* "Especificações" vira rótulo de seção, no mesmo desenho dos demais rótulos
   da Direção A: 9,5px, caixa alta, espaçado. Os pseudos são zerados porque
   .divider é classe do Porto e pode trazer traço próprio. */
.catalog-product-view [class*="pood-custom-block"] .produto-espec > h3,
.catalog-product-view [class*="pood-custom-block"] .produto-espec > .divider {
  margin: 0;
  /* O fio fica na base do rótulo, então o respiro até a primeira linha é
     este padding mais o da célula: 18 + 1 + 15 = 34px de texto a texto. */
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--pood-linha);
  background: none;
  font-size: var(--pood-t-rotulo);
  line-height: 1;
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}
.catalog-product-view [class*="pood-custom-block"] .produto-espec > .divider::before,
.catalog-product-view [class*="pood-custom-block"] .produto-espec > .divider::after {
  content: none;
}

.catalog-product-view [class*="pood-custom-block"] table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

/* O conteúdo traz col width="30%" do site antigo, e 30% deixa o rótulo
   "Outras especificações" quebrando em três linhas. Atributo de apresentação
   tem a menor precedência de todas, então basta declarar aqui. */
.catalog-product-view [class*="pood-custom-block"] table col:first-child { width: 43%; }
.catalog-product-view [class*="pood-custom-block"] table col + col        { width: 57%; }

.catalog-product-view [class*="pood-custom-block"] table th,
.catalog-product-view [class*="pood-custom-block"] table td {
  border: 0;
  border-bottom: 1px solid var(--pood-linha);
  background: none;
  text-align: left;
  vertical-align: top;
  /* 15 e não 12: a linha passa de 48 para 54px de altura. Com dez linhas
     empilhadas e um fio entre cada uma, 12px de respiro fazem a tabela ler
     como uma grade densa em vez de uma lista. */
  padding: 15px 0;
}
.catalog-product-view [class*="pood-custom-block"] table th {
  /* 20 e não 16: é a distância entre o rótulo e o valor, a única coisa que
     separa as duas colunas — não há fio vertical entre elas. */
  padding-right: 20px;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-normal);
  line-height: 1.5;
  color: var(--pood-tinta-2);
}

/* line-height generoso porque "Outras especificações" traz uma lista separada
   por `<br>`; apertada, ela vira um bloco denso e ilegível.

   1,8 e não 1,65: naquele produto são SETE itens numa célula só, e é o ponto
   mais denso de toda a tabela — o que o Will viu como "tudo muito colado".
   O conteúdo é uma lista escrita com quebras de linha, e transformá-la em
   `<ul>` de verdade foi tentado em 22/09 e revertido junto com a
   normalização (§46.10); enquanto continuar sendo texto, quem a torna
   legível é a entrelinha. Em valor de uma linha só isso não muda nada. */
.catalog-product-view [class*="pood-custom-block"] table td {
  font-size: var(--pood-t-corpo);
  font-weight: var(--pood-p-medio);
  line-height: 1.8;
  color: var(--pood-tinta);
}

/* A última linha não precisa de fio: o cartão já termina ali. */
.catalog-product-view [class*="pood-custom-block"] table tr:last-child th,
.catalog-product-view [class*="pood-custom-block"] table tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Link na especificação é DADO, não ação: herda a cor e leva só um fio. */
.catalog-product-view [class*="pood-custom-block"] table a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--pood-linha);
}
.catalog-product-view [class*="pood-custom-block"] table a:hover {
  color: var(--pood-acento);
  border-bottom-color: currentColor;
}

@media (max-width: 991px) {
  .catalog-product-view [class*="pood-custom-block"] {
    padding: 32px 0 34px;
  }
  .catalog-product-view [class*="pood-custom-block"] > .value { gap: 26px; }
  .catalog-product-view [class*="pood-custom-block"] > .value:has(.col-md-4) {
    grid-template-columns: 1fr;
  }
  .catalog-product-view [class*="pood-custom-block"] .produto-espec {
    padding: 26px 22px 28px;
  }
  .catalog-product-view [class*="pood-custom-block"] table col:first-child { width: 46%; }
  .catalog-product-view [class*="pood-custom-block"] table col + col        { width: 54%; }
}

/* A imagem quase nunca tem a altura do cartao de especificacoes (medido no
   PR-275: 443px contra 713px). Com align-items:start toda a sobra cai embaixo
   dela e a faixa fica torta. Centrada, a sobra se reparte e as duas colunas
   leem como um par. So vale quando existe tabela: sozinha, a imagem ja ocupa
   a largura inteira e nao ha o que centrar. */
.catalog-product-view [class*="pood-custom-block"] > .value:has(.col-md-4) .col-md-8 {
  align-self: center;
}

/* ---------------------------------------------------------------------------
   22. A descrição longa — a aba "Detalhes"

   O HTML dos 268 produtos foi normalizado em 22/09/2026 e é isso que torna
   este CSS possível: saíram 940 div da grade do Bootstrap do site antigo,
   864 i de ícone decorativo, 240 span e o style inline de 155 produtos.
   Sobraram h3, h4, p, ul, ol, li, strong, em, a, br, img e table.

   Antes disso o bloco vinha com o padrão do Porto — h3 em 25px/700, h4 em
   20px/700 e texto em 14px no cinza #777, que não é nenhum tom da paleta.

   🔴 ESTE BLOCO NÃO MEXE EM LARGURA, E A RAZÃO CUSTOU UMA REVERSÃO.

   Eu havia normalizado o HTML destes 268 produtos removendo os `div` da grade
   do Bootstrap, e dado ao texto a mesma medida de 62% da descrição curta. O
   Will olhou a página: *"o layout nesse momento está muito pior, as imagens
   ficaram grandes, os blocos estão todos um embaixo do outro deixando a
   página muito comprida"*. Estava certo, e a medição explicou por quê:

     - 175 produtos têm `div.row` com grade de verdade
     - `col-md-4` aparece 408 vezes, `col-md-6` 269, `col-md-12` 228
     - das 440 imagens, apenas **3** têm largura própria

   **Quem dimensiona as imagens é a coluna.** E medido na página, `.row` é
   `display: flex` — a grade FUNCIONA aqui.

   Eu havia concluído o contrário a partir do Custom Block (§21), onde o
   conteúdo traz `col-md-8` SEM um `.row` em volta e por isso o flex fica
   inerte. Generalizei de um caso para o outro sem medir o segundo.

   O conteúdo foi restaurado do backup. O que segue são refinamentos que
   respeitam a grade: tipografia, cor, marcador de lista, canto de imagem,
   tabela e a nota de garantia. **Nenhuma regra aqui define largura.**
   --------------------------------------------------------------------------- */

.catalog-product-view .product.attribute.description {
  font-size: 15px;
  line-height: 1.72;
  color: var(--pood-tinta-2);
}

/* SEÇÃO. O respiro de cima é grande porque separa assuntos; o de baixo é
   pequeno porque o título pertence ao que vem depois dele. */
.catalog-product-view .product.attribute.description h3 {
  margin: 44px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: var(--pood-p-forte);
  text-transform: none;
  color: var(--pood-tinta);
}

/* SUBSEÇÃO */
.catalog-product-view .product.attribute.description h4 {
  margin: 30px 0 9px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -.005em;
  font-weight: var(--pood-p-forte);
  text-transform: none;
  color: var(--pood-tinta);
}

.catalog-product-view .product.attribute.description > .value > *:first-child { margin-top: 0; }
.catalog-product-view .product.attribute.description > .value > *:last-child  { margin-bottom: 0; }

/* 🔴 O PARÁGRAFO PRECISA DE MAIS PESO QUE O RESTO, e o diagnóstico levou um
   tempo porque o sintoma era estranho: `li` obedecia e `p` não, ESTANDO OS
   DOIS NA MESMA REGRA.

   A causa está no `styles-m.css` do Porto, servido pelo CDN e portanto
   ilegível pelo CSSOM (§29.5) — só apareceu ao procurar no disco do servidor:

       .product.data.items > .item.content p { font-size:14px; line-height:1.9 }

   São (0,5,1) contra os (0,3,1) do seletor natural daqui. E `li` não está
   naquela regra, o que explica por que só o parágrafo resistia.

   O seletor abaixo passa por dentro da mesma árvore de abas e chega a
   (0,7,1). O `line-height` e o `letter-spacing` vêm junto porque a regra do
   Porto também os define. */
.catalog-product-view .product.data.items .product.attribute.description p,
.catalog-product-view .product.attribute.description li {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: 0;
}
.catalog-product-view .product.attribute.description li { margin-bottom: 8px; }

.catalog-product-view .product.attribute.description strong {
  color: var(--pood-tinta);
  font-weight: var(--pood-p-medio);
}

/* A NOTA DE GARANTIA — 62% dos produtos a têm, sempre no mesmo formato: um h4
   com o título e um parágrafo inteiro em itálico com o texto legal. Em
   itálico corrido ela compete com a descrição; como nota recuada, informa sem
   disputar.

   O `:only-child` é seguro AQUI porque o parágrafo não tem texto fora do
   `em` — que foi exatamente o caso que derrubou a mesma regra na descrição
   curta (§46.9). */
.catalog-product-view .product.attribute.description p:has(> em:only-child) {
  margin: 10px 0 15px;
  padding: 15px 18px;
  background: var(--pood-fundo);
  border-radius: var(--pood-r-caixa);
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--pood-tinta-3);
}
.catalog-product-view .product.attribute.description p:has(> em:only-child) em {
  font-style: normal;
}

.catalog-product-view .product.attribute.description em { color: inherit; }

/* LISTAS — é onde moram as características e as especificações. Marcador
   desenhado no acento, não o disco do navegador. */
.catalog-product-view .product.attribute.description ul,
.catalog-product-view .product.attribute.description ol {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}
.catalog-product-view .product.attribute.description li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 20px;
}
.catalog-product-view .product.attribute.description li:last-child { margin-bottom: 0; }
.catalog-product-view .product.attribute.description ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pood-acento);
}
.catalog-product-view .product.attribute.description ol { counter-reset: pood-dol; }
.catalog-product-view .product.attribute.description ol > li { counter-increment: pood-dol; }
.catalog-product-view .product.attribute.description ol > li::before {
  content: counter(pood-dol) ".";
  position: absolute;
  left: 0;
  color: var(--pood-acento);
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
}

/* LINK — herda a cor e leva um fio próprio que acende no acento, o mesmo
   tratamento da tabela de especificações e da descrição curta. */
.catalog-product-view .product.attribute.description a {
  color: var(--pood-tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--pood-linha);
}
.catalog-product-view .product.attribute.description a:hover {
  color: var(--pood-acento);
  border-bottom-color: currentColor;
}

/* IMAGEM — cantos arredondados, que foi o pedido. `max-width` e NÃO `width`:
   quem dimensiona a imagem é a coluna do conteúdo, e forçar 100% foi
   exatamente o que a fez crescer demais na primeira tentativa. */
.catalog-product-view .product.attribute.description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pood-r-caixa);
}

/* TABELA — a marcação traz `data-th` em cada célula, e foi mantido na
   normalização justamente porque é o que permite empilhar no celular sem
   perder o rótulo da coluna. */
.catalog-product-view .product.attribute.description table {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 22px;
  border: 0;
  border-collapse: collapse;
  font-size: var(--pood-t-corpo);
}
.catalog-product-view .product.attribute.description table th,
.catalog-product-view .product.attribute.description table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--pood-linha);
  text-align: left;
  vertical-align: top;
  background: none;
}
.catalog-product-view .product.attribute.description table tr:first-child th {
  padding-top: 0;
  font-size: var(--pood-t-rotulo);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
  border-bottom-color: var(--pood-tinta-3);
}
.catalog-product-view .product.attribute.description table td:first-child,
.catalog-product-view .product.attribute.description table th:first-child { padding-left: 0; }
.catalog-product-view .product.attribute.description table td { color: var(--pood-tinta); }
.catalog-product-view .product.attribute.description table td strong { font-weight: var(--pood-p-medio); }
.catalog-product-view .product.attribute.description table tr:last-child th,
.catalog-product-view .product.attribute.description table tr:last-child td { border-bottom: 0; }

@media (max-width: 991px) {
  .catalog-product-view .product.attribute.description {
    font-size: 14.5px;
    line-height: 1.68;
  }
  .catalog-product-view .product.attribute.description h3 { margin-top: 32px; font-size: 18px; }
  .catalog-product-view .product.attribute.description h4 { margin-top: 24px; }
}

/* TABELA NO CELULAR — cada linha vira um cartão e cada célula mostra o rótulo
   da própria coluna, lido de `data-th`.

   SÓ PARA TABELA DE 3 COLUNAS OU MAIS. Medido: as de 2 colunas são pares
   rótulo/valor (a de especificações) e empilhá-las só dobra a altura sem
   ganhar nada — a tabela de 2 colunas já é legível em 375px. A que precisa
   disto é a de tamanhos, com 5 colunas, que sem empilhar sai com rolagem
   lateral. O `:has()` conta a coluna pelo 3º item da primeira linha. */
@media (max-width: 767px) {
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)),
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) tbody,
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) tr,
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) td {
    display: block;
    width: 100%;
  }
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) thead,
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) tr:first-child {
    display: none;
  }
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) tr {
    margin-bottom: 14px;
    padding: 4px 16px;
    background: var(--pood-fundo);
    border-radius: var(--pood-r-caixa);
  }
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) td {
    padding: 9px 0;
    border-bottom: 1px solid var(--pood-linha);
  }
  .catalog-product-view .product.attribute.description table:has(tr:first-child > *:nth-child(3)) tr td:last-child {
    border-bottom: 0;
  }
  /* `:not([data-th=""])` porque parte das tabelas traz o atributo vazio, e sem
     a guarda o rótulo sairia como uma linha em branco acima de cada valor. */
  .catalog-product-view .product.attribute.description table td[data-th]:not([data-th=""])::before {
    content: attr(data-th);
    display: block;
    margin-bottom: 2px;
    font-size: var(--pood-t-rotulo);
    letter-spacing: var(--pood-ls-rotulo);
    text-transform: uppercase;
    font-weight: var(--pood-p-forte);
    color: var(--pood-tinta-2);
  }
  /* A de 2 colunas fica tabela mesmo, só com menos respiro lateral. */
  .catalog-product-view .product.attribute.description table th,
  .catalog-product-view .product.attribute.description table td { padding: 10px 10px 10px 0; }
}

/* ---------------------------------------------------------------------------
   22.1 A descrição na linguagem da vitrine

   O Will olhou a primeira passada e disse: "não mudou muita coisa". Tinha
   razão — eu havia mexido só em tamanho de fonte e cor, sem trazer nada do
   que a página de listagem faz e esta não fazia.

   O QUE A VITRINE FAZ, medido em `pood-vitrine.css`, e que passa a valer aqui:

       .product-item-info:hover { background: papel; box-shadow: 0 0 0 1px linha }
       .product-item-info:hover .product-item-photo { background: bloco-2 }
       .product-item-name a:hover { color: acento }

   Anel de 1px, nunca sombra projetada. Transição de .15s a .18s. Foto sobre
   tom de bloco, não sobre branco.

   A GRADE DO CONTEÚDO NÃO É TOCADA. Nenhuma regra aqui define largura — foi
   exatamente isso que derrubou a tentativa anterior. O que muda é só o que se
   pode mudar sem mexer em `col-md-*`: fundo, borda, respiro vertical e cor.
   --------------------------------------------------------------------------- */

/* 🔴 O MARCADOR DUPLICADO.

   Relatado pelo Will: "ul li está aparecendo ponto e seta ao mesmo tempo".
   Medido: o `li` recebe o ponto de 5px no acento da regra 22, E contém um
   `<i class="porto-icon-angle-right">` do conteúdo, cujo `::before` desenha
   uma seta da fonte `porto-icons`. Dois marcadores no mesmo item.

   Quem sai é o ícone do conteúdo: ele é decoração do site antigo, depende de
   uma fonte de ícones e não acompanha a paleta. O ponto desenhado fica. */
.catalog-product-view .product.attribute.description i[class*="porto-icon"],
.catalog-product-view .product.attribute.description li > i,
.catalog-product-view .product.attribute.description p > i:empty {
  display: none;
}

/* BLOCO COM IMAGEM = CARTÃO, com o mesmo realce do card da vitrine.

   O alvo é a coluna que contém imagem: é a assinatura do bloco de recurso
   ("Cores exclusivas", "Padrão Pood em estruturas"). Coluna sem imagem é
   texto corrido e não deve virar cartão.

   O respiro é só VERTICAL. O lateral já vem dos 15px do Bootstrap, e mexer
   nele desalinharia a grade. */
/* `:has(img)` em DESCENDENTE, não `:has(> img)`. Medido: a imagem quase nunca
   é filha direta da coluna — o caminho real é `col > div > img`, herança de
   mais um nível de div do site antigo. Com filho direto a regra casava zero
   colunas em sete.

   O `:not(:has([class*="col-md-"]))` pega a coluna MAIS INTERNA: sem ele, uma
   coluna que contém outra receberia o anel também, e apareceriam dois anéis
   encaixados no mesmo hover. */
.catalog-product-view .product.attribute.description [class*="col-md-"]:has(img):not(:has([class*="col-md-"])) {
  padding-top: 14px;
  padding-bottom: 16px;
  border-radius: var(--pood-r-cartao);
  transition: background .18s, box-shadow .18s;
}
.catalog-product-view .product.attribute.description [class*="col-md-"]:has(img):not(:has([class*="col-md-"])):hover {
  background: var(--pood-papel);
  box-shadow: 0 0 0 1px var(--pood-linha);
}

/* A IMAGEM sobre tom de bloco, como a foto do card. Muitas destas imagens têm
   fundo branco no arquivo, e sobre branco o canto arredondado some. */
.catalog-product-view .product.attribute.description img {
  background: var(--pood-bloco);
  border-radius: var(--pood-r-cartao);
  transition: background .18s;
}
.catalog-product-view .product.attribute.description [class*="col-md-"]:hover img {
  background: var(--pood-bloco-2);
}

/* RESPIRO ENTRE AS FAIXAS. Sem isto as `row` ficam coladas e a página lê como
   um bloco só. */
.catalog-product-view .product.attribute.description .row { margin-bottom: 30px; }
.catalog-product-view .product.attribute.description .row:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   LINKS PARA OUTROS PRODUTOS

   Hoje são texto solto separado por `<br>`, com uma seta de fonte de ícone —
   nada indica que são clicáveis até o cursor passar, e no celular o alvo é a
   altura de uma linha de texto.

   Passam a ser LINHAS DE LISTA: alvo alto, fio entre elas, chevron desenhado
   à direita e realce no acento da vitrine. O `<br>` que os separava some,
   porque cada um já é bloco.
   --------------------------------------------------------------------------- */
.catalog-product-view .product.attribute.description p > a[href]:not([href^="#"]) {
  display: block;
  position: relative;
  padding: 9px 26px 9px 0;
  border: 0;
  border-bottom: 1px solid var(--pood-linha-2);
  font-size: 14px;
  line-height: 1.35;
  color: var(--pood-tinta);
  text-decoration: none;
  transition: color .15s, padding-left .15s;
}
.catalog-product-view .product.attribute.description p > a[href]:not([href^="#"]):hover {
  color: var(--pood-acento);
  padding-left: 5px;
}

/* O chevron é desenhado, não é glifo de fonte: acompanha `currentColor` e
   portanto acende junto com o texto. */
.catalog-product-view .product.attribute.description p > a[href]:not([href^="#"])::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .45;
  transition: opacity .15s, right .15s;
}
.catalog-product-view .product.attribute.description p > a[href]:not([href^="#"]):hover::after {
  opacity: 1;
  right: 2px;
}

/* O `<br>` entre os links vira linha em branco quando eles são blocos. */
.catalog-product-view .product.attribute.description p > a[href]:not([href^="#"]) + br {
  display: none;
}

/* O parágrafo que só contém links perde o respiro de baixo: os fios das
   linhas já separam. */
.catalog-product-view .product.attribute.description p:has(> a[href]:not([href^="#"])) {
  margin-bottom: 4px;
}

@media (max-width: 991px) {
  .catalog-product-view .product.attribute.description .row { margin-bottom: 22px; }
  .catalog-product-view .product.attribute.description [class*="col-md-"]:has(img):not(:has([class*="col-md-"])) {
    padding-top: 10px;
    padding-bottom: 12px;
  }
  /* No toque, o alvo do link cresce. */
  .catalog-product-view .product.attribute.description p > a[href]:not([href^="#"]) {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* ---------------------------------------------------------------------------
   23. AVALIAÇÕES — a seção expansível no fim da página

   Antes isto era uma aba ao lado de "Detalhes": o painel só existia depois de
   um clique que nada anunciava, e a nota média não aparecia em lugar nenhum
   da seção. Agora é uma faixa própria, com a nota e a contagem visíveis com a
   seção fechada, e o conteúdo abrindo por baixo.

   A FAIXA BRANCA usa a mesma técnica da descrição curta (§8): box-shadow
   espalhado mais clip-path, e não width: 100vw — no Windows o vw inclui a
   barra de rolagem e criaria rolagem horizontal.

   AS ESTRELAS SÃO AS DO PORTO, de propósito. O glifo f844 da fonte
   porto-icons já desenha as estrelas da vitrine e do resumo no topo desta
   mesma página; trocá-lo por SVG ou por caractere aqui deixaria a loja com
   dois desenhos de estrela. O que muda é a cor: o Porto pinta de #ffc600
   (ouro) na maioria dos lugares, e o resumo do topo já pinta de #ff5b5b —
   nenhum dos dois é da paleta. Passam ao acento, que é a cor que o resto da
   Direção A usa para marcar.
   --------------------------------------------------------------------------- */

.catalog-product-view .pood-av {
  margin: var(--pood-gap-secao) 0 0;
  padding: 44px 0;
  background: var(--pood-papel);
  box-shadow: 0 0 0 100vmax var(--pood-papel);
  clip-path: inset(0 -100vmax);
}

/* ---- cabeçalho: o que se vê com a seção fechada ---- */

.catalog-product-view .pood-av__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.catalog-product-view .pood-av__rotulo {
  display: block;
  margin: 0 0 14px;
  font-size: var(--pood-t-rotulo);
  line-height: 1;
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}

.catalog-product-view .pood-av__nota {
  display: flex;
  align-items: center;
  gap: 11px;
}

.catalog-product-view .pood-av__media {
  font-size: 26px;
  line-height: 1;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
  font-variant-numeric: tabular-nums;
}

.catalog-product-view .pood-av__qtd {
  font-size: 13px;
  line-height: 1;
  color: var(--pood-tinta-2);
}

.catalog-product-view .pood-av__zero {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}

/* ---- o gatilho ----

   É um button e não um link: não leva a lugar nenhum, abre algo aqui. Os dois
   rótulos convivem no HTML e a classe que o collapsible aplica decide qual
   aparece — assim o texto não depende de JS nosso para trocar. */
.catalog-product-view .pood-av__abre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--pood-linha);
  border-radius: 999px;
  background: var(--pood-papel);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1;
  color: var(--pood-tinta);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.catalog-product-view .pood-av__abre:hover {
  border-color: var(--pood-tinta);
  background: var(--pood-fundo);
}

/* Chevron desenhado, herdando currentColor — o mesmo recurso dos links da
   descrição (§22.1), para não depender de fonte de ícone num botão. */
.catalog-product-view .pood-av__seta {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .18s, opacity .15s;
}
.catalog-product-view .pood-av__abre:hover .pood-av__seta { opacity: 1; }

.catalog-product-view .pood-av__abre-fecha { display: none; }
.catalog-product-view .pood-av--aberta .pood-av__abre-ver { display: none; }
.catalog-product-view .pood-av--aberta .pood-av__abre-fecha { display: inline; }
.catalog-product-view .pood-av--aberta .pood-av__seta {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* ---- o corpo ----

   Nasce escondido pelo CSS, e não só pelo widget: o collapsible só escreve
   display:none inline depois de inicializar, e até lá o conteúdo inteiro
   apareceria aberto e depois sumiria. É a mesma piscada que a faixa de abas
   produzia. O widget usa .show(), que escreve display:block inline e portanto
   vence esta regra sem precisar de !important. */
.catalog-product-view .pood-av__corpo {
  display: none;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--pood-linha);
}

/* ---- estrelas: recolorir e redimensionar a moldura do Porto ----

   Os seletores do Porto são .rating-summary .rating-result:before (0,2,1) e
   ... > span:before. Repetir a classe da seção sobe para (0,3,1) e vence sem
   !important. */
.catalog-product-view .pood-av .rating-summary .rating-result:before,
.catalog-product-view .pood-av .rating-summary .rating-result > span:before {
  font-size: 15px;
  line-height: 15px;
  height: 15px;
  letter-spacing: 3px;
}
.catalog-product-view .pood-av .rating-summary .rating-result:before {
  color: var(--pood-linha);
}
.catalog-product-view .pood-av .rating-summary .rating-result > span:before {
  color: var(--pood-acento);
}
.catalog-product-view .pood-av .rating-summary .rating-result {
  width: 87px;
  display: inline-block;
}
.catalog-product-view .pood-av__estrelas { line-height: 0; }

/* ---------------------------------------------------------------------------
   23.1 A lista de avaliações
   --------------------------------------------------------------------------- */

.catalog-product-view .pood-av .review-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog-product-view .pood-av .review-item {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--pood-linha-2);
}
.catalog-product-view .pood-av .review-item:first-child { padding-top: 0; }
.catalog-product-view .pood-av .review-item:last-child { border-bottom: 0; }

/* Nota e título na mesma linha: é a ordem em que se lê uma avaliação. */
.catalog-product-view .pood-av .pood-lista__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* O Porto monta as notas da lista como TABELA (display:table-row no
   .rating-summary, table-cell no resultado) — herança de quando havia três
   critérios, um por linha. Com um só, a tabela vira uma linha de uma célula e
   só atrapalha o alinhamento com o título ao lado. */
.catalog-product-view .pood-av .review-ratings,
.catalog-product-view .pood-av .review-ratings .rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.catalog-product-view .pood-av .review-ratings .rating-result {
  display: inline-block;
  vertical-align: middle;
}

/* Com um critério, o nome dele repetido em toda avaliação é ruído — dez
   "Nota" numa página de dez. Some. Havendo mais de um, volta sozinho. */
.catalog-product-view .pood-av .pood-lista--um .rating-label { display: none; }
.catalog-product-view .pood-av .review-ratings .rating-label {
  font-size: 11.5px;
  color: var(--pood-tinta-3);
}

.catalog-product-view .pood-av .review-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
}
/* A MEDIDA DO TEXTO, e não a largura da linha da avaliação.

   Com a seção atravessando os 1216px, o texto saía em linhas de ~150
   caracteres — o mesmo defeito que a descrição longa tinha antes do §46.10.
   Os 62% são a medida que a descrição curta, a imagem de especificações e o
   formulário já usam, então as quatro colunas de texto da página terminam na
   mesma linha vertical. O fio entre avaliações continua cheio: ele separa
   itens, não parágrafos. */
.catalog-product-view .pood-av .review-content {
  max-width: 62%;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pood-tinta-2);
}
.catalog-product-view .pood-av .pood-lista__pe {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pood-tinta-3);
}
.catalog-product-view .pood-av .pood-lista__pe strong {
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta-2);
}
/* O separador é desenhado pelo CSS e não escrito no template: assim o nome
   não precisa saber se existe data depois dele. */
.catalog-product-view .pood-av .pood-lista__pe time::before {
  content: "\00B7";
  margin: 0 7px;
  color: var(--pood-tinta-3);
}

/* A barra de paginação: fica a navegação, sai o seletor de "itens por
   página". Numa lista que já abre paginada, ele é um controle a mais para uma
   decisão que quase ninguém toma. */
.catalog-product-view .pood-av .review-toolbar { margin-top: 18px; }
.catalog-product-view .pood-av .review-toolbar .limiter { display: none; }
.catalog-product-view .pood-av .review-toolbar .pages-label { display: none; }

/* 🔴 DOIS FIOS DO PORTO que não pertencem a esta tela, e que só o screenshot
   ampliado mostrou — no DOM tudo parecia certo:

     .toolbar        border-top: 1px #e7e7e7   (fio cheio acima da paginação)
     .pages          border-bottom: 1px #777   (risco curto de 114px SOLTO
                                                embaixo dos números, que lia
                                                como um erro de renderização)

   Os dois são de uma paginação de catálogo, onde a barra separa a grade do
   rodapé. Aqui a seção já tem os seus próprios fios, e o de #777 nem é da
   paleta. */
.catalog-product-view .pood-av .review-toolbar,
.catalog-product-view .pood-av .review-toolbar .pages {
  border: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   23.2 O formulário
   --------------------------------------------------------------------------- */

/* O Porto esconde o título deste bloco: .review-add .block-title, (0,2,0).
   Dentro das abas isso fazia sentido — o painel já se chamava Avaliações e o
   formulário vinha sozinho. Aqui ele divide a seção com a lista e precisa se
   anunciar. (0,3,0) devolve. */
.catalog-product-view .pood-av .pood-fm > .block-title {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.catalog-product-view .pood-av .pood-fm > .block-title strong {
  font-size: var(--pood-t-rotulo);
  line-height: 1;
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}

.catalog-product-view .pood-av .pood-fm {
  max-width: 62%;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--pood-linha);
}

/* A legenda repete o nome do produto na página dele. Não sai do HTML — é o
   que dá contexto ao fieldset para quem usa leitor de tela —, mas desce para
   apoio em vez de abrir o formulário como cabeçalho. */
/* `text-transform: none` porque o Porto põe CAIXA ALTA em toda `legend`, e
   aqui dentro vai o nome do produto: "ELÁSTICO - POOD POWER BANDS - UNIDADE"
   gritava numa linha que é só contexto. */
.catalog-product-view .pood-av .pood-fm__legenda {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 12.5px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pood-tinta-3);
}
.catalog-product-view .pood-av .pood-fm__legenda span { margin: 0; }
.catalog-product-view .pood-av .pood-fm__legenda strong {
  display: inline;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta-2);
}

.catalog-product-view .pood-av .pood-fm .fieldset { margin: 0; padding: 0; border: 0; }
.catalog-product-view .pood-av .pood-fm .field { margin: 0 0 16px; }

.catalog-product-view .pood-av .pood-fm .label > span,
.catalog-product-view .pood-av .pood-fm .field > .label {
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta-2);
}

.catalog-product-view .pood-av .pood-fm input.input-text,
.catalog-product-view .pood-av .pood-fm textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pood-tinta);
  box-shadow: none;
  transition: border-color .15s;
}
.catalog-product-view .pood-av .pood-fm input.input-text { height: 40px; }
.catalog-product-view .pood-av .pood-fm textarea { min-height: 96px; resize: vertical; }
.catalog-product-view .pood-av .pood-fm input.input-text:focus,
.catalog-product-view .pood-av .pood-fm textarea:focus {
  border-color: var(--pood-tinta);
  outline: 0;
}

/* Nome e título dividem a linha: são dois campos curtos, e empilhá-los
   alongava o formulário sem ganho nenhum. */
.catalog-product-view .pood-av .pood-fm__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

/* 🔴 O INVÓLUCRO DE DUAS COLUNAS APAGOU O ASTERISCO DE OBRIGATÓRIO.

   A regra que o desenha é `.fieldset > .field.required > .label::after`, com
   combinador de filho DIRETO. Ao envolver nome e título num div para pô-los
   lado a lado, os dois deixaram de ser filhos diretos do fieldset e ficaram
   sem marca — enquanto "Sua nota" e "Sua avaliação", que continuaram na raiz,
   seguiram marcados. Dois campos obrigatórios parecendo opcionais na mesma
   tela, e nada no HTML denunciava: o `required` continua lá.

   Só o screenshot mostrou. Os valores são os mesmos da regra original, para
   os quatro campos ficarem idênticos — o vermelho é o de erro do Magento,
   usado em todos os formulários da loja, e mudá-lo só aqui destoaria. */
.catalog-product-view .pood-av .pood-fm__linha > .field.required > .label::after {
  content: "*";
  margin-left: 3px;
  font-size: 12px;
  color: #e02b27;
}

/* ---- as estrelas do formulário ----

   O mecanismo é o do Porto e do Luma: rótulos sobrepostos em posição
   absoluta, com z-index decrescente, cada um desenhando de 1 a 5 glifos. É
   acessível (os rádios continuam lá) e funciona; o que muda é tamanho e cor.
   O Porto os deixa em 32px com 10px de espaçamento, grandes demais para um
   formulário que precisa caber. */
.catalog-product-view .pood-av .review-field-ratings > .label {
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta-2);
}
.catalog-product-view .pood-av .review-control-vote label:before,
.catalog-product-view .pood-av .review-control-vote:before {
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  letter-spacing: 6px;
}
.catalog-product-view .pood-av .review-control-vote:before { color: var(--pood-linha); }
.catalog-product-view .pood-av .review-control-vote label:before { color: var(--pood-acento); }
.catalog-product-view .pood-av .review-field-rating .control {
  margin-top: 0;
  margin-bottom: 30px;
  height: 24px;
}

/* Com UM critério, o nome dele fica logo abaixo da pergunta "Sua nota" e diz
   a mesma coisa duas vezes. A classe vem do template, que conta os critérios
   — havendo mais de um, o rótulo volta e passa a ser necessário. */
.catalog-product-view .pood-av .pood-fm--um .review-field-rating > .label { display: none; }

.catalog-product-view .pood-av .pood-fm .actions-toolbar { margin: 4px 0 0; padding: 0; }
.catalog-product-view .pood-av .pood-fm .action.submit.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--pood-tinta);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pood-papel);
  transition: background .15s;
}
.catalog-product-view .pood-av .pood-fm .action.submit.primary:hover {
  background: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   23.3 Telas estreitas
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .catalog-product-view .pood-av { padding: 32px 0; }

  /* O gatilho passa a ocupar a linha inteira: num toque, alvo estreito ao
     lado da nota é alvo errado. */
  .catalog-product-view .pood-av__topo { gap: 16px; }
  .catalog-product-view .pood-av__abre {
    width: 100%;
    justify-content: center;
    height: 44px;
  }

  /* A coluna de 62% existe para alinhar com a imagem de medidas do bloco de
     especificações, que no celular já ocupa a largura inteira. */
  .catalog-product-view .pood-av .pood-fm { max-width: none; }
  .catalog-product-view .pood-av .pood-fm__linha { grid-template-columns: 1fr; }

  /* 24px de estrela com 6px de espaçamento dá um alvo de toque de ~30px, que
     é pouco para escolher a nota certa de primeira. */
  .catalog-product-view .pood-av .review-control-vote label:before,
  .catalog-product-view .pood-av .review-control-vote:before {
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    letter-spacing: 9px;
  }
  .catalog-product-view .pood-av .review-field-rating .control { height: 28px; }
}

/* ---------------------------------------------------------------------------
   24. COMPRE JUNTO — o bloco do Mageplaza_FrequentlyBought

   Instalado em 22/09/2026. Os vínculos NÃO são curados à mão: saem do histórico
   real de compra conjunta dos 12.610 pedidos, por `scripts/fbt/gera-vinculos.php`.

   O módulo entrega marcação e comportamento; o desenho é todo daqui. O que veio
   dele e sai: botão quadrado no acento ANTIGO (#db6060), título em 14px sem
   hierarquia, e a lista espremida em duas linhas.
   --------------------------------------------------------------------------- */

/* 🔴 A COLUNA DA GRADE, pela terceira vez nesta página.

   O bloco é filho DIRETO de `.column.main`, que é grade (§42). Sem declarar a
   coluna, a colocação automática o pôs numa célula de 609px — e as imagens
   precisavam de 490px num espaço de 309, o que as quebrava em duas linhas.

   Aconteceu igual com as avaliações hoje mais cedo. Ao acrescentar QUALQUER
   bloco a `.column.main` desta PDP, declare a coluna: o padrão é meia largura, e
   o modo de falha é cosmético — que é o que faz passar despercebido. */
@media (min-width: 992px) {
  .catalog-product-view .column.main > .mageplaza-frequently-bought-together-block {
    grid-column: 1 / -1;
  }
}

.catalog-product-view .mageplaza-frequently-bought-together-block {
  /* Estava colado na faixa branca acima: o módulo não traz margem nenhuma. */
  margin: var(--pood-gap-secao) 0 0;
  padding: 0;
  font-family: var(--pood-fonte);
}

/* O título vem da CONFIGURAÇÃO (`frequentlybought/general/block_name`, hoje
   "Compre junto"), não daqui — por isso só o desenho é nosso. */
.catalog-product-view .mageplaza-fbt-title {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-size: var(--pood-t-rotulo);
  line-height: 1;
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta-2);
}

/* ---- a fileira de produtos ---- */

.catalog-product-view .mageplaza-fbt-image-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-product-view .mageplaza-fbt-image-box > .item.product {
  width: auto;
  margin: 0;
  padding: 0;
}

.catalog-product-view .mageplaza-fbt-image-box .product-item-photo,
.catalog-product-view .mageplaza-fbt-image-box img {
  display: block;
  width: 104px;
  height: auto;
  border-radius: var(--pood-r-caixa);
  background: var(--pood-bloco);
}

/* O "+" entre os produtos: 18px, na tinta mais clara. No módulo ele herda o
   tamanho do corpo e pesa mais que as fotos ao lado. */
.catalog-product-view .mageplaza-fbt-image-box .product-item-plus {
  width: 22px;
  min-width: 22px;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: var(--pood-tinta-3);
}

/* ---- o resumo: total e ações ---- */

.catalog-product-view .mageplaza-fbt-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.catalog-product-view .mageplaza-fbt-total-price,
.catalog-product-view .mageplaza-frequently-bought-together-block .price-box {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--pood-tinta-2);
}
.catalog-product-view .mageplaza-fbt-total-price .price,
.catalog-product-view .mageplaza-fbt-total-price strong,
.catalog-product-view .mageplaza-fbt-total-price span.price {
  font-size: 19px;
  font-weight: var(--pood-p-forte);
  color: var(--pood-tinta);
}

/* O botão vinha quadrado, em CAIXA ALTA e no acento ANTIGO da loja (#db6060),
   que não pertence mais à paleta. Passa a ser o mesmo botão escuro em pílula do
   resto da Direção A. */
.catalog-product-view .mageplaza-frequently-bought-together-block button.action,
.catalog-product-view .mageplaza-frequently-bought-together-block .action.primary,
.catalog-product-view .mageplaza-frequently-bought-together-block .mageplaza-fbt-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 210px;
  height: 42px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--pood-tinta);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pood-papel);
  transition: background .15s;
}
.catalog-product-view .mageplaza-frequently-bought-together-block button.action:hover,
.catalog-product-view .mageplaza-frequently-bought-together-block .action.primary:hover {
  background: var(--pood-tinta-2);
}

/* "Salvar todos" é ação secundária: vazada, nunca sólida — duas ações sólidas
   lado a lado competem e nenhuma vence. */
.catalog-product-view .mageplaza-frequently-bought-together-block .mageplaza-fbt-add-to-wishlist,
.catalog-product-view .mageplaza-frequently-bought-together-block a.action.towishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  height: 40px;
  margin-top: 10px;
  padding: 0 22px;
  border: 1px solid var(--pood-linha);
  border-radius: 999px;
  background: var(--pood-papel);
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1;
  text-transform: none;
  color: var(--pood-tinta);
  transition: border-color .15s, background .15s;
}
.catalog-product-view .mageplaza-frequently-bought-together-block .mageplaza-fbt-add-to-wishlist:hover,
.catalog-product-view .mageplaza-frequently-bought-together-block a.action.towishlist:hover {
  border-color: var(--pood-tinta);
  background: var(--pood-fundo);
  text-decoration: none;
}

/* ---- a lista com as caixas de seleção ---- */

.catalog-product-view .mageplaza-fbt-checkbox,
.catalog-product-view .mageplaza-frequently-bought-together-block .mageplaza-fbt-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.catalog-product-view .mageplaza-frequently-bought-together-block label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}
.catalog-product-view .mageplaza-frequently-bought-together-block label .price,
.catalog-product-view .mageplaza-frequently-bought-together-block label .price-wrapper {
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
}

@media (max-width: 991px) {
  .catalog-product-view .mageplaza-fbt-image-box .product-item-photo,
  .catalog-product-view .mageplaza-fbt-image-box img { width: 84px; }
  .catalog-product-view .mageplaza-fbt-content { gap: 22px; }
  .catalog-product-view .mageplaza-frequently-bought-together-block button.action,
  .catalog-product-view .mageplaza-frequently-bought-together-block .action.primary,
  .catalog-product-view .mageplaza-frequently-bought-together-block .mageplaza-fbt-add-to-wishlist {
    width: 100%;
  }
}