.purchase-panel { /* Agrupa os dados de quantidade, frete e atendimento como uma etapa clara no detalhe do produto. */
    margin-top: 24px; /* Separa a escolha do cliente da descrição comercial. */
    padding: 20px; /* Mantém os campos afastados das bordas do cartão. */
    border: 1px solid #dfe6f0; /* Delimita o formulário sem competir com a foto do produto. */
    border-radius: 14px; /* Preserva os cantos suaves usados no catálogo da Infinityshop. */
    background: #f8faff; /* Diferencia a etapa de atendimento da superfície branca da ficha. */
} /* Encerra a superfície da etapa de compra. */
.fixed-shipping { /* Apresenta a condição comercial de entrega antes dos campos do cliente. */
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 15px 16px; border: 1px solid #cddcf1; border-radius: 10px; background: #eef4ff; color: #26344b; /* Mantém nome e valor legíveis em celular e computador sem botão de cálculo. */
} /* Encerra o destaque do frete fixo. */
.fixed-shipping > div { /* Mantém o nome do frete e a abrangência próximos do mesmo preço. */
    display: flex; flex-direction: column; gap: 5px; min-width: 0; /* Permite que a explicação quebre linhas dentro da tela. */
} /* Encerra o agrupamento da condição de entrega. */
.fixed-shipping > div > strong { /* Identifica a cobrança fixa sem competir com o produto. */
    font-size: 15px; font-weight: 700; /* Mantém uma hierarquia curta para a informação de entrega. */
} /* Encerra o título do frete fixo. */
.fixed-shipping span { /* Explica a logística e a aplicação a qualquer localidade. */
    font-size: 13px; line-height: 1.5; color: #52657e; overflow-wrap: anywhere; /* Evita rolagem horizontal quando a descrição ocupar mais espaço. */
} /* Encerra a explicação da entrega fixa. */
.fixed-shipping-price { /* Destaca o custo único que será somado ao pedido. */
    flex: 0 0 auto; font-size: 19px; font-weight: 700; white-space: nowrap; color: #0041d9; /* Conserva o valor inteiro legível sem dividir reais e centavos. */
} /* Encerra o destaque do preço de entrega. */
.fixed-shipping + .shipping-note { /* Mantém a cobrança por pedido e o prazo ainda a informar perto da regra comercial. */
    margin-bottom: 16px; /* Separa a orientação curta dos campos de quantidade e CEP. */
} /* Encerra o respiro depois da informação de frete. */
.purchase-panel h2 { /* Identifica a escolha de quantidade e entrega sem dominar o nome do produto. */
    margin: 0 0 16px; /* Separa o título dos controles que vêm em seguida. */
    color: #26344b; /* Mantém contraste sobre a superfície clara do formulário. */
    font-size: 18px; /* Cria hierarquia intermediária entre o nome e as instruções de compra. */
    font-weight: 700; /* Destaca a etapa como um grupo próprio de ações. */
} /* Encerra o título da etapa. */
.purchase-fields { /* Distribui os campos sem criar uma largura mínima maior que a tela móvel. */
    display: grid; /* Permite organizar quantidade e CEP em colunas quando houver espaço. */
    grid-template-columns: minmax(0, 1fr); /* Empilha os campos na largura inicial do celular. */
    gap: 16px; /* Separa rótulos, controles e áreas de toque. */
} /* Encerra o agrupamento responsivo dos campos. */
.purchase-field { /* Mantém cada controle e sua explicação em uma unidade visual. */
    display: flex; /* Facilita organizar rótulo, campo e instrução verticalmente. */
    min-width: 0; /* Permite encolher a coluna sem transbordamento horizontal. */
    flex-direction: column; /* Coloca o rótulo acima do campo correspondente. */
    gap: 7px; /* Mantém o controle próximo ao nome sem ficar colado. */
} /* Encerra a estrutura de cada campo. */
.purchase-field label { /* Destaca as informações que o cliente precisa preencher. */
    color: #26344b; /* Mantém a leitura no padrão visual do catálogo. */
    font-size: 14px; /* Preserva rótulos legíveis em celulares. */
    font-weight: 600; /* Diferencia os nomes dos campos dos textos de ajuda. */
} /* Encerra os rótulos dos dados de entrega. */
.purchase-field input { /* Cria controles confortáveis sem depender do estilo nativo do aparelho. */
    width: 100%; /* Aproveita a coluna do formulário sem avançar para a próxima. */
    min-width: 0; /* Evita largura mínima nativa excessiva do campo de CEP. */
    min-height: 46px; /* Garante uma área de toque adequada no celular. */
    padding: 10px 12px; /* Dá respiro entre o texto e a borda do controle. */
    border: 1px solid #bccbe0; /* Delimita o campo em contraste com a superfície azul clara. */
    border-radius: 8px; /* Mantém coerência com os botões do catálogo. */
    background: #fff; /* Identifica a região editável com uma superfície neutra. */
    color: #26344b; /* Dá contraste ao valor informado pelo cliente. */
    font: inherit; /* Mantém a família tipográfica do restante da página. */
    font-size: 16px; /* Evita texto minúsculo e zoom automático em campos no iPhone. */
} /* Encerra o estilo dos campos editáveis. */
.purchase-field small { /* Explica unidades ou preenchimento opcional sem pesar na hierarquia. */
    color: #596a83; /* Mantém contraste de leitura para a orientação auxiliar. */
    font-size: 12px; /* Diferencia a ajuda dos rótulos dos campos. */
    line-height: 1.5; /* Preserva a leitura quando a explicação quebra em duas linhas. */
} /* Encerra o texto auxiliar de campo. */
.shipping-actions { /* Organiza a consulta de frete com espaço para o retorno do servidor. */
    display: flex; /* Permite alinhar o botão sem fixar a largura do conteúdo. */
    flex-wrap: wrap; /* Mantém a ação dentro da tela em larguras reduzidas. */
    gap: 10px; /* Separa futuras ações sem sobrepor áreas de toque. */
    margin-top: 14px; /* Afasta a consulta dos campos de quantidade e CEP. */
} /* Encerra a linha de ações de frete. */
.shipping-actions button { /* Dá aparência secundária à consulta que antecede o atendimento. */
    min-height: 44px; /* Mantém um alvo de toque confortável. */
    padding: 10px 16px; /* Dá margem ao texto de consultar frete. */
    border: 1px solid #0041d9; /* Identifica a ação pela cor principal sem preencher todo o botão. */
    border-radius: 8px; /* Preserva o padrão dos controles da loja. */
    background: #fff; /* Mantém a ação secundária sobre superfície clara. */
    color: #0041d9; /* Reforça a relação com a identidade azul da Infinityshop. */
    font: inherit; /* Evita diferenças de tipografia entre controles. */
    font-size: 14px; /* Mantém o rótulo legível sem disputar com a compra. */
    font-weight: 600; /* Facilita reconhecer a área clicável. */
    cursor: pointer; /* Identifica a interação em computadores. */
} /* Encerra o botão de consultar frete. */
.shipping-actions button:disabled { /* Comunica o processamento temporário sem esconder o controle. */
    opacity: 0.65; /* Distingue o botão ocupado da ação disponível. */
    cursor: wait; /* Informa ao usuário de mouse que uma resposta está sendo aguardada. */
} /* Encerra o estado temporário do botão. */
.shipping-note, .shipping-status { /* Apresenta a situação do frete em linguagem próxima aos campos relacionados. */
    margin: 12px 0 0; /* Mantém a informação separada dos controles sem criar blocos vazios. */
    color: #52657e; /* Dá contraste aos avisos sobre a integração pendente. */
    font-size: 13px; /* Mantém explicações proporcionais à etapa de compra. */
    line-height: 1.6; /* Facilita a leitura das orientações em telas estreitas. */
    overflow-wrap: anywhere; /* Impede que mensagens extensas alarguem a ficha do produto. */
} /* Encerra a base das mensagens de frete. */
.shipping-status:empty { /* Evita reservar uma linha de mensagem quando ainda não houve ação. */
    display: none; /* Retira o bloco vazio da composição até receber texto real. */
} /* Encerra o estado sem mensagem. */
.shipping-status[data-state="pending"], .shipping-status[data-state="loading"] { /* Distingue pendência de configuração e espera de uma falha de preenchimento. */
    padding: 10px 12px; /* Dá respiro à mensagem técnica traduzida para o cliente. */
    border-radius: 8px; /* Harmoniza o aviso com os campos adjacentes. */
    background: #eaf0ff; /* Usa fundo azul suave para uma situação informativa. */
    color: #244b8a; /* Mantém contraste sobre a superfície de informação. */
} /* Encerra o retorno informativo de espera ou pendência. */
.shipping-status[data-state="error"] { /* Evidencia erros de consulta sem esconder as alternativas de atendimento. */
    padding: 10px 12px; /* Mantém o retorno de falha confortável para leitura. */
    border: 1px solid #f2c7c7; /* Diferencia visualmente uma mensagem que pede nova tentativa. */
    border-radius: 8px; /* Mantém os cantos consistentes com os demais avisos. */
    background: #fff1f1; /* Dá destaque suave ao erro sem usar uma superfície agressiva. */
    color: #8a2929; /* Preserva contraste para a explicação de falha. */
} /* Encerra o retorno de erro de consulta. */
.purchase-summary { /* Separa o subtotal do produto de valores de frete ainda não definidos. */
    display: flex; /* Permite alinhar rótulo e valor na mesma linha. */
    flex-wrap: wrap; /* Preserva o conteúdo quando o subtotal ocupar mais espaço. */
    justify-content: space-between; /* Distribui o texto e o preço ao longo do cartão. */
    align-items: baseline; /* Mantém números e rótulos visualmente alinhados. */
    gap: 8px 16px; /* Evita colisão entre informações do resumo. */
    margin: 20px 0 14px; /* Destaca o resumo entre a cotação e o contato. */
    padding-top: 16px; /* Dá respiro após a linha divisória. */
    border-top: 1px solid #dfe6f0; /* Delimita o subtotal sem sugerir que o pedido está fechado. */
    color: #26344b; /* Mantém contraste dos dados do resumo. */
    font-size: 14px; /* Equilibra o rótulo com a hierarquia da ficha. */
} /* Encerra a organização do resumo do produto. */
.purchase-summary strong, .purchase-summary #subtotal-value { /* Dá destaque ao subtotal sem confundi-lo com total final de compra. */
    color: #12396c; /* Usa o mesmo azul do preço principal do catálogo. */
    font-size: 20px; /* Facilita conferir a multiplicação visual da quantidade. */
    font-weight: 700; /* Diferencia o valor dos avisos e rótulos. */
} /* Encerra o destaque do subtotal. */
.purchase-submit { /* Mantém o encaminhamento ao WhatsApp como ação principal desta etapa. */
    display: inline-flex; /* Centraliza o rótulo do botão de atendimento. */
    align-items: center; /* Mantém alinhamento vertical em rótulos de mais de uma linha. */
    justify-content: center; /* Centraliza o texto na largura disponível. */
    width: 100%; /* Oferece acesso claro ao atendimento em telas pequenas. */
    min-height: 48px; /* Mantém conforto para toque no celular. */
    padding: 12px 16px; /* Afasta o rótulo das bordas do controle. */
    border: 0; /* Remove a aparência nativa diferente entre navegadores. */
    border-radius: 8px; /* Mantém o padrão visual de ações da Infinityshop. */
    background: #128c4e; /* Associa a continuidade do atendimento ao WhatsApp sem alterar o azul da loja. */
    color: #fff; /* Garante contraste do rótulo sobre o verde. */
    font: inherit; /* Preserva a tipografia usada no catálogo. */
    font-weight: 600; /* Facilita identificar a ação principal. */
    text-align: center; /* Mantém rótulos longos centralizados. */
    cursor: pointer; /* Indica que a ação está disponível para clique. */
} /* Encerra o botão principal de atendimento. */
.demo-notice { /* Identifica claramente um produto demonstrativo sem apresentá-lo como oferta real. */
    margin: 14px 0; /* Separa o aviso do título e do restante da descrição. */
    padding: 12px 14px; /* Mantém a explicação legível dentro do destaque. */
    border: 1px solid #e6cc89; /* Delimita o estado de teste com uma cor distinta das ações. */
    border-radius: 8px; /* Preserva o padrão de cantos do detalhe do produto. */
    background: #fff8e7; /* Dá destaque suave à informação de demonstração. */
    color: #6b4c10; /* Mantém contraste do texto sobre o aviso amarelo claro. */
    font-size: 13px; /* Diferencia a explicação dos dados comerciais do item. */
    line-height: 1.6; /* Mantém o aviso legível quando ocupar várias linhas. */
} /* Encerra a identificação de produto de teste. */
.purchase-field input:focus-visible, .shipping-actions button:focus-visible, .purchase-submit:focus-visible { /* Mantém navegação de teclado clara em todos os controles novos. */
    outline: 3px solid #729bff; /* Destaca o controle focado sem depender somente da cor da borda. */
    outline-offset: 3px; /* Separa a indicação de foco do elemento interativo. */
} /* Encerra os indicadores de foco do fluxo de compra. */
@media (min-width: 440px) { /* Aproveita telas com espaço suficiente sem comprimir a digitação no celular estreito. */
    .purchase-fields { /* Mantém quantidade compacta e reserva mais largura para o CEP. */
        grid-template-columns: minmax(90px, 0.6fr) minmax(0, 1fr); /* Distribui os controles sem ultrapassar a largura do cartão. */
    } /* Encerra as colunas do formulário em telas médias. */
} /* Encerra a adaptação da quantidade e do CEP. */

.customer-fields { /* Organiza identificação e endereço sem forçar largura maior que a ficha móvel. */
    display: grid; /* Permite alinhar pares de campos em telas com espaço disponível. */
    grid-template-columns: minmax(0, 1fr); /* Empilha os controles no celular estreito. */
    gap: 16px; /* Separa rótulos e campos sem margens acumuladas. */
    margin-top: 18px; /* Diferencia dados pessoais da escolha de entrega. */
} /* Encerra a grade de dados do cliente. */
.customer-fields .full { /* Permite que campos longos ocupem a linha inteira quando houver duas colunas. */
    grid-column: 1 / -1; /* Preserva nomes e endereços amplos sem comprimi-los. */
} /* Encerra a largura integral dos campos relacionados. */
.purchase-field select, .purchase-field textarea { /* Harmoniza UF e outros controles com os inputs do checkout. */
    width: 100%; /* Mantém o controle dentro da coluna disponível. */
    min-width: 0; /* Evita largura mínima nativa que cause rolagem global. */
    min-height: 46px; /* Garante alvo de toque confortável para seleção e digitação. */
    padding: 10px 12px; /* Afasta o conteúdo das bordas do campo. */
    border: 1px solid #bccbe0; /* Mantém a delimitação usada pelos inputs existentes. */
    border-radius: 8px; /* Preserva a identidade visual do formulário. */
    background: #fff; /* Identifica áreas editáveis com superfície neutra. */
    color: #26344b; /* Garante contraste de leitura nos controles. */
    font: inherit; /* Usa a mesma tipografia dos demais campos. */
    font-size: 16px; /* Mantém legibilidade e evita zoom de formulário no iPhone. */
} /* Encerra os controles adicionais de cadastro. */
.shipping-options { /* Delimita a escolha de transportadora dentro da etapa de entrega. */
    min-width: 0; /* Impede que o fieldset nativo alargue o cartão no celular. */
    margin: 18px 0 0; /* Separa modalidades dos campos de consulta. */
    padding: 0; /* Deixa o espaçamento interno com os cartões de serviço. */
    border: 0; /* Evita uma moldura extra em volta dos cartões já delimitados. */
} /* Encerra a estrutura do grupo de modalidades. */
.shipping-options legend { /* Identifica a escolha obrigatória do transporte para leitores de tela e visão. */
    margin-bottom: 10px; /* Afasta o título da primeira opção de entrega. */
    padding: 0; /* Remove recuo nativo que prejudicaria o alinhamento. */
    color: #26344b; /* Mantém contraste consistente com os campos do cliente. */
    font-size: 14px; /* Preserva a escala dos demais rótulos da etapa. */
    font-weight: 600; /* Destaca a ação de escolher uma modalidade. */
} /* Encerra o título do grupo de frete. */
#shipping-options-list { /* Empilha as modalidades retornadas sem impor quantidade de colunas. */
    display: grid; /* Mantém os cartões alinhados e com altura independente. */
    gap: 10px; /* Separa os alvos de toque das transportadoras. */
} /* Encerra a lista de modalidades. */
.shipping-service { /* Transforma a modalidade inteira em uma escolha confortável para o visitante. */
    display: grid; /* Alinha rádio, identificação e preço de forma previsível. */
    grid-template-columns: 20px minmax(0, 1fr) max-content; /* Reserva espaço para o nome quebrar linha sem esconder o preço. */
    align-items: center; /* Centraliza o rádio e o valor na altura do texto. */
    gap: 10px; /* Evita que os elementos da opção fiquem colados. */
    min-height: 68px; /* Dá área de toque maior que a legenda do rádio. */
    padding: 12px; /* Separa os dados da borda do cartão. */
    border: 1px solid #ccd8e9; /* Delimita cada modalidade sobre a superfície do formulário. */
    border-radius: 10px; /* Mantém os cantos suaves usados no catálogo. */
    background: #fff; /* Distingue a opção de entrega do fundo azul claro. */
    color: #26344b; /* Mantém os nomes legíveis em todos os estados. */
    cursor: pointer; /* Indica que a linha inteira seleciona o transporte. */
} /* Encerra o cartão de modalidade. */
.shipping-service.is-selected { /* Evidencia a escolha que compõe o total apresentado. */
    border-color: #0041d9; /* Usa a identidade principal para identificar a seleção. */
    background: #edf3ff; /* Complementa o rádio com destaque de superfície. */
    box-shadow: 0 0 0 1px #0041d9; /* Torna a seleção reconhecível sem alterar a largura do cartão. */
} /* Encerra o destaque da modalidade selecionada. */
.shipping-service:focus-within { /* Mostra a opção focada durante a navegação por teclado. */
    outline: 3px solid #729bff; /* Mantém foco perceptível sobre as duas superfícies de cartão. */
    outline-offset: 2px; /* Separa o indicador da borda da modalidade. */
} /* Encerra o foco do cartão de transporte. */
.shipping-service input { /* Mantém o rádio nativo pequeno sem herdar dimensões dos campos de endereço. */
    width: 18px; /* Dá tamanho reconhecível ao seletor circular. */
    height: 18px; /* Preserva a proporção nativa do controle. */
    min-height: 0; /* Evita que regras genéricas transformem o rádio em um campo alto. */
    margin: 0; /* Centraliza o seletor na primeira coluna sem margem nativa. */
    accent-color: #0041d9; /* Associa a marca de seleção à cor da loja. */
} /* Encerra o controle de escolha do transporte. */
.shipping-service span, .shipping-service strong, .shipping-service small { /* Mantém textos longos limitados à coluna reservada. */
    min-width: 0; /* Permite encolher o nome da modalidade em telas pequenas. */
    overflow-wrap: anywhere; /* Evita transbordamento por nomes extensos de transportadora. */
} /* Encerra a contenção do texto dos serviços. */
.shipping-service span > strong { /* Separa nome e prazo em uma hierarquia simples. */
    display: block; /* Mantém a transportadora e modalidade em uma linha própria. */
    font-size: 14px; /* Preserva a leitura do nome sem dominar o resumo. */
    line-height: 1.4; /* Dá respiro quando o nome precisar de mais de uma linha. */
} /* Encerra a identificação da modalidade. */
.shipping-service small { /* Diferencia o prazo da identificação do transporte. */
    display: block; /* Coloca o intervalo em uma segunda linha. */
    margin-top: 4px; /* Separa o prazo do nome do serviço. */
    color: #596a83; /* Mantém contraste de leitura com hierarquia secundária. */
    font-size: 12px; /* Dá uma escala auxiliar à informação de prazo. */
} /* Encerra a indicação de dias úteis. */
.shipping-service-price { /* Mantém o valor do frete fácil de comparar entre modalidades. */
    color: #12396c; /* Usa a mesma identidade dos valores do resumo. */
    font-size: 14px; /* Mantém o preço legível sem consumir largura excessiva. */
    white-space: nowrap; /* Não divide moeda e centavos em linhas diferentes. */
} /* Encerra o valor de cada modalidade. */
.shipping-status[data-state="ready"] { /* Confirma que o cliente pode escolher uma modalidade devolvida pelo servidor. */
    padding: 10px 12px; /* Destaca a orientação sem criar um painel pesado. */
    border: 1px solid #b8ddc8; /* Delimita o retorno positivo de consulta. */
    border-radius: 8px; /* Mantém o padrão dos demais estados de mensagem. */
    background: #effaf3; /* Diferencia sucesso de pendência ou erro de rede. */
    color: #226443; /* Mantém contraste sobre o fundo verde suave. */
} /* Encerra o estado de cotação pronta. */
.purchase-panel .checkout-heading { /* Separa as etapas de entrega e identificação do comprador. */
    margin-top: 24px; /* Cria respiro antes de iniciar um novo grupo de campos. */
    padding-top: 20px; /* Afasta o título da linha que delimita a etapa anterior. */
    border-top: 1px solid #dfe6f0; /* Organiza o formulário sem molduras duplicadas. */
    color: #26344b; /* Mantém o título no mesmo contraste dos demais campos. */
    font-size: 18px; /* Dá hierarquia à etapa sem disputar com o nome do produto. */
    font-weight: 700; /* Identifica o início de uma nova tarefa no checkout. */
} /* Encerra o título de etapa do pedido. */
.purchase-disclosure { /* Explica o encaminhamento dos dados ao atendimento perto da ação final. */
    margin: 16px 0; /* Separa a orientação dos campos e do botão de confirmação. */
    color: #596a83; /* Mantém leitura confortável com hierarquia auxiliar. */
    font-size: 12px; /* Evita competir com os valores e com a chamada principal. */
    line-height: 1.6; /* Preserva leitura quando o texto ocupar várias linhas no celular. */
    overflow-wrap: anywhere; /* Impede que um endereço ou termo longo aumente o cartão. */
} /* Encerra a orientação de uso do atendimento. */
.payment-info { /* Agrupa os dados de pagamento quando forem apresentados no fluxo do pedido. */
    margin: 18px 0; /* Separa pagamento das informações do endereço. */
    padding: 16px; /* Afasta os dados financeiros das bordas. */
    border: 1px solid #d7e4f8; /* Identifica o grupo sem parecer uma confirmação de pagamento. */
    border-radius: 10px; /* Mantém a linguagem visual dos demais cartões. */
    background: #eef5ff; /* Diferencia os dados informativos da área editável do formulário. */
    color: #26344b; /* Mantém leitura dos rótulos e informações de pagamento. */
    font-size: 13px; /* Equilibra os dados com a escala do resumo do pedido. */
    line-height: 1.6; /* Facilita conferir uma chave ou instituição em várias linhas. */
    overflow-wrap: anywhere; /* Permite quebrar e-mails longos sem causar rolagem da página. */
} /* Encerra a apresentação informativa de pagamento. */
.checkout-errors { /* Mostra validações do servidor sem apagar o que o cliente precisa corrigir. */
    margin: 16px 0; /* Separa o retorno de erro do título e dos controles. */
    padding: 14px 16px; /* Cria área confortável para leitura das instruções. */
    border: 1px solid #f2c7c7; /* Diferencia validação inválida de frete ainda pendente. */
    border-radius: 10px; /* Harmoniza com os estados do formulário. */
    background: #fff1f1; /* Destaca o problema sem ocultar o restante do checkout. */
    color: #8a2929; /* Mantém contraste da orientação sobre o fundo claro. */
    font-size: 14px; /* Dá escala legível para corrigir o preenchimento. */
    line-height: 1.6; /* Melhora a leitura de várias mensagens relacionadas. */
} /* Encerra o retorno de validação do pedido. */
.purchase-panel [hidden] { /* Preserva o atributo nativo de ocultação mesmo em grupos com regras de display. */
    display: none; /* Não mostra opções antigas ou uma lista vazia de modalidades. */
} /* Encerra a proteção dos grupos ocultos. */
.product-variants { /* Coloca a configuração do item antes de calcular entrega e total. */
    margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid #dfe6f0; /* Separa a escolha de atributos dos campos logísticos. */
} /* Encerra a área de configuração do produto. */
.variant-attribute-fields { /* Organiza os atributos sem exigir uma largura mínima no celular. */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; /* Empilha as escolhas e permite que nomes extensos quebrem dentro do formulário. */
} /* Encerra a estrutura das escolhas de variante. */
.product-variants .purchase-field select { /* Mantém as listas de atributos confortáveis para toque e preenchimento. */
    width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #cbd7ec; border-radius: 8px; background: #ffffff; color: #26344b; font: inherit; font-size: 16px; /* Preserva contraste e evita zoom de foco no iPhone. */
} /* Encerra os controles nativos de combinação. */
.variant-choice-help { /* Explica o ajuste das combinações perto dos controles de escolha. */
    margin: 0 0 14px; color: #526583; font-size: 14px; line-height: 1.5; /* Mantém a orientação legível sem disputar espaço com os atributos no celular. */
} /* Encerra a orientação da seleção prática. */
.product-variants .purchase-field select:focus-visible { /* Identifica os controles de atributos durante navegação por teclado. */
    outline: 3px solid #729bff; outline-offset: 3px; /* Separa o foco da borda sem alterar a largura do controle. */
} /* Encerra o foco acessível das variantes. */
.variant-selection-status { /* Confirma a configuração e orienta quando ela ainda estiver incompleta. */
    margin: 12px 0 0; color: #526583; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; /* Permite nomes e códigos longos sem criar rolagem lateral. */
} /* Encerra o retorno da escolha de atributos. */
@media (min-width: 540px) { /* Usa pares de atributos somente quando houver largura confortável. */
    .variant-attribute-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Divide as escolhas sem comprimir os controles no celular estreito. */
    .variant-attribute-fields > :nth-child(3) { grid-column: 1 / -1; } /* Mantém um terceiro atributo legível na largura inteira da etapa. */
} /* Encerra a adaptação das escolhas de variantes. */
.product-detail-image [hidden] { /* Preserva a ocultação do aviso quando uma fotografia estiver disponível. */
    display: none; /* Não mostra foto e mensagem de ausência simultaneamente. */
} /* Encerra os estados visuais da fotografia do produto. */
.product-detail-image img { /* Mantém fotos de variantes diferentes na mesma área sem deformação. */
    max-width: 100%; object-fit: contain; /* Preserva a proporção da imagem enviada no celular e no computador. */
} /* Encerra o dimensionamento das fotografias escolhidas. */
.purchase-field select:focus-visible, .purchase-field textarea:focus-visible { /* Mantém a navegação por teclado visível nos controles adicionais. */
    outline: 3px solid #729bff; /* Destaca o campo que recebe foco no checkout. */
    outline-offset: 3px; /* Afasta o indicador da borda editável. */
} /* Encerra o foco dos controles de endereço. */
@media (min-width: 540px) { /* Usa duas colunas de endereço apenas quando há espaço de leitura. */
    .customer-fields { /* Alinha pares de dados sem comprimir o formulário em celulares menores. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Permite que ambas as colunas encolham dentro da ficha. */
    } /* Encerra as colunas de dados do cliente. */
} /* Encerra a adaptação da identificação e endereço. */