:root {
    --loja-cor-primaria: #1f2937;
    --loja-cor-secundaria: #ffffff;

    --loja-fundo: #ffffff;
    --loja-superficie: #f8fafc;
    --loja-texto: #111827;
    --loja-texto-suave: #4b5563;
    --loja-borda: #e5e7eb;
    --loja-raio: 12px;
    --loja-raio-grande: 18px;
    --loja-sombra: 0 2px 10px rgb(0 0 0 / 0.06);
    --loja-sombra-forte: 0 10px 28px rgb(0 0 0 / 0.12);
    --loja-largura: 1180px;

    /* Atenção: derivadas no :root, onde o <style> da loja redefine a primária: color-mix resolve depois da cascata */
    --loja-fundo-tingido: color-mix(in srgb, var(--loja-cor-secundaria) 16%, color-mix(in srgb, var(--loja-cor-primaria) 4%, #ffffff));
    --loja-cor-primaria-escura: color-mix(in srgb, var(--loja-cor-primaria) 78%, #000000);

    --loja-fonte-titulo: Georgia, "Times New Roman", "Noto Serif", serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--loja-fundo-tingido);
    color: var(--loja-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color-scheme: light;
}

a {
    color: var(--loja-cor-primaria);
}

.pagina-da-loja {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topo {
    border-bottom: 1px solid var(--loja-borda);
    border-top: 4px solid var(--loja-cor-primaria);
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    box-shadow: var(--loja-sombra);
    position: sticky;
    top: 0;
    z-index: 20;
}

.faixa-aviso + .topo {
    border-top: 0;
}

.faixa-aviso {
    background: var(--loja-cor-primaria-escura);
    color: var(--loja-cor-secundaria);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: var(--loja-largura);
    margin: 0 auto;
    padding: 18px 16px;
    text-decoration: none;
}

.marca-nome {
    color: var(--loja-cor-secundaria);
    font-family: var(--loja-fonte-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    /* ver documentation/decisoes/Web.Loja.md#o-nome-da-loja-cabe-no-cabeçalho-em-até-duas-linhas */
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.marca-logo {
    display: block;
    max-height: 72px;
    max-width: min(220px, 100%);
    object-fit: contain;
}

main {
    flex: 1;
    max-width: var(--loja-largura);
    width: 100%;
    margin: 0 auto;
    padding: 28px 16px 40px;
}

.rodape {
    background: var(--loja-cor-primaria-escura);
    color: rgb(255 255 255 / 0.78);
    font-size: 0.9rem;
}

.rodape p {
    margin: 0;
}

.rodape-conteudo {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr;
    gap: 32px;
    max-width: var(--loja-largura);
    margin: 0 auto;
    padding: 40px 16px 28px;
}

.rodape-nome {
    margin-bottom: 8px !important;
    color: var(--loja-cor-secundaria);
    font-family: var(--loja-fonte-titulo);
    font-size: 1.35rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rodape-texto {
    max-width: 360px;
    line-height: 1.6;
}

.rodape-titulo {
    margin-bottom: 12px !important;
    color: var(--loja-cor-secundaria);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rodape-coluna ul,
.rodape-coluna ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rodape-coluna a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .rodape-coluna a:hover {
        color: var(--loja-cor-secundaria);
        text-decoration: underline;
    }
}

.rodape-passos {
    counter-reset: passo;
}

.rodape-passos li {
    counter-increment: passo;
    display: flex;
    gap: 10px;
    align-items: baseline;
    line-height: 1.45;
}

.rodape-passos li::before {
    content: counter(passo);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--loja-cor-secundaria);
    color: var(--loja-cor-primaria-escura);
    font-size: 0.75rem;
    font-weight: 800;
}

.rodape-base {
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.rodape-base p {
    max-width: var(--loja-largura);
    margin: 0 auto;
    padding: 16px;
    font-size: 0.8rem;
    color: rgb(255 255 255 / 0.6);
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .rodape-conteudo {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 32px;
    }
}

.vitrine-vazia,
.aviso {
    text-align: center;
    padding: 48px 0;
}

.vitrine-vazia h1,
.aviso h1 {
    color: var(--loja-cor-primaria);
    font-family: var(--loja-fonte-titulo);
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    margin: 0 0 12px;
}

.chamada {
    color: var(--loja-texto);
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.ajuda {
    color: var(--loja-texto-suave);
    font-size: 0.9375rem;
    margin: 0;
}

.pagina-sem-loja {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 16px;
}

.btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--loja-raio);
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
    cursor: pointer;
}

.produto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.produto-midia,
.produto-informacoes {
    min-width: 0;
}

.produto-voltar {
    margin: 0 0 16px;
}

.produto-voltar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--loja-cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

.produto-voltar a:hover {
    text-decoration: underline;
}

.produto-compra .preco {
    margin-top: 8px;
}

.produto-no-carrinho {
    flex-basis: 100%;
    margin: 0;
    color: var(--loja-cor-primaria);
    font-weight: 700;
}

.produto-no-carrinho[hidden] {
    display: none;
}

.produto h1 {
    color: var(--loja-cor-primaria);
    font-family: var(--loja-fonte-titulo);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin: 0 0 12px;
    line-height: 1.25;
}

.preco {
    color: var(--loja-cor-primaria);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin: 20px 0 12px;
}

.selo-disponivel,
.selo-indisponivel {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 24px;
}

.selo-disponivel {
    color: #15803d;
}

.selo-indisponivel {
    color: var(--loja-texto-suave);
}

.descricao {
    border-top: 1px solid var(--loja-borda);
    padding-top: 24px;
}

.descricao h2 {
    font-size: 1.125rem;
    margin: 0 0 8px;
}

.descricao p {
    color: var(--loja-texto-suave);
    margin: 0;
    overflow-wrap: anywhere;
}

.galeria {
    margin: 0 0 24px;
}

.galeria-trilho {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    background: var(--loja-superficie);
    scrollbar-width: none;
}

.galeria-trilho::-webkit-scrollbar {
    display: none;
}

.galeria-foto {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .galeria-trilho {
        scroll-behavior: auto;
    }
}

.galeria-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.galeria-miniaturas img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--loja-borda);
    border-radius: 6px;
    background: var(--loja-superficie);
}

.galeria-miniaturas a:focus-visible img {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}


/* Atenção: o título existe no documento e não aparece na tela; display: none o tiraria também do leitor de tela */
.vitrine-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vitrine-contagem {
    margin: 0 0 1.5rem;
    color: var(--loja-texto-suave);
    font-size: 0.9rem;
}

.vitrine-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 559.98px) {
    .vitrine-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    overflow: hidden;
    background: var(--loja-fundo);
    box-shadow: var(--loja-sombra);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .card:hover {
        box-shadow: var(--loja-sombra-forte);
        transform: translateY(-3px);
    }

    .card:hover .card-acao {
        background: var(--loja-cor-primaria-escura);
    }
}

.card-link:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.card-imagem {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--loja-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-imagem img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.card-sem-imagem {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            var(--loja-superficie) 0 10px,
            var(--loja-borda) 10px 11px);
}

.card-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.9rem 1rem;
    flex: 1;
}

.card-nome {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--loja-texto);
}

.card-resumo {
    margin: 0;
    font-size: 0.85rem;
    color: var(--loja-texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-preco {
    margin: auto 0 0;
    padding-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--loja-cor-primaria);
}

.card-acao {
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.15s ease;
}

/* Atenção: depois das regras base do card: media query não soma especificidade, e no empate vence a última */
@media (max-width: 559.98px) {
    .card-corpo {
        padding: 0.7rem 0.7rem 0.85rem;
    }

    .card-nome {
        font-size: 0.9rem;
    }

    .card-preco {
        font-size: 1.05rem;
    }

    .card-acao {
        padding: 0.45rem 0.85rem;
        font-size: 0.78rem;
    }
}

.card-indisponivel {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #92400e;
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2.5rem 0 0;
    flex-wrap: wrap;
}

.paginacao-passo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    color: var(--loja-cor-primaria);
    text-decoration: none;
    font-weight: 600;
}

@media (hover: hover) {
    .paginacao-passo:not(.desabilitado):hover {
        background: var(--loja-superficie);
    }
}

.paginacao-passo.desabilitado {
    color: var(--loja-texto-suave);
    opacity: 0.5;
}

.paginacao-posicao {
    color: var(--loja-texto-suave);
    font-size: 0.9rem;
}


.vitrine-filtros {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
}

.vitrine-busca {
    display: flex;
    gap: 0.5rem;
    max-width: 680px;
    padding: 6px;
    border: 1px solid var(--loja-borda);
    border-radius: 999px;
    background: var(--loja-fundo);
    box-shadow: var(--loja-sombra);
}

.vitrine-busca:focus-within {
    border-color: var(--loja-cor-primaria);
}

.vitrine-busca input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    color: var(--loja-texto);
    background: var(--loja-fundo);
}

.vitrine-busca input[type="search"]:focus-visible {
    outline: none;
}

.vitrine-busca button {
    min-height: 44px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.vitrine-categorias {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.categoria-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 1rem;
    border: 1px solid var(--loja-borda);
    border-radius: 999px;
    background: var(--loja-fundo);
    color: var(--loja-texto);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (hover: none) {
    .categoria-chip {
        min-height: 44px;
    }
}

@media (hover: hover) {
    .categoria-chip:hover {
        background: var(--loja-superficie);
    }
}

.categoria-chip[aria-current="page"] {
    border-color: var(--loja-cor-primaria);
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font-weight: 600;
}

.categoria-chip:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.vitrine-vazia .ajuda a {
    color: var(--loja-cor-primaria);
    font-weight: 600;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn-secundario {
    border: 1px solid var(--loja-borda);
    background: var(--loja-fundo);
    color: var(--loja-texto);
}

.btn-remover {
    border: 1px solid var(--loja-borda);
    background: var(--loja-fundo);
    color: #b42318;
    font-weight: 500;
}

@media (hover: hover) {
    .btn-secundario:hover {
        background: var(--loja-superficie);
    }

    .btn-remover:hover {
        background: #fef3f2;
    }
}

/* Atenção: depois da regra base de .btn: as duas empatam em especificidade, e vence a última do arquivo */
.pedir .btn,
.carrinho .btn,
.finalizar .btn {
    margin-top: 0;
}

.carrinho h1,
.finalizar h1 {
    margin: 0 0 1.5rem;
    color: var(--loja-cor-primaria);
    font-size: 1.6rem;
}

.topo-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--loja-largura);
    margin: 0 auto;
    padding: 12px 16px;
}

.topo-conteudo .marca {
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

.topo-acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.topo-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--loja-cor-secundaria);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.topo-icone svg,
.navegacao-inferior svg,
.conta-em-breve-icone svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) {
    .topo-icone:hover {
        background: rgb(255 255 255 / 0.12);
    }
}

.topo-icone:focus-visible {
    outline: 2px solid var(--loja-cor-secundaria);
    outline-offset: 2px;
}

.topo-icone[aria-current="page"] {
    background: color-mix(in srgb, var(--loja-cor-secundaria) 16%, transparent);
}

/* ver documentation/decisoes/Web.Loja.md#o-foco-vai-para-o-título-depois-de-navegar */
h1[tabindex="-1"]:focus {
    outline: none;
}

h1[tabindex="-1"]:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 0.2em;
}

.carrinho-contagem {
    position: absolute;
    top: 2px;
    left: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--loja-cor-primaria);
    border-radius: 999px;
    background: var(--loja-cor-secundaria);
    color: var(--loja-cor-primaria);
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .topo-icone-rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .topo-icone {
        padding: 0 10px;
    }

    .marca-logo {
        max-height: 60px;
    }

    .marca-nome {
        font-size: clamp(1.05rem, 4.2vw + 0.2rem, 1.35rem);
    }
}

.carrinho-itens {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--loja-borda);
}

.carrinho-item {
    display: grid;
    /* Atenção: minmax(12rem, 1fr), não 1fr: o piso faz a coluna do nome ser a última a apertar */
    grid-template-columns: auto minmax(12rem, 1fr) auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--loja-borda);
}

/* Atenção: cada célula diz a sua coluna: sem a miniatura, que é condicional, a colocação automática desloca tudo uma casa */
.carrinho-miniatura {
    grid-column: 1;
}

.carrinho-descricao {
    grid-column: 2;
}

.carrinho-quantidade {
    grid-column: 3;
}

.carrinho-total-item {
    grid-column: 4;
}

.carrinho-item > form:last-child {
    grid-column: 5;
}

.carrinho-item-indisponivel .carrinho-nome,
.carrinho-item-indisponivel .carrinho-total-item {
    color: var(--loja-texto-suave);
}

.carrinho-miniatura {
    width: 64px;
    height: 64px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    object-fit: cover;
}

.carrinho-miniatura-vazia {
    border-color: transparent;
    background: var(--loja-superficie);
}

.carrinho-descricao {
    min-width: 0;
}

.carrinho-nome {
    color: var(--loja-texto);
    font-weight: 600;
    text-decoration: none;
}

.carrinho-preco-unitario,
.carrinho-aviso {
    margin: 4px 0 0;
    font-size: 0.88rem;
}

.carrinho-preco-unitario {
    color: var(--loja-texto-suave);
}

.carrinho-aviso {
    color: #b42318;
}

.carrinho-quantidade {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carrinho-quantidade input,
.pedir input {
    width: 6.5rem;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    background: var(--loja-fundo);
    color: var(--loja-texto);
    font-size: 1rem;
}

.carrinho-total-item {
    margin: 0;
    color: var(--loja-texto);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.carrinho-rodape {
    margin-top: 1.5rem;
}

.carrinho-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: 1.25rem;
}

.carrinho-total strong {
    color: var(--loja-cor-primaria);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.carrinho-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
}

.pedir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
}

.pedir label {
    color: var(--loja-texto-suave);
    font-size: 0.9rem;
}

/* Atenção: 900px, medido: a 608px a grade de cinco colunas ainda espremia a descrição */
@media (max-width: 899.98px) {
    .carrinho-item {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 12px;
    }

    .carrinho-descricao,
    .carrinho-quantidade,
    .carrinho-total-item,
    .carrinho-item > form:last-child {
        grid-column: 2;
    }

    .carrinho-miniatura {
        grid-row: 1 / span 4;
    }

    .carrinho-total-item {
        font-size: 1.05rem;
    }
}

.envio {
    max-width: 32rem;
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--loja-borda);
}

.envio h2 {
    margin: 0 0 0.35rem;
    color: var(--loja-cor-primaria);
    font-size: 1.2rem;
}

.campo-envio {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 1rem 0;
}

.campo-envio label {
    color: var(--loja-texto);
    font-size: 0.92rem;
    font-weight: 600;
}

.campo-envio input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    background: var(--loja-fundo);
    color: var(--loja-texto);
    /* Atenção: 1rem: abaixo de 16px o iOS dá zoom ao focar o campo, e a página sai do lugar */
    font-size: 1rem;
}

.campo-envio input:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 1px;
}

.campo-envio input.invalid {
    border-color: #b42318;
}

.escolha-envio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 1.25rem;
    margin: 1rem 0;
    padding: 0;
    border: 0;
}

.escolha-envio legend {
    width: 100%;
    margin-bottom: 6px;
    color: var(--loja-texto);
    font-size: 0.92rem;
    font-weight: 600;
}

.escolha-envio label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--loja-texto);
}

.escolha-envio input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--loja-cor-primaria);
}

/* Atenção: os campos de pessoa jurídica aparecem por padrão e somem com a física marcada: sem :has(), o navegador antigo mostra tudo em vez de esconder */
.envio:has(#comprar-como-fisica:checked) .so-juridica,
.envio:has(#comprar-como-juridica:checked) .so-fisica,
.envio:not(:has(#ie-contribuinte:checked)) .so-contribuinte,
.conta-acesso:has(#cadastro-fisica:checked) .so-juridica,
.conta-acesso:has(#cadastro-juridica:checked) .so-fisica,
.conta-acesso:not(:has(#cadastro-ie-contribuinte:checked)) .so-contribuinte {
    display: none;
}

.validation-message {
    color: #b42318;
    font-size: 0.85rem;
}

.aviso-erro {
    margin: 1rem 0;
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-radius: var(--loja-raio);
    background: #fef3f2;
    color: #b42318;
}

.aviso-ok {
    margin: 1rem 0;
    padding: 12px 14px;
    border: 1px solid #abefc6;
    border-radius: var(--loja-raio);
    background: #ecfdf3;
    color: #067647;
}

.pedido-recebido {
    max-width: 40rem;
}

.pedido-recebido h1 {
    margin: 0 0 0.5rem;
    color: var(--loja-cor-primaria);
    font-size: 1.7rem;
}

.pedido-recebido h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.1rem;
}

.aviso-destaque {
    margin: 1.25rem 0;
    padding: 14px 16px;
    border-left: 4px solid var(--loja-cor-primaria);
    border-radius: 0 var(--loja-raio) var(--loja-raio) 0;
    background: var(--loja-superficie);
    color: var(--loja-texto);
}

.pedido-identificacao {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 1.5rem 0;
}

.pedido-identificacao dt {
    color: var(--loja-texto-suave);
    font-size: 0.9rem;
}

.pedido-identificacao dd {
    margin: 0;
    color: var(--loja-texto);
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.pedido-itens {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--loja-borda);
}

.pedido-itens li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--loja-borda);
}

.pedido-item-nome {
    grid-column: 1;
    font-weight: 600;
}

.pedido-item-quantidade {
    grid-column: 1;
    color: var(--loja-texto-suave);
    font-size: 0.88rem;
}

.pedido-item-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pedido-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 1.25rem 0;
    font-size: 1.2rem;
}

.pedido-total strong {
    color: var(--loja-cor-primaria);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}

.pedido-recebido .btn {
    margin-top: 1.5rem;
}


.vitrine-boas-vindas {
    margin: 0 0 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
    border-radius: var(--loja-raio-grande);
    background:
        radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--loja-cor-secundaria) 28%, transparent), transparent 55%),
        linear-gradient(135deg, var(--loja-cor-primaria), var(--loja-cor-primaria-escura));
    border: 1px solid color-mix(in srgb, var(--loja-cor-secundaria) 35%, transparent);
    color: #fff;
    box-shadow: var(--loja-sombra);
}

.vitrine-boas-vindas-titulo {
    margin: 0 0 0.4rem;
    color: var(--loja-cor-secundaria);
    font-family: var(--loja-fonte-titulo);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
}

.vitrine-boas-vindas-texto {
    margin: 0;
    max-width: 640px;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    opacity: 0.92;
}

.navegacao-inferior {
    display: none;
}

@media (max-width: 767.98px) {
    .navegacao-inferior {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: flex;
        justify-content: space-around;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--loja-cor-primaria-escura);
        box-shadow: 0 -4px 16px rgb(0 0 0 / 0.12);
    }

    .navegacao-inferior a {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-height: 48px;
        justify-content: center;
        color: var(--loja-cor-secundaria);
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .navegacao-contagem {
        position: absolute;
        top: 2px;
        left: calc(50% + 6px);
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #fff;
        color: var(--loja-cor-primaria-escura);
        font-size: 0.68rem;
        line-height: 18px;
        text-align: center;
    }

    .navegacao-inferior a[aria-current="page"] {
        border-radius: var(--loja-raio);
        background: color-mix(in srgb, var(--loja-cor-secundaria) 16%, transparent);
        box-shadow: inset 0 3px 0 var(--loja-cor-secundaria);
    }

    .pagina-da-loja {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

.conta-em-breve {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 24px;
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
    box-shadow: var(--loja-sombra);
}

.conta-em-breve-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: var(--loja-fundo-tingido);
    color: var(--loja-cor-primaria);
}

.conta-em-breve-icone svg {
    width: 32px;
    height: 32px;
}

.conta-em-breve .ajuda {
    margin-top: 8px;
}

.conta-acesso h1 {
    margin: 0 0 12px;
    color: var(--loja-texto);
    font-family: var(--loja-fonte-titulo);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

.conta-acesso form {
    margin: 1rem 0;
}

.campo-codigo input {
    max-width: 12rem;
    font-size: 1.35rem;
    letter-spacing: 0.3em;
    text-align: center;
}

.conta-dados {
    max-width: 640px;
}

.conta-dados h2 {
    margin: 2rem 0 0.5rem;
    color: var(--loja-texto);
    font-size: 1.15rem;
}

.conta-dados h3 {
    margin: 1.5rem 0 0;
    font-size: 1rem;
}

.dado-fixo {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0;
}

.dado-fixo dt {
    color: var(--loja-texto-suave);
}

.dado-fixo dd {
    margin: 0;
    font-weight: 700;
}

.campo-envio select {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
    background: var(--loja-fundo);
    color: var(--loja-texto);
    /* Atenção: 1rem pelo mesmo motivo do input: abaixo de 16px o iOS dá zoom ao focar o campo */
    font-size: 1rem;
}

.campo-com-botao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.campo-com-botao input {
    flex: 1 1 8rem;
    min-width: 0;
}

/* Atenção: depois da regra base de .btn: as duas empatam em especificidade, e vence a última do arquivo */
.campo-com-botao .btn {
    margin-top: 0;
}

.escolha-simples {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.escolha-simples input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--loja-cor-primaria);
}

.lista-da-conta {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.lista-da-conta li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--loja-borda);
}

.lista-da-conta-texto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.lista-da-conta-texto address {
    flex-basis: 100%;
    font-style: normal;
}

.lista-da-conta-tipo {
    color: var(--loja-texto-suave);
    font-size: 0.9rem;
}

.lista-da-conta-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lista-da-conta-acoes form {
    margin: 0;
}

.selo-da-conta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--loja-superficie);
    border: 1px solid var(--loja-borda);
    color: var(--loja-texto);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-texto {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--loja-raio);
    background: none;
    color: var(--loja-cor-primaria);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.btn-texto-perigo {
    color: #b42318;
}

@media (hover: hover) {
    .btn-texto:hover {
        background: var(--loja-superficie);
    }
}

.envio-da-conta {
    margin: 0 0 1rem;
    padding: 12px 14px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio);
}

/* Atenção: a contagem existe mesmo vazia, para o script escrever nela; o display do .carrinho-contagem venceria o [hidden] do navegador */
[data-contagem-do-carrinho][hidden] {
    display: none;
}

.card-adicionar {
    padding: 0 0.9rem 1rem;
}

.card-adicionar button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.card-adicionar button:hover {
    background: var(--loja-cor-primaria-escura);
}

.card-adicionar button:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.card-adicionar button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.confirmacao-do-carrinho {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 0.75rem 3.25rem 0.75rem 1rem;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
    box-shadow: var(--loja-sombra-forte);
    color: var(--loja-texto);
    transform: translateX(-50%);
}

.confirmacao-do-carrinho:empty {
    display: none;
}

.confirmacao-do-carrinho p {
    margin: 0;
}

.confirmacao-fechar {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--loja-texto);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.confirmacao-fechar:hover {
    background: var(--loja-superficie);
}

.confirmacao-fechar:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.confirmacao-ver {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font-weight: 700;
    text-decoration: none;
}

/* Atenção: no desktop o aviso fica no alto, abaixo do cabeçalho fixo: embaixo ele cobriria o rodapé */
@media (min-width: 768px) {
    .confirmacao-do-carrinho {
        top: 7.5rem;
        right: 1.5rem;
        bottom: auto;
        left: auto;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .confirmacao-do-carrinho {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .card-adicionar {
        padding: 0 0.7rem 0.85rem;
    }
}

.card-no-carrinho {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--loja-cor-primaria);
}

.card-no-carrinho[hidden] {
    display: none;
}

.card-escolher {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 2px solid var(--loja-cor-primaria);
    border-radius: 999px;
    color: var(--loja-cor-primaria);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.card-escolher:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.carrinho-quantidade input[data-envia-ao-mudar] {
    width: 4.5rem;
    text-align: center;
}

.carrinho-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--loja-borda);
    border-radius: 999px;
    background: var(--loja-fundo);
    color: var(--loja-texto);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.carrinho-passo:hover {
    background: var(--loja-superficie);
}

.carrinho-passo:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

.carrinho-passo:disabled,
.carrinho-quantidade button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.produto-relacionados {
    margin-top: 48px;
    border-top: 1px solid var(--loja-borda);
    padding-top: 24px;
}

.produto-relacionados h2 {
    margin: 0 0 16px;
    color: var(--loja-cor-primaria);
    font-family: var(--loja-fonte-titulo);
    font-size: 1.375rem;
}

.relacionados-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.relacionado {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
    color: inherit;
    text-decoration: none;
}

.relacionado img,
.relacionado .card-sem-imagem {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.relacionado-nome {
    font-size: 0.9rem;
    font-weight: 700;
}

.relacionado-preco {
    margin-top: auto;
    color: var(--loja-cor-primaria);
    font-weight: 800;
}

.relacionado:focus-visible {
    outline: 2px solid var(--loja-cor-primaria);
    outline-offset: 2px;
}

/* Atenção: depois das regras base da página do produto: media query não soma especificidade, e no empate vence a última */
@media (max-width: 767.98px) {
    .produto {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pagina-da-loja:has(.produto-compra) {
        padding-bottom: calc(136px + env(safe-area-inset-bottom));
    }

    .produto-compra {
        position: fixed;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        left: 0;
        z-index: 25;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-top: 1px solid var(--loja-borda);
        background: var(--loja-fundo);
        box-shadow: 0 -6px 16px rgb(0 0 0 / 0.08);
    }

    .produto-compra .preco {
        margin: 0;
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .produto-compra .selo-disponivel {
        display: none;
    }

    .produto-compra .pedir {
        flex: 1;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
        margin: 0;
    }

    .produto-compra .pedir label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .produto-compra .pedir input {
        width: 4.25rem;
    }

    .produto-compra .pedir .btn {
        padding-inline: 12px;
        white-space: nowrap;
    }

    body:has(.produto-compra) .confirmacao-do-carrinho {
        bottom: calc(144px + env(safe-area-inset-bottom));
    }

    .produto-compra .produto-no-carrinho {
        position: absolute;
        right: 16px;
        bottom: 100%;
        padding: 2px 10px;
        border-radius: var(--loja-raio) var(--loja-raio) 0 0;
        background: var(--loja-fundo);
        font-size: 0.85rem;
    }

    .relacionados-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.btn-largo {
    display: block;
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    font-size: 1.05rem;
}

.btn-discreto {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--loja-texto-suave);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.carrinho-esvaziar {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.carrinho-rodape {
    max-width: 32rem;
    margin-left: auto;
}

.finalizar-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: 40px;
    align-items: start;
}

.finalizar .envio {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.etapa {
    margin: 0 0 1.5rem;
    padding: 0 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--loja-borda);
}

.etapa > legend,
.etapa-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--loja-cor-primaria);
    font-size: 1.15rem;
    font-weight: 700;
}

.etapa-numero {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
    font-size: 0.9rem;
}

.etapa-enviar {
    border-bottom: 0;
}

.campo-envio .ajuda {
    margin: 0;
}

.finalizar-resumo-lateral {
    position: sticky;
    top: 1.5rem;
    padding: 16px 18px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
}

.finalizar-resumo-lateral h2 {
    margin: 0 0 0.75rem;
    color: var(--loja-cor-primaria);
    font-size: 1.15rem;
}

.resumo-itens {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.resumo-itens li,
.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 6px 0;
    font-variant-numeric: tabular-nums;
}

.resumo-quantidade {
    color: var(--loja-texto-suave);
    white-space: nowrap;
}

.resumo-total {
    border-top: 1px solid var(--loja-borda);
    padding-top: 10px;
    font-size: 1.1rem;
}

.resumo-total strong {
    color: var(--loja-cor-primaria);
}

.finalizar-resumo-celular {
    display: none;
}

/* Atenção: depois das regras base do checkout: media query não soma especificidade, e no empate vence a última */
@media (max-width: 767.98px) {
    .finalizar-colunas {
        grid-template-columns: minmax(0, 1fr);
    }

    .finalizar-resumo-lateral {
        display: none;
    }

    .finalizar-resumo-celular {
        display: block;
        margin: 0 0 1.25rem;
        padding: 12px 14px;
        border: 1px solid var(--loja-borda);
        border-radius: var(--loja-raio);
        background: var(--loja-fundo);
    }

    .finalizar-resumo-celular summary {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        align-items: center;
        font-weight: 700;
        cursor: pointer;
    }

    .finalizar-resumo-total {
        color: var(--loja-cor-primaria);
        white-space: nowrap;
    }

    .carrinho-rodape {
        max-width: none;
    }
}

.area-da-conta {
    display: grid;
    grid-template-columns: 13rem minmax(0, 720px);
    gap: 32px;
    justify-content: center;
    align-items: start;
}

/* ver documentation/decisoes/Web.Loja.md#a-moldura-da-área-do-cliente */
.area-da-conta-lateral {
    display: grid;
    grid-template-areas: "rotulo" "menu" "sair";
    gap: 12px;
}

.area-da-conta-rotulo {
    grid-area: rotulo;
    margin: 0;
    color: var(--loja-texto-suave);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-da-conta {
    grid-area: menu;
}

.menu-da-conta ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-da-conta a,
.menu-da-conta-sair {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--loja-raio);
    background: none;
    color: var(--loja-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-da-conta a[aria-current="page"] {
    background: var(--loja-cor-primaria);
    color: var(--loja-cor-secundaria);
}

.menu-da-conta a:focus-visible,
.menu-da-conta-sair:focus-visible {
    outline: 3px solid var(--loja-texto);
    outline-offset: 2px;
}

.area-da-conta-sair {
    grid-area: sair;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--loja-borda);
}

.menu-da-conta-sair {
    color: var(--loja-texto-suave);
}

@media (hover: hover) {
    .menu-da-conta a:not([aria-current="page"]):hover,
    .menu-da-conta-sair:hover {
        background: var(--loja-superficie);
    }
}

.area-da-conta-conteudo {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.area-da-conta .conta-em-breve {
    max-width: none;
    margin: 0;
}

.conta-sem-menu {
    display: grid;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
}

/* Títulos e links da área em cor neutra: a cor da loja sobre o fundo claro não tem contraste garantido */
.pagina-da-conta-topo h1 {
    margin: 0;
    color: var(--loja-texto);
    font-family: var(--loja-fonte-titulo);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    line-height: 1.2;
}

.pagina-da-conta-voltar {
    margin: 0 0 8px;
}

.pagina-da-conta-voltar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--loja-texto);
    font-weight: 600;
}

.pagina-da-conta-descricao {
    margin: 4px 0 0;
    color: var(--loja-texto-suave);
}

.area-da-conta-conteudo a:not(.btn),
.area-da-conta-conteudo .btn-texto,
.conta-sem-menu a:not(.btn) {
    color: var(--loja-texto);
}

.area-da-conta-conteudo .btn-texto-perigo {
    color: #b42318;
}

.conta-cartao {
    padding: 24px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
}

.conta-cartao h2 {
    margin: 0 0 12px;
    color: var(--loja-texto);
    font-size: 1.0625rem;
}

.conta-cartao h3 {
    margin: 16px 0 8px;
    font-size: 1rem;
}

.conta-cartao > :last-child {
    margin-bottom: 0;
}

.dado-de-acesso {
    margin: 0 0 4px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.conta-vazio {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 32px 24px;
    border: 1px dashed var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
}

.conta-vazio p,
.falha-da-conta p {
    margin: 0;
}

.conta-vazio .btn,
.falha-da-conta .btn {
    margin-top: 0;
}

.falha-da-conta {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 24px;
    border: 1px solid #fecdca;
    border-radius: var(--loja-raio-grande);
    background: #fef3f2;
    color: #b42318;
}

.lista-de-pedidos {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ver documentation/decisoes/Web.Loja.md#o-pedido-é-um-cartão-com-um-link-só */
.cartao-de-pedido {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "titulo selo seta" "resumo selo seta" "dica dica dica";
    align-items: center;
    gap: 4px 12px;
    padding: 16px 24px;
    border: 1px solid var(--loja-borda);
    border-radius: var(--loja-raio-grande);
    background: var(--loja-fundo);
}

@media (hover: hover) {
    .cartao-de-pedido:hover {
        border-color: color-mix(in srgb, var(--loja-texto) 30%, var(--loja-borda));
    }
}

.cartao-de-pedido:has(a:focus-visible) {
    outline: 3px solid var(--loja-texto);
    outline-offset: 2px;
}

.cartao-de-pedido-titulo {
    grid-area: titulo;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.cartao-de-pedido-titulo a {
    color: var(--loja-texto);
    text-decoration: none;
}

.cartao-de-pedido-titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.cartao-de-pedido-titulo a:focus-visible {
    outline: none;
}

.cartao-de-pedido-selo {
    grid-area: selo;
    justify-self: start;
}

.cartao-de-pedido-resumo {
    grid-area: resumo;
    margin: 0;
    color: var(--loja-texto-suave);
    font-size: 0.9375rem;
}

.cartao-de-pedido-resumo strong {
    color: var(--loja-texto);
    font-variant-numeric: tabular-nums;
}

.cartao-de-pedido-seta {
    grid-area: seta;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--loja-texto-suave);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cartao-de-pedido-dica {
    grid-area: dica;
    margin: 4px 0 0;
    color: var(--loja-texto-suave);
    font-size: 0.875rem;
}

.selo-em-andamento,
.selo-encerrado {
    border: 0;
}

.selo-em-andamento::before,
.selo-encerrado::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.selo-em-andamento {
    background: #ecfdf3;
    color: #067647;
}

.selo-encerrado {
    background: #f2f4f7;
    color: #475467;
}

.paginacao-da-conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--loja-texto-suave);
}

.paginacao-da-conta .btn {
    margin-top: 0;
}

.situacao-do-pedido {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.situacao-do-pedido p,
.situacao-do-pedido h3 {
    margin: 0;
}

.passos-do-pedido {
    margin: 0;
    padding-left: 1.25rem;
}

.passos-do-pedido li {
    margin: 6px 0;
}

.motivo-do-pedido {
    justify-self: stretch;
    padding: 12px 16px;
    border-left: 4px solid var(--loja-texto-suave);
    border-radius: var(--loja-raio);
    background: var(--loja-superficie);
}

.motivo-do-pedido-rotulo {
    display: block;
    color: var(--loja-texto-suave);
    font-size: 0.8125rem;
    font-weight: 700;
}

.itens-do-pedido {
    margin: 0;
    padding: 0;
    list-style: none;
}

.itens-do-pedido li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--loja-borda);
}

.itens-do-pedido li > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.item-do-pedido-nome {
    overflow-wrap: anywhere;
}

.item-do-pedido-conta {
    color: var(--loja-texto-suave);
    font-size: 0.875rem;
}

.item-do-pedido-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.resumo-do-pedido {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
}

.resumo-do-pedido div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.resumo-do-pedido dt {
    color: var(--loja-texto-suave);
}

.resumo-do-pedido dd {
    margin: 0;
    text-align: right;
}

.resumo-do-pedido-total {
    padding-top: 8px;
    border-top: 1px solid var(--loja-borda);
}

.resumo-do-pedido-total dt,
.resumo-do-pedido-total dd {
    color: var(--loja-texto);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Atenção: depois das regras base da área: media query não soma especificidade, e no empate vence a última */
@media (max-width: 767.98px) {
    .area-da-conta {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .area-da-conta-lateral {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "rotulo sair" "menu menu";
        align-items: center;
        gap: 8px;
    }

    .area-da-conta-sair {
        padding-top: 0;
        border-top: 0;
    }

    .area-da-conta-sair .menu-da-conta-sair {
        width: auto;
        padding: 0 4px;
        text-decoration: underline;
    }

    .menu-da-conta ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .menu-da-conta a {
        justify-content: center;
        padding: 0 8px;
        border: 1px solid var(--loja-borda);
        background: var(--loja-fundo);
        text-align: center;
    }

    .area-da-conta .conta-em-breve {
        padding: 24px 16px;
    }

    .conta-cartao {
        padding: 16px;
    }

    .cartao-de-pedido {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "selo seta" "titulo seta" "resumo seta" "dica dica";
        padding: 16px;
    }
}

.pagina-da-conta-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.pagina-da-conta-titulo .btn {
    margin-top: 0;
}

.acoes-do-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.acoes-do-formulario .btn {
    margin-top: 0;
}

.campos-em-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
}

.campos-cidade-e-uf {
    grid-template-columns: minmax(0, 1fr) 5rem;
}

.campos-em-linha .campo-envio {
    min-width: 0;
}

/* ver documentation/decisoes/Web.Loja.md#remover-pede-confirmação-e-diz-o-que-sai */
.remocao summary,
.acrescentar-contato summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
}

.remocao summary::-webkit-details-marker,
.acrescentar-contato summary::-webkit-details-marker {
    display: none;
}

.remocao[open] {
    flex-basis: 100%;
}

.remocao-confirmacao {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid #fecdca;
    border-radius: var(--loja-raio);
    background: #fef3f2;
}

.remocao-confirmacao p,
.remocao-confirmacao form {
    margin: 0;
}

.remocao-confirmacao .btn {
    margin-top: 0;
}

.acrescentar-contato {
    margin-top: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--loja-borda);
}

.acrescentar-contato summary {
    color: var(--loja-texto);
    font-weight: 600;
    text-decoration: underline;
}

.acrescentar-contato summary::before {
    content: "+";
    margin-right: 6px;
    text-decoration: none;
}

.acrescentar-contato[open] summary {
    margin-bottom: 8px;
}

.enderecos-da-conta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.endereco-da-conta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conta-cartao .endereco-da-conta-tipo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.endereco-da-conta address {
    font-style: normal;
    overflow-wrap: anywhere;
}

.acoes-do-endereco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: auto;
    padding-top: 8px;
}

.acoes-do-endereco .btn,
.acoes-do-endereco form {
    margin: 0;
}

.conta-alternativa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--loja-borda);
}

.conta-alternativa p {
    margin: 0;
    color: var(--loja-texto-suave);
}

.conta-alternativa .btn {
    margin-top: 0;
}

/* Atenção: depois das regras base: media query não soma especificidade, e no empate vence a última */
@media (max-width: 767.98px) {
    .conta-em-breve {
        padding: 32px 16px;
    }

    .area-da-conta .conta-em-breve {
        padding: 24px 16px;
    }

    .acoes-do-formulario {
        justify-content: stretch;
    }

    .acoes-do-formulario .btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

.topo-busca {
    flex: 1 1 320px;
    max-width: 560px;
    padding: 4px;
    border-color: transparent;
}

.topo-busca input[type="search"],
.topo-busca button {
    min-height: 40px;
}

@media (max-width: 767.98px) {
    .topo-conteudo {
        flex-wrap: wrap;
    }

    .topo-busca {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
}