/**
 * Página pública do produto. Cores e fonte vêm do tema; aqui só estrutura e espaçamento.
 * Tudo escopado em .affiliate-product — nenhum seletor global.
 */

.affiliate-product {
    margin: 0 0 2rem;
}

.affiliate-product__breadcrumb {
    font-size: .8125rem;
    opacity: .7;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.affiliate-product__breadcrumb a {
    text-decoration: none;
}

/* Imagem à esquerda, identidade e preço à direita quando há largura. */
.affiliate-product__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .affiliate-product__hero {
        /* 68px da tira + 0.75rem de gap + 600px do palco = 680px.
           A segunda coluna tem MÍNIMO de 320px: sem ele, num container de
           1140px a vitrine levaria 780 e sobrariam 336 para título e caixa de
           preço, e o título de produto (passa de 100 caracteres) viraria uma
           torre. Com o mínimo, quem encolhe é a vitrine. */
        grid-template-columns: minmax(0, 680px) minmax(320px, 1fr);
    }
}

.affiliate-product__media img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
    display: block;
}

.affiliate-product__media-vazia {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: rgba(128, 128, 128, .1);
    font-size: 3rem;
    font-weight: 700;
    opacity: .35;
}

.affiliate-product__oferta {
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: .5rem;
}

.affiliate-product__preco {
    margin: 0 0 .25rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.affiliate-product__preco strong {
    font-size: 1.75rem;
    line-height: 1.1;
}

.affiliate-product__preco-rotulo {
    font-size: .8125rem;
    opacity: .7;
}

.affiliate-product__preco-original {
    opacity: .6;
    font-size: .9375rem;
}

.affiliate-product__loja {
    margin: 0 0 .75rem;
    font-size: .875rem;
    opacity: .75;
}

.affiliate-product__cta,
.affiliate-product__oferta-cta {
    display: inline-block;
    padding: .625rem 1.25rem;
    border-radius: .375rem;
    background: #1f7a3d;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.affiliate-product__cta {
    width: 100%;
}

.affiliate-product__cta:hover,
.affiliate-product__oferta-cta:hover {
    filter: brightness(1.08);
    color: #fff;
}

.affiliate-product__disclosure {
    font-size: .8125rem;
    opacity: .8;
    margin: 0 0 1.5rem;
}

.affiliate-product__secao {
    margin: 0 0 2rem;
}

.affiliate-product__secao > h2 {
    font-size: 1.375rem;
    margin: 0 0 1rem;
}

.affiliate-product__descricao {
    line-height: 1.6;
}

/* Comparação de lojas: loja, preço e ação por linha. */
.affiliate-product__ofertas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.affiliate-product__oferta-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, .2);
}

.affiliate-product__oferta-linha:last-child {
    border-bottom: 0;
}

.affiliate-product__oferta-loja {
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Selo textual: o destaque nunca depende só de cor. */
.affiliate-product__selo {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .125rem .375rem;
    border-radius: .25rem;
    background: rgba(31, 122, 61, .12);
    color: #1f7a3d;
    font-weight: 700;
}

.affiliate-product__oferta-preco {
    text-align: right;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.affiliate-product__oferta-preco s {
    opacity: .6;
    font-size: .8125rem;
}

.affiliate-product__sem-preco,
.affiliate-product__disponibilidade {
    font-size: .75rem;
    opacity: .7;
}

.affiliate-product__oferta-cta {
    padding: .375rem .875rem;
    font-size: .875rem;
}

@media (max-width: 575px) {
    .affiliate-product__oferta-linha {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'loja preco'
            'cta cta';
        row-gap: .5rem;
    }

    .affiliate-product__oferta-loja { grid-area: loja; }
    .affiliate-product__oferta-preco { grid-area: preco; }
    .affiliate-product__oferta-cta { grid-area: cta; }
}

/* Conteúdo editorial relacionado. */
.affiliate-product__review {
    padding: 1rem;
    border-left: 3px solid rgba(31, 122, 61, .6);
    background: rgba(128, 128, 128, .05);
    margin-bottom: 1.25rem;
}

.affiliate-product__review-rotulo {
    margin: 0 0 .25rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .7;
}

.affiliate-product__review-link {
    font-weight: 600;
    font-size: 1.0625rem;
}

.affiliate-product__review-nota {
    margin: .5rem 0 0;
    display: flex;
    align-items: baseline;
    gap: .375rem;
}

.affiliate-product__review-nota strong {
    font-size: 1.5rem;
}

.affiliate-product__review-nota span {
    font-size: .8125rem;
    opacity: .7;
}

.affiliate-product__lista-conteudo {
    margin-bottom: 1rem;
}

.affiliate-product__lista-conteudo h3 {
    font-size: .9375rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .7;
    margin: 0 0 .375rem;
}

.affiliate-product__lista-conteudo ul {
    margin: 0;
    padding-left: 1.125rem;
}

.affiliate-product__lista-conteudo li {
    margin-bottom: .25rem;
}


/**
 * Listagem /produtos. Grade responsiva por auto-fill: sem breakpoint manual, o número de
 * colunas segue a largura disponível.
 */
.affiliate-products__titulo {
    margin: 0 0 1.5rem;
}

.affiliate-products__grade {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

/* SANGRIA: o card ganhou moldura e respiro interno, para o conteúdo parar de
   encostar na borda da grade. O padding vive no card e não na grade porque é o
   card que precisa de fundo e borda próprios. */
.affiliate-products__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: inherit;
    height: 100%;
    padding: .875rem;
    border: 1px solid rgba(128, 128, 128, .2);
    border-radius: .625rem;
    background: #fff;
    transition: box-shadow .15s ease, transform .15s ease;
}

.affiliate-products__card:hover {
    box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

/* LINK ESTICADO: o ::after do nome cobre o card inteiro, então clicar em
   qualquer lugar abre o produto — sem precisar embrulhar tudo num <a>, o que
   impediria o CTA de existir (âncora dentro de âncora é inválida).
   O CTA sobe na pilha logo abaixo e captura o próprio clique. */
.affiliate-products__nome::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.affiliate-products__cta {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: block;
    text-align: center;
    padding: .5rem .75rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #1c7a3e;
}

.affiliate-products__cta:hover,
.affiliate-products__cta:focus {
    background: #17652f;
    color: #fff;
}

/* O preço encosta no CTA; o espaço que empurra o botão para o rodapé do card é
   o margin-top:auto dele, e não uma altura fixa que quebraria com nome de duas
   linhas contra nome de uma. */
.affiliate-products__preco {
    margin-bottom: .75rem;
}

/* Logo da marca como fallback: contain e um respiro, senão uma logo larga
   encosta nas bordas do quadrado. */
.affiliate-products__logo {
    padding: 12%;
    opacity: .85;
}

.affiliate-products__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: .375rem;
    background: rgba(128, 128, 128, .06);
    display: block;
}

.affiliate-products__media-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: .375rem;
    background: rgba(128, 128, 128, .1);
    font-size: 2rem;
    font-weight: 700;
    opacity: .35;
}

/* TETO DE DUAS LINHAS no nome.
   Os títulos do catálogo vão de "Amazon" a 170 caracteres, e sem teto um card
   ficava três vezes mais alto que o vizinho. min-height reserva as duas linhas
   mesmo para o nome curto, então todos os cards alinham preço e botão na mesma
   altura. O nome completo continua no DOM e no atributo title. */
.affiliate-products__nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
    margin-top: .5rem;
    color: inherit;
    text-decoration: none;
}

.affiliate-products__nome:hover {
    text-decoration: underline;
}

.affiliate-products__disclosure {
    font-size: .8125rem;
    opacity: .75;
    margin: 0 0 1rem;
}

.affiliate-products__marca {
    font-size: .8125rem;
    opacity: .7;
}

.affiliate-products__preco {
    font-size: .875rem;
    margin-top: .25rem;
}

.affiliate-products__vazio {
    opacity: .7;
}


/**
 * Busca e filtros do catálogo. Um <form> GET simples: no desktop os campos ficam lado a
 * lado numa barra; no celular empilham e não roubam metade da tela, porque são apenas
 * quatro controles e nenhum painel fixo.
 */
/* Botão que abre os filtros no celular. A partir de 576px o Bootstrap (d-sm-none /
   d-sm-flex) tira ele da tela e o formulário fica sempre visível. */
.affiliate-products__filtros-toggle {
    width: 100%;
    padding: .625rem .75rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: .5rem;
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.affiliate-products__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: .5rem;
}

.affiliate-products__campo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.affiliate-products__campo--busca {
    flex: 1 1 16rem;
}

.affiliate-products__campo label {
    font-size: .8125rem;
    opacity: .75;
    margin: 0;
}

.affiliate-products__campo input[type='search'],
.affiliate-products__campo select {
    padding: .5rem .625rem;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    font-size: .9375rem;
    max-width: 100%;
}

.affiliate-products__campo--check {
    justify-content: flex-end;
}

.affiliate-products__campo--check label {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    opacity: 1;
    cursor: pointer;
    padding-bottom: .5rem;
}

.affiliate-products__buscar {
    padding: .5rem 1.25rem;
    border: 0;
    border-radius: .375rem;
    background: #1f7a3d;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.affiliate-products__buscar:hover {
    filter: brightness(1.08);
}

.affiliate-products__ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .875rem;
}

.affiliate-products__ativos-rotulo {
    opacity: .7;
}

.affiliate-products__tag {
    padding: .125rem .5rem;
    border-radius: 1rem;
    background: rgba(128, 128, 128, .15);
}

.affiliate-products__limpar {
    text-decoration: underline;
}

.affiliate-products__total {
    font-size: .875rem;
    opacity: .7;
    margin: 0 0 .75rem;
}

.affiliate-products__vazio {
    padding: 2rem 0;
    text-align: center;
}

.affiliate-products__vazio p {
    opacity: .75;
    margin-bottom: .5rem;
}

@media (max-width: 575px) {
    .affiliate-products__filtros {
        flex-direction: column;
        align-items: stretch;
        padding: .75rem;
    }

    .affiliate-products__campo--check label {
        padding-bottom: 0;
    }

    .affiliate-products__buscar {
        width: 100%;
    }
}


/* Uma paginação de dezenas de páginas não pode empurrar a página inteira na horizontal. */
.affiliate-products__paginacao {
    overflow-x: auto;
}

.affiliate-products__paginacao .pagination {
    flex-wrap: wrap;
    justify-content: center;
}


/* ---------------------------------------------------------------------------
   Galeria de imagens adicionais e vídeo.

   A capa continua sendo a imagem grande do topo; a tira abaixo dela são as
   imagens da metabox do plugin gallery. Cada miniatura é um <a> comum para a
   imagem em tamanho cheio; um script mínimo intercepta o clique e abre o
   visualizador na posição clicada. Sem JavaScript o link continua valendo.

   Nota: o purifier do core não impede o carrossel — ele trata conteúdo passado
   por clean(), não o HTML desta view, então os atributos ARIA sobrevivem.
   --------------------------------------------------------------------------- */

.affiliate-product__galeria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Doze miniaturas de 68px passariam da altura do palco; a coluna rola
       sozinha em vez de esticar a página. */
    /* Acompanha a altura do palco: 600px de imagem cabem ~7 miniaturas de
       68px + gap. O corte na última é o que sinaliza que há mais. */
    max-height: 600px;
    overflow-y: auto;
    order: -1;

    /* BARRA DE ROLAGEM ESCONDIDA, rolagem preservada.
       A tira continua rolável por roda, toque e teclado — some só o desenho da
       barra, que numa coluna de 68px ocupa quase um terço da largura e briga
       com as miniaturas. Quem indica que há mais imagens é o próprio corte: a
       altura deixa a última visível pela metade. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge legado */
    scroll-behavior: smooth;
}

.affiliate-product__galeria::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, Edge atual */
}

/* Quem pediu menos animação no sistema não recebe a rolagem suave. */
@media (prefers-reduced-motion: reduce) {
    .affiliate-product__galeria {
        scroll-behavior: auto;
    }
}

/* No celular a tira deita e rola na horizontal, embaixo do palco. */
@media (max-width: 767px) {
    .affiliate-product__galeria {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        order: 1;
        margin-top: .75rem;
        padding-bottom: .25rem;
    }

    .affiliate-product__galeria li {
        flex: 0 0 64px;
    }
}

/* A miniatura ativa precisa ser distinguível sem depender de cor. */
.affiliate-product__galeria a[aria-current] {
    border-color: currentColor;
    box-shadow: 0 0 0 1px currentColor;
}

.affiliate-product__galeria li {
    margin: 0;
}

.affiliate-product__galeria a {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid rgba(0, 0, 0, .1);
}

.affiliate-product__galeria a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.affiliate-product__galeria img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* contain e não cover: a miniatura é um índice do que a foto mostra, e um
       recorte quadrado de uma TV widescreen corta justamente a tela. O fundo
       branco preenche as sobras. */
    object-fit: contain;
    background: #fff;
    transition: transform .18s ease;
}

.affiliate-product__galeria a:hover img {
    transform: scale(1.04);
}

/* 16:9 pelo container, não pelo iframe: aspect-ratio direto no iframe é
   ignorado por navegador antigo e o vídeo colapsa para altura zero. */
.affiliate-product__video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.affiliate-product__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Cabeçalho da página, enquadramento da imagem e visualizador da galeria
   ========================================================================== */

/* --------------------------------------------------------------------------
   Título e trilha

   As views usam o layout "full" do tema, que não imprime cabeçalho próprio.
   Antes o layout "default" desenhava um h1 grande, azul e centralizado acima
   de tudo, empurrando imagem e preço para fora da primeira dobra.
   -------------------------------------------------------------------------- */
.affiliate-product__titulo,
.affiliate-products__titulo {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    /* 1rem e não .5rem: era o parágrafo da marca que abria o espaço até a caixa
       de oferta, e ele saiu na 1.12.1. */
    margin: 0 0 1rem;
    color: inherit;
    text-align: left;
    overflow-wrap: break-word;
}

.affiliate-products__titulo {
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .affiliate-product__titulo,
    .affiliate-products__titulo {
        font-size: 1.75rem;
    }
}

.affiliate-product__trilha,
.affiliate-products__trilha {
    margin-bottom: 2.25rem;
}

.affiliate-product__trilha .breadcrumb,
.affiliate-products__trilha .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: .875rem;
    /* O tema aplica capitalize, que maiúscula conectores ("Energia E Backup"). */
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Vitrine: tira de miniaturas + palco

   Formato de e-commerce. A tira fica na coluna estreita da esquerda e o palco
   ocupa o resto; abaixo de 768px viram uma coluna só, com a tira embaixo.
   -------------------------------------------------------------------------- */
.affiliate-product__media {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

/* Sem galeria não existe tira: o palco toma a largura inteira.
   Classe vinda do PHP, e não :has(): o seletor é moderno o bastante para ser
   descartado por navegador antigo, e o preço do descarte seria uma coluna
   vazia de 68px ao lado da imagem. Quem sabe se há tira é a view. */
.affiliate-product__media--sozinha {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767px) {
    .affiliate-product__media {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Imagem principal em formato 1:1, sem corte

   Os produtos chegam com proporções diferentes. A view pede a variante "large"
   (1024xauto), que preserva a imagem; o quadrado vem daqui, com contain. Assim
   todo produto ocupa o mesmo espaço e nenhum aparece cortado.
   -------------------------------------------------------------------------- */
.affiliate-product__media img {
    width: 100%;
    height: auto;
    /* 600x600: o quadrado vem do aspect-ratio e o teto daqui. */
    max-width: 600px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(128, 128, 128, .18);
    border-radius: .5rem;
    display: block;
}

/* O palco inteiro é clicável e abre o visualizador. */
.affiliate-product__palco {
    position: relative;
    /* Mesmo teto da imagem: sem ele, numa coluna mais larga que 600px o palco
       esticaria e o selo, ancorado à direita DELE, flutuaria fora da foto. */
    max-width: 600px;
}

.affiliate-product__palco a {
    display: block;
    cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   Selo da marca, sobre o canto superior direito da imagem
   -------------------------------------------------------------------------- */
.affiliate-product__selo {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    /* NÃO intercepta clique: o palco inteiro abre o visualizador, e um selo
       clicável no meio criaria uma zona morta em cima da foto. */
    pointer-events: none;
    max-width: 45%;
    padding: .3rem .8rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
    /* Nome de marca é curto, mas "Gota Metais Sanitários" existe no catálogo:
       corta com reticências em vez de cobrir metade da foto. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .affiliate-product__selo {
        top: .5rem;
        right: .5rem;
        font-size: .75rem;
        padding: .25rem .625rem;
    }
}

/* --------------------------------------------------------------------------
   Visualizador (modal + carrossel do Bootstrap)
   -------------------------------------------------------------------------- */

/* O X de fechar: o tema deixa o btn-close quase invisível sobre fundo claro. */
.affiliate-product__lightbox .btn-close {
    opacity: 1;
    padding: .75rem;
}
.affiliate-product__lightbox .modal-body {
    background: #fff;
    padding: 0;
}

.affiliate-product__lightbox .carousel-item img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    display: block;
}

/* As setas nativas são brancas: sobre fundo claro precisam de contraste. */
.affiliate-product__lightbox .carousel-control-prev-icon,
.affiliate-product__lightbox .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    padding: 1rem;
    background-size: 50% 50%;
}

/* --------------------------------------------------------------------------
   Respiro antes do rodapé
   -------------------------------------------------------------------------- */
.affiliate-product,
.affiliate-products {
    margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   Celular

   Nomes de produto passam de 100 caracteres; a 1.5rem isso ocupava cinco
   linhas. A trilha logo acima repetia o mesmo nome por inteiro. E o quadrado
   da imagem seguia a largura da tela — limitá-la é o mesmo que limitar a
   altura, já que a proporção é 1:1.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .affiliate-product__media img {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575px) {
    .affiliate-product__titulo,
    .affiliate-products__titulo {
        font-size: 1.25rem;
        margin-bottom: .375rem;
    }

    .affiliate-product__trilha,
    .affiliate-products__trilha {
        margin-bottom: 1.25rem;
    }

    /* Trilha em uma linha só: o caminho continua visível e o nome da página
       atual já aparece no h1 logo abaixo. */
    .affiliate-product__trilha .breadcrumb,
    .affiliate-products__trilha .breadcrumb {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .affiliate-product,
    .affiliate-products {
        margin-bottom: 2rem;
    }
}

@media (max-width: 380px) {
    .affiliate-product__media img {
        max-width: 220px;
    }
}