.catalog-section { /* Separa a apresentação de produtos das demais informações da loja. */
    padding: 12px 0 28px; /* Dá respiro vertical sem alterar as margens do conteúdo existente. */
} /* Encerra a seção de catálogo. */
.reference-price { /* Apresenta a referência anterior separada do preço efetivo da loja. */
    display: block; margin-bottom: 4px; color: #66758c; font-size: 14px; font-weight: 400; /* Mantém o risco nativo do del com hierarquia menor que a revenda. */
} /* Encerra a apresentação da referência promocional. */
.product-detail-copy [hidden] { /* Respeita o estado de preço inicial e referência controlado pela variante. */
    display: none; /* Não deixa regras visuais exibirem referências de outra combinação ou prefixos já dispensados. */
} /* Encerra os estados ocultos da apresentação de preços. */
.variant-price-prefix { /* Diferencia o menor preço inicial do valor exato de uma combinação. */
    color: #66758c; font-size: 14px; font-weight: 500; /* Mantém a orientação secundária ao preço principal. */
} /* Encerra a indicação de preço inicial na ficha. */
.variant-card-from { /* Explica que produtos configuráveis podem ter preços diferentes por combinação. */
    display: block; margin-bottom: 3px; color: #66758c; font-size: 12px; font-weight: 500; /* Evita apresentar o preço mínimo como valor de todas as variantes. */
} /* Encerra a indicação de preço inicial nos cartões. */
.catalog-heading { /* Apresenta título e resumo da listagem de produtos. */
    display: flex; /* Permite alinhar título e informações auxiliares em telas maiores. */
    flex-wrap: wrap; /* Preserva a leitura dos textos em celulares estreitos. */
    align-items: center; /* Centraliza verticalmente os grupos do cabeçalho. */
    justify-content: space-between; /* Separa o título de eventuais dados da listagem. */
    gap: 12px; /* Evita colisão entre informações do catálogo. */
    margin-bottom: 22px; /* Separa o título dos cartões dos produtos. */
} /* Encerra o cabeçalho do catálogo. */
.catalog-heading h1, .catalog-heading h2 { /* Estabelece hierarquia para o título da coleção. */
    margin: 0; /* Mantém o alinhamento sem margens nativas. */
    font-size: clamp(23px, 4vw, 30px); /* Adapta a escala do título à largura da tela. */
    line-height: 1.25; /* Mantém títulos de duas linhas compactos e legíveis. */
    font-weight: 700; /* Diferencia o nome da seção dos dados de apoio. */
} /* Encerra os títulos do catálogo. */
.catalog-heading p, .catalog-heading > span { /* Mantém os detalhes da consulta discretos tanto em parágrafos quanto na contagem real da vitrine. */
    margin: 0; /* Evita margens que desalinhem o cabeçalho flexível. */
    color: #66758c; /* Mantém contraste dos dados auxiliares. */
    font-size: 14px; /* Diferencia o resumo do título principal. */
} /* Encerra o resumo da listagem. */
.catalog-grid { /* Organiza produtos em cartões adaptáveis à largura disponível. */
    display: grid; /* Mantém linhas e colunas alinhadas no catálogo. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Exibe duas colunas no celular sem impor largura mínima ao conteúdo. */
    gap: 12px; /* Separa os produtos sem consumir demasiada largura útil. */
} /* Encerra a grade móvel de produtos. */
.product-card { /* Delimita cada produto e conserva a imagem como primeiro ponto de leitura. */
    min-width: 0; /* Permite encolher o cartão sem criar rolagem horizontal da página. */
    overflow: hidden; /* Mantém a imagem dentro dos cantos arredondados. */
    border: 1px solid #dfe6f0; /* Delimita o cartão sobre o fundo claro da loja. */
    border-radius: 12px; /* Harmoniza os produtos com busca e seções existentes. */
    background: #fff; /* Oferece uma superfície neutra para as fotos reais. */
    color: #26344b; /* Dá contraste ao texto de apresentação. */
} /* Encerra o cartão de produto. */
.product-card a { /* Mantém os acessos ao produto integrados ao cartão. */
    color: inherit; /* Preserva a cor do texto da loja no link. */
    text-decoration: none; /* Evita sublinhados contínuos nos nomes dos produtos. */
} /* Encerra os links internos dos cartões. */
.product-card-image { /* Reserva uma área uniforme para produtos com diferentes proporções de foto. */
    display: grid; /* Permite centralizar imagem ou indicação de ausência de foto. */
    place-items: center; /* Centraliza o conteúdo da área de imagem. */
    aspect-ratio: 1; /* Evita saltos de layout e mantém os cartões alinhados. */
    overflow: hidden; /* Impede que imagens ultrapassem o cartão. */
    background: #fafbfd; /* Mantém a foto sobre uma superfície neutra. */
    color: #758198; /* Diferencia indicações textuais quando ainda não há foto. */
    font-size: 13px; /* Mantém o texto auxiliar proporcional ao cartão. */
} /* Encerra a janela de imagem do cartão. */
.product-card-image img { /* Apresenta a fotografia inteira sem cortar detalhes do produto. */
    display: block; /* Remove o espaço abaixo de imagens inline. */
    width: 100%; /* Ocupa a largura reservada à foto. */
    height: 100%; /* Mantém o encaixe na proporção quadrada do cartão. */
    padding: 12px; /* Dá margem interna a fotos com fundo branco. */
    object-fit: contain; /* Preserva o produto inteiro independentemente da orientação da foto. */
} /* Encerra a fotografia do cartão. */
.product-card-content { /* Agrupa nome, preço e acesso aos detalhes. */
    padding: 14px; /* Mantém os textos afastados das bordas do cartão. */
} /* Encerra o conteúdo textual do cartão. */
.product-card-content h2, .product-card-content h3 { /* Mantém o nome do produto legível mesmo quando for longo. */
    margin: 0 0 10px; /* Separa o nome do valor correspondente. */
    font-size: 15px; /* Permite leitura confortável em duas colunas no celular. */
    line-height: 1.45; /* Dá respiro aos nomes que ocupam mais de uma linha. */
    font-weight: 600; /* Diferencia o nome dos dados secundários. */
    overflow-wrap: anywhere; /* Impede que códigos ou palavras longas alarguem o cartão. */
} /* Encerra os nomes dos produtos. */
.product-price { /* Destaca o preço real cadastrado no painel. */
    display: block; /* Dá uma linha própria ao valor do produto. */
    margin: 8px 0 14px; /* Separa o preço do nome e das ações abaixo. */
    color: #12396c; /* Reforça a identidade azul mantendo contraste sobre branco. */
    font-size: 21px; /* Facilita comparar os valores dos produtos. */
    font-weight: 700; /* Destaca a informação comercial principal. */
} /* Encerra o destaque de preço. */
.catalog-button { /* Mantém as ações de produto consistentes com a identidade da loja. */
    display: inline-flex; /* Permite centralizar o rótulo em links e botões. */
    align-items: center; /* Centraliza verticalmente o texto da ação. */
    justify-content: center; /* Mantém alinhamento em botões largos. */
    min-height: 44px; /* Oferece alvo confortável para toque no celular. */
    padding: 10px 16px; /* Dá margem ao texto do controle. */
    border: 1px solid transparent; /* Preserva as dimensões ao receber estados de foco. */
    border-radius: 8px; /* Harmoniza com os demais controles do site. */
    background: #0041d9; /* Identifica a ação principal pela cor da Infinityshop. */
    color: #fff; /* Mantém contraste do rótulo sobre o azul. */
    font: inherit; /* Usa a tipografia já aplicada à loja. */
    font-size: 14px; /* Mantém a ação legível sem dominar o nome do produto. */
    font-weight: 600; /* Dá destaque suficiente para identificar a ação. */
    text-decoration: none; /* Mantém aparência de controle em links. */
    text-align: center; /* Centraliza rótulos que precisem quebrar linha. */
    cursor: pointer; /* Indica interação com mouse. */
} /* Encerra as ações do catálogo. */
.product-card .catalog-button { /* Mantém o botão do cartão alinhado ao conteúdo disponível. */
    width: 100%; /* Oferece um acesso amplo aos detalhes do produto. */
    color: #fff; /* Preserva o texto branco mesmo dentro de regras gerais dos links do cartão. */
} /* Encerra o acesso de cada cartão. */
.catalog-button:hover { /* Indica a ação apontada em computadores. */
    background: #0035b3; /* Escurece o azul mantendo o rótulo legível. */
} /* Encerra o estado apontado da ação. */
.catalog-button:disabled { /* Diferencia ações que aguardam uma integração ainda não disponível. */
    background: #e7edf6; /* Evita aparência de compra liberada quando a função está indisponível. */
    color: #566780; /* Mantém o rótulo legível no estado desabilitado. */
    cursor: not-allowed; /* Informa que o controle não pode ser acionado agora. */
} /* Encerra o estado indisponível. */
.product-detail { /* Apresenta foto e informações de um produto em uma estrutura adaptável. */
    display: grid; /* Permite separar apresentação visual e dados comerciais. */
    grid-template-columns: minmax(0, 1fr); /* Empilha os grupos no celular sem alargar a página. */
    gap: 24px; /* Separa a fotografia da explicação do produto. */
    margin: 22px 0 32px; /* Dá respiro em relação ao link de retorno e conteúdo seguinte. */
} /* Encerra a estrutura de detalhes. */
.product-detail-image { /* Reserva uma superfície clara para a imagem principal do produto. */
    display: grid; /* Centraliza a imagem e eventuais mensagens sem foto. */
    place-items: center; /* Mantém o conteúdo alinhado em ambos os eixos. */
    min-width: 0; /* Evita que a foto imponha largura à grade. */
    aspect-ratio: 1; /* Mantém a área previsível antes do carregamento da imagem. */
    overflow: hidden; /* Preserva os limites arredondados da superfície. */
    border: 1px solid #dfe6f0; /* Delimita fotos claras sobre o fundo da página. */
    border-radius: 14px; /* Harmoniza a imagem com os cartões da coleção. */
    background: #fff; /* Mantém uma apresentação neutra do produto. */
    color: #758198; /* Diferencia eventual informação de imagem ausente. */
} /* Encerra a superfície da imagem principal. */
.product-detail-image img { /* Exibe todos os detalhes da fotografia cadastrada. */
    width: 100%; /* Adapta a foto à coluna disponível. */
    height: 100%; /* Usa a área reservada sem alterar sua proporção. */
    padding: 24px; /* Afasta o produto das bordas da superfície. */
    object-fit: contain; /* Evita cortar a foto ao alternar entre celular e desktop. */
} /* Encerra a foto principal. */
.product-detail-copy { /* Mantém o conteúdo comercial dentro de sua coluna. */
    min-width: 0; /* Permite quebrar textos sem gerar rolagem horizontal da página. */
    overflow-wrap: anywhere; /* Suporta nomes e códigos longos de produtos. */
} /* Encerra a coluna de informações. */
.product-detail-copy h1 { /* Identifica o produto com destaque no detalhe. */
    margin: 0 0 14px; /* Separa o nome dos valores e informações seguintes. */
    font-size: clamp(25px, 3vw, 36px); /* Ajusta o título à tela sem excesso de tamanho no celular. */
    font-weight: 700; /* Estabelece o nome como informação principal da página. */
    line-height: 1.2; /* Mantém nomes longos legíveis sem altura exagerada. */
} /* Encerra o título do produto. */
.product-detail-copy .product-price { /* Dá maior destaque ao preço na página individual. */
    font-size: 30px; /* Diferencia o valor do detalhe do valor compacto dos cartões. */
} /* Encerra o preço da página individual. */
.catalog-description { /* Mantém o texto cadastrado legível sem exigir HTML na descrição. */
    color: #526078; /* Diferencia o texto descritivo do título do produto. */
    white-space: pre-line; /* Preserva as quebras de linha digitadas no painel administrativo. */
    overflow-wrap: anywhere; /* Evita que links ou códigos extensos alarguem o detalhe. */
    line-height: 1.7; /* Dá conforto à leitura de descrições maiores. */
} /* Encerra a descrição pública. */
.shipping-pending { /* Explica a etapa de frete sem apresentar valores simulados. */
    margin: 22px 0; /* Separa a orientação dos dados principais do produto. */
    padding: 18px; /* Dá respiro ao texto da informação. */
    border: 1px solid #d7e4ff; /* Delimita a orientação sobre entrega. */
    border-radius: 10px; /* Mantém a linguagem visual dos demais cartões. */
    background: #eef4ff; /* Diferencia a informação de envio do conteúdo comercial. */
    color: #365b8a; /* Preserva contraste sem comunicar erro inexistente. */
    font-size: 14px; /* Mantém a explicação proporcional ao detalhe. */
} /* Encerra a informação de frete pendente. */
.shipping-pending p { /* Evita espaços extras quando a mensagem é curta. */
    margin: 0; /* Mantém a orientação compacta dentro da caixa. */
} /* Encerra o texto sobre frete. */
.catalog-empty { /* Explica a ausência de produtos ou resultados de pesquisa. */
    padding: 48px 24px; /* Cria uma área de orientação com respiro. */
    border: 1px dashed #cfdbea; /* Diferencia o estado vazio dos cartões reais. */
    border-radius: 13px; /* Mantém coerência com a coleção. */
    background: #fff; /* Dá contraste à explicação no fundo do site. */
    color: #61718a; /* Mantém a orientação legível sem simular produto. */
    text-align: center; /* Centraliza a informação quando ainda não há itens para listar. */
} /* Encerra o estado vazio público. */
.catalog-empty h2 { /* Identifica a situação da lista de forma objetiva. */
    margin: 0 0 10px; /* Separa o título da explicação correspondente. */
    color: #26344b; /* Dá hierarquia em relação ao texto auxiliar. */
    font-size: 22px; /* Mantém o título proporcional à área vazia. */
} /* Encerra o título do estado vazio. */
.catalog-back { /* Oferece um retorno claro do produto à coleção. */
    display: inline-flex; /* Permite manter área de toque maior que apenas o texto. */
    align-items: center; /* Centraliza o nome do destino na altura do link. */
    min-height: 44px; /* Mantém conforto de navegação no celular. */
    color: #0041d9; /* Identifica o retorno na identidade da loja. */
    font-size: 14px; /* Mantém o retorno subordinado ao nome do produto. */
    text-underline-offset: 3px; /* Melhora a leitura do link de navegação. */
} /* Encerra o retorno à coleção. */
.catalog-pagination { /* Permite percorrer produtos sem carregar listas ilimitadas. */
    display: flex; /* Mantém os acessos de navegação agrupados. */
    flex-wrap: wrap; /* Permite adaptar os destinos às telas pequenas. */
    align-items: center; /* Alinha a indicação de página aos botões. */
    justify-content: center; /* Centraliza os controles abaixo da coleção. */
    gap: 12px; /* Separa os alvos clicáveis para facilitar o toque. */
    margin-top: 26px; /* Afasta a paginação da última linha de produtos. */
} /* Encerra a paginação da coleção. */
.catalog-pagination a { /* Mantém os destinos de paginação reais confortáveis para toque. */
    display: inline-flex; /* Permite ampliar a área de interação além do texto. */
    align-items: center; /* Centraliza o rótulo dentro do alvo de navegação. */
    min-height: 44px; /* Evita links pequenos demais para o dedo em celulares. */
    padding: 8px 12px; /* Dá margem ao texto dos destinos anterior e próxima. */
    color: #0041d9; /* Associa a paginação à identidade visual da loja. */
    text-underline-offset: 3px; /* Mantém o sublinhado separado das letras para leitura. */
} /* Encerra os controles de paginação reais. */
@media (max-width: 359px) { /* Evita comprimir fotos e preços em aparelhos muito estreitos. */
    .catalog-grid { /* Mantém a legibilidade quando duas colunas ficam insuficientes. */
        grid-template-columns: minmax(0, 1fr); /* Apresenta um produto por linha em telas menores que 360px. */
    } /* Encerra a grade de celulares estreitos. */
} /* Encerra a adaptação para largura mínima. */
@media (min-width: 700px) { /* Aproveita tablets para mostrar uma terceira coluna de produtos. */
    .catalog-grid { /* Amplia a quantidade de itens sem encolher as fotografias. */
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Distribui os cartões em três colunas flexíveis. */
        gap: 18px; /* Aumenta o respiro entre produtos quando há espaço disponível. */
    } /* Encerra a grade intermediária de produtos. */
    .product-detail { /* Coloca foto e informações lado a lado em telas com espaço suficiente. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Mantém as duas colunas equilibradas e capazes de encolher. */
        align-items: start; /* Evita esticar a foto conforme o comprimento da descrição. */
        gap: 32px; /* Separa os grupos de leitura da página individual. */
    } /* Encerra a composição de detalhes para tablet. */
} /* Encerra as adaptações intermediárias do catálogo. */
@media (min-width: 1100px) { /* Aproveita a largura do modelo desktop existente. */
    .catalog-grid { /* Distribui mais produtos mantendo alinhamento com o cabeçalho. */
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Usa quatro colunas conforme a referência visual desktop. */
        gap: 20px; /* Mantém respiro uniforme entre os cartões maiores. */
    } /* Encerra a grade de produtos desktop. */
    .product-card-content { /* Dá margem proporcional aos cartões em monitores. */
        padding: 18px; /* Afasta os dados das bordas com mais largura disponível. */
    } /* Encerra o conteúdo dos cartões desktop. */
} /* Encerra as adaptações do catálogo para desktop. */