.header-cart { /* Mantém o acesso ao carrinho integrado ao cabeçalho existente. */
    position: relative; text-decoration: none; cursor: pointer; /* Oferece um destino real mantendo a posição do ícone. */
} /* Encerra o acesso ao carrinho. */
.header-cart-count { /* Identifica a quantidade de unidades escolhidas pelo visitante. */
    position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; background: #064bd7; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; /* Mantém o contador legível sem ocupar outra coluna do cabeçalho. */
} /* Encerra o contador de produtos. */
.product-purchase { /* Aproxima a escolha e a ação principal dos dados comerciais do produto. */
    margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; /* Apresenta apenas os controles necessários antes do carrinho. */
} /* Encerra a superfície da seleção do produto. */
.product-add-row { /* Alinha a quantidade e o botão principal de inclusão. */
    display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: end; gap: 12px; margin: 20px 0 24px; /* Mantém a ação com largura confortável em celulares. */
} /* Encerra o agrupamento de inclusão no carrinho. */
.product-quantity { /* Dimensiona a quantidade junto da ação principal. */
    min-width: 0; /* Permite adaptar o grupo à largura disponível. */
} /* Encerra o controle de unidades. */
.product-purchase .purchase-submit { /* Destaca a ação de adicionar a seleção ao carrinho. */
    width: 100%; margin: 0; min-height: 48px; padding: 12px 18px; background: #0752ed; border: 1px solid #0752ed; color: #fff; font-size: 16px; font-weight: 700; border-radius: 8px; cursor: pointer; /* Mantém o botão confortável para toque e alinhado à quantidade. */
} /* Encerra a ação principal de inclusão. */
.product-freight { /* Separa a consulta de entrega da seleção comercial do produto. */
    padding-top: 22px; border-top: 1px solid #e3e8f1; /* Mantém uma hierarquia curta para o campo de CEP. */
} /* Encerra a área de consulta de frete. */
.product-freight > label { /* Identifica a finalidade do campo de endereço da ficha. */
    display: block; margin-bottom: 10px; color: #26364c; font-size: 14px; font-weight: 600; /* Preserva a orientação sem outro título grande. */
} /* Encerra o rótulo de entrega. */
.product-freight-row { /* Posiciona o CEP e o comando de consulta no mesmo grupo. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; /* Aproveita a largura da ficha no celular e no computador. */
} /* Encerra o grupo de consulta de CEP. */
.product-freight-row input, .freight-check-button { /* Mantém entrada e consulta com medidas adequadas ao toque. */
    min-width: 0; min-height: 46px; border: 1px solid #cdd6e5; border-radius: 8px; padding: 10px 14px; background: #fff; color: #20334b; font: inherit; font-size: 16px; /* Evita ampliar automaticamente o campo em navegadores móveis. */
} /* Encerra a base dos controles de entrega. */
.freight-check-button { /* Evidencia a consulta como ação complementar. */
    color: #064bd7; font-size: 14px; font-weight: 600; cursor: pointer; /* Mantém o destaque principal na inclusão do produto. */
} /* Encerra o comando de consulta do frete. */
.product-freight-result { /* Apresenta a entrega confirmada para o formato do CEP informado. */
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border-radius: 8px; background: #f2f6ff; color: #20334b; /* Aproxima a condição e o valor da entrega. */
} /* Encerra o retorno da consulta de frete. */
.product-freight-result[hidden], .product-purchase [hidden] { /* Respeita os estados de consulta e os controles nativos alternativos. */
    display: none !important; /* Mantém ocultas as informações que aguardam confirmação. */
} /* Encerra os estados ocultos da seleção. */
.product-freight-result > div { /* Agrupa o nome da entrega e seu prazo operacional. */
    display: flex; flex-direction: column; gap: 5px; /* Conserva a leitura clara em duas linhas curtas. */
} /* Encerra a descrição da entrega. */
.product-freight-result span { /* Mantém a orientação de prazo subordinada à entrega. */
    color: #67778d; font-size: 12px; /* Evita competir com o valor consultado. */
} /* Encerra a orientação de prazo. */
.cart-page { /* Define a base visual da etapa de conferência da compra. */
    margin: 0; color: #253247; background: #f5f7fb; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; /* Reutiliza a tipografia da loja em uma superfície clara. */
} /* Encerra a base da página do carrinho. */
.cart-page * { /* Mantém medidas previsíveis nos controles da conferência. */
    box-sizing: border-box; /* Inclui bordas e preenchimentos na largura dos elementos. */
} /* Encerra o cálculo de dimensões do carrinho. */
.cart-header { /* Mantém a marca e o retorno à loja próximos da seleção. */
    display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1160px; margin: auto; padding: 26px 28px; /* Preserva margens confortáveis no computador e no celular. */
} /* Encerra o cabeçalho do carrinho. */
.cart-brand img { /* Conserva a proporção da identidade original da Infinityshop. */
    display: block; width: 188px; height: auto; max-width: 100%; /* Mantém a logo legível sem deformar a imagem. */
} /* Encerra a apresentação da marca. */
.cart-back { /* Oferece uma navegação secundária curta para o catálogo. */
    color: #53647b; text-decoration: none; font-size: 14px; /* Mantém foco visual na conferência da seleção. */
} /* Encerra o retorno à compra de outros itens. */
.cart-shell { /* Limita a largura dos itens e do resumo de valores. */
    max-width: 1160px; margin: 14px auto 60px; padding: 0 28px; /* Mantém o conteúdo alinhado ao cabeçalho da marca. */
} /* Encerra a área principal do carrinho. */
.cart-shell > h1 { /* Identifica a conferência atual sem outros títulos redundantes. */
    margin: 0 0 24px; font-size: 28px; line-height: 1.25; letter-spacing: -0.5px; /* Dá prioridade ao nome da etapa. */
} /* Encerra o título do carrinho. */
.cart-layout { /* Aproxima a seleção e o total do pedido em telas largas. */
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; /* Reserva uma coluna de conferência para o valor final. */
} /* Encerra a grade do carrinho. */
.cart-items, .cart-order-summary, .cart-empty { /* Agrupa o conteúdo da compra em superfícies legíveis. */
    background: #fff; border: 1px solid #e1e7ef; border-radius: 12px; /* Mantém os itens separados do fundo sem contornos excessivos. */
} /* Encerra as superfícies de conferência. */
.cart-item { /* Mantém foto, identificação e valor de cada produto na mesma linha. */
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; padding: 22px; align-items: start; /* Permite comparar produtos e combinações com facilidade. */
} /* Encerra a linha de produto do carrinho. */
.cart-item + .cart-item { /* Distingue seleções vizinhas dentro da mesma lista. */
    border-top: 1px solid #e8edf3; /* Separa os itens com uma linha discreta. */
} /* Encerra a divisão entre os produtos. */
.cart-item-photo img { /* Mostra a fotografia correspondente à seleção do visitante. */
    display: block; width: 76px; height: 76px; object-fit: contain; border-radius: 8px; border: 1px solid #edf0f5; background: #fff; /* Mantém a imagem completa e proporcional. */
} /* Encerra a miniatura do produto. */
.cart-item-copy { /* Dá espaço ao nome e aos valores da combinação. */
    min-width: 0; /* Permite que textos maiores quebrem dentro da coluna. */
} /* Encerra o conteúdo textual da seleção. */
.cart-item-copy h2 { /* Apresenta o nome como identificação principal da linha. */
    margin: 0 0 6px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; /* Mantém nomes completos legíveis em telas pequenas. */
} /* Encerra o nome do produto. */
.cart-item-copy h2 a { /* Conserva o acesso à ficha junto do nome escolhido. */
    color: inherit; text-decoration: none; /* Evita competir com os comandos de quantidade. */
} /* Encerra o acesso à ficha do item. */
.cart-item-copy p { /* Mantém as características selecionadas próximas do nome. */
    margin: 4px 0; font-size: 12px; color: #69788b; overflow-wrap: anywhere; /* Permite comparar cor e capacidade sem alongar a linha. */
} /* Encerra as informações complementares da seleção. */
.cart-item-controls { /* Agrupa quantidade e comandos de atualização ou remoção. */
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 12px; /* Mantém os controles utilizáveis mesmo com pouca largura. */
} /* Encerra os comandos de edição da linha. */
.cart-item-controls label { /* Identifica o seletor de unidades de cada produto. */
    font-size: 12px; color: #63728a; /* Mantém a leitura junto ao controle correspondente. */
} /* Encerra o rótulo de quantidade. */
.cart-item-controls select { /* Mantém a quantidade confortável para toque e digitação assistida. */
    min-height: 44px; min-width: 62px; padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: 7px; background: #fff; font: inherit; font-size: 16px; /* Evita campos pequenos e ampliação automática no celular. */
} /* Encerra a escolha de quantidade do carrinho. */
.cart-text-button { /* Apresenta ações complementares de cada item com tamanho de toque adequado. */
    min-height: 44px; padding: 8px 3px; border: 0; background: transparent; color: #0752ed; font: inherit; font-size: 12px; cursor: pointer; /* Mantém os comandos de edição próximos da quantidade. */
} /* Encerra os comandos da linha. */
.cart-remove { /* Distingue a retirada de uma seleção da alteração de quantidade. */
    color: #7d5360; /* Conserva o comando legível dentro da mesma linha. */
} /* Encerra a apresentação da remoção. */
.cart-item-total { /* Identifica o valor correspondente às unidades escolhidas. */
    padding-top: 2px; white-space: nowrap; font-size: 15px; /* Mantém o subtotal disponível para conferência rápida. */
} /* Encerra o subtotal do item. */
.cart-order-summary { /* Agrupa a soma da seleção e o caminho para as etapas seguintes. */
    padding: 24px; position: sticky; top: 24px; /* Mantém a finalização acessível ao conferir uma lista longa no computador. */
} /* Encerra a área de valores e finalização. */
.cart-order-summary h2 { /* Nomeia a conferência dos valores da compra. */
    margin: 0 0 18px; font-size: 18px; /* Evita repetir o destaque do título da página. */
} /* Encerra o título do resumo. */
.cart-summary-line { /* Alinha cada componente de preço à sua descrição. */
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 12px 0; font-size: 14px; color: #5c6b7e; /* Facilita conferir produtos e taxa de entrega. */
} /* Encerra as linhas de valores. */
.cart-summary-line strong { /* Mantém os valores destacados em relação aos rótulos. */
    color: #253247; /* Conserva contraste adequado no cartão de conferência. */
} /* Encerra o destaque dos valores. */
.cart-total { /* Separa o valor final dos componentes de preço. */
    padding-top: 16px; margin: 20px 0; border-top: 1px solid #e7ecf3; font-size: 18px; color: #253247; /* Dá prioridade ao total que seguirá para o checkout. */
} /* Encerra a soma final do pedido. */
.cart-primary { /* Define a ação principal da etapa de conferência. */
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid #0752ed; border-radius: 8px; background: #0752ed; color: #fff; text-align: center; text-decoration: none; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; /* Mantém a continuidade da compra evidente em qualquer tela. */
} /* Encerra a ação de finalizar a seleção. */
.cart-payment-note { /* Orienta sobre a etapa de atendimento após o preenchimento dos dados. */
    margin: 14px 0 0; color: #758196; font-size: 12px; line-height: 1.6; /* Mantém a orientação curta junto da continuidade da compra. */
} /* Encerra a orientação de atendimento. */
.cart-notice { /* Apresenta confirmações de inclusão e edição da seleção. */
    padding: 12px 16px; margin: 0 0 20px; border: 1px solid #cee0d6; border-radius: 8px; background: #f1fbf5; color: #276048; font-size: 14px; /* Informa o resultado sem esconder os produtos escolhidos. */
} /* Encerra o retorno das alterações do carrinho. */
.cart-notice.is-error, .cart-item-error { /* Mantém orientações de correção visíveis junto da seleção afetada. */
    color: #a23745; /* Diferencia o problema dos dados comerciais normais. */
} /* Encerra a cor das orientações de correção. */
.cart-notice.is-error { /* Apresenta uma validação de carrinho que exige ajuste. */
    border-color: #ecccd0; background: #fff4f4; /* Conserva a mensagem legível em uma superfície própria. */
} /* Encerra o retorno de validação de seleção. */
.cart-empty { /* Oferece um caminho de compra quando a seleção ainda está vazia. */
    padding: 48px 28px; text-align: center; /* Mantém o estado inicial legível no celular e no computador. */
} /* Encerra a orientação de carrinho vazio. */
.cart-empty h2 { /* Nomeia a ação necessária para iniciar uma compra. */
    margin: 0 0 8px; font-size: 22px; /* Mantém a orientação principal próxima da ação. */
} /* Encerra o título do estado inicial. */
.cart-empty p { /* Explica onde a seleção será apresentada ao adicionar produtos. */
    color: #6d7b90; margin: 0 0 22px; /* Conserva o retorno subordinado à continuidade da compra. */
} /* Encerra a explicação do carrinho vazio. */
.cart-empty .cart-primary { /* Mantém o acesso ao catálogo proporcional ao conteúdo inicial. */
    width: fit-content; margin: auto; /* Evita esticar o botão de início em telas largas. */
} /* Encerra a ação do estado inicial. */
.cart-page a:focus-visible, .cart-page button:focus-visible, .cart-page select:focus-visible, .product-purchase input:focus-visible, .product-purchase button:focus-visible { /* Mantém as ações identificáveis durante navegação por teclado. */
    outline: 3px solid #8cb3ff; outline-offset: 3px; /* Destaca o controle ativo sem mudar sua posição. */
} /* Encerra o foco acessível da compra. */
@media (max-width: 840px) { /* Adapta a conferência para telas que exigem uma única coluna. */
    .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* Mantém produtos e valores com largura útil no tablet e celular. */
    .cart-order-summary { position: static; } /* Coloca a continuidade da compra logo depois dos itens na tela menor. */
} /* Encerra a adaptação de uma coluna. */
@media (max-width: 540px) { /* Prioriza a largura dos itens e controles no celular. */
    .cart-header { padding: 20px 16px; gap: 14px; } /* Aproxima os acessos das margens usadas na loja móvel. */
    .cart-brand img { width: 150px; } /* Conserva espaço ao retorno para a loja. */
    .cart-back { font-size: 12px; } /* Mantém o texto de navegação completo no cabeçalho estreito. */
    .cart-shell { padding: 0 16px; margin-top: 12px; } /* Mantém o conteúdo dentro da largura disponível. */
    .cart-shell > h1 { font-size: 24px; margin-bottom: 20px; } /* Dimensiona o título para a leitura móvel. */
    .cart-item { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 18px 14px; } /* Reserva uma coluna completa ao nome e aos comandos do produto. */
    .cart-item-photo img { width: 60px; height: 60px; } /* Mantém a miniatura proporcional à linha estreita. */
    .cart-item-total { grid-column: 2; } /* Posiciona o subtotal junto da identificação no celular. */
    .cart-order-summary { padding: 20px; } /* Preserva espaço confortável para a conferência do total. */
} /* Encerra a adaptação móvel do carrinho. */