/*
 * Botões de carrinho do header/nav (par cheio ↔ vazio).
 *
 * O botão "cheio" (ícone + contador + total) e o "vazio" ("Escolha um país")
 * alternam por estado, mas têm conteúdo de larguras diferentes. Sem caixa fixa,
 * a nav "salta" ao trocar de estado (ex.: ao voltar do checkout para a home, ou
 * durante a hidratação do carrinho). Aqui travamos largura e altura idênticas
 * para os dois estados em cada variante, eliminando o reflow.
 *
 * As classes-âncora (js-cart-toggle-btn / --lg / --sm) vêm de
 * resources/views/public/chrome/cart-button.blade.php. CSP-safe: stylesheet
 * externo, sem inline. Enfileirado globalmente em ThemeAssets::styles().
 */
.js-cart-toggle-btn {
    box-sizing: border-box;
    justify-content: center;
    /* Não deixa o total longo empurrar a caixa além do par. */
    overflow: hidden;
    white-space: nowrap;
}

/* Variante desktop ($big) — nav principal, mega-menu, drawer.
 * Largura 11rem (mais estreita que os 11.75rem anteriores) e altura 2.375rem
 * (38px): o checkout é o CTA da barra, então volta a ficar um pouco mais alto
 * que os demais controles de 1º nível (34px, padronizados no bloco
 * ".vnv-hdr-cluster" de header-account.css) — destaque intencional, mais perto
 * dos 44px originais. Conteúdo centrado (inline-flex + justify-content:center).
 * A largura fixa segura o par cheio↔vazio sem reflow; abaixo de ~11rem o texto
 * "Escolha um país"/"Choose a country" do estado vazio começa a apertar
 * (overflow:hidden corta), por isso não estreitamos mais. */
.js-cart-toggle-btn--lg {
    width: 11rem;
    height: 2.375rem;
}

/* Variante compacta (mobile/condensada). */
.js-cart-toggle-btn--sm {
    width: 9.75rem;
    height: 2.5rem;
}