/*
 * Ponte para as páginas que ainda não foram portadas (checkout, conta, pedidos,
 * blog). Elas continuam renderizando com o Cartzilla; aqui só alinhamos a
 * moldura nova (header em cápsula + rodapé) ao conteúdo antigo.
 *
 * Só espaçamento e cor de fundo. Nada que redefina componente do Cartzilla.
 */
.t2-legacy-main {
    background: var(--t2-bg);
    padding-top: 18px;
}

.t2-legacy-main .container {
    max-width: var(--t2-container);
}

/*
 * Páginas ainda no Cartzilla (conta, pedidos, rastreio, checkout): a moldura
 * é a do tema; aqui só aproximamos cor e raio dos componentes do Cartzilla
 * aos tokens, para não parecer outro site.
 *
 * Escopo: só quando o conteúdo do <main> NÃO é do tema (toda tela do tema
 * começa por um elemento com classe t2-*). Sem esse recorte, o padding e a
 * cor de link vazavam para a home e pintavam botões-link de verde no verde.
 */
main.t2-legacy-main:not(:has(> [class*="t2-"])) { padding-top: 120px; font-family: var(--t2-font), system-ui, sans-serif; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .btn-primary,
main.t2-legacy-main:not(:has(> [class*="t2-"])) .btn-primary:hover,
main.t2-legacy-main:not(:has(> [class*="t2-"])) .btn-primary:focus { background-color: var(--t2-primary); border-color: var(--t2-primary); color: #fff; border-radius: 999px; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .btn-outline-primary { color: var(--t2-primary); border-color: var(--t2-primary); border-radius: 999px; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .btn-outline-primary:hover { background-color: var(--t2-primary); color: #fff; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .text-primary,
main.t2-legacy-main:not(:has(> [class*="t2-"])) a:not(.btn) { color: var(--t2-primary); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .bg-primary { background-color: var(--t2-primary) !important; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .card { border-radius: var(--t2-radius-card); border-color: var(--t2-border); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .form-control,
main.t2-legacy-main:not(:has(> [class*="t2-"])) .custom-select { border-radius: 12px; border-color: var(--t2-border); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .form-control:focus { border-color: var(--t2-primary); box-shadow: 0 0 0 .2rem rgba(var(--t2-primary-rgb), .15); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .nav-link-style.active,
main.t2-legacy-main:not(:has(> [class*="t2-"])) .nav-link-style:hover { color: var(--t2-primary); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .badge-primary { background-color: var(--t2-primary); }
main.t2-legacy-main:not(:has(> [class*="t2-"])) .page-title-overlap,
main.t2-legacy-main:not(:has(> [class*="t2-"])) .bg-dark { background-color: var(--t2-primary) !important; }
main.t2-legacy-main:not(:has(> [class*="t2-"])) h1,
main.t2-legacy-main:not(:has(> [class*="t2-"])) h2,
main.t2-legacy-main:not(:has(> [class*="t2-"])) h3 { letter-spacing: -.02em; font-weight: 500; }
@media (max-width: 991px) { main.t2-legacy-main:not(:has(> [class*="t2-"])) { padding-top: 104px; } }

/* Home (começa pelo hero): sem o respiro de 18px — na referência o banner
   encosta na barra de anúncios e o header em cápsula flutua sobre ele. */
main.t2-legacy-main:has(> .t2-block--hero:first-child) { padding-top: 0; }

/*
 * Navegador sem :has() (Firefox < 121) descarta as regras acima inteiras; sem
 * este fallback o header em cápsula cobre o topo do checkout e da conta. Nesses
 * navegadores a home ganha um respiro a mais — melhor que conteúdo coberto.
 */
@supports not selector(:has(*)) {
    main.t2-legacy-main { padding-top: 120px; }
    @media (max-width: 991px) { main.t2-legacy-main { padding-top: 104px; } }
}

/*
 * O Cartzilla (css/theme.css, carregado antes) pinta todo link de vermelho
 * #fe3638 no hover — era um nome de produto vermelho no "Potencialize". Nas
 * telas do tema o link fica na cor dele. :where() deixa a regra com a mesma
 * especificidade do Cartzilla (0,1,1): vence por vir depois, e qualquer hover
 * do próprio tema (.t2-x:hover, .t2-x a:hover) continua valendo.
 */
:where(.t2-body) a:hover { color: inherit; }